pxd 0.0.52 → 0.0.53

package/dist/components/note/index.vue

@@ -6,7 +6,7 @@ import WarningIcon from "@gdsicon/vue/warning";
 import { computed, h } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { isTruthyProp } from "../../utils/format";
-import { getFallbackValue } from "../../utils/get";
+import { noteVariant } from "./cn";
 defineOptions({
   name: "PNote"
 });
@@ -16,71 +16,52 @@ const props = defineProps({
   fill: { type: Boolean, required: false },
   label: { type: [Boolean, String, Number, Array, null], required: false, default: true }
 });
-const SIZES = {
-  sm: "px-2 py-1.5 text-xs",
-  md: "px-3 py-2 text-sm",
-  lg: "px-4 py-2.5 text-base"
-};
+const configProvider = useConfigProvider();
 const VARIANTS = {
   success: {
-    icon: CheckCircleIcon,
-    fill: "text-blue-900 bg-blue-200 border-blue-100",
-    basic: "text-blue-900 border-blue-500"
+    icon: CheckCircleIcon
   },
   error: {
-    icon: StopIcon,
-    fill: "text-red-900 bg-red-200 border-red-100",
-    basic: "text-red-900 border-red-500"
+    icon: StopIcon
   },
   warning: {
-    icon: WarningIcon,
-    fill: "text-amber-900 bg-amber-200 border-amber-100",
-    basic: "text-amber-900 border-amber-500"
+    icon: WarningIcon
   },
   default: {
-    icon: InformationIcon,
-    fill: "text-foreground-secondary bg-gray-200 border-gray-100",
-    basic: "text-foreground-secondary border-input"
+    icon: InformationIcon
   },
   primary: {
-    icon: InformationIcon,
-    fill: "text-gray-100 bg-primary border-gray-100",
-    basic: "text-primary border-gray-alpha-400"
+    icon: InformationIcon
   },
   violet: {
-    icon: InformationIcon,
-    fill: "text-violet-900 bg-violet-200 border-violet-100",
-    basic: "text-violet-900 border-violet-400"
+    icon: InformationIcon
   },
   cyan: {
-    icon: InformationIcon,
-    fill: "text-teal-900 bg-teal-200 border-teal-100",
-    basic: "text-teal-900 border-teal-400"
+    icon: InformationIcon
   }
 };
-const config = useConfigProvider();
 const computedLabel = computed(() => {
   const { label } = props;
   if (isTruthyProp(label)) {
-    return getFallbackValue(props.variant, VARIANTS).icon;
+    return VARIANTS[props.variant]?.icon || InformationIcon;
   }
   if (typeof label === "string" && label) {
     return h("span", null, label);
   }
   return false;
 });
-const computedClass = computed(() => {
-  const classes = ["pxd-note gap-2 sm:flex-row sm:items-center flex w-max max-w-full flex-col rounded-md border"];
-  classes.push(getFallbackValue(props.size, SIZES, config.size));
-  const { fill, basic } = getFallbackValue(props.variant, VARIANTS);
-  classes.push(props.fill ? fill : basic);
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return noteVariant({
+    fill: props.fill,
+    size: props.size || configProvider.size,
+    variant: props.variant
+  });
 });
 </script>
 
 <template>
-  <div :class="computedClass">
-    <div class="gap-3 flex">
+  <div :class="computedClasses">
+    <div class="gap-3 flex flex-1">
       <slot v-if="computedLabel" name="label">
         <Component :is="computedLabel" class="size-4 font-medium h-lh shrink-0" />
       </slot>

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

@@ -6,26 +6,35 @@ interface Props {
     disabled?: boolean;
     precision?: number;
     scientific?: boolean;
+    clearValue?: number | null;
     modelValue?: number | null;
 }
