pxd 0.0.64 → 0.1.3

package/dist/components/active-graph/types.d.ts

@@ -18,7 +18,7 @@ export interface ActiveGraphProps {
 }
 
 export interface ActiveGraphEmits {
-  select: [string, MouseEvent]
+  change: [string, MouseEvent]
 }
 
 export interface ActiveGraphCellData {
@@ -32,6 +32,7 @@ export interface ActiveGraphRowData extends Array<ActiveGraphCellData> {
   isMonthFirstRow?: boolean
   monthName?: string
   headerText: string
+  rowKey?: string
 }
 
 export interface ActiveGraphTooltipInfo {

package/dist/components/approval-card/index.d.vue.ts

@@ -0,0 +1,28 @@
+import type { ComponentVariant } from '../../types/shared/props';
+import type { ApprovalCardProps, ApprovalCause, ApprovalResult, ApprovalStatus } from './types';
+declare function approve(reason?: string): void;
+declare function reject(reason?: string): void;
+declare function dismiss(cause?: ApprovalCause): void;
+declare function reset(): void;
+declare const __VLS_export: import("vue").DefineComponent<ApprovalCardProps, {
+    status: import("vue").ComputedRef<ApprovalStatus>;
+    approve: typeof approve;
+    reject: typeof reject;
+    dismiss: typeof dismiss;
+    reset: typeof reset;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (status: ApprovalStatus) => any;
+    decide: (result: ApprovalResult) => any;
+    approve: (result: ApprovalResult) => any;
+    reject: (result: ApprovalResult) => any;
+}, string, import("vue").PublicProps, Readonly<ApprovalCardProps> & Readonly<{
+    "onUpdate:modelValue"?: ((status: ApprovalStatus) => any) | undefined;
+    onDecide?: ((result: ApprovalResult) => any) | undefined;
+    onApprove?: ((result: ApprovalResult) => any) | undefined;
+    onReject?: ((result: ApprovalResult) => any) | undefined;
+}>, {
+    variant: ComponentVariant;
+    closeOnPressEscape: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/approval-card/index.vue

@@ -0,0 +1,252 @@
+<script setup>
+import CheckCircleFillIcon from "@gdsicon/vue/check-circle-fill";
+import ClockIcon from "@gdsicon/vue/clock";
+import CrossCircleFillIcon from "@gdsicon/vue/cross-circle-fill";
+import TerminalIcon from "@gdsicon/vue/terminal";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isCompositionKeydown } from "../../utils/event.js";
+import { isTruthyProp, toArray } from "../../utils/format.js";
+import PBadge from "../badge/index.vue";
+import PButton from "../button/index.vue";
+import PCheckbox from "../checkbox/index.vue";
+import PSnippet from "../snippet/index.vue";
+defineOptions({
+	name: "PApprovalCard",
+	inheritAttrs: false
+});
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false
+	},
+	title: {
+		type: null,
+		required: false
+	},
+	description: {
+		type: null,
+		required: false
+	},
+	command: {
+		type: [String, Array],
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "warning"
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	timeout: {
+		type: Number,
+		required: false
+	},
+	rememberable: {
+		type: Boolean,
+		required: false
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	}
+});
+const emits = defineEmits([
+	"update:modelValue",
+	"decide",
+	"approve",
+	"reject"
+]);
+let timerId;
+const STATUS_ICON = {
+	pending: TerminalIcon,
+	approved: CheckCircleFillIcon,
+	rejected: CrossCircleFillIcon,
+	dismissed: ClockIcon
+};
+const STATUS_CLASS = {
+	pending: "",
+	approved: "border-blue-400 bg-blue-200 text-blue-900",
+	rejected: "border-red-400 bg-red-200 text-red-900",
+	dismissed: "border-gray-400 bg-gray-200 text-gray-900"
+};
+const STATUS_BADGE = {
+	pending: "amber-subtle",
+	approved: "green-subtle",
+	rejected: "red-subtle",
+	dismissed: "gray-subtle"
+};
+const VARIANT_CLASS = {
+	primary: "border-gray-alpha-400 text-primary",
+	error: "border-red-400 bg-red-200 text-red-900",
+	warning: "border-amber-400 bg-amber-200 text-amber-900",
+	success: "border-green-400 bg-green-200 text-green-900"
+};
+const internalStatus = shallowRef("pending");
+const remembered = shallowRef(false);
+const timerKey = shallowRef(0);
+const status = computed(() => props.modelValue ?? internalStatus.value);
+const isPending = computed(() => status.value === "pending");
+const isDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
+const commandList = computed(() => toArray(props.command).filter(Boolean));
+const statusIcon = computed(() => STATUS_ICON[status.value]);
+const statusBadge = computed(() => STATUS_BADGE[status.value]);
+const iconClass = computed(() => isPending.value ? VARIANT_CLASS[props.variant] : STATUS_CLASS[status.value]);
+const configProvider = useConfigProvider();
+const computedTitle = computed(() => props.title || configProvider.locale.approval.title);
+const computedStatusLabel = computed(() => configProvider.locale.approval[status.value]);
+function clearTimer() {
+	if (timerId !== undefined) {
+		clearTimeout(timerId);
+		timerId = undefined;
+	}
+}
+function startTimer() {
+	clearTimer();
+	const { timeout } = props;
+	if (!isPending.value || !timeout) {
+		return;
+	}
+	timerKey.value++;
+	timerId = setTimeout(() => {
+		dismiss("timeout");
+	}, timeout);
+}
+function commit(next, extra = {}) {
+	if (!isPending.value) {
+		return;
+	}
+	clearTimer();
+	const result = {
+		...extra,
+		status: next
+	};
+	internalStatus.value = next;
+	emits("update:modelValue", next);
+	emits("decide", result);
+	if (next === "approved") {
+		emits("approve", result);
+	} else if (next === "rejected") {
+		emits("reject", result);
+	}
+}
+function approve(reason) {
+	commit("approved", {
+		reason,
+		remember: props.rememberable ? remembered.value : false
+	});
+}
+function reject(reason) {
+	commit("rejected", { reason });
+}
+function dismiss(cause = "close") {
+	commit("dismissed", { cause });
+}
+function reset() {
+	clearTimer();
+	remembered.value = false;
+	internalStatus.value = "pending";
+	emits("update:modelValue", "pending");
+	startTimer();
+}
+function onEscape(ev) {
+	if (!props.closeOnPressEscape || !isPending.value || isCompositionKeydown(ev)) {
+		return;
+	}
+	ev.preventDefault();
+	dismiss("escape");
+}
+watch(() => [status.value, props.timeout], startTimer, { immediate: true });
+onBeforeUnmount(clearTimer);
+defineExpose({
+	status,
+	approve,
+	reject,
+	dismiss,
+	reset
+});
+</script>
+
+<template>
+  <div
+    data-approval-card
+    class="pxd-approval-card bg-background p-3 gap-2 relative flex w-full max-w-full flex-col overflow-hidden rounded-xl border"
+    :data-status="status"
+    :data-variant="variant"
+    v-bind="$attrs"
+    @keydown.esc="onEscape"
+  >
+    <div
+      v-if="isPending && timeout"
+      :key="timerKey"
+      aria-hidden="true"
+      class="pxd-approval-card--progress pxd-countdown-progress inset-x-0 top-0 h-0.5 absolute rounded-full bg-current"
+      :style="{ animationDuration: `${timeout}ms` }"
+    />
+
+    <div class="pxd-approval-card--header gap-2 flex items-center">
+      <div
+        class="pxd-approval-card--icon size-8 flex shrink-0 items-center justify-center rounded-md border"
+        :class="iconClass"
+      >
+        <Component :is="statusIcon" class="size-4" />
+      </div>
+
+      <div class="min-w-0 flex-1">
+        <div
+          class="pxd-approval-card--title font-medium text-sm leading-tight truncate text-foreground"
+        >
+          {{ computedTitle }}
+        </div>
+
+        <div
+          v-if="description"
+          class="pxd-approval-card--description text-sm truncate leading-none text-foreground-secondary"
+        >
+          {{ description }}
+        </div>
+      </div>
+
+      <PBadge
+        v-if="!isPending"
+        class="pxd-approval-card--status shrink-0"
+        size="sm"
+        :variant="statusBadge"
+      >
+        {{ computedStatusLabel }}
+      </PBadge>
+    </div>
+
+    <div v-if="commandList.length > 0" class="pxd-approval-card--command">
+      <PSnippet :text="commandList" variant="secondary" copy-btn="hover" :prompt="false" />
+    </div>
+
+    <div v-if="isPending" class="pxd-approval-card--actions gap-2 flex items-center">
+      <div v-if="rememberable" class="pxd-approval-card--remember">
+        <PCheckbox
+          v-model="remembered"
+          :disabled="isDisabled"
+          :label="configProvider.locale.approval.remember"
+        />
+      </div>
+
+      <div class="gap-2 ms-auto flex items-center">
+        <PButton size="sm" :disabled="isDisabled" @click="reject()">
+          {{ configProvider.locale.approval.reject }}
+        </PButton>
+
+        <PButton size="sm" variant="primary" :loading="loading" @click="approve()">
+          {{ configProvider.locale.approval.approve }}
+        </PButton>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/approval-card/types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentLabel, ComponentVariant } from '../../types/shared/props'
+
+export type ApprovalStatus = 'pending' | 'approved' | 'rejected' | 'dismissed'
+
+export type ApprovalDecision = Exclude<ApprovalStatus, 'pending'>
+
+export type ApprovalCause = 'escape' | 'close' | 'timeout'
+
+export interface ApprovalResult {
+  status: ApprovalDecision
+  /** Only set on `dismissed`: separates an active skip from the timeout that ends the wait. */
+  cause?: ApprovalCause
+  reason?: string
+  remember?: boolean
+}
+
+export interface ApprovalCardProps {
+  modelValue?: ApprovalStatus
+  /** Fallback title; renders `locale.approval.title`. */
+  title?: ComponentLabel
+  description?: ComponentLabel
+  command?: string | string[]
+  variant?: ComponentVariant
+  loading?: boolean
+  /** Milliseconds before an undecided card dismisses itself; `0` never times out. */
+  timeout?: number
+  rememberable?: boolean
+  closeOnPressEscape?: boolean
+  disabled?: boolean
+}
+
+export interface ApprovalCardEmits {
+  'update:modelValue': [status: ApprovalStatus]
+  decide: [result: ApprovalResult]
+  approve: [result: ApprovalResult]
+  reject: [result: ApprovalResult]
+}

