@toife/vue 3.2.6 → 3.2.7

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

@@ -0,0 +1,269 @@
+<style lang="scss" src="@toife/core/features/slide-range/slide-range.scss" scoped></style>
+<template src="./slide-range.html"></template>
+<script lang="ts" setup>
+import { gesture } from "@toife/gesture";
+import { computed, inject, onMounted, onUnmounted, ref, unref } from "vue";
+import {
+  SLIDE_RANGE_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getSlideRangeAttrs,
+  getSlideRangeTickAttrs,
+  getSlideRangeThumbAttrs,
+  getSlideRangeThumbInnerAttrs,
+  getSlideRangeTooltipAttrs,
+  getSlideRangeTrackBackAttrs,
+  getSlideRangeTrackBodyAttrs,
+  getSlideRangeTrackContainerAttrs,
+  getSlideRangeTrackFrontAttrs,
+  type AppProviderState,
+  type SlideRangeEvent,
+  type SlideRangeProps,
+  type SlideRangeValue,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SlideRangeProps>(), {
+  ...SLIDE_RANGE_DEFAULT_PROPS,
+});
+const emit = defineEmits<SlideRangeEvent>();
+const appState = inject<ProviderStateRefs<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;
+let isHorizontalDrag = false;
+
+const suppressPointerEvent = (ev?: Event) => {
+  if (!ev) return;
+  ev.stopPropagation();
+};
+
+const isHorizontalDirection = (direction?: string) => direction === "left" || direction === "right";
+
+const parseRangeValue = (value: SlideRangeValue | undefined, fallback: number): number => {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isNaN(parsed) ? fallback : parsed;
+  }
+  return fallback;
+};
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const rangeMin = computed(() => parseRangeValue(props.min, 0));
+const rangeMax = computed(() => parseRangeValue(props.max, 100));
+const rangeStep = computed(() => {
+  const step = parseRangeValue(props.step, 1);
+  return step > 0 ? step : 1;
+});
+
+const snapToStep = (rawValue: number) => {
+  const min = rangeMin.value;
+  const max = rangeMax.value;
+  const stepSize = rangeStep.value;
+  if (max <= min) return min;
+  const clamped = Math.max(min, Math.min(max, rawValue));
+  const stepIndex = Math.round((clamped - min) / stepSize);
+  return Math.max(min, Math.min(max, min + stepIndex * stepSize));
+};
+
+const normalizedValue = computed(() => {
+  const value = parseRangeValue(props.modelValue, rangeMin.value);
+  return snapToStep(value);
+});
+
+const percent = computed(() => getPercentFromValue(normalizedValue.value));
+
+const ticks = computed(() => {
+  if (props.tick === false) return [];
+  const min = rangeMin.value;
+  const max = rangeMax.value;
+  const tickStep = props.tick === true ? 1 : parseRangeValue(props.tick, 0);
+  if (tickStep <= 0 || max < min) return [min, max];
+
+  const result: number[] = [];
+  for (let value = min; value <= max; value += tickStep) {
+    result.push(value);
+  }
+
+  if (result.at(-1) !== max) {
+    result.push(max);
+  }
+
+  return result;
+});
+
+const displayValue = computed(() => {
+  const value = getValueFromPercent(percent.value);
+  return `${value}${props.unit || ""}`;
+});
+
+const slideRangeAttrs = computed(() => {
+  const role = props.role || unref(appState?.role) || "";
+  const shape = props.shape || unref(appState?.shape) || "";
+  return getSlideRangeAttrs({
+    role,
+    shape,
+    disabled: props.disabled,
+    readonly: props.readonly,
+  });
+});
+
+const trackContainerAttrs = getSlideRangeTrackContainerAttrs();
+const trackBodyAttrs = getSlideRangeTrackBodyAttrs();
+const trackBackAttrs = getSlideRangeTrackBackAttrs();
+const trackFrontAttrs = computed(() => getSlideRangeTrackFrontAttrs({ percent: percent.value }));
+const thumbAttrs = computed(() => getSlideRangeThumbAttrs({ percent: percent.value }));
+const thumbInnerAttrs = getSlideRangeThumbInnerAttrs();
+const tooltipAttrs = getSlideRangeTooltipAttrs();
+
+// Methods
+// ----------------------------------------------------------------------------
+const tickAttrs = (value: number) => {
+  const tickPercent = getPercentFromValue(value);
+  return getSlideRangeTickAttrs({
+    active: percent.value > tickPercent,
+    percent: tickPercent,
+  });
+};
+
+const getValueFromPercent = (currentPercent: number) => {
+  const min = rangeMin.value;
+  const max = rangeMax.value;
+  const raw = min + (max - min) * (currentPercent / 100);
+  return snapToStep(raw);
+};
+
+const getPercentFromValue = (value: number) => {
+  const min = rangeMin.value;
+  const max = rangeMax.value;
+  if (max <= min) return 0;
+  const p = ((value - min) / (max - min)) * 100;
+  return Math.max(0, Math.min(100, p));
+};
+
+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);
+
+  if (value !== props.modelValue) {
+    emit("update:modelValue", value);
+    emit("change", value);
+  }
+};
+
+const onTickSelect = (value: number, ev?: Event) => {
+  suppressPointerEvent(ev);
+  const tickPercent = getPercentFromValue(value);
+  emitValueFromPercent(tickPercent);
+  showTooltipTemporarily();
+};
+
+const onTrackPointerDown = (ev: Event) => {
+  if (props.disabled || props.readonly) return;
+  suppressPointerEvent(ev);
+};
+
+const onThumbPointerDown = (ev: Event) => {
+  if (props.disabled || props.readonly) return;
+  suppressPointerEvent(ev);
+};
+
+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;
+  suppressPointerEvent(ev);
+  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 },
+      beforeEvent(ev: Event) {
+        if (props.disabled || props.readonly) return false;
+        return true;
+      },
+      afterEvent(ev?: Event) {
+        if (isHorizontalDrag) suppressPointerEvent(ev);
+      },
+      down({ event }: { event?: Event }) {
+        if (props.disabled || props.readonly) return;
+        dragStartPercent = percent.value;
+        isHorizontalDrag = false;
+        suppressPointerEvent(event);
+      },
+      up({ event }: { event?: Event }) {
+        isHorizontalDrag = false;
+        isShowTooltip.value = false;
+        suppressPointerEvent(event);
+      },
+      cancel(event?: Event) {
+        isHorizontalDrag = false;
+        isShowTooltip.value = false;
+        suppressPointerEvent(event);
+      },
+      move({
+        initialDirection,
+        deltaX,
+        event,
+      }: {
+        initialDirection?: string;
+        deltaX: number;
+        event?: Event;
+      }) {
+        if (props.disabled || props.readonly) return;
+        if (!isHorizontalDirection(initialDirection)) return;
+        if (!container.value) return;
+
+        isHorizontalDrag = true;
+        suppressPointerEvent(event);
+
+        const width = container.value.offsetWidth;
+        const p = (deltaX / width) * 100;
+        const nextPercent = Math.max(0, Math.min(100, dragStartPercent + p));
+        emitValueFromPercent(nextPercent);
+        if (tooltipTimeout) clearTimeout(tooltipTimeout);
+        isShowTooltip.value = true;
+      },
+    },
+    { passive: false, capture: true }
+  );
+});
+
+onUnmounted(() => {
+  if (tooltipTimeout) clearTimeout(tooltipTimeout);
+  gestureCleanup?.destroy();
+});
+</script>

