@avakhula/ui 0.1.22 → 0.1.24

package/dist/components/Tabs/TabDropdown.js

@@ -0,0 +1,94 @@
+import u from "../Dropdown/DropdownList.js";
+import D from "../Dropdown/DropdownItem.js";
+import h from "../Icon.js";
+import T from "../../helpers/getHrefFromID.js";
+import { resolveComponent as d, createElementBlock as a, openBlock as i, createVNode as c, withCtx as n, Fragment as k, renderList as x, createBlock as y, normalizeClass as l, createTextVNode as b, toDisplayString as m, createElementVNode as v } from "vue";
+import { _ as I } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const g = {
+  name: "IbTabDropdown",
+  props: {
+    tabs: {
+      rype: Object,
+      default: {}
+    },
+    selectedTab: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      selectedTabByDropdown: "",
+      isDisabledDropdown: this.setDisabledTab()
+    };
+  },
+  methods: {
+    createHref(e) {
+      return T(e);
+    },
+    selectTab(e) {
+      this.selectedTabByDropdown = e, this.$emit("select-tab", e);
+    },
+    setDisabledTab() {
+      return this.tabs.tabs.every((e) => e.disabled);
+    }
+  },
+  computed: {
+    isActive() {
+      for (let e of this.tabs.tabs)
+        if (e.id === this.selectedTab)
+          return !0;
+      return !1;
+    }
+  },
+  components: {
+    IbDropdownList: u,
+    IbDropdownItem: D,
+    IbIcon: h
+  }
+}, B = { class: "wrapper-tab-link dropdown-tab" }, C = ["tabindex"];
+function H(e, N, o, V, r, s) {
+  const p = d("ib-icon"), _ = d("ib-dropdown-item"), f = d("ib-dropdown-list");
+  return i(), a("div", B, [
+    c(f, {
+      disabled: r.isDisabledDropdown,
+      "close-on-click": !0
+    }, {
+      trigger: n(() => [
+        v("span", {
+          class: l(["tab-link", {
+            active: r.selectedTabByDropdown === o.selectedTab || s.isActive,
+            disabled: r.isDisabledDropdown
+          }]),
+          tabindex: r.isDisabledDropdown ? -1 : 0
+        }, [
+          b(m(o.tabs.name) + " ", 1),
+          c(p, { name: "chevron-down" })
+        ], 10, C)
+      ]),
+      body: n(() => [
+        (i(!0), a(k, null, x(o.tabs.tabs, (t, w) => (i(), y(_, {
+          key: w,
+          checked: t.id === o.selectedTab,
+          href: s.createHref(t.id),
+          tabindex: t.disabled ? -1 : 0,
+          class: l([{
+            disabled: t.disabled
+          }, "dropdown-tab-item"]),
+          target: "_self",
+          onClick: (A) => s.selectTab(t.id)
+        }, {
+          default: n(() => [
+            b(m(t.title), 1)
+          ]),
+          _: 2
+        }, 1032, ["checked", "href", "tabindex", "class", "onClick"]))), 128))
+      ]),
+      _: 1
+    }, 8, ["disabled"])
+  ]);
+}
+const O = /* @__PURE__ */ I(g, [["render", H]]);
+export {
+  O as default
+};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,128 @@
+import _ from "../Icon.js";
+import T from "./TabDropdown.js";
+import I from "../../helpers/getHrefFromID.js";
+import { resolveComponent as d, createElementBlock as n, openBlock as o, createElementVNode as b, Fragment as f, renderList as k, createBlock as i, resolveDynamicComponent as y, mergeProps as v, withCtx as g, createCommentVNode as p, createTextVNode as w, toDisplayString as x, renderSlot as H } from "vue";
+import { _ as C } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  name: "IbTabs",
+  props: {
+    showTitle: {
+      type: Boolean,
+      default: !0
+    },
+    selectedTabId: {
+      type: String,
+      default: ""
+    },
+    setHref: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      tabs: [],
+      selectedTab: this.selectTabId
+    };
+  },
+  watch: {
+    selectedTabId(t) {
+      this.selectTab(t);
+    }
+  },
+  created() {
+    const t = [];
+    this.$slots.default().forEach((e) => e.type === Symbol.for("v-fgt") ? t.push(...e.children) : t.push(e)), t.forEach((e) => {
+      if (!e.props.name)
+        this.tabs.push(e.props);
+      else {
+        const a = this.tabs.findIndex(
+          (r) => r.name === e.props.name
+        );
+        if (a !== -1)
+          this.tabs[a].tabs.push(e.props);
+        else {
+          const r = { name: e.props.name, tabs: [e.props] };
+          this.tabs.push(r);
+        }
+      }
+    });
+    for (let e of this.tabs)
+      if (!e.disabled)
+        if (e.tabs) {
+          for (let a of e.tabs)
+            if (!a.disabled) {
+              this.selectTab(a.id);
+              return;
+            }
+        } else {
+          this.selectTab(e.id);
+          return;
+        }
+  },
+  methods: {
+    createHref(t) {
+      return I(t);
+    },
+    selectTab(t) {
+      this.$emit("changeTab", t), this.selectedTab = t;
+    }
+  },
+  components: {
+    IbTabDropdown: T,
+    IbIcon: _
+  },
+  emits: ["changeTab"]
+}, B = { class: "tabs" }, E = { class: "tabs-list" }, D = {
+  key: 0,
+  class: "wrapper-tab-link"
+}, N = {
+  class: "tabs-content",
+  ref: "tabHandler"
+};
+function V(t, e, a, r, l, c) {
+  const m = d("ib-icon"), h = d("ib-tab-dropdown");
+  return o(), n("div", B, [
+    b("ul", E, [
+      (o(!0), n(f, null, k(l.tabs, (s, u) => (o(), n("li", {
+        class: "tab-item",
+        key: u
+      }, [
+        s.name ? (o(), i(h, {
+          key: 1,
+          "selected-tab": l.selectedTab,
+          tabs: s,
+          onSelectTab: c.selectTab
+        }, null, 8, ["selected-tab", "tabs", "onSelectTab"])) : (o(), n("div", D, [
+          (o(), i(y(a.setHref ? "a" : "div"), v(a.setHref ? { href: c.createHref(s.id), target: "_self" } : {}, {
+            class: ["tab-link", {
+              active: l.selectedTab === s.id,
+              disabled: s.disabled
+            }],
+            tabindex: s.disabled ? -1 : 0,
+            onClick: (F) => c.selectTab(s.id)
+          }), {
+            default: g(() => [
+              s.icon ? (o(), i(m, {
+                key: 0,
+                class: "tab-icon",
+                name: s.icon
+              }, null, 8, ["name"])) : p("", !0),
+              a.showTitle ? (o(), n(f, { key: 1 }, [
+                w(x(s.title), 1)
+              ], 64)) : p("", !0)
+            ]),
+            _: 2
+          }, 1040, ["class", "tabindex", "onClick"]))
+        ]))
+      ]))), 128))
+    ]),
+    b("div", N, [
+      H(t.$slots, "default", {}, void 0, !0)
+    ], 512)
+  ]);
+}
+const A = /* @__PURE__ */ C(S, [["render", V], ["__scopeId", "data-v-8512ce8a"]]);
+export {
+  A as default
+};

