补全

Author: wszgrcy

projects/daisyui/extension/option-list/component.html

@@ -64,6 +64,8 @@
   <ul [class]="'menu' | mergeClass: attr().class" [attributes]="attr()" [excludes]="['class']">
     @for (option of options() | slice: 0 : maxListCount(); track $index) {
       <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option }"></ng-container>
+    } @empty {
+      <li></li>
     }
   </ul>
 </ng-template>

projects/daisyui/extension/option-list/component.ts

@@ -106,7 +106,7 @@ export class OptionListFCC extends BaseControl {
     return deepEqual(a, b) ? 'menu-active' : '';
   };
   activateClasslist = (a: any[], b: any) => {
-    return a.some((item) => deepEqual(item, b));
+    return !!a?.some((item) => deepEqual(item, b));
   };
 }
 

projects/daisyui/extension/picker-ref/component.ts

@@ -10,10 +10,12 @@ import {
 } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import {
+  actions,
   AttributesDirective,
   BaseControl,
   PI_INPUT_OPTIONS_TOKEN,
   PI_VIEW_FIELD_TOKEN,
+  PiResolvedViewFieldConfig,
   PiyingView,
 } from '@piying/view-angular';
 
@@ -22,6 +24,7 @@ import { CdkConnectedOverlayConfig, CdkOverlayOrigin } from '@angular/cdk/overla
 import * as v from 'valibot';
 import { CdkConnectedOverlay, CustomMenuTrigger } from '@piying-lib/angular-core';
 import { MENU_TRIGGER, PARENT_OR_NEW_MENU_STACK_PROVIDER } from '@angular/cdk/menu';
+import { PickerRefService } from './picker-ref.service';
 /*
  * PickerRefFCC - 选择器引用组件
  *
@@ -57,6 +60,7 @@ import { MENU_TRIGGER, PARENT_OR_NEW_MENU_STACK_PROVIDER } from '@angular/cdk/me
       useExisting: CustomMenuTrigger,
     },
     PARENT_OR_NEW_MENU_STACK_PROVIDER,
+    PickerRefService,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -67,10 +71,10 @@ export class PickerRefFCC extends BaseControl {
   templateRef = viewChild.required('templateRef');
   readonly PiyingView = PiyingView;
   /** 触发器内容 */
-  trigger = input<v.BaseSchema<any, any, any>>();
+  trigger = input.required<v.BaseSchema<any, any, any>>();
   triggerModel = input<'click' | 'contextmenu'>('click');
   /** 弹窗内容 */
-  content = input<v.BaseSchema<any, any, any>>();
+  content = input.required<v.BaseSchema<any, any, any>>();
   /** 选择后是否自动关闭 */
   changeClose = input<boolean>(true);
   isOpen$ = signal(false);
@@ -80,17 +84,27 @@ export class PickerRefFCC extends BaseControl {
   parentPyOptions = inject(PI_INPUT_OPTIONS_TOKEN, { optional: true });
   #field$$ = inject(PI_VIEW_FIELD_TOKEN);
   menuTrigger = inject(CustomMenuTrigger);
-
+  #service = inject(PickerRefService);
   triggerInput$$ = computed(() => {
     return {
       model: this.value$,
-      schema: this.trigger,
+      schema: computed(() => {
+        return v.pipe(
+          this.trigger(),
+          actions.hooks.merge({
+            allFieldsResolved: (field) => {
+              this.#service.triggerField$$ = signal(field);
+            },
+          }),
+        );
+      }),
       options: computed(() => ({
         ...this.parentPyOptions!(),
         context: {
           ...this.parentPyOptions!().context,
           pickerValue: this.value$,
           parentProps: this.#field$$().props,
+          rootField$$: this.#field$$,
         },
       })),
       selectorless: true,
@@ -126,6 +140,10 @@ export class PickerRefFCC extends BaseControl {
       },
     };
   });
+
+  ngOnInit(): void {
+    this.#service.rootField$$ = this.#field$$;
+  }
   openRef(mode: string) {
     if (mode === this.triggerModel()) {
       this.isOpen$.set(true);

projects/daisyui/extension/picker-ref/index.ts

@@ -1 +1,2 @@
 export * from './component';
+export * from './picker-ref.service'

projects/daisyui/extension/picker-ref/picker-ref.service.ts

@@ -0,0 +1,8 @@
+import { Injectable, Signal, WritableSignal } from '@angular/core';
+import { PiResolvedViewFieldConfig } from '@piying/view-angular';
+
+@Injectable()
+export class PickerRefService {
+  rootField$$!: Signal<PiResolvedViewFieldConfig>;
+  triggerField$$!: Signal<PiResolvedViewFieldConfig>;
+}

src/app/piying/page/component/extension/picker-ref/example/autocomplete/content.ts

@@ -0,0 +1,71 @@
+import * as v from 'valibot';
+import { actions, NFCSchema } from '@piying/view-angular-core';
+import { safeDefine } from '@@piying-define';
+import { PiResolvedViewFieldConfig } from '@piying/view-angular';
+import { filter } from 'rxjs';
+import { PickerRefService } from '@piying-lib/angular-daisyui/extension';
+export const TriggerButton = v.pipe(
+  v.string(),
+  safeDefine.setComponent('input', (actions) => {
+    return [];
+  }),
+);
+export const ContentButton = v.pipe(
+  v.string(),
+  safeDefine.setComponent('option-list', (actions) => {
+    return [
+      actions.inputs.patch({
+        options: ['option-1', 'option-2', 'option-3'],
+      }),
+      actions.hooks.merge({
+        allFieldsResolved: (field) => {
+          let options = field.inputs()['options'] as string[];
+          let service = field.injector.get(PickerRefService);
+          let triggerField = service.triggerField$$();
+          let allowCustom = true;
+          triggerField.form
+            .control!.valueChanges.pipe(filter((a) => typeof a === 'string'))
+            .subscribe((value) => {
+              field.inputs.update((data) => {
+                return {
+                  ...data,
+                  options: !value ? options : options.filter((item) => item.includes(value)),
+                };
+              });
+              if (allowCustom) {
+                let rootField$$ = service.rootField$$();
+                rootField$$.form.control!.updateValue(value);
+              }
+            });
+        },
+      }),
+    ];
+  }),
+  actions.class.bottom('bg-white rounded-box shadow'),
+);
+
+export default v.pipe(
+  v.tuple([
+    v.pipe(
+      v.string(),
+      safeDefine.setComponent('picker-ref', (actions) => {
+        return [
+          actions.inputs.patch({
+            trigger: TriggerButton,
+            content: ContentButton,
+            overlayConfig: { positionStrategy: undefined },
+          }),
+        ];
+      }),
+      actions.hooks.merge({
+        allFieldsResolved: (field) => {
+          field.form.control!.valueChanges.subscribe((item) => {
+            console.log('值变更', item);
+          });
+        },
+      }),
+    ),
+  ]),
+  actions.wrappers.patch(['div']),
+  actions.class.top('flex gap-4'),
+);

src/app/piying/page/component/extension/picker-ref/example/autocomplete/index.ts

@@ -0,0 +1,8 @@
+import define from './content';
+import content from './content?text';
+import title from './content?title';
+export const Autocomplete = {
+  define: define,
+  content: content,
+  title: title,
+};

src/app/piying/page/component/extension/picker-ref/example/index.ts

@@ -1,2 +1,3 @@
 export * from './changeClose';
 export * from './base';
+export * from './autocomplete';