adverich-kun-ui 0.1.37 → 0.1.38

package/dist/components/KunSwitch/src/components/KunSwitch.vue.js

@@ -0,0 +1,157 @@
+import { computed as b, createElementBlock as o, openBlock as n, normalizeClass as r, createCommentVNode as d, createElementVNode as c, toDisplayString as h, withKeys as m, withModifiers as f, renderSlot as u, mergeProps as w } from "vue";
+const k = {
+  key: 0,
+  class: "flex flex-col items-center gap-1 cursor-pointer"
+}, C = {
+  key: 0,
+  class: "text-sm text-gray-900"
+}, S = ["aria-checked", "aria-disabled", "onKeydown"], V = {
+  key: 1,
+  class: "text-sm text-gray-900"
+}, B = ["aria-checked", "aria-disabled", "onKeydown"], P = {
+  key: 0,
+  class: "text-sm text-gray-900"
+}, z = {
+  __name: "KunSwitch",
+  props: {
+    modelValue: { type: [Boolean, String, Number], default: !1 },
+    trueValue: { type: [Boolean, String, Number], default: !0 },
+    falseValue: { type: [Boolean, String, Number], default: !1 },
+    label: String,
+    labelPosition: { type: String, default: "right" },
+    // 'top', 'bottom', 'left', 'right'
+    disabled: Boolean,
+    onColor: { type: String, default: "bg-green-600" },
+    offColor: { type: String, default: "bg-gray-300" },
+    iconColor: { type: String, default: "bg-white" },
+    inset: Boolean,
+    hideDetails: { type: Boolean, default: !1 },
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"].includes(e)
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: v }) {
+    const l = e, y = v, t = b(() => l.modelValue === l.trueValue), s = () => {
+      l.disabled || y(
+        "update:modelValue",
+        t.value ? l.falseValue : l.trueValue
+      );
+    }, g = b(
+      () => l.labelPosition === "top" || l.labelPosition === "bottom"
+    ), x = {
+      xxs: {
+        outer: "w-6 h-3",
+        thumb: "w-3 h-3",
+        icon: "text-[10px]",
+        translate: "translate-x-3"
+      },
+      xs: {
+        outer: "w-8 h-4",
+        thumb: "w-4 h-4",
+        icon: "text-xs",
+        translate: "translate-x-4"
+      },
+      sm: {
+        outer: "w-9 h-5",
+        thumb: "w-4 h-4",
+        icon: "text-sm",
+        translate: "translate-x-4.5"
+      },
+      md: {
+        outer: "w-10 h-6",
+        thumb: "w-6 h-6",
+        icon: "text-base",
+        translate: "translate-x-4.25"
+      },
+      lg: {
+        outer: "w-12 h-7",
+        thumb: "w-7 h-7",
+        icon: "text-lg",
+        translate: "translate-x-5"
+      },
+      xl: {
+        outer: "w-14 h-8",
+        thumb: "w-8 h-8",
+        icon: "text-xl",
+        translate: "translate-x-6"
+      },
+      xxl: {
+        outer: "w-16 h-9",
+        thumb: "w-9 h-9",
+        icon: "text-2xl",
+        translate: "translate-x-7"
+      }
+    }, a = b(() => x[l.size] || x.md);
+    return (i, K) => (n(), o("div", {
+      class: r(["select-none", { "opacity-50 cursor-not-allowed": e.disabled, "pl-6": e.inset }])
+    }, [
+      g.value ? (n(), o("label", k, [
+        e.label && e.labelPosition === "top" ? (n(), o("span", C, h(e.label), 1)) : d("", !0),
+        c("div", {
+          class: r(["relative rounded-full transition-colors duration-200 cursor-pointer", [a.value.outer, t.value ? e.onColor : e.offColor]]),
+          role: "switch",
+          "aria-checked": t.value,
+          "aria-disabled": e.disabled,
+          tabindex: "0",
+          onClick: s,
+          onKeydown: [
+            m(f(s, ["prevent"]), ["space"]),
+            m(f(s, ["prevent"]), ["enter"])
+          ]
+        }, [
+          c("div", {
+            class: r(["absolute top-0 left-0 rounded-full shadow-md transform transition-transform duration-200 flex items-center justify-center", [
+              e.iconColor,
+              a.value.thumb,
+              a.value.icon,
+              t.value ? a.value.translate : "translate-x-0"
+            ]])
+          }, [
+            t.value ? u(i.$slots, "on-icon", { key: 0 }) : u(i.$slots, "off-icon", { key: 1 })
+          ], 2)
+        ], 42, S),
+        e.label && e.labelPosition === "bottom" ? (n(), o("span", V, h(e.label), 1)) : d("", !0)
+      ])) : (n(), o("label", {
+        key: 1,
+        class: r(["flex items-center gap-3 cursor-pointer", { "flex-row-reverse": e.labelPosition === "left" }])
+      }, [
+        c("div", {
+          class: r(["relative rounded-full transition-colors duration-200", [a.value.outer, t.value ? e.onColor : e.offColor]]),
+          role: "switch",
+          "aria-checked": t.value,
+          "aria-disabled": e.disabled,
+          tabindex: "0",
+          onClick: s,
+          onKeydown: [
+            m(f(s, ["prevent"]), ["space"]),
+            m(f(s, ["prevent"]), ["enter"])
+          ]
+        }, [
+          c("div", {
+            class: r(["absolute top-0 left-0 rounded-full shadow-md transform transition-transform duration-200 flex items-center justify-center", [
+              e.iconColor,
+              a.value.thumb,
+              a.value.icon,
+              t.value ? a.value.translate : "translate-x-0"
+            ]])
+          }, [
+            t.value ? u(i.$slots, "on-icon", { key: 0 }) : u(i.$slots, "off-icon", { key: 1 })
+          ], 2)
+        ], 42, B),
+        e.label ? (n(), o("div", P, h(e.label), 1)) : d("", !0)
+      ], 2)),
+      e.hideDetails ? d("", !0) : (n(), o("div", w({
+        key: 2,
+        class: "text-xs text-gray-500 mt-1 ml-14"
+      }, i.$attrs), [
+        u(i.$slots, "details")
+      ], 16))
+    ], 2));
+  }
+};
+export {
+  z as default
+};

