@shwfed/nuxt 0.8.3 → 0.9.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.
@@ -1,6 +1,6 @@
1
- import { type Field } from '../fields/schema.js';
1
+ import { type FieldsConfig } from '../fields/schema.js';
2
2
  type __VLS_Props = {
3
- fields: ReadonlyArray<Field>;
3
+ config: FieldsConfig;
4
4
  };
5
5
  type __VLS_ModelProps = {
6
6
  'open'?: boolean;
@@ -8,156 +8,162 @@ type __VLS_ModelProps = {
8
8
  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
- confirm: (args_0: readonly ({
12
- type: "string";
13
- path: string;
14
- title: readonly {
15
- locale: "zh" | "ja" | "en" | "ko";
16
- message: string;
17
- }[];
18
- icon?: string | undefined;
19
- style?: string | undefined;
20
- discardEmptyString?: boolean | undefined;
21
- maxLength?: string | undefined;
22
- hidden?: string | undefined;
23
- disabled?: string | undefined;
24
- validation?: readonly Readonly<{
25
- expression: string;
26
- message: string;
27
- }>[] | undefined;
28
- } | {
29
- type: "number";
30
- path: string;
31
- title: readonly {
32
- locale: "zh" | "ja" | "en" | "ko";
33
- message: string;
34
- }[];
35
- icon?: string | undefined;
36
- style?: string | undefined;
37
- min?: string | undefined;
38
- max?: string | undefined;
39
- step?: string | undefined;
40
- hidden?: string | undefined;
41
- disabled?: string | undefined;
42
- validation?: readonly Readonly<{
43
- expression: string;
44
- message: string;
45
- }>[] | undefined;
46
- } | {
47
- type: "select";
48
- path: string;
49
- title: readonly {
50
- locale: "zh" | "ja" | "en" | "ko";
51
- message: string;
52
- }[];
53
- options: string;
54
- label: string;
55
- value: string;
56
- key: string;
57
- icon?: string | undefined;
58
- style?: string | undefined;
59
- hidden?: string | undefined;
60
- disabled?: string | undefined;
61
- validation?: readonly Readonly<{
62
- expression: string;
63
- message: string;
64
- }>[] | undefined;
65
- } | {
66
- type: "calendar";
67
- path: string;
68
- title: readonly {
69
- locale: "zh" | "ja" | "en" | "ko";
70
- message: string;
71
- }[];
72
- mode: "date" | "month" | "year";
73
- value: string;
74
- icon?: string | undefined;
75
- style?: string | undefined;
76
- display?: string | undefined;
77
- disableDate?: string | undefined;
78
- hidden?: string | undefined;
79
- disabled?: string | undefined;
80
- validation?: readonly Readonly<{
81
- expression: string;
82
- message: string;
83
- }>[] | undefined;
84
- })[]) => any;
11
+ confirm: (args_0: Readonly<{
12
+ fields: readonly ({
13
+ type: "string";
14
+ path: string;
15
+ title: readonly {
16
+ locale: "zh" | "ja" | "en" | "ko";
17
+ message: string;
18
+ }[];
19
+ icon?: string | undefined;
20
+ style?: string | undefined;
21
+ discardEmptyString?: boolean | undefined;
22
+ maxLength?: string | undefined;
23
+ hidden?: string | undefined;
24
+ disabled?: string | undefined;
25
+ validation?: readonly Readonly<{
26
+ expression: string;
27
+ message: string;
28
+ }>[] | undefined;
29
+ } | {
30
+ type: "number";
31
+ path: string;
32
+ title: readonly {
33
+ locale: "zh" | "ja" | "en" | "ko";
34
+ message: string;
35
+ }[];
36
+ icon?: string | undefined;
37
+ style?: string | undefined;
38
+ min?: string | undefined;
39
+ max?: string | undefined;
40
+ step?: string | undefined;
41
+ hidden?: string | undefined;
42
+ disabled?: string | undefined;
43
+ validation?: readonly Readonly<{
44
+ expression: string;
45
+ message: string;
46
+ }>[] | undefined;
47
+ } | {
48
+ type: "select";
49
+ path: string;
50
+ title: readonly {
51
+ locale: "zh" | "ja" | "en" | "ko";
52
+ message: string;
53
+ }[];
54
+ options: string;
55
+ label: string;
56
+ value: string;
57
+ key: string;
58
+ icon?: string | undefined;
59
+ style?: string | undefined;
60
+ hidden?: string | undefined;
61
+ disabled?: string | undefined;
62
+ validation?: readonly Readonly<{
63
+ expression: string;
64
+ message: string;
65
+ }>[] | undefined;
66
+ } | {
67
+ type: "calendar";
68
+ path: string;
69
+ title: readonly {
70
+ locale: "zh" | "ja" | "en" | "ko";
71
+ message: string;
72
+ }[];
73
+ mode: "date" | "month" | "year";
74
+ value: string;
75
+ icon?: string | undefined;
76
+ style?: string | undefined;
77
+ display?: string | undefined;
78
+ disableDate?: string | undefined;
79
+ hidden?: string | undefined;
80
+ disabled?: string | undefined;
81
+ validation?: readonly Readonly<{
82
+ expression: string;
83
+ message: string;
84
+ }>[] | undefined;
85
+ })[];
86
+ orientation?: "vertical" | "horizontal" | "floating" | undefined;
87
+ }>) => any;
85
88
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
86
89
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
87
- onConfirm?: ((args_0: readonly ({
88
- type: "string";
89
- path: string;
90
- title: readonly {
91
- locale: "zh" | "ja" | "en" | "ko";
92
- message: string;
93
- }[];
94
- icon?: string | undefined;
95
- style?: string | undefined;
96
- discardEmptyString?: boolean | undefined;
97
- maxLength?: string | undefined;
98
- hidden?: string | undefined;
99
- disabled?: string | undefined;
100
- validation?: readonly Readonly<{
101
- expression: string;
102
- message: string;
103
- }>[] | undefined;
104
- } | {
105
- type: "number";
106
- path: string;
107
- title: readonly {
108
- locale: "zh" | "ja" | "en" | "ko";
109
- message: string;
110
- }[];
111
- icon?: string | undefined;
112
- style?: string | undefined;
113
- min?: string | undefined;
114
- max?: string | undefined;
115
- step?: string | undefined;
116
- hidden?: string | undefined;
117
- disabled?: string | undefined;
118
- validation?: readonly Readonly<{
119
- expression: string;
120
- message: string;
121
- }>[] | undefined;
122
- } | {
123
- type: "select";
124
- path: string;
125
- title: readonly {
126
- locale: "zh" | "ja" | "en" | "ko";
127
- message: string;
128
- }[];
129
- options: string;
130
- label: string;
131
- value: string;
132
- key: string;
133
- icon?: string | undefined;
134
- style?: string | undefined;
135
- hidden?: string | undefined;
136
- disabled?: string | undefined;
137
- validation?: readonly Readonly<{
138
- expression: string;
139
- message: string;
140
- }>[] | undefined;
141
- } | {
142
- type: "calendar";
143
- path: string;
144
- title: readonly {
145
- locale: "zh" | "ja" | "en" | "ko";
146
- message: string;
147
- }[];
148
- mode: "date" | "month" | "year";
149
- value: string;
150
- icon?: string | undefined;
151
- style?: string | undefined;
152
- display?: string | undefined;
153
- disableDate?: string | undefined;
154
- hidden?: string | undefined;
155
- disabled?: string | undefined;
156
- validation?: readonly Readonly<{
157
- expression: string;
158
- message: string;
159
- }>[] | undefined;
160
- })[]) => any) | undefined;
90
+ onConfirm?: ((args_0: Readonly<{
91
+ fields: readonly ({
92
+ type: "string";
93
+ path: string;
94
+ title: readonly {
95
+ locale: "zh" | "ja" | "en" | "ko";
96
+ message: string;
97
+ }[];
98
+ icon?: string | undefined;
99
+ style?: string | undefined;
100
+ discardEmptyString?: boolean | undefined;
101
+ maxLength?: string | undefined;
102
+ hidden?: string | undefined;
103
+ disabled?: string | undefined;
104
+ validation?: readonly Readonly<{
105
+ expression: string;
106
+ message: string;
107
+ }>[] | undefined;
108
+ } | {
109
+ type: "number";
110
+ path: string;
111
+ title: readonly {
112
+ locale: "zh" | "ja" | "en" | "ko";
113
+ message: string;
114
+ }[];
115
+ icon?: string | undefined;
116
+ style?: string | undefined;
117
+ min?: string | undefined;
118
+ max?: string | undefined;
119
+ step?: string | undefined;
120
+ hidden?: string | undefined;
121
+ disabled?: string | undefined;
122
+ validation?: readonly Readonly<{
123
+ expression: string;
124
+ message: string;
125
+ }>[] | undefined;
126
+ } | {
127
+ type: "select";
128
+ path: string;
129
+ title: readonly {
130
+ locale: "zh" | "ja" | "en" | "ko";
131
+ message: string;
132
+ }[];
133
+ options: string;
134
+ label: string;
135
+ value: string;
136
+ key: string;
137
+ icon?: string | undefined;
138
+ style?: string | undefined;
139
+ hidden?: string | undefined;
140
+ disabled?: string | undefined;
141
+ validation?: readonly Readonly<{
142
+ expression: string;
143
+ message: string;
144
+ }>[] | undefined;
145
+ } | {
146
+ type: "calendar";
147
+ path: string;
148
+ title: readonly {
149
+ locale: "zh" | "ja" | "en" | "ko";
150
+ message: string;
151
+ }[];
152
+ mode: "date" | "month" | "year";
153
+ value: string;
154
+ icon?: string | undefined;
155
+ style?: string | undefined;
156
+ display?: string | undefined;
157
+ disableDate?: string | undefined;
158
+ hidden?: string | undefined;
159
+ disabled?: string | undefined;
160
+ validation?: readonly Readonly<{
161
+ expression: string;
162
+ message: string;
163
+ }>[] | undefined;
164
+ })[];
165
+ orientation?: "vertical" | "horizontal" | "floating" | undefined;
166
+ }>) => any) | undefined;
161
167
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
162
168
  declare const _default: typeof __VLS_export;
163
169
  export default _default;
@@ -32,13 +32,14 @@ import { NativeSelect, NativeSelectOption } from "../native-select";
32
32
  import { Switch } from "../switch";
33
33
  import { Textarea } from "../textarea";
34
34
  const props = defineProps({
35
- fields: { type: Array, required: true }
35
+ config: { type: null, required: true }
36
36
  });
37
37
  const emit = defineEmits(["confirm"]);
38
38
  const open = defineModel("open", { type: Boolean, ...{
39
39
  default: false
40
40
  } });
41
41
  const { t } = useI18n();
42
+ const draftOrientation = ref("horizontal");
42
43
  const selectedItemId = ref("general");
43
44
  const draftFields = ref([]);
44
45
  const sortableListRef = ref(null);
@@ -71,6 +72,12 @@ function createDraftField(field) {
71
72
  function cloneFields(fields) {
72
73
  return fields.map(createDraftField);
73
74
  }
75
+ function normalizeOrientation(value) {
76
+ if (value === "vertical" || value === "floating") {
77
+ return value;
78
+ }
79
+ return "horizontal";
80
+ }
74
81
  function getFieldTypeLabel(type) {
75
82
  return t(`field-type-${type}`);
76
83
  }
@@ -239,8 +246,9 @@ function createField(type) {
239
246
  };
240
247
  }
241
248
  }
242
- function resetDraftFields() {
243
- draftFields.value = cloneFields(props.fields);
249
+ function resetDraftConfig() {
250
+ draftOrientation.value = props.config.orientation ?? "horizontal";
251
+ draftFields.value = cloneFields(props.config.fields);
244
252
  selectedItemId.value = "general";
245
253
  validationErrors.value = {};
246
254
  }
@@ -282,11 +290,9 @@ async function refreshSortable() {
282
290
  sortable.start();
283
291
  configureSortable();
284
292
  }
285
- watch(() => props.fields, (fields) => {
293
+ watch(() => props.config, () => {
286
294
  if (!open.value) {
287
- draftFields.value = cloneFields(fields);
288
- selectedItemId.value = "general";
289
- validationErrors.value = {};
295
+ resetDraftConfig();
290
296
  }
291
297
  }, { immediate: true });
292
298
  watch(draftFields, () => {
@@ -294,7 +300,7 @@ watch(draftFields, () => {
294
300
  }, { immediate: true });
295
301
  watch(open, async (value) => {
296
302
  if (value) {
297
- resetDraftFields();
303
+ resetDraftConfig();
298
304
  await refreshSortable();
299
305
  return;
300
306
  }
@@ -313,7 +319,7 @@ watch(fieldItems, async (items) => {
313
319
  }
314
320
  }, { immediate: true });
315
321
  function discardChanges() {
316
- resetDraftFields();
322
+ resetDraftConfig();
317
323
  open.value = false;
318
324
  }
319
325
  function handleOpenChange(value) {
@@ -329,6 +335,9 @@ function selectGeneral() {
329
335
  function selectItem(itemId) {
330
336
  selectedItemId.value = itemId;
331
337
  }
338
+ function updateDraftOrientation(value) {
339
+ draftOrientation.value = normalizeOrientation(value);
340
+ }
332
341
  function updateDraftField(draftId, updater) {
333
342
  draftFields.value = draftFields.value.map((item) => item.draftId === draftId ? {
334
343
  draftId: item.draftId,
@@ -815,7 +824,16 @@ function confirmChanges() {
815
824
  return;
816
825
  }
817
826
  draftFields.value = normalizedFields.map((item) => createDraftField(item.field));
818
- emit("confirm", normalizedFields.map((item) => item.field));
827
+ if (draftOrientation.value === "horizontal") {
828
+ emit("confirm", {
829
+ fields: normalizedFields.map((item) => item.field)
830
+ });
831
+ } else {
832
+ emit("confirm", {
833
+ orientation: draftOrientation.value,
834
+ fields: normalizedFields.map((item) => item.field)
835
+ });
836
+ }
819
837
  open.value = false;
820
838
  }
821
839
  </script>
@@ -973,13 +991,35 @@ function confirmChanges() {
973
991
  {{ t("general-description") }}
974
992
  </p>
975
993
 
976
- <div
994
+ <section
977
995
  v-if="selectedItemId === 'general'"
978
- data-slot="fields-configurator-general-placeholder"
979
- class="mt-6 rounded-lg border border-dashed border-zinc-200 bg-zinc-50/60 px-6 py-8 text-sm text-zinc-500"
996
+ data-slot="fields-configurator-general-options"
997
+ class="mt-6 grid gap-4 md:grid-cols-2"
980
998
  >
981
- {{ t("general-empty") }}
982
- </div>
999
+ <label
1000
+ data-slot="fields-configurator-general-orientation-section"
1001
+ class="flex flex-col gap-2"
1002
+ >
1003
+ <span class="text-xs font-medium text-zinc-500">
1004
+ {{ t("fields-orientation") }}
1005
+ </span>
1006
+ <NativeSelect
1007
+ data-slot="fields-configurator-general-orientation-select"
1008
+ :model-value="draftOrientation"
1009
+ @update:model-value="updateDraftOrientation"
1010
+ >
1011
+ <NativeSelectOption value="horizontal">
1012
+ {{ t("fields-orientation-horizontal") }}
1013
+ </NativeSelectOption>
1014
+ <NativeSelectOption value="vertical">
1015
+ {{ t("fields-orientation-vertical") }}
1016
+ </NativeSelectOption>
1017
+ <NativeSelectOption value="floating">
1018
+ {{ t("fields-orientation-floating") }}
1019
+ </NativeSelectOption>
1020
+ </NativeSelect>
1021
+ </label>
1022
+ </section>
983
1023
 
984
1024
  <div
985
1025
  v-else-if="selectedField"
@@ -1565,8 +1605,11 @@ function confirmChanges() {
1565
1605
  "configure-fields-description": "在这里浏览通用项和字段配置项。",
1566
1606
  "field-list": "字段列表",
1567
1607
  "general": "通用",
1568
- "general-description": "当前没有可保存的字段集合通用配置。",
1569
- "general-empty": "字段集合的通用配置目前由宿主组件决定,这里只配置字段自身。",
1608
+ "general-description": "在这里配置字段集合级别的公共选项。",
1609
+ "fields-orientation": "布局方向",
1610
+ "fields-orientation-horizontal": "水平",
1611
+ "fields-orientation-vertical": "垂直",
1612
+ "fields-orientation-floating": "浮动标签",
1570
1613
  "add-field": "新增字段",
1571
1614
  "field-type": "字段类型",
1572
1615
  "field-type-string": "文本",
@@ -1636,8 +1679,11 @@ function confirmChanges() {
1636
1679
  "configure-fields-description": "共通項目とフィールド設定をここで確認できます。",
1637
1680
  "field-list": "フィールド一覧",
1638
1681
  "general": "共通",
1639
- "general-description": "現在、保存できるフィールド群の共通設定はありません。",
1640
- "general-empty": "フィールド群の共通設定はホスト側で管理され、この画面では各フィールドのみ編集できます。",
1682
+ "general-description": "ここではフィールド群全体に適用される共通設定を編集できます。",
1683
+ "fields-orientation": "レイアウト方向",
1684
+ "fields-orientation-horizontal": "横並び",
1685
+ "fields-orientation-vertical": "縦並び",
1686
+ "fields-orientation-floating": "フローティングラベル",
1641
1687
  "add-field": "フィールドを追加",
1642
1688
  "field-type": "フィールド種別",
1643
1689
  "field-type-string": "テキスト",
@@ -1707,8 +1753,11 @@ function confirmChanges() {
1707
1753
  "configure-fields-description": "Browse the shared and field-level settings here.",
1708
1754
  "field-list": "Field list",
1709
1755
  "general": "General",
1710
- "general-description": "There is no shared field-group configuration to save here.",
1711
- "general-empty": "Field-group level settings are owned by the host. This dialog only edits fields.",
1756
+ "general-description": "Edit the shared settings that apply to the whole field group here.",
1757
+ "fields-orientation": "Layout orientation",
1758
+ "fields-orientation-horizontal": "Horizontal",
1759
+ "fields-orientation-vertical": "Vertical",
1760
+ "fields-orientation-floating": "Floating label",
1712
1761
  "add-field": "Add field",
1713
1762
  "field-type": "Field type",
1714
1763
  "field-type-string": "Text",