@toife/vue 2.2.0 → 3.0.1

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

@@ -0,0 +1,46 @@
+# `<t-route-provider>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Provides `stack` (`RouteStack[]`) to `RouteNavigator` / children via inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                  |
+| ----- | ------------------------------------------------------ |
+| Vue   | ^3.5                                                   |
+| Other | Usually created by `RouteWrapper` or `RouteNavigator`. |
+
+## Basic usage
+
+```vue
+<!-- Rarely used directly; RouteNavigator wraps children -->
+<t-route-provider :stack="myStack">
+  <slot />
+</t-route-provider>
+```
+
+## Props
+
+| Prop    | Type           | Description                        |
+| ------- | -------------- | ---------------------------------- |
+| `stack` | `RouteStack[]` | Route stack (see `route.type.ts`). |
+
+**Type source:** `src/components/route/route-provider/route-provider.type.ts`
+
+## Slots
+
+| Slot      | Description                           |
+| --------- | ------------------------------------- |
+| `default` | Children (often outlet or navigator). |
+
+## Provide / inject
+
+`ROUTE_PROVIDER_STATE_KEY` → `{ stack }` (computed).
+
+## See also
+
+- Source: `src/components/route/route-provider`
+- `src/components/route/route.type.ts`

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

@@ -0,0 +1,10 @@
+import { ComputedRef } from "vue";
+import { RouteStack } from "../route.type";
+
+export type RouteProviderProps = {
+  stack: RouteStack[];
+};
+
+export type RouteProviderState = {
+  stack: ComputedRef<RouteStack[]>;
+};

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

@@ -0,0 +1,20 @@
+<template src="./route-provider.html"></template>
+<script lang="ts" setup>
+import { ROUTE_PROVIDER_STATE_KEY } from "./route-provider.constant";
+import { type RouteProviderProps, type RouteProviderState } from "./route-provider.type";
+import { provide, computed } from "vue";
+
+/// Defined
+/// ------------------------------------------------------------
+const props = defineProps<RouteProviderProps>();
+
+/// Computed
+/// ------------------------------------------------------------
+const stack = computed(() => props.stack);
+
+/// Provide
+/// ------------------------------------------------------------
+provide<RouteProviderState>(ROUTE_PROVIDER_STATE_KEY, {
+  stack,
+});
+</script>

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

@@ -0,0 +1,3 @@
+export { default as RouteWrapper } from "./route-wrapper.vue";
+export * from "./route-wrapper.composable";
+export * from "./route-wrapper.type";

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

@@ -0,0 +1,58 @@
+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[]>([]);
+
+const buildTree = (
+  matched: RouteLocationMatched[],
+  current: RouteStack[],
+  option: RouteWrapperOption
+) => {
+  if (matched.length === 0) return current;
+
+  // Case current is previous
+  if (current.length > 1 && current[current.length - 2]?.name === matched[0].name) {
+    current.pop();
+  }
+
+  // Case current is current
+  if (
+    current.length > 0 &&
+    current[current.length - 1] &&
+    current[current.length - 1].name === matched[0].name
+  ) {
+    matched.shift();
+    current[current.length - 1].stack = buildTree(
+      matched,
+      current[current.length - 1].stack,
+      option
+    );
+  }
+  // Case current is add
+  else {
+    const name = String(matched[0].name);
+    const component = matched[0].components as RouteComponent;
+    matched.shift();
+    current.push({
+      name,
+      component,
+      fullPath: option.fullPath,
+      stack: buildTree(matched, [], option),
+    });
+  }
+
+  return current;
+};
+
+export const useRouteWrapper = () => {
+  const updateRoutes = (matched: RouteLocationMatched[], option: RouteWrapperOption) => {
+    stack.value = buildTree([...matched], [...stack.value], option);
+  };
+
+  return {
+    stack,
+    updateRoutes,
+  };
+};

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

@@ -0,0 +1,3 @@
+<RouteProvider :stack="stack">
+  <slot />
+</RouteProvider>

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

