@svadmin/ui 0.93.0 → 0.95.0

package/dist/components/FilterBuilder.svelte

@@ -23,27 +23,51 @@
     fields?: FieldDefinition[];
     filters?: Filter[];
     logicalOperator?: 'and' | 'or';
+    /** 宿主服务端只支持部分操作符时，限制编辑器可选项；默认沿用字段全量操作符。 */
+    allowedOperators?: readonly CrudOperator[];
+    /** 宿主只支持单一组合逻辑时（如扁平 AND 查询），限制逻辑选择；默认 AND/OR 都可用。 */
+    allowedLogicalOperators?: readonly ('and' | 'or')[];
+    /** 宿主不支持嵌套条件组时关闭新增入口；已保存的嵌套组仍会按白名单校验。 */
+    allowGroups?: boolean;
     disabled?: boolean;
     class?: string;
     onApply?: (filters: Filter[]) => void;
     onReset?: () => void;
     onInvalid?: (issues: FilterEditorIssue[]) => void;
   }
-  let { fields = [], filters = $bindable([]), logicalOperator = $bindable('and'), disabled = false,
+  let { fields = [], filters = $bindable([]), logicalOperator = $bindable('and'), allowedOperators = undefined,
+    allowedLogicalOperators = ['and', 'or'], allowGroups = true, disabled = false,
     class: className, onApply, onReset, onInvalid }: Props = $props();
   const uid = $props.id();
   const i18n = useTranslation();
   const chinese = $derived(i18n.locale.startsWith('zh'));
   const availableFields = $derived(fields.filter((field) => field.filterable !== false));
+  const logicalOperators = $derived<readonly ('and' | 'or')[]>(
+    allowedLogicalOperators.length > 0 ? allowedLogicalOperators : ['and'],
+  );
+  const activeLogicalOperator = $derived<'and' | 'or'>(
+    logicalOperators.includes(logicalOperator) ? logicalOperator : (logicalOperators[0] ?? 'and'),
+  );
   // 金额、评分等数字字段沿用 core 的输入语义；树编译器统一按 number 验证。
   const editorFields = $derived(fields.map(field => isNumericField(field) ? { ...field, type: 'number' as const } : field));
+  function operatorsFor(field: FieldDefinition | undefined): CrudOperator[] {
+    const operators = filterOperators(field);
+    if (!allowedOperators) return operators;
+    const allowed = new Set(allowedOperators);
+    return operators.filter((operator) => allowed.has(operator));
+  }
+  function defaultOperator(field: FieldDefinition | undefined): CrudOperator | undefined {
+    const operators = operatorsFor(field);
+    if (operators.includes('contains')) return 'contains';
+    return operators[0];
+  }
   let root = $state<FilterGroupNode>({ kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false });
   let loadIssues = $state<FilterEditorIssue[]>([]);
   let attempted = $state(false);
   let nextId = 0;
   let lastInputFilters: Filter[] | undefined;
   let preserved = $state.raw<ReadonlyMap<string, Filter>>(new Map());
-  const compilation = $derived(compileFilterTree({ ...root, operator: logicalOperator }, editorFields, preserved));
+  const compilation = $derived(compileFilterTree({ ...root, operator: activeLogicalOperator }, editorFields, preserved));
   const issues = $derived(loadIssues.length ? loadIssues : attempted && !compilation.ok ? compilation.issues : []);
   function countNodes(node: FilterNode): number { return 1 + (node.kind === 'group' ? node.children.reduce((sum, child) => sum + countNodes(child), 0) : 0); }
   const nodeCount = $derived(countNodes(root));
@@ -54,6 +78,19 @@
       : { field: node.field, operator: node.operator, value: Array.isArray(node.value) ? [...node.value] : node.value };
   }
 
+  function unsupportedLogic(node: FilterNode, top = false): FilterIssueCode | undefined {
+    if (node.kind === 'rule') return undefined;
+    if (!top && !allowGroups) return 'invalid-filter';
+    // 顶层扁平 filters 的 AND 是查询语义，不是用户选择的组合逻辑。
+    if (!(top && !node.wrapped) && !logicalOperators.includes(node.operator)) return 'logic';
+    for (const child of node.children) {
+      if (child.kind !== 'group') continue;
+      const issue = unsupportedLogic(child);
+      if (issue) return issue;
+    }
+    return undefined;
+  }
+
   function cannotEdit(node: FilterRuleNode): boolean {
     return !compileFilterTree({ kind: 'group', id: 'probe', operator: 'and', children: [node] }, editorFields).ok;
   }
