@avakhula/ui 0.1.22 → 0.1.24

package/dist/components/Form/DatePicker/Icons/chevron-back.js

@@ -0,0 +1,8 @@
+const o = `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.25 3.5L5.75 8L10.25 12.5" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+export {
+  o as default
+};

package/dist/components/Form/DatePicker/Icons/chevron-forward.js

@@ -0,0 +1,8 @@
+const o = `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.75 3.5L10.25 8L5.75 12.5" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+export {
+  o as default
+};

package/dist/components/Form/FormGroup/FormGroup.js

@@ -0,0 +1,30 @@
+import { createElementBlock as t, openBlock as o, normalizeClass as s, renderSlot as a, createCommentVNode as n, toDisplayString as p } from "vue";
+import { _ as l } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const d = {
+  name: "IbInputGroup",
+  props: {
+    supportText: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  }
+}, u = {
+  key: 0,
+  class: "support-text"
+};
+function c(r, i, e, f, m, _) {
+  return o(), t("div", {
+    class: s(["ib-form-group", { disabled: e.disabled }])
+  }, [
+    a(r.$slots, "default"),
+    e.supportText.length ? (o(), t("p", u, p(e.supportText), 1)) : n("", !0)
+  ], 2);
+}
+const g = /* @__PURE__ */ l(d, [["render", c]]);
+export {
+  g as default
+};

package/dist/components/Form/FormGroup/FormGroupSet.js

