pxd 0.0.64 → 0.1.2

package/dist/components/scroll-progress/index.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getElement, getScrollElement, getScrollListener, getScrollPosition } from "../../utils/dom.js";
+import { off, on, scheduleByRaf } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
+defineOptions({
+	name: "PScrollProgress",
+	inheritAttrs: false
+});
+const props = defineProps({ scrollTarget: {
+	type: null,
+	required: false,
+	default: null
+} });
+const emits = defineEmits(["change"]);
+const scrollTop = shallowRef(0);
+const maxScrollTop = shallowRef(0);
+const percentage = computed(() => {
+	if (maxScrollTop.value <= 0) {
+		return 0;
+	}
+	return Math.min(100, Math.max(0, Math.round(scrollTop.value / maxScrollTop.value * 100)));
+});
+if (!isServer()) {
+	const scrollElement = shallowRef(null);
+	function update() {
+		const el = scrollElement.value;
+		if (!el) {
+			return;
+		}
+		const { scrollTop: top, scrollHeight, clientHeight } = getScrollPosition(el);
+		scrollTop.value = top;
+		maxScrollTop.value = Math.max(0, scrollHeight - clientHeight);
+	}
+	const scheduleUpdate = scheduleByRaf(update);
+	useResizeObserver(() => scrollElement.value, scheduleUpdate);
+	let currentListener = null;
+	function bindListener() {
+		const el = getElement(props.scrollTarget);
+		const listener = getScrollListener(el);
+		scrollElement.value = getScrollElement(el);
+		if (listener !== currentListener) {
+			off(currentListener, "scroll", scheduleUpdate);
+			currentListener = listener;
+			on(listener, "scroll", scheduleUpdate, { passive: true });
+		}
+		scheduleUpdate();
+	}
+	const stopListener = watch(() => props.scrollTarget, bindListener, { flush: "post" });
+	watch(() => percentage.value, (value) => {
+		emits("change", value);
+	});
+	onMounted(bindListener);
+	onBeforeUnmount(() => {
+		scheduleUpdate.cancel();
+		off(currentListener, "scroll", scheduleUpdate);
+		stopListener();
+	});
+}
+</script>
+
+<template>
+  <span
+    data-scroll-progress
+    role="progressbar"
+    class="pxd-scroll-progress tabular-nums"
+    :aria-valuenow="percentage"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    v-bind="$attrs"
+  >
+    <slot :percentage="percentage">{{ percentage }}%</slot>
+  </span>
+</template>

package/dist/components/scroll-progress/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPublicInstance } from 'vue'
+
+export interface ScrollProgressProps {
+  scrollTarget?: string | HTMLElement | ComponentPublicInstance | null
+}
+
+export interface ScrollProgressEmits {
+  change: [percentage: number]
+}

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

