@avakhula/ui 0.1.22 → 0.1.24

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,226 @@
+import y from "./LimitSelector.js";
+import x from "../IconButton/IconButton.js";
+import k from "../Form/Input/Input.js";
+import R from "../Form/Label/Label.js";
+import L from "../Icon.js";
+import N from "../Tooltip/Tooltip.js";
+import { resolveComponent as l, createElementBlock as a, openBlock as o, normalizeClass as _, createBlock as m, createCommentVNode as c, createElementVNode as h, createVNode as s, Fragment as S, withCtx as P, createTextVNode as C, toDisplayString as g, renderList as V, withDirectives as z, vShow as T } from "vue";
+import { _ as O } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const B = 475, D = {
+  name: "IbPagination",
+  props: {
+    tooltipTextPrev: {
+      type: String
+    },
+    tooltipTextNext: {
+      type: String
+    },
+    labelInput: {
+      type: String
+    },
+    labelSelect: {
+      type: String,
+      required: !0
+    },
+    countRows: {
+      type: Number,
+      required: !0
+    },
+    pageCount: {
+      type: Number,
+      default: null
+    },
+    current: {
+      type: Number,
+      default: 1
+    },
+    limitSelector: {
+      type: Number,
+      default: 10
+    },
+    showPaginationInput: {
+      type: Boolean,
+      default: !0
+    },
+    showLimitSelector: {
+      type: Boolean,
+      default: !0
+    },
+    vertical: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      isShort: !1,
+      resizeObserver: null,
+      currentPage: this.current,
+      indexSpaceLeft: null,
+      indexSpaceRight: null,
+      limitValue: this.limitSelector
+    };
+  },
+  watch: {
+    current(t) {
+      this.onSelect(t);
+    },
+    limitSelector(t) {
+      this.limitValue = t;
+    },
+    limitValue() {
+      this.currentPage = 1;
+    }
+  },
+  mounted() {
+    this.handleResize(), this.resizeObserver = new ResizeObserver(this.handleResize), this.resizeObserver.observe(this.$refs.paginationControl);
+  },
+  methods: {
+    handleResize() {
+      this.isShort = this.$refs.paginationControl.clientWidth < B;
+    },
+    changeLimit(t) {
+      Number.isInteger(t) && (this.limitValue = t, this.$emit("set-limit", t));
+    },
+    onInput(t) {
+      if (t < 1) {
+        this.onSelect(1);
+        return;
+      }
+      if (t > this.countPagePagination) {
+        this.onSelect(this.countPagePagination);
+        return;
+      }
+      this.onSelect(Number(t));
+    },
+    onSelect(t) {
+      Number.isInteger(t) && (this.currentPage = t, this.$emit("select", t));
+    },
+    showItem(t) {
+      if (this.countPagePagination <= 5)
+        return this.indexSpaceLeft = null, this.indexSpaceRight = null, !0;
+      if (t === 1 || t === this.countPagePagination)
+        return !0;
+      if (this.countPagePagination >= 7) {
+        if (this.currentPage <= 3 && t <= 5)
+          return this.indexSpaceLeft = this.countPagePagination, this.indexSpaceRight = null, !0;
+        if (this.currentPage >= this.countPagePagination - 2 && t >= this.countPagePagination - 4)
+          return this.indexSpaceLeft = null, this.indexSpaceRight = 1, !0;
+        if (3 < this.currentPage < this.countPagePagination - 3 && (t === this.currentPage + 1 || t === this.currentPage - 1 || t === this.currentPage))
+          return this.indexSpaceLeft = this.countPagePagination, this.indexSpaceRight = 1, !0;
+      } else
+        return !0;
+      return !1;
+    }
+  },
+  computed: {
+    setCountOfRows() {
+      return this.currentPage === 1 || this.countPagePagination === 1 ? "1 - " + (this.countPagePagination > 1 ? this.limitValue : this.countRows) : this.countPagePagination === this.currentPage ? (this.currentPage - 1) * this.limitValue + " - " + this.countRows : (this.currentPage - 1) * this.limitValue + 1 + " - " + this.currentPage * this.limitValue;
+    },
+    countPagePagination() {
+      return Math.ceil(this.countRows / this.limitValue);
+    }
+  },
+  beforeUnmount() {
+    this.resizeObserver.disconnect(), this.resizeObserver = null;
+  },
+  components: {
+    IbIconButton: x,
+    IbIcon: L,
+    IbInput: k,
+    IbLabel: R,
+    IbLimitSelector: y,
+    IbTooltip: N
+  }
+}, q = { class: "repot-pagination" }, E = { class: "pagination-input" }, F = { class: "row-count" }, M = {
+  key: 1,
+  class: "pagination-text"
+}, U = {
+  key: 2,
+  class: "pagination-wrapper"
+}, W = ["onClick"];
+function H(t, u, e, j, i, n) {
+  const v = l("ib-limit-selector"), I = l("ib-label"), w = l("ib-input"), b = l("ib-icon"), p = l("ib-tooltip"), f = l("ib-icon-button");
+  return o(), a("div", {
+    ref: "paginationControl",
+    class: _(["report-controls", { "simple-pagination": !e.showLimitSelector }])
+  }, [
+    e.showLimitSelector ? (o(), m(v, {
+      key: 0,
+      onSelect: n.changeLimit,
+      value: i.limitValue,
+      vertical: e.vertical,
+      "label-select": e.labelSelect
+    }, null, 8, ["onSelect", "value", "vertical", "label-select"])) : c("", !0),
+    h("div", q, [
+      e.showPaginationInput ? (o(), a(S, { key: 0 }, [
+        s(I, { for: "goToPage" }, {
+          default: P(() => [
+            C(g(e.labelInput), 1)
+          ]),
+          _: 1
+        }),
+        h("div", E, [
+          s(w, {
+            id: "goToPage",
+            type: "number",
+            "hide-number-actions": "",
+            debounce: 500,
+            onInput: n.onInput
+          }, null, 8, ["onInput"])
+        ])
+      ], 64)) : c("", !0),
+      h("div", F, g(n.setCountOfRows + " of " + e.countRows), 1),
+      s(f, {
+        kind: "tertiary",
+        size: "m",
+        class: "toggle-children button-prev",
+        disabled: i.currentPage === 1,
+        onClick: u[0] || (u[0] = (d) => n.onSelect(i.currentPage - 1))
+      }, {
+        default: P(() => [
+          s(b, { name: "chevron-back-outline" }),
+          e.tooltipTextPrev ? (o(), m(p, {
+            key: 0,
+            text: e.tooltipTextPrev
+          }, null, 8, ["text"])) : c("", !0)
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      i.isShort ? (o(), a("p", M, g(i.currentPage) + " Page ", 1)) : (o(), a("ul", U, [
+        (o(!0), a(S, null, V(n.countPagePagination, (d, r) => z((o(), a("li", {
+          key: r,
+          class: _(["pagination-item", {
+            active: r + 1 === i.currentPage,
+            "dots-left": i.indexSpaceLeft === r + 1,
+            "dots-right": i.indexSpaceRight === r + 1
+          }]),
+          onClick: (A) => n.onSelect(r + 1)
+        }, [
+          h("button", null, g(r + 1), 1)
+        ], 10, W)), [
+          [T, n.showItem(r + 1)]
+        ])), 128))
+      ])),
+      s(f, {
+        kind: "tertiary",
+        size: "m",
+        class: "toggle-children button-next",
+        disabled: i.currentPage === n.countPagePagination,
+        onClick: u[1] || (u[1] = (d) => n.onSelect(i.currentPage + 1))
+      }, {
+        default: P(() => [
+          s(b, { name: "chevron-forward-outline" }),
+          e.tooltipTextNext ? (o(), m(p, {
+            key: 0,
+            text: e.tooltipTextNext
+          }, null, 8, ["text"])) : c("", !0)
+        ]),
+        _: 1
+      }, 8, ["disabled"])
+    ])
+  ], 2);
+}
+const tt = /* @__PURE__ */ O(D, [["render", H]]);
+export {
+  tt as default
+};

package/dist/components/Panel/Panel.js

@@ -0,0 +1,107 @@
+import h from "../IconButton/IconButton.js";
+import _ from "../Icon.js";
+import O from "../../mixins/expandAnimation.js";
+import { TooltipDirective as B } from "../../directives/tooltip/tooltip.js";
+import { resolveComponent as r, resolveDirective as b, createElementBlock as V, openBlock as l, normalizeClass as d, createElementVNode as t, createVNode as p, withDirectives as i, createCommentVNode as y, renderSlot as s, vShow as c, createBlock as E, withCtx as u, Transition as I } from "vue";
+import { _ as w } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const k = {
+  name: "IbPanel",
+  mixins: [O],
+  props: {
+    showExpandButton: {
+      type: Boolean,
+      default: !1
+    },
+    expandButtonTooltip: {
+      type: String,
+      default: ""
+    },
+    isOpen: {
+      type: Boolean,
+      default: !0
+    },
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    hideHeaderDivider: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  watch: {
+    isOpen() {
+      this.isOpenVal = this.isOpen;
+    },
+    isOpenVal() {
+      this.$emit("update:isOpen", this.isOpenVal);
+    }
+  },
+  data() {
+    return {
+      isOpenVal: this.isOpen
+    };
+  },
+  components: {
+    IconButton: h,
+    Icon: _
+  },
+  directives: {
+    Tooltip: B
+  },
+  emits: ["update:isOpen"]
+}, x = { class: "panel-head" }, C = { class: "head-title" }, D = { class: "divider" }, T = { class: "head-content" }, g = { class: "panel-body" };
+function A(e, a, n, N, o, S) {
+  const m = r("icon"), f = r("icon-button"), v = b("tooltip");
+  return l(), V("div", {
+    class: d(["ib-panel", { "panel-error": n.error }])
+  }, [
+    t("div", x, [
+      t("div", C, [
+        s(e.$slots, "title", {}, void 0, !0)
+      ]),
+      i(t("div", D, null, 512), [
+        [c, !n.hideHeaderDivider]
+      ]),
+      t("div", T, [
+        s(e.$slots, "head-content", {}, void 0, !0)
+      ]),
+      n.showExpandButton ? i((l(), E(f, {
+        key: 0,
+        class: d({
+          "toggle-visible-button": !0,
+          active: o.isOpenVal
+        }),
+        kind: "ghost",
+        type: "button",
+        onClick: a[0] || (a[0] = (H) => o.isOpenVal = !o.isOpenVal)
+      }, {
+        default: u(() => [
+          p(m, { name: "chevron-down-outline" })
+        ]),
+        _: 1
+      }, 8, ["class"])), [
+        [v, n.expandButtonTooltip]
+      ]) : y("", !0)
+    ]),
+    p(I, {
+      name: "expand",
+      onEnter: e.enter,
+      onAfterEnter: e.afterEnter,
+      onLeave: e.leave
+    }, {
+      default: u(() => [
+        i(t("div", g, [
+          s(e.$slots, "body", {}, void 0, !0)
+        ], 512), [
+          [c, o.isOpenVal]
+        ])
+      ]),
+      _: 3
+    }, 8, ["onEnter", "onAfterEnter", "onLeave"])
+  ], 2);
+}
+const F = /* @__PURE__ */ w(k, [["render", A], ["__scopeId", "data-v-5d452f83"]]);
+export {
+  F as default
+};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,105 @@
+import { c as f, a as m } from "../../chunks/floating-ui.dom-D8OVFdyL.js";
+import { createBlock as a, openBlock as n, Teleport as b, createVNode as P, Transition as l, withCtx as d, withDirectives as h, createElementVNode as p, normalizeClass as u, renderSlot as v, vShow as c } from "vue";
+import { _ as y } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const N = {
+  name: "IbPopover",
+  props: {
+    position: {
+      type: [String, Array],
+      default: "top"
+    },
+    alwaysVisible: {
+      type: Boolean,
+      default: !1
+    },
+    attachToBody: {
+      type: Boolean,
+      default: !1
+    },
+    attachTo: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      parentNode: null,
+      isVisible: !!this.alwaysVisible,
+      activePosition: null
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      var e, s, t, o;
+      this.parentNode = this.$el.parentNode, this.alwaysVisible || ((e = this.parentNode) == null || e.addEventListener("focus", this.showPopover, !0), (s = this.parentNode) == null || s.addEventListener("blur", this.hidePopover, !0), (t = this.parentNode) == null || t.addEventListener("mouseover", this.showPopover), (o = this.parentNode) == null || o.addEventListener("mouseleave", this.hidePopover));
+    });
+  },
+  methods: {
+    showPopover() {
+      this.isVisible || (this.isVisible = !0, f(
+        this.parentNode,
+        this.$refs.popover,
+        {
+          middleware: [
+            m({
+              allowedPlacements: this.position
+            })
+          ]
+        }
+      ).then(({ x: e, y: s, placement: t }) => {
+        this.activePosition = t, Object.assign(this.$refs.popover.style, {
+          left: `${e}px`,
+          top: `${s}px`
+        });
+      }));
+    },
+    hidePopover() {
+      this.isVisible = !1;
+    }
+  },
+  computed: {
+    classes() {
+      const e = ["ib-popover"];
+      return e.push(`ib-${this.activePosition}`), this.isVisible && e.push("active"), e;
+    }
+  },
+  beforeUnmount() {
+    !this.alwaysVisible && this.parentNode && (this.parentNode.removeEventListener("focus", this.showPopover, !0), this.parentNode.removeEventListener("blur", this.hidePopover, !0), this.parentNode.removeEventListener("mouseover", this.showPopover, !0), this.parentNode.removeEventListener("mouseleave", this.hidePopover, !0));
+  }
+};
+function w(e, s, t, o, i, r) {
+  return t.attachToBody || t.attachTo ? (n(), a(b, {
+    key: 0,
+    to: t.attachToBody ? "body" : t.attachTo
+  }, [
+    P(l, null, {
+      default: d(() => [
+        h(p("div", {
+          ref: "popover",
+          class: u(r.classes)
+        }, [
+          v(e.$slots, "default", {}, void 0, !0)
+        ], 2), [
+          [c, i.isVisible]
+        ])
+      ]),
+      _: 3
+    })
+  ], 8, ["to"])) : (n(), a(l, { key: 1 }, {
+    default: d(() => [
+      h(p("div", {
+        ref: "popover",
+        class: u(r.classes)
+      }, [
+        v(e.$slots, "default", {}, void 0, !0)
+      ], 2), [
+        [c, i.isVisible]
+      ])
+    ]),
+    _: 3
+  }));
+}
+const L = /* @__PURE__ */ y(N, [["render", w], ["__scopeId", "data-v-6da16abc"]]);
+export {
+  L as default
+};

package/dist/components/Popover/constants.js

@@ -0,0 +1,17 @@
+const t = {
+  topLeft: "top-left",
+  topCenter: "top-center",
+  topRight: "top-right",
+  rightTop: "right-top",
+  rightCenter: "right-center",
+  rightBottom: "right-bottom",
+  bottomLeft: "bottom-left",
+  bottomCenter: "bottom-center",
+  bottomRight: "bottom-right",
+  leftTop: "left-top",
+  leftCenter: "left-center",
+  leftBottom: "left-bottom"
+};
+export {
+  t as popoverPosition
+};

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,63 @@
+import c from "../Icon.js";
+import { progressBarStates as s } from "./constants.js";
+import { resolveComponent as n, createElementBlock as l, openBlock as p, createElementVNode as t, withDirectives as d, normalizeClass as m, normalizeStyle as u, createVNode as _, vShow as h, pushScopeId as g, popScopeId as v } from "vue";
+import { _ as S } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const b = {
+  props: {
+    states: {
+      type: String,
+      default: s.PROGRESS
+    },
+    progress: {
+      type: [String, Number],
+      default: 0
+    },
+    ariaLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    classes() {
+      const e = ["ib-progress-bar"];
+      return e.push(`progress-bar-${this.states}`), e;
+    },
+    iconName() {
+      return this.states === s.SUCCESS ? "checkmark-circle" : this.states === s.FAILED || this.states === s.CANCELING || this.states === s.CANCELED ? "close-circle" : "";
+    }
+  },
+  components: {
+    IbIcon: c
+  }
+}, o = (e) => (g("data-v-88a1a511"), e = e(), v(), e), f = { class: "ib-progress-bar-wrapper" }, N = ["aria-label", "aria-valuenow"], C = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "gradient" }, null, -1)), E = [
+  C
+], I = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", null, null, -1));
+function w(e, L, a, y, k, r) {
+  const i = n("ib-icon");
+  return p(), l("div", f, [
+    t("div", {
+      class: m(r.classes)
+    }, [
+      t("div", {
+        class: "progress",
+        role: "meter",
+        "aria-label": a.ariaLabel,
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": a.progress,
+        style: u({ width: a.progress + "%" })
+      }, E, 12, N),
+      I
+    ], 2),
+    d(_(i, {
+      class: "status-icon",
+      name: r.iconName
+    }, null, 8, ["name"]), [
+      [h, r.iconName.length]
+    ])
+  ]);
+}
+const z = /* @__PURE__ */ S(b, [["render", w], ["__scopeId", "data-v-88a1a511"]]);
+export {
+  z as default
+};

package/dist/components/ProgressBar/constants.js

@@ -0,0 +1,10 @@
+const e = {
+  PROGRESS: "progress",
+  SUCCESS: "success",
+  FAILED: "failed",
+  CANCELING: "canceling",
+  CANCELED: "canceled"
+};
+export {
+  e as progressBarStates
+};