@teammodlr/ui-kit 2.2.2 → 2.3.0

package/src/components/dropdown/style/Dropdown.css.ts

@@ -1,158 +1,159 @@
-import { createVar, style, styleVariants } from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-export const menu = style({
-    backgroundColor: '#ffffff',
-    borderRadius: '5px',
-    padding: '5px',
-    zIndex: 4000,
-    boxSizing: 'border-box',
-    position: 'relative',
-    minWidth: '130px',
-    maxWidth: '350px',
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    boxShadow: themeVars.shadow.md,
-    overflow: 'auto'
-});
-
-export const menuItems = style({
-    listStyle: 'none',
-    margin: 0,
-    padding: 0
-});
-
-const vars = {
-    backgroundColor: createVar(),
-    color: createVar()
-};
-
-export const menuItem = style({
-    vars: {
-        [vars.backgroundColor]: 'transparent',
-        [vars.color]: themeVars.color.font.text
-    },
-    display: 'grid',
-    alignItems: 'center',
-    gridTemplateAreas: '"icon name kbd decoration"',
-    gridTemplateColumns: '16px 1fr auto minmax(8px, auto)',
-    gridTemplateRows: '16px',
-    columnGap: themeVars.space['1.5'],
-    rowGap: themeVars.space['0.5'],
-    borderRadius: themeVars.rounded.default,
-    padding: `${themeVars.space['2']} ${themeVars.space['1.5']}`,
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.font.text,
-    cursor: 'pointer',
-    transition: 'background-color 0.14s ease',
-    textDecoration: 'none',
-    ':hover': {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.font.text
-        },
-        backgroundColor: vars.backgroundColor,
-        color: vars.color
-    }
-});
-
-export const variant = styleVariants({
-    primary: {
-        color: themeVars.color.blue[500],
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.blue[50],
-                [vars.color]: themeVars.color.blue[500]
-            }
-        }
-    },
-    dark: {
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray[100],
-                [vars.color]: themeVars.color.font.text
-            }
-        }
-    },
-    default: {
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray[100],
-                [vars.color]: themeVars.color.font.text
-            }
-        }
-    },
-    tertiary: {
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray[100],
-                [vars.color]: themeVars.color.font.text
-            }
-        }
-    },
-    success: {
-        color: themeVars.color.green[600],
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.green[50],
-                [vars.color]: themeVars.color.green[600]
-            }
-        }
-    },
-    warning: {
-        color: themeVars.color.amber[600],
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.amber[50],
-                [vars.color]: themeVars.color.amber[600]
-            }
-        }
-    },
-    error: {
-        color: themeVars.color.red[600],
-        ':hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.red[50],
-                [vars.color]: themeVars.color.red[500]
-            }
-        }
-    }
-});
-
-export const menuItemTextContainer = style({
-    margin: `0 ${themeVars.space[0.5]}`,
-    gridArea: 'name',
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'center',
-    gap: themeVars.space[2]
-});
-
-export const menuItemText = style({
-    flex: `0 1 auto`,
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-});
-
-export const menuItemIcon = style({
-    gridArea: 'icon',
-    flexShrink: 0,
-    display: 'flex',
-    position: 'relative',
-    top: '1px',
-    opacity: 0.8
-});
-
-export const menuSeperator = style({
-    height: '1px',
-    backgroundColor: themeVars.color.gray[200],
-    width: `calc(100% + 10px)`,
-    margin: `5px -5px`
-});
-
-export const heading = style({
-    padding: `${themeVars.space[2]} ${themeVars.space[2.5]}`,
-    fontWeight: 500,
-    fontSize: themeVars.fontSize.small,
-    color: themeVars.color.gray[600]
-});
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const menu = style({
+    backgroundColor: '#ffffff',
+    borderRadius: '5px',
+    padding: '5px',
+    zIndex: 4000,
+    boxSizing: 'border-box',
+    position: 'relative',
+    minWidth: '130px',
+    maxWidth: '350px',
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    boxShadow: themeVars.shadow.md,
+    overflow: 'auto'
+});
+
+export const menuItems = style({
+    listStyle: 'none',
+    margin: 0,
+    padding: 0
+});
+
+const vars = {
+    backgroundColor: createVar(),
+    color: createVar()
+};
+
+export const menuItem = style({
+    vars: {
+        [vars.backgroundColor]: 'transparent',
+        [vars.color]: themeVars.color.font.text
+    },
+    display: 'grid',
+    alignItems: 'center',
+    gridTemplateAreas: '"icon name kbd"',
+    gridTemplateColumns: '16px 1fr auto',
+    gridTemplateRows: '16px',
+    columnGap: themeVars.space['1.5'],
+    rowGap: themeVars.space['0.5'],
+    borderRadius: themeVars.rounded.default,
+    padding: `${themeVars.space['2']} ${themeVars.space['1.5']}`,
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.font.text,
+    cursor: 'pointer',
+    transition: 'background-color 0.14s ease',
+    textDecoration: 'none',
+    ':hover': {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.font.text
+        },
+        backgroundColor: vars.backgroundColor,
+        color: vars.color,
+        outline: 'none'
+    }
+});
+
+export const variant = styleVariants({
+    primary: {
+        color: themeVars.color.blue[500],
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[50],
+                [vars.color]: themeVars.color.blue[500]
+            }
+        }
+    },
+    dark: {
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[100],
+                [vars.color]: themeVars.color.font.text
+            }
+        }
+    },
+    default: {
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[100],
+                [vars.color]: themeVars.color.font.text
+            }
+        }
+    },
+    tertiary: {
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[100],
+                [vars.color]: themeVars.color.font.text
+            }
+        }
+    },
+    success: {
+        color: themeVars.color.green[600],
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.green[50],
+                [vars.color]: themeVars.color.green[600]
+            }
+        }
+    },
+    warning: {
+        color: themeVars.color.amber[600],
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.amber[50],
+                [vars.color]: themeVars.color.amber[600]
+            }
+        }
+    },
+    error: {
+        color: themeVars.color.red[600],
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.red[50],
+                [vars.color]: themeVars.color.red[500]
+            }
+        }
+    }
+});
+
+export const menuItemTextContainer = style({
+    margin: `0 ${themeVars.space[0.5]}`,
+    gridArea: 'name',
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center',
+    gap: themeVars.space[2]
+});
+
+export const menuItemText = style({
+    flex: `0 1 auto`,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+});
+
+export const menuItemIcon = style({
+    gridArea: 'icon',
+    flexShrink: 0,
+    display: 'flex',
+    position: 'relative',
+    top: '1px',
+    opacity: 0.8
+});
+
+export const menuSeperator = style({
+    height: '1px',
+    backgroundColor: themeVars.color.gray[200],
+    width: `calc(100% + 10px)`,
+    margin: `5px -5px`
+});
+
+export const heading = style({
+    padding: `${themeVars.space[2]} ${themeVars.space[2.5]}`,
+    fontWeight: 500,
+    fontSize: themeVars.fontSize.small,
+    color: themeVars.color.gray[600]
+});

