@shwfed/nuxt 0.9.0 → 0.9.2
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/dist/module.json +1 -1
- package/dist/runtime/components/fields.d.vue.ts +4 -2
- package/dist/runtime/components/fields.vue +0 -1
- package/dist/runtime/components/fields.vue.d.ts +4 -2
- package/dist/runtime/components/ui/fields/Fields.d.vue.ts +10 -6
- package/dist/runtime/components/ui/fields/Fields.vue +35 -13
- package/dist/runtime/components/ui/fields/Fields.vue.d.ts +10 -6
- package/dist/runtime/components/ui/fields/schema.d.ts +4 -2
- package/dist/runtime/components/ui/fields/schema.js +5 -1
- package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.d.vue.ts +4 -2
- package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.vue +63 -5
- package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.vue.d.ts +4 -2
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -11,7 +11,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
11
11
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
12
|
"update:modelValue": (value: Record<string, unknown>) => any;
|
|
13
13
|
"update:config": (args_0: Readonly<{
|
|
14
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
15
14
|
fields: readonly ({
|
|
16
15
|
type: "string";
|
|
17
16
|
path: string;
|
|
@@ -86,6 +85,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
86
85
|
message: string;
|
|
87
86
|
}>[] | undefined;
|
|
88
87
|
})[];
|
|
88
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
89
|
+
style?: string | undefined;
|
|
89
90
|
}>) => any;
|
|
90
91
|
}, string, import("vue").PublicProps, Readonly<{
|
|
91
92
|
config?: Effect.Effect<FieldsConfig | undefined>;
|
|
@@ -94,7 +95,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
94
95
|
}> & Readonly<{
|
|
95
96
|
"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
|
|
96
97
|
"onUpdate:config"?: ((args_0: Readonly<{
|
|
97
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
98
98
|
fields: readonly ({
|
|
99
99
|
type: "string";
|
|
100
100
|
path: string;
|
|
@@ -169,6 +169,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
169
169
|
message: string;
|
|
170
170
|
}>[] | undefined;
|
|
171
171
|
})[];
|
|
172
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
173
|
+
style?: string | undefined;
|
|
172
174
|
}>) => any) | undefined;
|
|
173
175
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
174
176
|
[x: string]: ((props: any) => any) | undefined;
|
|
@@ -12,7 +12,6 @@ const modelValue = defineModel("modelValue", { type: Object, ...{
|
|
|
12
12
|
default: () => ({})
|
|
13
13
|
} });
|
|
14
14
|
const defaultConfig = {
|
|
15
|
-
orientation: "horizontal",
|
|
16
15
|
fields: []
|
|
17
16
|
};
|
|
18
17
|
const config = props.config ? props.config.pipe(Effect.map((config2) => config2 ?? defaultConfig)) : Effect.succeed(defaultConfig);
|
|
@@ -11,7 +11,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
11
11
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
12
|
"update:modelValue": (value: Record<string, unknown>) => any;
|
|
13
13
|
"update:config": (args_0: Readonly<{
|
|
14
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
15
14
|
fields: readonly ({
|
|
16
15
|
type: "string";
|
|
17
16
|
path: string;
|
|
@@ -86,6 +85,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
86
85
|
message: string;
|
|
87
86
|
}>[] | undefined;
|
|
88
87
|
})[];
|
|
88
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
89
|
+
style?: string | undefined;
|
|
89
90
|
}>) => any;
|
|
90
91
|
}, string, import("vue").PublicProps, Readonly<{
|
|
91
92
|
config?: Effect.Effect<FieldsConfig | undefined>;
|
|
@@ -94,7 +95,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
94
95
|
}> & Readonly<{
|
|
95
96
|
"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
|
|
96
97
|
"onUpdate:config"?: ((args_0: Readonly<{
|
|
97
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
98
98
|
fields: readonly ({
|
|
99
99
|
type: "string";
|
|
100
100
|
path: string;
|
|
@@ -169,6 +169,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
169
169
|
message: string;
|
|
170
170
|
}>[] | undefined;
|
|
171
171
|
})[];
|
|
172
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
173
|
+
style?: string | undefined;
|
|
172
174
|
}>) => any) | undefined;
|
|
173
175
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
174
176
|
[x: string]: ((props: any) => any) | undefined;
|
|
@@ -5,7 +5,6 @@ declare const _default: typeof __VLS_export;
|
|
|
5
5
|
export default _default;
|
|
6
6
|
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
7
7
|
config: Effect.Effect<Readonly<{
|
|
8
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
9
8
|
fields: readonly ({
|
|
10
9
|
type: "string";
|
|
11
10
|
path: string;
|
|
@@ -80,13 +79,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
80
79
|
message: string;
|
|
81
80
|
}>[] | undefined;
|
|
82
81
|
})[];
|
|
83
|
-
|
|
82
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
83
|
+
style?: string | undefined;
|
|
84
|
+
}> | undefined>;
|
|
84
85
|
} & {
|
|
85
86
|
modelValue?: Record<string, unknown>;
|
|
86
87
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
87
88
|
"update:modelValue": (value: Record<string, unknown>) => any;
|
|
88
89
|
"update:config": (args_0: Readonly<{
|
|
89
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
90
90
|
fields: readonly ({
|
|
91
91
|
type: "string";
|
|
92
92
|
path: string;
|
|
@@ -161,10 +161,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
161
161
|
message: string;
|
|
162
162
|
}>[] | undefined;
|
|
163
163
|
})[];
|
|
164
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
165
|
+
style?: string | undefined;
|
|
164
166
|
}>) => any;
|
|
165
167
|
}, string, import("vue").PublicProps, Readonly<{
|
|
166
168
|
config: Effect.Effect<Readonly<{
|
|
167
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
168
169
|
fields: readonly ({
|
|
169
170
|
type: "string";
|
|
170
171
|
path: string;
|
|
@@ -239,13 +240,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
239
240
|
message: string;
|
|
240
241
|
}>[] | undefined;
|
|
241
242
|
})[];
|
|
242
|
-
|
|
243
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
244
|
+
style?: string | undefined;
|
|
245
|
+
}> | undefined>;
|
|
243
246
|
} & {
|
|
244
247
|
modelValue?: Record<string, unknown>;
|
|
245
248
|
}> & Readonly<{
|
|
246
249
|
"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
|
|
247
250
|
"onUpdate:config"?: ((args_0: Readonly<{
|
|
248
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
249
251
|
fields: readonly ({
|
|
250
252
|
type: "string";
|
|
251
253
|
path: string;
|
|
@@ -320,6 +322,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
320
322
|
message: string;
|
|
321
323
|
}>[] | undefined;
|
|
322
324
|
})[];
|
|
325
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
326
|
+
style?: string | undefined;
|
|
323
327
|
}>) => any) | undefined;
|
|
324
328
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
325
329
|
default?: (props: {}) => any;
|
|
@@ -23,14 +23,13 @@ import { getLocalizedText } from "../../../utils/coders";
|
|
|
23
23
|
import { FieldsConfigC } from "./schema";
|
|
24
24
|
const id = useId();
|
|
25
25
|
const defaultConfig = {
|
|
26
|
-
orientation: "horizontal",
|
|
27
26
|
fields: []
|
|
28
27
|
};
|
|
29
28
|
const props = defineProps({
|
|
30
29
|
config: { type: null, required: true }
|
|
31
30
|
});
|
|
32
31
|
const emit = defineEmits(["update:config"]);
|
|
33
|
-
const config = computedAsync(async () => FieldsConfigC.parse(await props.config.pipe(Effect.runPromise)));
|
|
32
|
+
const config = computedAsync(async () => FieldsConfigC.parse(await props.config.pipe(Effect.runPromise) ?? defaultConfig));
|
|
34
33
|
const { t, locale } = useI18n();
|
|
35
34
|
const { $dsl, $md } = useNuxtApp();
|
|
36
35
|
const modelValue = defineModel("modelValue", { type: Object, ...{
|
|
@@ -41,6 +40,34 @@ const isConfiguratorOpen = ref(false);
|
|
|
41
40
|
const displayConfig = ref(defaultConfig);
|
|
42
41
|
const validationErrors = ref({});
|
|
43
42
|
const calendarOpen = ref({});
|
|
43
|
+
function cloneConfig(config2) {
|
|
44
|
+
const nextConfig = {
|
|
45
|
+
fields: config2.fields.slice()
|
|
46
|
+
};
|
|
47
|
+
if (config2.orientation) {
|
|
48
|
+
nextConfig.orientation = config2.orientation;
|
|
49
|
+
}
|
|
50
|
+
if (config2.style) {
|
|
51
|
+
nextConfig.style = config2.style;
|
|
52
|
+
}
|
|
53
|
+
return nextConfig;
|
|
54
|
+
}
|
|
55
|
+
function getConfigOrientation(config2) {
|
|
56
|
+
return config2.orientation ?? "horizontal";
|
|
57
|
+
}
|
|
58
|
+
function getConfigStyle(config2) {
|
|
59
|
+
const style = {};
|
|
60
|
+
if (!config2.style) {
|
|
61
|
+
return style;
|
|
62
|
+
}
|
|
63
|
+
const styleMap = $dsl.evaluate`${config2.style}`({ form: modelValue.value });
|
|
64
|
+
for (const [key, value] of Object.entries(styleMap)) {
|
|
65
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
66
|
+
Reflect.set(style, key, value);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return style;
|
|
70
|
+
}
|
|
44
71
|
function toCalendarDateValue(value, valueFormat) {
|
|
45
72
|
if (typeof value !== "string") return void 0;
|
|
46
73
|
const date = parse(value, valueFormat, /* @__PURE__ */ new Date());
|
|
@@ -120,20 +147,14 @@ function handleCalendarBlur(field) {
|
|
|
120
147
|
}, 0);
|
|
121
148
|
}
|
|
122
149
|
function handleConfiguratorConfirm(nextConfig) {
|
|
123
|
-
displayConfig.value =
|
|
124
|
-
orientation: nextConfig.orientation,
|
|
125
|
-
fields: nextConfig.fields.slice()
|
|
126
|
-
};
|
|
150
|
+
displayConfig.value = cloneConfig(nextConfig);
|
|
127
151
|
emit("update:config", nextConfig);
|
|
128
152
|
}
|
|
129
153
|
watch(config, (value) => {
|
|
130
154
|
if (!value) {
|
|
131
155
|
return;
|
|
132
156
|
}
|
|
133
|
-
displayConfig.value =
|
|
134
|
-
orientation: value.orientation,
|
|
135
|
-
fields: value.fields.slice()
|
|
136
|
-
};
|
|
157
|
+
displayConfig.value = cloneConfig(value);
|
|
137
158
|
}, { immediate: true });
|
|
138
159
|
watchEffect(() => {
|
|
139
160
|
const activePaths = /* @__PURE__ */ new Set();
|
|
@@ -174,6 +195,7 @@ export {
|
|
|
174
195
|
'relative p-1 -m-1 border border-dashed',
|
|
175
196
|
isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
|
|
176
197
|
]"
|
|
198
|
+
:style="getConfigStyle(displayConfig)"
|
|
177
199
|
>
|
|
178
200
|
<Button
|
|
179
201
|
v-if="isCheating"
|
|
@@ -207,7 +229,7 @@ export {
|
|
|
207
229
|
v-if="!isFieldHidden(field)"
|
|
208
230
|
:data-disabled="isFieldDisabled(field) ? 'true' : void 0"
|
|
209
231
|
:data-invalid="isFieldInvalid(field) ? 'true' : void 0"
|
|
210
|
-
:orientation="displayConfig
|
|
232
|
+
:orientation="getConfigOrientation(displayConfig)"
|
|
211
233
|
:style="field.style ? $dsl.evaluate`${field.style}`() : {}"
|
|
212
234
|
>
|
|
213
235
|
<FieldLabel :for="['string', 'number'].includes(field.type) ? `${id}:${field.path}` : void 0">
|
|
@@ -241,7 +263,7 @@ export {
|
|
|
241
263
|
<InputGroupAddon
|
|
242
264
|
v-if="hasProperty(modelValue, field.path)"
|
|
243
265
|
align="inline-end"
|
|
244
|
-
:class="displayConfig
|
|
266
|
+
:class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
|
|
245
267
|
>
|
|
246
268
|
<Tooltip :delay-duration="800">
|
|
247
269
|
<TooltipTrigger>
|
|
@@ -346,7 +368,7 @@ export {
|
|
|
346
368
|
<InputGroupAddon
|
|
347
369
|
v-if="hasProperty(modelValue, field.path)"
|
|
348
370
|
align="inline-end"
|
|
349
|
-
:class="displayConfig
|
|
371
|
+
:class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
|
|
350
372
|
>
|
|
351
373
|
<Tooltip :delay-duration="800">
|
|
352
374
|
<TooltipTrigger>
|
|
@@ -5,7 +5,6 @@ declare const _default: typeof __VLS_export;
|
|
|
5
5
|
export default _default;
|
|
6
6
|
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
7
7
|
config: Effect.Effect<Readonly<{
|
|
8
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
9
8
|
fields: readonly ({
|
|
10
9
|
type: "string";
|
|
11
10
|
path: string;
|
|
@@ -80,13 +79,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
80
79
|
message: string;
|
|
81
80
|
}>[] | undefined;
|
|
82
81
|
})[];
|
|
83
|
-
|
|
82
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
83
|
+
style?: string | undefined;
|
|
84
|
+
}> | undefined>;
|
|
84
85
|
} & {
|
|
85
86
|
modelValue?: Record<string, unknown>;
|
|
86
87
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
87
88
|
"update:modelValue": (value: Record<string, unknown>) => any;
|
|
88
89
|
"update:config": (args_0: Readonly<{
|
|
89
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
90
90
|
fields: readonly ({
|
|
91
91
|
type: "string";
|
|
92
92
|
path: string;
|
|
@@ -161,10 +161,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
161
161
|
message: string;
|
|
162
162
|
}>[] | undefined;
|
|
163
163
|
})[];
|
|
164
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
165
|
+
style?: string | undefined;
|
|
164
166
|
}>) => any;
|
|
165
167
|
}, string, import("vue").PublicProps, Readonly<{
|
|
166
168
|
config: Effect.Effect<Readonly<{
|
|
167
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
168
169
|
fields: readonly ({
|
|
169
170
|
type: "string";
|
|
170
171
|
path: string;
|
|
@@ -239,13 +240,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
239
240
|
message: string;
|
|
240
241
|
}>[] | undefined;
|
|
241
242
|
})[];
|
|
242
|
-
|
|
243
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
244
|
+
style?: string | undefined;
|
|
245
|
+
}> | undefined>;
|
|
243
246
|
} & {
|
|
244
247
|
modelValue?: Record<string, unknown>;
|
|
245
248
|
}> & Readonly<{
|
|
246
249
|
"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
|
|
247
250
|
"onUpdate:config"?: ((args_0: Readonly<{
|
|
248
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
249
251
|
fields: readonly ({
|
|
250
252
|
type: "string";
|
|
251
253
|
path: string;
|
|
@@ -320,6 +322,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
320
322
|
message: string;
|
|
321
323
|
}>[] | undefined;
|
|
322
324
|
})[];
|
|
325
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
326
|
+
style?: string | undefined;
|
|
323
327
|
}>) => any) | undefined;
|
|
324
328
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
325
329
|
default?: (props: {}) => any;
|
|
@@ -211,12 +211,14 @@ export declare const FieldsOrientationC: z.ZodEnum<{
|
|
|
211
211
|
horizontal: "horizontal";
|
|
212
212
|
floating: "floating";
|
|
213
213
|
}>;
|
|
214
|
+
export declare const FieldsStyleC: z.ZodOptional<z.ZodString>;
|
|
214
215
|
export declare const FieldsConfigC: z.ZodReadonly<z.ZodObject<{
|
|
215
|
-
orientation: z.ZodEnum<{
|
|
216
|
+
orientation: z.ZodOptional<z.ZodEnum<{
|
|
216
217
|
vertical: "vertical";
|
|
217
218
|
horizontal: "horizontal";
|
|
218
219
|
floating: "floating";
|
|
219
|
-
}
|
|
220
|
+
}>>;
|
|
221
|
+
style: z.ZodOptional<z.ZodString>;
|
|
220
222
|
fields: z.ZodReadonly<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
|
|
221
223
|
type: z.ZodLiteral<"string">;
|
|
222
224
|
path: z.ZodString;
|
|
@@ -65,7 +65,11 @@ export const FieldC = z.discriminatedUnion("type", [
|
|
|
65
65
|
CalendarFieldC
|
|
66
66
|
]);
|
|
67
67
|
export const FieldsOrientationC = z.enum(["horizontal", "vertical", "floating"]);
|
|
68
|
+
export const FieldsStyleC = expressionC(/^map/, {
|
|
69
|
+
form: "map<string, dyn>"
|
|
70
|
+
}).optional().describe("\u8FD4\u56DE\u5B57\u6BB5\u96C6\u5408\u5BB9\u5668\u6837\u5F0F\u5BF9\u8C61\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u4F7F\u7528 form \u53D8\u91CF\u3002");
|
|
68
71
|
export const FieldsConfigC = z.object({
|
|
69
|
-
orientation: FieldsOrientationC.describe("\u5B57\u6BB5\u5E03\u5C40\u65B9\u5411\uFF0C\u53EF\u9009 horizontal\u3001vertical \u6216 floating"),
|
|
72
|
+
orientation: FieldsOrientationC.optional().describe("\u5B57\u6BB5\u5E03\u5C40\u65B9\u5411\uFF0C\u53EF\u9009 horizontal\u3001vertical \u6216 floating\uFF1B\u7559\u7A7A\u65F6\u9ED8\u8BA4 horizontal"),
|
|
73
|
+
style: FieldsStyleC,
|
|
70
74
|
fields: z.array(FieldC).readonly().describe("\u5B57\u6BB5\u5217\u8868")
|
|
71
75
|
}).readonly();
|
|
@@ -9,7 +9,6 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
9
9
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
10
10
|
"update:open": (value: boolean) => any;
|
|
11
11
|
confirm: (args_0: Readonly<{
|
|
12
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
13
12
|
fields: readonly ({
|
|
14
13
|
type: "string";
|
|
15
14
|
path: string;
|
|
@@ -84,11 +83,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
84
83
|
message: string;
|
|
85
84
|
}>[] | undefined;
|
|
86
85
|
})[];
|
|
86
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
87
|
+
style?: string | undefined;
|
|
87
88
|
}>) => any;
|
|
88
89
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
89
90
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
90
91
|
onConfirm?: ((args_0: Readonly<{
|
|
91
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
92
92
|
fields: readonly ({
|
|
93
93
|
type: "string";
|
|
94
94
|
path: string;
|
|
@@ -163,6 +163,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
163
163
|
message: string;
|
|
164
164
|
}>[] | undefined;
|
|
165
165
|
})[];
|
|
166
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
167
|
+
style?: string | undefined;
|
|
166
168
|
}>) => any) | undefined;
|
|
167
169
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
168
170
|
declare const _default: typeof __VLS_export;
|
|
@@ -7,7 +7,8 @@ import {
|
|
|
7
7
|
CalendarFieldC,
|
|
8
8
|
NumberFieldC,
|
|
9
9
|
SelectFieldC,
|
|
10
|
-
StringFieldC
|
|
10
|
+
StringFieldC,
|
|
11
|
+
FieldsStyleC
|
|
11
12
|
} from "../fields/schema";
|
|
12
13
|
import { cn } from "../../../utils/cn";
|
|
13
14
|
import { Button } from "../button";
|
|
@@ -40,6 +41,7 @@ const open = defineModel("open", { type: Boolean, ...{
|
|
|
40
41
|
} });
|
|
41
42
|
const { t } = useI18n();
|
|
42
43
|
const draftOrientation = ref("horizontal");
|
|
44
|
+
const draftStyle = ref();
|
|
43
45
|
const selectedItemId = ref("general");
|
|
44
46
|
const draftFields = ref([]);
|
|
45
47
|
const sortableListRef = ref(null);
|
|
@@ -111,6 +113,9 @@ function getFieldErrorKey(draftId, fieldKey) {
|
|
|
111
113
|
function getValidationRuleErrorKey(draftId, index, control) {
|
|
112
114
|
return `${draftId}:validation:${index}:${control}`;
|
|
113
115
|
}
|
|
116
|
+
function getGeneralErrorKey(fieldKey) {
|
|
117
|
+
return `general:${fieldKey}`;
|
|
118
|
+
}
|
|
114
119
|
function clearError(key) {
|
|
115
120
|
Reflect.deleteProperty(validationErrors.value, key);
|
|
116
121
|
}
|
|
@@ -247,7 +252,8 @@ function createField(type) {
|
|
|
247
252
|
}
|
|
248
253
|
}
|
|
249
254
|
function resetDraftConfig() {
|
|
250
|
-
draftOrientation.value = props.config.orientation;
|
|
255
|
+
draftOrientation.value = props.config.orientation ?? "horizontal";
|
|
256
|
+
draftStyle.value = normalizeOptionalString(props.config.style ?? "");
|
|
251
257
|
draftFields.value = cloneFields(props.config.fields);
|
|
252
258
|
selectedItemId.value = "general";
|
|
253
259
|
validationErrors.value = {};
|
|
@@ -338,6 +344,10 @@ function selectItem(itemId) {
|
|
|
338
344
|
function updateDraftOrientation(value) {
|
|
339
345
|
draftOrientation.value = normalizeOrientation(value);
|
|
340
346
|
}
|
|
347
|
+
function updateDraftStyle(value) {
|
|
348
|
+
clearError(getGeneralErrorKey("style"));
|
|
349
|
+
draftStyle.value = normalizeOptionalString(String(value));
|
|
350
|
+
}
|
|
341
351
|
function updateDraftField(draftId, updater) {
|
|
342
352
|
draftFields.value = draftFields.value.map((item) => item.draftId === draftId ? {
|
|
343
353
|
draftId: item.draftId,
|
|
@@ -823,11 +833,26 @@ function confirmChanges() {
|
|
|
823
833
|
if (!normalizedFields) {
|
|
824
834
|
return;
|
|
825
835
|
}
|
|
836
|
+
const generalStyleResult = FieldsStyleC.safeParse(draftStyle.value);
|
|
837
|
+
if (!generalStyleResult.success) {
|
|
838
|
+
validationErrors.value = {
|
|
839
|
+
...validationErrors.value,
|
|
840
|
+
[getGeneralErrorKey("style")]: generalStyleResult.error.issues[0]?.message ?? t("general-style-invalid")
|
|
841
|
+
};
|
|
842
|
+
selectedItemId.value = "general";
|
|
843
|
+
return;
|
|
844
|
+
}
|
|
826
845
|
draftFields.value = normalizedFields.map((item) => createDraftField(item.field));
|
|
827
|
-
|
|
828
|
-
orientation: draftOrientation.value,
|
|
846
|
+
const nextConfig = {
|
|
829
847
|
fields: normalizedFields.map((item) => item.field)
|
|
830
|
-
}
|
|
848
|
+
};
|
|
849
|
+
if (draftOrientation.value !== "horizontal") {
|
|
850
|
+
nextConfig.orientation = draftOrientation.value;
|
|
851
|
+
}
|
|
852
|
+
if (generalStyleResult.data) {
|
|
853
|
+
nextConfig.style = generalStyleResult.data;
|
|
854
|
+
}
|
|
855
|
+
emit("confirm", nextConfig);
|
|
831
856
|
open.value = false;
|
|
832
857
|
}
|
|
833
858
|
</script>
|
|
@@ -1013,6 +1038,30 @@ function confirmChanges() {
|
|
|
1013
1038
|
</NativeSelectOption>
|
|
1014
1039
|
</NativeSelect>
|
|
1015
1040
|
</label>
|
|
1041
|
+
|
|
1042
|
+
<label
|
|
1043
|
+
data-slot="fields-configurator-general-style-section"
|
|
1044
|
+
class="flex flex-col gap-2 md:col-span-2"
|
|
1045
|
+
>
|
|
1046
|
+
<span class="text-xs font-medium text-zinc-500">
|
|
1047
|
+
{{ t("general-style") }}
|
|
1048
|
+
</span>
|
|
1049
|
+
<Textarea
|
|
1050
|
+
data-slot="fields-configurator-general-style-input"
|
|
1051
|
+
:model-value="draftStyle ?? ''"
|
|
1052
|
+
:aria-invalid="validationErrors[getGeneralErrorKey('style')] ? 'true' : void 0"
|
|
1053
|
+
:placeholder="t('general-style-placeholder')"
|
|
1054
|
+
class="min-h-20 font-mono text-sm"
|
|
1055
|
+
@update:model-value="updateDraftStyle"
|
|
1056
|
+
/>
|
|
1057
|
+
<p
|
|
1058
|
+
v-if="validationErrors[getGeneralErrorKey('style')]"
|
|
1059
|
+
data-slot="fields-configurator-general-style-error"
|
|
1060
|
+
class="text-xs text-red-500"
|
|
1061
|
+
>
|
|
1062
|
+
{{ validationErrors[getGeneralErrorKey("style")] }}
|
|
1063
|
+
</p>
|
|
1064
|
+
</label>
|
|
1016
1065
|
</section>
|
|
1017
1066
|
|
|
1018
1067
|
<div
|
|
@@ -1600,6 +1649,9 @@ function confirmChanges() {
|
|
|
1600
1649
|
"field-list": "字段列表",
|
|
1601
1650
|
"general": "通用",
|
|
1602
1651
|
"general-description": "在这里配置字段集合级别的公共选项。",
|
|
1652
|
+
"general-style": "通用样式表达式",
|
|
1653
|
+
"general-style-placeholder": "例如返回一个 style map,例如 display: grid",
|
|
1654
|
+
"general-style-invalid": "样式表达式无效",
|
|
1603
1655
|
"fields-orientation": "布局方向",
|
|
1604
1656
|
"fields-orientation-horizontal": "水平",
|
|
1605
1657
|
"fields-orientation-vertical": "垂直",
|
|
@@ -1674,6 +1726,9 @@ function confirmChanges() {
|
|
|
1674
1726
|
"field-list": "フィールド一覧",
|
|
1675
1727
|
"general": "共通",
|
|
1676
1728
|
"general-description": "ここではフィールド群全体に適用される共通設定を編集できます。",
|
|
1729
|
+
"general-style": "共通スタイル式",
|
|
1730
|
+
"general-style-placeholder": "例: style map を返す式。例: display: grid",
|
|
1731
|
+
"general-style-invalid": "スタイル式が無効です",
|
|
1677
1732
|
"fields-orientation": "レイアウト方向",
|
|
1678
1733
|
"fields-orientation-horizontal": "横並び",
|
|
1679
1734
|
"fields-orientation-vertical": "縦並び",
|
|
@@ -1748,6 +1803,9 @@ function confirmChanges() {
|
|
|
1748
1803
|
"field-list": "Field list",
|
|
1749
1804
|
"general": "General",
|
|
1750
1805
|
"general-description": "Edit the shared settings that apply to the whole field group here.",
|
|
1806
|
+
"general-style": "Shared style expression",
|
|
1807
|
+
"general-style-placeholder": "Return a style map, for example display: grid",
|
|
1808
|
+
"general-style-invalid": "The style expression is invalid",
|
|
1751
1809
|
"fields-orientation": "Layout orientation",
|
|
1752
1810
|
"fields-orientation-horizontal": "Horizontal",
|
|
1753
1811
|
"fields-orientation-vertical": "Vertical",
|
|
@@ -9,7 +9,6 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
9
9
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
10
10
|
"update:open": (value: boolean) => any;
|
|
11
11
|
confirm: (args_0: Readonly<{
|
|
12
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
13
12
|
fields: readonly ({
|
|
14
13
|
type: "string";
|
|
15
14
|
path: string;
|
|
@@ -84,11 +83,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
84
83
|
message: string;
|
|
85
84
|
}>[] | undefined;
|
|
86
85
|
})[];
|
|
86
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
87
|
+
style?: string | undefined;
|
|
87
88
|
}>) => any;
|
|
88
89
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
89
90
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
90
91
|
onConfirm?: ((args_0: Readonly<{
|
|
91
|
-
orientation: "vertical" | "horizontal" | "floating";
|
|
92
92
|
fields: readonly ({
|
|
93
93
|
type: "string";
|
|
94
94
|
path: string;
|
|
@@ -163,6 +163,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
163
163
|
message: string;
|
|
164
164
|
}>[] | undefined;
|
|
165
165
|
})[];
|
|
166
|
+
orientation?: "vertical" | "horizontal" | "floating" | undefined;
|
|
167
|
+
style?: string | undefined;
|
|
166
168
|
}>) => any) | undefined;
|
|
167
169
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
168
170
|
declare const _default: typeof __VLS_export;
|