@avakhula/ui 0.1.22 → 0.1.24

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,81 @@
+import d from "../../helpers/generateUID.js";
+import l from "../../mixins/expandAnimation.js";
+import p from "../Icon.js";
+import { resolveComponent as m, createElementBlock as u, openBlock as v, normalizeClass as f, createElementVNode as o, createVNode as c, withModifiers as h, renderSlot as r, Transition as A, withCtx as _, withDirectives as b, vShow as w } from "vue";
+import { _ as C } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const E = {
+  name: "IbAccordion",
+  mixins: [l],
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  watch: {
+    isOpen(e) {
+      this.isActive = e;
+    }
+  },
+  data() {
+    return {
+      isActive: this.isOpen,
+      uuid: d()
+    };
+  },
+  methods: {
+    onClick() {
+      this.isActive = !this.isActive, this.isActive ? this.$emit("open", this.isActive) : this.$emit("close", this.isActive);
+    }
+  },
+  components: {
+    IbIcon: p
+  }
+}, k = ["id", "aria-controls", "aria-expanded"], I = ["id", "aria-labelledby"], x = { class: "accordion-content-wrapper" };
+function y(e, n, B, O, i, t) {
+  const s = m("ib-icon");
+  return v(), u("div", {
+    class: f(["ib-accordion", { active: i.isActive }])
+  }, [
+    o("button", {
+      class: "accordion-title",
+      id: "accordion" + i.uuid,
+      "aria-controls": "accordion-section-" + i.uuid,
+      "aria-expanded": i.isActive,
+      type: "button",
+      onClick: n[0] || (n[0] = h((...a) => t.onClick && t.onClick(...a), ["prevent"]))
+    }, [
+      r(e.$slots, "title", {}, void 0, !0),
+      c(s, {
+        class: "chevron-icon",
+        name: "chevron-down-outline"
+      })
+    ], 8, k),
+    c(A, {
+      name: "expand",
+      onEnter: e.enter,
+      onAfterEnter: e.afterEnter,
+      onLeave: e.leave
+    }, {
+      default: _(() => [
+        b(o("div", {
+          role: "region",
+          class: "accordion-content",
+          id: "accordion-section-" + i.uuid,
+          "aria-labelledby": "accordion" + i.uuid
+        }, [
+          o("div", x, [
+            r(e.$slots, "default", {}, void 0, !0)
+          ])
+        ], 8, I), [
+          [w, i.isActive]
+        ])
+      ]),
+      _: 3
+    }, 8, ["onEnter", "onAfterEnter", "onLeave"])
+  ], 2);
+}
+const V = /* @__PURE__ */ C(E, [["render", y], ["__scopeId", "data-v-e6e815cc"]]);
+export {
+  V as default
+};

package/dist/components/Alert/Alert.js

