@toife/vue 3.0.7 → 3.1.2

package/src/components/layout/cell/cell.md

@@ -0,0 +1,47 @@
+# `<t-grid-item>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Cell inside `<t-grid>`. Placement uses `grid-column` / `grid-row` via props or raw CSS strings.
+
+## Requirements / dependencies
+
+| Item   | Notes                                          |
+| ------ | ---------------------------------------------- |
+| Vue    | ^3.5                                           |
+| Parent | `<t-grid>` (or any `display: grid` container). |
+
+## Basic usage
+
+```vue
+<t-grid :columns="3">
+  <t-grid-item :column-span="2">Wide</t-grid-item>
+  <t-grid-item>Narrow</t-grid-item>
+</t-grid>
+```
+
+## Props
+
+| Prop          | Type     | Description                                   |
+| ------------- | -------- | --------------------------------------------- |
+| `column`      | `string` | Raw `grid-column` (overrides span/start/end). |
+| `row`         | `string` | Raw `grid-row`.                               |
+| `columnSpan`  | `number` | `span n` on the column axis.                  |
+| `rowSpan`     | `number` | `span n` on the row axis.                     |
+| `columnStart` | `number` | Grid line start (column).                     |
+| `columnEnd`   | `number` | Grid line end (column).                       |
+| `rowStart`    | `number` | Grid line start (row).                        |
+| `rowEnd`      | `number` | Grid line end (row).                          |
+
+## Slots
+
+| Slot      | Description   |
+| --------- | ------------- |
+| `default` | Cell content. |
+
+## See also
+
+- Source: `src/components/grid/grid-item`
+- `<t-grid>`

package/src/components/layout/cell/cell.scss

@@ -0,0 +1,54 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+// Class name
+$cell: sass.fn-naming-prefix("cell");
+
+// Base tokens (breakpoint "")
+$cell-row: sass.fn-naming-var("cell", "row");
+$cell-column: sass.fn-naming-var("cell", "column");
+$cell-justify: sass.fn-naming-var("cell", "justify");
+$cell-align: sass.fn-naming-var("cell", "align");
+$cell-grow: sass.fn-naming-var("cell", "grow");
+$cell-shrink: sass.fn-naming-var("cell", "shrink");
+$cell-basis: sass.fn-naming-var("cell", "basis");
+$cell-order: sass.fn-naming-var("cell", "order");
+
+.#{$cell} {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+  grid-column: #{$cell-column};
+  grid-row: #{$cell-row};
+  justify-self: #{$cell-justify};
+  align-self: #{$cell-align};
+  flex-grow: #{$cell-grow};
+  flex-shrink: #{$cell-shrink};
+  flex-basis: #{$cell-basis};
+  order: #{$cell-order};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      grid-column: #{sass.fn-naming-cascade-dvar(("cell", "column"), $bp-names, $i, $cell-column)};
+      grid-row: #{sass.fn-naming-cascade-dvar(("cell", "row"), $bp-names, $i, $cell-row)};
+      justify-self: #{sass.fn-naming-cascade-dvar(
+          ("cell", "justify"),
+          $bp-names,
+          $i,
+          $cell-justify
+        )};
+      align-self: #{sass.fn-naming-cascade-dvar(("cell", "align"), $bp-names, $i, $cell-align)};
+      flex-grow: #{sass.fn-naming-cascade-dvar(("cell", "grow"), $bp-names, $i, $cell-grow)};
+      flex-shrink: #{sass.fn-naming-cascade-dvar(("cell", "shrink"), $bp-names, $i, $cell-shrink)};
+      flex-basis: #{sass.fn-naming-cascade-dvar(("cell", "basis"), $bp-names, $i, $cell-basis)};
+      order: #{sass.fn-naming-cascade-dvar(("cell", "order"), $bp-names, $i, $cell-order)};
+    }
+  }
+}

package/src/components/layout/cell/cell.type.ts

