@teammodlr/ui-kit 2.1.39 → 2.1.43

package/src/components/dropdown/examples/context.vue

@@ -1,71 +1,71 @@
-<template>
-    <div>
-        <div style="background: #eee; width: 500px; height: 500px;" @contextmenu="handleContextMenu">
-
-        </div>
-
-        <MDropdown :virtual="position" :open="showing">
-            <template #menu>
-                <MDropdownList>
-                    <MDropdownItem>
-                        Item One
-                    </MDropdownItem>
-                    <MDropdownItem>
-                        Item Two
-                    </MDropdownItem>
-
-                    <MDropdown>
-                        <MDropdownItem>
-                            <template #icon-right>
-                                <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                                    <path fill-rule="evenodd"
-                                        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                                        clip-rule="evenodd" />
-                                </svg>
-
-                            </template>
-                            Item Three (Parent)
-                        </MDropdownItem>
-
-                        <template #menu>
-                            <MDropdownList>
-                                <MDropdownItem @click="handleClick">
-                                    Child One
-                                </MDropdownItem>
-                                <MDropdownItem>
-                                    Child Two
-                                </MDropdownItem>
-                            </MDropdownList>
-                        </template>
-                    </MDropdown>
-                </MDropdownList>
-            </template>
-        </MDropdown>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, ref, reactive } from 'vue';
-
-const showing = ref(false);
-const position = reactive({
-    x: 0,
-    y: 0
-})
-
-const handleContextMenu = (e: MouseEvent) => {
-    e.preventDefault();
-    showing.value = false;
-    nextTick().then(() => {
-        showing.value = true;
-
-        position.x = e.clientX;
-        position.y = e.clientY;
-    })
-}
-
-const handleClick = () => {
-    alert('hi');
-}
-</script>
+<template>
+    <div>
+        <div style="background: #eee; width: 500px; height: 500px;" @contextmenu="handleContextMenu">
+
+        </div>
+
+        <MDropdown :virtual="position" :open="showing">
+            <template #menu>
+                <MDropdownList>
+                    <MDropdownItem>
+                        Item One
+                    </MDropdownItem>
+                    <MDropdownItem>
+                        Item Two
+                    </MDropdownItem>
+
+                    <MDropdown>
+                        <MDropdownItem>
+                            <template #icon-right>
+                                <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                    <path fill-rule="evenodd"
+                                        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                        clip-rule="evenodd" />
+                                </svg>
+
+                            </template>
+                            Item Three (Parent)
+                        </MDropdownItem>
+
+                        <template #menu>
+                            <MDropdownList>
+                                <MDropdownItem @click="handleClick">
+                                    Child One
+                                </MDropdownItem>
+                                <MDropdownItem>
+                                    Child Two
+                                </MDropdownItem>
+                            </MDropdownList>
+                        </template>
+                    </MDropdown>
+                </MDropdownList>
+            </template>
+        </MDropdown>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref, reactive } from 'vue';
+
+const showing = ref(false);
+const position = reactive({
+    x: 0,
+    y: 0
+})
+
+const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    showing.value = false;
+    nextTick().then(() => {
+        showing.value = true;
+
+        position.x = e.clientX;
+        position.y = e.clientY;
+    })
+}
+
+const handleClick = () => {
+    alert('hi');
+}
+</script>

package/src/components/dropdown/examples/index.ts

@@ -1,3 +1,3 @@
-export { default as MDropdownBasic } from './basic.vue';
-export { default as MDropdownCustom } from './custom.vue';
-export { default as MDropdownContext } from './context.vue';
+export { default as MDropdownBasic } from './basic.vue';
+export { default as MDropdownCustom } from './custom.vue';
+export { default as MDropdownContext } from './context.vue';

package/src/components/dropdown/hooks.ts

@@ -1,30 +1,30 @@
-import { ref, watch, onMounted, nextTick } from 'vue';
-
-import type { Ref } from 'vue';
-
-export function useLabel(
-    rawLabel: Ref<string | number | null>,
-    element: Ref<HTMLElement | null | undefined>
-) {
-    const label = ref(rawLabel.value);
-
-    function setLabel(value: string | number | null) {
-        if (element.value) {
-            label.value = value ?? element.value.textContent?.trim() ?? null;
-        } else {
-            label.value = value;
-        }
-    }
-
-    watch(rawLabel, value => {
-        setLabel(value);
-    });
-
-    onMounted(() => {
-        nextTick(() => {
-            setLabel(rawLabel.value);
-        });
-    });
-
-    return label;
-}
+import { ref, watch, onMounted, nextTick } from 'vue';
+
+import type { Ref } from 'vue';
+
+export function useLabel(
+    rawLabel: Ref<string | number | null>,
+    element: Ref<HTMLElement | null | undefined>
+) {
+    const label = ref(rawLabel.value);
+
+    function setLabel(value: string | number | null) {
+        if (element.value) {
+            label.value = value ?? element.value.textContent?.trim() ?? null;
+        } else {
+            label.value = value;
+        }
+    }
+
+    watch(rawLabel, value => {
+        setLabel(value);
+    });
+
+    onMounted(() => {
+        nextTick(() => {
+            setLabel(rawLabel.value);
+        });
+    });
+
+    return label;
+}

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

@@ -1,158 +1,158 @@
-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 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]
+});

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

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

package/src/components/dropdown/symbol.ts

@@ -1,9 +1,9 @@
-import type { InjectionKey } from 'vue';
-
-export interface DropdownState {
-    handleSelect: (labels: string[]) => void;
-    isOpen: boolean;
-}
-
-export const DROPDOWN_STATE: InjectionKey<DropdownState> =
-    Symbol('DROPDOWN_STATE');
+import type { InjectionKey } from 'vue';
+
+export interface DropdownState {
+    handleSelect: (labels: string[]) => void;
+    isOpen: boolean;
+}
+
+export const DROPDOWN_STATE: InjectionKey<DropdownState> =
+    Symbol('DROPDOWN_STATE');