@opens/ui 1.0.0

package/dist/yunique-ui.es.js

@@ -0,0 +1,373 @@
+import { defineComponent as v, ref as i, watch as $, openBlock as p, createElementBlock as f, createElementVNode as t, toDisplayString as c, normalizeClass as y, withDirectives as b, withKeys as _, vModelDynamic as C, vModelText as V, renderSlot as g, vShow as h, createVNode as w, withCtx as D, vModelCheckbox as I, createTextVNode as T } from "vue";
+const N = { class: "simple-input" }, P = { class: "yu-flex yu-h-full yu-pl-2" }, E = { class: "material-icons yu-text-gray-700 yu-my-auto" }, K = ["placeholder", "type", "maxlength"], M = /* @__PURE__ */ v({
+  __name: "icon-text-input",
+  props: {
+    value: null,
+    label: null,
+    icon: null,
+    placeholder: null,
+    type: null,
+    tooltip: null,
+    caract: null,
+    invalid: { type: Boolean }
+  },
+  emits: ["blur", "focus", "input"],
+  setup(e, { emit: u }) {
+    const n = e;
+    i(!1);
+    const l = i(n.value);
+    i(!1);
+    const a = i(n.type), s = i(!1);
+    $(s, (d) => {
+      if (!d) {
+        u("blur");
+        return;
+      }
+      u("focus");
+    });
+    function r() {
+      return !(s.value || l.value);
+    }
+    function x(d) {
+      u("input", d.target.value);
+    }
+    return (d, o) => (p(), f("div", N, [
+      t("div", P, [
+        t("i", E, c(e.icon), 1),
+        t("p", {
+          class: y(["yu-text-gray-500 yu-font-plus yu-font-medium yu-p-1 yu-px-2 yu-transition", { "yu-translate-y-2 yu-text-sm": r(), "yu-translate-y-0 yu-text-xs": !r() }])
+        }, c(e.label), 3)
+      ]),
+      b(t("input", {
+        class: "yu-pl-8 yu-absolute yu-w-full yu-h-full yu-outline-none yu-bg-transparent yu-appearence-none yu-indent-2 yu-pt-3 yu-font-plus yu-font-semibold yu-text-gray-800",
+        placeholder: e.placeholder,
+        onInput: x,
+        onFocus: o[0] || (o[0] = (m) => s.value = !0),
+        onBlur: o[1] || (o[1] = (m) => s.value = !1),
+        "onUpdate:modelValue": o[2] || (o[2] = (m) => l.value = m),
+        type: a.value || e.type,
+        onKeyup: o[3] || (o[3] = _((m) => d.$emit("keyup-enter"), ["enter"])),
+        maxlength: e.caract
+      }, null, 40, K), [
+        [C, l.value]
+      ])
+    ]));
+  }
+}), U = ["disabled"], k = /* @__PURE__ */ v({
+  __name: "text-input",
+  props: {
+    modelValue: null,
+    label: null,
+    invalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:model-value", "blur", "press-enter"],
+  setup(e, { emit: u }) {
+    const l = i(e.modelValue), a = i(!1);
+    function s() {
+      return !(a.value || l.value);
+    }
+    function r(d) {
+      u(d);
+    }
+    function x(d) {
+      const o = d.target;
+      u("update:model-value", o.value);
+    }
+    return (d, o) => (p(), f("div", {
+      class: y(["simple-input", { "yu-border-red-500": e.invalid }])
+    }, [
+      t("p", {
+        class: y(["yu-text-gray-500 yu-font-plus yu-font-medium yu-p-1 yu-px-2 yu-transition", { "yu-translate-y-1/4 yu-text-sm": s(), "yu-translate-x-0 yu-text-xs": !s() }])
+      }, c(e.label), 3),
+      b(t("input", {
+        class: "yu-absolute yu-w-full yu-h-full yu-outline-none yu-bg-transparent yu-appearence-none yu-indent-2 yu-pt-3 yu-font-plus yu-font-semibold yu-text-gray-800 dark:yu-text-gray-200",
+        "onUpdate:modelValue": o[0] || (o[0] = (m) => l.value = m),
+        type: "text",
+        disabled: e.disabled,
+        onInput: x,
+        onKeyup: o[1] || (o[1] = _((m) => r("press-enter"), ["enter"])),
+        onFocus: o[2] || (o[2] = (m) => a.value = !0),
+        onBlur: o[3] || (o[3] = (m) => a.value = !1)
+      }, null, 40, U), [
+        [V, l.value]
+      ])
+    ], 2));
+  }
+}), F = ["checked"], L = /* @__PURE__ */ v({
+  __name: "switch-checkbox",
+  props: {
+    modelValue: { type: Boolean },
+    invalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "change", "input"],
+  setup(e, { emit: u }) {
+    const l = i(e.modelValue);
+    return i(!1), $(l, (a) => {
+      u("update:modelValue", a);
+    }), (a, s) => (p(), f("div", {
+      class: "yu-relative yu-inline-block yu-w-10 yu-align-middle yu-select-none yu-transition yu-duration-200 yu-ease-in",
+      onClick: s[0] || (s[0] = (r) => l.value = !l.value)
+    }, [
+      t("input", {
+        class: "yu-absolute yu-block yu-w-6 yu-h-6 yu-bg-white yu-border-4 yu-rounded-full yu-appearance-none yu-cursor-pointer toggle-checkbox checked:yu-right-0 checked:yu-border-primary-500",
+        type: "checkbox",
+        checked: l.value
+      }, null, 8, F),
+      t("label", {
+        class: y(["yu-block yu-h-6 yu-overflow-hidden yu-bg-gray-300 yu-rounded-full yu-cursor-pointer yu-toggle-label", { "yu-bg-primary-500": l.value }]),
+        for: "toggle"
+      }, null, 2)
+    ]));
+  }
+}), j = /* @__PURE__ */ v({
+  __name: "button-primary",
+  props: {
+    large: {
+      type: Boolean,
+      default: !1
+    },
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    warning: {
+      type: Boolean,
+      default: !1
+    },
+    alert: {
+      type: Boolean,
+      default: !1
+    },
+    success: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (u, n) => (p(), f("button", {
+      class: y(["yu-bg-primary yu-px-5 yu-p-2 yu-w-fit yu-text-base yu-text-white yu-rounded-md yu-transition-all yu-font-plus yu-font-bold yu-truncate hover:yu-brightness-90 active:yu-scale-95", { "!yu-px-7 !yu-p-4": e.large, "!yu-px-3 !yu-p-1": e.small, "!yu-bg-red-500": e.warning, "!yu-bg-yellow-400": e.alert, "!yu-bg-green-400": e.success }])
+    }, [
+      g(u.$slots, "default")
+    ], 2));
+  }
+}), q = /* @__PURE__ */ v({
+  __name: "button-secondary",
+  props: {
+    large: {
+      type: Boolean,
+      default: !1
+    },
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    warning: {
+      type: Boolean,
+      default: !1
+    },
+    alert: {
+      type: Boolean,
+      default: !1
+    },
+    success: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (u, n) => (p(), f("button", {
+      class: y(["yu-text-primary yu-bg-primary yu-text-base yu-w-fit yu-px-5 yu-p-2 yu-rounded-md yu-transition-all yu-font-plus yu-font-bold yu-truncate !yu-bg-opacity-5 group hover:!yu-bg-opacity-10 active:yu-scale-95 active:!yu-bg-opacity-20", { "!yu-text-lg": e.large, "!yu-text-sm": e.small, "!yu-text-red-500 !yu-bg-red-500": e.warning, "!yu-text-yellow-400 !yu-bg-yellow-400": e.alert, "!yu-text-green-400 !yu-bg-green-400": e.success }])
+    }, [
+      g(u.$slots, "default")
+    ], 2));
+  }
+}), z = { class: "yu-transition yu-text-gray-900 yu-font-plus yu-text-sm yu-p-2 yu-font-semibold yu-rounded-md yu-cursor-pointer yu-flex yu-items-center active:yu-scale-95 hover:yu-bg-primary-500 hover:!yu-bg-opacity-10 hover:yu-text-primary-400" };
+function A(e, u) {
+  return p(), f("div", z, [
+    g(e.$slots, "default")
+  ]);
+}
+const B = (e, u) => {
+  const n = e.__vccOpts || e;
+  for (const [l, a] of u)
+    n[l] = a;
+  return n;
+};
+var O = {};
+const S = /* @__PURE__ */ B(O, [["render", A]]), G = { class: "yu-relative yu-w-full" }, H = { class: "yu-text-gray-700 yu-font-plus yu-font-medium yu-text-base yu-mr-2" }, J = { class: "yu-mt-2 yu-w-full yu-bg-white yu-rounded-md yu-flex yu-flex-col yu-gap-1 yu-shadow-md yu-absolute" }, Q = /* @__PURE__ */ v({
+  __name: "simple-dropdown",
+  props: {
+    label: {
+      type: String,
+      default: "Dropdown"
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  setup(e) {
+    const u = i(!1);
+    return (n, l) => (p(), f("div", null, [
+      t("div", G, [
+        t("button", {
+          class: y(["yu-ml-auto yu-bg-gray-700 yu-bg-opacity-0 yu-px-3 yu-p-2 yu-rounded-md yu-flex yu-gap-1 yu-transition hover:yu-bg-opacity-10 yu-group active:yu-bg-primary-500 active:!yu-bg-opacity-10 active:yu-scale-95", { "!yu-bg-primary-500 !yu-bg-opacity-10": u.value }]),
+          onClick: l[0] || (l[0] = (a) => u.value = !u.value)
+        }, [
+          b(t("i", {
+            class: y(["material-icons yu-text-gray-700 yu-h-fit", { "yu-text-primary-500": u.value }])
+          }, c(e.icon), 3), [
+            [h, e.icon]
+          ]),
+          t("div", H, c(e.label), 1),
+          t("i", {
+            class: y(["material-icons yu-text-gray-700 yu-h-fit yu-ml-auto", { "yu-text-primary-500 yu-rotate-180": u.value }])
+          }, " keyboard_arrow_down", 2)
+        ], 2),
+        b(t("div", J, [
+          t("div", {
+            class: "yu-w-full yu-rounded-md yu-p-2",
+            onClick: l[1] || (l[1] = (a) => u.value = !1)
+          }, [
+            g(n.$slots, "default")
+          ])
+        ], 512), [
+          [h, u.value]
+        ])
+      ])
+    ]));
+  }
+}), R = { class: "yu-w-fit" }, W = { class: "yu-text-gray-700 yu-font-plus yu-font-medium yu-text-base yu-mr-2" }, X = { class: "yu-mt-2 yu-w-full yu-bg-white yu-rounded-md yu-shadow-md" }, Y = { class: "yu-w-full yu-rounded-md yu-p-2 yu-flex yu-flex-col yu-gap-1" }, Z = /* @__PURE__ */ t("div", { class: "yu-text-gray-700 yu-text-xs" }, "Selecionar todos", -1), ee = /* @__PURE__ */ v({
+  __name: "select-dropdown",
+  props: {
+    label: {
+      type: String,
+      default: "Dropdown"
+    },
+    icon: {
+      type: String,
+      default: "input"
+    }
+  },
+  emits: ["select-all", "deselect-all"],
+  setup(e, { emit: u }) {
+    const n = i(!1), l = i(!1), a = () => {
+      if (l.value = !l.value, l.value) {
+        u("select-all");
+        return;
+      }
+      u("deselect-all");
+    };
+    return (s, r) => (p(), f("div", R, [
+      t("button", {
+        class: y(["yu-bg-gray-700 yu-bg-opacity-0 yu-px-3 yu-p-2 yu-rounded-md yu-flex yu-gap-1 yu-transition hover:yu-bg-opacity-10 yu-group active:yu-bg-primary-500 active:!yu-bg-opacity-10 active:yu-scale-95", { "!yu-bg-primary-500 !yu-bg-opacity-10": n.value }]),
+        onClick: r[0] || (r[0] = (x) => n.value = !n.value)
+      }, [
+        t("i", {
+          class: y(["material-icons yu-text-gray-700 yu-h-fit", { "yu-text-primary-500": n.value }])
+        }, c(e.icon), 3),
+        t("div", W, c(e.label), 1),
+        t("i", {
+          class: y(["material-icons yu-text-gray-700 yu-h-fit yu-ml-auto", { "yu-text-primary-500 yu-rotate-180": n.value }])
+        }, " keyboard_arrow_down", 2)
+      ], 2),
+      b(t("div", X, [
+        t("div", Y, [
+          w(k, { label: "Dropdown" }),
+          w(S, {
+            onClick: r[2] || (r[2] = (x) => a())
+          }, {
+            default: D(() => [
+              Z,
+              b(t("input", {
+                class: "yu-ml-auto yu-accent-primary-500 yu-border-2 yu-cursor-pointer",
+                type: "checkbox",
+                "onUpdate:modelValue": r[1] || (r[1] = (x) => l.value = x)
+              }, null, 512), [
+                [I, l.value]
+              ])
+            ]),
+            _: 1
+          }),
+          g(s.$slots, "default")
+        ])
+      ], 512), [
+        [h, n.value]
+      ])
+    ]));
+  }
+}), te = { class: "yu-border yu-border-gray-100 yu-rounded-md yu-py-4 yu-px-3 yu-bg-white yu-flex yu-flex-col yu-justify-center yu-shadow-2xl yu-shadow-gray-100" }, ue = { class: "yu-flex yu-gap-5 yu-px-2" }, le = { class: "yu-flex yu-flex-col" }, ne = { class: "yu-font-plus yu-flex yu-text-xl yu-text-gray-800 yu-font-bold yu-items-center" }, oe = { class: "yu-font-plus yu-text-xs yu-text-gray-400" }, ae = { class: "yu-font-plus yu-text-gray-400 yu-font-medium yu-text-sm" }, ye = /* @__PURE__ */ v({
+  __name: "stat-card",
+  props: {
+    icon: {
+      type: String,
+      default: "assignment"
+    },
+    bad: {
+      type: Boolean,
+      default: !1
+    },
+    good: {
+      type: Boolean,
+      default: !1
+    },
+    comparison: {
+      type: Number,
+      default: 0
+    },
+    total: {
+      type: Number,
+      default: 100
+    }
+  },
+  setup(e) {
+    return (u, n) => (p(), f("div", te, [
+      t("div", ue, [
+        t("i", {
+          class: y(["yu-aspect-square material-icons yu-bg-yellow-100 yu-text-yellow-500 yu-h-14 yu-w-14 yu-place-items-center yu-rounded-full !yu-text-1xl !yu-grid", { "!yu-text-red-500 !yu-bg-red-100": e.bad, "!yu-text-green-500 !yu-bg-green-100": e.good }])
+        }, c(e.icon), 3),
+        t("div", le, [
+          t("div", ne, [
+            T(c(e.comparison), 1),
+            t("span", oe, "/" + c(e.total), 1)
+          ]),
+          t("p", ae, [
+            g(u.$slots, "default")
+          ])
+        ])
+      ])
+    ]));
+  }
+}), se = { class: "yu-border yu-border-gray-100 yu-rounded-md yu-py-5 yu-px-5 yu-bg-white yu-shadow-md yu-shadow-gray-100" }, re = { class: "yu-font-plus yu-text-gray-800 yu-font-semibold yu-text-lg" }, ie = { class: "yu-mt-2 yu-flex yu-flex-col" };
+function de(e, u) {
+  return p(), f("div", se, [
+    t("div", re, [
+      g(e.$slots, "heading")
+    ]),
+    t("div", ie, [
+      g(e.$slots, "list")
+    ])
+  ]);
+}
+var ce = {};
+const pe = /* @__PURE__ */ B(ce, [["render", de]]);
+const me = {
+  install: (e) => {
+    e.component("TextInput", k), e.component("IconTextInput", M), e.component("SwitchCheckbox", L), e.component("ButtonPrimary", j), e.component("ButtonSecondary", q), e.component("SimpleDropdown", Q), e.component("SelectDropdown", ee), e.component("SimpleDropdownItem", S), e.component("StatCard", ye), e.component("ListCard", pe);
+  }
+};
+export {
+  j as ButtonPrimary,
+  q as ButtonSecondary,
+  M as IconTextInput,
+  pe as ListCard,
+  ee as SelectDropdown,
+  Q as SimpleDropdown,
+  S as SimpleDropdownItem,
+  ye as StatCard,
+  L as SwitchCheckbox,
+  k as TextInput,
+  me as default
+};