@teammodlr/ui-kit 2.1.74 → 2.1.76

package/src/components/dialog/style/Dialog.css.ts

@@ -1,138 +1,147 @@
-import {
-    createVar,
-    globalKeyframes,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-export const vars = {};
-
-export const root = style({});
-export const backdrop = style({
-    position: 'fixed',
-    inset: 0,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    pointerEvents: 'none'
-});
-
-export const backdropColor = style({
-    backgroundColor: 'rgba(0,0,0,.45)'
-});
-
-export const wrapper = style({
-    position: 'fixed',
-    inset: 0,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    outline: 0,
-    overflow: 'auto',
-    boxSizing: 'border-box',
-});
-
-export const notModal = style({
-    pointerEvents: 'none'
-})
-
-export const dialog = style({
-    boxSizing: 'border-box',
-    margin: '0 auto',
-    padding: 0,
-    position: 'relative',
-    top: '100px',
-    width: 'auto',
-    maxWidth: `calc(100vw - 32px)`,
-    paddingBottom: '24px'
-});
-
-export const content = style({
-    position: 'relative',
-    backgroundColor: '#FFF',
-    backgroundClip: 'padding-box',
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    borderRadius: themeVars.rounded.medium,
-    pointerEvents: 'auto',
-    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
-});
-
-export const header = style({
-    color: themeVars.color.font.default,
-    backgroundColor: '#FFF',
-    marginBottom: themeVars.space[2],
-    borderBottom: `1px solid ${themeVars.color.gray[300]}`,
-    height: `35px`,
-    display: `flex`,
-    alignItems: `center`,
-    padding: `0px ${themeVars.space[2]}`
-});
-
-export const footer = style({
-    textAlign: 'end',
-    background: `0 0`,
-    marginTop: themeVars.space[2]
-});
-
-export const title = style({
-    margin: 0,
-    color: themeVars.color.font.default,
-    fontWeight: 600,
-    lineHeight: 1.5,
-    wordWrap: 'break-word'
-});
-
-export const close = style([
-    {
-        outline: `none ${themeVars.color.gray[300]}`,
-        display: 'inline-block',
-        position: 'absolute',
-        top: themeVars.space[1.5],
-        right: themeVars.space[1.5],
-        width: '1.5rem',
-        height: '1.5rem',
-        backgroundColor: 'transparent',
-        border: 'none',
-        padding: 0,
-        cursor: 'pointer',
-        transition: 'all 0.2s',
-        borderRadius: themeVars.rounded.full,
-        marginLeft: themeVars.space[2],
-        ':hover': {
-            backgroundColor: themeVars.color.gray[150]
-        },
-        ':focus': {
-            backgroundColor: themeVars.color.gray[150]
-        },
-        '::before': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) rotate(45deg)',
-            width: '0.8rem',
-            height: '2px',
-            backgroundColor: themeVars.color.gray[500],
-            transformOrigin: 'center',
-            transition: 'all 0.2s'
-        },
-        '::after': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) rotate(-45deg)',
-            width: '0.8rem',
-            height: '2px',
-            backgroundColor: themeVars.color.gray[500],
-            transformOrigin: 'center',
-            transition: 'all 0.2s'
-        }
-    }
-]);
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const vars = {};
+
+export const root = style({});
+export const backdrop = style({
+    position: 'fixed',
+    inset: 0,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none'
+});
+
+export const backdropColor = style({
+    backgroundColor: 'rgba(0,0,0,.45)'
+});
+
+export const wrapper = style({
+    position: 'fixed',
+    inset: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    outline: 0,
+    overflow: 'auto',
+    boxSizing: 'border-box',
+});
+
+export const notModal = style({
+    pointerEvents: 'none'
+})
+
+export const dialog = style({
+    boxSizing: 'border-box',
+    margin: '0 auto',
+    padding: 0,
+    position: 'relative',
+    top: '100px',
+    width: 'auto',
+    maxWidth: `calc(100vw - 32px)`,
+    paddingBottom: '24px'
+});
+
+export const content = style({
+    position: 'relative',
+    backgroundColor: '#FFF',
+    backgroundClip: 'padding-box',
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.medium,
+    pointerEvents: 'auto',
+    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
+});
+
+export const header = style({
+    color: themeVars.color.font.default,
+    backgroundColor: '#FFF',
+    marginBottom: themeVars.space[2],
+    borderBottom: `1px solid ${themeVars.color.gray[300]}`,
+    height: `35px`,
+    display: `flex`,
+    alignItems: `center`,
+    padding: `0px ${themeVars.space[2]}`,
+    borderRadius: `${themeVars.rounded.medium} ${themeVars.rounded.medium} 0 0`,
+});
+
+export const draggable = style({
+    cursor: "grab"
+});
+
+export const dragging = style({
+    cursor: "grabbing"
+});
+
+export const footer = style({
+    textAlign: 'end',
+    background: `0 0`,
+    marginTop: themeVars.space[2]
+});
+
+export const title = style({
+    margin: 0,
+    color: themeVars.color.font.default,
+    fontWeight: 600,
+    lineHeight: 1.5,
+    wordWrap: 'break-word',
+});
+
+export const close = style([
+    {
+        outline: `none ${themeVars.color.gray[300]}`,
+        display: 'inline-block',
+        position: 'absolute',
+        top: themeVars.space[1.5],
+        right: themeVars.space[1.5],
+        width: '1.5rem',
+        height: '1.5rem',
+        backgroundColor: 'transparent',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        borderRadius: themeVars.rounded.full,
+        marginLeft: themeVars.space[2],
+        ':hover': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        ':focus': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        '::before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        },
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(-45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        }
+    }
+]);