package/dist/components/TagPill/TagPill.js

@@ -0,0 +1,61 @@
+import { tagPillSTatuses as t } from "./constants.js";
+import a from "../Icon.js";
+import { resolveComponent as c, createElementBlock as l, openBlock as o, normalizeClass as i, createBlock as u, createCommentVNode as m, createElementVNode as d, renderSlot as p } from "vue";
+import { _ as f } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const _ = {
+  props: {
+    status: {
+      type: String,
+      default: t.neutral,
+      validator: (e) => Object.keys(t).includes(e)
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    showIcon: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    classes() {
+      const e = ["ib-tag-pill"];
+      return e.push(`ib-tag-pill-${this.status}`), e;
+    },
+    iconName() {
+      if (this.icon) return this.icon;
+      switch (this.status) {
+        case t.success:
+          return "checkmark-outline";
+        case t.neutral:
+          return "time-outline";
+        case t.info:
+          return "information-circle-outline";
+        case t.error:
+          return "close-outline";
+        default:
+          return "";
+      }
+    }
+  },
+  components: { IbIcon: a }
+};
+function h(e, b, s, g, k, n) {
+  const r = c("ib-icon");
+  return o(), l("div", {
+    class: i(n.classes)
+  }, [
+    s.showIcon && n.iconName.length ? (o(), u(r, {
+      key: 0,
+      name: n.iconName
+    }, null, 8, ["name"])) : m("", !0),
+    d("span", null, [
+      p(e.$slots, "default", {}, void 0, !0)
+    ])
+  ], 2);
+}
+const B = /* @__PURE__ */ f(_, [["render", h], ["__scopeId", "data-v-ab3c0159"]]);
+export {
+  B as default
+};

package/dist/components/TagPill/constants.js

@@ -0,0 +1,12 @@
+const e = {
+  success: "success",
+  neutral: "neutral",
+  info: "info",
+  error: "error",
+  new: "new",
+  favorite: "favorite",
+  pending: "pending"
+};
+export {
+  e as tagPillSTatuses
+};

package/dist/components/ToggleTip/ToggleTip.js

@@ -0,0 +1,91 @@
+import { toggleTipPosition as d } from "./constants.js";
+import u from "../IconButton/IconButton.js";
+import h from "../Icon.js";
+import { resolveComponent as i, createBlock as m, openBlock as _, Transition as f, withCtx as s, withDirectives as b, createElementVNode as e, normalizeClass as g, createVNode as n, toDisplayString as v, withModifiers as S, renderSlot as l, vShow as C } from "vue";
+import { _ as I } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const O = {
+  name: "IbTooltip",
+  props: {
+    position: {
+      type: String,
+      default: d.topCenter
+    },
+    title: {
+      type: String
+    },
+    isOpen: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.parentNode = this.$el.parentNode, getComputedStyle(this.parentNode).position !== "absolute" && (this.parentNode.style.position = "relative");
+    });
+  },
+  data() {
+    return {
+      isOpenedState: this.isOpen
+    };
+  },
+  methods: {
+    open() {
+      this.isOpenedState = !0, this.$emit("open");
+    },
+    close() {
+      this.isOpenedState = !1, this.$emit("close");
+    }
+  },
+  computed: {
+    classes() {
+      const t = ["ib-toggle-tip"];
+      return t.push(`ib-${this.position}`), t;
+    }
+  },
+  watch: {
+    isOpen(t) {
+      t ? this.open() : this.close();
+    }
+  },
+  components: {
+    IbIconButton: u,
+    IbIcon: h
+  }
+}, $ = { class: "ib-toggle-tip-head" }, k = { class: "ib-toggle-tip-content" }, y = { class: "ib-toggle-tip-button-set" };
+function N(t, T, p, w, c, o) {
+  const a = i("ib-icon"), r = i("ib-icon-button");
+  return _(), m(f, null, {
+    default: s(() => [
+      b(e("div", {
+        class: g(o.classes)
+      }, [
+        e("div", $, [
+          e("p", null, v(p.title), 1),
+          n(r, {
+            class: "close-button",
+            kind: "ghost",
+            onClick: S(o.close, ["prevent"])
+          }, {
+            default: s(() => [
+              n(a, { name: "close-outline" })
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        e("div", k, [
+          l(t.$slots, "default", {}, void 0, !0)
+        ]),
+        e("div", y, [
+          l(t.$slots, "buttons", {}, void 0, !0)
+        ])
+      ], 2), [
+        [C, c.isOpenedState]
+      ])
+    ]),
+    _: 3
+  });
+}
+const E = /* @__PURE__ */ I(O, [["render", N], ["__scopeId", "data-v-16d5a7bd"]]);
+export {
+  E as default
+};

package/dist/components/ToggleTip/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 toggleTipPosition
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,46 @@
+import a from "../Popover/Popover.js";
+import { resolveComponent as n, createBlock as c, openBlock as o, normalizeClass as r, withCtx as p, createElementBlock as m, createCommentVNode as _, createElementVNode as d, toDisplayString as i } from "vue";
+import { _ as b } from "../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const f = {
+  name: "IbTooltip",
+  props: {
+    position: {
+      type: String
+    },
+    title: {
+      type: String
+    },
+    text: {
+      type: String
+    },
+    alwaysVisible: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    classList() {
+      const e = ["ib-tooltip"];
+      return this.title && e.push("ib-tooltip-large"), e;
+    }
+  },
+  components: { IbPopover: a }
+}, u = { key: 0 };
+function y(e, v, t, x, g, s) {
+  const l = n("ib-popover");
+  return o(), c(l, {
+    position: t.position,
+    "always-visible": t.alwaysVisible,
+    class: r(s.classList)
+  }, {
+    default: p(() => [
+      t.title ? (o(), m("b", u, i(t.title), 1)) : _("", !0),
+      d("p", null, i(t.text), 1)
+    ]),
+    _: 1
+  }, 8, ["position", "always-visible", "class"]);
+}
+const B = /* @__PURE__ */ b(f, [["render", y], ["__scopeId", "data-v-996c106d"]]);
+export {
+  B as default
+};