@@ -0,0 +1,121 @@
+import p from "../Icon.js";
+import b from "../IconButton/IconButton.js";
+import { alertTypeOptions as s } from "./constants.js";
+import { resolveComponent as d, createElementBlock as u, openBlock as n, normalizeClass as _, createElementVNode as o, createBlock as f, createCommentVNode as l, renderSlot as r, toDisplayString as k, withCtx as g, createVNode as v } from "vue";
+import { _ as y } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const w = {
+  name: "IbAlert",
+  props: {
+    type: {
+      type: String,
+      default: s.alert,
+      validator: (e) => Object.keys(s).includes(e)
+    },
+    showIcon: {
+      type: Boolean,
+      default: !1
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    additionalTitleText: {
+      type: String,
+      default: ""
+    }
+  },
+  mounted() {
+    this.checkHeight(), this.$refs.content && (this.contentObserver = new ResizeObserver(() => {
+      this.checkHeight();
+    }), this.contentObserver.observe(this.$refs.content)), window.addEventListener("resize", () => this.checkHeight());
+  },
+  data() {
+    return {
+      contentObserver: null
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+    checkHeight() {
+      var t;
+      if (!this.$refs.content)
+        return;
+      const e = getComputedStyle(this.$refs.content), i = (t = this.$refs.content) == null ? void 0 : t.parentElement.offsetWidth;
+      !i || !e || (parseInt(e.width) <= i && this.$refs.content.classList.remove("large"), parseInt(e.height) > 37 && this.showIcon && (this.title.length ? this.$refs.content.classList.add("large") : this.$refs.content.classList.add("medium")));
+    }
+  },
+  computed: {
+    classes() {
+      const e = ["ib-alert"];
+      return e.push(`ib-alert-${this.type}`), this.title.length && e.push("has-title"), this.showIcon && e.push("has-icon"), this.showCloseButton && e.push("has-close-button"), this.$slots.link && e.push("has-link"), e;
+    },
+    iconName() {
+      return this.type === s.info ? "information-circle-outline" : this.type === s.success ? "checkmark-circle-outline" : "alert-circle-outline";
+    }
+  },
+  beforeUnmount() {
+    var e;
+    (e = this.contentObserver) == null || e.disconnect(), window.removeEventListener("resize", () => this.checkHeight());
+  },
+  components: {
+    IbIcon: p,
+    IbIconButton: b
+  }
+}, I = {
+  ref: "content",
+  class: "content"
+}, $ = { class: "content-head" }, C = {
+  key: 1,
+  class: "ib-alert-title"
+}, B = { class: "text-content" }, O = { class: "link" };
+function S(e, i, t, L, E, c) {
+  var h;
+  const a = d("ib-icon"), m = d("ib-icon-button");
+  return n(), u("div", {
+    role: "alert",
+    class: _(c.classes)
+  }, [
+    o("div", I, [
+      o("span", $, [
+        t.showIcon ? (n(), f(a, {
+          key: 0,
+          class: "ib-alert-icon",
+          name: c.iconName
+        }, null, 8, ["name"])) : l("", !0),
+        (h = t.title) != null && h.length ? (n(), u("b", C, k(t.title), 1)) : l("", !0),
+        r(e.$slots, "title", {}, void 0, !0)
+      ]),
+      o("span", B, [
+        r(e.$slots, "default", {}, void 0, !0)
+      ]),
+      o("div", O, [
+        r(e.$slots, "link", {}, void 0, !0)
+      ])
+    ], 512),
+    t.showCloseButton ? (n(), f(m, {
+      key: 0,
+      class: "close-button",
+      kind: "ghost",
+      "prevent-default": !0,
+      onClick: c.close
+    }, {
+      default: g(() => [
+        v(a, {
+          class: "close-button-icon",
+          name: "close-outline"
+        })
+      ]),
+      _: 1
+    }, 8, ["onClick"])) : l("", !0)
+  ], 2);
+}
+const V = /* @__PURE__ */ y(w, [["render", S], ["__scopeId", "data-v-017f43e9"]]);
+export {
+  V as default
+};

package/dist/components/Alert/constants.js

@@ -0,0 +1,10 @@
+const r = {
+  alert: "alert",
+  error: "error",
+  warning: "warning",
+  info: "info",
+  success: "success"
+};
+export {
+  r as alertTypeOptions
+};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,75 @@
+import n from "../Icon.js";
+import { avatarTypes as m, avatarSizes as o } from "./constants.js";
+import { resolveComponent as u, createElementBlock as s, openBlock as r, normalizeClass as i, normalizeStyle as d, createVNode as f, toDisplayString as v } from "vue";
+import { _ as y } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const _ = {
+  name: "IbAvatar",
+  props: {
+    firstName: {
+      type: String,
+      default: ""
+    },
+    lastName: {
+      type: String,
+      default: ""
+    },
+    src: {
+      type: String,
+      default: ""
+    },
+    userAvatar: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: o.M
+    },
+    type: {
+      type: String,
+      default: m.CIRCLE
+    }
+  },
+  computed: {
+    classList() {
+      return ["avatar", `avatar-size-${this.size}`, `avatar-type-${this.type}`];
+    },
+    validateName() {
+      var e, l;
+      return ((e = this.firstName) == null ? void 0 : e.trim().length) !== 0 && ((l = this.lastName) == null ? void 0 : l.trim().length) !== 0;
+    },
+    initials() {
+      return this.firstName[0].toUpperCase() + this.lastName[0].toUpperCase();
+    }
+  },
+  components: {
+    IbIcon: n
+  }
+}, p = ["src", "alt"];
+function g(e, l, a, N, h, t) {
+  const c = u("ib-icon");
+  return a.src && !a.userAvatar ? (r(), s("img", {
+    key: 0,
+    class: i(t.classList),
+    src: a.src,
+    alt: a.firstName + "" + a.lastName
+  }, null, 10, p)) : a.src && a.userAvatar ? (r(), s("div", {
+    key: 1,
+    class: i(["user-avatar", t.classList]),
+    style: d({
+      backgroundImage: "url(" + a.src + ")"
+    })
+  }, null, 6)) : t.validateName ? (r(), s("div", {
+    key: 3,
+    class: i([t.classList, "default-avatar"])
+  }, v(t.initials), 3)) : (r(), s("div", {
+    key: 2,
+    class: i(["empty-avatar", t.classList])
+  }, [
+    f(c, { name: "camera-outline" })
+  ], 2));
+}
+const C = /* @__PURE__ */ y(_, [["render", g], ["__scopeId", "data-v-1e3762d5"]]);
+export {
+  C as default
+};

package/dist/components/Avatar/constants.js

@@ -0,0 +1,12 @@
+const a = {
+  M: "m",
+  L: "l",
+  XL: "xl"
+}, e = {
+  SQUARE: "square",
+  CIRCLE: "circle"
+};
+export {
+  a as avatarSizes,
+  e as avatarTypes
+};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,29 @@
+import { createElementBlock as n, openBlock as s, normalizeClass as r, toDisplayString as a } from "vue";
+import { _ as o } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const c = {
+  name: "IbBadge",
+  props: {
+    content: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  computed: {
+    classes() {
+      const t = ["ib-badge"];
+      return this.content.toString().length && t.push("ib-badge-large"), t;
+    },
+    normalizeContent() {
+      return this.content > 99 ? "99+" : this.content;
+    }
+  }
+};
+function i(t, l, p, d, m, e) {
+  return s(), n("span", {
+    class: r(e.classes)
+  }, a(e.normalizeContent), 3);
+}
+const _ = /* @__PURE__ */ o(c, [["render", i], ["__scopeId", "data-v-5ac18f0d"]]);
+export {
+  _ as default
+};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,117 @@
+import T from "../Icon.js";
+import B from "../IconButton/IconButton.js";
+import D from "../Dropdown/DropdownList.js";
+import M from "../Dropdown/DropdownItem.js";
+import N from "../Tooltip/Tooltip.js";
+import { TextOverflowTooltipDirective as V } from "../../directives/tooltip/textOverflowTooltip.js";
+import { resolveComponent as l, resolveDirective as z, createElementBlock as r, openBlock as t, createElementVNode as b, Fragment as _, renderList as p, normalizeClass as E, createCommentVNode as s, withDirectives as L, createBlock as c, toDisplayString as m, withCtx as a, createTextVNode as f, createVNode as h } from "vue";
+import { _ as O } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  name: "IbBreadcrumbs",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    tooltipTextContext: {
+      type: String
+    }
+  },
+  computed: {
+    last() {
+      return this.items.length ? this.items.length - 1 : null;
+    },
+    initContextMenu() {
+      return this.items.length > 4;
+    },
+    setItemsContextMenu() {
+      return this.items.slice(0, -3);
+    }
+  },
+  components: {
+    IbIcon: T,
+    IbIconButton: B,
+    IbDropdownItem: M,
+    IbDropdownList: D,
+    IbTooltip: N
+  },
+  directives: {
+    OverflowTooltip: V
+  }
+}, A = { "aria-label": "breadcrumb" }, F = { class: "breadcrumb" }, j = ["href"], q = { key: 1 }, G = ["href"];
+function H(k, J, n, K, P, i) {
+  const v = l("router-link"), u = l("ib-icon"), y = l("ib-tooltip"), g = l("ib-icon-button"), w = l("ib-dropdown-item"), C = l("ib-dropdown-list"), I = z("overflow-tooltip");
+  return t(), r("nav", A, [
+    b("ul", F, [
+      (t(!0), r(_, null, p(n.items, (o, e) => (t(), r("li", {
+        class: E(["breadcrumb-item", e === i.last ? "active" : ""]),
+        "aria-current": "page",
+        key: e
+      }, [
+        e !== i.last && e > n.items.length - 4 || e === 0 ? (t(), r(_, { key: 0 }, [
+          o.url ? (t(), r("a", {
+            key: 0,
+            class: "ib-link",
+            href: o.url
+          }, m(o.title), 9, j)) : (t(), c(v, {
+            key: 1,
+            class: "ib-link",
+            to: o.to
+          }, {
+            default: a(() => [
+              f(m(o.title), 1)
+            ]),
+            _: 2
+          }, 1032, ["to"]))
+        ], 64)) : s("", !0),
+        e === i.last && o.title ? L((t(), r("p", q, [
+          f(m(o.title), 1)
+        ])), [
+          [
+            I,
+            o.title,
+            void 0,
+            { bottomCenter: !0 }
+          ]
+        ]) : s("", !0),
+        i.initContextMenu && e === n.items.length - 4 ? (t(), c(C, {
+          key: 2,
+          horizontal: "center"
+        }, {
+          trigger: a(() => [
+            h(g, { kind: "ghost" }, {
+              default: a(() => [
+                h(u, { name: "ellipsis-horizontal-sharp" }),
+                n.tooltipTextContext ? (t(), c(y, {
+                  key: 0,
+                  text: n.tooltipTextContext
+                }, null, 8, ["text"])) : s("", !0)
+              ]),
+              _: 1
+            })
+          ]),
+          body: a(() => [
+            (t(!0), r(_, null, p(i.setItemsContextMenu, (d, x) => (t(), c(w, { key: x }, {
+              default: a(() => [
+                b("a", {
+                  class: "context-breadcrums",
+                  href: d.url
+                }, m(d.title), 9, G)
+              ]),
+              _: 2
+            }, 1024))), 128))
+          ]),
+          _: 2
+        }, 1024)) : s("", !0),
+        e !== i.last && e > n.items.length - 5 || e === 0 ? (t(), c(u, {
+          key: 3,
+          name: "chevron-forward-outline"
+        })) : s("", !0)
+      ], 2))), 128))
+    ])
+  ]);
+}
+const tt = /* @__PURE__ */ O(S, [["render", H], ["__scopeId", "data-v-224b4a21"]]);
+export {
+  tt as default
+};

