@shwfed/config 2.3.11 → 2.3.12

package/dist/runtime/components/ui/tree/TreeNode.vue

@@ -0,0 +1,299 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import { cn } from "../../../utils/cn";
+defineOptions({ name: "UiTreeNode", inheritAttrs: false });
+const props = defineProps({
+  node: { type: null, required: true },
+  depth: { type: Number, required: true },
+  posInSet: { type: Number, required: true },
+  setSize: { type: Number, required: true },
+  parentKey: { type: [String, null], required: true },
+  getKey: { type: Function, required: true },
+  getChildren: { type: Function, required: false },
+  hasLoader: { type: Boolean, required: true },
+  selectionMode: { type: String, required: true },
+  cascade: { type: String, required: true },
+  selectable: { type: Function, required: true },
+  draggable: { type: Function, required: true },
+  isExpanded: { type: Function, required: true },
+  isSelectedKey: { type: Function, required: true },
+  isVisuallySelected: { type: Function, required: true },
+  isIndeterminate: { type: Function, required: true },
+  resolvedChildren: { type: Function, required: true },
+  loadStateOf: { type: Function, required: true },
+  filterPredicate: { type: Function, required: false },
+  filterQuery: { type: String, required: true },
+  isExpandable: { type: Function, required: true },
+  tree: { type: Object, required: true },
+  focusedKey: { type: [String, null], required: true }
+});
+const emit = defineEmits(["toggle-expand", "toggle-select", "focus-row"]);
+defineSlots();
+const key = computed(() => props.getKey(props.node));
+const expanded = computed(() => props.isExpanded(key.value));
+const expandable = computed(() => props.isExpandable(props.node));
+const loadState = computed(() => props.loadStateOf(key.value));
+const loading = computed(() => loadState.value?.status === "loading");
+const errorState = computed(() => loadState.value?.status === "error" ? loadState.value.error : null);
+const selectedFlag = computed(() => props.isVisuallySelected(props.node, props.depth));
+const indeterminateFlag = computed(() => props.isIndeterminate(props.node, props.depth));
+const userSelectable = computed(() => props.selectable(props.node, props.depth));
+const subtreeMatches = computed(() => {
+  if (!props.filterPredicate || !props.filterQuery) return true;
+  if (props.filterPredicate(props.node, props.filterQuery)) return true;
+  const kids = props.resolvedChildren(props.node);
+  if (!kids || kids.length === 0) return false;
+  return kids.some((c) => deepMatches(c));
+});
+function deepMatches(n) {
+  if (!props.filterPredicate || !props.filterQuery) return true;
+  if (props.filterPredicate(n, props.filterQuery)) return true;
+  const kids = props.resolvedChildren(n);
+  if (!kids || kids.length === 0) return false;
+  return kids.some((c) => deepMatches(c));
+}
+const selfMatches = computed(() => {
+  if (!props.filterPredicate || !props.filterQuery) return true;
+  return props.filterPredicate(props.node, props.filterQuery);
+});
+const slotPayload = computed(() => ({
+  node: props.node,
+  depth: props.depth,
+  expanded: expanded.value,
+  loading: loading.value,
+  selected: selectedFlag.value,
+  indeterminate: indeterminateFlag.value,
+  tree: props.tree
+}));
+const actionsPayload = computed(() => ({
+  node: props.node,
+  depth: props.depth,
+  tree: props.tree
+}));
+function onToggleArrow() {
+  if (!expandable.value) return;
+  emit("toggle-expand", key.value);
+}
+function onToggleSelect() {
+  if (props.selectionMode === "none") return;
+  if (!userSelectable.value) return;
+  emit("toggle-select", key.value);
+}
+const ariaSelected = computed(() => {
+  if (props.selectionMode === "none") return void 0;
+  if (indeterminateFlag.value) return "mixed";
+  return selectedFlag.value ? "true" : "false";
+});
+const childArr = computed(() => props.resolvedChildren(props.node));
+const showChildren = computed(() => expandable.value && expanded.value);
+</script>
+
+<template>
+  <li
+    v-if="subtreeMatches"
+    role="treeitem"
+    :aria-expanded="expandable ? expanded : void 0"
+    :aria-selected="ariaSelected"
+    :aria-level="depth + 1"
+    :aria-setsize="setSize"
+    :aria-posinset="posInSet"
+    :data-tree-key="key"
+    :data-tree-focused="focusedKey === key ? '' : void 0"
+    class="select-none"
+  >
+    <div
+      v-if="selfMatches"
+      :class="cn(
+  'group flex items-center justify-between gap-2 rounded px-1 py-1 outline-none',
+  focusedKey === key && 'bg-(--primary)/10'
+)"
+      tabindex="-1"
+      @click.stop="emit('focus-row', key)"
+    >
+      <!-- LEFT: indent + arrow + selector + #node slot -->
+      <div class="flex items-center gap-1 min-w-0 flex-1">
+        <span
+          aria-hidden="true"
+          class="inline-block shrink-0"
+          :style="{ width: `${depth * 16}px` }"
+        />
+        <button
+          v-if="expandable"
+          type="button"
+          class="inline-flex size-4 shrink-0 items-center justify-center rounded text-zinc-500 hover:text-zinc-900"
+          :aria-label="expanded ? 'Collapse' : 'Expand'"
+          @click.stop="onToggleArrow"
+        >
+          <Icon
+            :icon="expanded ? 'fluent:chevron-down-16-filled' : 'fluent:chevron-right-16-filled'"
+            class="size-3"
+          />
+        </button>
+        <span
+          v-else
+          aria-hidden="true"
+          class="inline-block size-4 shrink-0"
+        />
+
+        <!-- selector: component-owned, vendored as <input> for testability;
+             host visuals come from the #node slot which sits next to it. -->
+        <template v-if="selectionMode !== 'none' && userSelectable">
+          <input
+            v-if="selectionMode === 'multi'"
+            type="checkbox"
+            class="size-4 shrink-0 accent-(--primary) cursor-pointer"
+            :checked="selectedFlag"
+            :data-state="indeterminateFlag ? 'indeterminate' : selectedFlag ? 'checked' : 'unchecked'"
+            :aria-checked="indeterminateFlag ? 'mixed' : selectedFlag"
+            data-tree-toggle="checkbox"
+            @click.stop="onToggleSelect"
+          >
+          <input
+            v-else
+            type="radio"
+            class="size-4 shrink-0 accent-(--primary) cursor-pointer"
+            :checked="selectedFlag"
+            data-tree-toggle="radio"
+            @click.stop="onToggleSelect"
+          >
+        </template>
+
+        <div class="min-w-0 flex-1">
+          <slot
+            name="node"
+            v-bind="slotPayload"
+          >
+            <!-- Sensible fallback: stringified node, mostly for debugging. -->
+            <span class="text-sm">{{ String(node) }}</span>
+          </slot>
+        </div>
+      </div>
+
+      <!-- RIGHT: #actions slot (optional) -->
+      <div
+        v-if="$slots.actions"
+        class="flex items-center gap-1 shrink-0"
+      >
+        <slot
+          name="actions"
+          v-bind="actionsPayload"
+        />
+      </div>
+    </div>
+
+    <!-- Children container -->
+    <ul
+      v-if="showChildren"
+      role="group"
+      class="m-0 list-none p-0"
+    >
+      <template v-if="loading">
+        <li
+          role="treeitem"
+          aria-busy="true"
+          class="px-1 py-1"
+          :style="{ paddingLeft: `${(depth + 1) * 16 + 16}px` }"
+        >
+          <slot
+            name="loading-children"
+            :node="node"
+          >
+            <span class="text-xs text-zinc-500 inline-flex items-center gap-1">
+              <Icon
+                icon="svg-spinners:90-ring-with-bg"
+                class="size-3"
+              />
+              Loading…
+            </span>
+          </slot>
+        </li>
+      </template>
+      <template v-else-if="errorState !== null">
+        <li
+          role="treeitem"
+          class="px-1 py-1"
+          :style="{ paddingLeft: `${(depth + 1) * 16 + 16}px` }"
+        >
+          <slot
+            name="error"
+            :node="node"
+            :error="errorState"
+            :retry="() => tree.retry(key)"
+          />
+        </li>
+      </template>
+      <template v-else-if="childArr && childArr.length">
+        <UiTreeNode
+          v-for="(child, idx) in childArr"
+          :key="getKey(child)"
+          :node="child"
+          :depth="depth + 1"
+          :pos-in-set="idx + 1"
+          :set-size="childArr.length"
+          :parent-key="key"
+          :get-key="getKey"
+          :get-children="getChildren"
+          :has-loader="hasLoader"
+          :selection-mode="selectionMode"
+          :cascade="cascade"
+          :selectable="selectable"
+          :draggable="draggable"
+          :is-expanded="isExpanded"
+          :is-selected-key="isSelectedKey"
+          :is-visually-selected="isVisuallySelected"
+          :is-indeterminate="isIndeterminate"
+          :resolved-children="resolvedChildren"
+          :load-state-of="loadStateOf"
+          :filter-predicate="filterPredicate"
+          :filter-query="filterQuery"
+          :is-expandable="isExpandable"
+          :tree="tree"
+          :focused-key="focusedKey"
+          @toggle-expand="(k) => emit('toggle-expand', k)"
+          @toggle-select="(k) => emit('toggle-select', k)"
+          @focus-row="(k) => emit('focus-row', k)"
+        >
+          <!-- Forward each slot explicitly. Listing the names keeps vue-tsc
+               happy and matches the public slot surface in `types.ts`. -->
+          <template
+            v-if="$slots.node"
+            #node="slotProps"
+          >
+            <slot
+              name="node"
+              v-bind="slotProps"
+            />
+          </template>
+          <template
+            v-if="$slots.actions"
+            #actions="slotProps"
+          >
+            <slot
+              name="actions"
+              v-bind="slotProps"
+            />
+          </template>
+          <template
+            v-if="$slots.error"
+            #error="slotProps"
+          >
+            <slot
+              name="error"
+              v-bind="slotProps"
+            />
+          </template>
+          <template
+            v-if="$slots['loading-children']"
+            #loading-children="slotProps"
+          >
+            <slot
+              name="loading-children"
+              v-bind="slotProps"
+            />
+          </template>
+        </UiTreeNode>
+      </template>
+    </ul>
+  </li>
+</template>

