@teammodlr/ui-kit 2.3.1 → 2.3.3

package/src/components/cardcontextmenu/CardContextMenuItem.vue

@@ -0,0 +1,151 @@
+<template>
+    <component
+        :is="computedType"
+        :href="href"
+        ref="wrapper"
+        :class="computedWrapperClasses"
+        role="menuitem"
+        tabindex="0"
+        @click="handleSelect"
+        v-bind="$attrs">
+        <div v-if="hasIconLeft" :class="style.menuItemIcon">
+            <slot name="icon-left" />
+        </div>
+        <div :class="style.menuItemTextContainer">
+            <span :class="style.menuItemText"><slot /></span>
+        </div>
+        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
+            <template v-for="key in hotkey.split('+')">
+                <kbd>{{ key }}</kbd>
+            </template>
+        </div> -->
+        <div v-if="hasIconRight" :class="style.menuItemIcon">
+            <slot name="icon-right" />
+        </div>
+    </component>
+</template>
+
+<script lang="ts">
+import {
+    computed,
+    defineComponent,
+    inject,
+    type PropType,
+    ref,
+    toRef
+} from 'vue';
+import { useLabel } from './hooks';
+import * as style from './style';
+import type { Variant } from '../../types/props';
+
+export default defineComponent({
+    name: 'CardContextMenuItem',
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        reference: {
+            type: Boolean,
+            default: false
+        },
+        onSelect: {
+            type: Function as PropType<(label: string | number) => void>,
+            default: () => {}
+        },
+        hotkey: {
+            type: String,
+            default: null
+        },
+        description: {
+            type: String,
+            default: null
+        },
+        href: {
+            type: String,
+            default: null
+        },
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        }
+    },
+    emits: [],
+    setup(props, { slots }) {
+        const parentSelect = inject('dropdown-select', null);
+        // const state = inject(DROPDOWN_STATE, null);
+        // const keys = useMagicKeys({
+        //     passive: false,
+        //     onEventFired: (event) => {
+
+        //         // only fire when the dropdown is open
+        //         if (state?.isOpen.value) {
+        //             event.preventDefault();
+        //         }
+        //     }
+        // });
+
+        const hasIconLeft = computed(() => !!slots['icon-left']);
+        const hasIconRight = computed(() => !!slots['icon-right']);
+
+        const wrapper = ref(null);
+        const label = toRef(props, 'label');
+        const isReference = ref(props.reference);
+        const currentLabel = useLabel(label, wrapper);
+        function handleSelect() {
+            if (props.disabled || isReference.value) {
+                return;
+            }
+
+            if (typeof parentSelect === 'function') {
+                // @ts-ignore
+                parentSelect([currentLabel.value!]);
+            }
+
+            props.onSelect(currentLabel.value!);
+        }
+
+        // const isOpen = computed(() => {
+        //     return state?.isOpen.value;
+        // });
+
+        const computedWrapperClasses = computed(() => {
+            return [style.menuItem, style.variant[props.variant]];
+        });
+
+        const computedType = computed(() => {
+            if (props.href) {
+                return 'a';
+            }
+
+            return 'li';
+        });
+
+        // onMounted(() => {
+        //     if (props.hotkey) {
+        //         const combination = keys[props.hotkey];
+
+        //         whenever(combination, (v) => {
+        //             if (v && isOpen.value) {
+        //                 handleSelect();
+        //             }
+        //         })
+        //     }
+        // })
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            handleSelect,
+            computedWrapperClasses,
+            style,
+            computedType
+        };
+    }
+});
+</script>

package/src/components/cardcontextmenu/CardContextMenuList.vue

@@ -0,0 +1,20 @@
+<template>
+    <ul :class="style.menuItems">
+        <slot />
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "CardContextMenuList",
+    setup() {
+
+        return {
+            style
+        }
+    }
+})
+</script>

package/src/components/cardcontextmenu/CardContextMenuSeperator.vue

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

package/src/components/cardcontextmenu/CardContextMenuWrapper.vue

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

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

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <div style="background: #eee; width: 500px; height: 500px;" @contextmenu="handleContextMenu">
+
+        </div>
+
+        <MCardContextMenu :virtual="position" :open="showing">
+            <template #menu>
+                <MCardContextMenuList>
+                    <MCardContextMenuItem>
+                        Item One
+                    </MCardContextMenuItem>
+                    <MCardContextMenuItem>
+                        Item Two
+                    </MCardContextMenuItem>
+
+                    <MCardContextMenu>
+                        <MCardContextMenuItem>
+                            <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)
+                        </MCardContextMenuItem>
+
+                        <template #menu>
+                            <MCardContextMenuList>
+                                <MCardContextMenuItem @click="handleClick">
+                                    Child One
+                                </MCardContextMenuItem>
+                                <MCardContextMenuItem>
+                                    Child Two
+                                </MCardContextMenuItem>
+                            </MCardContextMenuList>
+                        </template>
+                    </MCardContextMenu>
+                </MCardContextMenuList>
+            </template>
+        </MCardContextMenu>
+    </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/cardcontextmenu/examples/index.stories.ts