package/src/components/switch/index.ts

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

package/src/components/switch/switch.html

@@ -0,0 +1,14 @@
+<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.vue

@@ -0,0 +1,86 @@
+<style lang="scss" src="@toife/core/features/switch/switch.scss" scoped></style>
+<template src="./switch.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref, onMounted } from "vue";
+import {
+  SWITCH_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getSwitchAttrs,
+  getSwitchIconAttrs,
+  getSwitchWrapperAttrs,
+  type AppProviderState,
+  type SwitchEvent,
+  type SwitchProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SwitchProps>(), {
+  ...SWITCH_DEFAULT_PROPS,
+});
+const emit = defineEmits<SwitchEvent>();
+const appState = inject<ProviderStateRefs<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 : unref(appState?.shadow)) ?? false;
+  return getSwitchWrapperAttrs({
+    disabled: props.disabled,
+    readonly: props.readonly,
+    shadow: shadow && !props.disabled && isFocused.value,
+    focus: isFocused.value,
+    modelValue: props.modelValue,
+    transition: !isFirstRender.value,
+    bounce: props.bounce,
+  });
+});
+
+const switchAttrs = computed(() => {
+  const shape = props.shape || unref(appState?.shape) || "";
+  const baseRole = unref(appState?.role) || "";
+  const role = props.role || baseRole;
+  return getSwitchAttrs({
+    role,
+    shape,
+    size: props.size,
+  });
+});
+
+const switchIconAttrs = getSwitchIconAttrs();
+
+// 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

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

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

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

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

