{"id":17932469,"url":"https://github.com/cheap-glitch/vue-css-modifiers","last_synced_at":"2025-03-24T05:32:29.679Z","repository":{"id":53712908,"uuid":"223595513","full_name":"cheap-glitch/vue-css-modifiers","owner":"cheap-glitch","description":"🖌️ A tiny Vue directive to simplify the manipulation of CSS modifier classes.","archived":false,"fork":false,"pushed_at":"2022-03-30T15:31:27.000Z","size":1815,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-03-22T22:42:58.675Z","etag":null,"topics":["bem","bem-css","bem-modifiers","css","vue","vue-directive"],"latest_commit_sha":null,"homepage":"https://npm.im/vue-css-modifiers","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cheap-glitch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-23T13:45:43.000Z","updated_at":"2023-08-13T10:51:57.000Z","dependencies_parsed_at":"2022-09-26T19:13:31.428Z","dependency_job_id":null,"html_url":"https://github.com/cheap-glitch/vue-css-modifiers","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheap-glitch%2Fvue-css-modifiers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheap-glitch%2Fvue-css-modifiers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheap-glitch%2Fvue-css-modifiers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheap-glitch%2Fvue-css-modifiers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheap-glitch","download_url":"https://codeload.github.com/cheap-glitch/vue-css-modifiers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245217139,"owners_count":20579288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","bem-css","bem-modifiers","css","vue","vue-directive"],"created_at":"2024-10-28T21:27:27.257Z","updated_at":"2025-03-24T05:32:29.381Z","avatar_url":"https://github.com/cheap-glitch.png","language":"JavaScript","readme":"# 🖌️ vue-css-modifiers\n\n[![License](https://shields.io/github/license/cheap-glitch/vue-css-modifiers)](LICENSE)\n[![Latest release](https://shields.io/github/v/release/cheap-glitch/vue-css-modifiers?sort=semver\u0026label=latest%20release\u0026color=green)](https://github.com/cheap-glitch/vue-css-modifiers/releases/latest)\n[![Coverage status](https://shields.io/coveralls/github/cheap-glitch/vue-css-modifiers)](https://coveralls.io/github/cheap-glitch/vue-css-modifiers)\n\n**vue-css-modifiers** provides  a tiny, zero-dependencies directive  to simplify\nthe manipulation of CSS modifier classes.\n\nFor example, the following template:\n\n```html\n\u003ctemplate\u003e\n\t\u003cdiv\n\t\t:class=\"{ 'is-hidden': isHidden, 'is-nav-sticky': isNavSticky }\"\n\t\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\ncan be shortened to:\n\n```html\n\u003ctemplate\u003e\n\t\u003cdiv v-mods=\"{ isHidden, isNavSticky }\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe modifier classes merge seamlessly with other static and dynamic classes. You\ncan also easily enforce the style of  your choosing (`is-` or BEM) with a simple\ndirective modifier.\n\nUsing a  different directive to declare  CSS modifiers also brings  the indirect\nbenefit of a clear separation between the main classes and their modifiers.\n\n## Installation\n\n```\nnpm i vue-css-modifiers\n```\n\n## Usage\n\nImport and register the directive in the entry point of your app:\n\n```javascript\n// main.js\n\nimport Vue from 'vue';\nimport VueCSSModifiers from 'vue-css-modifiers';\n\nVue.directive('mods', VueCSSModifiers);\n// […]\n```\n\nCall the directive using one of the following expressions:\n * a string denoting a class name\n * an array of strings denoting some class names\n * an object whose keys are properties and values booleans\n\nExamples:\n\n```html\n\u003ctemplate\u003e\n\t\u003c!-- With the string expression, the class name will be\n\t     added/removed if the property with the corresponding\n\t     camel case name is true/false --\u003e\n\t\u003cdiv v-mods=\"'is-hidden'\"\u003e\u003c/div\u003e\n\t\u003c!-- Output: \u003cdiv class=\"is-hidden\"\u003e\u003c/div\u003e --\u003e\n\n\t\u003c!-- Same thing but with several classes --\u003e\n\t\u003cdiv v-mods=\"['is-hidden', 'is-flipped', 'is-height-fixed']\"\u003e\u003c/div\u003e\n\t\u003c!-- Output: \u003cdiv class=\"is-hidden is-height-fixed\"\u003e\u003c/div\u003e --\u003e\n\n\t\u003c!-- With an object expression, the names of the properties will be\n\t     converted to kebab case --\u003e\n\t\u003cdiv v-mods=\"{ isNavSticky, isSpinning: name === 'spinner' }\"\u003e\u003c/div\u003e\n\t\u003c!-- Output: \u003cdiv class=\"is-height-fixed is-spinning\"\u003e\u003c/div\u003e --\u003e\n\n\t\u003c!-- Works with both props and data --\u003e\n\t\u003cdiv v-mods=\"{ isOpened, isNavSticky }\"\u003e\u003c/div\u003e\n\t\u003c!-- Output: \u003cdiv class=\"is-opened is-height-fixed\"\u003e\u003c/div\u003e --\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\texport default {\n\t\tprops: {\n\t\t\tname: {\n\t\t\t\ttype: String,\n\t\t\t\trequired: true,\n\t\t\t},\n\t\t\tisOpened: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true,\n\t\t\t},\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tisHidden: true,\n\t\t\t\tisFlipped: false,\n\t\t\t\tisNavSticky: true,\n\t\t\t};\n\t\t},\n\t};\n\u003c/script\u003e\n```\n\n### Syntax modifiers\n\nUse the `is` modifier to automatically prefix all modifier classes with `is-`:\n\n```html\n\u003cdiv v-mods.is=\"{ hidden, isNavSticky }\"\u003e\u003c/div\u003e\n\u003c!-- Output: \u003cdiv class=\"is-hidden, is-height-fixed\"\u003e\u003c/div\u003e --\u003e\n```\n\nUse the `bem` modifier  to add the modifier class as a  suffix to another class.\nThis base class can either be  defined explicitly  through a directive argument,\nor left implicit (in that case, the directive will use the first class it founds\nthat is not a BEM modifier). Either way, if the base class is not present on the\nelement, the modifier will not be added.\n\n```html\n\u003c!-- Implicit base class --\u003e\n\u003cdiv class=\"navbar\" v-mods.bem=\"{ hidden }\"\u003e\u003c/div\u003e\n\u003c!-- Output: \u003cdiv class=\"navbar navbar––hidden\"\u003e\u003c/div\u003e --\u003e\n\n\u003c!-- Explicit base class --\u003e\n\u003cdiv class=\"left sidebar\" v-mods:sidebar.bem=\"{ hidden }\"\u003e\u003c/div\u003e\n\u003c!-- Output: \u003cdiv class=\"left sidebar sidebar––hidden\"\u003e\u003c/div\u003e --\u003e\n\n\u003c!-- Dynamic base class --\u003e\n\u003cdiv :class=\"`menu-${menuPos}`\" v-mods:menu-top.bem=\"{ hidden }\"\u003e\u003c/div\u003e\n\u003c!-- Output:\n       \u003cdiv class=\"menu-bottom\"\u003e\u003c/div\u003e               (menuPos === 'bottom')\n       \u003cdiv class=\"menu-top menu-top––hidden\"\u003e\u003c/div\u003e (menuPos === 'top')\n--\u003e\n\n\u003c!-- Dynamic base class with dynamic argument --\u003e\n\u003cdiv :class=\"`navbar-${navbarPos}`\" v-mods:[`navbar-${navbarPos}`].bem=\"{ hidden }\"\u003e\n\u003c/div\u003e\n\u003c!-- Output: \u003cdiv class=\"navbar-left navbar-left––hidden\"\u003e\u003c/div\u003e --\u003e\n```\n\n### Using `is-` or BEM syntax by default\n\nIf you  register the  directive with  the name  `is` or  `bem`, it  will discard\nmodifiers and always enforce the respective syntax.\n\n```javascript\n// main.js\n\nimport Vue from 'vue';\nimport VueCSSModifiers from 'vue-css-modifiers';\n\nVue.directive('is',  VueCSSModifiers);\nVue.directive('bem', VueCSSModifiers);\n// […]\n```\n\n```html\n\u003cdiv class=\"navbar\" v-is=\"{ hidden }\"\u003e\u003c/div\u003e\n\u003c!-- Output: \u003cdiv class=\"navbar is-hidden\"\u003e\u003c/div\u003e --\u003e\n\n\u003cdiv class=\"navbar\" v-bem=\"{ hidden }\"\u003e\u003c/div\u003e\n\u003c!-- Output: \u003cdiv class=\"navbar navbar––hidden\"\u003e\u003c/div\u003e --\u003e\n```\n\n## Changelog\n\nSee the full changelog [here](https://github.com/cheap-glitch/vue-css-modifiers/releases).\n\n## Contributing\n\nContributions are welcomed! Please open an issue before submitting substantial changes.\n\n## License\n\nISC\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheap-glitch%2Fvue-css-modifiers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheap-glitch%2Fvue-css-modifiers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheap-glitch%2Fvue-css-modifiers/lists"}