pxd 0.0.64 → 0.1.3

package/dist/components/list-item/index.vue

@@ -1,98 +1,118 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { useListContext, useListFilterContext, useListFilterGroupId } from "../../contexts/list";
-import { unrefElement } from "../../utils/ref";
-import { getUniqueId } from "../../utils/uid";
+import CheckIcon from "@gdsicon/vue/check";
+import { computed } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useListContext } from "../../contexts/list.js";
+import { toArray } from "../../utils/format.js";
+import { isNil } from "../../utils/is.js";
 defineOptions({
-  name: "PListItem",
-  inheritAttrs: false
+	name: "PListItem",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "li" },
-  type: { type: String, required: false, default: "default" },
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number], required: false },
-  disabled: { type: Boolean, required: false, default: false },
-  keywords: { type: Array, required: false, default: () => [] },
-  description: { type: [String, Number, Array, null], required: false }
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [String, Number],
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	description: {
+		type: String,
+		required: false
+	},
+	index: {
+		type: Number,
+		required: false
+	},
+	active: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
 const emits = defineEmits(["click"]);
-const listItemVariant = tv({
-  base: "pxd-list-item sm:h-10 h-11 gap-3 px-2 scroll-m-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none [contain-intrinsic-size:auto_2.5rem] content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700",
-  variants: {
-    type: {
-      error: "text-red-900 active:bg-red-100 pointer-fine:aria-selected:bg-red-100",
-      warning: "text-amber-900 active:bg-amber-100 pointer-fine:aria-selected:bg-amber-100",
-      default: "text-foreground active:bg-gray-alpha-100 pointer-fine:aria-selected:bg-gray-alpha-100"
-    }
-  }
+const NATIVE_DISABLED_TAGS = new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"option",
+	"optgroup",
+	"fieldset"
+]);
+const nativeDisabled = computed(() => {
+	if (!props.disabled || typeof props.as !== "string") {
+		return undefined;
+	}
+	return NATIVE_DISABLED_TAGS.has(props.as.toLowerCase()) ? true : undefined;
 });
-const { activeIndex, registerItem, unregisterItem, onOptionClick } = useListContext();
-const groupId = useListFilterGroupId(null);
-const filterCtx = useListFilterContext(null);
-const itemId = getUniqueId("list-item");
-const itemRef = shallowRef();
-const itemIndex = shallowRef(-1);
-const isVisible = computed(() => {
-  if (!filterCtx || !filterCtx.searchValue.value.trim()) {
-    return true;
-  }
-  return filterCtx.isItemVisible(itemId);
+const { value: selectedValue, onItemSelect } = useListContext();
+const isChecked = computed(() => {
+	return !isNil(props.value) && toArray(selectedValue.value).includes(props.value);
 });
-const isSelected = computed(() => itemIndex.value !== -1 && itemIndex.value === activeIndex.value);
-const computedClasses = computed(() => {
-  return listItemVariant({ type: props.type });
-});
-function getValue() {
-  return `${String(props.label ?? "")}${String(props.description ?? "")}`.trim();
-}
-function getKeywords() {
-  return props.keywords;
-}
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-list-item min-h-9 p-2 text-sm pe-8 gap-2 flex w-full max-w-full cursor-pointer items-center rounded-md outline-none content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700",
+	variants: { variant: {
+		error: "text-red-900 active:bg-red-100 pointer-fine:data-[active=true]:bg-red-100",
+		warning: "text-amber-900 active:bg-amber-100 pointer-fine:data-[active=true]:bg-amber-100",
+		default: "text-foreground active:bg-gray-alpha-100 pointer-fine:data-[active=true]:bg-gray-alpha-100"
+	} }
+}, { selection: () => ({ variant: props.variant }) });
 function onItemClick(ev) {
-  const { as, keywords, ...restProps } = props;
-  emits("click", restProps, ev);
-  onOptionClick?.(restProps, ev);
+	const value = props.value;
+	if (props.disabled || isNil(value)) {
+		return;
+	}
+	emits("click", value, ev);
+	onItemSelect?.(value);
 }
-onMounted(() => {
-  const el = unrefElement(itemRef.value);
-  if (el) {
-    registerItem(el, itemIndex);
-  }
-  filterCtx?.registerItem(itemId, {
-    groupId,
-    getValue,
-    getKeywords
-  });
-});
-onBeforeUnmount(() => {
-  const el = unrefElement(itemRef.value);
-  if (el) {
-    unregisterItem(el);
-  }
-  filterCtx?.unregisterItem(itemId);
-});
 </script>
 
 <template>
   <Component
     :is="as"
