@teammodlr/ui-kit 2.0.20 → 2.0.22

package/src/components/transfer/Transfer.vue

@@ -1,144 +1,144 @@
-<template>
-    <div
-        :class="style.wrapper"
-        ref="wrapper"
-    >
-        <div :class="[style.list]">
-            <div
-                :class="style.listHeader">
-                {{sourceTitle}}
-            </div>
-            <div
-                :class="style.listBody">
-                <div
-                    :class="style.listContainer">
-                    <div
-                        v-for="option in sourceData"
-                        :key="
-                        // @ts-ignore
-                        option[optionKey]"
-                        @click="handleSourceClick(option)"
-                        :class="style.transferItem"
-                    >
-                        {{
-                            // @ts-ignore
-                            option[optionLabel] }}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div :class="[style.list]">
-            <div
-                :class="style.listHeader">
-                {{targetTitle}}
-            </div>
-            <div
-                :class="style.listBody">
-                <div
-                    :class="style.listContainer">
-                    <div
-                        v-for="option in targetData"
-                        :key="
-                        // @ts-ignore
-                        option[optionKey]"
-                        @click="handleTargetClick(option)"
-                        :class="style.transferItem"
-                    >
-                        {{
-                            // @ts-ignore
-                            option[optionLabel] }}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-// TODO: Tidy up
-import {computed, defineComponent, ref} from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "Transfer",
-    props: {
-        options: {
-            type: Array,
-            default: () => []
-        },
-        optionKey: {
-            type: String,
-            default: "value"
-        },
-        optionLabel: {
-            type: String,
-            default: "label"
-        },
-        sourceTitle: {
-            type: String,
-            default: "Source"
-        },
-        targetTitle: {
-            type: String,
-            default: "Target"
-        },
-        modelValue: {
-            type: Array,
-            default: () => []
-        },
-    },
-    setup(props, { emit }) {
-        const wrapper = ref<HTMLElement | null>(null);
-
-        const useData = () => {
-            const dataObj = computed(() =>
-                // @ts-ignore
-                props.options.reduce((o, cur) => (o[cur[props.optionKey]] = cur) && o, {})
-            );
-
-            const sourceData = computed(() =>
-                props.options.filter((option: any) => !props.modelValue.includes(option[props.optionKey]))
-            );
-
-            const targetData = computed(() => {
-                return props.modelValue.reduce(
-                    // @ts-ignore
-                    (arr: any, cur: number) => {
-                        // @ts-ignore
-                        const val = dataObj.value[cur];
-                        if (val) {
-                            arr.push(val);
-                        }
-                        return arr;
-                    },
-                    []
-                )
-            });
-
-            return {
-                sourceData,
-                targetData
-            }
-        }
-
-        const { sourceData, targetData } = useData();
-
-        const handleSourceClick = (option: any) => {
-            emit('update:modelValue', [...props.modelValue, option[props.optionKey]]);
-        };
-
-        const handleTargetClick = (option: any) => {
-            emit('update:modelValue', props.modelValue.filter((val: any) => val !== option[props.optionKey]));
-        };
-
-        return {
-            style,
-            sourceData,
-            targetData,
-            wrapper,
-            handleSourceClick,
-            handleTargetClick
-        }
-    }
-})
+<template>
+    <div
+        :class="style.wrapper"
+        ref="wrapper"
+    >
+        <div :class="[style.list]">
+            <div
+                :class="style.listHeader">
+                {{sourceTitle}}
+            </div>
+            <div
+                :class="style.listBody">
+                <div
+                    :class="style.listContainer">
+                    <div
+                        v-for="option in sourceData"
+                        :key="
+                        // @ts-ignore
+                        option[optionKey]"
+                        @click="handleSourceClick(option)"
+                        :class="style.transferItem"
+                    >
+                        {{
+                            // @ts-ignore
+                            option[optionLabel] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div :class="[style.list]">
+            <div
+                :class="style.listHeader">
+                {{targetTitle}}
+            </div>
+            <div
+                :class="style.listBody">
+                <div
+                    :class="style.listContainer">
+                    <div
+                        v-for="option in targetData"
+                        :key="
+                        // @ts-ignore
+                        option[optionKey]"
+                        @click="handleTargetClick(option)"
+                        :class="style.transferItem"
+                    >
+                        {{
+                            // @ts-ignore
+                            option[optionLabel] }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+// TODO: Tidy up
+import {computed, defineComponent, ref} from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "Transfer",
+    props: {
+        options: {
+            type: Array,
+            default: () => []
+        },
+        optionKey: {
+            type: String,
+            default: "value"
+        },
+        optionLabel: {
+            type: String,
+            default: "label"
+        },
+        sourceTitle: {
+            type: String,
+            default: "Source"
+        },
+        targetTitle: {
+            type: String,
+            default: "Target"
+        },
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+    },
+    setup(props, { emit }) {
+        const wrapper = ref<HTMLElement | null>(null);
+
+        const useData = () => {
+            const dataObj = computed(() =>
+                // @ts-ignore
+                props.options.reduce((o, cur) => (o[cur[props.optionKey]] = cur) && o, {})
+            );
+
+            const sourceData = computed(() =>
+                props.options.filter((option: any) => !props.modelValue.includes(option[props.optionKey]))
+            );
+
+            const targetData = computed(() => {
+                return props.modelValue.reduce(
+                    // @ts-ignore
+                    (arr: any, cur: number) => {
+                        // @ts-ignore
+                        const val = dataObj.value[cur];
+                        if (val) {
+                            arr.push(val);
+                        }
+                        return arr;
+                    },
+                    []
+                )
+            });
+
+            return {
+                sourceData,
+                targetData
+            }
+        }
+
+        const { sourceData, targetData } = useData();
+
+        const handleSourceClick = (option: any) => {
+            emit('update:modelValue', [...props.modelValue, option[props.optionKey]]);
+        };
+
+        const handleTargetClick = (option: any) => {
+            emit('update:modelValue', props.modelValue.filter((val: any) => val !== option[props.optionKey]));
+        };
+
+        return {
+            style,
+            sourceData,
+            targetData,
+            wrapper,
+            handleSourceClick,
+            handleTargetClick
+        }
+    }
+})
 </script>

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

@@ -1,21 +1,21 @@
-<template>
-    <MTransfer
-        :options="options"
-        v-model="selected"
-    >
-        hi
-    </MTransfer>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-
-function createOptions () {
-    return Array.from({ length: 100 }).map((_,index) => ({
-        label: 'Option ' + index,
-        value: index,
-    }))
-}
-
-const options = ref(createOptions());
-const selected = ref([1, 2, 3, 4, 5]);
+<template>
+    <MTransfer
+        :options="options"
+        v-model="selected"
+    >
+        hi
+    </MTransfer>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+function createOptions () {
+    return Array.from({ length: 100 }).map((_,index) => ({
+        label: 'Option ' + index,
+        value: index,
+    }))
+}
+
+const options = ref(createOptions());
+const selected = ref([1, 2, 3, 4, 5]);
 </script>

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

@@ -1,16 +1,16 @@
-import MTransfer from "../Transfer.vue";
-
-import {
-    MTransferBasic
-} from "./index";
-
-import {
-    createStory,
-} from "../../../__storybook__";
-
-export default {
-    component: MTransfer,
-    title: "Components/Transfer",
-};
-
+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/transfer/examples/index.ts

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

package/src/components/transfer/style/Transfer.css.ts

@@ -1,68 +1,68 @@
-import { createVar, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-export const vars = {
-
-}
-
-
-export const wrapper = style({
-    display: "flex",
-    flexWrap: "nowrap",
-    wordBreak: "break-word",
-    fontSize: themeVars.fontSize.base,
-    width: "100%",
-    height: "300px",
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    borderRadius: themeVars.rounded.default,
-    overflow: "hidden"
-});
-
-export const list = style({
-    flex: 1,
-    minWidth: 0,
-    height: "inherit",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto"
-});
-
-export const listHeader = style({
-    minHeight: "40px",
-    boxSizing: "border-box",
-    display: "flex",
-    padding: `${themeVars.space["4"]}`,
-    alignItems: "center",
-    position: "sticky",
-    top: 0,
-    backgroundColor: "#FFF",
-    zIndex: 1,
-});
-
-export const listBody = style({
-    flexBasis: 0,
-    flexGrow: 1,
-    boxSizing: "border-box",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-});
-
-export const listContainer = style({
-    flex: 1,
-    position: "relative",
-    overflow: "auto",
-});
-
-export const transferItem = style({
-    padding: `0 ${themeVars.space["4"]}`,
-    minHeight: "35px",
-    display: "flex",
-    alignItems: "center",
-    color: themeVars.color.font.default,
-    cursor: "pointer",
-    userSelect: "none",
-    ':hover': {
-        backgroundColor: themeVars.color.gray[150]
-    }
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+export const vars = {
+
+}
+
+
+export const wrapper = style({
+    display: "flex",
+    flexWrap: "nowrap",
+    wordBreak: "break-word",
+    fontSize: themeVars.fontSize.base,
+    width: "100%",
+    height: "300px",
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.default,
+    overflow: "hidden"
+});
+
+export const list = style({
+    flex: 1,
+    minWidth: 0,
+    height: "inherit",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto"
+});
+
+export const listHeader = style({
+    minHeight: "40px",
+    boxSizing: "border-box",
+    display: "flex",
+    padding: `${themeVars.space["4"]}`,
+    alignItems: "center",
+    position: "sticky",
+    top: 0,
+    backgroundColor: "#FFF",
+    zIndex: 1,
+});
+
+export const listBody = style({
+    flexBasis: 0,
+    flexGrow: 1,
+    boxSizing: "border-box",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+});
+
+export const listContainer = style({
+    flex: 1,
+    position: "relative",
+    overflow: "auto",
+});
+
+export const transferItem = style({
+    padding: `0 ${themeVars.space["4"]}`,
+    minHeight: "35px",
+    display: "flex",
+    alignItems: "center",
+    color: themeVars.color.font.default,
+    cursor: "pointer",
+    userSelect: "none",
+    ':hover': {
+        backgroundColor: themeVars.color.gray[150]
+    }
 })

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

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

package/src/composables/index.ts

@@ -1,3 +1,3 @@
-export { useMessage } from '../components/messageprovider/useMessage';
-export { usePopper } from './usePopper';
+export { useMessage } from '../components/messageprovider/useMessage';
+export { usePopper } from './usePopper';
 export { useZIndex } from './useZIndex';

package/src/composables/useInteractive.ts

@@ -1,20 +1,20 @@
-import type { Ref } from "vue";
-
-export interface InteractiveProps {
-    disabled?: boolean;
-    loading?: boolean;
-}
-
-export const useInteractive = (
-    el: Ref<HTMLElement | null>,
-) => {
-    return {
-        focus: () => el.value?.focus?.(),
-        blur: () => el.value?.blur?.(),
-    }
-}
-
-useInteractive.props = () => ({
-    disabled: Boolean,
-    loading: Boolean,
+import type { Ref } from "vue";
+
+export interface InteractiveProps {
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+export const useInteractive = (
+    el: Ref<HTMLElement | null>,
+) => {
+    return {
+        focus: () => el.value?.focus?.(),
+        blur: () => el.value?.blur?.(),
+    }
+}
+
+useInteractive.props = () => ({
+    disabled: Boolean,
+    loading: Boolean,
 } as const);

package/src/composables/useZIndex.ts

@@ -1,31 +1,31 @@
-import type {InjectionKey, Ref} from "vue";
-import {computed, inject, ref, unref} from "vue";
-import {isNumber} from "@vueuse/core";
-
-const zIndex = ref(0);
-export const initialZIndex = 1000;
-
-export const ZINDEX: InjectionKey<Ref<number | undefined>> = Symbol('ZINDEX');
-export const useZIndex = (override?: Ref<number>) => {
-    const injection = override || inject(ZINDEX, undefined);
-
-    const initial = computed(() => {
-        const fromInjection = unref(injection);
-        return isNumber(fromInjection) ? fromInjection : initialZIndex;
-    });
-
-    const current = computed(() => {
-        return initial.value + zIndex.value
-    });
-
-    const nextZIndex = () => {
-        zIndex.value++;
-        return current.value;
-    };
-
-    return {
-        initial,
-        current,
-        nextZIndex
-    }
+import type {InjectionKey, Ref} from "vue";
+import {computed, inject, ref, unref} from "vue";
+import {isNumber} from "@vueuse/core";
+
+const zIndex = ref(0);
+export const initialZIndex = 1000;
+
+export const ZINDEX: InjectionKey<Ref<number | undefined>> = Symbol('ZINDEX');
+export const useZIndex = (override?: Ref<number>) => {
+    const injection = override || inject(ZINDEX, undefined);
+
+    const initial = computed(() => {
+        const fromInjection = unref(injection);
+        return isNumber(fromInjection) ? fromInjection : initialZIndex;
+    });
+
+    const current = computed(() => {
+        return initial.value + zIndex.value
+    });
+
+    const nextZIndex = () => {
+        zIndex.value++;
+        return current.value;
+    };
+
+    return {
+        initial,
+        current,
+        nextZIndex
+    }
 }

package/src/examples/cards/cards.stories.ts

@@ -1,9 +1,9 @@
-import Sidebar from "./sidebar.vue";
-import {createStory} from "../../__storybook__";
-
-export default {
-    component: Sidebar,
-    title: 'Examples/Cards/Sidebar'
-}
-
-export const Basic = createStory(Sidebar);
+import Sidebar from "./sidebar.vue";
+import {createStory} from "../../__storybook__";
+
+export default {
+    component: Sidebar,
+    title: 'Examples/Cards/Sidebar'
+}
+
+export const Basic = createStory(Sidebar);