pxd 0.0.64 → 0.1.3

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

@@ -1,207 +1,250 @@
 <script setup>
 import MinusIcon from "@gdsicon/vue/minus";
 import PlusIcon from "@gdsicon/vue/plus";
-import { isNil, isNumber, isUndefined } from "es-toolkit";
 import { computed, reactive, shallowRef, watch } from "vue";
-import { useRepeatAction } from "../../composables/use-repeat-action";
-import { NOOP } from "../../utils/event";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useRepeatAction } from "../../composables/use-repeat-action.js";
+import { NOOP, isCompositionKeydown } from "../../utils/event.js";
+import { toNumber } from "../../utils/format.js";
+import { isNil, isNumber, isUndefined } from "../../utils/is.js";
 import PInput from "../input/index.vue";
 defineOptions({
-  name: "PNumberInput",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PNumberInput",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  min: { type: Number, required: false, default: Number.MIN_SAFE_INTEGER },
-  max: { type: Number, required: false, default: Number.MAX_SAFE_INTEGER },
-  step: { type: Number, required: false, default: 1 },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  controls: { type: Boolean, required: false, default: true },
-  precision: { type: Number, required: false },
-  thousands: { type: Boolean, required: false },
-  thousandsSeparator: { type: String, required: false, default: "," },
-  scientific: { type: Boolean, required: false, default: true },
-  clearValue: { type: [Number, null], required: false, default: null },
-  modelValue: { type: [Number, null], required: false }
-});
-const emits = defineEmits(["focus", "blur", "input", "change", "update:modelValue"]);
-const modelValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emits("input", value);
-    emits("update:modelValue", value);
-  }
+	min: {
+		type: Number,
+		required: false,
+		default: Number.MIN_SAFE_INTEGER
+	},
+	max: {
+		type: Number,
+		required: false,
+		default: Number.MAX_SAFE_INTEGER
+	},
+	step: {
+		type: Number,
+		required: false,
+		default: 1
+	},
+	readonly: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	controls: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	precision: {
+		type: Number,
+		required: false
+	},
+	thousands: {
+		type: Boolean,
+		required: false
+	},
+	scientific: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	clearValue: {
+		type: [Number, null],
+		required: false,
+		default: null
+	},
+	modelValue: {
+		type: [Number, null],
+		required: false
+	},
+	controlsPosition: {
+		type: String,
+		required: false,
+		default: "sides"
+	},
+	thousandsSeparator: {
+		type: String,
+		required: false,
+		default: ","
+	}
 });
+const emits = defineEmits([
+	"blur",
+	"focus",
+	"change",
+	"update:modelValue"
+]);
 const REGEXPS = {
-  "remove-leading-zeros": /^(-?)0+(?=\d)/,
-  "thousands-separator": /\B(?=(\d{3})+(?!\d))/g
+	"remove-leading-zeros": /^(-?)0+(?=\d)/,
+	"thousands-separator": /\B(?=(\d{3})+(?!\d))/g
 };
 const isFocused = shallowRef(false);
 const inputData = reactive({
-  currentValue: props.modelValue,
-  userInput: null
+	currentValue: props.modelValue,
+	userInput: null
 });
-function formatWithThousands(value) {
-  const str = String(value);
-  const dotIndex = str.indexOf(".");
-  const intPart = dotIndex === -1 ? str : str.slice(0, dotIndex);
-  const decPart = dotIndex === -1 ? "" : str.slice(dotIndex);
-  return intPart.replace(REGEXPS["thousands-separator"], props.thousandsSeparator) + decPart;
-}
 const inputValue = computed(() => {
-  if (inputData.userInput !== null) {
-    return inputData.userInput;
-  }
-  let currentValue = inputData.currentValue;
-  if (isNil(currentValue)) {
-    return "";
-  }
-  if (isNumber(currentValue)) {
-    if (Number.isNaN(currentValue)) {
-      return "";
-    }
-    if (!isUndefined(props.precision)) {
-      currentValue = currentValue.toFixed(props.precision);
-    }
-  }
-  if (props.thousands && !isFocused.value) {
-    return formatWithThousands(currentValue);
-  }
-  return currentValue;
+	if (inputData.userInput !== null) {
+		return inputData.userInput;
+	}
+	let currentValue = inputData.currentValue;
+	if (isNil(currentValue)) {
+		return "";
+	}
+	if (isNumber(currentValue)) {
+		if (Number.isNaN(currentValue)) {
+			return "";
+		}
+		if (!isUndefined(props.precision)) {
+			currentValue = currentValue.toFixed(props.precision);
+		}
+	}
+	if (props.thousands && !isFocused.value) {
+		return formatWithThousands(currentValue);
+	}
+	return currentValue;
 });
