@toife/vue 3.3.3 → 3.3.6

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

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

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

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.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/tag/tag.html

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

package/src/components/tag/tag.vue

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

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

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

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

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

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

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

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

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

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