-declare var __VLS_16: {}, __VLS_19: {};
+declare var __VLS_15: {}, __VLS_22: {}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_16) => any;
+    minusIcon?: (props: typeof __VLS_15) => any;
 } & {
-    suffix?: (props: typeof __VLS_19) => any;
+    prefix?: (props: typeof __VLS_22) => any;
+} & {
+    suffix?: (props: typeof __VLS_25) => any;
+} & {
+    plusIcon?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: number) => any;
-    "update:modelValue": (args_0: number) => any;
+    input: (args_0: number | null | undefined) => any;
+    blur: (args_0: FocusEvent) => any;
+    change: (args_0: number | null | undefined, args_1: Event) => any;
+    focus: (args_0: FocusEvent) => any;
+    "update:modelValue": (args_0: number | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onChange?: ((args_0: number) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
+    onInput?: ((args_0: number | null | undefined) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
+    onChange?: ((args_0: number | null | undefined, args_1: Event) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: number | null | undefined) => any) | undefined;
 }>, {
-    disabled: boolean;
     max: number;
-    precision: number;
     min: number;
-    readonly: boolean;
+    clearValue: number | null;
     step: number;
     scientific: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,11 +1,10 @@
 <script setup>
 import MinusIcon from "@gdsicon/vue/minus";
 import PlusIcon from "@gdsicon/vue/plus";
-import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
+import { isNil, isNumber, isUndefined } from "es-toolkit";
+import { computed, reactive, watch } from "vue";
 import { useRepeatAction } from "../../composables/use-repeat-action";
 import { NOOP } from "../../utils/event";
-import { FLOATING_REGEX, SCIENCE_NUMERIC_REGEX } from "../../utils/regexp";
 import PInput from "../input/index.vue";
 defineOptions({
   name: "PNumberInput",
@@ -19,36 +18,81 @@ 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, default: false },
-  disabled: { type: Boolean, required: false, default: false },
-  precision: { type: Number, required: false, default: 0 },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  precision: { type: Number, required: false },
   scientific: { type: Boolean, required: false, default: true },
+  clearValue: { type: [Number, null], required: false, default: null },
   modelValue: { type: [Number, null], required: false }
 });
-const emits = defineEmits(["change", "update:modelValue"]);
-const modelValue = useModelValue(props, emits);
-const decreaseDisabled = computed(() => props.disabled || modelValue.value <= props.min);
-const increaseDisabled = computed(() => props.disabled || modelValue.value >= props.max);
-const {
-  start: startDecrease,
-  stop: stopDecrease
-} = useRepeatAction({
+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);
+  }
+});
+const inputData = reactive({
+  currentValue: props.modelValue,
+  userInput: null
+});
+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);
+    }
+  }
+  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 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;
+});
+const { start: startDecrease, stop: stopDecrease } = useRepeatAction({
   disabled: decreaseDisabled,
   action: decreaseValue
 });