@@ -0,0 +1,45 @@
+# `<t-route-wrapper>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Syncs the route stack with `vue-router` and wraps content in `RouteProvider` — main entry for stack-based navigation (with `RouteNavigator`).
+
+## Requirements / dependencies
+
+| Item         | Notes                                    |
+| ------------ | ---------------------------------------- |
+| Vue          | ^3.5                                     |
+| `vue-router` | **Required** — `useRoute` / `useRouter`. |
+
+## Basic usage
+
+```vue
+<t-route-wrapper home-route-name="home">
+  <t-route-navigator />
+</t-route-wrapper>
+```
+
+## Props
+
+| Prop            | Type     | Default  | Description                                    |
+| --------------- | -------- | -------- | ---------------------------------------------- |
+| `homeRouteName` | `string` | `"home"` | Name of the root route used to seed the stack. |
+
+**Type source:** `src/components/route/route-wrapper/route-wrapper.type.ts`
+
+## Slots
+
+| Slot      | Description                        |
+| --------- | ---------------------------------- |
+| `default` | Child tree (navigator, layout, …). |
+
+## Provide / inject
+
+Renders `RouteProvider` with `stack` from `useRouteWrapper`.
+
+## See also
+
+- Source: `src/components/route/route-wrapper`
+- [route-provider.md](../route-provider/route-provider.md), [route-navigator.md](../route-navigator/route-navigator.md)

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

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

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

@@ -0,0 +1,51 @@
+<template src="./route-wrapper.html"></template>
+<script lang="ts" setup>
+import { onMounted, watch } from "vue";
+import { useRouteWrapper } from "./route-wrapper.composable";
+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();
+const props = withDefaults(defineProps<RouteWrapperProps>(), {
+  homeRouteName: "home",
+});
+
+/// Lifecycle
+/// ------------------------------------------------------------
+watch(
+  () => route.matched,
+  () => {
+    updateRoutes(route.matched, {
+      fullPath: route.fullPath,
+    });
+  }
+);
+
+onMounted(() => {
+  // Add home route to stack
+  const homeName = props.homeRouteName;
+
+  if (route.name === homeName) {
+    updateRoutes(route.matched, {
+      fullPath: route.fullPath,
+    });
+  } else {
+    const homeLocation = router.resolve({ name: homeName });
+    if (homeLocation.matched.length > 0) {
+      updateRoutes(homeLocation.matched, {
+        fullPath: homeLocation.fullPath,
+      });
+    }
+
+    // Apply current route to stack
+    setTimeout(() => {
+      updateRoutes(route.matched, {
+        fullPath: route.fullPath,
+      });
+    }, 50);
+  }
+});
+</script>

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

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

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

@@ -0,0 +1,8 @@
+import { RouteStack } from "./route.type";
+
+export const clone = (value: RouteStack[]): RouteStack[] => {
+  return value.map((item: RouteStack) => ({
+    ...item,
+    stack: clone(item.stack),
+  })) as RouteStack[];
+};

package/src/components/segmented-field/index.ts

@@ -0,0 +1,7 @@
+export { default as SegmentedField } from "./segmented-field.vue";
+export type {
+  SegmentedFieldVariant,
+  SegmentedFieldSize,
+  SegmentedFieldProps,
+  SegmentedFieldEmit,
+} from "./segmented-field.type";

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

@@ -0,0 +1,17 @@
+<div v-bind="wrapperAttrs">
+  <div v-bind="contentAttrs" @click="onFieldClick">
+    <Field
+      v-for="(_, index) in props.length"
+      :key="index"
+      :tabindex="index === nextIndex ? 0 : -1"
+      v-bind="fieldAttrs"
+      :value="segments?.at(index) || ''"
+      @beforeinput="onSegmentBeforeinput($event, index)"
+      @input="onSegmentInput($event, index)"
+      @focus="onFieldFocus"
+      ref="fields"
+    />
+  </div>
+  <div v-bind="messageAttrs" v-if="message">{{ message }}</div>
+  <div v-bind="helpAttrs" v-if="help">{{ help }}</div>
+</div>

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

