@avakhula/ui 0.1.22 → 0.1.24

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,228 @@
+import { ESC_KEY_CODE as O, ENTER_KEY_CODE as C, SPACE_KEY_CODE as v, ARROW_DOWN_KEY_CODE as b } from "../../constants/keyCodes.js";
+import { EVENT_NAME_CLICK as k } from "../../constants/events.js";
+import { OutsideDirective as w } from "../../directives/outside/outside.js";
+import { horizontalPosition as p, verticalPosition as y } from "./constants.js";
+import { c as E, o as S, f as T, s as D } from "../../chunks/floating-ui.dom-D8OVFdyL.js";
+import { resolveDirective as B, withDirectives as g, createElementBlock as l, openBlock as d, createCommentVNode as a, createBlock as I, createElementVNode as c, withModifiers as K, normalizeClass as u, renderSlot as r, Teleport as z, vShow as m, Fragment as R } from "vue";
+import { _ as P } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const N = {
+  name: "IbDropdown",
+  directives: { Outside: w },
+  props: {
+    vertical: {
+      type: String,
+      default: y.bottom
+    },
+    horizontal: {
+      type: String,
+      default: p.left
+    },
+    triggerClass: {
+      default: ""
+    },
+    isOpened: {
+      type: Boolean,
+      default: !1
+    },
+    showCloseIcon: {
+      type: Boolean,
+      default: !1
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    triggerType: {
+      type: String,
+      default: k
+    },
+    destroyOnHide: {
+      type: Boolean,
+      default: !1
+    },
+    attachToBody: {
+      type: Boolean,
+      default: !1
+    },
+    attachTo: {
+      type: String,
+      default: null
+    }
+  },
+  watch: {
+    isOpened(e) {
+      e ? this.open() : this.close();
+    }
+  },
+  mounted() {
+    this.$globalEvents.$on("dropdown:open", (e) => {
+      this.$el.contains(e.$el) || this.close();
+    }), document.addEventListener("focus", this.closeOnEventOutside, !0), document.addEventListener("keyup", this.onKeyupDocument);
+  },
+  data() {
+    return {
+      isOpenedState: this.isOpened,
+      timeout: null
+    };
+  },
+  methods: {
+    async updatePosition() {
+      const e = this.$refs.dropdown, s = this.$refs.body;
+      if (!e || !s) return;
+      const i = this.vertical === "top" ? "top" : "bottom", f = this.horizontal === "right" ? "end" : this.horizontal === "center" ? "" : "start", n = f ? `${i}-${f}` : i, { x: t, y: h } = await E(e, s, {
+        placement: n,
+        middleware: [S(3), T(), D({ padding: 8 })]
+      });
+      Object.assign(s.style, {
+        left: `${t}px`,
+        top: `${h}px`
+      });
+    },
+    onKeydown(e) {
+      (e.keyCode === C || e.keyCode === v) && (e.preventDefault(), this.toggle()), e.keyCode === b && (e.preventDefault(), this.open());
+    },
+    onKeyupDocument(e) {
+      e.keyCode === O && (e.preventDefault(), this.close());
+    },
+    toggle() {
+      this.isOpenedState ? this.close() : this.open();
+    },
+    open() {
+      this.disabled || (this.isOpenedState = !0, this.$emit("open"), this.$globalEvents.$emit("dropdown:open", this), this.$nextTick(() => {
+        (this.attachToBody || this.attachTo) && this.updatePosition();
+      }));
+    },
+    close() {
+      if (this.isOpenedState) {
+        if (this.disabled)
+          return;
+        this.isOpenedState = !1, this.$emit("close");
+      }
+    },
+    closeOnOutsideClick(e) {
+      this.$refs.body && this.$refs.body.contains(e.target) || this.close();
+    },
+    debouncedOpen() {
+      this.timeout = setTimeout(() => {
+        this.open();
+      }, 300);
+    },
+    debouncedClose() {
+      this.close(), clearTimeout(this.timeout);
+    },
+    closeOnClickIfRequired() {
+      this.closeOnClick && this.close();
+    },
+    closeOnEventOutside(e) {
+      this.$refs.body && this.$refs.body.contains(e.target) || this.$el.contains(e.target) || this.close();
+    }
+  },
+  computed: {
+    classes() {
+      const e = this.vertical === y.bottom ? " dropdown-bottom" : " dropdown-top", s = this.horizontal === p.left ? " dropdown-left" : this.horizontal === p.right ? " dropdown-right" : " dropdown-center", i = this.isOpenedState ? " active" : "";
+      return e + s + i;
+    },
+    triggerClasses() {
+      let e = this.isOpenedState ? "active" : "";
+      return this.disabled && (e += " dropdown-trigger-disabled"), this.triggerClass + e;
+    },
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    }
+  },
+  beforeUnmount() {
+    document.removeEventListener("focus", this.closeOnEventOutside, !0), document.removeEventListener("keypress", this.onKeydownDocument);
+  }
+}, q = { class: "ib-dropdown" }, L = { class: "footer-slot" }, A = { class: "footer-slot" };
+function M(e, s, i, f, n, t) {
+  const h = B("outside");
+  return g((d(), l("div", q, [
+    t.hasTrigger && i.triggerType === "click" ? (d(), l("span", {
+      key: 0,
+      class: u(["dropdown-trigger", t.triggerClasses]),
+      ref: "dropdown",
+      onKeydown: s[0] || (s[0] = (...o) => t.onKeydown && t.onKeydown(...o)),
+      onClick: s[1] || (s[1] = K((...o) => t.toggle && t.toggle(...o), ["prevent", "stop"]))
+    }, [
+      r(e.$slots, "trigger", { isOpened: n.isOpenedState }, void 0, !0)
+    ], 34)) : a("", !0),
+    t.hasTrigger && i.triggerType === "hover" ? (d(), l("span", {
+      key: 1,
+      class: u(["dropdown-trigger", t.triggerClasses]),
+      onMouseenter: s[2] || (s[2] = (...o) => t.debouncedOpen && t.debouncedOpen(...o)),
+      onMouseleave: s[3] || (s[3] = (...o) => t.debouncedClose && t.debouncedClose(...o))
+    }, [
+      r(e.$slots, "trigger", { isOpened: n.isOpenedState }, void 0, !0)
+    ], 34)) : a("", !0),
+    i.attachToBody || i.attachTo ? (d(), I(z, {
+      key: 2,
+      to: i.attachToBody ? "body" : i.attachTo
+    }, [
+      !i.destroyOnHide || n.isOpenedState ? g((d(), l("div", {
+        key: 0,
+        ref: "body",
+        class: u("ib-dropdown-menu is-teleported " + t.classes)
+      }, [
+        c("div", {
+          class: "dropdown-body",
+          onClick: s[5] || (s[5] = (...o) => t.closeOnClickIfRequired && t.closeOnClickIfRequired(...o))
+        }, [
+          r(e.$slots, "body", { isOpenedState: n.isOpenedState }, void 0, !0),
+          i.showCloseIcon ? (d(), l("span", {
+            key: 0,
+            class: "close",
+            onClick: s[4] || (s[4] = (...o) => t.close && t.close(...o))
+          }, [
+            r(e.$slots, "close", {}, void 0, !0)
+          ])) : a("", !0)
+        ]),
+        c("div", L, [
+          r(e.$slots, "footer", {}, void 0, !0)
+        ])
+      ], 2)), [
+        [m, n.isOpenedState]
+      ]) : a("", !0)
+    ], 8, ["to"])) : (d(), l(R, { key: 3 }, [
+      !i.destroyOnHide || n.isOpenedState ? g((d(), l("div", {
+        key: 0,
+        ref: "body",
+        class: u("ib-dropdown-menu " + t.classes)
+      }, [
+        c("div", {
+          class: "dropdown-body",
+          onClick: s[7] || (s[7] = (...o) => t.closeOnClickIfRequired && t.closeOnClickIfRequired(...o))
+        }, [
+          r(e.$slots, "body", { isOpenedState: n.isOpenedState }, void 0, !0),
+          i.showCloseIcon ? (d(), l("span", {
+            key: 0,
+            class: "close",
+            onClick: s[6] || (s[6] = (...o) => t.close && t.close(...o))
+          }, [
+            r(e.$slots, "close", {}, void 0, !0)
+          ])) : a("", !0)
+        ]),
+        c("div", A, [
+          r(e.$slots, "footer", {}, void 0, !0)
+        ])
+      ], 2)), [
+        [m, n.isOpenedState]
+      ]) : a("", !0)
+    ], 64)),
+    c("div", {
+      class: "before",
+      onClick: s[8] || (s[8] = (...o) => t.close && t.close(...o))
+    }, [
+      r(e.$slots, "before", {}, void 0, !0)
+    ])
+  ])), [
+    [h, t.closeOnOutsideClick]
+  ]);
+}
+const U = /* @__PURE__ */ P(N, [["render", M], ["__scopeId", "data-v-637e3198"]]);
+export {
+  U as default
+};

