pxd 0.1.2 → 0.1.3

package/dist/components/drawer/index.vue

@@ -1,10 +1,12 @@
 <script setup>
+import CrossIcon from "@gdsicon/vue/cross";
 import { computed, shallowRef, watch } from "vue";
 import { useModelValue } from "../../composables/_internal/use-model-value.js";
 import { useOverlayDialog } from "../../composables/_internal/use-overlay-dialog.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
 import { getCssUnitValue } from "../../utils/format.js";
 import PLoadingMask from "../_internal/loading-mask.vue";
+import PButton from "../button/index.vue";
 import POverlay from "../overlay/index.vue";
 defineOptions({
 	name: "PDrawer",
@@ -49,11 +51,6 @@ const props = defineProps({
 		type: String,
 		required: false
 	},
-	appendToBody: {
-		type: Boolean,
-		required: false,
-		default: true
-	},
 	wrapperClass: {
 		type: [
 			String,
@@ -94,6 +91,11 @@ const props = defineProps({
 		type: Boolean,
 		required: false,
 		default: true
+	},
+	closeable: {
+		type: Boolean,
+		required: false,
+		default: false
 	}
 });
 const emits = defineEmits([
@@ -105,8 +107,6 @@ const emits = defineEmits([
 	"update:modelValue"
 ]);
 const drawerRef = shallowRef();
-const isVisible = useModelValue(props, emits);
-const configProvider = useConfigProvider();
 const ensurePosition = computed(() => {
 	const { position } = props;
 	if ([
@@ -123,6 +123,13 @@ const defaultStyles = computed(() => ({
 	headerClass: props.defaultHeaderStyle ? "pbe-4 sm:pbe-6 border-b bg-background-200 dark:bg-background-100" : "",
 	footerClass: props.defaultFooterStyle ? "border-t pbs-4 bg-background-200 dark:bg-background-100" : ""
 }));
+const transitionName = computed(() => `pxd-transition--drawer-${ensurePosition.value}`);
+const computedStyle = computed(() => ({
+	"--modal-index": props.zIndex,
+	"--drawer-size": getCssUnitValue(props.size)
+}));
+const isVisible = useModelValue(props, emits);
+const configProvider = useConfigProvider();
 const { closeOverlayIfNeed, onOverlayClick } = useOverlayDialog({
 	props,
 	emits,
@@ -131,11 +138,6 @@ const { closeOverlayIfNeed, onOverlayClick } = useOverlayDialog({
 		isVisible.value = false;
 	}
 });
-const transitionName = computed(() => `pxd-transition--drawer-${ensurePosition.value}`);
-const computedStyle = computed(() => ({
-	"--modal-index": props.zIndex,
-	"--drawer-size": getCssUnitValue(props.size)
-}));
 watch(() => isVisible.value, (visible) => {
 	emits("visible-change", visible);
 	if (visible) {
@@ -149,7 +151,7 @@ watch(() => isVisible.value, (visible) => {
 <template>
   <POverlay
     :model-value="isVisible"
-    :append-to-body="appendToBody"
+    :z-index="zIndex"
     :close-on-press-escape="closeOnPressEscape"
     @escape="closeOverlayIfNeed"
     @click="onOverlayClick"
@@ -177,8 +179,8 @@ watch(() => isVisible.value, (visible) => {
         v-bind="$attrs"
       >
         <header
-          class="pxd-drawer--header px-6 pbs-4 sm:pbs-6 empty:py-3 relative shrink-0"
-          :class="defaultStyles.headerClass"
+          class="pxd-drawer--header px-6 pbs-4 sm:pbs-6 relative shrink-0 empty:hidden"
+          :class="[defaultStyles.headerClass, { 'pe-15': closeable }]"
         >
           <slot name="header">
             <h3
@@ -196,6 +198,19 @@ watch(() => isVisible.value, (visible) => {
               </slot>
             </div>
           </slot>
+
+          <PButton
+            v-if="closeable"
+            variant="ghost"
+            size="sm"
+            icon
+            class="top-4 right-6 sm:top-6 size-7 absolute"
+            :aria-label="configProvider.locale.interaction.close"
+            :title="configProvider.locale.interaction.close"
+            @click="closeOverlayIfNeed"
+          >
+            <CrossIcon class="size-3" aria-hidden="true" />
+          </PButton>
         </header>
 
         <div

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

@@ -1,4 +1,4 @@
-import type { BasePosition, ComponentClass, ComponentLabel } from '../../types/shared'
+import type { BasePosition, ComponentClass, ComponentLabel } from '../../types/shared/props'
 
 export interface DrawerProps {
   zIndex?: number
@@ -9,7 +9,6 @@ export interface DrawerProps {
   position?: BasePosition
   modelValue?: boolean
   loadingText?: string
-  appendToBody?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   autoFocusElement?: string | boolean
@@ -17,6 +16,7 @@ export interface DrawerProps {
   defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
+  closeable?: boolean
 }
 
 export interface DrawerEmits {

package/dist/components/effort-slider/index.vue

@@ -4,6 +4,7 @@ import { useModelValue } from "../../composables/_internal/use-model-value.js";
 import { createTailwindVariant, useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
 import { cachedOn, off, once, throttleByRaf } from "../../utils/event.js";
+import { getColorByThreshold } from "../../utils/helper.js";
 defineOptions({
 	name: "PEffortSlider",
 	inheritAttrs: false,
@@ -139,21 +140,14 @@ const tickList = computed(() => {
 		};
 	});
 });
-const fillStyle = computed(() => {
-	const colors = props.colors;
-	let color = PRIMARY_COLOR;
-	for (let level = currentIndex.value; colors && level >= 0; level--) {
-		const candidate = colors[String(level)];
-		if (candidate) {
-			color = candidate;
-			break;
-		}
-	}
-	return {
-		width: `${percentage.value}%`,
-		background: color
-	};
-});
+const fillColor = computed(() => getColorByThreshold(currentIndex.value, {
+	0: PRIMARY_COLOR,
+	...props.colors
+}));
+const fillStyle = computed(() => ({
+	backgroundColor: fillColor.value,
+	clipPath: `inset(0 ${100 - percentage.value}% 0 0)`
+}));
 function setValue(index) {
 	const option = optionList.value[index];
 	if (!option) {
@@ -301,15 +295,15 @@ onBeforeUnmount(() => {
       @pointerdown.prevent="onTrackPointerdown"
     >
       <div
-        class="pxd-effort-slider--fill inset-y-0 left-0 pointer-events-none absolute rounded-full motion-safe:transition-[width]"
-        :class="{ 'motion-safe:transition-none': dragging || focused }"
+        class="pxd-effort-slider--fill inset-0 pointer-events-none absolute rounded-full motion-safe:transition-[clip-path,background-color]"
+        :class="{ 'motion-safe:transition-colors': dragging || focused }"
         :style="fillStyle"
       />
 
       <span
         v-for="tick in tickList"
         :key="tick.level"
-        class="pxd-effort-slider--tick size-1 pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-500"
+        class="pxd-effort-slider--tick size-1 pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-alpha-200"
         :style="{ left: `${tick.percentage}%` }"
       />
 

package/dist/components/effort-slider/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentOption } from '../../types/shared'
+import type { ComponentSize, ComponentOption } from '../../types/shared/props'
 
 export interface EffortSliderProps {
   options: Array<ComponentOption | string>

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

@@ -7,9 +7,9 @@ declare const __VLS_export: import("vue").DefineComponent<EllipsisTextProps, {
 }, string, import("vue").PublicProps, Readonly<EllipsisTextProps> & Readonly<{
     onToggle?: ((expanded: boolean) => any) | undefined;
 }>, {
-    rows: number;
-    position: "start" | "middle" | "end";
+    position: "start" | "end" | "middle";
     dots: string;
+    rows: number;
     moreText: string;
     lessText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/ellipsis-text/index.vue

@@ -65,6 +65,80 @@ const maxRows = computed(() => {
 	const rows = Number(props.rows ?? 1);
 	return Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : 1;
 });
+const updateEllipsis = scheduleByRaf(async () => {
+	if (isServer()) {
+		return;
+	}
+	const container = containerRef.value;
+	if (!container || !container.isConnected) {
+		return;
+	}
+	await nextTick();
+	const sourceText = props.text ?? "";
+	if (container.clientWidth <= 0) {
+		ellipsisText.value = sourceText;
+		isOverflow.value = false;
+		return;
+	}
+	if (isExpanded.value || !sourceText) {
+		ellipsisText.value = sourceText;
+		return;
+	}
+	const style = getStyle(textRef.value ?? container);
+	const lineHeight = getLineHeightPx(style);
+	if (lineHeight <= 0) {
+		ellipsisText.value = sourceText;
+		isOverflow.value = false;
+		return;
+	}
+	const availableWidth = getAvailableWidth(container);
+	const textFont = getFontShorthand(style);
+	if (measureLineCount(sourceText, textFont, availableWidth) <= maxRows.value) {
+		ellipsisText.value = sourceText;
+		isOverflow.value = false;
+		return;
+	}
+	isOverflow.value = true;
+	const actionText = props.action ? props.moreText : "";
+	const actionFont = actionRef.value ? getFontShorthand(getStyle(actionRef.value)) : textFont;
+	const dots = props.dots ?? "";
+	if (props.position === "end") {
+		const prepared = prepareWithSegments(sourceText, textFont);
+		const { lines } = layoutWithLines(prepared, availableWidth, lineHeight);
+		const baseText = lines.slice(0, maxRows.value).map((l) => l.text).join("");
+		const baseChars = [...baseText];
+		let low = 0;
+		let high = baseChars.length;
+		let best = "";
+		while (low <= high) {
+			const mid = Math.floor((low + high) / 2);
+			const candidate = `${joinChars(baseChars, 0, mid)}${dots}`;
+			if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
+				best = candidate;
+				low = mid + 1;
+			} else {
+				high = mid - 1;
+			}
+		}
+		ellipsisText.value = best || dots;
+		return;
+	}
+	const chars = [...sourceText];
+	let low = 0;
+	let high = chars.length;
+	let best = "";
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		const candidate = buildCandidate(chars, mid, dots, props.position);
+		if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
+			best = candidate;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+	ellipsisText.value = best || dots;
+});
 const computedActionClass = computed(() => {
 	return cn("pxd-ellipsis-text--action cursor-pointer whitespace-nowrap text-blue-900", isExpanded.value ? props.lessActionClass : props.moreActionClass);
 });
@@ -80,6 +154,7 @@ const displayText = computed(() => {
 		action: props.moreText
 	};
 });
+useResizeObserver(containerRef, updateEllipsis);
 function toggleAction() {
 	if (!props.action) {
 		return;
@@ -145,80 +220,6 @@ function buildCandidate(chars, keep, dots, position) {
 	const tailLen = keep - headLen;
 	return `${joinChars(chars, 0, headLen)}${dots}${joinChars(chars, chars.length - tailLen, chars.length)}`;
 }
-const updateEllipsis = scheduleByRaf(async () => {
-	if (isServer()) {
-		return;
-	}
-	const container = containerRef.value;
-	if (!container || !container.isConnected) {
-		return;
-	}
-	await nextTick();
-	const sourceText = props.text ?? "";
-	if (container.clientWidth <= 0) {
-		ellipsisText.value = sourceText;
-		isOverflow.value = false;
-		return;
-	}
-	if (isExpanded.value || !sourceText) {
-		ellipsisText.value = sourceText;
-		return;
-	}
-	const style = getStyle(textRef.value ?? container);
-	const lineHeight = getLineHeightPx(style);
-	if (lineHeight <= 0) {
-		ellipsisText.value = sourceText;
-		isOverflow.value = false;
-		return;
-	}
-	const availableWidth = getAvailableWidth(container);
-	const textFont = getFontShorthand(style);
-	if (measureLineCount(sourceText, textFont, availableWidth) <= maxRows.value) {
-		ellipsisText.value = sourceText;
-		isOverflow.value = false;
-		return;
-	}
-	isOverflow.value = true;
-	const actionText = props.action ? props.moreText : "";
-	const actionFont = actionRef.value ? getFontShorthand(getStyle(actionRef.value)) : textFont;
-	const dots = props.dots ?? "";
-	if (props.position === "end") {
-		const prepared = prepareWithSegments(sourceText, textFont);
-		const { lines } = layoutWithLines(prepared, availableWidth, lineHeight);
-		const baseText = lines.slice(0, maxRows.value).map((l) => l.text).join("");
-		const baseChars = [...baseText];
-		let low = 0;
-		let high = baseChars.length;
-		let best = "";
-		while (low <= high) {
-			const mid = Math.floor((low + high) / 2);
-			const candidate = `${joinChars(baseChars, 0, mid)}${dots}`;
-			if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
-				best = candidate;
-				low = mid + 1;
-			} else {
-				high = mid - 1;
-			}
-		}
-		ellipsisText.value = best || dots;
-		return;
-	}
-	const chars = [...sourceText];
-	let low = 0;
-	let high = chars.length;
-	let best = "";
-	while (low <= high) {
-		const mid = Math.floor((low + high) / 2);
-		const candidate = buildCandidate(chars, mid, dots, props.position);
-		if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
-			best = candidate;
-			low = mid + 1;
-		} else {
-			high = mid - 1;
-		}
-	}
-	ellipsisText.value = best || dots;
-});
 watch(() => [
 	props.text,
 	props.rows,
@@ -236,7 +237,6 @@ watch(() => [
 	immediate: true,
 	flush: "post"
 });
-useResizeObserver(containerRef, updateEllipsis);
 onBeforeUnmount(() => {
 	updateEllipsis.cancel();
 });

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared/props'
 
 export interface ErrorType {
   link?: string

package/dist/components/fader/index.vue

@@ -27,14 +27,14 @@ const props = defineProps({
 		default: "both"
 	}
 });
+const DEFAULT_SIZE = 16;
+const DIFF_THRESHOLD = 16;
 const fader = shallowRef({
 	top: false,
 	left: false,
 	right: false,
 	bottom: false
 });
-const DEFAULT_SIZE = 16;
-const DIFF_THRESHOLD = 16;
 const computedStyle = computed(() => ({
 	"--fader-color": props.color,
 	"--fader-size": getCssUnitValue(props.size)

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

@@ -1,4 +1,4 @@
-import type { ComponentDirection } from '../../types/shared'
+import type { ComponentDirection } from '../../types/shared/props'
 import type { ComponentPublicInstance } from 'vue'
 
 export interface FaderProps {

package/dist/components/gauge/index.vue

@@ -52,8 +52,6 @@ const defaultColors = {
 	30: "var(--color-amber-800)",
 	60: "var(--color-green-700)"
 };
-const configProvider = useConfigProvider();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const progress = computed(() => {
 	if (props.indeterminate) {
 		return 0;
@@ -117,6 +115,8 @@ const progressColors = computed(() => {
 		secondary: secondaryColor
 	};
 });
+const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-import type { ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentSizeWithXs } from '../../types/shared/props'
 
 export interface GaugeProps {
   modelValue?: number | null

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

@@ -1,4 +1,4 @@
-import type { ResponsiveValue } from '../../types/shared'
+import type { ResponsiveValue } from '../../types/shared/props'
 
 export interface GridProps {
   debug?: boolean

package/dist/components/grid-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { ResponsiveValue } from '../../types/shared'
+import type { ResponsiveValue } from '../../types/shared/props'
 
 export interface GridItemProps {
   row?: ResponsiveValue<string | number>

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

@@ -0,0 +1,32 @@
+import type { HintProps, HintStatus } from './types';
+declare var __VLS_10: {
+    status: HintStatus;
+}, __VLS_13: {
+    status: HintStatus;
+    value: unknown;
+    error: unknown;
+    activeTrigger: HTMLElement | null;
+    activeTriggerIndex: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    content?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HintProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<HintProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    duration: number;
+    pauseOnHover: boolean;
+    position: import("../../types/shared/props.js").ComponentPosition;
+}, {}, {}, {}, 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;
+    };
+};