@teammodlr/ui-kit 2.0.21 → 2.0.22

package/src/components/dropdown/DropdownItem.vue

@@ -1,134 +1,134 @@
-<template>
-    <component :is="computedType" :href="href" ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect" v-bind="$attrs">
-        <div v-if="hasIconLeft" :class="style.menuItemIcon">
-            <slot name="icon-left" />
-        </div>
-        <div :class="style.menuItemText">
-            <slot />
-        </div>
-        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
-            <template v-for="key in hotkey.split('+')">
-                <kbd>{{ key }}</kbd>
-            </template>
-        </div> -->
-        <div v-if="hasIconRight" :class="style.menuItemIcon">
-            <slot name="icon-right" />
-        </div>
-    </component>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, inject, type PropType, ref, toRef} from 'vue';
-import {useLabel} from './hooks';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "DropdownItem",
-    props: {
-        label: {
-            type: [String, Number],
-            default: null
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        reference: {
-            type: Boolean,
-            default: false
-        },
-        onSelect: {
-            type: Function as PropType<(label: string | number) => void>,
-            default: () => { }
-        },
-        hotkey: {
-            type: String,
-            default: null
-        },
-        description: {
-            type: String,
-            default: null
-        },
-        href: {
-            type: String,
-            default: null
-        },
-    },
-    emits: [],
-    setup(props, { slots }) {
-        const parentSelect = inject('dropdown-select', null);
-        // const state = inject(DROPDOWN_STATE, null);
-        // const keys = useMagicKeys({
-        //     passive: false,
-        //     onEventFired: (event) => {
-
-        //         // only fire when the dropdown is open
-        //         if (state?.isOpen.value) {
-        //             event.preventDefault();
-        //         }
-        //     }
-        // });
-
-        const hasIconLeft = computed(() => !!(slots['icon-left']));
-        const hasIconRight = computed(() => !!(slots['icon-right']));
-
-        const wrapper = ref(null);
-        const label = toRef(props, 'label')
-        const isReference = ref(props.reference)
-        const currentLabel = useLabel(label, wrapper)
-        function handleSelect() {
-            if (props.disabled || isReference.value) {
-                return;
-            }
-
-            if (typeof parentSelect === 'function') {
-                // @ts-ignore
-                parentSelect([currentLabel.value!]);
-            }
-
-            props.onSelect(currentLabel.value!);
-        }
-
-        // const isOpen = computed(() => {
-        //     return state?.isOpen.value;
-        // });
-
-        const computedWrapperClasses = computed(() => {
-            return [
-                style.menuItem
-            ]
-        });
-
-        const computedType = computed(() => {
-            if (props.href) {
-                return 'a';
-            }
-
-            return 'li';
-        });
-        
-        // onMounted(() => {
-        //     if (props.hotkey) {
-        //         const combination = keys[props.hotkey];
-
-        //         whenever(combination, (v) => {
-        //             if (v && isOpen.value) {
-        //                 handleSelect();
-        //             }
-        //         })
-        //     }
-        // })
-
-
-        return {
-            wrapper,
-            hasIconLeft,
-            hasIconRight,
-            handleSelect,
-            computedWrapperClasses,
-            style,
-            computedType
-        }
-    }
-})
-</script>
+<template>
+    <component :is="computedType" :href="href" ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect" v-bind="$attrs">
+        <div v-if="hasIconLeft" :class="style.menuItemIcon">
+            <slot name="icon-left" />
+        </div>
+        <div :class="style.menuItemText">
+            <slot />
+        </div>
+        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
+            <template v-for="key in hotkey.split('+')">
+                <kbd>{{ key }}</kbd>
+            </template>
+        </div> -->
+        <div v-if="hasIconRight" :class="style.menuItemIcon">
+            <slot name="icon-right" />
+        </div>
+    </component>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, inject, type PropType, ref, toRef} from 'vue';
+import {useLabel} from './hooks';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "DropdownItem",
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        reference: {
+            type: Boolean,
+            default: false
+        },
+        onSelect: {
+            type: Function as PropType<(label: string | number) => void>,
+            default: () => { }
+        },
+        hotkey: {
+            type: String,
+            default: null
+        },
+        description: {
+            type: String,
+            default: null
+        },
+        href: {
+            type: String,
+            default: null
+        },
+    },
+    emits: [],
+    setup(props, { slots }) {
+        const parentSelect = inject('dropdown-select', null);
+        // const state = inject(DROPDOWN_STATE, null);
+        // const keys = useMagicKeys({
+        //     passive: false,
+        //     onEventFired: (event) => {
+
+        //         // only fire when the dropdown is open
+        //         if (state?.isOpen.value) {
+        //             event.preventDefault();
+        //         }
+        //     }
+        // });
+
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const wrapper = ref(null);
+        const label = toRef(props, 'label')
+        const isReference = ref(props.reference)
+        const currentLabel = useLabel(label, wrapper)
+        function handleSelect() {
+            if (props.disabled || isReference.value) {
+                return;
+            }
+
+            if (typeof parentSelect === 'function') {
+                // @ts-ignore
+                parentSelect([currentLabel.value!]);
+            }
+
+            props.onSelect(currentLabel.value!);
+        }
+
+        // const isOpen = computed(() => {
+        //     return state?.isOpen.value;
+        // });
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                style.menuItem
+            ]
+        });
+
+        const computedType = computed(() => {
+            if (props.href) {
+                return 'a';
+            }
+
+            return 'li';
+        });
+        
+        // onMounted(() => {
+        //     if (props.hotkey) {
+        //         const combination = keys[props.hotkey];
+
+        //         whenever(combination, (v) => {
+        //             if (v && isOpen.value) {
+        //                 handleSelect();
+        //             }
+        //         })
+        //     }
+        // })
+
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            handleSelect,
+            computedWrapperClasses,
+            style,
+            computedType
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownSeperator.vue

