@avakhula/ui 0.1.22 → 0.1.23

package/dist/components/Form/Toggle/Toggle.js

@@ -0,0 +1,134 @@
+import p from "../../../helpers/generateUID.js";
+import b from "../../Icon.js";
+import k from "../../Tooltip/Tooltip.js";
+import { resolveComponent as r, createElementBlock as h, openBlock as i, withKeys as g, normalizeClass as _, withModifiers as a, createElementVNode as s, createCommentVNode as f, createBlock as y, createVNode as m, toDisplayString as C } from "vue";
+import { _ as x } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const v = {
+  name: "IbToggle",
+  model: {
+    prop: "isChecked",
+    event: "input"
+  },
+  props: {
+    isChecked: {
+      type: Boolean,
+      required: !1
+    },
+    id: {
+      type: String,
+      default: () => p()
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String,
+      default: "active"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    labelPosition: {
+      type: String,
+      default: "right"
+    },
+    helpMessage: {
+      type: String,
+      default: ""
+    },
+    helpMessageOff: {
+      type: String,
+      default: ""
+    }
+  },
+  watch: {
+    isChecked(c) {
+      this.checked = c;
+    }
+  },
+  data() {
+    return {
+      checked: this.isChecked
+    };
+  },
+  methods: {
+    onChange() {
+      this.disabled || (this.checked = !this.checked, this.$emit("input", this.checked));
+    }
+  },
+  computed: {
+    classes() {
+      return {
+        "ib-toggle-container": !0,
+        "has-error": this.error,
+        "toggle-on": this.checked,
+        "toggle-disabled": this.disabled,
+        "label-position-left": this.labelPosition === "left"
+      };
+    }
+  },
+  components: { IbIcon: b, IbTooltip: k }
+}, M = ["aria-checked", "tabindex"], S = {
+  class: "toggle-wrapper",
+  ref: "wrapper"
+}, w = {
+  class: "toggle",
+  ref: "toggle"
+}, B = ["name", "checked", "id", "disabled"], I = /* @__PURE__ */ s("span", { class: "toggle-slider round" }, null, -1), N = {
+  key: 0,
+  class: "toggle-label"
+};
+function O(c, t, e, T, o, l) {
+  const d = r("ib-icon"), u = r("ib-tooltip");
+  return i(), h("label", {
+    role: "switch",
+    "aria-checked": o.checked,
+    tabindex: e.disabled ? -1 : 0,
+    class: _(l.classes),
+    onKeypress: [
+      t[2] || (t[2] = g(a((...n) => l.onChange && l.onChange(...n), ["prevent"]), ["space"])),
+      t[3] || (t[3] = g(a((...n) => l.onChange && l.onChange(...n), ["prevent"]), ["enter"]))
+    ]
+  }, [
+    s("div", S, [
+      s("div", w, [
+        s("input", {
+          tabindex: "-1",
+          type: "checkbox",
+          value: "1",
+          name: e.name,
+          checked: o.checked,
+          id: e.id,
+          disabled: e.disabled,
+          onClick: t[0] || (t[0] = (...n) => l.onChange && l.onChange(...n)),
+          onInput: t[1] || (t[1] = a(() => {
+          }, ["stop"]))
+        }, null, 40, B),
+        I,
+        m(d, {
+          class: "checked-icon",
+          name: "checkmark"
+        }),
+        m(d, {
+          class: "unchecked-icon",
+          name: "close"
+        })
+      ], 512)
+    ], 512),
+    e.label.length ? (i(), h("span", N, C(e.label), 1)) : f("", !0),
+    e.helpMessage.length ? (i(), y(u, {
+      key: 1,
+      text: o.checked ? e.helpMessage : e.helpMessageOff.length ? e.helpMessageOff : e.helpMessage
+    }, null, 8, ["text"])) : f("", !0)
+  ], 42, M);
+}
+const q = /* @__PURE__ */ x(v, [["render", O]]);
+export {
+  q as default
+};

package/dist/components/Icon.js

@@ -0,0 +1,37 @@
+import { createElementBlock as o, openBlock as s, normalizeClass as r, normalizeStyle as c } from "vue";
+import { _ as a } from "../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const i = {
+  name: "IbIcon",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    classes: {
+      type: String,
+      default: ""
+    },
+    styles: {
+      type: [String, Object],
+      default: ""
+    }
+  },
+  mounted() {
+    const n = setInterval(() => {
+      var t, e;
+      (e = (t = this.$refs.icon) == null ? void 0 : t.shadowRoot) != null && e.querySelector("title") && (this.$refs.icon.shadowRoot.querySelector("title").innerHTML = "", clearInterval(n));
+    }, 1e3);
+  }
+}, l = ["name"];
+function m(n, t, e, f, u, d) {
+  return s(), o("ion-icon", {
+    style: c(e.styles),
+    name: e.name,
+    class: r(e.classes + " ib-icon icon-" + e.name),
+    ref: "icon"
+  }, null, 14, l);
+}
+const h = /* @__PURE__ */ a(i, [["render", m]]);
+export {
+  h as default
+};

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,93 @@
+import a from "../Button/Button.js";
+import { TooltipDirective as l } from "../../directives/tooltip/tooltip.js";
+import { iconButtonSize as i, iconButtonKindOptions as o } from "./constants.js";
+import { resolveComponent as d, resolveDirective as c, withDirectives as u, createBlock as f, openBlock as p, mergeProps as b, withCtx as h, renderSlot as m } from "vue";
+import { _ } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const v = {
+  name: "IbIconButton",
+  props: {
+    kind: {
+      type: String,
+      default: o.primary,
+      validator: (t) => Object.keys(o).includes(t)
+    },
+    size: {
+      type: String,
+      default: i.s,
+      validator: (t) => Object.keys(i).includes(t)
+    },
+    rounded: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    href: {
+      type: String,
+      default: ""
+    },
+    to: {
+      type: [String, Object],
+      default: ""
+    },
+    helpText: {
+      type: String,
+      default: ""
+    },
+    disabledFocus: {
+      type: Boolean,
+      default: !1
+    },
+    preventDefault: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      tooltipVisible: !1
+    };
+  },
+  computed: {
+    classes() {
+      const t = ["ib-icon-button"];
+      return t.push(`ib-icon-btn-${this.kind}`), t.push(`ib-icon-btn-${this.size}`), this.rounded && t.push("ib-icon-btn-rounded"), this.disabled && t.push("ib-icon-btn-disabled"), t;
+    },
+    attrs() {
+      const t = { ...this.$attrs };
+      return t.class = [...this.classes, t.class], this.disabledFocus && (t.tabindex = "-1"), t;
+    }
+  },
+  components: {
+    IbButton: a
+  },
+  directives: {
+    Tooltip: l
+  },
+  inheritAttrs: !1
+};
+function y(t, B, e, k, S, s) {
+  const n = d("ib-button"), r = c("tooltip");
+  return u((p(), f(n, b(s.attrs, {
+    href: e.href,
+    to: e.to,
+    kind: e.kind,
+    disabled: e.disabled,
+    "prevent-default": e.preventDefault
+  }), {
+    default: h(() => [
+      m(t.$slots, "default")
+    ]),
+    _: 3
+  }, 16, ["href", "to", "kind", "disabled", "prevent-default"])), [
+    [r, e.helpText]
+  ]);
+}
+const T = /* @__PURE__ */ _(v, [["render", y]]);
+export {
+  T as default
+};

