@toife/vue 2.2.0 → 3.0.0

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

@@ -0,0 +1,43 @@
+<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,
+  (matched) => {
+    updateRoutes(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

@@ -0,0 +1,7 @@
+import { RouteComponent } from "vue-router";
+
+export type RouteStack = {
+  name: string;
+  component: RouteComponent;
+  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.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("item", "background-color");
+$base-color: sass.fn-naming-var("base", "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(#{$base-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,151 @@
+<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 role = computed(() => props.role || appState?.role.value || "");
+const shape = computed(() => props.shape || appState?.shape.value || "");
+const shadow = computed(
+  () => (props.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false
+);
+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(() => {
+  return {
+    class: [
+      withPrefix("segmented-field-wrapper"),
+      withPrefix(["layer", "item"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      props.variant,
+      props.size,
+      { disabled: props.disabled },
+    ],
+  };
+});
+
+const contentAttrs = computed(() => {
+  return {
+    class: [withPrefix("segmented-field-content")],
+  };
+});
+
+const fieldAttrs = computed(() => {
+  return {
+    variant: props.variant,
+    size: props.size,
+    disabled: props.disabled,
+    readonly: props.readonly,
+    shadow: shadow.value,
+    shape: shape.value,
+    role: role.value,
+    type: props.type,
+  };
+});
+
+const messageAttrs = computed(() => ({
+  class: [withPrefix("segmented-field-message")],
+}));
+
+const helpAttrs = computed(() => ({
+  class: [
+    withPrefix("segmented-field-help"),
+    withPrefix(["layer", "surface"]),
+    withPrefix(["role", "mode"]),
+  ],
+}));
+
+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.scss

@@ -0,0 +1,45 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$skeleton: sass.fn-naming-prefix("skeleton");
+
+// Properties - layer: item
+$width: sass.fn-naming-var("skeleton", "width");
+$height: sass.fn-naming-var("skeleton", "height");
+$border-radius: sass.fn-naming-var("border-radius");
+$background-color: sass.fn-naming-var("item", "background-color");
+$background-color-subtle: sass.fn-naming-var("item", "background-color", "subtle");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$skeleton} {
+  width: #{$width};
+  height: #{$height};
+  position: relative;
+  overflow: hidden;
+  border-radius: #{$border-radius};
+  background-color: rgba(#{$background-color-subtle}, 0.2);
+  display: inline-block;
+  line-height: 0;
+  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;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, rgba(#{$background-color}, 1), transparent);
+    opacity: 0.2;
+    animation: shimmer 1.2s infinite;
+  }
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

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

@@ -0,0 +1,7 @@
+// Define
+export type SkeletonProps = {
+  width?: string | number;
+  height?: string | number;
+  role?: string;
+  shape?: string;
+};

package/src/components/skeleton/skeleton.vue

@@ -0,0 +1,38 @@
+<style lang="scss" src="./skeleton.scss" scoped></style>
+<template src="./skeleton.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type SkeletonProps } from "./skeleton.type";
+import { property, withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<SkeletonProps>(), {
+  width: "100%",
+  height: "1rem",
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const skeletonAttrs = computed(() => {
+  const shape = props.shape || appState?.shape.value || "";
+  const role = props.role || appState?.role.value || "";
+
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("skeleton"),
+    ],
+    style: {
+      [property(["skeleton", "width"])]:
+        props.width + (typeof props.width === "number" ? "px" : ""),
+      [property(["skeleton", "height"])]:
+        props.height + (typeof props.height === "number" ? "px" : ""),
+    },
+  };
+});
+</script>

package/src/components/switch/index.ts

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

package/src/components/switch/switch.html

@@ -0,0 +1,15 @@
+<div
+  v-bind="switchWrapperAttrs"
+  :tabindex="disabled ? -1 : 0"
+  role="switch"
+  :aria-checked="props.modelValue"
+  @click="onSwitch"
+  @focus="onFocus"
+  @blur="onBlur"
+  @keydown="onKeydown"
+>
+  <div v-bind="switchAttrs">
+    <div v-bind="switchIconAttrs"></div>
+  </div>
+  <slot />
+</div>

package/src/components/switch/switch.scss

@@ -0,0 +1,134 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$switch: sass.fn-naming-prefix("switch");
+$switch-icon: sass.fn-naming-prefix("switch-icon");
+$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: surface (inactive), item (on); switch icon: item
+$background-color: sass.fn-naming-var("item", "background-color");
+$background-color-hover: sass.fn-naming-var("item", "background-color", "soft");
+$background-color-inactive: sass.fn-naming-var("item", "background-color", "subtle");
+$background-color-disabled: sass.fn-naming-var("item", "background-color", "subtle");
+$background-color-contrast: sass.fn-naming-var("item", "background-color", "contrast");
+$border-color: sass.fn-naming-var("item", "border-color");
+$color-hover: sass.fn-naming-var("item", "color", "strong");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: sass.fn-naming-var("border-radius");
+$spacing-x: sass.fn-naming-var("spacing", "x");
+
+.#{$switch-wrapper} {
+  display: inline-flex;
+  gap: calc(#{$spacing-x} * 2);
+  align-items: center;
+  cursor: pointer;
+  box-shadow: none !important;
+
+  .#{$switch} {
+    height: 1.5rem;
+    aspect-ratio: 11/6;
+    position: relative;
+    overflow: hidden;
+    transition:
+      background-color #{$transition-duration} ease,
+      color #{$transition-duration} ease,
+      border-color #{$transition-duration} ease,
+      border-radius #{$transition-duration} ease,
+      box-shadow #{$transition-duration} ease;
+    border-radius: #{$border-radius};
+
+    .#{$switch-icon} {
+      height: calc(100% - 0.3rem);
+      position: absolute;
+      top: 0;
+      background-color: rgb(#{$background-color-contrast});
+      border-radius: #{$border-radius};
+      aspect-ratio: 1/1;
+      margin: 0.15rem;
+      transition:
+        background-color #{$transition-duration} ease,
+        color #{$transition-duration} ease,
+        border-color #{$transition-duration} ease,
+        border-radius #{$transition-duration} ease,
+        transform #{$transition-duration} ease;
+    }
+
+    &.#{$shape-rounded} {
+      .#{$switch-icon} {
+        border-radius: calc(#{$border-radius} - 10%);
+      }
+    }
+
+    &.#{$shape-pill} {
+      .#{$switch-icon} {
+        border-radius: 50%;
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .#{$switch} {
+      background-color: rgb(#{$background-color-disabled});
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+  }
+
+  &.readonly {
+    cursor: default;
+
+    .#{$switch} {
+      cursor: default;
+    }
+  }
+
+  &:not(.on) {
+    .#{$switch} {
+      background-color: rgb(#{$background-color-inactive});
+
+      .#{$switch-icon} {
+        left: 0;
+      }
+
+      &:not(.disabled):not(.readonly):hover {
+        background-color: rgb(#{$background-color-hover});
+      }
+    }
+  }
+
+  &.on {
+    .#{$switch} {
+      background-color: rgb(#{$background-color});
+
+      .#{$switch-icon} {
+        right: 0;
+        animation: shrink #{$transition-duration} linear;
+        animation-fill-mode: forwards;
+      }
+    }
+  }
+
+  &.focus {
+    &.shadow {
+      .#{$switch} {
+        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      }
+    }
+  }
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,13 @@
+// Define
+export type SwitchProps = {
+  modelValue?: boolean;
+  role?: string;
+  shape?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  shadow?: boolean;
+};
+
+export type SwitchEmit = {
+  (e: "update:modelValue", value: boolean): void;
+};

package/src/components/switch/switch.vue

@@ -0,0 +1,92 @@
+<style lang="scss" src="./switch.scss" scoped></style>
+<template src="./switch.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import type { SwitchProps, SwitchEmit } from "./switch.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<SwitchProps>(), {
+  modelValue: false,
+  readonly: false,
+  shadow: undefined,
+});
+const emit = defineEmits<SwitchEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+});
+
+const switchWrapperAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix("switch-wrapper"),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+        shadow: shadow.value,
+        focus: isFocused.value,
+        on: props.modelValue,
+      },
+    ],
+  };
+});
+
+const switchAttrs = computed(() => {
+  const shape = props.shape || appState?.shape.value || "";
+
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix([
+        "role",
+        props.modelValue && !props.disabled ? role.value : appState?.role.value || "",
+      ]),
+      withPrefix(["shape", shape]),
+      withPrefix("switch"),
+    ],
+  };
+});
+
+const switchIconAttrs = computed(() => {
+  return {
+    class: [withPrefix("switch-icon")],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const onSwitch = () => {
+  if (props.disabled || props.readonly) return;
+  emit("update:modelValue", !props.modelValue);
+};
+
+const onFocus = () => {
+  if (props.disabled || props.readonly) return;
+  isFocused.value = true;
+};
+
+const onBlur = () => {
+  if (props.disabled || props.readonly) return;
+  isFocused.value = false;
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key !== " " && e.key !== "Enter") return;
+  e.preventDefault();
+  onSwitch();
+};
+</script>

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./tabs";
+export * from "./tab";