@toife/vue 3.1.4 → 3.1.6

package/src/components/select/select.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from "vue";
 import { type SelectOption, type SelectProps, type SelectEmit } from "./select.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 import { Field } from "../field";
 import { Dropdown } from "../dropdown";
@@ -48,11 +48,11 @@ const shape = computed(() => {
 const selectAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "select"]),
-      withPrefix(["role", role.value]),
-      withPrefix("select"),
-      withPrefix(["direction", direction.value]),
-      withPrefix(["size", props.size]),
+      cssPrefix(["layer", "select"]),
+      cssPrefix(["role", role.value]),
+      cssPrefix("select"),
+      cssPrefix(["direction", direction.value]),
+      cssPrefix(["size", props.size]),
       {
         disabled: props.disabled,
       },
@@ -93,19 +93,19 @@ const fieldAttrs = computed(() => {
 });
 
 const selectIconAttrs = computed(() => ({
-  class: [withPrefix("select-icon")],
+  class: [cssPrefix("select-icon")],
 }));
 
 const selectOptionAttrs = computed(() => ({
-  class: [withPrefix("select-option")],
+  class: [cssPrefix("select-option")],
 }));
 
 const selectMessageAttrs = computed(() => ({
-  class: [withPrefix("select-message")],
+  class: [cssPrefix("select-message")],
 }));
 
 const selectHelpAttrs = computed(() => ({
-  class: [withPrefix("select-help")],
+  class: [cssPrefix("select-help")],
 }));
 
 // Methods

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/skeleton/skeleton.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { type SkeletonProps } from "./skeleton.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -22,15 +22,15 @@ const skeletonAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "skeleton"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("skeleton"),
+      cssPrefix(["layer", "skeleton"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("skeleton"),
     ],
     style: {
-      [property(["skeleton", "width"])]:
+      [cssProperty(["skeleton", "width"])]:
         props.width + (typeof props.width === "number" ? "px" : ""),
-      [property(["skeleton", "height"])]:
+      [cssProperty(["skeleton", "height"])]:
         props.height + (typeof props.height === "number" ? "px" : ""),
     },
   };

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

@@ -1,14 +1,13 @@
 <div v-bind="slideRangeAttrs">
   <div v-bind="trackContainerAttrs" ref="container">
     <div v-bind="trackBodyAttrs">
-      <div v-bind="trackBackAttrs" @click="onClickPath" @touchend="onClickPath"></div>
-      <div v-bind="trackFrontAttrs" @click="onClickPath" @touchend="onClickPath"></div>
+      <div v-bind="trackBackAttrs" @pointerup="onClickPath"></div>
+      <div v-bind="trackFrontAttrs" @pointerup="onClickPath"></div>
       <div
         v-for="value in ranges"
         :key="value"
         v-bind="nodeAttrs(value)"
-        @click="onNodeSelect(value)"
-        @touchend="onNodeSelect(value)"
+        @pointerup="onNodeSelect(value)"
       ></div>
     </div>
 

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

