@shwfed/nuxt 0.8.2 → 0.9.0

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
+ orientation: "vertical" | "horizontal" | "floating";
13
+ fields: readonly ({
14
+ type: "string";
15
+ path: string;
16
+ title: readonly {
17
+ locale: "zh" | "ja" | "en" | "ko";
18
+ message: string;
19
+ }[];
20
+ icon?: string | undefined;
21
+ style?: string | undefined;
22
+ discardEmptyString?: boolean | undefined;
23
+ maxLength?: string | undefined;
24
+ hidden?: string | undefined;
25
+ disabled?: string | undefined;
26
+ validation?: readonly Readonly<{
27
+ expression: string;
28
+ message: string;
29
+ }>[] | undefined;
30
+ } | {
31
+ type: "number";
32
+ path: string;
33
+ title: readonly {
34
+ locale: "zh" | "ja" | "en" | "ko";
35
+ message: string;
36
+ }[];
37
+ icon?: string | undefined;
38
+ style?: string | undefined;
39
+ min?: string | undefined;
40
+ max?: string | undefined;
41
+ step?: string | undefined;
42
+ hidden?: string | undefined;
43
+ disabled?: string | undefined;
44
+ validation?: readonly Readonly<{
45
+ expression: string;
46
+ message: string;
47
+ }>[] | undefined;
48
+ } | {
49
+ type: "select";
50
+ path: string;
51
+ title: readonly {
52
+ locale: "zh" | "ja" | "en" | "ko";
53
+ message: string;
54
+ }[];
55
+ options: string;
56
+ label: string;
57
+ value: string;
58
+ key: string;
59
+ icon?: string | undefined;
60
+ style?: string | undefined;
61
+ hidden?: string | undefined;
62
+ disabled?: string | undefined;
63
+ validation?: readonly Readonly<{
64
+ expression: string;
65
+ message: string;
66
+ }>[] | undefined;
67
+ } | {
68
+ type: "calendar";
69
+ path: string;
70
+ title: readonly {
71
+ locale: "zh" | "ja" | "en" | "ko";
72
+ message: string;
73
+ }[];
74
+ mode: "date" | "month" | "year";
75
+ value: string;
76
+ icon?: string | undefined;
77
+ style?: string | undefined;
78
+ display?: string | undefined;
79
+ disableDate?: string | undefined;
80
+ hidden?: string | undefined;
81
+ disabled?: string | undefined;
82
+ validation?: readonly Readonly<{
83
+ expression: string;
84
+ message: string;
85
+ }>[] | undefined;
86
+ })[];
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
+ orientation: "vertical" | "horizontal" | "floating";
92
+ fields: readonly ({
93
+ type: "string";
94
+ path: string;
95
+ title: readonly {
96
+ locale: "zh" | "ja" | "en" | "ko";
97
+ message: string;
98
+ }[];
99
+ icon?: string | undefined;
100
+ style?: string | undefined;
101
+ discardEmptyString?: boolean | undefined;
102
+ maxLength?: string | undefined;
103
+ hidden?: string | undefined;
104
+ disabled?: string | undefined;
105
+ validation?: readonly Readonly<{
106
+ expression: string;
107
+ message: string;
108
+ }>[] | undefined;
109
+ } | {
110
+ type: "number";
111
+ path: string;
112
+ title: readonly {
113
+ locale: "zh" | "ja" | "en" | "ko";
114
+ message: string;
115
+ }[];
116
+ icon?: string | undefined;
117
+ style?: string | undefined;
118
+ min?: string | undefined;
119
+ max?: string | undefined;
120
+ step?: string | undefined;
121
+ hidden?: string | undefined;
122
+ disabled?: string | undefined;
123
+ validation?: readonly Readonly<{
124
+ expression: string;
125
+ message: string;
126
+ }>[] | undefined;
127
+ } | {
128
+ type: "select";
129
+ path: string;
130
+ title: readonly {
131
+ locale: "zh" | "ja" | "en" | "ko";
132
+ message: string;
133
+ }[];
134
+ options: string;
135
+ label: string;
136
+ value: string;
137
+ key: string;
138
+ icon?: string | undefined;
139
+ style?: string | undefined;
140
+ hidden?: string | undefined;
141
+ disabled?: string | undefined;
142
+ validation?: readonly Readonly<{
143
+ expression: string;
144
+ message: string;
145
+ }>[] | undefined;
146
+ } | {
147
+ type: "calendar";
148
+ path: string;
149
+ title: readonly {
150
+ locale: "zh" | "ja" | "en" | "ko";
151
+ message: string;
152
+ }[];
153
+ mode: "date" | "month" | "year";
154
+ value: string;
155
+ icon?: string | undefined;
156
+ style?: string | undefined;
157
+ display?: string | undefined;
158
+ disableDate?: string | undefined;
159
+ hidden?: string | undefined;
160
+ disabled?: string | undefined;
161
+ validation?: readonly Readonly<{
162
+ expression: string;
163
+ message: string;
164
+ }>[] | undefined;
165
+ })[];
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;
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,10 @@ 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
+ emit("confirm", {
828
+ orientation: draftOrientation.value,
829
+ fields: normalizedFields.map((item) => item.field)
830
+ });
819
831
  open.value = false;