package/dist/components/avatar/index.vue

@@ -1,48 +1,64 @@
 <script setup>
 import { computed, shallowRef } from "vue";
-import { useAvatarGroupContext } from "../../contexts/avatar";
-import { getCssUnitValue } from "../../utils/format";
+import { useAvatarGroupContext } from "../../contexts/avatar.js";
+import { getCssUnitValue } from "../../utils/format.js";
 defineOptions({
-  name: "PAvatar",
-  inheritAttrs: false
+	name: "PAvatar",
+	inheritAttrs: false
 });
 const props = defineProps({
-  src: { type: String, required: false },
-  alt: { type: String, required: false },
-  size: { type: [Number, String], required: false },
-  loading: { type: Boolean, required: false },
-  placeholder: { type: Boolean, required: false }
+	src: {
+		type: String,
+		required: false
+	},
+	alt: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: [Number, String],
+		required: false
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	placeholder: {
+		type: Boolean,
+		required: false
+	}
 });
-const emits = defineEmits(["load", "error", "loadstart"]);
+const emits = defineEmits([
+	"load",
+	"error",
+	"loadstart"
+]);
 const loadingStatus = shallowRef("idle");
+const isHideAvatar = computed(() => !props.src || props.placeholder || loadingStatus.value === "error");
 const avatarGroupContext = useAvatarGroupContext();
 const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.props.size));
