@avakhula/ui 0.1.22 → 0.1.23

package/dist/components/TreeSelect/Option.js

@@ -0,0 +1,302 @@
+import D from "../Form/Checkbox/Checkbox.js";
+import I from "../Form/Toggle/Toggle.js";
+import M from "../List.js";
+import E from "../Icon.js";
+import S from "../IconButton/IconButton.js";
+import { TooltipDirective as A } from "../../directives/tooltip/tooltip.js";
+import O from "../../helpers/generateUID.js";
+import L from "../../helpers/multiLineOverflows.js";
+import { SPACE_KEY_CODE as N, ARROW_RIGHT_KEY_CODE as K, ARROW_LEFT_KEY_CODE as x } from "../../constants/keyCodes.js";
+import { resolveComponent as d, resolveDirective as H, createElementBlock as l, openBlock as n, withDirectives as r, withModifiers as u, normalizeClass as f, createElementVNode as _, createCommentVNode as v, createVNode as p, withCtx as C, vShow as m, createBlock as c, resolveDynamicComponent as P, toDisplayString as b, Fragment as T, createTextVNode as R, renderList as F } from "vue";
+import { _ as Y } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const z = {
+  name: "select-option",
+  props: {
+    option: {
+      type: Object
+    },
+    name: String,
+    parentAutoCheck: {
+      type: Boolean,
+      default: !1
+    },
+    isMultiple: {
+      type: Boolean,
+      default: !0
+    },
+    uid: {
+      type: String,
+      default: ""
+    },
+    onlyEndNodes: {
+      type: Boolean,
+      default: !1
+    },
+    htmlTitle: {
+      type: Boolean,
+      default: !1
+    },
+    showInput: {
+      type: Boolean,
+      default: !0
+    },
+    isBookmarkable: {
+      type: Boolean,
+      default: !1
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: !1
+    },
+    isToggle: {
+      type: Boolean,
+      default: !1
+    },
+    alphabeticStyle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  mounted() {
+    this.option.hasOwnProperty("children") && this.option.children && this.checkParent(), this.option.showTooltipByDefault && (this.showTooltip = !0);
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.option.showTooltipByDefault ? this.showTooltip = !0 : L(this.$el.querySelector(".option-label")) && (this.showTooltip = !0);
+    });
+  },
+  data() {
+    return {
+      showTooltip: !1,
+      generateUID: O
+    };
+  },
+  methods: {
+    onKeydown(t) {
+      t.keyCode === N && (t.preventDefault(), this.onChange()), this.hasVisibleChildren && (t.keyCode === K && (this.option.isChildrenVisible = !0), t.keyCode === x && (this.option.isChildrenVisible = !1));
+    },
+    onChange() {
+      var t, i;
+      !this.isMultiple && !this.isChecked(this.option) && ((t = this.$refs.component) == null || t.onChange()), this.isMultiple && ((i = this.$refs.component) == null || i.onChange());
+    },
+    toggle(t, i = !0) {
+      this.check(this.option, t, !0, i);
+    },
+    check(t, i, e, h) {
+      if (!this.isMultiple && this.hasVisibleChildren) {
+        this.toggleChildrenVisibility();
+        return;
+      }
+      this.$emit("check", t, i, e), h && t.children && t.children.forEach((a) => {
+        this.check(a, i, !1, !0);
+      });
+    },
+    toggleChildrenVisibility() {
+      this.option.isChildrenVisible = !this.option.isChildrenVisible;
+    },
+    checkChildren(t, i, e) {
+      e && this.isMultiple && this.$nextTick(() => {
+        this.checkParent();
+      }), this.$emit("check", t, i, !1);
+    },
+    checkParent() {
+      const t = this.option.children.filter(
+        (e) => e.checked
+      ).length, i = t >= this.option.children.length;
+      (!this.option.checked && i || this.option.checked && !i) && this.parentAutoCheck && this.toggle(!this.option.checked, !1);
+    },
+    calculateChildren(t, i, e = !1) {
+      let h = 0;
+      return t.children && t.children.forEach((a) => {
+        (!i || i(a)) && h++, e && (h += this.calculateChildren(a, i, e));
+      }), h;
+    },
+    isChecked(t) {
+      if (this.hasChildren) {
+        const i = this.childrenSelectedCount;
+        if (i > 0 && this.countOfAllChildren > i || !i && this.option.checked && !this.parentAutoCheck || this.countOfAllChildren == i && !this.option.checked && !this.parentAutoCheck)
+          return null;
+      }
+      return t.checked ? !0 : t.isIndeterminate ? null : !1;
+    }
+  },
+  computed: {
+    component() {
+      return this.isMultiple && this.isToggle ? I : D;
+    },
+    hasChildren() {
+      return !!(this.option.children && this.option.children.length);
+    },
+    hasVisibleChildren() {
+      return this.calculateChildren(this.option, (t) => t.visible);
+    },
+    iconName() {
+      return this.option.isChildrenVisible ? "chevron-down" : "chevron-forward";
+    },
+    id() {
+      return this.uid + "_" + this.option.id;
+    },
+    actualName() {
+      return this.onlyEndNodes && this.option.children && this.option.children.length ? "" : this.name;
+    },
+    childrenSelectedCount() {
+      return this.calculateChildren(
+        this.option,
+        (t) => t.checked,
+        !0
+      );
+    },
+    countOfAllChildren() {
+      return this.calculateChildren(this.option, () => !0, !0);
+    }
+  },
+  components: {
+    IbIcon: E,
+    List: M,
+    IbIconButton: S
+  },
+  directives: { Tooltip: A }
+}, U = ["aria-selected", "aria-label", "id"], W = {
+  key: 0,
+  class: "bookmarkable-option-content"
+}, j = { class: "option-label" }, q = {
+  key: 1,
+  class: "option-label"
+}, G = ["innerHTML"], J = ["innerHTML"], Q = {
+  key: 2,
+  class: "option-label"
+};
+function X(t, i, e, h, a, o) {
+  const k = d("ib-icon"), g = d("ib-icon-button"), w = d("select-option"), B = d("list"), y = H("tooltip");
+  return n(), l("li", null, [
+    r((n(), l("div", {
+      class: f(["tree-select-option", {
+        "tree-select-option-checked": e.option.checked,
+        "tree-select-option-indeterminate": o.isChecked(e.option) === null,
+        "tree-select-option-margin": o.hasVisibleChildren,
+        active: e.option.isChildrenVisible,
+        "is-multiple": e.isMultiple,
+        "is-not-multiple": !e.isMultiple,
+        "has-icon": e.option.icon,
+        "tree-select-option-toggle": this.isToggle && this.isMultiple,
+        "alphabetic-option": e.alphabeticStyle
+      }]),
+      tabindex: "0",
+      role: "option",
+      "aria-selected": o.isChecked(e.option),
+      "aria-label": e.option.title,
+      id: "option-" + o.id,
+      onKeydown: i[3] || (i[3] = u((...s) => o.onKeydown && o.onKeydown(...s), ["self"])),
+      onFocus: i[4] || (i[4] = (s) => t.$emit("onFocus", `option-${o.id}`))
+    }, [
+      r(p(g, {
+        "disabled-focus": !0,
+        kind: "ghost",
+        class: "toggle-children",
+        onClick: u(o.toggleChildrenVisibility, ["prevent"])
+      }, {
+        default: C(() => [
+          p(k, { name: o.iconName }, null, 8, ["name"])
+        ]),
+        _: 1
+      }, 8, ["onClick"]), [
+        [m, o.hasVisibleChildren]
+      ]),
+      _("div", {
+        onClick: i[1] || (i[1] = u((...s) => o.onChange && o.onChange(...s), ["prevent"])),
+        class: f({
+          disabled: e.option.isDisabled,
+          "tree-select-option-label": !0,
+          "tree-select-option-has-children": o.hasVisibleChildren,
+          active: !e.showInput && e.option.checked
+        })
+      }, [
+        r((n(), c(P(o.component), {
+          ref: "component",
+          tabindex: "-1",
+          "disable-focus": "",
+          "aria-label": e.option.title,
+          name: o.actualName,
+          value: e.option.id,
+          id: "input" + o.id + a.generateUID(),
+          "is-checked": o.isChecked(e.option),
+          disabled: e.option.isDisabled,
+          readonly: e.option.readonly,
+          autocomplete: "off",
+          autocorrect: "off",
+          autocapitalize: "off",
+          spellcheck: "false",
+          onInput: o.toggle
+        }, null, 40, ["aria-label", "name", "value", "id", "is-checked", "disabled", "readonly", "onInput"])), [
+          [m, e.showInput]
+        ]),
+        e.isBookmarkable ? (n(), l("span", {
+          key: 0,
+          class: f(
+            "bookmarkable-option-title " + (e.isBookmarked ? "bookmarked" : "")
+          )
+        }, [
+          o.hasChildren ? (n(), l("span", q, b(e.option.title), 1)) : (n(), l("div", W, [
+            _("span", j, b(e.option.title), 1),
+            r((n(), c(g, {
+              onClick: i[0] || (i[0] = u((s) => t.$emit("toggle-bookmark", e.option), ["stop", "prevent"])),
+              kind: "ghost"
+            }, {
+              default: C(() => [
+                p(k, {
+                  name: e.isBookmarked ? "star" : "star-outline"
+                }, null, 8, ["name"])
+              ]),
+              _: 1
+            })), [
+              [y, t.lang(e.isBookmarked ? "unpin" : "pin_to_top", "select")]
+            ])
+          ]))
+        ], 2)) : e.htmlTitle ? (n(), l(T, { key: 1 }, [
+          o.hasChildren ? (n(), l("span", {
+            key: 1,
+            class: "option-label",
+            innerHTML: e.option.title
+          }, null, 8, J)) : (n(), l("span", {
+            key: 0,
+            class: "option-label",
+            innerHTML: e.option.title
+          }, null, 8, G))
+        ], 64)) : (n(), l("span", Q, [
+          e.option.icon ? (n(), c(k, {
+            key: 0,
+            name: e.option.icon
+          }, null, 8, ["name"])) : v("", !0),
+          R(" " + b(e.option.title), 1)
+        ]))
+      ], 2),
+      o.hasChildren ? r((n(), c(B, { key: 0 }, {
+        default: C(() => [
+          (n(!0), l(T, null, F(e.option.children, (s) => r((n(), c(w, {
+            key: s.value,
+            option: s,
+            name: e.name,
+            "parent-auto-check": e.parentAutoCheck,
+            "is-multiple": e.isMultiple,
+            "show-input": e.showInput,
+            onCheck: o.checkChildren,
+            onToggleBookmark: i[2] || (i[2] = (V) => t.$emit("toggle-bookmark", V)),
+            uid: e.uid,
+            "is-bookmarkable": e.isBookmarkable
+          }, null, 8, ["option", "name", "parent-auto-check", "is-multiple", "show-input", "onCheck", "uid", "is-bookmarkable"])), [
+            [m, s.visible]
+          ])), 128))
+        ]),
+        _: 1
+      }, 512)), [
+        [m, o.hasVisibleChildren && e.option.isChildrenVisible]
+      ]) : v("", !0)
+    ], 42, U)), [
+      [y, a.showTooltip ? e.option.isDisabled ? e.option.disableTooltip : e.option.title : ""]
+    ])
+  ]);
+}
+const re = /* @__PURE__ */ Y(z, [["render", X]]);
+export {
+  re as default
+};