-const decreaseDisabled = computed(
-  () => props.disabled || isNumber(props.modelValue) && props.modelValue <= props.min
-);
-const increaseDisabled = computed(
-  () => props.disabled || isNumber(props.modelValue) && props.modelValue >= props.max
-);
+const decreaseDisabled = computed(() => props.disabled || isNumber(props.modelValue) && props.modelValue <= props.min);
+const increaseDisabled = computed(() => props.disabled || isNumber(props.modelValue) && props.modelValue >= props.max);
 const valuePrecision = computed(() => {
-  if (props.precision) {
-    return props.precision;
-  }
-  const stringValue = String(props.step);
-  const decimalIndex = stringValue.indexOf(".");
-  if (decimalIndex === -1) {
-    return 0;
-  }
-  return stringValue.length - decimalIndex - 1;
+	if (props.precision) {
+		return props.precision;
+	}
+	const stringValue = String(props.step);
+	const decimalIndex = stringValue.indexOf(".");
+	if (decimalIndex === -1) {
+		return 0;
+	}
+	return stringValue.length - decimalIndex - 1;
 });
+const modelValue = useModelValue(props, emits, { withChange: false });
 const { start: startDecrease, stop: stopDecrease } = useRepeatAction({
-  disabled: decreaseDisabled,
-  action: decreaseValue
+	disabled: decreaseDisabled,
+	action: decreaseValue
 });
 const { start: startIncrease, stop: stopIncrease } = useRepeatAction({
-  disabled: increaseDisabled,
-  action: increaseValue
+	disabled: increaseDisabled,
+	action: increaseValue
 });