@@ -0,0 +1,58 @@
+# `<t-segmented-field>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+OTP-style segmented input: each segment is a `t-field`; coordinates focus and `v-model` as a character array.
+
+## Requirements / dependencies
+
+| Item  | Notes                                    |
+| ----- | ---------------------------------------- |
+| Vue   | ^3.5                                     |
+| Other | `t-app` recommended; depends on `Field`. |
+
+## Basic usage
+
+```vue
+<t-segmented-field v-model="otp" :length="6" @complete="submit" />
+```
+
+## Props
+
+| Prop                    | Type       | Default                  | Description                                   |
+| ----------------------- | ---------- | ------------------------ | --------------------------------------------- |
+| `modelValue`            | `string[]` | —                        | Character array (`v-model`).                  |
+| `value`                 | `string[]` | —                        | May be used instead of `modelValue` when set. |
+| `length`                | `number`   | `6`                      | Number of segments.                           |
+| `variant` / `size`      | —          | Passed to inner `Field`. |
+| `disabled` / `readonly` | `boolean`  | `false`                  |                                               |
+| `type`                  | `string`   | `"text"`                 | Field input type.                             |
+| `role` / `shape`        | `string`   | —                        | Theme.                                        |
+| `shadow`                | `boolean`  | —                        | Default from app.                             |
+| `message` / `help`      | `string`   | `""`                     | Message / help.                               |
+| `pattern`               | `string[]` | `[]`                     | Reserved for per-cell validation.             |
+
+**Type source:** `src/components/segmented-field/segmented-field.type.ts`
+
+## Events (emits)
+
+| Event               | Payload      | Description                          |
+| ------------------- | ------------ | ------------------------------------ |
+| `update:modelValue` | `string[]`   | Value update.                        |
+| `complete`          | `string[]`   | When `length` characters are filled. |
+| `focus` / `blur`    | `FocusEvent` | From inner fields.                   |
+| `input`             | `string[]`   | On each change.                      |
+
+## Slots
+
+_None_ — layout is fixed with repeated `Field`.
+
+## `v-model`
+
+`modelValue` / `update:modelValue` (`string[]`).
+
+## See also
+
+- Source: `src/components/segmented-field`

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