package/src/components/dialogprovider/DialogProvider.vue

@@ -1,17 +1,25 @@
 <template>
     <slot/>
     <template v-if="Object.keys(dialogMap).length > 0">
-        <Teleport to="body">
+        <template v-for="dialog in Object.values(dialogMap)">
             <MDialog
-                v-for="dialog in Object.values(dialogMap)"
+                v-if="dialog.options.open"
                 :key="dialog.key"
-                v-bind="dialog.options"
+                v-bind="filteredOptions(dialog.options)"
                 ref="setDialogRef(dialog.key)"
                 @close="remove(dialog.key)"
+                @on-close="handleClose(dialog.key)"
+                @on-open="handleOpen(dialog.key)"
             >
-                <MRenderer v-if="dialog.options.render" :h="dialog.options.render" :props="dialog.options.props" />
+                <template #default>
+                    <MRenderer
+                        v-if="dialog.options.render"
+                        :h="dialog.options.render"
+                        :props="dialog.options.props"
+                    />
+                </template>
             </MDialog>
-        </Teleport>
+        </template>
     </template>
 </template>
 <script lang="ts">
@@ -59,6 +67,7 @@ export default defineComponent({
                         dialogComponent.open();
                     } else {
                         dialog.options.open = true;
+                        handleOpen(key);
                     }
                 },
                 close: () => {
@@ -66,7 +75,7 @@ export default defineComponent({
                     if (dialogComponent && dialogComponent.close) {
                         dialogComponent.close();
                     } else {
-                        remove(key);
+                        handleClose(key);
                     }
                 },
             };
@@ -75,11 +84,31 @@ export default defineComponent({
             return dialog;
         }
 
+        function filteredOptions(options: DialogOptions) {
+            const { render, props, ...filtered } = options;
+            return filtered;
+        }
+
         function remove(key: string) {
             delete dialogMap[key];
             delete dialogRefs.value[key];
         }
 
+        function handleOpen(key: string) {
+            const dialog = dialogMap[key];
+            if (dialog && dialog.options.onOpen) {
+                dialog.options.onOpen();
+            }
+        }
+
+        function handleClose(key: string) {
+            const dialog = dialogMap[key];
+            if (dialog && dialog.options.onClose) {
+                dialog.options.onClose();
+            }
+            remove(key);
+        }
+
         const api: DialogApiInjection = {
             create,
             remove,
@@ -90,7 +119,10 @@ export default defineComponent({
         return {
             dialogMap,
             remove,
+            handleClose,
+            handleOpen,
             setDialogRef,
+            filteredOptions
         };
     },
 });

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

@@ -41,7 +41,10 @@ function showDialog2() {
         props: {message: testTitle},
         open: true,
         modal: false,
-        draggable: true
+        draggable: false,
+        onOpen: () => {
+            console.log('hello world')
+        }
     });
 
     setTimeout(() => {

package/src/components/dialogprovider/types.ts

@@ -7,6 +7,7 @@ export interface DialogOptions {
     render?: (props: any) => VNodeChild;
     props?: { [key: string]: any };
     onClose?: () => void;
+    onOpen?: () => void;
     open?: boolean;
     draggable?: boolean;
     modal?: boolean;

package/src/components/tab/TabGroup.vue

@@ -13,12 +13,16 @@
 import type { Size } from '../../types/props';
 import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
 import { tabs, tabContent, tabsEvenly } from './style';
+
 export default defineComponent({
     name: "TabGroup",
     props: {
         modelValue: {
             type: [String, Number],
         },
+        selected: {
+            type: [String, Number],
+        },
         size: {
             type: String as PropType<Size>,
             default: 'md'
@@ -38,20 +42,32 @@ export default defineComponent({
         }
     },
     emit: [
-        'update:modelValue'
+        'update:modelValue',
+        'update:selected'
     ],
     setup(props, { emit }) {
         const wrapperRef = ref<HTMLElement>();
         const tabsContentRef = ref<HTMLElement>();
         const contentRef = ref<HTMLElement>();
         const active = ref();
+        const selectedActive = ref();
+
+        // Watch for changes in modelValue
+        watchEffect(() => {
+            if (props.modelValue !== undefined) {
+                active.value = props.modelValue;
+            }
+        });
 
+        // Watch for changes in selected
         watchEffect(() => {
-            active.value = props.modelValue;
+            if (props.selected !== undefined) {
+                selectedActive.value = props.selected;
+            }
         });
 
         const state = reactive({
-            active: computed(() => active.value),
+            active: computed(() => active.value ?? selectedActive.value),
             type: computed(() => props.type)
         });
 
@@ -66,7 +82,6 @@ export default defineComponent({
             return {
                 [tabs[props.type as keyof typeof tabs]]: true,
                 [tabsEvenly]: props.evenly
-
             }
         });
 
@@ -74,18 +89,26 @@ export default defineComponent({
             return {
                 [tabContent]: true
             }
-        })
+        });
 
         function selectTab(tab: string | number) {
-            active.value = tab;
-            emit('update:modelValue', tab);
+            // Update both modelValue and selected if they exist
+            if (props.modelValue !== undefined) {
+                active.value = tab;
+                emit('update:modelValue', tab);
+            }
+
+            if (props.selected !== undefined) {
+                selectedActive.value = tab;
+                emit('update:selected', tab);
+            }
         }
 
         provide("tabs", {
             tabsContentRef,
             selectTab,
             state
-        })
+        });
 
         return {
             wrapperRef,

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

@@ -1,23 +1,23 @@
-<template>
-    <MTabGroup v-model="active">
-        <MTab value="one" label="OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne" closable @on-close="close">
-            Hello Worlddsd
-        </MTab>
-        <MTab value="two" label="Two" disabled>
-            Hello World Two
-        </MTab>
-        <MTab value="three" label="Third">
-            Hello World Two dfndjfn
-        </MTab>
-    </MTabGroup>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const active = ref("one");
-
-function close(tab: any) {
-    console.log('hi', tab);
-}
-</script>
+<template>
+    <MTabGroup v-model="active">
+        <MTab value="one" label="OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne" closable @on-close="close">
+            Hello Worlddsd
+        </MTab>
+        <MTab value="two" label="Two" disabled>
+            Hello World Two
+        </MTab>
+        <MTab value="three" label="Third">
+            Hello World Two dfndjfn
+        </MTab>
+    </MTabGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const active = ref("one");
+
+function close(tab: any) {
+    console.log('hi', tab);
+}
+</script>