pxd 0.0.64 → 0.1.3

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
+	}
+});
+let wrapWidth = 0;
+let contentWidth = 0;
+let appliedSpeed = 0;
+let initialRafId = 0;
+const wrapRef = shallowRef();
+const contentRef = shallowRef();
+const contentStyle = shallowRef();
+useResizeObserver(wrapRef, () => {
+	syncOverflow(false);
+});
+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" });
+// 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/props'
+
+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;