+function formatWithThousands(value) {
+	const str = String(value);
+	const dotIndex = str.indexOf(".");
+	const intPart = dotIndex === -1 ? str : str.slice(0, dotIndex);
+	const decPart = dotIndex === -1 ? "" : str.slice(dotIndex);
+	return intPart.replace(REGEXPS["thousands-separator"], props.thousandsSeparator) + decPart;
+}
 function toPrecision(value) {
-  if (!value) {
-    return value;
-  }
-  if (Number.isNaN(value)) {
-    return 0;
-  }
-  if (!Number.isFinite(value)) {
-    return value;
-  }
-  const p = Math.max(0, valuePrecision.value ?? 0);
-  const factor = 10 ** p;
-  return Math.round(value * factor) / factor;
+	if (!value) {
+		return value;
+	}
+	if (Number.isNaN(value)) {
+		return 0;
+	}
+	if (!Number.isFinite(value)) {
+		return value;
+	}
+	const p = Math.max(0, valuePrecision.value ?? 0);
+	const factor = 10 ** p;
+	return Math.round(value * factor) / factor;
 }
 function clampToRange(value) {
-  if (value > props.max) {
-    return props.max;
-  }
-  if (value < props.min) {
-    return props.min;
-  }
-  return value;
+	if (value > props.max) {
+		return props.max;
+	}
+	if (value < props.min) {
+		return props.min;
+	}
+	return value;
 }
 function increaseValue() {
-  if (props.readonly || props.disabled || increaseDisabled.value) {
-    return;
-  }
-  const numeric = Number(inputValue.value) || 0;
-  const value = toPrecision(numeric + props.step);
-  inputData.currentValue = value;
-  modelValue.value = clampToRange(value ?? 0);
+	if (props.readonly || props.disabled || increaseDisabled.value) {
+		return;
+	}
+	const numeric = toNumber(inputData.currentValue);
+	const value = toPrecision(numeric + props.step);
+	inputData.currentValue = value;
+	modelValue.value = clampToRange(value ?? 0);
 }
 function decreaseValue() {
-  if (props.readonly || props.disabled || decreaseDisabled.value) {
-    return;
-  }
-  const numeric = Number(inputValue.value) || 0;
-  const value = toPrecision(numeric - props.step);
-  inputData.currentValue = value;
-  modelValue.value = clampToRange(value ?? 0);
+	if (props.readonly || props.disabled || decreaseDisabled.value) {
+		return;
+	}
+	const numeric = toNumber(inputData.currentValue);
+	const value = toPrecision(numeric - props.step);
+	inputData.currentValue = value;
+	modelValue.value = clampToRange(value ?? 0);
 }
 function onInputKeydown(ev) {
-  const key = ev.key;
-  if (!props.scientific && ["e", "E"].includes(key)) {
-    ev.preventDefault();
-    return;
-  }
-  if (ev.key === "ArrowUp") {
-    ev.preventDefault();
-    increaseValue();
-  } else if (ev.key === "ArrowDown") {
-    ev.preventDefault();
-    decreaseValue();
-  }
+	if (isCompositionKeydown(ev)) {
+		return;
+	}
+	const key = ev.key;
+	if (!props.scientific && ["e", "E"].includes(key)) {
+		ev.preventDefault();
+		return;
+	}
+	if (ev.key === "ArrowUp") {
+		ev.preventDefault();
+		increaseValue();
+	} else if (ev.key === "ArrowDown") {
+		ev.preventDefault();
+		decreaseValue();
+	}
 }
 function onInputFocus(event) {
-  isFocused.value = true;
-  emits("focus", event);
+	isFocused.value = true;
+	emits("focus", event);
 }
 function onInputBlur(event) {
-  isFocused.value = false;
-  inputData.userInput = null;
-  if (isNumber(inputData.currentValue)) {
-    const clamped = clampToRange(inputData.currentValue);
-    if (clamped !== inputData.currentValue) {
-      inputData.currentValue = clamped;
-      modelValue.value = clamped;
-    }
-  }
-  if (inputData.currentValue === null) {
-    ;
-    event.target.value = "";
-  }
-  emits("blur", event);
+	isFocused.value = false;
+	inputData.userInput = null;
+	if (isNumber(inputData.currentValue)) {
+		const clamped = clampToRange(inputData.currentValue);
+		if (clamped !== inputData.currentValue) {
+			inputData.currentValue = clamped;
+			modelValue.value = clamped;
+		}
+	}
+	if (inputData.currentValue === null) {
+		;
+		event.target.value = "";
+	}
+	emits("blur", event);
 }
 function onInputInput(value) {
-  const normalized = value.replace(REGEXPS["remove-leading-zeros"], "$1");
-  inputData.userInput = normalized;
-  const newValue = normalized === "" ? null : Number.parseFloat(normalized);
-  inputData.currentValue = toPrecision(newValue ?? 0);
-  modelValue.value = inputData.currentValue;
+	const normalized = value.replace(REGEXPS["remove-leading-zeros"], "$1");
+	inputData.userInput = normalized;
+	const newValue = normalized === "" ? null : Number.parseFloat(normalized);
+	inputData.currentValue = toPrecision(newValue ?? 0);
+	modelValue.value = inputData.currentValue;
 }
 function onInputChange(value, event) {
-  let newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
-  if (isNumber(newValue)) {
-    newValue = clampToRange(newValue);
-  }
-  emits("change", newValue, event);
+	let newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
+	if (isNumber(newValue)) {
+		newValue = clampToRange(newValue);
+	}
+	emits("change", newValue, event);
 }
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    if (inputData.userInput === null && newVal !== oldVal) {
-      inputData.currentValue = toPrecision(props.modelValue ?? 0);
-    }
-  },
-  { immediate: true }
-);
+watch(() => props.modelValue, (newVal, oldVal) => {
+	if (inputData.userInput === null && newVal !== oldVal) {
+		inputData.currentValue = toPrecision(props.modelValue ?? 0);
+	}
+}, { immediate: true });
 </script>
 
 <template>
   <PInput
