pxd 0.0.64 → 0.1.3

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

@@ -1,4 +1,4 @@
-import type { ResponsiveValue } from '../../types/shared'
+import type { ResponsiveValue } from '../../types/shared/props'
 
 export interface GridProps {
   debug?: boolean

package/dist/components/grid-item/index.vue

@@ -1,64 +1,69 @@
 <script setup>
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/get";
+import { getResponsiveValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PGridItem",
-  inheritAttrs: false
+	name: "PGridItem",
+	inheritAttrs: false
 });
 const props = defineProps({
-  row: { type: [String, Number, Object], required: false },
-  column: { type: [String, Number, Object], required: false }
+	row: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	},
+	column: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	}
 });
 const presetGridRow = {
-  "--xs-row": "row-(--xs-row)",
-  "--sm-row": "sm:row-(--sm-row)",
-  "--md-row": "md:row-(--md-row)",
-  "--lg-row": "lg:row-(--lg-row)",
-  "--xl-row": "xl:row-(--xl-row)"
+	"--xs-row": "row-(--xs-row)",
+	"--sm-row": "sm:row-(--sm-row)",
+	"--md-row": "md:row-(--md-row)",
+	"--lg-row": "lg:row-(--lg-row)",
+	"--xl-row": "xl:row-(--xl-row)"
 };
 const presetGridCol = {
-  "--xs-col": "col-(--xs-col)",
-  "--sm-col": "sm:col-(--sm-col)",
-  "--md-col": "md:col-(--md-col)",
-  "--lg-col": "lg:col-(--lg-col)",
-  "--xl-col": "xl:col-(--xl-col)"
+	"--xs-col": "col-(--xs-col)",
+	"--sm-col": "sm:col-(--sm-col)",
+	"--md-col": "md:col-(--md-col)",
+	"--lg-col": "lg:col-(--lg-col)",
+	"--xl-col": "xl:col-(--xl-col)"
 };
 const formattedRow = computed(() => {
-  const { row } = props;
-  return getResponsiveValue(
-    row,
-    (typeof row === "object" ? row.xs : row) ?? "auto",
-    (acc, bp, value) => {
-      acc[`--${bp}-row`] = value;
-    }
-  );
+	const { row } = props;
+	return getResponsiveValue(row, (typeof row === "object" ? row.xs : row) ?? "auto", (acc, bp, value) => {
+		acc[`--${bp}-row`] = value;
+	});
 });
 const formattedCol = computed(() => {
-  const { column } = props;
-  return getResponsiveValue(
-    column,
-    (typeof column === "object" ? column.xs : column) ?? "auto",
-    (acc, bp, value) => {
-      acc[`--${bp}-col`] = value;
-    }
-  );
+	const { column } = props;
+	return getResponsiveValue(column, (typeof column === "object" ? column.xs : column) ?? "auto", (acc, bp, value) => {
+		acc[`--${bp}-col`] = value;
+	});
 });
 const computedClasses = computed(() => {
-  return [
-    ...Object.keys(formattedRow.value).map((bp) => presetGridRow[bp]),
-    ...Object.keys(formattedCol.value).map((bp) => presetGridCol[bp])
-  ].join(" ");
+	const classes = [...Object.keys(formattedRow.value).map((bp) => presetGridRow[bp]), ...Object.keys(formattedCol.value).map((bp) => presetGridCol[bp])];
+	return classes;
 });
 const gridItemStyle = computed(() => {
-  return {
-    ...formattedRow.value,
-    ...formattedCol.value
-  };
+	return {
+		...formattedRow.value,
+		...formattedCol.value
+	};
 });
 </script>
 
 <template>
   <div
+    data-grid-item
     class="pxd-grid-item overflow-hidden"
     :class="computedClasses"
     :style="gridItemStyle"

