pxd 0.0.64 → 0.1.3

package/dist/components/overlay/index.vue

@@ -1,120 +1,110 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
-import { useLockScroll } from "../../composables/use-lock-scroll";
-import { useOverlayManager } from "../../composables/use-overlay-manager";
-import { NOOP } from "../../utils/event";
-import { isServer } from "../../utils/is";
-import { unrefElement } from "../../utils/ref";
+import { computed, watch } from "vue";
+import { useLockScroll } from "../../composables/_internal/use-lock-scroll.js";
+import { useOverlayManager } from "../../composables/_internal/use-overlay-manager.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { NOOP } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
-  name: "POverlay",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "POverlay",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  zIndex: { type: Number, required: false },
-  variant: { type: String, required: false },
-  modelValue: { type: Boolean, required: false, default: false },
-  showOverlay: { type: Boolean, required: false, default: true },
-  appendToBody: { type: Boolean, required: false, default: true },
-  shownElement: { type: [String, Object], required: false },
-  closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false, default: false },
-  lockScrollOnVisible: { type: Boolean, required: false, default: true }
+	zIndex: {
+		type: Number,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false
+	},
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	showOverlay: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnClickOverlay: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	lockScrollOnVisible: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
-const emits = defineEmits(["click", "escape", "update:modelValue"]);
-const clipPath = shallowRef("");
-const computedStyle = computed(() => ({
-  "--overlay-index": props.zIndex,
-  "clip-path": clipPath.value
-}));
-let cacheShownElement = null;
-const { lockScroll, unlockScroll } = useLockScroll();
+const emits = defineEmits([
+	"click",
+	"escape",
+	"update:modelValue"
+]);
+const computedStyle = computed(() => ({ "--overlay-index": props.zIndex }));
+const configProvider = useConfigProvider();
+const { lockScroll, unlockScroll } = useLockScroll(() => document.body, { walkAncestors: true });
 const { registerOverlay, unregisterOverlay } = useOverlayManager({
-  enabled: () => props.modelValue,
-  lockScrollOnVisible: () => props.lockScrollOnVisible,
-  lockScroll,
-  unlockScroll,
-  onPressEscape: (ev) => {
-    emits("escape", ev);
-    if (!props.closeOnPressEscape) {
-      return;
-    }
-    emits("update:modelValue", false);
-  }
+	enabled: () => props.modelValue,
+	lockScrollOnVisible: () => props.lockScrollOnVisible,
+	lockScroll,
+	unlockScroll,
+	zIndex: () => props.zIndex,
+	onPressEscape: (ev) => {
+		if (!props.closeOnPressEscape) {
+			return false;
+		}
+		emits("escape", ev);
+		if (!ev.defaultPrevented) {
+			emits("update:modelValue", false);
+		}
+		return true;
+	}
 });
-function getShownElementClipPath(el) {
-  const { top, left, right, bottom } = el.getBoundingClientRect();
-  clipPath.value = `polygon(
-    0% 0%,
-    0% 100%,
-    ${left}px 100%,
-    ${left}px ${top}px,
-    ${right}px ${top}px,
-    ${right}px ${bottom}px,
-    ${left}px ${bottom}px,
-    ${left}px 100%,
-    100% 100%,
-    100% 0%
-  )`;
-}
-async function getShownElementIfNeed() {
-  const { shownElement, modelValue } = props;
-  if (!modelValue || !shownElement) {
-    toggleShownElementClasses();
-    clipPath.value = "";
-    return;
-  }
-  await nextTick();
-  const el = typeof shownElement === "string" ? document.querySelector(shownElement) : unrefElement(shownElement);
-  if (!el) {
-    return;
-  }
-  cacheShownElement = el;
-  getShownElementClipPath(el);
-  toggleShownElementClasses(true);
-}
-function toggleShownElementClasses(force = false) {
-  cacheShownElement?.classList.toggle("pointer-events-auto!", force);
-}
 function onOverlayVisibleChange(visible) {
-  if (isServer()) {
-    return;
-  }
-  if (visible) {
-    registerOverlay();
-    getShownElementIfNeed();
-    return;
-  }
-  unregisterOverlay();
-  toggleShownElementClasses();
+	if (isServer()) {
+		return;
+	}
+	if (visible) {
+		registerOverlay();
+		return;
+	}
+	unregisterOverlay();
 }
 function onOverlayClick(ev) {
-  emits("click", ev);
-  if (!props.closeOnClickOverlay) {
-    return;
-  }
-  emits("update:modelValue", false);
+	emits("click", ev);
+	if (!props.closeOnClickOverlay) {
+		return;
+	}
+	emits("update:modelValue", false);
 }
 watch(() => props.modelValue, onOverlayVisibleChange, { immediate: true });
