@toife/vue 3.1.5 → 3.2.0

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

@@ -1,49 +0,0 @@
-import { shallowRef } from "vue";
-import { type RouteComponent, type RouteLocationMatched } from "vue-router";
-import { type RouteStack } from "../route.type";
-
-const stack = shallowRef<RouteStack[]>([]);
-
-/** Recursively builds a nested stack from vue-router `matched` for the navigator. */
-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
-  if (current.length > 1 && current[current.length - 2]?.name === matched[0].name) {
-    current.pop();
-  }
-
-  // Same route record: update nested stack only
-  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);
-  }
-  // Push a new segment (forward navigation)
-  else {
-    const name = String(matched[0].name);
-    const component = matched[0].components as RouteComponent;
-    matched.shift();
-    current.push({
-      name,
-      component,
-      stack: buildTree(matched, []),
-    });
-  }
-
-  return current;
-};
-
-export const useRouteWrapper = () => {
-  const updateRoutes = (matched: RouteLocationMatched[]) => {
-    stack.value = buildTree([...matched], [...stack.value]);
-  };
-
-  return {
-    stack,
-    updateRoutes,
-  };
-};

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

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

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

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

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

@@ -1,45 +0,0 @@
-<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";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<RouteWrapperProps>(), {
-  homeRouteName: "home",
-});
-const { updateRoutes, stack } = useRouteWrapper();
-const route = useRoute();
-const router = useRouter();
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => route.matched,
-  () => {
-    updateRoutes(route.matched);
-  }
-);
-
-onMounted(() => {
-  // Add home route to stack
-  const homeName = props.homeRouteName;
-
-  if (route.name === homeName) {
-    updateRoutes(route.matched);
-  } else {
-    const homeLocation = router.resolve({ name: homeName });
-    if (homeLocation.matched.length > 0) {
-      updateRoutes(homeLocation.matched);
-    }
-
-    // Apply current route to stack
-    setTimeout(() => {
-      updateRoutes(route.matched);
-    }, 50);
-  }
-});
-</script>

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

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

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

@@ -1,9 +0,0 @@
-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,
-    stack: clone(item.stack),
-  })) as RouteStack[];
-};

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

@@ -1,7 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<div v-bind="wrapperAttrs">
-  <div v-bind="contentAttrs" @pointerup="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.scss