@@ -0,0 +1,52 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$segmented-field-wrapper: sass.fn-naming-prefix("segmented-field-wrapper");
+$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
+$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} {
+  .#{$segmented-field-content} {
+    display: flex;
+    gap: calc(#{$spacing-x} * 2);
+  }
+
+  // Message
+  .#{$segmented-field-message} {
+    color: rgb(#{$role-color});
+    font-size: 0.9em;
+    line-height: 1.5;
+    transition:
+      box-shadow #{$transition-duration} ease,
+      border-color #{$transition-duration} ease,
+      background-color #{$transition-duration} ease,
+      color #{$transition-duration} ease,
+      border-radius #{$transition-duration} ease;
+  }
+
+  // Help
+  .#{$segmented-field-help} {
+    color: rgb(#{$app-color}, 0.75);
+    font-size: 0.8em;
+    line-height: 1.5;
+    transition:
+      box-shadow #{$transition-duration} ease,
+      border-color #{$transition-duration} ease,
+      background-color #{$transition-duration} ease,
+      color #{$transition-duration} ease,
+      border-radius #{$transition-duration} ease;
+  }
+
+  // State
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/components/segmented-field/segmented-field.type.ts

@@ -0,0 +1,29 @@
+import type { FieldVariant, FieldSize } from "../field/field.type";
+
+export type SegmentedFieldVariant = FieldVariant;
+export type SegmentedFieldSize = FieldSize;
+
+export type SegmentedFieldProps = {
+  modelValue?: string[];
+  value?: string[];
+  length?: number;
+  variant?: SegmentedFieldVariant;
+  size?: SegmentedFieldSize;
+  disabled?: boolean;
+  readonly?: boolean;
+  type?: string;
+  role?: string;
+  shape?: string;
+  shadow?: boolean;
+  message?: string;
+  help?: string;
+  pattern?: string[];
+};
+
+export type SegmentedFieldEmit = {
+  (e: "update:modelValue", value: string[]): void;
+  (e: "complete", value: string[]): void;
+  (e: "focus", ev: FocusEvent): void;
+  (e: "blur", ev: FocusEvent): void;
+  (e: "input", value: string[]): void;
+};

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

@@ -0,0 +1,145 @@
+<style lang="scss" src="./segmented-field.scss" scoped></style>
+<template src="./segmented-field.html"></template>
+<script lang="ts" setup>
+import { computed, inject, nextTick, ref } from "vue";
+import { Field } from "../field";
+import type { SegmentedFieldProps, SegmentedFieldEmit } from "./segmented-field.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<SegmentedFieldProps>(), {
+  modelValue: undefined,
+  value: undefined,
+  length: 6,
+  variant: "outline",
+  size: "standard",
+  disabled: false,
+  readonly: false,
+  type: "text",
+  shadow: undefined,
+  message: "",
+  help: "",
+  pattern: (): string[] => [],
+});
+const emit = defineEmits<SegmentedFieldEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const keepValue = ref<string[]>([]);
+const fields = ref<InstanceType<typeof Field>[]>([]);
+
+/// Computed
+/// ------------------------------------------------------------
+const segments = computed(() => {
+  let value: string[] | undefined = [];
+  if (props.value !== undefined && props.value.length > 0) value = props.value;
+  else if (props.modelValue !== undefined && props.modelValue.length > 0) value = props.modelValue;
+  else value = keepValue.value;
+  return value || [];
+});
+
+const wrapperAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
+  return {
+    class: [
+      withPrefix("segmented-field-wrapper"),
+      withPrefix(["layer", "segmented-field"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      props.variant,
+      props.size,
+      { disabled: props.disabled },
+    ],
+  };
+});
+
+const contentAttrs = {
+  class: [withPrefix("segmented-field-content")],
+} as const;
+
+const fieldAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
+  const shadow = (props.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+  return {
+    variant: props.variant,
+    size: props.size,
+    disabled: props.disabled,
+    readonly: props.readonly,
+    shadow,
+    shape,
+    role,
+    type: props.type,
+  };
+});
+
+const messageAttrs = {
+  class: [withPrefix("segmented-field-message")],
+} as const;
+
+const helpAttrs = {
+  class: [withPrefix("segmented-field-help")],
+} as const;
+
+const nextIndex = computed(() => {
+  let nextIndex = segments.value.length;
+  if (nextIndex > props.length - 1) {
+    nextIndex = props.length - 1;
+  }
+  return nextIndex;
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const updateValue = (newValue: string[]) => {
+  keepValue.value = newValue;
+  emit("update:modelValue", newValue);
+  emit("input", newValue);
+
+  if (newValue.length === props.length) {
+    emit("complete", newValue);
+  }
+
+  focusNextInput();
+};
+
+const focusNextInput = async () => {
+  await nextTick();
+  const el = fields.value.at(nextIndex.value)?.$el?.querySelector("[contenteditable='true']");
+  if (el) {
+    el.focus();
+    el.setSelectionRange(el.value.length, el.value.length);
+  }
+};
+
+const onFieldFocus = () => {
+  focusNextInput();
+};
+
+const onSegmentBeforeinput = (ev: InputEvent, index: number) => {
+  const type = ev.inputType;
+
+  if (
+    (type === "deleteContentBackward" || type === "deleteContentForward") &&
+    !segments.value.at(index)
+  ) {
+    let newModelValue = [...segments.value];
+    newModelValue.pop();
+    updateValue(newModelValue);
+  }
+};
+
+const onSegmentInput = (ev: Event, index: number) => {
+  const newModelValue = [...segments.value];
+  const val = (ev as InputEvent).data;
+
+  if (val === "" || val === null) newModelValue.pop();
+  else newModelValue[index] = val;
+
+  updateValue(newModelValue);
+};
+</script>

package/src/components/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from "./skeleton.vue";
+export type { SkeletonProps } from "./skeleton.type";

package/src/components/skeleton/skeleton.html

@@ -0,0 +1 @@
+<div v-bind="skeletonAttrs"></div>

package/src/components/skeleton/skeleton.md

@@ -0,0 +1,47 @@
+# `<t-skeleton>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Loading placeholder block with configurable size (CSS variables), themed from app.
+
+## Requirements / dependencies
+
+| Item  | Notes                         |
+| ----- | ----------------------------- |
+| Vue   | ^3.5                          |
+| Other | `t-app` for `role` / `shape`. |
+
+## Basic usage
+
+```vue
+<t-skeleton width="100%" height="12px" />
+```
+
+## Props
+
+| Prop     | Type               | Default  | Description          |
+| -------- | ------------------ | -------- | -------------------- |
+| `width`  | `string \| number` | `"100%"` | Width (number = px). |
+| `height` | `string \| number` | `"1rem"` | Height.              |
+| `role`   | `string`           | —        | Theme.               |
+| `shape`  | `string`           | —        | Shape.               |
+
+**Type source:** `src/components/skeleton/skeleton.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None._
+
+## Style / class notes
+
+Variables `--<prefix>-skeleton-width`, `--<prefix>-skeleton-height` via `property(["skeleton","width"])` / `height`.
+
+## See also
+
+- Source: `src/components/skeleton`