pxd 0.0.64 → 0.1.3

package/dist/components/carousel/index.vue

@@ -1,27 +1,78 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
-import { useSwipeGesture } from "../../composables/use-swipe-gesture";
-import { provideCarouselContext } from "../../contexts/carousel";
-import { awaitAnimationEnd } from "../../utils/dom";
-import { getCssUnitValue } from "../../utils/format";
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useSlots } from "vue";
+import { useSwipeGesture } from "../../composables/_internal/use-swipe-gesture.js";
+import { awaitAnimationEnd } from "../../utils/dom.js";
+import { getCssUnitValue } from "../../utils/format.js";
 defineOptions({
-  name: "PCarousel",
-  inheritAttrs: false
+	name: "PCarousel",
+	inheritAttrs: false
 });
 const props = defineProps({
-  index: { type: Number, required: false, default: 0 },
-  loop: { type: Boolean, required: false, default: true },
-  arrow: { type: Boolean, required: false, default: true },
-  height: { type: [Number, String], required: false, default: 180 },
-  autoplay: { type: Boolean, required: false, default: true },
-  interval: { type: Number, required: false, default: 3e3 },
-  indicator: { type: Boolean, required: false, default: true },
-  direction: { type: String, required: false, default: "horizontal" },
-  indicatorType: { type: String, required: false, default: "dot" },
-  indicatorPosition: { type: String, required: false, default: "center" },
-  pauseOnHover: { type: Boolean, required: false, default: true },
-  toggleOnWheel: { type: Boolean, required: false }
+	index: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	loop: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	arrow: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	height: {
+		type: [Number, String],
+		required: false,
+		default: 180
+	},
+	autoplay: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	interval: {
+		type: Number,
+		required: false,
+		default: 3e3
+	},
+	indicator: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: "horizontal"
+	},
+	indicatorType: {
+		type: String,
+		required: false,
+		default: "dot"
+	},
+	indicatorPosition: {
+		type: String,
+		required: false,
+		default: "center"
+	},
+	pauseOnHover: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	toggleOnWheel: {
+		type: Boolean,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	}
 });
 const emits = defineEmits(["change"]);
 let isToggling = false;
@@ -29,197 +80,198 @@ let pendingDelta = null;
 let autoPlayTimerId = null;
 let isPointerEntering = false;
 let maxDrag = 0;
-const carousels = ref([]);
 const sliderRef = shallowRef();
 const virtualIndex = shallowRef(props.index);
 const gestureMoveOffset = shallowRef(0);
+const slideCount = computed(() => props.options.length);
 const displayIndex = computed(() => {
-  const length = carousels.value.length;
-  if (length === 0) {
-    return 0;
-  }
-  return (virtualIndex.value % length + length) % length;
+	const length = slideCount.value;
+	if (length === 0) {
+		return 0;
+	}
+	return (virtualIndex.value % length + length) % length;
 });
 const isAtFirst = computed(() => displayIndex.value === 0);
-const isAtLast = computed(() => displayIndex.value === carousels.value.length - 1);
+const isAtLast = computed(() => displayIndex.value === slideCount.value - 1);
 const isHorizontal = computed(() => props.direction === "horizontal");
+const isLooping = computed(() => props.loop && slideCount.value > 1);
 const computedStyle = computed(() => {
-  const translateValue = `calc(${virtualIndex.value * -100}% + ${gestureMoveOffset.value}px)`;
-  return {
-    transform: `translate${isHorizontal.value ? "X" : "Y"}(${translateValue})`
-  };
+	const translateValue = `calc(${virtualIndex.value * -100}% + ${gestureMoveOffset.value}px)`;
+	return { transform: `translate${isHorizontal.value ? "X" : "Y"}(${translateValue})` };
 });
+const rootStyle = computed(() => {
+	return {
+		height: getCssUnitValue(props.height),
+		"--carousel-item-count": slideCount.value
+	};
+});
+const loopPlacement = computed(() => {
+	const length = slideCount.value;
+	const lastIndex = length - 1;
+	if (!isLooping.value) {
+		return "none";
+	}
+	if (virtualIndex.value <= 0) {
+		return "start";
+	}
+	if (virtualIndex.value >= lastIndex) {
+		return "end";
+	}
+	return "none";
+});
+const slots = useSlots();
 useSwipeGesture(sliderRef, {
-  direction: () => props.direction,
-  onPress: ({ size }) => {
-    maxDrag = size;
-    gestureMoveOffset.value = 0;
-    onPointerEnter();
-  },
-  onFollow: (ev) => {
-    if (!props.loop && (isAtFirst.value && ev.delta > 0 || isAtLast.value && ev.delta < 0)) {
-      return;
-    }
-    gestureMoveOffset.value = Math.max(-maxDrag, Math.min(maxDrag, ev.displacement));
-  },
-  onRelease: ({ swiped, direction }) => {
-    gestureMoveOffset.value = 0;
-    onPointerLeave();
-    if (!swiped || !direction) {
-      return;
-    }
-    if (isHorizontal.value) {
-      performToggle(direction === "left" ? 1 : -1);
-    } else {
-      performToggle(direction === "top" ? 1 : -1);
-    }
-  }
+	axis: () => props.direction,
+	onPress: ({ size }) => {
+		maxDrag = size;
+		gestureMoveOffset.value = 0;
+		onPointerEnter();
+	},
+	onFollow: (ev) => {
+		if (!props.loop && (isAtFirst.value && ev.delta > 0 || isAtLast.value && ev.delta < 0)) {
+			return;
+		}
+		gestureMoveOffset.value = Math.max(-maxDrag, Math.min(maxDrag, ev.displacement));
+	},
+	onRelease: ({ swiped, direction }) => {
+		gestureMoveOffset.value = 0;
+		onPointerLeave();
+		if (!swiped || !direction) {
+			return;
+		}
+		if (isHorizontal.value) {
+			performToggle(direction === "left" ? 1 : -1);
+		} else {
+			performToggle(direction === "top" ? 1 : -1);
+		}
+	}
 });
 async function performToggle(delta) {
-  const length = carousels.value.length;
-  if (length === 0) {
-    return;
-  }
-  await awaitAnimationEnd(sliderRef.value);
-  if (props.loop) {
-    virtualIndex.value += delta;
-    await nextTick();
-    await awaitAnimationEnd(sliderRef.value);
-    if (virtualIndex.value >= length) {
-      await resetSliderPosition(0);
-    } else if (virtualIndex.value <= -1) {
-      await resetSliderPosition(length - 1);
-    }
-  } else {
-    virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
-  }
-  emits("change", virtualIndex.value);
-  restartAutoPlay();
+	const length = slideCount.value;
+	if (length === 0) {
+		return;
+	}
+	await awaitAnimationEnd(sliderRef.value);
+	if (isLooping.value) {
+		virtualIndex.value += delta;
+		await nextTick();
+		await awaitAnimationEnd(sliderRef.value);
+		if (virtualIndex.value >= length) {
+			await resetSliderPosition(0);
+		} else if (virtualIndex.value <= -1) {
+			await resetSliderPosition(length - 1);
+		}
+	} else {
+		virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
+	}
+	emits("change", virtualIndex.value);
+	restartAutoPlay();
 }
 async function onToggleClick(delta) {
-  if (isToggling) {
-    pendingDelta = delta;
-    return;
-  }
-  isToggling = true;
-  try {
-    await performToggle(delta);
-    while (pendingDelta != null) {
-      const next = pendingDelta;
-      pendingDelta = null;
-      await performToggle(next);
-    }
-  } finally {
-    isToggling = false;
-  }
+	if (isToggling) {
+		pendingDelta = delta;
+		return;
+	}
+	isToggling = true;
+	try {
+		await performToggle(delta);
+		while (pendingDelta != null) {
+			const next = pendingDelta;
+			pendingDelta = null;
+			await performToggle(next);
+		}
+	} finally {
+		isToggling = false;
+	}
 }
 function onWheelToggle(ev) {
-  if (!props.toggleOnWheel) {
-    return;
-  }
-  const length = carousels.value.length;
-  if (length <= 1) {
-    return;
-  }
-  const delta = ev.deltaY > 0 ? 1 : -1;
-  if (!props.loop) {
-    const isAtFirstAndGoPrev = isAtFirst.value && delta < 0;
-    const isAtLastAndGoNext = isAtLast.value && delta > 0;
-    if (isAtFirstAndGoPrev || isAtLastAndGoNext) {
-      return;
-    }
-  }
-  if (ev.cancelable) {
-    ev.preventDefault();
-  }
-  onToggleClick(delta);
+	if (!props.toggleOnWheel) {
+		return;
+	}
+	const length = slideCount.value;
+	if (length <= 1) {
+		return;
+	}
+	const delta = ev.deltaY > 0 ? 1 : -1;
+	if (!props.loop) {
+		const isAtFirstAndGoPrev = isAtFirst.value && delta < 0;
+		const isAtLastAndGoNext = isAtLast.value && delta > 0;
+		if (isAtFirstAndGoPrev || isAtLastAndGoNext) {
+			return;
+		}
+	}
+	if (ev.cancelable) {
+		ev.preventDefault();
+	}
+	onToggleClick(delta);
 }
 async function resetSliderPosition(resetIndex) {
-  const el = sliderRef.value;
-  if (!el) {
-    return;
-  }
-  el.style.transition = "none";
-  virtualIndex.value = resetIndex;
-  await nextTick();
-  void el.offsetHeight;
-  el.style.transition = "";
+	const el = sliderRef.value;
+	if (!el) {
+		return;
+	}
+	el.style.transition = "none";
+	virtualIndex.value = resetIndex;
+	await nextTick();
+	void el.offsetHeight;
+	el.style.transition = "";
 }
 function clearAutoPlayTimer() {
-  if (autoPlayTimerId != null) {
-    clearTimeout(autoPlayTimerId);
-    autoPlayTimerId = null;
-  }
+	if (autoPlayTimerId != null) {
+		clearTimeout(autoPlayTimerId);
+		autoPlayTimerId = null;
+	}
 }
 function restartAutoPlay() {
-  clearAutoPlayTimer();
-  if (!props.autoplay || isPointerEntering) {
-    return;
-  }
-  autoPlayTimerId = setTimeout(() => {
-    onToggleClick(1);
-  }, props.interval);
+	clearAutoPlayTimer();
+	if (!props.autoplay || isPointerEntering) {
+		return;
+	}
+	autoPlayTimerId = setTimeout(() => {
+		onToggleClick(1);
+	}, props.interval);
 }
 function onPointerEnter() {
-  if (props.pauseOnHover) {
-    isPointerEntering = true;
-    clearAutoPlayTimer();
-  }
+	if (props.pauseOnHover) {
+		isPointerEntering = true;
+		clearAutoPlayTimer();
+	}
 }
 function onPointerLeave() {
-  isPointerEntering = false;
-  restartAutoPlay();
+	isPointerEntering = false;
+	restartAutoPlay();
 }
 function onIndicatorClick(ev) {
-  const targetEl = ev.target.closest("[data-index]");
-  const targetIndex = Number(targetEl?.dataset.index);
-  if (Number.isNaN(targetIndex)) {
-    return;
-  }
-  const deltaIndex = targetIndex - displayIndex.value;
-  if (deltaIndex !== 0) {
-    clearAutoPlayTimer();
-    onToggleClick(deltaIndex);
-  }
-}
-function updateItemIndex() {
-  carousels.value.forEach((carousel, i) => {
-    carousel.updateItemIndex(i);
-  });
+	const targetEl = ev.target.closest("[data-index]");
+	const targetIndex = Number(targetEl?.dataset.index);
+	if (Number.isNaN(targetIndex)) {
+		return;
+	}
+	const deltaIndex = targetIndex - displayIndex.value;
+	if (deltaIndex !== 0) {
+		clearAutoPlayTimer();
+		onToggleClick(deltaIndex);
+	}
 }
