@teammodlr/ui-kit 2.1.49 → 2.1.52

package/src/components/collapse/style/Collapse.css.ts

@@ -0,0 +1,87 @@
+import {
+    createVar,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const vars = {
+    gap: createVar(),
+    fontSize: createVar(),
+    fontColor: createVar(),
+    borderColor: createVar(),
+    headerPadding: createVar()
+}
+
+export const wrapper = style({
+    width: '100%',
+    display: 'block'
+})
+
+export const collapseItem = style({
+    vars: {
+        [vars.gap]: '16px',
+        [vars.fontSize]: '15px',
+        [vars.fontColor]: themeVars.color.gray[800],
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.headerPadding]: '16px 0 0 0'
+    },
+    display: 'block',
+    fontSize: vars.fontSize,
+    color: vars.fontColor,
+    marginTop: vars.gap,
+    selectors: {
+        '&:not(:first-child)': {
+            borderTop: `1px solid ${vars.borderColor}`
+        }
+
+    }
+});
+
+export const collapseItemHeader = style({
+    fontSize: vars.fontSize,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    position: 'relative',
+    color: vars.fontColor,
+    padding: vars.headerPadding
+});
+
+
+export const collapseItemHeaderMain = style({
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    width: '100%',
+    cursor: 'pointer',
+    flex: 1,
+    gap: '6px'
+});
+
+export const collapseItemHeaderArrow = style({
+    cursor: 'pointer',
+    display: 'flex',
+    width: '16px',
+    height: '16px',
+    color: vars.fontColor,
+    transform: 'rotate(0deg)',
+    transition: 'transform .2s ease-in-out',
+    verticalAlign: 'middle',
+    position: 'relative',
+    top: '1px'
+})
+
+export const collapseItemHeaderArrowActive = style({
+    transform: 'rotate(90deg)',
+})
+
+export const collapseItemContentWrapper = style({
+    display: 'block',
+    fontSize: vars.fontSize,
+    color: vars.fontColor,
+});
+
+export const collapseItemContentInner = style({
+    paddingTop: vars.gap,
+})

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

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

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

@@ -1,12 +1,12 @@
-import MColorPicker from '../ColorPicker.vue';
-import { MColorBasic } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MColorPicker,
-    title: 'Components/Color Picker',
-    argTypes: {}
-};
-
-export const Basic = createStory(MColorBasic);
+import MColorPicker from '../ColorPicker.vue';
+import { MColorBasic } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MColorPicker,
+    title: 'Components/Color Picker',
+    argTypes: {}
+};
+
+export const Basic = createStory(MColorBasic);

package/src/components/configprovider/ConfigProvider.vue

@@ -1,38 +1,38 @@
-<script lang="ts">
-import { createContext } from "../../utils/injection";
-import { type Ref, toRefs } from 'vue';
-interface ConfigProviderContextValue {
-    useId?: () => string,
-    dir?: Ref<string>
-}
-
-export const [injectConfigProviderContext, provideConfigProviderContext]
-    = createContext<ConfigProviderContextValue>('ConfigProvider')
-
-export interface ConfigProviderProps {
-    useId?: () => string,
-    dir?: string
-}
-
-export default {
-    name: 'ConfigProvider',
-}
-</script>
-
-<script setup lang="ts">
-
-const props = withDefaults(defineProps<ConfigProviderProps>(), {
-    useId: undefined,
-    dir: 'ltr'
-})
-
-const { dir } = toRefs(props)
-
-provideConfigProviderContext({
-    useId: props.useId,
-    dir
-})
-</script>
-<template>
-    <slot />
-</template>
+<script lang="ts">
+import { createContext } from "../../utils/injection";
+import { type Ref, toRefs } from 'vue';
+interface ConfigProviderContextValue {
+    useId?: () => string,
+    dir?: Ref<string>
+}
+
+export const [injectConfigProviderContext, provideConfigProviderContext]
+    = createContext<ConfigProviderContextValue>('ConfigProvider')
+
+export interface ConfigProviderProps {
+    useId?: () => string,
+    dir?: string
+}
+
+export default {
+    name: 'ConfigProvider',
+}
+</script>
+
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+    useId: undefined,
+    dir: 'ltr'
+})
+
+const { dir } = toRefs(props)
+
+provideConfigProviderContext({
+    useId: props.useId,
+    dir
+})
+</script>
+<template>
+    <slot />
+</template>

