pxd 0.1.2 → 0.1.3

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

@@ -1,4 +1,4 @@
-import type { ComponentClass, ComponentPosition } from '../../types/shared'
+import type { ComponentClass, ComponentPosition } from '../../types/shared/props'
 import type { CSSProperties } from 'vue'
 
 export type PopoverTrigger = 'click' | 'hover' | 'contextmenu' | 'manual'
@@ -24,11 +24,13 @@ export interface PopoverProps {
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   contentStyle?: CSSProperties | string
+  ariaLabelledby?: string
   toggleOnTrigger?: boolean
   autoFocusElement?: string | boolean
   fillTriggerWidth?: boolean
   closeOnInvisible?: boolean
   closeOnPressEscape?: boolean
+  closeOnOutsideClick?: boolean
   lockScrollOnVisible?: boolean
   returnFocusOnDeactivate?: boolean
 }

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

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
-    label: boolean | string | number;
-    variant: import("../../types/shared/props.js").ComponentVariant | "secondary";
+    label: string | number | boolean;
+    variant: "secondary" | import("../../types/shared/props.js").ComponentVariant;
     max: number;
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/progress/index.vue

@@ -46,7 +46,6 @@ const props = defineProps({
 		required: false
 	}
 });
-const configProvider = useConfigProvider();
 const VARIANTS_COLORS = {
 	primary: "var(--color-primary)",
 	success: "hsl(var(--color-blue-700-value))",
@@ -65,17 +64,6 @@ const computedLabel = computed(() => {
 	}
 	return false;
 });
-const { classes } = useTailwindVariant({
-	base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
-	variants: { size: {
-		sm: "h-2",
-		md: "h-2.5",
-		lg: "h-3.5"
-	} }
-}, {
-	mergeAttrsClass: false,
-	selection: () => ({ size: props.size || configProvider.size })
-});
 const relativeProgress = computed(() => progress.value - props.min);
 const percentage = computed(() => {
 	const range = props.max - props.min;
@@ -94,6 +82,18 @@ const computedProgressBarStyles = computed(() => {
 		backgroundColor: computedColors.value || VARIANTS_COLORS.primary
 	};
 });
+const configProvider = useConfigProvider();
+const { classes } = useTailwindVariant({
+	base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
+	variants: { size: {
+		sm: "h-2",
+		md: "h-2.5",
+		lg: "h-3.5"
+	} }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ size: props.size || configProvider.size })
+});
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentVariant } from '../../types/shared'
+import type { ComponentSize, ComponentVariant } from '../../types/shared/props'
 
 export interface ProgressProps {
   min?: number

package/dist/components/project-banner/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel } from '../../types/shared'
+import type { ComponentLabel } from '../../types/shared/props'
 
 export type ProjectBannerVariant = 'default' | 'warning' | 'error' | 'success' | 'info'
 

package/dist/components/questionnaire/index.vue

@@ -20,21 +20,7 @@ const props = defineProps({ questions: {
 	default: () => []
 } });
 const emits = defineEmits(["submit"]);
-const configProvider = useConfigProvider();
 const contentRef = shallowRef();
-const { value: isExpanded, toggle: toggleExpand } = useToggleValue(true);
-const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isExpanded);
-function onToggleClick() {
-	toggleExpand();
-}
-function onDetailsToggle(ev) {
-	const details = ev.currentTarget;
-	// Find-in-page / fragment navigation opens <details> natively.
-	if (details.open && !isExpanded.value) {
-		skipEnterMotion();
-		isExpanded.value = true;
-	}
-}
 const totalAnswers = shallowReactive({});
 const currentState = shallowRef("choosing");
 const currentIndex = shallowRef(0);
@@ -57,6 +43,20 @@ const showSubmitButton = computed(() => {
 	}
 	return currentIndex.value === questionsCount - 1 && question.allowFreeformInput;
 });