@@ -0,0 +1,5 @@
+<li v-bind="tabAttrs">
+  <button v-bind="buttonAttrs" @click="handleClick">
+    <slot />
+  </button>
+</li>

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

@@ -0,0 +1,34 @@
+<template src="./tab.html"></template>
+<style lang="scss" src="@toife/core/features/tabs/tab.scss" scoped></style>
+<script lang="ts" setup>
+import { computed, inject, unref } from "vue";
+import {
+  TAB_DEFAULT_PROPS,
+  TABS_PROVIDER_STATE_KEY,
+  getTabAttrs,
+  getTabButtonAttrs,
+  type TabProps,
+  type TabsProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<TabProps>(), {
+  ...TAB_DEFAULT_PROPS,
+});
+const tabsState = inject<ProviderStateRefs<TabsProviderState>>(TABS_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const shape = computed(() => unref(tabsState?.shape) || "");
+const size = computed(() => unref(tabsState?.size) || "standard");
+const isActive = computed(() => unref(tabsState?.activeValue) === props.value);
+const tabAttrs = computed(() => getTabAttrs({ active: isActive.value }));
+const buttonAttrs = computed(() => getTabButtonAttrs({ shape: shape.value, size: size.value }));
+// Methods
+// ----------------------------------------------------------------------------
+const handleClick = () => {
+  if (props.disabled) return;
+  tabsState?.setValue(props.value || "");
+};
+</script>

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

@@ -0,0 +1 @@
+export { default as Tabs } from "./tabs.vue";

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

@@ -0,0 +1,3 @@
+<ul ref="container" v-bind="tabsAttrs">
+  <slot />
+</ul>

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

@@ -0,0 +1,151 @@
+<style lang="scss" src="@toife/core/features/tabs/tabs.scss" scoped></style>
+<template src="./tabs.html"></template>
+<script lang="ts" setup>
+import {
+  unref,
+  computed,
+  inject,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+} from "vue";
+import {
+  TABS_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  TABS_PROVIDER_STATE_KEY,
+  getTabsAttrs,
+  getTabsHighlightPosition,
+  getTabsHighlightStyle,
+  type AppProviderState,
+  type TabsEvent,
+  type TabsProps,
+  type TabsProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<TabsProps>(), {
+  ...TABS_DEFAULT_PROPS,
+});
+const emit = defineEmits<TabsEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const width = ref(0);
+const height = ref(0);
+const top = ref(0);
+const left = ref(0);
+const container = ref();
+const isFirstRender = ref(true);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const role = computed(() => {
+  return props.role || unref(appState?.role) || "";
+});
+
+const shape = computed(() => {
+  return props.shape || unref(appState?.shape) || "";
+});
+
+const size = computed(() => {
+  return props.size;
+});
+
+const activeValue = computed(() => {
+  return props.modelValue || "";
+});
+
+const tabsAttrs = computed(() => {
+  const highlight = getTabsHighlightPosition({
+    top: top.value,
+    left: left.value,
+    width: width.value,
+    height: height.value,
+    margin: props.margin,
+    border: props.border,
+    variant: props.variant,
+    placement: props.placement,
+  });
+
+  return {
+    ...getTabsAttrs({
+      role: role.value,
+      shape: shape.value,
+      placement: props.placement,
+      variant: props.variant,
+      transition: isFirstRender.value ? false : props.transition,
+    }),
+    style: getTabsHighlightStyle({
+      top: highlight.top,
+      left: highlight.left,
+      width: highlight.width,
+      height: highlight.height,
+      marginX: props.margin[1],
+      marginY: props.margin[0],
+    }),
+  };
+});
+
+// Methods
+// ----------------------------------------------------------------------------
+const calcPosition = () => {
+  let active = container.value.querySelector(".active");
+  if (active) {
+    width.value = active.offsetWidth;
+    height.value = active.offsetHeight;
+    left.value =
+      active.getBoundingClientRect().left -
+      container.value.getBoundingClientRect().left +
+      container.value.scrollLeft;
+    top.value =
+      active.getBoundingClientRect().top -
+      container.value.getBoundingClientRect().top +
+      container.value.scrollTop;
+  }
+};
+
+const checkRender = async () => {
+  await nextTick();
+  calcPosition();
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+watch(
+  () => props.modelValue,
+  () => {
+    checkRender();
+  }
+);
+
+onMounted(() => {
+  checkRender();
+  window.addEventListener("resize", calcPosition);
+
+  setTimeout(() => {
+    isFirstRender.value = false;
+  }, 500);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", calcPosition);
+});
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+provide<ProviderStateRefs<TabsProviderState>>(TABS_PROVIDER_STATE_KEY, {
+  activeValue,
+  role,
+  shape,
+  size,
+  setValue: (val: unknown) => {
+    emit("update:modelValue", val as string);
+  },
+});
+</script>

package/src/components/tag/index.ts

@@ -0,0 +1 @@
+export { default as Tag } from "./tag.vue";

package/src/components/tag/tag.html

@@ -0,0 +1 @@
+<span v-bind="tagAttrs"><slot></slot></span>

package/src/components/tag/tag.vue

@@ -0,0 +1,33 @@
+<style lang="scss" src="@toife/core/features/tag/tag.scss" scoped></style>
+<template src="./tag.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject } from "vue";
+import {
+  TAG_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getTagAttrs,
+  type AppProviderState,
+  type TagProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<TagProps>(), {
+  ...TAG_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const tagAttrs = computed(() => {
+  const shape = props.shape || unref(appState?.shape) || "";
+  const role = props.role || unref(appState?.role) || "";
+
+  return getTagAttrs({
+    role,
+    shape,
+    size: props.size,
+    variant: props.variant,
+  });
+});
+</script>

package/src/components/toast/index.ts

@@ -0,0 +1,3 @@
+export * from "./toast";
+export * from "./toast-content";
+export * from "./toast.composable";

package/src/components/toast/toast/index.ts

@@ -0,0 +1 @@
+export { default as Toast } from "./toast.vue";

package/src/components/toast/toast/toast.html

@@ -0,0 +1,9 @@
+<div v-bind="toastAttrs" v-if="toastMessages.length > 0">
+  <slot name="content">
+    <ToastContent
+      v-for="(msg, index) in toastMessages"
+      v-bind="msg"
+      @close="dismiss(msg.id)"
+    ></ToastContent>
+  </slot>
+</div>

package/src/components/toast/toast/toast.vue

@@ -0,0 +1,28 @@
+<style lang="scss" src="@toife/core/features/toast/toast.scss" scoped></style>
+<template src="./toast.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useToast } from "../toast.composable";
+import { ToastContent } from "../toast-content";
+import { TOAST_DEFAULT_PROPS, getToastAttrs, type ToastProps } from "@toife/core";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<ToastProps>(), {
+  ...TOAST_DEFAULT_PROPS,
+});
+const toast = useToast();
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const toastAttrs = computed(() => getToastAttrs({ placement: props.placement }));
+
+const toastMessages = computed(() => {
+  return toast.messages.value.filter((item) => item.placement == props.placement);
+});
+
+// Methods
+// ----------------------------------------------------------------------------
+const dismiss = (id: number) => {
+  toast.close(id);
+};
+</script>

package/src/components/toast/toast-content/index.ts

@@ -0,0 +1 @@
+export { default as ToastContent } from "./toast-content.vue";

package/src/components/toast/toast-content/toast-content.html

@@ -0,0 +1 @@
+<div v-bind="contentAttrs">{{ props.message }}</div>