package/dist/components/Dropdown/DropdownDivider.js

@@ -0,0 +1,10 @@
+import { createElementBlock as e, openBlock as o } from "vue";
+import { _ as r } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const c = {}, d = { class: "dropdown-divider" };
+function t(n, _) {
+  return o(), e("div", d);
+}
+const i = /* @__PURE__ */ r(c, [["render", t], ["__scopeId", "data-v-dda620ec"]]);
+export {
+  i as default
+};

package/dist/components/Dropdown/DropdownItem.js

@@ -0,0 +1,50 @@
+import { createElementBlock as c, openBlock as o, createBlock as i, resolveDynamicComponent as d, mergeProps as a, withCtx as l, createElementVNode as r, withDirectives as f, renderSlot as s, vShow as p } from "vue";
+import { _ as h } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const u = {
+  props: {
+    checked: {
+      type: Boolean,
+      default: !1
+    },
+    href: {
+      type: String
+    },
+    to: {
+      type: [String, Object]
+    }
+  },
+  computed: {
+    component() {
+      return this.href ? "a" : this.to ? "router-link" : "div";
+    },
+    attrs() {
+      const e = {
+        class: "ib-dropdown-item"
+      };
+      return this.href && (e.href = this.href), this.to && (e.to = this.to), e;
+    }
+  }
+}, m = { class: "dropdown-item-wrapper" }, _ = { class: "dropdown-item-icon" };
+function w(e, v, n, k, b, t) {
+  return o(), c("li", m, [
+    (o(), i(d(t.component), a({
+      class: n.checked ? "active" : ""
+    }, t.attrs, { tabindex: "0" }), {
+      default: l(() => [
+        r("p", null, [
+          f(r("div", _, [
+            s(e.$slots, "icon", {}, void 0, !0)
+          ], 512), [
+            [p, e.$slots.icon]
+          ]),
+          s(e.$slots, "default", { ref: "slot" }, void 0, !0)
+        ])
+      ]),
+      _: 3
+    }, 16, ["class"]))
+  ]);
+}
+const S = /* @__PURE__ */ h(u, [["render", w], ["__scopeId", "data-v-edcdcbaf"]]);
+export {
+  S as default
+};

