@toife/vue 3.3.2 → 3.3.5

package/src/components/segmented-field/segmented-field.vue

@@ -1,243 +0,0 @@
-<style lang="scss" src="@toife/core/features/segmented-field/segmented-field.scss" scoped></style>
-<template src="./segmented-field.html"></template>
-<script lang="ts" setup>
-import { unref, computed, inject, nextTick, ref } from "vue";
-import { Field } from "../field";
-import {
-  SEGMENTED_FIELD_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  getSegmentedFieldContentAttrs,
-  getSegmentedFieldMessageAttrs,
-  getSegmentedFieldWrapperAttrs,
-  type AppProviderState,
-  type SegmentedFieldEvent,
-  type SegmentedFieldProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<SegmentedFieldProps>(), {
-  ...SEGMENTED_FIELD_DEFAULT_PROPS,
-});
-const emit = defineEmits<SegmentedFieldEvent>();
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const keepValue = ref<string[]>([]);
-const fields = ref<InstanceType<typeof Field>[]>([]);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const segments = computed(() => {
-  const source =
-    props.modelValue !== undefined
-      ? props.modelValue
-      : props.value !== undefined
-        ? props.value
-        : keepValue.value;
-
-  return Array.from({ length: props.length }, (_, i) => source?.[i] ?? "");
-});
-
-const firstEmptyIndex = computed(() => {
-  const empty = segments.value.findIndex((char) => !char);
-  return empty === -1 ? props.length - 1 : empty;
-});
-
-const wrapperAttrs = computed(() => {
-  const role = props.role || unref(appState?.role) || "";
-  const shape = props.shape || unref(appState?.shape) || "";
-  const direction = props.direction || unref(appState?.direction) || "left";
-
-  return getSegmentedFieldWrapperAttrs({
-    role,
-    shape,
-    direction,
-    variant: props.variant,
-    size: props.size,
-    disabled: props.disabled,
-  });
-});
-
-const contentAttrs = getSegmentedFieldContentAttrs();
-
-const fieldAttrs = computed(() => {
-  const role = props.role || unref(appState?.role) || "";
-  const shape = props.shape || unref(appState?.shape) || "";
-  const shadow = (props.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
-  return {
-    variant: props.variant,
-    size: props.size,
-    disabled: props.disabled,
-    readonly: props.readonly,
-    shadow,
-    shape,
-    role,
-    type: props.type,
-    maxLength: 1,
-    autocomplete: "off",
-  };
-});
-
-const messageAttrs = getSegmentedFieldMessageAttrs();
-
-// Methods
-// ----------------------------------------------------------------------------
-const normalizeChar = (raw: string, index: number) => {
-  if (!raw) return "";
-  let char = raw.slice(-1);
-  const pattern = props.pattern?.[index] ?? props.pattern?.[0];
-  if (pattern && !new RegExp(pattern).test(char)) return "";
-  return char;
-};
-
-const getFieldInput = (index: number) => {
-  const root = fields.value[index]?.$el as HTMLElement | undefined;
-  return root?.querySelector("input, textarea") as HTMLInputElement | HTMLTextAreaElement | null;
-};
-
-const syncFieldInputs = async () => {
-  await nextTick();
-  for (let i = 0; i < props.length; i++) {
-    const input = getFieldInput(i);
-    if (input) input.value = segments.value[i] ?? "";
-  }
-};
-
-const updateValue = async (newValue: string[]) => {
-  const normalized = Array.from({ length: props.length }, (_, i) => newValue[i] ?? "");
-  keepValue.value = normalized;
-  emit("update:modelValue", normalized);
-  emit("input", normalized);
-
-  if (normalized.every((char) => char)) {
-    emit("complete", normalized);
-  }
-
-  await syncFieldInputs();
-};
-
-const focusInput = async (index: number) => {
-  if (props.disabled || props.readonly) return;
-  const safeIndex = Math.max(0, Math.min(index, props.length - 1));
-  await nextTick();
-  const input = getFieldInput(safeIndex);
-  input?.focus();
-  if (input && "select" in input) {
-    input.select();
-  }
-};
-
-const setCell = (index: number, char: string) => {
-  const next = [...segments.value];
-  next[index] = char;
-  updateValue(next);
-};
-
-const applyChar = (index: number, raw: string) => {
-  const char = normalizeChar(raw, index);
-  if (!char) return;
-
-  setCell(index, char);
-
-  if (index < props.length - 1) {
-    focusInput(index + 1);
-  }
-};
-
-const handlePaste = (text: string, startIndex: number) => {
-  const chars = text.replace(/\s/g, "").split("");
-  if (!chars.length) return;
-
-  const next = [...segments.value];
-  let cursor = startIndex;
-
-  for (const ch of chars) {
-    if (cursor >= props.length) break;
-    const normalized = normalizeChar(ch, cursor);
-    if (!normalized) continue;
-    next[cursor] = normalized;
-    cursor += 1;
-  }
-
-  updateValue(next);
-  focusInput(Math.min(cursor, props.length - 1));
-};
-
-const onFieldClick = () => {
-  focusInput(firstEmptyIndex.value);
-};
-
-const onSegmentFocus = (ev: FocusEvent, index: number) => {
-  emit("focus", ev);
-  const input = getFieldInput(index);
-  input?.select?.();
-};
-
-const onSegmentBeforeinput = (ev: InputEvent, index: number) => {
-  if (props.disabled || props.readonly) return;
-
-  const { inputType } = ev;
-
-  if (inputType === "insertText" && ev.data != null) {
-    ev.preventDefault();
-    if (ev.data.length > 1) {
-      handlePaste(ev.data, index);
-    } else {
-      applyChar(index, ev.data);
-    }
-    return;
-  }
-
-  if (inputType === "insertFromPaste" && ev.dataTransfer) {
-    ev.preventDefault();
-    const text = ev.dataTransfer.getData("text");
-    handlePaste(text, index);
-    return;
-  }
-
-  if (inputType === "deleteContentBackward") {
-    ev.preventDefault();
-    const next = [...segments.value];
-
-    if (next[index]) {
-      next[index] = "";
-      updateValue(next);
-      return;
-    }
-
-    if (index > 0) {
-      next[index - 1] = "";
-      updateValue(next);
-      focusInput(index - 1);
-    }
-  }
-};
-
-const onSegmentInput = (ev: Event, index: number) => {
-  if (props.disabled || props.readonly) return;
-
-  const target = ev.target as HTMLInputElement | null;
-  if (!target) return;
-
-  const value = target.value;
-  const current = segments.value[index] ?? "";
-
-  // after beforeinput + preventDefault the input stays empty while state already updated
-  if (!value) {
-    if (!current) setCell(index, "");
-    return;
-  }
-
-  if (value.length > 1) {
-    handlePaste(value, index);
-    return;
-  }
-
-  if (value === current) return;
-
-  applyChar(index, value);
-};
-</script>

package/src/components/select/index.ts

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

package/src/components/select/select.html

@@ -1,28 +0,0 @@
-<div v-bind="selectAttrs">
-  <Dropdown v-bind="dropdownAttrs" v-model="visible">
-    <template #trigger="{ toggle, isOpen }">
-      <Field
-        :role="role"
-        variant="outline"
-        @pointerup="toggle"
-        v-bind="fieldAttrs"
-        :class="{focus: isOpen}"
-      >
-        <template #end-input>
-          <span v-bind="selectIconAttrs" :class="{open: isOpen}"></span>
-        </template>
-      </Field>
-    </template>
-    <button
-      v-for="option in options"
-      :key="option.value"
-      type="button"
-      :disabled="option.disabled"
-      v-bind="selectOptionAttrs"
-      @pointerup="pickOption(option)"
-    >
-      {{ option.label }}
-    </button>
-  </Dropdown>
-  <div v-bind="selectMessageAttrs" v-if="message">{{ message }}</div>
-</div>

package/src/components/select/select.vue

@@ -1,101 +0,0 @@
-<style lang="scss" src="@toife/core/features/select/select.scss" scoped></style>
-<template src="./select.html"></template>
-<script lang="ts" setup>
-import { unref, computed, inject, ref } from "vue";
-import { Field } from "../field";
-import { Dropdown } from "../dropdown";
-import {
-  SELECT_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  getSelectAttrs,
-  getSelectIconAttrs,
-  getSelectMessageAttrs,
-  getSelectOptionAttrs,
-  type AppProviderState,
-  type SelectEvent,
-  type SelectOption,
-  type SelectProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<SelectProps>(), {
-  ...SELECT_DEFAULT_PROPS,
-});
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-const emit = defineEmits<SelectEvent>();
-const visible = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || unref(appState?.role) || "";
-});
-
-const direction = computed(() => {
-  return props.direction || unref(appState?.direction) || "left";
-});
-
-const shadow = computed(() => {
-  return props.shadow || unref(appState?.shadow) || false;
-});
-
-const shape = computed(() => {
-  return props.shape || unref(appState?.shape) || "";
-});
-
-const selectAttrs = computed(() =>
-  getSelectAttrs({
-    role: role.value,
-    direction: direction.value,
-    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(() => getSelectIconAttrs());
-const selectOptionAttrs = computed(() => getSelectOptionAttrs());
-const selectMessageAttrs = computed(() => getSelectMessageAttrs());
-
-// 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 +0,0 @@
-export { default as Skeleton } from "./skeleton.vue";

package/src/components/skeleton/skeleton.html

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

package/src/components/skeleton/skeleton.vue

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

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

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

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

@@ -1,20 +0,0 @@
-<div v-bind="slideRangeAttrs">
-  <div v-bind="trackContainerAttrs" ref="container">
-    <div v-bind="trackBodyAttrs" @pointerdown="onTrackPointerDown" @pointerup="onClickPath">
-      <div v-bind="trackBackAttrs"></div>
-      <div v-bind="trackFrontAttrs"></div>
-      <div
-        v-for="value in ticks"
-        :key="value"
-        v-bind="tickAttrs(value)"
-        @pointerdown="onTrackPointerDown"
-        @pointerup="onTickSelect(value, $event)"
-      ></div>
-    </div>
-
-    <div v-bind="thumbAttrs" ref="point" @pointerdown.stop.prevent="onThumbPointerDown">
-      <div v-bind="thumbInnerAttrs"></div>
-      <span v-if="percent > 0 && isShowTooltip" v-bind="tooltipAttrs">{{ displayValue }}</span>
-    </div>
-  </div>
-</div>