@toife/vue 3.1.5 → 3.1.6

package/src/components/field/field.vue

@@ -1,9 +1,9 @@
+<style lang="scss" src="./field.scss" scoped></style>
 <template src="./field.html"></template>
 <script lang="ts" setup>
-import { computed, inject } from "vue";
-import type { FieldProps } from "./field.type";
-import type { FieldEmit } from "./field.type";
-import { OutlineField } from "./outline";
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
+import type { FieldProps, FieldEmit } from "./field.type";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -12,6 +12,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   modelValue: "",
   type: "text",
   size: "standard",
+  role: undefined,
+  shape: undefined,
   disabled: false,
   readonly: false,
   message: "",
@@ -21,66 +23,101 @@ const props = withDefaults(defineProps<FieldProps>(), {
   shadow: undefined,
   direction: undefined,
   line: 1,
+  maxLine: 1,
 });
 const emit = defineEmits<FieldEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
+// Reactive state
+// ----------------------------------------------------------------------------
+const isFocus = ref(false);
+const caret = ref(0);
+const content = ref("");
+
 // Computed properties
 // ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
+const fieldAttrs = computed(() => {
+  const role = props.role || appState?.role?.value || "";
+  const shape = props.shape || appState?.shape?.value || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow?.value) ?? false;
+  const direction = props.direction || appState?.direction?.value || "left";
 
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
+  return {
+    class: [
+      cssPrefix(["layer", "field"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("field"),
+      cssPrefix(["size", props.size]),
+      cssPrefix(["direction", direction]),
+      props.variant,
+      props.type,
+      {
+        disabled: props.disabled,
+        focus: isFocus.value,
+        shadow,
+        readonly: props.readonly,
+      },
+    ],
+    style: {
+      [cssProperty(["field", "line"])]: props.line,
+      [cssProperty(["field", "max-line"])]: props.maxLine || props.line,
+    },
+  };
 });
 
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+const rawContent = computed(() => {
+  return props.modelValue ?? props.value ?? "";
 });
 
-const direction = computed(() => {
-  return props.direction || appState?.direction?.value || "left";
-});
+const fieldContentAttrs = computed(() => ({
+  class: [cssPrefix("field-content")],
+}));
 
-const fieldAttrs = computed(() => {
-  return {
-    ...props,
-    direction: direction.value,
-    role: role.value,
-    shape: shape.value,
-    shadow: shadow.value,
-    onInput,
-    onFocus,
-    onBlur,
-    onBeforeinput,
-  };
-});
+const fieldInputAttrs = computed(() => ({
+  class: [cssPrefix("field-input")],
+  name: props.name,
+  id: props.id,
+  placeholder: props.placeholder,
+  autocomplete: props.autocomplete,
+  type: props.type,
+  readonly: props.readonly,
+  disabled: props.disabled,
+}));
+
+const fieldMessageAttrs = computed(() => ({
+  class: [cssPrefix("field-message")],
+}));
+
+const fieldHelpAttrs = computed(() => ({
+  class: [cssPrefix("field-help")],
+}));
 
 // Methods
 // ----------------------------------------------------------------------------
-const onInput = (event: Event) => {
-  let raw = "";
-  // Outline variant uses contenteditable for non-password types; password uses a real input
-  if (props.type !== "password") {
-    raw = (event.target as HTMLElement).innerText;
-  } else {
-    raw = (event.target as HTMLInputElement).value;
-  }
-  const value = raw.trim() === "" ? "" : raw;
-  emit("update:modelValue", value as string);
-  emit("input", event);
+const onFocus = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = true;
+  emit("focus", ev);
 };
 
-const onFocus = (event: FocusEvent) => {
-  emit("focus", event);
+const onBlur = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = false;
+  emit("blur", ev);
 };
 
-const onBlur = (event: FocusEvent) => {
-  emit("blur", event);
-};
+watch(
+  () => rawContent.value,
+  (value) => {
+    content.value = value.toString();
+  }
+);
 
-const onBeforeinput = (event: Event) => {
-  emit("beforeinput", event);
-};
+watch(
+  () => content.value,
+  (value) => {
+    emit("update:modelValue", value.toString());
+  }
+);
 </script>

package/src/components/field/index.ts

@@ -1,2 +1,2 @@
 export { default as Field } from "./field.vue";
-export type { FieldVariant, FieldSize, FieldProps, FieldEmit } from "./field.type";
+export * from "./field.type";

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

@@ -7,7 +7,7 @@ $gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
 $gesture-indicator-border-color: sass.fn-naming-var("gesture-indicator", "border-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");
 
 .#{$gesture-indicator} {
   background-color: rgba(#{$gesture-indicator-border-color});

package/src/components/modal/modal.scss

@@ -15,7 +15,7 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $border-radius: calc(min(#{$viewport-width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$modal} {

package/src/components/present/present.scss

@@ -7,7 +7,7 @@ $backdrop: sass.fn-naming-prefix("present-backdrop");
 // Property name
 $transition-duration: sass.fn-naming-dvar(
   ("transition", "duration"),
-  sass.fn-naming-var("motion", "duration")
+  sass.fn-naming-var("duration")
 );
 
 $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");

package/src/components/present/present.vue

@@ -28,7 +28,7 @@ const zIndex = ref(0);
 const isShow = ref(false);
 const styles = reactive({
   backdropTransitionDuration: "0.2s",
-  backdropOpacity: undefined,
+  backdropOpacity: undefined as number | undefined,
   presentTransitionDuration: "0.2s",
   presentTranslate: "0px",
   presentOpacity: 1,

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

@@ -25,7 +25,7 @@ $radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disab
 
 $radio-box-shadow-color-focus: sass.fn-naming-var("radio", "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");
 
 $size-control-mark-size: sass.fn-naming-var("control-mark-size");

package/src/components/radio/radio/radio.type.ts

@@ -1,7 +1,5 @@
-import { AppSize } from "../../app";
-
 export type RadioVariant = "fill" | "outline";
-export type RadioSize = AppSize;
+export type RadioSize = string;
 
 // Type definitions
 export type RadioProps = {

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

@@ -3,7 +3,7 @@
     v-for="(item, index) in stack"
     :key="item.name"
     v-bind="componentAttrs"
-    :style="{zIndex: index * 2}"
+    :style="{zIndex: index * 2 + 100}"
     :name="item.name"
     :class="{
       active: index === activeIndex,

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

@@ -9,7 +9,7 @@ $navigator-backdrop: sass.fn-naming-prefix("route-navigator-backdrop");
 $background-color: sass.fn-naming-var("app", "background-color");
 $transition-duration: sass.fn-naming-dvar(
   ("route-navigator-transition-duration"),
-  sass.fn-naming-var("motion", "duration")
+  sass.fn-naming-var("duration")
 );
 $transform-back: sass.fn-naming-var("route-navigator-transform", "back");
 $transform-prepare: sass.fn-naming-var("route-navigator-transform", "prepare");

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

@@ -84,7 +84,7 @@ const backdropAttrs = computed(() => {
   return {
     class: [cssPrefix("route-navigator-backdrop"), cssPrefix(["layer", "backdrop"])],
     style: {
-      zIndex: backdropIndex.value * 2 - 1,
+      zIndex: backdropIndex.value * 2 + 99,
     },
   };
 });

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

@@ -10,7 +10,7 @@ $segmented-field-help: sass.fn-naming-prefix("segmented-field-help");
 $segmented-field-color: sass.fn-naming-var("segmented-field", "color");
 
 $spacing-x: sass.fn-naming-var("spacing", "x");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $app-color: sass.fn-naming-var("app", "color");
 
 .#{$segmented-field-wrapper} {

package/src/components/select/select.scss

@@ -15,7 +15,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 $size-coefficient-x: sass.fn-naming-var("coefficient-x");
 $size-coefficient-y: sass.fn-naming-var("coefficient-y");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $select-background-color: sass.fn-naming-var("select", "background-color");
 $select-background-color-hover: sass.fn-naming-var("select", "background-color", "hover");

package/src/components/skeleton/skeleton.scss

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

package/src/components/slide-range/slide-range.scss

@@ -132,17 +132,20 @@ $slide-range-tooltip-color: sass.fn-naming-var("slide-range", "tooltip-color");
   .#{$slide-range-thumb} {
     position: absolute;
     left: #{$slide-range-percent};
-    top: 2px;
-    height: 100%;
+    height: 25px;
+    width: 25px;
+    transform: translate(-9px, -5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .#{$slide-range-thumb-inner} {
-      position: absolute;
       width: 12px;
       height: 12px;
       border: 1px solid rgba(#{$slide-range-border-color-active});
       border-radius: calc(12px * #{$radius-ratio});
       background-color: rgba(#{$slide-range-background-color});
-      transform: translateX(calc(-50% + 2px)) rotate(45deg);
+      transform: rotate(45deg);
     }
 
     .#{$slide-range-tooltip} {

package/src/components/slide-range/slide-range.vue

@@ -197,6 +197,7 @@ const onClickPath = (ev: MouseEvent | TouchEvent) => {
 onMounted(() => {
   if (!point.value || !container.value) return;
   gestureCleanup = gesture(point.value, {
+    options: { trackOutsideElement: true },
     down() {
       if (props.disabled || props.readonly) return;
       dragStartPercent = percent.value;

package/src/components/switch/switch.scss

@@ -16,7 +16,7 @@ $switch-color-disabled: sass.fn-naming-var("switch", "color", "disabled");
 
 $switch-box-shadow-color-focus: sass.fn-naming-var("switch", "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");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $size-control-mark-size: sass.fn-naming-var("control-mark-size");

package/src/components/switch/switch.type.ts

@@ -1,6 +1,4 @@
-import { AppSize } from "../app";
-
-export type SwitchSize = AppSize;
+export type SwitchSize = string;
 
 // Type definitions
 export type SwitchProps = {

package/src/components/tabs/tabs/tabs.scss

@@ -74,7 +74,7 @@ $tabs-text-color-disabled: sass.fn-naming-var("tabs", "text", "color", "disabled
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $radius-size: sass.fn-naming-var("radius-size");
 // layer: highlight (indicator geometry)
 $highlight-top: sass.fn-naming-var("tabs", "highlight", "top");
@@ -314,10 +314,6 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
     }
 
     :deep(.#{$tab}) {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
       .#{$button} {
         transition:
           box-shadow #{$transition-duration} ease,

package/src/components/tabs/tabs/tabs.type.ts

@@ -1,8 +1,7 @@
 import { ComputedRef } from "vue";
-import { AppSize } from "../../app";
 
 export type TabsVariant = "fill" | "underline" | "text";
-export type TabsSize = AppSize;
+export type TabsSize = string;
 export type TabsPlacement =
   | "top-start"
   | "top-end"

package/src/components/toast/toast/toast.scss

@@ -17,7 +17,7 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
   height: fit-content;
   max-width: #{$max-width};
   position: absolute;
-  z-index: 999;
+  z-index: 10000;
   font-size: 0.8em;
   line-height: 0.8em;
   display: flex;

package/src/components/toast/toast-content/toast-content.scss

@@ -9,7 +9,7 @@ $toast-color: sass.fn-naming-var("toast", "color");
 $toast-border-color: sass.fn-naming-var("toast", "border-color");
 
 $space-x: sass.fn-naming-var("spacing", "x");
-$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");
 $border-width: sass.fn-naming-var("stroke", "width");

package/src/components/toolbar/toolbar.scss

@@ -11,7 +11,7 @@ $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid rgba(#{$toolbar-border-color});

package/src/components/field/outline/index.ts

@@ -1 +0,0 @@
-export { default as OutlineField } from "./outline.vue";

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

@@ -1,36 +0,0 @@
-<div v-bind="fieldAttrs">
-  <div v-bind="fieldContentAttrs">
-    <slot name="start-input"></slot>
-    <slot name="input">
-      <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="fieldPasswordInputAttrs"
-        @input="onInput"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-        @focus="onFocus"
-        @blur="onBlur"
-        @beforeinput="onBeforeinput"
-        ref="contentRef"
-        :value="content"
-        type="password"
-        v-else
-      />
-    </slot>
-    <slot name="end-input"></slot>
-  </div>
-  <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
-  <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>
-  <slot></slot>
-</div>