@toife/vue 3.0.7 → 3.1.3

package/src/components/field/outline/outline.vue

@@ -1,7 +1,7 @@
 <style lang="scss" src="./outline.scss" scoped></style>
 <template src="./outline.html"></template>
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import type { FieldProps, FieldEmit } from "../field.type";
 import { property, withPrefix } from "../../../utils";
 
@@ -48,7 +48,6 @@ const fieldAttrs = computed(() => {
       props.type,
       {
         disabled: props.disabled,
-        active: isFocus.value || props.message,
         focus: isFocus.value,
         shadow: props.shadow,
         empty: !content.value,
@@ -67,16 +66,32 @@ const fieldContentAttrs = computed(() => ({
   class: [withPrefix("field-content")],
 }));
 
-const fieldInputAttrs = computed(() => ({
+/** Outer shell: layout, placeholder pseudo-element (must stay off the contenteditable node on iOS). */
+const fieldInputShellAttrs = computed(() => ({
+  class: [withPrefix("field-input")],
+  placeholder: props.placeholder,
+}));
+
+/** contenteditable as the literal string "true"|"false" improves mobile WebKit behavior vs boolean. */
+const fieldEditableAttrs = computed(() => ({
+  class: [withPrefix("field-input-editable")],
+  name: props.name,
+  id: props.id,
+  contenteditable:
+    props.type === "password" ? undefined : props.disabled || props.readonly ? "false" : "true",
+  autocomplete: props.autocomplete,
+  tabindex: props.readonly ? 0 : props.disabled ? -1 : props.tabindex,
+}));
+
+const fieldPasswordInputAttrs = computed(() => ({
   class: [withPrefix("field-input")],
   name: props.name,
   id: props.id,
   placeholder: props.placeholder,
-  contenteditable: props.type !== "password" ? !props.disabled && !props.readonly : undefined,
   autocomplete: props.autocomplete,
-  tabindex: props.disabled ? -1 : props.tabindex,
-  readonly: props.type === "password" ? props.readonly : undefined,
-  disabled: props.type === "password" ? props.disabled : undefined,
+  tabindex: props.readonly ? 0 : props.disabled ? -1 : props.tabindex,
+  readonly: props.readonly,
+  disabled: props.disabled,
 }));
 
 const fieldMessageAttrs = computed(() => ({
@@ -206,9 +221,42 @@ const onCompositionEnd = (ev: CompositionEvent) => {
   });
 };
 
+const normalizeText = (s: string) => s.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+
+const ensureEditableCanReceiveCaret = (el: HTMLElement) => {
+  // iOS Safari often refuses to show caret / accept input in an empty contenteditable.
+  if (!el.textContent?.length && el.childNodes.length === 0) {
+    el.appendChild(document.createElement("br"));
+  }
+};
+
+const syncContentFromModel = async () => {
+  const el = contentRef.value;
+  if (!el || props.type === "password") return;
+  if (isComposing.value) return;
+
+  const next = normalizeText(content.value ?? "");
+  const current = normalizeText(el.innerText);
+  if (current === next) return;
+
+  if (isFocus.value) {
+    const saved = caret.value;
+    el.innerText = next;
+    await nextTick();
+    el.focus();
+    setCaretOffset(el, Math.min(saved, next.length));
+  } else {
+    el.innerText = next;
+  }
+};
+
 const onFocus = (ev: FocusEvent) => {
   if (props.disabled) return;
   isFocus.value = true;
+  const el = contentRef.value;
+  if (el && props.type !== "password") {
+    ensureEditableCanReceiveCaret(el);
+  }
   emit("focus", ev);
 };
 
@@ -230,14 +278,9 @@ const onBeforeinput = (ev: Event) => {
 // ----------------------------------------------------------------------------
 watch(
   () => content.value,
-  async (val) => {
-    if (!isFocus.value || isComposing.value) return;
-    const el = contentRef.value;
-    if (!el) return;
-    await nextTick();
-    el.focus();
-    setCaretOffset(el, caret.value);
-  },
-  { immediate: true }
+  () => void syncContentFromModel(),
+  { flush: "post" }
 );
+
+onMounted(() => void syncContentFromModel());
 </script>

package/src/components/form-group/form-group.md

@@ -16,7 +16,7 @@ Groups controls in a horizontal or vertical flex layout; used by `Action` to sta
 ## Basic usage
 
 ```vue
-<t-form-group orientation="vertical">
+<t-form-group direction="vertical">
   <t-button>A</t-button>
   <t-button>B</t-button>
 </t-form-group>
@@ -24,9 +24,9 @@ Groups controls in a horizontal or vertical flex layout; used by `Action` to sta
 
 ## Props
 
-| Prop          | Type                         | Default        | Description  |
-| ------------- | ---------------------------- | -------------- | ------------ |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
+| Prop        | Type                         | Default        | Description  |
+| ----------- | ---------------------------- | -------------- | ------------ |
+| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
 
 **Type source:** `src/components/form-group/form-group.type.ts`
 

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

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

package/src/components/form-group/form-group.type.ts

@@ -1,5 +1,5 @@
-export type FormGroupOrientation = "horizontal" | "vertical";
+export type FormGroupDirection = "horizontal" | "vertical";
 
 export type FormGroupProps = {
-  orientation?: FormGroupOrientation;
+  direction?: FormGroupDirection;
 };

package/src/components/form-group/form-group.vue

@@ -8,14 +8,14 @@ import { type FormGroupProps } from "./form-group.type";
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FormGroupProps>(), {
-  orientation: "horizontal",
+  direction: "horizontal",
 });
 
 // Computed properties
 // ----------------------------------------------------------------------------
 const formGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("form-group"), props.orientation],
+    class: [withPrefix("form-group"), props.direction],
   };
 });
 </script>

package/src/components/gesture-indicator/gesture-indicator.scss

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

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./app";
 export * from "./present";
 export * from "./modal";
 export * from "./gesture-indicator";
+export * from "./layout";
 export * from "./button";
 export * from "./cable";
 export * from "./toolbar";

package/src/components/layout/cell/cell.html

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

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,15 @@
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+
+export type FlexOption = {
+  breakpoint?: string;
+  gap?: string | number;
+  direction?: FlexDirection;
+  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 | number;
+  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");