package/dist/components/Dropdown/DropdownList.js

@@ -0,0 +1,104 @@
+import c from "./Dropdown.js";
+import f from "../List.js";
+import { horizontalPosition as p, verticalPosition as m } from "./constants.js";
+import { resolveComponent as i, createElementBlock as h, openBlock as u, normalizeClass as y, createVNode as r, mergeProps as g, createSlots as b, withCtx as a, renderSlot as s } from "vue";
+import { _ } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const B = {
+  props: {
+    vertical: {
+      type: String,
+      default: m.bottom
+    },
+    horizontal: {
+      type: String,
+      default: p.left
+    },
+    isOpened: {
+      type: Boolean,
+      default: !1
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: ""
+    },
+    attachToBody: {
+      type: Boolean,
+      default: !1
+    },
+    attachTo: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    proxyEvents(e) {
+      this.$emit(e.event, ...e.args);
+    }
+  },
+  data() {
+    return {
+      list: this.$refs.list
+    };
+  },
+  computed: {
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    }
+  },
+  components: {
+    IbDropdown: c,
+    IbList: f
+  }
+};
+function O(e, T, t, v, w, l) {
+  const n = i("ib-list"), d = i("ib-dropdown");
+  return u(), h("div", {
+    class: y(["dropdown-list-wrapper", t.class])
+  }, [
+    r(d, g({
+      horizontal: t.horizontal,
+      vertical: t.vertical,
+      isOpened: t.isOpened,
+      closeOnClick: t.closeOnClick,
+      disabled: t.disabled,
+      attachToBody: t.attachToBody,
+      attachTo: t.attachTo
+    }, e.$attrs, {
+      ref: "dropdown",
+      onAll: l.proxyEvents
+    }), b({
+      body: a(({ isOpened: o }) => [
+        r(n, {
+          ref: "list",
+          class: "list"
+        }, {
+          default: a(() => [
+            s(e.$slots, "body", { isOpenedState: o })
+          ]),
+          _: 2
+        }, 1536)
+      ]),
+      _: 2
+    }, [
+      l.hasTrigger ? {
+        name: "trigger",
+        fn: a(({ isOpened: o }) => [
+          s(e.$slots, "trigger", { isOpened: o })
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["horizontal", "vertical", "isOpened", "closeOnClick", "disabled", "attachToBody", "attachTo", "onAll"])
+  ], 2);
+}
+const E = /* @__PURE__ */ _(B, [["render", O]]);
+export {
+  E as default
+};

package/dist/components/Dropdown/constants.js

@@ -0,0 +1,12 @@
+const t = {
+  left: "left",
+  right: "right",
+  center: "center"
+}, o = {
+  top: "top",
+  bottom: "bottom"
+};
+export {
+  t as horizontalPosition,
+  o as verticalPosition
+};

package/dist/components/Form/CharactersCount.js

@@ -0,0 +1,33 @@
+import { createElementBlock as e, openBlock as c, toDisplayString as a, Fragment as i, createElementVNode as r, createTextVNode as n } from "vue";
+import { _ as h } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const o = {
+  props: {
+    characterLimit: {
+      type: [String, Number],
+      required: !0
+    },
+    characterLength: {
+      type: [String, Number],
+      required: !0
+    }
+  }
+}, s = { class: "character-count" }, _ = {
+  key: 0,
+  class: "val-limit"
+}, l = { class: "val-length" }, d = { class: "val-limit" }, m = {
+  key: 2,
+  class: "val-length error"
+};
+function u(g, L, t, f, v, y) {
+  return c(), e("div", s, [
+    t.characterLength ? t.characterLimit >= t.characterLength ? (c(), e(i, { key: 1 }, [
+      r("p", l, a(t.characterLength), 1),
+      n(" / "),
+      r("p", d, a(t.characterLimit), 1)
+    ], 64)) : (c(), e("p", m, a(t.characterLimit - t.characterLength), 1)) : (c(), e("p", _, "Max " + a(t.characterLimit), 1))
+  ]);
+}
+const N = /* @__PURE__ */ h(o, [["render", u], ["__scopeId", "data-v-f7d02439"]]);
+export {
+  N as default
+};

package/dist/components/Form/Checkbox/Checkbox.js

@@ -0,0 +1,171 @@
+import _ from "../../../helpers/generateUID.js";
+import g from "../../../helpers/removeEvents.js";
+import v from "../../Icon.js";
+import { resolveComponent as C, createElementBlock as n, openBlock as d, normalizeClass as r, createElementVNode as c, mergeProps as V, withModifiers as m, withDirectives as h, createCommentVNode as o, vModelCheckbox as q, createTextVNode as k, toDisplayString as f, createVNode as x, vShow as y } from "vue";
+import { _ as B } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  name: "IbCheckbox",
+  model: {
+    event: "input"
+  },
+  props: {
+    label: String,
+    error: {
+      type: [Boolean, null],
+      default: !1
+    },
+    name: String,
+    id: {
+      type: String,
+      default() {
+        return _();
+      }
+    },
+    value: {
+      type: [String, Number]
+    },
+    modelValue: {
+      type: [Boolean, String]
+    },
+    isChecked: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    disableFocus: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    labelPosition: {
+      type: String,
+      default: "right"
+    }
+  },
+  watch: {
+    isChecked(t) {
+      this.checked = t;
+    },
+    modelValue(t) {
+      this.$emit("update:modelValue", this.modelValue), this.checked = t === "0" ? !1 : !!t;
+    }
+  },
+  data() {
+    return {
+      checked: this.modelValue ? this.modelValue === "0" ? !1 : !!this.modelValue : this.isChecked
+    };
+  },
+  methods: {
+    onChange(t) {
+      this.disabled || this.readonly || (this.checked = !this.checked, this.$emit("update:modelValue", this.checked), this.$emit("input", this.checked));
+    }
+  },
+  computed: {
+    classes() {
+      return {
+        "ib-checkbox": !0,
+        "ib-has-error": this.error,
+        "ib-checkbox-filled": this.checked,
+        "ib-checkbox-disabled": this.disabled,
+        "ib-checkbox-readonly": this.readonly,
+        "ib-checkbox-indeterminate": this.indeterminate
+      };
+    },
+    indeterminate() {
+      return this.isChecked === null;
+    },
+    attrs() {
+      const t = { ...g({ ...this.$attrs }) };
+      return delete t.class, t.class = this.classes, t;
+    }
+  },
+  components: {
+    IbIcon: v
+  },
+  inheritAttrs: !1
+}, I = ["for", "tabindex", "aria-checked"], w = ["name", "id", "value", "disabled", "required"], N = ["name", "disabled", "required"], P = { class: "ib-checkbox-body" }, p = {
+  key: 0,
+  class: "required"
+}, D = { class: "ib-checkbox-input" }, E = {
+  key: 1,
+  class: "ib-checkbox-label"
+}, F = {
+  key: 0,
+  class: "required"
+};
+function M(t, i, e, U, s, l) {
+  var b;
+  const u = C("ib-icon");
+  return d(), n("div", {
+    class: r(["ib-checkbox-wrapper", this.$attrs.class])
+  }, [
+    c("label", V(l.attrs, {
+      role: "checkbox",
+      for: e.id,
+      tabindex: e.disabled | e.disableFocus ? -1 : 0,
+      "aria-checked": !!s.checked,
+      onClick: i[2] || (i[2] = m((...a) => l.onChange && l.onChange(...a), ["prevent", "stop"])),
+      onKeypress: i[3] || (i[3] = m((...a) => l.onChange && l.onChange(...a), ["prevent"]))
+    }), [
+      h(c("input", {
+        tabindex: "-1",
+        type: "checkbox",
+        name: e.name,
+        id: e.id,
+        value: e.value ?? 1,
+        disabled: e.disabled,
+        required: e.required,
+        "onUpdate:modelValue": i[0] || (i[0] = (a) => s.checked = a),
+        onClick: i[1] || (i[1] = (...a) => l.onChange && l.onChange(...a))
+      }, null, 8, w), [
+        [q, s.checked]
+      ]),
+      !e.value && !s.checked ? (d(), n("input", {
+        key: 0,
+        value: "0",
+        type: "hidden",
+        name: e.name,
+        disabled: e.disabled,
+        required: e.required
+      }, null, 8, N)) : o("", !0),
+      c("div", P, [
+        e.labelPosition === "left" && e.label.length ? (d(), n("span", {
+          key: 0,
+          class: r(["ib-checkbox-label", { "ib-checkbox-label-left": e.labelPosition === "left" }])
+        }, [
+          e.required ? (d(), n("span", p, "*")) : o("", !0),
+          k(" " + f(e.label), 1)
+        ], 2)) : o("", !0),
+        c("span", D, [
+          h(x(u, { name: "checkmark-sharp" }, null, 512), [
+            [y, s.checked && !l.indeterminate]
+          ]),
+          h(x(u, {
+            class: r("checkbox-undeterminate-icon"),
+            name: "remove-sharp"
+          }, null, 512), [
+            [y, l.indeterminate]
+          ])
+        ]),
+        e.labelPosition === "right" && ((b = e.label) != null && b.length) ? (d(), n("span", E, [
+          e.required ? (d(), n("span", F, "*")) : o("", !0),
+          k(" " + f(e.label), 1)
+        ])) : o("", !0)
+      ])
+    ], 16, I)
+  ], 2);
+}
+const j = /* @__PURE__ */ B(S, [["render", M], ["__scopeId", "data-v-50848111"]]);
+export {
+  j as default
+};

package/dist/components/Form/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,81 @@
+import f from "../Label/Label.js";
+import m from "../../Alert/Alert.js";
+import { resolveComponent as n, createElementBlock as g, openBlock as o, normalizeClass as h, createBlock as l, createCommentVNode as a, createElementVNode as x, withCtx as s, createTextVNode as c, toDisplayString as u, renderSlot as k, useCssVars as y } from "vue";
+import { _ as S } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const r = {
+  name: "IbInputGroup",
+  props: {
+    labelText: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      required: !1
+    },
+    horizontal: {
+      type: Boolean,
+      default: !1
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    infoText: {
+      type: String,
+      default: ""
+    },
+    height: {
+      type: String,
+      default: "290px"
+    },
+    tooltipPosition: {
+      type: String
+    }
+  },
+  components: {
+    IbLabel: f,
+    IbAlert: m
+  }
+}, p = () => {
+  y((t) => ({
+    f99cce84: t.height
+  }));
+}, _ = r.setup;
+r.setup = _ ? (t, i) => (p(), _(t, i)) : p;
+const C = { class: "ib-checkbox-group-content" };
+function T(t, i, e, q, B, V) {
+  const b = n("ib-label"), d = n("ib-alert");
+  return o(), g("div", {
+    class: h(["ib-checkbox-group", { "ib-checkbox-group-horizontal": e.horizontal }])
+  }, [
+    e.labelText.length ? (o(), l(b, {
+      key: 0,
+      class: "ib-checkbox-group-label",
+      required: e.required,
+      "info-text": e.infoText,
+      "tooltip-position": e.tooltipPosition
+    }, {
+      default: s(() => [
+        c(u(e.labelText), 1)
+      ]),
+      _: 1
+    }, 8, ["required", "info-text", "tooltip-position"])) : a("", !0),
+    e.errorMessage.length ? (o(), l(d, {
+      key: 1,
+      class: "ib-error-message"
+    }, {
+      default: s(() => [
+        c(u(e.errorMessage), 1)
+      ]),
+      _: 1
+    })) : a("", !0),
+    x("div", C, [
+      k(t.$slots, "default")
+    ])
+  ], 2);
+}
+const N = /* @__PURE__ */ S(r, [["render", T]]);
+export {
+  N as default
+};