@teammodlr/ui-kit 2.3.12 → 2.3.15

package/src/components/radiobuttongroup/style/RadioButtonGroup.css.ts

@@ -1,37 +1,37 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css';
-import { base as button } from '../../radiobutton/style/RadioButton.css';
-import { themeVars } from '../../../styles/theme.css';
-
-const vars = {
-    padding: createVar(),
-    borderRadius: createVar(),
-    gap: createVar()
-};
-
-export const base = style({
-    vars: {
-        [vars.padding]: themeVars.space[1],
-        [vars.borderRadius]: themeVars.rounded.default,
-        [vars.gap]: themeVars.space[1]
-    },
-    display: 'inline-flex',
-    position: 'relative',
-    flexWrap: 'nowrap',
-    backgroundColor: themeVars.color.gray[100],
-    padding: vars.padding,
-    borderRadius: vars.borderRadius,
-    gap: vars.gap
-});
-
-export const vertical = style({
-    flexDirection: 'column'
-});
-
-export const block = style({
-    display: 'flex',
-    alignItems: 'stretch'
-});
-
-globalStyle(`${base}${block} > ${button}`, {
-    flex: 1
-});
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
+import { base as button } from '../../radiobutton/style/RadioButton.css';
+import { themeVars } from '../../../styles/theme.css';
+
+const vars = {
+    padding: createVar(),
+    borderRadius: createVar(),
+    gap: createVar()
+};
+
+export const base = style({
+    vars: {
+        [vars.padding]: themeVars.space[1],
+        [vars.borderRadius]: themeVars.rounded.default,
+        [vars.gap]: themeVars.space[1]
+    },
+    display: 'inline-flex',
+    position: 'relative',
+    flexWrap: 'nowrap',
+    backgroundColor: themeVars.color.gray[100],
+    padding: vars.padding,
+    borderRadius: vars.borderRadius,
+    gap: vars.gap
+});
+
+export const vertical = style({
+    flexDirection: 'column'
+});
+
+export const block = style({
+    display: 'flex',
+    alignItems: 'stretch'
+});
+
+globalStyle(`${base}${block} > ${button}`, {
+    flex: 1
+});

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

@@ -1 +1 @@
-export * from './RadioButtonGroup.css';
+export * from './RadioButtonGroup.css';

package/src/components/radiobuttongroup/symbol.ts

@@ -1,12 +1,12 @@
-import type { InjectionKey } from 'vue';
-import type { Size } from '../../types/props';
-
-export interface RadioButtonGroupState {
-    size: Size;
-    name: string;
-    modelValue: string | number;
-    doUpdateValue: (value: string | number) => void;
-}
-
-export const RADIO_BUTTON_GROUP_STATE: InjectionKey<RadioButtonGroupState> =
-    Symbol('RADIO_BUTTON_GROUP_STATE');
+import type { InjectionKey } from 'vue';
+import type { Size } from '../../types/props';
+
+export interface RadioButtonGroupState {
+    size: Size;
+    name: string;
+    modelValue: string | number;
+    doUpdateValue: (value: string | number) => void;
+}
+
+export const RADIO_BUTTON_GROUP_STATE: InjectionKey<RadioButtonGroupState> =
+    Symbol('RADIO_BUTTON_GROUP_STATE');

package/src/components/renderer/examlpes/basic.vue

@@ -1,23 +1,23 @@
-<template>
-    <MRenderer :h="renderMessage" :props="{ message: msg }">
-    </MRenderer>
-</template>
-  
-<script setup lang="ts">
-import { h, ref } from 'vue'
-const msg = ref('some content')
-
-function renderMessage({ message }: { message: string }) {
-    return h('p', [
-        'Here are ',
-        h(
-            'span',
-            {
-                style: 'color: red'
-            },
-            [message]
-        ),
-        ' that using render function',
-    ])
-}
-</script>
+<template>
+    <MRenderer :h="renderMessage" :props="{ message: msg }">
+    </MRenderer>
+</template>
+  
+<script setup lang="ts">
+import { h, ref } from 'vue'
+const msg = ref('some content')
+
+function renderMessage({ message }: { message: string }) {
+    return h('p', [
+        'Here are ',
+        h(
+            'span',
+            {
+                style: 'color: red'
+            },
+            [message]
+        ),
+        ' that using render function',
+    ])
+}
+</script>

package/src/components/renderer/examlpes/index.stories.ts

@@ -1,14 +1,14 @@
-import MRenderer from '../renderer';
-import { MRendererBasic } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MRenderer,
-    title: 'Components/Renderer',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MRendererBasic);
+import MRenderer from '../renderer';
+import { MRendererBasic } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MRenderer,
+    title: 'Components/Renderer',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MRendererBasic);

package/src/components/renderer/examlpes/index.ts

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

package/src/components/renderer/props.ts

@@ -1,14 +1,14 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-export const rendererProps = {
-    h: {
-        type: Function,
-        default: null
-    },
-    props: {
-        type: Object as PropType<Record<string, any>>,
-        default: undefined
-    }
-};
-
-export type RendererProps = ExtractPropTypes<typeof rendererProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const rendererProps = {
+    h: {
+        type: Function,
+        default: null
+    },
+    props: {
+        type: Object as PropType<Record<string, any>>,
+        default: undefined
+    }
+};
+
+export type RendererProps = ExtractPropTypes<typeof rendererProps>;

