@toife/vue 3.0.3 → 3.0.5

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

@@ -2,29 +2,38 @@
 <script lang="ts" setup>
 import { markRaw, onMounted, ref } from "vue";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = defineProps<{
   component: unknown;
 }>();
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const renderComponent = ref<unknown | null>(null);
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const resolveComponent = async (raw: unknown): Promise<unknown> => {
   if (typeof raw !== "function") return raw;
   const mod = await (raw as () => Promise<{ default?: unknown }>)();
   return mod?.default ?? mod;
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
+/** Accepts a component, async loader, or `{ default }` wrapper (common for vue-router). */
+const resolveFromProp = async (raw: unknown): Promise<unknown | null> => {
+  if (raw == null) return null;
+  const inner =
+    typeof raw === "object" && raw !== null && "default" in raw
+      ? (raw as { default: unknown }).default
+      : raw;
+  return resolveComponent(inner);
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
 onMounted(async () => {
-  const c = props.component as { default?: unknown };
-  const component = await resolveComponent(c?.default);
-  renderComponent.value = component ? markRaw(component) : null;
+  const resolved = await resolveFromProp(props.component);
+  renderComponent.value = resolved ? markRaw(resolved) : null;
 });
 </script>

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

@@ -4,16 +4,16 @@ import { ROUTE_PROVIDER_STATE_KEY } from "./route-provider.constant";
 import { type RouteProviderProps, type RouteProviderState } from "./route-provider.type";
 import { provide, computed } from "vue";
 
-/// Defined
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = defineProps<RouteProviderProps>();
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const stack = computed(() => props.stack);
 
-/// Provide
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
 provide<RouteProviderState>(ROUTE_PROVIDER_STATE_KEY, {
   stack,
 });

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

@@ -5,6 +5,7 @@ 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[],
@@ -12,12 +13,12 @@ const buildTree = (
 ) => {
   if (matched.length === 0) return current;
 
-  // Case current is previous
+  // User navigated back: drop the leaf so we merge into the parent segment
   if (current.length > 1 && current[current.length - 2]?.name === matched[0].name) {
     current.pop();
   }
 
-  // Case current is current
+  // Same route record: update nested stack only
   if (
     current.length > 0 &&
     current[current.length - 1] &&
@@ -30,7 +31,7 @@ const buildTree = (
       option
     );
   }
-  // Case current is add
+  // Push a new segment (forward navigation)
   else {
     const name = String(matched[0].name);
     const component = matched[0].components as RouteComponent;

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

@@ -6,15 +6,17 @@ import { useRouter, useRoute } from "vue-router";
 import type { RouteWrapperProps } from "./route-wrapper.type";
 import { RouteProvider } from "../route-provider";
 
-const { updateRoutes, stack } = useRouteWrapper();
-const route = useRoute();
-const router = useRouter();
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RouteWrapperProps>(), {
   homeRouteName: "home",
 });
+const { updateRoutes, stack } = useRouteWrapper();
+const route = useRoute();
+const router = useRouter();
 
-/// Lifecycle
-/// ------------------------------------------------------------
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => route.matched,
   () => {

package/src/components/route/route.util.ts

@@ -1,5 +1,6 @@
 import { RouteStack } from "./route.type";
 
+/** Deep-clone the nested route stack tree (each level has its own `stack` branch). */
 export const clone = (value: RouteStack[]): RouteStack[] => {
   return value.map((item: RouteStack) => ({
     ...item,

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

@@ -6,10 +6,11 @@ $segmented-field-content: sass.fn-naming-prefix("segmented-field-content");
 $segmented-field-message: sass.fn-naming-prefix("segmented-field-message");
 $segmented-field-help: sass.fn-naming-prefix("segmented-field-help");
 
-// Property name
+// Property name - layer: segmented-field
+$segmented-field-color: sass.fn-naming-var("segmented-field", "color");
+
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$role-color: sass.fn-naming-var("segmented-field", "background-color");
 $app-color: sass.fn-naming-var("app", "color");
 
 .#{$segmented-field-wrapper} {
@@ -20,7 +21,7 @@ $app-color: sass.fn-naming-var("app", "color");
 
   // Message
   .#{$segmented-field-message} {
-    color: rgb(#{$role-color});
+    color: rgb(#{$segmented-field-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:

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

@@ -7,8 +7,8 @@ import type { SegmentedFieldProps, SegmentedFieldEmit } from "./segmented-field.
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<SegmentedFieldProps>(), {
   modelValue: undefined,
   value: undefined,
@@ -26,13 +26,13 @@ const props = withDefaults(defineProps<SegmentedFieldProps>(), {
 const emit = defineEmits<SegmentedFieldEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const keepValue = ref<string[]>([]);
 const fields = ref<InstanceType<typeof Field>[]>([]);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const segments = computed(() => {
   let value: string[] | undefined = [];
   if (props.value !== undefined && props.value.length > 0) value = props.value;
@@ -93,8 +93,8 @@ const nextIndex = computed(() => {
   return nextIndex;
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const updateValue = (newValue: string[]) => {
   keepValue.value = newValue;
   emit("update:modelValue", newValue);

package/src/components/skeleton/skeleton.scss

@@ -3,21 +3,21 @@
 // Classes
 $skeleton: sass.fn-naming-prefix("skeleton");
 
-// Properties - layer: skeleton
-$width: sass.fn-naming-var("skeleton", "width");
-$height: sass.fn-naming-var("skeleton", "height");
+// Property name - layer: skeleton
+$skeleton-width: sass.fn-naming-var("skeleton", "width");
+$skeleton-height: sass.fn-naming-var("skeleton", "height");
+$skeleton-background-color: sass.fn-naming-var("skeleton", "background-color");
+
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("skeleton", "background-color");
-$background-color-subtle: sass.fn-naming-var("skeleton", "background-color", "subtle");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$skeleton} {
-  width: #{$width};
-  height: #{$height};
+  width: #{$skeleton-width};
+  height: #{$skeleton-height};
   position: relative;
   overflow: hidden;
   border-radius: #{$border-radius};
-  background-color: rgba(#{$background-color-subtle}, 0.2);
+  background-color: rgba(#{$skeleton-background-color}, 0.2);
   display: inline-block;
   line-height: 0;
   transition:
@@ -32,7 +32,12 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     position: absolute;
     inset: 0;
     transform: translateX(-100%);
-    background: linear-gradient(90deg, transparent, rgba(#{$background-color}, 1), transparent);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(#{$skeleton-background-color}, 1),
+      transparent
+    );
     opacity: 0.2;
     animation: shimmer 1.2s infinite;
   }

package/src/components/skeleton/skeleton.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type SkeletonProps = {
   width?: string | number;
   height?: string | number;

package/src/components/skeleton/skeleton.vue

@@ -6,16 +6,16 @@ import { type SkeletonProps } from "./skeleton.type";
 import { property, withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<SkeletonProps>(), {
   width: "100%",
   height: "1rem",
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const skeletonAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
   const role = props.role || appState?.role.value || "";

package/src/components/switch/switch.html

@@ -1,7 +1,6 @@
 <div
   v-bind="switchWrapperAttrs"
   :tabindex="disabled ? -1 : 0"
-  role="switch"
   :aria-checked="props.modelValue"
   @click="onSwitch"
   @focus="onFocus"

package/src/components/switch/switch.scss

@@ -7,14 +7,15 @@ $shape-rounded: sass.fn-naming-prefix("shape-rounded");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 $switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
 
-// Properties - switch track (inactive), switch icon (on)
-$background-color: sass.fn-naming-var("switch", "background-color");
-$background-color-hover: sass.fn-naming-var("switch", "background-color", "soft");
-$background-color-inactive: sass.fn-naming-var("switch", "background-color", "subtle");
-$background-color-disabled: sass.fn-naming-var("switch", "background-color", "subtle");
-$background-color-contrast: sass.fn-naming-var("switch", "background-color", "contrast");
-$border-color: sass.fn-naming-var("switch", "border-color");
-$color-hover: sass.fn-naming-var("switch", "color", "strong");
+// Property name - layer: switch (track + thumb; states like button + inactive)
+$switch-background-color: sass.fn-naming-var("switch", "background-color");
+$switch-background-color-hover: sass.fn-naming-var("switch", "background-color", "hover");
+$switch-background-color-inactive: sass.fn-naming-var("switch", "background-color", "inactive");
+$switch-background-color-disabled: sass.fn-naming-var("switch", "background-color", "disabled");
+$switch-background-color-contrast: sass.fn-naming-var("switch", "background-color", "contrast");
+
+$switch-border-color-focus: sass.fn-naming-var("switch", "border-color", "focus");
+
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
 $spacing-x: sass.fn-naming-var("spacing", "x");
@@ -43,7 +44,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       height: calc(100% - 0.3rem);
       position: absolute;
       top: 0;
-      background-color: rgb(#{$background-color-contrast});
+      background-color: rgb(#{$switch-background-color-contrast});
       border-radius: #{$border-radius};
       aspect-ratio: 1/1;
       margin: 0.15rem;
@@ -72,7 +73,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
     cursor: not-allowed;
 
     .#{$switch} {
-      background-color: rgb(#{$background-color-disabled});
+      background-color: rgb(#{$switch-background-color-disabled});
       cursor: not-allowed;
       opacity: 0.3;
     }
@@ -88,21 +89,21 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 
   &:not(.on) {
     .#{$switch} {
-      background-color: rgb(#{$background-color-inactive});
+      background-color: rgb(#{$switch-background-color-inactive});
 
       .#{$switch-icon} {
         left: 0;
       }
 
       &:not(.disabled):not(.readonly):hover {
-        background-color: rgb(#{$background-color-hover});
+        background-color: rgb(#{$switch-background-color-hover});
       }
     }
   }
 
   &.on {
     .#{$switch} {
-      background-color: rgb(#{$background-color});
+      background-color: rgb(#{$switch-background-color});
 
       .#{$switch-icon} {
         right: 0;
@@ -115,7 +116,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   &.focus {
     &.shadow {
       .#{$switch} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$switch-border-color-focus}, 0.25);
       }
     }
   }

package/src/components/switch/switch.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type SwitchProps = {
   modelValue?: boolean;
   role?: string;

package/src/components/switch/switch.vue

@@ -6,8 +6,8 @@ import type { SwitchProps, SwitchEmit } from "./switch.type";
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<SwitchProps>(), {
   modelValue: false,
   readonly: false,
@@ -16,12 +16,12 @@ const props = withDefaults(defineProps<SwitchProps>(), {
 const emit = defineEmits<SwitchEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocused = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const switchWrapperAttrs = computed(() => {
   const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
@@ -56,8 +56,8 @@ const switchIconAttrs = {
   class: [withPrefix("switch-icon")],
 } as const;
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onSwitch = () => {
   if (props.disabled || props.readonly) return;
   emit("update:modelValue", !props.modelValue);

package/src/components/tabs/tab/tab.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type TabProps = {
   value?: string;
   disabled?: boolean;

package/src/components/tabs/tab/tab.vue

@@ -6,15 +6,15 @@ import { type TabProps } from "./tab.type";
 import { withPrefix } from "../../../utils";
 import { type TabsProviderState, TABS_PROVIDER_STATE_KEY } from "../tabs";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<TabProps>(), {
   disabled: false,
 });
 const tabsState = inject<TabsProviderState>(TABS_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => tabsState?.role.value || "");
 const shape = computed(() => tabsState?.shape.value || "");
 const isActive = computed(() => tabsState?.activeValue.value === props.value);
@@ -29,8 +29,8 @@ const tabAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const handleClick = () => {
   if (props.disabled) return;
   tabsState?.setValue(props.value || "");

package/src/components/tabs/tabs/tabs.scss

@@ -5,19 +5,18 @@ $tabs: sass.fn-naming-prefix("tabs");
 $tab: sass.fn-naming-prefix("tab");
 $button: sass.fn-naming-prefix("button");
 
-// Property name
+// Property name - layer: tabs
+$tabs-color: sass.fn-naming-var("tabs", "color");
+$tabs-background-color: sass.fn-naming-var("tabs", "background-color");
+$tabs-border-color: sass.fn-naming-var("tabs", "border-color");
+
 $space-x: sass.fn-naming-var("spacing", "x");
 $space-y: sass.fn-naming-var("spacing", "y");
-
-// layer: tabs
-$button-color: sass.fn-naming-var("tabs", "color");
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("tabs", "border-color");
-
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$background-color: sass.fn-naming-var("tabs", "background-color");
 
+// layer: highlight (indicator geometry)
 $highlight-top: sass.fn-naming-var("highlight", "top");
 $highlight-left: sass.fn-naming-var("highlight", "left");
 $highlight-width: sass.fn-naming-var("highlight", "width");
@@ -54,7 +53,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     height: #{$highlight-height};
     transform: translate(#{$highlight-left}, #{$highlight-top});
     box-sizing: border-box;
-    background-color: rgb(#{$background-color});
+    background-color: rgb(#{$tabs-background-color});
     border-radius: #{$border-radius};
   }
 
@@ -114,25 +113,25 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     &.top-start,
     &.top-center,
     &.top-end {
-      border-bottom-color: rgb(#{$border-color});
+      border-bottom-color: rgb(#{$tabs-border-color});
     }
 
     &.bottom-start,
     &.bottom-center,
     &.bottom-end {
-      border-top-color: rgb(#{$border-color});
+      border-top-color: rgb(#{$tabs-border-color});
     }
 
     &.left-start,
     &.left-center,
     &.left-end {
-      border-right-color: rgb(#{$border-color});
+      border-right-color: rgb(#{$tabs-border-color});
     }
 
     &.right-start,
     &.right-center,
     &.right-end {
-      border-left-color: rgb(#{$border-color});
+      border-left-color: rgb(#{$tabs-border-color});
     }
   }
 
@@ -162,7 +161,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     :deep(.#{$tab}) {
       &.active {
         .#{$button} {
-          color: rgb(#{$button-color}) !important;
+          color: rgb(#{$tabs-color}) !important;
         }
       }
     }
@@ -196,8 +195,8 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     :deep(.#{$tab}) {
       &.active {
         .#{$button} {
-          color: rgb(#{$background-color});
-          text-shadow: 0 0 rgb(#{$background-color});
+          color: rgb(#{$tabs-background-color});
+          text-shadow: 0 0 rgb(#{$tabs-background-color});
         }
       }
     }

package/src/components/tabs/tabs/tabs.type.ts

@@ -11,7 +11,7 @@ export type TabsPlacement =
   | "right-start"
   | "right-end";
 
-// Define
+// Type definitions
 export type TabsProps = {
   placement?: TabsPlacement;
   variant?: TabsVariant;

package/src/components/tabs/tabs/tabs.vue

@@ -7,8 +7,8 @@ import { property, withPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<TabsProps>(), {
   placement: "top-start",
   margin: () => [0, 0],
@@ -16,19 +16,19 @@ const props = withDefaults(defineProps<TabsProps>(), {
   divider: undefined,
   transition: true,
 });
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 const emit = defineEmits<TabsEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const width = ref(0);
 const height = ref(0);
 const top = ref(0);
 const left = ref(0);
 const container = ref();
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => {
   return props.role || appState?.role.value || "";
 });
@@ -55,7 +55,7 @@ const tabsAttrs = computed(() => {
   w = w + props.margin[1] * 2;
 
   if (props.variant === "underline") {
-    /// Top, Bottom
+    // Underline variant: align the highlight strip for top vs bottom tab bars
     if (props.placement.startsWith("top-")) {
       t = h - props.border;
     }
@@ -106,8 +106,8 @@ const tabsAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const calcPosition = () => {
   let active = container.value.querySelector(".active");
   if (active) {
@@ -125,7 +125,7 @@ const calcPosition = () => {
 };
 
 // Lifecycle
-/// ------------------------------------------------------------
+// ----------------------------------------------------------------------------
 watch(
   () => props.modelValue,
   async () => {
@@ -144,8 +144,8 @@ onUnmounted(() => {
   window.removeEventListener("resize", calcPosition);
 });
 
-// Export, Expose
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
 provide<TabsProviderState>(TABS_PROVIDER_STATE_KEY, {
   activeValue,
   role,

package/src/components/toast/toast/toast.vue

@@ -7,15 +7,15 @@ import { withPrefix } from "../../../utils";
 import { useToast } from "../toast.composable";
 import { ToastContent } from "../toast-content";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ToastProps>(), {
   placement: "bottom-end",
 });
 const toast = useToast();
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const toastAttrs = computed(() => {
   return {
     class: [withPrefix("toast"), props.placement],
@@ -26,8 +26,8 @@ const toastMessages = computed(() => {
   return toast.messages.value.filter((item) => item.placement == props.placement);
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const dismiss = (id: number) => {
   toast.close(id);
 };