-    ref="itemRef"
     tabindex="-1"
-    role="listitem"
+    role="option"
     data-list-item
-    :data-type="type"
+    :data-index="index"
+    :data-variant="variant"
+    :data-checked="isChecked"
     :data-disabled="disabled"
-    :aria-selected="isSelected"
-    :hidden="!isVisible"
-    :class="computedClasses"
-    v-bind="$attrs"
-    @click.prevent.stop="onItemClick"
+    :data-active="active"
+    :aria-selected="isChecked"
+    :aria-disabled="disabled"
+    :disabled="nativeDisabled"
+    :class="classes"
+    v-bind="attrs"
+    @click.stop="onItemClick"
   >
     <slot>
-      <span>{{ label }}</span>
-      <span v-if="description" class="text-foreground-secondary">{{ description }}</span>
+      <div class="pxd-list-item--content">
+        <span>{{ label }}</span>
+        <div v-if="description" class="mbs-0.5 text-foreground-secondary">{{ description }}</div>
+      </div>
     </slot>
+
+    <CheckIcon
+      v-if="isChecked"
+      class="pxd-list-item--checked right-2 pointer-events-none absolute top-1/2 -translate-y-1/2 text-primary"
+    />
   </Component>
 </template>

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

@@ -1,15 +1,18 @@
-import type { ListOption, ListOptionSelected } from '../list/types'
+import type { ListOption } from '../list/types'
 
 export interface ListItemProps {
   as?: ListOption['as']
-  type?: ListOption['type']
   label?: ListOption['label']
   value?: ListOption['value']
+  variant?: ListOption['variant']
   disabled?: ListOption['disabled']
-  keywords?: string[]
   description?: ListOption['description']
+  /** Navigable index within the list (for keyboard / pointer). */
+  index?: number
+  /** Whether this item is the keyboard/pointer active item. */
+  active?: boolean
 }
 
 export interface ListItemEmits {
-  click: [ListOptionSelected, MouseEvent]
+  click: [ListOption['value'], MouseEvent]
 }

package/dist/components/loading-bar/index.vue

@@ -1,54 +1,46 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar";
-import { cachedOff, cachedOn } from "../../utils/event";
-import { caf, raf } from "../../utils/event";
-import { clampValue, isTruthyProp } from "../../utils/format";
-import { isServer } from "../../utils/is";
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar.js";
+import { cachedOff, cachedOn } from "../../utils/event.js";
+import { caf, raf } from "../../utils/event.js";
+import { clampValue, isTruthyProp } from "../../utils/format.js";
+import { isServer } from "../../utils/is.js";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
-  name: "PLoadingBar",
-  inheritAttrs: false
+	name: "PLoadingBar",
+	inheritAttrs: false
 });
 const props = defineProps({
-  to: { type: [String, Object], required: false },
-  group: { type: String, required: false, default: "default" },
-  minimum: { type: Number, required: false, default: 0.08 },
-  trickle: { type: Boolean, required: false, default: true },
-  hideDelay: { type: Number, required: false, default: 500 },
-  trickleThreshold: { type: Number, required: false, default: 300 }
-});
-const loadingBarVariant = tv({
-  slots: {
-    wrapper: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
-    inner: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-appearance"
-  },
-  variants: {
-    status: {
-      running: {
-        inner: "bg-gray-500"
-      },
-      finish: {
-        inner: "bg-primary"
-      },
-      error: {
-        inner: "bg-red-900"
-      }
-    },
-    absolute: {
-      true: {
-        wrapper: "absolute"
-      },
-      false: {
-        wrapper: "fixed"
-      }
-    }
-  },
-  defaultVariants: {
-    status: "finish",
-    absolute: false
-  }
+	to: {
+		type: [String, Object],
+		required: false
+	},
+	group: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	minimum: {
+		type: Number,
+		required: false,
+		default: .08
+	},
+	trickle: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	hideDelay: {
+		type: Number,
+		required: false,
+		default: 500
+	},
+	trickleThreshold: {
+		type: Number,
+		required: false,
+		default: 300
+	}
 });
 let prevTimestamp = 0;
 let prevAnimationKey = 0;
@@ -59,129 +51,144 @@ const status = shallowRef("finish");
 const hiddenBar = shallowRef(false);
 const progressValue = shallowRef(0);
 const enableTransition = shallowRef(false);