package/src/components/confirm/ConfirmProvider.vue

@@ -1,82 +1,82 @@
-<template>
-    <slot />
-    <template v-if="dialogList.length > 0">
-        <Teleport :to="teleportTo ?? 'body'">
-            <MConfirm
-                v-for="dialog in dialogList"
-                :key="dialog.key"
-                :internalKey="dialog.key"
-                :title="dialog.title"
-                :content="dialog.content"
-                :okText="dialog.okText"
-                :cancelText="dialog.cancelText"
-                :on-ok="dialog.onOk"
-                :on-cancel="dialog.onCancel"
-                :ok-variant="dialog.okVariant"
-                ref="dialogRefs" />
-        </Teleport>
-    </template>
-</template>
-
-<script lang="ts">
-import { defineComponent, provide, ref } from 'vue';
-import { useId } from '../../composables/useCachedUid';
-import { providerProps } from './providerProps';
-import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
-import MConfirm from './Confirm.vue';
-
-interface PrivateConfirm extends Confirm {
-    key: string;
-}
-
-interface PrivateConfirmRef extends Confirm {
-    key: string;
-    hide: () => void;
-}
-
-export default defineComponent({
-    name: 'ConfirmProvider',
-    props: providerProps,
-    components: {
-        MConfirm
-    },
-    setup(props, { slots }) {
-        const dialogListRef = ref<PrivateConfirm[]>([]);
-        const dialogRefs: Record<string, PrivateConfirmRef> = {};
-        const id = useId(null, 'm-confirm');
-        function create(options: ConfirmOptions): Confirm {
-            const key = id;
-            const dialog: PrivateConfirm = {
-                ...options,
-                key,
-                destroy: () => {
-                    dialogRefs[key].hide();
-                }
-            };
-
-            dialogListRef.value.push(dialog);
-            return dialog;
-        }
-
-        function destroyAll(): void {
-            // @ts-ignore
-            Object.values(dialogRefs.value).forEach(dialog => {
-                dialog.hide();
-            });
-        }
-
-        const api: ConfirmApiInjection = {
-            create,
-            destroyAll
-        } as const;
-
-        provide('m-confirm', api);
-
-        return {
-            ...api,
-            dialogRefs,
-            dialogList: dialogListRef
-        };
-    }
-});
-</script>
+<template>
+    <slot />
+    <template v-if="dialogList.length > 0">
+        <Teleport :to="teleportTo ?? 'body'">
+            <MConfirm
+                v-for="dialog in dialogList"
+                :key="dialog.key"
+                :internalKey="dialog.key"
+                :title="dialog.title"
+                :content="dialog.content"
+                :okText="dialog.okText"
+                :cancelText="dialog.cancelText"
+                :on-ok="dialog.onOk"
+                :on-cancel="dialog.onCancel"
+                :ok-variant="dialog.okVariant"
+                ref="dialogRefs" />
+        </Teleport>
+    </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref } from 'vue';
+import { useId } from '../../composables/useCachedUid';
+import { providerProps } from './providerProps';
+import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
+import MConfirm from './Confirm.vue';
+
+interface PrivateConfirm extends Confirm {
+    key: string;
+}
+
+interface PrivateConfirmRef extends Confirm {
+    key: string;
+    hide: () => void;
+}
+
+export default defineComponent({
+    name: 'ConfirmProvider',
+    props: providerProps,
+    components: {
+        MConfirm
+    },
+    setup(props, { slots }) {
+        const dialogListRef = ref<PrivateConfirm[]>([]);
+        const dialogRefs: Record<string, PrivateConfirmRef> = {};
+        const id = useId(null, 'm-confirm');
+        function create(options: ConfirmOptions): Confirm {
+            const key = id;
+            const dialog: PrivateConfirm = {
+                ...options,
+                key,
+                destroy: () => {
+                    dialogRefs[key].hide();
+                }
+            };
+
+            dialogListRef.value.push(dialog);
+            return dialog;
+        }
+
+        function destroyAll(): void {
+            // @ts-ignore
+            Object.values(dialogRefs.value).forEach(dialog => {
+                dialog.hide();
+            });
+        }
+
+        const api: ConfirmApiInjection = {
+            create,
+            destroyAll
+        } as const;
+
+        provide('m-confirm', api);
+
+        return {
+            ...api,
+            dialogRefs,
+            dialogList: dialogListRef
+        };
+    }
+});
+</script>

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

@@ -1,26 +1,26 @@
-import MConfirmProvider from '../ConfirmProvider.vue';
-import { MConfirmProviderBasic } from './index';
-
-const Template = (args: any) => ({
-    components: {
-        MConfirmProvider,
-        MConfirmProviderBasic
-    },
-    setup() {
-        return {
-            args
-        };
-    },
-    template: `
-        <m-confirm-provider v-bind="args">
-            <MConfirmProviderBasic />
-        </m-confirm-provider>
-    `
-});
-
-export default {
-    component: MConfirmProvider,
-    title: 'Components/Confirm'
-};
-
-export const Primary = Template.bind({});
+import MConfirmProvider from '../ConfirmProvider.vue';
+import { MConfirmProviderBasic } from './index';
+
+const Template = (args: any) => ({
+    components: {
+        MConfirmProvider,
+        MConfirmProviderBasic
+    },
+    setup() {
+        return {
+            args
+        };
+    },
+    template: `
+        <m-confirm-provider v-bind="args">
+            <MConfirmProviderBasic />
+        </m-confirm-provider>
+    `
+});
+
+export default {
+    component: MConfirmProvider,
+    title: 'Components/Confirm'
+};
+
+export const Primary = Template.bind({});

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

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

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

@@ -1,26 +1,26 @@
-import MDropdown from '../Dropdown.vue';
-import MDropdownList from '../DropdownList.vue';
-import MDropdownItem from '../DropdownItem.vue';
-import MDropdownHeading from '../DropdownHeading.vue';
-import MButton from '../../button/Button.vue';
-
-import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
-import { createStory, popperPositionArgType } from '../../../__storybook__';
-
-export default {
-    component: MDropdown,
-    subcomponents: {
-        MDropdownList,
-        MDropdownItem,
-        MDropdownHeading,
-        MButton
-    },
-    title: 'Components/Dropdown',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-};
-
-export const Basic = createStory(MDropdownBasic);
-export const Custom = createStory(MDropdownCustom);
-export const Context = createStory(MDropdownContext);
+import MDropdown from '../Dropdown.vue';
+import MDropdownList from '../DropdownList.vue';
+import MDropdownItem from '../DropdownItem.vue';
+import MDropdownHeading from '../DropdownHeading.vue';
+import MButton from '../../button/Button.vue';
+
+import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MDropdown,
+    subcomponents: {
+        MDropdownList,
+        MDropdownItem,
+        MDropdownHeading,
+        MButton
+    },
+    title: 'Components/Dropdown',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MDropdownBasic);
+export const Custom = createStory(MDropdownCustom);
+export const Context = createStory(MDropdownContext);

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

@@ -1,23 +1,23 @@
-import MForm from '../Form.vue';
-import MInput from '../../input/Input.vue';
-import MButton from '../../button/Button.vue';
-import MSelect from '../../select/Select.vue';
-import MCheckbox from '../../checkbox/Checkbox.vue';
-import MColorPicker from '../../colorpicker/ColorPicker.vue';
-
-import { MFormBasic } from './index';
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MForm,
-    subcomponents: {
-        MInput,
-        MButton,
-        MSelect,
-        MCheckbox,
-        MColorPicker
-    },
-    title: 'Components/Form'
-};
-
-export const Basic = createStory(MFormBasic);
+import MForm from '../Form.vue';
+import MInput from '../../input/Input.vue';
+import MButton from '../../button/Button.vue';
+import MSelect from '../../select/Select.vue';
+import MCheckbox from '../../checkbox/Checkbox.vue';
+import MColorPicker from '../../colorpicker/ColorPicker.vue';
+
+import { MFormBasic } from './index';
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MForm,
+    subcomponents: {
+        MInput,
+        MButton,
+        MSelect,
+        MCheckbox,
+        MColorPicker
+    },
+    title: 'Components/Form'
+};
+
+export const Basic = createStory(MFormBasic);

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

@@ -1,10 +1,10 @@
-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);