@sdata/web-vue 3.16.0 → 3.17.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.
- package/dist/sd.css +81 -0
- package/dist/sd.min.css +1 -1
- package/es/basic-crud-table/basic-crud-table.vue_vue_type_script_setup_true_lang.js +15 -5
- package/es/button/button.vue.d.ts +8 -4
- package/es/button/button.vue_vue_type_script_setup_true_lang.js +33 -14
- package/es/button/index.d.ts +4 -0
- package/es/button/style/index.css +11 -0
- package/es/button/style/index.scss +12 -0
- package/es/cascader/base-cascader-panel.js +1 -1
- package/es/cascader/cascader-column.js +1 -1
- package/es/cascader/cascader-search-panel.js +1 -1
- package/es/components.d.ts +1 -0
- package/es/dropdown/dropdown-panel.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/icon/icon-list/icon-list.js +5 -0
- package/es/icon/icon-list/icon-list.vue_vue_type_script_setup_true_lang.js +52 -0
- package/es/icon/icon-list/index.js +9 -0
- package/es/index.css +81 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +3 -2
- package/es/index.scss +1 -0
- package/es/kv-list/constants.d.ts +1 -0
- package/es/kv-list/constants.js +127 -0
- package/es/kv-list/index.d.ts +302 -0
- package/es/kv-list/index.js +10 -0
- package/es/kv-list/kv-list-row.js +5 -0
- package/es/kv-list/kv-list-row.vue.d.ts +29 -0
- package/es/kv-list/kv-list-row.vue_vue_type_script_setup_true_lang.js +123 -0
- package/es/kv-list/kv-list.js +5 -0
- package/es/kv-list/kv-list.vue.d.ts +34 -0
- package/es/kv-list/kv-list.vue_vue_type_script_setup_true_lang.js +262 -0
- package/es/kv-list/style/css.js +2 -0
- package/es/kv-list/style/index.css +86 -0
- package/es/kv-list/style/index.d.ts +2 -0
- package/es/kv-list/style/index.js +2 -0
- package/es/kv-list/style/index.scss +93 -0
- package/es/kv-list/style/token.scss +14 -0
- package/es/kv-list/types.d.ts +29 -0
- package/es/kv-list/utils.d.ts +8 -0
- package/es/kv-list/utils.js +32 -0
- package/es/list/list.js +1 -1
- package/es/locale/interface.d.ts +11 -0
- package/es/locale/lang/ar-eg.js +2 -0
- package/es/locale/lang/de-de.js +2 -0
- package/es/locale/lang/en-us.js +2 -0
- package/es/locale/lang/es-es.js +2 -0
- package/es/locale/lang/fr-fr.js +2 -0
- package/es/locale/lang/id-id.js +2 -0
- package/es/locale/lang/it-it.js +2 -0
- package/es/locale/lang/ja-jp.js +2 -0
- package/es/locale/lang/km-kh.js +2 -0
- package/es/locale/lang/ko-kr.js +2 -0
- package/es/locale/lang/kv-list.d.ts +2 -0
- package/es/locale/lang/kv-list.js +14 -0
- package/es/locale/lang/ms-my.js +2 -0
- package/es/locale/lang/nl-nl.js +2 -0
- package/es/locale/lang/pt-pt.js +2 -0
- package/es/locale/lang/ru-ru.js +2 -0
- package/es/locale/lang/th-th.js +2 -0
- package/es/locale/lang/vi-vn.js +2 -0
- package/es/locale/lang/zh-cn.js +11 -0
- package/es/locale/lang/zh-tw.js +11 -0
- package/es/pagination/page-options.vue_vue_type_script_setup_true_lang.js +4 -1
- package/es/sd-vue.js +3 -1
- package/es/select/select-dropdown.vue_vue_type_script_setup_true_lang.js +2 -1
- package/es/table/table.js +1 -1
- package/es/transfer/transfer-view.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js +2 -1
- package/json/vetur-attributes.json +17 -0
- package/json/vetur-tags.json +9 -0
- package/json/web-types.json +48 -1
- package/package.json +3 -2
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
|
+
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
|
+
import { useI18n } from "../locale/index.js";
|
|
4
|
+
import Button from "../button/index.js";
|
|
5
|
+
import IconPlus from "../icon/icon-plus/index.js";
|
|
6
|
+
import Textarea from "../textarea/index.js";
|
|
7
|
+
import IconDelete from "../icon/icon-delete/index.js";
|
|
8
|
+
import IconEdit from "../icon/icon-edit/index.js";
|
|
9
|
+
import IconList from "../icon/icon-list/index.js";
|
|
10
|
+
import kv_list_row_default from "./kv-list-row.js";
|
|
11
|
+
import { isSameKvList, normalizeKvList, parseBulkKvList, stringifyKvList } from "./utils.js";
|
|
12
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
|
|
13
|
+
import { VueDraggable } from "vue-draggable-plus";
|
|
14
|
+
//#region components/kv-list/kv-list.vue?vue&type=script&setup=true&lang.ts
|
|
15
|
+
var kv_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "KvList" }), {}, {
|
|
16
|
+
__name: "kv-list",
|
|
17
|
+
props: /*@__PURE__*/ mergeModels({
|
|
18
|
+
type: {},
|
|
19
|
+
keyProps: {},
|
|
20
|
+
valueProps: {},
|
|
21
|
+
disabled: {
|
|
22
|
+
type: Boolean,
|
|
23
|
+
default: false
|
|
24
|
+
},
|
|
25
|
+
bulkEditable: { type: Boolean }
|
|
26
|
+
}, {
|
|
27
|
+
"json": { default: () => [] },
|
|
28
|
+
"jsonModifiers": {},
|
|
29
|
+
"bulk": { default: "" },
|
|
30
|
+
"bulkModifiers": {}
|
|
31
|
+
}),
|
|
32
|
+
emits: ["update:json", "update:bulk"],
|
|
33
|
+
setup(__props) {
|
|
34
|
+
const jsonModel = useModel(__props, "json");
|
|
35
|
+
const bulkModel = useModel(__props, "bulk");
|
|
36
|
+
const prefixCls = getPrefixCls("kv-list");
|
|
37
|
+
const { t } = useI18n();
|
|
38
|
+
const rowSelector = `.${prefixCls}-row`;
|
|
39
|
+
const handleSelector = `.${prefixCls}-drag-handle`;
|
|
40
|
+
const bulkMode = ref(false);
|
|
41
|
+
const bulkAvailable = computed(() => {
|
|
42
|
+
var _props$bulkEditable;
|
|
43
|
+
return (_props$bulkEditable = __props.bulkEditable) !== null && _props$bulkEditable !== void 0 ? _props$bulkEditable : __props.type !== "secret";
|
|
44
|
+
});
|
|
45
|
+
const rows = ref([]);
|
|
46
|
+
let id = 0;
|
|
47
|
+
let suppressedJsonUpdate;
|
|
48
|
+
function createWorkingItem(item) {
|
|
49
|
+
return {
|
|
50
|
+
id: id++,
|
|
51
|
+
key: item.key,
|
|
52
|
+
value: item.value
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
function publicRows() {
|
|
56
|
+
return normalizeKvList(rows.value);
|
|
57
|
+
}
|
|
58
|
+
function replaceRows(items) {
|
|
59
|
+
const normalizedItems = normalizeKvList(items);
|
|
60
|
+
rows.value = normalizedItems.length > 0 ? normalizedItems.map(createWorkingItem) : [createWorkingItem({
|
|
61
|
+
key: "",
|
|
62
|
+
value: ""
|
|
63
|
+
})];
|
|
64
|
+
}
|
|
65
|
+
function commitRows() {
|
|
66
|
+
const items = publicRows();
|
|
67
|
+
const bulk = stringifyKvList(items);
|
|
68
|
+
if (!isSameKvList(normalizeKvList(jsonModel.value), items)) jsonModel.value = items;
|
|
69
|
+
if (bulkModel.value !== bulk) bulkModel.value = bulk;
|
|
70
|
+
}
|
|
71
|
+
function addItem() {
|
|
72
|
+
if (__props.disabled) return;
|
|
73
|
+
rows.value.push(createWorkingItem({
|
|
74
|
+
key: "",
|
|
75
|
+
value: ""
|
|
76
|
+
}));
|
|
77
|
+
}
|
|
78
|
+
function updateItem(index, item) {
|
|
79
|
+
if (__props.disabled) return;
|
|
80
|
+
rows.value[index] = item;
|
|
81
|
+
commitRows();
|
|
82
|
+
}
|
|
83
|
+
function removeItem(index) {
|
|
84
|
+
if (__props.disabled) return;
|
|
85
|
+
rows.value.splice(index, 1);
|
|
86
|
+
if (rows.value.length === 0) addItem();
|
|
87
|
+
commitRows();
|
|
88
|
+
}
|
|
89
|
+
function clearItems() {
|
|
90
|
+
if (__props.disabled) return;
|
|
91
|
+
replaceRows([]);
|
|
92
|
+
commitRows();
|
|
93
|
+
}
|
|
94
|
+
const initialJson = normalizeKvList(jsonModel.value);
|
|
95
|
+
const initialBulk = parseBulkKvList(bulkModel.value);
|
|
96
|
+
if (initialJson.length > 0) {
|
|
97
|
+
replaceRows(initialJson);
|
|
98
|
+
bulkModel.value = stringifyKvList(initialJson);
|
|
99
|
+
} else if (initialBulk.length > 0) {
|
|
100
|
+
replaceRows(initialBulk);
|
|
101
|
+
jsonModel.value = initialBulk;
|
|
102
|
+
} else replaceRows([]);
|
|
103
|
+
watch(bulkAvailable, (available) => {
|
|
104
|
+
if (!available) bulkMode.value = false;
|
|
105
|
+
});
|
|
106
|
+
watch(jsonModel, (value) => {
|
|
107
|
+
const items = normalizeKvList(value);
|
|
108
|
+
if (suppressedJsonUpdate && isSameKvList(items, suppressedJsonUpdate)) {
|
|
109
|
+
suppressedJsonUpdate = void 0;
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
if (isSameKvList(items, publicRows())) return;
|
|
113
|
+
replaceRows(items);
|
|
114
|
+
const bulk = stringifyKvList(items);
|
|
115
|
+
if (bulkModel.value !== bulk) bulkModel.value = bulk;
|
|
116
|
+
}, { deep: true });
|
|
117
|
+
watch(bulkModel, (value) => {
|
|
118
|
+
const items = parseBulkKvList(value);
|
|
119
|
+
if (isSameKvList(items, publicRows())) return;
|
|
120
|
+
replaceRows(items);
|
|
121
|
+
if (!isSameKvList(items, normalizeKvList(jsonModel.value))) {
|
|
122
|
+
suppressedJsonUpdate = items;
|
|
123
|
+
jsonModel.value = items;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
return (_ctx, _cache) => {
|
|
127
|
+
return openBlock(), createElementBlock("div", { class: normalizeClass(unref(prefixCls)) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-toolbar`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-toolbar-actions`) }, [
|
|
128
|
+
bulkAvailable.value ? (openBlock(), createBlock(unref(Button), {
|
|
129
|
+
key: 0,
|
|
130
|
+
type: "text",
|
|
131
|
+
shape: "circle",
|
|
132
|
+
size: "small",
|
|
133
|
+
tooltip: bulkMode.value ? unref(t)("kvList.switchToList") : unref(t)("kvList.switchToBulk"),
|
|
134
|
+
"aria-label": bulkMode.value ? unref(t)("kvList.switchToList") : unref(t)("kvList.switchToBulk"),
|
|
135
|
+
disabled: __props.disabled,
|
|
136
|
+
onClick: _cache[0] || (_cache[0] = ($event) => bulkMode.value = !bulkMode.value)
|
|
137
|
+
}, {
|
|
138
|
+
icon: withCtx(() => [bulkMode.value ? (openBlock(), createBlock(unref(IconList), { key: 0 })) : (openBlock(), createBlock(unref(IconEdit), { key: 1 }))]),
|
|
139
|
+
"sr-only": withCtx(() => [createTextVNode(toDisplayString(bulkMode.value ? unref(t)("kvList.switchToList") : unref(t)("kvList.switchToBulk")), 1)]),
|
|
140
|
+
_: 1
|
|
141
|
+
}, 8, [
|
|
142
|
+
"tooltip",
|
|
143
|
+
"aria-label",
|
|
144
|
+
"disabled"
|
|
145
|
+
])) : createCommentVNode("", true),
|
|
146
|
+
createVNode(unref(Button), {
|
|
147
|
+
type: "text",
|
|
148
|
+
shape: "circle",
|
|
149
|
+
size: "small",
|
|
150
|
+
tooltip: unref(t)("kvList.clear"),
|
|
151
|
+
"aria-label": unref(t)("kvList.clear"),
|
|
152
|
+
disabled: __props.disabled,
|
|
153
|
+
onClick: clearItems
|
|
154
|
+
}, {
|
|
155
|
+
icon: withCtx(() => [createVNode(unref(IconDelete))]),
|
|
156
|
+
"sr-only": withCtx(() => [createTextVNode(toDisplayString(unref(t)("kvList.clear")), 1)]),
|
|
157
|
+
_: 1
|
|
158
|
+
}, 8, [
|
|
159
|
+
"tooltip",
|
|
160
|
+
"aria-label",
|
|
161
|
+
"disabled"
|
|
162
|
+
]),
|
|
163
|
+
createVNode(unref(Button), {
|
|
164
|
+
type: "text",
|
|
165
|
+
shape: "circle",
|
|
166
|
+
size: "small",
|
|
167
|
+
tooltip: unref(t)("kvList.add"),
|
|
168
|
+
"aria-label": unref(t)("kvList.add"),
|
|
169
|
+
disabled: __props.disabled || bulkMode.value,
|
|
170
|
+
onClick: addItem
|
|
171
|
+
}, {
|
|
172
|
+
icon: withCtx(() => [createVNode(unref(IconPlus))]),
|
|
173
|
+
"sr-only": withCtx(() => [createTextVNode(toDisplayString(unref(t)("kvList.add")), 1)]),
|
|
174
|
+
_: 1
|
|
175
|
+
}, 8, [
|
|
176
|
+
"tooltip",
|
|
177
|
+
"aria-label",
|
|
178
|
+
"disabled"
|
|
179
|
+
]),
|
|
180
|
+
renderSlot(_ctx.$slots, "toolbar-extra")
|
|
181
|
+
], 2)], 2), bulkMode.value ? (openBlock(), createBlock(unref(Textarea), {
|
|
182
|
+
key: 0,
|
|
183
|
+
modelValue: bulkModel.value,
|
|
184
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => bulkModel.value = $event),
|
|
185
|
+
class: normalizeClass(`${unref(prefixCls)}-bulk`),
|
|
186
|
+
"auto-size": {
|
|
187
|
+
minRows: 8,
|
|
188
|
+
maxRows: 18
|
|
189
|
+
},
|
|
190
|
+
placeholder: unref(t)("kvList.bulkPlaceholder"),
|
|
191
|
+
disabled: __props.disabled,
|
|
192
|
+
"data-testid": "kv-list-bulk"
|
|
193
|
+
}, null, 8, [
|
|
194
|
+
"modelValue",
|
|
195
|
+
"class",
|
|
196
|
+
"placeholder",
|
|
197
|
+
"disabled"
|
|
198
|
+
])) : (openBlock(), createBlock(unref(VueDraggable), {
|
|
199
|
+
key: 1,
|
|
200
|
+
modelValue: rows.value,
|
|
201
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => rows.value = $event),
|
|
202
|
+
class: normalizeClass(`${unref(prefixCls)}-rows`),
|
|
203
|
+
animation: 150,
|
|
204
|
+
draggable: rowSelector,
|
|
205
|
+
handle: handleSelector,
|
|
206
|
+
disabled: __props.disabled,
|
|
207
|
+
"ghost-class": `${unref(prefixCls)}-row--ghost`,
|
|
208
|
+
"chosen-class": `${unref(prefixCls)}-row--chosen`,
|
|
209
|
+
onUpdate: commitRows
|
|
210
|
+
}, {
|
|
211
|
+
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (item, index) => {
|
|
212
|
+
return openBlock(), createBlock(kv_list_row_default, {
|
|
213
|
+
key: item.id,
|
|
214
|
+
item,
|
|
215
|
+
index,
|
|
216
|
+
type: __props.type,
|
|
217
|
+
"key-props": __props.keyProps,
|
|
218
|
+
"value-props": __props.valueProps,
|
|
219
|
+
disabled: __props.disabled,
|
|
220
|
+
onUpdate: ($event) => updateItem(index, $event),
|
|
221
|
+
onRemove: ($event) => removeItem(index)
|
|
222
|
+
}, createSlots({
|
|
223
|
+
actions: withCtx(() => [renderSlot(_ctx.$slots, "row-actions", {
|
|
224
|
+
item: {
|
|
225
|
+
key: item.key,
|
|
226
|
+
value: item.value
|
|
227
|
+
},
|
|
228
|
+
index
|
|
229
|
+
})]),
|
|
230
|
+
_: 2
|
|
231
|
+
}, [_ctx.$slots.key ? {
|
|
232
|
+
name: "key",
|
|
233
|
+
fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "key", mergeProps({ ref_for: true }, slotProps))]),
|
|
234
|
+
key: "0"
|
|
235
|
+
} : void 0, _ctx.$slots.value ? {
|
|
236
|
+
name: "value",
|
|
237
|
+
fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "value", mergeProps({ ref_for: true }, slotProps))]),
|
|
238
|
+
key: "1"
|
|
239
|
+
} : void 0]), 1032, [
|
|
240
|
+
"item",
|
|
241
|
+
"index",
|
|
242
|
+
"type",
|
|
243
|
+
"key-props",
|
|
244
|
+
"value-props",
|
|
245
|
+
"disabled",
|
|
246
|
+
"onUpdate",
|
|
247
|
+
"onRemove"
|
|
248
|
+
]);
|
|
249
|
+
}), 128))]),
|
|
250
|
+
_: 3
|
|
251
|
+
}, 8, [
|
|
252
|
+
"modelValue",
|
|
253
|
+
"class",
|
|
254
|
+
"disabled",
|
|
255
|
+
"ghost-class",
|
|
256
|
+
"chosen-class"
|
|
257
|
+
]))], 2);
|
|
258
|
+
};
|
|
259
|
+
}
|
|
260
|
+
}));
|
|
261
|
+
//#endregion
|
|
262
|
+
export { kv_list_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/******** borderSize *******/
|
|
2
|
+
/******** borderStyle *******/
|
|
3
|
+
/******** radius *******/
|
|
4
|
+
/******** shadow distance *******/
|
|
5
|
+
/******** size *******/
|
|
6
|
+
/******** spacing *******/
|
|
7
|
+
/******** shadow *******/
|
|
8
|
+
/******** opacity *******/
|
|
9
|
+
/******** fontSize *******/
|
|
10
|
+
/******** fontWeight ********/
|
|
11
|
+
/******** Primary *******/
|
|
12
|
+
/******** success *******/
|
|
13
|
+
/******** warning *******/
|
|
14
|
+
/******** danger *******/
|
|
15
|
+
/******** link *******/
|
|
16
|
+
/******** radius *******/
|
|
17
|
+
/********* icon hover *********/
|
|
18
|
+
.sd-kv-list {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
background: var(--sd-color-bg-2);
|
|
22
|
+
border: 1px solid var(--sd-color-neutral-3);
|
|
23
|
+
border-radius: var(--sd-border-radius-medium);
|
|
24
|
+
}
|
|
25
|
+
.sd-kv-list-toolbar {
|
|
26
|
+
display: flex;
|
|
27
|
+
justify-content: flex-end;
|
|
28
|
+
padding: 8px;
|
|
29
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
30
|
+
}
|
|
31
|
+
.sd-kv-list-toolbar-actions, .sd-kv-list-row-actions {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-shrink: 0;
|
|
34
|
+
gap: 8px;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
.sd-kv-list-rows {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
}
|
|
41
|
+
.sd-kv-list-row {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
|
|
44
|
+
gap: 8px;
|
|
45
|
+
align-items: center;
|
|
46
|
+
padding: 8px;
|
|
47
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
48
|
+
transition: background-color 0.2s, opacity 0.2s;
|
|
49
|
+
}
|
|
50
|
+
.sd-kv-list-row:last-child {
|
|
51
|
+
border-bottom: 0;
|
|
52
|
+
}
|
|
53
|
+
.sd-kv-list-row--ghost {
|
|
54
|
+
background: var(--sd-color-primary-light-1);
|
|
55
|
+
opacity: 0.45;
|
|
56
|
+
}
|
|
57
|
+
.sd-kv-list-row--chosen {
|
|
58
|
+
background: var(--sd-color-primary-light-1);
|
|
59
|
+
}
|
|
60
|
+
.sd-kv-list-drag-handle {
|
|
61
|
+
color: var(--sd-color-text-3);
|
|
62
|
+
cursor: grab;
|
|
63
|
+
}
|
|
64
|
+
.sd-kv-list-drag-handle:active {
|
|
65
|
+
cursor: grabbing;
|
|
66
|
+
}
|
|
67
|
+
.sd-kv-list-key, .sd-kv-list-value {
|
|
68
|
+
min-width: 0;
|
|
69
|
+
}
|
|
70
|
+
.sd-kv-list-bulk {
|
|
71
|
+
display: block;
|
|
72
|
+
border: 0;
|
|
73
|
+
border-radius: 0;
|
|
74
|
+
}
|
|
75
|
+
@media screen and (width <= 640px) {
|
|
76
|
+
.sd-kv-list-row {
|
|
77
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
78
|
+
}
|
|
79
|
+
.sd-kv-list-value {
|
|
80
|
+
grid-column: 2;
|
|
81
|
+
}
|
|
82
|
+
.sd-kv-list-row-actions {
|
|
83
|
+
grid-row: 1/span 2;
|
|
84
|
+
grid-column: 3;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
@use '@style/theme/index.scss' as theme;
|
|
2
|
+
@use 'sass:string';
|
|
3
|
+
@use '@components/kv-list/style/token.scss' as *;
|
|
4
|
+
|
|
5
|
+
$kv-list-prefix-cls: string.unquote('#{theme.$prefix}-kv-list');
|
|
6
|
+
|
|
7
|
+
.#{$kv-list-prefix-cls} {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
background: $kv-list-color-bg;
|
|
11
|
+
border: $kv-list-border-width solid $kv-list-color-border;
|
|
12
|
+
border-radius: $kv-list-border-radius;
|
|
13
|
+
|
|
14
|
+
&-toolbar {
|
|
15
|
+
display: flex;
|
|
16
|
+
justify-content: flex-end;
|
|
17
|
+
padding: $kv-list-padding;
|
|
18
|
+
border-bottom: $kv-list-border-width solid $kv-list-color-border;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&-toolbar-actions,
|
|
22
|
+
&-row-actions {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-shrink: 0;
|
|
25
|
+
gap: $kv-list-gap;
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&-rows {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-row {
|
|
35
|
+
display: grid;
|
|
36
|
+
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
|
|
37
|
+
gap: $kv-list-gap;
|
|
38
|
+
align-items: center;
|
|
39
|
+
padding: $kv-list-padding;
|
|
40
|
+
border-bottom: $kv-list-border-width solid $kv-list-color-border;
|
|
41
|
+
transition:
|
|
42
|
+
background-color $kv-list-transition-duration,
|
|
43
|
+
opacity $kv-list-transition-duration;
|
|
44
|
+
|
|
45
|
+
&:last-child {
|
|
46
|
+
border-bottom: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&--ghost {
|
|
50
|
+
background: $kv-list-color-ghost;
|
|
51
|
+
opacity: 0.45;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--chosen {
|
|
55
|
+
background: $kv-list-color-ghost;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-drag-handle {
|
|
60
|
+
color: $kv-list-color-drag;
|
|
61
|
+
cursor: grab;
|
|
62
|
+
|
|
63
|
+
&:active {
|
|
64
|
+
cursor: grabbing;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&-key,
|
|
69
|
+
&-value {
|
|
70
|
+
min-width: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&-bulk {
|
|
74
|
+
display: block;
|
|
75
|
+
border: 0;
|
|
76
|
+
border-radius: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@media screen and (width <= 640px) {
|
|
80
|
+
&-row {
|
|
81
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&-value {
|
|
85
|
+
grid-column: 2;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&-row-actions {
|
|
89
|
+
grid-row: 1 / span 2;
|
|
90
|
+
grid-column: 3;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@use '@style/theme/index.scss' as global;
|
|
2
|
+
@use 'sass:string';
|
|
3
|
+
|
|
4
|
+
@forward '@style/theme/index.scss';
|
|
5
|
+
|
|
6
|
+
$kv-list-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
|
|
7
|
+
$kv-list-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
|
|
8
|
+
$kv-list-color-drag: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
|
|
9
|
+
$kv-list-color-ghost: var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1'));
|
|
10
|
+
$kv-list-border-width: global.$border-1;
|
|
11
|
+
$kv-list-border-radius: global.$radius-medium;
|
|
12
|
+
$kv-list-gap: global.$spacing-4;
|
|
13
|
+
$kv-list-padding: global.$spacing-4;
|
|
14
|
+
$kv-list-transition-duration: global.$transition-duration-2;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type AutoComplete from '../auto-complete';
|
|
2
|
+
import type Input from '../input';
|
|
3
|
+
import type { InputPassword } from '../input';
|
|
4
|
+
type ComponentPropsOf<T> = T extends new (...args: never[]) => {
|
|
5
|
+
$props: infer P;
|
|
6
|
+
} ? P : never;
|
|
7
|
+
type ControlledFieldProps = 'modelValue' | 'defaultValue' | 'onUpdate:modelValue';
|
|
8
|
+
export type KvListType = 'http-header' | 'secret';
|
|
9
|
+
export interface KvListItem {
|
|
10
|
+
key: string;
|
|
11
|
+
value: string;
|
|
12
|
+
}
|
|
13
|
+
export type KvListKeyProps = Partial<Omit<ComponentPropsOf<typeof Input> & ComponentPropsOf<typeof AutoComplete>, ControlledFieldProps>>;
|
|
14
|
+
export type KvListValueProps = Partial<Omit<ComponentPropsOf<typeof Input> & ComponentPropsOf<typeof InputPassword>, ControlledFieldProps>>;
|
|
15
|
+
export interface KvListFieldSlotProps {
|
|
16
|
+
value: string;
|
|
17
|
+
item: Readonly<KvListItem>;
|
|
18
|
+
index: number;
|
|
19
|
+
props: Readonly<Record<string, unknown>>;
|
|
20
|
+
update: (value: string) => void;
|
|
21
|
+
}
|
|
22
|
+
export interface KvListRowActionsSlotProps {
|
|
23
|
+
item: Readonly<KvListItem>;
|
|
24
|
+
index: number;
|
|
25
|
+
}
|
|
26
|
+
export interface KvListWorkingItem extends KvListItem {
|
|
27
|
+
id: number;
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { KvListItem } from './types';
|
|
2
|
+
export declare function normalizeKvList(items: readonly KvListItem[] | undefined): {
|
|
3
|
+
key: string;
|
|
4
|
+
value: string;
|
|
5
|
+
}[];
|
|
6
|
+
export declare function parseBulkKvList(value: string): KvListItem[];
|
|
7
|
+
export declare function stringifyKvList(items: readonly KvListItem[]): string;
|
|
8
|
+
export declare function isSameKvList(first: readonly KvListItem[], second: readonly KvListItem[]): boolean;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
//#region components/kv-list/utils.ts
|
|
2
|
+
function normalizeKvList(items) {
|
|
3
|
+
if (!items) return [];
|
|
4
|
+
return items.filter((item) => item.key.trim() !== "").map((item) => ({
|
|
5
|
+
key: item.key,
|
|
6
|
+
value: item.value
|
|
7
|
+
}));
|
|
8
|
+
}
|
|
9
|
+
function parseBulkKvList(value) {
|
|
10
|
+
return value.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).map((line) => {
|
|
11
|
+
const separatorIndex = line.indexOf(":");
|
|
12
|
+
if (separatorIndex < 0) return {
|
|
13
|
+
key: line,
|
|
14
|
+
value: ""
|
|
15
|
+
};
|
|
16
|
+
return {
|
|
17
|
+
key: line.slice(0, separatorIndex).trim(),
|
|
18
|
+
value: line.slice(separatorIndex + 1).trimStart()
|
|
19
|
+
};
|
|
20
|
+
}).filter((item) => item.key !== "");
|
|
21
|
+
}
|
|
22
|
+
function stringifyKvList(items) {
|
|
23
|
+
return normalizeKvList(items).map(({ key, value }) => `${key}: ${value}`).join("\n");
|
|
24
|
+
}
|
|
25
|
+
function isSameKvList(first, second) {
|
|
26
|
+
return first.length === second.length && first.every((item, index) => {
|
|
27
|
+
var _second$index, _second$index2;
|
|
28
|
+
return item.key === ((_second$index = second[index]) === null || _second$index === void 0 ? void 0 : _second$index.key) && item.value === ((_second$index2 = second[index]) === null || _second$index2 === void 0 ? void 0 : _second$index2.value);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
//#endregion
|
|
32
|
+
export { isSameKvList, normalizeKvList, parseBulkKvList, stringifyKvList };
|
package/es/list/list.js
CHANGED
|
@@ -7,9 +7,9 @@ import virtual_list_default from "../_components/virtual-list/index.js";
|
|
|
7
7
|
import { omit } from "../_utils/omit.js";
|
|
8
8
|
import { useComponentRef } from "../_hooks/use-component-ref.js";
|
|
9
9
|
import { useScrollbar } from "../_hooks/use-scrollbar.js";
|
|
10
|
+
import Empty from "../empty/index.js";
|
|
10
11
|
import Scrollbar from "../scrollbar/index.js";
|
|
11
12
|
import Spin from "../spin/index.js";
|
|
12
|
-
import Empty from "../empty/index.js";
|
|
13
13
|
import Pagination from "../pagination/index.js";
|
|
14
14
|
import Grid from "../grid/index.js";
|
|
15
15
|
import { usePagination } from "./use-pagination.js";
|
package/es/locale/interface.d.ts
CHANGED
|
@@ -245,6 +245,17 @@ export interface SdLang {
|
|
|
245
245
|
preset: string;
|
|
246
246
|
empty: string;
|
|
247
247
|
};
|
|
248
|
+
kvList: {
|
|
249
|
+
switchToList: string;
|
|
250
|
+
switchToBulk: string;
|
|
251
|
+
clear: string;
|
|
252
|
+
add: string;
|
|
253
|
+
bulkPlaceholder: string;
|
|
254
|
+
dragSort: string;
|
|
255
|
+
keyPlaceholder: string;
|
|
256
|
+
valuePlaceholder: string;
|
|
257
|
+
remove: string;
|
|
258
|
+
};
|
|
248
259
|
a11y: SdA11yLang;
|
|
249
260
|
}
|
|
250
261
|
export type SdI18nMessages = Record<string, SdLang>;
|
package/es/locale/lang/ar-eg.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/ar-eg.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "ألوان النظام المضبوطة مسبقاً",
|
|
198
199
|
empty: "غير متوفرة"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "إغلاق",
|
|
202
204
|
back: "رجوع",
|
package/es/locale/lang/de-de.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/de-de.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "Standardfarbe des Systems",
|
|
198
199
|
empty: "Noch keine"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "Schließen",
|
|
202
204
|
back: "Zurück",
|
package/es/locale/lang/en-us.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
import { DefaultValidateMessage } from "b-validate";
|
|
2
3
|
//#region components/locale/lang/en-us.ts
|
|
3
4
|
var calendarLang = {
|
|
@@ -154,6 +155,7 @@ var lang = {
|
|
|
154
155
|
preset: "Preset Colors",
|
|
155
156
|
empty: "Empty"
|
|
156
157
|
},
|
|
158
|
+
kvList: kvListEnUS,
|
|
157
159
|
a11y: {
|
|
158
160
|
close: "Close",
|
|
159
161
|
back: "Back",
|
package/es/locale/lang/es-es.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/es-es.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "Colores predefinidos del sistema",
|
|
198
199
|
empty: "No hay datos"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "Cerrar",
|
|
202
204
|
back: "Volver",
|
package/es/locale/lang/fr-fr.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/fr-fr.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "Couleurs prédéfinies par le système",
|
|
198
199
|
empty: "Aucune donnée"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "Fermer",
|
|
202
204
|
back: "Retour",
|
package/es/locale/lang/id-id.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/id-id.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "Sistem preset warna",
|
|
198
199
|
empty: "Tidak ada data"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "Tutup",
|
|
202
204
|
back: "Kembali",
|
package/es/locale/lang/it-it.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/it-it.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "Colori preimpostati dal sistema",
|
|
198
199
|
empty: "Nessun dato"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "Chiudi",
|
|
202
204
|
back: "Indietro",
|
package/es/locale/lang/ja-jp.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { kvListEnUS } from "./kv-list.js";
|
|
1
2
|
//#region components/locale/lang/ja-jp.ts
|
|
2
3
|
var calendarLang = {
|
|
3
4
|
formatYear: "YYYY 年",
|
|
@@ -197,6 +198,7 @@ var lang = {
|
|
|
197
198
|
preset: "システムのデフォルトの色",
|
|
198
199
|
empty: "空の"
|
|
199
200
|
},
|
|
201
|
+
kvList: kvListEnUS,
|
|
200
202
|
a11y: {
|
|
201
203
|
close: "閉じる",
|
|
202
204
|
back: "戻る",
|