@toife/vue 3.0.6 → 3.1.2

package/src/components/field/outline/outline.scss

@@ -1,13 +1,12 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $field: sass.fn-naming-prefix("field");
 $field-content: sass.fn-naming-prefix("field-content");
 $field-input: sass.fn-naming-prefix("field-input");
+$field-input-editable: sass.fn-naming-prefix("field-input-editable");
 $field-message: sass.fn-naming-prefix("field-message");
 $field-help: sass.fn-naming-prefix("field-help");
-$field-direction-left: sass.fn-naming-prefix("direction", "left");
-$field-direction-right: sass.fn-naming-prefix("direction", "right");
 
 // Property name - layer: field
 $field-border-color: sass.fn-naming-var("field", "border-color");
@@ -30,6 +29,9 @@ $size-line-height: sass.fn-naming-var("line-height");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$direction-text-align: sass.fn-naming-var("text-align");
+$direction-justify-content: sass.fn-naming-var("justify-content");
+
 .#{$field} {
   width: 100%;
   box-shadow: none !important;
@@ -50,10 +52,13 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     line-height: 0;
     height: fit-content;
     position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
-  // Input
-  .#{$field-input} {
+  // Input shell wrapping contenteditable (flex layout); must not apply display:flex to <input>.
+  div.#{$field-input} {
     padding: calc(#{$spacing-y} * #{$size-coefficient-y})
       calc(#{$spacing-x} * #{$size-coefficient-x});
     position: relative;
@@ -61,14 +66,11 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     z-index: 2;
     min-height: calc(#{$field-line} * #{$size-height} - 2 * #{$border-width});
     max-height: calc(#{$field-max-line} * #{$size-height} - 2 * #{$border-width});
-    color: rgb(#{$app-color});
-    caret-color: rgb(#{$app-color});
-    border: none;
-    user-select: all;
-    font-size: #{$size-font-size};
-    line-height: #{$size-line-height};
     box-sizing: border-box;
     width: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -76,13 +78,44 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease;
 
-    &:focus,
+    &:focus-within,
     &:active,
     &:hover {
       outline: none;
-      border: none;
     }
 
+    &::placeholder {
+      color: rgba(#{$app-color}, 0.5);
+    }
+  }
+
+  // Native password <input> (single node, not wrapped).
+  input.#{$field-input} {
+    padding: calc(#{$spacing-y} * #{$size-coefficient-y})
+      calc(#{$spacing-x} * #{$size-coefficient-x});
+    position: relative;
+    background-color: transparent;
+    z-index: 2;
+    min-height: calc(#{$field-line} * #{$size-height} - 2 * #{$border-width});
+    max-height: calc(#{$field-max-line} * #{$size-height} - 2 * #{$border-width});
+    box-sizing: border-box;
+    width: 100%;
+    flex: 1;
+    color: rgb(#{$app-color});
+    caret-color: rgb(#{$app-color});
+    border: none;
+    -webkit-user-select: text;
+    user-select: text;
+    font-size: #{$size-font-size};
+    line-height: #{$size-line-height};
+    overflow: auto;
+    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;
+
     // Firefox
     -moz-appearance: textfield;
     appearance: textfield;
@@ -94,11 +127,46 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       margin: 0;
     }
 
+    &:focus,
+    &:active,
+    &:hover {
+      outline: none;
+      border: none;
+    }
+
     &::placeholder {
       color: rgba(#{$app-color}, 0.5);
     }
   }
 
+  .#{$field-input-editable} {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    display: block;
+    position: relative;
+    z-index: 2;
+    background-color: transparent;
+    color: rgb(#{$app-color});
+    caret-color: rgb(#{$app-color});
+    border: none;
+    // user-select:all breaks caret placement on many mobile browsers for contenteditable.
+    -webkit-user-select: text;
+    user-select: text;
+    font-size: #{$size-font-size};
+    line-height: #{$size-line-height};
+    box-sizing: border-box;
+    width: 100%;
+    overflow: auto;
+    outline: none;
+
+    &:focus,
+    &:active {
+      outline: none;
+      border: none;
+    }
+  }
+
   // Message
   .#{$field-message} {
     color: rgb(#{$field-background-color});
@@ -125,33 +193,34 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       border-radius #{$transition-duration} ease;
   }
 
-  // State
-  &.active {
-    .#{$field-content} {
-      border-color: rgb(#{$field-border-color});
-      box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$field-border-color});
-    }
-  }
-
   &.focus {
     &.shadow {
       .#{$field-content} {
         box-shadow: 0 0 0 0.25rem rgb(#{$field-border-color}, 0.25);
       }
     }
+
+    &:not(.shadow) {
+      .#{$field-content} {
+        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$field-border-color});
+      }
+    }
   }
 
   &.disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    .#{$field-input} {
+    div.#{$field-input},
+    input.#{$field-input},
+    .#{$field-input-editable} {
       cursor: not-allowed;
+      -webkit-user-select: none;
       user-select: none;
     }
   }
 
   &.empty:not(.typing) {
-    .#{$field-input} {
+    div.#{$field-input} {
       &::before {
         content: attr(placeholder);
         color: rgba(#{$app-color}, 0.5);
@@ -165,7 +234,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
         display: block;
         white-space: pre-wrap;
         word-break: break-word;
-        padding: inherit;
         line-height: inherit;
         font-size: inherit;
         display: flex;
@@ -176,51 +244,36 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   // Type
   &.paragraph {
-    .#{$field-input} {
+    div.#{$field-input} {
+      align-items: flex-start;
+    }
+
+    .#{$field-input-editable} {
       white-space: pre-wrap;
       word-break: break-word;
-      display: flex;
-      align-items: start;
-      overflow: auto;
     }
   }
 
   &.text {
-    .#{$field-input} {
+    .#{$field-input-editable},
+    input.#{$field-input} {
       white-space: nowrap;
-      display: flex;
-      align-items: center;
     }
   }
 
   &.password {
-    .#{$field-input} {
+    input.#{$field-input} {
       white-space: nowrap;
-      display: flex;
-      align-items: center;
     }
   }
 
   // Direction
-  &.#{$field-direction-left} {
-    .#{$field-input} {
-      justify-content: start;
-      text-align: left;
-    }
-
-    .#{$field-input}::before {
-      left: 0;
-    }
+  div.#{$field-input} {
+    justify-content: #{$direction-justify-content};
   }
 
-  &.#{$field-direction-right} {
-    .#{$field-input} {
-      justify-content: end;
-      text-align: right;
-    }
-
-    .#{$field-input}::before {
-      right: 0;
-    }
+  .#{$field-input-editable},
+  input.#{$field-input} {
+    text-align: #{$direction-text-align};
   }
 }

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.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/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";
@@ -25,3 +26,5 @@ export * from "./route";
 export * from "./page";
 export * from "./collapse";
 export * from "./form-group";
+export * from "./dropdown";
+export * from "./select";

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,13 @@
+export type FlexOption = {
+  breakpoint?: string;
+  gap?: string | number;
+  direction?: string;
+  wrap?: string;
+  justify?: string;
+  align?: string;
+  alignContent?: string;
+};
+
+export type FlexProps = {
+  options?: FlexOption[];
+};