@opentinyvue/vue-cascader 2.21.0 → 3.21.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/lib/index.js +1 -1
- package/lib/mobile-first.js +291 -334
- package/lib/pc.js +317 -335
- package/package.json +12 -12
- package/src/index.d.ts +208 -1
- package/src/mobile-first.vue.d.ts +168 -1
- package/src/pc-first.vue.d.ts +128 -1
- package/src/pc.vue.d.ts +131 -1
package/lib/index.js
CHANGED
package/lib/mobile-first.js
CHANGED
|
@@ -7,36 +7,40 @@ import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
|
|
|
7
7
|
import Scrollbar from '@opentinyvue/vue-scrollbar';
|
|
8
8
|
import CascaderPanel from '@opentinyvue/vue-cascader-panel';
|
|
9
9
|
import Tooltip from '@opentinyvue/vue-tooltip';
|
|
10
|
+
import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, createElementVNode, createVNode, withCtx, createBlock, withModifiers, resolveDynamicComponent, normalizeClass, withKeys, vModelText, createCommentVNode, Transition, vShow, createSlots, renderSlot, toDisplayString, Fragment, renderList } from 'vue';
|
|
10
11
|
|
|
11
|
-
function
|
|
12
|
-
var
|
|
13
|
-
if (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
hook = injectStyles;
|
|
12
|
+
function _createForOfIteratorHelperLoose(r, e) {
|
|
13
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
14
|
+
if (t) return (t = t.call(r)).next.bind(t);
|
|
15
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
|
|
16
|
+
t && (r = t);
|
|
17
|
+
var o = 0;
|
|
18
|
+
return function() {
|
|
19
|
+
return o >= r.length ? { done: true } : { done: false, value: r[o++] };
|
|
20
|
+
};
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
};
|
|
30
|
-
} else {
|
|
31
|
-
var existing = options.beforeCreate;
|
|
32
|
-
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
33
|
-
}
|
|
22
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
23
|
+
}
|
|
24
|
+
function _unsupportedIterableToArray(r, a) {
|
|
25
|
+
if (r) {
|
|
26
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
27
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
28
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
34
29
|
}
|
|
35
|
-
return {
|
|
36
|
-
exports: scriptExports,
|
|
37
|
-
options
|
|
38
|
-
};
|
|
39
30
|
}
|
|
31
|
+
function _arrayLikeToArray(r, a) {
|
|
32
|
+
(null == a || a > r.length) && (a = r.length);
|
|
33
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
34
|
+
return n;
|
|
35
|
+
}
|
|
36
|
+
var _export_sfc = function _export_sfc2(sfc, props) {
|
|
37
|
+
var target = sfc.__vccOpts || sfc;
|
|
38
|
+
for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
|
|
39
|
+
var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
|
|
40
|
+
target[key] = val;
|
|
41
|
+
}
|
|
42
|
+
return target;
|
|
43
|
+
};
|
|
40
44
|
|
|
41
45
|
var classes = {
|
|
42
46
|
"type-medium": "text-sm leading-9",
|
|
@@ -44,7 +48,7 @@ var classes = {
|
|
|
44
48
|
"type-mini": "text-xs leading-7",
|
|
45
49
|
"show-auto-width": "w-full"
|
|
46
50
|
};
|
|
47
|
-
var
|
|
51
|
+
var _sfc_main$1 = defineComponent({
|
|
48
52
|
props: [].concat(props, ["modelValue", "options", "props", "size", "placeholder", "disabled", "clearable", "filterable", "filterMethod", "separator", "showAllLevels", "collapseTags", "debounce", "beforeFilter", "popperClass", "placement", "popperOptions", "visibleArrow", "offset", "boundariesPadding", "arrowOffset", "popperAppendToBody", "autoSize", "displayOnly", "shape", "label", "tip", "hoverExpand"]),
|
|
49
53
|
directives: directive({
|
|
50
54
|
Clickoutside
|
|
@@ -76,259 +80,229 @@ var __vue2_script$1 = defineComponent({
|
|
|
76
80
|
});
|
|
77
81
|
}
|
|
78
82
|
});
|
|
79
|
-
var
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var _c = _vm._self._c || _h;
|
|
83
|
-
return _c("div", _vm._b({
|
|
84
|
-
directives: [{
|
|
85
|
-
name: "clickoutside",
|
|
86
|
-
rawName: "v-clickoutside",
|
|
87
|
-
value: function value() {
|
|
88
|
-
return _vm.toggleDropDownVisible(false);
|
|
89
|
-
},
|
|
90
|
-
expression: "() => toggleDropDownVisible(false)"
|
|
91
|
-
}],
|
|
92
|
-
class: _vm.m("inline-block relative text-sm", _vm.gcls("type-${state.realSize}"), _vm.gcls(_vm.state.showAutoWidth ? "show-auto-width" : "")),
|
|
93
|
-
attrs: {
|
|
94
|
-
"data-tag": "tiny-cascader"
|
|
95
|
-
},
|
|
96
|
-
on: {
|
|
97
|
-
"mouseenter": function mouseenter($event) {
|
|
98
|
-
_vm.state.inputHover = true;
|
|
99
|
-
},
|
|
100
|
-
"mouseleave": function mouseleave($event) {
|
|
101
|
-
_vm.state.inputHover = false;
|
|
102
|
-
},
|
|
103
|
-
"click": function click() {
|
|
104
|
-
return _vm.toggleDropDownVisible(_vm.state.readonly ? void 0 : true);
|
|
105
|
-
},
|
|
106
|
-
"keydown": _vm.handleKeyDown
|
|
107
|
-
}
|
|
108
|
-
}, "div", _vm.a(_vm.$attrs, ["class", "style"], true), false), [_c("div", {
|
|
109
|
-
ref: "reference",
|
|
110
|
-
attrs: {
|
|
111
|
-
"data-tag": "tiny-cascader-content"
|
|
112
|
-
}
|
|
113
|
-
}, [_c("tiny-input", {
|
|
114
|
-
ref: "input",
|
|
115
|
-
attrs: {
|
|
116
|
-
"model-value": _vm.state.multiple ? _vm.state.presentText : _vm.state.inputValue,
|
|
117
|
-
"size": _vm.state.realSize,
|
|
118
|
-
"placeholder": _vm.state.placeholder,
|
|
119
|
-
"readonly": _vm.state.readonly,
|
|
120
|
-
"disabled": _vm.state.isDisabled,
|
|
121
|
-
"display-only": _vm.displayOnly,
|
|
122
|
-
"display-only-content": _vm.state.multiple ? _vm.state.presentTags.map(function(item) {
|
|
123
|
-
return item.text;
|
|
124
|
-
}).join("; ") : "",
|
|
125
|
-
"validate-event": false
|
|
126
|
-
},
|
|
127
|
-
on: {
|
|
128
|
-
"focus": _vm.handleFocus,
|
|
129
|
-
"blur": _vm.handleBlur,
|
|
130
|
-
"update:modelValue": _vm.handleInput
|
|
131
|
-
},
|
|
132
|
-
scopedSlots: _vm._u([{
|
|
133
|
-
key: "suffix",
|
|
134
|
-
fn: function fn() {
|
|
135
|
-
return [_vm.state.clearBtnVisible ? _c("icon-close", {
|
|
136
|
-
key: "clear",
|
|
137
|
-
on: {
|
|
138
|
-
"click": function click($event) {
|
|
139
|
-
$event.stopPropagation();
|
|
140
|
-
return _vm.handleClear.apply(null, arguments);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}) : _c(_vm.state.dropDownVisible ? "icon-chevron-up" : "icon-chevron-down", {
|
|
144
|
-
key: "arrow-down",
|
|
145
|
-
tag: "component",
|
|
146
|
-
class: {
|
|
147
|
-
"fill-color-brand": _vm.state.dropDownVisible
|
|
148
|
-
},
|
|
149
|
-
on: {
|
|
150
|
-
"click": function click($event) {
|
|
151
|
-
$event.stopPropagation();
|
|
152
|
-
return _vm.toggleDropDownVisible();
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
})];
|
|
156
|
-
},
|
|
157
|
-
proxy: true
|
|
158
|
-
}])
|
|
159
|
-
}), _vm.state.multiple && !_vm.state.isDisplayOnly && !_vm.shape ? _c("div", {
|
|
160
|
-
ref: "tags-content",
|
|
161
|
-
attrs: {
|
|
162
|
-
"data-tag": "tiny-cascader__tags"
|
|
163
|
-
}
|
|
164
|
-
}, [_vm.filterable && !_vm.state.isDisabled ? _c("input", {
|
|
165
|
-
directives: [{
|
|
166
|
-
name: "model",
|
|
167
|
-
rawName: "v-model.trim",
|
|
168
|
-
value: _vm.state.inputValue,
|
|
169
|
-
expression: "state.inputValue",
|
|
170
|
-
modifiers: {
|
|
171
|
-
"trim": true
|
|
172
|
-
}
|
|
173
|
-
}],
|
|
174
|
-
staticClass: "flex-1 h-6 text-color-text-primary text-xs border-none outline-0 box-border",
|
|
175
|
-
attrs: {
|
|
176
|
-
"type": "text",
|
|
177
|
-
"data-tag": "tiny-cascader__search-input",
|
|
178
|
-
"placeholder": _vm.state.presentTags.length ? "" : _vm.placeholder
|
|
179
|
-
},
|
|
180
|
-
domProps: {
|
|
181
|
-
"value": _vm.state.inputValue
|
|
182
|
-
},
|
|
183
|
-
on: {
|
|
184
|
-
"focus": _vm.handleFocus,
|
|
185
|
-
"blur": [_vm.handleBlur, function($event) {
|
|
186
|
-
return _vm.$forceUpdate();
|
|
187
|
-
}],
|
|
188
|
-
"input": [function($event) {
|
|
189
|
-
if ($event.target.composing) return;
|
|
190
|
-
_vm.$set(_vm.state, "inputValue", $event.target.value.trim());
|
|
191
|
-
}, function(e) {
|
|
192
|
-
return _vm.handleInput(_vm.state.inputValue, e);
|
|
193
|
-
}],
|
|
194
|
-
"click": function click($event) {
|
|
195
|
-
$event.stopPropagation();
|
|
196
|
-
return _vm.toggleDropDownVisible(true);
|
|
197
|
-
},
|
|
198
|
-
"keydown": function keydown($event) {
|
|
199
|
-
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete", "Del"])) return null;
|
|
200
|
-
return _vm.handleDelete.apply(null, arguments);
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
}) : _vm._e()]) : _vm._e()], 1), _c("tiny-tooltip", {
|
|
204
|
-
ref: "tooltip",
|
|
205
|
-
attrs: {
|
|
206
|
-
"manual": true,
|
|
207
|
-
"effect": "light",
|
|
208
|
-
"content": _vm.state.tooltipContent,
|
|
209
|
-
"placement": "top"
|
|
210
|
-
},
|
|
211
|
-
model: {
|
|
212
|
-
value: _vm.state.tooltipVisible,
|
|
213
|
-
callback: function callback($$v) {
|
|
214
|
-
_vm.$set(_vm.state, "tooltipVisible", $$v);
|
|
215
|
-
},
|
|
216
|
-
expression: "state.tooltipVisible"
|
|
217
|
-
}
|
|
218
|
-
}), _c("transition", {
|
|
219
|
-
attrs: {
|
|
220
|
-
"name": "tiny-zoom-in-top"
|
|
221
|
-
},
|
|
222
|
-
on: {
|
|
223
|
-
"after-leave": _vm.handleDropdownLeave
|
|
224
|
-
}
|
|
225
|
-
}, [_c("div", {
|
|
226
|
-
directives: [{
|
|
227
|
-
name: "show",
|
|
228
|
-
rawName: "v-show",
|
|
229
|
-
value: _vm.state.dropDownVisible,
|
|
230
|
-
expression: "state.dropDownVisible"
|
|
231
|
-
}],
|
|
232
|
-
ref: "popper",
|
|
233
|
-
class: _vm.m(_vm.popperClass, "my-1 mx-0 text-sm bg-color-bg-1 rounded shadow-md", _vm.autoSize ? "bg-transparent border-none shadow-none" : ""),
|
|
234
|
-
attrs: {
|
|
235
|
-
"data-tag": "tiny-cascader__dropdown"
|
|
236
|
-
},
|
|
237
|
-
on: {
|
|
238
|
-
"mousedown": function mousedown($event) {
|
|
239
|
-
$event.stopPropagation();
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
}, [_c("tiny-cascader-panel", {
|
|
243
|
-
directives: [{
|
|
244
|
-
name: "show",
|
|
245
|
-
rawName: "v-show",
|
|
246
|
-
value: !_vm.state.filtering,
|
|
247
|
-
expression: "!state.filtering"
|
|
248
|
-
}],
|
|
249
|
-
ref: "panel",
|
|
250
|
-
attrs: {
|
|
251
|
-
"tiny_mode": "mobile-first",
|
|
252
|
-
"options": _vm.options,
|
|
253
|
-
"props": _vm.state.config,
|
|
254
|
-
"border": false,
|
|
255
|
-
"render-label": _vm.slots.default
|
|
256
|
-
},
|
|
257
|
-
on: {
|
|
258
|
-
"expand-change": _vm.handleExpandChange,
|
|
259
|
-
"close": function close($event) {
|
|
260
|
-
return _vm.toggleDropDownVisible(false);
|
|
261
|
-
}
|
|
262
|
-
},
|
|
263
|
-
model: {
|
|
264
|
-
value: _vm.state.checkedValue,
|
|
265
|
-
callback: function callback($$v) {
|
|
266
|
-
_vm.$set(_vm.state, "checkedValue", $$v);
|
|
267
|
-
},
|
|
268
|
-
expression: "state.checkedValue"
|
|
269
|
-
}
|
|
270
|
-
}), _vm.filterable ? _c("tiny-scrollbar", {
|
|
271
|
-
directives: [{
|
|
272
|
-
name: "show",
|
|
273
|
-
rawName: "v-show",
|
|
274
|
-
value: _vm.state.filtering,
|
|
275
|
-
expression: "state.filtering"
|
|
276
|
-
}],
|
|
277
|
-
ref: "suggestionPanel",
|
|
278
|
-
staticClass: "bg-color-bg-1 border border-solid border-color-border-separator rounded",
|
|
279
|
-
attrs: {
|
|
280
|
-
"tag": "div",
|
|
281
|
-
"data-tag": "tiny-cascader__suggestion-panel",
|
|
282
|
-
"wrap-class": "overflow-auto pr-2 pb-2",
|
|
283
|
-
"view-class": "tiny-cascader__suggestion-list m-0 py-1.5 px-0 text-sm text-color-text-primary text-center"
|
|
284
|
-
},
|
|
285
|
-
on: {
|
|
286
|
-
"keydown": _vm.handleSuggestionKeyDown
|
|
287
|
-
},
|
|
288
|
-
scopedSlots: _vm._u([_vm.state.suggestions.length ? {
|
|
289
|
-
key: "default",
|
|
290
|
-
fn: function fn() {
|
|
291
|
-
return _vm._l(_vm.state.suggestions, function(item, index) {
|
|
292
|
-
return _c("div", {
|
|
293
|
-
key: item.uid,
|
|
294
|
-
class: ["flex justify-between items-center h-8 py-0 px-2 text-xs text-color-text-primary", "text-left outline-0 cursor-pointer", item.checked ? "text-color-brand-hover font-bold" : ""],
|
|
295
|
-
attrs: {
|
|
296
|
-
"data-tag": "tiny-cascader__suggestion-item",
|
|
297
|
-
"tabindex": -1
|
|
298
|
-
},
|
|
299
|
-
on: {
|
|
300
|
-
"click": function click($event) {
|
|
301
|
-
return _vm.handleSuggestionClick(index);
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
}, [_c("span", [_vm._v(_vm._s(item.text))]), item.checked ? _c("icon-yes", {
|
|
305
|
-
class: item.checked ? "fill-color-icon-hover" : ""
|
|
306
|
-
}) : _vm._e()], 1);
|
|
307
|
-
});
|
|
308
|
-
},
|
|
309
|
-
proxy: true
|
|
310
|
-
} : null], null, true)
|
|
311
|
-
}, [!_vm.state.suggestions.length ? _vm._t("empty", function() {
|
|
312
|
-
return [_c("div", {
|
|
313
|
-
staticClass: "my-2.5 mx-0 text-color-text-placeholder",
|
|
314
|
-
attrs: {
|
|
315
|
-
"data-tag": "tiny-cascader__empty-text"
|
|
316
|
-
}
|
|
317
|
-
}, [_vm._v(" " + _vm._s(_vm.t("ui.cascader.noMatch")) + " ")])];
|
|
318
|
-
}) : _vm._e()], 2) : _vm._e()], 1)])], 1);
|
|
83
|
+
var _hoisted_1$1 = {
|
|
84
|
+
ref: "reference",
|
|
85
|
+
"data-tag": "tiny-cascader-content"
|
|
319
86
|
};
|
|
320
|
-
var
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
87
|
+
var _hoisted_2 = {
|
|
88
|
+
key: 0,
|
|
89
|
+
ref: "tags-content",
|
|
90
|
+
"data-tag": "tiny-cascader__tags"
|
|
91
|
+
};
|
|
92
|
+
var _hoisted_3 = ["placeholder"];
|
|
93
|
+
var _hoisted_4 = ["onClick"];
|
|
94
|
+
var _hoisted_5 = {
|
|
95
|
+
"data-tag": "tiny-cascader__empty-text",
|
|
96
|
+
class: "my-2.5 mx-0 text-color-text-placeholder"
|
|
97
|
+
};
|
|
98
|
+
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
99
|
+
var _component_icon_close = resolveComponent("icon-close");
|
|
100
|
+
var _component_tiny_input = resolveComponent("tiny-input");
|
|
101
|
+
var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
|
|
102
|
+
var _component_tiny_cascader_panel = resolveComponent("tiny-cascader-panel");
|
|
103
|
+
var _component_icon_yes = resolveComponent("icon-yes");
|
|
104
|
+
var _component_tiny_scrollbar = resolveComponent("tiny-scrollbar");
|
|
105
|
+
var _directive_clickoutside = resolveDirective("clickoutside");
|
|
106
|
+
return withDirectives((openBlock(), createElementBlock(
|
|
107
|
+
"div",
|
|
108
|
+
mergeProps({
|
|
109
|
+
"data-tag": "tiny-cascader",
|
|
110
|
+
class: _ctx.m("inline-block relative text-sm", _ctx.gcls("type-${state.realSize}"), _ctx.gcls(_ctx.state.showAutoWidth ? "show-auto-width" : "")),
|
|
111
|
+
onMouseenter: _cache[11] || (_cache[11] = function($event) {
|
|
112
|
+
return _ctx.state.inputHover = true;
|
|
113
|
+
}),
|
|
114
|
+
onMouseleave: _cache[12] || (_cache[12] = function($event) {
|
|
115
|
+
return _ctx.state.inputHover = false;
|
|
116
|
+
}),
|
|
117
|
+
onClick: _cache[13] || (_cache[13] = function() {
|
|
118
|
+
return _ctx.toggleDropDownVisible(_ctx.state.readonly ? void 0 : true);
|
|
119
|
+
}),
|
|
120
|
+
onKeydown: _cache[14] || (_cache[14] = function() {
|
|
121
|
+
return _ctx.handleKeyDown && _ctx.handleKeyDown.apply(_ctx, arguments);
|
|
122
|
+
})
|
|
123
|
+
}, _ctx.a(_ctx.$attrs, ["class", "style"], true)),
|
|
124
|
+
[createElementVNode(
|
|
125
|
+
"div",
|
|
126
|
+
_hoisted_1$1,
|
|
127
|
+
[createVNode(_component_tiny_input, {
|
|
128
|
+
ref: "input",
|
|
129
|
+
"model-value": _ctx.state.multiple ? _ctx.state.presentText : _ctx.state.inputValue,
|
|
130
|
+
size: _ctx.state.realSize,
|
|
131
|
+
placeholder: _ctx.state.placeholder,
|
|
132
|
+
readonly: _ctx.state.readonly,
|
|
133
|
+
disabled: _ctx.state.isDisabled,
|
|
134
|
+
"display-only": _ctx.displayOnly,
|
|
135
|
+
"display-only-content": _ctx.state.multiple ? _ctx.state.presentTags.map(function(item) {
|
|
136
|
+
return item.text;
|
|
137
|
+
}).join("; ") : "",
|
|
138
|
+
"validate-event": false,
|
|
139
|
+
onFocus: _ctx.handleFocus,
|
|
140
|
+
onBlur: _ctx.handleBlur,
|
|
141
|
+
"onUpdate:modelValue": _ctx.handleInput
|
|
142
|
+
}, {
|
|
143
|
+
suffix: withCtx(function() {
|
|
144
|
+
return [_ctx.state.clearBtnVisible ? (openBlock(), createBlock(_component_icon_close, {
|
|
145
|
+
key: "clear",
|
|
146
|
+
onClick: withModifiers(_ctx.handleClear, ["stop"])
|
|
147
|
+
}, null, 8, ["onClick"])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.dropDownVisible ? "icon-chevron-up" : "icon-chevron-down"), {
|
|
148
|
+
key: "arrow-down",
|
|
149
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(function($event) {
|
|
150
|
+
return _ctx.toggleDropDownVisible();
|
|
151
|
+
}, ["stop"])),
|
|
152
|
+
class: normalizeClass({
|
|
153
|
+
"fill-color-brand": _ctx.state.dropDownVisible
|
|
154
|
+
})
|
|
155
|
+
}, null, 8, ["class"]))];
|
|
156
|
+
}),
|
|
157
|
+
_: 1
|
|
158
|
+
/* STABLE */
|
|
159
|
+
}, 8, ["model-value", "size", "placeholder", "readonly", "disabled", "display-only", "display-only-content", "onFocus", "onBlur", "onUpdate:modelValue"]), _ctx.state.multiple && !_ctx.state.isDisplayOnly && !_ctx.shape ? (openBlock(), createElementBlock(
|
|
160
|
+
"div",
|
|
161
|
+
_hoisted_2,
|
|
162
|
+
[_ctx.filterable && !_ctx.state.isDisabled ? withDirectives((openBlock(), createElementBlock("input", {
|
|
163
|
+
key: 0,
|
|
164
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
|
|
165
|
+
return _ctx.state.inputValue = $event;
|
|
166
|
+
}),
|
|
167
|
+
type: "text",
|
|
168
|
+
"data-tag": "tiny-cascader__search-input",
|
|
169
|
+
class: "flex-1 h-6 text-color-text-primary text-xs border-none outline-0 box-border",
|
|
170
|
+
placeholder: _ctx.state.presentTags.length ? "" : _ctx.placeholder,
|
|
171
|
+
onFocus: _cache[2] || (_cache[2] = function() {
|
|
172
|
+
return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
|
|
173
|
+
}),
|
|
174
|
+
onBlur: _cache[3] || (_cache[3] = function() {
|
|
175
|
+
return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
|
|
176
|
+
}),
|
|
177
|
+
onInput: _cache[4] || (_cache[4] = function(e) {
|
|
178
|
+
return _ctx.handleInput(_ctx.state.inputValue, e);
|
|
179
|
+
}),
|
|
180
|
+
onClick: _cache[5] || (_cache[5] = withModifiers(function($event) {
|
|
181
|
+
return _ctx.toggleDropDownVisible(true);
|
|
182
|
+
}, ["stop"])),
|
|
183
|
+
onKeydown: _cache[6] || (_cache[6] = withKeys(function() {
|
|
184
|
+
return _ctx.handleDelete && _ctx.handleDelete.apply(_ctx, arguments);
|
|
185
|
+
}, ["delete"]))
|
|
186
|
+
}, null, 40, _hoisted_3)), [[vModelText, _ctx.state.inputValue, void 0, {
|
|
187
|
+
trim: true
|
|
188
|
+
}]]) : createCommentVNode("v-if", true)],
|
|
189
|
+
512
|
|
190
|
+
/* NEED_PATCH */
|
|
191
|
+
)) : createCommentVNode("v-if", true)],
|
|
192
|
+
512
|
|
193
|
+
/* NEED_PATCH */
|
|
194
|
+
), createVNode(_component_tiny_tooltip, {
|
|
195
|
+
ref: "tooltip",
|
|
196
|
+
modelValue: _ctx.state.tooltipVisible,
|
|
197
|
+
"onUpdate:modelValue": _cache[7] || (_cache[7] = function($event) {
|
|
198
|
+
return _ctx.state.tooltipVisible = $event;
|
|
199
|
+
}),
|
|
200
|
+
manual: true,
|
|
201
|
+
effect: "light",
|
|
202
|
+
content: _ctx.state.tooltipContent,
|
|
203
|
+
placement: "top"
|
|
204
|
+
}, null, 8, ["modelValue", "content"]), createVNode(Transition, {
|
|
205
|
+
name: "tiny-zoom-in-top",
|
|
206
|
+
onAfterLeave: _ctx.handleDropdownLeave,
|
|
207
|
+
persisted: ""
|
|
208
|
+
}, {
|
|
209
|
+
default: withCtx(function() {
|
|
210
|
+
return [withDirectives(createElementVNode(
|
|
211
|
+
"div",
|
|
212
|
+
{
|
|
213
|
+
ref: "popper",
|
|
214
|
+
"data-tag": "tiny-cascader__dropdown",
|
|
215
|
+
class: normalizeClass(_ctx.m(_ctx.popperClass, "my-1 mx-0 text-sm bg-color-bg-1 rounded shadow-md", _ctx.autoSize ? "bg-transparent border-none shadow-none" : "")),
|
|
216
|
+
onMousedown: _cache[10] || (_cache[10] = withModifiers(function() {
|
|
217
|
+
}, ["stop"]))
|
|
218
|
+
},
|
|
219
|
+
[withDirectives(createVNode(_component_tiny_cascader_panel, {
|
|
220
|
+
ref: "panel",
|
|
221
|
+
tiny_mode: "mobile-first",
|
|
222
|
+
modelValue: _ctx.state.checkedValue,
|
|
223
|
+
"onUpdate:modelValue": _cache[8] || (_cache[8] = function($event) {
|
|
224
|
+
return _ctx.state.checkedValue = $event;
|
|
225
|
+
}),
|
|
226
|
+
options: _ctx.options,
|
|
227
|
+
props: _ctx.state.config,
|
|
228
|
+
border: false,
|
|
229
|
+
"render-label": _ctx.slots.default,
|
|
230
|
+
onExpandChange: _ctx.handleExpandChange,
|
|
231
|
+
onClose: _cache[9] || (_cache[9] = function($event) {
|
|
232
|
+
return _ctx.toggleDropDownVisible(false);
|
|
233
|
+
})
|
|
234
|
+
}, null, 8, ["modelValue", "options", "props", "render-label", "onExpandChange"]), [[vShow, !_ctx.state.filtering]]), _ctx.filterable ? withDirectives((openBlock(), createBlock(_component_tiny_scrollbar, {
|
|
235
|
+
key: 0,
|
|
236
|
+
ref: "suggestionPanel",
|
|
237
|
+
tag: "div",
|
|
238
|
+
"data-tag": "tiny-cascader__suggestion-panel",
|
|
239
|
+
"wrap-class": "overflow-auto pr-2 pb-2",
|
|
240
|
+
class: "bg-color-bg-1 border border-solid border-color-border-separator rounded",
|
|
241
|
+
"view-class": "tiny-cascader__suggestion-list m-0 py-1.5 px-0 text-sm text-color-text-primary text-center",
|
|
242
|
+
onKeydown: _ctx.handleSuggestionKeyDown
|
|
243
|
+
}, createSlots({
|
|
244
|
+
default: withCtx(function() {
|
|
245
|
+
return [!_ctx.state.suggestions.length ? renderSlot(_ctx.$slots, "empty", {
|
|
246
|
+
key: 0
|
|
247
|
+
}, function() {
|
|
248
|
+
return [createElementVNode(
|
|
249
|
+
"div",
|
|
250
|
+
_hoisted_5,
|
|
251
|
+
toDisplayString(_ctx.t("ui.cascader.noMatch")),
|
|
252
|
+
1
|
|
253
|
+
/* TEXT */
|
|
254
|
+
)];
|
|
255
|
+
}) : createCommentVNode("v-if", true)];
|
|
256
|
+
}),
|
|
257
|
+
_: 2
|
|
258
|
+
/* DYNAMIC */
|
|
259
|
+
}, [_ctx.state.suggestions.length ? {
|
|
260
|
+
name: "default",
|
|
261
|
+
fn: withCtx(function() {
|
|
262
|
+
return [(openBlock(true), createElementBlock(
|
|
263
|
+
Fragment,
|
|
264
|
+
null,
|
|
265
|
+
renderList(_ctx.state.suggestions, function(item, index) {
|
|
266
|
+
return openBlock(), createElementBlock("div", {
|
|
267
|
+
key: item.uid,
|
|
268
|
+
"data-tag": "tiny-cascader__suggestion-item",
|
|
269
|
+
class: normalizeClass(["flex justify-between items-center h-8 py-0 px-2 text-xs text-color-text-primary", "text-left outline-0 cursor-pointer", item.checked ? "text-color-brand-hover font-bold" : ""]),
|
|
270
|
+
tabindex: -1,
|
|
271
|
+
onClick: function onClick($event) {
|
|
272
|
+
return _ctx.handleSuggestionClick(index);
|
|
273
|
+
}
|
|
274
|
+
}, [createElementVNode(
|
|
275
|
+
"span",
|
|
276
|
+
null,
|
|
277
|
+
toDisplayString(item.text),
|
|
278
|
+
1
|
|
279
|
+
/* TEXT */
|
|
280
|
+
), item.checked ? (openBlock(), createBlock(_component_icon_yes, {
|
|
281
|
+
key: 0,
|
|
282
|
+
class: normalizeClass(item.checked ? "fill-color-icon-hover" : "")
|
|
283
|
+
}, null, 8, ["class"])) : createCommentVNode("v-if", true)], 10, _hoisted_4);
|
|
284
|
+
}),
|
|
285
|
+
128
|
|
286
|
+
/* KEYED_FRAGMENT */
|
|
287
|
+
))];
|
|
288
|
+
}),
|
|
289
|
+
key: "0"
|
|
290
|
+
} : void 0]), 1032, ["onKeydown"])), [[vShow, _ctx.state.filtering]]) : createCommentVNode("v-if", true)],
|
|
291
|
+
34
|
|
292
|
+
/* CLASS, NEED_HYDRATION */
|
|
293
|
+
), [[vShow, _ctx.state.dropDownVisible]])];
|
|
294
|
+
}),
|
|
295
|
+
_: 3
|
|
296
|
+
/* FORWARDED */
|
|
297
|
+
}, 8, ["onAfterLeave"])],
|
|
298
|
+
16
|
|
299
|
+
/* FULL_PROPS */
|
|
300
|
+
)), [[_directive_clickoutside, function() {
|
|
301
|
+
return _ctx.toggleDropDownVisible(false);
|
|
302
|
+
}]]);
|
|
327
303
|
}
|
|
328
|
-
var PcFirst = /* @__PURE__ */
|
|
329
|
-
|
|
330
|
-
}();
|
|
331
|
-
var __vue2_script = defineComponent({
|
|
304
|
+
var PcFirst = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
|
|
305
|
+
var _sfc_main = defineComponent({
|
|
332
306
|
props: [].concat(props, ["modelValue", "options", "props", "size", "placeholder", "disabled", "clearable", "filterable", "filterMethod", "separator", "showAllLevels", "collapseTags", "debounce", "beforeFilter", "popperClass", "placement", "popperOptions", "visibleArrow", "offset", "boundariesPadding", "arrowOffset", "popperAppendToBody", "autoSize", "displayOnly", "shape", "label", "tip", "hoverExpand", "title", "showHeader", "levelTitle"]),
|
|
333
307
|
inheritAttrs: false,
|
|
334
308
|
components: {
|
|
@@ -402,63 +376,46 @@ var __vue2_script = defineComponent({
|
|
|
402
376
|
};
|
|
403
377
|
}
|
|
404
378
|
});
|
|
405
|
-
var
|
|
406
|
-
|
|
407
|
-
var _h = _vm.$createElement;
|
|
408
|
-
var _c = _vm._self._c || _h;
|
|
409
|
-
return _vm.bp !== "default" ? _c("tiny-pc-first", _vm._b({
|
|
410
|
-
on: {
|
|
411
|
-
"update:modelValue": _vm.updateValue
|
|
412
|
-
}
|
|
413
|
-
}, "tiny-pc-first", _vm.$props, false)) : _c("div", [_c("tiny-input", {
|
|
414
|
-
attrs: {
|
|
415
|
-
"tiny_mode": "mobile-first",
|
|
416
|
-
"model-value": _vm.showText,
|
|
417
|
-
"disabled": _vm.disabled,
|
|
418
|
-
"placeholder": _vm.placeholder,
|
|
419
|
-
"readonly": ""
|
|
420
|
-
},
|
|
421
|
-
on: {
|
|
422
|
-
"click": function click($event) {
|
|
423
|
-
_vm.visible = true;
|
|
424
|
-
}
|
|
425
|
-
},
|
|
426
|
-
scopedSlots: _vm._u([{
|
|
427
|
-
key: "suffix",
|
|
428
|
-
fn: function fn() {
|
|
429
|
-
return [_c("div", [_c("icon-chevron-right", {
|
|
430
|
-
class: [_vm.visible ? "fill-color-brand" : "", _vm.disabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary"],
|
|
431
|
-
attrs: {
|
|
432
|
-
"custom-class": "w-5 h-5"
|
|
433
|
-
}
|
|
434
|
-
})], 1)];
|
|
435
|
-
},
|
|
436
|
-
proxy: true
|
|
437
|
-
}])
|
|
438
|
-
}), _c("tiny-cascader-mobile", _vm._b({
|
|
439
|
-
attrs: {
|
|
440
|
-
"model-value": _vm.modelValue,
|
|
441
|
-
"visible": _vm.visible
|
|
442
|
-
},
|
|
443
|
-
on: {
|
|
444
|
-
"update:modelValue": _vm.updateValue,
|
|
445
|
-
"close": function close($event) {
|
|
446
|
-
_vm.visible = false;
|
|
447
|
-
},
|
|
448
|
-
"update:text": _vm.updateText
|
|
449
|
-
}
|
|
450
|
-
}, "tiny-cascader-mobile", _vm.computedMobileProp, false))], 1);
|
|
379
|
+
var _hoisted_1 = {
|
|
380
|
+
key: 1
|
|
451
381
|
};
|
|
452
|
-
|
|
453
|
-
var
|
|
454
|
-
var
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
382
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
383
|
+
var _component_tiny_pc_first = resolveComponent("tiny-pc-first");
|
|
384
|
+
var _component_icon_chevron_right = resolveComponent("icon-chevron-right");
|
|
385
|
+
var _component_tiny_input = resolveComponent("tiny-input");
|
|
386
|
+
var _component_tiny_cascader_mobile = resolveComponent("tiny-cascader-mobile");
|
|
387
|
+
return _ctx.bp !== "default" ? (openBlock(), createBlock(_component_tiny_pc_first, mergeProps({
|
|
388
|
+
key: 0
|
|
389
|
+
}, _ctx.$props, {
|
|
390
|
+
"onUpdate:modelValue": _ctx.updateValue
|
|
391
|
+
}), null, 16, ["onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_tiny_input, {
|
|
392
|
+
tiny_mode: "mobile-first",
|
|
393
|
+
onClick: _cache[0] || (_cache[0] = function($event) {
|
|
394
|
+
return _ctx.visible = true;
|
|
395
|
+
}),
|
|
396
|
+
"model-value": _ctx.showText,
|
|
397
|
+
disabled: _ctx.disabled,
|
|
398
|
+
placeholder: _ctx.placeholder,
|
|
399
|
+
readonly: ""
|
|
400
|
+
}, {
|
|
401
|
+
suffix: withCtx(function() {
|
|
402
|
+
return [createElementVNode("div", null, [createVNode(_component_icon_chevron_right, {
|
|
403
|
+
class: normalizeClass([_ctx.visible ? "fill-color-brand" : "", _ctx.disabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary"]),
|
|
404
|
+
"custom-class": "w-5 h-5"
|
|
405
|
+
}, null, 8, ["class"])])];
|
|
406
|
+
}),
|
|
407
|
+
_: 1
|
|
408
|
+
/* STABLE */
|
|
409
|
+
}, 8, ["model-value", "disabled", "placeholder"]), createVNode(_component_tiny_cascader_mobile, mergeProps({
|
|
410
|
+
"model-value": _ctx.modelValue,
|
|
411
|
+
"onUpdate:modelValue": _ctx.updateValue,
|
|
412
|
+
onClose: _cache[1] || (_cache[1] = function($event) {
|
|
413
|
+
return _ctx.visible = false;
|
|
414
|
+
}),
|
|
415
|
+
"onUpdate:text": _ctx.updateText,
|
|
416
|
+
visible: _ctx.visible
|
|
417
|
+
}, _ctx.computedMobileProp), null, 16, ["model-value", "onUpdate:modelValue", "onUpdate:text", "visible"])]));
|
|
459
418
|
}
|
|
460
|
-
var mobileFirst = /* @__PURE__ */
|
|
461
|
-
return __component__.exports;
|
|
462
|
-
}();
|
|
419
|
+
var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
463
420
|
|
|
464
421
|
export { mobileFirst as default };
|