@teammodlr/ui-kit 2.1.41 → 2.1.43

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 #suffix>
-                            <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 #suffix>
-                            <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 #suffix>
-                            <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 #suffix>
-                            <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 #suffix>
+                            <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 #suffix>
+                            <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 #suffix>
+                            <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 #suffix>
+                            <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/examples/modal/modal.vue

@@ -1,52 +1,52 @@
-<template>
-    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false" :canSlideIn="true">
-        <template #body>
-            <div>
-                <MSelect
-                    v-model="value"
-                    :options="options"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    blank
-                    searchable
-                    />
-            </div>
-        </template>
-        <template #footer>
-            <div style="display: flex; flex-grow: 1; justify-content: end;">
-                <MButton variant="primary" @click="modal?.close()">
-                    Okay
-                </MButton>
-                <MButton style="margin-left: 8px;" @click="modal?.close()">
-                    Cancel
-                </MButton>
-            </div>
-        </template>
-    </MModal>
-
-    <div style="position: relative; width: 100%; height: 1000px;">
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; right: 0;">Top Right</button>
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; left: 0;">Bottom
-            Left</button>
-        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; right: 0;">Bottom
-            Right</button>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const modal = ref<any>(null);
-// make list of options with 1000 items
-const options = Array.from({ length: 50 }, (_, i) => ({
-    id: i,
-    name: `Option ${i+1}`
-}));
-
-const value = ref();
-const open = (event: MouseEvent) => {
-    modal.value.open(event.target);
-};
-
-</script>
+<template>
+    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false" :canSlideIn="true">
+        <template #body>
+            <div>
+                <MSelect
+                    v-model="value"
+                    :options="options"
+                    :option-value="'id'"
+                    :option-label="'name'"
+                    blank
+                    searchable
+                    />
+            </div>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end;">
+                <MButton variant="primary" @click="modal?.close()">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px;" @click="modal?.close()">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px;">
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; right: 0;">Top Right</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; left: 0;">Bottom
+            Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; right: 0;">Bottom
+            Right</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const modal = ref<any>(null);
+// make list of options with 1000 items
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+
+</script>