@toife/vue 3.1.2 → 3.1.4

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 { property, withPrefix } 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: [
+      withPrefix("slide-range"),
+      withPrefix(["layer", "slide-range"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+      },
+    ],
+  };
+});
+
+const trackContainerAttrs = {
+  class: [withPrefix("slide-range-track-container")],
+} as const;
+
+const trackBodyAttrs = {
+  class: [withPrefix("slide-range-track-body")],
+} as const;
+
+const trackBackAttrs = {
+  class: [withPrefix("slide-range-track"), "back"],
+} as const;
+
+const trackFrontAttrs = computed(() => {
+  return {
+    class: [withPrefix("slide-range-track"), "front"],
+    style: {
+      [property(["slide-range", "percent"])]: `${percent.value}%`,
+    },
+  };
+});
+
+const thumbAttrs = computed(() => {
+  return {
+    class: [withPrefix("slide-range-thumb")],
+    style: {
+      [property(["slide-range", "percent"])]: `${percent.value}%`,
+    },
+  };
+});
+
+const thumbInnerAttrs = {
+  class: [withPrefix("slide-range-thumb-inner")],
+} as const;
+
+const tooltipAttrs = {
+  class: [withPrefix("slide-range-tooltip")],
+} as const;
+
+// Methods
+// ----------------------------------------------------------------------------
+const nodeAttrs = (value: number) => {
+  const nodePercent = getPercentFromValue(value);
+  return {
+    class: [withPrefix("slide-range-node"), { active: percent.value > nodePercent }],
+    style: {
+      [property(["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.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,11 @@ $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);
 
 .#{$switch-wrapper} {
   display: inline-flex;
@@ -30,8 +31,8 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   box-shadow: none !important;
 
   .#{$switch} {
-    height: 1.5rem;
-    aspect-ratio: 11/6;
+    height: #{$size-control-mark-size};
+    aspect-ratio: 14/8;
     position: relative;
     transition:
       background-color #{$transition-duration} ease,
@@ -39,15 +40,15 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       border-color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease,
       box-shadow #{$transition-duration} ease;
-    border-radius: #{$border-radius};
+    border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
 
     .#{$switch-icon} {
-      height: calc(100% - 0.3rem);
+      width: #{$icon-size};
+      height: #{$icon-size};
       position: absolute;
       top: 0;
-      border-radius: #{$border-radius};
-      aspect-ratio: 1/1;
-      margin: 0.15rem;
+      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,
@@ -55,18 +56,6 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
         border-radius #{$transition-duration} ease,
         transform #{$transition-duration} ease;
     }
-
-    &.#{$shape-rounded} {
-      .#{$switch-icon} {
-        border-radius: calc(#{$border-radius} - 10%);
-      }
-    }
-
-    &.#{$shape-pill} {
-      .#{$switch-icon} {
-        border-radius: 50%;
-      }
-    }
   }
 
   &.disabled {

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

@@ -1,7 +1,12 @@
+import { AppSize } from "../app";
+
+export type SwitchSize = AppSize;
+
 // Type definitions
 export type SwitchProps = {
   modelValue?: boolean;
   role?: string;
+  size?: SwitchSize;
   shape?: string;
   disabled?: boolean;
   readonly?: boolean;

package/src/components/switch/switch.vue

@@ -10,6 +10,7 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<SwitchProps>(), {
   modelValue: false,
+  size: "standard",
   readonly: false,
   shadow: undefined,
 });
@@ -47,6 +48,7 @@ const switchAttrs = computed(() => {
       withPrefix(["layer", "switch"]),
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
+      withPrefix(["size", props.size]),
       withPrefix("switch"),
     ],
   };

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

@@ -6,23 +6,55 @@ $tab: sass.fn-naming-prefix("tab");
 $button: sass.fn-naming-prefix("button");
 
 // Property name - layer: tabs
-$tabs-color: sass.fn-naming-var("tabs", "color");
-$tabs-background-color: sass.fn-naming-var("tabs", "background-color");
-$tabs-border-color: sass.fn-naming-var("tabs", "border-color");
-
-$space-x: sass.fn-naming-var("spacing", "x");
-$space-y: sass.fn-naming-var("spacing", "y");
-$border-radius: sass.fn-naming-var("border-radius");
+// Underline
+$tabs-underline-color: sass.fn-naming-var("tabs", "underline", "color");
+$tabs-underline-color-active: sass.fn-naming-var("tabs", "underline", "color", "active");
+$tabs-underline-color-hover: sass.fn-naming-var("tabs", "underline", "color", "hover");
+$tabs-underline-color-focus: sass.fn-naming-var("tabs", "underline", "color", "focus");
+$tabs-underline-color-disabled: sass.fn-naming-var("tabs", "underline", "color", "disabled");
+$tabs-underline-background-color: sass.fn-naming-var("tabs", "underline", "background-color");
+
+// Fill
+$tabs-fill-color: sass.fn-naming-var("tabs", "fill", "color");
+$tabs-fill-color-active: sass.fn-naming-var("tabs", "fill", "color", "active");
+$tabs-fill-color-hover: sass.fn-naming-var("tabs", "fill", "color", "hover");
+$tabs-fill-color-focus: sass.fn-naming-var("tabs", "fill", "color", "focus");
+$tabs-fill-color-disabled: sass.fn-naming-var("tabs", "fill", "color", "disabled");
+
+$tabs-fill-background-color: sass.fn-naming-var("tabs", "fill", "background-color");
+$tabs-fill-background-color-active: sass.fn-naming-var(
+  "tabs",
+  "fill",
+  "background-color",
+  "active"
+);
+$tabs-fill-background-color-hover: sass.fn-naming-var("tabs", "fill", "background-color", "hover");
+$tabs-fill-background-color-focus: sass.fn-naming-var("tabs", "fill", "background-color", "focus");
+$tabs-fill-background-color-disabled: sass.fn-naming-var(
+  "tabs",
+  "fill",
+  "background-color",
+  "disabled"
+);
+
+// Text
+$tabs-text-color: sass.fn-naming-var("tabs", "text", "color");
+$tabs-text-color-active: sass.fn-naming-var("tabs", "text", "color", "active");
+$tabs-text-color-hover: sass.fn-naming-var("tabs", "text", "color", "hover");
+$tabs-text-color-focus: sass.fn-naming-var("tabs", "text", "color", "focus");
+$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");
-
+$radius-size: sass.fn-naming-var("radius-size");
 // layer: highlight (indicator geometry)
-$highlight-top: sass.fn-naming-var("highlight", "top");
-$highlight-left: sass.fn-naming-var("highlight", "left");
-$highlight-width: sass.fn-naming-var("highlight", "width");
-$highlight-height: sass.fn-naming-var("highlight", "height");
-$highlight-space-x: sass.fn-naming-var("highlight", "space-x");
-$highlight-space-y: sass.fn-naming-var("highlight", "space-y");
+$highlight-top: sass.fn-naming-var("tabs", "highlight", "top");
+$highlight-left: sass.fn-naming-var("tabs", "highlight", "left");
+$highlight-width: sass.fn-naming-var("tabs", "highlight", "width");
+$highlight-height: sass.fn-naming-var("tabs", "highlight", "height");
+$highlight-space-x: sass.fn-naming-var("tabs", "highlight", "space-x");
+$highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
 
 .#{$tabs} {
   display: flex;
@@ -53,8 +85,9 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     height: #{$highlight-height};
     transform: translate(#{$highlight-left}, #{$highlight-top});
     box-sizing: border-box;
-    background-color: rgb(#{$tabs-background-color});
-    border-radius: #{$border-radius};
+    border-radius: calc(
+      min(#{$highlight-width}, #{$highlight-height}, #{$radius-size}) * #{$radius-ratio}
+    );
   }
 
   &.top-start,
@@ -88,6 +121,8 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     flex-direction: row;
     height: fit-content;
     width: 100%;
+    padding-top: #{$highlight-space-y};
+    padding-bottom: #{$highlight-space-y};
 
     > * {
       height: 100%;
@@ -100,6 +135,8 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
   &.right-start,
   &.right-center,
   &.right-end {
+    padding-left: #{$highlight-space-x};
+    padding-right: #{$highlight-space-x};
     flex-direction: column;
     width: fit-content;
     height: 100%;
@@ -109,81 +146,81 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     }
   }
 
-  &.divider {
-    &.top-start,
-    &.top-center,
-    &.top-end {
-      border-bottom: #{$border-width} solid rgb(#{$tabs-border-color});
+  &.underline {
+    &::before {
+      background-color: rgb(#{$tabs-underline-background-color});
     }
 
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      border-top: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
+    :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgb(#{$tabs-underline-color});
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end {
-      border-right: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
+      &.active {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-active});
+        }
+      }
 
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      border-left: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
-  }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-hover});
+        }
+      }
 
-  &.underline {
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: #{$highlight-space-y};
-      padding-bottom: #{$highlight-space-y};
-    }
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-focus});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: #{$highlight-space-x};
-      padding-right: #{$highlight-space-x};
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgb(#{$tabs-underline-color-disabled});
+        }
+      }
     }
   }
 
   &.fill {
+    &::before {
+      background-color: rgb(#{$tabs-fill-background-color});
+    }
+
     :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgb(#{$tabs-fill-color});
+      }
+
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-color}) !important;
+          color: rgb(#{$tabs-fill-color-active});
         }
       }
