@piying-lib/angular-daisyui 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/extension/index.d.ts +59 -9
- package/fesm2022/piying-lib-angular-daisyui-extension.mjs +246 -11
- package/fesm2022/piying-lib-angular-daisyui-extension.mjs.map +1 -1
- package/fesm2022/{piying-lib-angular-daisyui-field-control-props.directive-C5mF89PX.mjs → piying-lib-angular-daisyui-field-control-props.directive-I-MQ3iQV.mjs} +2 -1
- package/fesm2022/piying-lib-angular-daisyui-field-control-props.directive-I-MQ3iQV.mjs.map +1 -0
- package/fesm2022/piying-lib-angular-daisyui-field-control.mjs +142 -16
- package/fesm2022/piying-lib-angular-daisyui-field-control.mjs.map +1 -1
- package/fesm2022/piying-lib-angular-daisyui-field-group.mjs +90 -12
- package/fesm2022/piying-lib-angular-daisyui-field-group.mjs.map +1 -1
- package/fesm2022/piying-lib-angular-daisyui-non-field-control.mjs +145 -0
- package/fesm2022/piying-lib-angular-daisyui-non-field-control.mjs.map +1 -1
- package/fesm2022/piying-lib-angular-daisyui-wrapper.mjs +2 -2
- package/fesm2022/piying-lib-angular-daisyui-wrapper.mjs.map +1 -1
- package/field-control/index.d.ts +126 -6
- package/field-group/index.d.ts +91 -9
- package/non-field-control/index.d.ts +150 -0
- package/package.json +2 -2
- package/wrapper/index.d.ts +1 -1
- package/fesm2022/piying-lib-angular-daisyui-field-control-props.directive-C5mF89PX.mjs.map +0 -1
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, inject, ElementRef, Directive } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class CalendarPropsDirective {
|
|
5
|
+
/** 日历属性配置 */
|
|
5
6
|
calendarProps = input(...(ngDevMode ? [undefined, { debugName: "calendarProps" }] : []));
|
|
6
7
|
#el = inject(ElementRef);
|
|
7
8
|
ngOnChanges() {
|
|
@@ -24,4 +25,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
24
25
|
}], propDecorators: { calendarProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarProps", required: false }] }] } });
|
|
25
26
|
|
|
26
27
|
export { CalendarPropsDirective };
|
|
27
|
-
//# sourceMappingURL=piying-lib-angular-daisyui-field-control-props.directive-
|
|
28
|
+
//# sourceMappingURL=piying-lib-angular-daisyui-field-control-props.directive-I-MQ3iQV.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"piying-lib-angular-daisyui-field-control-props.directive-I-MQ3iQV.mjs","sources":["../../../projects/daisyui/field-control/calendar/props.directive.ts"],"sourcesContent":["import { Directive, ElementRef, inject, input } from '@angular/core';\nimport type { CalendarDateProps, CalendarMultiProps, CalendarRangeProps } from 'cally';\n@Directive({\n selector: '[calendarProps]',\n})\nexport class CalendarPropsDirective<\n T extends CalendarDateProps | CalendarMultiProps | CalendarRangeProps,\n> {\n /** 日历属性配置 */\n calendarProps = input<T>();\n #el = inject(ElementRef);\n\n ngOnChanges(): void {\n const attr = this.calendarProps();\n if (!attr) {\n return;\n }\n for (const key in attr) {\n (this.#el.nativeElement as T)[key] = attr[key];\n }\n }\n}\n"],"names":[],"mappings":";;;MAKa,sBAAsB,CAAA;;IAIjC,aAAa,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAK;AAC1B,IAAA,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;IAExB,WAAW,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;QACjC,IAAI,CAAC,IAAI,EAAE;YACT;QACF;AACA,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,GAAG,CAAC,aAAmB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;QAChD;IACF;wGAfW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAHlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;;;;;"}
|
|
@@ -13,24 +13,33 @@ import { SelectorlessOutlet } from '@cyia/ngx-common/directive';
|
|
|
13
13
|
import clsx from 'clsx';
|
|
14
14
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
15
15
|
|
|
16
|
+
/**
|
|
17
|
+
* 复选框控件
|
|
18
|
+
*
|
|
19
|
+
* 提供单个复选框的勾选功能，支持确定、不确定两种状态。
|
|
20
|
+
* 常用于需要选择多个选项的场景。
|
|
21
|
+
*/
|
|
16
22
|
class CheckboxFCC extends BaseControl {
|
|
17
23
|
static __version = 2;
|
|
18
24
|
templateRef = viewChild.required('templateRef');
|
|
19
|
-
|
|
25
|
+
/** 颜色主题 */
|
|
20
26
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
27
|
+
/** 尺寸大小 */
|
|
21
28
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
29
|
+
/** 是否为不确定状态 */
|
|
30
|
+
indeterminate = input(...(ngDevMode ? [undefined, { debugName: "indeterminate" }] : []));
|
|
22
31
|
#theme = inject(ThemeService);
|
|
23
32
|
wrapperClass$ = computed(() => {
|
|
24
33
|
return this.#theme.setClass(this.#theme.setColor('checkbox', this.color()), this.#theme.setSize('checkbox', this.size()));
|
|
25
34
|
}, ...(ngDevMode ? [{ debugName: "wrapperClass$" }] : []));
|
|
26
35
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxFCC, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: CheckboxFCC, isStandalone: true, selector: "app-checkbox", inputs: {
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: CheckboxFCC, isStandalone: true, selector: "app-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
28
37
|
{
|
|
29
38
|
provide: NG_VALUE_ACCESSOR,
|
|
30
39
|
useExisting: forwardRef(() => CheckboxFCC),
|
|
31
40
|
multi: true,
|
|
32
41
|
},
|
|
33
|
-
], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n type=\"checkbox\"\n [
|
|
42
|
+
], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n type=\"checkbox\"\n [class]=\"attr()?.class | mergeClass: ('checkbox' | cssPrefix) : wrapperClass$()\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueAndTouchedChange($event)\"\n [disabled]=\"disabled$()\"\n [indeterminate]=\"indeterminate()\"\n />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
|
|
34
43
|
}
|
|
35
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxFCC, decorators: [{
|
|
36
45
|
type: Component,
|
|
@@ -40,15 +49,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
40
49
|
useExisting: forwardRef(() => CheckboxFCC),
|
|
41
50
|
multi: true,
|
|
42
51
|
},
|
|
43
|
-
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n type=\"checkbox\"\n [
|
|
44
|
-
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }],
|
|
52
|
+
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n type=\"checkbox\"\n [class]=\"attr()?.class | mergeClass: ('checkbox' | cssPrefix) : wrapperClass$()\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueAndTouchedChange($event)\"\n [disabled]=\"disabled$()\"\n [indeterminate]=\"indeterminate()\"\n />\n</ng-template>\n" }]
|
|
53
|
+
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
|
|
45
54
|
|
|
55
|
+
/**
|
|
56
|
+
* 文件上传控件
|
|
57
|
+
*
|
|
58
|
+
* 提供文件选择和上传功能，支持单文件和多文件选择。
|
|
59
|
+
* 适用于需要上传文件的表单场景。
|
|
60
|
+
*/
|
|
46
61
|
class FileInputFCC extends BaseControl {
|
|
47
62
|
static __version = 2;
|
|
48
63
|
templateRef = viewChild.required('templateRef');
|
|
64
|
+
/** 颜色主题 */
|
|
49
65
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
66
|
+
/** 尺寸大小 */
|
|
50
67
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
68
|
+
/** 是否支持多文件选择 */
|
|
51
69
|
multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
|
|
70
|
+
/** 是否使用幽灵样式 */
|
|
52
71
|
ghost = input(...(ngDevMode ? [undefined, { debugName: "ghost" }] : []));
|
|
53
72
|
fileChange = output();
|
|
54
73
|
fileChanged(input) {
|
|
@@ -97,12 +116,22 @@ function toDateStr(date) {
|
|
|
97
116
|
return `${date.getFullYear()}-${month}-${day}`;
|
|
98
117
|
}
|
|
99
118
|
|
|
119
|
+
/**
|
|
120
|
+
* 文本输入控件
|
|
121
|
+
*
|
|
122
|
+
* 提供多种类型的文本输入功能，支持文本、密码、数字、日期等常见输入场景。
|
|
123
|
+
* 适合作为表单中的基础输入组件使用。
|
|
124
|
+
*/
|
|
100
125
|
class InputFCC extends BaseControl {
|
|
101
126
|
static __version = 2;
|
|
127
|
+
/** 输入框类型 */
|
|
102
128
|
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
129
|
+
/** 是否使用幽灵样式 */
|
|
103
130
|
ghost = input(...(ngDevMode ? [undefined, { debugName: "ghost" }] : []));
|
|
104
131
|
templateRef = viewChild.required('templateRef');
|
|
132
|
+
/** 颜色主题 */
|
|
105
133
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
134
|
+
/** 尺寸大小 */
|
|
106
135
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
107
136
|
#theme = inject(ThemeService);
|
|
108
137
|
wrapperClass$$ = computed(() => {
|
|
@@ -150,17 +179,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
150
179
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n [class]=\"attr()?.class | mergeClass: ('input' | cssPrefix) : wrapperClass$$()\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [type]=\"type()\"\n [ngModel]=\"inputFormat | pure: value$() : type()\"\n #el\n (ngModelChange)=\"valueChange2($event, el)\"\n [disabled]=\"disabled$()\"\n (blur)=\"touchedChange()\"\n />\n</ng-template>\n" }]
|
|
151
180
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
152
181
|
|
|
182
|
+
/**
|
|
183
|
+
* 单选框控件
|
|
184
|
+
*
|
|
185
|
+
* 提供一组选项中的单选功能，支持通过配置项数组动态生成选项列表。
|
|
186
|
+
* 适用于需要在多个互斥选项中选择一个的场景。
|
|
187
|
+
*/
|
|
153
188
|
class RadioFCC extends BaseControl {
|
|
154
189
|
static __version = 2;
|
|
155
190
|
static index = 0;
|
|
156
191
|
templateRef = viewChild.required('templateRef');
|
|
192
|
+
/** 颜色主题 */
|
|
157
193
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
194
|
+
/** 尺寸大小 */
|
|
158
195
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
159
196
|
name = `radio-${RadioFCC.index++}`;
|
|
197
|
+
/** 选项列表 */
|
|
160
198
|
options = input([], ...(ngDevMode ? [{ debugName: "options", transform: (input) => input ?? [] }] : [{
|
|
161
199
|
transform: (input) => input ?? [],
|
|
162
200
|
}]));
|
|
201
|
+
/** 选项模板 */
|
|
163
202
|
optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
|
|
203
|
+
/** 选项转换器 */
|
|
164
204
|
optionConvert = input(DefaultOptionConvert, ...(ngDevMode ? [{ debugName: "optionConvert", transform: (input) => ({ ...DefaultOptionConvert, ...input }) }] : [{
|
|
165
205
|
transform: (input) => ({ ...DefaultOptionConvert, ...input }),
|
|
166
206
|
}]));
|
|
@@ -202,13 +242,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
202
242
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n @for (item of resolvedOptions$$(); track $index) {\n <span>\n @let id = name + '-' + $index;\n <input\n type=\"radio\"\n [name]=\"name\"\n [disabled]=\"item.disabled || disabled$()\"\n [checked]=\"item.value === value$()\"\n (change)=\"valueAndTouchedChange(item.value)\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"attr()?.class | mergeClass: ('radio' | cssPrefix) : wrapperClass$()\"\n [id]=\"id\"\n />\n @if (optionTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplate(); context: { $implicit: item, id: id }\"\n ></ng-container>\n } @else if (item.label) {\n <label\n [for]=\"id\"\n [class]=\"!!item.description ? ('tooltip' | cssPrefix) : undefined\"\n [attr.data-tip]=\"item.description!\"\n >{{ item.label }}\n </label>\n }\n </span>\n }\n</ng-template>\n" }]
|
|
203
243
|
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], optionConvert: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionConvert", required: false }] }] } });
|
|
204
244
|
|
|
245
|
+
/**
|
|
246
|
+
* 范围选择控件
|
|
247
|
+
*
|
|
248
|
+
* 提供滑动条形式的数值输入，支持设置最小值、最大值和步长。
|
|
249
|
+
* 适用于需要选择数值范围或评分等场景。
|
|
250
|
+
*/
|
|
205
251
|
class RangeFCC extends BaseControl {
|
|
206
252
|
static __version = 2;
|
|
207
253
|
templateRef = viewChild.required('templateRef');
|
|
254
|
+
/** 颜色主题 */
|
|
208
255
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
256
|
+
/** 尺寸大小 */
|
|
209
257
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
258
|
+
/** 最小值 */
|
|
210
259
|
min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
|
|
260
|
+
/** 最大值 */
|
|
211
261
|
max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
|
|
262
|
+
/** 步长 */
|
|
212
263
|
step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : []));
|
|
213
264
|
#theme = inject(ThemeService);
|
|
214
265
|
wrapperClass$ = computed(() => {
|
|
@@ -234,18 +285,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
234
285
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n type=\"range\"\n [min]=\"min()\"\n [max]=\"max()\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"attr()?.class | mergeClass: ('range' | cssPrefix) : wrapperClass$()\"\n [step]=\"step()\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueAndTouchedChange($event)\"\n />\n</ng-template>\n" }]
|
|
235
286
|
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
|
|
236
287
|
|
|
288
|
+
/**
|
|
289
|
+
* 评分控件
|
|
290
|
+
*
|
|
291
|
+
* 提供星级或爱心形式的评分选择功能，支持半星选择。
|
|
292
|
+
* 适用于评价、评级、评分等场景。
|
|
293
|
+
*/
|
|
237
294
|
class RatingFCC extends BaseControl {
|
|
238
295
|
static index = 0;
|
|
239
296
|
name = `rating-${RatingFCC.index++}`;
|
|
240
297
|
static __version = 2;
|
|
241
298
|
templateRef = viewChild.required('templateRef');
|
|
242
|
-
|
|
299
|
+
/** 尺寸大小 */
|
|
300
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
301
|
+
/** 最小值 */
|
|
243
302
|
min = input(1, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
303
|
+
/** 最大值 */
|
|
244
304
|
max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
305
|
+
/** 是否支持半星选择 */
|
|
245
306
|
half = input(...(ngDevMode ? [undefined, { debugName: "half" }] : []));
|
|
307
|
+
/** 类型，支持星形或爱心形状 */
|
|
246
308
|
type = input('star', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
247
309
|
list = computed(() => {
|
|
248
|
-
return range(
|
|
310
|
+
return range(0, this.max());
|
|
249
311
|
}, ...(ngDevMode ? [{ debugName: "list" }] : []));
|
|
250
312
|
itemClass$$ = computed(() => {
|
|
251
313
|
return this.#theme.addPrefix2('mask', this.type());
|
|
@@ -261,7 +323,7 @@ class RatingFCC extends BaseControl {
|
|
|
261
323
|
useExisting: forwardRef(() => RatingFCC),
|
|
262
324
|
multi: true,
|
|
263
325
|
},
|
|
264
|
-
], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n <div\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"\n attr()?.class\n | mergeClass\n : ('rating' | cssPrefix)\n : wrapperClass$()\n : (half() ? ('rating-half' | cssPrefix) : undefined)\n \"\n >\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{
|
|
326
|
+
], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n <div\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"\n attr()?.class\n | mergeClass\n : ('rating' | cssPrefix)\n : wrapperClass$()\n : (half() ? ('rating-half' | cssPrefix) : undefined)\n \"\n >\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ 0 }} rating\"\n [checked]=\"value$() === 0\"\n (change)=\"valueAndTouchedChange(0)\"\n [class]=\"'rating-hidden' | cssPrefix\"\n [disabled]=\"min() > 0\"\n />\n @for (item of list(); track $index) {\n @let value2 = item + 1;\n @if (half()) {\n @let halfValue = item + 0.5;\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ halfValue }} rating\"\n [checked]=\"value$() === halfValue\"\n (change)=\"valueAndTouchedChange(halfValue)\"\n [class]=\"itemClass$$() | mergeClass: 'mask mask-half-1' | cssPrefix\"\n [disabled]=\"min() > halfValue\"\n />\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ value2 }} rating\"\n [checked]=\"value$() === value2\"\n (change)=\"valueAndTouchedChange(value2)\"\n [class]=\"itemClass$$() | mergeClass: 'mask mask-half-2' | cssPrefix\"\n [disabled]=\"min() > value2\"\n />\n } @else {\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ item + 1 }} rating\"\n [checked]=\"value$() === item + 1\"\n (change)=\"valueAndTouchedChange(item + 1)\"\n [class]=\"itemClass$$() | mergeClass: 'mask mask-star' | cssPrefix\"\n [disabled]=\"min() > value2\"\n />\n }\n }\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
|
|
265
327
|
}
|
|
266
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RatingFCC, decorators: [{
|
|
267
329
|
type: Component,
|
|
@@ -271,26 +333,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
271
333
|
useExisting: forwardRef(() => RatingFCC),
|
|
272
334
|
multi: true,
|
|
273
335
|
},
|
|
274
|
-
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <div\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"\n attr()?.class\n | mergeClass\n : ('rating' | cssPrefix)\n : wrapperClass$()\n : (half() ? ('rating-half' | cssPrefix) : undefined)\n \"\n >\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{
|
|
336
|
+
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <div\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"\n attr()?.class\n | mergeClass\n : ('rating' | cssPrefix)\n : wrapperClass$()\n : (half() ? ('rating-half' | cssPrefix) : undefined)\n \"\n >\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ 0 }} rating\"\n [checked]=\"value$() === 0\"\n (change)=\"valueAndTouchedChange(0)\"\n [class]=\"'rating-hidden' | cssPrefix\"\n [disabled]=\"min() > 0\"\n />\n @for (item of list(); track $index) {\n @let value2 = item + 1;\n @if (half()) {\n @let halfValue = item + 0.5;\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ halfValue }} rating\"\n [checked]=\"value$() === halfValue\"\n (change)=\"valueAndTouchedChange(halfValue)\"\n [class]=\"itemClass$$() | mergeClass: 'mask mask-half-1' | cssPrefix\"\n [disabled]=\"min() > halfValue\"\n />\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ value2 }} rating\"\n [checked]=\"value$() === value2\"\n (change)=\"valueAndTouchedChange(value2)\"\n [class]=\"itemClass$$() | mergeClass: 'mask mask-half-2' | cssPrefix\"\n [disabled]=\"min() > value2\"\n />\n } @else {\n <input\n type=\"radio\"\n [name]=\"name\"\n aria-label=\"{{ item + 1 }} rating\"\n [checked]=\"value$() === item + 1\"\n (change)=\"valueAndTouchedChange(item + 1)\"\n [class]=\"itemClass$$() | mergeClass: 'mask mask-star' | cssPrefix\"\n [disabled]=\"min() > value2\"\n />\n }\n }\n </div>\n</ng-template>\n" }]
|
|
275
337
|
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
276
338
|
|
|
339
|
+
/**
|
|
340
|
+
* 选择器控件
|
|
341
|
+
*
|
|
342
|
+
* 提供下拉选择功能，支持单选、多选以及原生 select 样式。
|
|
343
|
+
* 适用于需要在多个选项中选择一个或多个的场景。
|
|
344
|
+
*/
|
|
277
345
|
class SelectFCC extends BaseControl {
|
|
278
346
|
static __version = 2;
|
|
279
347
|
templateRef = viewChild.required('templateRef');
|
|
348
|
+
/** 颜色主题 */
|
|
280
349
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
350
|
+
/** 尺寸大小 */
|
|
281
351
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
352
|
+
/** 是否多选 */
|
|
282
353
|
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
354
|
+
/** 是否使用幽灵样式 */
|
|
283
355
|
ghost = input(...(ngDevMode ? [undefined, { debugName: "ghost" }] : []));
|
|
356
|
+
/** 是否使用原生 select 样式 */
|
|
284
357
|
native = input(...(ngDevMode ? [undefined, { debugName: "native" }] : []));
|
|
285
|
-
/**
|
|
286
|
-
/** @title 列表
|
|
287
|
-
@default [] */
|
|
358
|
+
/** 选项列表 */
|
|
288
359
|
options = input([], ...(ngDevMode ? [{ debugName: "options", transform: (input) => input ?? [] }] : [{
|
|
289
360
|
transform: (input) => input ?? [],
|
|
290
361
|
}]));
|
|
362
|
+
/** 选项转换器 */
|
|
291
363
|
optionConvert = input(DefaultOptionConvert, ...(ngDevMode ? [{ debugName: "optionConvert", transform: (input) => ({ ...DefaultOptionConvert, ...input }) }] : [{
|
|
292
364
|
transform: (input) => ({ ...DefaultOptionConvert, ...input }),
|
|
293
365
|
}]));
|
|
366
|
+
/** 空选项时显示的内容 */
|
|
294
367
|
emptyOptionContent = input('------', ...(ngDevMode ? [{ debugName: "emptyOptionContent" }] : []));
|
|
295
368
|
resolvedOptions$$ = computed(() => transformOptions(this.options(), this.optionConvert()), ...(ngDevMode ? [{ debugName: "resolvedOptions$$" }] : []));
|
|
296
369
|
#theme = inject(ThemeService);
|
|
@@ -317,11 +390,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
317
390
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n @let multi = multiple();\n @if (multi) {\n <select\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"attr()?.class | mergeClass: ('select' | cssPrefix) : wrapperClass$$()\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueAndTouchedChange($event)\"\n [disabled]=\"disabled$()\"\n multiple\n >\n <ng-template #optionTemp let-config=\"config\">\n @if (config.type === 'group') {\n <optgroup [label]=\"config.label\">\n @for (item of config.children; track $index) {\n <ng-container\n *ngTemplateOutlet=\"optionTemp; context: { config: item }\"\n ></ng-container>\n }\n </optgroup>\n } @else {\n <option\n [disabled]=\"config.disabled\"\n [ngValue]=\"config.value\"\n [attr.data-tip]=\"config.description!\"\n [class]=\"!!config.description ? ('tooltip' | cssPrefix) : undefined\"\n >\n {{ config.label }}\n </option>\n }\n </ng-template>\n <option disabled selected>{{ emptyOptionContent() }}</option>\n\n @for (item of resolvedOptions$$(); track $index) {\n <ng-container *ngTemplateOutlet=\"optionTemp; context: { config: item }\"></ng-container>\n }\n </select>\n } @else {\n <select\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [class]=\"attr()?.class | mergeClass: ('select' | cssPrefix) : wrapperClass$$()\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueAndTouchedChange($event)\"\n [disabled]=\"disabled$()\"\n >\n <ng-template #optionTemp let-config=\"config\">\n @if (config.type === 'group') {\n <optgroup [label]=\"config.label\">\n @for (item of config.children; track $index) {\n <ng-container\n *ngTemplateOutlet=\"optionTemp; context: { config: item }\"\n ></ng-container>\n }\n </optgroup>\n } @else {\n <option\n [disabled]=\"config.disabled\"\n [ngValue]=\"config.value\"\n [attr.data-tip]=\"config.description!\"\n [class]=\"!!config.description ? ('tooltip' | cssPrefix) : undefined\"\n >\n {{ config.label }}\n </option>\n }\n </ng-template>\n <option disabled selected>{{ emptyOptionContent() }}</option>\n\n @for (item of resolvedOptions$$(); track $index) {\n <ng-container *ngTemplateOutlet=\"optionTemp; context: { config: item }\"></ng-container>\n }\n </select>\n }\n</ng-template>\n" }]
|
|
318
391
|
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], native: [{ type: i0.Input, args: [{ isSignal: true, alias: "native", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionConvert: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionConvert", required: false }] }], emptyOptionContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionContent", required: false }] }] } });
|
|
319
392
|
|
|
393
|
+
/**
|
|
394
|
+
* 多行文本输入控件
|
|
395
|
+
*
|
|
396
|
+
* 提供多行文本的输入功能，支持大段文本的编辑场景。
|
|
397
|
+
* 适用于评论、描述、备注等需要大量文本输入的表单字段。
|
|
398
|
+
*/
|
|
320
399
|
class TextareaFCC extends BaseControl {
|
|
321
400
|
static __version = 2;
|
|
401
|
+
/** 是否使用幽灵样式 */
|
|
322
402
|
ghost = input(...(ngDevMode ? [undefined, { debugName: "ghost" }] : []));
|
|
323
403
|
templateRef = viewChild.required('templateRef');
|
|
404
|
+
/** 颜色主题 */
|
|
324
405
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
406
|
+
/** 尺寸大小 */
|
|
325
407
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
326
408
|
#theme = inject(ThemeService);
|
|
327
409
|
wrapperClass$$ = computed(() => {
|
|
@@ -347,11 +429,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
347
429
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <textarea\n [class]=\"attr()?.class | mergeClass: ('textarea' | cssPrefix) : wrapperClass$$()\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueChange($event)\"\n [disabled]=\"disabled$()\"\n (blur)=\"touchedChange()\"\n ></textarea>\n</ng-template>\n" }]
|
|
348
430
|
}], propDecorators: { ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
349
431
|
|
|
432
|
+
/**
|
|
433
|
+
* 开关控件
|
|
434
|
+
*
|
|
435
|
+
* 提供开/关状态切换功能，支持确定和不确定两种状态。
|
|
436
|
+
* 适用于功能开关、选项启用/禁用等场景。
|
|
437
|
+
*/
|
|
350
438
|
class ToggleFCC extends BaseControl {
|
|
351
439
|
static __version = 2;
|
|
352
440
|
templateRef = viewChild.required('templateRef');
|
|
441
|
+
/** 颜色主题 */
|
|
353
442
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
443
|
+
/** 尺寸大小 */
|
|
354
444
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
445
|
+
/** 是否为不确定状态 */
|
|
355
446
|
indeterminate = input(...(ngDevMode ? [undefined, { debugName: "indeterminate" }] : []));
|
|
356
447
|
#theme = inject(ThemeService);
|
|
357
448
|
wrapperClass$ = computed(() => {
|
|
@@ -377,15 +468,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
377
468
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <input\n type=\"checkbox\"\n [class]=\"attr()?.class | mergeClass: ('toggle' | cssPrefix) : wrapperClass$()\"\n [attributes]=\"attr()\"\n [excludes]=\"['class']\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueAndTouchedChange($event)\"\n [disabled]=\"disabled$()\"\n [indeterminate]=\"indeterminate()\"\n />\n</ng-template>\n" }]
|
|
378
469
|
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
|
|
379
470
|
|
|
471
|
+
/**
|
|
472
|
+
* 交换控件（状态切换控件）
|
|
473
|
+
*
|
|
474
|
+
* 提供两种或三种状态之间的切换功能，支持旋转、翻转等动画效果。
|
|
475
|
+
* 可自定义不同状态下的显示内容，适用于需要状态切换的场景。
|
|
476
|
+
*/
|
|
380
477
|
class SwapFCC extends BaseControl {
|
|
381
478
|
static __version = 2;
|
|
382
479
|
StrOrTemplateComponent = StrOrTemplateComponent;
|
|
383
480
|
templateRef = viewChild.required('templateRef');
|
|
481
|
+
/** 开启状态时显示的内容 */
|
|
384
482
|
onContent = input('✔️', ...(ngDevMode ? [{ debugName: "onContent" }] : []));
|
|
483
|
+
/** 关闭状态时显示的内容 */
|
|
385
484
|
offContent = input('❌', ...(ngDevMode ? [{ debugName: "offContent" }] : []));
|
|
485
|
+
/** 不确定状态时显示的内容 */
|
|
386
486
|
indeterminateContent = input(...(ngDevMode ? [undefined, { debugName: "indeterminateContent" }] : []));
|
|
487
|
+
/** 是否为不确定状态 */
|
|
387
488
|
indeterminate = input(...(ngDevMode ? [undefined, { debugName: "indeterminate" }] : []));
|
|
489
|
+
/** 是否启用旋转动画 */
|
|
388
490
|
rotate = input(...(ngDevMode ? [undefined, { debugName: "rotate" }] : []));
|
|
491
|
+
/** 是否启用翻转动画 */
|
|
389
492
|
flip = input(...(ngDevMode ? [undefined, { debugName: "flip" }] : []));
|
|
390
493
|
#theme = inject(ThemeService);
|
|
391
494
|
wrapperClass$ = computed(() => {
|
|
@@ -414,6 +517,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
414
517
|
const DateKey = ['min', 'max', 'today', 'focusedDate'];
|
|
415
518
|
const RangeDateKey = [...DateKey, 'tentative'];
|
|
416
519
|
|
|
520
|
+
/**
|
|
521
|
+
* 日期选择控件
|
|
522
|
+
*
|
|
523
|
+
* 提供日期、多选日期、范围选择三种模式的日期选择功能。
|
|
524
|
+
* 支持自定义日期属性配置，适用于需要进行日期选择的表单场景。
|
|
525
|
+
*/
|
|
417
526
|
function DateEqual(a, b) {
|
|
418
527
|
return a.getTime() === b.getTime();
|
|
419
528
|
}
|
|
@@ -423,8 +532,11 @@ function DateAsc(a, b) {
|
|
|
423
532
|
class CalendarFCC extends BaseControl {
|
|
424
533
|
static __version = 2;
|
|
425
534
|
templateRef = viewChild.required('templateRef');
|
|
535
|
+
/** 日期选择模式，支持单选、多选、范围选择 */
|
|
426
536
|
type = input('date', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
537
|
+
/** 日期属性配置 */
|
|
427
538
|
dateProps = input(...(ngDevMode ? [undefined, { debugName: "dateProps" }] : []));
|
|
539
|
+
/** 显示的月份数量 */
|
|
428
540
|
monthProps = input(1, ...(ngDevMode ? [{ debugName: "monthProps" }] : []));
|
|
429
541
|
monthProps$$ = computed(() => {
|
|
430
542
|
const value = this.monthProps();
|
|
@@ -522,9 +634,9 @@ class CalendarFCC extends BaseControl {
|
|
|
522
634
|
useExisting: forwardRef(() => CalendarFCC),
|
|
523
635
|
multi: true,
|
|
524
636
|
},
|
|
525
|
-
], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n @defer (when callyInited$$()) {\n @let ClassStr = 'cally' | cssPrefix | mergeClass: attr()?.class;\n @switch (type()) {\n @case ('date') {\n <calendar-date\n [class]=\"ClassStr\"\n (focusday)=\"focusdayChanged($any($event))\"\n [calendarProps]=\"dateProps$$()\"\n >\n <
|
|
637
|
+
], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n @defer (when callyInited$$()) {\n @let ClassStr = 'cally' | cssPrefix | mergeClass: attr()?.class;\n @switch (type()) {\n @case ('date') {\n <calendar-date\n [class]=\"ClassStr\"\n (focusday)=\"focusdayChanged($any($event))\"\n [calendarProps]=\"dateProps$$()\"\n >\n <span class=\"material-icons text-base! leading-none!\" slot=\"previous\"> arrow_back </span>\n <span class=\"material-icons text-base! leading-none!\" slot=\"next\"> arrow_forward </span>\n\n <calendar-month></calendar-month>\n </calendar-date>\n }\n @case ('multi') {\n <calendar-multi\n [class]=\"ClassStr\"\n [calendarProps]=\"dateProps$$()\"\n (focusday)=\"focusdayChanged($any($event))\"\n >\n <span class=\"material-icons text-base! leading-none!\" slot=\"previous\"> arrow_back </span>\n <span class=\"material-icons text-base! leading-none!\" slot=\"next\"> arrow_forward </span>\n\n <calendar-month></calendar-month>\n </calendar-multi>\n }\n @case ('range') {\n <calendar-range\n [class]=\"ClassStr\"\n [calendarProps]=\"dateProps$$()\"\n (focusday)=\"focusdayChanged($any($event))\"\n (rangestart)=\"rangestartChanged($any($event))\"\n (rangeend)=\"rangeendChanged($any($event))\"\n >\n <span class=\"material-icons text-base! leading-none!\" slot=\"previous\"> arrow_back </span>\n <span class=\"material-icons text-base! leading-none!\" slot=\"next\"> arrow_forward </span>\n\n @for (item of monthProps$$(); track $index) {\n <calendar-month [attr.offset]=\"item\"></calendar-month>\n }\n </calendar-range>\n }\n }\n } @loading {\n <span class=\"loading loading-spinner loading-xs\"></span>\n }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }], deferBlockDependencies: [() => [import('./piying-lib-angular-daisyui-field-control-props.directive-I-MQ3iQV.mjs').then(m => m.CalendarPropsDirective), import('@piying-lib/angular-daisyui/pipe').then(m => m.CssPrefixPipe), import('@piying-lib/angular-daisyui/pipe').then(m => m.MergeClassPipe)]] });
|
|
526
638
|
}
|
|
527
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.14", ngImport: i0, type: CalendarFCC, resolveDeferredDeps: () => [import('./piying-lib-angular-daisyui-field-control-props.directive-
|
|
639
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.14", ngImport: i0, type: CalendarFCC, resolveDeferredDeps: () => [import('./piying-lib-angular-daisyui-field-control-props.directive-I-MQ3iQV.mjs').then(m => m.CalendarPropsDirective), import('@piying-lib/angular-daisyui/pipe').then(m => m.CssPrefixPipe), import('@piying-lib/angular-daisyui/pipe').then(m => m.MergeClassPipe)], resolveMetadata: (CalendarPropsDirective, CssPrefixPipe, MergeClassPipe) => ({ decorators: [{
|
|
528
640
|
type: Component,
|
|
529
641
|
args: [{ selector: 'app-calendar', imports: [FormsModule, CssPrefixPipe, MergeClassPipe, CalendarPropsDirective], providers: [
|
|
530
642
|
{
|
|
@@ -532,9 +644,15 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.14", n
|
|
|
532
644
|
useExisting: forwardRef(() => CalendarFCC),
|
|
533
645
|
multi: true,
|
|
534
646
|
},
|
|
535
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-template #templateRef let-attr=\"attributes\">\n @defer (when callyInited$$()) {\n @let ClassStr = 'cally' | cssPrefix | mergeClass: attr()?.class;\n @switch (type()) {\n @case ('date') {\n <calendar-date\n [class]=\"ClassStr\"\n (focusday)=\"focusdayChanged($any($event))\"\n [calendarProps]=\"dateProps$$()\"\n >\n <
|
|
647
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-template #templateRef let-attr=\"attributes\">\n @defer (when callyInited$$()) {\n @let ClassStr = 'cally' | cssPrefix | mergeClass: attr()?.class;\n @switch (type()) {\n @case ('date') {\n <calendar-date\n [class]=\"ClassStr\"\n (focusday)=\"focusdayChanged($any($event))\"\n [calendarProps]=\"dateProps$$()\"\n >\n <span class=\"material-icons text-base! leading-none!\" slot=\"previous\"> arrow_back </span>\n <span class=\"material-icons text-base! leading-none!\" slot=\"next\"> arrow_forward </span>\n\n <calendar-month></calendar-month>\n </calendar-date>\n }\n @case ('multi') {\n <calendar-multi\n [class]=\"ClassStr\"\n [calendarProps]=\"dateProps$$()\"\n (focusday)=\"focusdayChanged($any($event))\"\n >\n <span class=\"material-icons text-base! leading-none!\" slot=\"previous\"> arrow_back </span>\n <span class=\"material-icons text-base! leading-none!\" slot=\"next\"> arrow_forward </span>\n\n <calendar-month></calendar-month>\n </calendar-multi>\n }\n @case ('range') {\n <calendar-range\n [class]=\"ClassStr\"\n [calendarProps]=\"dateProps$$()\"\n (focusday)=\"focusdayChanged($any($event))\"\n (rangestart)=\"rangestartChanged($any($event))\"\n (rangeend)=\"rangeendChanged($any($event))\"\n >\n <span class=\"material-icons text-base! leading-none!\" slot=\"previous\"> arrow_back </span>\n <span class=\"material-icons text-base! leading-none!\" slot=\"next\"> arrow_forward </span>\n\n @for (item of monthProps$$(); track $index) {\n <calendar-month [attr.offset]=\"item\"></calendar-month>\n }\n </calendar-range>\n }\n }\n } @loading {\n <span class=\"loading loading-spinner loading-xs\"></span>\n }\n</ng-template>\n" }]
|
|
536
648
|
}], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dateProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateProps", required: false }] }], monthProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthProps", required: false }] }] } }) });
|
|
537
649
|
|
|
650
|
+
/**
|
|
651
|
+
* 密码输入控件
|
|
652
|
+
*
|
|
653
|
+
* 提供带有密码可见性切换功能的输入框。
|
|
654
|
+
* 适用于需要输入密码等敏感信息的场景。
|
|
655
|
+
*/
|
|
538
656
|
class PasswordInputFCC extends BaseControl {
|
|
539
657
|
static __version = 2;
|
|
540
658
|
templateRef = viewChild.required('templateRef');
|
|
@@ -566,19 +684,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
566
684
|
], template: "<ng-template #templateRef let-attr=\"attributes\">\n <label [class]=\"'input' | mergeClass: attr().class\">\n <input\n [type]=\"type$$()\"\n [placeholder]=\"attr()?.placeholder ?? ''\"\n [ngModel]=\"value$()\"\n (ngModelChange)=\"valueChange($event)\"\n (blur)=\"touchedChange()\"\n class=\"w-full\"\n />\n <button class=\"btn btn-circle btn-ghost btn-sm\" type=\"button\" (click)=\"toggleSee()\">\n @if (see$()) {\n <span class=\"material-icons\">remove_red_eye</span>\n <span class=\"absolute material-icons\">not_interested</span>\n } @else {\n <span class=\"material-icons\">remove_red_eye</span>\n }\n </button>\n </label>\n</ng-template>\n" }]
|
|
567
685
|
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
|
|
568
686
|
|
|
687
|
+
/**
|
|
688
|
+
* 可编辑标签控件
|
|
689
|
+
*
|
|
690
|
+
* 提供可直接点击编辑的标签显示功能，支持在显示和编辑状态之间切换。
|
|
691
|
+
* 适用于需要Inline编辑的场景，如自定义标签、备注等。
|
|
692
|
+
*/
|
|
569
693
|
class EditableBadgeFCC extends BaseControl {
|
|
570
694
|
static __version = 2;
|
|
571
695
|
templateRef = viewChild.required('templateRef');
|
|
572
696
|
isEdit$ = signal(false, ...(ngDevMode ? [{ debugName: "isEdit$" }] : []));
|
|
573
697
|
editContent$ = linkedSignal(this.value$, ...(ngDevMode ? [{ debugName: "editContent$" }] : []));
|
|
698
|
+
/** 尺寸大小 */
|
|
574
699
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
700
|
+
/** 颜色主题 */
|
|
575
701
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
576
702
|
#theme = inject(ThemeService);
|
|
577
703
|
wrapperClass$ = computed(() => {
|
|
578
704
|
return this.#theme.setClass(this.#theme.addPrefix('badge'), this.#theme.setColor('badge', this.color()), this.#theme.setSize('badge', this.size()));
|
|
579
705
|
}, ...(ngDevMode ? [{ debugName: "wrapperClass$" }] : []));
|
|
580
706
|
size$$ = computed(() => {
|
|
581
|
-
|
|
707
|
+
const size = this.size();
|
|
582
708
|
return {
|
|
583
709
|
input: this.#theme.setSize('input', size),
|
|
584
710
|
btn: this.#theme.setSize('btn', size === 'xl' ? 'sm' : 'xs'),
|