yc-design-vue 1.0.1

package/es/Menu/MenuItem.vue2.js

@@ -0,0 +1,234 @@
+import { defineComponent, toRefs, useAttrs, computed, ref, onMounted, createElementBlock, createCommentVNode, unref, openBlock, normalizeClass, createVNode, createBlock, withCtx, createElementVNode, withDirectives, normalizeStyle, renderSlot, vShow, Fragment, renderList, resolveDynamicComponent } from "vue";
+import { createReusableTemplate } from "../node_modules/@vueuse/core/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { valueToPx } from "../_shared/utils/fn.js";
+import { isUndefined } from "../_shared/utils/is.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                         */
+import useContext, { isMenuItemActive, getPopupMaxHeight } from "./hooks/useContext.js";
+import _sfc_main$1 from "./MenuPopOption.vue.js";
+import Dropdown from "../Dropdown/index.js";
+import Tooltip from "../Tooltip/index.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "yc-menu-icon"
+};
+const _hoisted_2 = {
+  key: 2,
+  class: "yc-menu-icon-suffix"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MenuItem"
+  },
+  __name: "MenuItem",
+  props: {
+    path: { default: "" },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { path, disabled } = toRefs(props);
+    const { reuse: ReuseTemplate, define: DefineTemplate } = createReusableTemplate();
+    const attrs = useAttrs();
+    const {
+      computedSelectedKeys,
+      computedOpenKeys,
+      computedCollapsed,
+      levelIndent,
+      mode,
+      theme,
+      autoOpen,
+      autoOpenSelected,
+      accordion,
+      triggerProps,
+      tooltipProps,
+      autoScrollIntoView,
+      scrollConfig,
+      popupMaxHeight: _popupMaxHeight,
+      menuTreeNodes,
+      menuTree,
+      max,
+      menuItemWidths,
+      emits
+    } = useContext().inject();
+    const curNode = computed(() => {
+      const node = menuTreeNodes.value.find(
+        (item) => item.path == path.value
+      ) || { type: "menuitem", level: 0 };
+      return node;
+    });
+    const curIndex = computed(() => {
+      return menuTree.value.findIndex((item) => item.path == path.value);
+    });
+    const submenus = computed(() => {
+      var _a;
+      return ((_a = menuTree.value[curIndex.value]) == null ? void 0 : _a.children) || [];
+    });
+    const isSubmenu = computed(() => {
+      return curNode.value.type == "submenu";
+    });
+    const isRoot = computed(() => {
+      return curNode.value.level === 0;
+    });
+    const isSelected = computed(() => {
+      return isMenuItemActive(
+        menuTree.value,
+        path.value,
+        computedSelectedKeys.value
+      );
+    });
+    const popupMaxHeight = computed(() => {
+      return !isUndefined(attrs.popupMaxHeight) ? getPopupMaxHeight(attrs.popupMaxHeight) : _popupMaxHeight.value;
+    });
+    const menuItemRef = ref();
+    const handleSelect = (value) => {
+      if (computedSelectedKeys.value == value) return;
+      computedSelectedKeys.value = value;
+      emits("menu-item-click", value);
+    };
+    const handleClick = () => {
+      if (mode.value != "vertical" && isSubmenu.value || computedCollapsed.value) {
+        return;
+      }
+      if (!isSubmenu.value && !disabled.value && computedSelectedKeys.value != path.value) {
+        computedSelectedKeys.value = path.value;
+        return emits("menu-item-click", path.value);
+      }
+      if (computedOpenKeys.value.includes(path.value)) {
+        computedOpenKeys.value = computedOpenKeys.value.filter(
+          (item) => item != path.value
+        );
+      } else {
+        computedOpenKeys.value = accordion.value ? [path.value] : [...computedOpenKeys.value, path.value];
+      }
+      emits("sub-menu-click", path.value, computedOpenKeys.value);
+    };
+    onMounted(() => {
+      var _a;
+      if (isRoot.value) {
+        menuItemWidths.value[curIndex.value] = menuItemRef.value.offsetWidth;
+      }
+      if (autoScrollIntoView.value && computedSelectedKeys.value == path.value) {
+        (_a = menuItemRef.value) == null ? void 0 : _a.scrollIntoView(scrollConfig.value);
+      }
+      if (!isSubmenu.value || !autoOpen.value || !autoOpenSelected.value || !isSelected.value) {
+        return;
+      }
+      computedOpenKeys.value.push(path.value);
+    });
+    return (_ctx, _cache) => {
+      return curIndex.value < unref(max) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([
+          "yc-menu-item-wrapper",
+          {
+            "yc-menu-item-mode-horizontal": unref(mode) == "horizontal"
+          }
+        ])
+      }, [
+        createVNode(unref(DefineTemplate), null, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass([
+                "yc-menu-item",
+                `yc-menu-item-theme-${unref(theme)}`,
+                {
+                  "yc-menu-item-selected": isSelected.value,
+                  "yc-menu-item-disabled": unref(disabled),
+                  "yc-menu-item-collapsed": unref(computedCollapsed)
+                }
+              ]),
+              ref_key: "menuItemRef",
+              ref: menuItemRef,
+              onClick: handleClick
+            }, [
+              !isRoot.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "yc-menu-indent",
+                style: normalizeStyle({
+                  width: unref(valueToPx)(unref(levelIndent) * curNode.value.level),
+                  height: unref(valueToPx)(unref(levelIndent))
+                })
+              }, null, 4)) : createCommentVNode("", true),
+              _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+              ])) : createCommentVNode("", true),
+              withDirectives(createElementVNode("div", {
+                class: normalizeClass([
+                  "yc-menu-item-title",
+                  {
+                    "text-ellipsis": unref(mode) != "horizontal"
+                  }
+                ])
+              }, [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ], 2), [
+                [vShow, !unref(computedCollapsed)]
+              ]),
+              _ctx.$slots.suffix ? withDirectives((openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
+              ], 512)), [
+                [vShow, !unref(computedCollapsed)]
+              ]) : createCommentVNode("", true)
+            ], 2)
+          ]),
+          _: 3
+        }),
+        isSubmenu.value && isRoot.value && (unref(mode) != "vertical" || unref(computedCollapsed)) ? (openBlock(), createBlock(unref(Dropdown), {
+          key: 0,
+          "popup-max-height": popupMaxHeight.value,
+          theme: unref(theme),
+          "trigger-props": {
+            autoFitPosition: false,
+            position: unref(mode) == "horizontal" ? "bl" : "rt",
+            animationName: unref(mode) == "horizontal" ? "slide-dynamic-origin" : "zoom-in-fade-out",
+            popupOffset: unref(mode) == "vertical" ? 14 : 20,
+            showArrow: true,
+            ...unref(triggerProps)
+          },
+          onSelect: handleSelect
+        }, {
+          content: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(submenus.value, (node) => {
+              return openBlock(), createBlock(_sfc_main$1, {
+                key: node.path,
+                "tree-node": node,
+                "popup-max-height": popupMaxHeight.value,
+                "trigger-props": unref(triggerProps),
+                "computed-selected-keys": unref(computedSelectedKeys)
+              }, null, 8, ["tree-node", "popup-max-height", "trigger-props", "computed-selected-keys"]);
+            }), 128))
+          ]),
+          default: withCtx(() => [
+            createVNode(unref(ReuseTemplate))
+          ]),
+          _: 1
+        }, 8, ["popup-max-height", "theme", "trigger-props"])) : !isSubmenu.value && isRoot.value && unref(computedCollapsed) ? (openBlock(), createBlock(unref(Tooltip), {
+          key: 1,
+          position: "rt",
+          "trigger-props": {
+            autoFitPosition: false,
+            popupOffset: unref(mode) == "vertical" ? 14 : 18,
+            showArrow: true,
+            ...unref(tooltipProps),
+            ...unref(triggerProps)
+          }
+        }, {
+          content: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.default)))
+          ]),
+          default: withCtx(() => [
+            createVNode(unref(ReuseTemplate))
+          ]),
+          _: 1
+        }, 8, ["trigger-props"])) : (openBlock(), createBlock(unref(ReuseTemplate), { key: 2 }))
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Menu/MenuItemGroup.vue.d.ts

