@teammodlr/ui-kit 2.1.49 → 2.1.52

package/src/components/tab/TabGroup.vue

@@ -1,90 +1,96 @@
-<template>
-    <div
-        :class="computedWrapperClasses"
-    >
-        <div
-            ref="wrapperRef"
-            
-        >
-            <ul
-                ref="tabsRef"
-                :class="computedTabsClasses"
-            >
-                <slot />
-            </ul>
-        </div>
-        <div ref="tabsContentRef" class="m-tab-group__content"></div>
-    </div>
-</template>
-
-<script lang="ts">
-import type { Size } from '../../types/props';
-import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
-
-export default defineComponent({
-    name: "TabGroup",
-    props: {
-        modelValue: {
-            type: [String, Number],
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        vertical: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emit: [
-        'update:modelValue'
-    ],
-    setup(props, { emit }) {
-        const wrapperRef = ref<HTMLElement>();
-        const tabsContentRef = ref<HTMLElement>();
-        const contentRef = ref<HTMLElement>();
-        const active = ref();
-
-        watchEffect(() => {
-            active.value = props.modelValue;
-        });
-
-        const state = reactive({
-            active: computed(() => active.value)
-        });
-
-        const computedWrapperClasses = computed(() => {
-            return {
-                'm-tab-group': true,
-                'm-tab-group--vertical': props.vertical,
-                [`m-tab-group--${props.size}`]: true
-            }
-        });
-
-        const computedTabsClasses = computed(() => {
-            return {
-                'm-tab-group__tabs': true,
-            }
-        });
-
-        function selectTab(tab: string | number) {
-            active.value = tab;
-            emit('update:modelValue', tab);
-        }
-
-        provide("tabs", {
-            tabsContentRef,
-            selectTab,
-            state
-        })
-
-        return {
-            wrapperRef,
-            tabsContentRef,
-            contentRef,
-            computedWrapperClasses,
-            computedTabsClasses
-        }
-    }
-})
-</script>
+<template>
+    <div :class="computedTabsWrapperClasses">
+        <div ref="wrapperRef">
+            <ul ref="tabsRef" :class="computedTabsClasses">
+                <slot />
+            </ul>
+        </div>
+        <div ref="tabsContentRef" :class="computedTabContentClasses"></div>
+    </div>
+</template>
+
+<script lang="ts">
+import type { Size } from '../../types/props';
+import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
+import { tabs, tabContent } from './style';
+export default defineComponent({
+    name: "TabGroup",
+    props: {
+        modelValue: {
+            type: [String, Number],
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        vertical: {
+            type: Boolean,
+            default: false
+        },
+        type: {
+            type: String as PropType<'base' | 'card'>,
+            default: 'base',
+            validator: (value: string) => ['base', 'card'].includes(value)
+        }
+    },
+    emit: [
+        'update:modelValue'
+    ],
+    setup(props, { emit }) {
+        const wrapperRef = ref<HTMLElement>();
+        const tabsContentRef = ref<HTMLElement>();
+        const contentRef = ref<HTMLElement>();
+        const active = ref();
+
+        watchEffect(() => {
+            active.value = props.modelValue;
+        });
+
+        const state = reactive({
+            active: computed(() => active.value),
+            type: computed(() => props.type)
+        });
+
+        const computedTabsWrapperClasses = computed(() => {
+            return {
+                'm-tab-group': true,
+                'm-tab-group--vertical': props.vertical
+            }
+        });
+
+        const computedTabsClasses = computed(() => {
+            return {
+                [tabs[props.type as keyof typeof tabs]]: true,
+                'm-tab-group--vertical': props.vertical,
+                [`m-tab-group--${props.size}`]: true
+            }
+        });
+
+        const computedTabContentClasses = computed(() => {
+            return {
+                [tabContent]: true
+            }
+        })
+
+        function selectTab(tab: string | number) {
+            active.value = tab;
+            emit('update:modelValue', tab);
+        }
+
+        provide("tabs", {
+            tabsContentRef,
+            selectTab,
+            state
+        })
+
+        return {
+            wrapperRef,
+            tabsContentRef,
+            contentRef,
+            computedTabsWrapperClasses,
+            computedTabsClasses,
+            computedTabContentClasses
+        }
+    }
+})
+</script>

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

@@ -1,19 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
 import MTabGroup from '../TabGroup.vue';
 import MTab from '../Tab.vue';
 import { MTabsBasic, MTabsVertical } from './index';
-
 import { createStory, sizeArgType } from '../../../__storybook__';
 
-export default {
-    component: MTabGroup,
-    subcomponents: {
-        MTab
-    },
+
+const meta: Meta<typeof MTabGroup> = {
     title: 'Components/Tabs',
+    component: MTabGroup,
+    subcomponents: { MTab },
     argTypes: {
-        ...sizeArgType()
+        size: sizeArgType,
+        type: {
+            options: [
+                'base',
+                'card',
+            ],
+            control: {
+                type: 'select',
+                default: 'base'
+            }
+        }
     }
-};
+}
 
-export const Basic = createStory(MTabsBasic);
-export const Vertical = createStory(MTabsVertical);
+export default meta;
+type Story = StoryObj<typeof MTabGroup>;
+export const Default = createStory(MTabsBasic) as Story;
+// export const Vertical = createStory(MTabsVertical);

package/src/components/tab/style/Tab.css.ts

@@ -0,0 +1,137 @@
+import {
+    createVar,
+    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 = {
+    tabsGap: createVar(),
+    tabsBackground: createVar(),
+    tabsPadding: createVar(),
+    tabsBorder: createVar(),
+
+    tabBackground: createVar(),
+    tabColor: createVar(),
+    tabBorder: createVar(),
+    tabFontSize: createVar(),
+    tabFontWeight: createVar(),
+    tabPadding: createVar(),
+    tabBorderRadius: createVar()
+}
+
+export const tabWrapper = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+const baseTabs = style({
+    vars: {
+        [vars.tabsGap]: '24px',
+        [vars.tabsBackground]: 'transparent',
+        [vars.tabsPadding]: '0',
+        [vars.tabsBorder]: 'none',
+    },
+    listStyle: 'none',
+    margin: 0,
+    display: 'flex',
+    gap: vars.tabsGap,
+    backgroundColor: vars.tabsBackground,
+    padding: vars.tabsPadding,
+    border: vars.tabsBorder,
+    flexWrap: 'nowrap',
+    flexShrink: 0,
+    flexGrow: 0
+});
+
+export const tabs = styleVariants({
+    base: [baseTabs],
+    card: [baseTabs, {
+        vars: {
+            [vars.tabsGap]: '6px'
+        }
+    }]
+});
+
+export const baseButton = style({
+    vars: {
+        [vars.tabBackground]: 'transparent',
+        [vars.tabBorder]: 'none',
+        [vars.tabFontSize]: '14px',
+        [vars.tabFontWeight]: '600',
+        [vars.tabColor]: themeVars.color.gray[500],
+        [vars.tabPadding]: '6px 0',
+        [vars.tabBorderRadius]: '4px'
+    },
+    verticalAlign: 'bottom',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontWeight: vars.tabFontWeight,
+    color: vars.tabColor,
+    padding: vars.tabPadding,
+    backgroundClip: 'padding-box',
+    backgroundColor: vars.tabBackground,
+    borderRadius: vars.tabBorderRadius,
+    transition: 'all .2s ease',
+    border: 'none',
+    fontSize: vars.tabFontSize,
+    selectors: {
+        '&:hover': {
+            vars: {
+                color: themeVars.color.blue[400],
+            },
+        }
+    }
+});
+
+export const tabButton = styleVariants({
+    base: [baseButton, {
+        vars: {
+            [vars.tabBorderRadius]: '0',
+        }
+    }],
+    card: [baseButton, {
+        vars: {
+            [vars.tabPadding]: '10px 16px',
+            [vars.tabBorderRadius]: `${themeVars.rounded.default} ${themeVars.rounded.default} 0 0`,
+            [vars.tabBackground]: themeVars.color.gray[150],
+            [vars.tabColor]: themeVars.color.gray[600],
+        },
+        border: `1px solid ${themeVars.color.gray[300]}`,
+        borderBottom: 'none',
+        transition: 'all .2s ease',
+    }]
+});
+
+export const tabButtonActive = styleVariants({
+    base: [baseButton, {
+        color: themeVars.color.blue[500],
+        border: 'none',
+        boxShadow: `inset 0 -2px ${themeVars.color.blue[500]}`,
+    }],
+    card: [baseButton, {
+        color: themeVars.color.blue[500],
+        backgroundColor: '#0000',
+    }]
+});
+
+export const tabLabel = style({
+    display: 'flex',
+    alignItems: 'center',
+    zIndex: 1,
+})
+
+export const tabContent = style({
+    padding: '12px 0 0 0',
+    width: '100%',
+    transition: 'color .2s ease, background-color .2s ease',
+})

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

@@ -0,0 +1 @@
+export * from './Tab.css';

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

@@ -1,17 +1,17 @@
-import MTable from '../Table.vue';
-import MButton from '../../button/Button.vue';
-import { MTableBasic, MTableEmpty, MTableSelected } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MTable,
-    subcomponents: {
-        MButton
-    },
-    title: 'Components/Table'
-};
-
-export const Basic = createStory(MTableBasic);
-export const Empty = createStory(MTableEmpty);
-export const Selected = createStory(MTableSelected);
+import MTable from '../Table.vue';
+import MButton from '../../button/Button.vue';
+import { MTableBasic, MTableEmpty, MTableSelected } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MTable,
+    subcomponents: {
+        MButton
+    },
+    title: 'Components/Table'
+};
+
+export const Basic = createStory(MTableBasic);
+export const Empty = createStory(MTableEmpty);
+export const Selected = createStory(MTableSelected);

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

@@ -1,16 +1,16 @@
-import MTag from '../Tag.vue';
-
-import { MTagBasic } from './index';
-
-import { colorArgType, createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MTag,
-    title: 'Components/Tag',
-    argTypes: {
-        ...colorArgType(),
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MTagBasic);
+import MTag from '../Tag.vue';
+
+import { MTagBasic } from './index';
+
+import { colorArgType, createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MTag,
+    title: 'Components/Tag',
+    argTypes: {
+        ...colorArgType(),
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MTagBasic);

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

@@ -1,14 +1,14 @@
-import MTextarea from '../Textarea.vue';
-import { MTextareaBasic } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MTextarea,
-    title: 'Components/Textarea',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MTextareaBasic);
+import MTextarea from '../Textarea.vue';
+import { MTextareaBasic } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MTextarea,
+    title: 'Components/Textarea',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MTextareaBasic);

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

@@ -1,17 +1,17 @@
-import MTooltip from '../Tooltip.vue';
-import MButton from '@/components/button/Button.vue';
-import { MTooltipBasic, MTooltipPlacement } from './index';
-
-import { createStory, popperPositionArgType } from '../../../__storybook__';
-
-export default {
-    component: MTooltip,
-    subcomponents: { MButton },
-    title: 'Components/Tooltip',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-};
-
-export const Basic = createStory(MTooltipBasic);
-export const Placement = createStory(MTooltipPlacement);
+import MTooltip from '../Tooltip.vue';
+import MButton from '@/components/button/Button.vue';
+import { MTooltipBasic, MTooltipPlacement } from './index';
+
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MTooltip,
+    subcomponents: { MButton },
+    title: 'Components/Tooltip',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MTooltipBasic);
+export const Placement = createStory(MTooltipPlacement);

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

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

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

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

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

@@ -1,11 +1,11 @@
-import MVirtualScroll from '../VirtualScroll.vue';
-import { MVirtualScrollBasic } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MVirtualScroll,
-    title: 'Components/VirtualScroll'
-};
-
-export const Basic = createStory(MVirtualScrollBasic);
+import MVirtualScroll from '../VirtualScroll.vue';
+import { MVirtualScrollBasic } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MVirtualScroll,
+    title: 'Components/VirtualScroll'
+};
+
+export const Basic = createStory(MVirtualScrollBasic);

package/src/composables/useCachedUid.ts

@@ -1,15 +1,15 @@
-import { injectConfigProviderContext } from '../components/configprovider/ConfigProvider.vue';
-
-let count = 0
-
-export function useId(deterministicId?: string | null | undefined, prefix = 'ui') {
-    if (deterministicId) {
-        return deterministicId;
-    }
-    const { useId } = injectConfigProviderContext({ useId: undefined })
-    if (useId && typeof useId === 'function') {
-        return `${prefix}-${useId()}`;
-    }
-
-    return `${prefix}-${count++}`;
-}
+import { injectConfigProviderContext } from '../components/configprovider/ConfigProvider.vue';
+
+let count = 0
+
+export function useId(deterministicId?: string | null | undefined, prefix = 'ui') {
+    if (deterministicId) {
+        return deterministicId;
+    }
+    const { useId } = injectConfigProviderContext({ useId: undefined })
+    if (useId && typeof useId === 'function') {
+        return `${prefix}-${useId()}`;
+    }
+
+    return `${prefix}-${count++}`;
+}