-watch(() => props.shownElement, getShownElementIfNeed);
-onBeforeUnmount(() => {
-  toggleShownElementClasses();
-  cacheShownElement = null;
-});
 </script>
 
 <template>
-  <PTeleport :disabled="!appendToBody">
+  <PTeleport>
     <Transition name="pxd-transition--fade" mode="out-in" appear>
       <div
+        data-overlay
         v-if="showOverlay && modelValue"
         role="presentation"
         aria-hidden="true"
         :data-variant="variant"
+        :data-enter-motion="configProvider.enterMotion"
+        :data-leave-motion="configProvider.leaveMotion"
         class="pxd-overlay inset-0 bg-black/60 sm:bg-background-100/80 data-[variant='blurred']:backdrop-blur-sm pointer-events-auto fixed z-(--overlay-index) select-none data-[variant='transparent']:opacity-0 motion-safe:transition-colors"
         :style="computedStyle"
         v-bind="$attrs"

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

@@ -3,8 +3,6 @@ export interface OverlayProps {
   variant?: 'default' | 'blurred' | 'transparent'
   modelValue?: boolean
   showOverlay?: boolean
-  appendToBody?: boolean
-  shownElement?: string | object
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
   lockScrollOnVisible?: boolean

package/dist/components/page-number/index.d.vue.ts

@@ -0,0 +1,18 @@
+import type { PageNumberProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<PageNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (page: number) => any;
+    "update:pageSize": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<PageNumberProps> & Readonly<{
+    "onUpdate:modelValue"?: ((page: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((page: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: number;
+    pageSize: number;
+    total: number;
+    showPageSize: boolean;
+    showQuickJumper: boolean;
+    pageSizeOptions: number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/page-number/index.vue

@@ -0,0 +1,233 @@
+<script setup>
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import { computed, ref, watch } from "vue";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isCompositionKeydown } from "../../utils/event.js";
+import PSelect from "../select/index.vue";
+defineOptions({
+	name: "PPageNumber",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	modelValue: {
+		type: Number,
+		required: false,
+		default: 1
+	},
+	pageSize: {
+		type: Number,
+		required: false,
+		default: 10
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	total: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	showPageSize: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	showQuickJumper: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	pageSizeOptions: {
+		type: Array,
+		required: false,
+		default: () => [
+			10,
+			25,
+			50,
+			100
+		]
+	}
+});
+const emits = defineEmits(["update:pageSize", "update:modelValue"]);
+const pageInput = ref(String(props.modelValue));
+const internalPageSize = ref(props.pageSize);
+const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)));
+const pageItems = computed(() => {
+	if (pageCount.value <= 7) {
+		return Array.from({ length: pageCount.value }, (_, index) => index + 1);
+	}
+	if (props.modelValue <= 4) {
+		return [
+			1,
+			2,
+			3,
+			4,
+			5,
+			"ellipsis-right",
+			pageCount.value
+		];
+	}
+	if (props.modelValue >= pageCount.value - 3) {
+		return [
+			1,
+			"ellipsis-left",
+			pageCount.value - 4,
+			pageCount.value - 3,
+			pageCount.value - 2,
+			pageCount.value - 1,
+			pageCount.value
+		];
+	}
+	return [
+		1,
+		"ellipsis-left",
+		props.modelValue - 1,
+		props.modelValue,
+		props.modelValue + 1,
+		"ellipsis-right",
+		pageCount.value
+	];
+});
+const configProvider = useConfigProvider();
+const mappedPageSizeOptions = computed(() => {
+	const label = configProvider.locale.pagination.perPage;
+	return props.pageSizeOptions.map((size) => ({
+		label: String(size) + label,
+		value: size
+	}));
+});
+const pagesBtnSize = computed(() => {
+	const inheritSize = props.size || configProvider.size;
+	return {
+		sm: "xs",
+		md: "sm",
+		lg: "md"
+	}[inheritSize];
+});
+const pageItemSizeClass = computed(() => BASIC_HEIGHTS[pagesBtnSize.value]);
+function setPage(page) {
+	if (!props.disabled && page !== props.modelValue) {
+		emits("update:modelValue", page);
+	}
+}
+function submitPageInput() {
+	const page = Number(pageInput.value);
+	if (!Number.isInteger(page)) {
+		pageInput.value = String(props.modelValue);
+		return;
+	}
+	const nextPage = Math.min(Math.max(page, 1), pageCount.value);
+	pageInput.value = String(nextPage);
+	setPage(nextPage);
+}
+function onPageInputKeydown(event) {
+	if (event.key === "Enter" && !isCompositionKeydown(event)) {
+		submitPageInput();
+	}
+}
+function onPageSizeChange(value) {
+	emits("update:pageSize", Number(value));
+}
+watch(() => props.modelValue, (page) => {
+	pageInput.value = String(page);
+});
+watch(() => props.pageSize, (value) => {
+	internalPageSize.value = value;
+});
+</script>
+
+<template>
+  <nav
+    data-page-number
+    class="pxd-page-number gap-1 inline-flex w-full max-w-full items-center"
+    aria-label="Pagination"
+    :aria-disabled="disabled"
+    v-bind="$attrs"
+  >
+    <button
+      type="button"
+      class="pxd-page-number--prev inline-flex aspect-square items-center justify-center rounded-md border border-transparent self-focus-ring outline-none enabled:cursor-pointer enabled:hover:bg-background-hover enabled:hover:text-foreground enabled:active:bg-background-active disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+      :class="pageItemSizeClass"
+      :disabled="disabled || modelValue <= 1"
+      :aria-label="configProvider.locale.pagination.prev"
+      @click="setPage(modelValue - 1)"
+    >
+      <ChevronRightIcon class="size-4 rotate-180" aria-hidden="true" />
+    </button>
+
+    <template v-for="item in pageItems" :key="item">
+      <button
+        v-if="typeof item === 'string'"
+        class="pxd-page-number--ellipsis text-sm inline-flex aspect-square shrink-0 cursor-default items-center justify-center rounded-md disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+        :class="pageItemSizeClass"
+        :disabled="disabled"
+        aria-hidden="true"
+      >
+        …
+      </button>
+
+      <button
+        v-else
+        type="button"
+        class="pxd-page-number--item text-sm inline-flex aspect-square shrink-0 items-center justify-center rounded-md self-focus-ring outline-none enabled:cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+        :class="[
+  pageItemSizeClass,
+  item === modelValue ? 'font-medium bg-primary text-primary-foreground' : 'hover:bg-background-hover hover:text-foreground'
+]"
+        :aria-current="item === modelValue ? 'page' : void 0"
+        :aria-label="`Page ${item}`"
+        :disabled="disabled"
+        @click="setPage(item)"
+      >
+        {{ item }}
+      </button>
+    </template>
+
+    <PSelect
+      v-if="showPageSize"
+      v-model="internalPageSize"
+      :disabled="disabled"
+      :size="pagesBtnSize"
+      :options="mappedPageSizeOptions"
+      @change="onPageSizeChange"
+    />
+
+    <input
+      v-if="showQuickJumper"
+      v-model="pageInput"
+      type="number"
+      :class="pageItemSizeClass"
+      class="pxd-page-number--jumper w-16 px-3 text-sm appearance-none rounded-md border border-border bg-background-100 text-center text-left text-foreground self-focus-ring outline-none disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700"
+      :min="1"
+      :max="pageCount"
+      step="1"
+      inputmode="numeric"
+      :disabled="disabled"
+      aria-label="Jump to page"
+      @blur="submitPageInput"
+      @keydown="onPageInputKeydown"
+    />
+
+    <button
+      type="button"
+      class="pxd-page-number--next inline-flex aspect-square items-center justify-center rounded-md border border-transparent self-focus-ring outline-none enabled:cursor-pointer enabled:hover:bg-background-hover enabled:hover:text-foreground enabled:active:bg-background-active disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+      :class="pageItemSizeClass"
+      :disabled="disabled || modelValue >= pageCount"
+      :aria-label="configProvider.locale.pagination.next"
+      @click="setPage(modelValue + 1)"
+    >
+      <ChevronRightIcon class="size-4" aria-hidden="true" />
+    </button>
+  </nav>
+</template>

package/dist/components/page-number/types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentSize, ComponentOption } from '../../types/shared/props'
+
+export interface PageNumberProps {
+  /** page */
+  modelValue?: number
+  pageSize?: number
+  size?: ComponentSize
+  total?: number
+  disabled?: boolean
+  showPageSize?: boolean
+  showQuickJumper?: boolean
+  pageSizeOptions?: number[]
+}
+
+export interface PageNumberEmits {
+  'update:pageSize': [page: number]
+  'update:modelValue': [page: number]
+}

package/dist/components/pagination/index.vue

@@ -1,19 +1,26 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { useConfigProvider } from "../../contexts/config-provider";
+import { useConfigProvider } from "../../contexts/config-provider.js";
 defineOptions({
-  name: "PPagination",
-  inheritAttrs: false
+	name: "PPagination",
+	inheritAttrs: false
 });
 defineProps({
-  prev: { type: Object, required: false },
-  next: { type: Object, required: false }
+	prev: {
+		type: Object,
+		required: false
+	},
+	next: {
+		type: Object,
+		required: false
+	}
 });
 const configProvider = useConfigProvider();
 </script>
 
 <template>
   <nav
+    data-pagination
     aria-label="pagination"
     class="pxd-pagination relative flex w-full flex-wrap items-start justify-between"
     v-bind="$attrs"
@@ -21,7 +28,7 @@ const configProvider = useConfigProvider();
     <RouterLink
       v-if="prev"
       :to="prev.href"
-      class="pxd-pagination--prev min-h-13 group py-1 pr-2 pl-6 rounded-md no-underline! self-focus-ring outline-none"
+      class="pxd-pagination--prev min-h-13 group py-1 pe-2 ps-6 rounded-md no-underline! self-focus-ring outline-none"
     >
       <span
         secondary
@@ -43,7 +50,7 @@ const configProvider = useConfigProvider();
     <RouterLink
       v-if="next"
       :to="next.href"
-      class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md text-right no-underline! self-focus-ring outline-none"
+      class="pxd-pagination--next min-h-13 group py-1 ps-2 pe-6 rounded-md text-right no-underline! self-focus-ring outline-none"
     >
       <span
         secondary

package/dist/components/pin-input/index.d.vue.ts

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {
     onChange?: ((args_0: string) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
-    modelValue: string;
-    type: "numeric" | "alphabetic" | "alphanumeric" | "numeric-password" | "alphabetic-password" | "alphanumeric-password";
     length: number;
+    type: "numeric" | "alphabetic" | "alphanumeric" | "numeric-password" | "alphabetic-password" | "alphanumeric-password";
+    modelValue: string;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;