@@ -71,12 +108,17 @@
         lastInputFilters = input;
         const parsed = readFilterTree(input);
         const saved = new Map<string, Filter>();
-        if (parsed.ok) {
+        const logicIssue = parsed.ok ? unsupportedLogic(parsed.root, true) : undefined;
+        if (parsed.ok && !logicIssue) {
           root = parsed.root;
           remember(root, saved);
           loadIssues = [];
-          if (input.length) logicalOperator = root.operator;
-        } else {
+          if (input.length) logicalOperator = logicalOperators.includes(root.operator)
+            ? root.operator : (logicalOperators[0] ?? 'and');
+        } else if (parsed.ok && logicIssue) {
+          root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
+          loadIssues = [{ path: 'root', code: logicIssue }];
+        } else if (!parsed.ok) {
           root = { kind: 'group', id: 'root', operator: 'and', children: [], wrapped: false };
           loadIssues = parsed.issues;
         }
@@ -99,6 +141,7 @@
       limit: ['条件数量或深度超过限制', 'Filter count or depth exceeds the limit'],
       'unknown-field': ['字段不可用于筛选', 'Field is unavailable for filtering'],
       operator: ['操作符不适用于此字段', 'Operator is not supported for this field'],
+      logic: ['组合逻辑不受支持，原条件未被修改', 'Unsupported group logic; the original query is unchanged'],
       value: ['请输入有效的类型化值', 'Enter a valid typed value'],
       'empty-group': ['条件组不能为空', 'A filter group cannot be empty'],
     };
@@ -108,12 +151,14 @@
     if (disabled || loadIssues.length || full) return;
     const field = availableFields[0];
     if (!field) return;
+    const operator = defaultOperator(editorFields.find(item => item.key === field.key));
+    if (!operator) return;
     group.children = [...group.children, { kind: 'rule', id: `draft-${++nextId}`, field: field.key,
-      operator: filterOperators(editorFields.find(item => item.key === field.key)).includes('contains') ? 'contains' : 'eq', value: undefined }];
+      operator, value: undefined }];
   }
 
   function appendGroup(group: FilterGroupNode): void {
-    if (disabled || loadIssues.length || full) return;
+    if (!allowGroups || disabled || loadIssues.length || full) return;
     group.children = [...group.children, { kind: 'group', id: `draft-${++nextId}`, operator: 'and', children: [] }];
   }
 
@@ -148,8 +193,10 @@
 
   function changeField(rule: FilterRuleNode, key: string): void {
     if (disabled || rule.readonly) return;
+    const operator = defaultOperator(editorFields.find(field => field.key === key));
+    if (!operator) return;
     rule.field = key;
-    rule.operator = filterOperators(editorFields.find(field => field.key === key)).includes('contains') ? 'contains' : 'eq';
+    rule.operator = operator;
     rule.value = undefined;
   }
 
@@ -179,21 +226,25 @@
     <div class="group-actions">
       <label for={`${uid}-${group.id}-logic`}>{chinese ? '逻辑' : 'Logic'}</label>
       <Select id={`${uid}-${group.id}-logic`} aria-label={chinese ? '组合逻辑' : 'Group logic'}
-        value={top ? logicalOperator : group.operator}
+        value={top ? activeLogicalOperator : group.operator}
+        disabled={disabled || logicalOperators.length <= 1}
         onchange={(event: Event) => {
           const target = event.currentTarget;
           if (disabled || !(target instanceof HTMLSelectElement)) return;
           const next = target.value === 'or' ? 'or' : 'and';
+          if (!logicalOperators.includes(next)) return;
           if (top) logicalOperator = next; else group.operator = next;
         }}>
