@evance/evance-ui 1.0.8 → 1.0.10

package/dist/cjs/EvListItem.vue_vue_type_script_setup_true_lang-B72cX-AJ.cjs

@@ -0,0 +1,647 @@
+"use strict";
+/*! Evance UI v1.0.10 | MIT License */
+const vue = require("vue");
+const router = require("./router-QalEeueL.cjs");
+const icons = require("./icons-Dhrpjpjv.cjs");
+const component = require("./component-K8Jv66jg.cjs");
+const props = require("./props-DU5JXKkL.cjs");
+const hasSlotWithContent = require("./hasSlotWithContent-CbVyW9K0.cjs");
+const isFunctions = require("./is-functions-BdAd1PID.cjs");
+const modelProxy = require("./modelProxy-DmDMOZac.cjs");
+const components = require("./components-BKOPlxs6.cjs");
+const helpers = require("./helpers-B5zRE-dA.cjs");
+const EvIcon_vue_vue_type_script_setup_true_lang = require("./EvIcon.vue_vue_type_script_setup_true_lang-UEM72MOR.cjs");
+require("./EvIcon.vue_vue_type_style_index_0_lang-BkYa_lvH.cjs");
+const ListKey = Symbol.for("ev:list");
+function createList() {
+  const defaultValue = {
+    hasPrepend: vue.shallowRef(false),
+    updateHasPrepend: () => null
+  };
+  const parent = vue.inject(ListKey, defaultValue);
+  const data = {
+    hasPrepend: vue.shallowRef(false),
+    updateHasPrepend: (value) => {
+      if (value) {
+        data.hasPrepend.value = value;
+      }
+    }
+  };
+  vue.provide(ListKey, data);
+  return parent;
+}
+function useList() {
+  return vue.inject(ListKey, null);
+}
+const cascadeLeaf = (isRequired) => {
+  const strategy = {
+    select: ({ id, value, selected, children, parents }) => {
+      id = vue.toRaw(id);
+      const original = new Map(selected);
+      const items = [id];
+      while (items.length) {
+        const item = items.shift();
+        selected.set(item, value ? "on" : "off");
+        if (children.has(item)) {
+          items.push(...children.get(item));
+        }
+      }
+      let parent = parents.get(id);
+      while (parent) {
+        const childrenIds = children.get(parent);
+        const everySelected = childrenIds.every(
+          (cid) => selected.get(cid) === "on"
+        );
+        const noneSelected = childrenIds.every(
+          (cid) => !selected.has(cid) || selected.get(cid) === "off"
+        );
+        selected.set(
+          parent,
+          everySelected ? "on" : noneSelected ? "off" : "indeterminate"
+        );
+        parent = parents.get(parent);
+      }
+      if (isRequired && !value) {
+        const on = Array.from(selected.entries()).reduce(
+          (arr, [key, value2]) => value2 === "on" ? [...arr, key] : arr,
+          []
+        );
+        if (on.length === 0) {
+          return original;
+        }
+      }
+      return selected;
+    },
+    in: (values, children, parents) => {
+      let map = /* @__PURE__ */ new Map();
+      for (const id of values || []) {
+        map = strategy.select({
+          id,
+          value: true,
+          selected: new Map(map),
+          children,
+          parents
+        });
+      }
+      return map;
+    },
+    out: (values, children) => {
+      const arr = [];
+      for (const [key, value] of values.entries()) {
+        if (value === "on" && !children.has(key)) {
+          arr.push(key);
+        }
+      }
+      return arr;
+    }
+  };
+  return strategy;
+};
+const multiAny = (isRequired) => {
+  const selectFn = (data) => {
+    const id = vue.toRaw(data.id);
+    if (isRequired && !data.value) {
+      const reducer = (arr, [key, value]) => {
+        return value === "on" ? [...arr, key] : arr;
+      };
+      const on = Array.from(data.selected.entries()).reduce(reducer, []);
+      if (on.length === 1 && on[0] === id) {
+        return data.selected;
+      }
+    }
+    data.selected.set(id, data.value ? "on" : "off");
+    return data.selected;
+  };
+  const transformIn = (values, children, parents) => {
+    let map = /* @__PURE__ */ new Map();
+    for (const id of values || []) {
+      map = selectFn({
+        id,
+        value: true,
+        selected: new Map(map),
+        children,
+        parents
+      });
+    }
+    return map;
+  };
+  const transformOut = (values) => {
+    const selections = [];
+    for (const [key, value] of values.entries()) {
+      if (value === "on") {
+        selections.push(key);
+      }
+    }
+    return selections;
+  };
+  return {
+    select: selectFn,
+    in: transformIn,
+    out: transformOut
+  };
+};
+const multiLeaf = (isRequired) => {
+  const parentStrategy = multiAny(isRequired);
+  return {
+    select: ({ id, selected, children, ...rest }) => {
+      id = vue.toRaw(id);
+      if (children.has(id)) {
+        return selected;
+      }
+      return parentStrategy.select({ id, selected, children, ...rest });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+};
+const singleAny = (isRequired) => {
+  const parentStrategy = multiAny(isRequired);
+  const selectFn = (data) => {
+    const id = vue.toRaw(data.id);
+    const singleSelection = data.selected.has(id) || isRequired ? /* @__PURE__ */ new Map([[id, data.selected.get(id)]]) : /* @__PURE__ */ new Map();
+    return parentStrategy.select({
+      ...data,
+      id,
+      selected: singleSelection
+    });
+  };
+  const transformIn = (values, children, parents) => {
+    let map = /* @__PURE__ */ new Map();
+    if (Array.isArray(values) && values.length) {
+      map = parentStrategy.in(values.slice(0, 1), children, parents);
+    }
+    return map;
+  };
+  const transformOut = (values, children, parents) => {
+    return parentStrategy.out(values, children, parents);
+  };
+  return {
+    select: selectFn,
+    in: transformIn,
+    out: transformOut
+  };
+};
+const singleLeaf = (isRequired) => {
+  const parentStrategy = singleAny(isRequired);
+  return {
+    select: ({ id, selected, children, ...rest }) => {
+      id = vue.toRaw(id);
+      if (children.has(id)) {
+        return selected;
+      }
+      return parentStrategy.select({ id, selected, children, ...rest });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+};
+const makeSelectedProps = props.propsFactory(
+  {
+    selectStrategy: [String, Function],
+    selected: Array,
+    required: Boolean
+  },
+  "select-strategies"
+);
+function useSelectStrategy(props2) {
+  return vue.computed(() => {
+    if (isFunctions.isObject(props2.selectStrategy) && !isFunctions.isFunction(props2.selectStrategy)) {
+      return props2.selectStrategy;
+    }
+    switch (props2.selectStrategy) {
+      case "single-leaf":
+        return singleLeaf(props2.required);
+      case "single-any":
+        return singleAny(props2.required);
+      case "multi-leaf":
+        return multiLeaf(props2.required);
+      case "multi-any":
+        return multiAny(props2.required);
+      case "cascade-leaf":
+      default:
+        return cascadeLeaf(props2.required);
+    }
+  });
+}
+function useSelectedValues(selected) {
+  return vue.computed(() => {
+    const values = [];
+    for (const [key, value] of selected.value.entries()) {
+      if (value === "on") {
+        values.push(key);
+      }
+    }
+    return values;
+  });
+}
+const singleOpenStrategy = {
+  open: ({ id, value, opened, parents }) => {
+    if (value) {
+      const newOpened = /* @__PURE__ */ new Set();
+      newOpened.add(id);
+      let parent = parents.get(id);
+      while (parent != null) {
+        newOpened.add(parent);
+        parent = parents.get(parent);
+      }
+      return newOpened;
+    }
+    opened.delete(id);
+    return opened;
+  },
+  select: () => null
+};
+const multipleOpenStrategy = {
+  open: ({ id, value, opened, parents }) => {
+    if (value) {
+      let parent = parents.get(id);
+      opened.add(id);
+      while (parent != null && parent !== id) {
+        opened.add(parent);
+        parent = parents.get(parent);
+      }
+      return opened;
+    }
+    opened.delete(id);
+    return opened;
+  },
+  select: () => null
+};
+const listOpenStrategy = {
+  open: multipleOpenStrategy.open,
+  select: ({ id, value, opened, parents }) => {
+    if (!value) {
+      return opened;
+    }
+    const path = [];
+    let parent = parents.get(id);
+    while (parent != null) {
+      path.push(parent);
+      parent = parents.get(parent);
+    }
+    return new Set(path);
+  }
+};
+const makeOpenStrategyProps = props.propsFactory(
+  {
+    openStrategy: [String, Object],
+    opened: Array
+  },
+  "open-strategies"
+);
+function useOpenStrategy(props2) {
+  return vue.computed(() => {
+    if (isFunctions.isObject(props2.openStrategy)) {
+      return props2.openStrategy;
+    }
+    switch (props2.openStrategy) {
+      case "list":
+        return listOpenStrategy;
+      case "single":
+        return singleOpenStrategy;
+      case "multiple":
+      default:
+        return multipleOpenStrategy;
+    }
+  });
+}
+const EvNestedSymbol = Symbol.for("ev:nested");
+const emptyNestedList = {
+  id: vue.shallowRef(),
+  root: {
+    children: vue.ref(/* @__PURE__ */ new Map()),
+    parents: vue.ref(/* @__PURE__ */ new Map()),
+    opened: vue.ref(/* @__PURE__ */ new Set()),
+    select: () => null,
+    selected: vue.ref(/* @__PURE__ */ new Map()),
+    selectedValues: vue.ref([]),
+    register: () => null,
+    unregister: () => null,
+    open: () => null,
+    openOnSelect: () => null
+  }
+};
+const makeNestedProps = props.propsFactory(
+  {
+    ...makeSelectedProps(),
+    ...makeOpenStrategyProps()
+  },
+  "nested"
+);
+const useNestedList = (props2) => {
+  let isUnmounted = false;
+  const component2 = components.getCurrentComponent("nested");
+  const children = vue.ref(/* @__PURE__ */ new Map());
+  const parents = vue.ref(/* @__PURE__ */ new Map());
+  const selectStrategy = useSelectStrategy(props2);
+  const selected = modelProxy.useModelProxy(
+    props2,
+    "selected",
+    props2.selected,
+    (values) => {
+      return selectStrategy.value.in(
+        values,
+        children.value,
+        parents.value
+      );
+    },
+    (values) => {
+      return selectStrategy.value.out(
+        values,
+        children.value,
+        parents.value
+      );
+    }
+  );
+  const openStrategy = useOpenStrategy(props2);
+  const opened = modelProxy.useModelProxy(
+    props2,
+    "opened",
+    props2.opened,
+    (values) => {
+      return new Set(values);
+    },
+    (values) => {
+      return [...values.values()];
+    }
+  );
+  vue.onBeforeMount(() => {
+    isUnmounted = true;
+  });
+  function getPath(id) {
+    const path = [];
+    let parent = id;
+    while (parent != null) {
+      path.unshift(parent);
+      parent = parents.value.get(parent);
+    }
+    return path;
+  }
+  const nested = {
+    id: vue.shallowRef(),
+    root: {
+      children,
+      parents,
+      selected,
+      selectedValues: useSelectedValues(selected),
+      select: (id, value, event) => {
+        component2.emit("click:select", {
+          id,
+          value,
+          path: getPath(id),
+          event
+        });
+        const newSelected = selectStrategy.value.select({
+          id,
+          value,
+          selected: new Map(selected.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        newSelected && (selected.value = newSelected);
+        nested.root.openOnSelect(id, value, event);
+      },
+      register: (id, parentId, isGroup) => {
+        parentId && id !== parentId && parents.value.set(id, parentId);
+        if (isGroup) {
+          children.value.set(id, []);
+        }
+        if (parentId != null) {
+          children.value.set(parentId, [
+            ...children.value.get(parentId) || [],
+            id
+          ]);
+        }
+      },
+      unregister: (id) => {
+        if (isUnmounted) {
+          return;
+        }
+        children.value.delete(id);
+        const parent = parents.value.get(id);
+        if (parent) {
+          const list = children.value.get(parent) ?? [];
+          children.value.set(
+            parent,
+            list.filter((child) => child !== id)
+          );
+        }
+        parents.value.delete(id);
+      },
+      opened,
+      open: (id, value, event) => {
+        component2.emit("click:open", {
+          id,
+          value,
+          path: getPath(id),
+          event
+        });
+        const newOpened = openStrategy.value.open({
+          id,
+          value,
+          opened: new Set(opened.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        newOpened && (opened.value = newOpened);
+      },
+      openOnSelect: (id, value, event) => {
+        const newOpened = openStrategy.value.select({
+          id,
+          value,
+          selected: new Map(selected.value),
+          opened: new Set(opened.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        newOpened && (opened.value = newOpened);
+      }
+    }
+  };
+  vue.provide(EvNestedSymbol, nested);
+  return nested.root;
+};
+const useNestedListItem = (id, isGroup) => {
+  const parent = vue.inject(EvNestedSymbol, emptyNestedList);
+  const idSymbol = Symbol(helpers.getNextId());
+  const idComputed = vue.computed(() => {
+    return id.value !== void 0 ? id.value : idSymbol;
+  });
+  const item = {
+    ...parent,
+    id: idComputed,
+    parent: vue.computed(() => parent.root.parents.value.get(idComputed.value)),
+    select: (selected, e) => {
+      return parent.root.select(idComputed.value, selected, e);
+    },
+    isSelected: vue.computed(() => {
+      return parent.root.selected.value.get(vue.toRaw(idComputed.value)) === "on";
+    }),
+    isIndeterminate: vue.computed(() => {
+      return parent.root.selected.value.get(idComputed.value) === "indeterminate";
+    }),
+    isLeaf: vue.computed(() => {
+      return !parent.root.children.value.get(idComputed.value);
+    }),
+    isGroupActivator: parent.isGroupActivator
+  };
+  !parent.isGroupActivator && parent.root.register(idComputed.value, parent.id.value, isGroup);
+  vue.onBeforeUnmount(() => {
+    !parent.isGroupActivator && parent.root.unregister(idComputed.value);
+  });
+  return item;
+};
+const makeEvListItemProps = props.propsFactory(
+  {
+    active: {
+      type: Boolean,
+      default: void 0
+    },
+    activeExact: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: Boolean,
+    iconEnd: icons.IconProp,
+    iconStart: icons.IconProp,
+    link: {
+      type: Boolean,
+      default: void 0
+    },
+    tag: {
+      type: String,
+      default: "div"
+    },
+    title: [String, Number, Boolean],
+    value: null,
+    ...router.makeRouterLinkOrHrefProps(),
+    ...component.makeComponentProps()
+  },
+  "EvListItem"
+);
+const _hoisted_1 = {
+  key: 0,
+  class: "ev-list-item--icon-start"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "ev-list-item--prefix"
+};
+const _hoisted_3 = { class: "ev-list-item--content" };
+const _hoisted_4 = {
+  key: 2,
+  class: "ev-list-item--suffix"
+};
+const _hoisted_5 = {
+  key: 3,
+  class: "ev-list-item--icon-end"
+};
+const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-list-item--indicator" }, null, -1);
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvListItem",
+  props: {
+    ...makeEvListItemProps()
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const attrs = vue.useAttrs();
+    const link = router.useRouterLinkOrHref(props2, attrs);
+    const list = useList();
+    const id = vue.computed(
+      () => props2.value === void 0 ? link.href.value : props2.value
+    );
+    const { select, isSelected } = useNestedListItem(id, false);
+    const hasSuffixSlot = hasSlotWithContent.hasSlotWithContent(slots, "suffix");
+    const hasPrefixSlot = hasSlotWithContent.hasSlotWithContent(slots, "prefix");
+    const isLink = vue.computed(() => props2.link !== false && link.isLink.value);
+    const isClickable = vue.computed(() => {
+      return !props2.disabled && props2.link !== false && (props2.link || link.isClickable.value || props2.value != null && !!list);
+    });
+    const isActive = vue.computed(() => {
+      var _a;
+      return props2.active !== false && (props2.active || ((_a = link.isActive) == null ? void 0 : _a.value) || isSelected.value);
+    });
+    const isActiveExact = vue.computed(() => {
+      var _a;
+      return props2.exact !== false && (props2.exact || ((_a = link.isExactActive) == null ? void 0 : _a.value));
+    });
+    const iconStart = EvIcon_vue_vue_type_script_setup_true_lang.useIcon(props2, "iconStart");
+    const iconEnd = EvIcon_vue_vue_type_script_setup_true_lang.useIcon(props2, "iconEnd");
+    function getComponentElement() {
+      return isLink.value ? "a" : props2.tag;
+    }
+    function getTabIndex() {
+      return isClickable.value ? list ? -2 : 0 : null;
+    }
+    function onClick(e) {
+      var _a;
+      emit("click", e);
+      if (!isClickable.value) {
+        return;
+      }
+      (_a = link.navigate) == null ? void 0 : _a.call(link, e);
+      if (props2.value != null) {
+        select(!isSelected.value, e);
+      }
+    }
+    function onKeyDown(e) {
+      e.preventDefault();
+      onClick(e);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponentElement()), {
+        class: vue.normalizeClass([
+          "ev-list-item",
+          {
+            "is-active": isActive.value,
+            "is-active--exact": isActiveExact.value,
+            "is-clickable": isClickable.value,
+            "is-disabled": props2.disabled
+          },
+          props2.class
+        ]),
+        style: vue.normalizeStyle(props2.style),
+        href: vue.unref(link).href.value,
+        tabindex: getTabIndex(),
+        onClick,
+        onKeydown: [
+          vue.withKeys(onKeyDown, ["enter"]),
+          vue.withKeys(onKeyDown, ["space"])
+        ]
+      }, {
+        default: vue.withCtx(() => [
+          vue.unref(iconStart) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+            vue.createVNode(vue.unref(EvIcon_vue_vue_type_script_setup_true_lang._sfc_main), { glyph: vue.unref(iconStart) }, null, 8, ["glyph"])
+          ])) : vue.createCommentVNode("", true),
+          vue.unref(hasPrefixSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+            vue.renderSlot(_ctx.$slots, "prefix")
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(props2.title), 1)
+            ])
+          ]),
+          vue.unref(hasSuffixSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+            vue.renderSlot(_ctx.$slots, "suffix")
+          ])) : vue.createCommentVNode("", true),
+          vue.unref(iconEnd) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            vue.createVNode(vue.unref(EvIcon_vue_vue_type_script_setup_true_lang._sfc_main), { glyph: vue.unref(iconEnd) }, null, 8, ["glyph"])
+          ])) : vue.createCommentVNode("", true),
+          _hoisted_6
+        ]),
+        _: 3
+      }, 40, ["class", "style", "href", "tabindex", "onKeydown"]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.createList = createList;
+exports.makeEvListItemProps = makeEvListItemProps;
+exports.makeNestedProps = makeNestedProps;
+exports.useNestedList = useNestedList;
+//# sourceMappingURL=EvListItem.vue_vue_type_script_setup_true_lang-B72cX-AJ.cjs.map