@varlet/ui 3.17.1 → 3.18.0-alpha.1781190469654

package/es/tree-menu/TreeMenu.mjs

@@ -0,0 +1,223 @@
+import { call, isArray } from "@varlet/shared";
+import { useVModel } from "@varlet/use";
+import { computed, defineComponent, ref, watch } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+import TreeMenuOptionComponent from "./TreeMenuOption.mjs";
+const { name, n, classes } = createNamespace("tree-menu");
+import { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_tree_menu_option = _resolveComponent("tree-menu-option");
+  return _openBlock(), _createElementBlock(
+    "nav",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      style: _normalizeStyle(_ctx.styles)
+    },
+    [
+      _ctx.$slots.start ? _renderSlot(_ctx.$slots, "start", { key: 0 }) : _createCommentVNode("v-if", true),
+      (_openBlock(true), _createElementBlock(
+        _Fragment,
+        null,
+        _renderList(_ctx.treeMeta.options, (option) => {
+          return _openBlock(), _createBlock(_component_tree_menu_option, {
+            key: option.value,
+            option,
+            ripple: _ctx.ripple,
+            onSelect: _ctx.handleSelect,
+            onToggle: _ctx.handleToggle
+          }, null, 8, ["option", "ripple", "onSelect", "onToggle"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      _ctx.$slots.end ? _renderSlot(_ctx.$slots, "end", { key: 1 }) : _createCommentVNode("v-if", true)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    TreeMenuOption: TreeMenuOptionComponent
+  },
+  props,
+  setup(props2) {
+    const active = useVModel(props2, "active");
+    const expandedValues = useVModel(props2, "expandedValues", {
+      defaultValue: []
+    });
+    const treeMeta = ref({
+      options: [],
+      optionByValue: /* @__PURE__ */ new Map()
+    });
+    const styles = computed(() => {
+      if (props2.indent == null) {
+        return {};
+      }
+      return {
+        "--tree-menu-item-indent": toSizeUnit(props2.indent)
+      };
+    });
+    watch(
+      () => [props2.options, props2.valueKey, props2.labelKey, props2.iconKey, props2.childrenKey],
+      () => {
+        treeMeta.value = createTreeMeta();
+        updateTreeState();
+      },
+      { immediate: true }
+    );
+    watch(
+      () => active.value,
+      (value) => {
+        if (value == null) {
+          expandedValues.value = [];
+          return;
+        }
+        expandAncestors(value);
+      },
+      { immediate: true }
+    );
+    watch(
+      [active, expandedValues, () => props2.disabled],
+      () => {
+        updateTreeState();
+      },
+      { immediate: true }
+    );
+    function createTreeMeta() {
+      const map = /* @__PURE__ */ new Map();
+      const options = normalize(props2.options);
+      options.forEach(visit);
+      function normalize(options2, parent, level = 0) {
+        return options2.reduce((normalizedOptions, option) => {
+          if (option.show === false) {
+            return normalizedOptions;
+          }
+          const type = option.type;
+          const value = option[props2.valueKey];
+          const rawChildren = option[props2.childrenKey];
+          const normalizedOption = {
+            option,
+            type,
+            value,
+            label: option[props2.labelKey],
+            icon: option[props2.iconKey],
+            active: false,
+            activePath: false,
+            disabled: false,
+            expanded: false,
+            hasChildren: false,
+            children: [],
+            parent,
+            level
+          };
+          const childLevel = type === "group" ? level : level + 1;
+          normalizedOption.children = isArray(rawChildren) ? normalize(rawChildren, normalizedOption, childLevel) : [];
+          normalizedOption.hasChildren = !type && normalizedOption.children.length > 0;
+          normalizedOptions.push(normalizedOption);
+          return normalizedOptions;
+        }, []);
+      }
+      function visit(option) {
+        map.set(option.value, option);
+        option.children.forEach(visit);
+      }
+      return {
+        options,
+        optionByValue: map
+      };
+    }
+    function updateTreeState() {
+      var _a;
+      const expandedValueSet = new Set((_a = expandedValues.value) != null ? _a : []);
+      const activeOption = active.value == null ? void 0 : treeMeta.value.optionByValue.get(active.value);
+      const activePathValueSet = new Set(activeOption ? getAncestorValues(activeOption) : []);
+      treeMeta.value.options.forEach((option) => {
+        updateOptionState(option, expandedValueSet, activePathValueSet);
+      });
+    }
+    function updateOptionState(option, expandedValueSet, activePathValueSet) {
+      option.active = active.value === option.value;
+      option.activePath = activePathValueSet.has(option.value);
+      option.disabled = props2.disabled || !!option.option.disabled;
+      option.expanded = expandedValueSet.has(option.value);
+      option.children.forEach((child) => {
+        updateOptionState(child, expandedValueSet, activePathValueSet);
+      });
+    }
+    function getDescendantValues(option) {
+      const values = [];
+      function visit(child) {
+        values.push(child.value);
+        child.children.forEach(visit);
+      }
+      option.children.forEach(visit);
+      return values;
+    }
+    function getAncestorValues(option) {
+      const values = [];
+      let parent = option.parent;
+      while (parent) {
+        values.push(parent.value);
+        parent = parent.parent;
+      }
+      return values;
+    }
+    function expandAncestors(value) {
+      const option = treeMeta.value.optionByValue.get(value);
+      if (!option) {
+        return;
+      }
+      const target = new Set(expandedValues.value);
+      getAncestorValues(option).forEach((value2) => {
+        target.add(value2);
+      });
+      expandedValues.value = [...target];
+    }
+    function handleSelect(option) {
+      if (active.value === option.value) {
+        return;
+      }
+      active.value = option.value;
+      call(props2.onChange, option.value, option.option);
+    }
+    function handleToggle(option) {
+      const target = new Set(expandedValues.value);
+      const expanded = target.has(option.value);
+      if (expanded) {
+        target.delete(option.value);
+        getDescendantValues(option).forEach((value) => target.delete(value));
+        expandedValues.value = [...target];
+        return;
+      }
+      if (props2.accordion) {
+        const siblings = option.parent ? option.parent.children : treeMeta.value.options;
+        siblings.forEach((sibling) => {
+          if (sibling.value === option.value) {
+            return;
+          }
+          target.delete(sibling.value);
+          getDescendantValues(sibling).forEach((value) => target.delete(value));
+        });
+      }
+      target.add(option.value);
+      expandedValues.value = [...target];
+    }
+    return {
+      n,
+      classes,
+      treeMeta,
+      styles,
+      handleSelect,
+      handleToggle
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/tree-menu/TreeMenuOption.mjs

@@ -0,0 +1,206 @@
+import { call, callOrReturn, isString } from "@varlet/shared";
+import { defineComponent, h, withDirectives } from "vue";
+import VarCollapseTransition from "../collapse-transition/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import { createNamespace, defineListenerProp, MaybeVNode } from "../utils/components.mjs";
+const { n, classes } = createNamespace("tree-menu");
+import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, createBlock as _createBlock, createElementVNode as _createElementVNode, withCtx as _withCtx } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_tree_menu_option = _resolveComponent("var-tree-menu-option");
+  const _component_var_collapse_transition = _resolveComponent("var-collapse-transition");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("option"))
+    },
+    [
+      _ctx.option.type === "divider" ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("divider"))
+        },
+        null,
+        2
+        /* CLASS */
+      )) : _ctx.option.type === "group" ? (_openBlock(), _createElementBlock(
+        _Fragment,
+        { key: 1 },
+        [
+          _createVNode(_component_maybe_v_node, {
+            is: _ctx.renderGroupLabel()
+          }, null, 8, ["is"]),
+          _createElementVNode("div", null, [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.option.children, (child) => {
+                return _openBlock(), _createBlock(_component_var_tree_menu_option, {
+                  key: child.value,
+                  option: child,
+                  ripple: _ctx.ripple,
+                  onSelect: _ctx.onSelect,
+                  onToggle: _ctx.onToggle
+                }, null, 8, ["option", "ripple", "onSelect", "onToggle"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : (_openBlock(), _createBlock(_component_maybe_v_node, {
+        key: 2,
+        is: _ctx.renderItem()
+      }, null, 8, ["is"])),
+      _ctx.option.hasChildren ? (_openBlock(), _createBlock(_component_var_collapse_transition, {
+        key: 3,
+        expand: _ctx.option.expanded
+      }, {
+        default: _withCtx(() => [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("children"))
+            },
+            [
+              (_openBlock(true), _createElementBlock(
+                _Fragment,
+                null,
+                _renderList(_ctx.option.children, (child) => {
+                  return _openBlock(), _createBlock(_component_var_tree_menu_option, {
+                    key: child.value,
+                    option: child,
+                    ripple: _ctx.ripple,
+                    onSelect: _ctx.onSelect,
+                    onToggle: _ctx.onToggle
+                  }, null, 8, ["option", "ripple", "onSelect", "onToggle"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["expand"])) : _createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name: "VarTreeMenuOption",
+  components: {
+    VarCollapseTransition,
+    VarIcon,
+    MaybeVNode
+  },
+  directives: { Ripple },
+  props: {
+    option: {
+      type: Object,
+      required: true
+    },
+    ripple: Boolean,
+    onSelect: defineListenerProp(),
+    onToggle: defineListenerProp()
+  },
+  setup(props) {
+    function handleClick() {
+      if (props.option.disabled) {
+        return;
+      }
+      if (props.option.hasChildren) {
+        call(props.onToggle, props.option);
+        return;
+      }
+      call(props.onSelect, props.option);
+    }
+    function renderItem() {
+      const node = renderDefaultItem();
+      const render = props.option.option.render;
+      if (!render) {
+        return node;
+      }
+      return render({ node }, props.option.option, props.option.active);
+    }
+    function renderGroupLabel() {
+      const label = renderLabel();
+      if (!label) {
+        return;
+      }
+      return h("div", { class: n("group-label") }, [h(MaybeVNode, { is: label })]);
+    }
+    function renderDefaultItem() {
+      return withDirectives(
+        h(
+          "div",
+          {
+            class: classes(
+              n("item"),
+              [props.option.active, n("--item-active")],
+              [props.option.activePath, n("--item-active-path")],
+              [props.option.disabled, n("--item-disabled")],
+              [props.ripple && !props.option.disabled, n("--item-ripple-enabled")]
+            ),
+            style: {
+              "--tree-menu-level": props.option.level
+            },
+            onClick: handleClick
+          },
+          [
+            h("span", { class: n("item-indicator") }),
+            h("span", { class: n("item-content") }, [
+              renderIcon(),
+              h("span", { class: n("label") }, [h(MaybeVNode, { is: renderLabel() })]),
+              renderExpandIcon()
+            ])
+          ]
+        ),
+        [[Ripple, { disabled: !props.ripple || props.option.disabled }]]
+      );
+    }
+    function renderIcon() {
+      const iconVNode = callOrReturn(props.option.icon, props.option.option, props.option.active);
+      if (!iconVNode) {
+        return;
+      }
+      return h("span", { class: n("icon-container") }, [
+        isString(iconVNode) ? h(VarIcon, {
+          class: n("icon"),
+          name: iconVNode,
+          namespace: props.option.option.namespace,
+          varTreeMenuCover: ""
+        }) : h(MaybeVNode, { class: n("icon"), is: iconVNode })
+      ]);
+    }
+    function renderLabel() {
+      return callOrReturn(props.option.label, props.option.option, props.option.active);
+    }
+    function renderExpandIcon() {
+      if (!props.option.hasChildren) {
+        return h("span", { class: n("expand-placeholder") });
+      }
+      return h("span", { class: classes(n("expand-icon"), [props.option.expanded, n("--expand-icon-expanded")]) }, [
+        h(VarIcon, { name: "chevron-down", varTreeMenuCover: "" })
+      ]);
+    }
+    return {
+      renderGroupLabel,
+      renderItem,
+      n
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/tree-menu/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as treeMenuProps } from "./props.mjs";
+import TreeMenu from "./TreeMenu.mjs";
+withInstall(TreeMenu);
+withPropsDefaultsSetter(TreeMenu, treeMenuProps);
+const _TreeMenuComponent = TreeMenu;
+var stdin_default = TreeMenu;
+export {
+  _TreeMenuComponent,
+  stdin_default as default,
+  treeMenuProps
+};

package/es/tree-menu/props.mjs

@@ -0,0 +1,40 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  active: [Number, String],
+  options: {
+    type: Array,
+    default: () => []
+  },
+  expandedValues: Array,
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  iconKey: {
+    type: String,
+    default: "icon"
+  },
+  childrenKey: {
+    type: String,
+    default: "children"
+  },
+  accordion: Boolean,
+  indent: {
+    type: [String, Number]
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  },
+  disabled: Boolean,
+  onChange: defineListenerProp(),
+  "onUpdate:active": defineListenerProp(),
+  "onUpdate:expandedValues": defineListenerProp()
+};
+export {
+  props
+};

package/es/tree-menu/style/index.mjs

@@ -0,0 +1,6 @@
+import '../../styles/common.css'
+import '../../collapse-transition/collapseTransition.css'
+import '../../icon/icon.css'
+import '../../ripple/ripple.css'
+import '../treeMenu.css'
+import '../TreeMenuSfc.css'

package/es/tree-menu/treeMenu.css

@@ -0,0 +1 @@
+:root { --tree-menu-background: var(--color-surface-container-high); --tree-menu-item-text-color: var(--color-text); --tree-menu-padding: 8px 0; --tree-menu-item-gap: 0px; --tree-menu-item-height: 40px; --tree-menu-item-padding: 0 16px; --tree-menu-item-border-radius: 0; --tree-menu-item-indent: 16px; --tree-menu-item-icon-size: 22px; --tree-menu-item-icon-margin-right: 24px; --tree-menu-item-label-font-size: var(--font-size-md); --tree-menu-item-label-line-height: 1.5; --tree-menu-group-label-height: 32px; --tree-menu-group-label-padding: 0 16px; --tree-menu-group-label-color: var(--color-on-surface-variant); --tree-menu-group-label-font-size: var(--font-size-sm); --tree-menu-divider-margin: 8px 0; --tree-menu-divider-color: rgba(0, 0, 0, 0.12); --tree-menu-item-hover-background: rgba(85, 85, 85, 0.06); --tree-menu-item-pressed-background: rgba(85, 85, 85, 0.1); --tree-menu-item-active-background: hsla(var(--hsl-primary), 0.1); --tree-menu-item-active-text-color: var(--color-primary); --tree-menu-item-disabled-opacity: var(--opacity-disabled); --tree-menu-item-indicator-border-radius: 0; --tree-menu-item-indicator-active-transition-duration: 0ms; --tree-menu-expand-icon-color: var(--color-on-surface-variant); --tree-menu-expand-icon-size: 20px;}.var-tree-menu { display: block; min-width: 0; padding: var(--tree-menu-padding); color: var(--tree-menu-item-text-color); background: var(--tree-menu-background); -webkit-tap-highlight-color: transparent; transition: color 0.25s, background-color 0.25s;}.var-tree-menu__option + .var-tree-menu__option,.var-tree-menu__children > .var-tree-menu__option:first-child { margin-top: var(--tree-menu-item-gap);}.var-tree-menu__group-label { box-sizing: border-box; min-width: 0; height: var(--tree-menu-group-label-height); padding: var(--tree-menu-group-label-padding); display: flex; align-items: center; color: var(--tree-menu-group-label-color); font-size: var(--tree-menu-group-label-font-size); line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-tree-menu__divider { height: 1px; margin: var(--tree-menu-divider-margin); background-color: var(--tree-menu-divider-color);}.var-tree-menu__item { position: relative; box-sizing: border-box; min-width: 0; height: var(--tree-menu-item-height); padding: var(--tree-menu-item-padding); display: flex; align-items: center; color: var(--tree-menu-item-text-color); cursor: pointer; overflow: hidden; border-radius: var(--tree-menu-item-border-radius); user-select: none; transition: color 0.25s;}.var-tree-menu__item-indicator { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: var(--tree-menu-item-indicator-border-radius); transform: translate(-50%, -50%); pointer-events: none;}.var-tree-menu__item-indicator::before,.var-tree-menu__item-indicator::after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit;}.var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-hover-background); opacity: 0; transition: opacity 150ms, background-color 150ms;}.var-tree-menu__item-indicator::after { background: var(--tree-menu-item-active-background); transform: scaleX(0); transform-origin: center;}.var-tree-menu__item:hover .var-tree-menu__item-indicator::before { opacity: 1;}.var-tree-menu__item:active:not(.var-tree-menu--item-ripple-enabled):not(.var-tree-menu--item-disabled) .var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-pressed-background); opacity: 1;}.var-tree-menu--item-active,.var-tree-menu--item-active-path { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__expand-icon,.var-tree-menu--item-active-path .var-tree-menu__expand-icon { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transform: scaleX(1); transition: transform var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1), background-color var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1);}.var-tree-menu--item-ripple-enabled.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transition: none;}.var-tree-menu--item-active:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu--item-disabled { cursor: not-allowed; opacity: var(--tree-menu-item-disabled-opacity);}.var-tree-menu--item-disabled:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu__item-content { position: relative; z-index: 1; min-width: 0; flex: 1; margin-left: calc(var(--tree-menu-item-indent) * var(--tree-menu-level)); display: flex; align-items: center;}.var-tree-menu__icon-container { width: var(--tree-menu-item-icon-size); min-width: var(--tree-menu-item-icon-size); height: var(--tree-menu-item-icon-size); display: inline-flex; align-items: center; justify-content: center; margin-right: var(--tree-menu-item-icon-margin-right);}.var-tree-menu__icon { font-size: var(--tree-menu-item-icon-size);}.var-tree-menu__label { min-width: 0; height: var(--tree-menu-item-height); flex: 1; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tree-menu-item-label-font-size); line-height: var(--tree-menu-item-label-line-height);}.var-tree-menu__expand-icon,.var-tree-menu__expand-placeholder { width: var(--tree-menu-expand-icon-size); min-width: var(--tree-menu-expand-icon-size); height: var(--tree-menu-expand-icon-size); margin-left: 8px;}.var-tree-menu__expand-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--tree-menu-expand-icon-color); font-size: var(--tree-menu-expand-icon-size); transform: rotate(-90deg); transition: color 0.25s, transform 0.25s;}.var-tree-menu--expand-icon-expanded { transform: rotate(0deg);}