@teammodlr/ui-kit 2.1.49 → 2.1.51

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

@@ -1,26 +1,26 @@
-<template>
-    <MSelect
-        v-model="value"
-        :options="options"
-        :option-value="'id'"
-        :option-label="'name'"
-        blank
-        @update:value="testThis"
-        />
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-// make list of options with 1000 items
-const options = Array.from({ length: 50 }, (_, i) => ({
-    id: i,
-    name: `Option ${i+1}`
-}));
-
-const value = ref();
-
-function testThis(value: any, option: any) {
-    alert('value: ' + value);
-}
-</script>
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        blank
+        @update:value="testThis"
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+// make list of options with 1000 items
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+
+function testThis(value: any, option: any) {
+    alert('value: ' + value);
+}
+</script>

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

@@ -1,16 +1,16 @@
-import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MSelect,
-    title: 'Components/Select',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MSelectBasic);
-export const Searchable = createStory(MSelectSearchable);
-export const Multiple = createStory(MSelectMultiple);
+import MSelect from '../Select.vue';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MSelect,
+    title: 'Components/Select',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MSelectBasic);
+export const Searchable = createStory(MSelectSearchable);
+export const Multiple = createStory(MSelectMultiple);

package/src/components/select/types.ts

@@ -1,27 +1,27 @@
-export type ValueAtom = string | number
-export type Value = ValueAtom | string[] | number[] | ValueAtom[]
-export type OnUpdateValue = (
-    value: string &
-        number &
-        ValueAtom &
-        string[] &
-        number[] &
-        ValueAtom[] &
-        (ValueAtom | null) &
-        (string[] | null) &
-        (number[] | null) &
-        (ValueAtom[] | null),
-    option: object & null
-) => void
-export type OnUpdateValueImpl = (
-    value:
-        | ValueAtom
-        | string[]
-        | number[]
-        | ValueAtom[]
-        | (ValueAtom | null)
-        | (string[] | null)
-        | (number[] | null)
-        | (ValueAtom[] | null),
-    option: object | null
-) => void
+export type ValueAtom = string | number
+export type Value = ValueAtom | string[] | number[] | ValueAtom[]
+export type OnUpdateValue = (
+    value: string &
+        number &
+        ValueAtom &
+        string[] &
+        number[] &
+        ValueAtom[] &
+        (ValueAtom | null) &
+        (string[] | null) &
+        (number[] | null) &
+        (ValueAtom[] | null),
+    option: object & null
+) => void
+export type OnUpdateValueImpl = (
+    value:
+        | ValueAtom
+        | string[]
+        | number[]
+        | ValueAtom[]
+        | (ValueAtom | null)
+        | (string[] | null)
+        | (number[] | null)
+        | (ValueAtom[] | null),
+    option: object | null
+) => void

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

@@ -1,13 +1,13 @@
-import { createStory } from '../../../__storybook__';
-import MSkeleton from '../Skeleton.vue';
-
-import { MSkeletonBasic, MSkeletonPost } from './index';
-
-export default {
-    component: MSkeleton,
-    title: 'Components/Skeleton',
-    argTypes: {}
-};
-
-export const Basic = createStory(MSkeletonBasic);
-export const Post = createStory(MSkeletonPost);
+import { createStory } from '../../../__storybook__';
+import MSkeleton from '../Skeleton.vue';
+
+import { MSkeletonBasic, MSkeletonPost } from './index';
+
+export default {
+    component: MSkeleton,
+    title: 'Components/Skeleton',
+    argTypes: {}
+};
+
+export const Basic = createStory(MSkeletonBasic);
+export const Post = createStory(MSkeletonPost);

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

@@ -1,15 +1,15 @@
-import MSwitch from '../Switch.vue';
-import { MSwitchBasic, MSwitchSlot } from './index';
-
-import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
-
-export default {
-    component: MSwitch,
-    title: 'Components/Switch',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MSwitchBasic);
-export const Slot = createStory(MSwitchSlot);
+import MSwitch from '../Switch.vue';
+import { MSwitchBasic, MSwitchSlot } from './index';
+
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
+
+export default {
+    component: MSwitch,
+    title: 'Components/Switch',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MSwitchBasic);
+export const Slot = createStory(MSwitchSlot);

