@toife/vue 3.1.3 → 3.1.5

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

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

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/index.ts

@@ -0,0 +1,2 @@
+export { default as SlideRange } from "./slide-range.vue";
+export type { SlideRangeProps, SlideRangeEmit } from "./slide-range.type";

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

@@ -0,0 +1,19 @@
+<div v-bind="slideRangeAttrs">
+  <div v-bind="trackContainerAttrs" ref="container">
+    <div v-bind="trackBodyAttrs">
+      <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)"
+        @pointerup="onNodeSelect(value)"
+      ></div>
+    </div>
+
+    <div v-bind="thumbAttrs" ref="point">
+      <div v-bind="thumbInnerAttrs"></div>
+      <span v-if="percent > 0 && isShowTooltip" v-bind="tooltipAttrs">{{ displayValue }}</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,161 @@
+@use "@toife/sass-layer" as sass;
+
+// Class name
+$slide-range: sass.fn-naming-prefix("slide-range");
+$slide-range-track-container: sass.fn-naming-prefix("slide-range-track-container");
+$slide-range-track-body: sass.fn-naming-prefix("slide-range-track-body");
+$slide-range-track: sass.fn-naming-prefix("slide-range-track");
+$slide-range-node: sass.fn-naming-prefix("slide-range-node");
+$slide-range-thumb: sass.fn-naming-prefix("slide-range-thumb");
+$slide-range-thumb-inner: sass.fn-naming-prefix("slide-range-thumb-inner");
+$slide-range-tooltip: sass.fn-naming-prefix("slide-range-tooltip");
+$shape-pill: sass.fn-naming-prefix("shape-pill");
+$shape-rounded: sass.fn-naming-prefix("shape-rounded");
+$shape-flat: sass.fn-naming-prefix("shape-flat");
+$property-border-radius: sass.fn-naming-property("border-radius");
+
+// Property name
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$border-width: sass.fn-naming-var("stroke", "width");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
+
+$slide-range-background-color: sass.fn-naming-var("slide-range", "background-color");
+$slide-range-background-color-hover: sass.fn-naming-var("slide-range", "background-color", "hover");
+$slide-range-background-color-focus: sass.fn-naming-var("slide-range", "background-color", "focus");
+$slide-range-background-color-active: sass.fn-naming-var(
+  "slide-range",
+  "background-color",
+  "active"
+);
+$slide-range-border-color: sass.fn-naming-var("slide-range", "border-color");
+$slide-range-border-color-hover: sass.fn-naming-var("slide-range", "border-color", "hover");
+$slide-range-border-color-focus: sass.fn-naming-var("slide-range", "border-color", "focus");
+$slide-range-border-color-active: sass.fn-naming-var("slide-range", "border-color", "active");
+$slide-range-percent: sass.fn-naming-var("slide-range", "percent");
+$slide-range-position: sass.fn-naming-var("slide-range", "position");
+$slide-range-tooltip-background-color: sass.fn-naming-var(
+  "slide-range",
+  "tooltip-background-color"
+);
+$slide-range-tooltip-color: sass.fn-naming-var("slide-range", "tooltip-color");
+
+.#{$slide-range} {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  &.#{$shape-pill} {
+    #{$property-border-radius}: 50%;
+
+    .#{$slide-range-tooltip} {
+      border-radius: 3px;
+    }
+  }
+
+  &.#{$shape-rounded} {
+    #{$property-border-radius}: 2px;
+
+    .#{$slide-range-tooltip} {
+      border-radius: 2px;
+    }
+  }
+
+  &.#{$shape-flat} {
+    #{$property-border-radius}: 0;
+
+    .#{$slide-range-tooltip} {
+      border-radius: 0;
+    }
+  }
+
+  &.disabled,
+  &.readonly {
+    opacity: 0.6;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  .#{$slide-range-track-container} {
+    position: relative;
+    margin: calc(#{$spacing-x} * 2) #{$spacing-x};
+    width: calc(100% - #{$spacing-x} * 2);
+    height: 1rem;
+    touch-action: none;
+  }
+
+  .#{$slide-range-track-body} {
+    position: relative;
+    width: 100%;
+    height: 1px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .#{$slide-range-track} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+
+    &.back {
+      width: 100%;
+      background-color: rgba(#{$slide-range-border-color});
+    }
+
+    &.front {
+      width: #{$slide-range-percent};
+      background-color: rgba(#{$slide-range-border-color-active});
+    }
+  }
+
+  .#{$slide-range-node} {
+    position: absolute;
+    left: #{$slide-range-position};
+    top: -3.5px;
+    height: 8px;
+    width: 8px;
+    border-radius: calc(min(8px, #{$radius-size}) * #{$radius-ratio});
+    transform: rotate(45deg);
+    background-color: rgba(#{$slide-range-background-color});
+    border: 1px solid rgba(#{$slide-range-border-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%;
+
+    .#{$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);
+    }
+
+    .#{$slide-range-tooltip} {
+      position: absolute;
+      top: -23px;
+      left: calc(50% + 0.15rem);
+      transform: translateX(-50%);
+      padding: 0 calc(#{$spacing-x} * 0.5);
+      font-size: 0.6rem;
+      line-height: 0.9rem;
+      white-space: nowrap;
+      color: rgba(#{$slide-range-tooltip-color});
+      background-color: rgba(#{$slide-range-tooltip-background-color});
+    }
+  }
+}

package/src/components/slide-range/slide-range.type.ts

@@ -0,0 +1,16 @@
+export type SlideRangeProps = {
+  modelValue?: string | number;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  role?: string;
+  shape?: string;
+};
+
+export type SlideRangeEmit = {
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+};

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

@@ -0,0 +1,229 @@
+<style lang="scss" src="./slide-range.scss" scoped></style>
+<template src="./slide-range.html"></template>
+<script lang="ts" setup>
+import { gesture } from "@toife/gesture";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+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";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SlideRangeProps>(), {
+  modelValue: "",
+  min: 0,
+  max: 100,
+  step: 25,
+  unit: "",
+  disabled: false,
+  readonly: false,
+});
+const emit = defineEmits<SlideRangeEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const point = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+const isShowTooltip = ref(false);
+let tooltipTimeout: ReturnType<typeof setTimeout> | undefined;
+let gestureCleanup: { destroy: () => void } | null = null;
+let dragStartPercent = 0;
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const normalizedValue = computed(() => {
+  if (typeof props.modelValue === "number") return props.modelValue;
+  if (typeof props.modelValue !== "string") return props.min;
+  const parsed = Number.parseFloat(props.modelValue);
+  if (Number.isNaN(parsed)) return props.min;
+  return parsed;
+});
+
+const percent = computed(() => {
+  const delta = props.max - props.min;
+  if (delta <= 0) return 0;
+  const p = ((normalizedValue.value - props.min) / delta) * 100;
+  return Math.max(0, Math.min(100, Math.round(p)));
+});
+
+const ranges = computed(() => {
+  const { min, max, step } = props;
+  if (step <= 0 || max < min) return [min, max];
+
+  const result: number[] = [];
+  for (let value = min; value <= max; value += step) {
+    result.push(value);
+  }
+
+  if (result.at(-1) !== max) {
+    result.push(max);
+  }
+
+  return result;
+});
+
+const displayValue = computed(() => {
+  const value = getValueFromPercent(percent.value);
+  return formatValue(value);
+});
+
+const slideRangeAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
+  return {
+    class: [
+      cssPrefix("slide-range"),
+      cssPrefix(["layer", "slide-range"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+      },
+    ],
+  };
+});
+
+const trackContainerAttrs = {
+  class: [cssPrefix("slide-range-track-container")],
+} as const;
+
+const trackBodyAttrs = {
+  class: [cssPrefix("slide-range-track-body")],
+} as const;
+
+const trackBackAttrs = {
+  class: [cssPrefix("slide-range-track"), "back"],
+} as const;
+
+const trackFrontAttrs = computed(() => {
+  return {
+    class: [cssPrefix("slide-range-track"), "front"],
+    style: {
+      [cssProperty(["slide-range", "percent"])]: `${percent.value}%`,
+    },
+  };
+});
+
+const thumbAttrs = computed(() => {
+  return {
+    class: [cssPrefix("slide-range-thumb")],
+    style: {
+      [cssProperty(["slide-range", "percent"])]: `${percent.value}%`,
+    },
+  };
+});
+
+const thumbInnerAttrs = {
+  class: [cssPrefix("slide-range-thumb-inner")],
+} as const;
+
+const tooltipAttrs = {
+  class: [cssPrefix("slide-range-tooltip")],
+} as const;
+
+// Methods
+// ----------------------------------------------------------------------------
+const nodeAttrs = (value: number) => {
+  const nodePercent = getPercentFromValue(value);
+  return {
+    class: [cssPrefix("slide-range-node"), { active: percent.value > nodePercent }],
+    style: {
+      [cssProperty(["slide-range", "position"])]: `${nodePercent}%`,
+    },
+  };
+};
+
+const getValueFromPercent = (currentPercent: number) => {
+  const { min, max } = props;
+  return Math.round(min + (max - min) * (currentPercent / 100));
+};
+
+const getPercentFromValue = (value: number) => {
+  const { min, max } = props;
+  if (max <= min) return 0;
+  const p = ((value - min) / (max - min)) * 100;
+  return Math.max(0, Math.min(100, p));
+};
+
+const formatValue = (value: number) => {
+  if (value === 0) return "";
+  return `${value}${props.unit || ""}`;
+};
+
+const showTooltipTemporarily = () => {
+  if (tooltipTimeout) clearTimeout(tooltipTimeout);
+  isShowTooltip.value = true;
+  tooltipTimeout = setTimeout(() => {
+    isShowTooltip.value = false;
+  }, 300);
+};
+
+const emitValueFromPercent = (currentPercent: number) => {
+  if (props.disabled || props.readonly) return;
+  const value = getValueFromPercent(currentPercent);
+  const payload = formatValue(value);
+  emit("update:modelValue", payload);
+  emit("change", payload);
+};
+
+const onNodeSelect = (value: number) => {
+  const nodePercent = getPercentFromValue(value);
+  emitValueFromPercent(nodePercent);
+  showTooltipTemporarily();
+};
+
+const getClientX = (ev: MouseEvent | TouchEvent) => {
+  if ("changedTouches" in ev && ev.changedTouches.length > 0) {
+    return ev.changedTouches[0].clientX;
+  }
+  return (ev as MouseEvent).clientX;
+};
+
+const onClickPath = (ev: MouseEvent | TouchEvent) => {
+  if (props.disabled || props.readonly || !container.value) return;
+  const width = container.value.offsetWidth;
+  const rect = container.value.getBoundingClientRect();
+  const x = getClientX(ev) - rect.left;
+  const p = (x / width) * 100;
+  emitValueFromPercent(Math.max(0, Math.min(100, p)));
+  showTooltipTemporarily();
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+onMounted(() => {
+  if (!point.value || !container.value) return;
+  gestureCleanup = gesture(point.value, {
+    down() {
+      if (props.disabled || props.readonly) return;
+      dragStartPercent = percent.value;
+    },
+    up() {
+      isShowTooltip.value = false;
+    },
+    cancel() {
+      isShowTooltip.value = false;
+    },
+    move({ initialDirection, deltaX }: { initialDirection: string; deltaX: number }) {
+      if (props.disabled || props.readonly) return;
+      if (initialDirection !== "right" && initialDirection !== "left") return;
+      if (!container.value) return;
+
+      const width = container.value.offsetWidth;
+      const p = (deltaX / width) * 100;
+      const nextPercent = Math.max(0, Math.min(100, Math.round(dragStartPercent + p)));
+      emitValueFromPercent(nextPercent);
+      if (tooltipTimeout) clearTimeout(tooltipTimeout);
+      isShowTooltip.value = true;
+    },
+  });
+});
+
+onUnmounted(() => {
+  if (tooltipTimeout) clearTimeout(tooltipTimeout);
+  gestureCleanup?.destroy();
+});
+</script>

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

@@ -3,8 +3,6 @@
 // Classes
 $switch: sass.fn-naming-prefix("switch");
 $switch-icon: sass.fn-naming-prefix("switch-icon");
-$shape-rounded: sass.fn-naming-prefix("shape-rounded");
-$shape-pill: sass.fn-naming-prefix("shape-pill");
 $switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
 
 // Property name - layer: switch (track + thumb; states like button + inactive)
@@ -19,8 +17,12 @@ $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");
-$border-radius: sass.fn-naming-var("border-radius");
+$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;
@@ -29,43 +31,32 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   cursor: pointer;
   box-shadow: none !important;
 
-  .#{$switch} {
-    height: 1.5rem;
-    aspect-ratio: 11/6;
-    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: #{$border-radius};
-
+  &.transition {
+    .#{$switch},
     .#{$switch-icon} {
-      height: calc(100% - 0.3rem);
-      position: absolute;
-      top: 0;
-      border-radius: #{$border-radius};
-      aspect-ratio: 1/1;
-      margin: 0.15rem;
       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;
     }
+  }
 
-    &.#{$shape-rounded} {
-      .#{$switch-icon} {
-        border-radius: calc(#{$border-radius} - 10%);
-      }
-    }
+  .#{$switch} {
+    height: #{$size-control-mark-size};
+    aspect-ratio: 14/8;
+    position: relative;
+    border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
 
-    &.#{$shape-pill} {
-      .#{$switch-icon} {
-        border-radius: 50%;
-      }
+    .#{$switch-icon} {
+      width: #{$icon-size};
+      height: #{$icon-size};
+      position: absolute;
+      top: 0;
+      border-radius: calc(min(#{$icon-size}, #{$radius-size}) * #{$radius-ratio});
+      margin: calc(#{$size-control-mark-size} * 0.1);
     }
   }
 
@@ -73,12 +64,12 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
     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});
       }
     }
   }
@@ -93,10 +84,10 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 
   &: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;
       }
     }
@@ -104,13 +95,13 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 
   &.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});
       }
     }
   }
@@ -118,7 +109,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   &.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);
       }
     }
   }
@@ -129,7 +120,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
     transform: scale(1);
   }
   50% {
-    transform: scale(1.5);
+    transform: scale(#{$bounce-ratio});
   }
   100% {
     transform: scale(1);