@teammodlr/ui-kit 2.0.25 → 2.0.27

package/src/components/image/Image.vue

@@ -1,71 +1,71 @@
-<template>
-    <img :class="computedClasses" :style="computedStyles" :src="source" :alt="alt" />
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, ref, computed } from 'vue';
-
-
-export default defineComponent({
-    name: "MImage",
-    props: {
-        src: {
-            type: String,
-            required: true,
-        },
-        scrSet: {
-            type: String,
-            default: "",
-        },
-        fit: {
-            type: String,
-            default: "cover",
-        },
-        alt: {
-            type: String,
-            default: "",
-        },
-    },
-    emits: {
-        error: (e: Event) => true
-    },
-    setup(props, { emit }) {
-        const source = ref<string | undefined>("");
-
-        if (typeof window !== 'undefined' && Image) {
-            watch(() => props.src, (src) => {
-                if(!src) {
-                    return;
-                }
-
-                const image = new Image();
-                image.onload = () => {
-                    source.value = props.src;
-                };
-                image.onerror = () => {
-                    emit('error', new Event('error'));
-                };
-                image.src = src;
-            }, 
-            { immediate: true })
-        }
-
-        const computedClasses = computed(() => {
-            return {
-                "m-image": true,
-            }
-        });
-
-        const computedStyles = computed(() => {
-            return {
-            }
-        });
-
-        return {
-            source,
-            computedClasses,
-            computedStyles,
-        }
-    }
-})
-</script>
+<template>
+    <img :class="computedClasses" :style="computedStyles" :src="source" :alt="alt" />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, computed } from 'vue';
+
+
+export default defineComponent({
+    name: "MImage",
+    props: {
+        src: {
+            type: String,
+            required: true,
+        },
+        scrSet: {
+            type: String,
+            default: "",
+        },
+        fit: {
+            type: String,
+            default: "cover",
+        },
+        alt: {
+            type: String,
+            default: "",
+        },
+    },
+    emits: {
+        error: (e: Event) => true
+    },
+    setup(props, { emit }) {
+        const source = ref<string | undefined>("");
+
+        if (typeof window !== 'undefined' && Image) {
+            watch(() => props.src, (src) => {
+                if(!src) {
+                    return;
+                }
+
+                const image = new Image();
+                image.onload = () => {
+                    source.value = props.src;
+                };
+                image.onerror = () => {
+                    emit('error', new Event('error'));
+                };
+                image.src = src;
+            }, 
+            { immediate: true })
+        }
+
+        const computedClasses = computed(() => {
+            return {
+                "m-image": true,
+            }
+        });
+
+        const computedStyles = computed(() => {
+            return {
+            }
+        });
+
+        return {
+            source,
+            computedClasses,
+            computedStyles,
+        }
+    }
+})
+</script>

package/src/components/image/examples/basic.vue

@@ -1,5 +1,5 @@
-<template>
-    <MImage 
-        src="https://images.unsplash.com/photo-1672745256937-4e60a4534413?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=976&q=80"
-        />
-</template>
+<template>
+    <MImage 
+        src="https://images.unsplash.com/photo-1672745256937-4e60a4534413?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=976&q=80"
+        />
+</template>

package/src/components/image/examples/index.stories.ts

@@ -1,12 +1,12 @@
-import { createStory } from "../../../__storybook__";
-import MImage from "../Image.vue";
-import {
-    MImageBasic,
-} from "./index";
-
-export default {
-    component: MImage,
-    title: 'Components/Image',
-}
-
-export const Basic = createStory(MImageBasic);
+import { createStory } from "../../../__storybook__";
+import MImage from "../Image.vue";
+import {
+    MImageBasic,
+} from "./index";
+
+export default {
+    component: MImage,
+    title: 'Components/Image',
+}
+
+export const Basic = createStory(MImageBasic);

package/src/components/image/examples/index.ts

@@ -1 +1 @@
-export { default as MImageBasic } from './basic.vue';
+export { default as MImageBasic } from './basic.vue';

package/src/components/index.ts

