@toife/vue 3.0.2 → 3.0.4

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.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.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.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.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);
 };

package/src/components/toast/toast-content/toast-content.vue

@@ -6,8 +6,8 @@ import { type ToastContentProps, type ToastContentEmit } from "../toast.type";
 import { withPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ToastContentProps>(), {
   message: "",
   duration: 2000,
@@ -16,12 +16,12 @@ const props = withDefaults(defineProps<ToastContentProps>(), {
 const emit = defineEmits<ToastContentEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isClosing = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const contentAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   const shape = props.shape || appState?.shape.value || "";
@@ -40,7 +40,7 @@ const contentAttrs = computed(() => {
 });
 
 // Lifecycle
-/// ------------------------------------------------------------
+// ----------------------------------------------------------------------------
 onMounted(() => {
   setTimeout(() => {
     isClosing.value = true;

package/src/components/toast/toast.composable.ts

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import type { ToastContentProps } from "./toast.type";
 
-// All messages
+// Queue of active toast payloads (each open() appends with a monotonic id)
 const messages = ref<ToastContentProps[]>([]);
 const messageId = ref(1);
 

package/src/components/toolbar/toolbar.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type ToolbarProps = {
   placement?: string | null;
   safeArea?: boolean;

package/src/components/toolbar/toolbar.vue

@@ -8,8 +8,8 @@ import { type CableProviderState } from "../cable/cable.type";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 import { CABLE_PROVIDER_STATE_KEY } from "../cable";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ToolbarProps>(), {
   placement: null,
   safeArea: true,
@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<ToolbarProps>(), {
 const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const toolbarAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   const placement = props.placement || cable?.placement.value || "";

package/src/factory.ts

@@ -37,10 +37,11 @@ import {
   Toolbar,
 } from "./components";
 import { type CreateToifeOptions } from "./type";
+import type { App as VueApp } from "vue";
 
 export const createToife = (options?: CreateToifeOptions) => {
   return {
-    install: (app: any) => {
+    install: (app: VueApp) => {
       const prefix = options?.prefix || "t-";
       app.component(prefix + "app", App);
       app.component(prefix + "action", Action);

package/src/utils/element.ts

@@ -1,3 +1,6 @@
+/**
+ * Check if the target is a form element
+ */
 export const isFormElement = (target: any) => {
   return (
     target &&
@@ -5,6 +8,9 @@ export const isFormElement = (target: any) => {
   );
 };
 
+/**
+ * Blur the current active element
+ */
 export const blurCurrentActive = () => {
   const active = document.activeElement as HTMLElement | null;
   if (

package/src/utils/events.ts

@@ -1,12 +1,18 @@
 import { blurCurrentActive, isFormElement } from "./element";
 
+/** Subset of the Virtual Keyboard API used for layout. */
+type VirtualKeyboardOverlay = { overlaysContent: boolean };
+
+/**
+ * Prevent default behavior
+ */
 export const preventDefault = () => {
   document.addEventListener("contextmenu", (e) => e.preventDefault());
   document.addEventListener("pointerup", (e) => {
     !isFormElement(e.target) && blurCurrentActive();
   });
 
-  if ("virtualKeyboard" in navigator) {
-    (navigator.virtualKeyboard as any).overlaysContent = true;
+  if ("virtualKeyboard" in navigator && navigator.virtualKeyboard) {
+    (navigator.virtualKeyboard as VirtualKeyboardOverlay).overlaysContent = true;
   }
 };

package/src/utils/style/index.ts

@@ -1,6 +1,9 @@
 let prefix: string | null = null;
 let separator: string | null = null;
 
+/**
+ * Get the separator from the document element
+ */
 export const getSeparator = () => {
   if (!separator)
     separator = getComputedStyle(document.documentElement).getPropertyValue("--separator").trim();
@@ -8,6 +11,9 @@ export const getSeparator = () => {
   return separator;
 };
 
+/**
+ * Get the prefix from the document element
+ */
 export const getPrefix = () => {
   if (!prefix)
     prefix = getComputedStyle(document.documentElement).getPropertyValue("--prefix").trim();
@@ -15,6 +21,9 @@ export const getPrefix = () => {
   return prefix;
 };
 
+/**
+ * Generate the prefixed name
+ */
 export const withPrefix = (name: string | string[]) => {
   const p = getPrefix();
   const s = getSeparator();
@@ -33,10 +42,16 @@ export const withPrefix = (name: string | string[]) => {
   return names.join(s);
 };
 
+/**
+ * Generate the property name
+ */
 export const property = (name: string | string[]) => {
-  return "--" + withPrefix(name);
+  return `--${withPrefix(name)}`;
 };
 
+/**
+ * Generate the name with var() syntax
+ */
 export const variable = (name: string | string[]) => {
-  return "var(" + property(name) + ")";
+  return `var(${property(name)})`;
 };