pxd 0.0.64 → 0.1.3

package/dist/components/time-picker/index.vue

@@ -1,198 +1,279 @@
 <script setup>
-import CalendarIcon from "@gdsicon/vue/calendar";
-import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
-import { usePopoverResponsive } from "../../composables/use-popover-responsive";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { dayjs } from "../../utils/date";
-import { clampValue } from "../../utils/format";
-import { throttleByRaf } from "../../utils/timing";
+import ClockIcon from "@gdsicon/vue/clock";
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { dayjs } from "../../utils/date.js";
+import { throttleByRaf } from "../../utils/event.js";
+import { clampValue } from "../../utils/format.js";
+import { isNil } from "../../utils/is.js";
 import PButton from "../button/index.vue";
 import PInput from "../input/index.vue";
 import PPopover from "../popover/index.vue";
 defineOptions({
-  name: "PTimePicker",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PTimePicker",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
-  presets: { type: Array, required: false, default: () => [] },
-  disabled: { type: Boolean, required: false },
-  clearable: { type: Boolean, required: false },
-  modelValue: { type: [Date, String, Number, null], required: false, default: "" },
-  prefixIcon: { type: Boolean, required: false, default: true },
-  placeholder: { type: String, required: false },
-  showSeconds: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false, default: true },
-  format: { type: String, required: false, default: "HH:mm:ss" },
-  valueFormat: { type: String, required: false, default: "HH:mm:ss" }
+	size: {
+		type: String,
+		required: false
+	},
+	error: {
+		type: [Boolean, String],
+		required: false
+	},
+	presets: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	clearable: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			Number,
+			String,
+			Date,
+			null
+		],
+		required: false,
+		default: ""
+	},
+	suffixIcon: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	showSeconds: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	labelFormat: {
+		type: String,
+		required: false
+	},
+	valueFormat: {
+		type: String,
+		required: false,
+		default: "HH:mm:ss"
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const HEIGHT = 32;
 const VALUE_POSITION_MAP = {
-  hour: 0,
-  minute: 1,
-  second: 2
+	hour: 0,
+	minute: 1,
+	second: 2
 };
 const paddedTimes = {
-  hours: Array.from({ length: 24 }, (_, i) => padStringZero(i)),
-  minutes: Array.from({ length: 60 }, (_, i) => padStringZero(i)),
-  seconds: Array.from({ length: 60 }, (_, i) => padStringZero(i))
+	hours: Array.from({ length: 24 }, (_, i) => padStringZero(i)),
+	minutes: Array.from({ length: 60 }, (_, i) => padStringZero(i)),
+	seconds: Array.from({ length: 60 }, (_, i) => padStringZero(i))
 };
-const configProvider = useConfigProvider();
-const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const scrollTimers = [];
 const timeHoursRef = shallowRef();
 const timeMinutesRef = shallowRef();
 const timeSecondsRef = shallowRef();
 const popoverVisible = shallowRef(false);
 const dayjsDateTime = shallowRef(null);
-const modelValue = computed({
-  get() {
-    return dayjsDateTime.value ? dayjsDateTime.value.format(props.format) : "";
-  },
-  set(value) {
-    emits("change", value);
-    emits("update:modelValue", value);
-  }
-});
-const scrollTimers = [];
 const onTimeListScroll = throttleByRaf((ev) => {
-  const target = ev.target;
-  const value = Math.round(target.scrollTop / HEIGHT);
-  const type = target.dataset.type;
-  const index = VALUE_POSITION_MAP[type];
-  const clampedValue = clampValue(value, 0, type === "hour" ? 23 : 59);
-  clearTimeout(scrollTimers[index]);
-  scrollTimers[index] = setTimeout(() => {
-    target.scrollTo({
-      top: clampedValue * HEIGHT,
-      behavior: "smooth"
-    });
-    if (!dayjsDateTime.value) {
-      return;
-    }
-    dayjsDateTime.value = dayjsDateTime.value.set(type, clampedValue);
-  }, 100);
+	const target = ev.target;
+	const value = Math.round(target.scrollTop / HEIGHT);
+	const type = target.dataset.type;
+	const index = VALUE_POSITION_MAP[type];
+	const clampedValue = clampValue(value, 0, type === "hour" ? 23 : 59);
+	clearTimeout(scrollTimers[index]);
+	scrollTimers[index] = setTimeout(() => {
+		target.scrollTo({
+			top: clampedValue * HEIGHT,
+			behavior: "smooth"
+		});
+		if (!dayjsDateTime.value) {
+			return;
+		}
+		dayjsDateTime.value = dayjsDateTime.value.set(type, clampedValue);
+	}, 100);
 });
+const committedValue = shallowRef("");
+const configProvider = useConfigProvider();
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const modelValue = useModelValue(props, emits, { get() {
+	return dayjsDateTime.value ? dayjsDateTime.value.format(props.labelFormat ?? "HH:mm:ss") : "";
+} });
 function padStringZero(value) {
-  return String(value).padStart(2, "0");
+	return String(value).padStart(2, "0");
 }
 function togglePopoverVisible(visible) {
-  popoverVisible.value = visible;
+	popoverVisible.value = visible;
 }
 function updateDayjsDateTime(value) {
-  if (!value) {
-    dayjsDateTime.value = null;
-    return;
-  }
-  const newDateTime = getFormattedValue(value);
-  dayjsDateTime.value = newDateTime.isValid() ? newDateTime : null;
+	if (!value) {
+		dayjsDateTime.value = null;
+		return;
+	}
+	const newDateTime = getFormattedValue(value);
+	dayjsDateTime.value = newDateTime.isValid() ? newDateTime : null;
 }
 function getFormattedValue(value) {
-  if (value == null || value === "") {
-    return dayjs();
-  }
-  let _value;
-  if (typeof value === "string") {
-    const formatDate = dayjs(/* @__PURE__ */ new Date()).format("YYYY-MM-DD");
-    _value = `${formatDate} ${value}`;
-  } else if (value instanceof Date) {
-    _value = value;
-  } else {
-    _value = new Date(value);
-  }
-  return dayjs(_value);
+	if (isNil(value) || value === "") {
+		return dayjs();
+	}
+	let _value;
+	if (typeof value === "string") {
+		const formatDate = dayjs(new Date()).format("YYYY-MM-DD");
+		_value = `${formatDate} ${value}`;
+	} else if (value instanceof Date) {
+		_value = value;
+	} else {
+		_value = new Date(value);
+	}
+	return dayjs(_value);
 }
 function setTimesScrollTop() {
-  if (!dayjsDateTime.value) {
-    dayjsDateTime.value = dayjs();
-  }
-  const elList = [timeHoursRef.value, timeMinutesRef.value, timeSecondsRef.value];
-  const modelValueList = [
-    dayjsDateTime.value.hour(),
-    dayjsDateTime.value.minute(),
-    dayjsDateTime.value.second()
-  ];
-  elList.forEach((el, i) => {
-    const scrollTop = modelValueList[i] * HEIGHT;
-    el?.scrollTo({ top: scrollTop });
-  });
+	if (!dayjsDateTime.value) {
+		dayjsDateTime.value = dayjs();
+	}
+	const elList = [
+		timeHoursRef.value,
+		timeMinutesRef.value,
+		timeSecondsRef.value
+	];
+	const modelValueList = [
+		dayjsDateTime.value.hour(),
+		dayjsDateTime.value.minute(),
+		dayjsDateTime.value.second()
+	];
+	elList.forEach((el, i) => {
+		const scrollTop = modelValueList[i] * HEIGHT;
+		el?.scrollTo({
+			top: scrollTop,
+			behavior: "instant"
+		});
+	});
 }
 function onTimeListClick(ev) {
-  const target = ev.target;
-  if (target.tagName !== "LI") {
-    return;
-  }
-  const scrollContainer = target.parentNode;
-  if (!scrollContainer) {
-    return;
-  }
-  const containerRect = scrollContainer.getBoundingClientRect();
-  const targetRect = target.getBoundingClientRect();
-  const containerCenter = containerRect.height / 2;
-  const targetCenter = targetRect.height / 2;
-  const targetOffsetFromTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
-  const newScrollTop = targetOffsetFromTop - containerCenter + targetCenter;
-  scrollContainer.scrollTo({
-    top: Math.max(0, newScrollTop),
-    behavior: "smooth"
-  });
+	const target = ev.target;
+	if (target.tagName !== "LI") {
+		return;
+	}
+	const scrollContainer = target.parentNode;
+	if (!scrollContainer) {
+		return;
+	}
+	// Calculate the scroll position to center the target within its scroll container
+	const containerRect = scrollContainer.getBoundingClientRect();
+	const targetRect = target.getBoundingClientRect();
+	const containerCenter = containerRect.height / 2;
+	const targetCenter = targetRect.height / 2;
+	const targetOffsetFromTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
+	const newScrollTop = targetOffsetFromTop - containerCenter + targetCenter;
+	scrollContainer.scrollTo({
+		top: Math.max(0, newScrollTop),
+		behavior: "smooth"
+	});
+}
+function formatEmittedValue() {
+	if (!dayjsDateTime.value) {
+		return "";
+	}
+	if (props.valueFormat === "timestamp") {
+		return dayjsDateTime.value.valueOf();
+	}
+	return dayjsDateTime.value.format(props.valueFormat);
 }
 function updateModelValue() {
-  modelValue.value = dayjsDateTime.value ? dayjsDateTime.value.format(props.valueFormat) : "";
+	const nextValue = formatEmittedValue();
+	if (committedValue.value === nextValue) {
+		return;
+	}
+	committedValue.value = nextValue;
+	modelValue.value = nextValue;
+}
+function syncFromModelValue(value) {
+	updateDayjsDateTime(value);
+	committedValue.value = formatEmittedValue();
 }
 function onInputValueChange(value) {
-  updateDayjsDateTime(value);
-  updateModelValue();
-  togglePopoverVisible(false);
+	if (value === "") {
+		updateDayjsDateTime("");
+		updateModelValue();
+		togglePopoverVisible(false);
+		return;
+	}
+	const newDateTime = getFormattedValue(value);
+	if (newDateTime.isValid()) {
+		dayjsDateTime.value = newDateTime;
+		updateModelValue();
+	}
+	togglePopoverVisible(false);
 }
 function onPresetClick(ev) {
-  const target = ev.target;
-  if (target.tagName !== "BUTTON") {
-    return;
-  }
-  const index = Number(target.dataset.index);
-  if (Number.isNaN(index)) {
-    return;
-  }
-  const presetValue = props.presets[index].getDate();
-  if (!presetValue) {
-    return;
-  }
-  updateDayjsDateTime(presetValue);
-  updateModelValue();
-  togglePopoverVisible(false);
+	const target = ev.target;
+	if (target.tagName !== "BUTTON") {
+		return;
+	}
+	const index = Number(target.dataset.index);
+	if (Number.isNaN(index)) {
+		return;
+	}
+	const presetValue = props.presets[index].getDate();
+	if (!presetValue) {
+		return;
+	}
+	updateDayjsDateTime(presetValue);
+	updateModelValue();
+	togglePopoverVisible(false);
 }
 function onSetNowClick() {
-  updateDayjsDateTime(/* @__PURE__ */ new Date());
-  updateModelValue();
-  togglePopoverVisible(false);
+	updateDayjsDateTime(new Date());
+	updateModelValue();
+	togglePopoverVisible(false);
 }
 function onCancelClick() {
-  updateDayjsDateTime(props.modelValue);
-  togglePopoverVisible(false);
+	updateDayjsDateTime(props.modelValue);
+	togglePopoverVisible(false);
 }
-watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
+watch(() => props.modelValue, syncFromModelValue, { immediate: true });
 onBeforeUnmount(() => {
-  scrollTimers.forEach((timer) => clearTimeout(timer));
-  onTimeListScroll.cancel();
+	scrollTimers.forEach((timer) => clearTimeout(timer));
+	onTimeListScroll.cancel();
 });
 </script>
 
 <template>
   <PPopover
+    data-time-picker
     v-model="popoverVisible"
     class="pxd-time-picker w-full"
     trigger="click"
     :disabled="disabled"
     :class="$attrs.class"
     :style="$attrs.style"
-    :toggle-on-trigger="false"
     :adaptive="isAdaptive"
+    :toggle-on-trigger="false"
+    :fill-trigger-width="false"
     :wrapper-class="responsiveClasses.wrapper"
     :content-class="responsiveClasses.content"
     :lock-scroll-on-visible="isAdaptive"
@@ -208,26 +289,30 @@ onBeforeUnmount(() => {
       :clearable="clearable"
       :model-value="modelValue"
       :placeholder="placeholder"
-      :default-prefix-style="false"
+      :default-suffix-style="false"
       :data-focusing="popoverVisible"
-      :select-on-focus="!isAdaptive"
       v-bind="$attrs"
       @clear="onInputValueChange"
       @change="onInputValueChange"
       @keydown.enter="togglePopoverVisible(true)"
     >
-      <template v-if="prefixIcon" #prefix>
-        <CalendarIcon class="ml-3" />
+      <template v-if="suffixIcon" #suffix>
+        <ClockIcon class="me-3" />
       </template>
     </PInput>
 
     <template #content>
       <div class="p-1.5 gap-1 flex items-center justify-between border-b" @click.stop>
-        <PButton size="sm" variant="ghost" class="sm:px-0.5 text-13" @click="onCancelClick">
-          {{ configProvider.locale.confirm.cancel }}
+        <PButton
+          size="xs"
+          variant="ghost"
+          class="sm:px-0.5 rounded-md text-13"
+          @click="onCancelClick"
+        >
+          {{ configProvider.locale.interaction.cancel }}
         </PButton>
 
-        <PButton size="sm" variant="ghost" class="sm:px-0.5 text-13" @click="onSetNowClick">
+        <PButton size="xs" variant="ghost" class="sm:px-0 text-13" @click="onSetNowClick">
           {{ configProvider.locale.date.now }}
         </PButton>
       </div>
@@ -244,7 +329,11 @@ onBeforeUnmount(() => {
               class="w-16 sm:w-12 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
-              <li v-for="i of paddedTimes.hours" :key="i" class="h-8 leading-8 cursor-pointer">
+              <li
+                v-for="i of paddedTimes.hours"
+                :key="i"
+                class="pxd-time-picker--item h-8 leading-8 cursor-pointer"
+              >
                 {{ i }}
               </li>
             </ul>
@@ -256,7 +345,11 @@ onBeforeUnmount(() => {
               class="w-16 sm:w-12 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
-              <li v-for="i of paddedTimes.minutes" :key="i" class="h-8 leading-8 cursor-pointer">
+              <li
+                v-for="i of paddedTimes.minutes"
+                :key="i"
+                class="pxd-time-picker--item h-8 leading-8 cursor-pointer"
+              >
                 {{ i }}
               </li>
             </ul>
@@ -268,7 +361,11 @@ onBeforeUnmount(() => {
               class="w-16 sm:w-12 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
-              <li v-for="i of paddedTimes.seconds" :key="i" class="h-8 leading-8 cursor-pointer">
+              <li
+                v-for="i of paddedTimes.seconds"
+                :key="i"
+                class="pxd-time-picker--item h-8 leading-8 cursor-pointer"
+              >
                 {{ i }}
               </li>
             </ul>
@@ -284,7 +381,7 @@ onBeforeUnmount(() => {
             v-for="(preset, i) in presets"
             :key="preset.label"
             :data-index="i"
-            class="px-1.5 py-0.5 sm:text-13 sm:leading-4 max-sm:leading-5 max-sm:text-sm cursor-pointer appearance-none rounded-sm border-none bg-gray-300 font-inherit whitespace-nowrap text-foreground self-focus-ring outline-none hover:bg-gray-400 active:bg-gray-500 motion-safe:transition-appearance"
+            class="px-1.5 py-0.5 sm:text-13 sm:leading-4 max-sm:leading-5 max-sm:text-sm cursor-pointer appearance-none rounded-sm border-none bg-gray-300 font-inherit whitespace-nowrap text-foreground self-focus-ring outline-none hover:bg-gray-400 active:bg-gray-500 motion-safe:transition-colors"
           >
             {{ preset.label }}
           </button>
@@ -294,40 +391,6 @@ onBeforeUnmount(() => {
   </PPopover>
 </template>
 
-<style lang="postcss">
-.pxd-time-picker--list {
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    left: -0.125rem;
-    right: -0.125rem;
-    height: 4rem;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  &::before {
-    border-bottom: 1px solid hsl(var(--color-gray-300-value));
-    top: 0;
-  }
-
-  &::after {
-    border-top: 1px solid hsl(var(--color-gray-300-value));
-    bottom: 0;
-  }
-
-  & > ul {
-    -webkit-overflow-scrolling: auto;
-    /* py-16(64px) / h-40(160px) = 40% */
-    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 60%, transparent 100%);
-    -webkit-mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 50%,
-      black 60%,
-      transparent 100%
-    );
-  }
-}
+<style>
+.pxd-time-picker--list:after,.pxd-time-picker--list:before{content:"";height:4rem;left:-.125rem;pointer-events:none;position:absolute;right:-.125rem;z-index:1}.pxd-time-picker--list:before{border-bottom:1px solid hsl(var(--color-gray-300-value));top:0}.pxd-time-picker--list:after{border-top:1px solid hsl(var(--color-gray-300-value));bottom:0}.pxd-time-picker--list>ul{-webkit-overflow-scrolling:auto;mask-image:linear-gradient(180deg,transparent 0,#000 50%,#000 60%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 50%,#000 60%,transparent)}
 </style>

package/dist/components/time-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize } from '../../types/shared'
+import type { ComponentSize, ComponentDateTimeValue } from '../../types/shared/props'
 
 export interface DateTimePreset<T = Date> {
   label: string
@@ -11,16 +11,16 @@ export interface TimePickerProps {
   presets?: DateTimePreset[]
   disabled?: boolean
   clearable?: boolean
-  modelValue?: Date | string | number | null
-  prefixIcon?: boolean
+  modelValue?: ComponentDateTimeValue
+  suffixIcon?: boolean
   placeholder?: string
   showSeconds?: boolean
-  closeOnPressEscape?: boolean
-  format?: string
+  labelFormat?: string
   valueFormat?: string
+  closeOnPressEscape?: boolean
 }
 
 export interface TimePickerEmits {
-  change: [string]
-  'update:modelValue': [string]
+  change: [ComponentDateTimeValue]
+  'update:modelValue': [ComponentDateTimeValue]
 }

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

@@ -0,0 +1,6 @@
+import type { TimelineProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<TimelineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimelineProps> & Readonly<{}>, {
+    mode: import("./types").TimelineMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/timeline/index.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { Fragment, useSlots } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+defineOptions({
+	name: "PTimeline",
+	inheritAttrs: false
+});
+const props = defineProps({
+	mode: {
+		type: String,
+		required: false,
+		default: "start"
+	},
+	reverse: {
+		type: Boolean,
+		required: false
+	}
+});
+const slots = useSlots();
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-timeline m-0 w-full max-w-full list-none",
+	variants: { mode: {
+		start: "is-start ps-2",
+		end: "is-end pe-2",
+		alternate: "is-alternate px-2",
+		"alternate-reverse": "is-alternate-reverse px-2",
+		horizontal: "is-horizontal p-0 flex overflow-x-auto overflow-y-hidden"
+	} }
+}, { selection: () => ({ mode: props.mode }) });
+function flattenItems(children) {
+	return children.flatMap((child) => {
+		if (child.type === Fragment && Array.isArray(child.children)) {
+			return flattenItems(child.children);
+		}
+		return child;
+	});
+}
+function TimelineItems() {
+	const children = flattenItems(slots.default?.() ?? []);
+	return props.reverse ? [...children].reverse() : children;
+}
+</script>
+
+<template>
+  <ul data-timeline :class="classes" v-bind="attrs">
+    <TimelineItems />
+  </ul>
+</template>
+
+<style>
+.pxd-timeline.is-end .pxd-timeline-item--wrapper{text-align:right}.pxd-timeline.is-end .pxd-timeline-item--tail{left:auto;right:.2rem}.pxd-timeline.is-end .pxd-timeline-item--node{left:auto;right:0;transform:translateX(50%)}.pxd-timeline:is(.is-alternate,.is-alternate-reverse) .pxd-timeline-item--dot,.pxd-timeline:is(.is-alternate,.is-alternate-reverse) .pxd-timeline-item--node,.pxd-timeline:is(.is-alternate,.is-alternate-reverse) .pxd-timeline-item--tail{left:50%}.pxd-timeline.is-alternate .pxd-timeline-item:nth-child(odd) .pxd-timeline-item--wrapper,.pxd-timeline.is-alternate-reverse .pxd-timeline-item:nth-child(2n) .pxd-timeline-item--wrapper{left:50%;padding-inline-end:0;width:50%}.pxd-timeline.is-alternate .pxd-timeline-item:nth-child(2n) .pxd-timeline-item--wrapper,.pxd-timeline.is-alternate-reverse .pxd-timeline-item:nth-child(odd) .pxd-timeline-item--wrapper{padding-inline-start:0;text-align:right;width:50%}.pxd-timeline.is-horizontal .pxd-timeline-item{display:grid;flex:1 0 12rem;grid-template-columns:.5rem minmax(0,1fr);grid-template-rows:.5rem auto;min-width:0;padding:0}.pxd-timeline.is-horizontal .pxd-timeline-item--tail{border-left:0;border-top:1px solid var(--color-gray-300);grid-column:2;grid-row:1;height:0;left:.5px;position:relative;top:.2rem}.pxd-timeline.is-horizontal .pxd-timeline-item--node{grid-column:1;grid-row:1;position:relative}.pxd-timeline.is-horizontal .pxd-timeline-item--dot{grid-column:1;grid-row:1;left:auto;position:relative;transform:none}.pxd-timeline.is-horizontal .pxd-timeline-item--wrapper{grid-column:1/-1;grid-row:2;margin-top:.75rem;padding:0;top:0}.pxd-timeline.is-horizontal .pxd-timeline-item--content{overflow-wrap:break-word}
+</style>

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

@@ -0,0 +1,6 @@
+export type TimelineMode = 'start' | 'alternate' | 'alternate-reverse' | 'end' | 'horizontal'
+
+export interface TimelineProps {
+  mode?: TimelineMode
+  reverse?: boolean
+}

package/dist/components/timeline-item/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { TimelineItemProps } from './types';
+declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    dot?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TimelineItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimelineItemProps> & Readonly<{}>, {
+    size: import("./types").TimelineItemSize;
+    type: import("./types").TimelineItemType;
+    color: string;
+    timestamp: string;
+    placement: import("./types").TimelineItemPlacement;
+}, {}, {}, {}, 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;
+    };
+};