@@ -1,23 +1,23 @@
-<template>
-    <li :class="computedClasses"></li>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from "vue";
-import * as style from "./style";
-
-export default defineComponent({
-    name: "DropdownSeperator",
-    setup() {
-        const computedClasses = computed(() => {
-            return [
-                style.menuSeperator
-            ]
-        });
-
-        return {
-            computedClasses
-        }
-    }
-})
+<template>
+    <li :class="computedClasses"></li>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from "vue";
+import * as style from "./style";
+
+export default defineComponent({
+    name: "DropdownSeperator",
+    setup() {
+        const computedClasses = computed(() => {
+            return [
+                style.menuSeperator
+            ]
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
 </script>

package/src/components/dropdown/symbol.ts

@@ -1,8 +1,8 @@
-import type {InjectionKey} from "vue";
-
-export interface DropdownState {
-    handleSelect: (labels: string[]) => void;
-    isOpen: boolean;
-}
-
+import type {InjectionKey} from "vue";
+
+export interface DropdownState {
+    handleSelect: (labels: string[]) => void;
+    isOpen: boolean;
+}
+
 export const DROPDOWN_STATE: InjectionKey<DropdownState> = Symbol('DROPDOWN_STATE');

package/src/components/form/style/Form.css.ts

@@ -1,23 +1,23 @@
-import {createVar, globalKeyframes, globalStyle, style} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px',
-};
-
-export const vars = {
-    spacing: createVar(),
-};
-
-export const base = style({
-    vars: {
-        [vars.spacing]: themeVars.space[4]
-    },
-    display: "flex",
-    flexDirection: "column",
-    gap: vars.spacing,
+import {createVar, globalKeyframes, globalStyle, style} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    spacing: createVar(),
+};
+
+export const base = style({
+    vars: {
+        [vars.spacing]: themeVars.space[4]
+    },
+    display: "flex",
+    flexDirection: "column",
+    gap: vars.spacing,
 });

package/src/components/form/style/index.ts

@@ -1,2 +1,2 @@
-export {assignInlineVars} from '@vanilla-extract/dynamic';
+export {assignInlineVars} from '@vanilla-extract/dynamic';
 export * from './Form.css';

package/src/components/form/symbol.ts

@@ -1,11 +1,11 @@
-import type {InjectionKey} from "vue";
-
-export interface FormState {
-    add: (name: string, focus: () => void, validate: () => boolean, setError: (error: string) => void) => void;
-    remove: (name: string) => void;
-    insideForm: boolean,
-    disabled: boolean,
-    loading: boolean;
-}
-
+import type {InjectionKey} from "vue";
+
+export interface FormState {
+    add: (name: string, focus: () => void, validate: () => boolean, setError: (error: string) => void) => void;
+    remove: (name: string) => void;
+    insideForm: boolean,
+    disabled: boolean,
+    loading: boolean;
+}
+
 export const FORM_STATE: InjectionKey<FormState> = Symbol('FORM_STATE');

package/src/components/index.ts

@@ -36,4 +36,5 @@ 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 MTransfer } from './transfer/Transfer.vue';
+export { default as MTextArea } from './textarea/TextArea.vue';

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

@@ -1,2 +1,2 @@
-export { default as MModalBasic } from './basic.vue';
-export { default as MModalForm } from './modal-form.vue';
+export { default as MModalBasic } from './basic.vue';
+export { default as MModalForm } from './modal-form.vue';