pxd 0.0.64 → 0.1.2

package/dist/components/intersection-observer/index.vue

@@ -1,64 +1,87 @@
 <script setup>
 import { nextTick, shallowRef } from "vue";
-import { useIntersectionObserver } from "../../composables/use-browser-observer";
-import { getCssUnitValue } from "../../utils/format";
+import { useIntersectionObserver } from "../../composables/use-intersection-observer.js";
+import { getCssUnitValue } from "../../utils/format.js";
 import FragmentContainer from "../_internal/fragment-container.vue";
 defineOptions({
-  name: "PIntersectionObserver",
-  inheritAttrs: false
+	name: "PIntersectionObserver",
+	inheritAttrs: false
 });
 const props = defineProps({
-  width: { type: [Number, String], required: false },
-  height: { type: [Number, String], required: false },
-  keepAlive: { type: Boolean, required: false },
-  root: { type: null, required: false },
-  rootMargin: { type: String, required: false, default: "20%" },
-  threshold: { type: [Number, Array], required: false, default: 0 }
+	width: {
+		type: [Number, String],
+		required: false
+	},
+	height: {
+		type: [Number, String],
+		required: false
+	},
+	keepAlive: {
+		type: Boolean,
+		required: false
+	},
+	root: {
+		type: null,
+		required: false
+	},
+	rootMargin: {
+		type: String,
+		required: false,
+		default: "20%"
+	},
+	threshold: {
+		type: [Number, Array],
+		required: false,
+		default: 0
+	}
 });
-const emits = defineEmits(["visible-change", "before-show", "before-hide", "show", "hide"]);
+const emits = defineEmits([
+	"visible-change",
+	"before-show",
+	"before-hide",
+	"show",
+	"hide"
+]);
 const isVisible = shallowRef(false);
 const containerRef = shallowRef();
 const containerSize = shallowRef({
-  "contain-intrinsic-size": `auto ${getCssUnitValue(props.height)}`,
-  "--slot-estimated-width": getCssUnitValue(props.width),
-  "--slot-estimated-height": getCssUnitValue(props.height)
+	"contain-intrinsic-size": `auto ${getCssUnitValue(props.height)}`,
+	"--slot-estimated-width": getCssUnitValue(props.width),
+	"--slot-estimated-height": getCssUnitValue(props.height)
 });
 function getRenderedSlotSize() {
-  const { offsetWidth, offsetHeight } = containerRef.value;
-  containerSize.value = {
-    "contain-intrinsic-size": `auto ${offsetHeight}px`,
-    "--slot-estimated-width": `${offsetWidth}px`,
-    "--slot-estimated-height": `${offsetHeight}px`
-  };
+	const { offsetWidth, offsetHeight } = containerRef.value;
+	containerSize.value = {
+		"contain-intrinsic-size": `auto ${offsetHeight}px`,
+		"--slot-estimated-width": `${offsetWidth}px`,
+		"--slot-estimated-height": `${offsetHeight}px`
+	};
 }
 function onVisibleChange(isIntersecting) {
-  if (isIntersecting && !isVisible.value) {
-    isVisible.value = true;
-    emits("before-show");
-    nextTick(() => {
-      emits("show");
-    });
-  } else if (!isIntersecting && isVisible.value) {
-    isVisible.value = false;
-    emits("before-hide");
-    getRenderedSlotSize();
-    nextTick(() => {
-      emits("hide");
-    });
-  }
-  emits("visible-change", isIntersecting);
+	if (isIntersecting && !isVisible.value) {
+		isVisible.value = true;
+		emits("before-show");
+		nextTick(() => {
+			emits("show");
+		});
+	} else if (!isIntersecting && isVisible.value) {
+		isVisible.value = false;
+		emits("before-hide");
+		getRenderedSlotSize();
+		nextTick(() => {
+			emits("hide");
+		});
+	}
+	emits("visible-change", isIntersecting);
 }
-useIntersectionObserver(
-  containerRef,
-  ([entry]) => {
-    onVisibleChange(entry.isIntersecting);
-  },
-  props
-);
+useIntersectionObserver(containerRef, ([{ entry }]) => {
+	onVisibleChange(entry.isIntersecting);
+}, props);
 </script>
 
 <template>
   <div
+    data-intersection-observer
     ref="containerRef"
     class="pxd-intersection-observer content-visibility-auto"
     :style="containerSize"

package/dist/components/kbd/index.vue

@@ -1,44 +1,66 @@
 <script setup>
 import { computed } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getFallbackValue } from "../../utils/get";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getFallbackValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PKbd",
-  inheritAttrs: false
+	name: "PKbd",
+	inheritAttrs: false
 });
 const props = defineProps({
-  alt: { type: Boolean, required: false },
-  ctrl: { type: Boolean, required: false },
-  meta: { type: Boolean, required: false },
-  enter: { type: Boolean, required: false },
-  shift: { type: Boolean, required: false },
-  label: { type: [String, Number, Array, null], required: false },
-  size: { type: String, required: false }
+	alt: {
+		type: Boolean,
+		required: false
+	},
+	ctrl: {
+		type: Boolean,
+		required: false
+	},
+	meta: {
+		type: Boolean,
+		required: false
+	},
+	enter: {
+		type: Boolean,
+		required: false
+	},
+	shift: {
+		type: Boolean,
+		required: false
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	}
 });
 const SIZES = {
-  sm: "h-5 text-xs",
-  md: "h-6 text-sm",
-  lg: "h-7 text-sm"
+	sm: "h-5 text-xs",
+	md: "h-6 text-sm",
+	lg: "h-7 text-sm"
 };
 const INTERNAL_KEYS = {
-  meta: "\u2318",
-  shift: "\u21E7",
-  alt: "\u2325",
-  ctrl: "Ctrl",
-  enter: "\u21B5"
+	meta: "⌘",
+	shift: "⇧",
+	alt: "⌥",
+	ctrl: "Ctrl",
+	enter: "↵"
 };
 const configProvider = useConfigProvider();
 const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const internalKey = computed(() => {
-  return Object.entries(INTERNAL_KEYS).filter(([k]) => {
-    return props[k];
-  }).map(([, v]) => v).join("");
+	return Object.entries(INTERNAL_KEYS).filter(([k]) => {
+		return props[k];
+	}).map(([, v]) => v).join("");
 });
 </script>
 
 <template>
   <kbd