@@ -0,0 +1,18 @@
+import type { ScrollTextProps } from './types';
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollTextProps> & Readonly<{}>, {
+    text: string;
+    as: import("../../types/shared/props.js").ComponentAs;
+    speed: number | 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/scroll-text/index.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getElement } from "../../utils/dom.js";
+import { caf, raf } from "../../utils/event.js";
+defineOptions({
+	name: "PScrollText",
+	inheritAttrs: false
+});
+const props = defineProps({
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "span"
+	},
+	text: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	speed: {
+		type: [Number, String],
+		required: false,
+		default: 40
+	}
+});
+const wrapRef = shallowRef();
+const contentRef = shallowRef();
+const contentStyle = shallowRef();
+let wrapWidth = 0;
+let contentWidth = 0;
+let appliedSpeed = 0;
+let initialRafId = 0;
+function toSpeed(value) {
+	const n = Number(value);
+	return Number.isFinite(n) && n > 0 ? n : 40;
+}
+function clearOverflow() {
+	contentStyle.value = undefined;
+	wrapWidth = 0;
+	contentWidth = 0;
+	appliedSpeed = 0;
+}
+function syncOverflow(force = false) {
+	const wrap = getElement(wrapRef.value);
+	const content = contentRef.value;
+	if (!wrap || !content) {
+		return;
+	}
+	const nextWrap = wrap.clientWidth;
+	const nextContent = content.scrollWidth;
+	const nextSpeed = toSpeed(props.speed);
+	if (!nextWrap || !nextContent) {
+		clearOverflow();
+		return;
+	}
+	const distance = nextContent - nextWrap;
+	const nextOverflowing = distance > 1;
+	if (!nextOverflowing) {
+		clearOverflow();
+		return;
+	}
+	const unchanged = !force && contentStyle.value && nextWrap === wrapWidth && nextContent === contentWidth && nextSpeed === appliedSpeed;
+	if (unchanged) {
+		return;
+	}
+	wrapWidth = nextWrap;
+	contentWidth = nextContent;
+	appliedSpeed = nextSpeed;
+	contentStyle.value = {
+		"--scroll-text-distance": `${distance}px`,
+		"--scroll-text-duration": `${distance / nextSpeed}s`
+	};
+}
+watch(() => [props.text, toSpeed(props.speed)], () => {
+	syncOverflow(true);
+}, { flush: "post" });
+useResizeObserver(wrapRef, () => {
+	syncOverflow(false);
+});
+// The first measurement is deferred to a rAF instead of running synchronously in
+// the mounted queue, where a batch of instances reading layout forces one reflow
+// per item. Inside a single rAF the browser resolves layout once and serves every
+// instance's read from that pass, so a list costs one reflow instead of N.
+// ResizeObserver's initial delivery is not relied on here: it is not guaranteed to
+// land before first paint in every rendering context.
+onMounted(() => {
+	initialRafId = raf(() => {
+		initialRafId = 0;
+		syncOverflow(true);
+	});
+});
+onBeforeUnmount(() => {
+	if (!initialRafId) {
+		return;
+	}
+	caf(initialRafId);
+	initialRafId = 0;
+});
+</script>
+
+<template>
+  <Component
+    data-scroll-text
+    :is="as"
+    ref="wrapRef"
+    class="pxd-scroll-text min-w-0 block max-w-full overflow-hidden"
+    :data-overflow="contentStyle ? 'true' : 'false'"
+    :style="contentStyle"
+    v-bind="$attrs"
+  >
+    <span
+      ref="contentRef"
+      class="pxd-scroll-text--content block max-w-full truncate whitespace-nowrap"
+    >
+      <slot>{{ text }}</slot>
+    </span>
+  </Component>
+</template>
+
+<style>
+.pxd-scroll-text[data-overflow=true]:hover .pxd-scroll-text--content{animation:pxd-scroll-text-shift var(--scroll-text-duration) linear infinite;display:inline-block;max-width:none;overflow:visible;text-overflow:clip;width:-moz-max-content;width:max-content}@keyframes pxd-scroll-text-shift{0%{transform:translateX(0)}to{transform:translateX(calc(var(--scroll-text-distance)*-1))}}
+</style>

package/dist/components/scroll-text/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentAs } from '../../types/shared'
+
+export interface ScrollTextProps {
+  as?: ComponentAs
+  text?: string
+  speed?: number | string
+}

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

@@ -10,14 +10,14 @@ declare const __VLS_base: import("vue").DefineComponent<ScrollableProps, {
     forceUpdate: typeof forceUpdate;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     scroll: (args_0: Event) => any;
-    bottom: (args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any;
+    bottom: (args_0: import("../../types/shared/props.js").ComponentDirection, args_1: Event) => any;
 }, string, import("vue").PublicProps, Readonly<ScrollableProps> & Readonly<{
     onScroll?: ((args_0: Event) => any) | undefined;
-    onBottom?: ((args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any) | undefined;
+    onBottom?: ((args_0: import("../../types/shared/props.js").ComponentDirection, args_1: Event) => any) | undefined;
 }>, {
+    bottomThreshold: number;
     fader: boolean;
     scrollbar: boolean;
-    bottomThreshold: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;