@code-coaching/vuetiful 0.21.4 → 0.22.0

package/dist/types/components/atoms/VRadio/VRadioGroup.vue.d.ts

@@ -27,6 +27,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
         type: StringConstructor;
@@ -56,6 +60,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -66,5 +74,6 @@ declare const _default: import("vue").DefineComponent<{
     hover: string;
     background: string;
     text: string;
+    unstyled: boolean;
 }>;
 export default _default;

package/dist/types/components/atoms/VRadio/VRadioItem.vue.d.ts

@@ -3,10 +3,20 @@ declare const _default: import("vue").DefineComponent<{
         type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor)[];
         required: true;
     };
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor)[];
         required: true;
     };
-}>>, {}>;
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    unstyled: boolean;
+}>;
 export default _default;

package/dist/types/components/molecules/VRail.vue.d.ts

@@ -8,18 +8,6 @@ declare const _default: import("vue").DefineComponent<{
         type: () => CssClasses;
         default: string;
     };
-    regionLead: {
-        type: () => CssClasses;
-        default: string;
-    };
-    regionDefault: {
-        type: () => CssClasses;
-        default: string;
-    };
-    regionTrail: {
-        type: () => CssClasses;
-        default: string;
-    };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
         type: () => CssClasses;
@@ -29,23 +17,8 @@ declare const _default: import("vue").DefineComponent<{
         type: () => CssClasses;
         default: string;
     };
-    regionLead: {
-        type: () => CssClasses;
-        default: string;
-    };
-    regionDefault: {
-        type: () => CssClasses;
-        default: string;
-    };
-    regionTrail: {
-        type: () => CssClasses;
-        default: string;
-    };
 }>>, {
     active: string;
     hover: string;
-    regionLead: string;
-    regionDefault: string;
-    regionTrail: string;
 }>;
 export default _default;

package/dist/types/components/molecules/VRailTile.vue.d.ts

@@ -4,10 +4,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tag: {
-        type: () => string;
-        default: string;
-    };
     label: {
         type: () => string;
         default: string;
@@ -20,17 +16,11 @@ declare const _default: import("vue").DefineComponent<{
         type: () => CssClasses;
         default: string;
     };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: StringConstructor;
         default: string;
     };
-    tag: {
-        type: () => string;
-        default: string;
-    };
     label: {
         type: () => string;
         default: string;
@@ -43,10 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         type: () => CssClasses;
         default: string;
     };
