pxd 0.0.64 → 0.1.3

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_9: {
+    side: SwipeCellSide;
+    active: boolean;
+    distance: number;
+    progress: number;
+    overSwipe: boolean;
+}, __VLS_11: {}, __VLS_13: {
+    side: SwipeCellSide;
+    active: boolean;
+    distance: number;
+    progress: number;
+    overSwipe: boolean;
+};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    suffix?: (props: typeof __VLS_13) => 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: false | SwipeCellSide;
+    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 { exclusiveOpen, registerSwipeCell } from "../../utils/_internal/swipe-cell-instances.js";
+import { getElement } from "../../utils/dom.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"
+]);
+let alive = true;
+let offset = 0;
+let openToken = 0;
+let trackOffset = 0;
+let gestureStartOffset = 0;
+const cellEntry = {
+	getGroup: () => props.group,
+	close: (trigger) => {
+		void setOpen(false, trigger);
+	}
+};
+const unregisterCell = registerSwipeCell(cellEntry);
+const rootRef = shallowRef();
+const contentRef = shallowRef();
+const prefixRef = shallowRef();
+const suffixRef = shallowRef();
+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
+});
+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);
+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);
+}
+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/types.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentAs, ComponentClass } from '../../types/shared/props'
+import type { Awaitable } from '../../types/shared/utils'
+
+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;

package/dist/components/switch/index.vue

@@ -1,41 +1,62 @@
 <script setup>
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { provideSwitchContext } from "../../contexts/switch";
-import { getFallbackValue } from "../../utils/get";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { provideSwitchContext } from "../../contexts/switch.js";
+import { getUniqueId, getFallbackValue } from "../../utils/helper.js";
 import PSwitchItem from "../switch-item/index.vue";
 defineOptions({
-  name: "PSwitch",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PSwitch",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  fullWidth: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  options: { type: Array, required: false, default: () => [] },
-  modelValue: { type: [String, Number], required: false, default: "" }
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	fullWidth: {
+		type: Boolean,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	modelValue: {
+		type: [String, Number],
+		required: false,
+		default: ""
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const SIZES = {
-  sm: `${BASIC_HEIGHTS.sm} text-13`,
-  md: `${BASIC_HEIGHTS.md} text-sm`,
-  lg: `${BASIC_HEIGHTS.lg} text-base`
+	sm: `${BASIC_HEIGHTS.sm} text-13`,
+	md: `${BASIC_HEIGHTS.md} text-sm`,
+	lg: `${BASIC_HEIGHTS.lg} text-base`
 };
 const configProvider = useConfigProvider();
-const modelValue = useModelValue(props, emits);
 const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
-provideSwitchContext({ props, emits, name: getUniqueId() });
+const modelValue = useModelValue(props, emits);
+provideSwitchContext({
+	props,
+	emits,
+	name: getUniqueId()
+});
 </script>
 
 <template>
   <div
+    data-switch
     class="pxd-switch p-1 flex touch-manipulation rounded-lg border"
     :class="[fullWidth ? 'w-full' : 'w-max', computedSize]"
     v-bind="$attrs"

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

@@ -1,4 +1,4 @@
-import type { ComponentOption, ComponentSize } from '../../types/shared'
+import type { ComponentOption, ComponentSize } from '../../types/shared/props'
 
 export interface SwitchProps {
   disabled?: boolean