package/dist/components/grid-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { ResponsiveValue } from '../../types/shared'
+import type { ResponsiveValue } from '../../types/shared/props'
 
 export interface GridItemProps {
   row?: ResponsiveValue<string | number>

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

@@ -0,0 +1,32 @@
+import type { HintProps, HintStatus } from './types';
+declare var __VLS_10: {
+    status: HintStatus;
+}, __VLS_13: {
+    status: HintStatus;
+    value: unknown;
+    error: unknown;
+    activeTrigger: HTMLElement | null;
+    activeTriggerIndex: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    content?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HintProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<HintProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    duration: number;
+    pauseOnHover: boolean;
+    position: import("../../types/shared/props.js").ComponentPosition;
+}, {}, {}, {}, 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/hint/index.vue

@@ -0,0 +1,239 @@
+<script setup>
+import CrossIcon from "@gdsicon/vue/cross";
+import { computed, onBeforeUnmount, shallowRef, watch, watchEffect } from "vue";
+import { TOOLTIP_CONTENT_CLASS, TOOLTIP_VARIANTS } from "../../constants/tooltip-variants.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PPopover from "../popover/index.vue";
+defineOptions({
+	name: "PHint",
+	inheritAttrs: false
+});
+const props = defineProps({
+	content: {
+		type: String,
+		required: false
+	},
+	promise: {
+		type: Promise,
+		required: false
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "top"
+	},
+	duration: {
+		type: Number,
+		required: false,
+		default: 1e3
+	},
+	closeable: {
+		type: Boolean,
+		required: false
+	},
+	pauseOnHover: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
+});
+const emits = defineEmits(["close"]);
+let closeTimer = null;
+let closeDeadline = 0;
+let closeRemaining = 0;
+let isHovering = false;
+let promiseToken = 0;
+const visible = shallowRef(false);
+const progressDuration = shallowRef(0);
+const progressKey = shallowRef(0);
+const status = shallowRef("idle");
+const statusValue = shallowRef();
+const statusError = shallowRef();
+const progressVisible = computed(() => visible.value && progressDuration.value > 0 && status.value !== "pending");
+const statusVariant = computed(() => status.value === "success" || status.value === "error" ? status.value : "default");
+const computedVariant = computed(() => TOOLTIP_VARIANTS[statusVariant.value]);
+const contentClassComputed = computed(() => [
+	"relative",
+	TOOLTIP_CONTENT_CLASS,
+	computedVariant.value.base,
+	props.contentClass
+]);
+const configProvider = useConfigProvider();
+function restartProgress(duration) {
+	progressDuration.value = duration;
+	progressKey.value++;
+}
+function clearCloseTimer() {
+	if (closeTimer) {
+		clearTimeout(closeTimer);
+		closeTimer = null;
+	}
+}
+function scheduleClose(delay) {
+	clearCloseTimer();
+	closeRemaining = delay;
+	if (!props.duration || delay <= 0 || isHovering || status.value === "pending") {
+		return;
+	}
+	closeDeadline = Date.now() + delay;
+	closeTimer = setTimeout(() => {
+		closeTimer = null;
+		visible.value = false;
+	}, delay);
+}
+function startCloseTimer() {
+	if (visible.value) {
+		restartProgress(props.duration);
+		scheduleClose(props.duration);
+	}
+}
+function pauseCloseTimer() {
+	if (!props.pauseOnHover) {
+		return;
+	}
+	isHovering = true;
+	if (closeTimer) {
+		clearCloseTimer();
+		closeRemaining = Math.max(0, closeDeadline - Date.now());
+	}
+}
+function resumeCloseTimer() {
+	if (!props.pauseOnHover) {
+		return;
+	}
+	isHovering = false;
+	if (!visible.value || closeTimer) {
+		return;
+	}
+	scheduleClose(closeRemaining);
+}
+function handleClose() {
+	visible.value = false;
+}
+function subscribePromise(promise) {
+	const token = ++promiseToken;
+	statusValue.value = undefined;
+	statusError.value = undefined;
+	if (!promise) {
+		status.value = "idle";
+		return;
+	}
+	status.value = "pending";
+	promise.then((value) => {
+		if (token !== promiseToken) {
+			return;
+		}
+		statusValue.value = value;
+		status.value = "success";
+		startCloseTimer();
+	}, (error) => {
+		if (token !== promiseToken) {
+			return;
+		}
+		statusError.value = error;
+		status.value = "error";
+		startCloseTimer();
+	});
+}
+watch(visible, (isVisible) => {
+	if (isVisible) {
+		startCloseTimer();
+	} else {
+		clearCloseTimer();
+		isHovering = false;
+		emits("close");
+	}
+});
+// Don't use watch(() => props.promise): Vue will attach a catch to the promise returned by the watcher getter,
+// and an error will be reported in the component when it rejects.
+watchEffect(() => {
+	subscribePromise(props.promise);
+});
+watch(() => props.content, () => {
+	if (isHovering) {
+		closeRemaining = props.duration;
+		restartProgress(props.duration);
+		return;
+	}
+	startCloseTimer();
+});
+onBeforeUnmount(() => {
+	clearCloseTimer();
+	promiseToken++;
+});
+</script>
+
+<template>
+  <PPopover
+    data-hint
+    role="tooltip"
+    class="pxd-hint"
+    show-arrow
+    :data-variant="statusVariant"
+    :model-value="visible"
+    :position="position"
+    :toggle-on-trigger="false"
+    :fill-trigger-width="false"
+    wrapper-class="max-sm:data-[position^=top]:px-1 max-sm:data-[position^=bottom]:px-1 max-sm:data-[position^=left]:ps-1 max-sm:data-[position^=right]:pe-1"
+    :arrow-color="computedVariant.bg"
+    :content-class="contentClassComputed"
+    v-bind="$attrs"
+    trigger="click"
+    :close-on-press-escape="false"
+    :close-on-outside-click="false"
+    @trigger-click="startCloseTimer"
+    @update:model-value="visible = $event"
+  >
+    <slot :status="status" />
+
+    <template #content="{ activeTrigger, activeTriggerIndex }">
+      <div
+        class="pxd-hint--content gap-1.5 flex items-center"
+        :data-pause-on-hover="pauseOnHover ? 'true' : 'false'"
+        @pointerenter="pauseCloseTimer"
+        @pointerleave="resumeCloseTimer"
+      >
+        <slot
+          name="content"
+          :status="status"
+          :value="statusValue"
+          :error="statusError"
+          :active-trigger="activeTrigger"
+          :active-trigger-index="activeTriggerIndex"
+        >
+          {{ content }}
+        </slot>
+
+        <button
+          v-if="closeable"
+          type="button"
+          class="pxd-hint--close p-0.5 shrink-0 cursor-pointer appearance-none rounded-sm border-0 bg-transparent font-inherit text-inherit opacity-70 self-focus-ring outline-none hover:opacity-100 motion-safe:transition-opacity"
+          :aria-label="configProvider.locale.feedback.close"
+          @click="handleClose"
+        >
+          <CrossIcon class="size-3" />
+        </button>
+
+        <div
+          v-if="progressVisible"
+          :key="progressKey"
+          aria-hidden="true"
+          class="pxd-hint--progress-bar pxd-countdown-progress inset-x-0 top-0 h-0.5 absolute bg-current"
+          :style="{ animationDuration: `${progressDuration}ms` }"
+        />
+      </div>
+    </template>
+  </PPopover>
+</template>
+
+<style>
+.pxd-hint--content[data-pause-on-hover=true]:hover .pxd-hint--progress-bar{animation-play-state:paused}
+</style>

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

@@ -0,0 +1,17 @@
+import type { ComponentClass, ComponentPosition } from '../../types/shared/props'
+
+export type HintStatus = 'idle' | 'pending' | 'success' | 'error'
+
+export interface HintProps {
+  content?: string
+  promise?: Promise<unknown>
+  position?: ComponentPosition
+  duration?: number
+  closeable?: boolean
+  pauseOnHover?: boolean
+  contentClass?: ComponentClass
+}
+
+export interface HintEmits {
+  close: []
+}

package/dist/components/hold-button/index.d.vue.ts

@@ -1,11 +1,11 @@
 import type { HoldButtonProps } from './types';
-declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
+declare var __VLS_12: {}, __VLS_14: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_13) => any;
+    prefix?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    suffix?: (props: typeof __VLS_18) => any;
+    suffix?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<HoldButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;