pxd 0.0.52 → 0.0.53

package/dist/components/switch/cn.js

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+export const switchVariant = tv({
+  base: "pxd-switch--label px-3 text-sm font-medium flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden motion-safe:transition-all",
+  variants: {
+    disabled: {
+      true: "",
+      false: "peer-checked:text-foreground"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});

package/dist/components/switch/index.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { useUniqueId } from "../../composables/use-unique-id-context";
 import { useSwitchGroupContext, useSwitchGroupModelValue } from "../../contexts/switch";
 import { getUniqueId } from "../../utils/uid";
+import { switchVariant } from "./cn";
 defineOptions({
   name: "PSwitch",
   model: {
@@ -23,15 +24,8 @@ const switchGroupModelValue = useSwitchGroupModelValue();
 const isChecked = computed(() => switchGroupModelValue.value === props.value);
 const computedDisabled = computed(() => props.disabled || switchGroupContext.disabled);
 const computedRequired = computed(() => props.required || switchGroupContext.required);
-const computedClass = computed(() => {
-  const classes = [
-    "pxd-switch--label px-3 text-sm flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring",
-    "font-medium select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden motion-safe:transition-all"
-  ];
-  if (!computedDisabled.value) {
-    classes.push("peer-checked:text-foreground");
-  }
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return switchVariant({ disabled: computedDisabled.value });
 });
 function onSwitchFocusIn() {
   if (computedDisabled.value) {
@@ -57,9 +51,9 @@ function onSwitchFocusIn() {
       :name="switchGroupName"
       :disabled="computedDisabled"
       :required="computedRequired"
-    >
+    />
 
-    <div :class="computedClass" @focusin="onSwitchFocusIn">
+    <div :class="computedClasses" @focusin="onSwitchFocusIn">
       <slot>
         {{ label }}
       </slot>

package/dist/components/switch-group/index.vue

@@ -14,9 +14,9 @@ defineOptions({
   }
 });
 const props = defineProps({
-  block: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  fullWidth: { type: Boolean, required: false },
   size: { type: String, required: false },
   options: { type: Array, required: false, default: () => [] },
   modelValue: { type: [String, Number], required: false, default: "" }
@@ -27,16 +27,19 @@ const SIZES = {
   md: "h-9",
   lg: "h-10"
 };
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, config.size));
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 provideUniqueId("SwitchGroupName");
 provideSwitchGroupContext(props);
 provideSwitchGroupModelValue(modelValue);
 </script>
 
 <template>
-  <div class="pxd-switch-group p-1 flex touch-manipulation rounded-md border" :class="[block ? 'w-full' : 'w-max', computedSize]">
+  <div
+    class="pxd-switch-group p-1 flex touch-manipulation rounded-md border"
+    :class="[fullWidth ? 'w-full' : 'w-max', computedSize]"
+  >
     <slot>
       <PSwitch
         v-for="option in options"

package/dist/components/text/cn.d.ts

@@ -0,0 +1,67 @@
+export declare const textVariant: import("tailwind-variants").TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    monospace: {
+        true: string;
+        false: string;
+    };
+    secondary: {
+        true: string;
+        false: string;
+    };
+    truncate: {
+        true: string;
+        false: string;
+    };
+    lineClamp: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-text m-0", {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    monospace: {
+        true: string;
+        false: string;
+    };
+    secondary: {
+        true: string;
+        false: string;
+    };
+    truncate: {
+        true: string;
+        false: string;
+    };
+    lineClamp: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    monospace: {
+        true: string;
+        false: string;
+    };
+    secondary: {
+        true: string;
+        false: string;
+    };
+    truncate: {
+        true: string;
+        false: string;
+    };
+    lineClamp: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-text m-0", unknown, unknown, undefined>>;

package/dist/components/text/cn.js

@@ -0,0 +1,34 @@
+import { tv } from "tailwind-variants";
+export const textVariant = tv({
+  base: "pxd-text m-0",
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    },
+    monospace: {
+      true: "font-mono",
+      false: ""
+    },
+    secondary: {
+      true: "text-foreground-secondary",
+      false: ""
+    },
+    truncate: {
+      true: "truncate",
+      false: ""
+    },
+    lineClamp: {
+      true: "line-clamp",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    align: "left",
+    monospace: false,
+    secondary: false,
+    truncate: false,
+    lineClamp: false
+  }
+});

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

@@ -12,8 +12,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    as: ComponentAs;
     align: "left" | "center" | "right";
+    as: ComponentAs;
     truncate: boolean | number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/text/index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed } from "vue";
-import { getCssUnitValue, isTruthyProp } from "../../utils/format";
+import { getCssUnitValue } from "../../utils/format";
 import { getResponsiveValue } from "../../utils/responsive";
+import { textVariant } from "./cn";
 defineOptions({
   name: "PText"
 });
@@ -13,12 +14,7 @@ const props = defineProps({
   monospace: { type: Boolean, required: false },
   secondary: { type: Boolean, required: false }
 });
-const presetAlignClasses = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
-const presetSizeClasses = {
+const presetSize = {
   "--text-xs": "text-xs",
   "--text-sm": "sm:text-sm",
   "--text-md": "md:text-md",
@@ -43,30 +39,25 @@ const computedStyle = computed(() => {
   }
   return styles;
 });
-const computedClass = computed(() => {
+const computedClasses = computed(() => {
   const { truncate, monospace, secondary } = props;
+  const baseClass = textVariant({
+    align: props.align,
+    monospace,
+    secondary,
+    truncate: truncate === true,
+    lineClamp: typeof truncate === "number"
+  });
   const classes = [
-    "pxd-text m-0",
-    presetAlignClasses[props.align],
-    ...Object.keys(formattedSize.value).map((bp) => presetSizeClasses[bp])
-  ];
-  if (monospace) {
-    classes.push("font-mono");
-  }
-  if (secondary) {
-    classes.push("text-foreground-secondary");
-  }
-  if (isTruthyProp(truncate)) {
-    classes.push("truncate");
-  } else if (truncate) {
-    classes.push(`line-clamp`);
-  }
-  return classes.join(" ");
+    baseClass,
+    ...Object.keys(formattedSize.value).map((bp) => presetSize[bp])
+  ].filter(Boolean).join(" ");
+  return classes;
 });
 </script>
 
 <template>
-  <Component :is="as" :class="computedClass" :style="computedStyle">
+  <Component :is="as" :class="computedClasses" :style="computedStyle">
     <slot />
   </Component>
 </template>

package/dist/components/textarea/cn.d.ts

@@ -0,0 +1,58 @@
+export declare const textareaVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    readonly: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    readonly: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    readonly: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/textarea/cn.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+export const textareaVariant = tv({
+  base: "",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base"
+    },
+    disabled: {
+      true: "is-disabled",
+      false: ""
+    },
+    readonly: {
+      true: "is-readonly",
+      false: ""
+    },
+    error: {
+      true: "is-error",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+    readonly: false,
+    error: false
+  }
+});

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

@@ -1,5 +1,7 @@
 import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared';
 interface Props {
+    rows?: string | number;
+    cols?: string | number;
     size?: ComponentSizeWithXs;
     error?: boolean | string;
     readonly?: boolean;

package/dist/components/textarea/index.vue

@@ -2,8 +2,9 @@
 import { computed } 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 { getUniqueId } from "../../utils/uid";
+import { textareaVariant } from "./cn";
 defineOptions({
   name: "PTextarea",
   model: {
@@ -12,6 +13,8 @@ defineOptions({
   }
 });
 const props = defineProps({
+  rows: { type: [String, Number], required: false },
+  cols: { type: [String, Number], required: false },
   size: { type: String, required: false },
   error: { type: [Boolean, String], required: false },
   readonly: { type: Boolean, required: false },
@@ -25,27 +28,15 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "change", "focus", "blur"]);
 const uniqueId = getUniqueId();
-const SIZES = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-sm",
-  lg: "text-base"
-};
 const modelValue = useModelValue(props, emits);
-const config = useConfigProvider();
-const computedClass = computed(() => {
-  const classes = [];
-  classes.push(getFallbackValue(props.size, SIZES, config.size));
-  if (props.disabled) {
-    classes.push("is-disabled");
-  }
-  if (props.readonly) {
-    classes.push("is-readonly");
-  }
-  if (props.error) {
-    classes.push("is-error");
-  }
-  return classes.join(" ");
+const configProvider = useConfigProvider();
+const computedClasses = computed(() => {
+  return textareaVariant({
+    size: props.size || configProvider.size,
+    error: isTruthyProp(props.error),
+    disabled: isTruthyProp(props.disabled),
+    readonly: isTruthyProp(props.readonly)
+  });
 });
 function onInputFocus(event) {
   emits("focus", event);
@@ -61,16 +52,18 @@ function onInputChange(event) {
 <template>
   <label
     :for="uniqueId"
-    class="pxd-textarea pxd-input--border flex size-full min-h-[inherit] max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-all"
-    :class="computedClass"
+    class="pxd-textarea pxd-input--border flex size-full min-h-inherit max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-all"
+    :class="computedClasses"
   >
     <textarea
       :id="uniqueId"
       v-model="modelValue"
-      class="py-2.5 px-3 size-full min-h-[inherit] resize-none appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400"
+      class="py-2.5 px-3 size-full min-h-inherit resize-none appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400"
       autocorrect="off"
       autocomplete="off"
       autocapitalize="off"
+      :rows="rows"
+      :cols="cols"
       :readonly="readonly"
       :disabled="disabled"
       :required="required"

package/dist/components/theme-switcher/index.vue

@@ -13,9 +13,12 @@ const { isDark, toggleDarkMode } = useColorScheme({
   syncStatus: true
 });
 const renderIcon = computed(() => isDark.value ? MoonIcon : SunIcon);
-watch(() => isDark.value, (newVal) => {
-  emits("toggle", newVal ? "dark" : "light");
-});
+watch(
+  () => isDark.value,
+  (newVal) => {
+    emits("toggle", newVal ? "dark" : "light");
+  }
+);
 </script>
 
 <template>

package/dist/components/time-picker/index.d.vue.ts

@@ -6,7 +6,7 @@ interface Props {
     presets?: DateTimePreset[];
     disabled?: boolean;
     clearable?: boolean;
-    modelValue?: Date | string | number;
+    modelValue?: Date | string | number | null;
     prefixIcon?: boolean;
     placeholder?: string;
     showSeconds?: boolean;
@@ -24,7 +24,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     format: string;
-    modelValue: Date | string | number;
+    modelValue: Date | string | number | null;
     closeOnPressEscape: boolean;
     presets: DateTimePreset[];
     prefixIcon: boolean;

package/dist/components/time-picker/index.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   presets: { type: Array, required: false, default: () => [] },
   disabled: { type: Boolean, required: false },
   clearable: { type: Boolean, required: false },
-  modelValue: { type: [Date, String, Number], required: false, default: "" },
+  modelValue: { type: [Date, String, Number, null], required: false, default: "" },
   prefixIcon: { type: Boolean, required: false, default: true },
   placeholder: { type: String, required: false },
   showSeconds: { type: Boolean, required: false, default: true },
@@ -38,7 +38,7 @@ const VALUE_POSITION_MAP = {
   second: 2
 };
 const popoverTrigger = ["click"];
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const { isXs, attrs } = usePopoverResponsive();
 const timeHoursRef = shallowRef();
 const timeMinutesRef = shallowRef();
@@ -106,7 +106,11 @@ async function setTimesScrollTop() {
     dayjsDateTime.value = dayjs();
   }
   const elList = [timeHoursRef.value, timeMinutesRef.value, timeSecondsRef.value];
-  const modelValueList = [dayjsDateTime.value.hour(), dayjsDateTime.value.minute(), dayjsDateTime.value.second()];
+  const modelValueList = [
+    dayjsDateTime.value.hour(),
+    dayjsDateTime.value.minute(),
+    dayjsDateTime.value.second()
+  ];
   elList.forEach((el, i) => {
     const scrollTop = modelValueList[i] * HEIGHT;
     el?.scrollTo({ top: scrollTop });
@@ -138,9 +142,6 @@ function updateModelValue() {
 function onInputValueChange(value) {
   updateDayjsDateTime(value);
   updateModelValue();
-}
-function onInputBlurChange() {
-  updateModelValue();
   hidePopover();
 }
 function onPresetClick(ev) {
@@ -156,7 +157,8 @@ function onPresetClick(ev) {
   if (!presetValue) {
     return;
   }
-  onInputValueChange(presetValue);
+  updateDayjsDateTime(presetValue);
+  updateModelValue();
   hidePopover();
 }
 function onConfirmClick() {
@@ -173,14 +175,11 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
 
 <template>
   <PPopover
-    enterable
     :trigger="popoverTrigger"
-    :show-delay="0"
-    :hide-delay="0"
     :disabled="disabled"
     :class="$attrs.class"
     :style="$attrs.style"
-    :toggle-click="false"
+    :toggle-on-trigger="false"
     :visible="popoverVisible"
     :unset-position="isXs"
     :wrapper-class="attrs.wrapperClass"
@@ -208,55 +207,76 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
       v-bind="$attrs"
       @clear="onInputValueChange"
       @change="onInputValueChange"
-      @keydown.enter="onInputBlurChange"
     >
       <template v-if="prefixIcon" #prefix>
-        <CalendarIcon />
+        <CalendarIcon class="ml-3" />
       </template>
     </PInput>
 
     <template #content>
       <div class="max-sm:p-2 p-1 gap-1 flex items-center justify-between border-b" @click.stop>
         <PButton size="xs" variant="ghost" class="sm:px-0! text-13px" @click="onCancelClick">
-          {{ config.locale.confirm.cancel }}
+          {{ configProvider.locale.confirm.cancel }}
         </PButton>
 
         <PButton size="xs" variant="ghost" class="sm:px-0! text-13px" @click="onConfirmClick">
-          {{ config.locale.date.now }}
+          {{ configProvider.locale.date.now }}
         </PButton>
       </div>
 
-      <div class="sm:text-sm flex max-w-full transform-gpu items-stretch tabular-nums outline-none select-none max-sm:text-15px" @click.stop="onTimeListClick">
+      <div
+        class="sm:text-sm max-sm:text-15px flex max-w-full transform-gpu items-stretch tabular-nums outline-none select-none"
+        @click.stop="onTimeListClick"
+      >
         <div class="p-2 gap-1 relative mx-auto flex items-center">
           <div class="pxd-time-picker--list relative">
-            <ul ref="timeHoursRef" data-type="hour" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]" @scroll.stop="onTimeListScroll">
-              <li v-for="_, i of 24" :key="i" class="h-8 leading-8 cursor-pointer">
+            <ul
+              ref="timeHoursRef"
+              data-type="hour"
+              class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]"
+              @scroll.stop="onTimeListScroll"
+            >
+              <li v-for="(_, i) of 24" :key="i" class="h-8 leading-8 cursor-pointer">
                 {{ padStringZero(i) }}
               </li>
             </ul>
           </div>
           <div class="pxd-time-picker--list relative">
-            <ul ref="timeMinutesRef" data-type="minute" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]" @scroll.stop="onTimeListScroll">
-              <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer">
+            <ul
+              ref="timeMinutesRef"
+              data-type="minute"
+              class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]"
+              @scroll.stop="onTimeListScroll"
+            >
+              <li v-for="(_, i) of 60" :key="i" class="h-8 leading-8 cursor-pointer">
                 {{ padStringZero(i) }}
               </li>
             </ul>
           </div>
           <div v-if="showSeconds" class="pxd-time-picker--list relative">
-            <ul ref="timeSecondsRef" data-type="second" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]" @scroll.stop="onTimeListScroll">
-              <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer">
+            <ul
+              ref="timeSecondsRef"
+              data-type="second"
+              class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]"
+              @scroll.stop="onTimeListScroll"
+            >
+              <li v-for="(_, i) of 60" :key="i" class="h-8 leading-8 cursor-pointer">
                 {{ padStringZero(i) }}
               </li>
             </ul>
           </div>
         </div>
 
-        <div v-if="presets?.length" class="max-sm:w-36 sm:w-25 p-2 gap-1 scrollbar-hidden flex flex-wrap content-start self-stretch overflow-auto border-l outline-none" @click="onPresetClick">
+        <div
+          v-if="presets?.length"
+          class="max-sm:w-36 sm:w-25 p-2 gap-1 scrollbar-hidden flex flex-wrap content-start self-stretch overflow-auto border-l outline-none"
+          @click="onPresetClick"
+        >
           <button
-            v-for="preset, i in presets"
+            v-for="(preset, i) in presets"
             :key="preset.label"
             :data-index="i"
-            class="px-1.5 py-0.5 sm:text-13px sm:leading-4 cursor-pointer appearance-none rounded-sm border-none bg-gray-300 font-inherit whitespace-nowrap text-foreground self-focus-ring outline-none max-sm:leading-5 max-sm:text-sm hover:bg-gray-400 active:bg-gray-500 motion-safe:transition-all"
+            class="px-1.5 py-0.5 sm:text-13px sm:leading-4 max-sm:leading-5 max-sm:text-sm cursor-pointer appearance-none rounded-sm border-none bg-gray-300 font-inherit whitespace-nowrap text-foreground self-focus-ring outline-none hover:bg-gray-400 active:bg-gray-500 motion-safe:transition-all"
           >
             {{ preset.label }}
           </button>