pxd 0.0.64 → 0.1.3

package/dist/components/todo-list/index.vue

@@ -0,0 +1,357 @@
+<script setup>
+import CheckIcon from "@gdsicon/vue/check";
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
+import ListUnorderedIcon from "@gdsicon/vue/list-unordered";
+import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
+import MinusIcon from "@gdsicon/vue/minus";
+import { computed, shallowRef, useSlots, watch } from "vue";
+import { useCollapseMotion } from "../../composables/_internal/use-collapse-motion.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+defineOptions({
+	name: "PTodoList",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	modelValue: {
+		type: Array,
+		required: false
+	},
+	defaultValue: {
+		type: Array,
+		required: false
+	},
+	readonly: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	collapsible: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	defaultExpanded: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	title: {
+		type: null,
+		required: false
+	},
+	empty: {
+		type: null,
+		required: false
+	}
+});
+const emits = defineEmits([
+	"change",
+	"update:modelValue",
+	"toggle"
+]);
+const MARKER_CLASSES = {
+	pending: "border-2 border-gray-alpha-400",
+	in_progress: "",
+	completed: "p-1 bg-teal-600 text-white",
+	canceled: "p-1 bg-gray-alpha-400 text-white"
+};
+const NEXT_STATUS = {
+	pending: "in_progress",
+	in_progress: "completed",
+	completed: "pending",
+	canceled: "pending"
+};
+const innerValue = shallowRef(props.defaultValue);
+const isExpanded = shallowRef(props.defaultExpanded);
+const contentRef = shallowRef();
+const currentOptions = computed(() => props.modelValue ?? innerValue.value ?? props.options);
+const expanded = computed(() => !props.collapsible || isExpanded.value);
+const stats = computed(() => {
+	const options = currentOptions.value;
+	const result = {
+		pending: 0,
+		inProgress: 0,
+		completed: 0,
+		canceled: 0,
+		total: options.length
+	};
+	for (const item of options) {
+		const status = resolveStatus(item);
+		if (status === "in_progress") {
+			result.inProgress++;
+		} else if (status === "completed") {
+			result.completed++;
+		} else if (status === "canceled") {
+			result.canceled++;
+		} else {
+			result.pending++;
+		}
+	}
+	return result;
+});
+const summaryText = computed(() => {
+	const { inProgress, pending, total, canceled } = stats.value;
+	const totalCount = total - canceled;
+	const currentCount = totalCount - inProgress - pending;
+	return totalCount > 0 ? `${currentCount}/${totalCount}` : "";
+});
+const configProvider = useConfigProvider();
+const headerTitle = computed(() => props.title ?? configProvider.locale.todo.title);
+const emptyText = computed(() => props.empty ?? configProvider.locale.results.noData);
+const slots = useSlots();
+const hasItemSlot = computed(() => !!slots.item);
+const hasEmptySlot = computed(() => !!slots.empty);
+const hasItemContentSlot = computed(() => !!slots["item-content"]);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, expanded);
+function resolveStatus(item) {
+	return item.status ?? "pending";
+}
+function commit(index, status) {
+	const prev = currentOptions.value[index];
+	if (!prev) {
+		return;
+	}
+	const prevStatus = resolveStatus(prev);
+	if (prevStatus === status) {
+		return;
+	}
+	const item = {
+		...prev,
+		status
+	};
+	const options = currentOptions.value.map((option, i) => i === index ? item : option);
+	if (props.modelValue === undefined) {
+		innerValue.value = options;
+	}
+	const detail = {
+		item,
+		index,
+		status,
+		prevStatus,
+		options
+	};
+	emits("change", detail);
+	emits("update:modelValue", options);
+}
+function onItemClick(index, item) {
+	if (props.readonly || item.disabled) {
+		return;
+	}
+	commit(index, NEXT_STATUS[resolveStatus(item)]);
+}
+function resolveIndex(target) {
+	const byId = currentOptions.value.findIndex((item) => item.id === target);
+	return byId > -1 ? byId : target;
+}
+function setStatus(target, status) {
+	if (props.readonly) {
+		return;
+	}
+	const index = resolveIndex(target);
+	if (index < 0 || index >= currentOptions.value.length) {
+		return;
+	}
+	commit(index, status);
+}
+function start(target) {
+	setStatus(target, "in_progress");
+}
+function complete(target) {
+	setStatus(target, "completed");
+}
+function cancel(target) {
+	setStatus(target, "canceled");
+}
+function reset(target) {
+	setStatus(target, "pending");
+}
+function expand() {
+	isExpanded.value = true;
+}
+function collapse() {
+	isExpanded.value = false;
+}
+function toggleExpand(next) {
+	isExpanded.value = next ?? !isExpanded.value;
+}
+function onToggleClick(ev) {
+	if (!props.collapsible) {
+		return;
+	}
+	isExpanded.value = !isExpanded.value;
+	emits("toggle", isExpanded.value, ev);
+}
+function onDetailsToggle(ev) {
+	const details = ev.currentTarget;
+	// Find-in-page / fragment navigation opens <details> natively.
+	if (details.open && !expanded.value) {
+		skipEnterMotion();
+		isExpanded.value = true;
+	}
+}
+watch(() => props.options, (options) => {
+	if (props.modelValue === undefined) {
+		innerValue.value = options;
+	}
+});
+defineExpose({
+	isExpanded,
+	stats,
+	expand,
+	collapse,
+	toggleExpand,
+	start,
+	complete,
+	cancel,
+	reset
+});
+</script>
+
+<template>
+  <details
+    data-todo-list
+    class="pxd-todo-list group/todo w-full max-w-full rounded-xl border bg-background-100 text-foreground"
+    :open="detailsOpen"
+    v-bind="$attrs"
+    @toggle="onDetailsToggle"
+  >
+    <summary
+      class="pxd-todo-list--header group/todo gap-2 p-3 text-sm flex w-full cursor-pointer touch-manipulation list-none appearance-none items-center justify-between border-none bg-transparent font-inherit text-inherit self-focus-ring outline-none select-none"
+      :class="{ 'cursor-default': !collapsible }"
+      @click.prevent="onToggleClick"
+    >
+      <ListUnorderedIcon class="size-3 font-medium shrink-0" />
+      <slot
+        name="header"
+        :expanded="expanded"
+        :stats="stats"
+        :title="headerTitle"
+        :summary="summaryText"
+      >
+        <span class="pxd-todo-list--title font-medium min-w-0 text-sm flex-1 truncate">
+          {{ headerTitle }}
+        </span>
+
+        <span
+          v-if="summaryText"
+          class="pxd-todo-list--summary text-sm shrink-0 text-foreground-secondary"
+          aria-live="polite"
+        >
+          {{ summaryText }}
+        </span>
+      </slot>
+
+      <ChevronDownIcon
+        v-if="collapsible"
+        class="pxd-todo-list--caret text-xs shrink-0 opacity-0 group-hover/todo:opacity-100 motion-safe:transition-transform-opacity"
+        :class="{ 'rotate-180 opacity-100': isExpanded }"
+      />
+    </summary>
+
+    <div
+      ref="contentRef"
+      class="pxd-todo-list--content overflow-hidden"
+      :class="{ 'motion-safe:transition-[height]': isExpanded || isLeaving }"
+    >
+      <ul
+        class="pxd-todo-list--list max-h-40 m-0 p-3 gap-1.5 flex scrollbar-gutter-stable list-none flex-col overflow-y-auto border-t"
+      >
+        <li
+          v-if="currentOptions.length === 0"
+          class="pxd-todo-list--empty text-sm text-foreground-secondary"
+        >
+          <slot v-if="hasEmptySlot" name="empty" />
+          <template v-else>{{ emptyText }}</template>
+        </li>
+
+        <template v-for="(item, index) in currentOptions" :key="item.id ?? index">
+          <li
+            v-if="hasItemSlot"
+            class="pxd-todo-list--item gap-1.5 flex items-center"
+            :data-status="resolveStatus(item)"
+            @click="onItemClick(index, item)"
+          >
+            <slot
+              name="item"
+              :item="item"
+              :index="index"
+              :status="resolveStatus(item)"
+              :toggle="() => onItemClick(index, item)"
+            />
+          </li>
+
+          <li
+            v-else
+            class="pxd-todo-list--item gap-1.5 flex items-center"
+            :class="{
+  'cursor-pointer': !readonly && !item.disabled,
+  'opacity-50': item.disabled
+}"
+            :data-status="resolveStatus(item)"
+            @click="onItemClick(index, item)"
+          >
+            <button
+              class="pxd-todo-list--indicator p-0 size-4 block shrink-0 border-none bg-transparent leading-none text-inherit self-focus-ring"
+              type="button"
+              :disabled="readonly || item.disabled"
+              :aria-label="item.content == null ? void 0 : String(item.content)"
+              @click.stop="onItemClick(index, item)"
+            >
+              <LoaderCircleIcon
+                v-if="resolveStatus(item) === 'in_progress'"
+                class="motion-safe:animate-spin block size-full text-blue-900"
+              />
+
+              <span
+                v-else
+                class="pxd-todo-list--marker block size-full rounded-full"
+                :class="MARKER_CLASSES[resolveStatus(item)]"
+              >
+                <CheckIcon v-if="resolveStatus(item) === 'completed'" class="block size-full" />
+                <MinusIcon v-else-if="resolveStatus(item) === 'canceled'" class="block size-full" />
+              </span>
+            </button>
+
+            <div class="pxd-todo-list--body min-w-0 flex-1">
+              <div v-if="hasItemContentSlot" class="pxd-todo-list--text min-w-0">
+                <slot
+                  name="item-content"
+                  :item="item"
+                  :index="index"
+                  :status="resolveStatus(item)"
+                />
+              </div>
+
+              <template v-else>
+                <div
+                  class="pxd-todo-list--text min-w-0 text-sm"
+                  :class="{
+  'text-foreground-secondary line-through': resolveStatus(item) === 'completed'
+}"
+                >
+                  {{ item.content }}
+                </div>
+
+                <div
+                  v-if="item.description"
+                  class="pxd-todo-list--description text-sm text-foreground-secondary"
+                >
+                  {{ item.description }}
+                </div>
+              </template>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </details>
+</template>

