@toife/vue 3.1.3 → 3.1.5

package/src/components/radio/radio/radio.scss

@@ -11,7 +11,11 @@ $radio-background-color-unchecked: sass.fn-naming-var("radio", "background-color
 $radio-background-color-checked: sass.fn-naming-var("radio", "background-color", "checked");
 $radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
 
-$radio-color: sass.fn-naming-var("radio", "color");
+$radio-color-unchecked: sass.fn-naming-var("radio", "color", "unchecked");
+$radio-color-checked: sass.fn-naming-var("radio", "color", "checked");
+$radio-color-hover: sass.fn-naming-var("radio", "color", "hover");
+$radio-color-focus: sass.fn-naming-var("radio", "color", "focus");
+$radio-color-disabled: sass.fn-naming-var("radio", "color", "disabled");
 
 $radio-border-color-hover: sass.fn-naming-var("radio", "border-color", "hover");
 $radio-border-color-focus: sass.fn-naming-var("radio", "border-color", "focus");
@@ -22,7 +26,9 @@ $radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disab
 $radio-box-shadow-color-focus: sass.fn-naming-var("radio", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+
+$size-control-mark-size: sass.fn-naming-var("control-mark-size");
 
 .#{$radio} {
   display: inline-flex;
@@ -35,13 +41,13 @@ $border-radius: sass.fn-naming-var("border-radius");
 
   .#{$radio-icon} {
     flex-shrink: 0;
-    width: 1.25rem;
-    height: 1.25rem;
+    width: #{$size-control-mark-size};
+    height: #{$size-control-mark-size};
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$radio-color});
     background-color: transparent;
