@toife/vue 2.2.0 → 3.0.1

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: skeleton
+$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("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};
+  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", "skeleton"]),
+      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.md

@@ -0,0 +1,57 @@
+# `<t-switch>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Boolean toggle with `v-model`, keyboard support, and basic ARIA.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-switch v-model="on">Notifications</t-switch>
+```
+
+## Props
+
+| Prop         | Type      | Default | Description           |
+| ------------ | --------- | ------- | --------------------- |
+| `modelValue` | `boolean` | `false` | On state.             |
+| `role`       | `string`  | —       | Theme when on.        |
+| `shape`      | `string`  | —       | Shape.                |
+| `disabled`   | `boolean` | —       | _(optional in types)_ |
+| `readonly`   | `boolean` | `false` | Read-only.            |
+| `shadow`     | `boolean` | —       | Default from app.     |
+
+**Type source:** `src/components/switch/switch.type.ts`
+
+## Events (emits)
+
+| Event               | Payload   | Description   |
+| ------------------- | --------- | ------------- |
+| `update:modelValue` | `boolean` | Toggle state. |
+
+## Slots
+
+| Slot      | Description             |
+| --------- | ----------------------- |
+| `default` | Label beside the track. |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Accessibility (a11y)
+
+`role="switch"`, `aria-checked`, Space/Enter.
+
+## See also
+
+- Source: `src/components/switch`

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 (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");
+$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,81 @@
+<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 switchWrapperAttrs = computed(() => {
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+  return {
+    class: [
+      withPrefix("switch-wrapper"),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+        shadow,
+        focus: isFocused.value,
+        on: props.modelValue,
+      },
+    ],
+  };
+});
+
+const switchAttrs = computed(() => {
+  const shape = props.shape || appState?.shape.value || "";
+  const baseRole = appState?.role.value || "";
+  const role = props.role || baseRole;
+  return {
+    class: [
+      withPrefix(["layer", "switch"]),
+      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["shape", shape]),
+      withPrefix("switch"),
+    ],
+  };
+});
+
+const switchIconAttrs = {
+  class: [withPrefix("switch-icon")],
+} as const;
+
+/// 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";

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

@@ -0,0 +1,2 @@
+export { default as Tab } from "./tab.vue";
+export type { TabProps } from "./tab.type";

package/src/components/tabs/tab/tab.html

@@ -0,0 +1,5 @@
+<li v-bind="tabAttrs">
+  <CustomButton block :role="role" :shape="shape" @click="handleClick">
+    <slot />
+  </CustomButton>
+</li>

package/src/components/tabs/tab/tab.md

@@ -0,0 +1,52 @@
+# `Tab`
+
+> **Not** registered by `createToife()` — `import { Tab, Tabs } from "@toife/vue"` (see package README).
+
+## Description
+
+One item in `t-tabs`: renders `<li>` + `t-button`; click calls the provider’s `setValue`.
+
+## Requirements / dependencies
+
+| Item  | Notes                    |
+| ----- | ------------------------ |
+| Vue   | ^3.5                     |
+| Other | Must be inside `t-tabs`. |
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import { Tabs, Tab } from "@toife/vue";
+</script>
+<template>
+  <Tabs v-model="active">
+    <Tab value="1">One</Tab>
+    <Tab value="2" disabled>Two</Tab>
+  </Tabs>
+</template>
+```
+
+## Props
+
+| Prop       | Type      | Default | Description                           |
+| ---------- | --------- | ------- | ------------------------------------- |
+| `value`    | `string`  | —       | Tab id (matches `Tabs` `modelValue`). |
+| `disabled` | `boolean` | `false` | Disables selection.                   |
+
+**Type source:** `src/components/tabs/tab/tab.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                  |
+| --------- | ---------------------------- |
+| `default` | Tab label (inside `Button`). |
+
+## See also
+
+- Source: `src/components/tabs/tab`
+- [tabs.md](../tabs/tabs.md)

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

@@ -0,0 +1,5 @@
+// Define
+export type TabProps = {
+  value?: string;
+  disabled?: boolean;
+};

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

@@ -0,0 +1,38 @@
+<template src="./tab.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { Button as CustomButton } from "../../button";
+import { type TabProps } from "./tab.type";
+import { withPrefix } from "../../../utils";
+import { type TabsProviderState, TABS_PROVIDER_STATE_KEY } from "../tabs";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<TabProps>(), {
+  disabled: false,
+});
+const tabsState = inject<TabsProviderState>(TABS_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => tabsState?.role.value || "");
+const shape = computed(() => tabsState?.shape.value || "");
+const isActive = computed(() => tabsState?.activeValue.value === props.value);
+const tabAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix("tab"),
+      {
+        active: isActive.value,
+      },
+    ],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const handleClick = () => {
+  if (props.disabled) return;
+  tabsState?.setValue(props.value || "");
+};
+</script>

package/src/components/tabs/tabs/index.ts

@@ -0,0 +1,9 @@
+export { default as Tabs } from "./tabs.vue";
+export type {
+  TabsProps,
+  TabsEmit,
+  TabsProviderState,
+  TabsVariant,
+  TabsPlacement,
+} from "./tabs.type";
+export { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";

package/src/components/tabs/tabs/tabs.constants.ts

@@ -0,0 +1 @@
+export const TABS_PROVIDER_STATE_KEY = "tabs-state";

package/src/components/tabs/tabs/tabs.html

@@ -0,0 +1,3 @@
+<ul ref="container" v-bind="tabsAttrs">
+  <slot />
+</ul>

package/src/components/tabs/tabs/tabs.md

@@ -0,0 +1,59 @@
+# `<t-tabs>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Tab bar: `modelValue` is the active `Tab`’s `value`; underline/highlight position is measured from the DOM (`getBoundingClientRect`). Provides state to child `Tab` components.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                                  |
+| ----- | ---------------------------------------------------------------------- |
+| Vue   | ^3.5                                                                   |
+| Other | Children should be `Tab` (named export) — see [tab.md](../tab/tab.md). |
+
+## Basic usage
+
+```vue
+<t-tabs v-model="tab" variant="underline" placement="top-start">
+  <Tab value="a">Tab A</Tab>
+  <Tab value="b">Tab B</Tab>
+</t-tabs>
+```
+
+## Props
+
+| Prop             | Type            | Default       | Description                          |
+| ---------------- | --------------- | ------------- | ------------------------------------ |
+| `modelValue`     | `string`        | `""`          | Active tab value (`v-model`).        |
+| `placement`      | `TabsPlacement` | `"top-start"` | Bar placement + highlight direction. |
+| `variant`        | `TabsVariant`   | —             | `fill` \| `underline` \| `text`.     |
+| `role` / `shape` | `string`        | —             | Theme.                               |
+| `border`         | `number`        | `2`           | Underline thickness.                 |
+| `margin`         | `number[]`      | `[0, 0]`      | Margin around highlight.             |
+| `divider`        | `boolean`       | —             | Default from app.                    |
+| `transition`     | `boolean`       | `true`        | Animate highlight.                   |
+
+**Type source:** `src/components/tabs/tabs/tabs.type.ts`
+
+## Events (emits)
+
+| Event               | Payload  | Description |
+| ------------------- | -------- | ----------- |
+| `update:modelValue` | `string` | Tab change. |
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | `Tab` children. |
+
+## Provide / inject
+
+`TABS_PROVIDER_STATE_KEY`: `activeValue`, `role`, `shape`, `setValue`.
+
+## See also
+
+- Source: `src/components/tabs/tabs`
+- [tab.md](../tab/tab.md)