package/dist/components/IconButton/constants.js

@@ -0,0 +1,15 @@
+import { buttonKindOptions as t } from "../Button/constants.js";
+const o = {
+  [t.primary]: t.primary,
+  [t.tertiary]: t.tertiary,
+  [t.ghost]: t.ghost,
+  white: "white"
+}, n = {
+  xs: "xs",
+  s: "s",
+  m: "m"
+};
+export {
+  o as iconButtonKindOptions,
+  n as iconButtonSize
+};

package/dist/components/List.js

@@ -0,0 +1,66 @@
+import { ARROW_DOWN_KEY_CODE as u, ARROW_UP_KEY_CODE as m } from "../constants/keyCodes.js";
+import { createElementBlock as f, openBlock as p, normalizeClass as N, renderSlot as E } from "vue";
+import { _ as h } from "../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const C = {
+  name: "IbList",
+  data() {
+    return {
+      rootClass: "ib-list"
+    };
+  },
+  methods: {
+    onKeydown(o) {
+      var i, d, a, l, r;
+      if (o.keyCode === u) {
+        if (this.$el.parentNode.closest(`.${this.rootClass}`)) return;
+        o.preventDefault();
+        const e = document.activeElement, t = e.querySelector(`.${this.rootClass}`);
+        let n = e.nextElementSibling ? e.nextElementSibling : (i = e.parentNode.nextElementSibling) == null ? void 0 : i.childNodes[0];
+        if (t && window.getComputedStyle(t).display !== "none") {
+          t.querySelector('a, button, input, [tabindex="0"]').focus();
+          return;
+        }
+        if (n) {
+          n.focus();
+          return;
+        }
+        const s = (a = (d = e.closest(`.${this.rootClass}`).parentNode) == null ? void 0 : d.parentNode) == null ? void 0 : a.nextElementSibling.childNodes[0];
+        s && s.nodeName !== "#text" && s.focus();
+      }
+      if (o.keyCode === m) {
+        if (this.$el.parentNode.closest(`.${this.rootClass}`)) return;
+        o.preventDefault();
+        const e = document.activeElement, t = e.previousElementSibling ? e.previousElementSibling : (l = e.parentNode.previousElementSibling) == null ? void 0 : l.childNodes[0];
+        if (!t) {
+          e.closest(`.${this.rootClass}`).parentNode.focus();
+          return;
+        }
+        if (t && t.nodeName !== "#text") {
+          const n = t == null ? void 0 : t.querySelector(
+            `.${this.rootClass}`
+          );
+          if (n && window.getComputedStyle(n).display !== "none") {
+            const s = Array.from(n.childNodes).filter(
+              (c) => c.nodeName !== "#text"
+            );
+            (r = s[s.length - 1]) == null || r.childNodes[0].focus();
+            return;
+          }
+          t.focus();
+        }
+      }
+    }
+  }
+};
+function y(o, i, d, a, l, r) {
+  return p(), f("ul", {
+    class: N(l.rootClass),
+    onKeydown: i[0] || (i[0] = (...e) => r.onKeydown && r.onKeydown(...e))
+  }, [
+    E(o.$slots, "default")
+  ], 34);
+}
+const _ = /* @__PURE__ */ h(C, [["render", y]]);
+export {
+  _ as default
+};

