@toife/vue 3.1.5 → 3.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "frontend",
     "web"
   ],
-  "author": "Toivibe",
+  "author": "lamtoi",
   "license": "MIT",
   "publishConfig": {
     "access": "public",
@@ -46,8 +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",
+    "@toife/gesture": "^1.1.6",
+    "@toife/sass-layer": "^1.1.2",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",

package/src/components/action/action.scss

@@ -13,7 +13,7 @@ $width: sass.fn-naming-var("viewport", "width");
 $max-width: sass.fn-naming-var("overlay", "max-width");
 $height: sass.fn-naming-var("viewport", "height");
 $max-height: sass.fn-naming-var("overlay", "max-height");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");

package/src/components/app/app.scss

@@ -6,7 +6,7 @@ $app: sass.fn-naming-prefix("app");
 // Property name - layer: app
 $app-background-color: sass.fn-naming-var("app", "background-color");
 $app-color: sass.fn-naming-var("app", "color");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$app} {
   width: #{sass.fn-naming-var("viewport", "width")};

package/src/components/app/app.type.ts

@@ -5,11 +5,6 @@ import type { Ref } from "vue";
  */
 export type AppDirection = "left" | "right";
 
-/**
- * App Size Type
- */
-export type AppSize = "small" | "standard" | "large";
-
 /**
  * App Props Type
  */
@@ -20,7 +15,6 @@ export type AppProps = {
   shadow?: boolean;
   triple?: boolean;
   direction?: AppDirection;
-  size?: AppSize;
 };
 
 /**

package/src/components/app/app.vue

@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<AppProps>(), {
   shadow: false,
   triple: false,
   direction: "left",
-  size: "standard",
 });
 const { shape, divider, role, shadow, triple, direction } = toRefs(props);
 const decisionModal = useDecisionModal();
@@ -29,12 +28,7 @@ const action = useAction();
 // Root layout classes for the application shell (global theme layer)
 const appAttrs = computed(() => {
   return {
-    class: [
-      cssPrefix("app"),
-      cssPrefix(["layer", "app"]),
-      cssPrefix(["shape", shape.value]),
-      cssPrefix(["size", props.size]),
-    ],
+    class: [cssPrefix("app"), cssPrefix(["layer", "app"]), cssPrefix(["shape", shape.value])],
   };
 });
 

package/src/components/avatar/avatar.scss

@@ -9,7 +9,7 @@ $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $width: sass.fn-naming-var("width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $avatar-background-color: sass.fn-naming-var("avatar", "background-color");
 $avatar-border-color: sass.fn-naming-var("avatar", "border-color");

package/src/components/button/button.scss

@@ -8,7 +8,7 @@ $loader: sass.fn-naming-prefix("loader");
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 
@@ -62,13 +62,21 @@ $size-line-height: sass.fn-naming-var("line-height");
   height: #{$size-control-block-size};
   line-height: #{$size-line-height};
 
-  &:hover {
+  // Text variant
+  &.text {
+    background-color: transparent;
+    border-color: transparent;
+    color: rgba(#{$button-background-color});
+  }
+
+  // Fill variant
+  &.fill:hover {
     border-color: rgba(#{$button-border-color-hover});
     background-color: rgba(#{$button-background-color-hover});
   }
 
-  &.focus,
-  &:focus {
+  &.fill.focus,
+  &.fill:focus {
     border-color: rgba(#{$button-border-color-focus});
     background-color: rgba(#{$button-background-color-focus});
 
@@ -77,14 +85,14 @@ $size-line-height: sass.fn-naming-var("line-height");
     }
   }
 
-  &:active,
-  &.active {
+  &.fill:active,
+  &.fill.active {
     border-color: rgba(#{$button-border-color-active});
     background-color: rgba(#{$button-background-color-active});
   }
 
-  &:disabled,
-  &.disabled {
+  &.fill:disabled,
+  &.fill.disabled {
     border-color: rgba(#{$button-border-color-disabled});
     background-color: rgba(#{$button-background-color-disabled});
     color: rgba(#{$button-color-disabled});

package/src/components/button/button.type.ts

@@ -1,9 +1,7 @@
-import { AppSize } from "../app";
-
 // Type definitions
-export type ButtonVariant = "fill" | "outline" | "text" | "link";
+export type ButtonVariant = "fill" | "outline" | "text";
 
-export type ButtonSize = AppSize;
+export type ButtonSize = string;
 
 export type ButtonProps = {
   role?: string;

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

@@ -9,7 +9,7 @@ $card-color: sass.fn-naming-var("card", "color");
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $border-radius: calc(#{$radius-size} * #{$radius-ratio});
 
 .#{$card} {

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

@@ -8,7 +8,7 @@ $card-background-color: sass.fn-naming-var("card", "background-color");
 $card-color: sass.fn-naming-var("card", "color");
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$card-body} {
   background-color: rgba(#{$card-background-color});

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

@@ -12,7 +12,7 @@ $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$card-footer} {
   background-color: rgba(#{$card-background-color});

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

@@ -12,7 +12,7 @@ $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$card-header} {
   background-color: rgba(#{$card-background-color});

package/src/components/checkbox/checkbox.scss

@@ -31,7 +31,7 @@ $checkbox-border-color-disabled: sass.fn-naming-var("checkbox", "border-color",
 
 $checkbox-box-shadow-color-focus: sass.fn-naming-var("checkbox", "box-shadow-color", "focus");
 
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $size-control-mark-size: sass.fn-naming-var("control-mark-size");

package/src/components/checkbox/checkbox.type.ts

@@ -1,7 +1,5 @@
-import { AppSize } from "../app";
-
 export type CheckboxVariant = "fill" | "outline";
-export type CheckboxSize = AppSize;
+export type CheckboxSize = string;
 
 export type CheckboxProps = {
   modelValue?: boolean;

package/src/components/collapse/collapse.scss

@@ -8,14 +8,11 @@ $collapse-content-inner: sass.fn-naming-prefix("collapse-content-inner");
 
 // Property name - layer: collapse
 $collapse-height: sass.fn-naming-dvar(("collapse", "height"), 0);
-$collapse-duration: sass.fn-naming-dvar(
-  ("collapse", "duration"),
-  sass.fn-naming-var("motion", "duration")
-);
+$collapse-duration: sass.fn-naming-dvar(("collapse", "duration"), sass.fn-naming-var("duration"));
 
 $collapse-background-color: sass.fn-naming-var("collapse", "background-color");
 $collapse-color: sass.fn-naming-var("collapse", "color");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 // Collapse
 .#{$collapse} {

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

@@ -21,9 +21,9 @@ $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
-$animation-duration: sass.fn-naming-var("motion", "duration");
+$animation-duration: sass.fn-naming-var("duration");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$decision-modal} {

package/src/components/divider/divider.scss

@@ -6,7 +6,7 @@ $divider: sass.fn-naming-prefix("divider");
 // Property name - layer: divider
 $divider-border-color: sass.fn-naming-var("divider", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 // Divider
 .#{$divider} {

package/src/components/dropdown/dropdown.scss

@@ -14,7 +14,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 $size-font-size: sass.fn-naming-var("font-size");
 $size-line-height: sass.fn-naming-var("line-height");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $size-control-block-size: sass.fn-naming-var("control-block-size");
 $radius-size: sass.fn-naming-var("radius-size");

package/src/components/dropdown/dropdown.type.ts

@@ -1,8 +1,8 @@
-import type { AppDirection, AppSize } from "../app";
+import type { AppDirection } from "../app";
 
 export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
 
-export type DropdownSize = AppSize;
+export type DropdownSize = string;
 
 export type DropdownProps = {
   modelValue?: boolean;

package/src/components/field/field.html

@@ -1,12 +1,31 @@
-<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs">
-  <template #start-input>
+<div v-bind="fieldAttrs">
+  <div v-bind="fieldContentAttrs">
     <slot name="start-input"></slot>
-  </template>
-  <template #input>
-    <slot name="input"></slot>
-  </template>
-  <template #end-input>
+    <slot name="input">
+      <textarea
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        v-model="content"
+        :rows="line"
+        v-if="type === 'paragraph'"
+      />
+      <input
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        v-model="content"
+        :type="type"
+        v-else
+      />
+    </slot>
     <slot name="end-input"></slot>
-  </template>
+  </div>
+  <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
+  <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>
   <slot></slot>
-</OutlineField>
+</div>

package/src/components/field/{outline/outline.scss → field.scss}

@@ -4,12 +4,15 @@
 $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");
 
 // Property name - layer: field
 $field-border-color: sass.fn-naming-var("field", "border-color");
+$field-border-color-focus: sass.fn-naming-var("field", "border-color", "focus");
+$field-border-color-hover: sass.fn-naming-var("field", "border-color", "hover");
+$field-border-color-active: sass.fn-naming-var("field", "border-color", "active");
+$field-border-color-disabled: sass.fn-naming-var("field", "border-color", "disabled");
 $field-background-color: sass.fn-naming-var("field", "background-color");
 $field-color: sass.fn-naming-var("field", "color");
 $field-placeholder-color: sass.fn-naming-var("field", "placeholder-color");
@@ -30,7 +33,7 @@ $size-coefficient-x: sass.fn-naming-var("coefficient-x");
 $size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $size-line-height: sass.fn-naming-var("line-height");
 
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $direction-text-align: sass.fn-naming-var("text-align");
 $direction-justify-content: sass.fn-naming-var("justify-content");
@@ -60,38 +63,6 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     align-items: center;
   }
 
-  // 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;
-    background-color: transparent;
-    z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    box-sizing: border-box;
-    width: 100%;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    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;
-
-    &:focus-within,
-    &:active,
-    &:hover {
-      outline: none;
-    }
-
-    &::placeholder {
-      color: rgba(#{$field-placeholder-color});
-    }
-  }
-
   // Native password <input> (single node, not wrapped).
   input.#{$field-input} {
     padding: calc(#{$spacing-y} * #{$size-coefficient-y})
@@ -142,34 +113,6 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     }
   }
 
-  .#{$field-input-editable} {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    display: block;
-    position: relative;
-    z-index: 2;
-    background-color: transparent;
-    color: rgba(#{$field-color});
-    caret-color: rgba(#{$field-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: rgba(#{$field-background-color});
@@ -197,85 +140,44 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
   }
 
   &.focus {
+    .#{$field-content} {
+      border-color: rgba(#{$field-border-color-focus});
+    }
+
     &.shadow {
       .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgba(#{$field-border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$field-border-color-focus}, 0.25);
       }
     }
 
     &:not(.shadow) {
       .#{$field-content} {
-        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgba(#{$field-border-color});
+        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgba(#{$field-border-color-focus});
       }
     }
   }
 
+  &.hover {
+    .#{$field-content} {
+      border-color: rgba(#{$field-border-color-hover});
+    }
+  }
+
   &.disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    div.#{$field-input},
-    input.#{$field-input},
-    .#{$field-input-editable} {
+    input.#{$field-input} {
       cursor: not-allowed;
       -webkit-user-select: none;
       user-select: none;
     }
-  }
-
-  &.empty:not(.typing) {
-    div.#{$field-input} {
-      &::before {
-        content: attr(placeholder);
-        color: rgba(#{$field-placeholder-color});
-        transition: color #{$transition-duration} ease;
-        position: absolute;
-        height: calc(#{$size-control-block-size} - #{$border-width} * 2);
-        box-sizing: border-box;
-        top: 0;
-        pointer-events: none;
-        z-index: 0;
-        display: block;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: inherit;
-        font-size: inherit;
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  // Type
-  &.paragraph {
-    div.#{$field-input} {
-      align-items: flex-start;
-    }
-
-    .#{$field-input-editable} {
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-  }
 
-  &.text {
-    .#{$field-input-editable},
-    input.#{$field-input} {
-      white-space: nowrap;
-    }
-  }
-
-  &.password {
-    input.#{$field-input} {
-      white-space: nowrap;
+    .#{$field-content} {
+      border-color: rgba(#{$field-border-color-disabled});
     }
   }
 
   // Direction
-  div.#{$field-input} {
-    justify-content: #{$direction-justify-content};
-  }
-
-  .#{$field-input-editable},
   input.#{$field-input} {
     text-align: #{$direction-text-align};
   }

package/src/components/field/field.type.ts

@@ -1,7 +1,7 @@
-import type { AppDirection, AppSize } from "../app";
+import type { AppDirection } from "../app";
 
 export type FieldVariant = "outline" | "fill" | "underline";
-export type FieldSize = AppSize;
+export type FieldSize = string;
 export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
 
 // Type definitions