+    data-number-input
     v-bind="$attrs"
     :min="min"
     :max="max"
@@ -216,15 +259,15 @@ watch(
     :default-suffix-style="false"
     @blur="onInputBlur"
     @focus="onInputFocus"
-    @input="onInputInput"
     @change="onInputChange"
     @keydown="onInputKeydown"
+    @update:model-value="onInputInput"
   >
     <template #prefix>
       <button
-        v-if="controls"
+        v-if="controls && controlsPosition !== 'right'"
         tabindex="-1"
-        class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center border-r font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+        class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-l-inherit border-r font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
         :disabled="decreaseDisabled"
         @pointerdown="startDecrease"
         @pointercancel="stopDecrease"
@@ -242,10 +285,43 @@ watch(
     <template #suffix>
       <slot name="suffix" />
 
+      <div
+        v-if="controls && controlsPosition === 'right'"
+        class="flex aspect-square h-full flex-col rounded-r-inherit border-l"
+      >
+        <button
+          tabindex="-1"
+          class="flex h-1/2 w-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-tr-inherit border-b font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+          :disabled="increaseDisabled"
+          @pointerdown="startIncrease"
+          @pointercancel="stopIncrease"
+          @pointerup="stopIncrease"
+          @contextmenu.prevent="NOOP"
+        >
+          <slot name="plusIcon">
+            <PlusIcon class="size-2 pointer-events-none" />
+          </slot>
+        </button>
+
+        <button
+          tabindex="-1"
+          class="flex h-1/2 w-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-br-inherit font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+          :disabled="decreaseDisabled"
+          @pointerdown="startDecrease"
+          @pointercancel="stopDecrease"
+          @pointerup="stopDecrease"
+          @contextmenu.prevent="NOOP"
+        >
+          <slot name="minusIcon">
+            <MinusIcon class="size-2 pointer-events-none" />
+          </slot>
+        </button>
+      </div>
+
       <button
-        v-if="controls"
+        v-else-if="controls"
         tabindex="-1"
-        class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center border-l font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+        class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-r-inherit border-l font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
         :disabled="increaseDisabled"
         @pointerdown="startIncrease"
         @pointercancel="stopIncrease"

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

@@ -7,16 +7,16 @@ export interface NumberInputProps {
   controls?: boolean
   precision?: number
   thousands?: boolean
-  thousandsSeparator?: string
   scientific?: boolean
   clearValue?: number | null
   modelValue?: number | null
+  controlsPosition?: 'sides' | 'right'
+  thousandsSeparator?: string
 }
 
 export interface NumberInputEmits {
-  focus: [FocusEvent]
   blur: [FocusEvent]
-  input: [NumberInputProps['modelValue']]
+  focus: [FocusEvent]
   change: [NumberInputProps['modelValue'], Event]
   'update:modelValue': [NumberInputProps['modelValue']]
 }

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

@@ -1,7 +1,7 @@
 import type { OverlayProps } from './types';
-declare var __VLS_14: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (args_0: boolean) => any;
@@ -13,10 +13,9 @@ declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}
     onEscape?: ((args_0: KeyboardEvent) => any) | undefined;
 }>, {
     modelValue: boolean;
+    closeOnPressEscape: boolean;
     lockScrollOnVisible: boolean;
     showOverlay: boolean;
-    appendToBody: boolean;
-    closeOnPressEscape: boolean;
     closeOnClickOverlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;