@toife/vue 3.1.3 → 3.1.4

package/src/components/switch/switch.vue

@@ -10,6 +10,7 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<SwitchProps>(), {
   modelValue: false,
+  size: "standard",
   readonly: false,
   shadow: undefined,
 });
@@ -47,6 +48,7 @@ const switchAttrs = computed(() => {
       withPrefix(["layer", "switch"]),
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
+      withPrefix(["size", props.size]),
       withPrefix("switch"),
     ],
   };

package/src/components/tabs/tabs/tabs.scss

@@ -6,23 +6,55 @@ $tab: sass.fn-naming-prefix("tab");
 $button: sass.fn-naming-prefix("button");
 
 // Property name - layer: tabs
-$tabs-color: sass.fn-naming-var("tabs", "color");
-$tabs-background-color: sass.fn-naming-var("tabs", "background-color");
-$tabs-border-color: sass.fn-naming-var("tabs", "border-color");
-
-$space-x: sass.fn-naming-var("spacing", "x");
-$space-y: sass.fn-naming-var("spacing", "y");
-$border-radius: sass.fn-naming-var("border-radius");
+// Underline
+$tabs-underline-color: sass.fn-naming-var("tabs", "underline", "color");
+$tabs-underline-color-active: sass.fn-naming-var("tabs", "underline", "color", "active");
+$tabs-underline-color-hover: sass.fn-naming-var("tabs", "underline", "color", "hover");
+$tabs-underline-color-focus: sass.fn-naming-var("tabs", "underline", "color", "focus");
+$tabs-underline-color-disabled: sass.fn-naming-var("tabs", "underline", "color", "disabled");
+$tabs-underline-background-color: sass.fn-naming-var("tabs", "underline", "background-color");
+
+// Fill
+$tabs-fill-color: sass.fn-naming-var("tabs", "fill", "color");
+$tabs-fill-color-active: sass.fn-naming-var("tabs", "fill", "color", "active");
+$tabs-fill-color-hover: sass.fn-naming-var("tabs", "fill", "color", "hover");
+$tabs-fill-color-focus: sass.fn-naming-var("tabs", "fill", "color", "focus");
+$tabs-fill-color-disabled: sass.fn-naming-var("tabs", "fill", "color", "disabled");
+
+$tabs-fill-background-color: sass.fn-naming-var("tabs", "fill", "background-color");
+$tabs-fill-background-color-active: sass.fn-naming-var(
+  "tabs",
+  "fill",
+  "background-color",
+  "active"
+);
+$tabs-fill-background-color-hover: sass.fn-naming-var("tabs", "fill", "background-color", "hover");
+$tabs-fill-background-color-focus: sass.fn-naming-var("tabs", "fill", "background-color", "focus");
+$tabs-fill-background-color-disabled: sass.fn-naming-var(
+  "tabs",
+  "fill",
+  "background-color",
+  "disabled"
+);
+
+// Text
+$tabs-text-color: sass.fn-naming-var("tabs", "text", "color");
+$tabs-text-color-active: sass.fn-naming-var("tabs", "text", "color", "active");
+$tabs-text-color-hover: sass.fn-naming-var("tabs", "text", "color", "hover");
+$tabs-text-color-focus: sass.fn-naming-var("tabs", "text", "color", "focus");
+$tabs-text-color-disabled: sass.fn-naming-var("tabs", "text", "color", "disabled");
+
+$radius-ratio: sass.fn-naming-var("radius-ratio");
 $border-width: sass.fn-naming-var("stroke", "width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-
+$radius-size: sass.fn-naming-var("radius-size");
 // layer: highlight (indicator geometry)
-$highlight-top: sass.fn-naming-var("highlight", "top");
-$highlight-left: sass.fn-naming-var("highlight", "left");
-$highlight-width: sass.fn-naming-var("highlight", "width");
-$highlight-height: sass.fn-naming-var("highlight", "height");
-$highlight-space-x: sass.fn-naming-var("highlight", "space-x");
-$highlight-space-y: sass.fn-naming-var("highlight", "space-y");
+$highlight-top: sass.fn-naming-var("tabs", "highlight", "top");
+$highlight-left: sass.fn-naming-var("tabs", "highlight", "left");
+$highlight-width: sass.fn-naming-var("tabs", "highlight", "width");
+$highlight-height: sass.fn-naming-var("tabs", "highlight", "height");
+$highlight-space-x: sass.fn-naming-var("tabs", "highlight", "space-x");
+$highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
 
 .#{$tabs} {
   display: flex;
@@ -53,8 +85,9 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     height: #{$highlight-height};
     transform: translate(#{$highlight-left}, #{$highlight-top});
     box-sizing: border-box;
-    background-color: rgb(#{$tabs-background-color});
-    border-radius: #{$border-radius};
+    border-radius: calc(
+      min(#{$highlight-width}, #{$highlight-height}, #{$radius-size}) * #{$radius-ratio}
+    );
   }
 
   &.top-start,
@@ -88,6 +121,8 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     flex-direction: row;
     height: fit-content;
     width: 100%;
+    padding-top: #{$highlight-space-y};
+    padding-bottom: #{$highlight-space-y};
 
     > * {
       height: 100%;
@@ -100,6 +135,8 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
   &.right-start,
   &.right-center,
   &.right-end {
+    padding-left: #{$highlight-space-x};
+    padding-right: #{$highlight-space-x};
     flex-direction: column;
     width: fit-content;
     height: 100%;
@@ -109,81 +146,81 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     }
   }
 
-  &.divider {
-    &.top-start,
-    &.top-center,
-    &.top-end {
-      border-bottom: #{$border-width} solid rgb(#{$tabs-border-color});
+  &.underline {
+    &::before {
+      background-color: rgb(#{$tabs-underline-background-color});
     }
 
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      border-top: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
+    :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgb(#{$tabs-underline-color});
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end {
-      border-right: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
+      &.active {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-active});
+        }
+      }
 
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      border-left: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
-  }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-hover});
+        }
+      }
 
-  &.underline {
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: #{$highlight-space-y};
-      padding-bottom: #{$highlight-space-y};
-    }
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-focus});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: #{$highlight-space-x};
-      padding-right: #{$highlight-space-x};
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-disabled});
+        }
+      }
     }
   }
 
   &.fill {
+    &::before {
+      background-color: rgb(#{$tabs-fill-background-color});
+    }
+
     :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgb(#{$tabs-fill-color});
+      }
+
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-color}) !important;
+          color: rgb(#{$tabs-fill-color-active});
         }
       }
