pxd 0.0.64 → 0.1.3

package/dist/components/theme-switcher/index.vue

@@ -1,34 +1,38 @@
 <script setup>
+import DeviceAlternateIcon from "@gdsicon/vue/device-alternate";
 import MoonIcon from "@gdsicon/vue/moon";
 import SunIcon from "@gdsicon/vue/sun";
 import { computed, watch } from "vue";
-import { useColorScheme } from "../../composables/use-color-scheme";
+import { useColorScheme } from "../../composables/use-color-scheme.js";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PThemeSwitcher",
-  inheritAttrs: false
+	name: "PThemeSwitcher",
+	inheritAttrs: false
 });
 const emits = defineEmits(["toggle"]);
-const { isDark, toggleDarkMode } = useColorScheme({
-  syncStatus: true
+const SCHEME_ICONS = {
+	auto: DeviceAlternateIcon,
+	light: SunIcon,
+	dark: MoonIcon
+};
+const { colorScheme, toggleDarkMode } = useColorScheme({ syncStatus: true });
+const renderIcon = computed(() => SCHEME_ICONS[colorScheme.value]);
+watch(() => colorScheme.value, (newVal) => {
+	emits("toggle", newVal);
 });
-const renderIcon = computed(() => isDark.value ? MoonIcon : SunIcon);
-watch(
-  () => isDark.value,
-  (newVal) => {
-    emits("toggle", newVal ? "dark" : "light");
-  }
-);
 </script>
 
 <template>
   <PButton
+    icon
+    data-theme-switcher
     aria-label="Toggle color mode"
     class="pxd-theme-switcher"
     v-bind="$attrs"
-    icon
-    @click="toggleDarkMode"
+    @click="toggleDarkMode()"
   >
-    <Component :is="renderIcon" class="size-em" />
+    <Transition name="pxd-transition--fade-scale" mode="out-in">
+      <Component :is="renderIcon" class="size-em" />
+    </Transition>
   </PButton>
 </template>

package/dist/components/theme-switcher/types.d.ts

@@ -1,5 +1,5 @@
-import type { ColorScheme } from '../../composables/use-color-scheme'
+import type { ColorPreference } from '../../composables/use-color-scheme'
 
 export interface ThemeSwitcherEmits {
-  toggle: [ColorScheme]
+  toggle: [ColorPreference]
 }

package/dist/components/time-ago/index.d.vue.ts

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

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

@@ -0,0 +1,143 @@
+<script setup>
+import { computed, onActivated, onDeactivated, onMounted, onUnmounted, shallowRef, watch } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { dayjs } from "../../utils/date.js";
+import { cachedOn, cachedOff } from "../../utils/event.js";
+defineOptions({
+	name: "PTimeAgo",
+	inheritAttrs: false
+});
+const props = defineProps({
+	value: {
+		type: [
+			String,
+			Number,
+			Date
+		],
+		required: true
+	},
+	refresh: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const SECOND = 1e3;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const BUCKETS = [
+	{
+		unit: "now",
+		size: MINUTE,
+		limit: MINUTE
+	},
+	{
+		unit: "minute",
+		size: MINUTE,
+		limit: HOUR
+	},
+	{
+		unit: "hour",
+		size: HOUR,
+		limit: DAY
+	},
+	{
+		unit: "day",
+		size: DAY,
+		limit: MONTH
+	},
+	{
+		unit: "month",
+		size: MONTH,
+		limit: YEAR
+	},
+	{
+		unit: "year",
+		size: YEAR,
+		limit: Infinity
+	}
+];
+let refreshTimer;
+const timestamp = computed(() => dayjs(props.value).valueOf());
+const now = shallowRef(Date.now());
+const dateTime = computed(() => Number.isFinite(timestamp.value) ? dayjs(timestamp.value).toISOString() : undefined);
+const configProvider = useConfigProvider();
+const text = computed(() => {
+	const locale = configProvider.locale.timeAgo;
+	if (!Number.isFinite(timestamp.value)) {
+		return locale.invalid;
+	}
+	const diff = now.value - timestamp.value;
+	const { bucket, value } = resolveBucket(Math.abs(diff));
+	if (bucket.unit === "now") {
+		return locale.now;
+	}
+	const labels = locale.unit[bucket.unit];
+	const unit = value === 1 ? labels.one : labels.other;
+	return (diff >= 0 ? locale.past : locale.future).replace("{value}", String(value)).replace("{unit}", unit);
+});
+function resolveBucket(age) {
+	const bucket = BUCKETS.find((item) => age < item.limit) ?? BUCKETS[BUCKETS.length - 1];
+	return {
+		bucket,
+		value: Math.floor(age / bucket.size)
+	};
+}
+function getNextDelay() {
+	const age = Math.abs(now.value - timestamp.value);
+	const { bucket, value } = resolveBucket(age);
+	return Math.min((value + 1) * bucket.size, bucket.limit) - age;
+}
+function stopTimer() {
+	clearTimeout(refreshTimer);
+}
+function startTimer() {
+	stopTimer();
+	if (!props.refresh) {
+		return;
+	}
+	const delay = getNextDelay();
+	if (!Number.isFinite(delay) || delay > DAY) {
+		return;
+	}
+	refreshTimer = setTimeout(syncNow, delay);
+}
+function syncNow() {
+	if (!props.refresh) {
+		return;
+	}
+	now.value = Date.now();
+	startTimer();
+}
+function handleVisibilityChange() {
+	if (document.visibilityState === "visible") {
+		syncNow();
+	}
+}
+watch(() => [timestamp.value, props.refresh], startTimer);
+onActivated(syncNow);
+onDeactivated(stopTimer);
+onMounted(() => {
+	startTimer();
+	cachedOn(document, "visibilitychange", handleVisibilityChange);
+});
+onUnmounted(() => {
+	stopTimer();
+	cachedOff(document, "visibilitychange", handleVisibilityChange);
+});
+</script>
+
+<template>
+  <time
+    class="pxd-time-ago"
+    data-time-ago
+    data-allow-mismatch="text"
+    :datetime="dateTime"
+    v-bind="$attrs"
+  >
+    {{ text }}
+  </time>
+</template>

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

@@ -0,0 +1,4 @@
+export interface TimeAgoProps {
+  value: string | number | Date
+  refresh?: boolean
+}

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

@@ -1,18 +1,17 @@
 import type { TimePickerProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<TimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: string) => any;
-    "update:modelValue": (args_0: string) => any;
+    change: (args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any;
+    "update:modelValue": (args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any;
 }, string, import("vue").PublicProps, Readonly<TimePickerProps> & Readonly<{
-    onChange?: ((args_0: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    onChange?: ((args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any) | undefined;
 }>, {
-    modelValue: Date | string | number | null;
-    format: string;
+    modelValue: import("../../types/shared/props.js").ComponentDateTimeValue;
     closeOnPressEscape: boolean;
-    presets: import("./types").DateTimePreset[];
-    prefixIcon: boolean;
-    showSeconds: boolean;
     valueFormat: string;
+    suffixIcon: boolean;
+    presets: import("./types").DateTimePreset<Date>[];
+    showSeconds: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;