package/src/components/renderer/renderer.ts

@@ -1,16 +1,16 @@
-import { defineComponent, renderSlot } from 'vue';
-import { rendererProps } from './props';
-
-export default defineComponent({
-    name: 'Renderer',
-    props: rendererProps,
-    setup(props, { slots }) {
-        return () => {
-            if (typeof props.h !== 'function') {
-                return renderSlot(slots, 'default', props.props);
-            }
-
-            return props.h(props.props);
-        };
-    }
-});
+import { defineComponent, renderSlot } from 'vue';
+import { rendererProps } from './props';
+
+export default defineComponent({
+    name: 'Renderer',
+    props: rendererProps,
+    setup(props, { slots }) {
+        return () => {
+            if (typeof props.h !== 'function') {
+                return renderSlot(slots, 'default', props.props);
+            }
+
+            return props.h(props.props);
+        };
+    }
+});

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/examples/index.ts

@@ -1,3 +1,3 @@
-export { default as MSelectBasic } from './basic.vue';
-export { default as MSelectSearchable } from './searchable.vue';
-export { default as MSelectMultiple } from './multiple.vue';
+export { default as MSelectBasic } from './basic.vue';
+export { default as MSelectSearchable } from './searchable.vue';
+export { default as MSelectMultiple } from './multiple.vue';

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

@@ -1,21 +1,21 @@
-<template>
-    <MSelect
-        v-model="value"
-        :options="options"
-        :option-value="'id'"
-        :option-label="'name'"
-        multiple
-        searchable
-        />
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const options = Array.from({ length: 10 }, (_, i) => ({
-    id: i,
-    name: `Option ${i+1}`
-}));
-
-const value = ref([]);
-</script>
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        multiple
+        searchable
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const options = Array.from({ length: 10 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref([]);
+</script>

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

@@ -1,20 +1,20 @@
-<template>
-    <MSelect
-        v-model="value"
-        :options="options"
-        :option-value="'id'"
-        :option-label="'name'"
-        searchable
-        />
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const options = Array.from({ length: 50 }, (_, i) => ({
-    id: i,
-    name: `Option ${i+1}`
-}));
-
-const value = ref();
-</script>
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        searchable
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+</script>

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

@@ -1 +1 @@
-export * from './Select.css';
+export * from './Select.css';

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/Skeleton.vue

@@ -1,55 +1,55 @@
-<template>
-    <div
-            :class="computedClasses"
-            :style="computedStyles"
-    ></div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "MSkeleton",
-    props: {
-        width: {
-            type: String
-        },
-        height: {
-            type: String
-        },
-        loading: {
-            type: Boolean,
-            default: true
-        }
-    },
-    setup(props) {
-        const computedClasses = computed(() => {
-            return [
-                style.base,
-                {
-                    [style.loading]: props.loading
-                }
-            ]
-        });
-
-        const computedStyles = computed(() => {
-            let styles = {} as Record<string, string>;
-            if (props.width) {
-                styles[style.vars.width] = props.width;
-            }
-
-            if (props.height) {
-                styles[style.vars.height] = props.height;
-            }
-
-            return style.assignInlineVars(styles);
-        });
-
-        return {
-            computedClasses,
-            computedStyles
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="computedClasses"
+            :style="computedStyles"
+    ></div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "MSkeleton",
+    props: {
+        width: {
+            type: String
+        },
+        height: {
+            type: String
+        },
+        loading: {
+            type: Boolean,
+            default: true
+        }
+    },
+    setup(props) {
+        const computedClasses = computed(() => {
+            return [
+                style.base,
+                {
+                    [style.loading]: props.loading
+                }
+            ]
+        });
+
+        const computedStyles = computed(() => {
+            let styles = {} as Record<string, string>;
+            if (props.width) {
+                styles[style.vars.width] = props.width;
+            }
+
+            if (props.height) {
+                styles[style.vars.height] = props.height;
+            }
+
+            return style.assignInlineVars(styles);
+        });
+
+        return {
+            computedClasses,
+            computedStyles
+        }
+    }
+})
+</script>

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

@@ -1,3 +1,3 @@
-<template>
-    <MSkeleton />
-</template>
+<template>
+    <MSkeleton />
+</template>

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/skeleton/examples/index.ts

@@ -1,2 +1,2 @@
-export { default as MSkeletonBasic } from './basic.vue';
-export { default as MSkeletonPost } from './post.vue';
+export { default as MSkeletonBasic } from './basic.vue';
+export { default as MSkeletonPost } from './post.vue';

package/src/components/skeleton/examples/post.vue

@@ -1,8 +1,8 @@
-<template>
-    <div>
-        <MSkeleton variant="thumb" style="margin-bottom: 10px;" />
-        <MSkeleton variant="heading" style="margin-bottom: 10px; width: 340px;"  />
-        <MSkeleton variant="line" style="margin-bottom: 6px;" />
-        <MSkeleton variant="line" />
-    </div>
-</template>
+<template>
+    <div>
+        <MSkeleton variant="thumb" style="margin-bottom: 10px;" />
+        <MSkeleton variant="heading" style="margin-bottom: 10px; width: 340px;"  />
+        <MSkeleton variant="line" style="margin-bottom: 6px;" />
+        <MSkeleton variant="line" />
+    </div>
+</template>