@teammodlr/ui-kit 2.3.10 → 2.3.14

package/src/components/checkbox/style/Checkbox.css.ts

@@ -1,178 +1,178 @@
-import {
-    createVar,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '16px',
-    sm: '18px',
-    md: '20px',
-    lg: '22px',
-    xl: '24px'
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    backgroundColor: createVar(),
-    borderColor: createVar(),
-    color: createVar()
-};
-
-export const base = style({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    gap: themeVars.space['1.5']
-});
-
-export const checkbox = style({
-    vars: {
-        [vars.height]: sizes.sm,
-        [vars.radius]: '4px',
-        [vars.backgroundColor]: 'white',
-        [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: 'white'
-    },
-    position: 'relative',
-    width: vars.height,
-    height: vars.height,
-    borderRadius: vars.radius,
-    border: `1px solid ${vars.borderColor}`,
-    color: vars.color,
-    cursor: 'pointer',
-    transition: `all 0.125s ${themeVars.transition.default}`,
-    backgroundColor: 'currentColor',
-
-    appearance: 'none',
-    backgroundOrigin: 'border-box',
-    display: 'inline-block',
-    flexShrink: 0,
-    userSelect: 'none',
-    outline: 'none',
-
-    selectors: {
-        ['&:focus']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: '#FFF'
-            },
-            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
-        },
-        ['&:checked']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            backgroundColor: 'currentcolor',
-            backgroundPosition: '50%',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '100% 100%',
-            borderColor: 'transparent',
-            color: vars.color,
-            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")`
-        },
-        ['&:checked:focus']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            color: vars.color
-        },
-        ['&:indeterminate']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
-                [vars.color]: themeVars.color.blue[500]
-            },
-            backgroundColor: 'currentcolor',
-            backgroundPosition: '50%',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '100% 100%',
-            borderColor: 'transparent',
-            color: vars.color,
-            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E")`
-        },
-        ['&:hover']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.gray[400]
-            }
-        },
-        ['&:disabled']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.gray[300],
-                [vars.color]: themeVars.color.gray[200]
-            },
-            cursor: 'not-allowed'
-        },
-        ['&:disabled:checked']: {
-            vars: {
-                [vars.borderColor]: themeVars.color.gray[400],
-                [vars.color]: themeVars.color.gray[400]
-            },
-            color: vars.color
-        },
-    }
-});
-
-export const helpMessage = style({
-    display: 'block',
-    textDecoration: 'none',
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.gray[600],
-    wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
-    marginLeft: `calc(${themeVars.space["8"]} + ${themeVars.space["1.5"]})`
-});
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'not-allowed'
-});
-
-export const indeterminate = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500]
-    }
-});
-
-export const label = style({
-    marginLeft: themeVars.space['0.5'],
-    fontWeight: '500',
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer'
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md
-        }
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg
-        }
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl
-        }
-    }
-});
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px'
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    color: createVar()
+};
+
+export const base = style({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: themeVars.space['1.5']
+});
+
+export const checkbox = style({
+    vars: {
+        [vars.height]: sizes.sm,
+        [vars.radius]: '4px',
+        [vars.backgroundColor]: 'white',
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: 'white'
+    },
+    position: 'relative',
+    width: vars.height,
+    height: vars.height,
+    borderRadius: vars.radius,
+    border: `1px solid ${vars.borderColor}`,
+    color: vars.color,
+    cursor: 'pointer',
+    transition: `all 0.125s ${themeVars.transition.default}`,
+    backgroundColor: 'currentColor',
+
+    appearance: 'none',
+    backgroundOrigin: 'border-box',
+    display: 'inline-block',
+    flexShrink: 0,
+    userSelect: 'none',
+    outline: 'none',
+
+    selectors: {
+        ['&:focus']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: '#FFF'
+            },
+            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+        },
+        ['&:checked']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
+            },
+            backgroundColor: 'currentcolor',
+            backgroundPosition: '50%',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 100%',
+            borderColor: 'transparent',
+            color: vars.color,
+            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")`
+        },
+        ['&:checked:focus']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
+            },
+            color: vars.color
+        },
+        ['&:indeterminate']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
+            },
+            backgroundColor: 'currentcolor',
+            backgroundPosition: '50%',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 100%',
+            borderColor: 'transparent',
+            color: vars.color,
+            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E")`
+        },
+        ['&:hover']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.gray[400]
+            }
+        },
+        ['&:disabled']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.gray[300],
+                [vars.color]: themeVars.color.gray[200]
+            },
+            cursor: 'not-allowed'
+        },
+        ['&:disabled:checked']: {
+            vars: {
+                [vars.borderColor]: themeVars.color.gray[400],
+                [vars.color]: themeVars.color.gray[400]
+            },
+            color: vars.color
+        },
+    }
+});
+
+export const helpMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+    marginLeft: `calc(${themeVars.space["8"]} + ${themeVars.space["1.5"]})`
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed'
+});
+
+export const indeterminate = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
+    }
+});
+
+export const label = style({
+    marginLeft: themeVars.space['0.5'],
+    fontWeight: '500',
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer'
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg
+        }
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl
+        }
+    }
+});

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

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

package/src/components/colorpicker/ColorPicker.vue

@@ -8,7 +8,6 @@
                         <div :style="{ border: '1px dashed #999', padding: '8px', textAlign: 'center' }">Inherit</div>
                     </template>
                     <template v-else>
