https://github.com/dimensi/vue-module-class-generator

Module class helper generator for vue css modules
https://github.com/dimensi/vue-module-class-generator

Last synced: 14 days ago
JSON representation

Module class helper generator for vue css modules

• Host: GitHub
• URL: https://github.com/dimensi/vue-module-class-generator
• Owner: dimensi
• License: mit
• Created: 2018-10-12T13:21:37.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-05-09T20:22:16.000Z (over 3 years ago)
• Last Synced: 2024-04-26T13:03:05.944Z (8 months ago)
• Language: JavaScript
• Size: 104 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-module-class-generator

Module class helper generator for vue css modules

## Install

yarn

```

yarn add vue-module-class-generator

```

npm

```

npm i vue-module-class-generator

```

## Usage

### Syntax

```ts

interface Mods {

  [key: string]: boolean | string

}

c(mainClass?: string | Mods, mods?: Mods)

```

### Install as vue plugin

```js

import Vue from 'vue'

import ClassGenerator from 'vue-module-class-generator'

Vue.use(classGenerator, {

  methodName: 'c', // default

  prefix: {

    mod: '', // if 'is' === isActive else 'active'

    modKey: '', // if is === colorIsRed else colorRed

  },

})

```

### Mixin

```js

import { classMixin } from 'vue-module-class-generator'

export default {

  name: 'block',

  mixins: [classMixin(config)]

}

```

### Use in template

```html

  


  
 


import { classMixin } from 'vue-module-class-generator'

export default {

  name: 'block',

  props: {

    active: Boolean,

    color: String,

  },

  mixins: [classMixin()]

}

.block {

  display: block;

}

.active {

  background-color: blue;

}

.colorRed {

  color: red;

}

```

## Options

`methodName: string` - set methodName in component

```js

import { classMixin } from 'vue-module-class-generator'

export default {

  mixins: [classMixin(), classMixin({ methodName: 'gen' })],

  mounted() {

    typeof this.c === 'function' // true

    typeof this.gen === 'function' // true

  }

}

```

`prefix.mod: string` - set prefix to boolean mode

```js

// prefix.mod = 'is'

c($style.element, { active: true }) // [$style.element, $style.isActive]

// prefix.mod = ''

c($style.element, { active: true }) // [$style.element, $style.active]

```

`prefix.modKey: string` - set prefix to key mode

```js

// prefix.modKey = 'is'

c($style.element, { color: 'red' }) // [$style.element, $style.colorIsRed]

// prefix.modKey = ''

c($style.element, { color: 'red' }) // [$style.element, $style.colorRed]

```