pxd 0.0.64 → 0.1.2

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

@@ -4,9 +4,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
-    height: string | number;
     loading: boolean;
-    shape: import("../../types/shared").ComponentShape;
+    shape: import("../../types/shared/props.js").ComponentShape;
+    height: string | number;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/skeleton/index.vue

@@ -1,68 +1,76 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { getCssUnitValue, increaseWithUnit } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { getCssUnitValue, increaseWithUnit } from "../../utils/format.js";
 defineOptions({
-  name: "PSkeleton",
-  inheritAttrs: false
+	name: "PSkeleton",
+	inheritAttrs: false
 });
 const props = defineProps({
-  loading: { type: Boolean, required: false, default: true },
-  animated: { type: Boolean, required: false, default: true },
-  width: { type: [String, Number], required: false },
-  height: { type: [String, Number], required: false, default: 24 },
-  boxHeight: { type: [String, Number], required: false },
-  shape: { type: String, required: false, default: "default" }
-});
-const skeletonVariant = tv({
-  base: "pxd-skeleton relative block shrink-0 overflow-hidden",
-  variants: {
-    loading: {
-      true: "loading invisible content-visibility-auto intrinsic-size-auto",
-      false: ""
-    },
-    shape: {
-      default: "rounded-md",
-      square: "rounded-none",
-      rounded: "rounded-full"
-    },
-    animated: {
-      true: "animated after:default-animation-timing-function!",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    loading: true,
-    shape: "default",
-    animated: true
-  }
+	loading: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	animated: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	width: {
+		type: [String, Number],
+		required: false
+	},
+	height: {
+		type: [String, Number],
+		required: false,
+		default: 24
+	},
+	boxHeight: {
+		type: [String, Number],
+		required: false
+	},
+	shape: {
+		type: String,
+		required: false,
+		default: "default"
+	}
 });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-skeleton relative block shrink-0 overflow-hidden",
+	variants: {
+		loading: { true: "loading invisible content-visibility-auto intrinsic-size-auto" },
+		shape: {
+			default: "rounded-md",
+			square: "rounded-none",
+			rounded: "rounded-full"
+		},
+		animated: { true: "animated after:default-animation-timing-function!" }
+	}
+}, { selection: () => ({
+	shape: props.shape,
+	loading: props.loading,
+	animated: props.animated
+}) });
 const computedStyle = computed(() => {
-  const { width, height, boxHeight } = props;
-  const styles = {
-    width: getCssUnitValue(width),
-    height: getCssUnitValue(height)
-  };
-  if (boxHeight) {
-    styles["margin-bottom"] = getCssUnitValue(increaseWithUnit(boxHeight, -Number(height)));
-  }
-  return styles;
-});
-const computedClasses = computed(() => {
-  return skeletonVariant({
-    shape: props.shape,
-    loading: props.loading,
-    animated: props.animated
-  });
+	const { width, height, boxHeight } = props;
+	const styles = {
+		width: getCssUnitValue(width),
+		height: getCssUnitValue(height)
+	};
+	if (boxHeight) {
+		styles["margin-bottom"] = getCssUnitValue(increaseWithUnit(boxHeight, -Number(height)));
+	}
+	return styles;
 });
 </script>
 
 <template>
-  <div :class="computedClasses" :style="computedStyle" v-bind="$attrs">
+  <div data-skeleton :class="classes" :style="computedStyle" v-bind="attrs">
     <slot />
   </div>
 </template>
 
 <style>
-.pxd-skeleton.loading:after{background:linear-gradient(90deg,var(--color-gray-100),var(--color-gray-200),var(--color-gray-100)) 0 0 /50% 100%;content:"";inset:0 -200% 0 0;position:absolute;visibility:visible}.pxd-skeleton.animated:after{animation:skeleton-loading 1.5s infinite reverse}@keyframes skeleton-loading{to{transform:translate3d(-50%,0,0)}}
+.pxd-skeleton.loading:after{background:linear-gradient(90deg,var(--color-gray-100),var(--color-gray-200),var(--color-gray-100)) 0 0 /50% 100%;content:"";inset:0 -200% 0 0;position:absolute;visibility:visible}.pxd-skeleton.animated:after{animation:pxd-animation-skeleton-loading 1.5s infinite reverse}@keyframes pxd-animation-skeleton-loading{to{transform:translate3d(-50%,0,0)}}
 </style>

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

@@ -6,11 +6,11 @@ declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {
     onChange?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
 }>, {
+    variant: import("../../types/shared/props.js").ComponentVariant | "secondary";
     modelValue: number | number[] | null;
     max: number;
-    variant: import("../../types/shared").ComponentVariant | "secondary";
+    step: number | number[];
     min: number;
-    step: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;