pxd 0.0.64 → 0.1.3

package/dist/components/_internal/step-item.d.vue.ts

@@ -0,0 +1,24 @@
+import type { StepsOption, StepsStatus } from '../steps/types';
+type __VLS_Props = {
+    clickable?: boolean;
+    index: number;
+    option: StepsOption;
+    status: StepsStatus;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((args_0: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/_internal/step-item.vue

@@ -0,0 +1,86 @@
+<script setup>
+import CheckIcon from "@gdsicon/vue/check";
+import CrossIcon from "@gdsicon/vue/cross";
+import { computed } from "vue";
+defineOptions({ name: "PStepsItem" });
+const props = defineProps({
+	clickable: {
+		type: Boolean,
+		required: false
+	},
+	index: {
+		type: Number,
+		required: true
+	},
+	option: {
+		type: Object,
+		required: true
+	},
+	status: {
+		type: String,
+		required: true
+	}
+});
+const emits = defineEmits(["select"]);
+const disabled = computed(() => !!props.option.disabled);
+function onClick() {
+	if (!props.clickable || disabled.value) {
+		return;
+	}
+	emits("select", props.index);
+}
+</script>
+
+<template>
+  <div
+    data-step-item
+    class="pxd-steps-item px-1 group/steps-item relative flex gap-(--steps-gap) group-data-[direction=horizontal]/steps:flex-1 group-data-[direction=horizontal]/steps:flex-col group-data-[direction=horizontal]/steps:items-center data-[disabled=true]:opacity-50"
+    :data-status="status"
+    :data-disabled="disabled"
+    :class="clickable && !disabled ? 'cursor-pointer' : 'cursor-default'"
+    role="listitem"
+    :aria-current="status === 'process' ? 'step' : void 0"
+    @click="onClick"
+  >
+    <div class="pxd-steps-item--indicator-wrapper relative flex shrink-0">
+      <span
+        class="pxd-steps-item--indicator font-medium inline-flex size-(--steps-indicator-size) items-center justify-center rounded-full border border-border bg-background-100 text-(length:--steps-indicator-font-size) text-foreground-secondary data-[status=error]:border-red-800 data-[status=error]:bg-red-800 data-[status=error]:text-gray-100 data-[status=finish]:border-gray-300 data-[status=finish]:bg-gray-100 data-[status=process]:border-primary data-[status=process]:bg-primary data-[status=process]:text-primary-foreground motion-safe:transition-colors dark:data-[status=error]:text-gray-1000"
+        :data-status="status"
+      >
+        <CheckIcon
+          v-if="status === 'finish'"
+          class="pxd-steps-item--icon size-(--steps-icon-size)"
+          aria-hidden="true"
+        />
+        <CrossIcon
+          v-else-if="status === 'error'"
+          class="pxd-steps-item--icon size-(--steps-icon-size)"
+          aria-hidden="true"
+        />
+        <template v-else>{{ index + 1 }}</template>
+      </span>
+    </div>
+
+    <div
+      class="pxd-steps-item--content group-data-[direction=horizontal]/steps:min-w-0 flex flex-col group-data-[direction=horizontal]/steps:items-center group-data-[direction=horizontal]/steps:text-center"
+    >
+      <slot>
+        <div
+          class="pxd-steps-item--title font-medium text-(length:--steps-title-font-size) leading-(--steps-indicator-size) text-foreground-secondary group-data-[status=error]/steps-item:text-red-700 group-data-[status=process]/steps-item:text-foreground motion-safe:transition-colors"
+        >
+          {{ option.title }}
+        </div>
+        <div
+          v-if="option.description"
+          class="pxd-steps-item--description text-(length:--steps-description-font-size) text-foreground-secondary opacity-80"
+        >
+          {{ option.description }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.pxd-steps[data-direction=horizontal] .pxd-steps-item:not(:last-child):after{border-bottom:1px solid var(--color-border);content:"";left:calc(50% + var(--steps-indicator-size)/2 + var(--steps-gap));position:absolute;right:calc(-50% + var(--steps-indicator-size)/2 + var(--steps-gap));top:calc(var(--steps-indicator-size)/2)}.pxd-steps[data-direction=horizontal] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child){padding-bottom:var(--steps-gap)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child):after{border-left:1px solid var(--color-border);bottom:calc(var(--steps-gap)/2);content:"";left:calc(var(--steps-indicator-size)/2 + var(--spacing));position:absolute;top:calc(var(--steps-indicator-size) + var(--steps-gap)/2)}.pxd-steps[data-direction=vertical] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}
+</style>

package/dist/components/_internal/tree-node.d.vue.ts

@@ -0,0 +1,72 @@
+import type { ComponentClass, ComponentValue } from '../../types/shared/props';
+import type { TreeDropPosition, TreeHighlightPart, TreeOption } from '../tree/types';
+type __VLS_Props = {
+    node: TreeOption;
+    value: ComponentValue;
+    depth: number;
+    index: number;
+    hasChildren: boolean;
+    expanded: boolean;
+    loading: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    active: boolean;
+    multiple: boolean;
+    disabled: boolean;
+    selectable: boolean;
+    setSize: number;
+    indent: number;
+    id: string;
+    highlightQuery: string;
+    draggable: boolean;
+    dragging: boolean;
+    dropPosition?: TreeDropPosition;
+    itemClass?: ComponentClass;
+};
+declare var __VLS_1: {
+    node: TreeOption;
+    depth: number;
+    loading: boolean;
+    expanded: boolean;
+}, __VLS_23: {
+    node: TreeOption;
+    depth: number;
+    expanded: boolean;
+    hasChildren: boolean;
+}, __VLS_25: {
+    node: TreeOption;
+    depth: number;
+    parts: TreeHighlightPart[] | undefined;
+    hasChildren: boolean;
+}, __VLS_28: {
+    node: TreeOption;
+    hasChildren: boolean;
+};
+type __VLS_Slots = {} & {
+    'node-switcher'?: (props: typeof __VLS_1) => any;
+} & {
+    'node-icon'?: (props: typeof __VLS_23) => any;
+} & {
+    'node-content'?: (props: typeof __VLS_25) => any;
+} & {
+    'node-suffix'?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (value: ComponentValue) => any;
+    check: (value: ComponentValue, event: MouseEvent) => any;
+    "row-click": (value: ComponentValue, event: MouseEvent) => any;
+    "drag-pointerdown": (value: ComponentValue, event: PointerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((value: ComponentValue) => any) | undefined;
+    onCheck?: ((value: ComponentValue, event: MouseEvent) => any) | undefined;
+    "onRow-click"?: ((value: ComponentValue, event: MouseEvent) => any) | undefined;
+    "onDrag-pointerdown"?: ((value: ComponentValue, event: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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/_internal/tree-node.vue

@@ -0,0 +1,268 @@
+<script setup>
+import CheckIcon from "@gdsicon/vue/check";
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
+import MinusIcon from "@gdsicon/vue/minus";
+import { computed } from "vue";
+defineOptions({
+	name: "PTreeNode",
+	inheritAttrs: false
+});
+const props = defineProps({
+	node: {
+		type: Object,
+		required: true
+	},
+	value: {
+		type: [String, Number],
+		required: true
+	},
+	depth: {
+		type: Number,
+		required: true
+	},
+	index: {
+		type: Number,
+		required: true
+	},
+	hasChildren: {
+		type: Boolean,
+		required: true
+	},
+	expanded: {
+		type: Boolean,
+		required: true
+	},
+	loading: {
+		type: Boolean,
+		required: true
+	},
+	checked: {
+		type: Boolean,
+		required: true
+	},
+	indeterminate: {
+		type: Boolean,
+		required: true
+	},
+	active: {
+		type: Boolean,
+		required: true
+	},
+	multiple: {
+		type: Boolean,
+		required: true
+	},
+	disabled: {
+		type: Boolean,
+		required: true
+	},
+	selectable: {
+		type: Boolean,
+		required: true
+	},
+	setSize: {
+		type: Number,
+		required: true
+	},
+	indent: {
+		type: Number,
+		required: true
+	},
+	id: {
+		type: String,
+		required: true
+	},
+	highlightQuery: {
+		type: String,
+		required: true
+	},
+	draggable: {
+		type: Boolean,
+		required: true
+	},
+	dragging: {
+		type: Boolean,
+		required: true
+	},
+	dropPosition: {
+		type: String,
+		required: false
+	},
+	itemClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
+});
+const emits = defineEmits([
+	"check",
+	"toggle",
+	"row-click",
+	"drag-pointerdown"
+]);
+const disabled = computed(() => props.disabled || props.node.disabled === true);
+const unavailable = computed(() => disabled.value || !props.selectable);
+const checkboxClass = computed(() => {
+	if (props.checked) {
+		return unavailable.value ? "border-gray-500 bg-gray-500" : "border-primary bg-primary";
+	}
+	return unavailable.value ? "border-gray-500 bg-gray-100 cursor-not-allowed" : "border-gray-alpha-400 bg-background-100";
+});
+const indentSize = computed(() => props.depth * props.indent + 8);
+const parts = computed(() => {
+	const query = props.highlightQuery;
+	if (!query) {
+		return undefined;
+	}
+	const label = String(props.node.label ?? "");
+	const at = label.toLowerCase().indexOf(query.toLowerCase());
+	if (at === -1) {
+		return undefined;
+	}
+	return [
+		{
+			text: label.slice(0, at),
+			matched: false
+		},
+		{
+			text: label.slice(at, at + query.length),
+			matched: true
+		},
+		{
+			text: label.slice(at + query.length),
+			matched: false
+		}
+	].filter((part) => part.text);
+});
+function onPointerdown(event) {
+	if (!props.draggable) {
+		return;
+	}
+	emits("drag-pointerdown", props.value, event);
+}
+</script>
+
+<template>
+  <div
+    data-tree-node
+    :id="id"
+    role="treeitem"
+    data-tree-item
+    :data-index="index"
+    :data-key="value"
+    :data-checked="checked"
+    :data-active="active"
+    :data-indeterminate="indeterminate"
+    :data-disabled="disabled"
+    :data-dragging="dragging"
+    :data-drop="dropPosition"
+    :aria-level="depth + 1"
+    :aria-expanded="hasChildren ? expanded : void 0"
+    :aria-busy="loading || void 0"
+    :aria-selected="multiple ? void 0 : checked"
+    :aria-checked="multiple ? indeterminate ? 'mixed' : checked : void 0"
+    :aria-setsize="setSize"
+    :aria-posinset="index + 1"
+    :aria-disabled="disabled || void 0"
+    :style="{ paddingInlineStart: indentSize + 'px', '--node-indent': indentSize + 'px' }"
+    class="pxd-tree--node group/row min-h-8 py-1 pe-2 gap-1.5 text-sm relative flex w-full max-w-full cursor-pointer items-center rounded-md text-foreground outline-none select-none pointer-fine:hover:bg-gray-100"
+    :class="[
+  itemClass,
+  {
+    'bg-gray-200!': checked,
+    'z-1 ring-primary data-[active=true]:ring-1': active,
+    'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-gray-500': disabled,
+    'opacity-40': dragging,
+    'bg-gray-300 ring-1 ring-primary': dropPosition === 'inside',
+    'before:end-0 before:absolute before:start-(--node-indent) before:border-t-2 before:bg-primary': dropPosition === 'before' || dropPosition === 'after',
+    'before:-top-px': dropPosition === 'before',
+    'before:bottom-0': dropPosition === 'after'
+  }
+]"
+    v-bind="$attrs"
+    @click="emits('row-click', value, $event)"
+    @pointerdown="onPointerdown"
+    @dragstart.prevent
+  >
+    <span
+      v-if="hasChildren"
+      data-tree-switcher
+      class="pxd-tree--switcher size-4 relative inline-flex shrink-0 items-center justify-center rounded-sm motion-safe:after:transition-colors"
+      @click.stop="emits('toggle', value)"
+    >
+      <slot
+        name="node-switcher"
+        :node="node"
+        :depth="depth"
+        :loading="loading"
+        :expanded="expanded"
+      >
+        <LoaderCircleIcon v-if="loading" class="size-3 motion-safe:animate-spin" />
+        <ChevronRightIcon
+          v-else
+          class="size-3 motion-safe:transition-transform"
+          :class="{ 'rotate-90': expanded }"
+        />
+      </slot>
+    </span>
+    <span v-else aria-hidden="true" class="pxd-tree--switcher size-4 shrink-0" />
+
+    <span
+      v-if="multiple"
+      aria-hidden="true"
+      :data-selectable="selectable"
+      class="pxd-tree--checkbox size-4 p-0.5 inline-flex shrink-0 items-center justify-center overflow-hidden rounded-sm border text-primary-foreground"
+      :class="checkboxClass"
+      @click.stop="emits('check', value, $event)"
+    >
+      <CheckIcon v-if="checked" class="size-3" />
+      <MinusIcon v-else-if="indeterminate" class="size-3" />
+      <span v-else class="size-3" />
+    </span>
+
+    <span
+      v-if="$slots['node-icon']"
+      aria-hidden="true"
+      class="pxd-tree--icon size-4 inline-flex shrink-0 items-center justify-center"
+    >
+      <slot
+        name="node-icon"
+        :node="node"
+        :depth="depth"
+        :expanded="expanded"
+        :has-children="hasChildren"
+      />
+    </span>
+
+    <span class="pxd-tree--content min-w-0 flex-1 truncate">
+      <slot
+        name="node-content"
+        :node="node"
+        :depth="depth"
+        :parts="parts"
+        :has-children="hasChildren"
+      >
+        <template v-if="parts">
+          <mark
+            v-for="(part, partIndex) in parts"
+            :key="partIndex"
+            class="pxd-tree--match bg-transparent text-inherit"
+            :class="{ 'bg-yellow-200 text-yellow-900': part.matched }"
+            >{{ part.text }}</mark
+          >
+        </template>
+        <template v-else>{{ node.label }}</template>
+      </slot>
+    </span>
+
+    <slot name="node-suffix" :node="node" :has-children="hasChildren" />
+  </div>
+</template>
+
+<style>
+.pxd-tree--switcher.relative:after{border-radius:inherit;content:"";height:150%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:150%}.pxd-tree--switcher.relative:hover:after{background-color:var(--color-gray-alpha-100)}
+</style>

package/dist/components/active-graph/index.d.vue.ts

@@ -1,14 +1,14 @@
 import type { ActiveGraphProps, ActiveGraphTooltipInfo } from './types';
-declare var __VLS_7: {
+declare var __VLS_11: {
     data: ActiveGraphTooltipInfo;
 };
 type __VLS_Slots = {} & {
-    tooltip?: (props: typeof __VLS_7) => any;
+    tooltip?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ActiveGraphProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: string, args_1: MouseEvent) => any;
+    change: (args_0: string, args_1: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ActiveGraphProps> & Readonly<{
-    onSelect?: ((args_0: string, args_1: MouseEvent) => any) | undefined;
+    onChange?: ((args_0: string, args_1: MouseEvent) => any) | undefined;
 }>, {
     data: Record<string, any>[];
     legend: boolean;