+const configProvider = useConfigProvider();
+const { value: isExpanded, toggle: toggleExpand } = useToggleValue(true);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isExpanded);
+function onToggleClick() {
+	toggleExpand();
+}
+function onDetailsToggle(ev) {
+	const details = ev.currentTarget;
+	// Find-in-page / fragment navigation opens <details> natively.
+	if (details.open && !isExpanded.value) {
+		skipEnterMotion();
+		isExpanded.value = true;
+	}
+}
 function createInitialAnswers(questions) {
 	return questions.reduce((answers, question) => {
 		answers[question.header] = {

package/dist/components/radio/index.vue

@@ -34,9 +34,9 @@ const emits = defineEmits(["change", "update:modelValue"]);
 const uniqueId = getUniqueId();
 const radioGroupContext = useRadioGroupContext();
 const radioGroupName = radioGroupContext?.name ?? getUniqueId();
+const isDisabled = computed(() => props.disabled || radioGroupContext?.props.disabled || false);
 const modelValue = useModelValue(radioGroupContext?.props ?? props, radioGroupContext?.emits ?? emits);
 const isSelected = computed(() => modelValue.value === props.value);
-const isDisabled = computed(() => props.disabled || radioGroupContext?.props.disabled || false);
 const { classes } = useTailwindVariant({
 	base: "pxd-radio--inner size-4 after:content-empty after:size-2 inline-flex items-center justify-center rounded-full border peer-focus-ring after:scale-40 after:rounded-full after:bg-primary after:opacity-0 peer-checked:after:scale-100 peer-checked:after:opacity-100 motion-safe:transition-colors motion-safe:after:transition-appearance",
 	variants: {

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue } from '../../types/shared/props'
 
 export interface RadioProps {
   label?: ComponentLabel

package/dist/components/radio-group/index.d.vue.ts

@@ -1,7 +1,7 @@
 import type { RadioGroupProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any;

package/dist/components/radio-group/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentOption, ComponentValue } from '../../types/shared'
+import type { ComponentOption, ComponentValue } from '../../types/shared/props'
 
 export interface RadioGroupProps {
   disabled?: boolean

package/dist/components/rating/index.vue

@@ -59,8 +59,36 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+let activePointerId = null;
+let ratingRect = null;
+let lastClientX = null;
+const ratingRef = shallowRef();
+const hoverValue = shallowRef(null);
+const dragValue = shallowRef(null);
+const scheduleDragUpdate = throttleByRaf(() => {
+	if (lastClientX !== null) {
+		dragValue.value = getValueFromPosition(lastClientX);
+	}
+});
+const isDragging = shallowRef(false);
+const starCount = computed(() => Math.max(1, props.count));
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
+const displayValue = computed(() => dragValue.value ?? hoverValue.value ?? modelValue.value);
+const fills = computed(() => {
+	const value = displayValue.value;
+	const result = [];
+	for (let i = 0; i < starCount.value; i++) {
+		if (i + 1 <= value) {
+			result.push(1);
+		} else if (props.allowHalf && i + .5 <= value) {
+			result.push(.5);
+		} else {
+			result.push(0);
+		}
+	}
+	return result;
+});
 const { attrs, classes } = useTailwindVariant({
 	base: "pxd-rating inline-flex cursor-pointer touch-none items-center rounded-sm self-focus-ring select-none",
 	variants: {
@@ -80,29 +108,6 @@ const { attrs, classes } = useTailwindVariant({
 		readonly
 	};
 } });
-const ratingRef = shallowRef();
-const hoverValue = shallowRef(null);
-const dragValue = shallowRef(null);
-const isDragging = shallowRef(false);
-let activePointerId = null;
-let ratingRect = null;
-let lastClientX = null;
-const displayValue = computed(() => dragValue.value ?? hoverValue.value ?? modelValue.value);
-const starCount = computed(() => Math.max(1, props.count));
-const fills = computed(() => {
-	const value = displayValue.value;
-	const result = [];
-	for (let i = 0; i < starCount.value; i++) {
-		if (i + 1 <= value) {
-			result.push(1);
-		} else if (props.allowHalf && i + .5 <= value) {
-			result.push(.5);
-		} else {
-			result.push(0);
-		}
-	}
-	return result;
-});
 function getValueFromPosition(clientX) {
 	if (!ratingRef.value) {
 		return 0;
@@ -137,11 +142,6 @@ function resetDragging() {
 function isActivePointer(event) {
 	return isDragging.value && event.pointerId === activePointerId;
 }
-const scheduleDragUpdate = throttleByRaf(() => {
-	if (lastClientX !== null) {
-		dragValue.value = getValueFromPosition(lastClientX);
-	}
-});
 function handlePointerDown(event) {
 	if (props.readonly || props.disabled || !ratingRef.value) {
 		return;

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

@@ -1,4 +1,4 @@
-import type { ComponentSize } from '../../types/shared'
+import type { ComponentSize } from '../../types/shared/props'
 
 export interface RatingProps {
   modelValue?: number

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

@@ -22,6 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<ResizableProps, {
     "onUpdate:modelValue"?: ((args_0: number[]) => any) | undefined;
     onReset?: ((args_0: number[]) => any) | undefined;
 }>, {
+    unit: "percent" | "px";
     disabled: boolean;
     modelValue: number[] | null;
     defaultValue: number[];