package/dist/components/Button/Button.js

@@ -0,0 +1,140 @@
+import { buttonKindOptions as u } from "./constants.js";
+import d from "../../helpers/removeEvents.js";
+import { createBlock as f, openBlock as n, resolveDynamicComponent as c, mergeProps as m, withCtx as b, renderSlot as r, withDirectives as p, createCommentVNode as k, createElementBlock as o, createElementVNode as a, Fragment as v, renderList as y, vShow as M } from "vue";
+import { _ as g } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const D = {
+  name: "IbButton",
+  props: {
+    kind: {
+      type: String,
+      default: u.primary
+    },
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    preventDefault: {
+      type: Boolean,
+      default: null
+    },
+    confirmMessage: {
+      type: String,
+      default: ""
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    href: {
+      type: String,
+      default: ""
+    },
+    to: {
+      type: [String, Object]
+    },
+    linkMethod: {
+      type: String,
+      default: "get"
+    },
+    disableAfterClick: {
+      type: Boolean,
+      default: !1
+    },
+    postOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      isDisabled: this.disabled
+    };
+  },
+  watch: {
+    disabled(e) {
+      this.isDisabled = e;
+    }
+  },
+  methods: {
+    onMouseenter(e) {
+      this.$emit("mouseenter", e);
+    },
+    onMouseleave(e) {
+      this.$emit("mouseleave", e);
+    },
+    onClick(e) {
+      if ((this.preventDefault || this.isDisabled) && e.preventDefault(), this.confirmMessage.length > 0 && !confirm(this.confirmMessage)) {
+        e.preventDefault();
+        return;
+      }
+      !this.isDisabled && this.href.length && !this.preventDefault && this.linkMethod.toUpperCase() !== "GET" && (e.preventDefault(), this.$refs.form.submit()), this.isDisabled || this.$emit("click", e), this.disableAfterClick && !this.disabled && (this.isDisabled = !0);
+    }
+  },
+  computed: {
+    component() {
+      return this.href.length ? "a" : this.to ? "router-link" : "button";
+    },
+    classes() {
+      const e = ["ib-button"];
+      return e.push(`ib-btn-${this.kind}`), this.isDisabled && e.push("ib-btn-disabled"), this.block && e.push("ib-btn-block"), (this.href.length || this.to) && e.push("ib-btn-link"), this.hasIcon && e.push("ib-btn-has-icon"), e;
+    },
+    attrs() {
+      const e = d({ ...this.$attrs }, ["onClick"]);
+      return e.class = [...this.classes, e.class], e.disabled = this.isDisabled, this.href.length && (e.href = this.href), this.to && (e.to = this.to), e;
+    },
+    hasIcon() {
+      return !!this.$slots.icon;
+    },
+    formMethod() {
+      return this.linkMethod === "GET" ? "GET" : "POST";
+    },
+    token() {
+      var e;
+      return (e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.content;
+    }
+  },
+  inheritAttrs: !1
+}, _ = ["method", "action"], C = ["value"], B = ["value"], S = ["name", "value"];
+function O(e, l, s, E, T, t) {
+  return n(), f(c(t.component), m(t.attrs, {
+    onClick: l[0] || (l[0] = (i) => t.onClick(i)),
+    onMouseenter: t.onMouseenter,
+    onMouseleave: t.onMouseleave
+  }), {
+    default: b(() => [
+      r(e.$slots, "icon"),
+      r(e.$slots, "default"),
+      s.href.length && s.linkMethod.toUpperCase() !== "GET" ? p((n(), o("form", {
+        key: 0,
+        ref: "form",
+        method: t.formMethod,
+        action: s.href
+      }, [
+        a("input", {
+          type: "hidden",
+          name: "_method",
+          value: s.linkMethod
+        }, null, 8, C),
+        a("input", {
+          type: "hidden",
+          name: "_token",
+          value: t.token
+        }, null, 8, B),
+        (n(!0), o(v, null, y(Object.keys(s.postOptions), (i, h) => (n(), o("input", {
+          key: h,
+          type: "hidden",
+          name: i,
+          value: s.postOptions[i]
+        }, null, 8, S))), 128))
+      ], 8, _)), [
+        [M, !1]
+      ]) : k("", !0)
+    ]),
+    _: 3
+  }, 16, ["onMouseenter", "onMouseleave"]);
+}
+const A = /* @__PURE__ */ g(D, [["render", O]]);
+export {
+  A as default
+};

package/dist/components/Button/constants.js

@@ -0,0 +1,11 @@
+const r = {
+  primary: "primary",
+  secondary: "secondary",
+  tertiary: "tertiary",
+  ghost: "ghost",
+  danger: "danger",
+  ghostDanger: "ghostDanger"
+};
+export {
+  r as buttonKindOptions
+};

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,14 @@
+import { createElementBlock as t, openBlock as e, renderSlot as r } from "vue";
+import { _ as n } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const s = {
+  name: "IbButtonGroup"
+}, c = { class: "ib-button-group" };
+function p(o, a, u, _, d, f) {
+  return e(), t("div", c, [
+    r(o.$slots, "default")
+  ]);
+}
+const m = /* @__PURE__ */ n(s, [["render", p]]);
+export {
+  m as default
+};

package/dist/components/Chips/Chips.js

@@ -0,0 +1,65 @@
+import l from "../Icon.js";
+import { resolveComponent as r, createElementBlock as s, openBlock as t, normalizeClass as d, createCommentVNode as c, renderSlot as n, createVNode as p } from "vue";
+import { _ as u } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const f = {
+  props: {
+    showCloseIcon: {
+      type: Boolean,
+      default: !1
+    },
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    hasIcon() {
+      var e;
+      return (e = this.$slots) == null ? void 0 : e.icon;
+    }
+  },
+  components: {
+    Icon: l
+  }
+}, h = ["disabled"], _ = {
+  key: 0,
+  class: "ib-chips-icon-wrapper"
+}, b = {
+  key: 1,
+  class: "ib-chips-close-wrapper"
+};
+function m(e, I, o, y, B, a) {
+  const i = r("icon");
+  return t(), s("button", {
+    class: d({
+      "ib-chips": !0,
+      "ib-chips-active": o.active,
+      "ib-chips-error": o.error,
+      "ib-chips-disabled": o.disabled
+    }),
+    disabled: o.disabled
+  }, [
+    a.hasIcon ? (t(), s("span", _, [
+      n(e.$slots, "icon", { class: "ib-chips-icon" }, void 0, !0)
+    ])) : c("", !0),
+    n(e.$slots, "default", {}, void 0, !0),
+    o.showCloseIcon ? (t(), s("span", b, [
+      p(i, {
+        class: "ib-chips-icon",
+        name: "close-outline"
+      })
+    ])) : c("", !0)
+  ], 10, h);
+}
+const w = /* @__PURE__ */ u(f, [["render", m], ["__scopeId", "data-v-0a159535"]]);
+export {
+  w as default
+};