-    class="pxd-keyboard px-1.5 ml-1 inline-flex items-center rounded-md border bg-background-100 text-center font-sans leading-none text-nowrap whitespace-nowrap text-gray-1000"
+    data-kbd
+    class="pxd-keyboard px-1.5 ms-1 inline-flex items-center rounded-md border bg-background-100 text-center font-sans leading-none text-nowrap whitespace-nowrap text-gray-1000 text-trim-both"
     :class="computedSize"
     v-bind="$attrs"
   >

package/dist/components/label/index.vue

@@ -1,12 +1,16 @@
 <script setup>
 defineOptions({
-  name: "PLabel",
-  inheritAttrs: false
+	name: "PLabel",
+	inheritAttrs: false
 });
 </script>
 
 <template>
-  <label class="pxd-label mb-1 text-sm flex w-full max-w-full text-gray-900" v-bind="$attrs">
+  <label
+    data-label
+    class="pxd-label mbe-1 text-sm flex w-full max-w-full text-gray-900"
+    v-bind="$attrs"
+  >
     <slot />
   </label>
 </template>

package/dist/components/link-button/index.vue

@@ -1,52 +1,69 @@
 <script setup>
 import ExternalIcon from "@gdsicon/vue/external";
 import { computed, useAttrs } from "vue";
-import { isExternalLink } from "../../utils/format";
+import { isExternalLink } from "../../utils/format.js";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PLinkButton",
-  inheritAttrs: false
+	name: "PLinkButton",
+	inheritAttrs: false
 });
 const props = defineProps({
-  href: { type: String, required: true },
-  text: { type: String, required: false },
-  align: { type: String, required: false, default: "left" },
-  target: { type: String, required: false, default: "_self" },
-  externalIcon: { type: Boolean, required: false }
+	href: {
+		type: String,
+		required: true
+	},
+	text: {
+		type: String,
+		required: false
+	},
+	align: {
+		type: String,
+		required: false,
+		default: "left"
+	},
+	target: {
+		type: String,
+		required: false,
+		default: "_self"
+	},
+	externalIcon: {
+		type: Boolean,
+		required: false
+	}
 });
 const emits = defineEmits(["click"]);
 const attrs = useAttrs();
 const computedAttrs = computed(() => {
-  const { align, target, href } = props;
-  const baseAttrs = {
-    align,
-    target,
-    rel: "noopener noreferrer",
-    ...attrs
-  };
-  if (!href) {
-    return baseAttrs;
-  }
-  if (isExternalLink(href)) {
-    return {
-      ...baseAttrs,
-      as: "a",
-      href
-    };
-  }
-  return {
-    ...baseAttrs,
-    as: "router-link",
-    to: href
-  };
+	const { align, target, href } = props;
+	const baseAttrs = {
+		align,
+		target,
+		rel: "noopener noreferrer",
+		...attrs
+	};
+	if (!href) {
+		return baseAttrs;
+	}
+	if (isExternalLink(href)) {
+		return {
+			...baseAttrs,
+			as: "a",
+			href
+		};
+	}
+	return {
+		...baseAttrs,
+		as: "router-link",
+		to: href
+	};
 });
 function onLinkClick(ev) {
-  emits("click", ev);
+	emits("click", ev);
 }
 </script>
 
 <template>
-  <PButton class="pxd-link-button" v-bind="computedAttrs" @click="onLinkClick">
+  <PButton data-link-button class="pxd-link-button" v-bind="computedAttrs" @click="onLinkClick">
     <template #prefix>
       <slot name="prefix" />
     </template>

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

@@ -1,28 +1,36 @@
-import type { ListProps, ListOptionSelected } from './types';
-declare var __VLS_1: {}, __VLS_9: {
-    item: import("./types").ListOption;
-};
+import type { ListNavigationCommand } from '../../composables/_internal/use-list-navigation.js';
+import type { ListProps, ListOption, ListOptionSelected } from './types';
+declare function dispatchCommand(command: ListNavigationCommand): boolean;
+declare var __VLS_12: {
+    item: ListOption;
+    index: number;
+    group: import("./types").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    item?: (props: typeof __VLS_12) => any;
 } & {
-    item?: (props: typeof __VLS_9) => any;
+    empty?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ListProps, {
-    isEmpty: () => boolean;
-    refreshItems: () => Promise<void>;
+    focus: () => void | undefined;
+    dispatch: typeof dispatchCommand;
     setActiveIndex: (index: number) => void;
     setFirstAsActive: () => void;
+    activeIndex: import("vue").ShallowRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
-    toggle: () => any;
+    change: (args_0: ListOptionSelected) => any;
+    "update:modelValue": (args_0: import("./types").ListModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<ListProps> & Readonly<{
-    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
-    onToggle?: (() => any) | undefined;
+    onChange?: ((args_0: ListOptionSelected) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("./types").ListModelValue) => any) | undefined;
 }>, {
-    options: import("./types").ListOption[];
+    options: import("./types").ListOptionEntry[];
+    itemSize: number;
+    overScan: number;
     loop: boolean;
-    toggleOnKeyPress: boolean;
     defaultActiveIndex: number;
+    virtual: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;