@@ -0,0 +1,19 @@
+export type CellJustify = "start" | "end" | "center" | "stretch";
+export type CellAlign = "start" | "end" | "center" | "stretch";
+
+export type CellOption = {
+  breakpoint?: string;
+  row?: number;
+  column?: number;
+  justify?: CellJustify;
+  align?: CellAlign;
+  grow?: number;
+  shrink?: number;
+  basis?: string;
+  order?: number;
+};
+
+// Type definitions
+export type CellProps = {
+  options?: CellOption[];
+};

package/src/components/layout/cell/cell.vue

@@ -0,0 +1,35 @@
+<style lang="scss" src="./cell.scss" scoped></style>
+<template src="./cell.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } from "../../../utils";
+import type { CellProps } from "./cell.type";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<CellProps>(), {
+  options: () => [],
+});
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const cellAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [property(["cell", "row", option?.breakpoint || ""])]: option.row,
+      [property(["cell", "column", option?.breakpoint || ""])]: option.column,
+      [property(["cell", "justify", option?.breakpoint || ""])]: option.justify,
+      [property(["cell", "align", option?.breakpoint || ""])]: option.align,
+      [property(["cell", "flex-grow", option?.breakpoint || ""])]: option.grow,
+      [property(["cell", "flex-shrink", option?.breakpoint || ""])]: option.shrink,
+      [property(["cell", "flex-basis", option?.breakpoint || ""])]: option.basis,
+      [property(["cell", "order", option?.breakpoint || ""])]: option.order,
+    };
+  });
+
+  return {
+    class: [withPrefix("cell")],
+    style,
+  };
+});
+</script>

package/src/components/layout/cell/index.ts

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

package/src/components/layout/flex/flex.html

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

package/src/components/layout/flex/flex.scss

@@ -0,0 +1,59 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+/// Class name
+$flex: sass.fn-naming-prefix("flex");
+
+/// Base tokens (breakpoint "")
+$flex-gap: sass.fn-naming-var("flex", "gap");
+$flex-direction: sass.fn-naming-var("flex", "direction");
+$flex-wrap: sass.fn-naming-var("flex", "wrap");
+$flex-justify: sass.fn-naming-var("flex", "justify");
+$flex-align: sass.fn-naming-var("flex", "align");
+$flex-align-content: sass.fn-naming-var("flex", "align-content");
+
+.#{$flex} {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  gap: #{$flex-gap};
+  flex-direction: #{$flex-direction};
+  flex-wrap: #{$flex-wrap};
+  justify-content: #{$flex-justify};
+  align-items: #{$flex-align};
+  align-content: #{$flex-align-content};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      gap: #{sass.fn-naming-cascade-dvar(("flex", "gap"), $bp-names, $i, $flex-gap)};
+      flex-direction: #{sass.fn-naming-cascade-dvar(
+          ("flex", "direction"),
+          $bp-names,
+          $i,
+          $flex-direction
+        )};
+      flex-wrap: #{sass.fn-naming-cascade-dvar(("flex", "wrap"), $bp-names, $i, $flex-wrap)};
+      justify-content: #{sass.fn-naming-cascade-dvar(
+          ("flex", "justify"),
+          $bp-names,
+          $i,
+          $flex-justify
+        )};
+      align-items: #{sass.fn-naming-cascade-dvar(("flex", "align"), $bp-names, $i, $flex-align)};
+      align-content: #{sass.fn-naming-cascade-dvar(
+          ("flex", "align-content"),
+          $bp-names,
+          $i,
+          $flex-align-content
+        )};
+    }
+  }
+}

package/src/components/layout/flex/flex.type.ts

@@ -0,0 +1,13 @@
+export type FlexOption = {
+  breakpoint?: string;
+  gap?: string | number;
+  direction?: string;
+  wrap?: string;
+  justify?: string;
+  align?: string;
+  alignContent?: string;
+};
+
+export type FlexProps = {
+  options?: FlexOption[];
+};

