pxd 0.0.64 → 0.1.3

package/dist/components/pin-input/index.vue

@@ -1,226 +1,244 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed, shallowRef, watch } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { isTruthyProp } from "../../utils/format";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isTruthyProp } from "../../utils/format.js";
+import { isUndefined } from "../../utils/is.js";
 defineOptions({
-  name: "PPinInput",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PPinInput",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
-  length: { type: Number, required: false, default: 4 },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  modelValue: { type: String, required: false, default: "" },
-  placeholder: { type: String, required: false, default: "\u25CB" },
-  type: { type: String, required: false, default: "numeric" }
+	size: {
+		type: String,
+		required: false
+	},
+	error: {
+		type: [Boolean, String],
+		required: false
+	},
+	length: {
+		type: Number,
+		required: false,
+		default: 4
+	},
+	readonly: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	placeholder: {
+		type: String,
+		required: false,
+		default: "○"
+	},
+	type: {
+		type: String,
+		required: false,
+		default: "numeric"
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const pinInputVariant = tv({
-  base: "pxd-input--border rounded-md motion-safe:transition-appearance",
-  variants: {
-    size: {
-      xs: `${BASIC_HEIGHTS.xs} text-xs`,
-      sm: `${BASIC_HEIGHTS.sm} text-sm`,
-      md: `${BASIC_HEIGHTS.md} text-sm`,
-      lg: `${BASIC_HEIGHTS.lg} text-base`
-    },
-    error: {
-      true: "is-error",
-      false: ""
-    },
-    disabled: {
-      true: "is-disabled",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    error: false,
-    disabled: false
-  }
-});
-const configProvider = useConfigProvider();
+const NUMERIC_REGEX = /^\d+$/;
+const ALPHABETIC_REGEX = /^[a-z]+$/i;
+const ALPHANUMERIC_REGEX = /^[0-9a-z]+$/i;
 const inputsRef = shallowRef([]);
-const modelValue = useModelValue(props, emits);
-let localValue = modelValue.value;
 const computedInputType = computed(() => {
-  const { type } = props;
-  if (type.includes("password")) {
-    return "password";
-  } else if (type === "numeric") {
-    return "numeric";
-  }
-  return "text";
+	const { type } = props;
+	if (type.includes("password")) {
+		return "password";
+	} else if (type === "numeric") {
+		return "numeric";
+	}
+	return "text";
 });
 const computedInputMode = computed(() => {
-  return props.type.includes("numeric") ? "numeric" : "text";
+	return props.type.includes("numeric") ? "numeric" : "text";
 });
-const computedClasses = computed(() => {
-  return pinInputVariant({
-    size: props.size || configProvider.size,
-    error: isTruthyProp(props.error),
-    disabled: isTruthyProp(props.disabled)
-  });
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+let localValue = modelValue.value;
+const { classes } = useTailwindVariant({
+	base: "pxd-input--border rounded-md motion-safe:transition-appearance",
+	variants: {
+		size: {
+			xs: `${BASIC_HEIGHTS.xs} text-xs`,
+			sm: `${BASIC_HEIGHTS.sm} text-sm`,
+			md: `${BASIC_HEIGHTS.md} text-sm`,
+			lg: `${BASIC_HEIGHTS.lg} text-base`
+		},
+		error: { true: "is-error" },
+		disabled: { true: "is-disabled" }
+	}
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({
+		size: props.size || configProvider.size,
+		error: isTruthyProp(props.error),
+		disabled: isTruthyProp(props.disabled)
+	})
 });
 function replaceCharAt(str, index, char) {
-  return str.substring(0, index) + char + str.substring(index + 1);
+	return str.substring(0, index) + char + str.substring(index + 1);
 }
 function setInputValue(value, index) {
-  if (index !== void 0) {
-    inputsRef.value[index].value = value;
-    localValue = replaceCharAt(localValue, index, value);
-  } else {
-    localValue = value;
-  }
-  modelValue.value = localValue;
+	if (isUndefined(index)) {
+		localValue = value;
+	} else {
+		inputsRef.value[index].value = value;
+		localValue = replaceCharAt(localValue, index, value);
+	}
+	modelValue.value = localValue;
 }
 function focusInputField(dir, index) {
-  let correctIndex = -1;
-  if (dir === "next") {
-    correctIndex = index + 1;
-  } else if (dir === "prev") {
-    correctIndex = index - 1;
-  } else if (dir === "first") {
-    correctIndex = 0;
-  } else if (dir === "last") {
-    correctIndex = props.length - 1;
-  }
-  if (correctIndex < 0 || correctIndex >= props.length) {
-    return;
-  }
-  inputsRef.value[correctIndex].select();
+	let correctIndex = -1;
+	if (dir === "next") {
+		correctIndex = index + 1;
+	} else if (dir === "prev") {
+		correctIndex = index - 1;
+	} else if (dir === "first") {
+		correctIndex = 0;
+	} else if (dir === "last") {
+		correctIndex = props.length - 1;
+	}
+	if (correctIndex < 0 || correctIndex >= props.length) {
+		return;
+	}
+	inputsRef.value[correctIndex].select();
 }
 function getFirstEmptyIndex() {
-  const length = localValue.length;
-  if (length === props.length) {
-    return localValue.split("").findIndex((value) => !value);
-  }
-  return length;
+	const length = localValue.length;
+	if (length === props.length) {
+		return localValue.split("").findIndex((value) => !value);
+	}
+	return length;
 }
 function onInputElFocus(ev) {
-  ev.preventDefault();
-  const inputEl = ev.target;
-  inputEl.select?.();
+	ev.preventDefault();
+	const inputEl = ev.target;
+	inputEl.select?.();
 }
 function onContainerClick(ev) {
-  const input = ev.target;
-  if (input.tagName !== "INPUT") {
-    return;
-  }
-  const index = Number(input.dataset.index);
-  const firstEmptyIndex = getFirstEmptyIndex();
-  if (index === firstEmptyIndex || firstEmptyIndex >= props.length) {
-    return;
-  }
-  inputsRef.value[firstEmptyIndex]?.select();
+	const input = ev.target;
+	if (input.tagName !== "INPUT") {
+		return;
+	}
+	const index = Number(input.dataset.index);
+	const firstEmptyIndex = getFirstEmptyIndex();
+	if (index === firstEmptyIndex || firstEmptyIndex >= props.length) {
+		return;
+	}
+	inputsRef.value[firstEmptyIndex]?.select();
 }
+// Triggered when the IME composition finishes.
 function onCompositionEnd(ev) {
-  const input = ev.target;
-  const index = Number(input.dataset.index);
-  const value = ev.data;
-  if (validateInputValue(value)) {
-    setInputValue(value);
-    return;
-  }
-  setInputValue("", index);
+	const input = ev.target;
+	const index = Number(input.dataset.index);
+	const value = ev.data;
+	if (validateInputValue(value)) {
+		setInputValue(value);
+		return;
+	}
+	setInputValue("", index);
 }
-const NUMERIC_REGEX = /^\d+$/;
-const ALPHABETIC_REGEX = /^[a-z]+$/i;
-const ALPHANUMERIC_REGEX = /^[0-9a-z]+$/i;
 function validateInputValue(value) {
-  if (!value) {
-    return false;
-  }
-  const { type } = props;
-  if (type.startsWith("numeric")) {
-    return NUMERIC_REGEX.test(value);
-  } else if (type.startsWith("alphabetic")) {
-    return ALPHABETIC_REGEX.test(value);
-  } else if (type.startsWith("alphanumeric")) {
-    return ALPHANUMERIC_REGEX.test(value);
-  }
-  return false;
+	if (!value) {
+		return false;
+	}
+	const { type } = props;
+	if (type.startsWith("numeric")) {
+		return NUMERIC_REGEX.test(value);
+	} else if (type.startsWith("alphabetic")) {
+		return ALPHABETIC_REGEX.test(value);
+	} else if (type.startsWith("alphanumeric")) {
+		return ALPHANUMERIC_REGEX.test(value);
+	}
+	return false;
 }
+// Move focus between inputs when arrow keys are pressed.
 function onContainerKeydown(ev) {
-  const index = Number(ev.target.dataset.index);
-  const key = ev.key;
-  if (key === "ArrowLeft") {
-    ev.preventDefault();
-    focusInputField("prev", index);
-  } else if (key === "ArrowRight") {
-    ev.preventDefault();
-    focusInputField("next", index);
-  }
+	const index = Number(ev.target.dataset.index);
+	const key = ev.key;
+	if (key === "ArrowLeft") {
+		ev.preventDefault();
+		focusInputField("prev", index);
+	} else if (key === "ArrowRight") {
+		ev.preventDefault();
+		focusInputField("next", index);
+	}
 }
 function onBeforeInputValue(ev) {
-  const event = ev;
-  if (event.isComposing) {
-    ev.preventDefault();
-    return;
-  }
-  const input = event.target;
-  const index = Number(input.dataset.index);
-  const value = event.data || "";
-  if (event.inputType === "deleteContentBackward") {
-    ev.preventDefault();
-    setInputValue("", index);
-    focusInputField("prev", index);
-  } else if (event.inputType === "deleteContentForward") {
-    ev.preventDefault();
-    setInputValue("", index);
-  } else if (event.inputType === "insertCompositionText") {
-    ev.preventDefault();
-  } else if (event.inputType === "insertText") {
-    ev.preventDefault();
-    if (validateInputValue(value)) {
-      setInputValue(value, index);
-      focusInputField("next", index);
-    }
-  }
+	const event = ev;
+	if (event.isComposing) {
+		ev.preventDefault();
+		return;
+	}
+	const input = event.target;
+	const index = Number(input.dataset.index);
+	const value = event.data || "";
+	if (event.inputType === "deleteContentBackward") {
+		ev.preventDefault();
+		setInputValue("", index);
+		focusInputField("prev", index);
+	} else if (event.inputType === "deleteContentForward") {
+		ev.preventDefault();
+		setInputValue("", index);
+	} else if (event.inputType === "insertCompositionText") {
+		ev.preventDefault();
+	} else if (event.inputType === "insertText") {
+		ev.preventDefault();
+		if (validateInputValue(value)) {
+			setInputValue(value, index);
+			focusInputField("next", index);
+		}
+	}
 }
 function onInputPastedValue(ev) {
-  ev.preventDefault();
-  const text = ev.clipboardData?.getData("text");
-  if (!text) {
-    return;
-  }
-  const slicedText = text.slice(0, props.length);
-  if (validateInputValue(slicedText)) {
-    setInputValue(slicedText);
-  }
+	ev.preventDefault();
+	const text = ev.clipboardData?.getData("text");
+	if (!text) {
+		return;
+	}
+	const slicedText = text.slice(0, props.length);
+	if (validateInputValue(slicedText)) {
+		setInputValue(slicedText);
+	}
 }
 function focus() {
-  focusInputField("first");
+	focusInputField("first");
 }
 function blur() {
-  inputsRef.value.forEach((input) => input.blur());
+	inputsRef.value.forEach((input) => input.blur());
 }
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue === localValue) {
-      return;
-    }
-    localValue = newValue;
-  }
-);
+watch(() => props.modelValue, (newValue) => {
+	if (newValue === localValue) {
+		return;
+	}
+	localValue = newValue;
+});
 defineExpose({
-  focus,
-  blur
+	focus,
+	blur
 });
 </script>
 
 <template>
   <label
+    data-pin-input
     v-bind="$attrs"
     class="pxd-pin-input gap-1.5 flex size-max items-center"
     @keydown="onContainerKeydown"
@@ -228,7 +246,7 @@ defineExpose({
     @focusin="onInputElFocus"
     @click="onContainerClick"
   >
-    <div v-for="(n, i) of length" :key="n" :class="computedClasses">
+    <div v-for="(n, i) of length" :key="n" :class="classes">
       <input
         ref="inputsRef"
         :value="modelValue[i]"

package/dist/components/pin-input/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentSizeWithXs } from '../../types/shared/props'
 
 export interface PinInputProps {
   size?: ComponentSizeWithXs

package/dist/components/placeholder/index.vue

@@ -1,26 +1,35 @@
 <script setup>
-import { invert } from "es-toolkit";
 import { computed } from "vue";
-import { getCssUnitValue } from "../../utils/format";
+import { getCssUnitValue } from "../../utils/format.js";
 defineOptions({
-  name: "PPlaceholder",
-  inheritAttrs: false
+	name: "PPlaceholder",
+	inheritAttrs: false
 });
 const props = defineProps({
-  gap: { type: [Number, String], required: false },
-  color: { type: String, required: false },
-  invert: { type: Boolean, required: false }
+	gap: {
+		type: [Number, String],
+		required: false
+	},
+	color: {
+		type: String,
+		required: false
+	},
+	invert: {
+		type: Boolean,
+		required: false
+	}
 });
 const computedStyle = computed(() => {
-  return {
-    "--placeholder-color": props.color,
-    "--placeholder-gap": getCssUnitValue(props.gap)
-  };
+	return {
+		"--placeholder-color": props.color,
+		"--placeholder-gap": getCssUnitValue(props.gap)
+	};
 });
 </script>
 
 <template>
   <div
+    data-placeholder
     class="pxd-placeholder max-w-full min-w-full"
     :class="{ 'is-invert': invert }"
     :style="computedStyle"
@@ -30,25 +39,6 @@ const computedStyle = computed(() => {
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-placeholder {
-  &.is-invert {
-    --placeholder-deg: 45deg;
-  }
-
-  --placeholder-deg: -45deg;
-  background-image: linear-gradient(
-    var(--placeholder-deg),
-    var(--placeholder-color) 12.5%,
-    #0000 12.5%,
-    #0000 50%,
-    var(--placeholder-color) 50%,
-    var(--placeholder-color) 62.5%,
-    #0000 62.5%,
-    #0000 100%
-  );
-  background-clip: padding-box;
-  background-position: 0 0;
-  background-size: var(--placeholder-gap) var(--placeholder-gap);
-}
+<style>
+.pxd-placeholder{--placeholder-deg:-45deg;background-clip:padding-box;background-image:linear-gradient(var(--placeholder-deg),var(--placeholder-color) 12.5%,#0000 12.5%,#0000 50%,var(--placeholder-color) 50%,var(--placeholder-color) 62.5%,#0000 62.5%,#0000 100%);background-position:0 0;background-size:var(--placeholder-gap) var(--placeholder-gap)}.pxd-placeholder.is-invert{--placeholder-deg:45deg}
 </style>

package/dist/components/popover/index.d.vue.ts

@@ -1,47 +0,0 @@
-import type { PopoverProps, PopoverTrigger } from './types';
-declare function handlePopoverShow(): Promise<void>;
-declare function handlePopoverHide(immediate?: boolean): Promise<void>;
-declare var __VLS_1: {}, __VLS_11: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    content?: (props: typeof __VLS_11) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {
-    show: typeof handlePopoverShow;
-    hide: typeof handlePopoverHide;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (visible: boolean) => any;
-    escape: (args_0: KeyboardEvent) => any;
-    show: () => any;
-    hide: () => any;
-    "outside-click": (args_0: PointerEvent) => any;
-    "visible-change": (visible: boolean) => any;
-    "trigger-click": (args_0: PointerEvent) => any;
-}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
-    "onUpdate:modelValue"?: ((visible: boolean) => any) | undefined;
-    onEscape?: ((args_0: KeyboardEvent) => any) | undefined;
-    onShow?: (() => any) | undefined;
-    onHide?: (() => any) | undefined;
-    "onOutside-click"?: ((args_0: PointerEvent) => any) | undefined;
-    "onVisible-change"?: ((visible: boolean) => any) | undefined;
-    "onTrigger-click"?: ((args_0: PointerEvent) => any) | undefined;
-}>, {
-    position: import("../../types/shared").ComponentPosition;
-    closeOnPressEscape: boolean;
-    trigger: PopoverTrigger | PopoverTrigger[];
-    showDelay: number;
-    hideDelay: number;
-    interactive: boolean;
-    autoPosition: boolean;
-    toggleOnTrigger: boolean;
-    closeOnInvisible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};