-    }
 
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: calc(#{$highlight-space-y} + #{$space-y});
-      padding-bottom: calc(#{$highlight-space-y} + #{$space-y});
-    }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgb(#{$tabs-fill-color-hover});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: calc(#{$highlight-space-x} + #{$space-x});
-      padding-right: calc(#{$highlight-space-x} + #{$space-x});
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgb(#{$tabs-fill-color-focus});
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgb(#{$tabs-fill-color-disabled});
+        }
+      }
     }
   }
 
@@ -193,32 +230,36 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     }
 
     :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgb(#{$tabs-text-color});
+      }
+
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-background-color});
-          text-shadow: 0 0 rgb(#{$tabs-background-color});
+          color: rgb(#{$tabs-text-color-active});
         }
       }
-    }
 
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: calc(#{$highlight-space-y} + #{$space-y});
-      padding-bottom: calc(#{$highlight-space-y} + #{$space-y});
-    }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgb(#{$tabs-text-color-hover});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: calc(#{$highlight-space-x} + #{$space-x});
-      padding-right: calc(#{$highlight-space-x} + #{$space-x});
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgb(#{$tabs-text-color-focus});
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgb(#{$tabs-text-color-disabled});
+        }
+      }
     }
   }
 
@@ -256,7 +297,6 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     align-items: center;
 
     .#{$button} {
-      padding: #{$space-y} calc(#{$space-x} * 4);
       color: unset;
       cursor: pointer;
       background-color: transparent !important;

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

@@ -20,7 +20,6 @@ export type TabsProps = {
   border?: number;
   margin?: number[];
   shape?: string;
-  divider?: boolean;
   transition?: boolean;
 };
 

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

@@ -13,7 +13,6 @@ const props = withDefaults(defineProps<TabsProps>(), {
   placement: "top-start",
   margin: () => [0, 0],
   border: 2,
-  divider: undefined,
   transition: true,
 });
 const emit = defineEmits<TabsEmit>();
@@ -42,8 +41,6 @@ const activeValue = computed(() => {
 });
 
 const tabsAttrs = computed(() => {
-  const divider =
-    (props.divider !== undefined ? props.divider : appState?.divider.value || false) ?? false;
   let l = left.value;
   let t = top.value;
   let w = width.value;
@@ -91,17 +88,16 @@ const tabsAttrs = computed(() => {
       props.variant,
       props.placement,
       {
-        divider,
         transition: props.transition,
       },
     ],
     style: {
-      [property("highlight-top")]: typeof t === "string" ? t : t + "px",
-      [property("highlight-left")]: typeof l === "string" ? l : l + "px",
-      [property("highlight-width")]: typeof w === "string" ? w : w + "px",
-      [property("highlight-height")]: typeof h === "string" ? h : h + "px",
-      [property("highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
-      [property("highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
+      [property("tabs-highlight-top")]: typeof t === "string" ? t : t + "px",
+      [property("tabs-highlight-left")]: typeof l === "string" ? l : l + "px",
+      [property("tabs-highlight-width")]: typeof w === "string" ? w : w + "px",
+      [property("tabs-highlight-height")]: typeof h === "string" ? h : h + "px",
+      [property("tabs-highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
+      [property("tabs-highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
     },
   };
 });

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

@@ -10,7 +10,8 @@ $toast-border-color: sass.fn-naming-var("toast", "border-color");
 
 $space-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $max-height: sass.fn-naming-var("overlay", "max-height");
 
@@ -33,7 +34,7 @@ $max-height: sass.fn-naming-var("overlay", "max-height");
   max-height: #{$max-height};
   max-width: 100%;
   padding: calc(#{$space-x} * 2) calc(#{$space-x} * 4);
-  border-radius: #{$border-radius};
+  border-radius: calc(min(#{$radius-size}, #{$max-height}) * #{$radius-ratio});
 
   &.closing {
     opacity: 0;

package/src/components/toolbar/toolbar.scss

@@ -26,7 +26,7 @@ $border: #{$border-width} solid rgb(#{$toolbar-border-color});
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
 
-  &.with-safe-area {
+  &.safe {
     &.right {
       padding-right: #{$safe-area-right};
     }

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

@@ -1,7 +1,7 @@
 // Type definitions
 export type ToolbarProps = {
   placement?: string | null;
-  safeArea?: boolean;
+  safe?: boolean;
   role?: string;
   divider?: boolean;
 };

package/src/components/toolbar/toolbar.vue

@@ -12,7 +12,7 @@ import { CABLE_PROVIDER_STATE_KEY } from "../cable";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ToolbarProps>(), {
   placement: null,
-  safeArea: true,
+  safe: true,
   divider: undefined,
 });
 const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
@@ -32,7 +32,7 @@ const toolbarAttrs = computed(() => {
       withPrefix("toolbar"),
       placement,
       {
-        "with-safe-area": props.safeArea,
+        safe: props.safe,
         divider: divider.value,
       },
     ],

package/src/factory.ts

@@ -16,10 +16,11 @@ import {
   Dropdown,
   Field,
   Flex,
+  FlexItem,
   FormGroup,
   GestureIndicator,
   Grid,
-  Cell,
+  GridItem,
   Image,
   Modal,
   Page,
@@ -33,6 +34,7 @@ import {
   RouteOutlet,
   SegmentedField,
   Select,
+  SlideRange,
   Skeleton,
   Switch,
   Tab,
@@ -67,10 +69,11 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "dropdown", Dropdown);
       app.component(prefix + "field", Field);
       app.component(prefix + "flex", Flex);
+      app.component(prefix + "flex-item", FlexItem);
       app.component(prefix + "form-group", FormGroup);
       app.component(prefix + "gesture-indicator", GestureIndicator);
       app.component(prefix + "grid", Grid);
-      app.component(prefix + "cell", Cell);
+      app.component(prefix + "grid-item", GridItem);
       app.component(prefix + "image", Image);
       app.component(prefix + "modal", Modal);
       app.component(prefix + "page", Page);
@@ -82,6 +85,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "route-outlet", RouteOutlet);
       app.component(prefix + "segmented-field", SegmentedField);
       app.component(prefix + "select", Select);
+      app.component(prefix + "slide-range", SlideRange);
       app.component(prefix + "skeleton", Skeleton);
       app.component(prefix + "switch", Switch);
       app.component(prefix + "tab", Tab);

package/src/index.ts

@@ -1,4 +1,4 @@
 /// <reference path="./env.d.ts" />
 export * from "./factory";
-export * as utils from "./utils";
+export * from "./utils";
 export * from "./components";

package/src/components/action/action.md

@@ -1,115 +0,0 @@
-# `<t-action>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Action sheet: groups of buttons rendered inside `Present`, typically for quick choices or secondary menus. Control via props or the `useAction()` composable wired by `t-app`.
-
-## Requirements / dependencies
-
-| Item  | Notes                                                                                     |
-| ----- | ----------------------------------------------------------------------------------------- |
-| Vue   | ^3.5                                                                                      |
-| Other | Prefer `t-app` for theme/context (`inject`). Depends on `Present`, `FormGroup`, `Button`. |
-
-## Basic usage
-
-```vue
-<template>
-  <t-action
-    :visible="show"
-    :actions="[[{ text: 'Confirm', variant: 'fill', handler: onOk }]]"
-    placement="bottom"
-    @close="show = false"
-    @choose="onChoose"
-  />
-</template>
-```
-
-Or open via `useAction()` (wired by `t-app`):
-
-```ts
-import { useAction } from "@toife/vue";
-
-const action = useAction();
-action.open({
-  actions: [[{ text: "OK", handler: () => {} }]],
-  onClose: () => {},
-  onChoose: (btn) => {},
-});
-```
-
-## Props
-
-| Prop        | Type                    | Default      | Description                                                    |
-| ----------- | ----------------------- | ------------ | -------------------------------------------------------------- |
-| `visible`   | `boolean`               | `false`      | Show the action layer.                                         |
-| `dismiss`   | `string[]`              | —            | `Present` close reasons that emit `close` (e.g. `'backdrop'`). |
-| `actions`   | `Array<ActionButton[]>` | _(required)_ | Rows of button groups; each row is an array of buttons.        |
-| `role`      | `string`                | —            | Theme role override; default from `t-app`.                     |
-| `shape`     | `string`                | —            | Shape override; default from `t-app`.                          |
-| `divider`   | `boolean`               | —            | Divider; default from `t-app`.                                 |
-| `shadow`    | `boolean`               | —            | Shadow; default from `t-app`.                                  |
-| `placement` | `PresentPlacement`      | `"bottom"`   | `Present` placement (`top`, `bottom`, …).                      |
-
-**Type source:** `src/components/action/action.type.ts`
-
-`ActionButton`: `text`, `role`, `variant`, `shadow`, `handler`, `data`.
-
-## Events (emits)
-
-| Event    | Payload             | Description                                               |
-| -------- | ------------------- | --------------------------------------------------------- |
-| `close`  | `type?: string`     | When `dismiss` matches the close reason.                  |
-| `choose` | `btn: ActionButton` | After a button is chosen (after that button’s `handler`). |
-
-## Slots
-
-| Slot   | Slot props | Description                                  |
-| ------ | ---------- | -------------------------------------------- |
-| `body` | —          | Replaces the default button layout entirely. |
-
-## `v-model`
-
-No `v-model` support.
-
-## Provide / inject / context
-
-Injects `APP_PROVIDER_STATE_KEY` from `t-app` for `divider`, `shadow`, `shape`, `role` when props are omitted.
-
-## Expose (template ref)
-
-Nothing exposed.
-
-## Special behavior
-
-- Backdrop close: if the payload is not in `dismiss`, a short `pop` animation runs instead of emitting `close`.
-
-## Accessibility (a11y)
-
-Inherits from `Present` (backdrop, focus). Buttons use inner `Button`.
-
-## Style / class notes
-
-BEM-style classes via `withPrefix`: `action`, `layer`, `surface`, `role`, `shape`, placement, `pop`, `divider`, `shadow`.
-
-## Advanced example
-
-```vue
-<t-action
-  :visible="open"
-  :dismiss="['backdrop']"
-  :actions="[
-    [{ text: 'Cancel', variant: 'text', handler: cancel }],
-    [{ text: 'Delete', variant: 'fill', role: 'danger', handler: remove }],
-  ]"
-  placement="bottom"
-  @close="(t) => console.log(t)"
-/>
-```
-
-## See also
-
-- Source: `src/components/action`
-- Composable: `action.composable.ts` (`useAction`)

package/src/components/app/app.md

@@ -1,77 +0,0 @@
-# `<t-app>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Library root layout: provides theme/context (`provide`) for descendants, mounts multiple `Toast` regions by placement, and hosts `Action` / `DecisionModal` when using `useAction` / `useDecisionModal`.
-
-## Requirements / dependencies
-
-| Item  | Notes                |
-| ----- | -------------------- |
-| Vue   | ^3.5                 |
-| Other | Router not required. |
-
-## Basic usage
-
-```vue
-<template>
-  <t-app>
-    <t-page>App content</t-page>
-  </t-app>
-</template>
-```
-
-## Props
-
-| Prop        | Type                | Default  | Description                                      |
-| ----------- | ------------------- | -------- | ------------------------------------------------ |
-| `shape`     | `string`            | `"pill"` | Default shape for children (buttons, fields, …). |
-| `divider`   | `boolean`           | `false`  | Default divider flag.                            |
-| `role`      | `string`            | `"mode"` | Default theme role.                              |
-| `shadow`    | `boolean`           | `false`  | Default shadow.                                  |
-| `triple`    | `boolean`           | `false`  | Layout flag (provided to children).              |
-| `direction` | `"left" \| "right"` | `"left"` | Direction (fields, …).                           |
-
-**Type source:** `src/components/app/app.type.ts`
-
-## Events (emits)
-
-_No public emits._
-
-## Slots
-
-| Slot      | Description                                           |
-| --------- | ----------------------------------------------------- |
-| `default` | Main app content.                                     |
-| `global`  | Extra slot (after default, before internal overlays). |
-
-## `v-model`
-
-No.
-
-## Provide / inject / context
-
-`provide(APP_PROVIDER_STATE_KEY)`: `{ shape, divider, role, shadow, triple, direction }` — children inject for consistent theming.
-
-## Expose
-
-Nothing.
-
-## Special behavior
-
-- Renders several `Toast` instances with fixed placements (top/bottom × start/center/end).
-- When `useAction()` / `useDecisionModal()` has `data`, renders the matching `Action` / `DecisionModal`.
-
-## Accessibility (a11y)
-
-Wrapper only; no special root role.
-
-## Style / class notes
-
-Classes: `layer`, `base`, `shape`, `app`.
-
-## See also
-
-- Source: `src/components/app`