@evance/evance-ui 1.0.1 → 1.0.3

package/dist/esm/EvListItem.vue_vue_type_script_setup_true_lang-C064Hrd5.mjs

@@ -0,0 +1,648 @@
+/*! Evance UI v1.0.2 | MIT License */
+import { shallowRef, inject, provide, toRaw, computed, ref, onBeforeMount, onBeforeUnmount, defineComponent, useSlots, useAttrs, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, unref, withKeys, withCtx, createElementBlock, createVNode, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString } from "vue";
+import { p as propsFactory } from "./props-3VncLxsE.mjs";
+import { m as makeRouterLinkOrHrefProps, u as useRouterLinkOrHref } from "./router-DHg-dyak.mjs";
+import { I as IconProp } from "./icons-3G0qyZcI.mjs";
+import { m as makeComponentProps } from "./component-CjmQYwjV.mjs";
+import { h as hasSlotWithContent } from "./hasSlotWithContent-xb8fWCnO.mjs";
+import { i as isObject, g as isFunction } from "./is-functions-D1kb_r-v.mjs";
+import { g as getCurrentComponent } from "./components-CtL_pBN-.mjs";
+import { g as getNextId } from "./helpers-BnZAsTjf.mjs";
+import { u as useModelProxy } from "./modelProxy-DMtI0M-b.mjs";
+import { u as useIcon, _ as _sfc_main$1 } from "./EvIcon.vue_vue_type_script_setup_true_lang-CoGBF5ad.mjs";
+import "./EvIcon.vue_vue_type_style_index_0_lang-DyaPmIDN.mjs";
+const ListKey = Symbol.for("ev:list");
+function createList() {
+  const defaultValue = {
+    hasPrepend: shallowRef(false),
+    updateHasPrepend: () => null
+  };
+  const parent = inject(ListKey, defaultValue);
+  const data = {
+    hasPrepend: shallowRef(false),
+    updateHasPrepend: (value) => {
+      if (value) {
+        data.hasPrepend.value = value;
+      }
+    }
+  };
+  provide(ListKey, data);
+  return parent;
+}
+function useList() {
+  return inject(ListKey, null);
+}
+const cascadeLeaf = (isRequired) => {
+  const strategy = {
+    select: ({ id, value, selected, children, parents }) => {
+      id = 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 = 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 = 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 = 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 = toRaw(id);
+      if (children.has(id)) {
+        return selected;
+      }
+      return parentStrategy.select({ id, selected, children, ...rest });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+};
+const makeSelectedProps = propsFactory(
+  {
+    selectStrategy: [String, Function],
+    selected: Array,
+    required: Boolean
+  },
+  "select-strategies"
+);
+function useSelectStrategy(props) {
+  return computed(() => {
+    if (isObject(props.selectStrategy) && !isFunction(props.selectStrategy)) {
+      return props.selectStrategy;
+    }
+    switch (props.selectStrategy) {
+      case "single-leaf":
+        return singleLeaf(props.required);
+      case "single-any":
+        return singleAny(props.required);
+      case "multi-leaf":
+        return multiLeaf(props.required);
+      case "multi-any":
+        return multiAny(props.required);
+      case "cascade-leaf":
+      default:
+        return cascadeLeaf(props.required);
+    }
+  });
+}
+function useSelectedValues(selected) {
+  return 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 = propsFactory(
+  {
+    openStrategy: [String, Object],
+    opened: Array
+  },
+  "open-strategies"
+);
+function useOpenStrategy(props) {
+  return computed(() => {
+    if (isObject(props.openStrategy)) {
+      return props.openStrategy;
+    }
+    switch (props.openStrategy) {
+      case "list":
+        return listOpenStrategy;
+      case "single":
+        return singleOpenStrategy;
+      case "multiple":
+      default:
+        return multipleOpenStrategy;
+    }
+  });
+}
+const EvNestedSymbol = Symbol.for("ev:nested");
+const emptyNestedList = {
+  id: shallowRef(),
+  root: {
+    children: ref(/* @__PURE__ */ new Map()),
+    parents: ref(/* @__PURE__ */ new Map()),
+    opened: ref(/* @__PURE__ */ new Set()),
+    select: () => null,
+    selected: ref(/* @__PURE__ */ new Map()),
+    selectedValues: ref([]),
+    register: () => null,
+    unregister: () => null,
+    open: () => null,
+    openOnSelect: () => null
+  }
+};
+const makeNestedProps = propsFactory(
+  {
+    ...makeSelectedProps(),
+    ...makeOpenStrategyProps()
+  },
+  "nested"
+);
+const useNestedList = (props) => {
+  let isUnmounted = false;
+  const component = getCurrentComponent("nested");
+  const children = ref(/* @__PURE__ */ new Map());
+  const parents = ref(/* @__PURE__ */ new Map());
+  const selectStrategy = useSelectStrategy(props);
+  const selected = useModelProxy(
+    props,
+    "selected",
+    props.selected,
+    (values) => {
+      return selectStrategy.value.in(
+        values,
+        children.value,
+        parents.value
+      );
+    },
+    (values) => {
+      return selectStrategy.value.out(
+        values,
+        children.value,
+        parents.value
+      );
+    }
+  );
+  const openStrategy = useOpenStrategy(props);
+  const opened = useModelProxy(
+    props,
+    "opened",
+    props.opened,
+    (values) => {
+      return new Set(values);
+    },
+    (values) => {
+      return [...values.values()];
+    }
+  );
+  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: shallowRef(),
+    root: {
+      children,
+      parents,
+      selected,
+      selectedValues: useSelectedValues(selected),
+      select: (id, value, event) => {
+        component.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) => {
+        component.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);
+      }
+    }
+  };
+  provide(EvNestedSymbol, nested);
+  return nested.root;
+};
+const useNestedListItem = (id, isGroup) => {
+  const parent = inject(EvNestedSymbol, emptyNestedList);
+  const idSymbol = Symbol(getNextId());
+  const idComputed = computed(() => {
+    return id.value !== void 0 ? id.value : idSymbol;
+  });
+  const item = {
+    ...parent,
+    id: idComputed,
+    parent: computed(() => parent.root.parents.value.get(idComputed.value)),
+    select: (selected, e) => {
+      return parent.root.select(idComputed.value, selected, e);
+    },
+    isSelected: computed(() => {
+      return parent.root.selected.value.get(toRaw(idComputed.value)) === "on";
+    }),
+    isIndeterminate: computed(() => {
+      return parent.root.selected.value.get(idComputed.value) === "indeterminate";
+    }),
+    isLeaf: computed(() => {
+      return !parent.root.children.value.get(idComputed.value);
+    }),
+    isGroupActivator: parent.isGroupActivator
+  };
+  !parent.isGroupActivator && parent.root.register(idComputed.value, parent.id.value, isGroup);
+  onBeforeUnmount(() => {
+    !parent.isGroupActivator && parent.root.unregister(idComputed.value);
+  });
+  return item;
+};
+const makeEvListItemProps = propsFactory(
+  {
+    active: {
+      type: Boolean,
+      default: void 0
+    },
+    activeExact: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: Boolean,
+    iconEnd: IconProp,
+    iconStart: IconProp,
+    link: {
+      type: Boolean,
+      default: void 0
+    },
+    tag: {
+      type: String,
+      default: "div"
+    },
+    title: [String, Number, Boolean],
+    value: null,
+    ...makeRouterLinkOrHrefProps(),
+    ...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__ */ createElementVNode("div", { class: "ev-list-item--indicator" }, null, -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvListItem",
+  props: {
+    ...makeEvListItemProps()
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const link = useRouterLinkOrHref(props, attrs);
+    const list = useList();
+    const id = computed(
+      () => props.value === void 0 ? link.href.value : props.value
+    );
+    const { select, isSelected } = useNestedListItem(id, false);
+    const hasSuffixSlot = hasSlotWithContent(slots, "suffix");
+    const hasPrefixSlot = hasSlotWithContent(slots, "prefix");
+    const isLink = computed(() => props.link !== false && link.isLink.value);
+    const isClickable = computed(() => {
+      return !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list);
+    });
+    const isActive = computed(() => {
+      var _a;
+      return props.active !== false && (props.active || ((_a = link.isActive) == null ? void 0 : _a.value) || isSelected.value);
+    });
+    const isActiveExact = computed(() => {
+      var _a;
+      return props.exact !== false && (props.exact || ((_a = link.isExactActive) == null ? void 0 : _a.value));
+    });
+    const iconStart = useIcon(props, "iconStart");
+    const iconEnd = useIcon(props, "iconEnd");
+    function getComponentElement() {
+      return isLink.value ? "a" : props.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 (props.value != null) {
+        select(!isSelected.value, e);
+      }
+    }
+    function onKeyDown(e) {
+      e.preventDefault();
+      onClick(e);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(getComponentElement()), {
+        class: normalizeClass([
+          "ev-list-item",
+          {
+            "is-active": isActive.value,
+            "is-active--exact": isActiveExact.value,
+            "is-clickable": isClickable.value,
+            "is-disabled": props.disabled
+          },
+          props.class
+        ]),
+        style: normalizeStyle(props.style),
+        href: unref(link).href.value,
+        tabindex: getTabIndex(),
+        onClick,
+        onKeydown: [
+          withKeys(onKeyDown, ["enter"]),
+          withKeys(onKeyDown, ["space"])
+        ]
+      }, {
+        default: withCtx(() => [
+          unref(iconStart) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createVNode(unref(_sfc_main$1), { glyph: unref(iconStart) }, null, 8, ["glyph"])
+          ])) : createCommentVNode("", true),
+          unref(hasPrefixSlot) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "prefix")
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(props.title), 1)
+            ])
+          ]),
+          unref(hasSuffixSlot) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "suffix")
+          ])) : createCommentVNode("", true),
+          unref(iconEnd) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(unref(_sfc_main$1), { glyph: unref(iconEnd) }, null, 8, ["glyph"])
+          ])) : createCommentVNode("", true),
+          _hoisted_6
+        ]),
+        _: 3
+      }, 40, ["class", "style", "href", "tabindex", "onKeydown"]);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  makeNestedProps as a,
+  createList as c,
+  makeEvListItemProps as m,
+  useNestedList as u
+};
+//# sourceMappingURL=EvListItem.vue_vue_type_script_setup_true_lang-C064Hrd5.mjs.map