pxd 0.0.55 → 0.0.60

package/dist/components/note/index.vue

@@ -4,46 +4,98 @@ import InformationIcon from "@gdsicon/vue/information";
 import StopIcon from "@gdsicon/vue/stop";
 import WarningIcon from "@gdsicon/vue/warning";
 import { computed, h } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
-import { noteVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
-  name: "PNote"
+  name: "PNote",
+  inheritAttrs: false
 });
 const props = defineProps({
-  variant: { type: null, required: false, default: "default" },
+  variant: { type: String, required: false, default: "default" },
   size: { type: String, required: false },
   fill: { type: Boolean, required: false },
   label: { type: [Boolean, String, Number, Array, null], required: false, default: true }
 });
-const configProvider = useConfigProvider();
-const VARIANTS = {
-  success: {
-    icon: CheckCircleIcon
-  },
-  error: {
-    icon: StopIcon
-  },
-  warning: {
-    icon: WarningIcon
-  },
-  default: {
-    icon: InformationIcon
+const noteVariant = tv({
+  base: "pxd-note gap-2 sm:items-center max-sm:flex-col flex max-w-full rounded-md border",
+  variants: {
+    size: {
+      sm: "px-2 py-1.5 text-xs",
+      md: "px-3 py-2 text-sm",
+      lg: "px-4 py-2.5 text-base"
+    },
+    variant: {
+      success: {
+        base: "border-blue-500 text-blue-900",
+        fill: "border-blue-100 bg-blue-200 text-blue-900"
+      },
+      error: {
+        base: "border-red-500 text-red-900",
+        fill: "border-red-100 bg-red-200 text-red-900"
+      },
+      warning: {
+        base: "border-amber-500 text-amber-900",
+        fill: "border-amber-100 bg-amber-200 text-amber-900"
+      },
+      default: {
+        base: "border-input text-gray-900",
+        fill: "border-gray-100 bg-gray-200 text-gray-900"
+      },
+      primary: {
+        base: "border-gray-alpha-400 text-primary",
+        fill: "border-gray-100 bg-primary text-gray-100"
+      },
+      violet: {
+        base: "text-violet-900 border-violet-400",
+        fill: "text-violet-900 bg-violet-200 border-violet-100"
+      },
+      cyan: {
+        base: "border-teal-400 text-teal-900",
+        fill: "border-teal-100 bg-teal-200 text-teal-900"
+      }
+    },
+    fill: {
+      true: {},
+      false: {}
+    }
   },
-  primary: {
-    icon: InformationIcon
-  },
-  violet: {
-    icon: InformationIcon
-  },
-  cyan: {
-    icon: InformationIcon
+  compoundVariants: [
+    { variant: "success", fill: true, class: "border-blue-100 bg-blue-200 text-blue-900" },
+    { variant: "success", fill: false, class: "border-blue-500 text-blue-900" },
+    { variant: "error", fill: true, class: "border-red-100 bg-red-200 text-red-900" },
+    { variant: "error", fill: false, class: "border-red-500 text-red-900" },
+    { variant: "warning", fill: true, class: "border-amber-100 bg-amber-200 text-amber-900" },
+    { variant: "warning", fill: false, class: "border-amber-500 text-amber-900" },
+    { variant: "default", fill: true, class: "border-gray-100 bg-gray-200 text-gray-900" },
+    { variant: "default", fill: false, class: "border-input text-gray-900" },
+    { variant: "primary", fill: true, class: "border-gray-100 bg-primary text-gray-100" },
+    { variant: "primary", fill: false, class: "border-gray-alpha-400 text-primary" },
+    { variant: "violet", fill: true, class: "text-violet-900 bg-violet-200 border-violet-100" },
+    { variant: "violet", fill: false, class: "text-violet-900 border-violet-400" },
+    { variant: "cyan", fill: true, class: "border-teal-100 bg-teal-200 text-teal-900" },
+    { variant: "cyan", fill: false, class: "border-teal-400 text-teal-900" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    fill: false
   }
+});
+const configProvider = useConfigProvider();
+const VARIANTS_ICON = {
+  success: CheckCircleIcon,
+  error: StopIcon,
+  warning: WarningIcon,
+  default: InformationIcon,
+  primary: InformationIcon,
+  violet: InformationIcon,
+  cyan: InformationIcon
 };
 const computedLabel = computed(() => {
   const { label } = props;
   if (isTruthyProp(label)) {
-    return VARIANTS[props.variant]?.icon || InformationIcon;
+    return VARIANTS_ICON[props.variant] || InformationIcon;
   }
   if (typeof label === "string" && label) {
     return h("span", null, label);
@@ -60,8 +112,8 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <div :class="computedClasses">
-    <div class="gap-3 flex flex-1">
+  <div :class="computedClasses" v-bind="$attrs">
+    <div class="gap-3 flex flex-1 shrink-0">
       <slot v-if="computedLabel" name="label">
         <Component :is="computedLabel" class="size-4 font-medium h-lh shrink-0" />
       </slot>
@@ -71,7 +123,7 @@ const computedClasses = computed(() => {
       </span>
     </div>
 
-    <div v-if="$slots.action" class="pxd-note--action">
+    <div v-if="$slots.action" class="pxd-note--action max-sm:pl-7 shrink-0">
       <slot name="action" />
     </div>
   </div>

package/dist/components/note/types.d.ts

@@ -1,8 +1,16 @@
 import type { ComponentLabel, ComponentSize } from '../../types/shared'
-import type { noteVariant } from './cn'
+
+export type NoteVariant =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'default'
+  | 'primary'
+  | 'violet'
+  | 'cyan'
 
 export interface NoteProps {
-  variant?: keyof typeof noteVariant.variants.variant
+  variant?: NoteVariant
   size?: ComponentSize
   fill?: boolean
   label?: boolean | ComponentLabel

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

@@ -11,21 +11,22 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     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;
+    blur: (args_0: FocusEvent) => any;
+    focus: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<NumberInputProps> & Readonly<{
     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;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
     max: number;
     min: number;
     clearValue: number | null;
     step: number;
+    thousandsSeparator: string;
     scientific: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -2,7 +2,7 @@
 import MinusIcon from "@gdsicon/vue/minus";
 import PlusIcon from "@gdsicon/vue/plus";
 import { isNil, isNumber, isUndefined } from "es-toolkit";
-import { computed, reactive, watch } from "vue";
+import { computed, reactive, shallowRef, watch } from "vue";
 import { useRepeatAction } from "../../composables/use-repeat-action";
 import { NOOP } from "../../utils/event";
 import PInput from "../input/index.vue";
@@ -21,6 +21,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   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 }
@@ -35,10 +37,22 @@ const modelValue = computed({
     emits("update:modelValue", value);
   }
 });
+const REGEXPS = {
+  "remove-leading-zeros": /^(-?)0+(?=\d)/,
+  "thousands-separator": /\B(?=(\d{3})+(?!\d))/g
+};
+const isFocused = shallowRef(false);
 const inputData = reactive({
   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;
@@ -55,6 +69,9 @@ const inputValue = computed(() => {
       currentValue = currentValue.toFixed(props.precision);
     }
   }
+  if (props.thousands && !isFocused.value) {
+    return formatWithThousands(currentValue);
+  }
   return currentValue;
 });
 const decreaseDisabled = computed(
@@ -138,10 +155,19 @@ function onInputKeydown(ev) {
   }
 }
 function onInputFocus(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 = "";
@@ -149,13 +175,17 @@ function onInputBlur(event) {
   emits("blur", event);
 }
 function onInputInput(value) {
-  inputData.userInput = value;
-  const newValue = value === "" ? null : Number.parseFloat(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;
 }
 function onInputChange(value, event) {
-  const newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
+  let newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
+  if (isNumber(newValue)) {
+    newValue = clampToRange(newValue);
+  }
   emits("change", newValue, event);
 }
 watch(
@@ -179,10 +209,10 @@ watch(
     input-type="number"
     :disabled="disabled"
     :readonly="readonly"
-    :prefix-style="false"
-    :suffix-style="false"
     :clear-value="clearValue"
     :model-value="inputValue"
+    :default-prefix-style="false"
+    :default-suffix-style="false"
     @blur="onInputBlur"
     @focus="onInputFocus"
     @input="onInputInput"

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

@@ -5,6 +5,8 @@ export interface NumberInputProps {
   readonly?: boolean
   disabled?: boolean
   precision?: number
+  thousands?: boolean
+  thousandsSeparator?: string
   scientific?: boolean
   clearValue?: number | null
   modelValue?: number | null

package/dist/components/overlay/index.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   appendToBody: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false },
-  shownElement: { type: null, required: false }
+  shownElement: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["click", "escape", "update:modelValue"]);
 const { lockScroll, unlockScroll } = useLockScroll();

package/dist/components/overlay/types.d.ts

@@ -6,7 +6,7 @@ export interface OverlayProps {
   appendToBody?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
-  shownElement?: string | HTMLElement
+  shownElement?: string | object
 }
 
 export interface OverlayEmits {

package/dist/components/pagination/index.vue

@@ -1,8 +1,9 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 defineOptions({
-  name: "PPagination"
+  name: "PPagination",
+  inheritAttrs: false
 });
 defineProps({
   prev: { type: Object, required: false },
@@ -15,6 +16,7 @@ const configProvider = useConfigProvider();
   <nav
     aria-label="pagination"
     class="pxd-pagination relative flex w-full flex-wrap items-start justify-between"
+    v-bind="$attrs"
   >
     <RouterLink
       v-if="prev"
@@ -41,7 +43,7 @@ const configProvider = useConfigProvider();
     <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"
+      class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md text-right no-underline! self-focus-ring outline-none"
     >
       <span
         secondary

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

@@ -1,5 +1,10 @@
 import type { PinInputProps } from './types';
-declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function focus(): void;
+declare function blur(): void;
+declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: string) => any;
     "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<PinInputProps> & Readonly<{
@@ -7,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {}, {},
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     length: number;
-    type: "numeric" | "alphabetic" | "alphanumeric" | "numeric-password" | "alphabetic-password" | "alphanumeric-password";
     placeholder: string;
+    type: "numeric" | "alphabetic" | "alphanumeric" | "numeric-password" | "alphabetic-password" | "alphanumeric-password";
     modelValue: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,11 +1,12 @@
 <script setup>
-import { computed, ref, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { computed, shallowRef, watch } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useModelValue } from "../../composables/use-model-value";
 import { isTruthyProp } from "../../utils/format";
-import { pinInputVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PPinInput",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -17,32 +18,45 @@ const props = defineProps({
   length: { type: Number, required: false, default: 4 },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   modelValue: { type: String, required: false, default: "" },
   placeholder: { type: String, required: false, default: "\u25CB" },
-  inputMode: { type: null, required: false },
   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-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
+  }
+});
 const configProvider = useConfigProvider();
 const inputsRef = shallowRef([]);
 const modelValue = useModelValue(props, emits);
-const modelValueLocal = ref(
-  (() => {
-    if (typeof props.modelValue === "string") {
-      return props.modelValue.split("");
-    } else if (Array.isArray(props.modelValue)) {
-      return props.modelValue;
-    }
-    return Array.from({ length: props.length }, () => "");
-  })()
-);
+let localValue = modelValue.value;
 const computedInputType = computed(() => {
   const { type } = props;
   if (type.includes("password")) {
     return "password";
   } else if (type === "numeric") {
-    return "tel";
+    return "numeric";
   }
   return "text";
 });
@@ -56,14 +70,17 @@ const computedClasses = computed(() => {
     disabled: isTruthyProp(props.disabled)
   });
 });
+function replaceCharAt(str, index, char) {
+  return str.substring(0, index) + char + str.substring(index + 1);
+}
 function setInputValue(value, index) {
   if (index !== void 0) {
     inputsRef.value[index].value = value;
-    modelValueLocal.value[index] = value;
+    localValue = replaceCharAt(localValue, index, value);
   } else {
-    modelValueLocal.value = value.split("");
+    localValue = value;
   }
-  modelValue.value = modelValueLocal.value.join("");
+  modelValue.value = localValue;
 }
 function focusInputField(dir, index) {
   let correctIndex = -1;
@@ -82,9 +99,9 @@ function focusInputField(dir, index) {
   inputsRef.value[correctIndex].select();
 }
 function getFirstEmptyIndex() {
-  const length = modelValueLocal.value.length;
+  const length = localValue.length;
   if (length === props.length) {
-    return modelValueLocal.value.findIndex((value) => !value);
+    return localValue.split("").findIndex((value) => !value);
   }
   return length;
 }
@@ -180,10 +197,30 @@ function onInputPastedValue(ev) {
     setInputValue(slicedText);
   }
 }
+function focus() {
+  focusInputField("first");
+}
+function blur() {
+  inputsRef.value.forEach((input) => input.blur());
+}
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === localValue) {
+      return;
+    }
+    localValue = newValue;
+  }
+);
+defineExpose({
+  focus,
+  blur
+});
 </script>
 
 <template>
   <label
+    v-bind="$attrs"
     class="pxd-pin-input gap-1.5 flex size-max items-center"
     @keydown="onContainerKeydown"
     @compositionend="onCompositionEnd"
@@ -193,11 +230,12 @@ function onInputPastedValue(ev) {
     <div v-for="(n, i) of length" :key="n" :class="computedClasses">
       <input
         ref="inputsRef"
-        :value="modelValueLocal[i]"
+        :value="modelValue[i]"
         :aria-label="`pin code ${n} of ${length}`"
         :type="computedInputType"
         :data-index="i"
         class="aspect-square size-full appearance-none rounded-inherit border-none bg-transparent text-center font-inherit outline-none placeholder:text-gray-600 placeholder:select-none focus:placeholder:opacity-0 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400 motion-safe:transition-all"
+        name="pin-input"
         minlength="1"
         maxlength="1"
         autocorrect="off"
@@ -205,7 +243,6 @@ function onInputPastedValue(ev) {
         autocapitalize="off"
         :readonly="readonly"
         :disabled="disabled"
-        :required="required"
         :placeholder="placeholder"
         :inputmode="computedInputMode"
         @paste="onInputPastedValue"

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

@@ -1,5 +1,3 @@
-import type { HTMLAttributes } from 'vue'
-
 import type { ComponentSizeWithXs } from '../../types/shared'
 
 export interface PinInputProps {
@@ -8,10 +6,8 @@ export interface PinInputProps {
   length?: number
   readonly?: boolean
   disabled?: boolean
-  required?: boolean
   modelValue?: string
   placeholder?: string
-  inputMode?: HTMLAttributes['inputmode']
   type?:
     | 'numeric'
     | 'alphabetic'

package/dist/components/placeholder/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { getCssUnitValue } from "../../utils/format";
+import { invert } from "es-toolkit";
 defineOptions({
   name: "PPlaceholder",
   inheritAttrs: false
@@ -46,6 +47,6 @@ const computedStyle = computed(() => {
       #0000 62.5%,
       #0000 100%
     )
-    0 0 / var(--placeholder-gap, 12px) var(--placeholder-gap, 12px) padding-box fixed;
+    0 0 / var(--placeholder-gap, 12px) var(--placeholder-gap, 12px) padding-box;
 }
 </style>

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

@@ -25,9 +25,9 @@ declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {
     "onOutside-click"?: ((args_0: MouseEvent) => any) | undefined;
     "onTrigger-click"?: ((args_0: PointerEvent) => any) | undefined;
 }>, {
-    position: import("../../types/shared").ComponentPosition;
     offset: number;
     trigger: PopoverTrigger | PopoverTrigger[];
+    position: import("../../types/shared").ComponentPosition;
     showDelay: number;
     hideDelay: number;
     arrowColor: string;