@@ -1,53 +0,0 @@
-@use "@toife/sass-layer" 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 - 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");
-$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: rgba(#{$segmented-field-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: rgba(#{$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

@@ -1,29 +0,0 @@
-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

@@ -1,145 +0,0 @@
-<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 { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-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);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const keepValue = ref<string[]>([]);
-const fields = ref<InstanceType<typeof Field>[]>([]);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-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: [
-      cssPrefix("segmented-field-wrapper"),
-      cssPrefix(["layer", "segmented-field"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      props.variant,
-      props.size,
-      { disabled: props.disabled },
-    ],
-  };
-});
-
-const contentAttrs = {
-  class: [cssPrefix("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: [cssPrefix("segmented-field-message")],
-} as const;
-
-const helpAttrs = {
-  class: [cssPrefix("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/select/index.ts

@@ -1,2 +0,0 @@
-export { default as Select } from "./select.vue";
-export * from "./select.type";

package/src/components/select/select.html

@@ -1,29 +0,0 @@
-<div v-bind="selectAttrs">
-  <Dropdown v-bind="dropdownAttrs" v-model="visible">
-    <template #trigger="{ toggle, isOpen }">
-      <Field
-        :role="role"
-        variant="outline"
-        @pointerup="toggle"
-        v-bind="fieldAttrs"
-        :class="{focus: isOpen}"
-      >
-        <template #end-input>
-          <span v-bind="selectIconAttrs" :class="{open: isOpen}"></span>
-        </template>
-      </Field>
-    </template>
-    <button
-      v-for="option in options"
-      :key="option.value"
-      type="button"
-      :disabled="option.disabled"
-      v-bind="selectOptionAttrs"
-      @pointerup="pickOption(option)"
-    >
-      {{ option.label }}
-    </button>
-  </Dropdown>
-  <div v-bind="selectMessageAttrs" v-if="message">{{ message }}</div>
-  <div v-bind="selectHelpAttrs" v-if="help">{{ help }}</div>
-</div>

package/src/components/select/select.scss

@@ -1,129 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$select: sass.fn-naming-prefix("select");
-$select-icon: sass.fn-naming-prefix("select-icon");
-$select-option: sass.fn-naming-prefix("select-option");
-$select-message: sass.fn-naming-prefix("select-message");
-$select-help: sass.fn-naming-prefix("select-help");
-$field: sass.fn-naming-prefix("field");
-$field-input: sass.fn-naming-prefix("field-input");
-
-// Property name
-$app-color: sass.fn-naming-var("app", "color");
-$spacing-x: sass.fn-naming-var("spacing", "x");
-$spacing-y: sass.fn-naming-var("spacing", "y");
-$size-coefficient-x: sass.fn-naming-var("coefficient-x");
-$size-coefficient-y: sass.fn-naming-var("coefficient-y");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-
-$select-background-color: sass.fn-naming-var("select", "background-color");
-$select-background-color-hover: sass.fn-naming-var("select", "background-color", "hover");
-$select-background-color-focus: sass.fn-naming-var("select", "background-color", "focus");
-$select-background-color-active: sass.fn-naming-var("select", "background-color", "active");
-$select-color: sass.fn-naming-var("select", "color");
-$select-color-disabled: sass.fn-naming-var("select", "color", "disabled");
-$select-border-color: sass.fn-naming-var("select", "border-color");
-$select-message-color: sass.fn-naming-var("select", "message-color");
-
-.#{$select} {
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  .#{$select-icon} {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-inline-end: calc(#{$spacing-x} * #{$size-coefficient-x} * 0.5);
-    color: inherit;
-    pointer-events: none;
-    width: 0.6rem;
-    height: 0.6rem;
-    border-radius: 0.1rem;
-    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;
-    transform-origin: center;
-
-    &.open {
-      transform: rotate(225deg);
-    }
-
-    &:not(.open) {
-      transform: rotate(45deg);
-    }
-  }
-
-  .#{$select-option} {
-    display: block;
-    width: 100%;
-    padding: calc(var(--t-spacing-y)) calc(var(--t-spacing-x) * var(--t-coefficient-x));
-    text-align: var(--t-text-align);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    background: transparent;
-    cursor: pointer;
-    color: rgba(#{$select-color});
-    background-color: rgba(#{$select-background-color});
-    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;
-
-    &:not(:disabled):not(.disabled):not(.readonly) {
-      &:hover,
-      &.hover {
-        background: rgba(#{$select-background-color-hover});
-      }
-
-      &:focus,
-      &.focus {
-        background: rgba(#{$select-background-color-focus});
-      }
-
-      &:active,
-      &.active {
-        background: rgba(#{$select-background-color-active});
-      }
-    }
-
-    &:disabled,
-    &.disabled {
-      cursor: not-allowed;
-      color: rgba(#{$select-color-disabled});
-    }
-  }
-
-  // Message
-  .#{$select-message} {
-    color: rgba(#{$select-message-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
-  .#{$select-help} {
-    color: rgba(#{$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;
-  }
-}

package/src/components/select/select.type.ts

@@ -1,45 +0,0 @@
-import type { FieldSize, FieldVariant } from "../field";
-import type { AppDirection } from "../app";
-
-export type SelectVariant = FieldVariant;
-export type SelectSize = FieldSize;
-
-export type SelectOption = {
-  label?: string;
-  value: string;
-  disabled?: boolean;
-};
-
-export type SelectProps = {
-  // Wrapper
-  modelValue?: string;
-  name?: string;
-  variant?: FieldVariant;
-  role?: string;
-  shape?: string;
-  size?: FieldSize;
-  shadow?: boolean;
-  direction?: AppDirection;
-
-  // Input
-  id?: string;
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  autocomplete?: string;
-  tabindex?: number | string;
-  line?: number | string;
-  maxLine?: number | string;
-
-  // Support
-  message?: string;
-  help?: string;
-
-  // Data
-  options: Array<SelectOption>;
-};
-
-export type SelectEmit = {
-  (e: "update:modelValue", value: string): void;
-  (e: "select", option: SelectOption): void;
-};