@code-coaching/vuetiful 0.21.4 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.21.4",
+  "version": "0.22.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/components/atoms/VRadio/VRadioGroup.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
   hover: {
     type: String,
-    default: "hover:variant-ghost",
+    default: "hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50",
   },
 
   background: {
@@ -36,6 +36,11 @@ const props = defineProps({
     type: String,
     default: "text-surface-900 dark:text-surface-50",
   },
+
+  unstyled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const parentModelValue = ref(props.modelValue);
@@ -63,7 +68,11 @@ l
     :as="as"
     :disabled="disabled"
     :by="by"
-    :class="`radio-group inline-flex gap-1 p-1 ${background} ${text} border-token border-surface-400-500-token rounded-container-token`"
+    :class="`${
+      unstyled
+        ? ''
+        : `radio-group ${background} ${text} inline-flex gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`
+    }`"
     v-model="parentModelValue"
   >
     <slot></slot>

package/src/components/atoms/VRadio/VRadioItem.vue

@@ -7,6 +7,10 @@ defineProps({
     type: [String, Number, Boolean, Object],
     required: true,
   },
+  unstyled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const active = inject("active") as string;
@@ -17,9 +21,13 @@ const hover = inject("hover") as string;
   <RadioGroupOption v-slot="{ checked, disabled }" :value="value">
     <div
       data-test="radio-item"
-      :class="`radio-item px-4 py-1 text-center text-base rounded-token ${
-        checked ? active : hover
-      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`"
+      :class="`radio-item ${
+        unstyled
+          ? ''
+          : `px-4 py-1 text-center text-base rounded-token ${checked ? active : hover} ${
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+            }`
+      }`"
     >
       <slot />
     </div>

package/src/components/molecules/VRail.vue

@@ -1,28 +1,18 @@
 <script setup lang="ts">
 import type { CssClasses } from "@/index";
+import { VRadioGroup, useRail } from "@/index";
 import { provide } from "vue";
 
+const { selectedRailTile } = useRail();
+
 const props = defineProps({
   active: {
     type: String as () => CssClasses,
-    default: "bg-secondary-active-token",
+    default: "variant-filled",
   },
   hover: {
     type: String as () => CssClasses,
-    default: "hover:bg-secondary-hover-token",
-  },
-
-  regionLead: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-  regionDefault: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-  regionTrail: {
-    type: String as () => CssClasses,
-    default: "",
+    default: "hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50",
   },
 });
 
@@ -31,9 +21,13 @@ provide("hover", props.hover);
 </script>
 
 <template>
-  <div class="v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20">
-    <div class="v-bar-lead" :class="regionLead"><slot name="lead" /></div>
-    <div class="v-bar-default" :class="regionDefault"><slot /></div>
-    <div class="v-bar-trail" :class="regionTrail"><slot name="trail" /></div>
-  </div>
+  <v-radio-group
+    unstyled
+    :active="active"
+    :hover="hover"
+    v-model="selectedRailTile"
+    class="vuetiful-rail flex h-full w-[70px] flex-col overflow-y-auto sm:w-20"
+  >
+    <slot />
+  </v-radio-group>
 </template>

package/src/components/molecules/VRailTile.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
 import type { CssClasses } from "@/index";
+import { VRadioItem } from "@/index";
 import { useRail } from "@/services";
-import { inject, useAttrs } from "vue";
+import { inject } from "vue";
 
-const emit = defineEmits<{
-  (event: "click"): void;
-}>();
-
-const props = defineProps({
+defineProps({
   value: {
     type: String,
     default: "",
   },
-  tag: {
-    type: String as () => string,
-    default: "button",
-  },
   label: {
     type: String as () => string,
     default: "",
@@ -31,53 +24,26 @@ const props = defineProps({
   },
 });
 
-const attrs = useAttrs();
-
 const { selectedRailTile } = useRail();
 const active = inject("active");
 const hover = inject("hover");
-
-const activate = () => {
-  selectedRailTile.value = props.value;
-  emit("click");
-};
-
-const clickHandler = (event: MouseEvent) => {
-  event.preventDefault();
-  activate();
-};
-
-const keydownHandler = (event: KeyboardEvent) => {
-  if (["Enter", " "].includes(event.key)) event.preventDefault();
-  if (event.key === "Enter") activate();
-};
-
-const keyupHandler = (event: KeyboardEvent) => {
-  if (event.key === " ") {
-    event.preventDefault();
-    activate();
-  }
-};
 </script>
 
 <template>
-  <component
-    @click="clickHandler"
-    @keydown="keydownHandler"
-    @keyup="keyupHandler"
-    :is="tag"
-    v-bind="attrs"
-    :class="`app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${hover} ${
+  <v-radio-item
+    :value="value"
+    unstyled
+    :class="`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${hover} ${
       selectedRailTile === value ? `${active}` : ''
     }`"
   >
     <template v-if="$slots.default">
-      <div :class="`app-rail-tile-icon ${regionIcon}`"><slot /></div>
+      <div :class="`vuetiful-rail-tile-icon ${regionIcon}`"><slot /></div>
     </template>
     <template v-if="label">
-      <div :class="`app-rail-tile-label text-center text-xs font-bold ${regionLabel}`">
+      <div :class="`vuetiful-rail-tile-label text-center text-xs font-bold ${regionLabel}`">
         {{ label }}
       </div>
     </template>
-  </component>
+  </v-radio-item>
 </template>