-        <option value="and">AND</option><option value="or">OR</option>
+        {#each logicalOperators as operator (operator)}<option value={operator}>{operator.toUpperCase()}</option>{/each}
       </Select>
       <Button type="button" size="sm" variant="outline" disabled={full || depth >= FILTER_EDITOR_LIMITS.depth || !availableFields.length}
         data-testid={top ? 'filter-builder-add-rule' : 'filter-group-add-rule'} onclick={() => appendRule(group)}>
         <Plus size={14} aria-hidden="true" />{i18n.t('common.addRule')}
       </Button>
-      <Button type="button" size="sm" variant="ghost" disabled={full || depth >= FILTER_EDITOR_LIMITS.depth - 1}
-        data-testid="filter-builder-add-group" onclick={() => appendGroup(group)}>{chinese ? '添加条件组' : 'Add group'}</Button>
+      {#if allowGroups}
+        <Button type="button" size="sm" variant="ghost" disabled={full || depth >= FILTER_EDITOR_LIMITS.depth - 1}
+          data-testid="filter-builder-add-group" onclick={() => appendGroup(group)}>{chinese ? '添加条件组' : 'Add group'}</Button>
+      {/if}
     </div>
     {#each group.children as node (node.id)}
       {#if node.kind === 'group'}
@@ -203,7 +254,7 @@
         </div>
       {:else}
         {@const field = availableFields.find((item) => item.key === node.field)}
-        {@const allowed = filterOperators(editorFields.find(item => item.key === node.field))}
+        {@const allowed = operatorsFor(editorFields.find(item => item.key === node.field))}
         {@const collection = isCollectionOperator(node.operator)}
         {@const invalid = issues.some((issue) => issue.path === node.id)}
         {@const describedby = issues.flatMap((issue, index) => issue.path === node.id ? [`${uid}-issue-${index}`] : []).join(' ') || undefined}
@@ -260,6 +311,10 @@
             {:else if !collection && isNumericField(field)}
               <Input id={`${uid}-${node.id}-value`} type="number" step="any" aria-invalid={invalid} aria-describedby={describedby} value={typeof node.value === 'number' ? node.value : undefined}
                 oninput={(event: Event) => { if (event.currentTarget instanceof HTMLInputElement) changeValue(node, event.currentTarget.value); }} />
+            {:else if !collection && (field?.type === 'date' || field?.type === 'time' || field?.type === 'datetime')}
+              <Input id={`${uid}-${node.id}-value`} type={field.type === 'datetime' ? 'datetime-local' : field.type}
+                aria-invalid={invalid} aria-describedby={describedby} value={valueText(node.value)}
+                oninput={(event: Event) => { if (event.currentTarget instanceof HTMLInputElement) changeValue(node, event.currentTarget.value); }} />
             {:else}
               <Input id={`${uid}-${node.id}-value`} type="text" aria-invalid={invalid} aria-describedby={describedby} value={valueText(node.value)} placeholder={collection ? '[1, 2]' : ''}
                 oninput={(event: Event) => { if (event.currentTarget instanceof HTMLInputElement) changeValue(node, event.currentTarget.value); }} />

package/dist/components/FilterBuilder.svelte.d.ts

@@ -10,6 +10,12 @@ interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
     logicalOperator?: 'and' | 'or';
+    /** 宿主服务端只支持部分操作符时，限制编辑器可选项；默认沿用字段全量操作符。 */
+    allowedOperators?: readonly CrudOperator[];
+    /** 宿主只支持单一组合逻辑时（如扁平 AND 查询），限制逻辑选择；默认 AND/OR 都可用。 */
+    allowedLogicalOperators?: readonly ('and' | 'or')[];
+    /** 宿主不支持嵌套条件组时关闭新增入口；已保存的嵌套组仍会按白名单校验。 */
+    allowGroups?: boolean;
     disabled?: boolean;
     class?: string;
     onApply?: (filters: Filter[]) => void;

package/dist/components/RowActions.svelte

@@ -13,8 +13,10 @@
     icon?: Component<{ class?: string }>;
     href?: string;
     onclick?: (e: MouseEvent) => void;
-    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'primary';
     disabled?: boolean;
+    /** 受控禁用原因；禁用项通过 tooltip/标题与菜单内说明呈现，不改变命令语义。 */
+    disabledReason?: string;
     title?: string;
     danger?: boolean;
     hidden?: boolean;
@@ -56,8 +58,14 @@
   let initialMenuFocus: 'first' | 'last' = 'first';
   let restoreFocusOnClose = false;
 
-  function resolvedVariant(action: RowActionItem): RowActionItem['variant'] {
-    return action.variant ?? (action.danger ? 'destructive' : 'ghost');
+  function resolvedVariant(action: RowActionItem): Exclude<NonNullable<RowActionItem['variant']>, 'primary'> {
+    if (action.variant === 'primary') return 'default';
+    return (action.variant ?? (action.danger ? 'destructive' : 'ghost')) as Exclude<NonNullable<RowActionItem['variant']>, 'primary'>;
+  }
+
+  function actionTitle(action: RowActionItem): string {
+    const base = action.title || action.label;
+    return action.disabled && action.disabledReason ? `${base}：${action.disabledReason}` : base;
   }
 
   function handleOverflowAction(action: RowActionItem, event: MouseEvent): void {
@@ -149,7 +157,8 @@
         size="sm"
         href={action.href}
         disabled={action.disabled}
-        title={action.title || action.label}
+        disabledReason={action.disabled ? (action.disabledReason ?? '') : ''}
+        title={actionTitle(action)}
         class="svadmin-u-ed8a5df7b2fb svadmin-u-d5eab218aa34 svadmin-u-359090c2d529"
       >
         {#if action.icon}
@@ -164,7 +173,8 @@
         size="sm"
         onclick={action.onclick}
         disabled={action.disabled}
-        title={action.title || action.label}
+        disabledReason={action.disabled ? (action.disabledReason ?? '') : ''}
+        title={actionTitle(action)}
         class="svadmin-u-ed8a5df7b2fb svadmin-u-d5eab218aa34 svadmin-u-359090c2d529"
       >
         {#if action.icon}
@@ -193,9 +203,11 @@
               {...definedOptions({ "variant": resolvedVariant(action) })}
               size="sm"
               disabled={action.disabled}
+              disabledReason={action.disabled ? (action.disabledReason ?? '') : ''}
               onclick={(event) => handleOverflowAction(action, event)}
               role="menuitem"
               tabindex={-1}
+              title={actionTitle(action)}
               class="svadmin-u-b8f0a08ece1e svadmin-u-6da6a3c3f741 svadmin-u-4b5cc19bfdfc svadmin-u-421ac2be5045 svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6"
             >
               {#if action.icon}
@@ -211,12 +223,18 @@
               destructive={action.danger || action.variant === 'destructive'}
               role="menuitem"
               tabindex={-1}
+              title={actionTitle(action)}
             >
               {#if action.icon}
                 {@const Icon = action.icon}
                 <Icon class="svadmin-u-783b0d9d1e2c" />
               {/if}
-              {action.label}
+              <span class="row-action-label">
+                <span>{action.label}</span>
+                {#if action.disabled && action.disabledReason}
+                  <span class="row-action-reason">{action.disabledReason}</span>
+                {/if}
+              </span>
             </DropdownMenu.Item>
           {/if}
         {/each}
@@ -227,3 +245,9 @@
     </DropdownMenu.Root>
   {/if}
 </div>
+
+<style>
+  .row-action-label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .125rem; min-width: 0; }
+  .row-action-label > span:first-child { overflow: hidden; text-overflow: ellipsis; }
+  .row-action-reason { font-size: .75em; line-height: 1.3; opacity: .72; white-space: normal; }
+</style>

package/dist/components/RowActions.svelte.d.ts

@@ -8,8 +8,10 @@ export type RowActionItem = {
     }>;
     href?: string;
     onclick?: (e: MouseEvent) => void;
-    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary';
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'primary';
     disabled?: boolean;
+    /** 受控禁用原因；禁用项通过 tooltip/标题与菜单内说明呈现，不改变命令语义。 */
+    disabledReason?: string;
     title?: string;
     danger?: boolean;
     hidden?: boolean;

package/dist/components/enterprise/filter-tree.d.ts

@@ -20,7 +20,7 @@ export interface FilterGroupNode {
     wrapped?: boolean;
 }
 export type FilterNode = FilterRuleNode | FilterGroupNode;
-export type FilterIssueCode = 'invalid-filter' | 'limit' | 'unknown-field' | 'operator' | 'value' | 'empty-group';
+export type FilterIssueCode = 'invalid-filter' | 'limit' | 'unknown-field' | 'operator' | 'logic' | 'value' | 'empty-group';
 export interface FilterEditorIssue {
     path: string;
     code: FilterIssueCode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.93.0",
+  "version": "0.95.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [