@toife/vue 3.1.5 → 3.2.0

package/src/components/select/select.vue

@@ -1,119 +0,0 @@
-<style lang="scss" src="./select.scss" scoped></style>
-<template src="./select.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref } from "vue";
-import { type SelectOption, type SelectProps, type SelectEmit } from "./select.type";
-import { cssProperty, cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-import { Field } from "../field";
-import { Dropdown } from "../dropdown";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<SelectProps>(), {
-  modelValue: "",
-  type: "text",
-  size: "standard",
-  disabled: false,
-  message: "",
-  help: "",
-  variant: "outline",
-  placeholder: "",
-  shadow: undefined,
-  direction: undefined,
-  options: () => [] as Array<SelectOption>,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-const emit = defineEmits<SelectEmit>();
-const visible = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const direction = computed(() => {
-  return props.direction || appState?.direction?.value || "left";
-});
-
-const shadow = computed(() => {
-  return props.shadow || appState?.shadow.value || false;
-});
-
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
-});
-
-const selectAttrs = computed(() => {
-  return {
-    class: [
-      cssPrefix(["layer", "select"]),
-      cssPrefix(["role", role.value]),
-      cssPrefix("select"),
-      cssPrefix(["direction", direction.value]),
-      cssPrefix(["size", props.size]),
-      {
-        disabled: props.disabled,
-      },
-    ],
-  };
-});
-
-const dropdownAttrs = computed(() => {
-  return {
-    role: role.value,
-    direction: direction.value,
-    shadow: shadow.value,
-    shape: shape.value,
-    disabled: props.disabled,
-  };
-});
-
-const fieldAttrs = computed(() => {
-  const propsValue = props.modelValue || props.value;
-  let val: string[] = [];
-  if (propsValue) val = typeof propsValue === "string" ? [propsValue] : (propsValue as string[]);
-  const values: string[] = props.options
-    .filter((option): option is SelectOption => (val || []).includes(option.value))
-    .map((option) => option.label ?? option.value);
-
-  return {
-    modelValue: values.join(","),
-    size: props.size,
-    variant: props.variant,
-    placeholder: props.placeholder,
-    direction: direction.value,
-    role: role.value,
-    shape: shape.value,
-    readonly: true,
-    disabled: props.disabled,
-    shadow: shadow.value,
-  };
-});
-
-const selectIconAttrs = computed(() => ({
-  class: [cssPrefix("select-icon")],
-}));
-
-const selectOptionAttrs = computed(() => ({
-  class: [cssPrefix("select-option")],
-}));
-
-const selectMessageAttrs = computed(() => ({
-  class: [cssPrefix("select-message")],
-}));
-
-const selectHelpAttrs = computed(() => ({
-  class: [cssPrefix("select-help")],
-}));
-
-// Methods
-// ----------------------------------------------------------------------------
-const pickOption = (option: SelectOption) => {
-  if (option.disabled || option.value === undefined) return;
-  emit("update:modelValue", option.value);
-  emit("select", option);
-  visible.value = false;
-};
-</script>

package/src/components/skeleton/index.ts

@@ -1,2 +0,0 @@
-export { default as Skeleton } from "./skeleton.vue";
-export type { SkeletonProps } from "./skeleton.type";

package/src/components/skeleton/skeleton.html

@@ -1 +0,0 @@
-<div v-bind="skeletonAttrs"></div>

package/src/components/skeleton/skeleton.scss

@@ -1,52 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$skeleton: sass.fn-naming-prefix("skeleton");
-
-// Property name - layer: skeleton
-$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");
-
-$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};
-  height: #{$skeleton-height};
-  position: relative;
-  overflow: hidden;
-  border-radius: #{$border-radius};
-  background-color: rgba(#{$skeleton-background-color}, 0.2);
-  display: inline-block;
-  line-height: 0;
-  transition:
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(#{$skeleton-background-color}, 1),
-      transparent
-    );
-    opacity: 0.2;
-    animation: shimmer 1.2s infinite;
-  }
-}
-
-@keyframes shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}

package/src/components/skeleton/skeleton.type.ts

@@ -1,7 +0,0 @@
-// Type definitions
-export type SkeletonProps = {
-  width?: string | number;
-  height?: string | number;
-  role?: string;
-  shape?: string;
-};

package/src/components/skeleton/skeleton.vue

@@ -1,38 +0,0 @@
-<style lang="scss" src="./skeleton.scss" scoped></style>
-<template src="./skeleton.html"></template>
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-import { type SkeletonProps } from "./skeleton.type";
-import { cssProperty, cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<SkeletonProps>(), {
-  width: "100%",
-  height: "1rem",
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const skeletonAttrs = computed(() => {
-  const shape = props.shape || appState?.shape.value || "";
-  const role = props.role || appState?.role.value || "";
-
-  return {
-    class: [
-      cssPrefix(["layer", "skeleton"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("skeleton"),
-    ],
-    style: {
-      [cssProperty(["skeleton", "width"])]:
-        props.width + (typeof props.width === "number" ? "px" : ""),
-      [cssProperty(["skeleton", "height"])]:
-        props.height + (typeof props.height === "number" ? "px" : ""),
-    },
-  };
-});
-</script>

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

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

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

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

@@ -1,161 +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};
-    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

@@ -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,229 +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, {
-    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>