@code-coaching/vuetiful 0.13.2 → 0.14.0

package/dist/vuetiful.es.mjs

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, renderSlot, normalizeClass, defineComponent, createBlock, resolveDynamicComponent, withCtx, Fragment, cloneVNode, h as h$1, watchEffect, computed, ref, provide, onMounted, onUnmounted, unref, inject, toRaw, watch, createElementVNode, reactive, readonly, toRefs, createVNode, Transition, createCommentVNode, useAttrs, mergeProps, toDisplayString, withDirectives, createTextVNode, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
+import { openBlock, createElementBlock, renderSlot, normalizeClass, defineComponent, createBlock, resolveDynamicComponent, withCtx, Fragment, cloneVNode, h as h$1, onMounted, watchEffect, ref, computed, provide, onUnmounted, unref, inject, toRaw, watch, createElementVNode, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, useAttrs, mergeProps, toDisplayString, withDirectives, createTextVNode, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -6,17 +6,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$d = {};
-const _hoisted_1$7 = {
+const _sfc_main$h = {};
+const _hoisted_1$8 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$3]]);
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$3]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -66,16 +66,16 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = {};
-const _hoisted_1$6 = {
+const _sfc_main$f = {};
+const _hoisted_1$7 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+  return openBlock(), createElementBlock("div", _hoisted_1$7, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$2]]);
 function u(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -84,7 +84,7 @@ function u(r2, n2, ...a2) {
   let t2 = new Error(`Tried to handle "${r2}" but there is no handler defined. Only defined handlers are: ${Object.keys(n2).map((e2) => `"${e2}"`).join(", ")}.`);
   throw Error.captureStackTrace && Error.captureStackTrace(t2, u), t2;
 }
-var N$1 = ((o2) => (o2[o2.None = 0] = "None", o2[o2.RenderStrategy = 1] = "RenderStrategy", o2[o2.Static = 2] = "Static", o2))(N$1 || {}), S = ((e2) => (e2[e2.Unmount = 0] = "Unmount", e2[e2.Hidden = 1] = "Hidden", e2))(S || {});
+var N$1 = ((o2) => (o2[o2.None = 0] = "None", o2[o2.RenderStrategy = 1] = "RenderStrategy", o2[o2.Static = 2] = "Static", o2))(N$1 || {}), S$1 = ((e2) => (e2[e2.Unmount = 0] = "Unmount", e2[e2.Hidden = 1] = "Hidden", e2))(S$1 || {});
 function H$2({ visible: r2 = true, features: t2 = 0, ourProps: e2, theirProps: o2, ...i2 }) {
   var a2;
   let n2 = j$1(o2, e2), l = Object.assign(i2, { props: n2 });
@@ -110,7 +110,7 @@ function y$1({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
     u2 && (d2["data-headlessui-state"] = c2.join(" "));
   }
   if (n2 === "template") {
-    if (a2 = b$1(a2 != null ? a2 : []), Object.keys(l).length > 0 || Object.keys(t2).length > 0) {
+    if (a2 = b$2(a2 != null ? a2 : []), Object.keys(l).length > 0 || Object.keys(t2).length > 0) {
       let [u2, ...c2] = a2 != null ? a2 : [];
       if (!v(u2) || c2.length > 0)
         throw new Error(['Passing props on "template"!', "", `The current component <${i2} /> is rendering a "template".`, "However we need to passthrough the following props:", Object.keys(l).concat(Object.keys(t2)).map((s2) => s2.trim()).filter((s2, g, R) => R.indexOf(s2) === g).sort((s2, g) => s2.localeCompare(g)).map((s2) => `  - ${s2}`).join(`
@@ -126,8 +126,8 @@ function y$1({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
   }
   return h$1(n2, Object.assign({}, l, d2), { default: () => a2 });
 }
-function b$1(r2) {
-  return r2.flatMap((t2) => t2.type === Fragment ? b$1(t2.children) : [t2]);
+function b$2(r2) {
+  return r2.flatMap((t2) => t2.type === Fragment ? b$2(t2.children) : [t2]);
 }
 function j$1(...r2) {
   if (r2.length === 0)
@@ -178,6 +178,22 @@ function o(n2) {
   var l;
   return n2 == null || n2.value == null ? null : (l = n2.value.$el) != null ? l : n2.value;
 }
+function r$1(t2, e2) {
+  if (t2)
+    return t2;
+  let n2 = e2 != null ? e2 : "button";
+  if (typeof n2 == "string" && n2.toLowerCase() === "button")
+    return "button";
+}
+function b$1(t2, e2) {
+  let n2 = ref(r$1(t2.value.type, t2.value.as));
+  return onMounted(() => {
+    n2.value = r$1(t2.value.type, t2.value.as);
+  }), watchEffect(() => {
+    var o$12;
+    n2.value || o(e2) && o(e2) instanceof HTMLButtonElement && !((o$12 = o(e2)) != null && o$12.hasAttribute("type")) && (n2.value = "button");
+  }), n2;
+}
 var i = Object.defineProperty;
 var d$3 = (t2, e2, r2) => e2 in t2 ? i(t2, e2, { enumerable: true, configurable: true, writable: true, value: r2 }) : t2[e2] = r2;
 var n = (t2, e2, r2) => (d$3(t2, typeof e2 != "symbol" ? e2 + "" : e2, r2), r2);
@@ -507,7 +523,52 @@ let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Objec
     return H$2({ ourProps: K2, theirProps: G, slot: N2, attrs: c2, slots: u2, name: "RadioGroupOption" });
   };
 } }), we = T, Se = E;
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", props: { as: { type: [Object, String], default: "template" } }, setup(l, { slots: p2, attrs: a2 }) {
+  let o2 = ref(null), f2 = K({ name: "SwitchLabel", props: { htmlFor: computed(() => {
+    var r2;
+    return (r2 = o2.value) == null ? void 0 : r2.id;
+  }), onClick(r2) {
+    o2.value && (r2.currentTarget.tagName === "LABEL" && r2.preventDefault(), o2.value.click(), o2.value.focus({ preventScroll: true }));
+  } } }), t2 = M({ name: "SwitchDescription" });
+  return provide(S, { switchRef: o2, labelledby: f2, describedby: t2 }), () => H$2({ theirProps: l, ourProps: {}, slot: {}, slots: p2, attrs: a2, name: "SwitchGroup" });
+} }), ue = defineComponent({ name: "Switch", emits: { "update:modelValue": (l) => true }, props: { as: { type: [Object, String], default: "button" }, modelValue: { type: Boolean, default: void 0 }, defaultChecked: { type: Boolean, optional: true }, form: { type: String, optional: true }, name: { type: String, optional: true }, value: { type: String, optional: true }, id: { type: String, default: () => `headlessui-switch-${t()}` } }, inheritAttrs: false, setup(l, { emit: p2, attrs: a2, slots: o$2, expose: f2 }) {
+  let t2 = inject(S, null), [i2, r2] = d$2(computed(() => l.modelValue), (e2) => p2("update:modelValue", e2), computed(() => l.defaultChecked));
+  function s2() {
+    r2(!i2.value);
+  }
+  let w = ref(null), u2 = t2 === null ? w : t2.switchRef, g = b$1(computed(() => ({ as: l.as, type: a2.type })), u2);
+  f2({ el: u2, $el: u2 });
+  function k(e2) {
+    e2.preventDefault(), s2();
+  }
+  function C(e2) {
+    e2.key === o$1.Space ? (e2.preventDefault(), s2()) : e2.key === o$1.Enter && p$1(e2.currentTarget);
+  }
+  function E2(e2) {
+    e2.preventDefault();
+  }
+  let c2 = computed(() => {
+    var e2, n2;
+    return (n2 = (e2 = o(u2)) == null ? void 0 : e2.closest) == null ? void 0 : n2.call(e2, "form");
+  });
+  return onMounted(() => {
+    watch([c2], () => {
+      if (!c2.value || l.defaultChecked === void 0)
+        return;
+      function e2() {
+        r2(l.defaultChecked);
+      }
+      return c2.value.addEventListener("reset", e2), () => {
+        var n2;
+        (n2 = c2.value) == null || n2.removeEventListener("reset", e2);
+      };
+    }, { immediate: true });
+  }), () => {
+    let { id: e2, name: n2, value: L, form: D, ...R } = l, K2 = { checked: i2.value }, x = { id: e2, ref: u2, role: "switch", type: g.value, tabIndex: 0, "aria-checked": i2.value, "aria-labelledby": t2 == null ? void 0 : t2.labelledby.value, "aria-describedby": t2 == null ? void 0 : t2.describedby.value, onClick: k, onKeyup: C, onKeypress: E2 };
+    return h$1(Fragment, [n2 != null && i2.value != null ? h$1(f$1, K$1({ features: a$1.Hidden, as: "input", type: "checkbox", hidden: true, readOnly: true, checked: i2.value, form: D, name: n2, value: L })) : null, H$2({ ourProps: x, theirProps: { ...a2, ...T$2(R, ["modelValue", "defaultChecked"]) }, slot: K2, attrs: a2, slots: o$2, name: "Switch" })]);
+  };
+} }), de = T, ce = E;
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -526,7 +587,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -594,7 +655,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -619,7 +680,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -638,6 +699,163 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$6 = {
+  key: 0,
+  class: "sr-only"
+};
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "VSwitch",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    switchClass: {
+      type: String,
+      default: "variant-filled"
+    },
+    thumbClass: {
+      type: String,
+      default: "bg-surface-100-800-token"
+    },
+    as: {
+      type: String,
+      default: "button"
+    },
+    name: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const parentModelValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        parentModelValue.value = newValue;
+      }
+    );
+    watch(
+      () => parentModelValue.value,
+      (newValue) => {
+        emit("update:modelValue", newValue);
+      }
+    );
+    const trackSize = computed(() => {
+      switch (props.size) {
+        case "xs":
+          return "w-8 h-4";
+        case "sm":
+          return "w-12 h-6";
+        case "md":
+          return "w-16 h-8";
+        case "lg":
+          return "w-20 h-10";
+        case "xl":
+          return "w-24 h-12";
+        default:
+          return props.size;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ue), {
+        class: normalizeClass(`slide-toggle rounded-container-token ${__props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`),
+        name: __props.name,
+        as: __props.as,
+        modelValue: parentModelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
+      }, {
+        default: withCtx(({ checked }) => [
+          createElementVNode("button", {
+            class: normalizeClass(`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${unref(trackSize)} ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${__props.switchClass}`)
+          }, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$6, [
+              renderSlot(_ctx.$slots, "default")
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(`slide-toggle-thumb h-full w-[50%] scale-[0.8] shadow transition-all duration-[150ms] rounded-token ${checked ? "translate-x-full" : "opacity-90"} ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${__props.thumbClass} bg-opacity-90`)
+            }, null, 2)
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["class", "name", "as", "modelValue"]);
+    };
+  }
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "VSwitchDescription",
+  props: {
+    as: {
+      type: String,
+      default: "p"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ce), { as: __props.as }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as"]);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "VSwitchGroup",
+  props: {
+    as: {
+      type: String,
+      default: "template"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ae), { as: __props.as }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as"]);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "VSwitchLabel",
+  props: {
+    as: {
+      type: String,
+      default: "p"
+    },
+    passive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(de), {
+        as: __props.as,
+        passive: __props.passive
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as", "passive"]);
+    };
+  }
+});
 const selectedRailTile = ref("");
 const useRail = () => {
   return {
@@ -958,13 +1176,17 @@ const _sfc_main$3 = defineComponent({
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VButton: _sfc_main$c,
+  VButton: _sfc_main$g,
   VBadge,
   VChip,
-  VRadioGroup: _sfc_main$9,
-  VRadioItem: _sfc_main$8,
-  VRadioLabel: _sfc_main$7,
-  VRadioDescription: _sfc_main$a,
+  VRadioGroup: _sfc_main$d,
+  VRadioItem: _sfc_main$c,
+  VRadioLabel: _sfc_main$b,
+  VRadioDescription: _sfc_main$e,
+  VSwitchGroup: _sfc_main$8,
+  VSwitchLabel: _sfc_main$7,
+  VSwitchDescription: _sfc_main$9,
+  VSwitch: _sfc_main$a,
   VRail: _sfc_main$5,
   VRailTile: _sfc_main$4,
   VShell: _sfc_main$3,
@@ -47614,7 +47836,7 @@ var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main = defineComponent({
   components: {
     DarkModeSwitch,
-    VButton: _sfc_main$c
+    VButton: _sfc_main$g
   },
   props: {
     bgLight: {
@@ -47857,4 +48079,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { DarkModeSwitch, themeSwitcher as ThemeSwitcher, VBadge, _sfc_main$c as VButton, VChip, _sfc_main$2 as VCodeBlock, _sfc_main$6 as VDrawer, _sfc_main$a as VRadioDescription, _sfc_main$9 as VRadioGroup, _sfc_main$8 as VRadioItem, _sfc_main$7 as VRadioLabel, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };
+export { DarkModeSwitch, themeSwitcher as ThemeSwitcher, VBadge, _sfc_main$g as VButton, VChip, _sfc_main$2 as VCodeBlock, _sfc_main$6 as VDrawer, _sfc_main$e as VRadioDescription, _sfc_main$d as VRadioGroup, _sfc_main$c as VRadioItem, _sfc_main$b as VRadioLabel, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, _sfc_main$a as VSwitch, _sfc_main$9 as VSwitchDescription, _sfc_main$8 as VSwitchGroup, _sfc_main$7 as VSwitchLabel, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };