@teammodlr/ui-kit 2.0.29 → 2.0.31

package/src/examples/cards/sidebar.vue

@@ -1,263 +1,263 @@
-<template>
-    <div class="bg">
-        <div class="sidebar">
-            <div class="item">
-                <label class="label">
-                    Align
-                </label>
-                <MRadioButtonGroup name="align" v-model="form.align" block size="sm">
-                    <MRadioButton icon id="start">
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
-                            <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
-                            <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
-                        </svg>
-                    </MRadioButton>
-                    <MRadioButton icon id="center">
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
-                            <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
-                        </svg>
-                    </MRadioButton>
-                    <MRadioButton icon id="end">
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
-                                    fill="currentColor"
-                                    fill-opacity="0.5"
-                            />
-                            <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
-                                    fill="currentColor"
-                            />
-                            <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
-                                    fill="currentColor"
-                            />
-                        </svg>
-                    </MRadioButton>
-                </MRadioButtonGroup>
-            </div>
-
-            <div class="item">
-                <label class="label">
-                    Justify
-                </label>
-                <MRadioButtonGroup name="align" v-model="form.justify" block size="sm">
-                    <MRadioButton icon id="start">
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
-                            <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
-                            <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
-                        </svg>
-                    </MRadioButton>
-                    <MRadioButton icon id="center">
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
-                            <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
-                        </svg>
-                    </MRadioButton>
-                    <MRadioButton icon id="end">
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
-                                    fill="currentColor"
-                                    fill-opacity="0.5"
-                            />
-                            <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
-                                    fill="currentColor"
-                            />
-                            <path
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
-                                    fill="currentColor"
-                            />
-                        </svg>
-                    </MRadioButton>
-                </MRadioButtonGroup>
-            </div>
-
-            <div class="grid">
-                <div class="item">
-                    <label class="label">
-                        Width
-                    </label>
-                    <MInput type="text" v-model="form.width" size="sm" block>
-                        <template #icon-right>
-                            <span style="font-size: 11px">px</span>
-                        </template>
-                    </MInput>
-                </div>
-                <div class="item">
-                    <label class="label">
-                        Height
-                    </label>
-                    <MInput type="text" v-model="form.height" size="sm" block>
-                        <template #icon-right>
-                            <span style="font-size: 11px">px</span>
-                        </template>
-                    </MInput>
-                </div>
-
-                <div class="item">
-                    <label class="label">
-                        Min Width
-                    </label>
-                    <MInput type="text" v-model="form.minWidth" size="sm" block>
-                        <template #icon-right>
-                            <span style="font-size: 11px">px</span>
-                        </template>
-                    </MInput>
-                </div>
-
-                <div class="item">
-                    <label class="label">
-                        Min Height
-                    </label>
-                    <MInput type="text" v-model="form.minHeight" size="sm" block>
-                        <template #icon-right>
-                            <span style="font-size: 11px">px</span>
-                        </template>
-                    </MInput>
-                </div>
-            </div>
-
-            <div class="item">
-                <label class="label">
-                    Background
-                </label>
-                <MColorPicker v-model="form.backgroundColor"/>
-            </div>
-
-            <div class="item">
-                <label class="label">
-                    Color
-                </label>
-                <MColorPicker v-model="form.color"/>
-            </div>
-        </div>
-
-        <div style="padding: 10px">
-            {{ form }}
-            <div style="display: flex;" :style="computedStyle">
-                Hi
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import {computed, reactive} from "vue";
-import {MRadioButtonGroup} from "../../components";
-import MRadioButton from "@/components/radiobutton/RadioButton.vue";
-import MColorPicker from "@/components/colorpicker/ColorPicker.vue";
-import MInput from "@/components/input/Input.vue";
-
-const form = reactive({
-    align: "start",
-    justify: "start",
-    width: 100,
-    height: 100,
-    minWidth: 0,
-    minHeight: 0,
-    color: "#000000",
-    backgroundColor: "#FF0000"
-})
-
-const computedStyle = computed(() => {
-    return {
-        width: form.width ? `${form.width}px` : "auto",
-        height: form.height ? `${form.height}px` : "auto",
-        minWidth: form.minWidth ? `${form.minWidth}px` : "auto",
-        minHeight: form.minHeight ? `${form.minHeight}px` : "auto",
-        color: form.color,
-        backgroundColor: form.backgroundColor,
-        alignItems: form.align,
-        justifyContent: form.justify
-    }
-})
-
-</script>
-
-<style scoped>
-.bg {
-    display: flex;
-}
-
-.sidebar {
-    width: 350px;
-    height: 500px;
-    border-right: 1px solid #e5e5e5;
-    padding: 5px 10px;
-    flex-shrink: 0;
-}
-
-.item {
-    display: grid;
-    grid-template-columns: 70px 1fr;
-    grid-gap: 10px;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 5px 20px;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.label {
-    font-size: 13px;
-    font-weight: 500;
-}
+<template>
+    <div class="bg">
+        <div class="sidebar">
+            <div class="item">
+                <label class="label">
+                    Align
+                </label>
+                <MRadioButtonGroup name="align" v-model="form.align" block size="sm">
+                    <MRadioButton icon id="start">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
+                            <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="center">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="end">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
+                                    fill="currentColor"
+                                    fill-opacity="0.5"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
+                                    fill="currentColor"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
+                                    fill="currentColor"
+                            />
+                        </svg>
+                    </MRadioButton>
+                </MRadioButtonGroup>
+            </div>
+
+            <div class="item">
+                <label class="label">
+                    Justify
+                </label>
+                <MRadioButtonGroup name="align" v-model="form.justify" block size="sm">
+                    <MRadioButton icon id="start">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
+                            <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="center">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="end">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
+                                    fill="currentColor"
+                                    fill-opacity="0.5"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
+                                    fill="currentColor"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
+                                    fill="currentColor"
+                            />
+                        </svg>
+                    </MRadioButton>
+                </MRadioButtonGroup>
+            </div>
+
+            <div class="grid">
+                <div class="item">
+                    <label class="label">
+                        Width
+                    </label>
+                    <MInput type="text" v-model="form.width" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+                <div class="item">
+                    <label class="label">
+                        Height
+                    </label>
+                    <MInput type="text" v-model="form.height" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+
+                <div class="item">
+                    <label class="label">
+                        Min Width
+                    </label>
+                    <MInput type="text" v-model="form.minWidth" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+
+                <div class="item">
+                    <label class="label">
+                        Min Height
+                    </label>
+                    <MInput type="text" v-model="form.minHeight" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+            </div>
+
+            <div class="item">
+                <label class="label">
+                    Background
+                </label>
+                <MColorPicker v-model="form.backgroundColor"/>
+            </div>
+
+            <div class="item">
+                <label class="label">
+                    Color
+                </label>
+                <MColorPicker v-model="form.color"/>
+            </div>
+        </div>
+
+        <div style="padding: 10px">
+            {{ form }}
+            <div style="display: flex;" :style="computedStyle">
+                Hi
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, reactive} from "vue";
+import {MRadioButtonGroup} from "../../components";
+import MRadioButton from "@/components/radiobutton/RadioButton.vue";
+import MColorPicker from "@/components/colorpicker/ColorPicker.vue";
+import MInput from "@/components/input/Input.vue";
+
+const form = reactive({
+    align: "start",
+    justify: "start",
+    width: 100,
+    height: 100,
+    minWidth: 0,
+    minHeight: 0,
+    color: "#000000",
+    backgroundColor: "#FF0000"
+})
+
+const computedStyle = computed(() => {
+    return {
+        width: form.width ? `${form.width}px` : "auto",
+        height: form.height ? `${form.height}px` : "auto",
+        minWidth: form.minWidth ? `${form.minWidth}px` : "auto",
+        minHeight: form.minHeight ? `${form.minHeight}px` : "auto",
+        color: form.color,
+        backgroundColor: form.backgroundColor,
+        alignItems: form.align,
+        justifyContent: form.justify
+    }
+})
+
+</script>
+
+<style scoped>
+.bg {
+    display: flex;
+}
+
+.sidebar {
+    width: 350px;
+    height: 500px;
+    border-right: 1px solid #e5e5e5;
+    padding: 5px 10px;
+    flex-shrink: 0;
+}
+
+.item {
+    display: grid;
+    grid-template-columns: 70px 1fr;
+    grid-gap: 10px;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 5px 20px;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.label {
+    font-size: 13px;
+    font-weight: 500;
+}
 </style>

package/src/exports/nuxt.js

@@ -1,33 +1,33 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
-import { fileURLToPath } from 'node:url'
-
-export default defineNuxtModule({
-    meta: {
-        name: '@teammodlr/ui-kit',
-        configKey: 'modlr',
-        compatibility: {
-            nuxt: '^3.0.0-rc.1',
-        },
-    },
-    defaults: {
-        prefix: 'M',
-    },
-    async setup(options, nuxt) {
-        // Create resolver to resolve relative paths
-        const { resolve } = createResolver(import.meta.url)
-
-        nuxt.options.runtimeConfig.public.modlrUiOptions = options
-
-        // plugin install
-        addPlugin(resolve('./nuxt.plugin.js'))
-
-        // nuxt install
-        nuxt.hook('components:dirs', (dirs) => {
-            dirs.push({
-                path: fileURLToPath(new URL('../src/components', import.meta.url)),
-                extensions: ['vue', 'tsx'],
-                prefix: options?.prefix ? options?.prefix : 'M',
-            })
-        })
-    },
-})
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+    meta: {
+        name: '@teammodlr/ui-kit',
+        configKey: 'modlr',
+        compatibility: {
+            nuxt: '^3.0.0-rc.1',
+        },
+    },
+    defaults: {
+        prefix: 'M',
+    },
+    async setup(options, nuxt) {
+        // Create resolver to resolve relative paths
+        const { resolve } = createResolver(import.meta.url)
+
+        nuxt.options.runtimeConfig.public.modlrUiOptions = options
+
+        // plugin install
+        addPlugin(resolve('./nuxt.plugin.js'))
+
+        // nuxt install
+        nuxt.hook('components:dirs', (dirs) => {
+            dirs.push({
+                path: fileURLToPath(new URL('../src/components', import.meta.url)),
+                extensions: ['vue', 'tsx'],
+                prefix: options?.prefix ? options?.prefix : 'M',
+            })
+        })
+    },
+})

