pxd 0.0.64 → 0.1.3

package/dist/components/drawer/index.vue

@@ -1,89 +1,157 @@
 <script setup>
+import CrossIcon from "@gdsicon/vue/cross";
 import { computed, shallowRef, watch } from "vue";
-import { useFocusTrap } from "../../composables/use-focus-trap";
-import { useModelValue } from "../../composables/use-model-value";
-import { getCssUnitValue, isTruthyProp } from "../../utils/format";
+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",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PDrawer",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  zIndex: { type: Number, required: false },
-  title: { type: [String, Number, Array, null], required: false },
-  subtitle: { type: [String, Number, Array, null], required: false },
-  size: { type: [Number, String], required: false },
-  loading: { type: Boolean, required: false },
-  position: { type: String, required: false, default: "right" },
-  modelValue: { type: Boolean, required: false, default: false },
-  appendToBody: { type: Boolean, required: false, default: true },
-  wrapperClass: { type: [String, Array, Object], required: false },
-  contentClass: { type: [String, Array, Object], required: false },
-  autoFocusElement: { type: [String, Boolean], required: false, default: false },
-  defaultHeaderStyle: { type: Boolean, required: false, default: false },
-  defaultFooterStyle: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false, default: true }
+	zIndex: {
+		type: Number,
+		required: false
+	},
+	title: {
+		type: null,
+		required: false
+	},
+	subtitle: {
+		type: null,
+		required: false
+	},
+	size: {
+		type: [Number, String],
+		required: false
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	position: {
+		type: String,
+		required: false,
+		default: "right"
+	},
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	loadingText: {
+		type: String,
+		required: false
+	},
+	wrapperClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	autoFocusElement: {
+		type: [String, Boolean],
+		required: false,
+		default: false
+	},
+	defaultHeaderStyle: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	defaultFooterStyle: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnClickOverlay: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeable: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
-const emits = defineEmits(["show", "hide", "change", "outside-click", "visible-change", "update:modelValue"]);
+const emits = defineEmits([
+	"show",
+	"hide",
+	"change",
+	"outside-click",
+	"visible-change",
+	"update:modelValue"
+]);
 const drawerRef = shallowRef();
-const isVisible = useModelValue(props, emits);
 const ensurePosition = computed(() => {
-  const { position } = props;
-  if (["top", "bottom", "left", "right"].includes(position)) {
-    return position;
-  }
-  return "right";
+	const { position } = props;
+	if ([
+		"top",
+		"bottom",
+		"left",
+		"right"
+	].includes(position)) {
+		return position;
+	}
+	return "right";
 });
 const defaultStyles = computed(() => ({
-  headerClass: props.defaultHeaderStyle ? "pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100" : "",
-  footerClass: props.defaultFooterStyle ? "border-t pt-4 bg-background-200 dark:bg-background-100" : ""
+	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 focusTrapOptions = computed(() => ({
-  autoFocusElement: props.autoFocusElement,
-  escapeDeactivates: props.closeOnPressEscape,
-  clickOutsideDeactivates: props.closeOnClickOverlay
+	"--modal-index": props.zIndex,
+	"--drawer-size": getCssUnitValue(props.size)
 }));
-useFocusTrap(drawerRef, focusTrapOptions);
-function closeOverlayIfNeed() {
-  if (isTruthyProp(props.loading)) {
-    return;
-  }
-  isVisible.value = false;
-}
-function onOverlayClick(ev) {
-  emits("outside-click", ev);
-  if (!isTruthyProp(props.closeOnClickOverlay)) {
-    return;
-  }
-  closeOverlayIfNeed();
-}
-watch(
-  () => isVisible.value,
-  (visible) => {
-    emits("visible-change", visible);
-    if (visible) {
-      emits("show");
-      return;
-    }
-    emits("hide");
-  }
-);
+const isVisible = useModelValue(props, emits);
+const configProvider = useConfigProvider();
+const { closeOverlayIfNeed, onOverlayClick } = useOverlayDialog({
+	props,
+	emits,
+	elementRef: drawerRef,
+	onClose: () => {
+		isVisible.value = false;
+	}
+});
+watch(() => isVisible.value, (visible) => {
+	emits("visible-change", visible);
+	if (visible) {
+		emits("show");
+		return;
+	}
+	emits("hide");
+});
 </script>
 
 <template>
   <POverlay
     :model-value="isVisible"
-    :append-to-body="appendToBody"
+    :z-index="zIndex"
     :close-on-press-escape="closeOnPressEscape"
     @escape="closeOverlayIfNeed"
     @click="onOverlayClick"
@@ -95,6 +163,7 @@ watch(
       class="default-transition-duration default-transition-timing-function"
     >
       <div
+        data-drawer
         v-if="isVisible"
         ref="drawerRef"
         role="dialog"
@@ -105,11 +174,13 @@ watch(
         :class="wrapperClass"
         :style="computedStyle"
         :data-position="ensurePosition"
+        :data-enter-motion="configProvider.enterMotion"
+        :data-leave-motion="configProvider.leaveMotion"
         v-bind="$attrs"
       >
         <header
-          class="pxd-drawer--header px-6 pt-4 sm:pt-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
@@ -121,12 +192,25 @@ watch(
               </slot>
             </h3>
 
-            <div v-if="$slots.subtitle || subtitle" class="mt-4 text-sm text-muted-foreground">
+            <div v-if="$slots.subtitle || subtitle" class="mbs-4 text-sm text-muted-foreground">
               <slot name="subtitle">
                 {{ subtitle }}
               </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
@@ -138,11 +222,13 @@ watch(
 
         <footer
           v-if="$slots.footer"
-          class="pxd-drawer--footer px-4 pb-4 gap-2 relative flex shrink-0 items-center justify-between"
+          class="pxd-drawer--footer px-4 pbe-4 gap-2 relative flex shrink-0 items-center justify-between"
           :class="defaultStyles.footerClass"
         >
           <slot name="footer" />
         </footer>
+
+        <PLoadingMask v-if="loading" :text="loadingText" />
       </div>
     </Transition>
   </POverlay>

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
@@ -8,7 +8,7 @@ export interface DrawerProps {
   loading?: boolean
   position?: BasePosition
   modelValue?: boolean
-  appendToBody?: boolean
+  loadingText?: string
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   autoFocusElement?: string | boolean
@@ -16,6 +16,7 @@ export interface DrawerProps {
   defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
+  closeable?: boolean
 }
 
 export interface DrawerEmits {

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

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

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

@@ -0,0 +1,341 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+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,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const PRIMARY_COLOR = "var(--color-primary)";
+function clamp(value, lower, upper) {
+	return Math.min(Math.max(value, lower), upper);
+}
+const props = defineProps({
+	options: {
+		type: Array,
+		required: true
+	},
+	colors: {
+		type: Object,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			null
+		],
+		required: false
+	}
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits, { withChange: false });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-effort-slider--track group relative flex w-full max-w-full shrink-0 touch-none items-center rounded-full bg-gray-200 select-none",
+	variants: {
+		size: {
+			sm: "h-2",
+			md: "h-2.5",
+			lg: "h-3.5"
+		},
+		disabled: { true: "cursor-not-allowed" }
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	disabled: props.disabled
+}) });
+const thumbClasses = createTailwindVariant({
+	base: "pxd-effort-slider--thumb group rounded-xs absolute -translate-x-1/2 transform-gpu touch-none bg-none self-focus-ring outline-none motion-safe:before:transition-appearance",
+	variants: {
+		size: {
+			sm: "w-1.5 h-3.5",
+			md: "w-2 h-4.5",
+			lg: "w-2.5 h-5"
+		},
+		disabled: { true: "pointer-events-none" },
+		dragging: { false: "motion-safe:transition-[left]" }
+	}
+});
+let trackRect = null;
+let lastClientX = null;
+let dragStartValue = null;
+let lastUpdatedValue = null;
+let stopMoveListener = null;
+const trackRef = shallowRef();
+const thumbRef = shallowRef();
+const labelRef = shallowRef();
+const dragging = shallowRef(false);
+const focused = shallowRef(false);
+const dragPosition = shallowRef(null);
+const labelShift = shallowRef(0);
+const optionList = computed(() => props.options.map((option, index) => typeof option === "string" ? {
+	label: option,
+	value: option
+} : {
+	label: option.label,
+	value: option.value ?? index
+}));
+const levelCount = computed(() => optionList.value.length);
+const currentIndex = computed(() => {
+	const index = optionList.value.findIndex((option) => option.value === modelValue.value);
+	return index === -1 ? 0 : index;
+});
+const currentOptionLabel = computed(() => optionList.value[currentIndex.value]?.label);
+const percentage = computed(() => {
+	const count = levelCount.value;
+	const position = dragPosition.value;
+	// While dragging the thumb follows the pointer, otherwise it sits on its level.
+	if (position !== null) {
+		return position * 100;
+	}
+	return count > 1 ? currentIndex.value / (count - 1) * 100 : 100;
+});
+const labelVisible = computed(() => dragging.value || focused.value);
+// The label stays centred on the thumb and is clamped against the thumb box instead of
+// switching its alignment per level, so a label at either end lines up with the thumb edge.
+function updateLabelShift() {
+	const label = labelRef.value;
+	const thumb = thumbRef.value;
+	const track = trackRef.value;
+	if (!label || !thumb || !track) {
+		return;
+	}
+	const trackWidth = track.getBoundingClientRect().width;
+	const labelWidth = label.getBoundingClientRect().width;
+	const thumbWidth = thumb.getBoundingClientRect().width;
+	if (!trackWidth || !thumbWidth || labelWidth > trackWidth) {
+		labelShift.value = 0;
+		return;
+	}
+	const center = percentage.value / 100 * trackWidth;
+	const left = center - labelWidth / 2;
+	// The label may reach as far as the thumb box, so its edge lines up with the thumb at the ends.
+	const lower = -thumbWidth / 2;
+	const upper = trackWidth + thumbWidth / 2 - labelWidth;
+	labelShift.value = clamp(left, lower, Math.max(lower, upper)) - left;
+}
+const tickList = computed(() => {
+	const count = levelCount.value;
+	return Array.from({ length: Math.max(0, count - 2) }, (_, index) => {
+		const level = index + 1;
+		return {
+			level,
+			percentage: level / (count - 1) * 100
+		};
+	});
+});
+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) {
+		return null;
+	}
+	if (option.value !== modelValue.value) {
+		modelValue.value = option.value;
+	}
+	return option.value;
+}
+function relativePosition(clientX) {
+	const rect = trackRect ?? trackRef.value?.getBoundingClientRect();
+	if (!rect || !rect.width) {
+		return null;
+	}
+	return clamp((clientX - rect.left) / rect.width, 0, 1);
+}
+function nearestIndex(clientX) {
+	const position = relativePosition(clientX);
+	const count = levelCount.value;
+	if (position === null || count === 0) {
+		return currentIndex.value;
+	}
+	const raw = position * (count - 1);
+	const lower = Math.floor(raw);
+	return clamp(raw - lower > .5 ? lower + 1 : lower, 0, count - 1);
+}
+function updateFromPosition(clientX) {
+	const index = nearestIndex(clientX);
+	if (index === currentIndex.value) {
+		return;
+	}
+	// A controlled parent may hold the value back, so the settle check compares against
+	// what this drag emitted, not against `modelValue`.
+	lastUpdatedValue = setValue(index);
+}
+const scheduleUpdate = throttleByRaf(() => {
+	if (lastClientX !== null) {
+		updateFromPosition(lastClientX);
+	}
+});
+function onTrackPointerdown(ev) {
+	if (props.disabled || dragging.value) {
+		return;
+	}
+	trackRect = trackRef.value?.getBoundingClientRect() ?? null;
+	dragStartValue = modelValue.value ?? null;
+	lastUpdatedValue = null;
+	lastClientX = ev.clientX;
+	dragging.value = true;
+	dragPosition.value = relativePosition(ev.clientX);
+	updateFromPosition(ev.clientX);
+	stopMoveListener = cachedOn(document, "pointermove", handleMove, { passive: false });
+	once(document, "pointerup", endDragging);
+	once(document, "pointercancel", stopDragging);
+}
+function onThumbKeydown(ev) {
+	if (props.disabled) {
+		return;
+	}
+	const { code } = ev;
+	const count = levelCount.value;
+	let index = currentIndex.value;
+	if (code === "ArrowLeft" || code === "ArrowDown") {
+		index -= 1;
+	} else if (code === "ArrowRight" || code === "ArrowUp") {
+		index += 1;
+	} else if (code === "Home") {
+		index = 0;
+	} else if (code === "End") {
+		index = count - 1;
+	} else {
+		return;
+	}
+	ev.preventDefault();
+	const next = clamp(index, 0, count - 1);
+	if (next === currentIndex.value) {
+		return;
+	}
+	const value = setValue(next);
+	if (value !== null) {
+		emits("change", value);
+	}
+}
+function handleMove(ev) {
+	if (!dragging.value || props.disabled) {
+		return;
+	}
+	ev.preventDefault();
+	lastClientX = ev.clientX;
+	dragPosition.value = relativePosition(ev.clientX);
+	scheduleUpdate();
+}
+function endDragging(ev) {
+	lastClientX = ev.clientX;
+	updateFromPosition(ev.clientX);
+	if (lastUpdatedValue !== null && lastUpdatedValue !== dragStartValue) {
+		emits("change", lastUpdatedValue);
+	}
+	stopDragging();
+}
+function stopDragging() {
+	dragging.value = false;
+	dragPosition.value = null;
+	trackRect = null;
+	lastClientX = null;
+	dragStartValue = null;
+	lastUpdatedValue = null;
+	scheduleUpdate.cancel();
+	stopMoveListener?.();
+	stopMoveListener = null;
+	off(document, "pointerup", endDragging);
+	off(document, "pointercancel", stopDragging);
+}
+function initModelValue() {
+	const option = optionList.value[0];
+	if (!option) {
+		return;
+	}
+	const isValid = optionList.value.some((item) => item.value === props.modelValue);
+	if (!isValid) {
+		modelValue.value = option.value;
+	}
+}
+watch(() => [
+	percentage.value,
+	currentOptionLabel.value,
+	labelVisible.value
+], updateLabelShift, { flush: "post" });
+initModelValue();
+onMounted(() => {
+	updateLabelShift();
+});
+onBeforeUnmount(() => {
+	stopDragging();
+});
+</script>
+
+<template>
+  <div data-effort-slider v-bind="attrs" class="pxd-effort-slider w-full max-w-full shrink-0">
+    <div
+      ref="trackRef"
+      :class="classes"
+      :aria-disabled="disabled"
+      @pointerdown.prevent="onTrackPointerdown"
+    >
+      <div
+        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-alpha-200"
+        :style="{ left: `${tick.percentage}%` }"
+      />
+
+      <div
+        ref="thumbRef"
+        role="slider"
+        :tabindex="disabled ? -1 : 0"
+        :aria-valuemin="0"
+        :aria-valuemax="levelCount - 1"
+        :aria-valuenow="currentIndex"
+        :aria-valuetext="currentOptionLabel"
+        :data-dragging="dragging"
+        :class="thumbClasses({ size: size || configProvider.size, disabled, dragging })"
+        :style="{ left: `${percentage}%` }"
+        @keydown="onThumbKeydown"
+        @focus="focused = true"
+        @blur="focused = false"
+        @contextmenu.prevent
+      >
+        <span
+          ref="labelRef"
+          class="pxd-effort-slider--label py-1 px-1 text-xs -top-7 shadow-xl pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-sm border border-gray-alpha-300 bg-gray-1000 leading-none whitespace-nowrap text-gray-100 tabular-nums opacity-0 select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+          :class="{ 'opacity-100': dragging || focused }"
+          :style="{ translate: `calc(-50% + ${labelShift}px)` }"
+        >
+          {{ currentOptionLabel }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.pxd-effort-slider--thumb:active,.pxd-effort-slider--thumb[data-dragging=true]{--slider-thumb-scale:1.3;z-index:1}.pxd-effort-slider--thumb:after,.pxd-effort-slider--thumb:before{border-radius:inherit;content:"";left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) scale(var(--slider-thumb-scale,1))}.pxd-effort-slider--thumb:before{background-color:#fff;box-shadow:0 0 0 1px var(--color-gray-alpha-500),0 1px 2px var(--color-gray-alpha-100);height:100%;width:100%}.pxd-effort-slider--thumb:after{height:200%;width:200%}.dark .pxd-effort-slider--thumb:before{box-shadow:0 0 0 1px var(--color-background-200)}
+</style>

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

@@ -0,0 +1,14 @@
+import type { ComponentSize, ComponentOption } from '../../types/shared/props'
+
+export interface EffortSliderProps {
+  options: Array<ComponentOption | string>
+  colors?: Record<string, string>
+  disabled?: boolean
+  size?: ComponentSize
+  modelValue?: string | number | null
+}
+
+export interface EffortSliderEmits {
+  change: [string | number]
+  'update:modelValue': [string | number]
+}

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

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