package/dist/components/todo-list/types.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentLabel } from '../../types/shared/props'
+
+export type TodoStatus = 'pending' | 'in_progress' | 'completed' | 'canceled'
+
+/** Key accepted by the imperative methods: an option `id`, or its index. */
+export type TodoItemKey = string | number
+
+export interface TodoOption {
+  /** Stable key for rendering and for the imperative methods; falls back to the index. */
+  id?: TodoItemKey
+  /** Main label. Named after `todo_write`'s field so agent output can be bound directly. */
+  content?: ComponentLabel
+  description?: ComponentLabel
+  status?: TodoStatus
+  disabled?: boolean
+}
+
+export interface TodoChangeDetail {
+  item: TodoOption
+  index: number
+  status: TodoStatus
+  prevStatus: TodoStatus
+  options: TodoOption[]
+}
+
+export interface TodoStats {
+  pending: number
+  inProgress: number
+  completed: number
+  canceled: number
+  total: number
+}
+
+export interface TodoProps {
+  /** Items to render while uncontrolled; `modelValue` takes precedence. */
+  options?: TodoOption[]
+  modelValue?: TodoOption[]
+  defaultValue?: TodoOption[]
+  /** Render as a static list: no status buttons, no row click. */
+  readonly?: boolean
+  collapsible?: boolean
+  defaultExpanded?: boolean
+  /** Header title; falls back to `locale.todo.title`. */
+  title?: ComponentLabel
+  /** Empty-state text; falls back to `locale.results.noData`. */
+  empty?: ComponentLabel
+}
+
+export interface TodoEmits {
+  change: [TodoChangeDetail]
+  'update:modelValue': [TodoOption[]]
+  toggle: [expanded: boolean, event: MouseEvent]
+}

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

