pxd 0.0.64 → 0.1.2

package/dist/components/countdown/index.vue

@@ -1,52 +1,100 @@
 <script setup>
 import { computed, onBeforeUnmount } from "vue";
-import { useCountdown } from "../../composables/use-countdown";
-import { dayjs, dayjsDurationPlugin, dayjsMillisecondTokenPlugin } from "../../utils/date";
+import { useCountdown } from "../../composables/use-countdown.js";
+import { dayjs, dayjsDurationPlugin, dayjsMillisecondTokenPlugin } from "../../utils/date.js";
 defineOptions({
-  name: "PCountDown",
-  inheritAttrs: false
+	name: "PCountDown",
+	inheritAttrs: false
 });
 const props = defineProps({
-  format: { type: String, required: false, default: "HH:mm:ss" },
-  invert: { type: Boolean, required: false },
-  active: { type: Boolean, required: false, default: false },
-  startAt: { type: Number, required: false },
-  endTime: { type: Number, required: false, default: 0 },
-  autoReset: { type: Boolean, required: false, default: true },
-  durations: { type: Number, required: false, default: 0 },
-  precision: { type: Number, required: false, default: 0 },
-  millisecond: { type: Boolean, required: false, default: true },
-  intuitive: { type: Boolean, required: false }
+	format: {
+		type: String,
+		required: false,
+		default: "HH:mm:ss"
+	},
+	invert: {
+		type: Boolean,
+		required: false
+	},
+	active: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	startAt: {
+		type: Number,
+		required: false
+	},
+	endTime: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	autoReset: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	durations: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	precision: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	millisecond: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	intuitive: {
+		type: Boolean,
+		required: false
+	}
 });
-const emits = defineEmits(["change", "reset", "finish"]);
+const emits = defineEmits([
+	"change",
+	"reset",
+	"finish"
+]);
 dayjs.extend(dayjsDurationPlugin);
 dayjs.extend(dayjsMillisecondTokenPlugin);
 const { stop, reset, timestamp } = useCountdown(props, emits);
+const timestampDuration = computed(() => {
+	return dayjs.duration(timestamp.value);
+});
 const times = computed(() => {
-  const t = dayjs.duration(timestamp.value);
-  return {
-    dd: t.format("DD"),
-    hh: t.format("HH"),
-    mm: t.format("mm"),
-    ss: t.format("ss"),
-    ms: t.format("SSS")
-  };
+	const t = timestampDuration.value;
+	return {
+		dd: t.format("DD"),
+		hh: t.format("HH"),
+		mm: t.format("mm"),
+		ss: t.format("ss"),
+		ms: t.format("SSS")
+	};
 });
 const displayTimes = computed(() => {
-  const time = dayjs.duration(timestamp.value).format(props.format);
-  return time;
+	const time = timestampDuration.value.format(props.format);
+	return time;
 });
 onBeforeUnmount(() => {
-  stop();
+	stop();
 });
 defineExpose({
-  reset,
-  times
+	reset,
+	times
 });
 </script>
 
 <template>
-  <div class="pxd-countdown relative w-max max-w-full leading-none tabular-nums" v-bind="$attrs">
+  <div
+    data-countdown
+    class="pxd-countdown relative w-max max-w-full leading-none tabular-nums text-trim-both"
+    v-bind="$attrs"
+  >
     <slot :active="active" :times="times">
       {{ displayTimes }}
     </slot>

package/dist/components/dash-line/index.d.vue.ts