@@ -1,40 +1,41 @@
-export { default as MBadge } from './badge/Badge.vue';
-export { default as MButton } from './button/Button.vue';
-export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
-export { default as MForm } from './form/Form.vue';
-export { default as MInput } from './input/Input.vue';
-export { default as MTag } from './tag/Tag.vue';
-export { default as MSelect } from './select/Select.vue';
-export { default as MCheckbox } from './checkbox/Checkbox.vue';
-export { default as MRadio } from './radio/Radio.vue';
-export { default as MRadioButton } from './radiobutton/RadioButton.vue';
-export { default as MRadioButtonGroup } from './radiobuttongroup/RadioButtonGroup.vue';
-export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
-export { default as MBreadcrumbItem } from './breadcrumb/BreadcrumbItem.vue';
-export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
-export { default as MAvatar } from './avatar/Avatar.vue';
-export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
-export { default as MImage } from './image/Image.vue';
-export { default as MSkeleton } from './skeleton/Skeleton.vue';
-export { default as MLink } from './link/Link.vue';
-export { default as MTooltip } from './tooltip/Tooltip.vue';
-export { default as MTabGroup } from './tab/TabGroup.vue';
-export { default as MTab } from './tab/Tab.vue';
-export { default as MTable } from './table/Table.vue';
-export { default as MPagination } from './pagination/Pagination.vue';
-export { default as MTableBody } from './table/TableBody.vue';
-export { default as MTableCell } from './table/TableCell.vue';
-export { default as MTableHead } from './table/TableHead.vue';
-export { default as MTableHeadRow } from './table/TableHeadRow.vue';
-export { default as MTableRow } from './table/TableRow.vue';
-export { default as MDropdown } from './dropdown/Dropdown.vue';
-export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
-export { default as MDropdownList } from './dropdown/DropdownList.vue';
-export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
-export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
-export { default as MModal } from './modal/Modal.vue';
-export { default as MColorPicker } from './colorpicker/ColorPicker.vue';
-export { default as MSlider } from './slider/Slider.vue';
-export { default as MMessageProvider } from './messageprovider/MessageProvider.vue';
-export { default as MTransfer } from './transfer/Transfer.vue';
+export { default as MBadge } from './badge/Badge.vue';
+export { default as MButton } from './button/Button.vue';
+export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
+export { default as MForm } from './form/Form.vue';
+export { default as MInput } from './input/Input.vue';
+export { default as MTag } from './tag/Tag.vue';
+export { default as MSelect } from './select/Select.vue';
+export { default as MCheckbox } from './checkbox/Checkbox.vue';
+export { default as MToggle } from './toggle/Toggle.vue';
+export { default as MRadio } from './radio/Radio.vue';
+export { default as MRadioButton } from './radiobutton/RadioButton.vue';
+export { default as MRadioButtonGroup } from './radiobuttongroup/RadioButtonGroup.vue';
+export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
+export { default as MBreadcrumbItem } from './breadcrumb/BreadcrumbItem.vue';
+export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
+export { default as MAvatar } from './avatar/Avatar.vue';
+export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
+export { default as MImage } from './image/Image.vue';
+export { default as MSkeleton } from './skeleton/Skeleton.vue';
+export { default as MLink } from './link/Link.vue';
+export { default as MTooltip } from './tooltip/Tooltip.vue';
+export { default as MTabGroup } from './tab/TabGroup.vue';
+export { default as MTab } from './tab/Tab.vue';
+export { default as MTable } from './table/Table.vue';
+export { default as MPagination } from './pagination/Pagination.vue';
+export { default as MTableBody } from './table/TableBody.vue';
+export { default as MTableCell } from './table/TableCell.vue';
+export { default as MTableHead } from './table/TableHead.vue';
+export { default as MTableHeadRow } from './table/TableHeadRow.vue';
+export { default as MTableRow } from './table/TableRow.vue';
+export { default as MDropdown } from './dropdown/Dropdown.vue';
+export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
+export { default as MDropdownList } from './dropdown/DropdownList.vue';
+export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
+export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
+export { default as MModal } from './modal/Modal.vue';
+export { default as MColorPicker } from './colorpicker/ColorPicker.vue';
+export { default as MSlider } from './slider/Slider.vue';
+export { default as MMessageProvider } from './messageprovider/MessageProvider.vue';
+export { default as MTransfer } from './transfer/Transfer.vue';
 export { default as MTextArea } from './textarea/TextArea.vue';

package/src/components/input/Input.css

@@ -1,173 +1,173 @@
-.m-input__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.m-input {
-    --input-height: 40px;
-    --input-padding: 0 8px;
-    --input-font-size: 15px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-    --input-background-color: var(--white);
-    --input-border-color: var(--gray-200);
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: var(--input-height);
-    font-size: var(--input-font-size);
-    background-color: var(--input-background-color);
-    border: 1px solid var(--input-border-color);
-    box-shadow: none;
-    border-radius: var(--input-border-radius);
-    outline: 0;
-    cursor: text;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-input.m-input--disabled {
-    --input-border-color: var(--gray-300);
-    --input-background-color: var(--gray-100);
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.m-input.m-input--disabled input {
-    cursor: not-allowed;
-}
-
-.m-input:not(.m-input--disabled):focus-within {
-    --input-border-color: var(--blue);
-    box-shadow: 0 0 0 2px var(--blue-outline);
-}
-
-.m-input:not(.m-input--disabled):not(:focus-within):hover {
-    --input-border-color: var(--gray-400);
-}
-
-.m-input input {
-    flex: 1 0 0;
-    min-width: 0;
-    height: 100%;
-    padding: var(--input-padding);
-    font-size: inherit;
-    color: var(--gray-600);
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    border-radius: var(--input-border-radius);
-}
-
-.m-input__clearable {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 6px;
-}
-
-.m-input .m-input__clearable i.m-icon--close {
-    cursor: pointer;
-    width: var(--input-clear-size);
-    height: var(--input-clear-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    color: var(--gray-500);
-    background-color: transparent;
-    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-input .m-input__clearable i.m-icon--close:hover {
-    color: var(--gray-500);
-    background-color: var(--gray-150);
-}
-
-.m-input i.m-icon--close::before {
-    --close-icon-size: 16px;
-    background-color: currentColor;
-    content: "";
-    width: var(--close-icon-size);
-    height: var(--close-icon-size);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    -webkit-mask-position: center center;
-    mask-position: center center;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
-    mask-size: var(--close-icon-size) var(--close-icon-size);
-}
-
-.m-input--xs {
-    --input-height: 32px;
-    --input-padding: 0 8px;
-    --input-font-size: 13px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--sm {
-    --input-height: 36px;
-    --input-padding: 0 8px;
-    --input-font-size: 14px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--md {
-    --input-height: 40px;
-    --input-padding: 0 8px;
-    --input-font-size: 15px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--lg {
-    --input-height: 42px;
-    --input-padding: 0 8px;
-    --input-font-size: 16px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--xl {
-    --input-height: 46px;
-    --input-padding: 0 8px;
-    --input-font-size: 18px;
-    --input-border-radius: 6px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input__label {
-    margin-bottom: 5px;
-    color: var(--gray-600);
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.m-input__help {
-    margin-top: 4px;
-    color: var(--gray-500);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-input__error {
-    margin: 4px 0 8px 0;
-    color: var(--red);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-form .m-form__input {
-    margin-bottom: 16px;
-}
-
-.m-form .m-form__input .m-input__error {
-    margin: 4px 0 0 0;
-}
-
+.m-input__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.m-input {
+    --input-height: 40px;
+    --input-padding: 0 8px;
+    --input-font-size: 15px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+    --input-background-color: var(--white);
+    --input-border-color: var(--gray-200);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: var(--input-height);
+    font-size: var(--input-font-size);
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-border-color);
+    box-shadow: none;
+    border-radius: var(--input-border-radius);
+    outline: 0;
+    cursor: text;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-input.m-input--disabled {
+    --input-border-color: var(--gray-300);
+    --input-background-color: var(--gray-100);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.m-input.m-input--disabled input {
+    cursor: not-allowed;
+}
+
+.m-input:not(.m-input--disabled):focus-within {
+    --input-border-color: var(--blue);
+    box-shadow: 0 0 0 2px var(--blue-outline);
+}
+
+.m-input:not(.m-input--disabled):not(:focus-within):hover {
+    --input-border-color: var(--gray-400);
+}
+
+.m-input input {
+    flex: 1 0 0;
+    min-width: 0;
+    height: 100%;
+    padding: var(--input-padding);
+    font-size: inherit;
+    color: var(--gray-600);
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    border-radius: var(--input-border-radius);
+}
+
+.m-input__clearable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+}
+
+.m-input .m-input__clearable i.m-icon--close {
+    cursor: pointer;
+    width: var(--input-clear-size);
+    height: var(--input-clear-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    color: var(--gray-500);
+    background-color: transparent;
+    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-input .m-input__clearable i.m-icon--close:hover {
+    color: var(--gray-500);
+    background-color: var(--gray-150);
+}
+
+.m-input i.m-icon--close::before {
+    --close-icon-size: 16px;
+    background-color: currentColor;
+    content: "";
+    width: var(--close-icon-size);
+    height: var(--close-icon-size);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
+    -webkit-mask-position: center center;
+    mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
+    mask-size: var(--close-icon-size) var(--close-icon-size);
+}
+
+.m-input--xs {
+    --input-height: 32px;
+    --input-padding: 0 8px;
+    --input-font-size: 13px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--sm {
+    --input-height: 36px;
+    --input-padding: 0 8px;
+    --input-font-size: 14px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--md {
+    --input-height: 40px;
+    --input-padding: 0 8px;
+    --input-font-size: 15px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--lg {
+    --input-height: 42px;
+    --input-padding: 0 8px;
+    --input-font-size: 16px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--xl {
+    --input-height: 46px;
+    --input-padding: 0 8px;
+    --input-font-size: 18px;
+    --input-border-radius: 6px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input__label {
+    margin-bottom: 5px;
+    color: var(--gray-600);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.m-input__help {
+    margin-top: 4px;
+    color: var(--gray-500);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-input__error {
+    margin: 4px 0 8px 0;
+    color: var(--red);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-form .m-form__input {
+    margin-bottom: 16px;
+}
+
+.m-form .m-form__input .m-input__error {
+    margin: 4px 0 0 0;
+}
+