@toife/vue 3.1.6 → 3.2.0

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

@@ -1,164 +0,0 @@
-@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};
-    height: 25px;
-    width: 25px;
-    transform: translate(-9px, -5px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .#{$slide-range-thumb-inner} {
-      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: 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

@@ -1,16 +0,0 @@
-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

@@ -1,230 +0,0 @@
-<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, {
-    options: { trackOutsideElement: true },
-    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/index.ts

@@ -1,2 +0,0 @@
-export { default as Switch } from "./switch.vue";
-export * from "./switch.type";

package/src/components/switch/switch.html

@@ -1,14 +0,0 @@
-<div
-  v-bind="switchWrapperAttrs"
-  :tabindex="disabled ? -1 : 0"
-  :aria-checked="props.modelValue"
-  @pointerup="onSwitch"
-  @focus="onFocus"
-  @blur="onBlur"
-  @keydown="onKeydown"
->
-  <div v-bind="switchAttrs">
-    <div v-bind="switchIconAttrs"></div>
-  </div>
-  <slot />
-</div>

package/src/components/switch/switch.scss

@@ -1,128 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$switch: sass.fn-naming-prefix("switch");
-$switch-icon: sass.fn-naming-prefix("switch-icon");
-$switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
-
-// Property name - layer: switch (track + thumb; states like button + inactive)
-$switch-background-color-off: sass.fn-naming-var("switch", "background-color", "off");
-$switch-background-color-on: sass.fn-naming-var("switch", "background-color", "on");
-$switch-background-color-disabled: sass.fn-naming-var("switch", "background-color", "disabled");
-
-$switch-color-on: sass.fn-naming-var("switch", "color", "on");
-$switch-color-off: sass.fn-naming-var("switch", "color", "off");
-$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("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;
-  gap: calc(#{$spacing-x} * 2);
-  align-items: center;
-  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;
-    border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
-
-    .#{$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);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .#{$switch} {
-      background-color: rgba(#{$switch-background-color-disabled});
-      cursor: not-allowed;
-      opacity: 0.3;
-
-      .#{$switch-icon} {
-        background-color: rgba(#{$switch-color-disabled});
-      }
-    }
-  }
-
-  &.readonly {
-    cursor: default;
-
-    .#{$switch} {
-      cursor: default;
-    }
-  }
-
-  &:not(.on) {
-    .#{$switch} {
-      background-color: rgba(#{$switch-background-color-off});
-
-      .#{$switch-icon} {
-        background-color: rgba(#{$switch-color-off});
-        left: 0;
-      }
-    }
-  }
-
-  &.on {
-    .#{$switch} {
-      background-color: rgba(#{$switch-background-color-on});
-
-      .#{$switch-icon} {
-        right: 0;
-        animation: shrink #{$transition-duration} linear;
-        animation-fill-mode: forwards;
-        background-color: rgba(#{$switch-color-on});
-      }
-    }
-  }
-
-  &.focus {
-    &.shadow {
-      .#{$switch} {
-        box-shadow: 0 0 0 0.25rem rgba(#{$switch-box-shadow-color-focus}, 0.25);
-      }
-    }
-  }
-}
-
-@keyframes shrink {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(#{$bounce-ratio});
-  }
-  100% {
-    transform: scale(1);
-  }
-}

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

@@ -1,17 +0,0 @@
-export type SwitchSize = string;
-
-// Type definitions
-export type SwitchProps = {
-  modelValue?: boolean;
-  role?: string;
-  size?: SwitchSize;
-  shape?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  shadow?: boolean;
-  bounce?: number | string;
-};
-
-export type SwitchEmit = {
-  (e: "update:modelValue", value: boolean): void;
-};

package/src/components/switch/switch.vue

@@ -1,97 +0,0 @@
-<style lang="scss" src="./switch.scss" scoped></style>
-<template src="./switch.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref, onMounted } from "vue";
-import type { SwitchProps, SwitchEmit } from "./switch.type";
-import { cssPrefix, cssProperty } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<SwitchProps>(), {
-  modelValue: false,
-  size: "standard",
-  readonly: false,
-  shadow: undefined,
-  bounce: 1.5,
-});
-const emit = defineEmits<SwitchEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocused = ref(false);
-const isFirstRender = ref(true);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const switchWrapperAttrs = computed(() => {
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-  return {
-    class: [
-      cssPrefix("switch-wrapper"),
-      {
-        disabled: props.disabled,
-        readonly: props.readonly,
-        shadow: shadow && !props.disabled && isFocused.value,
-        focus: isFocused.value,
-        on: props.modelValue,
-      },
-      {
-        transition: isFirstRender.value ? false : true,
-      },
-    ],
-    style: {
-      [cssProperty(["switch", "bounce", "ratio"])]: props.bounce,
-    },
-  };
-});
-
-const switchAttrs = computed(() => {
-  const shape = props.shape || appState?.shape.value || "";
-  const baseRole = appState?.role.value || "";
-  const role = props.role || baseRole;
-  return {
-    class: [
-      cssPrefix(["layer", "switch"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix(["size", props.size]),
-      cssPrefix("switch"),
-    ],
-  };
-});
-
-const switchIconAttrs = {
-  class: [cssPrefix("switch-icon")],
-} as const;
-
-// Methods
-// ----------------------------------------------------------------------------
-const onSwitch = () => {
-  if (props.disabled || props.readonly) return;
-  emit("update:modelValue", !props.modelValue);
-};
-
-const onFocus = () => {
-  if (props.disabled || props.readonly) return;
-  isFocused.value = true;
-};
-
-const onBlur = () => {
-  if (props.disabled || props.readonly) return;
-  isFocused.value = false;
-};
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key !== " " && e.key !== "Enter") return;
-  e.preventDefault();
-  onSwitch();
-};
-
-onMounted(() => {
-  setTimeout(() => {
-    isFirstRender.value = false;
-  }, 500);
-});
-</script>

package/src/components/tabs/index.ts

@@ -1,2 +0,0 @@
-export * from "./tabs";
-export * from "./tab";

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

@@ -1,2 +0,0 @@
-export { default as Tab } from "./tab.vue";
-export type { TabProps } from "./tab.type";

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

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

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

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