vuezik v1.0.9

Vuezik - Real (SFC) Single-File Components for Vue3

Vuezik is pronounced like music but with "Vue-" instead of "Mu-"

Information

dist/bundle.js | 39.75 KiB / gzip: 12.70 KiB

Install

npm install vuezik

Uses

• @emotion/css
• xtyle

$style (Global-Variable) | @Emotion-CSS

$device (Global-Variable)

Directives

<template>
  <div
    v-ripple
    v-wheel="log"
    v-swipe="log"
    v-resize="log"
    v-click-outside="log"
  >
    {{ $device }}
  </div>
  <button v-ripple="{ color: red, center: true, class: 'some-class' }">
    Click Me
  </button>
</template>
<script>
  export default {
    methods: {
      log(data) {
        console.log(data);
      },
    },
  };
</script>

Component

<x-element resize class="only-once-per-project-use-resize">
  My App Container
  <br />
  {{ $device }}
  <br />
  <div v-if='$device.is("xs", "sm")'>Show Content Only On Devices(XS, SM)</div>
</x-element>

Props

CSS (Prop)

CSS (Only) Main

• active

active only works on the Main (Object-Style)

CSS Active & Children

• base
• hover
• focus

active & children only have 3 props

Demo

<script>
  export default {
    computed: {
      css() {
        return {
          base: {},
          hover: {},
          hoverAndFocus: true,
          active: {
            base: {},
            hover: {},
            focus: {},
          },
          children: {
            "children-class": {
              base: {},
              hover: {},
              focus: {},
            },
          },
        };
      },
    },
  };
</script>

Example

Template

<template>
  <x-element
    tag="div"
    @click="active = active"
    :active="active"
    hover
    v-model="hover"
    :css="css"
  >
    <div>
      Hello World <br />
      {{ active }} | {{ hover }}
      <div class="children-class">Hola Mundo</div>
    </div>
  </x-element>
</template>

Script

<script>
  export default {
    data() {
      return {
        active: true,
        hover: false,
      };
    },
    methods: {
      log(text) {
        console.log(text);
      },
    },
    computed: {
      css() {
        return {
          // Merge with Hover-And-Focus
          hoverAndFocus: true,
          // Base (Object)
          base: {
            // Base (Object-Style)
            color: "black",
            backgroundColor: "red",
            fontSize: "60px",
            textAlign: "center",
          },
          // Hover-And-Focus (Object-Style)
          hover: {
            color: "red",
            backgroundColor: "black",
          },
          // Active (Object)
          active: {
            // Active (Object-Style)
            base: {
              color: "blue",
              backgroundColor: "orange",
              fontSize: "20px",
            },
            // Active-Hover (Object-Style)
            hover: {
              color: "white",
              backgroundColor: "purple",
            },
          },
          // Children (Objects)
          children: {
            "children-class": {
              base: {
                color: "orange",
                backgroundColor: "darkorchid",
              },
              hover: {
                color: "red",
                backgroundColor: "darkorchid",
              },
              focus: {
                color: "white",
                backgroundColor: "darkorchid",
              },
            },
          },
        };
      },
    },
  };
</script>

Vue-Sync (Prop)

Use kebab-case for the sync declaration and as the attribute <div v-model:kebab-case="value" />

Then, use camelCase for the actual value inside the component.

Component

Create A Component

Script Code

export default {
  sync: ["count", "camel-case"],
};

Template Code

<div>{{ count }} | {{ camelCase }}</div>

Usage

Example Usage of The Component with v-model

Script Code

export default {
  data() {
    return {
      count: 1,
      camelCase: "kebab-case",
    };
  },
};

Template Code

<my-component v-model:count="count" v-model:camel-case="camelCase" />