@teammodlr/ui-kit 2.3.1 → 2.3.2

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/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <ContextMenuRoot v-if="contextMenu">
+    <ContextMenuRoot v-model:open="isOpen" v-if="contextMenu" v-bind="$attrs">
         <ContextMenuTrigger as-child>
             <slot />
         </ContextMenuTrigger>
@@ -9,7 +9,7 @@
             </ContextMenuContent>
         </ContextMenuPortal>
     </ContextMenuRoot>
-    <DropdownMenuRoot v-model:open="isOpen" v-else :modal="modal">
+    <DropdownMenuRoot v-model:open="isOpen" v-else :modal="modal" v-bind="$attrs">
         <DropdownMenuTrigger as-child>
             <slot />
         </DropdownMenuTrigger>

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

@@ -2,7 +2,7 @@
     <div>
 
 
-        <MDropdown contextMenu>
+        <MDropdown v-model:open="isOpen" :style="{ top: `199px`, left: `9px` }">
             <div style="background: #eee; width: 500px; height: 500px;">
             </div>
             <template #menu>
@@ -46,6 +46,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
+const isOpen = ref(true);
 const handleClick = () => {
     alert('hi');
 }

package/src/components/index.ts

@@ -19,6 +19,11 @@ export { default as MDropdownHeading } from './dropdown/DropdownHeading.vue';
 export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
 
 // export { DropdownMenuSub as MDropdownMenuSub, DropdownMenuSubTrigger as MDropdownMenuSubTrigger, DropdownMenuSubContent as MDropdownMenuSubContent } from 'radix-vue';
+
+export { default as MCardContextMenu } from './cardcontextmenu/CardContextMenu.vue';
+export { default as MCardContextMenuItem } from './cardcontextmenu/CardContextMenuItem.vue';
+export { default as MCardContextMenuList } from './cardcontextmenu/CardContextMenuList.vue';
+export { default as MCardContextMenuSeperator } from './cardcontextmenu/CardContextMenuSeperator.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';