@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/transfer/Transfer.vue

@@ -1,145 +1,145 @@
-<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]))
-                .sort((a: any, b: any) => a[props.optionLabel].localeCompare(b[props.optionLabel]))
-            );
-
-            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>
+<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]))
+                .sort((a: any, b: any) => a[props.optionLabel].localeCompare(b[props.optionLabel]))
+            );
+
+            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: 8 }).map((_,index) => ({
-        label: 'Option ' + index,
-        value: index,
-    }))
-}
-
-const options = ref(createOptions());
-const selected = ref([1, 2, 3, 4, 5]);
-</script>
+<template>
+    <MTransfer
+        :options="options"
+        v-model="selected"
+    >
+        hi
+    </MTransfer>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+function createOptions () {
+    return Array.from({ length: 8 }).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.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,81 +1,81 @@
-import {
-    createVar,
-    globalStyle,
-    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',
-    borderRight: `1px solid ${themeVars.color.gray[200]}`
-});
-
-// lastchild of list in wrapper
-globalStyle(`${wrapper} > ${list}:last-child`, {
-    borderRight: 'none'
-});
-
-export const listHeader = style({
-    minHeight: '40px',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexShrink: 0,
-    padding: `${themeVars.space['4']}`,
-    alignItems: 'center',
-    position: 'sticky',
-    top: 0,
-    backgroundColor: '#FFF',
-    color: themeVars.color.gray[900],
-    zIndex: 1,
-    fontWeight: 500,
-    borderBottom: `1px solid ${themeVars.color.gray[200]}`
-});
-
-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.gray[800],
-    cursor: 'pointer',
-    fontSize: themeVars.fontSize.base,
-    userSelect: 'none',
-    ':hover': {
-        backgroundColor: themeVars.color.gray[150]
-    }
-});
+import {
+    createVar,
+    globalStyle,
+    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',
+    borderRight: `1px solid ${themeVars.color.gray[200]}`
+});
+
+// lastchild of list in wrapper
+globalStyle(`${wrapper} > ${list}:last-child`, {
+    borderRight: 'none'
+});
+
+export const listHeader = style({
+    minHeight: '40px',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexShrink: 0,
+    padding: `${themeVars.space['4']}`,
+    alignItems: 'center',
+    position: 'sticky',
+    top: 0,
+    backgroundColor: '#FFF',
+    color: themeVars.color.gray[900],
+    zIndex: 1,
+    fontWeight: 500,
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`
+});
+
+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.gray[800],
+    cursor: 'pointer',
+    fontSize: themeVars.fontSize.base,
+    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';