package/dist/components/Modal/Modal.js

@@ -0,0 +1,198 @@
+import w from "../IconButton/IconButton.js";
+import k from "../Icon.js";
+import { modalSizes as n } from "./constants.js";
+import { OutsideDirective as x } from "../../directives/outside/outside.js";
+import { ESC_KEY_CODE as L, TAB_KEY_CODE as m } from "../../constants/keyCodes.js";
+import { resolveComponent as f, resolveDirective as F, createElementBlock as a, openBlock as l, Fragment as _, createCommentVNode as d, createBlock as p, renderSlot as c, Teleport as C, createElementVNode as b, normalizeClass as h, withDirectives as H, normalizeStyle as I, withCtx as M, createVNode as S } from "vue";
+import { _ as E } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const z = {
+  name: "IbModal",
+  directives: { Outside: x },
+  emits: {
+    open: null,
+    close: null
+  },
+  props: {
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    classList: {
+      type: String,
+      default: ""
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: !1
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: !0
+    },
+    size: {
+      type: String,
+      default: n.S
+    }
+  },
+  watch: {
+    active(e) {
+      this.isActive = e, e ? (this.$nextTick(() => {
+        this.setupFocusTrap();
+      }), document.addEventListener("keydown", this.onKeydown), document.addEventListener("blur", this.setFocusOnModal, !0)) : (this.cleanupFocusTrap(), document.removeEventListener("keydown", this.onKeydown), document.removeEventListener("blur", this.setFocusOnModal, !0));
+    }
+  },
+  data() {
+    return {
+      isActive: this.active
+    };
+  },
+  methods: {
+    setupFocusTrap() {
+      var o, i;
+      if (this.focusableItems = ((i = (o = this.$refs) == null ? void 0 : o.modal) == null ? void 0 : i.querySelectorAll(
+        "[tabindex], a, button, input, select, textarea"
+      )) || [], this.focusableItems.length === 0) return;
+      const e = this.focusableItems[0], t = this.focusableItems[this.focusableItems.length - 1];
+      this.firstFocusableHandler = (r) => {
+        r.keyCode === m && r.shiftKey && (r.preventDefault(), t.focus());
+      }, this.lastFocusableHandler = (r) => {
+        r.keyCode === m && !r.shiftKey && (r.preventDefault(), e.focus());
+      }, e.addEventListener("keydown", this.firstFocusableHandler), t.addEventListener("keydown", this.lastFocusableHandler), e.focus();
+    },
+    cleanupFocusTrap() {
+      if (this.focusableItems.length === 0) return;
+      const e = this.focusableItems[0], t = this.focusableItems[this.focusableItems.length - 1];
+      this.firstFocusableHandler && (e == null || e.removeEventListener("keydown", this.firstFocusableHandler)), this.lastFocusableHandler && (t == null || t.removeEventListener("keydown", this.lastFocusableHandler)), this.firstFocusableHandler = null, this.lastFocusableHandler = null, this.focusableItems = [];
+    },
+    showModal(e) {
+      e ? this.open() : this.close();
+    },
+    onTriggerBlur(e) {
+      var t, o, i;
+      !((t = this.$refs.modal) != null && t.contains(e.relatedTarget)) && this.isActive && ((i = (o = this.$refs.modal) == null ? void 0 : o.querySelector("a, button, [tabindex]")) == null || i.focus());
+    },
+    open() {
+      this.isActive = !0, document.body.classList.add("modal-open"), this.$emit("open");
+    },
+    close() {
+      var e, t;
+      (t = (e = this.$refs.trigger) == null ? void 0 : e.querySelector("a, button, [tabindex]")) == null || t.focus(), document.body.classList.remove("modal-open"), this.$emit("close");
+    },
+    setFocusOnModal(e) {
+      if (!this.isActive) return;
+      const o = Array.from(
+        document.querySelectorAll(".modal.is-active")
+      ).sort(
+        (i, r) => +(getComputedStyle(i).zIndex || 0) - +(getComputedStyle(r).zIndex || 0)
+      ).at(-1);
+      if (o === this.$refs.modal && !o.contains(e.target) && !o.contains(e.relatedTarget)) {
+        const i = o.querySelector(
+          `a[href], button:not([disabled]),
+           textarea, input:not([type="hidden"]),
+           select, [tabindex]:not([tabindex="-1"])`
+        );
+        i == null || i.focus();
+      }
+    },
+    clickOutside(e) {
+      var t;
+      this.stopPropagation || !((t = this.$refs.trigger) != null && t.contains(e.target)) && this.isActive && this.close();
+    },
+    onKeydown(e) {
+      e.keyCode === L && !this.stopPropagation && this.isActive && this.close();
+    }
+  },
+  computed: {
+    classes() {
+      const e = ["modal"];
+      return this.classList.length && e.push(this.classList), this.isActive && e.push("is-active"), e;
+    },
+    bodyStyles() {
+      const e = {};
+      return this.size === n.S && (e.width = "380px", e.minHeight = "160px", e.maxHeight = "680px"), this.size === n.M && (e.width = "600px", e.minHeight = "260px", e.maxHeight = "680px"), this.size === n.L && (e.width = "850px", e.minHeight = "400px", e.maxHeight = "680px"), this.size === n.XL && (e.width = "80vw", e.maxWidth = "1400px"), e;
+    },
+    bodyClassList() {
+      const e = ["modal-body"];
+      return this.size === n.S && e.push("modal-body-s"), this.size === n.M && e.push("modal-body-m"), this.size === n.L && e.push("modal-body-l"), this.size === n.XL && e.push("modal-body-xl"), e;
+    },
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    },
+    hasHeader() {
+      return !!this.$slots.header;
+    },
+    hasFooter() {
+      return !!this.$slots.footer;
+    }
+  },
+  components: {
+    IbIconButton: w,
+    IbIcon: k
+  },
+  beforeUnmount() {
+    this.isActive && this.close(), document.removeEventListener("keydown", this.onKeydown), document.removeEventListener("blur", this.setFocusOnModal, !0);
+  }
+}, A = {
+  key: 1,
+  class: "modal-header"
+}, B = {
+  key: 2,
+  class: "modal-footer"
+};
+function T(e, t, o, i, r, s) {
+  const y = f("ib-icon"), v = f("ib-icon-button"), g = F("outside");
+  return l(), a(_, null, [
+    s.hasTrigger ? (l(), a("div", {
+      key: 0,
+      class: "modal-trigger",
+      ref: "trigger",
+      onBlurCapture: t[0] || (t[0] = (...u) => s.onTriggerBlur && s.onTriggerBlur(...u)),
+      onClick: t[1] || (t[1] = (...u) => s.open && s.open(...u))
+    }, [
+      c(e.$slots, "trigger", {}, void 0, !0)
+    ], 544)) : d("", !0),
+    r.isActive ? (l(), p(C, {
+      key: 1,
+      to: "body"
+    }, [
+      b("div", {
+        class: h(s.classes),
+        ref: "modal"
+      }, [
+        H((l(), a("div", {
+          class: h(s.bodyClassList),
+          style: I(s.bodyStyles)
+        }, [
+          o.showCloseButton ? (l(), p(v, {
+            key: 0,
+            class: "modal-close-icon",
+            kind: "ghost",
+            onClick: s.close
+          }, {
+            default: M(() => [
+              S(y, { name: "close-outline" })
+            ]),
+            _: 1
+          }, 8, ["onClick"])) : d("", !0),
+          s.hasHeader ? (l(), a("p", A, [
+            c(e.$slots, "header", { showModal: s.showModal }, void 0, !0)
+          ])) : d("", !0),
+          b("div", {
+            class: h(["modal-content", { "without-title": !s.hasHeader }])
+          }, [
+            c(e.$slots, "body", { showModal: s.showModal }, void 0, !0)
+          ], 2),
+          s.hasFooter ? (l(), a("div", B, [
+            c(e.$slots, "footer", { showModal: s.showModal }, void 0, !0)
+          ])) : d("", !0)
+        ], 6)), [
+          [g, s.clickOutside]
+        ])
+      ], 2)
+    ])) : d("", !0)
+  ], 64);
+}
+const X = /* @__PURE__ */ E(z, [["render", T], ["__scopeId", "data-v-1379c0fb"]]);
+export {
+  X as default
+};