package/src/components/layout/flex/flex.vue

@@ -0,0 +1,34 @@
+<style lang="scss" src="./flex.scss" scoped></style>
+<template src="./flex.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } from "../../../utils";
+import type { FlexProps } from "./flex.type";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<FlexProps>(), {
+  options: () => [],
+});
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const flexAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [property(["flex", "gap", option?.breakpoint || ""])]:
+        typeof option.gap === "number" ? `${option.gap}px` : option.gap,
+      [property(["flex", "direction", option?.breakpoint || ""])]: option.direction,
+      [property(["flex", "wrap", option?.breakpoint || ""])]: option.wrap,
+      [property(["flex", "justify", option?.breakpoint || ""])]: option.justify,
+      [property(["flex", "align", option?.breakpoint || ""])]: option.align,
+      [property(["flex", "align-content", option?.breakpoint || ""])]: option.alignContent,
+    };
+  });
+
+  return {
+    class: [withPrefix("flex")],
+    style,
+  };
+});
+</script>

package/src/components/layout/flex/index.ts

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

package/src/components/layout/grid/grid.html

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

package/src/components/layout/grid/grid.md

@@ -0,0 +1,50 @@
+# `<t-grid>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+CSS Grid wrapper with theme-based default gap. Use with `<t-grid-item>` for placement.
+
+## Requirements / dependencies
+
+| Item                | Notes                           |
+| ------------------- | ------------------------------- |
+| Vue                 | ^3.5                            |
+| `@toife/sass-layer` | Theme tokens for default `gap`. |
+
+## Basic usage
+
+```vue
+<t-grid :columns="3">
+  <t-grid-item>One</t-grid-item>
+  <t-grid-item>Two</t-grid-item>
+  <t-grid-item>Three</t-grid-item>
+</t-grid>
+```
+
+## Props
+
+| Prop             | Type               | Default | Description                                                     |
+| ---------------- | ------------------ | ------- | --------------------------------------------------------------- |
+| `columns`        | `number \| string` | `1`     | Column count (`repeat(n, 1fr)`) or raw `grid-template-columns`. |
+| `rows`           | `number \| string` | —       | `grid-template-rows`.                                           |
+| `gap`            | `string`           | —       | Sets `gap` (overrides SCSS default when non-empty).             |
+| `columnGap`      | `string`           | —       | `column-gap`.                                                   |
+| `rowGap`         | `string`           | —       | `row-gap`.                                                      |
+| `alignItems`     | `string`           | —       | `align-items`.                                                  |
+| `justifyItems`   | `string`           | —       | `justify-items`.                                                |
+| `alignContent`   | `string`           | —       | `align-content`.                                                |
+| `justifyContent` | `string`           | —       | `justify-content`.                                              |
+| `autoFlow`       | `string`           | —       | `grid-auto-flow`.                                               |
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Grid cells. |
+
+## See also
+
+- Source: `src/components/grid/grid`
+- `<t-grid-item>`

package/src/components/layout/grid/grid.scss

@@ -0,0 +1,53 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+/// Class name
+$grid: sass.fn-naming-prefix("grid");
+
+/// Base tokens (breakpoint "")
+$grid-gap: sass.fn-naming-var("grid", "gap");
+$grid-columns: sass.fn-naming-var("grid", "columns");
+$grid-rows: sass.fn-naming-var("grid", "rows");
+$grid-auto-flow: sass.fn-naming-var("grid", "auto-flow");
+
+.#{$grid} {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  gap: #{$grid-gap};
+  grid-template-columns: #{$grid-columns};
+  grid-template-rows: #{$grid-rows};
+  grid-auto-flow: #{$grid-auto-flow};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      gap: #{sass.fn-naming-cascade-dvar(("grid", "gap"), $bp-names, $i, $grid-gap)};
+      grid-template-columns: #{sass.fn-naming-cascade-dvar(
+          ("grid", "columns"),
+          $bp-names,
+          $i,
+          $grid-columns
+        )};
+      grid-template-rows: #{sass.fn-naming-cascade-dvar(
+          ("grid", "rows"),
+          $bp-names,
+          $i,
+          $grid-rows
+        )};
+      grid-auto-flow: #{sass.fn-naming-cascade-dvar(
+          ("grid", "auto-flow"),
+          $bp-names,
+          $i,
+          $grid-auto-flow
+        )};
+    }
+  }
+}