@@ -0,0 +1,44 @@
+import a from "../../Alert/Alert.js";
+import { resolveComponent as c, createElementBlock as t, openBlock as r, normalizeClass as l, withDirectives as i, createElementVNode as p, createCommentVNode as m, createVNode as d, withCtx as u, createTextVNode as _, toDisplayString as o, vShow as f, renderSlot as g } from "vue";
+import { _ as h } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const x = {
+  props: {
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    supportText: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {
+    IbAlert: a
+  }
+}, S = { class: "group-set-content" }, v = {
+  key: 0,
+  class: "support-text"
+};
+function b(s, y, e, C, M, N) {
+  const n = c("ib-alert");
+  return r(), t("div", {
+    class: l(["ib-form-group-set", { "has-error": e.errorMessage.length }])
+  }, [
+    i(d(n, { class: "error-message" }, {
+      default: u(() => [
+        _(o(e.errorMessage), 1)
+      ]),
+      _: 1
+    }, 512), [
+      [f, e.errorMessage.length]
+    ]),
+    p("div", S, [
+      g(s.$slots, "default")
+    ]),
+    e.supportText.length ? (r(), t("p", v, o(e.supportText), 1)) : m("", !0)
+  ], 2);
+}
+const w = /* @__PURE__ */ h(x, [["render", b]]);
+export {
+  w as default
+};

package/dist/components/Form/Input/Input.js

@@ -0,0 +1,375 @@
+import B from "../../Alert/Alert.js";
+import S from "../../IconButton/IconButton.js";
+import k from "../../Icon.js";
+import I from "../../Dropdown/Dropdown.js";
+import { inputTypeOptions as b } from "./constants.js";
+import x from "../../../helpers/generateUID.js";
+import P from "../../../helpers/removeEvents.js";
+import { TooltipDirective as M } from "../../../directives/tooltip/tooltip.js";
+import { horizontalPosition as C, verticalPosition as N } from "../../Dropdown/constants.js";
+import { resolveComponent as f, resolveDirective as D, createElementBlock as V, openBlock as s, createBlock as l, createCommentVNode as r, createElementVNode as g, withCtx as n, createTextVNode as E, toDisplayString as F, normalizeClass as K, withDirectives as d, mergeProps as T, vModelDynamic as z, withKeys as y, createVNode as c, vShow as p, withModifiers as A, renderSlot as H } from "vue";
+import { _ as O } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const U = {
+  name: "IbInput",
+  props: {
+    type: {
+      type: String,
+      default: b.text,
+      validator: (t) => Object.keys(b).includes(t)
+    },
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    id: {
+      type: [String],
+      default() {
+        return x();
+      }
+    },
+    debounce: {
+      type: [Number, String]
+    },
+    showIcon: {
+      type: Boolean,
+      default: !1
+    },
+    showClearButton: {
+      type: Boolean,
+      default: !0
+    },
+    clearButtonMessage: {
+      type: String,
+      default: ""
+    },
+    settingsButtonMessage: {
+      type: String,
+      default: ""
+    },
+    showPasswordMessage: {
+      type: String,
+      default: ""
+    },
+    hidePasswordMessage: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    modelValue: {
+      type: [String, Number]
+    },
+    settingsVerticalPosition: {
+      type: String,
+      default: N.bottom
+    },
+    settingsHorizontalPosition: {
+      type: String,
+      default: C.right
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    autocomplete: {
+      type: String
+    },
+    isSuccess: {
+      type: Boolean,
+      default: !1
+    },
+    hideNumberActions: {
+      type: Boolean,
+      default: !1
+    },
+    decrementButtonMessage: {
+      type: String,
+      default: "Decrement"
+    },
+    incrementButtonMessage: {
+      type: String,
+      default: "Increment"
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 1 / 0
+    },
+    toFixed: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      actualValue: this.modelValue || this.value,
+      showPassword: !1
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$globalEvents.$emit(`label:disabled:${this.id}`, this.disabled);
+    }, 10);
+  },
+  methods: {
+    toggleShowPassword() {
+      this.showPassword = !this.showPassword;
+    },
+    clearInput() {
+      this.actualValue = "", this.$emit("update:modelValue", this.actualValue), this.$emit("input", this.actualValue), this.$emit("clear");
+    },
+    onBlur() {
+      this.$emit("blur", this.actualValue);
+    },
+    onFocus() {
+      this.$emit("focus", this.actualValue);
+    },
+    onInput() {
+      this.debounce ? this.delayedInput(this.actualValue) : (this.$emit("update:modelValue", this.actualValue), this.$emit("input", this.actualValue));
+    },
+    decrement() {
+      this.actualValue > this.min && (this.actualValue = (+this.actualValue - +this.step).toFixed(this.toFixed)), this.$emit("update:modelValue", this.actualValue), this.$emit("input", this.actualValue), this.$emit("blur", this.actualValue);
+    },
+    increment() {
+      this.actualValue < this.max && (this.actualValue = (+this.actualValue + +this.step).toFixed(this.toFixed)), this.$emit("update:modelValue", this.actualValue), this.$emit("input", this.actualValue), this.$emit("blur", this.actualValue);
+    },
+    delayedInput(t) {
+      this.timer && (clearTimeout(this.timer), this.timer = null), this.timer = setTimeout(() => {
+        this.$emit("update:modelValue", t), this.$emit("input", t);
+      }, this.debounce);
+    },
+    focus() {
+      this.$refs.field.focus();
+    }
+  },
+  computed: {
+    hasSettings() {
+      return !!this.$slots.settings;
+    },
+    hasValue() {
+      var t;
+      return (t = this.actualValue) == null ? void 0 : t.toString().length;
+    },
+    classes() {
+      const t = ["ib-input"];
+      return this.hasErrorState && t.push("ib-error"), this.showIcon && t.push("ib-input-has-icon"), t;
+    },
+    attrs() {
+      let t = P({ ...this.$attrs }, ["onInput", "onBlur"]);
+      return t.type = this.type === b.password ? b.password && this.showPassword ? "text" : "password" : this.type, t;
+    },
+    hasErrorState() {
+      return this.error || this.errorMessage.length;
+    }
+  },
+  watch: {
+    value(t) {
+      this.actualValue = t;
+    },
+    modelValue(t) {
+      this.actualValue = t;
+    },
+    disabled(t) {
+      this.$globalEvents.$emit(`label:disabled:${this.id}`, t);
+    }
+  },
+  emits: [
+    "input",
+    "blur",
+    "focus",
+    "clear",
+    "update:modelValue",
+    "label:disabled:undefined"
+  ],
+  components: {
+    IbAlert: B,
+    IbIconButton: S,
+    IbIcon: k,
+    IbDropdown: I
+  },
+  directives: {
+    Tooltip: M
+  },
+  inheritAttrs: !1
+}, j = ["aria-invalid", "readonly", "disabled", "id", "autocomplete", "min", "max", "step"], q = {
+  key: 3,
+  class: "number-button-group"
+}, L = { class: "divider" }, G = { class: "settings-wrapper" };
+function J(t, i, e, Q, h, a) {
+  const v = f("ib-alert"), u = f("ib-icon"), m = f("ib-icon-button"), _ = f("ib-dropdown"), w = D("tooltip");
+  return s(), V("div", null, [
+    e.errorMessage ? (s(), l(v, { key: 0 }, {
+      default: n(() => [
+        E(F(e.errorMessage), 1)
+      ]),
+      _: 1
+    })) : r("", !0),
+    g("div", {
+      class: K(["ib-input-wrapper", {
+        "has-settings": a.hasSettings,
+        success: e.isSuccess,
+        "numbers-type": e.type === "number" && !e.hideNumberActions
+      }])
+    }, [
+      e.showIcon ? (s(), l(u, {
+        key: 0,
+        class: "icon-search",
+        name: "search-outline"
+      })) : r("", !0),
+      d(g("input", T(a.attrs, {
+        "onUpdate:modelValue": i[0] || (i[0] = (o) => h.actualValue = o),
+        ref: "field",
+        "aria-invalid": !!a.hasErrorState,
+        readonly: e.readonly,
+        disabled: e.disabled,
+        id: e.id,
+        autocomplete: e.autocomplete,
+        class: a.classes,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        onInput: i[1] || (i[1] = (o) => a.onInput(o)),
+        onBlur: i[2] || (i[2] = (o) => a.onBlur(o)),
+        onFocus: i[3] || (i[3] = (o) => a.onFocus(o))
+      }), null, 16, j), [
+        [
+          z,
+          h.actualValue,
+          void 0,
+          { trim: !0 }
+        ]
+      ]),
+      e.type !== "password" && e.showClearButton ? d((s(), l(m, {
+        key: 1,
+        kind: "ghost",
+        class: "button-clear",
+        disabled: e.readonly || e.disabled,
+        "help-text": e.clearButtonMessage,
+        "prevent-default": "",
+        type: "button",
+        onClick: a.clearInput,
+        onKeypress: y(a.clearInput, ["enter"])
+      }, {
+        default: n(() => [
+          c(u, { name: "close-outline" })
+        ]),
+        _: 1
+      }, 8, ["disabled", "help-text", "onClick", "onKeypress"])), [
+        [p, a.hasValue]
+      ]) : r("", !0),
+      e.isSuccess ? (s(), l(u, {
+        key: 2,
+        class: "succes-checkmark",
+        name: "checkmark-circle"
+      })) : r("", !0),
+      e.type === "number" && !e.hideNumberActions ? (s(), V("div", q, [
+        d(g("div", L, null, 512), [
+          [p, a.hasValue]
+        ]),
+        d((s(), l(m, {
+          kind: "ghost",
+          class: "button-decrement",
+          disabled: e.readonly || e.disabled,
+          "prevent-default": "",
+          type: "button",
+          "aria-label": "Decrement value",
+          onBlur: a.onBlur,
+          onClick: a.decrement,
+          onKeypress: y(a.decrement, ["enter"])
+        }, {
+          default: n(() => [
+            c(u, { name: "remove-outline" })
+          ]),
+          _: 1
+        }, 8, ["disabled", "onBlur", "onClick", "onKeypress"])), [
+          [w, e.decrementButtonMessage]
+        ]),
+        d((s(), l(m, {
+          kind: "ghost",
+          class: "button-increment",
+          disabled: e.readonly || e.disabled,
+          "prevent-default": "",
+          type: "button",
+          "aria-label": "Increment value",
+          onBlur: a.onBlur,
+          onClick: a.increment,
+          onKeypress: y(a.increment, ["enter"])
+        }, {
+          default: n(() => [
+            c(u, { name: "add-outline" })
+          ]),
+          _: 1
+        }, 8, ["disabled", "onBlur", "onClick", "onKeypress"])), [
+          [w, e.incrementButtonMessage]
+        ])
+      ])) : r("", !0),
+      e.type === "password" ? d((s(), l(m, {
+        key: 4,
+        kind: "ghost",
+        class: "toggle-password",
+        "prevent-default": "",
+        type: "button",
+        disabled: e.disabled,
+        "help-text": h.showPassword ? e.hidePasswordMessage : e.showPasswordMessage,
+        onClick: A(a.toggleShowPassword, ["prevent"])
+      }, {
+        default: n(() => [
+          c(u, {
+            name: h.showPassword ? "eye-off-outline" : "eye-outline"
+          }, null, 8, ["name"])
+        ]),
+        _: 1
+      }, 8, ["disabled", "help-text", "onClick"])), [
+        [p, a.hasValue]
+      ]) : r("", !0),
+      a.hasSettings ? (s(), l(_, {
+        key: 5,
+        class: "settings-dropdown-wrapper",
+        horizontal: e.settingsHorizontalPosition,
+        vertical: e.settingsVerticalPosition
+      }, {
+        trigger: n(() => [
+          c(m, {
+            "prevent-default": "",
+            "help-text": e.settingsButtonMessage,
+            class: "options-trigger",
+            kind: "ghost"
+          }, {
+            default: n(() => [
+              c(u, { name: "options" })
+            ]),
+            _: 1
+          }, 8, ["help-text"])
+        ]),
+        body: n(() => [
+          g("div", G, [
+            H(t.$slots, "settings", {}, void 0, !0)
+          ])
+        ]),
+        _: 3
+      }, 8, ["horizontal", "vertical"])) : r("", !0)
+    ], 2)
+  ]);
+}
+const le = /* @__PURE__ */ O(U, [["render", J], ["__scopeId", "data-v-c59dbdf5"]]);
+export {
+  le as default
+};

