@shwfed/config 2.10.4 → 2.10.5

package/dist/runtime/components/config/blocks/2026-06-17/com.shwfed.block.tree.single/runtime.vue

@@ -0,0 +1,355 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Effect, Fiber, Option } from "effect";
+import { Fetch } from "fx-fetch";
+import { computed, ref, shallowRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { fetchJsonOption } from "../../../../../share/request";
+import { provideEventTarget } from "../../../../../share/event-bus";
+import { cel as _rawCel } from "../../../../../utils/cel";
+import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
+import { publishSelection } from "../../../../../utils/selections-registry";
+import { getLocalizedText } from "../../../../../share/locale";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../../../ui/input-group";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { Markdown } from "../../../../ui/markdown";
+import { Skeleton } from "../../../../ui/skeleton";
+import { Tree as UiTree } from "../../../../ui/tree";
+import { interpolateMarkdown } from "../../../../table/utils/runtime";
+import NodeActions from "./node-actions.vue";
+defineOptions({ name: "ShwfedBlockTreeSingleRuntime" });
+const block = defineModel("block", { type: null, ...{ required: true } });
+defineProps({
+  configure: { type: Function, required: false }
+});
+const { locale, t } = useI18n({
+  inheritLocale: true,
+  messages: {
+    zh: {
+      "tree-single-search-label": "\u641C\u7D22",
+      "tree-single-search-clear": "\u6E05\u9664\u641C\u7D22",
+      "tree-single-load-error": "\u52A0\u8F7D\u5931\u8D25",
+      "tree-single-empty": "\u65E0\u53EF\u9009\u9879"
+    },
+    en: {
+      "tree-single-search-label": "Search",
+      "tree-single-search-clear": "Clear search",
+      "tree-single-load-error": "Failed to load",
+      "tree-single-empty": "No options"
+    },
+    ja: {
+      "tree-single-search-label": "\u691C\u7D22",
+      "tree-single-search-clear": "\u691C\u7D22\u3092\u30AF\u30EA\u30A2",
+      "tree-single-load-error": "\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
+      "tree-single-empty": "\u9078\u629E\u80A2\u306A\u3057"
+    }
+  }
+});
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
+const styleValue = computed(() => {
+  const expr = block.value.style;
+  if (!expr) return void 0;
+  try {
+    const r = Effect.runSync($cel(expr, {}));
+    if (r == null) return void 0;
+    if (typeof r === "string") return r;
+    if (typeof r === "object") return r;
+    return String(r);
+  } catch {
+    return void 0;
+  }
+});
+const model = ref(void 0);
+const roots = ref([]);
+const loading = ref(false);
+const fetchError = ref(null);
+async function fetchTree() {
+  const dataSource = block.value.dataSource;
+  if (!dataSource) {
+    roots.value = [];
+    return;
+  }
+  const effect = Effect.gen(function* () {
+    let jsonOpt = Option.none();
+    if (dataSource.request) {
+      jsonOpt = yield* fetchJsonOption(yield* $cel(dataSource.request, {}));
+    }
+    const dataRaw = yield* $cel(dataSource.data, { json: jsonOpt });
+    return Array.isArray(dataRaw) ? dataRaw : [];
+  });
+  const program = Effect.gen(function* () {
+    const showMaskFiber = yield* Effect.fork(
+      Effect.sync(() => {
+        loading.value = true;
+      }).pipe(Effect.delay("30 millis"))
+    );
+    return yield* Effect.ensuring(effect, Fiber.interrupt(showMaskFiber));
+  }).pipe(
+    Effect.ensuring(Effect.sync(() => {
+      loading.value = false;
+    }))
+  );
+  try {
+    const result = await Effect.runPromise(Effect.provide(program, Fetch.layer));
+    roots.value = result;
+    fetchError.value = null;
+  } catch (e) {
+    console.warn("[shwfed-block] tree dataSource fetch failed", e);
+    fetchError.value = e;
+  }
+}
+watch(
+  () => [block.value.dataSource?.request, block.value.dataSource?.data],
+  () => {
+    void fetchTree();
+  },
+  { immediate: true }
+);
+provideEventTarget(block.value.id, {
+  "refresh": () => Effect.promise(fetchTree),
+  "clear-selection": () => Effect.sync(() => {
+    model.value = void 0;
+  })
+});
+function nodeCtx(node) {
+  return { node };
+}
+function getKey(node) {
+  try {
+    const v = Effect.runSync($cel(block.value.nodeKey, nodeCtx(node)));
+    return String(v);
+  } catch (err) {
+    console.error(`[shwfed-block] failed to evaluate nodeKey for ${block.value.id}:`, err);
+    return "";
+  }
+}
+function getChildren(node) {
+  let raw;
+  try {
+    raw = Effect.runSync($cel(block.value.nodeChildren, nodeCtx(node)));
+  } catch (err) {
+    console.error(`[shwfed-block] failed to evaluate nodeChildren for ${block.value.id}:`, err);
+    return void 0;
+  }
+  if (raw == null) return void 0;
+  if (!Array.isArray(raw)) return void 0;
+  if (raw.length === 0) return void 0;
+  return raw;
+}
+function nodeSelectable(node, _depth) {
+  const expr = block.value.nodeSelectable;
+  if (!expr) return true;
+  try {
+    return Effect.runSync($cel(expr, nodeCtx(node)));
+  } catch (err) {
+    console.error(`[shwfed-block] failed to evaluate nodeSelectable for ${block.value.id}:`, err);
+    return false;
+  }
+}
+function safeInterpolate(tpl, node) {
+  try {
+    return interpolateMarkdown(tpl, $cel, { node });
+  } catch (err) {
+    console.error(`[shwfed-block] failed to interpolate node text for ${block.value.id}:`, err);
+    return tpl;
+  }
+}
+function nodeLabelText(node) {
+  const tpl = getLocalizedText(block.value.nodeLabel, locale.value) ?? "";
+  return tpl ? safeInterpolate(tpl, node) : "";
+}
+function nodeTooltipText(node) {
+  if (!block.value.nodeTooltip) return void 0;
+  const tpl = getLocalizedText(block.value.nodeTooltip, locale.value);
+  if (!tpl) return void 0;
+  return safeInterpolate(tpl, node);
+}
+const initialExpanded = computed(() => {
+  if (!block.value.expandAll) return [];
+  const out = [];
+  const stack = [...roots.value];
+  while (stack.length) {
+    const n = stack.pop();
+    const kids = getChildren(n);
+    if (kids && kids.length) {
+      out.push(getKey(n));
+      stack.push(...kids);
+    }
+  }
+  return out;
+});
+const filterQuery = ref("");
+function evalKeywords(node) {
+  const expr = block.value.filter?.keywords;
+  if (!expr) return [];
+  try {
+    const raw = Effect.runSync($cel(expr, nodeCtx(node)));
+    if (!Array.isArray(raw)) return [];
+    return raw.map((v) => String(v));
+  } catch {
+    return [];
+  }
+}
+const searchCorpus = shallowRef(/* @__PURE__ */ new Map());
+watch(
+  () => [
+    roots.value,
+    locale.value,
+    block.value.nodeLabel,
+    block.value.filter?.keywords
+  ],
+  () => {
+    const map = /* @__PURE__ */ new Map();
+    const stack = [...roots.value];
+    while (stack.length) {
+      const n = stack.pop();
+      const label = nodeLabelText(n).trim().toLowerCase();
+      const kw = evalKeywords(n).map((k) => k.trim().toLowerCase()).join("\n");
+      map.set(getKey(n), kw ? `${label}
+${kw}` : label);
+      const kids = getChildren(n);
+      if (kids && kids.length) stack.push(...kids);
+    }
+    searchCorpus.value = map;
+  },
+  { immediate: true }
+);
+function filterPredicate(node, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  const hay = searchCorpus.value.get(getKey(node));
+  if (hay !== void 0) return hay.includes(q);
+  return nodeLabelText(node).trim().toLowerCase().includes(q);
+}
+const filterLabelText = computed(() => {
+  const localized = block.value.filter?.label ? getLocalizedText(block.value.filter.label, locale.value) : void 0;
+  return localized && localized.length > 0 ? localized : t("tree-single-search-label");
+});
+const selectedNode = computed(() => {
+  const selected = model.value;
+  if (selected == null) return void 0;
+  const stack = [...roots.value];
+  while (stack.length) {
+    const n = stack.pop();
+    if (getKey(n) === selected) return n;
+    const kids = getChildren(n);
+    if (kids && kids.length) stack.push(...kids);
+  }
+  return void 0;
+});
+publishSelection(
+  block.value.id,
+  () => selectedNode.value,
+  { identity: (node) => getKey(node), raw: (node) => node }
+);
+const hasNodeActions = computed(() => block.value.nodeActions.items.length > 0);
+</script>
+
+<template>
+  <div
+    data-slot="block-tree-single"
+    class="flex h-full flex-col gap-2"
+    :style="styleValue"
+  >
+    <Field
+      v-if="block.filter?.enabled"
+      orientation="floating"
+    >
+      <FieldLabel>{{ filterLabelText }}</FieldLabel>
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <Icon icon="lucide:search" />
+        </InputGroupAddon>
+        <InputGroupInput v-model="filterQuery" />
+        <InputGroupAddon
+          v-if="filterQuery.length > 0"
+          align="inline-end"
+        >
+          <InputGroupButton
+            size="icon-xs"
+            :aria-label="t('tree-single-search-clear')"
+            @click="filterQuery = ''"
+          >
+            <Icon icon="lucide:x" />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </Field>
+
+    <div
+      v-if="fetchError && roots.length === 0"
+      class="py-1.5 text-sm text-red-500"
+    >
+      {{ t("tree-single-load-error") }}
+    </div>
+    <div
+      v-else-if="loading && roots.length === 0"
+      class="flex flex-col gap-1.5 py-1"
+      aria-busy="true"
+    >
+      <Skeleton class="h-6 w-2/3" />
+      <Skeleton class="h-6 w-1/2" />
+      <Skeleton class="h-6 w-3/5" />
+      <Skeleton class="h-6 w-2/5" />
+    </div>
+
+    <UiTree
+      v-else
+      v-model="model"
+      :roots="roots"
+      :get-key="getKey"
+      :get-children="getChildren"
+      selection-mode="single"
+      select-cursor="default"
+      single-toggle
+      :selectable="nodeSelectable"
+      :filter-predicate="filterPredicate"
+      :filter-query="filterQuery"
+      :initial-expanded="initialExpanded"
+      class="min-h-0 flex-1 overflow-auto"
+    >
+      <template #node="{ node }">
+        <!-- Selection is conveyed solely by the row highlight (UiTree paints
+             the selected row's background) — no explicit radio glyph. -->
+        <span class="flex flex-col gap-0.5">
+          <Markdown
+            :source="nodeLabelText(node)"
+            class="prose prose-sm prose-zinc text-zinc-700"
+          />
+          <Markdown
+            v-if="nodeTooltipText(node)"
+            :source="nodeTooltipText(node)"
+            block
+            class="prose prose-xs prose-zinc text-zinc-400"
+          />
+        </span>
+      </template>
+
+      <template
+        v-if="hasNodeActions"
+        #actions="{ node }"
+      >
+        <!-- Hover/focus-revealed: hidden by default, fades in when the row
+             (which carries `group`) is hovered or an action button is focused.
+             `pointer-events-none` while hidden so the invisible buttons don't
+             swallow row clicks. -->
+        <span
+          class="opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto pointer-events-none"
+        >
+          <NodeActions
+            :node="node"
+            :config="block.nodeActions"
+            :configure="configure"
+          />
+        </span>
+      </template>
+
+      <template #empty>
+        <div class="py-1.5 text-sm text-zinc-400">
+          {{ t("tree-single-empty") }}
+        </div>
+      </template>
+    </UiTree>
+  </div>
+</template>

package/dist/runtime/components/config/blocks/2026-06-17/com.shwfed.block.tree.single/runtime.vue.d.ts

@@ -0,0 +1,228 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    'block': Value;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:block": (value: {
+        readonly filter?: {
+            readonly label?: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]] | undefined;
+            readonly enabled: boolean;
+            readonly keywords?: string | undefined;
+        } | undefined;
+        readonly type: "com.shwfed.block.tree.single";
+        readonly style?: string | undefined;
+        readonly id: string;
+        readonly compatibilityDate: "2026-06-17";
+        readonly dataSource: {
+            readonly data: string;
+            readonly request?: string | undefined;
+        };
+        readonly nodeKey: string;
+        readonly nodeChildren: string;
+        readonly nodeLabel: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly nodeTooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly nodeSelectable?: string | undefined;
+        readonly expandAll: boolean;
+        readonly nodeActions: {
+            readonly size: "default" | "sm" | "xs";
+            readonly style?: string | undefined;
+            readonly gap: number;
+            readonly kind: "shwfed.component.action";
+            readonly items: readonly (import("../../../../actions/schema.js").RegistryItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            } | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                    readonly disabled?: string | undefined;
+                    readonly id: string;
+                    readonly title: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]];
+                    readonly icon?: string | undefined;
+                    readonly hidden?: string | undefined;
+                    readonly tooltip?: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]] | undefined;
+                    readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                    readonly action?: any;
+                })[];
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            })[];
+            readonly groups: readonly {
+                readonly id: string;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            }[];
+        };
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:block"?: ((value: {
+        readonly filter?: {
+            readonly label?: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]] | undefined;
+            readonly enabled: boolean;
+            readonly keywords?: string | undefined;
+        } | undefined;
+        readonly type: "com.shwfed.block.tree.single";
+        readonly style?: string | undefined;
+        readonly id: string;
+        readonly compatibilityDate: "2026-06-17";
+        readonly dataSource: {
+            readonly data: string;
+            readonly request?: string | undefined;
+        };
+        readonly nodeKey: string;
+        readonly nodeChildren: string;
+        readonly nodeLabel: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly nodeTooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly nodeSelectable?: string | undefined;
+        readonly expandAll: boolean;
+        readonly nodeActions: {
+            readonly size: "default" | "sm" | "xs";
+            readonly style?: string | undefined;
+            readonly gap: number;
+            readonly kind: "shwfed.component.action";
+            readonly items: readonly (import("../../../../actions/schema.js").RegistryItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            } | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                    readonly disabled?: string | undefined;
+                    readonly id: string;
+                    readonly title: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]];
+                    readonly icon?: string | undefined;
+                    readonly hidden?: string | undefined;
+                    readonly tooltip?: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]] | undefined;
+                    readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                    readonly action?: any;
+                })[];
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            })[];
+            readonly groups: readonly {
+                readonly id: string;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            }[];
+        };
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;