package/dist/runtime/components/ui/tree/TreeNode.vue.d.ts

@@ -0,0 +1,53 @@
+import type { ActionsSlotProps, CascadeMode, ErrorSlotProps, GetChildren, LoadingChildrenSlotProps, NodeKey, NodeSlotProps, SelectionMode, TreeHandle } from './types.js';
+import type { LoadState } from './useTreeState.js';
+declare const __VLS_export: <Node>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        node: Node;
+        depth: number;
+        posInSet: number;
+        setSize: number;
+        parentKey: NodeKey | null;
+        getKey: (n: Node) => NodeKey;
+        getChildren?: GetChildren<Node>;
+        hasLoader: boolean;
+        selectionMode: SelectionMode;
+        cascade: CascadeMode;
+        selectable: (n: Node, depth: number) => boolean;
+        draggable: (n: Node, depth: number) => boolean;
+        isExpanded: (key: NodeKey) => boolean;
+        isSelectedKey: (key: NodeKey) => boolean;
+        isVisuallySelected: (n: Node, depth: number) => boolean;
+        isIndeterminate: (n: Node, depth: number) => boolean;
+        resolvedChildren: (n: Node) => Node[] | undefined | null;
+        loadStateOf: (key: NodeKey) => LoadState<Node> | undefined;
+        filterPredicate?: (n: Node, query: string) => boolean;
+        filterQuery: string;
+        isExpandable: (n: Node) => boolean;
+        tree: TreeHandle<Node>;
+        focusedKey: NodeKey | null;
+    } & {
+        "onToggle-expand"?: ((key: string) => any) | undefined;
+        "onToggle-select"?: ((key: string) => any) | undefined;
+        "onFocus-row"?: ((key: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        node?: (p: NodeSlotProps<Node>) => unknown;
+        actions?: (p: ActionsSlotProps<Node>) => unknown;
+        error?: (p: ErrorSlotProps<Node>) => unknown;
+        'loading-children'?: (p: LoadingChildrenSlotProps<Node>) => unknown;
+    };
+    emit: (e: "toggle-expand" | "toggle-select" | "focus-row", key: NodeKey) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ui/tree/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Tree } from './Tree.vue.js';
+export { default as TreeNode } from './TreeNode.vue.js';
+export type { ActionsSlotProps, CascadeMode, DropContext, ErrorSlotProps, GetChildren, LoadChildren, LoadingChildrenSlotProps, MoveEventPayload, NodeKey, NodeSlotProps, SelectedPaneSlotProps, SelectionMode, TreeHandle, } from './types.js';

package/dist/runtime/components/ui/tree/index.js

@@ -0,0 +1,2 @@
+export { default as Tree } from "./Tree.vue";
+export { default as TreeNode } from "./TreeNode.vue";

package/dist/runtime/components/ui/tree/types.d.ts

@@ -0,0 +1,120 @@
+import type { Effect } from 'effect';
+/**
+ * Public types for the generic Tree UI primitive.
+ *
+ * Everything in this module is intentionally business-agnostic:
+ *   - no HTTP, no CEL, no form-field knowledge
+ *   - no judgement of "what is a leaf" — `getChildren` returning `undefined`
+ *     is the only way to mark a terminal node
+ *   - selection / filter are orthogonal: filter never mutates `modelValue`
+ *
+ * The component is the data plane; visuals come from slots.
+ */
+export type NodeKey = string;
+export type SelectionMode = 'none' | 'single' | 'multi';
+/**
+ * Cascade behaviour for `multi` selection mode. Ignored for `single` / `none`.
+ *
+ *   - `independent`  — clicking a node toggles only that node
+ *   - `cascade-down` — toggling a parent toggles all selectable descendants
+ *   - `cascade-both` — `cascade-down` + parents reflect descendant state via
+ *                      `selected`/`indeterminate` flags exposed to the
+ *                      `#node` slot. The `modelValue` array still only
+ *                      contains literally-clicked descendant keys.
+ */
+export type CascadeMode = 'independent' | 'cascade-down' | 'cascade-both';
+/**
+ * Children semantics. See README/design doc — required to be locked down:
+ *
+ *   - `undefined` — node is a terminal leaf, no children, do not call loader
+ *   - `[]`        — no inline children, ask `loadChildren`
+ *   - `Node[]`    — use these synchronously, do not call loader
+ */
+export type GetChildren<Node> = (node: Node) => Node[] | undefined;
+/**
+ * Async loader for a single node's children. Returns an Effect so that the
+ * caller (e.g. the future form-field layer) can compose errors and contexts
+ * without the component locking the error channel.
+ */
+export type LoadChildren<Node, E = unknown> = (node: Node) => Effect.Effect<Node[], E>;
+/**
+ * Slot prop bundle for `#node` — passed for every rendered row's left side.
+ *
+ * Selection / indeterminate are pre-computed by the component so that the
+ * consumer can bind straight to a `<Checkbox>` / `<Radio>` (the component
+ * already renders the toggle itself; these are exposed for visual feedback
+ * inside the slot body, e.g. greying the label).
+ */
+export interface NodeSlotProps<Node> {
+    node: Node;
+    depth: number;
+    expanded: boolean;
+    loading: boolean;
+    selected: boolean;
+    indeterminate: boolean;
+    tree: TreeHandle<Node>;
+}
+export interface ActionsSlotProps<Node> {
+    node: Node;
+    depth: number;
+    tree: TreeHandle<Node>;
+}
+export interface ErrorSlotProps<Node> {
+    node: Node;
+    error: unknown;
+    retry: () => void;
+}
+export interface LoadingChildrenSlotProps<Node> {
+    node: Node;
+}
+export interface SelectedPaneSlotProps<Node> {
+    selected: Node[];
+    tree: TreeHandle<Node>;
+}
+/**
+ * Drop context handed to `canDrop`. `beforeKey === null` means "append to end
+ * of `intoParent`'s children". `intoParent === null` is a root-level drop.
+ */
+export interface DropContext<Node> {
+    drag: {
+        node: Node;
+        fromParent: Node | null;
+        fromIndex: number;
+    };
+    drop: {
+        intoParent: Node | null;
+        beforeKey: NodeKey | null;
+    };
+}
+export interface MoveEventPayload {
+    key: NodeKey;
+    fromParentKey: NodeKey | null;
+    fromIndex: number;
+    toParentKey: NodeKey | null;
+    toIndex: number;
+}
+/**
+ * Exposed handle. Surface area mirrors the design doc one-to-one.
+ *
+ * In controlled mode (`v-model:roots`) mutation methods emit
+ * `update:roots` with a freshly-spliced array; in uncontrolled mode they
+ * mutate the internal copy directly.
+ */
+export interface TreeHandle<Node> {
+    insert: (parentKey: NodeKey | null, node: Node, index?: number) => void;
+    remove: (key: NodeKey) => void;
+    move: (key: NodeKey, newParentKey: NodeKey | null, index: number) => void;
+    update: (key: NodeKey, patch: Partial<Node>) => void;
+    expand: (key: NodeKey) => void;
+    collapse: (key: NodeKey) => void;
+    select: (key: NodeKey) => void;
+    deselect: (key: NodeKey) => void;
+    invalidate: (key: NodeKey) => void;
+    retry: (key: NodeKey) => void;
+    findPath: (key: NodeKey) => Node[] | null;
+    snapshot: () => {
+        roots: Node[];
+        selected: NodeKey[];
+        expanded: NodeKey[];
+    };
+}

package/dist/runtime/components/ui/tree/useTreeState.d.ts

@@ -0,0 +1,95 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { CascadeMode, GetChildren, LoadChildren, NodeKey, SelectionMode } from './types.js';
+/**
+ * Internal load state for a single node's children.
+ *
+ *   - `loading`            — Effect in flight
+ *   - `loaded(children)`   — successful resolution, cached children array
+ *   - `error(err)`         — Effect failed; component does NOT auto-retry
+ */
+export type LoadState<Node> = {
+    status: 'loading';
+} | {
+    status: 'loaded';
+    children: Node[];
+} | {
+    status: 'error';
+    error: unknown;
+};
+export interface UseTreeStateOptions<Node, E = unknown> {
+    rootsRef: Ref<Node[]> | ComputedRef<Node[]>;
+    /**
+     * Apply a structural mutation; for controlled mode the parent gets
+     *  `update:roots`, for uncontrolled we mutate the internal copy.
+     */
+    setRoots: (next: Node[]) => void;
+    getKey: (node: Node) => NodeKey;
+    getChildren?: GetChildren<Node>;
+    loadChildren?: LoadChildren<Node, E>;
+    selectionMode: () => SelectionMode;
+    cascade: () => CascadeMode;
+    selectable: (node: Node, depth: number) => boolean;
+    /** Initial selection — read once on init, then state is internal. */
+    initialSelection: () => NodeKey[];
+    /** Initial expanded set — read once on init. */
+    initialExpanded: () => NodeKey[];
+    /** Called whenever the selection changes (any cause). */
+    onSelectionChange: (next: NodeKey[]) => void;
+}
+interface LocatedNode<Node> {
+    node: Node;
+    parent: Node | null;
+    depth: number;
+    index: number;
+    /** Sibling array that contains `node` — used for in-place splice ops. */
+    siblings: Node[];
+}
+/**
+ * State machine for `<Tree>`. Pure-ish — only side-effect is running the
+ * user-supplied `loadChildren` Effect.
+ *
+ * Indexing invariants:
+ *   - All maps/sets key by `NodeKey` (never node identity), so reorders /
+ *     drag-drop preserve state.
+ *   - Mutation methods splice in place on the existing children arrays,
+ *     never recreating nodes.
+ */
+export declare function useTreeState<Node, E = unknown>(opts: UseTreeStateOptions<Node, E>): {
+    expanded: import("vue").Reactive<Set<string>>;
+    selected: import("vue").Reactive<Set<string>>;
+    loadState: Map<string, LoadState<Node>>;
+    focusedKey: Ref<string | null, string | null>;
+    rootsView: import("vue").ShallowRef<Node[], Node[]>;
+    locate: (key: NodeKey) => LocatedNode<Node> | null;
+    resolvedChildren: (node: Node) => Node[] | undefined | null;
+    isExpandable: (node: Node) => boolean;
+    isIndeterminate: (node: Node, depth: number) => boolean;
+    isVisuallySelected: (node: Node, depth: number) => boolean;
+    flattenVisible: (filter?: (node: Node) => boolean) => Array<{
+        node: Node;
+        depth: number;
+        key: NodeKey;
+    }>;
+    selectedNodes: ComputedRef<Node[]>;
+    syncRoots: () => void;
+    expand: (key: NodeKey) => void;
+    collapse: (key: NodeKey) => void;
+    toggleExpand: (key: NodeKey) => void;
+    selectKey: (key: NodeKey) => void;
+    deselectKey: (key: NodeKey) => void;
+    clearSelection: () => void;
+    toggleMulti: (key: NodeKey) => void;
+    insert: (parentKey: NodeKey | null, node: Node, index?: number) => void;
+    remove: (key: NodeKey) => void;
+    move: (key: NodeKey, newParentKey: NodeKey | null, index: number) => void;
+    update: (key: NodeKey, patch: Partial<Node>) => void;
+    invalidate: (key: NodeKey) => void;
+    retry: (key: NodeKey) => void;
+    findPath: (key: NodeKey) => Node[] | null;
+    snapshot: () => {
+        roots: Node[];
+        selected: string[];
+        expanded: string[];
+    };
+};
+export {};