@@ -0,0 +1,18 @@
+import { MenuItemGroupProps, MenuItemGroupSlots } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<MenuItemGroupSlots> & MenuItemGroupSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<MenuItemGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MenuItemGroupProps> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Menu/MenuItemGroup.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./MenuItemGroup.vue2.js";
+/* empty css                   */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-40d6387c"]]);
+export {
+  MenuItemGroup as default
+};

package/es/Menu/MenuItemGroup.vue2.js

@@ -0,0 +1,42 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, normalizeStyle, unref } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { valueToPx } from "../_shared/utils/fn.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                         */
+import useContext from "./hooks/useContext.js";
+const _hoisted_1 = { class: "yc-menu-group" };
+const _hoisted_2 = { class: "yc-menu-group-title text-ellipsis" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MenuItemGroup"
+  },
+  __name: "MenuItemGroup",
+  props: {
+    title: { default: "" }
+  },
+  setup(__props) {
+    const { levelIndent } = useContext().inject();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "title", {}, () => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ], true)
+        ]),
+        createElementVNode("div", {
+          class: "yc-menu-group-content",
+          style: normalizeStyle({
+            paddingLeft: unref(valueToPx)(unref(levelIndent))
+          })
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 4)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Menu/MenuPopOption.vue.d.ts

@@ -0,0 +1,10 @@
+import { MenuTreeNode } from './hooks/useContext';
+import { TriggerProps } from '../Trigger';
+type __VLS_Props = {
+    treeNode: MenuTreeNode;
+    popupMaxHeight?: number;
+    triggerProps: TriggerProps;
+    computedSelectedKeys: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/Menu/MenuPopOption.vue.js

@@ -0,0 +1,57 @@
+import { defineComponent, resolveComponent, createBlock, openBlock, unref, withCtx, resolveDynamicComponent, createElementBlock, Fragment, renderList } from "vue";
+import "../Dropdown/index.js";
+import Doption from "../Dropdown/Doption.vue.js";
+import Dsubmenu from "../Dropdown/Dsubmenu.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PopOption"
+  },
+  __name: "MenuPopOption",
+  props: {
+    treeNode: {},
+    popupMaxHeight: {},
+    triggerProps: {},
+    computedSelectedKeys: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_pop_option = resolveComponent("pop-option");
+      return _ctx.treeNode.type == "menuitem" ? (openBlock(), createBlock(unref(Doption), {
+        key: 0,
+        value: _ctx.treeNode.path,
+        "is-active": _ctx.computedSelectedKeys == _ctx.treeNode.path
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.treeNode.label)))
+        ]),
+        _: 1
+      }, 8, ["value", "is-active"])) : (openBlock(), createBlock(unref(Dsubmenu), {
+        key: 1,
+        "popup-max-height": _ctx.popupMaxHeight,
+        "trigger-props": {
+          popupTranslate: [-4, 0],
+          ..._ctx.triggerProps
+        }
+      }, {
+        content: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.treeNode.children, (v) => {
+            return openBlock(), createBlock(_component_pop_option, {
+              key: v.path,
+              "tree-node": v,
+              popupMaxHeight: _ctx.popupMaxHeight,
+              triggerProps: _ctx.triggerProps,
+              computedSelectedKeys: _ctx.computedSelectedKeys
+            }, null, 8, ["tree-node", "popupMaxHeight", "triggerProps", "computedSelectedKeys"]);
+          }), 128))
+        ]),
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.treeNode.label)))
+        ]),
+        _: 1
+      }, 8, ["popup-max-height", "trigger-props"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Menu/MenuPopOption.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./MenuPopOption.vue.js";
+export {
+  _sfc_main as default
+};

package/es/Menu/SubMenu.vue.d.ts

@@ -0,0 +1,22 @@
+import { SubMenuProps, SubMenuSlots } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<SubMenuSlots> & SubMenuSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SubMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SubMenuProps> & Readonly<{}>, {
+    title: string;
+    path: string;
+    popupMaxHeight: import('./type').PopupMaxHeight;
+    selectable: boolean;
+    popup: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Menu/SubMenu.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./SubMenu.vue2.js";
+/* empty css             */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const SubMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7482bc3e"]]);
+export {
+  SubMenu as default
+};

package/es/Menu/SubMenu.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, withDirectives, createElementVNode, vShow } from "vue";
+import useContext from "./hooks/useContext.js";
+import _sfc_main$1 from "../_shared/icons/IconArrowDown.vue.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                         */
+/* empty css                                    */
+import ExpandTransition from "../_shared/components/ExpandTransition.vue2.js";
+import "./index.js";
+import MenuItem from "./MenuItem.vue.js";
+const _hoisted_1 = { class: "yc-menu-inline" };
+const _hoisted_2 = { class: "yc-menu-inline-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SubMenu"
+  },
+  __name: "SubMenu",
+  props: {
+    path: { default: "" },
+    title: { default: "" },
+    selectable: { type: Boolean, default: false },
+    popup: { type: Boolean, default: false },
+    popupMaxHeight: { type: [Boolean, Number], default: void 0 }
+  },
+  setup(__props) {
+    const { mode, computedOpenKeys, computedCollapsed } = useContext().inject();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(MenuItem), {
+          "is-submenu": "",
+          path: _ctx.path,
+          popupMaxHeight: _ctx.popupMaxHeight,
+          class: "yc-menu-inline-header"
+        }, createSlots({
+          suffix: withCtx(() => [
+            renderSlot(_ctx.$slots, "expand-icon-down", {}, () => [
+              createVNode(unref(_sfc_main$1), {
+                rotate: unref(computedOpenKeys).includes(_ctx.path) ? 180 : 0
+              }, null, 8, ["rotate"])
+            ], true)
+          ]),
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ], true)
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.icon ? {
+            name: "icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["path", "popupMaxHeight"]),
+        createVNode(unref(ExpandTransition), null, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 512), [
+              [
+                vShow,
+                unref(mode) == "vertical" && !unref(computedCollapsed) && unref(computedOpenKeys).includes(_ctx.path)
+              ]
+            ])
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Menu/hooks/useContext.d.ts

@@ -0,0 +1,50 @@
+import { Ref, VNode } from 'vue';
+import { TooltipProps } from '../../Tooltip';
+import { TriggerProps } from '../../Trigger';
+import { MenuMode, PopupMaxHeight, MenuEmits } from '../type';
+import { Props } from '../../_shared/type';
+type MenuContext = {
+    computedSelectedKeys: Ref<string>;
+    computedOpenKeys: Ref<string[]>;
+    computedCollapsed: Ref<boolean>;
+    levelIndent: Ref<number>;
+    accordion: Ref<boolean>;
+    autoOpen: Ref<boolean>;
+    autoOpenSelected: Ref<boolean>;
+    mode: Ref<MenuMode>;
+    theme: Ref<'light' | 'dark'>;
+    autoScrollIntoView: Ref<boolean>;
+    scrollConfig: Ref<ScrollIntoViewOptions>;
+    popupMaxHeight: Ref<number | undefined>;
+    triggerProps: Ref<TriggerProps>;
+    tooltipProps: Ref<TooltipProps>;
+    menuTreeNodes: Ref<MenuTreeNode[]>;
+    menuTree: Ref<MenuTreeNode[]>;
+    menuItemWidths: Ref<number[]>;
+    max: Ref<number>;
+    emits: MenuEmits;
+};
+export type MenuTreeNode = {
+    id: string;
+    type: 'submenu' | 'menuitem';
+    path: string;
+    parentId: string | null;
+    level: number;
+    label: () => any;
+    children?: MenuTreeNode[];
+};
+export declare function FlattenMenuTree(vnodes: VNode[], componentName: string[]): MenuTreeNode[];
+export declare function buildMenuTree(flatData: MenuTreeNode[]): MenuTreeNode[];
+export declare function isMenuItemActive(menuTree: MenuTreeNode[], currentPath: string, activePath: string): boolean;
+export declare const getPopupMaxHeight: (popupMaxHeight: PopupMaxHeight) => number | undefined;
+declare const _default: () => {
+    provide: (props: Props, emits: MenuEmits, menuRef: Ref<HTMLDivElement | undefined>) => {
+        computedCollapsed: import('vue').WritableComputedRef<any, boolean>;
+        breakpoint: Ref<import('../..').BreakpointName, import('../..').BreakpointName>;
+        collapsedWidth: import('vue').ComputedRef<string>;
+        menuTree: import('vue').ComputedRef<MenuTreeNode[]>;
+        max: Ref<number, number>;
+    };
+    inject: () => MenuContext;
+};
+export default _default;