package/src/components/switch/style/Switch.css.ts

@@ -1,135 +1,135 @@
-import {
-    createVar,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '14px',
-    sm: '16px',
-    md: '18px',
-    lg: '20px',
-    xl: '22px'
-};
-
-const vars = {
-    offBackground: createVar(),
-    onBackground: createVar(),
-    handleBackground: createVar(),
-    height: createVar()
-};
-
-export const toggle = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.offBackground]: themeVars.color.gray[300],
-        [vars.onBackground]: themeVars.color.blue[500],
-        [vars.handleBackground]: '#fff'
-    },
-    outline: 0,
-    display: 'block',
-    width: `calc(${vars.height} * 2)`,
-    minWidth: `calc(${vars.height} * 2)`,
-    height: `calc(${vars.height} + 2px)`,
-    position: 'relative',
-    cursor: 'pointer',
-    userSelect: 'none',
-    borderRadius: '2em',
-    padding: '2px',
-    background: vars.offBackground,
-    transition: 'all .4s ease',
-    selectors: {
-        ['&:after']: {
-            position: 'relative',
-            display: 'block',
-            content: '""',
-            width: `calc(${vars.height} - 2px)`,
-            height: '100%',
-            left: 0,
-            borderRadius: '50%',
-            background: vars.handleBackground,
-            transition: 'all .2s ease'
-        },
-        ['&:before']: {
-            position: 'relative',
-            content: '""',
-            width: '50%',
-            height: '100%',
-            display: 'none'
-        }
-    }
-});
-
-export const checked = style({
-    vars: {
-        [vars.offBackground]: vars.onBackground
-    },
-    selectors: {
-        ['&:after']: {
-            left: '50%'
-        }
-    }
-});
-
-export const base = style({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    gap: themeVars.space['1.5']
-});
-
-export const input = style({
-    position: 'absolute',
-    opacity: 0,
-    cursor: 'pointer'
-});
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'not-allowed'
-});
-
-export const label = style({
-    marginLeft: themeVars.space['0.5'],
-    fontWeight: '500',
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer'
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md
-        }
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg
-        }
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl
-        }
-    }
-});
-
-globalStyle(`${base} ${input}:focus + ${toggle}`, {
-    vars: {},
-    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
-});
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '14px',
+    sm: '16px',
+    md: '18px',
+    lg: '20px',
+    xl: '22px'
+};
+
+const vars = {
+    offBackground: createVar(),
+    onBackground: createVar(),
+    handleBackground: createVar(),
+    height: createVar()
+};
+
+export const toggle = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.offBackground]: themeVars.color.gray[300],
+        [vars.onBackground]: themeVars.color.blue[500],
+        [vars.handleBackground]: '#fff'
+    },
+    outline: 0,
+    display: 'block',
+    width: `calc(${vars.height} * 2)`,
+    minWidth: `calc(${vars.height} * 2)`,
+    height: `calc(${vars.height} + 2px)`,
+    position: 'relative',
+    cursor: 'pointer',
+    userSelect: 'none',
+    borderRadius: '2em',
+    padding: '2px',
+    background: vars.offBackground,
+    transition: 'all .4s ease',
+    selectors: {
+        ['&:after']: {
+            position: 'relative',
+            display: 'block',
+            content: '""',
+            width: `calc(${vars.height} - 2px)`,
+            height: '100%',
+            left: 0,
+            borderRadius: '50%',
+            background: vars.handleBackground,
+            transition: 'all .2s ease'
+        },
+        ['&:before']: {
+            position: 'relative',
+            content: '""',
+            width: '50%',
+            height: '100%',
+            display: 'none'
+        }
+    }
+});
+
+export const checked = style({
+    vars: {
+        [vars.offBackground]: vars.onBackground
+    },
+    selectors: {
+        ['&:after']: {
+            left: '50%'
+        }
+    }
+});
+
+export const base = style({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: themeVars.space['1.5']
+});
+
+export const input = style({
+    position: 'absolute',
+    opacity: 0,
+    cursor: 'pointer'
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed'
+});
+
+export const label = style({
+    marginLeft: themeVars.space['0.5'],
+    fontWeight: '500',
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer'
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg
+        }
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl
+        }
+    }
+});
+
+globalStyle(`${base} ${input}:focus + ${toggle}`, {
+    vars: {},
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+});