@@ -0,0 +1,22 @@
+import MCardContextMenu from '../CardContextMenu.vue';
+import MCardContextMenuList from '../CardContextMenuList.vue';
+import MCardContextMenuItem from '../CardContextMenuItem.vue';
+import MButton from '../../button/Button.vue';
+
+import { MCardContextMenuBasic } from './index';
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MCardContextMenu,
+    subcomponents: {
+        MCardContextMenuList,
+        MCardContextMenuItem,
+        MButton
+    },
+    title: 'Components/Card Context Menu',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MCardContextMenuBasic);

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

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

package/src/components/cardcontextmenu/hooks.ts

@@ -0,0 +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;
+}

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

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

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

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

package/src/components/cardcontextmenu/symbol.ts

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

package/src/components/dialog/Dialog.vue

@@ -1,52 +1,41 @@
 <template>
     <Teleport to="body">
-        <TransitionGroup
-            type="animation"
-            :enter-active-class="fade.enterActive"
-            :leave-active-class="fade.leaveActive"
-            :enter-from-class="fade.enterFrom"
-            :leave-to-class="fade.leaveTo"
-            >
-            <div :class="style.root" v-if="open" :style="{ zIndex: zIndex, position: 'fixed', inset: '0', pointerEvents: modal ? 'all' : 'none' }">
+        <Transition :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
+            :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
+            <div :class="style.root" v-if="open"
+                :style="{ zIndex: zIndex, position: 'fixed', inset: '0', pointerEvents: modal ? 'all' : 'none' }">
                 <div :class="backdropClasses" v-if="modal"></div>
                 <div ref="wrapper" :class="wrapperClasses">
-                    <Transition
-                        type="animation"
-                        :enter-active-class="modalScale.enterActive"
-                        :leave-active-class="modalScale.leaveActive"
-                        :enter-from-class="modalScale.enterFrom"
-                        :leave-to-class="modalScale.leaveTo"
-                        @enter="onEnter"
-                    >
-                        <div ref="dialog" :style="computedStyle">
-                            <div tabindex="0" aria-hidden="true"
-                                 style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                            <slot v-if="$slots.container" name="container" :close="close"></slot>
-                            <template v-else>
-                                <div :class="style.content">
-                                    <button role="button" :class="style.close" @click="close"></button>
-                                    <div :class="headerClasses" ref="handle">
-                                        <div :class="style.title">
-                                            <slot name="title">
-                                                {{ resolvedTitle }}
-                                            </slot>
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <slot></slot>
-                                    </div>
-                                    <div v-if="$slots.footer" :class="style.footer">
-                                        <slot name="footer"></slot>
+
+                    <div ref="dialog" :style="computedStyle">
+                        <div tabindex="0" aria-hidden="true"
+                            style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                        <slot v-if="$slots.container" name="container" :close="close"></slot>
+                        <template v-else>
+                            <div :class="style.content">
+                                <button role="button" :class="style.close" @click="close"></button>
+                                <div :class="headerClasses" ref="handle">
+                                    <div :class="style.title">
+                                        <slot name="title">
+                                            {{ resolvedTitle }}
+                                        </slot>
                                     </div>
                                 </div>
-                            </template>
-                            <div tabindex="0" aria-hidden="true"
-                                 style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                        </div>
-                    </Transition>
+                                <div>
+                                    <slot></slot>
+                                </div>
+                                <div v-if="$slots.footer" :class="style.footer">
+                                    <slot name="footer"></slot>
+                                </div>
+                            </div>
+                        </template>
+                        <div tabindex="0" aria-hidden="true"
+                            style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                    </div>
+
                 </div>
             </div>
-        </TransitionGroup>
+        </Transition>
     </Teleport>
 </template>
 <script lang="ts">
@@ -84,7 +73,7 @@ export default defineComponent({
         },
         onClose: {
             type: Function,
-            default: () => {},
+            default: () => { },
         },
         zIndex: {
             type: Number,
@@ -111,7 +100,6 @@ export default defineComponent({
         const { nextZIndex, current: maxZIndex } = useZIndex();
         const zIndex = ref(props.zIndex ?? nextZIndex());
 
-        const isOpen = ref<boolean>(props.open);
         const isDragging = ref<boolean>(false);
 
         const { x, y } = useDraggable(dialog, {
@@ -156,7 +144,6 @@ export default defineComponent({
         }));
 
         function close() {
-            isOpen.value = false;
             emit('update:open', false);
             onCloseEmit();
         }
@@ -204,7 +191,7 @@ export default defineComponent({
         }
 
         useEventListener(window, 'resize', () => {
-            if (isOpen.value) {
+            if (props.open) {
                 if (!props.draggable) {
                     nextTick(() => centerDialog())
                 } else {
@@ -216,7 +203,6 @@ export default defineComponent({
         watch(
             () => props.open,
             async (newVal) => {
-                isOpen.value = newVal;
                 if (newVal) {
                     await nextTick();
                     centerDialog();
@@ -243,9 +229,9 @@ export default defineComponent({
             backdropClasses,
             resolvedTitle,
             wrapperClasses,
-            isOpen,
             close,
             onEnter,
+            open: computed(() => props.open)
         };
     },
 });