package/dist/components/Form/Input/constants.js

@@ -0,0 +1,9 @@
+const e = {
+  text: "text",
+  password: "password",
+  email: "email",
+  number: "number"
+};
+export {
+  e as inputTypeOptions
+};

package/dist/components/Form/Label/Label.js

@@ -0,0 +1,87 @@
+import d from "../../IconButton/IconButton.js";
+import f from "../../Icon.js";
+import { TooltipDirective as b } from "../../../directives/tooltip/tooltip.js";
+import { resolveComponent as i, resolveDirective as u, createElementBlock as n, openBlock as o, normalizeClass as m, createCommentVNode as s, renderSlot as _, withDirectives as p, createBlock as h, withCtx as x, createVNode as v } from "vue";
+import { _ as y } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const g = {
+  name: "IbLabel",
+  props: {
+    for: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    infoText: {
+      type: [String, Object],
+      default: ""
+    },
+    tooltipPosition: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  mounted() {
+    this.$globalEvents.$on(`label:disabled:${this.for}`, (e) => {
+      this.idDisabled = e;
+    });
+  },
+  data() {
+    return {
+      idDisabled: this.disabled
+    };
+  },
+  watch: {
+    disabled(e) {
+      this.idDisabled = e;
+    }
+  },
+  computed: {
+    classes() {
+      const e = ["ib-label"];
+      return this.infoText.length && e.push("has-info-text"), this.idDisabled && e.push("label-disabled"), e;
+    }
+  },
+  components: {
+    IbIconButton: d,
+    IbIcon: f
+  },
+  directives: {
+    Tooltip: b
+  }
+}, k = ["for"], D = {
+  key: 0,
+  class: "required"
+};
+function I(e, T, t, B, C, l) {
+  const a = i("ib-icon"), r = i("ib-icon-button"), c = u("tooltip");
+  return o(), n("label", {
+    class: m(l.classes),
+    for: t.for
+  }, [
+    t.required ? (o(), n("span", D, "* ")) : s("", !0),
+    _(e.$slots, "default", {}, void 0, !0),
+    t.infoText.length || Object.keys(t.infoText).length ? p((o(), h(r, {
+      key: 1,
+      size: "xs",
+      class: "info-button",
+      kind: "ghost",
+      type: "button"
+    }, {
+      default: x(() => [
+        v(a, { name: "information-circle-outline" })
+      ]),
+      _: 1
+    })), [
+      [c, t.infoText, t.tooltipPosition]
+    ]) : s("", !0)
+  ], 10, k);
+}
+const z = /* @__PURE__ */ y(g, [["render", I], ["__scopeId", "data-v-d09af73c"]]);
+export {
+  z as default
+};