package/src/components/layout/grid/grid.type.ts

@@ -0,0 +1,12 @@
+export type GridOption = {
+  breakpoint?: string;
+  gap?: string;
+  columns?: string;
+  rows?: string;
+  autoFlow?: string;
+};
+
+// Type definitions
+export type GridProps = {
+  options?: GridOption[];
+};

package/src/components/layout/grid/grid.vue

@@ -0,0 +1,32 @@
+<style lang="scss" src="./grid.scss" scoped></style>
+<template src="./grid.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } from "../../../utils";
+import type { GridProps } from "./grid.type";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<GridProps>(), {
+  options: () => [],
+});
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const gridAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [property(["grid", "gap", option?.breakpoint || ""])]:
+        typeof option.gap === "number" ? `${option.gap}px` : option.gap,
+      [property(["grid", "columns", option?.breakpoint || ""])]: option.columns,
+      [property(["grid", "rows", option?.breakpoint || ""])]: option.rows,
+      [property(["grid", "auto-flow", option?.breakpoint || ""])]: option.autoFlow,
+    };
+  });
+
+  return {
+    class: [withPrefix("grid")],
+    style,
+  };
+});
+</script>

package/src/components/layout/grid/index.ts

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

package/src/components/layout/index.ts

@@ -0,0 +1,3 @@
+export * from "./grid";
+export * from "./flex";
+export * from "./cell";

package/src/components/modal/modal.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $modal: sass.fn-naming-prefix("modal");

package/src/components/page/page.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $page: sass.fn-naming-prefix("page");

package/src/components/present/present.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $present: sass.fn-naming-prefix("present");

package/src/components/radio/radio/radio.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $radio: sass.fn-naming-prefix("radio");

package/src/components/radio/radio-group/radio-group.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 $radio-group: sass.fn-naming-prefix("radio-group");
 

package/src/components/refresher/refresher.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class
 $refresher: sass.fn-naming-prefix("refresher");