@@ -103,12 +103,12 @@ $slide-range-tooltip-color: sass.fn-naming-var("slide-range", "tooltip-color");
 
     &.back {
       width: 100%;
-      background-color: rgb(#{$slide-range-border-color});
+      background-color: rgba(#{$slide-range-border-color});
     }
 
     &.front {
       width: #{$slide-range-percent};
-      background-color: rgb(#{$slide-range-border-color-active});
+      background-color: rgba(#{$slide-range-border-color-active});
     }
   }
 
@@ -120,29 +120,32 @@ $slide-range-tooltip-color: sass.fn-naming-var("slide-range", "tooltip-color");
     width: 8px;
     border-radius: calc(min(8px, #{$radius-size}) * #{$radius-ratio});
     transform: rotate(45deg);
-    background-color: rgb(#{$slide-range-background-color});
-    border: 1px solid rgb(#{$slide-range-border-color});
+    background-color: rgba(#{$slide-range-background-color});
+    border: 1px solid rgba(#{$slide-range-border-color});
 
     &.active {
-      border-color: rgb(#{$slide-range-border-color-active});
-      background-color: rgb(#{$slide-range-background-color-active});
+      border-color: rgba(#{$slide-range-border-color-active});
+      background-color: rgba(#{$slide-range-background-color-active});
     }
   }
 
   .#{$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 rgb(#{$slide-range-border-color-active});
+      border: 1px solid rgba(#{$slide-range-border-color-active});
       border-radius: calc(12px * #{$radius-ratio});
-      background-color: rgb(#{$slide-range-background-color});
-      transform: translateX(calc(-50% + 2px)) rotate(45deg);
+      background-color: rgba(#{$slide-range-background-color});
+      transform: rotate(45deg);
     }
 
     .#{$slide-range-tooltip} {
@@ -154,8 +157,8 @@ $slide-range-tooltip-color: sass.fn-naming-var("slide-range", "tooltip-color");
       font-size: 0.6rem;
       line-height: 0.9rem;
       white-space: nowrap;
-      color: rgb(#{$slide-range-tooltip-color});
-      background-color: rgb(#{$slide-range-tooltip-background-color});
+      color: rgba(#{$slide-range-tooltip-color});
+      background-color: rgba(#{$slide-range-tooltip-background-color});
     }
   }
 }

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

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { gesture } from "@toife/gesture";
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 import type { SlideRangeProps, SlideRangeEmit } from "./slide-range.type";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 import { inject } from "vue";
@@ -74,10 +74,10 @@ const slideRangeAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
   return {
     class: [
-      withPrefix("slide-range"),
-      withPrefix(["layer", "slide-range"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
+      cssPrefix("slide-range"),
+      cssPrefix(["layer", "slide-range"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
       {
         disabled: props.disabled,
         readonly: props.readonly,
@@ -87,41 +87,41 @@ const slideRangeAttrs = computed(() => {
 });
 
 const trackContainerAttrs = {
-  class: [withPrefix("slide-range-track-container")],
+  class: [cssPrefix("slide-range-track-container")],
 } as const;
 
 const trackBodyAttrs = {
-  class: [withPrefix("slide-range-track-body")],
+  class: [cssPrefix("slide-range-track-body")],
 } as const;
 
 const trackBackAttrs = {
-  class: [withPrefix("slide-range-track"), "back"],
+  class: [cssPrefix("slide-range-track"), "back"],
 } as const;
 
 const trackFrontAttrs = computed(() => {
   return {
-    class: [withPrefix("slide-range-track"), "front"],
+    class: [cssPrefix("slide-range-track"), "front"],
     style: {
-      [property(["slide-range", "percent"])]: `${percent.value}%`,
+      [cssProperty(["slide-range", "percent"])]: `${percent.value}%`,
     },
   };
 });
 
 const thumbAttrs = computed(() => {
   return {
-    class: [withPrefix("slide-range-thumb")],
+    class: [cssPrefix("slide-range-thumb")],
     style: {
-      [property(["slide-range", "percent"])]: `${percent.value}%`,
+      [cssProperty(["slide-range", "percent"])]: `${percent.value}%`,
     },
   };
 });
 
 const thumbInnerAttrs = {
-  class: [withPrefix("slide-range-thumb-inner")],
+  class: [cssPrefix("slide-range-thumb-inner")],
 } as const;
 
 const tooltipAttrs = {
-  class: [withPrefix("slide-range-tooltip")],
+  class: [cssPrefix("slide-range-tooltip")],
 } as const;
 
 // Methods
@@ -129,9 +129,9 @@ const tooltipAttrs = {
 const nodeAttrs = (value: number) => {
   const nodePercent = getPercentFromValue(value);
   return {
-    class: [withPrefix("slide-range-node"), { active: percent.value > nodePercent }],
+    class: [cssPrefix("slide-range-node"), { active: percent.value > nodePercent }],
     style: {
-      [property(["slide-range", "position"])]: `${nodePercent}%`,
+      [cssProperty(["slide-range", "position"])]: `${nodePercent}%`,
     },
   };
 };
@@ -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.html

@@ -2,7 +2,7 @@
   v-bind="switchWrapperAttrs"
   :tabindex="disabled ? -1 : 0"
   :aria-checked="props.modelValue"
-  @click="onSwitch"
+  @pointerup="onSwitch"
   @focus="onFocus"
   @blur="onBlur"
   @keydown="onKeydown"

package/src/components/switch/switch.scss

@@ -16,12 +16,13 @@ $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");
 $radius-size: sass.fn-naming-var("radius-size");
 $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
+$bounce-ratio: sass.fn-naming-var("switch", "bounce", "ratio");
 
 .#{$switch-wrapper} {
   display: inline-flex;
@@ -30,16 +31,23 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
   cursor: pointer;
   box-shadow: none !important;
 
+  &.transition {
+    .#{$switch},
+    .#{$switch-icon} {
+      transition:
+        background-color #{$transition-duration} ease,
+        color #{$transition-duration} ease,
+        border-color #{$transition-duration} ease,
+        border-radius #{$transition-duration} ease,
+        box-shadow #{$transition-duration} ease,
+        transform #{$transition-duration} ease;
+    }
+  }
+
   .#{$switch} {
     height: #{$size-control-mark-size};
     aspect-ratio: 14/8;
     position: relative;
-    transition:
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease,
-      box-shadow #{$transition-duration} ease;
     border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
 
     .#{$switch-icon} {
@@ -49,12 +57,6 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
       top: 0;
       border-radius: calc(min(#{$icon-size}, #{$radius-size}) * #{$radius-ratio});
       margin: calc(#{$size-control-mark-size} * 0.1);
-      transition:
-        background-color #{$transition-duration} ease,
-        color #{$transition-duration} ease,
-        border-color #{$transition-duration} ease,
-        border-radius #{$transition-duration} ease,
-        transform #{$transition-duration} ease;
     }
   }
 
@@ -62,12 +64,12 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
     cursor: not-allowed;
 
     .#{$switch} {
-      background-color: rgb(#{$switch-background-color-disabled});
+      background-color: rgba(#{$switch-background-color-disabled});
       cursor: not-allowed;
       opacity: 0.3;
 
       .#{$switch-icon} {
-        background-color: rgb(#{$switch-color-disabled});
+        background-color: rgba(#{$switch-color-disabled});
       }
     }
   }
@@ -82,10 +84,10 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
 
   &:not(.on) {
     .#{$switch} {
-      background-color: rgb(#{$switch-background-color-off});
+      background-color: rgba(#{$switch-background-color-off});
 
       .#{$switch-icon} {
-        background-color: rgb(#{$switch-color-off});
+        background-color: rgba(#{$switch-color-off});
         left: 0;
       }
     }
@@ -93,13 +95,13 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
 
   &.on {
     .#{$switch} {
-      background-color: rgb(#{$switch-background-color-on});
+      background-color: rgba(#{$switch-background-color-on});
 
       .#{$switch-icon} {
         right: 0;
         animation: shrink #{$transition-duration} linear;
         animation-fill-mode: forwards;
-        background-color: rgb(#{$switch-color-on});
+        background-color: rgba(#{$switch-color-on});
       }
     }
   }
@@ -107,7 +109,7 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
   &.focus {
     &.shadow {
       .#{$switch} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$switch-box-shadow-color-focus}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$switch-box-shadow-color-focus}, 0.25);
       }
     }
   }
@@ -118,7 +120,7 @@ $icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
     transform: scale(1);
   }
   50% {
-    transform: scale(1.5);
+    transform: scale(#{$bounce-ratio});
   }
   100% {
     transform: scale(1);

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 = {
@@ -11,6 +9,7 @@ export type SwitchProps = {
   disabled?: boolean;
   readonly?: boolean;
   shadow?: boolean;
+  bounce?: number | string;
 };
 
 export type SwitchEmit = {

package/src/components/switch/switch.vue

@@ -1,9 +1,9 @@
 <style lang="scss" src="./switch.scss" scoped></style>
 <template src="./switch.html"></template>
 <script lang="ts" setup>
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, onMounted } from "vue";
 import type { SwitchProps, SwitchEmit } from "./switch.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix, cssProperty } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<SwitchProps>(), {
   size: "standard",
   readonly: false,
   shadow: undefined,
+  bounce: 1.5,
 });
 const emit = defineEmits<SwitchEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -20,6 +21,7 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 // Reactive state
 // ----------------------------------------------------------------------------
 const isFocused = ref(false);
+const isFirstRender = ref(true);
 
 // Computed properties
 // ----------------------------------------------------------------------------
@@ -27,7 +29,7 @@ const switchWrapperAttrs = computed(() => {
   const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
     class: [
-      withPrefix("switch-wrapper"),
+      cssPrefix("switch-wrapper"),
       {
         disabled: props.disabled,
         readonly: props.readonly,
@@ -35,7 +37,13 @@ const switchWrapperAttrs = computed(() => {
         focus: isFocused.value,
         on: props.modelValue,
       },
+      {
+        transition: isFirstRender.value ? false : true,
+      },
     ],
+    style: {
+      [cssProperty(["switch", "bounce", "ratio"])]: props.bounce,
+    },
   };
 });
 
@@ -45,17 +53,17 @@ const switchAttrs = computed(() => {
   const role = props.role || baseRole;
   return {
     class: [
-      withPrefix(["layer", "switch"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix(["size", props.size]),
-      withPrefix("switch"),
+      cssPrefix(["layer", "switch"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("switch"),
     ],
   };
 });
 
 const switchIconAttrs = {
-  class: [withPrefix("switch-icon")],
+  class: [cssPrefix("switch-icon")],
 } as const;
 
 // Methods
@@ -80,4 +88,10 @@ const onKeydown = (e: KeyboardEvent) => {
   e.preventDefault();
   onSwitch();
 };
+
+onMounted(() => {
+  setTimeout(() => {
+    isFirstRender.value = false;
+  }, 500);
+});
 </script>

package/src/components/tabs/tab/tab.html

@@ -1,5 +1,5 @@
 <li v-bind="tabAttrs">
-  <CustomButton block :role="role" :shape="shape" @click="handleClick">
+  <CustomButton block :role="role" :shape="shape" :size="size" @click="handleClick">
     <slot />
   </CustomButton>
 </li>

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

@@ -0,0 +1,13 @@
+@use "@toife/sass-layer" as sass;
+
+$button: sass.fn-naming-prefix("button");
+
+.#{$button} {
+  background-color: none;
+  border: none;
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}

package/src/components/tabs/tab/tab.vue

@@ -1,9 +1,10 @@
 <template src="./tab.html"></template>
+<style lang="scss" src="./tab.scss" scoped></style>
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { Button as CustomButton } from "../../button";
 import { type TabProps } from "./tab.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type TabsProviderState, TABS_PROVIDER_STATE_KEY } from "../tabs";
 
 // Component setup (props, emits, injects)
@@ -17,11 +18,12 @@ const tabsState = inject<TabsProviderState>(TABS_PROVIDER_STATE_KEY);
 // ----------------------------------------------------------------------------
 const role = computed(() => tabsState?.role.value || "");
 const shape = computed(() => tabsState?.shape.value || "");
+const size = computed(() => tabsState?.size.value || "standard");
 const isActive = computed(() => tabsState?.activeValue.value === props.value);
 const tabAttrs = computed(() => {
   return {
     class: [
-      withPrefix("tab"),
+      cssPrefix("tab"),
       {
         active: isActive.value,
       },

package/src/components/tabs/tabs/index.ts

@@ -5,5 +5,6 @@ export type {
   TabsProviderState,
   TabsVariant,
   TabsPlacement,
+  TabsSize,
 } from "./tabs.type";
 export { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";