-const computedClasses = computed(() => {
-  return loadingBarVariant({
-    status: status.value,
-    absolute: isTruthyProp(props.to)
-  });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
+	variants: { locally: {
+		true: "absolute",
+		false: "fixed"
+	} }
+}, { selection: () => ({ locally: isTruthyProp(props.to) }) });
+const { classes: innerClasses } = useTailwindVariant({
+	base: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-appearance motion-safe:will-change-transform",
+	variants: { status: {
+		running: "bg-gray-500",
+		finish: "bg-primary",
+		error: "bg-red-900"
+	} }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ status: status.value })
 });
 function getIncreaseDelta(n) {
-  if (n >= 0 && n < 0.2) {
-    return 0.1;
-  } else if (n >= 0.2 && n < 0.5) {
-    return 0.04;
-  } else if (n >= 0.5 && n < 0.8) {
-    return 0.02;
-  } else if (n >= 0.8 && n < 0.98) {
-    return 5e-3;
-  } else {
-    return 0;
-  }
+	if (n >= 0 && n < .2) {
+		return .1;
+	} else if (n >= .2 && n < .5) {
+		return .04;
+	} else if (n >= .5 && n < .8) {
+		return .02;
+	} else if (n >= .8 && n < .98) {
+		return .005;
+	} else {
+		return 0;
+	}
 }
 function increaseProgress(n) {
-  if (progressValue.value >= 1) {
-    caf(prevAnimationKey);
-    return;
-  }
-  const now = performance.now();
-  const delta = now - prevTimestamp;
-  const threshold = props.trickleThreshold || 200;
-  if (delta < threshold && props.trickle) {
-    prevAnimationKey = raf(increaseProgress);
-    return;
-  }
-  prevTimestamp = now;
-  const amount = n || getIncreaseDelta(progressValue.value);
-  progressValue.value = clampValue(progressValue.value + amount, 0, 0.994);
-  if (amount === 0 || !props.trickle) {
-    return;
-  }
-  prevAnimationKey = raf(increaseProgress);
+	if (progressValue.value >= 1) {
+		caf(prevAnimationKey);
+		return;
+	}
+	const now = performance.now();
+	const delta = now - prevTimestamp;
+	const threshold = props.trickleThreshold || 200;
+	if (delta < threshold && props.trickle) {
+		prevAnimationKey = raf(increaseProgress);
+		return;
+	}
+	prevTimestamp = now;
+	const amount = n || getIncreaseDelta(progressValue.value);
+	progressValue.value = clampValue(progressValue.value + amount, 0, .994);
+	if (amount === 0 || !props.trickle) {
+		return;
+	}
+	prevAnimationKey = raf(increaseProgress);
 }
 async function hideAndResetProgress() {
-  hiddenBarTimeout = setTimeout(() => {
-    hiddenBar.value = true;
-  }, props.hideDelay);
+	hiddenBarTimeout = setTimeout(() => {
+		hiddenBar.value = true;
+	}, props.hideDelay);
 }
 function handleStartProgress() {
-  if (status.value === "running") {
-    return;
-  }
-  enableTransition.value = false;
-  hiddenBar.value = false;
-  status.value = "running";
-  progressValue.value = props.minimum;
-  clearTimeout(hiddenBarTimeout);
-  clearTimeout(enableTransitionTimeout);
-  enableTransitionTimeout = setTimeout(() => {
-    enableTransition.value = true;
-  }, ENABLE_TRANSITION_DELAY);
-  if (!props.trickle) {
-    return;
-  }
-  prevTimestamp = 0;
-  raf(() => increaseProgress());
+	if (status.value === "running") {
+		return;
+	}
+	enableTransition.value = false;
+	hiddenBar.value = false;
+	status.value = "running";
+	progressValue.value = props.minimum;
+	clearTimeout(hiddenBarTimeout);
+	clearTimeout(enableTransitionTimeout);
+	enableTransitionTimeout = setTimeout(() => {
+		enableTransition.value = true;
+	}, ENABLE_TRANSITION_DELAY);
+	if (!props.trickle) {
+		return;
+	}
+	prevTimestamp = 0;
+	raf(() => increaseProgress());
 }
 async function handleErrorProgress() {
-  if (status.value !== "running") {
-    return;
-  }
-  caf(prevAnimationKey);
-  status.value = "error";
-  hiddenBar.value = false;
-  progressValue.value = 1;
-  hideAndResetProgress();
+	if (status.value !== "running") {
+		return;
+	}
+	caf(prevAnimationKey);
+	status.value = "error";
+	hiddenBar.value = false;
+	progressValue.value = 1;
+	hideAndResetProgress();
 }
 function handleFinishProgress() {
-  if (status.value !== "running") {
-    return;
-  }
-  caf(prevAnimationKey);
-  status.value = "finish";
-  hiddenBar.value = false;
-  progressValue.value = 1;
-  hideAndResetProgress();
+	if (status.value !== "running") {
+		return;
+	}
+	caf(prevAnimationKey);
+	status.value = "finish";
+	hiddenBar.value = false;
+	progressValue.value = 1;
+	hideAndResetProgress();
 }
 function handleIncreaseProgress(value) {
-  increaseProgress(value);
+	increaseProgress(value);
 }
 function onUpdateLoadingBar({ detail }) {
-  if (detail.group !== props.group) {
-    return;
-  }
-  switch (detail.type) {
-    case "start":
-      handleStartProgress();
-      break;
-    case "error":
-      handleErrorProgress();
-      break;
-    case "finish":
-      handleFinishProgress();
-      break;
-    case "increase":
-      handleIncreaseProgress(detail.value);
-      break;
-  }
+	if (detail.group !== props.group) {
+		return;
+	}
+	switch (detail.type) {
+		case "start":
+			handleStartProgress();
+			break;
+		case "error":
+			handleErrorProgress();
+			break;
+		case "finish":
+			handleFinishProgress();
+			break;
+		case "increase":
+			handleIncreaseProgress(detail.value);
+			break;
+	}
 }
 onMounted(() => {
-  if (isServer()) {
-    return;
-  }
-  cachedOn(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
+	if (isServer()) {
+		return;
+	}
+	cachedOn(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
 });
 onBeforeUnmount(() => {
-  cachedOff(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
+	caf(prevAnimationKey);
+	clearTimeout(hiddenBarTimeout);
+	clearTimeout(enableTransitionTimeout);
+	cachedOff(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
 });
 </script>
 
 <template>
   <PTeleport :to="to">
-    <div aria-hidden="true" :class="computedClasses.wrapper()" v-bind="$attrs">
+    <div data-loading-bar aria-hidden="true" :class="classes" v-bind="attrs">
       <div
         :data-hidden="hiddenBar"
         :data-transition="enableTransition"
-        :class="computedClasses.inner()"
+        :class="innerClasses"
         :style="{ transform: `scaleX(${progressValue})` }"
       />
     </div>

package/dist/components/loading-dots/index.d.vue.ts

@@ -1,15 +1,3 @@
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_1) => any;
-} & {
-    suffix?: (props: typeof __VLS_3) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/loading-dots/index.vue

@@ -1,34 +1,32 @@
 <script setup>
 defineOptions({
-  name: "PLoadingDots",
-  inheritAttrs: false
+	name: "PLoadingDots",
+	inheritAttrs: false
 });
 </script>
 
 <template>
-  <span class="pxd-loading-dots inline-flex items-center" v-bind="$attrs">
-    <div v-if="$slots.prefix" class="pxd-loading-dots--text mr-3">
-      <slot name="prefix" />
-    </div>
-
+  <span
+    data-loading-dots
+    aria-hidden="true"
+    aria-label="Loading"
+    class="pxd-loading-dots inline-flex items-center text-foreground-secondary"
+    v-bind="$attrs"
+  >
     <span
-      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-20"
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-current opacity-20 default-animation-timing-function! motion-reduce:animate-none!"
     />
     <span
-      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-50"
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-current opacity-50 default-animation-timing-function! motion-reduce:animate-none!"
       style="animation-delay: 0.2s"
     />
     <span
-      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-80"
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-current opacity-80 default-animation-timing-function! motion-reduce:animate-none!"
       style="animation-delay: 0.4s"
     />
-
-    <div v-if="$slots.suffix" class="pxd-loading-dots--text ml-3">
-      <slot name="suffix" />
-    </div>
   </span>
 </template>
 
 <style>
-@keyframes fade-loading{0%,to{opacity:.2}20%{opacity:.8}}
+.pxd-loading--dot{animation:pxd-animation-fade-loading 1.4s infinite}@keyframes pxd-animation-fade-loading{0%,to{opacity:.2}20%{opacity:.9}}
 </style>

package/dist/components/marching-ants/index.d.vue.ts

@@ -0,0 +1,25 @@
+import type { MarchingAntsProps } from './types';
+declare function select(): void;
+declare function deselect(): void;
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MarchingAntsProps, {
+    select: typeof select;
+    deselect: typeof deselect;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarchingAntsProps> & Readonly<{}>, {
+    color: string;
+    as: import("../../types/shared/props.js").ComponentAs;
+    gap: string | number;
+    lineSize: string | number;
+    dashSize: string | number;
+}, {}, {}, {}, 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;
+    };
+};