cosey 0.5.0 → 0.5.2

package/components/context-menu/context-menu.js

@@ -1,3 +1,153 @@
-const contextMenuContextSymbol = Symbol("contextMenu");
+import { defineComponent, ref, useTemplateRef, watch, computed, createVNode, Fragment, Transition, Teleport, withDirectives, resolveDirective, isVNode } from 'vue';
+import { offset, flip, shift } from '@floating-ui/dom';
+import { useZIndex } from 'element-plus';
+import { contextMenuEmits, contextMenuSlots, contextMenuProps } from './context-menu.api.js';
+import { useItemProvide } from './useItemProvide.js';
+import { useSubProvide } from './useSubProvide.js';
+import { OnlyChild as _OnlyChild } from '../only-child/index.js';
+import stdin_default$1 from './context-menu.style.js';
+import { useLockScroll } from '../../hooks/useLockScroll.js';
+import { useFloating } from '../../hooks/useFloating.js';
+import { useComponentConfig } from '../config-provider/config-provider.api.js';
 
-export { contextMenuContextSymbol };
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var stdin_default = defineComponent({
+  name: "CoContextMenu",
+  inheritAttrs: false,
+  props: contextMenuProps,
+  slots: contextMenuSlots,
+  emits: contextMenuEmits,
+  setup(props, {
+    slots,
+    emit,
+    expose
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("context-menu", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const {
+      nextZIndex
+    } = useZIndex();
+    const zIndex = ref(0);
+    const pointX = ref(0);
+    const pointY = ref(0);
+    const pointRef = useTemplateRef("point");
+    const menuRef = useTemplateRef("menu");
+    const visible = ref(false);
+    useLockScroll(visible);
+    const {
+      x,
+      y,
+      floating
+    } = useFloating(pointRef, menuRef, {
+      placement: "right-start",
+      strategy: "fixed",
+      middleware: [offset(0), flip(), shift({
+        padding: 5
+      })]
+    });
+    watch(visible, visible2 => {
+      floating.value = visible2;
+    });
+    const pointStyle = computed(() => {
+      return {
+        insetInlineStart: `${pointX.value}px`,
+        insetBlockStart: `${pointY.value}px`,
+        zIndex: zIndex.value
+      };
+    });
+    const backdropStyle = computed(() => {
+      return {
+        zIndex: zIndex.value
+      };
+    });
+    const menuStyle = computed(() => {
+      return {
+        insetInlineStart: `${x.value}px`,
+        insetBlockStart: `${y.value}px`,
+        zIndex: zIndex.value
+      };
+    });
+    const open = (x2, y2) => {
+      pointX.value = x2;
+      pointY.value = y2;
+      if (!visible.value) {
+        zIndex.value = nextZIndex();
+        visible.value = true;
+      }
+      emit("open");
+    };
+    const close = () => {
+      visible.value = false;
+      emit("close");
+    };
+    const onBackDropClick = () => {
+      close();
+    };
+    const onBackdropContextMenu = event => {
+      event.preventDefault();
+      close();
+    };
+    const onContextMenu = event => {
+      console.log("onContextMenu");
+      if (props.disabled) {
+        return;
+      }
+      event.preventDefault();
+      open(event.clientX, event.clientY);
+    };
+    const onMenuContextMenu = event => {
+      event.preventDefault();
+    };
+    useItemProvide({
+      onSelect(command) {
+        if (visible.value) {
+          emit("command", command);
+          close();
+        }
+      }
+    });
+    useSubProvide();
+    expose({
+      open,
+      close
+    });
+    return () => {
+      let _slot;
+      return createVNode(Fragment, null, [slots.reference && createVNode(_OnlyChild, {
+        onContextmenu: onContextMenu
+      }, _isSlot(_slot = slots.reference({})) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(Transition, {
+        "name": "co-fade-out"
+      }, {
+        default: () => [visible.value ? createVNode(Teleport, {
+          "to": "body"
+        }, {
+          default: () => [createVNode("div", null, [createVNode("div", {
+            "ref": "point",
+            "class": [hashId.value, `${prefixCls.value}-point`],
+            "style": pointStyle.value
+          }, null), createVNode("div", {
+            "class": [hashId.value, `${prefixCls.value}-mask`],
+            "style": backdropStyle.value,
+            "onClick": onBackDropClick,
+            "onContextmenu": onBackdropContextMenu
+          }, null), withDirectives(createVNode("div", {
+            "ref": "menu",
+            "class": [hashId.value, prefixCls.value],
+            "style": menuStyle.value,
+            "onContextmenu": onMenuContextMenu
+          }, [slots.default?.({})]), [[resolveDirective("bind"), "$attrs"]])])]
+        }) : null]
+      })]);
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/context-menu/context-menu.style.d.ts

@@ -0,0 +1,8 @@
+import { type CSSObject } from '../cssinjs';
+import { type GenerateStyle } from '../theme';
+import { type AliasTokenWithCommonCls } from '../theme/getSimpleStyleHook';
+export declare const getContextMenuContentStyle: GenerateStyle<AliasTokenWithCommonCls, CSSObject>;
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../theme/theme-context").ThemeManager) => {
+    hashId: import("vue").Ref<string, string>;
+};
+export default _default;

package/components/context-menu/{style/index.js → context-menu.style.js}

@@ -1,5 +1,5 @@
-import { getStyleHook } from '../../theme/getStyleHook.js';
-import { getTruncateStyle } from '../../style/mixins.js';
+import { getSimpleStyleHook } from '../theme/getSimpleStyleHook.js';
+import { getTruncateStyle } from '../style/mixins.js';
 
 const getContextMenuContentStyle = (token) => {
   const { componentCls } = token;
@@ -62,7 +62,7 @@ const getCommonPanelStyle = (token) => {
     }
   };
 };
-const getContextMenuStyle = (token) => {
+var stdin_default = getSimpleStyleHook("CoContextMenu", (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
@@ -83,9 +83,6 @@ const getContextMenuStyle = (token) => {
       ...getContextMenuContentStyle(token)
     }
   };
-};
-var stdin_default = getStyleHook("ContextMenu", (token) => {
-  return [getContextMenuStyle(token)];
 });
 
 export { stdin_default as default, getContextMenuContentStyle };

package/components/context-menu/context-sub-menu.api.d.ts

@@ -0,0 +1,20 @@
+import { type SlotsType, type ExtractPropTypes } from 'vue';
+export declare const contextSubMenuProps: {
+    disabled: {
+        type: BooleanConstructor;
+    };
+    divided: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+};
+export type ContextSubMenuProps = ExtractPropTypes<typeof contextSubMenuProps>;
+export interface ContextSubMenuSlots {
+    default: {};
+}
+export declare const contextSubMenuSlots: SlotsType<ContextSubMenuSlots>;

package/components/context-menu/context-sub-menu.api.js

@@ -0,0 +1,17 @@
+const contextSubMenuProps = {
+  disabled: {
+    type: Boolean
+  },
+  divided: {
+    type: Boolean
+  },
+  icon: {
+    type: String
+  },
+  title: {
+    type: String
+  }
+};
+const contextSubMenuSlots = Object;
+
+export { contextSubMenuProps, contextSubMenuSlots };

package/components/context-menu/context-sub-menu.d.ts

@@ -1,13 +1,31 @@
-export interface ContextSubMenuProps {
-    disabled?: boolean;
-    divided?: boolean;
-    icon?: string;
-    title?: string;
-}
-export interface ContextSubMenuSlots {
-    default?: (props: Record<string, never>) => any;
-}
-export interface ContextSubMenuEmits {
-}
-export interface ContextSubMenuExpose {
-}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+    };
+    divided: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+    };
+    divided: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    divided: boolean;
+}, import("vue").SlotsType<import("./context-sub-menu.api").ContextSubMenuSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/context-menu/context-sub-menu.js

@@ -1 +1,200 @@
+import { defineComponent, useTemplateRef, reactive, computed, onMounted, onBeforeUnmount, ref, watch, createVNode, Fragment, mergeProps, Transition, Teleport } from 'vue';
+import { useZIndex } from 'element-plus';
+import { offset, flip, shift } from '@floating-ui/dom';
+import { contextSubMenuSlots, contextSubMenuProps } from './context-sub-menu.api.js';
+import stdin_default$2 from './content.js';
+import stdin_default$1 from './divider.js';
+import { useItemInject, useItemProvide } from './useItemProvide.js';
+import { useSubProvide, useSubInject } from './useSubProvide.js';
+import { useToken } from '../theme/util/useToken.js';
+import { useComponentConfig } from '../config-provider/config-provider.api.js';
+import { useFloating } from '../../hooks/useFloating.js';
 
+var stdin_default = defineComponent({
+  name: "CoContextSubMenu",
+  inheritAttrs: false,
+  props: contextSubMenuProps,
+  slots: contextSubMenuSlots,
+  setup(props, {
+    attrs,
+    slots
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("context-menu-submenu", props);
+    const {
+      hashId
+    } = useToken();
+    const itemRef = useTemplateRef("item");
+    const subRef = useTemplateRef("sub");
+    useSubProvide();
+    const {
+      addItem,
+      removeItem,
+      select,
+      enter,
+      leave,
+      withIcon
+    } = useItemInject();
+    const itemInstance = reactive({
+      icon: computed(() => !!props.icon),
+      hide: () => {
+        hide();
+      }
+    });
+    onMounted(() => {
+      addItem(itemInstance);
+    });
+    onBeforeUnmount(() => {
+      removeItem(itemInstance);
+    });
+    const {
+      x,
+      y,
+      floating
+    } = useFloating(itemRef, subRef, {
+      placement: "right-start",
+      strategy: "fixed",
+      middleware: [offset(-5), flip(), shift({
+        padding: 5
+      })]
+    });
+    const {
+      nextZIndex
+    } = useZIndex();
+    const zIndex = ref(0);
+    const subStyle = computed(() => {
+      return {
+        insetBlockStart: `${y.value}px`,
+        insetInlineStart: `${x.value}px`,
+        zIndex: zIndex.value
+      };
+    });
+    const hoverStatus = ref("left");
+    const onEnter = () => {
+      if (props.disabled) {
+        return;
+      }
+      if (hoverStatus.value === "left") {
+        hoverStatus.value = "entering";
+      } else if (hoverStatus.value === "leaving") {
+        hoverStatus.value = "entered";
+      }
+      enter(itemInstance);
+    };
+    const onLeave = () => {
+      if (hoverStatus.value === "entering") {
+        hoverStatus.value = "left";
+      }
+    };
+    const onClick = () => {
+      if (props.disabled) {
+        return;
+      }
+      hoverStatus.value = "entered";
+    };
+    const show = () => {
+      hoverStatus.value = "entered";
+    };
+    const hide = () => {
+      hoverStatus.value = "left";
+    };
+    const visible = computed(() => {
+      return hoverStatus.value === "entered" || hoverStatus.value === "leaving";
+    });
+    watch(visible, visible2 => {
+      floating.value = visible2;
+      if (visible2) {
+        zIndex.value = nextZIndex();
+      }
+    });
+    const {
+      addSub,
+      removeSub,
+      showSub,
+      hideSub
+    } = useSubInject();
+    const subInstance = reactive({
+      show,
+      hide
+    });
+    onMounted(() => {
+      addSub(subInstance);
+    });
+    onBeforeUnmount(() => {
+      removeSub(subInstance);
+    });
+    let timer = null;
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    onBeforeUnmount(() => {
+      clear();
+    });
+    watch(hoverStatus, value => {
+      clear();
+      switch (value) {
+        case "entering":
+          timer = setTimeout(() => {
+            timer = null;
+            hoverStatus.value = "entered";
+          }, 200);
+          break;
+        case "leaving":
+          timer = setTimeout(() => {
+            timer = null;
+            hoverStatus.value = "left";
+          }, 200);
+          break;
+        case "entered":
+          showSub(subInstance);
+          break;
+        case "left":
+          hideSub(subInstance);
+          break;
+      }
+    });
+    useItemProvide({
+      onSelect(command) {
+        select(command);
+      },
+      onEnter,
+      onLeave
+    });
+    return () => {
+      return createVNode(Fragment, null, [props.divided && createVNode(stdin_default$1, null, null), createVNode("div", mergeProps({
+        "ref": "item"
+      }, attrs, {
+        "onClick": onClick,
+        "onPointerenter": onEnter,
+        "onPointerleave": onLeave
+      }), [createVNode(stdin_default$2, {
+        "icon": props.icon,
+        "with-icon": withIcon.value,
+        "title": props.title,
+        "hover": visible.value,
+        "arrow": true,
+        "disabled": props.disabled
+      }, null)]), createVNode(Transition, {
+        "name": "co-fade-out"
+      }, {
+        default: () => [visible.value && createVNode(Teleport, {
+          "to": "body"
+        }, {
+          default: () => [createVNode("div", {
+            "ref": "sub",
+            "class": [hashId.value, prefixCls.value],
+            "style": subStyle.value,
+            "onPointerenter": onEnter,
+            "onPointerleave": onLeave
+          }, [slots.default?.({})])]
+        })]
+      })]);
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/context-menu/divider.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/context-menu/divider.js

@@ -0,0 +1,17 @@
+import { defineComponent, createVNode } from 'vue';
+import { useComponentConfig } from '../config-provider/config-provider.api.js';
+
+var stdin_default = defineComponent({
+  setup() {
+    const {
+      prefixCls
+    } = useComponentConfig("context-menu");
+    return () => {
+      return createVNode("div", {
+        "class": `${prefixCls.value}-divider`
+      }, null);
+    };
+  }
+});
+
+export { stdin_default as default };