@kiva/kv-components 10.2.1 → 10.3.0

package/dist/vue/KvSwitch.js

@@ -1,17 +1,17 @@
-import s from "./KvSwitch2.js";
-import { openBlock as w, createElementBlock as a, normalizeStyle as d, normalizeClass as r, createElementVNode as i, mergeProps as c, toHandlers as f, withModifiers as u, renderSlot as h } from "vue";
+import n from "./KvSwitch2.js";
+import { openBlock as a, createElementBlock as c, normalizeStyle as d, normalizeClass as i, createElementVNode as t, mergeProps as w, toHandlers as f, withModifiers as u, renderSlot as h } from "vue";
 import m from "../_virtual/_plugin-vue_export-helper.js";
-const b = ["for"], v = ["id", "checked", "disabled"], p = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
-function g(o, t, l, e, k, x) {
-  return w(), a("div", {
-    class: r(e.classes),
+const b = ["for"], v = ["id", "checked", "disabled"], g = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function _(r, o, l, e, p, k) {
+  return a(), c("div", {
+    class: i(e.classes),
     style: d(e.styles)
   }, [
-    i("label", {
-      class: r(["tw-inline-flex tw-gap-2 tw-items-center tw-relative hover:tw-cursor-pointer", { "tw-opacity-low": l.disabled }]),
+    t("label", {
+      class: i(["tw-inline-flex tw-gap-2 tw-items-center tw-relative hover:tw-cursor-pointer", { "tw-opacity-low": l.disabled }]),
       for: e.uuid
     }, [
-      i("input", c({ id: e.uuid }, e.inputAttrs, {
+      t("input", w({ id: e.uuid }, e.inputAttrs, {
         ref: "switchRef",
         class: "tw-sr-only tw-peer",
         type: "checkbox",
@@ -19,17 +19,21 @@ function g(o, t, l, e, k, x) {
         checked: l.modelValue,
         disabled: l.disabled
       }, f(e.inputListeners, !0), {
-        onChange: t[0] || (t[0] = u((...n) => e.onChange && e.onChange(...n), ["prevent"]))
+        onChange: o[0] || (o[0] = u((...s) => e.onChange && e.onChange(...s), ["prevent"]))
       }), null, 16, v),
-      t[1] || (t[1] = i("div", { class: "tw-w-7 tw-h-4 tw-rounded-full tw-relative tw-overflow-hidden peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action tw-bg-tertiary peer-checked:tw-bg-action tw-transition-all tw-ease-in-out" }, null, -1)),
-      t[2] || (t[2] = i("div", { class: "tw-flex-shrink-0 tw-w-3 tw-h-3 tw-absolute tw-m-0.5 tw-top-0 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out peer-checked:tw-translate-x-3" }, null, -1)),
-      i("div", p, [
-        h(o.$slots, "default")
+      t("div", {
+        class: i(["tw-rounded-full tw-relative tw-overflow-hidden peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action tw-bg-tertiary peer-checked:tw-bg-action tw-transition-all tw-ease-in-out", e.trackSizeClasses])
+      }, null, 2),
+      t("div", {
+        class: i(["tw-flex-shrink-0 tw-absolute tw-m-0.5 tw-top-0 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out", e.knobSizeClasses])
+      }, null, 2),
+      t("div", g, [
+        h(r.$slots, "default")
       ])
     ], 10, b)
   ], 6);
 }
-const S = /* @__PURE__ */ m(s, [["render", g]]);
+const S = /* @__PURE__ */ m(n, [["render", _]]);
 export {
   S as default
 };

package/dist/vue/KvSwitch.vue.d.ts

@@ -7,6 +7,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
 }>, {
     uuid: import('vue').Ref<string, string>;
     onChange: (event: any) => void;
@@ -16,6 +21,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     styles: any[];
     inputAttrs: any;
     inputListeners: any;
+    trackSizeClasses: import('vue').ComputedRef<"tw-w-6 tw-h-3.5" | "tw-w-7 tw-h-4">;
+    knobSizeClasses: import('vue').ComputedRef<"tw-w-2.5 tw-h-2.5 peer-checked:tw-translate-x-2.5" | "tw-w-3 tw-h-3 peer-checked:tw-translate-x-3">;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, string[], string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
@@ -25,10 +32,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
 }>> & Readonly<{
     [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
 }>, {
     disabled: boolean;
+    size: string;
     modelValue: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/KvSwitch2.js

@@ -1,7 +1,7 @@
-import { ref as o, onMounted as v } from "vue";
-import { nanoid as l } from "nanoid";
+import { ref as a, computed as o, onMounted as z } from "vue";
+import { nanoid as u } from "nanoid";
 import { useAttrs as V } from "../utils/attrs.js";
-const u = [
+const n = [
   "update:modelValue"
 ], A = {
   inheritAttrs: !1,
@@ -24,33 +24,49 @@ const u = [
     disabled: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Size of the switch.
+     * `default` renders a 56x32px track (`tw-w-7 tw-h-4`) with a 24px
+     * knob (`tw-w-3 tw-h-3`) travelling 24px when checked.
+     * `small` renders a 48x28px track (`tw-w-6 tw-h-3.5`) with a 20px
+     * knob (`tw-w-2.5 tw-h-2.5`) travelling 20px when checked.
+     */
+    size: {
+      type: String,
+      default: "default",
+      validator(e) {
+        return ["default", "small"].includes(e);
+      }
     }
   },
-  emits: u,
-  setup(h, e) {
-    const { emit: a } = e, t = o(`kvs-${l(10)}`), s = o(null), {
-      classes: n,
-      styles: r,
-      inputAttrs: d,
-      inputListeners: p
-    } = V(e, u), c = (f) => {
-      a("update:modelValue", f.target.checked);
-    }, i = () => {
-      s.value.focus();
-    }, m = () => {
-      s.value.blur();
+  emits: n,
+  setup(e, t) {
+    const { emit: r } = t, s = a(`kvs-${u(10)}`), l = a(null), {
+      classes: d,
+      styles: c,
+      inputAttrs: i,
+      inputListeners: m
+    } = V(t, n), p = o(() => e.size === "small" ? "tw-w-6 tw-h-3.5" : "tw-w-7 tw-h-4"), f = o(() => e.size === "small" ? "tw-w-2.5 tw-h-2.5 peer-checked:tw-translate-x-2.5" : "tw-w-3 tw-h-3 peer-checked:tw-translate-x-3"), w = (v) => {
+      r("update:modelValue", v.target.checked);
+    }, h = () => {
+      l.value.focus();
+    }, k = () => {
+      l.value.blur();
     };
-    return v(() => {
-      t.value = `kvs-${l(10)}`;
+    return z(() => {
+      s.value = `kvs-${u(10)}`;
     }), {
-      uuid: t,
-      onChange: c,
-      focus: i,
-      blur: m,
-      classes: n,
-      styles: r,
-      inputAttrs: d,
-      inputListeners: p
+      uuid: s,
+      onChange: w,
+      focus: h,
+      blur: k,
+      classes: d,
+      styles: c,
+      inputAttrs: i,
+      inputListeners: m,
+      trackSizeClasses: p,
+      knobSizeClasses: f
     };
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.2.1",
+  "version": "10.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -112,5 +112,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "81ac7dc6b38cd9d9b53334c5ce40b49094524218"
+  "gitHead": "85947c6f6991c7ef893d142a4aac78afe3017d06"
 }