-    }
 
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: calc(#{$highlight-space-y} + #{$space-y});
-      padding-bottom: calc(#{$highlight-space-y} + #{$space-y});
-    }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgb(#{$tabs-fill-color-hover});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: calc(#{$highlight-space-x} + #{$space-x});
-      padding-right: calc(#{$highlight-space-x} + #{$space-x});
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgb(#{$tabs-fill-color-focus});
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgb(#{$tabs-fill-color-disabled});
+        }
+      }
     }
   }
 
@@ -193,32 +230,36 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     }
 
     :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgb(#{$tabs-text-color});
+      }
+
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-background-color});
-          text-shadow: 0 0 rgb(#{$tabs-background-color});
+          color: rgb(#{$tabs-text-color-active});
         }
       }
-    }
 
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: calc(#{$highlight-space-y} + #{$space-y});
-      padding-bottom: calc(#{$highlight-space-y} + #{$space-y});
-    }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgb(#{$tabs-text-color-hover});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: calc(#{$highlight-space-x} + #{$space-x});
-      padding-right: calc(#{$highlight-space-x} + #{$space-x});
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgb(#{$tabs-text-color-focus});
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgb(#{$tabs-text-color-disabled});
+        }
+      }
     }
   }
 
@@ -256,7 +297,6 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     align-items: center;
 
     .#{$button} {
-      padding: #{$space-y} calc(#{$space-x} * 4);
       color: unset;
       cursor: pointer;
       background-color: transparent !important;

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

@@ -20,7 +20,6 @@ export type TabsProps = {
   border?: number;
   margin?: number[];
   shape?: string;
-  divider?: boolean;
   transition?: boolean;
 };
 

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

@@ -13,7 +13,6 @@ const props = withDefaults(defineProps<TabsProps>(), {
   placement: "top-start",
   margin: () => [0, 0],
   border: 2,
-  divider: undefined,
   transition: true,
 });
 const emit = defineEmits<TabsEmit>();
@@ -42,8 +41,6 @@ const activeValue = computed(() => {
 });
 
 const tabsAttrs = computed(() => {
-  const divider =
-    (props.divider !== undefined ? props.divider : appState?.divider.value || false) ?? false;
   let l = left.value;
   let t = top.value;
   let w = width.value;
@@ -91,17 +88,16 @@ const tabsAttrs = computed(() => {
       props.variant,
       props.placement,
       {
-        divider,
         transition: props.transition,
       },
     ],
     style: {
-      [property("highlight-top")]: typeof t === "string" ? t : t + "px",
-      [property("highlight-left")]: typeof l === "string" ? l : l + "px",
-      [property("highlight-width")]: typeof w === "string" ? w : w + "px",
-      [property("highlight-height")]: typeof h === "string" ? h : h + "px",
-      [property("highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
-      [property("highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
+      [property("tabs-highlight-top")]: typeof t === "string" ? t : t + "px",
+      [property("tabs-highlight-left")]: typeof l === "string" ? l : l + "px",
+      [property("tabs-highlight-width")]: typeof w === "string" ? w : w + "px",
+      [property("tabs-highlight-height")]: typeof h === "string" ? h : h + "px",
+      [property("tabs-highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
+      [property("tabs-highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
     },
   };
 });