@toife/vue 3.2.5 → 3.2.7

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

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

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

package/src/components/select/select.html

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

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

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

package/src/components/skeleton/skeleton.html

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

package/src/components/skeleton/skeleton.vue

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

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

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

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