package/src/components/index.ts

@@ -15,9 +15,8 @@ export { default as MColorPicker } from './colorpicker/ColorPicker.vue';
 export { default as MDropdown } from './dropdown/Dropdown.vue';
 export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
 export { default as MDropdownList } from './dropdown/DropdownList.vue';
-export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
 export { default as MDropdownHeading } from './dropdown/DropdownHeading.vue';
-export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
+export { DropdownMenuSub as MDropdownMenuSub, DropdownMenuSubTrigger as MDropdownMenuSubTrigger, DropdownMenuSubContent as MDropdownMenuSubContent } from 'radix-vue';
 export { default as MForm } from './form/Form.vue';
 export { default as MImage } from './image/Image.vue';
 export { default as MInput } from './input/Input.vue';

package/src/components/tooltip/Tooltip.vue

@@ -5,7 +5,7 @@
         @mouseenter="show"
         @mouseleave="hide"
         ref="wrapper">
-        <TooltipTrigger  ref="reference" >
+        <TooltipTrigger ref="reference" >
             <slot/>
         </TooltipTrigger>
 

package/lib/components/dropdown/DropdownSeperator.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    computedClasses: import("vue").ComputedRef<string[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/lib/components/dropdown/DropdownTrigger.vue.d.ts

@@ -1,11 +0,0 @@
-declare function __VLS_template(): {
-    default?(_: {}): any;
-};
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/lib/components/dropdown/DropdownWrapper.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/src/components/dropdown/DropdownSeperator.vue

@@ -1,23 +0,0 @@
-<template>
-    <li :class="computedClasses"></li>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from "vue";
-import * as style from "./style";
-
-export default defineComponent({
-    name: "DropdownSeperator",
-    setup() {
-        const computedClasses = computed(() => {
-            return [
-                style.menuSeperator
-            ]
-        });
-
-        return {
-            computedClasses
-        }
-    }
-})
-</script>

package/src/components/dropdown/DropdownTrigger.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import {Primitive} from "../primative/primitive";
-import { useForwardExpose } from "../../utils/useForwardExpose";
-import {onMounted} from "vue";
-import { injectDropdownContext } from "./Dropdown.vue";
-
-const { forwardRef, currentElement } = useForwardExpose();
-
-const dropdownContext = injectDropdownContext();
-
-onMounted(() => {
-    dropdownContext.onReferenceChange(currentElement.value);
-})
-</script>
-
-<template>
-    <Primitive as-child :ref="forwardRef">
-        <slot />
-    </Primitive>
-</template>

package/src/components/dropdown/DropdownWrapper.vue

@@ -1,18 +0,0 @@
-<template>
-    <slot />
-</template>
-
-<script lang="ts">
-import { defineComponent, inject, provide } from 'vue';
-import {DROPDOWN_STATE} from "./symbol";
-
-export default defineComponent({
-    name: 'DropdownWrapper',
-    setup() {
-        const state = inject(DROPDOWN_STATE, null);
-
-        // @ts-ignore
-        provide('dropdown-select', state?.handleSelect);
-    }
-})
-</script>