820
832
  }
821
833
  </script>
@@ -973,13 +985,35 @@ function confirmChanges() {
973
985
  {{ t("general-description") }}
974
986
  </p>
975
987
 
976
- <div
988
+ <section
977
989
  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"
990
+ data-slot="fields-configurator-general-options"
991
+ class="mt-6 grid gap-4 md:grid-cols-2"
980
992
  >
981
- {{ t("general-empty") }}
982
- </div>
993
+ <label
994
+ data-slot="fields-configurator-general-orientation-section"
995
+ class="flex flex-col gap-2"
996
+ >
997
+ <span class="text-xs font-medium text-zinc-500">
998
+ {{ t("fields-orientation") }}
999
+ </span>
1000
+ <NativeSelect
1001
+ data-slot="fields-configurator-general-orientation-select"
1002
+ :model-value="draftOrientation"
1003
+ @update:model-value="updateDraftOrientation"
1004
+ >
1005
+ <NativeSelectOption value="horizontal">
1006
+ {{ t("fields-orientation-horizontal") }}
1007
+ </NativeSelectOption>
1008
+ <NativeSelectOption value="vertical">
1009
+ {{ t("fields-orientation-vertical") }}
1010
+ </NativeSelectOption>
1011
+ <NativeSelectOption value="floating">
1012
+ {{ t("fields-orientation-floating") }}
1013
+ </NativeSelectOption>
1014
+ </NativeSelect>
1015
+ </label>
1016
+ </section>
983
1017
 
984
1018
  <div
985
1019
  v-else-if="selectedField"
@@ -1565,8 +1599,11 @@ function confirmChanges() {
1565
1599
  "configure-fields-description": "在这里浏览通用项和字段配置项。",
1566
1600
  "field-list": "字段列表",
1567
1601
  "general": "通用",
1568
- "general-description": "当前没有可保存的字段集合通用配置。",
1569
- "general-empty": "字段集合的通用配置目前由宿主组件决定,这里只配置字段自身。",
1602
+ "general-description": "在这里配置字段集合级别的公共选项。",
1603
+ "fields-orientation": "布局方向",
1604
+ "fields-orientation-horizontal": "水平",
1605
+ "fields-orientation-vertical": "垂直",
1606
+ "fields-orientation-floating": "浮动标签",
1570
1607
  "add-field": "新增字段",
1571
1608
  "field-type": "字段类型",
1572
1609
  "field-type-string": "文本",
@@ -1636,8 +1673,11 @@ function confirmChanges() {
1636
1673
  "configure-fields-description": "共通項目とフィールド設定をここで確認できます。",
1637
1674
  "field-list": "フィールド一覧",
1638
1675
  "general": "共通",
1639
- "general-description": "現在、保存できるフィールド群の共通設定はありません。",
1640
- "general-empty": "フィールド群の共通設定はホスト側で管理され、この画面では各フィールドのみ編集できます。",
1676
+ "general-description": "ここではフィールド群全体に適用される共通設定を編集できます。",
1677
+ "fields-orientation": "レイアウト方向",
1678
+ "fields-orientation-horizontal": "横並び",
1679
+ "fields-orientation-vertical": "縦並び",
1680
+ "fields-orientation-floating": "フローティングラベル",
1641
1681
  "add-field": "フィールドを追加",
1642
1682
  "field-type": "フィールド種別",
1643
1683
  "field-type-string": "テキスト",
@@ -1707,8 +1747,11 @@ function confirmChanges() {
1707
1747
  "configure-fields-description": "Browse the shared and field-level settings here.",
1708
1748
  "field-list": "Field list",
1709
1749
  "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.",
1750
+ "general-description": "Edit the shared settings that apply to the whole field group here.",
1751
+ "fields-orientation": "Layout orientation",
1752
+ "fields-orientation-horizontal": "Horizontal",
1753
+ "fields-orientation-vertical": "Vertical",
1754
+ "fields-orientation-floating": "Floating label",
1712
1755
  "add-field": "Add field",
1713
1756
  "field-type": "Field type",
1714
1757
  "field-type-string": "Text",