package/src/exports/nuxt.plugin.js

@@ -1,8 +1,8 @@
-import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
-
-export default defineNuxtPlugin((nuxtApp) => {
-    const UI = create(nuxtApp.$config.modlrUiOptions)
-
-    nuxtApp.vueApp.use(UI)
-})
+import { defineNuxtPlugin } from '#app'
+import create from '../src/create'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    const UI = create(nuxtApp.$config.modlrUiOptions)
+
+    nuxtApp.vueApp.use(UI)
+})

package/src/index.ts

@@ -1,7 +1,7 @@
-// import './css/index.css';
-export * from './components';
-export * from './composables';
-export * as theme from './styles/theme.css';
-export { default as createUI } from './create';
-export { default } from './install';
-
+// import './css/index.css';
+export * from './components';
+export * from './composables';
+export * as theme from './styles/theme.css';
+export { default as createUI } from './create';
+export { default } from './install';
+

package/src/install.ts

@@ -1,8 +1,8 @@
-import * as components from './components'
-import create from './create'
-
-export default create({
-    components: Object.keys(components).map(
-        (key) => components[key as keyof object],
-    ),
-})
+import * as components from './components'
+import create from './create'
+
+export default create({
+    components: Object.keys(components).map(
+        (key) => components[key as keyof object],
+    ),
+})