@toife/vue 3.0.7 → 3.1.3

package/README.md

@@ -27,6 +27,8 @@ Usage docs live **next to source** under `src/`. Authoring scaffold: [docs/templ
 | [field.md](src/components/field/field.md) | `t-field` |
 | [form-group.md](src/components/form-group/form-group.md) | `t-form-group` |
 | [gesture-indicator.md](src/components/gesture-indicator/gesture-indicator.md) | `t-gesture-indicator` |
+| [grid.md](src/components/grid/grid/grid.md) | `t-grid` |
+| [grid-item.md](src/components/grid/grid-item/grid-item.md) | `t-grid-item` |
 | [image.md](src/components/image/image.md) | `t-image` |
 | [modal.md](src/components/modal/modal.md) | `t-modal` |
 | [page.md](src/components/page/page.md) | `t-page` |
@@ -62,7 +64,7 @@ Usage docs live **next to source** under `src/`. Authoring scaffold: [docs/templ
 | `vue` ^3.5 | Required |
 | `vue-router` ^4 | Required when using route-related components |
 | `@toife/gesture` | Gestures |
-| `@toife/sass-layer-generator` | Component SCSS uses `@use`; install in the app and configure Sass (e.g. Vite `css.preprocessorOptions`) |
+| `@toife/sass-layer` | Component SCSS uses `@use`; install in the app and configure Sass (e.g. Vite `css.preprocessorOptions`) |
 
 ## Installation
 
@@ -217,7 +219,7 @@ See [src/utils/element.md](src/utils/element.md), [src/utils/events.md](src/util
 
 ## Sass / theming
 
-Component styles use `@use "@toife/sass-layer-generator"` and SCSS under `src`. Configure **sass-embedded** / **sass** and any aliases in **your** app so tokens, layers, and variables resolve when you build.
+Component styles use `@use "@toife/sass-layer"` and SCSS under `src`. Configure **sass-embedded** / **sass** and any aliases in **your** app so tokens, layers, and variables resolve when you build.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.7",
+  "version": "3.1.3",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,
@@ -30,7 +30,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@toife/gesture": "^1.1.4",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
@@ -47,6 +46,8 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
+    "@toife/gesture": "^1.1.5",
+    "@toife/sass-layer": "^1.0.2",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -58,9 +59,5 @@
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
-  "packageManager": "yarn@4.12.0",
-  "dependencies": {
-    "@toife/gesture": "^1.1.4",
-    "@toife/sass-layer-generator": "^1.1.0"
-  }
+  "packageManager": "yarn@4.12.0"
 }

package/src/components/action/action.html

@@ -7,7 +7,7 @@
 >
   <div v-bind="actionAttrs">
     <slot name="body">
-      <FormGroup orientation="vertical" v-for="(buttons, groupIndex) in actions" :key="groupIndex">
+      <FormGroup direction="vertical" v-for="(buttons, groupIndex) in actions" :key="groupIndex">
         <CustomButton
           v-for="(btn, btnIndex) in buttons"
           :key="`${groupIndex}-${btnIndex}`"

package/src/components/action/action.scss

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

package/src/components/app/app.scss

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

package/src/components/avatar/avatar.scss

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

package/src/components/button/button.scss

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

package/src/components/cable/cable.scss

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

package/src/components/card/card/card.scss

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

package/src/components/card/card-body/card-body.scss

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

package/src/components/card/card-footer/card-footer.scss

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

package/src/components/card/card-header/card-header.scss

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

package/src/components/checkbox/checkbox.scss

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

package/src/components/collapse/collapse.scss

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

package/src/components/container/container.scss

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

package/src/components/decision-modal/decision-modal.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $decision-modal: sass.fn-naming-prefix("decision-modal");
@@ -11,6 +11,7 @@ $shape-pill: sass.fn-naming-prefix("shape-pill");
 // Property name - layer: decision-modal
 $decision-modal-background-color: sass.fn-naming-var("decision-modal", "background-color");
 $decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
+$decision-modal-color: sass.fn-naming-var("decision-modal", "color");
 
 $border-radius: sass.fn-naming-var("border-radius");
 $width: sass.fn-naming-var("viewport", "width");
@@ -26,6 +27,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 .#{$decision-modal} {
   // Styles
   background-color: rgb(#{$decision-modal-background-color});
+  color: rgb(#{$decision-modal-color});
   width: #{$width};
   max-width: #{$max-width};
   overflow: hidden;
@@ -47,6 +49,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     align-items: center;
     font-weight: 600;
     border-bottom: #{$border-width} solid transparent;
+    color: rgb(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -58,12 +61,14 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   // Content of alert
   .#{$decision-modal-body} {
     padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+    color: rgb(#{$decision-modal-color});
   }
 
   // Footer of alert
   .#{$decision-modal-footer} {
     display: flex;
     border-top: #{$border-width} solid transparent;
+    color: rgb(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,

package/src/components/divider/divider.md

@@ -16,16 +16,16 @@ Horizontal or vertical divider line following theme.
 ## Basic usage
 
 ```vue
-<t-divider orientation="horizontal" />
-<t-divider orientation="vertical" />
+<t-divider direction="horizontal" />
+<t-divider direction="vertical" />
 ```
 
 ## Props
 
-| Prop          | Type                         | Default        | Description                     |
-| ------------- | ---------------------------- | -------------- | ------------------------------- |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider direction.              |
-| `role`        | `string`                     | —              | Theme stroke; default from app. |
+| Prop        | Type                         | Default        | Description                     |
+| ----------- | ---------------------------- | -------------- | ------------------------------- |
+| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider direction.              |
+| `role`      | `string`                     | —              | Theme stroke; default from app. |
 
 **Type source:** `src/components/divider/divider.type.ts`
 

package/src/components/divider/divider.scss

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

package/src/components/divider/divider.type.ts

@@ -1,6 +1,6 @@
-export type DividerOrientation = "horizontal" | "vertical";
+export type DividerDirection = "horizontal" | "vertical";
 
 export type DividerProps = {
-  orientation?: DividerOrientation;
+  direction?: DividerDirection;
   role?: string;
 };

package/src/components/divider/divider.vue

@@ -9,7 +9,7 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<DividerProps>(), {
-  orientation: "horizontal",
+  direction: "horizontal",
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
@@ -23,7 +23,7 @@ const dividerAttrs = computed(() => {
       withPrefix(["role", role]),
       withPrefix("divider"),
       {
-        [props.orientation]: true,
+        [props.direction]: true,
       },
     ],
   };

package/src/components/divider/index.ts

@@ -1,2 +1,2 @@
 export { default as Divider } from "./divider.vue";
-export type { DividerOrientation, DividerProps } from "./divider.type";
+export type { DividerDirection, DividerProps } from "./divider.type";

package/src/components/dropdown/dropdown.scss

@@ -1,8 +1,10 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
+// Class name
 $dropdown: sass.fn-naming-prefix("dropdown");
 $dropdown-panel: sass.fn-naming-prefix("dropdown-panel");
 
+// Property name - layer: dropdown
 $dropdown-border-color: sass.fn-naming-var("dropdown", "border-color");
 $dropdown-background-color: sass.fn-naming-var("dropdown", "background-color");
 $dropdown-color: sass.fn-naming-var("dropdown", "color");
@@ -18,11 +20,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   position: relative;
   display: block;
   width: 100%;
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 }
 
 .#{$dropdown-panel} {
@@ -30,18 +27,15 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   z-index: 20;
   min-width: 100%;
   box-sizing: border-box;
-  margin-top: calc(#{$spacing-y} * 0.25);
-  margin-bottom: calc(#{$spacing-y} * 0.25);
-  padding: calc(#{$spacing-y} * 0.5) 0;
   border-radius: #{$border-radius};
   border-width: #{$border-width};
+  margin: #{$spacing-y} 0;
   border-style: solid;
   border-color: rgb(#{$dropdown-border-color});
   background-color: rgb(#{$dropdown-background-color});
   color: rgb(#{$dropdown-color});
   font-size: #{$size-font-size};
   line-height: #{$size-line-height};
-  box-shadow: 0 #{$border-width} #{$spacing-y} rgb(#{$dropdown-border-color}, 0.12);
   max-height: min(50vh, 16rem);
   overflow-y: auto;
   transition:

package/src/components/field/outline/outline.html

@@ -2,20 +2,20 @@
   <div v-bind="fieldContentAttrs">
     <slot name="start-input"></slot>
     <slot name="input">
-      <div
-        v-bind="fieldInputAttrs"
-        @input="onInput"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-        @focus="onFocus"
-        @blur="onBlur"
-        @beforeinput="onBeforeinput"
-        ref="contentRef"
-        v-text="content"
-        v-if="type !== 'password'"
-      ></div>
+      <div v-bind="fieldInputShellAttrs" v-if="type !== 'password'">
+        <div
+          v-bind="fieldEditableAttrs"
+          @input="onInput"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
+          @focus="onFocus"
+          @blur="onBlur"
+          @beforeinput="onBeforeinput"
+          ref="contentRef"
+        ></div>
+      </div>
       <input
-        v-bind="fieldInputAttrs"
+        v-bind="fieldPasswordInputAttrs"
         @input="onInput"
         @compositionstart="onCompositionStart"
         @compositionend="onCompositionEnd"

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

@@ -1,9 +1,10 @@
-@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");
 
@@ -56,8 +57,8 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     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;
@@ -65,16 +66,11 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     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%;
-    overflow: auto;
     flex: 1;
+    display: flex;
+    align-items: center;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -82,13 +78,44 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
       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;
@@ -100,11 +127,46 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
       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});
@@ -131,33 +193,34 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
       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);
@@ -181,38 +244,36 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
 
   // 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-input} {
+  div.#{$field-input} {
     justify-content: #{$direction-justify-content};
-    text-align: #{$direction-text-align};
   }
 
-  .#{$field-input}::before {
-    #{$direction-text-align}: 0;
+  .#{$field-input-editable},
+  input.#{$field-input} {
+    text-align: #{$direction-text-align};
   }
 }