package/src/components/tab/Tab.vue

@@ -1,98 +1,85 @@
-<template>
-    <li
-        :data-value="computedValue"
-        :class="computedTabWrapperClasses"
-    >
-        <button
-            role="button"
-            type="button"
-            ref="tabRef"
-            :class="computedTabClasses"
-            @click.prevent="handleClick"
-            :disabled="disabled"
-        >
-            <slot 
-                name="tab"
-                :label="label"
-                :value="value"
-            >
-                {{ computedLabel }}
-            </slot>
-
-            <teleport v-if="selected && teleportTo" :to="teleportTo">
-                <slot />
-            </teleport>
-        </button>
-    </li>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
-
-export default defineComponent({
-    name: "Tab",
-    props: {
-        value: {
-            type: [String, Number]
-        },
-        label: {
-            type: String,
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props, { emit }) {
-        const computedValue = computed(() => props.value);
-        const computedLabel = computed(() => props.label || props.value);
-        const tabRef = ref<HTMLElement | null>(null);
-        const teleportTo = ref(null);
-
-        const tabs = inject("tabs", {
-            tabsContentRef: ref(null),
-            selectTab: (tab: string | number) => {},
-            state: reactive({
-                active: ""
-            })
-        });
-
-        const computedTabWrapperClasses = computed(() => {
-            return {
-                'm-tab': true,
-                'm-tab--active': selected.value,
-                'm-tab--disabled': props.disabled
-            }
-        });
-
-        const computedTabClasses = computed(() => {
-            return {
-                'm-tabs__button': true,
-            }
-        });
-
-        const selected = computed(() => {
-            return tabs.state.active === computedValue.value;
-        });
-
-        function handleClick() {
-            tabs.selectTab(computedValue.value!);
-        }
-
-        onMounted(() => {
-            teleportTo.value = tabs.tabsContentRef.value;
-        });
-
-        return {
-            computedValue,
-            computedLabel,
-            tabRef,
-            computedTabWrapperClasses,
-            computedTabClasses,
-            handleClick,
-            selected,
-            teleportTo
-        }
-    }
-})
-</script>
+<template>
+    <div ref="tabRef" :class="computedTabClasses" @click.prevent="handleClick" :disabled="disabled">
+        <span :class="computedTabLabelClasses">
+            <slot name="tab" :label="label" :value="value">
+                {{ computedLabel }}
+            </slot>
+        </span>
+
+        <teleport v-if="selected && teleportTo" :to="teleportTo">
+            <slot />
+        </teleport>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
+import { tabButton, tabButtonActive, tabLabel } from './style';
+export default defineComponent({
+    name: "Tab",
+    props: {
+        value: {
+            type: [String, Number]
+        },
+        label: {
+            type: String,
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit }) {
+        const computedValue = computed(() => props.value);
+        const computedLabel = computed(() => props.label || props.value);
+        const tabRef = ref<HTMLElement | null>(null);
+        const teleportTo = ref(null);
+
+        const tabs = inject("tabs", {
+            tabsContentRef: ref(null),
+            selectTab: (tab: string | number) => { },
+            state: reactive({
+                active: "",
+                type: "base"
+            }),
+        });
+
+        const computedTabClasses = computed(() => {
+            return {
+                [tabButton[tabs.state.type as keyof typeof tabButton]]: true,
+                [tabButtonActive[tabs.state.type as keyof typeof tabButtonActive]]: selected.value,
+            }
+        });
+
+        const computedTabLabelClasses = computed(() => {
+            return {
+                [tabLabel]: true,
+            }
+        })
+
+
+        const selected = computed(() => {
+            return tabs.state.active === computedValue.value;
+        });
+
+        function handleClick() {
+            tabs.selectTab(computedValue.value!);
+        }
+
+        onMounted(() => {
+            teleportTo.value = tabs.tabsContentRef.value;
+        });
+
+        return {
+            computedValue,
+            computedLabel,
+            tabRef,
+            computedTabClasses,
+            computedTabLabelClasses,
+            handleClick,
+            selected,
+            teleportTo
+        }
+    }
+})
+</script>