+    border: 1px solid transparent;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -54,10 +60,10 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &::after {
       content: "";
-      width: 0.5rem;
-      height: 0.5rem;
+      width: calc(#{$size-control-mark-size} * 0.5);
+      height: calc(#{$size-control-mark-size} * 0.5);
       border-radius: 50%;
-      background-color: rgb(#{$radio-color});
+      background-color: rgba(#{$radio-color-unchecked});
       transform: scale(0);
       transform-origin: center;
       transition:
@@ -71,12 +77,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &:not(.on) {
     .#{$radio-icon} {
       background-color: transparent;
-      border-color: rgb(#{$radio-border-color-unchecked});
+      border-color: rgba(#{$radio-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$radio-icon} {
-        border-color: rgb(#{$radio-border-color-hover});
+        border-color: rgba(#{$radio-border-color-hover});
       }
     }
   }
@@ -84,22 +90,23 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.on {
     &.fill {
       .#{$radio-icon} {
-        background-color: rgb(#{$radio-background-color-checked});
-        border-color: rgb(#{$radio-border-color-checked});
+        background-color: rgba(#{$radio-background-color-checked});
+        border-color: rgba(#{$radio-border-color-checked});
 
         &::after {
           transform: scale(1);
+          background-color: rgba(#{$radio-color-checked});
         }
       }
     }
 
     &.outline {
       .#{$radio-icon} {
-        border-color: rgb(#{$radio-border-color-checked});
+        border-color: rgba(#{$radio-border-color-checked});
 
         &::after {
           transform: scale(1);
-          background-color: rgb(#{$radio-background-color-checked});
+          background-color: rgba(#{$radio-background-color-checked});
         }
       }
     }
@@ -111,8 +118,8 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.on {
       .#{$radio-icon} {
-        background-color: rgb(#{$radio-background-color-disabled});
-        border-color: rgb(#{$radio-border-color-disabled});
+        background-color: rgba(#{$radio-background-color-disabled});
+        border-color: rgba(#{$radio-border-color-disabled});
       }
     }
   }
@@ -124,12 +131,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.focus {
     &.shadow {
       .#{$radio-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$radio-box-shadow-color-focus}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$radio-box-shadow-color-focus}, 0.25);
       }
     }
 
     .#{$radio-icon} {
-      border-color: rgb(#{$radio-border-color-focus});
+      border-color: rgba(#{$radio-border-color-focus});
     }
   }
 }

package/src/components/radio/radio/radio.type.ts

@@ -1,9 +1,13 @@
+import { AppSize } from "../../app";
+
 export type RadioVariant = "fill" | "outline";
+export type RadioSize = AppSize;
 
 // Type definitions
 export type RadioProps = {
   value: string | number;
   role?: string;
+  size?: RadioSize;
   variant?: RadioVariant;
   disabled?: boolean;
   readonly?: boolean;

package/src/components/radio/radio/radio.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from "vue";
 import type { RadioProps } from "./radio.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "../radio-group";
 
@@ -11,6 +11,7 @@ import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "..
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RadioProps>(), {
   disabled: false,
+  size: "standard",
   shadow: undefined,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -41,9 +42,10 @@ const radioAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "radio"]),
-      withPrefix(["role", role]),
-      withPrefix("radio"),
+      cssPrefix(["layer", "radio"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("radio"),
       variant,
       {
         on: isChecked,
@@ -57,7 +59,7 @@ const radioAttrs = computed(() => {
 });
 
 const radioIconAttrs = {
-  class: [withPrefix("radio-icon")],
+  class: [cssPrefix("radio-icon")],
 } as const;
 
 // Methods

package/src/components/radio/radio-group/radio-group.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, provide } from "vue";
 import type { RadioGroupProps, RadioGroupEmit, RadioGroupProviderState } from "./radio-group.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";
 
@@ -37,7 +37,7 @@ const shadow = computed(() => {
 
 const radioGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("radio-group"), props.direction],
+    class: [cssPrefix("radio-group"), props.direction],
   };
 });
 

package/src/components/refresher/refresher.html

@@ -1,6 +1,3 @@
-<div v-bind="refresherAttrs" v-show="calculateOffset > 0">
-  <slot name="icon" :offset="calculateOffset" :refreshing="refreshing"></slot>
-</div>
 <div v-bind="containerAttrs" ref="container">
-  <slot></slot>
+  <slot :offset="calculateOffset" :refreshing="refreshing"></slot>
 </div>

package/src/components/refresher/refresher.scss

@@ -1,36 +1,18 @@
 @use "@toife/sass-layer" as sass;
 
 // Class
-$refresher: sass.fn-naming-prefix("refresher");
-$container: sass.fn-naming-prefix("refresher-container");
-
-// Variables
-$safe-area-top: sass.fn-naming-var("safe-area", "top");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-$offset: sass.fn-naming-var("refresher-offset");
+$container: sass.fn-naming-prefix("refresher");
 
 .#{$container} {
   width: 100%;
   height: 100%;
-  position: relative;
-  overflow: auto;
-}
-
-// Refresher
-.#{$refresher} {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  transition: height #{$transition-duration} ease;
+  max-width: 100%;
+  max-height: 100%;
   position: absolute;
   top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  line-height: 0;
-  z-index: 1;
-
-  &.moving {
-    top: calc(#{$safe-area-top} + #{$offset});
-  }
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  overscroll-behavior: none;
 }

package/src/components/refresher/refresher.vue

@@ -4,7 +4,7 @@
 import { ref, onUnmounted, watch, computed } from "vue";
 import { gesture } from "@toife/gesture";
 import type { RefresherProps, RefresherEmit } from "./refresher.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
@@ -29,23 +29,9 @@ const calculateOffset = computed(() => {
   return props.offset !== undefined ? props.offset : moveOffset.value / 2;
 });
 
-const refresherAttrs = computed(() => {
-  return {
-    style: {
-      [property("refresher-offset")]: `${calculateOffset.value}px`,
-    },
-    class: [
-      withPrefix("refresher"),
-      {
-        moving: calculateOffset.value > 0,
-      },
-    ],
-  };
-});
-
 const containerAttrs = computed(() => {
   return {
-    class: [withPrefix("refresher-container")],
+    class: [cssPrefix("refresher")],
   };
 });
 

package/src/components/route/route-navigator/route-navigator.scss

@@ -50,7 +50,7 @@ $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
     height: 100%;
     top: 0;
     left: 0;
-    background-color: rgb(#{$backdrop-background-color});
+    background-color: rgba(#{$backdrop-background-color});
     opacity: calc(#{$backdrop-opacity} * (#{$backdrop-percent} / 100));
     transition: opacity #{$transition-duration} ease;
   }
@@ -64,7 +64,7 @@ $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
     top: 0;
     left: 0;
     flex: none;
-    background-color: rgb(#{$background-color});
+    background-color: rgba(#{$background-color});
     transform: translate(0, 0);
     transition:
       transform #{$transition-duration} ease,

package/src/components/route/route-navigator/route-navigator.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { gesture } from "@toife/gesture";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type {
   RouteNavigatorEmit,
   RouteNavigatorProps,
@@ -63,26 +63,26 @@ const navigatorAttrs = computed(() => {
   }
 
   return {
-    class: [withPrefix("route-navigator"), props.direction, props.variant],
+    class: [cssPrefix("route-navigator"), props.direction, props.variant],
     style: {
-      [property("route-navigator-transform-back")]: transform.back + "%",
-      [property("route-navigator-transform-prepare")]: transform.prepare + "%",
-      [property("route-navigator-transform-active")]: transform.active + "%",
-      [property("route-navigator-transition-duration")]: duration,
-      [property("route-navigator-backdrop-percent")]: transform.backdrop,
+      [cssProperty("route-navigator-transform-back")]: transform.back + "%",
+      [cssProperty("route-navigator-transform-prepare")]: transform.prepare + "%",
+      [cssProperty("route-navigator-transform-active")]: transform.active + "%",
+      [cssProperty("route-navigator-transition-duration")]: duration,
+      [cssProperty("route-navigator-backdrop-percent")]: transform.backdrop,
     },
   };
 });
 
 const componentAttrs = computed(() => {
   return {
-    class: [withPrefix("route-navigator-component"), props.direction],
+    class: [cssPrefix("route-navigator-component"), props.direction],
   };
 });
 
 const backdropAttrs = computed(() => {
   return {
-    class: [withPrefix("route-navigator-backdrop"), withPrefix(["layer", "backdrop"])],
+    class: [cssPrefix("route-navigator-backdrop"), cssPrefix(["layer", "backdrop"])],
     style: {
       zIndex: backdropIndex.value * 2 - 1,
     },
@@ -158,7 +158,7 @@ const goBack = () => {
   if (activeIndex.value <= 0) return;
   const prev = stack.value[activeIndex.value - 1];
   if (!prev) return;
-  router.push(prev.fullPath);
+  router.back();
 };
 
 const resetTransform = () => {
@@ -230,7 +230,6 @@ onMounted(() => {
 
       fast({ initialDirection, event }: { initialDirection: string; event: Event }) {
         if (initialDirection !== props.direction) return;
-        event.preventDefault();
         goBack();
       },
 
@@ -246,7 +245,6 @@ onMounted(() => {
         event: Event;
       }) {
         if (initialDirection !== props.direction) return;
-        event.preventDefault();
         move({ deltaX, deltaY });
       },
 
@@ -262,7 +260,6 @@ onMounted(() => {
         event: Event;
       }) {
         if (initialDirection !== props.direction) return;
-        event.preventDefault();
         up({ deltaX, deltaY });
       },
 

package/src/components/route/route-wrapper/route-wrapper.composable.ts

@@ -1,16 +1,11 @@
 import { shallowRef } from "vue";
 import { type RouteComponent, type RouteLocationMatched } from "vue-router";
 import { type RouteStack } from "../route.type";
-import { RouteWrapperOption } from "./route-wrapper.type";
 
 const stack = shallowRef<RouteStack[]>([]);
 
 /** Recursively builds a nested stack from vue-router `matched` for the navigator. */
-const buildTree = (
-  matched: RouteLocationMatched[],
-  current: RouteStack[],
-  option: RouteWrapperOption
-) => {
+const buildTree = (matched: RouteLocationMatched[], current: RouteStack[]) => {
   if (matched.length === 0) return current;
 
   // User navigated back: drop the leaf so we merge into the parent segment
@@ -25,11 +20,7 @@ const buildTree = (
     current[current.length - 1].name === matched[0].name
   ) {
     matched.shift();
-    current[current.length - 1].stack = buildTree(
-      matched,
-      current[current.length - 1].stack,
-      option
-    );
+    current[current.length - 1].stack = buildTree(matched, current[current.length - 1].stack);
   }
   // Push a new segment (forward navigation)
   else {
@@ -39,8 +30,7 @@ const buildTree = (
     current.push({
       name,
       component,
-      fullPath: option.fullPath,
-      stack: buildTree(matched, [], option),
+      stack: buildTree(matched, []),
     });
   }
 
@@ -48,8 +38,8 @@ const buildTree = (
 };
 
 export const useRouteWrapper = () => {
-  const updateRoutes = (matched: RouteLocationMatched[], option: RouteWrapperOption) => {
-    stack.value = buildTree([...matched], [...stack.value], option);
+  const updateRoutes = (matched: RouteLocationMatched[]) => {
+    stack.value = buildTree([...matched], [...stack.value]);
   };
 
   return {

package/src/components/route/route-wrapper/route-wrapper.type.ts

@@ -1,7 +1,3 @@
 export type RouteWrapperProps = {
   homeRouteName?: string;
 };
-
-export type RouteWrapperOption = {
-  fullPath: string;
-};

package/src/components/route/route-wrapper/route-wrapper.vue

@@ -20,9 +20,7 @@ const router = useRouter();
 watch(
   () => route.matched,
   () => {
-    updateRoutes(route.matched, {
-      fullPath: route.fullPath,
-    });
+    updateRoutes(route.matched);
   }
 );
 
@@ -31,22 +29,16 @@ onMounted(() => {
   const homeName = props.homeRouteName;
 
   if (route.name === homeName) {
-    updateRoutes(route.matched, {
-      fullPath: route.fullPath,
-    });
+    updateRoutes(route.matched);
   } else {
     const homeLocation = router.resolve({ name: homeName });
     if (homeLocation.matched.length > 0) {
-      updateRoutes(homeLocation.matched, {
-        fullPath: homeLocation.fullPath,
-      });
+      updateRoutes(homeLocation.matched);
     }
 
     // Apply current route to stack
     setTimeout(() => {
-      updateRoutes(route.matched, {
-        fullPath: route.fullPath,
-      });
+      updateRoutes(route.matched);
     }, 50);
   }
 });

package/src/components/route/route.type.ts

@@ -3,6 +3,5 @@ import { RouteComponent } from "vue-router";
 export type RouteStack = {
   name: string;
   component: RouteComponent;
-  fullPath: string;
   stack: RouteStack[];
 };

package/src/components/segmented-field/segmented-field.html

@@ -1,5 +1,5 @@
 <div v-bind="wrapperAttrs">
-  <div v-bind="contentAttrs" @click="onFieldClick">
+  <div v-bind="contentAttrs" @pointerup="onFieldClick">
     <Field
       v-for="(_, index) in props.length"
       :key="index"

package/src/components/segmented-field/segmented-field.scss

@@ -21,7 +21,7 @@ $app-color: sass.fn-naming-var("app", "color");
 
   // Message
   .#{$segmented-field-message} {
-    color: rgb(#{$segmented-field-color});
+    color: rgba(#{$segmented-field-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:
@@ -34,7 +34,7 @@ $app-color: sass.fn-naming-var("app", "color");
 
   // Help
   .#{$segmented-field-help} {
-    color: rgb(#{$app-color}, 0.75);
+    color: rgba(#{$app-color}, 0.75);
     font-size: 0.8em;
     line-height: 1.5;
     transition:

package/src/components/segmented-field/segmented-field.vue

@@ -4,7 +4,7 @@
 import { computed, inject, nextTick, ref } from "vue";
 import { Field } from "../field";
 import type { SegmentedFieldProps, SegmentedFieldEmit } from "./segmented-field.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -46,10 +46,10 @@ const wrapperAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
   return {
     class: [
-      withPrefix("segmented-field-wrapper"),
-      withPrefix(["layer", "segmented-field"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
+      cssPrefix("segmented-field-wrapper"),
+      cssPrefix(["layer", "segmented-field"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
       props.variant,
       props.size,
       { disabled: props.disabled },
@@ -58,7 +58,7 @@ const wrapperAttrs = computed(() => {
 });
 
 const contentAttrs = {
-  class: [withPrefix("segmented-field-content")],
+  class: [cssPrefix("segmented-field-content")],
 } as const;
 
 const fieldAttrs = computed(() => {
@@ -78,11 +78,11 @@ const fieldAttrs = computed(() => {
 });
 
 const messageAttrs = {
-  class: [withPrefix("segmented-field-message")],
+  class: [cssPrefix("segmented-field-message")],
 } as const;
 
 const helpAttrs = {
-  class: [withPrefix("segmented-field-help")],
+  class: [cssPrefix("segmented-field-help")],
 } as const;
 
 const nextIndex = computed(() => {

package/src/components/select/select.html

@@ -4,7 +4,7 @@
       <Field
         :role="role"
         variant="outline"
-        @click="toggle"
+        @pointerup="toggle"
         v-bind="fieldAttrs"
         :class="{focus: isOpen}"
       >
@@ -19,7 +19,7 @@
       type="button"
       :disabled="option.disabled"
       v-bind="selectOptionAttrs"
-      @click="pickOption(option)"
+      @pointerup="pickOption(option)"
     >
       {{ option.label }}
     </button>

package/src/components/select/select.scss

@@ -42,8 +42,8 @@ $select-message-color: sass.fn-naming-var("select", "message-color");
     width: 0.6rem;
     height: 0.6rem;
     border-radius: 0.1rem;
-    border-right: 2px solid rgb(var(--t-app-color));
-    border-bottom: 2px solid rgb(var(--t-app-color));
+    border-right: 2px solid rgba(var(--t-app-color));
+    border-bottom: 2px solid rgba(var(--t-app-color));
     margin: calc(var(--t-spacing-y) * var(--t-coefficient-y))
       calc(var(--t-spacing-x) * var(--t-coefficient-x));
     transition: transform #{$transition-duration} ease;
@@ -68,8 +68,8 @@ $select-message-color: sass.fn-naming-var("select", "message-color");
     overflow: hidden;
     background: transparent;
     cursor: pointer;
-    color: rgb(#{$select-color});
-    background-color: rgb(#{$select-background-color});
+    color: rgba(#{$select-color});
+    background-color: rgba(#{$select-background-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -80,30 +80,30 @@ $select-message-color: sass.fn-naming-var("select", "message-color");
     &:not(:disabled):not(.disabled):not(.readonly) {
       &:hover,
       &.hover {
-        background: rgb(#{$select-background-color-hover});
+        background: rgba(#{$select-background-color-hover});
       }
 
       &:focus,
       &.focus {
-        background: rgb(#{$select-background-color-focus});
+        background: rgba(#{$select-background-color-focus});
       }
 
       &:active,
       &.active {
-        background: rgb(#{$select-background-color-active});
+        background: rgba(#{$select-background-color-active});
       }
     }
 
     &:disabled,
     &.disabled {
       cursor: not-allowed;
-      color: rgb(#{$select-color-disabled});
+      color: rgba(#{$select-color-disabled});
     }
   }
 
   // Message
   .#{$select-message} {
-    color: rgb(#{$select-message-color});
+    color: rgba(#{$select-message-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:
@@ -116,7 +116,7 @@ $select-message-color: sass.fn-naming-var("select", "message-color");
 
   // Help
   .#{$select-help} {
-    color: rgb(#{$app-color}, 0.75);
+    color: rgba(#{$app-color}, 0.75);
     font-size: 0.8em;
     line-height: 1.5;
     transition: