@shwfed/config 2.12.1 → 2.12.3

package/dist/runtime/components/sidebar/config.vue

@@ -0,0 +1,302 @@
+<script setup>
+import { ExpressionEditor } from "../ui/expression-editor";
+import { Field, FieldLabel } from "../ui/field";
+import { Locale as LocaleField } from "../ui/locale";
+import { Markdown } from "../ui/markdown";
+import { DataSource } from "../table/schema";
+import { getStructFieldDescription, getStructFieldTitle, SidebarConfig } from "./schema";
+defineOptions({ name: "ShwfedSidebarConfig" });
+const props = defineProps({
+  state: { type: Object, required: true }
+});
+const draft = props.state.draft;
+const cfgSchema = SidebarConfig(() => {
+});
+const fieldTitle = (f) => getStructFieldTitle(cfgSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(cfgSchema, f);
+const dataSourceSchema = DataSource(() => {
+});
+const dsTitle = (f) => getStructFieldTitle(dataSourceSchema, f) ?? f;
+const dsDescription = (f) => getStructFieldDescription(dataSourceSchema, f);
+const nodeExtraVars = {
+  node: {
+    type: "dyn",
+    label: "\u5F53\u524D\u8282\u70B9",
+    description: "\u7531 `\u6570\u636E` \u8868\u8FBE\u5F0F\u8FD4\u56DE\u7684\u6BCF\u4E00\u9879\uFF1B\u7C7B\u578B\u5728\u914D\u7F6E\u65F6\u672A\u77E5\uFF08`dyn`\uFF09"
+  }
+};
+const jsonExtraVars = {
+  json: {
+    type: "optional<dyn>",
+    label: "HTTP \u54CD\u5E94\u4F53",
+    description: "\u5DF2\u89E3\u6790\u7684 JSON \u54CD\u5E94\uFF1B\u672A\u914D\u7F6E `request` \u65F6\u4E3A `none`"
+  }
+};
+function setDataSourceData(next) {
+  draft.value = { ...draft.value, dataSource: { ...draft.value.dataSource, data: next } };
+}
+function setDataSourceRequest(next) {
+  if (next.trim().length === 0) {
+    const { request: _omit, ...rest } = draft.value.dataSource;
+    draft.value = { ...draft.value, dataSource: rest };
+  } else {
+    draft.value = { ...draft.value, dataSource: { ...draft.value.dataSource, request: next } };
+  }
+}
+function setOptionalExpression(key, next) {
+  if (next.length === 0) {
+    const { [key]: _omit, ...rest } = draft.value;
+    draft.value = rest;
+  } else {
+    draft.value = { ...draft.value, [key]: next };
+  }
+}
+function setRequired(key, next) {
+  draft.value = { ...draft.value, [key]: next };
+}
+function setNodeLabel(next) {
+  draft.value = { ...draft.value, nodeLabel: next };
+}
+</script>
+
+<template>
+  <!-- Plain block wrapper, NOT a scroll container: the modal itself scrolls
+       (ShwfedModal's DialogScrollContent), so no inner scroll here. It must not
+       be a reka ScrollArea either — that wraps content in `display:table;
+       min-width:100%`, which makes the CodeMirror editors size to their content
+       width and overflow the modal. A plain block gives `w-full` children a
+       definite width so each editor scrolls its own long lines internally. -->
+  <div class="flex min-w-0 flex-col gap-3 pr-3 [&>*]:min-w-0">
+    <!-- 数据源 -->
+    <h3 class="text-xs font-medium text-zinc-500">
+      {{ fieldTitle("dataSource") }}
+    </h3>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="dsDescription('request')"
+          #tooltip
+        >
+          <Markdown
+            :source="dsDescription('request')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ dsTitle("request") }}
+      </FieldLabel>
+      <ExpressionEditor
+        :model-value="draft.dataSource.request ?? ''"
+        placeholder="如 http.get('/api/nav/tree')"
+        result-type="HttpRequest"
+        multiline
+        class="min-h-20"
+        @update:model-value="setDataSourceRequest"
+      />
+    </Field>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="dsDescription('data')"
+          #tooltip
+        >
+          <Markdown
+            :source="dsDescription('data')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ dsTitle("data") }}
+      </FieldLabel>
+      <ExpressionEditor
+        :model-value="draft.dataSource.data"
+        placeholder="如 json.?value.roots.orValue([])"
+        result-type="list"
+        :extra-vars="jsonExtraVars"
+        @update:model-value="setDataSourceData"
+      />
+    </Field>
+
+    <!-- 节点 -->
+    <h3 class="text-xs font-medium text-zinc-500">
+      节点
+    </h3>
+
+    <div class="grid grid-cols-2 gap-3 [&>*]:min-w-0">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('nodeKey')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('nodeKey')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("nodeKey") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="draft.nodeKey"
+          placeholder="例：string(node.id)"
+          :result-type="['string', 'number', 'dyn']"
+          :extra-vars="nodeExtraVars"
+          class="min-h-10"
+          @update:model-value="(v) => setRequired('nodeKey', v)"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('nodeChildren')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('nodeChildren')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("nodeChildren") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="draft.nodeChildren"
+          placeholder="例：has(node.children) ? node.children : null"
+          result-type="list"
+          :extra-vars="nodeExtraVars"
+          class="min-h-10"
+          @update:model-value="(v) => setRequired('nodeChildren', v)"
+        />
+      </Field>
+    </div>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="fieldDescription('nodeLabel')"
+          #tooltip
+        >
+          <Markdown
+            :source="fieldDescription('nodeLabel')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("nodeLabel") }}
+      </FieldLabel>
+      <LocaleField
+        markdown
+        translate-hint="sidebar nav node label"
+        :model-value="draft.nodeLabel"
+        @update:model-value="setNodeLabel"
+      />
+    </Field>
+
+    <div class="grid grid-cols-2 gap-3 [&>*]:min-w-0">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('nodeIcon')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('nodeIcon')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("nodeIcon") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="draft.nodeIcon ?? ''"
+          placeholder="例：node.icon"
+          :result-type="['string', 'dyn']"
+          :extra-vars="nodeExtraVars"
+          class="min-h-10"
+          @update:model-value="(v) => setOptionalExpression('nodeIcon', v)"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('nodeRoute')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('nodeRoute')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("nodeRoute") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="draft.nodeRoute ?? ''"
+          placeholder="例：node.route"
+          :result-type="['string', 'dyn']"
+          :extra-vars="nodeExtraVars"
+          class="min-h-10"
+          @update:model-value="(v) => setOptionalExpression('nodeRoute', v)"
+        />
+      </Field>
+    </div>
+
+    <!-- 行为 -->
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="fieldDescription('nodeVisible')"
+          #tooltip
+        >
+          <Markdown
+            :source="fieldDescription('nodeVisible')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("nodeVisible") }}
+      </FieldLabel>
+      <ExpressionEditor
+        :model-value="draft.nodeVisible ?? ''"
+        placeholder="例：node.role == 'admin'"
+        result-type="bool"
+        :extra-vars="nodeExtraVars"
+        class="min-h-10"
+        @update:model-value="(v) => setOptionalExpression('nodeVisible', v)"
+      />
+    </Field>
+
+    <!-- 外观 -->
+    <h3 class="text-xs font-medium text-zinc-500">
+      外观
+    </h3>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="fieldDescription('style')"
+          #tooltip
+        >
+          <Markdown
+            :source="fieldDescription('style')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("style") }}
+      </FieldLabel>
+      <ExpressionEditor
+        :model-value="draft.style ?? ''"
+        placeholder="返回 CSS 字符串或样式对象的表达式，如 'width: 14rem'"
+        multiline
+        class="min-h-16"
+        @update:model-value="(v) => setOptionalExpression('style', v)"
+      />
+    </Field>
+  </div>
+</template>

package/dist/runtime/components/sidebar/config.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SidebarEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: SidebarEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sidebar/favorites.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Client-persisted sidebar UI state, namespaced by `storageKey` so multiple
+ * sidebars / apps don't collide. `@vueuse/core`'s `useLocalStorage` returns the
+ * default on the server, so callers must only render the state-dependent UI
+ * inside `<ClientOnly>` to avoid a hydration mismatch (see `index.vue`).
+ *
+ *   - `favorites` — the starred node keys (link nodes only).
+ *   - `open`      — per-group open/closed overrides. `undefined` for a group
+ *                   means "fall back to the default" (groups start expanded).
+ */
+export declare function useSidebarFavorites(storageKey: string): {
+    favorites: import("@vueuse/core").RemovableRef<string[]>;
+    isFavorite: (key: string) => boolean;
+    toggleFavorite: (key: string) => void;
+    isOpen: (key: string, fallback: boolean) => boolean;
+    setOpen: (key: string, value: boolean) => void;
+};
+export type SidebarFavorites = ReturnType<typeof useSidebarFavorites>;

package/dist/runtime/components/sidebar/favorites.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { useLocalStorage } from "@vueuse/core";
+export function useSidebarFavorites(storageKey) {
+  const favorites = useLocalStorage(`${storageKey}:favorites`, []);
+  const openOverrides = useLocalStorage(`${storageKey}:open`, {});
+  const favoriteSet = computed(() => new Set(favorites.value));
+  function isFavorite(key) {
+    return favoriteSet.value.has(key);
+  }
+  function toggleFavorite(key) {
+    favorites.value = isFavorite(key) ? favorites.value.filter((k) => k !== key) : [...favorites.value, key];
+  }
+  function isOpen(key, fallback) {
+    return openOverrides.value[key] ?? fallback;
+  }
+  function setOpen(key, value) {
+    openOverrides.value = { ...openOverrides.value, [key]: value };
+  }
+  return { favorites, isFavorite, toggleFavorite, isOpen, setOpen };
+}

package/dist/runtime/components/sidebar/footer.d.vue.ts

@@ -0,0 +1,11 @@
+import type { SidebarEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: SidebarEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sidebar/footer.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Button } from "../ui/button";
+defineOptions({ name: "ShwfedSidebarEditorFooter" });
+const props = defineProps({
+  state: { type: Object, required: true }
+});
+const emit = defineEmits(["close"]);
+function onDismiss() {
+  props.state.dismiss();
+  emit("close");
+}
+function onConfirm() {
+  const errorBefore = props.state.validationError.value;
+  props.state.confirm();
+  const errorAfter = props.state.validationError.value;
+  if (errorAfter && errorAfter !== errorBefore) return;
+  if (!errorAfter) emit("close");
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center justify-between gap-3">
+    <div class="flex flex-1 flex-col gap-1 text-xs">
+      <span
+        v-if="props.state.validationError.value"
+        class="text-red-500 break-all"
+      >{{ props.state.validationError.value }}</span>
+    </div>
+    <Button
+      type="button"
+      variant="default"
+      size="sm"
+      @click="onDismiss"
+    >
+      <Icon icon="fluent:dismiss-20-regular" />
+      取消
+    </Button>
+    <Button
+      type="button"
+      variant="primary"
+      size="sm"
+      @click="onConfirm"
+    >
+      <Icon icon="fluent:checkmark-20-regular" />
+      确认
+    </Button>
+  </div>
+</template>

package/dist/runtime/components/sidebar/footer.vue.d.ts

@@ -0,0 +1,11 @@
+import type { SidebarEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: SidebarEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sidebar/index.d.vue.ts

@@ -0,0 +1,50 @@
+import type { Environment } from '../../vendor/cel-js/lib/index.js';
+import { type SidebarConfigValue } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+    editable?: boolean;
+    storageKey?: string;
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    width?: string;
+};
+type __VLS_ModelProps = {
+    'config'?: SidebarConfigValue | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (value: Readonly<{
+        kind: "shwfed.component.sidebar";
+        dataSource: Readonly<{
+            request?: string;
+            data: string;
+        }>;
+        nodeKey: string;
+        nodeChildren: string;
+        nodeLabel: import("../../share/locale.js").LocaleValue;
+        nodeIcon?: string;
+        nodeRoute?: string;
+        nodeVisible?: string;
+        style?: string;
+    }> | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:config"?: ((value: Readonly<{
+        kind: "shwfed.component.sidebar";
+        dataSource: Readonly<{
+            request?: string;
+            data: string;
+        }>;
+        nodeKey: string;
+        nodeChildren: string;
+        nodeLabel: import("../../share/locale.js").LocaleValue;
+        nodeIcon?: string;
+        nodeRoute?: string;
+        nodeVisible?: string;
+        style?: string;
+    }> | null | undefined) => any) | undefined;
+}>, {
+    width: string;
+    collapsible: "offcanvas" | "icon" | "none";
+    storageKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sidebar/index.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { injectCELContext } from "../../utils/cel-context";
+import { Sidebar, SidebarProvider } from "../ui/sidebar";
+import ShwfedModal from "../modal.vue";
+import SidebarTree from "./tree.vue";
+import EditorBody from "./config.vue";
+import EditorFooter from "./footer.vue";
+import { useSidebarEditor } from "./use-editor";
+import { createSidebarConfig } from "./schema";
+defineOptions({ name: "ShwfedSidebar" });
+const configModel = defineModel("config", { type: null });
+const config = computed({
+  get: () => configModel.value ?? createSidebarConfig(),
+  set: (next) => {
+    configModel.value = next;
+  }
+});
+const props = defineProps({
+  configure: { type: Function, required: false },
+  editable: { type: Boolean, required: false },
+  storageKey: { type: String, required: false, default: "shwfed-sidebar" },
+  collapsible: { type: String, required: false, default: "none" },
+  width: { type: String, required: false, default: "13rem" }
+});
+const inheritedCEL = injectCELContext();
+const hostConfigure = props.configure ?? (() => {
+});
+const mergedConfigure = (env) => {
+  hostConfigure(env);
+  const existing = new Set(env.getDefinitions().variables.map((v) => v.name));
+  for (const [name, v] of Object.entries(inheritedCEL)) {
+    if (existing.has(name)) continue;
+    env.registerVariable(name, v.type, { description: v.description, label: v.label });
+  }
+};
+const editorOpen = ref(false);
+const editorState = useSidebarEditor(config, {
+  configure: mergedConfigure,
+  onClose: () => {
+    editorOpen.value = false;
+  }
+});
+watch(editorOpen, (open, prev) => {
+  if (open && !prev) editorState.reset();
+});
+function onRootClick(event) {
+  if (!props.editable) return;
+  if (!event.metaKey && !event.ctrlKey) return;
+  event.preventDefault();
+  event.stopPropagation();
+  editorOpen.value = true;
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      class="contents"
+      @click.capture="onRootClick"
+    >
+      <SidebarProvider
+        class="w-fit"
+        :style="{ '--sidebar-width': width }"
+      >
+        <Sidebar
+          :collapsible="collapsible"
+          class="sticky h-full"
+        >
+          <SidebarTree
+            :config="config"
+            :configure="mergedConfigure"
+            :storage-key="storageKey"
+          />
+        </Sidebar>
+      </SidebarProvider>
+    </div>
+
+    <ShwfedModal
+      v-if="editable"
+      v-model:open="editorOpen"
+      content-width="min(52rem, 92vw)"
+      :dismissible="true"
+    >
+      <template #title>
+        导航侧栏
+      </template>
+      <template #description>
+        <span class="sr-only">编辑导航侧栏配置</span>
+      </template>
+      <EditorBody :state="editorState" />
+      <template #footer>
+        <EditorFooter
+          :state="editorState"
+          @close="editorOpen = false"
+        />
+      </template>
+    </ShwfedModal>
+  </ClientOnly>
+</template>

package/dist/runtime/components/sidebar/index.vue.d.ts

@@ -0,0 +1,50 @@
+import type { Environment } from '../../vendor/cel-js/lib/index.js';
+import { type SidebarConfigValue } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+    editable?: boolean;
+    storageKey?: string;
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    width?: string;
+};
+type __VLS_ModelProps = {
+    'config'?: SidebarConfigValue | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (value: Readonly<{
+        kind: "shwfed.component.sidebar";
+        dataSource: Readonly<{
+            request?: string;
+            data: string;
+        }>;
+        nodeKey: string;
+        nodeChildren: string;
+        nodeLabel: import("../../share/locale.js").LocaleValue;
+        nodeIcon?: string;
+        nodeRoute?: string;
+        nodeVisible?: string;
+        style?: string;
+    }> | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:config"?: ((value: Readonly<{
+        kind: "shwfed.component.sidebar";
+        dataSource: Readonly<{
+            request?: string;
+            data: string;
+        }>;
+        nodeKey: string;
+        nodeChildren: string;
+        nodeLabel: import("../../share/locale.js").LocaleValue;
+        nodeIcon?: string;
+        nodeRoute?: string;
+        nodeVisible?: string;
+        style?: string;
+    }> | null | undefined) => any) | undefined;
+}>, {
+    width: string;
+    collapsible: "offcanvas" | "icon" | "none";
+    storageKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sidebar/node.d.vue.ts

@@ -0,0 +1,9 @@
+import type { NavNode } from './types.js';
+import type { SidebarFavorites } from './favorites.js';
+type __VLS_Props = {
+    node: NavNode;
+    favorites: SidebarFavorites;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;