pxd 0.0.64 → 0.1.2

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

@@ -0,0 +1,72 @@
+import type { ComponentClass, ComponentValue } from '../../types/shared';
+import type { TreeDropPosition, TreeOption } from '../tree/types';
+type __VLS_Props = {
+    node: TreeOption;
+    value: ComponentValue;
+    depth: number;
+    index: number;
+    hasChildren: boolean;
+    expanded: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    active: boolean;
+    multiple: boolean;
+    disabled: boolean;
+    setSize: number;
+    indent: number;
+    id: string;
+    highlightQuery: string;
+    showIcon: boolean;
+    draggable: boolean;
+    dragHandle: boolean;
+    dragging: boolean;
+    dropPosition?: TreeDropPosition;
+    itemClass?: ComponentClass;
+};
+declare var __VLS_1: {
+    node: TreeOption;
+    depth: number;
+}, __VLS_8: {
+    node: TreeOption;
+    depth: number;
+    expanded: boolean;
+}, __VLS_25: {
+    node: TreeOption;
+    depth: number;
+    expanded: boolean;
+}, __VLS_37: {
+    node: TreeOption;
+    depth: number;
+}, __VLS_39: {
+    node: TreeOption;
+};
+type __VLS_Slots = {} & {
+    'node-drag-handle'?: (props: typeof __VLS_1) => any;
+} & {
+    'node-switcher'?: (props: typeof __VLS_8) => any;
+} & {
+    'node-icon'?: (props: typeof __VLS_25) => any;
+} & {
+    'node-content'?: (props: typeof __VLS_37) => any;
+} & {
+    'node-suffix'?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (value: ComponentValue) => any;
+    "row-click": (value: ComponentValue) => any;
+    check: (value: ComponentValue) => any;
+    "drag-pointerdown": (value: ComponentValue, event: PointerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((value: ComponentValue) => any) | undefined;
+    "onRow-click"?: ((value: ComponentValue) => any) | undefined;
+    onCheck?: ((value: ComponentValue) => 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,260 @@
+<script setup>
+import CheckIcon from "@gdsicon/vue/check";
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import FolderClosedIcon from "@gdsicon/vue/folder-closed";
+import FolderOpenIcon from "@gdsicon/vue/folder-open";
+import MinusIcon from "@gdsicon/vue/minus";
+import MoreVerticalIcon from "@gdsicon/vue/more-vertical";
+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
+	},
+	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
+	},
+	setSize: {
+		type: Number,
+		required: true
+	},
+	indent: {
+		type: Number,
+		required: true
+	},
+	id: {
+		type: String,
+		required: true
+	},
+	highlightQuery: {
+		type: String,
+		required: true
+	},
+	showIcon: {
+		type: Boolean,
+		required: true
+	},
+	draggable: {
+		type: Boolean,
+		required: true
+	},
+	dragHandle: {
+		type: Boolean,
+		required: true
+	},
+	dragging: {
+		type: Boolean,
+		required: true
+	},
+	dropPosition: {
+		type: String,
+		required: false
+	},
+	itemClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
+});
+const emits = defineEmits([
+	"row-click",
+	"check",
+	"toggle",
+	"drag-pointerdown"
+]);
+function onPointerdown(event) {
+	// A handle owns the gesture on touch, where a vertical drag is indistinguishable from a scroll.
+	if (!props.draggable || props.dragHandle) {
+		return;
+	}
+	emits("drag-pointerdown", props.value, event);
+}
+const disabled = computed(() => props.disabled || props.node.disabled === true);
+const checkboxClass = computed(() => {
+	if (props.checked) {
+		return disabled.value ? "border-gray-500 bg-gray-500" : "border-primary bg-primary";
+	}
+	return disabled.value ? "border-gray-500 bg-gray-100" : "border-gray-alpha-400 bg-background-100";
+});
+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);
+});
+</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-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: depth * indent + 8 + '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,
+    'before:inset-x-0 before:h-0.5 before:absolute before:bg-primary': dropPosition === 'before' || dropPosition === 'after',
+    'before:-top-px': dropPosition === 'before',
+    'before:bottom-px': dropPosition === 'after'
+  }
+]"
+    v-bind="$attrs"
+    @click="emits('row-click', value)"
+    @pointerdown="onPointerdown"
+    @dragstart.prevent
+  >
+    <span
+      v-if="dragHandle"
+      data-tree-drag-handle
+      class="pxd-tree--drag-handle size-4 me-0.5 inline-flex shrink-0 cursor-grab items-center justify-center opacity-0 group-hover/row:opacity-60 group-data-[dragging=true]/row:opacity-60 motion-safe:transition-opacity"
+      @pointerdown.stop="emits('drag-pointerdown', value, $event)"
+    >
+      <slot name="node-drag-handle" :node="node" :depth="depth">
+        <MoreVerticalIcon class="size-3" />
+      </slot>
+    </span>
+
+    <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" :expanded="expanded">
+        <ChevronRightIcon
+          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"
+      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)"
+    >
+      <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="showIcon && $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">
+        <FolderOpenIcon v-if="expanded" class="size-4" />
+        <FolderClosedIcon v-else-if="hasChildren" class="size-4" />
+      </slot>
+    </span>
+
+    <span class="pxd-tree--content min-w-0 flex-1 truncate">
+      <slot name="node-content" :node="node" :depth="depth">
+        <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" />
+  </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

@@ -6,9 +6,9 @@ type __VLS_Slots = {} & {
     tooltip?: (props: typeof __VLS_7) => 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;