-const {
-  start: startIncrease,
-  stop: stopIncrease
-} = useRepeatAction({
+const { start: startIncrease, stop: stopIncrease } = useRepeatAction({
   disabled: increaseDisabled,
   action: increaseValue
 });
-const allowedRegex = computed(() => props.scientific ? SCIENCE_NUMERIC_REGEX : FLOATING_REGEX);
-function toPrecision(value, precision) {
+function toPrecision(value) {
+  if (!value) {
+    return value;
+  }
+  if (Number.isNaN(value)) {
+    return 0;
+  }
   if (!Number.isFinite(value)) {
     return value;
   }
-  const p = Math.max(0, precision ?? 0);
+  const p = Math.max(0, valuePrecision.value ?? 0);
   const factor = 10 ** p;
   return Math.round(value * factor) / factor;
 }
@@ -62,66 +106,29 @@ function clampToRange(value) {
   return value;
 }
 function increaseValue() {
-  if (modelValue.value >= props.max) {
+  if (props.readonly || props.disabled || increaseDisabled.value) {
     return;
   }
-  const next = toPrecision(modelValue.value + props.step, props.precision);
-  modelValue.value = clampToRange(next);
+  const numeric = Number(inputValue.value) || 0;
+  const value = toPrecision(numeric + props.step);
+  inputData.currentValue = value;
+  modelValue.value = clampToRange(value ?? 0);
 }
 function decreaseValue() {
-  if (modelValue.value <= props.min) {
+  if (props.readonly || props.disabled || decreaseDisabled.value) {
     return;
   }
-  const next = toPrecision(modelValue.value - props.step, props.precision);
-  modelValue.value = clampToRange(next);
-}
-function numberParser(value) {
-  if (value === "") {
-    return "";
-  }
-  const parsed = Number.parseFloat(value);
-  if (Number.isNaN(parsed)) {
-    return 0;
-  }
-  const rounded = toPrecision(parsed, props.precision);
-  return clampToRange(rounded);
+  const numeric = Number(inputValue.value) || 0;
+  const value = toPrecision(numeric - props.step);
+  inputData.currentValue = value;
+  modelValue.value = clampToRange(value ?? 0);
 }
-function numberFormatter(value) {
-  if ([null, void 0, ""].includes(value)) {
-    return "";
-  }
-  const number = typeof value === "number" ? value : Number.parseFloat(String(value));
-  if (Number.isNaN(number)) {
-    return "";
-  }
-  const { precision } = props;
-  const rounded = toPrecision(number, precision);
-  return rounded.toFixed(Math.max(0, precision));
-}
-const ALLOWED_KEY = [
-  "Backspace",
-  "Delete",
-  "Tab",
-  "ArrowLeft",
-  "ArrowRight",
-  "ArrowUp",
-  "ArrowDown",
-  "Home",
-  "End"
-];
 function onInputKeydown(ev) {
-  if (props.readonly || props.disabled) {
-    return;
-  }
   const key = ev.key;
   if (!props.scientific && ["e", "E"].includes(key)) {
     ev.preventDefault();
     return;
   }
-  if (!allowedRegex.value.test(key) && !ALLOWED_KEY.includes(key) && !ev.ctrlKey && !ev.metaKey) {
-    ev.preventDefault();
-    return;
-  }
   if (ev.key === "ArrowUp") {
     ev.preventDefault();
     increaseValue();
@@ -130,12 +137,41 @@ function onInputKeydown(ev) {
     decreaseValue();
   }
 }
+function onInputFocus(event) {
+  emits("focus", event);
+}
+function onInputBlur(event) {
+  inputData.userInput = null;
+  if (inputData.currentValue === null) {
+    ;
+    event.target.value = "";
+  }
+  emits("blur", event);
+}
+function onInputInput(value) {
+  inputData.userInput = value;
+  const newValue = value === "" ? null : Number.parseFloat(value);
+  inputData.currentValue = toPrecision(newValue ?? 0);
+  modelValue.value = inputData.currentValue;
+}
+function onInputChange(value, event) {
+  const newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
+  emits("change", newValue, event);
+}
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    if (inputData.userInput === null && newVal !== oldVal) {
+      inputData.currentValue = toPrecision(props.modelValue ?? 0);
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <PInput
     v-bind="$attrs"
-    v-model="modelValue"
     :min="min"
     :max="max"
     align="center"
@@ -145,20 +181,27 @@ function onInputKeydown(ev) {
     :readonly="readonly"
     :prefix-style="false"
     :suffix-style="false"
-    :parser="numberParser"
-    :formatter="numberFormatter"
+    :clear-value="clearValue"
+    :model-value="inputValue"
+    @blur="onInputBlur"
+    @focus="onInputFocus"
+    @input="onInputInput"
+    @change="onInputChange"
     @keydown="onInputKeydown"
   >
     <template #prefix>
       <button
-        class="mr-2 -ml-3 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"
+        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"
         :disabled="decreaseDisabled"
         @pointerdown="startDecrease"
         @pointercancel="stopDecrease"
         @pointerup="stopDecrease"
         @contextmenu.prevent="NOOP"
       >
-        <MinusIcon class="pointer-events-none" />
+        <slot name="minusIcon">
+          <MinusIcon class="pointer-events-none" />
+        </slot>
       </button>
 
       <slot name="prefix" />
@@ -168,14 +211,17 @@ function onInputKeydown(ev) {
       <slot name="suffix" />
 
       <button
-        class="ml-2 -mr-3 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"
+        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"
         :disabled="increaseDisabled"
         @pointerdown="startIncrease"
         @pointercancel="stopIncrease"
         @pointerup="stopIncrease"
         @contextmenu.prevent="NOOP"
       >
-        <PlusIcon class="pointer-events-none" />
+        <slot name="plusIcon">
+          <PlusIcon class="pointer-events-none" />
+        </slot>
       </button>
     </template>
   </PInput>

package/dist/components/overlay/index.vue

@@ -1,11 +1,5 @@
 <script setup>
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  shallowRef,
-  watch
-} from "vue";
+import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
 import { useLockScroll } from "../../composables";
 import { cachedOff, cachedOn, NOOP } from "../../utils/event";
 import { isTruthyProp } from "../../utils/format";
@@ -32,10 +26,7 @@ const props = defineProps({
   shownElement: { type: null, required: false }
 });
 const emits = defineEmits(["click", "escape", "update:modelValue"]);
-const {
-  lockScroll,
-  unlockScroll
-} = useLockScroll();
+const { lockScroll, unlockScroll } = useLockScroll();
 const overlayId = Symbol("pxd-overlay");
 const clipPath = shallowRef("");
 const computedStyle = computed(() => ({
@@ -109,15 +100,8 @@ function onOverlayVisibleChange(visible) {
   cachedOff(document, "keydown", onOverlayKeydown);
   shownElementEl?.classList.remove("pointer-events-auto");
 }
-watch(
-  () => props.modelValue,
-  onOverlayVisibleChange,
-  { immediate: true }
-);
-watch(
-  () => props.shownElement,
-  tryGetShownElementIfNeed
-);
+watch(() => props.modelValue, onOverlayVisibleChange, { immediate: true });
+watch(() => props.shownElement, tryGetShownElementIfNeed);
 onBeforeUnmount(() => {
   cachedOff(document, "keydown", onOverlayKeydown);
   removeOverlay(overlayId);

package/dist/components/pagination/index.vue

@@ -8,14 +8,24 @@ defineProps({
   prev: { type: Object, required: false },
   next: { type: Object, required: false }
 });
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 </script>
 
 <template>
-  <nav aria-label="pagination" class="pxd-pagination relative flex w-full flex-wrap items-start justify-between">
-    <RouterLink v-if="prev" :to="prev.href" class="pxd-pagination--prev min-h-13 group py-1 pr-2 pl-6 rounded-md no-underline! self-focus-ring outline-none">
-      <span secondary class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
-        {{ config.locale.compare.prev }}
+  <nav
+    aria-label="pagination"
+    class="pxd-pagination relative flex w-full flex-wrap items-start justify-between"
+  >
+    <RouterLink
+      v-if="prev"
+      :to="prev.href"
+      class="pxd-pagination--prev min-h-13 group py-1 pr-2 pl-6 rounded-md no-underline! self-focus-ring outline-none"
+    >
+      <span
+        secondary
+        class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors"
+      >
+        {{ configProvider.locale.compare.prev }}
       </span>
 
       <div class="pxd-pagination--label prev relative flex items-center text-foreground">
@@ -28,9 +38,16 @@ const config = useConfigProvider();
       <slot />
     </div>
 
-    <RouterLink v-if="next" :to="next.href" class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md no-underline! self-focus-ring outline-none">
-      <span secondary class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
-        {{ config.locale.compare.next }}
+    <RouterLink
+      v-if="next"
+      :to="next.href"
+      class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md no-underline! self-focus-ring outline-none"
+    >
+      <span
+        secondary
+        class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors"
+      >
+        {{ configProvider.locale.compare.next }}
       </span>
 
       <div class="pxd-pagination--label next relative flex items-center text-foreground">

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

@@ -0,0 +1,46 @@
+export declare const pinInputVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-input--border rounded-md motion-safe:transition-all", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-input--border rounded-md motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/pin-input/cn.js

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+export const pinInputVariant = tv({
+  base: "pxd-input--border rounded-md motion-safe:transition-all",
+  variants: {
+    size: {
+      xs: "w-6 text-xs",
+      sm: "w-7.5 text-sm",
+      md: "w-9 text-sm",
+      lg: "w-10 text-base"
+    },
+    error: {
+      true: "is-error",
+      false: ""
+    },
+    disabled: {
+      true: "is-disabled",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    error: false,
+    disabled: false
+  }
+});

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

@@ -2,7 +2,8 @@
 import { computed, ref, shallowRef } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
-import { getFallbackValue } from "../../utils/get";
+import { isTruthyProp } from "../../utils/format";
+import { pinInputVariant } from "./cn";
 defineOptions({
   name: "PPinInput",
   model: {
@@ -23,13 +24,7 @@ const props = defineProps({
   type: { type: String, required: false, default: "numeric" }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const SIZES = {
-  xs: "w-6 text-xs",
-  sm: "w-7.5 text-sm",
-  md: "w-9 text-sm",
-  lg: "w-10 text-base"
-};
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const inputsRef = shallowRef([]);
 const modelValue = useModelValue(props, emits);
 const modelValueLocal = ref(
@@ -54,16 +49,12 @@ const computedInputType = computed(() => {
 const computedInputMode = computed(() => {
   return props.type.includes("numeric") ? "numeric" : "text";
 });
-const computedClass = computed(() => {
-  const classes = ["pxd-input--border rounded-md motion-safe:transition-all"];
-  if (props.error) {
-    classes.push("is-error");
-  }
-  if (props.disabled) {
-    classes.push("is-disabled");
-  }
-  classes.push(getFallbackValue(props.size, SIZES, config.size));
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return pinInputVariant({
+    size: props.size || configProvider.size,
+    error: isTruthyProp(props.error),
+    disabled: isTruthyProp(props.disabled)
+  });
 });
 function setInputValue(value, index) {
   if (index !== void 0) {
@@ -193,7 +184,7 @@ function onInputPastedValue(ev) {
     @compositionend="onCompositionEnd"
     @click="onContainerClick"
   >
-    <div v-for="(n, i) of length" :key="n" :class="computedClass">
+    <div v-for="(n, i) of length" :key="n" :class="computedClasses">
       <input
         ref="inputsRef"
         :value="modelValueLocal[i]"
@@ -213,7 +204,7 @@ function onInputPastedValue(ev) {
         :inputmode="computedInputMode"
         @paste="onInputPastedValue"
         @beforeinput="onBeforeInputValue"
-      >
+      />
     </div>
   </label>
 </template>