-const isHideAvatar = computed(
-  () => !props.src || props.placeholder || loadingStatus.value === "error"
-);
 function onLoadError(event) {
-  loadingStatus.value = "error";
-  emits("error", event);
+	loadingStatus.value = "error";
+	emits("error", event);
 }
 function onLoadSuccess(event) {
-  loadingStatus.value = "loaded";
-  emits("load", event);
+	loadingStatus.value = "loaded";
+	emits("load", event);
 }
 function onLoadStart(event) {
-  loadingStatus.value = "loading";
-  emits("loadstart", event);
+	loadingStatus.value = "loading";
+	emits("loadstart", event);
 }
 function getLoadingStatus() {
-  return loadingStatus.value;
+	return loadingStatus.value;
 }
-defineExpose({
-  getLoadingStatus
-});
+defineExpose({ getLoadingStatus });
 </script>
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 bg-background-100 text-13 select-none before:default-animation-timing-function! motion-safe:before:[animation-duration:8s]"
+    data-avatar
+    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full bg-background-100 text-13 select-none before:default-animation-timing-function! after:border after:border-gray-alpha-300 motion-reduce:before:animate-none!"
     :style="{ '--avatar-size': computedSize }"
     :data-placeholder="placeholder"
     v-bind="$attrs"
@@ -78,58 +94,13 @@ defineExpose({
 
     <div
       v-if="$slots.icon"
-      class="-bottom-1 -left-1 absolute z-1 flex size-1/2 items-center overflow-hidden rounded-full border border-background-100 bg-background-100"
+      class="bottom-0 left-0 text-xs absolute z-1 flex w-max items-center justify-center overflow-hidden rounded-full bg-background-100 ring-1 ring-background-100"
     >
       <slot name="icon" />
     </div>
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-avatar {
-  &::after,
-  &[data-placeholder='true']::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-  }
-
-  &[data-placeholder='true']::before {
-    background-image: linear-gradient(
-      270deg,
-      var(--color-gray-alpha-100),
-      var(--color-gray-alpha-300),
-      var(--color-gray-alpha-300),
-      var(--color-gray-alpha-100)
-    );
-    background-size: 400% 100%;
-    animation-name: placeholder;
-    animation-iteration-count: infinite;
-  }
-
-  &::after {
-    border: 1px solid var(--color-gray-alpha-300);
-  }
-}
-
-.pxd-avatar--loading::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  border-style: solid;
-  border-width: 2px 2px 1px 0;
-  border-color: var(--color-primary) var(--color-primary) transparent transparent;
-}
-
-@keyframes placeholder {
-  0% {
-    background-position: 200% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
+<style>
+.pxd-avatar:after,.pxd-avatar[data-placeholder=true]:before{border-radius:inherit;content:"";inset:0;position:absolute}.pxd-avatar[data-placeholder=true]:before{animation:pxd-animation-placeholder 8s infinite;background-image:linear-gradient(270deg,var(--color-gray-alpha-100),var(--color-gray-alpha-300),var(--color-gray-alpha-300),var(--color-gray-alpha-100));background-size:400% 100%}.pxd-avatar--loading:after{border-color:var(--color-primary) var(--color-primary) transparent transparent;border-radius:inherit;border-style:solid;border-width:2px 2px 1px 0;content:"";inset:0;position:absolute}@keyframes pxd-animation-placeholder{0%{background-position:200% 0}to{background-position:-200% 0}}
 </style>

package/dist/components/avatar-group/index.d.vue.ts

@@ -1,7 +1,7 @@
 import type { AvatarGroupProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
-    max: number;
     options: import("./types").AvatarOptions[];
+    max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/avatar-group/index.vue

@@ -1,41 +1,54 @@
 <script setup>
 import { computed } from "vue";
-import { provideAvatarGroupContext } from "../../contexts/avatar";
+import { provideAvatarGroupContext } from "../../contexts/avatar.js";
 import PAvatar from "../avatar/index.vue";
 defineOptions({
-  name: "PAvatarGroup",
-  inheritAttrs: false
+	name: "PAvatarGroup",
+	inheritAttrs: false
 });
 const props = defineProps({
-  max: { type: Number, required: false, default: 5 },
-  size: { type: [Number, String], required: false },
-  options: { type: Array, required: false, default: () => [] }
+	max: {
+		type: Number,
+		required: false,
+		default: 5
+	},
+	size: {
+		type: [Number, String],
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	}
 });
 const slicedOptions = computed(() => {
-  const { max, options = [] } = props;
-  const maxCount = Math.max(Math.min(max, options.length), 1);
-  return options.slice(0, maxCount);
+	const { max, options = [] } = props;
+	const maxCount = Math.max(Math.min(max, options.length), 1);
+	return options.slice(0, maxCount);
 });
 provideAvatarGroupContext({ props });
 </script>
 
 <template>
-  <div class="pxd-avatar-group flex flex-wrap items-center" v-bind="$attrs">
-    <PAvatar
-      v-for="(option, index) in slicedOptions"
-      :key="index"
-      :size="size"
-      :src="option.src"
-      :alt="option.alt"
-      :loading="option.loading"
-      class="nth-[n+2]:-ml-2.5 hover:z-1"
-    />
+  <div data-avatar-group class="pxd-avatar-group flex flex-wrap items-center" v-bind="$attrs">
+    <div v-for="(option, index) in slicedOptions" :key="index" class="group nth-[n+2]:-ms-2.5">
+      <PAvatar
+        :size="size"
+        :src="option.src"
+        :alt="option.alt"
+        :loading="option.loading"
+        class="group-hover:-translate-y-1 group-hover:shadow-lg ring-2 ring-background-100 group-hover:z-1 group-hover:scale-110 motion-safe:transition-appearance"
+      />
+    </div>
 
-    <PAvatar
-      v-if="slicedOptions.length < options.length"
-      class="text-xs -ml-3 bg-gray-1000 text-gray-100"
-    >
-      +{{ options.length - slicedOptions.length }}
-    </PAvatar>
+    <div class="group -ms-3">
+      <PAvatar
+        v-if="slicedOptions.length < options.length"
+        class="text-xs group-hover:-translate-y-1 group-hover:shadow-lg bg-gray-1000 text-gray-100 ring-2 ring-background-100 group-hover:z-1 group-hover:scale-110 motion-safe:transition-appearance"
+      >
+        +{{ options.length - slicedOptions.length }}
+      </PAvatar>
+    </div>
   </div>
 </template>

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

@@ -1,10 +1,17 @@
 import type { BacktopProps } from './types';
-declare var __VLS_7: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<BacktopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BacktopProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<BacktopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (args_0: PointerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<BacktopProps> & Readonly<{
+    onClick?: ((args_0: PointerEvent) => any) | undefined;
+}>, {
+    appendToBody: boolean;
     visibleThreshold: number;
+    scrollTarget: "bottom" | "top";
+    scrollBehavior: ScrollBehavior;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;