@@ -6,14 +6,14 @@ type __VLS_Slots = {} & {
     unchecked?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("./types").ValueType | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("./types").ValueType | undefined>) => any;
+    change: (args_0: NonNullable<import("./types").ValueType>) => any;
+    "update:modelValue": (args_0: NonNullable<import("./types").ValueType>) => any;
 }, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<import("./types").ValueType | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<import("./types").ValueType | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<import("./types").ValueType>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("./types").ValueType>) => any) | undefined;
 }>, {
-    activeValue: import("./types").ValueType;
-    inactiveValue: import("./types").ValueType;
+    activeValue: string | number | boolean;
+    inactiveValue: string | number | boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/toggle/index.vue

@@ -1,66 +1,117 @@
 <script setup>
 import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getFallbackValue } from "../../utils/get";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getUniqueId, getFallbackValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PToggle",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PToggle",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  modelValue: { type: [Boolean, Number, String], required: false },
-  activeValue: { type: [Boolean, Number, String], required: false, default: true },
-  inactiveValue: { type: [Boolean, Number, String], required: false, default: false },
-  beforeChange: { type: Function, required: false },
-  activeColor: { type: String, required: false },
-  inactiveColor: { type: String, required: false },
-  activeLabel: { type: String, required: false },
-  inactiveLabel: { type: String, required: false }
+	size: {
+		type: String,
+		required: false
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			Boolean,
+			Number,
+			String
+		],
+		required: false,
+		skipCheck: true
+	},
+	activeValue: {
+		type: [
+			Boolean,
+			Number,
+			String
+		],
+		required: false,
+		skipCheck: true,
+		default: true
+	},
+	inactiveValue: {
+		type: [
+			Boolean,
+			Number,
+			String
+		],
+		required: false,
+		skipCheck: true,
+		default: false
+	},
+	beforeChange: {
+		type: Function,
+		required: false
+	},
+	activeColor: {
+		type: String,
+		required: false
+	},
+	inactiveColor: {
+		type: String,
+		required: false
+	},
+	activeLabel: {
+		type: String,
+		required: false
+	},
+	inactiveLabel: {
+		type: String,
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const SIZES = {
-  sm: "w-7 h-4",
-  md: "w-9 h-5",
-  lg: "w-11 h-6"
+	sm: "w-7 h-4",
+	md: "w-9 h-5",
+	lg: "w-11 h-6"
 };
 const uniqueId = getUniqueId();
+const isDisabled = computed(() => props.disabled || props.loading);
 const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const modelValue = useModelValue(props, emits);
 const isChecked = computed(() => modelValue.value === props.activeValue);
-const isDisabled = computed(() => props.disabled || props.loading);
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 async function onCheckboxChange(e) {
-  if (props.loading) {
-    return;
-  }
-  const input = e.target;
-  const rawValue = input.checked;
-  if (typeof props.beforeChange === "function") {
-    input.checked = !rawValue;
-    const isAllowed = await props.beforeChange(modelValue.value);
-    if (!isAllowed) {
-      return;
-    }
-  }
-  const changedValue = rawValue ? props.activeValue : props.inactiveValue;
-  modelValue.value = changedValue;
-  emits("change", changedValue);
+	if (props.loading) {
+		return;
+	}
+	const input = e.target;
+	const rawValue = input.checked;
+	if (typeof props.beforeChange === "function") {
+		input.checked = !rawValue;
+		const isAllowed = await props.beforeChange(modelValue.value);
+		if (!isAllowed) {
+			return;
+		}
+	}
+	const changedValue = rawValue ? props.activeValue : props.inactiveValue;
+	modelValue.value = changedValue;
+	emits("change", changedValue);
 }
 </script>
 
 <template>
   <label
+    data-toggle
     role="switch"
     :for="uniqueId"
+    :aria-checked="isChecked"
     class="pxd-toggle group/toggle inline-flex cursor-pointer touch-manipulation items-center select-none"
     :aria-label="modelValue ? activeLabel : inactiveLabel"
     v-bind="$attrs"
@@ -76,7 +127,7 @@ async function onCheckboxChange(e) {
 
     <span
       v-if="inactiveLabel"
-      class="pxd-toggle--label text-sm mr-1.5 pl-0.5 leading-none opacity-100 peer-checked:opacity-50 motion-safe:transition-opacity"
+      class="pxd-toggle--label text-sm me-1.5 ps-0.5 leading-none opacity-100 peer-checked:opacity-50 motion-safe:transition-opacity"
       >{{ inactiveLabel }}</span
     >
 
@@ -91,7 +142,7 @@ async function onCheckboxChange(e) {
       <div
         :data-checked="isChecked"
         :data-disabled="isDisabled"
-        class="pxd-toggle--handle-icon text-xs shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-foreground-secondary motion-safe:transition-appearance dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
+        class="pxd-toggle--handle-icon shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-[10px] text-foreground-secondary motion-safe:transition-appearance dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
       >
         <div class="inset-0 pointer-events-none absolute flex items-center justify-center">
           <Transition name="pxd-transition--fade" mode="out-in">
@@ -105,7 +156,7 @@ async function onCheckboxChange(e) {
 
     <span
       v-if="activeLabel"
-      class="pxd-toggle--label text-sm ml-1.5 pr-0.5 leading-none opacity-50 peer-checked:opacity-100 motion-safe:transition-opacity"
+      class="pxd-toggle--label text-sm ms-1.5 pe-0.5 leading-none opacity-50 peer-checked:opacity-100 motion-safe:transition-opacity"
       >{{ activeLabel }}</span
     >
   </label>

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

@@ -1,6 +1,6 @@
-import type { ComponentBeforeChange, ComponentSize } from '../../types/shared'
+import type { ComponentBeforeChange, ComponentSize } from '../../types/shared/props'
 
-export type ValueType = boolean | number | string
+export type ValueType = boolean | number | string | undefined
 
 export interface ToggleProps {
   size?: ComponentSize

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

@@ -4,13 +4,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ToggleButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
+    change: (args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<ToggleButtonProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any) | undefined;
 }>, {
-    value: import("../../types/shared").ComponentValue;
+    value: import("./types").ToggleButtonModelValue;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;