pxd 0.0.64 → 0.1.2

package/dist/components/marquee/index.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { caf, raf, throttleByRaf } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
+defineOptions({
+	name: "PMarquee",
+	inheritAttrs: false
+});
+const props = defineProps({
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	text: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	color: {
+		type: String,
+		required: false,
+		default: "var(--color-amber-900)"
+	},
+	background: {
+		type: String,
+		required: false,
+		default: "var(--color-amber-100)"
+	},
+	delay: {
+		type: [Number, String],
+		required: false,
+		default: 1
+	},
+	speed: {
+		type: [Number, String],
+		required: false,
+		default: 60
+	},
+	scrollable: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	wrapable: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	pauseOnHover: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const emits = defineEmits(["click", "replay"]);
+const wrapRef = shallowRef();
+const contentRef = shallowRef();
+const phase = shallowRef("idle");
+const contentStyle = shallowRef();
+let wrapWidth = 0;
+let contentWidth = 0;
+let appliedSpeed = 0;
+let appliedDelay = 0;
+let restartRafId = 0;
+function toDelay(value) {
+	const n = Number(value);
+	return Number.isFinite(n) && n >= 0 ? n : 1;
+}
+function toSpeed(value) {
+	const n = Number(value);
+	return Number.isFinite(n) && n > 0 ? n : 60;
+}
+const delaySec = computed(() => toDelay(props.delay));
+const speed = computed(() => toSpeed(props.speed));
+const isWrapMode = computed(() => props.wrapable && props.scrollable === false);
+const isActive = computed(() => phase.value !== "idle");
+const rootStyle = computed(() => ({
+	"--marquee-color": props.color,
+	"--marquee-background": props.background
+}));
+const contentClass = computed(() => {
+	if (isWrapMode.value) {
+		return "block w-full whitespace-normal break-words";
+	}
+	if (isActive.value || props.scrollable !== false) {
+		return "inline-block w-max whitespace-nowrap";
+	}
+	return "block max-w-full truncate";
+});
+function clearRestart() {
+	if (restartRafId) {
+		caf(restartRafId);
+		restartRafId = 0;
+	}
+}
+function stopScroll() {
+	clearRestart();
+	phase.value = "idle";
+	contentStyle.value = undefined;
+	wrapWidth = 0;
+	contentWidth = 0;
+	appliedSpeed = 0;
+	appliedDelay = 0;
+}
+function buildStyle(nextWrap, nextContent, nextSpeed, nextDelay) {
+	return {
+		"--marquee-from": `${nextWrap}px`,
+		"--marquee-to": `${-nextContent}px`,
+		"--marquee-first-duration": `${nextContent / nextSpeed}s`,
+		"--marquee-duration": `${(nextContent + nextWrap) / nextSpeed}s`,
+		"--marquee-delay": `${nextDelay}s`
+	};
+}
+function armFirst() {
+	clearRestart();
+	phase.value = "idle";
+	restartRafId = raf(() => {
+		restartRafId = 0;
+		phase.value = "first";
+	});
+}
+function syncScroll(force = false) {
+	if (isServer()) {
+		return;
+	}
+	if (props.scrollable === false || isWrapMode.value) {
+		stopScroll();
+		return;
+	}
+	const wrap = wrapRef.value;
+	const content = contentRef.value;
+	if (!wrap || !content) {
+		return;
+	}
+	const nextWrap = wrap.clientWidth;
+	const nextContent = content.scrollWidth;
+	const nextSpeed = speed.value;
+	const nextDelay = delaySec.value;
+	if (!nextWrap || !nextContent) {
+		return;
+	}
+	const active = phase.value !== "idle";
+	const unchanged = !force && active && nextWrap === wrapWidth && nextContent === contentWidth && nextSpeed === appliedSpeed && nextDelay === appliedDelay;
+	if (unchanged) {
+		return;
+	}
+	const sizeChanged = nextWrap !== wrapWidth || nextContent !== contentWidth;
+	const shouldRestart = force || active && sizeChanged;
+	wrapWidth = nextWrap;
+	contentWidth = nextContent;
+	appliedSpeed = nextSpeed;
+	appliedDelay = nextDelay;
+	contentStyle.value = buildStyle(nextWrap, nextContent, nextSpeed, nextDelay);
+	if (!active) {
+		phase.value = "first";
+		return;
+	}
+	if (!shouldRestart) {
+		return;
+	}
+	armFirst();
+}
+const scheduleSync = throttleByRaf(() => {
+	syncScroll(false);
+});
+function reset() {
+	if (isServer()) {
+		return;
+	}
+	scheduleSync.cancel();
+	clearRestart();
+	syncScroll(true);
+}
+function onAnimationEnd(event) {
+	if (event.target !== contentRef.value || phase.value !== "first") {
+		return;
+	}
+	phase.value = "loop";
+	emits("replay");
+}
+function onAnimationIteration(event) {
+	if (event.target !== contentRef.value || phase.value !== "loop") {
+		return;
+	}
+	emits("replay");
+}
+watch(() => [
+	props.scrollable,
+	props.wrapable,
+	props.text,
+	delaySec.value,
+	speed.value
+], reset);
+useResizeObserver(wrapRef, scheduleSync);
+onMounted(reset);
+onBeforeUnmount(() => {
+	scheduleSync.cancel();
+	clearRestart();
+});
+defineExpose({ reset });
+</script>
+
+<template>
+  <Component
+    data-marquee
+    :is="as"
+    class="pxd-marquee text-sm min-h-10 py-2 px-3 gap-2 relative flex w-full max-w-full overflow-hidden bg-(--marquee-background) text-(--marquee-color)"
+    :class="isWrapMode ? 'items-start' : 'items-center'"
+    :data-pause-on-hover="pauseOnHover ? 'true' : 'false'"
+    :style="rootStyle"
+    v-bind="$attrs"
+    @click="emits('click', $event)"
+  >
+    <div v-if="$slots.prefix" class="pxd-marquee--prefix flex shrink-0 items-center">
+      <slot name="prefix" />
+    </div>
+
+    <div ref="wrapRef" class="pxd-marquee--wrap min-w-0 flex-1 overflow-hidden">
+      <div
+        ref="contentRef"
+        class="pxd-marquee--content"
+        :class="contentClass"
+        :data-phase="phase"
+        :style="contentStyle"
+        @animationend="onAnimationEnd"
+        @animationiteration="onAnimationIteration"
+      >
+        <slot>{{ text }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.suffix" class="pxd-marquee--suffix flex shrink-0 items-center" @click.stop>
+      <slot name="suffix" />
+    </div>
+  </Component>
+</template>
+
+<style>
+.pxd-marquee--content[data-phase=first]{animation:pxd-marquee-scroll-first var(--marquee-first-duration) linear var(--marquee-delay) forwards}.pxd-marquee--content[data-phase=loop]{animation:pxd-marquee-scroll-loop var(--marquee-duration) linear infinite}.pxd-marquee[data-pause-on-hover=true]:hover .pxd-marquee--content[data-phase=first],.pxd-marquee[data-pause-on-hover=true]:hover .pxd-marquee--content[data-phase=loop]{animation-play-state:paused}@keyframes pxd-marquee-scroll-first{0%{transform:translateX(0)}to{transform:translateX(var(--marquee-to))}}@keyframes pxd-marquee-scroll-loop{0%{transform:translateX(var(--marquee-from))}to{transform:translateX(var(--marquee-to))}}
+</style>

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

@@ -0,0 +1,18 @@
+import type { ComponentAs } from '../../types/shared'
+
+export interface MarqueeProps {
+  as?: ComponentAs
+  text?: string
+  color?: string
+  background?: string
+  delay?: number | string
+  speed?: number | string
+  scrollable?: boolean
+  wrapable?: boolean
+  pauseOnHover?: boolean
+}
+
+export interface MarqueeEmits {
+  click: [MouseEvent]
+  replay: []
+}

package/dist/components/material/index.vue

@@ -1,38 +1,32 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
 import PStack from "../stack/index.vue";
 defineOptions({
-  name: "PMaterial",
-  inheritAttrs: false
-});
-const props = defineProps({
-  variant: { type: String, required: false, default: "default" }
-});
-const materialVariants = tv({
-  base: "pxd-material w-full bg-background-100",
-  variants: {
-    variant: {
-      default: "rounded-md shadow-border-base",
-      small: "rounded-md shadow-border-small",
-      medium: "rounded-xl shadow-border-medium",
-      large: "rounded-xl shadow-border-large",
-      tooltip: "rounded-md shadow-border-tooltip",
-      menu: "rounded-xl shadow-border-menu",
-      modal: "rounded-xl shadow-border-modal",
-      fullscreen: "rounded-2xl shadow-border-fullscreen"
-    }
-  }
-});
-const computedClasses = computed(() => {
-  return materialVariants({
-    variant: props.variant
-  });
+	name: "PMaterial",
+	inheritAttrs: false
 });
+const props = defineProps({ variant: {
+	type: String,
+	required: false,
+	default: "default"
+} });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-material w-full bg-background-100",
+	variants: { variant: {
+		default: "rounded-md shadow-border-base",
+		small: "rounded-md shadow-border-small",
+		medium: "rounded-xl shadow-border-medium",
+		large: "rounded-xl shadow-border-large",
+		tooltip: "rounded-md shadow-border-tooltip",
+		menu: "rounded-xl shadow-border-menu",
+		modal: "rounded-xl shadow-border-modal",
+		fullscreen: "rounded-2xl shadow-border-fullscreen"
+	} }
+}, { selection: () => ({ variant: props.variant }) });
 </script>
 
 <template>
-  <PStack :class="computedClasses" v-bind="$attrs">
+  <PStack data-material :class="classes" :data-variant="variant" v-bind="attrs">
     <slot />
   </PStack>
 </template>

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

@@ -0,0 +1,38 @@
+import type { ListOptions } from '../list/types';
+import type { MentionClickPayload, MentionProps } from './types';
+declare var __VLS_33: {
+    item: import("../list/types").ListOption;
+    index: number;
+    group: import("../list/types").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+}, __VLS_36: {};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_33) => any;
+} & {
+    empty?: (props: typeof __VLS_36) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MentionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: string) => any;
+    "update:modelValue": (args_0: string) => any;
+    "mention-click": (args_0: MentionClickPayload) => any;
+}, string, import("vue").PublicProps, Readonly<MentionProps> & Readonly<{
+    onChange?: ((args_0: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    "onMention-click"?: ((args_0: MentionClickPayload) => any) | undefined;
+}>, {
+    placeholder: string;
+    disabled: boolean;
+    modelValue: string;
+    options: ListOptions | import("./types").MentionOptionsResolver;
+    closeOnPressEscape: boolean;
+    triggers: string[];
+    searchPlaceholder: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/components/mention/index.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { computed, nextTick, shallowRef, watch } from "vue";
+import { useListKeyboardController } from "../../composables/_internal/use-list-keyboard-controller.js";
+import { useMentionSuggest } from "../../composables/_internal/use-mention-suggest.js";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
+import { useToggleValue } from "../../composables/use-toggle-value.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { DEFAULT_TRIGGER } from "../../utils/mention-html.js";
+import PMentionEditor from "../_internal/mention-editor.vue";
+import PList from "../list/index.vue";
+import PPopover from "../popover/index.vue";
+defineOptions({
+	name: "PMention",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	options: {
+		type: [Array, Function],
+		required: false,
+		default: () => []
+	},
+	triggers: {
+		type: Array,
+		required: false,
+		default: () => [DEFAULT_TRIGGER]
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	virtual: {
+		type: Boolean,
+		required: false
+	},
+	filterMethod: {
+		type: Function,
+		required: false
+	},
+	placeholder: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	searchPlaceholder: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const emits = defineEmits([
+	"change",
+	"mention-click",
+	"update:modelValue"
+]);
+const modelValue = useModelValue(props, emits);
+const configProvider = useConfigProvider();
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const listId = getUniqueId("mention-list");
+const searchInputId = getUniqueId("mention-search");
+const { value: popoverVisible, toggle: togglePopoverVisible } = useToggleValue(false);
+const editorRef = shallowRef();
+const listRef = shallowRef();
+const searchInputRef = shallowRef();
+function resolveOptions(trigger) {
+	return typeof props.options === "function" ? props.options(trigger) : props.options;
+}
+const { filterKeyword, listOptions, isEmptyResult, isPending, open: openSuggest, close: closeSuggest, setKeyword } = useMentionSuggest({
+	getOptions: resolveOptions,
+	getFilterMethod: () => props.filterMethod,
+	isDisabled: () => props.disabled,
+	visible: popoverVisible,
+	setVisible: (visible) => togglePopoverVisible(visible)
+});
+// PList covers its own loading state and hides its empty slot while loading, so the
+// list only has to stay out of the way before anything has been asked: an unfiltered
+// empty list reads as "no results for ''" the moment the popover opens.
+const shouldRenderList = computed(() => listOptions.value.length > 0 || isPending.value || isEmptyResult.value);
+const computedSize = computed(() => props.size || configProvider.size);
+watch(listOptions, async () => {
+	await nextTick();
+	listRef.value?.setFirstAsActive();
+});
+const { onKeydown: onSearchKeydown } = useListKeyboardController({
+	enabled: () => popoverVisible.value && !isPending.value,
+	onCommand: (command) => listRef.value?.dispatch(command) ?? false,
+	keymap: {
+		ArrowDown: "next",
+		ArrowUp: "previous",
+		Enter: "activate",
+		Home: "first",
+		End: "last"
+	}
+});
+async function focusSearchInput() {
+	await nextTick();
+	searchInputRef.value?.focus({ preventScroll: true });
+}
+function onPopoverShow() {
+	focusSearchInput();
+}
+function onPopoverHide() {
+	// Must wait until focus-trap finishes deactivating; sync focus is pulled back into the trap.
+	editorRef.value?.restoreCaret();
+}
+function onSearchInput(ev) {
+	setKeyword(ev.target.value);
+}
+function onSearchKeydownWithEscape(ev) {
+	if (ev.key === "Escape" && props.closeOnPressEscape) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		closeSuggest();
+		return;
+	}
+	onSearchKeydown(ev);
+}
+function onOptionSelect(item) {
+	if (isPending.value) {
+		return;
+	}
+	const key = String(item.value ?? "");
+	const label = String(item.label ?? key);
+	if (!key) {
+		return;
+	}
+	const inserted = editorRef.value?.insertMention(key, label);
+	if (inserted) {
+		closeSuggest();
+	}
+}
+function onMentionClick(payload) {
+	emits("mention-click", payload);
+}
+</script>
+
+<template>
+  <PPopover
+    data-mention
+    v-model="popoverVisible"
+    class="w-full"
+    position="bottom-start"
+    :trigger="[]"
+    :auto-focus-element="true"
+    :return-focus-on-deactivate="false"
+    fill-trigger-width
+    :disabled="disabled"
+    :adaptive="isAdaptive"
+    :wrapper-class="responsiveClasses.wrapper"
+    :content-class="responsiveClasses.content"
+    :lock-scroll-on-visible="isAdaptive"
+    :close-on-press-escape="closeOnPressEscape"
+    v-bind="$attrs"
+    @show="onPopoverShow"
+    @hide="onPopoverHide"
+  >
+    <PMentionEditor
+      ref="editorRef"
+      v-model="modelValue"
+      :size="computedSize"
+      :data-disabled="disabled"
+      :class="{ 'is-disabled': disabled }"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :triggers="triggers"
+      @trigger="openSuggest"
+      @mention-click="onMentionClick"
+    />
+
+    <template #content>
+      <div
+        class="pxd-mention--suggest max-h-80 min-w-56 flex flex-col overflow-hidden rounded-inherit"
+      >
+        <label :for="searchInputId" class="px-3 py-2 gap-2 flex items-center bg-background-100">
+          <input
+            :id="searchInputId"
+            ref="searchInputRef"
+            :value="filterKeyword"
+            type="text"
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck="false"
+            role="combobox"
+            inputmode="search"
+            aria-autocomplete="list"
+            :aria-controls="listId"
+            :aria-expanded="popoverVisible"
+            :aria-busy="isPending"
+            :aria-disabled="disabled"
+            :placeholder="searchPlaceholder"
+            class="pxd-mention--search h-7 min-w-0 text-sm flex-1 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
+            @input="onSearchInput"
+            @keydown="onSearchKeydownWithEscape"
+          />
+
+          <button
+            type="button"
+            class="px-1.5 h-5 text-xs shrink-0 cursor-pointer appearance-none rounded-sm border bg-background-100 self-focus-ring hover:bg-background-hover active:bg-background-active motion-safe:transition-colors"
+            @click="closeSuggest"
+          >
+            <kbd class="appearance-none font-sans">Esc</kbd>
+          </button>
+        </label>
+
+        <PList
+          v-show="shouldRenderList"
+          :id="listId"
+          ref="listRef"
+          :loop="false"
+          :virtual="virtual"
+          :loading="isPending"
+          :options="listOptions"
+          :default-active-index="0"
+          class="max-h-68 min-h-0 flex-1 rounded-none border-t"
+          @change="onOptionSelect"
+        >
+          <template v-if="$slots.item" #item="itemSlotProps">
+            <slot name="item" v-bind="itemSlotProps" />
+          </template>
+
+          <template #empty>
+            <slot name="empty">
+              {{ configProvider.locale.results.searchText }}
+              <span class="whitespace-pre text-foreground">"{{ filterKeyword }}"</span>
+            </slot>
+          </template>
+        </PList>
+      </div>
+    </template>
+  </PPopover>
+</template>

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

@@ -0,0 +1,35 @@
+import type { ComponentSize } from '../../types/shared/props'
+import type { ListOptions } from '../list/types'
+
+export type MentionFilterMethod = (
+  query: string,
+  trigger: string,
+) => ListOptions | Promise<ListOptions>
+
+export type MentionOptionsResolver = (trigger: string) => ListOptions
+
+export interface MentionProps {
+  modelValue?: string
+  options?: ListOptions | MentionOptionsResolver
+  triggers?: string[]
+  size?: ComponentSize
+  virtual?: boolean
+  filterMethod?: MentionFilterMethod
+  placeholder?: string
+  searchPlaceholder?: string
+  disabled?: boolean
+  closeOnPressEscape?: boolean
+}
+
+export interface MentionClickPayload {
+  key: string
+  label: string
+  trigger: string
+  event: MouseEvent
+}
+
+export interface MentionEmits {
+  change: [string]
+  'mention-click': [MentionClickPayload]
+  'update:modelValue': [string]
+}

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

@@ -1,21 +1,28 @@
-import type { ListOptionSelected } from '../list/types';
+import type { ListModelValue } from '../list/types';
 import type { MenuProps } from './types';
-declare var __VLS_8: {}, __VLS_19: {};
+declare var __VLS_10: {
+    popoverVisible: boolean;
+}, __VLS_24: {
+    item: import("../list/types").ListOption;
+    index: number;
+    group: import("../list/types").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_10) => any;
 } & {
-    items?: (props: typeof __VLS_19) => any;
+    item?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (visible: boolean) => any;
-    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
+    change: (args_0: ListModelValue) => any;
+    "update:modelValue": (args_0: ListModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{
-    onChange?: ((visible: boolean) => any) | undefined;
-    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
+    onChange?: ((args_0: ListModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: ListModelValue) => any) | undefined;
 }>, {
-    position: import("../../types/shared").ComponentPosition;
-    options: import("../list/types").ListOption[];
+    options: import("../list/types").ListOptions;
     closeOnPressEscape: 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;