package/src/components/route/route-navigator/route-navigator.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $navigator: sass.fn-naming-prefix("route-navigator");
@@ -108,19 +108,19 @@ $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
 
     &.back {
       &.right {
-        transform: translateX(calc(-1 * #{$transform-back}));
+        transform: translateX(#{$transform-back});
       }
 
       &.left {
-        transform: translateX(#{$transform-back});
+        transform: translateX(calc(-1 * #{$transform-back}));
       }
 
       &.up {
-        transform: translateY(#{$transform-back});
+        transform: translateY(calc(-1 * #{$transform-back}));
       }
 
       &.down {
-        transform: translateY(calc(-1 * #{$transform-back}));
+        transform: translateY(#{$transform-back});
       }
     }
   }

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

@@ -26,7 +26,7 @@ import { clone } from "../route.util";
 // Active uses 0–100%; back uses (peek)*(100−percent)/100, so a peek of 40 makes the
 // back layer move 2.5× slower than the active layer (parallax). Use 100 for 1:1 motion
 // (no edge peek at rest: back starts at -100%).
-const BACK_LAYER_PEEK_PCT = 40;
+const BACK_LAYER_PEEK_PCT = -40;
 
 const props = withDefaults(defineProps<RouteNavigatorProps>(), {
   direction: "right",
@@ -134,17 +134,23 @@ const changeRoute = (value: RouteStack[]) => {
     transform.backdrop = 0;
     emit("transform", transform);
 
-    setTimeout(() => {
-      backdropIndex.value = backdropIndex.value + 1;
-      transform.duration = undefined;
-      emit("transform", transform);
-    }, 10);
-
-    setTimeout(() => {
-      transform.backdrop = 100;
-      activeIndex.value = stack.value.length - 1;
-      emit("transform", transform);
-    }, 100);
+    setTimeout(
+      () => {
+        backdropIndex.value = backdropIndex.value + 1;
+        transform.duration = undefined;
+        emit("transform", transform);
+      },
+      props.variant === "swipe" ? 10 : 0
+    );
+
+    setTimeout(
+      () => {
+        transform.backdrop = 100;
+        activeIndex.value = stack.value.length - 1;
+        emit("transform", transform);
+      },
+      props.variant === "swipe" ? 100 : 0
+    );
   }
 };
 
@@ -159,23 +165,24 @@ const resetTransform = () => {
   transform.back = BACK_LAYER_PEEK_PCT;
   transform.prepare = 100;
   transform.active = 0;
-
+  transform.duration = undefined;
   emit("transform", transform);
 };
 
 const move = (data: RouteNavigatorGesture) => {
   const width = navigatorRef.value?.offsetWidth ?? 0;
-  let percent = 0;
+  let activePercent = 0;
 
   if (props.direction == "left" || props.direction == "right") {
-    percent = (Math.abs(data.deltaX) / width) * 100;
+    activePercent = (Math.abs(data.deltaX) / width) * 100;
   } else {
-    percent = (Math.abs(data.deltaY) / width) * 100;
+    activePercent = (Math.abs(data.deltaY) / width) * 100;
   }
 
-  transform.back = ((100 - percent) * BACK_LAYER_PEEK_PCT) / 100;
-  transform.active = percent;
+  transform.back = ((100 - activePercent) * BACK_LAYER_PEEK_PCT) / 100;
+  transform.active = activePercent;
   transform.backdrop = 100 - transform.active;
+  transform.duration = "0s";
 
   emit("transform", transform);
 };
@@ -216,14 +223,13 @@ onMounted(() => {
       beforeEvent(e: Event) {
         const target = e.target as HTMLElement | null;
         const isEditable = target?.closest("input, textarea, select, button, [contenteditable]");
-        if (isEditable || props.variant === "none") return false;
+        if (isEditable || props.variant === "none" || !prevPage.value) return false;
         e.stopPropagation();
         return prevPage.value;
       },
 
       fast({ initialDirection, event }: { initialDirection: string; event: Event }) {
         if (initialDirection !== props.direction) return;
-        event.stopPropagation();
         event.preventDefault();
         goBack();
       },

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

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $segmented-field-wrapper: sass.fn-naming-prefix("segmented-field-wrapper");

package/src/components/select/index.ts

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

package/src/components/select/select.html

@@ -1,5 +1,5 @@
 <div v-bind="selectAttrs">
-  <Dropdown v-bind="dropdownAttrs">
+  <Dropdown v-bind="dropdownAttrs" v-model="visible">
     <template #trigger="{ toggle, isOpen }">
       <Field
         :role="role"
@@ -14,13 +14,16 @@
       </Field>
     </template>
     <button
-      v-for="item in menuItems"
-      :key="item"
+      v-for="option in options"
+      :key="option.value"
       type="button"
-      class="dropdown-demo-row"
-      @click="pickMenu(item)"
+      :disabled="option.disabled"
+      v-bind="selectOptionAttrs"
+      @click="pickOption(option)"
     >
-      {{ item }}
+      {{ option.label }}
     </button>
   </Dropdown>
+  <div v-bind="selectMessageAttrs" v-if="message">{{ message }}</div>
+  <div v-bind="selectHelpAttrs" v-if="help">{{ help }}</div>
 </div>