@indielayer/ui/lib/components/inputFooter/InputFooter.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as v, computed as u, openBlock as a, createElementBlock as s, normalizeClass as n, unref as r, normalizeStyle as f, createElementVNode as y, toDisplayString as l, createCommentVNode as c } from "vue";
import { useTheme as k } from "../../composables/useTheme.js";
const N = {
  helper: String,
  error: String,
  characterCount: Number,
  maxCharacters: [Number, String],
  showCounter: Boolean
}, g = { name: "XInputFooter" }, b = /* @__PURE__ */ v({
  ...g,
  props: N,
  setup(i) {
    const e = i, { styles: m, classes: o, className: h } = k("InputFooter", {}, e), p = u(() => e.maxCharacters ? Number(e.maxCharacters) : void 0), C = u(() => e.characterCount === void 0 ? "" : p.value ? `${e.characterCount}/${p.value}` : `${e.characterCount}`), d = u(() => e.error || e.helper);
    return (t, S) => (a(), s("div", {
      class: n([r(h), r(o).wrapper]),
      style: f(r(m))
    }, [
      d.value || t.showCounter ? (a(), s("div", {
        key: 0,
        class: n(r(o).container)
      }, [
        y("div", null, [
          t.error ? (a(), s("p", {
            key: 0,
            class: n(r(o).errorText)
          }, l(t.error), 3)) : t.helper ? (a(), s("p", {
            key: 1,
            class: n(r(o).helperText)
          }, l(t.helper), 3)) : c("", !0)
        ]),
        t.showCounter ? (a(), s("p", {
          key: 0,
          class: n(r(o).counter),
          role: "status",
          "aria-live": "polite"
        }, l(C.value), 3)) : c("", !0)
      ], 2)) : c("", !0)
    ], 6));
  }
});
export {
  b as default
};