package/dist/components/Modal/constants.js

@@ -0,0 +1,9 @@
+const l = {
+  S: "s",
+  M: "m",
+  L: "l",
+  XL: "xl"
+};
+export {
+  l as modalSizes
+};

package/dist/components/Pagination/LimitSelector.js

@@ -0,0 +1,73 @@
+import s from "../Form/Label/Label.js";
+import n from "../TreeSelect/Select.js";
+import { resolveComponent as r, createElementBlock as c, openBlock as p, createVNode as o, withCtx as m, createTextVNode as u, toDisplayString as d } from "vue";
+import { _ } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const b = {
+  name: "IbLimitSelector",
+  props: {
+    labelSelect: {
+      type: String,
+      required: !0
+    },
+    value: {
+      type: Number
+    },
+    vertical: {
+      type: String
+    },
+    options: {
+      type: Array,
+      default: () => [10, 25, 50, 100]
+    }
+  },
+  watch(e) {
+    this.selected = e;
+  },
+  data() {
+    return {
+      selected: this.value
+    };
+  },
+  methods: {
+    selectItem(e) {
+      this.selected = e, this.onChange(e);
+    },
+    onChange(e) {
+      Number.isInteger(+e) && this.$emit("select", +e);
+    }
+  },
+  computed: {
+    prepareOptions() {
+      return this.options.map((e) => ({ id: e, title: e }));
+    }
+  },
+  components: {
+    IbLabel: s,
+    IbSelect: n
+  }
+}, f = { class: "report-limit-selector" };
+function h(e, v, t, I, S, l) {
+  const i = r("ib-label"), a = r("ib-select");
+  return p(), c("div", f, [
+    o(i, null, {
+      default: m(() => [
+        u(d(t.labelSelect), 1)
+      ]),
+      _: 1
+    }),
+    o(a, {
+      classList: "report-limit-selector-select",
+      value: t.value,
+      vertical: t.vertical,
+      options: l.prepareOptions,
+      "is-multiple": !1,
+      "show-clear-button": !1,
+      "aria-label": "Pagination",
+      onInput: l.selectItem
+    }, null, 8, ["value", "vertical", "options", "onInput"])
+  ]);
+}
+const L = /* @__PURE__ */ _(b, [["render", h]]);
+export {
+  L as default
+};