@@ -1,6 +1,7 @@
+import type { BasePosition } from '../../types/shared';
 import type { DashLineProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<DashLineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashLineProps> & Readonly<{}>, {
-    position: import("../../types/shared").BasePosition | import("../../types/shared").BasePosition[];
+    position: BasePosition | BasePosition[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/dash-line/index.vue

@@ -1,86 +1,88 @@
 <script setup>
 import { computed } from "vue";
-import { getCssUnitValue } from "../../utils/format";
+import { getCssUnitValue } from "../../utils/format.js";
 defineOptions({
-  name: "PDashLine",
-  inheritAttrs: false
+	name: "PDashLine",
+	inheritAttrs: false
 });
 const props = defineProps({
-  position: { type: [String, Array], required: false, default: () => ["top"] },
-  lineSize: { type: [String, Number], required: false },
-  dashSize: { type: [String, Number], required: false },
-  color: { type: String, required: false },
-  gap: { type: [String, Number], required: false }
+	position: {
+		type: [String, Array],
+		required: false,
+		default: () => ["top"]
+	},
+	lineSize: {
+		type: [String, Number],
+		required: false
+	},
+	dashSize: {
+		type: [String, Number],
+		required: false
+	},
+	color: {
+		type: String,
+		required: false
+	},
+	gap: {
+		type: [String, Number],
+		required: false
+	}
 });
-const computedStyle = computed(() => ({
-  "--dash-line-color": props.color,
-  "--dash-line-dash": getCssUnitValue(props.dashSize),
-  "--dash-line-size": getCssUnitValue(props.lineSize),
-  "--dash-line-gap": getCssUnitValue(props.gap)
-}));
+const positions = computed(() => Array.isArray(props.position) ? props.position : [props.position]);
+const strokeColor = computed(() => props.color ?? "var(--color-gray-600)");
+const strokeWidth = computed(() => getCssUnitValue(props.lineSize, "1px"));
+const dashArray = computed(() => {
+	const dash = parseFloat(getCssUnitValue(props.dashSize) ?? "8");
+	const gap = parseFloat(getCssUnitValue(props.gap) ?? "8");
+	return `${dash},${gap}`;
+});
+const lineMap = {
+	top: {
+		x1: "0",
+		y1: "0",
+		x2: "100%",
+		y2: "0"
+	},
+	bottom: {
+		x1: "0",
+		y1: "100%",
+		x2: "100%",
+		y2: "100%"
+	},
+	left: {
+		x1: "0",
+		y1: "0",
+		x2: "0",
+		y2: "100%"
+	},
+	right: {
+		x1: "100%",
+		y1: "0",
+		x2: "100%",
+		y2: "100%"
+	}
+};
+const lines = computed(() => positions.value.map((pos) => lineMap[pos]));
 </script>
 
 <template>
-  <div
-    class="pxd-dash-line relative max-w-full min-w-full"
-    v-bind="$attrs"
-    :data-position="position"
-    :style="computedStyle"
-  />
+  <div data-dash-line class="pxd-dash-line relative max-w-full min-w-full" v-bind="$attrs">
+    <svg
+      class="inset-0 pointer-events-none absolute size-full overflow-visible"
+      preserveAspectRatio="none"
+    >
+      <line
+        v-for="(line, index) in lines"
+        :key="index"
+        :x1="line.x1"
+        :y1="line.y1"
+        :x2="line.x2"
+        :y2="line.y2"
+        :stroke="strokeColor"
+        :stroke-width="strokeWidth"
+        :stroke-dasharray="dashArray"
+        vector-effect="non-scaling-stroke"
+      />
+    </svg>
+  </div>
 </template>
-
-<style lang="postcss">
-.pxd-dash-line {
-  --g: var(--dash-line-gap, 8px);
-  --d: var(--dash-line-dash, 8px);
-  --s: var(--dash-line-size, 1px);
-  --c: var(--dash-line-color, var(--color-gray-600));
-
-  &[data-position*='top']::before,
-  &[data-position*='bottom']::after,
-  &[data-position*='left']::before,
-  &[data-position*='right']::after {
-    content: '';
-    position: absolute;
-    pointer-events: none;
-    background-image: repeating-linear-gradient(
-      to var(--p),
-      var(--c) 0 var(--d),
-      transparent var(--d) calc(var(--d) + var(--g))
-    );
-  }
-
-  &[data-position*='top']::before {
-    top: 0;
-  }
-
-  &[data-position*='bottom']::after {
-    bottom: 0;
-  }
-
-  &[data-position*='left']::before {
-    left: 0;
-  }
-
-  &[data-position*='right']::after {
-    right: 0;
-  }
-
-  &[data-position*='top']::before,
-  &[data-position*='bottom']::after {
-    --p: right;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: var(--s);
-  }
-
-  &[data-position*='left']::before,
-  &[data-position*='right']::after {
-    --p: bottom;
-    top: 0;
-    bottom: 0;
-    width: var(--s);
-  }
-}
-</style>

package/dist/components/date-picker/index.d.vue.ts

@@ -0,0 +1,16 @@
+import type { ComponentDateTimeValue } from '../../types/shared';
+import type { DatePickerProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: ComponentDateTimeValue) => any;
+    "update:modelValue": (args_0: ComponentDateTimeValue) => any;
+}, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
+    onChange?: ((args_0: ComponentDateTimeValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: ComponentDateTimeValue) => any) | undefined;
+}>, {
+    closeOnPressEscape: boolean;
+    valueFormat: string;
+    suffixIcon: boolean;
+    labelFormat: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,295 @@
+<script setup>
+import CalendarIcon from "@gdsicon/vue/calendar";
+import { computed, shallowRef, watch } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
+import { dayjs } from "../../utils/date.js";
+import { isNil } from "../../utils/is.js";
+import PCalendar from "../calendar/index.vue";
+import PInput from "../input/index.vue";
+import PPopover from "../popover/index.vue";
+defineOptions({
+	name: "PDatePicker",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const DATE_FORMAT_TOKEN_RE = /(YYYY|YY|MM|DD|M|D)/;
+const YEAR_FORMAT_TOKEN_RE = /YYYY|YY/;
+const props = defineProps({
+	size: {
+		type: String,
+		required: false
+	},
+	error: {
+		type: [Boolean, String],
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	clearable: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			Number,
+			String,
+			Date,
+			null
+		],
+		required: false
+	},
+	suffixIcon: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	labelFormat: {
+		type: String,
+		required: false,
+		default: "YYYY-MM-DD"
+	},
+	valueFormat: {
+		type: String,
+		required: false,
+		default: "YYYY-MM-DD"
+	},
+	isDateDisabled: {
+		type: Function,
+		required: false
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const popoverVisible = shallowRef(false);
+const draftInput = shallowRef(null);
+const dayjsDateTime = shallowRef(null);
+const calendarModelValue = computed(() => dayjsDateTime.value?.valueOf() ?? null);
+const modelValue = useModelValue(props, emits, { get() {
+	if (draftInput.value !== null) {
+		return draftInput.value;
+	}
+	return dayjsDateTime.value ? dayjsDateTime.value.format(props.labelFormat) : "";
+} });
+function togglePopoverVisible(visible) {
+	popoverVisible.value = visible;
+}
+function formatEmittedValue(date) {
+	if (props.valueFormat === "timestamp") {
+		return date.valueOf();
+	}
+	return date.format(props.valueFormat);
+}
+function isSameCommittedDate(date) {
+	if (date === null || dayjsDateTime.value === null) {
+		return date === dayjsDateTime.value;
+	}
+	return date.isSame(dayjsDateTime.value, "day");
+}
+function commitDate(date) {
+	const shouldEmit = !isSameCommittedDate(date);
+	dayjsDateTime.value = date;
+	draftInput.value = null;
+	if (!shouldEmit) {
+		return;
+	}
+	modelValue.value = date ? formatEmittedValue(date) : null;
+}
+function parseIncomingValue(value) {
+	if (isNil(value) || value === "") {
+		return null;
+	}
+	if (typeof value === "number" || value instanceof Date) {
+		const date = dayjs(value);
+		return date.isValid() ? date : null;
+	}
+	if (props.valueFormat === "timestamp") {
+		const date = dayjs(Number(value));
+		return date.isValid() ? date : null;
+	}
+	return parseDateString(value, props.valueFormat) ?? parseDateString(value, props.labelFormat);
+}
+function parseDateString(input, format) {
+	const restInput = input.trim();
+	if (!restInput) {
+		return null;
+	}
+	const tokens = format.split(DATE_FORMAT_TOKEN_RE).filter(Boolean);
+	const parsed = {};
+	let rest = restInput;
+	for (const token of tokens) {
+		if (!rest) {
+			break;
+		}
+		if (!DATE_FORMAT_TOKEN_RE.test(token)) {
+			if (rest.startsWith(token)) {
+				rest = rest.slice(token.length);
+				continue;
+			}
+			break;
+		}
+		const matched = consumeDateToken(token, rest);
+		if (!matched) {
+			break;
+		}
+		if (token === "YYYY" || token === "YY") {
+			parsed.year = matched.value;
+		} else if (token === "MM" || token === "M") {
+			parsed.month = matched.value;
+		} else {
+			parsed.date = matched.value;
+		}
+		rest = rest.slice(matched.length);
+	}
+	if (rest) {
+		return null;
+	}
+	if (YEAR_FORMAT_TOKEN_RE.test(format) && parsed.year == null) {
+		return null;
+	}
+	if (parsed.year == null && parsed.month == null && parsed.date == null) {
+		return null;
+	}
+	const year = parsed.year ?? dayjs().year();
+	const month = parsed.month ?? 1;
+	const date = parsed.date ?? 1;
+	const result = dayjs(new Date(year, month - 1, date));
+	if (result.year() !== year || result.month() !== month - 1 || result.date() !== date) {
+		return null;
+	}
+	return result;
+}
+function consumeDateToken(token, input) {
+	if (token === "YYYY") {
+		const match = input.match(/^\d{4}/);
+		return match ? {
+			value: Number(match[0]),
+			length: match[0].length
+		} : null;
+	}
+	if (token === "YY") {
+		const match = input.match(/^\d{2}/);
+		if (!match) {
+			return null;
+		}
+		const year = Number(match[0]);
+		return {
+			value: year + (year > 68 ? 1900 : 2e3),
+			length: match[0].length
+		};
+	}
+	if (token === "MM" || token === "M" || token === "DD" || token === "D") {
+		const match = input.match(/^\d{1,2}/);
+		return match ? {
+			value: Number(match[0]),
+			length: match[0].length
+		} : null;
+	}
+	return null;
+}
+function tryCommitInput(value) {
+	if (value === "") {
+		commitDate(null);
+		return true;
+	}
+	const parsed = parseDateString(value, props.labelFormat);
+	if (!parsed) {
+		return false;
+	}
+	commitDate(parsed);
+	return true;
+}
+function onDraftInput(value) {
+	draftInput.value = value;
+}
+function onInputValueChange(value) {
+	if (tryCommitInput(value)) {
+		togglePopoverVisible(false);
+	}
+}
+function onCalendarChange(value) {
+	const date = dayjs(value);
+	if (!date.isValid()) {
+		return;
+	}
+	commitDate(date);
+	togglePopoverVisible(false);
+}
+function onOutsideClick() {
+	if (draftInput.value === null) {
+		return;
+	}
+	if (!tryCommitInput(draftInput.value)) {
+		draftInput.value = null;
+	}
+}
+function updateDayjsDateTime(value) {
+	dayjsDateTime.value = parseIncomingValue(value);
+}
+watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
+</script>
+
+<template>
+  <PPopover
+    data-date-picker
+    v-model="popoverVisible"
+    class="pxd-date-picker w-full"
+    trigger="click"
+    :disabled="disabled"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    :adaptive="isAdaptive"
+    :toggle-on-trigger="false"
+    :fill-trigger-width="false"
+    :wrapper-class="responsiveClasses.wrapper"
+    :content-class="responsiveClasses.content"
+    :lock-scroll-on-visible="isAdaptive"
+    :close-on-press-escape="closeOnPressEscape"
+    @outside-click="onOutsideClick"
+  >
+    <PInput
+      :size="size"
+      :error="error"
+      :disabled="disabled"
+      :readonly="isAdaptive"
+      :clearable="clearable"
+      :model-value="modelValue"
+      :placeholder="placeholder"
+      :default-suffix-style="false"
+      :data-focusing="popoverVisible"
+      v-bind="$attrs"
+      @update:model-value="onDraftInput"
+      @clear="onInputValueChange"
+      @change="onInputValueChange"
+    >
+      <template v-if="suffixIcon" #suffix>
+        <CalendarIcon class="me-3" />
+      </template>
+    </PInput>
+
+    <template #content>
+      <PCalendar
+        class="sm:p-2 p-4"
+        compact
+        :value-format="valueFormat"
+        :model-value="calendarModelValue"
+        :is-date-disabled="isDateDisabled"
+        @change="onCalendarChange"
+      />
+    </template>
+  </PPopover>
+</template>

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

@@ -0,0 +1,20 @@
+import type { ComponentDateTimeValue, ComponentSize } from '../../types/shared'
+
+export interface DatePickerProps {
+  size?: ComponentSize
+  error?: boolean | string
+  disabled?: boolean
+  clearable?: boolean
+  modelValue?: ComponentDateTimeValue
+  suffixIcon?: boolean
+  placeholder?: string
+  labelFormat?: string
+  valueFormat?: string
+  isDateDisabled?: (timestamp: number) => boolean
+  closeOnPressEscape?: boolean
+}
+
+export interface DatePickerEmits {
+  change: [ComponentDateTimeValue]
+  'update:modelValue': [ComponentDateTimeValue]
+}

package/dist/components/description/index.vue

@@ -2,20 +2,29 @@
 import InformationIcon from "@gdsicon/vue/information-fill-small";
 import PTooltip from "../tooltip/index.vue";
 defineOptions({
-  name: "PDescription",
-  inheritAttrs: false
+	name: "PDescription",
+	inheritAttrs: false
 });
 defineProps({
-  title: { type: String, required: false },
-  tooltip: { type: String, required: false },
-  description: { type: String, required: false }
+	title: {
+		type: String,
+		required: false
+	},
+	tooltip: {
+		type: String,
+		required: false
+	},
+	description: {
+		type: String,
+		required: false
+	}
 });
 </script>
 
 <template>
-  <dl class="pxd-description" v-bind="$attrs">
+  <dl data-description class="pxd-description" v-bind="$attrs">
     <dt
-      class="pxd-description--title gap-1 text-sm mb-2 min-h-3.5 flex items-center leading-none text-nowrap text-foreground-secondary capitalize"
+      class="pxd-description--title gap-1 text-sm mbe-2 min-h-3.5 flex items-center leading-none text-nowrap text-foreground-secondary capitalize"
     >
       <slot name="title">
         {{ title }}