pxd 0.0.64 → 0.1.2

package/dist/components/stick-to-bottom/index.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { shallowRef, watch } from "vue";
+import { useStickToBottom } from "../../composables/use-stick-to-bottom.js";
+defineOptions({
+	name: "PStickToBottom",
+	inheritAttrs: false
+});
+const props = defineProps({
+	enabled: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	threshold: {
+		type: Number,
+		required: false,
+		default: 16
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentStyle: {
+		type: [Object, String],
+		required: false
+	}
+});
+const emits = defineEmits(["change"]);
+const containerRef = shallowRef();
+const contentRef = shallowRef();
+const { isAtBottom, scrollToBottom, forceStickToBottom, stickIfNeeded, update } = useStickToBottom(containerRef, contentRef, {
+	threshold: () => props.threshold,
+	enabled: () => props.enabled
+});
+watch(() => isAtBottom.value, (value) => {
+	emits("change", value);
+});
+defineExpose({
+	containerRef,
+	contentRef,
+	isAtBottom,
+	scrollToBottom,
+	forceStickToBottom,
+	stickIfNeeded,
+	update
+});
+</script>
+
+<template>
+  <div
+    data-stick-to-bottom
+    ref="containerRef"
+    class="pxd-stick-to-bottom min-h-0 w-full max-w-full overflow-y-auto"
+    v-bind="$attrs"
+  >
+    <div
+      ref="contentRef"
+      class="pxd-stick-to-bottom--content"
+      :class="contentClass"
+      :style="contentStyle"
+    >
+      <slot />
+    </div>
+
+    <div v-if="$slots.action" class="pxd-stick-to-bottom--action bottom-0 sticky w-full">
+      <slot
+        name="action"
+        :is-at-bottom="isAtBottom"
+        :scroll-to-bottom="scrollToBottom"
+        :force-stick-to-bottom="forceStickToBottom"
+      />
+    </div>
+  </div>
+</template>

package/dist/components/stick-to-bottom/types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentClass } from '../../types/shared'
+import type { CSSProperties } from 'vue'
+
+export interface StickToBottomProps {
+  enabled?: boolean
+  threshold?: number
+  contentClass?: ComponentClass
+  contentStyle?: CSSProperties | string
+}
+
+export interface StickToBottomEmits {
+  change: [isAtBottom: boolean]
+}

package/dist/components/swipe-cell/index.d.vue.ts

@@ -0,0 +1,53 @@
+import type { SwipeCellCloseTrigger, SwipeCellProps, SwipeCellSide } from './types';
+declare function close(trigger?: SwipeCellCloseTrigger): Promise<boolean>;
+declare var __VLS_11: {
+    side: SwipeCellSide;
+    active: boolean;
+    distance: number;
+    progress: number;
+    overSwipe: boolean;
+}, __VLS_13: {}, __VLS_15: {
+    side: SwipeCellSide;
+    active: boolean;
+    distance: number;
+    progress: number;
+    overSwipe: boolean;
+};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    suffix?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SwipeCellProps, {
+    close: typeof close;
+    open: (side: SwipeCellSide) => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:modelValue": (side: false | SwipeCellSide) => any;
+    open: (side: SwipeCellSide) => any;
+    "over-swipe": (state: import("./types").SwipeCellOverSwipeState) => any;
+}, string, import("vue").PublicProps, Readonly<SwipeCellProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((side: false | SwipeCellSide) => any) | undefined;
+    onOpen?: ((side: SwipeCellSide) => any) | undefined;
+    "onOver-swipe"?: ((state: import("./types").SwipeCellOverSwipeState) => any) | undefined;
+}>, {
+    as: import("../../types/shared/props.js").ComponentAs;
+    modelValue: SwipeCellSide | false;
+    threshold: number;
+    group: string;
+    overSwipeThreshold: number;
+    closeOnOverSwipe: boolean;
+    closeOnClick: boolean;
+    exclusive: boolean;
+}, {}, {}, {}, 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/swipe-cell/index.vue

@@ -0,0 +1,412 @@
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, shallowReactive, shallowRef, watch } from "vue";
+import { useSwipeGesture } from "../../composables/_internal/use-swipe-gesture.js";
+import { useOutsideClick } from "../../composables/use-outside-click.js";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getElement } from "../../utils/dom.js";
+import { exclusiveOpen, registerSwipeCell } from "./instances.js";
+defineOptions({
+	name: "PSwipeCell",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [String, Boolean],
+		required: false,
+		default: false
+	},
+	threshold: {
+		type: Number,
+		required: false,
+		default: .5
+	},
+	overSwipeThreshold: {
+		type: Number,
+		required: false,
+		default: 1.68
+	},
+	closeOnOverSwipe: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	closeOnClick: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	exclusive: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	group: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	beforeClose: {
+		type: Function,
+		required: false
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	prefixClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	suffixClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
+});
+const emits = defineEmits([
+	"open",
+	"close",
+	"over-swipe",
+	"update:modelValue"
+]);
+const rootRef = shallowRef();
+const contentRef = shallowRef();
+const prefixRef = shallowRef();
+const suffixRef = shallowRef();
+let alive = true;
+let offset = 0;
+let openToken = 0;
+let trackOffset = 0;
+let gestureStartOffset = 0;
+const dragging = shallowRef(false);
+const openedSide = shallowRef(props.modelValue);
+const prefixWidth = shallowRef(0);
+const suffixWidth = shallowRef(0);
+const prefixSlotState = shallowReactive({
+	side: "prefix",
+	active: false,
+	distance: 0,
+	progress: 0,
+	overSwipe: false
+});
+const suffixSlotState = shallowReactive({
+	side: "suffix",
+	active: false,
+	distance: 0,
+	progress: 0,
+	overSwipe: false
+});
+const cellEntry = {
+	getGroup: () => props.group,
+	close: (trigger) => {
+		void setOpen(false, trigger);
+	}
+};
+const unregisterCell = registerSwipeCell(cellEntry);
+function getRootEl() {
+	return getElement(rootRef);
+}
+function applyOffset(next) {
+	offset = next;
+	if (contentRef.value) {
+		contentRef.value.style.transform = `translate3d(${next}px, 0, 0)`;
+	}
+}
+function clampOffset(raw) {
+	if (raw > 0) {
+		return prefixWidth.value > 0 ? Math.min(raw, prefixWidth.value) : 0;
+	}
+	if (raw < 0) {
+		return suffixWidth.value > 0 ? Math.max(raw, -suffixWidth.value) : 0;
+	}
+	return 0;
+}
+function openOffset(side) {
+	if (side === "prefix") {
+		return prefixWidth.value;
+	}
+	if (side === "suffix") {
+		return -suffixWidth.value;
+	}
+	return 0;
+}
+function sideOf(value) {
+	if (value > 0 && prefixWidth.value > 0) {
+		return "prefix";
+	}
+	if (value < 0 && suffixWidth.value > 0) {
+		return "suffix";
+	}
+	return false;
+}
+function syncSlots() {
+	for (const side of ["prefix", "suffix"]) {
+		const state = side === "prefix" ? prefixSlotState : suffixSlotState;
+		const width = side === "prefix" ? prefixWidth.value : suffixWidth.value;
+		const distance = Math.max(0, Math.round(side === "prefix" ? trackOffset : -trackOffset));
+		const trigger = width * props.overSwipeThreshold;
+		const progress = trigger > 0 ? Math.round(Math.min(distance / trigger, 1) * 100) / 100 : 0;
+		const overSwipe = trigger > 0 && distance >= trigger;
+		const active = distance > 0;
+		if (state.active === active && state.distance === distance && state.progress === progress && state.overSwipe === overSwipe) {
+			continue;
+		}
+		state.active = active;
+		state.distance = distance;
+		state.progress = progress;
+		state.overSwipe = overSwipe;
+	}
+}
+function syncOpenOffset() {
+	trackOffset = openOffset(openedSide.value);
+	applyOffset(trackOffset);
+	syncSlots();
+}
+function measureWidths() {
+	if (dragging.value) {
+		return;
+	}
+	prefixWidth.value = prefixRef.value?.offsetWidth ?? 0;
+	suffixWidth.value = suffixRef.value?.offsetWidth ?? 0;
+	if (openedSide.value) {
+		syncOpenOffset();
+	}
+}
+async function setOpen(side, trigger) {
+	const token = ++openToken;
+	const prev = openedSide.value || sideOf(offset);
+	if (!side && !prev) {
+		return true;
+	}
+	if (side && side === openedSide.value) {
+		syncOpenOffset();
+		return true;
+	}
+	if (!side && trigger && props.beforeClose) {
+		const allowed = await props.beforeClose(trigger);
+		if (!alive || token !== openToken) {
+			return false;
+		}
+		if (!allowed) {
+			syncOpenOffset();
+			return false;
+		}
+	} else if (!alive || token !== openToken) {
+		return false;
+	}
+	if (side) {
+		measureWidths();
+		if (props.exclusive) {
+			exclusiveOpen(cellEntry);
+		}
+	}
+	openedSide.value = side;
+	syncOpenOffset();
+	emits("update:modelValue", side);
+	if (side) {
+		emits("open", side);
+	} else {
+		emits("close");
+	}
+	return true;
+}
+function close(trigger = "outside") {
+	return setOpen(false, trigger);
+}
+function closeByTarget(target) {
+	if (props.disabled || !openedSide.value) {
+		return;
+	}
+	if (prefixRef.value?.contains(target)) {
+		void close("prefix");
+		return;
+	}
+	if (suffixRef.value?.contains(target)) {
+		void close("suffix");
+		return;
+	}
+	if (props.closeOnClick) {
+		void close("content");
+	}
+}
+function onWrapperClick(ev) {
+	if (ev.detail !== 0) {
+		return;
+	}
+	closeByTarget(ev.target);
+}
+async function releaseSwipe() {
+	// Drop `transition-none` before settling, otherwise transform snaps with no transition.
+	dragging.value = false;
+	await nextTick();
+	const side = sideOf(trackOffset);
+	const width = side === "prefix" ? prefixWidth.value : side === "suffix" ? suffixWidth.value : 0;
+	const distance = Math.abs(trackOffset);
+	if (side && width > 0 && distance >= width * props.overSwipeThreshold) {
+		emits("over-swipe", {
+			side,
+			distance,
+			width,
+			direction: side === "prefix" ? "right" : "left"
+		});
+		if (props.closeOnOverSwipe) {
+			await setOpen(false, side);
+			return;
+		}
+	}
+	const reveal = Math.min(Math.abs(offset), width);
+	const next = side && width > 0 && reveal >= width * props.threshold ? side : false;
+	if (!next && openedSide.value) {
+		await setOpen(false, openedSide.value);
+		return;
+	}
+	await setOpen(next);
+}
+useSwipeGesture(rootRef, {
+	disabled: () => props.disabled,
+	beforeStart: () => {
+		const side = openedSide.value;
+		if (!side || !props.beforeClose) {
+			return true;
+		}
+		return Promise.resolve(props.beforeClose(side)).then((allowed) => allowed && alive && !props.disabled);
+	},
+	onPress: () => {
+		openToken += 1;
+		measureWidths();
+		gestureStartOffset = trackOffset;
+	},
+	onFollow: ({ displacement }) => {
+		if (!dragging.value) {
+			dragging.value = true;
+		}
+		trackOffset = gestureStartOffset + displacement;
+		applyOffset(clampOffset(trackOffset));
+		syncSlots();
+	},
+	onRelease: ({ displacement, axisLocked, event }) => {
+		if (event.type === "pointercancel") {
+			openToken += 1;
+			syncOpenOffset();
+			return;
+		}
+		if (!axisLocked) {
+			return;
+		}
+		trackOffset = gestureStartOffset + displacement;
+		void releaseSwipe();
+	},
+	onTap: ({ startEvent, vetoed }) => {
+		if (vetoed || !startEvent) {
+			return;
+		}
+		const target = startEvent.target;
+		if (target instanceof Node) {
+			closeByTarget(target);
+		}
+	}
+});
+useOutsideClick(getRootEl, {
+	eventName: "pointerdown",
+	listenerOptions: { capture: true },
+	enabled: () => Boolean(openedSide.value) && !props.disabled,
+	onTrigger: () => {
+		void close("outside");
+	}
+});
+useResizeObserver([prefixRef, suffixRef], measureWidths);
+watch(() => props.modelValue, (value) => {
+	openToken += 1;
+	if (value === openedSide.value) {
+		syncOpenOffset();
+		return;
+	}
+	openedSide.value = value;
+	if (value) {
+		measureWidths();
+		if (props.exclusive) {
+			exclusiveOpen(cellEntry);
+		}
+	}
+	syncOpenOffset();
+});
+onMounted(() => {
+	measureWidths();
+	if (props.modelValue) {
+		syncOpenOffset();
+		if (props.exclusive) {
+			exclusiveOpen(cellEntry);
+		}
+	}
+});
+onBeforeUnmount(() => {
+	alive = false;
+	openToken += 1;
+	unregisterCell();
+});
+defineExpose({
+	close,
+	open: (side) => setOpen(side)
+});
+</script>
+
+<template>
+  <Component
+    data-swipe-cell
+    :is="as"
+    ref="rootRef"
+    class="pxd-swipe-cell relative w-full max-w-full touch-pan-y overflow-hidden"
+    v-bind="$attrs"
+    @click="onWrapperClick"
+  >
+    <div
+      v-if="$slots.prefix"
+      ref="prefixRef"
+      class="pxd-swipe-cell--prefix inset-y-0 left-0 absolute z-0 flex h-full items-center"
+      :class="prefixClass"
+    >
+      <slot name="prefix" v-bind="prefixSlotState" />
+    </div>
+
+    <div
+      ref="contentRef"
+      class="pxd-swipe-cell--content relative z-1 bg-background-100 motion-safe:transition-transform"
+      :class="[{ 'transition-none! select-none': dragging }, contentClass]"
+    >
+      <slot />
+    </div>
+
+    <div
+      v-if="$slots.suffix"
+      ref="suffixRef"
+      class="pxd-swipe-cell--suffix inset-y-0 right-0 absolute z-0 flex h-full items-center"
+      :class="suffixClass"
+    >
+      <slot name="suffix" v-bind="suffixSlotState" />
+    </div>
+  </Component>
+</template>

package/dist/components/swipe-cell/instances.d.ts

@@ -0,0 +1,7 @@
+import type { SwipeCellCloseTrigger } from './types';
+export type SwipeCellEntry = {
+    getGroup: () => string;
+    close: (trigger: SwipeCellCloseTrigger) => void;
+};
+export declare function registerSwipeCell(entry: SwipeCellEntry): () => void;
+export declare function exclusiveOpen(self: SwipeCellEntry): void;

package/dist/components/swipe-cell/instances.js

@@ -0,0 +1,17 @@
+const cells = [];
+export function registerSwipeCell(entry) {
+  cells.push(entry);
+  return () => {
+    const index = cells.indexOf(entry);
+    if (index >= 0) {
+      cells.splice(index, 1);
+    }
+  };
+}
+export function exclusiveOpen(self) {
+  for (const cell of cells) {
+    if (cell !== self && cell.getGroup() === self.getGroup()) {
+      cell.close("outside");
+    }
+  }
+}

package/dist/components/swipe-cell/types.d.ts

@@ -0,0 +1,52 @@
+import type { Awaitable, ComponentAs, ComponentClass } from '../../types/shared'
+
+export type SwipeCellSide = 'prefix' | 'suffix'
+export type SwipeCellDirection = 'left' | 'right'
+export type SwipeCellCloseTrigger = SwipeCellSide | 'content' | 'outside'
+export type SwipeCellBeforeClose = (trigger: SwipeCellCloseTrigger) => Awaitable<boolean>
+
+export interface SwipeCellOverSwipeState {
+  side: SwipeCellSide
+  direction: SwipeCellDirection
+  distance: number
+  width: number
+}
+
+export interface SwipeCellSlotState {
+  side: SwipeCellSide
+  active: boolean
+  distance: number
+  progress: number
+  overSwipe: boolean
+}
+
+export interface SwipeCellProps {
+  as?: ComponentAs
+  disabled?: boolean
+  modelValue?: SwipeCellSide | false
+  threshold?: number
+  /**
+   * Finger-travel ratio of action width needed to emit `over-swipe`.
+   * Visual offset stays clamped to the action width.
+   * @default 1.68
+   */
+  overSwipeThreshold?: number
+  closeOnOverSwipe?: boolean
+  closeOnClick?: boolean
+  /** @default true */
+  exclusive?: boolean
+  /** @default 'default' */
+  group?: string
+  /** Return false to prevent close; while open also blocks starting a swipe. */
+  beforeClose?: SwipeCellBeforeClose
+  contentClass?: ComponentClass
+  prefixClass?: ComponentClass
+  suffixClass?: ComponentClass
+}
+
+export interface SwipeCellEmits {
+  open: [side: SwipeCellSide]
+  close: []
+  'over-swipe': [state: SwipeCellOverSwipeState]
+  'update:modelValue': [side: SwipeCellSide | false]
+}

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

@@ -11,7 +11,7 @@ declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: NonNullable<string | number | undefined>) => any) | undefined;
 }>, {
     modelValue: string | number;
-    options: import("../../types/shared").ComponentOption[];
+    options: import("../../types/shared/props.js").ComponentOption[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;