-}>> & {
-    onClick?: (() => any) | undefined;
-}, {
-    tag: string;
+}>>, {
     value: string;
     label: string;
     regionIcon: string;

package/dist/vuetiful.es.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, renderList, pushScopeId, popScopeId, mergeProps, vShow, resolveComponent } from "vue";
-const _hoisted_1$i = ["src", "alt"];
+import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, renderList, pushScopeId, popScopeId, isRef, vShow, resolveComponent } from "vue";
+const _hoisted_1$h = ["src", "alt"];
 const _hoisted_2$9 = {
   key: 1,
   class: "avatar-initials h-full w-full",
@@ -39,7 +39,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$i)) : (openBlock(), createElementBlock("svg", _hoisted_2$9, [
+        }, null, 40, _hoisted_1$h)) : (openBlock(), createElementBlock("svg", _hoisted_2$9, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -62,11 +62,11 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$x = {};
-const _hoisted_1$h = {
+const _hoisted_1$g = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
 function _sfc_render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$h, [
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -122,11 +122,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main$v = {};
-const _hoisted_1$g = {
+const _hoisted_1$f = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [
+  return openBlock(), createElementBlock("div", _hoisted_1$f, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -46471,7 +46471,7 @@ const useHighlight = () => {
   };
 };
 var githubDark = "";
-const _hoisted_1$f = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
+const _hoisted_1$e = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
 const _hoisted_2$8 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
@@ -46534,7 +46534,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       emit("copy");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("header", {
           class: normalizeClass(`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${__props.headerClass}`)
         }, [
@@ -46654,7 +46654,7 @@ const _sfc_main$t = defineComponent({
     };
   }
 });
-const _hoisted_1$e = ["aria-checked", "title"];
+const _hoisted_1$d = ["aria-checked", "title"];
 const _hoisted_2$7 = ["d"];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
@@ -46683,7 +46683,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, _hoisted_2$7)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$e);
+  ], 42, _hoisted_1$d);
 }
 var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$2]]);
 function u$2(r2, n2, ...a2) {
@@ -47836,7 +47836,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     },
     hover: {
       type: String,
-      default: "hover:variant-ghost"
+      default: "hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50"
     },
     background: {
       type: String,
@@ -47845,6 +47845,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     text: {
       type: String,
       default: "text-surface-900 dark:text-surface-50"
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -47871,7 +47875,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         as: __props.as,
         disabled: __props.disabled,
         by: __props.by,
-        class: normalizeClass(`radio-group inline-flex gap-1 p-1 ${__props.background} ${__props.text} border-token border-surface-400-500-token rounded-container-token`),
+        class: normalizeClass(`${__props.unstyled ? "" : `radio-group ${__props.background} ${__props.text} inline-flex gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`}`),
         modelValue: parentModelValue.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
@@ -47889,6 +47893,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     value: {
       type: [String, Number, Boolean, Object],
       required: true
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
@@ -47899,7 +47907,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         default: withCtx(({ checked, disabled }) => [
           createElementVNode("div", {
             "data-test": "radio-item",
-            class: normalizeClass(`radio-item px-4 py-1 text-center text-base rounded-token ${checked ? unref(active) : unref(hover)} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`)
+            class: normalizeClass(`radio-item ${__props.unstyled ? "" : `px-4 py-1 text-center text-base rounded-token ${checked ? unref(active) : unref(hover)} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}`)
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2)
@@ -47928,7 +47936,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$c = {
   key: 0,
   class: "sr-only"
 };
@@ -48008,7 +48016,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             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$d, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$c, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -48206,7 +48214,7 @@ const useDarkMode = () => {
     MODE
   };
 };
-const _hoisted_1$c = ["aria-labelledby", "aria-describedby"];
+const _hoisted_1$b = ["aria-labelledby", "aria-describedby"];
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
@@ -48271,7 +48279,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$c)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$b)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -48296,7 +48304,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _withScopeId$3 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$b = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
+const _hoisted_1$a = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
 const _hoisted_2$6 = { class: "flex items-center gap-2" };
 const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
@@ -48403,7 +48411,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("header", {
           class: normalizeClass(`vuetiful-previewer-header flex items-center justify-between gap-4 p-4 bg-surface-200-700-token ${__props.regionHeader}`)
         }, [
@@ -48550,53 +48558,37 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0d055d3d"]]);
-const _hoisted_1$a = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
     active: {
       type: String,
-      default: "bg-secondary-active-token"
+      default: "variant-filled"
     },
     hover: {
       type: String,
-      default: "hover:bg-secondary-hover-token"
-    },
-    regionLead: {
-      type: String,
-      default: ""
-    },
-    regionDefault: {
-      type: String,
-      default: ""
-    },
-    regionTrail: {
-      type: String,
-      default: ""
+      default: "hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50"
     }
   },
   setup(__props) {
     const props = __props;
+    const { selectedRailTile: selectedRailTile2 } = useRail();
     provide("active", props.active);
     provide("hover", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-lead", __props.regionLead])
-        }, [
-          renderSlot(_ctx.$slots, "lead")
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-default", __props.regionDefault])
-        }, [
+      return openBlock(), createBlock(unref(_sfc_main$r), {
+        unstyled: "",
+        active: __props.active,
+        hover: __props.hover,
+        modelValue: unref(selectedRailTile2),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectedRailTile2) ? selectedRailTile2.value = $event : null),
+        class: "vuetiful-rail flex h-full w-[70px] flex-col overflow-y-auto sm:w-20"
+      }, {
+        default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-trail", __props.regionTrail])
-        }, [
-          renderSlot(_ctx.$slots, "trail")
-        ], 2)
-      ]);
+        ]),
+        _: 3
+      }, 8, ["active", "hover", "modelValue"]);
     };
   }
 });
@@ -48607,10 +48599,6 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       type: String,
       default: ""
     },
-    tag: {
-      type: String,
-      default: "button"
-    },
     label: {
       type: String,
       default: ""
@@ -48624,55 +48612,30 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       default: ""
     }
   },
-  emits: ["click"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const attrs = useAttrs();
+  setup(__props) {
     const { selectedRailTile: selectedRailTile2 } = useRail();
     const active = inject("active");
     const hover = inject("hover");
-    const activate = () => {
-      selectedRailTile2.value = props.value;
-      emit("click");
-    };
-    const clickHandler = (event) => {
-      event.preventDefault();
-      activate();
-    };
-    const keydownHandler = (event) => {
-      if (["Enter", " "].includes(event.key))
-        event.preventDefault();
-      if (event.key === "Enter")
-        activate();
-    };
-    const keyupHandler = (event) => {
-      if (event.key === " ") {
-        event.preventDefault();
-        activate();
-      }
-    };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
-        onClick: clickHandler,
-        onKeydown: keydownHandler,
-        onKeyup: keyupHandler
-      }, unref(attrs), {
-        class: `app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""}`
-      }), {
+      return openBlock(), createBlock(unref(_sfc_main$q), {
+        value: __props.value,
+        unstyled: "",
+        class: normalizeClass(`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""}`)
+      }, {
         default: withCtx(() => [
           _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
+            class: normalizeClass(`vuetiful-rail-tile-icon ${__props.regionIcon}`)
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2)) : createCommentVNode("", true),
           __props.label ? (openBlock(), createElementBlock("div", {
             key: 1,
-            class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
+            class: normalizeClass(`vuetiful-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
           }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 16, ["class"]);
+      }, 8, ["value", "class"]);
     };
   }
 });