-function registerCarousel(state) {
-  carousels.value.push(state);
-  updateItemIndex();
-}
-function unregisterCarousel(id) {
-  carousels.value = carousels.value.filter(({ uid }) => uid !== id);
-  updateItemIndex();
-}
-provideCarouselContext({
-  props,
-  carousels,
-  virtualIndex,
-  registerCarousel,
-  unregisterCarousel
-});
 onMounted(async () => {
-  await nextTick();
-  restartAutoPlay();
+	await nextTick();
+	restartAutoPlay();
 });
 onBeforeUnmount(() => {
-  clearAutoPlayTimer();
-  carousels.value = [];
+	clearAutoPlayTimer();
 });
 </script>
 
 <template>
   <div
+    data-carousel
     v-bind="$attrs"
     :data-orientation="direction"
     :data-indicator-type="indicatorType"
     :data-indicator-position="indicatorPosition"
+    :data-loop-placement="loopPlacement"
     class="pxd-carousel group relative w-full touch-none overflow-hidden"
-    :style="{ height: getCssUnitValue(height) }"
+    :style="rootStyle"
     @pointerenter="onPointerEnter"
     @pointerleave="onPointerLeave"
     @wheel="onWheelToggle"
@@ -230,7 +282,14 @@ onBeforeUnmount(() => {
         class="pxd-carousel--slider translate-z-0 size-full active:transition-none motion-safe:transition-transform"
         :style="computedStyle"
       >
-        <slot />
+        <template v-for="(option, index) in options" :key="option.value || index">
+          <div
+            class="pxd-carousel-item size-full shrink-0 content-visibility-auto intrinsic-size-auto"
+          >
+            <slot v-if="slots.item" name="item" :item="option" :index="index" />
+            <template v-else>{{ option.label }}</template>
+          </div>
+        </template>
       </div>
     </div>
 
@@ -239,9 +298,9 @@ onBeforeUnmount(() => {
       class="pxd-carousel--indicator gap-2 absolute z-1 flex w-max items-center"
       @click="onIndicatorClick"
     >
-      <slot name="indicator" :current="displayIndex" :total="carousels.length">
+      <slot name="indicator" :current="displayIndex" :total="slideCount">
         <button
-          v-for="(_, i) in carousels.length"
+          v-for="(_, i) in slideCount"
           :key="i"
           :data-index="i"
           class="pxd-carousel--indicator-item relative h-(--carousel-dot-height) w-(--carousel-dot-width) cursor-pointer appearance-none rounded-full bg-gray-alpha-200 font-inherit self-focus-ring outline-none hover:bg-gray-alpha-400 motion-safe:transition-colors"
@@ -274,116 +333,6 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-carousel {
-  &[data-indicator-type='dot'] {
-    --carousel-dot-width: 0.5rem;
-    --carousel-dot-height: 0.5rem;
-  }
-
-  &[data-indicator-type='line'] {
-    &[data-indicator-position='top'],
-    &[data-indicator-position='bottom'],
-    &[data-indicator-position='center'] {
-      --carousel-dot-width: 1rem;
-      --carousel-dot-height: 0.25rem;
-    }
-
-    &[data-indicator-position='left'],
-    &[data-indicator-position='right'] {
-      --carousel-dot-width: 0.25rem;
-      --carousel-dot-height: 1rem;
-    }
-  }
-
-  &[data-indicator-position='top'] {
-    .pxd-carousel--indicator {
-      left: 0.75rem;
-      top: 0.5rem;
-    }
-
-    .pxd-carousel--toggler {
-      right: 0.5rem;
-      top: 0.5rem;
-    }
-  }
-
-  &[data-indicator-position='bottom'] {
-    .pxd-carousel--indicator {
-      left: 0.75rem;
-      bottom: 0.5rem;
-    }
-
-    .pxd-carousel--toggler {
-      right: 0.5rem;
-      bottom: 0.5rem;
-    }
-  }
-
-  &[data-indicator-position='left'] {
-    .pxd-carousel--indicator {
-      left: 0.5rem;
-      top: 0.75rem;
-    }
-
-    .pxd-carousel--toggler {
-      left: 0.5rem;
-      bottom: 0.5rem;
-    }
-  }
-
-  &[data-indicator-position='right'] {
-    .pxd-carousel--indicator {
-      right: 0.5rem;
-      top: 0.75rem;
-    }
-
-    .pxd-carousel--toggler {
-      right: 0.5rem;
-      bottom: 0.5rem;
-    }
-  }
-
-  &[data-indicator-position='center'] {
-    .pxd-carousel--indicator {
-      left: 50%;
-      bottom: 0.5rem;
-      transform: translateX(-50%);
-    }
-
-    .pxd-carousel--toggler {
-      left: 0;
-      top: 50%;
-      width: 100%;
-      padding-inline: 1rem;
-      justify-content: space-between;
-      transform: translateY(-50%);
-    }
-  }
-
-  &[data-indicator-position='left'],
-  &[data-indicator-position='right'] {
-    .pxd-carousel--indicator,
-    .pxd-carousel--toggler {
-      flex-direction: column;
-    }
-  }
-
-  &[data-orientation='horizontal'] .pxd-carousel--slider {
-    display: flex;
-  }
-
-  &[data-orientation='vertical'] {
-    .pxd-carousel--prev-btn,
-    .pxd-carousel--next-btn {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.pxd-carousel--indicator-item::before {
-  content: '';
-  position: absolute;
-  inset: -0.25rem;
-}
+<style>
+.pxd-carousel[data-indicator-type=dot]{--carousel-dot-width:0.5rem;--carousel-dot-height:0.5rem}.pxd-carousel[data-indicator-type=line][data-indicator-position=bottom],.pxd-carousel[data-indicator-type=line][data-indicator-position=center],.pxd-carousel[data-indicator-type=line][data-indicator-position=top]{--carousel-dot-width:1rem;--carousel-dot-height:0.25rem}.pxd-carousel[data-indicator-type=line][data-indicator-position=left],.pxd-carousel[data-indicator-type=line][data-indicator-position=right]{--carousel-dot-width:0.25rem;--carousel-dot-height:1rem}.pxd-carousel[data-indicator-position=top] .pxd-carousel--indicator{left:.75rem;top:.5rem}.pxd-carousel[data-indicator-position=top] .pxd-carousel--toggler{right:.5rem;top:.5rem}.pxd-carousel[data-indicator-position=bottom] .pxd-carousel--indicator{bottom:.5rem;left:.75rem}.pxd-carousel[data-indicator-position=bottom] .pxd-carousel--toggler{bottom:.5rem;right:.5rem}.pxd-carousel[data-indicator-position=left] .pxd-carousel--indicator{left:.5rem;top:.75rem}.pxd-carousel[data-indicator-position=left] .pxd-carousel--toggler{bottom:.5rem;left:.5rem}.pxd-carousel[data-indicator-position=right] .pxd-carousel--indicator{right:.5rem;top:.75rem}.pxd-carousel[data-indicator-position=right] .pxd-carousel--toggler{bottom:.5rem;right:.5rem}.pxd-carousel[data-indicator-position=center] .pxd-carousel--indicator{bottom:.5rem;left:50%;transform:translateX(-50%)}.pxd-carousel[data-indicator-position=center] .pxd-carousel--toggler{justify-content:space-between;left:0;padding-inline:1rem;top:50%;transform:translateY(-50%);width:100%}.pxd-carousel[data-indicator-position=left] .pxd-carousel--indicator,.pxd-carousel[data-indicator-position=left] .pxd-carousel--toggler,.pxd-carousel[data-indicator-position=right] .pxd-carousel--indicator,.pxd-carousel[data-indicator-position=right] .pxd-carousel--toggler{flex-direction:column}.pxd-carousel[data-orientation=horizontal] .pxd-carousel--slider{display:flex}.pxd-carousel[data-loop-placement=end] .pxd-carousel-item:first-child{transform:translateX(calc(var(--carousel-item-count)*100%))}.pxd-carousel[data-loop-placement=start] .pxd-carousel-item:last-child{transform:translateX(calc(var(--carousel-item-count)*-100%))}.pxd-carousel[data-orientation=vertical][data-loop-placement=end] .pxd-carousel-item:first-child{transform:translateY(calc(var(--carousel-item-count)*100%))}.pxd-carousel[data-orientation=vertical][data-loop-placement=start] .pxd-carousel-item:last-child{transform:translateY(calc(var(--carousel-item-count)*-100%))}.pxd-carousel[data-orientation=vertical] .pxd-carousel--next-btn,.pxd-carousel[data-orientation=vertical] .pxd-carousel--prev-btn{transform:rotate(90deg)}.pxd-carousel--indicator-item:before{content:"";inset:-.25rem;position:absolute}
 </style>

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

@@ -1,4 +1,17 @@
-import type { BasePosition, ComponentDirection } from '../../types/shared'
+import type {
+  BasePosition,
+  ComponentDirection,
+  ComponentLabel,
+  ComponentValue,
+} from '../../types/shared/props'
+
+export interface CarouselOption {
+  /** Rendered as the slide content when no `item` slot is provided. */
+  label?: ComponentLabel
+  /** Used as the vnode key; falls back to the slide index. */
+  value?: ComponentValue
+  [key: string]: any
+}
 
 export interface CarouselProps {
   index?: number
@@ -13,6 +26,7 @@ export interface CarouselProps {
   indicatorPosition?: BasePosition | 'center'
   pauseOnHover?: boolean
   toggleOnWheel?: boolean
+  options?: CarouselOption[]
 }
 
 export interface CarouselEmits {

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

@@ -4,13 +4,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
+    change: (args_0: NonNullable<import("./types").CheckboxModelValue>) => any;
+    "update:modelValue": (args_0: NonNullable<import("./types").CheckboxModelValue>) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<import("./types").CheckboxModelValue>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("./types").CheckboxModelValue>) => any) | undefined;
 }>, {
-    value: import("../../types/shared").ComponentValue;
+    value: import("./types").CheckboxModelValue;
+    shape: import("../../types/shared/props.js").ComponentShape;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;