-                        <!-- Regular color display -->
                         <div :class="style.referenceColor"
                             :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
                         </div>
@@ -120,6 +119,10 @@ import MInput from "../../components/input/Input.vue";
 export default defineComponent({
     name: "MColorPicker",
     props: {
+        color: {
+            type: String,
+            default: "#FFFFFF"
+        },
         modelValue: {
             type: String,
             default: "#FFFFFF"
@@ -144,7 +147,7 @@ export default defineComponent({
             default: "#FFFFFF"
         }
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'onColorChange'],
     components: {
         MSlider,
         MInput,
@@ -161,7 +164,7 @@ export default defineComponent({
         const gInput = ref("");
         const bInput = ref("");
         const aInput = ref("");
-        const internalValue = ref(props.modelValue);
+        const internalValue = ref(props.color || props.modelValue);
 
         const picker = ref<HTMLElement>();
         const wrapper = ref<HTMLElement>();
@@ -209,6 +212,7 @@ export default defineComponent({
 
         const emitModelValue = () => {
             emit('update:modelValue', hexInput.value);
+            emit('onColorChange', hexInput.value);
         };
 
         const setInputs = () => {
@@ -229,6 +233,13 @@ export default defineComponent({
             setInputs();
         });
 
+        watch(() => props.color, (newColor) => {
+            if (newColor && newColor !== hexInput.value) {
+                hexInput.value = newColor;
+                updateFromHex();
+            }
+        });
+
         const updateFromHSV = (hsv: HSV, alpha: number) => {
             position.x = hsv.s;
             position.y = 1 - hsv.v;
@@ -360,7 +371,7 @@ export default defineComponent({
                 hexInput.value = RGBAToHex(parseInt(r), parseInt(g), parseInt(b), alpha);
 
             } else {
-                hexInput.value = props.modelValue;
+                hexInput.value = props.color || props.modelValue;
             }
 
             updateFromHex();

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

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

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

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

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/configprovider/types.ts

@@ -1,3 +1,3 @@
-export interface ConfigProviderInjection {
-    useId?: () => string;
-}
+export interface ConfigProviderInjection {
+    useId?: () => string;
+}

package/src/components/confirm/Confirm.vue

@@ -1,65 +1,65 @@
-<template>
-    <div>
-        <MModal
-            ref="modal"
-            :title="title"
-            :canClickOutside="false"
-            :onClose="onClose">
-            <template #body>
-                {{ content }}
-            </template>
-
-            <template #footer>
-                <div style="display: flex; flex-grow: 1; justify-content: end">
-                    <MButton :variant="okVariant" @click="handleOk">
-                        {{ okText ?? 'Okay' }}
-                    </MButton>
-                    <MButton style="margin-left: 8px" @click="handleCancel">
-                        {{ cancelText ?? 'Cancel' }}
-                    </MButton>
-                </div>
-            </template>
-        </MModal>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
-import { useZIndex } from '../../composables/useZIndex';
-import { confirmProps } from './props';
-import MModal from '../modal/Modal.vue';
-import MButton from '../button/Button.vue';
-
-export default defineComponent({
-    name: 'Confirm',
-    props: confirmProps,
-    setup(props, { slots }) {
-        const modal = ref();
-
-        const { nextZIndex } = useZIndex();
-
-        async function handleCancel(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onCancel) {
-                await props.onCancel(event);
-            }
-        }
-
-        async function handleOk(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onOk) {
-                props.onOk(event);
-            }
-        }
-        onMounted(() => {
-            modal.value?.open(null);
-        });
-        return {
-            modal,
-            handleOk,
-            handleCancel
-        };
-    },
-    components: { MModal, MButton }
-});
-</script>
+<template>
+    <div>
+        <MModal
+            ref="modal"
+            :title="title"
+            :canClickOutside="false"
+            :onClose="onClose">
+            <template #body>
+                {{ content }}
+            </template>
+
+            <template #footer>
+                <div style="display: flex; flex-grow: 1; justify-content: end">
+                    <MButton :variant="okVariant" @click="handleOk">
+                        {{ okText ?? 'Okay' }}
+                    </MButton>
+                    <MButton style="margin-left: 8px" @click="handleCancel">
+                        {{ cancelText ?? 'Cancel' }}
+                    </MButton>
+                </div>
+            </template>
+        </MModal>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { useZIndex } from '../../composables/useZIndex';
+import { confirmProps } from './props';
+import MModal from '../modal/Modal.vue';
+import MButton from '../button/Button.vue';
+
+export default defineComponent({
+    name: 'Confirm',
+    props: confirmProps,
+    setup(props, { slots }) {
+        const modal = ref();
+
+        const { nextZIndex } = useZIndex();
+
+        async function handleCancel(event: MouseEvent) {
+            modal.value?.close();
+            if (props.onCancel) {
+                await props.onCancel(event);
+            }
+        }
+
+        async function handleOk(event: MouseEvent) {
+            modal.value?.close();
+            if (props.onOk) {
+                props.onOk(event);
+            }
+        }
+        onMounted(() => {
+            modal.value?.open(null);
+        });
+        return {
+            modal,
+            handleOk,
+            handleCancel
+        };
+    },
+    components: { MModal, MButton }
+});
+</script>