package/dist/index.js

@@ -2,8 +2,8 @@
 import m from "./components/KunAlert/src/components/KunAlert.vue.js";
 import t from "./components/KunAppbar/src/components/KunAppbar.vue.js";
 import i from "./components/KunAppbarTitle/src/components/KunAppbarTitle.vue.js";
-import p from "./components/KunAutocomplete/src/components/KunAutocomplete.vue.js";
-import a from "./components/KunBtn/src/components/KunBtn.vue.js";
+import a from "./components/KunAutocomplete/src/components/KunAutocomplete.vue.js";
+import p from "./components/KunBtn/src/components/KunBtn.vue.js";
 import u from "./components/KunBudge/src/components/KunBudge.vue.js";
 import f from "./components/KunCard/src/components/KunCard.vue.js";
 import K from "./components/KunCardText/src/components/KunCardText.vue.js";
@@ -11,14 +11,15 @@ import s from "./components/KunCurrency/src/components/KunCurrency.vue.js";
 import c from "./components/KunIcon/src/components/KunIcon.vue.js";
 import e from "./components/KunList/src/components/KunList.vue.js";
 import _ from "./components/KunSpacer/src/components/KunSpacer.vue.js";
-import l from "./components/KunTextField/src/components/KunTextField.vue.js";
+import l from "./components/KunSwitch/src/components/KunSwitch.vue.js";
+import $ from "./components/KunTextField/src/components/KunTextField.vue.js";
 import A from "./components/KunToolbar/src/components/KunToolbar.vue.js";
 const o = {
   KunAlert: m,
   KunAppbar: t,
   KunAppbarTitle: i,
-  KunAutocomplete: p,
-  KunBtn: a,
+  KunAutocomplete: a,
+  KunBtn: p,
   KunBudge: u,
   KunCard: f,
   KunCardText: K,
@@ -26,10 +27,11 @@ const o = {
   KunIcon: c,
   KunList: e,
   KunSpacer: _,
-  KunTextField: l,
+  KunSwitch: l,
+  KunTextField: $,
   KunToolbar: A
 };
-function k(r) {
+function q(r) {
   for (const n in o)
     r.component(n, o[n]);
 }
@@ -37,8 +39,8 @@ export {
   m as KunAlert,
   t as KunAppbar,
   i as KunAppbarTitle,
-  p as KunAutocomplete,
-  a as KunBtn,
+  a as KunAutocomplete,
+  p as KunBtn,
   u as KunBudge,
   f as KunCard,
   K as KunCardText,
@@ -46,7 +48,8 @@ export {
   c as KunIcon,
   e as KunList,
   _ as KunSpacer,
-  l as KunTextField,
+  l as KunSwitch,
+  $ as KunTextField,
   A as KunToolbar,
-  k as install
+  q as install
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",