Nerdiest Precious Modules

    vue-classnames

    0.1.0 • Public • Published

    :construction: vue-classnames :construction:

    Installation

    yarn add vue-classnames
    # or 
    npm i vue-classnames

    Activation

    There are two ways of activating this package: globally and locally. If you want to use it on a single component, it would be a good idea to go with the local method:

    import { mixin as classNamesMixin } from 'vue-classnames';
     
    Vue.component('my-component', {
      mixins: [classNamesMixin],
    });
     
    // or SFC
    export default {
      mixins: [classNamesMixin],
    };

    To activate it globally, just use this package as Vue plugin, like so:

    import VueClassNames from 'vue-classnames';
     
    Vue.use(VueClassNames);

    Usage

    Heading.vue Content.vue
    <template>
      <div :class="$classNames()">
          <h1><slot /></h1>
      </div>
    </template>
    
    
    <template>
      <section>
          <Heading large padded>SFC demo</Heading>
          <!-- or simply -->
          <Heading big>SFC demo</Heading>
      </section>
    </template>
    
    Output
    <section>
      <div class="relaxed large">
        <h1>SFC demo</h1>
      </div>
    </section>

    API

    vm.$classNames(defaultClassName = null)

    Returns an array of the class names, otherwise defaultClassName.

    className

    • If true, then prop name will be also name of the class.
    • If value is a string, then it will be name of the class.
    • If value is a function then it will be executed with following object as argument { name, value, props }, where name and value are current prop name and value, and props contains all props passed to the component.
    • If value is array, then each element is treated as a single className.
    NOTE:

    If className is a function or an array, then both function output and each array element will be processed as a single className, which means that all above rules apply to them.

    EXAMPLE:
    export default {
       props: {
         test1: {
           // `$classNames` will return `['test1']` if `otherProp` is truthy.
           className: ({ props }) => !!props.otherProp,
         },
         test2: {
           // `$classNames` will return `['better-class']` if `someOtherProp` is truthy.
           className: ({ props }) => !!props.someOtherProp && 'better-class',
         },
         test3: {
           // `$classNames` will return `['btn', 'btn-blue']` if `blue` is truthy.
           className: ({ props }) => !!props.blue && ['btn', 'btn-blue'],
         },
         test4: {
           // `$classNames` will return `['test4']` if this prop value is `some-value`.
           className: ({ name, value }) => (value === 'some-value' && name),
         },
         test5: {
           // `$classNames` will return `['btn', 'btn-large', 'btn-relaxed']` if `padded` is truthy,
           // otherwise it will return `['btn', 'btn-large']`.
           className: ['btn', 'btn-large', ({ props }) => !!props.padded && 'btn-relaxed'],
         },
      },
    };

    Install

    npm i vue-classnames

    DownloadsWeekly Downloads

    4

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    6.76 kB

    Total Files

    4

    Last publish

    Collaborators

    • visualfanatic