fela-vue
    TypeScript icon, indicating that this package has built-in type declarations

    2.6.0-beta.44 • Public • Published

    fela-vue

    Fela mixin for Vue designed for flexibility yet team-oriented. website.

    Build Status codecov bundlephobia npm Deps DevDeps (tree-shaking friendly!)

    Fela does the great job, but it has no idea how to cook it with Vue. This is what I've created after combining vue's :style and :class attributes to make apps dynamically configured and easiest to write and maintain.

    Included as deps:

    The plugins are a lite most useful part of fela-preset-web.

    USAGE

    More about plugins. Several basic are already built in here!

    More about enhancers. I suggest to look at this one first to have nice-looking classes during development.

    Usage with literal css (lit-css) from this package

    In the options object below you can also add other Renderer options

    // All of the options are optional.
    const options = {
      // Default styles to mix. Does not mix if omitted.
      // Have a look at the example below to see it in action.
      // Either pass a function (then key would be `fdef`):
      defStyles: (componentInstance) => ({ colors: { cyan: 'cyan' } }),
      // ... Or an object with your own key:
      defStyles: {
        key: 'fdef',
        value: (componentInstance) => ({ colors: { cyan: 'cyan' } })
      },
      // Name of styling method. Defaults to `f`.
      method: 'f',
      // Additional fela plugins.
      plugins: [],
      // Additional fela enhancers.
      enhancers: [],
      // Preset configurations.
      preset: {
        // Config for fela-plugin-unit. Same defaults ('px', {}).
        unit: ['em', { margin: '%' }]
      },
      // SSR status.
      ssr: false
    }
     
    const renderer = new Renderer(options)
     
    // Use globally
    Vue.mixin(renderer.mixin)
    // ... Or per module
    export default {
      mixins: [ renderer.mixin ],
      // ...
    }

    EXAMPLES

    ** same options object as above **

    WITHOUT SSR

    main.js

    import Vue from 'vue'
    import { Renderer } from 'fela-vue'
     
    Vue.mixin( (new Renderer(options)).mixin )

    WITH SSR

    entry.server.js is the same as entry.client.js

    import Vue from 'vue'
    import { Renderer } from 'fela-vue'
    // OR const { Renderer } = require('fela-vue')
     
    const renderer = new Renderer({
      ...options,
      // SSR status to `true`.
      ssr: true
    })
     
    Vue.mixin(renderer.mixin)

    Then just put renderer.style into your template.

    Component example

    MyComponent.vue

    <template>
      <div :class="f('wrapper')">
        <span :class="f('one')"> It's green! </span>
        <span :class="f('two')"> It's cyan! </span>
        <span :class="f('three', {color: 'white'})"> you don't see me! </span>
        <span :class="f({color: 'yellow'})"> I do it by myself! </span>
        <span :class="f('one two, bold')"> Combined classes by commas and spaces </span>
        <span :class="f('bold my-kebab')"> And kebab-case! </span>
        <span :class="f('bold myKebab')"> The same! </span>
        <span :class="f('button one')">
          If class is not in local style(), it will be taken from defaults (defStyles), if present.
          Here's button could be taken from there, then merged with `one`
          where is `one` is in priority: right to left principle.
        </span>
        <div v-for="i in [0,1,2]">
          <span
            :class="f((i) => ({color: ['green', 'blue', 'yellow'][i]}))"
          > This way is OK too. </span>
        </div>
      </div>
    </template>
     
    <script>
    // Uncomment to use literal css: css`...`
    // import { css } from 'fela-vue'
     
    export default {
      computed: {
        style() {
          // Or any other key in `options.defStyles.key`.
          const { colors } = this.fdef
     
          // Also, it's OK to return one css`...` with all classes included.
          return {
            one: {
              color: 'green'
            },
            two: {
              color: colors.cyan
            },
            three: ({color}) => {
              fontWeight: 'bold',
              color
            },
            bold: () => ({
              fontWeight: 'bold'
            }),
            // 'my-kebab' is also valid if the same in the template.
            myKebab: {
              color: 'purple'
            },
            anotherClass: css`
              background: grey
            `,
            ...css`
              .other-class {
                margin-top: 44; // still ok for fela. will be 44px.
                // you can comment a whole line,
                margin-left: 22 // this's OK too.
                /* block comments are also supported. */
                :hover {
                  // no colons and semicolons are ok.
                  background grey
                }
              }
              .anotherOne {
                padding: 15
              }
            `
          }
        }
      }
    }
    </script>

    It's better to make this computed in the end of a component definition or make a const variable at the bottom and return it from the computed prop.

    Also, It's very handy to make snippets for adding style() {} to computed.

    Install

    npm i fela-vue

    DownloadsWeekly Downloads

    166

    Version

    2.6.0-beta.44

    License

    MIT

    Unpacked Size

    58.6 kB

    Total Files

    35

    Last publish

    Collaborators

    • houd1ni