pxd 0.0.64 → 0.1.3

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

@@ -1,27 +1,41 @@
 <script setup>
-import { provideRadioGroupContext } from "../../contexts/radio";
-import { getUniqueId } from "../../utils/uid";
+import { provideRadioGroupContext } from "../../contexts/radio.js";
+import { getUniqueId } from "../../utils/helper.js";
 import PRadio from "../radio/index.vue";
 import PStack from "../stack/index.vue";
 defineOptions({
-  name: "PRadioGroup",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PRadioGroup",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Boolean], required: false },
-  options: { type: Array, required: false }
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [String, Number],
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-provideRadioGroupContext({ props, emits, name: getUniqueId() });
+provideRadioGroupContext({
+	props,
+	emits,
+	name: getUniqueId()
+});
 </script>
 
 <template>
   <PStack
+    data-radio-group
     class="pxd-radio-group"
     role="radiogroup"
     aria-label="Radio Group"

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.d.vue.ts

@@ -0,0 +1,17 @@
+import type { RatingProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<RatingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: number) => any;
+    "update:modelValue": (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<RatingProps> & Readonly<{
+    onChange?: ((args_0: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
+}>, {
+    count: number;
+    disabled: boolean;
+    modelValue: number;
+    readonly: boolean;
+    clearable: boolean;
+    allowHalf: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/rating/index.vue

@@ -0,0 +1,253 @@
+<script setup>
+import StarIcon from "@gdsicon/vue/star";
+import StarFillIcon from "@gdsicon/vue/star-fill";
+import { computed, onBeforeUnmount, shallowRef } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { cachedOff, cachedOn, throttleByRaf } from "../../utils/event.js";
+defineOptions({
+	name: "PRating",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	modelValue: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	count: {
+		type: Number,
+		required: false,
+		default: 5
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	color: {
+		type: String,
+		required: false
+	},
+	voidColor: {
+		type: String,
+		required: false
+	},
+	allowHalf: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	readonly: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	clearable: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
+});
+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: {
+		size: {
+			sm: "text-sm",
+			md: "text-base",
+			lg: "text-xl"
+		},
+		disabled: { true: "cursor-not-allowed" },
+		readonly: { true: "cursor-default" }
+	}
+}, { selection: () => {
+	const { size, disabled, readonly } = props;
+	return {
+		size: size || configProvider.size,
+		disabled,
+		readonly
+	};
+} });
+function getValueFromPosition(clientX) {
+	if (!ratingRef.value) {
+		return 0;
+	}
+	const rect = ratingRect ?? ratingRef.value.getBoundingClientRect();
+	if (!rect.width) {
+		return 0;
+	}
+	const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+	const rawValue = position * starCount.value;
+	const step = props.allowHalf ? .5 : 1;
+	return Math.max(step, Math.ceil(rawValue / step) * step);
+}
+function commitValue(value) {
+	if (props.clearable && value === modelValue.value) {
+		modelValue.value = 0;
+	} else {
+		modelValue.value = value;
+	}
+}
+function resetDragging() {
+	isDragging.value = false;
+	activePointerId = null;
+	ratingRect = null;
+	lastClientX = null;
+	dragValue.value = null;
+	scheduleDragUpdate.cancel();
+	cachedOff(document, "pointermove", handleDocumentPointerMove, { passive: false });
+	cachedOff(document, "pointerup", handleDocumentPointerUp);
+	cachedOff(document, "pointercancel", handleDocumentPointerCancel);
+}
+function isActivePointer(event) {
+	return isDragging.value && event.pointerId === activePointerId;
+}
+function handlePointerDown(event) {
+	if (props.readonly || props.disabled || !ratingRef.value) {
+		return;
+	}
+	isDragging.value = true;
+	activePointerId = event.pointerId;
+	ratingRect = ratingRef.value.getBoundingClientRect();
+	lastClientX = event.clientX;
+	hoverValue.value = null;
+	dragValue.value = getValueFromPosition(event.clientX);
+	cachedOn(document, "pointermove", handleDocumentPointerMove, { passive: false });
+	cachedOn(document, "pointerup", handleDocumentPointerUp);
+	cachedOn(document, "pointercancel", handleDocumentPointerCancel);
+}
+function handleDocumentPointerMove(event) {
+	if (!isActivePointer(event)) {
+		return;
+	}
+	event.preventDefault();
+	lastClientX = event.clientX;
+	scheduleDragUpdate();
+}
+function handleDocumentPointerUp(event) {
+	if (!isActivePointer(event)) {
+		return;
+	}
+	commitValue(getValueFromPosition(event.clientX));
+	resetDragging();
+}
+function handleDocumentPointerCancel(event) {
+	if (!isActivePointer(event)) {
+		return;
+	}
+	resetDragging();
+}
+function handlePointerMove(event) {
+	if (props.readonly || props.disabled || isDragging.value || event.pointerType !== "mouse") {
+		return;
+	}
+	hoverValue.value = getValueFromPosition(event.clientX);
+}
+function handlePointerLeave() {
+	if (isDragging.value) {
+		return;
+	}
+	hoverValue.value = null;
+}
+function handleKeydown(event) {
+	if (props.readonly || props.disabled) {
+		return;
+	}
+	const { key } = event;
+	const step = props.allowHalf ? .5 : 1;
+	if (key === "ArrowRight" || key === "ArrowUp") {
+		event.preventDefault();
+		modelValue.value = Math.min(starCount.value, modelValue.value + step);
+	} else if (key === "ArrowLeft" || key === "ArrowDown") {
+		event.preventDefault();
+		modelValue.value = Math.max(0, modelValue.value - step);
+	}
+}
+onBeforeUnmount(() => {
+	resetDragging();
+});
+</script>
+
+<template>
+  <div
+    data-rating
+    ref="ratingRef"
+    role="radiogroup"
+    tabindex="0"
+    :class="classes"
+    v-bind="attrs"
+    @keydown="handleKeydown"
+    @pointerdown.prevent="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerleave="handlePointerLeave"
+  >
+    <span
+      v-for="i in starCount"
+      :key="i"
+      class="pxd-rating--item relative inline-flex"
+      role="radio"
+      :aria-checked="i <= modelValue"
+      :aria-posinset="i"
+      :aria-setsize="starCount"
+      tabindex="-1"
+    >
+      <span
+        class="pxd-rating--star-empty inline-flex text-gray-400 text-trim-both"
+        :style="{ color: voidColor }"
+      >
+        <StarIcon />
+      </span>
+
+      <span
+        class="pxd-rating--star-filled inset-0 absolute inline-flex text-trim-both"
+        :class="disabled ? 'text-gray-500' : 'text-primary'"
+        :style="{
+  clipPath: `inset(0 ${(1 - fills[i - 1]) * 100}% 0 0)`,
+  color
+}"
+      >
+        <StarFillIcon />
+      </span>
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+import type { ComponentSize } from '../../types/shared/props'
+
+export interface RatingProps {
+  modelValue?: number
+  count?: number
+  size?: ComponentSize
+  color?: string
+  voidColor?: string
+  allowHalf?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  clearable?: boolean
+}
+
+export interface RatingEmits {
+  change: [NonNullable<RatingProps['modelValue']>]
+  'update:modelValue': [NonNullable<RatingProps['modelValue']>]
+}

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

@@ -0,0 +1,16 @@
+import type { ReasoningProps } from './types';
+declare var __VLS_17: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ReasoningProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReasoningProps> & Readonly<{}>, {
+    streaming: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/reasoning/index.vue

@@ -0,0 +1,68 @@
+<script setup>
+import BrainIcon from "@gdsicon/vue/brain";
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import { shallowRef, watch } from "vue";
+import { useCollapseMotion } from "../../composables/_internal/use-collapse-motion.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PShimmerText from "../shimmer-text/index.vue";
+defineOptions({
+	name: "PReasoning",
+	inheritAttrs: false
+});
+const props = defineProps({ streaming: {
+	type: Boolean,
+	required: false,
+	default: true
+} });
+const isOpen = shallowRef(!!props.streaming);
+const contentRef = shallowRef();
+const configProvider = useConfigProvider();
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isOpen);
+function onToggleClick() {
+	isOpen.value = !isOpen.value;
+}
+function onDetailsToggle(ev) {
+	const details = ev.currentTarget;
+	if (details.open && !isOpen.value) {
+		skipEnterMotion();
+		isOpen.value = true;
+	}
+}
+watch(() => props.streaming, (streaming) => {
+	isOpen.value = !!streaming;
+});
+</script>
+
+<template>
+  <details
+    data-reasoning
+    class="pxd-reasoning w-full max-w-full"
+    v-bind="$attrs"
+    :open="detailsOpen"
+    @toggle="onDetailsToggle"
+  >
+    <summary
+      class="pxd-reasoning--trigger group gap-1.5 text-sm flex w-full cursor-pointer touch-manipulation list-none appearance-none items-center text-foreground-secondary self-focus-ring outline-none select-none hover:text-foreground motion-safe:transition-colors"
+      @click.prevent="onToggleClick"
+    >
+      <BrainIcon class="text-xs shrink-0" />
+
+      <PShimmerText class="pxd-reasoning--title" :disabled="!streaming">
+        {{ configProvider.locale.reasoning[streaming ? "thinking" : "thought"] }}
+      </PShimmerText>
+
+      <ChevronRightIcon
+        class="text-xs shrink-0 opacity-0 group-hover:opacity-100 motion-safe:transition-transform-opacity"
+        :class="{ 'rotate-90 opacity-100': isOpen }"
+      />
+    </summary>
+
+    <div
+      ref="contentRef"
+      class="pxd-reasoning--content mbs-1.5 text-sm ms-1.5 ps-3 overflow-hidden border-l text-foreground-secondary"
+      :class="{ 'motion-safe:transition-[height]': isOpen || isLeaving }"
+    >
+      <slot />
+    </div>
+  </details>
+</template>

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

@@ -0,0 +1,3 @@
+export interface ReasoningProps {
+  streaming?: boolean
+}

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

@@ -1,10 +1,34 @@
 import type { ResizableProps } from './types';
-declare var __VLS_1: {};
+declare function reset(): void;
+declare var __VLS_1: {
+    size: number;
+}, __VLS_3: {
+    size: number;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    trailing?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ResizableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResizableProps> & Readonly<{}>, {
-    direction: import("../../types/shared").ComponentDirection;
+declare const __VLS_base: import("vue").DefineComponent<ResizableProps, {
+    getPanelSizes: () => number[];
+    reset: typeof reset;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: number[]) => any;
+    "update:modelValue": (args_0: number[]) => any;
+    reset: (args_0: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<ResizableProps> & Readonly<{
+    onChange?: ((args_0: number[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: number[]) => any) | undefined;
+    onReset?: ((args_0: number[]) => any) | undefined;
+}>, {
+    unit: "percent" | "px";
+    disabled: boolean;
+    modelValue: number[] | null;
+    defaultValue: number[];
+    direction: import("../../types/shared/props.js").ComponentDirection;
+    minSize: number[];
+    handle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;