@teammodlr/ui-kit 2.0.29 → 2.0.31

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.stories.ts

@@ -1,28 +1,28 @@
-import MDropdown from '../Dropdown.vue';
-import MDropdownList from '../DropdownList.vue';
-import MDropdownItem from '../DropdownItem.vue';
-import MButton from '../../button/Button.vue';
-
-import {
-    MDropdownBasic,
-    MDropdownContext,
-    MDropdownCustom
-} from './index';
-import {createStory, popperPositionArgType} from '../../../__storybook__';
-
-export default {
-    component: MDropdown,
-    subcomponents: {
-        MDropdownList,
-        MDropdownItem,
-        MButton
-    },
-    title: 'Components/Dropdown',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-}
-
-export const Basic = createStory(MDropdownBasic);
-export const Custom = createStory(MDropdownCustom);
-export const Context = createStory(MDropdownContext);
+import MDropdown from '../Dropdown.vue';
+import MDropdownList from '../DropdownList.vue';
+import MDropdownItem from '../DropdownItem.vue';
+import MButton from '../../button/Button.vue';
+
+import {
+    MDropdownBasic,
+    MDropdownContext,
+    MDropdownCustom
+} from './index';
+import {createStory, popperPositionArgType} from '../../../__storybook__';
+
+export default {
+    component: MDropdown,
+    subcomponents: {
+        MDropdownList,
+        MDropdownItem,
+        MButton
+    },
+    title: 'Components/Dropdown',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+}
+
+export const Basic = createStory(MDropdownBasic);
+export const Custom = createStory(MDropdownCustom);
+export const Context = createStory(MDropdownContext);

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,55 +1,55 @@
-import { style } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-export const menu = style({
-    backgroundColor: "#ffffff",
-    borderRadius: "5px",
-    padding: '5px 0',
-    zIndex: 4000,
-    boxSizing: "border-box",
-    position: "relative",
-    minWidth: "200px",
-    maxWidth: "350px",
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    boxShadow: themeVars.shadow.md
-});
-
-export const menuItems = style({
-    listStyle: "none",
-    margin: 0,
-    padding: 0,
-});
-
-export const menuItem = style({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    cursor: "pointer",
-    minHeight: "36px",
-    fontSize: themeVars.fontSize.base,
-    paddingBlock: themeVars.space['1.5'],
-    paddingInline: themeVars.space['3'],
-    gap: themeVars.space[2],
-    color: themeVars.color.gray[800],
-    transition: "background-color 0.05s ease-in-out",
-    textDecoration: "none",
-    ':hover': {
-        backgroundColor: themeVars.color.gray[100],
-    }
-});
-
-export const menuItemText = style({
-    flex: 1,
-    whiteSpace: "nowrap",
-});
-
-export const menuItemIcon = style({
-    display: "flex",
-    alignItems: "center",
-});
-
-export const menuSeperator = style({
-    height: "1px",
-    backgroundColor: themeVars.color.gray[200],
-    marginBlock: themeVars.space[1],
+import { style } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+export const menu = style({
+    backgroundColor: "#ffffff",
+    borderRadius: "5px",
+    padding: '5px 0',
+    zIndex: 4000,
+    boxSizing: "border-box",
+    position: "relative",
+    minWidth: "200px",
+    maxWidth: "350px",
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    boxShadow: themeVars.shadow.md
+});
+
+export const menuItems = style({
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+});
+
+export const menuItem = style({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    minHeight: "36px",
+    fontSize: themeVars.fontSize.base,
+    paddingBlock: themeVars.space['1.5'],
+    paddingInline: themeVars.space['3'],
+    gap: themeVars.space[2],
+    color: themeVars.color.gray[800],
+    transition: "background-color 0.05s ease-in-out",
+    textDecoration: "none",
+    ':hover': {
+        backgroundColor: themeVars.color.gray[100],
+    }
+});
+
+export const menuItemText = style({
+    flex: 1,
+    whiteSpace: "nowrap",
+});
+
+export const menuItemIcon = style({
+    display: "flex",
+    alignItems: "center",
+});
+
+export const menuSeperator = style({
+    height: "1px",
+    backgroundColor: themeVars.color.gray[200],
+    marginBlock: themeVars.space[1],
 })

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

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

package/src/components/dropdown/symbol.ts

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