on recupere les scripts
This commit is contained in:
parent
72c90c9389
commit
c3dfbe3d45
3 changed files with 964 additions and 3 deletions
190
css/vue-next-select.css
Normal file
190
css/vue-next-select.css
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.icon.delete {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: 0 0;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
max-height: 8px;
|
||||
max-width: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon.arrow-downward {
|
||||
color: #999;
|
||||
border-style: solid;
|
||||
border-width: 4px 4px 0;
|
||||
border-color: #999 transparent transparent;
|
||||
content: '';
|
||||
transition: transform 0.2s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon.arrow-downward.active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.vue-select {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
}
|
||||
.vue-select[data-is-focusing='true']:not([data-visible-length='0']) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.vue-input > input[disabled],
|
||||
.vue-select.disabled {
|
||||
background-color: rgba(239, 239, 239);
|
||||
}
|
||||
.vue-select.disabled * {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.vue-select-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.vue-select-header > .icon.arrow-downward,
|
||||
.vue-select-header > .icon.loading,
|
||||
.vue-tag > span {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.vue-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
min-height: calc(1rem + 4px);
|
||||
user-select: none;
|
||||
}
|
||||
.vue-tags.collapsed {
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
.vue-tag,
|
||||
.vue-tag.selected {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #999;
|
||||
border-radius: 4px;
|
||||
padding: 0 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.vue-tag {
|
||||
display: none;
|
||||
list-style-type: none;
|
||||
margin: 2px;
|
||||
min-height: 1rem;
|
||||
}
|
||||
.vue-tag.selected {
|
||||
display: flex;
|
||||
}
|
||||
.vue-dropdown,
|
||||
.vue-input {
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vue-input,
|
||||
.vue-input > input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.vue-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
.vue-input > input {
|
||||
min-width: 0;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
.vue-input > input[readonly] {
|
||||
cursor: default;
|
||||
}
|
||||
.vue-select-header > .vue-input > input[disabled] {
|
||||
background-color: unset;
|
||||
}
|
||||
.vue-dropdown {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
width: inherit;
|
||||
left: -1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
list-style-type: none;
|
||||
}
|
||||
.vue-dropdown[data-visible-length='0'] {
|
||||
border: 0;
|
||||
}
|
||||
.vue-dropdown-item {
|
||||
list-style-type: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vue-dropdown-item:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.vue-dropdown-item:hover {
|
||||
background-color: #41b883;
|
||||
}
|
||||
.vue-dropdown-item.selected {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.vue-dropdown-item.selected:hover {
|
||||
background-color: #ff6a6a;
|
||||
}
|
||||
.icon.loading {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 8px;
|
||||
min-width: 8px;
|
||||
height: 8px;
|
||||
min-height: 8px;
|
||||
}
|
||||
.icon.loading div {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #999;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
animation: loading 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: #999 transparent transparent;
|
||||
}
|
||||
.icon.loading div:nth-child(1) {
|
||||
animation-delay: -0.08s;
|
||||
}
|
||||
.icon.loading div:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
<link rel="stylesheet" href="https://unpkg.com/vue-next-select/dist/index.min.css">
|
||||
<link rel="stylesheet" href="[(#CHEMIN{css/vue-next-select.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
[(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
|
||||
[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
|
||||
<span class="crayon gamutable-yyyy-nn"></span>
|
||||
|
|
@ -50,12 +50,12 @@ var nomBlocAjaxReload = '';
|
|||
[(#CONFIG{gamutable/version_js}|=={dev}|?{
|
||||
<script src="[(#CHEMIN{js/vue.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="[(#CHEMIN{js/papaparse.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="https://unpkg.com/vue-next-select"></script>
|
||||
<script src="[(#CHEMIN{js/vue-next-select.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="[(#CHEMIN{js/gamutable.js}|timestamp)]" type="text/javascript"></script>
|
||||
,
|
||||
<script src="[(#CHEMIN{js/vue.min.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="[(#CHEMIN{js/papaparse.min.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="https://unpkg.com/vue-next-select"></script>
|
||||
<script src="[(#CHEMIN{js/vue-next-select.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="[(#CHEMIN{js/gamutable.js}|compacte|timestamp)]" type="text/javascript"></script>
|
||||
})]
|
||||
|
||||
|
|
|
|||
771
js/vue-next-select.js
Normal file
771
js/vue-next-select.js
Normal file
|
|
@ -0,0 +1,771 @@
|
|||
this.VueNextSelect = (function (e) {
|
||||
'use strict';
|
||||
var l = {
|
||||
inheritAttrs: !1,
|
||||
name: 'vue-input',
|
||||
props: {
|
||||
modelValue: { required: !0, type: String },
|
||||
placeholder: { required: !0, type: String },
|
||||
disabled: { required: !0, type: Boolean },
|
||||
tabindex: { required: !0, type: Number },
|
||||
autofocus: { required: !0, type: Boolean },
|
||||
},
|
||||
emits: ['update:modelValue', 'input', 'change', 'focus', 'blur', 'escape'],
|
||||
setup(l, t) {
|
||||
const a = e.ref(null);
|
||||
return (
|
||||
e.onMounted(() => {
|
||||
l.autofocus && a.value.focus();
|
||||
}),
|
||||
e.onUpdated(() => {
|
||||
l.autofocus && a.value.focus();
|
||||
}),
|
||||
{
|
||||
handleInput: (e) => {
|
||||
t.emit('input', e), t.emit('update:modelValue', e.target.value);
|
||||
},
|
||||
handleChange: (e) => {
|
||||
t.emit('change', e), t.emit('update:modelValue', e.target.value);
|
||||
},
|
||||
handleFocus: (e) => {
|
||||
t.emit('focus', e);
|
||||
},
|
||||
handleBlur: (e) => {
|
||||
t.emit('blur', e);
|
||||
},
|
||||
input: a,
|
||||
handleEscape: (e) => {
|
||||
a.value.blur(), t.emit('escape', e);
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
const t = { class: 'vue-input' };
|
||||
(l.render = function (l, a, n, o, u, i) {
|
||||
return (
|
||||
e.openBlock(),
|
||||
e.createBlock('div', t, [
|
||||
e.renderSlot(l.$slots, 'prepend'),
|
||||
e.createVNode(
|
||||
'input',
|
||||
{
|
||||
ref: 'input',
|
||||
modelValue: n.modelValue,
|
||||
placeholder: n.placeholder,
|
||||
disabled: n.disabled,
|
||||
onInput: a[1] || (a[1] = (...e) => o.handleInput && o.handleInput(...e)),
|
||||
onChange: a[2] || (a[2] = (...e) => o.handleChange && o.handleChange(...e)),
|
||||
onFocus: a[3] || (a[3] = (...e) => o.handleFocus && o.handleFocus(...e)),
|
||||
onBlur: a[4] || (a[4] = (...e) => o.handleBlur && o.handleBlur(...e)),
|
||||
onKeyup:
|
||||
a[5] ||
|
||||
(a[5] = e.withKeys(
|
||||
e.withModifiers((...e) => o.handleEscape && o.handleEscape(...e), ['exact']),
|
||||
['esc']
|
||||
)),
|
||||
tabindex: n.tabindex,
|
||||
autofocus: n.autofocus,
|
||||
},
|
||||
null,
|
||||
40,
|
||||
['modelValue', 'placeholder', 'disabled', 'tabindex', 'autofocus']
|
||||
),
|
||||
e.renderSlot(l.$slots, 'append'),
|
||||
])
|
||||
);
|
||||
}),
|
||||
(l.__file = 'src/components/input.vue');
|
||||
var a = {
|
||||
inheritAttrs: !1,
|
||||
name: 'vue-tags',
|
||||
props: {
|
||||
modelValue: {
|
||||
required: !0,
|
||||
type: Array,
|
||||
validator: (e) =>
|
||||
e.every((e) => void 0 !== typeof e.key && void 0 !== e.label && 'boolean' == typeof e.selected),
|
||||
},
|
||||
collapseTags: { type: Boolean },
|
||||
},
|
||||
emits: ['click'],
|
||||
setup: (l, t) => ({
|
||||
dataAttrs: e.inject('dataAttrs'),
|
||||
handleClick: (e) => {
|
||||
t.emit('click', e);
|
||||
},
|
||||
}),
|
||||
};
|
||||
(a.render = function (l, t, a, n, o, u) {
|
||||
return (
|
||||
e.openBlock(),
|
||||
e.createBlock(
|
||||
'ul',
|
||||
{
|
||||
class: ['vue-tags', { collapsed: a.collapseTags }],
|
||||
onMousedown: t[1] || (t[1] = e.withModifiers(() => {}, ['prevent'])),
|
||||
tabindex: '-1',
|
||||
onClick: t[2] || (t[2] = (...e) => n.handleClick && n.handleClick(...e)),
|
||||
'data-is-focusing': n.dataAttrs.isFocusing,
|
||||
'data-visible-length': n.dataAttrs.visibleLength,
|
||||
'data-not-selected-length': n.dataAttrs.notSelectedLength,
|
||||
'data-selected-length': n.dataAttrs.selectedLength,
|
||||
'data-total-length': n.dataAttrs.totalLength,
|
||||
},
|
||||
[
|
||||
(e.openBlock(!0),
|
||||
e.createBlock(
|
||||
e.Fragment,
|
||||
null,
|
||||
e.renderList(
|
||||
a.modelValue,
|
||||
(t) => (
|
||||
e.openBlock(),
|
||||
e.createBlock(
|
||||
'li',
|
||||
{ key: t.key, class: ['vue-tag', { selected: t.selected }] },
|
||||
[
|
||||
e.renderSlot(l.$slots, 'default', { option: t }, () => [
|
||||
e.createVNode('span', null, e.toDisplayString(t.label), 1),
|
||||
]),
|
||||
],
|
||||
2
|
||||
)
|
||||
)
|
||||
),
|
||||
128
|
||||
)),
|
||||
],
|
||||
42,
|
||||
[
|
||||
'data-is-focusing',
|
||||
'data-visible-length',
|
||||
'data-not-selected-length',
|
||||
'data-selected-length',
|
||||
'data-total-length',
|
||||
]
|
||||
)
|
||||
);
|
||||
}),
|
||||
(a.__file = 'src/components/tags.vue');
|
||||
var n = {
|
||||
inheritAttrs: !1,
|
||||
name: 'vue-dropdown',
|
||||
props: {
|
||||
modelValue: {
|
||||
required: !0,
|
||||
type: Array,
|
||||
validator: (e) =>
|
||||
e.every((e) => void 0 !== typeof e.key && void 0 !== e.label && 'boolean' == typeof e.selected),
|
||||
},
|
||||
headerHeight: { required: !0, type: String },
|
||||
},
|
||||
emits: ['click'],
|
||||
setup: (l, t) => ({
|
||||
dataAttrs: e.inject('dataAttrs'),
|
||||
handleClick: (e, l) => {
|
||||
t.emit('click', e, l);
|
||||
},
|
||||
}),
|
||||
};
|
||||
(n.render = function (l, t, a, n, o, u) {
|
||||
return (
|
||||
e.openBlock(),
|
||||
e.createBlock(
|
||||
'ul',
|
||||
{
|
||||
class: 'vue-dropdown',
|
||||
onMousedown: t[1] || (t[1] = e.withModifiers(() => {}, ['prevent'])),
|
||||
style: { top: a.headerHeight },
|
||||
'data-is-focusing': n.dataAttrs.isFocusing,
|
||||
'data-visible-length': n.dataAttrs.visibleLength,
|
||||
'data-not-selected-length': n.dataAttrs.notSelectedLength,
|
||||
'data-selected-length': n.dataAttrs.selectedLength,
|
||||
'data-total-length': n.dataAttrs.totalLength,
|
||||
},
|
||||
[
|
||||
(e.openBlock(!0),
|
||||
e.createBlock(
|
||||
e.Fragment,
|
||||
null,
|
||||
e.renderList(
|
||||
a.modelValue,
|
||||
(t) => (
|
||||
e.openBlock(),
|
||||
e.createBlock(
|
||||
e.Fragment,
|
||||
{ key: t.key },
|
||||
[
|
||||
t.visible && !1 === t.hidden
|
||||
? (e.openBlock(),
|
||||
e.createBlock(
|
||||
'li',
|
||||
{
|
||||
key: 0,
|
||||
onClick: (e) => n.handleClick(e, t),
|
||||
class: ['vue-dropdown-item', { selected: t.selected }],
|
||||
},
|
||||
[
|
||||
e.renderSlot(l.$slots, 'default', { option: t }, () => [
|
||||
e.createVNode('span', null, e.toDisplayString(t.label), 1),
|
||||
]),
|
||||
],
|
||||
10,
|
||||
['onClick']
|
||||
))
|
||||
: e.createCommentVNode('v-if', !0),
|
||||
],
|
||||
64
|
||||
)
|
||||
)
|
||||
),
|
||||
128
|
||||
)),
|
||||
],
|
||||
44,
|
||||
[
|
||||
'data-is-focusing',
|
||||
'data-visible-length',
|
||||
'data-not-selected-length',
|
||||
'data-selected-length',
|
||||
'data-total-length',
|
||||
]
|
||||
)
|
||||
);
|
||||
}),
|
||||
(n.__file = 'src/components/dropdown.vue');
|
||||
const o = (e, l, { valueBy: t }) => t(e) === t(l),
|
||||
u = (e, l, { valueBy: t }) => -1 !== e.findIndex((e) => o(e, l, { valueBy: t })),
|
||||
i = (e, l, { valueBy: t }) => e.find((e) => t(e) === l),
|
||||
d = (e, l, { max: t, valueBy: a }) => (u(e, l, { valueBy: a }) || e.length + 1 > t ? e : e.concat(l)),
|
||||
s = (e, l, { min: t, valueBy: a }) =>
|
||||
!1 === u(e, l, { valueBy: a }) || e.length - 1 < t ? e : e.filter((e) => !1 === o(e, l, { valueBy: a }));
|
||||
var r = {
|
||||
name: 'vue-select',
|
||||
inheritAttrs: !1,
|
||||
props: {
|
||||
modelValue: { required: !0 },
|
||||
options: { required: !0, type: Array },
|
||||
visibleOptions: { type: [Array, null], default: null },
|
||||
multiple: { default: !1, type: Boolean },
|
||||
min: { default: 0, type: Number },
|
||||
max: { default: 1 / 0, type: Number },
|
||||
closeOnSelect: { default: !1, type: Boolean },
|
||||
clearOnSelect: { default: !1, type: Boolean },
|
||||
trackBy: { type: [String, Function] },
|
||||
hideSelected: { default: !1, type: Boolean },
|
||||
labelBy: { type: [String, Function] },
|
||||
valueBy: { type: [String, Function] },
|
||||
disabled: { default: !1, type: Boolean },
|
||||
loading: { default: !1, type: Boolean },
|
||||
placeholder: { default: 'Select option', type: String },
|
||||
searchPlaceholder: { default: 'Type to search', type: String },
|
||||
searchable: { default: !1, type: Boolean },
|
||||
taggable: { default: !1, type: Boolean },
|
||||
collapseTags: { default: !1, type: Boolean },
|
||||
tabindex: { default: 0, type: Number },
|
||||
autofocus: { default: !1, type: Boolean },
|
||||
},
|
||||
emits: [
|
||||
'update:modelValue',
|
||||
'selected',
|
||||
'removed',
|
||||
'opened',
|
||||
'closed',
|
||||
'search:input',
|
||||
'search:change',
|
||||
'search:focus',
|
||||
'search:blur',
|
||||
],
|
||||
setup(l, t) {
|
||||
const { trackBy: a, labelBy: n, valueBy: o, min: r, max: c, options: p } = ((l) => ({
|
||||
trackBy: e.computed(() =>
|
||||
'function' == typeof l.trackBy
|
||||
? l.trackBy
|
||||
: 'string' == typeof l.trackBy
|
||||
? (e) => l.trackBy.split('.').reduce((e, l) => e[l], e)
|
||||
: (e) => e
|
||||
),
|
||||
labelBy: e.computed(() =>
|
||||
'function' == typeof l.labelBy
|
||||
? l.labelBy
|
||||
: 'string' == typeof l.labelBy
|
||||
? (e) => l.labelBy.split('.').reduce((e, l) => e[l], e)
|
||||
: (e) => e
|
||||
),
|
||||
valueBy: e.computed(() =>
|
||||
'function' == typeof l.valueBy
|
||||
? l.valueBy
|
||||
: 'string' == typeof l.valueBy
|
||||
? (e) => l.valueBy.split('.').reduce((e, l) => e[l], e)
|
||||
: (e) => e
|
||||
),
|
||||
min: e.computed(() => (l.multiple ? l.min : Math.min(1, l.min))),
|
||||
max: e.computed(() => (l.multiple ? l.max : 1)),
|
||||
options: e.isRef(l.options) || e.isReactive(l.options) ? e.toRef(l, 'options') : e.ref(l.options),
|
||||
}))(l),
|
||||
h = e.ref(null),
|
||||
v = e.ref(null),
|
||||
g = e.ref(!1);
|
||||
e.watch(
|
||||
() => g.value,
|
||||
() => {
|
||||
g.value
|
||||
? (t.emit('opened'),
|
||||
l.searchable && t.emit('search:focus'),
|
||||
l.searchable
|
||||
? v.value &&
|
||||
v.value._.refs.input !== document.activeElement &&
|
||||
v.value._.refs.input.focus()
|
||||
: !1 === l.searchable && h.value.focus())
|
||||
: (v.value && v.value._.refs.input === document.activeElement && v.value._.refs.input.blur(),
|
||||
h.value && h.value === document.activeElement && h.value.blur(),
|
||||
l.searchable && t.emit('search:blur'),
|
||||
t.emit('closed'));
|
||||
}
|
||||
);
|
||||
const m = () => {
|
||||
l.disabled || (g.value = !0);
|
||||
},
|
||||
y = () => {
|
||||
g.value = !1;
|
||||
};
|
||||
e.watch(
|
||||
() => l.disabled,
|
||||
() => y()
|
||||
);
|
||||
const f = e.ref(null),
|
||||
b =
|
||||
((B = f),
|
||||
(w = () => l.modelValue),
|
||||
(I = e.ref('0')),
|
||||
(k = function () {
|
||||
setTimeout(function () {
|
||||
B.value && (I.value = window.getComputedStyle(B.value).height);
|
||||
});
|
||||
}),
|
||||
e.watch(w, k),
|
||||
e.onMounted(k),
|
||||
I);
|
||||
var B, w, I, k;
|
||||
const V = e.computed(() => (l.searchable && l.multiple && l.taggable ? '22px' : '0px')),
|
||||
M = e.computed(() => parseFloat(b.value) + parseFloat(V.value) + 'px'),
|
||||
N = e.ref(''),
|
||||
S = e.ref([]),
|
||||
A = () => {
|
||||
if (l.multiple) {
|
||||
if (!1 === Array.isArray(l.modelValue)) return !1;
|
||||
if (S.value.length !== l.modelValue.length) return !1;
|
||||
if (
|
||||
Object.keys(S.value).some(
|
||||
(e) => S.value[e] !== i(p.value, l.modelValue[e], { valueBy: o.value })
|
||||
)
|
||||
)
|
||||
return !1;
|
||||
} else {
|
||||
if (0 === S.value.length && null !== l.modelValue) return !1;
|
||||
if (1 === S.value.length && null === l.modelValue) return !1;
|
||||
if (S.value[0] !== i(p.value, l.modelValue, { valueBy: o.value })) return !1;
|
||||
}
|
||||
return !0;
|
||||
},
|
||||
C = () => {
|
||||
if (A()) return;
|
||||
S.value = [];
|
||||
const e = l.multiple ? l.modelValue : null === l.modelValue ? [] : [l.modelValue];
|
||||
for (const l of e) {
|
||||
const e = i(p.value, l, { valueBy: o.value });
|
||||
!1 !== u(p.value, e, { valueBy: o.value }) &&
|
||||
(S.value = d(S.value, e, { max: 1 / 0, valueBy: o.value }));
|
||||
}
|
||||
};
|
||||
C(),
|
||||
e.watch(
|
||||
() => l.modelValue,
|
||||
() => {
|
||||
C();
|
||||
},
|
||||
{ deep: !0 }
|
||||
);
|
||||
e.watch(
|
||||
() => S,
|
||||
() => {
|
||||
(() => {
|
||||
if (A()) return;
|
||||
const e = S.value.map((e) => o.value(e));
|
||||
l.multiple
|
||||
? t.emit('update:modelValue', e)
|
||||
: e.length
|
||||
? t.emit('update:modelValue', e[0])
|
||||
: t.emit('update:modelValue', null);
|
||||
})();
|
||||
},
|
||||
{ deep: !0 }
|
||||
),
|
||||
e.watch(
|
||||
() => p.value,
|
||||
() => {
|
||||
const e = new Set(S.value.map((e) => o.value(e)));
|
||||
S.value = p.value.filter((l) => e.has(o.value(l)));
|
||||
},
|
||||
{ deep: !0 }
|
||||
);
|
||||
const D = (e, a) => {
|
||||
if (!l.disabled) {
|
||||
if (((a = a.originalOption), u(S.value, a, { valueBy: o.value })))
|
||||
(S.value = s(S.value, a, { min: r.value, valueBy: o.value })), t.emit('removed', a);
|
||||
else {
|
||||
if (!l.multiple) {
|
||||
const e = S.value[0];
|
||||
(S.value = s(S.value, S.value[0], { min: 0, valueBy: o.value })), t.emit('removed', e);
|
||||
}
|
||||
(S.value = d(S.value, a, { max: c.value, valueBy: o.value })), t.emit('selected', a);
|
||||
}
|
||||
!0 === l.closeOnSelect && (g.value = !1),
|
||||
!0 === l.clearOnSelect &&
|
||||
N.value &&
|
||||
((v.value._.refs.input.value = ''),
|
||||
v.value._.refs.input.dispatchEvent(new Event('input')),
|
||||
v.value._.refs.input.dispatchEvent(new Event('change')));
|
||||
}
|
||||
},
|
||||
F = e.computed(() => {
|
||||
const e = new Set(S.value.map((e) => o.value(e))),
|
||||
t =
|
||||
null !== l.visibleOptions
|
||||
? new Set(l.visibleOptions.map((e) => o.value(e)))
|
||||
: new Set(p.value.map((e) => o.value(e)));
|
||||
return p.value.map((u) => ({
|
||||
key: a.value(u),
|
||||
label: n.value(u),
|
||||
selected: e.has(o.value(u)),
|
||||
visible: t.has(o.value(u)),
|
||||
hidden: !!l.hideSelected && e.has(o.value(u)),
|
||||
originalOption: u,
|
||||
}));
|
||||
}),
|
||||
x = e.computed(() => ({
|
||||
isFocusing: g.value,
|
||||
visibleLength: F.value.filter((e) => e.visible && !1 === e.hidden).length,
|
||||
notSelectedLength: p.value.length - F.value.filter((e) => e.selected).length,
|
||||
selectedLength: F.value.filter((e) => e.selected).length,
|
||||
totalLength: p.value.length,
|
||||
}));
|
||||
e.provide('dataAttrs', x);
|
||||
const L = e.computed(() => {
|
||||
const e = F.value.filter((e) => e.selected);
|
||||
return l.multiple
|
||||
? 0 === e.length
|
||||
? l.placeholder
|
||||
: 1 === e.length
|
||||
? '1 option selected'
|
||||
: e.length + ' options selected'
|
||||
: 0 === e.length
|
||||
? l.placeholder
|
||||
: e[0].label;
|
||||
});
|
||||
return {
|
||||
isFocusing: g,
|
||||
wrapper: h,
|
||||
input: v,
|
||||
focus: m,
|
||||
blur: y,
|
||||
toggle: () => {
|
||||
g.value ? y() : m();
|
||||
},
|
||||
header: f,
|
||||
headerAndInputHeight: M,
|
||||
searchingInputValue: N,
|
||||
handleInputForInput: (e) => {
|
||||
t.emit('search:input', e);
|
||||
},
|
||||
handleChangeForInput: (e) => {
|
||||
t.emit('search:change', e);
|
||||
},
|
||||
handleFocusForInput: (e) => {
|
||||
m();
|
||||
},
|
||||
handleBlurForInput: (e) => {
|
||||
y();
|
||||
},
|
||||
handleClickForDropdown: (e, l) => D(0, l),
|
||||
handleClickForTag: (e, l) => D(0, l),
|
||||
optionsWithInfo: F,
|
||||
addOrRemoveOption: D,
|
||||
dataAttrs: x,
|
||||
innerPlaceholder: L,
|
||||
};
|
||||
},
|
||||
components: { VInput: l, VTags: a, VDropdown: n },
|
||||
};
|
||||
const c = { ref: 'header', class: 'vue-select-header' },
|
||||
p = { key: 0, class: 'vue-input' },
|
||||
h = { class: 'icon loading' },
|
||||
v = e.createVNode('div', null, null, -1),
|
||||
g = e.createVNode('div', null, null, -1),
|
||||
m = e.createVNode('div', null, null, -1),
|
||||
y = { class: 'icon loading' },
|
||||
f = e.createVNode('div', null, null, -1),
|
||||
b = e.createVNode('div', null, null, -1),
|
||||
B = e.createVNode('div', null, null, -1);
|
||||
return (
|
||||
(r.render = function (l, t, a, n, o, u) {
|
||||
const i = e.resolveComponent('v-tags'),
|
||||
d = e.resolveComponent('v-input'),
|
||||
s = e.resolveComponent('v-dropdown');
|
||||
return (
|
||||
e.openBlock(),
|
||||
e.createBlock(
|
||||
'div',
|
||||
{
|
||||
ref: 'wrapper',
|
||||
class: ['vue-select', { disabled: a.disabled }],
|
||||
tabindex: n.isFocusing ? -1 : a.tabindex,
|
||||
onFocus: t[9] || (t[9] = (...e) => n.focus && n.focus(...e)),
|
||||
onBlur: t[10] || (t[10] = () => !a.searchable && n.blur()),
|
||||
'data-is-focusing': n.dataAttrs.isFocusing,
|
||||
'data-visible-length': n.dataAttrs.visibleLength,
|
||||
'data-not-selected-length': n.dataAttrs.notSelectedLength,
|
||||
'data-selected-length': n.dataAttrs.selectedLength,
|
||||
'data-total-length': n.dataAttrs.totalLength,
|
||||
},
|
||||
[
|
||||
e.createVNode(
|
||||
'div',
|
||||
c,
|
||||
[
|
||||
(a.multiple && a.taggable && 0 === a.modelValue.length) ||
|
||||
(!1 === a.searchable && !1 === a.taggable)
|
||||
? (e.openBlock(),
|
||||
e.createBlock('div', p, [
|
||||
e.createVNode(
|
||||
'input',
|
||||
{
|
||||
placeholder: n.innerPlaceholder,
|
||||
readonly: '',
|
||||
onClick: t[1] || (t[1] = (...e) => n.focus && n.focus(...e)),
|
||||
},
|
||||
null,
|
||||
8,
|
||||
['placeholder']
|
||||
),
|
||||
]))
|
||||
: e.createCommentVNode('v-if', !0),
|
||||
a.multiple && a.taggable
|
||||
? (e.openBlock(),
|
||||
e.createBlock(
|
||||
e.Fragment,
|
||||
{ key: 1 },
|
||||
[
|
||||
e.createVNode(
|
||||
i,
|
||||
{
|
||||
modelValue: n.optionsWithInfo,
|
||||
'collapse-tags': a.collapseTags,
|
||||
tabindex: '-1',
|
||||
onClick: n.focus,
|
||||
},
|
||||
{
|
||||
default: e.withCtx(({ option: t }) => [
|
||||
e.renderSlot(
|
||||
l.$slots,
|
||||
'tag',
|
||||
{ option: t.originalOption },
|
||||
() => [
|
||||
e.createVNode(
|
||||
'span',
|
||||
null,
|
||||
e.toDisplayString(t.label),
|
||||
1
|
||||
),
|
||||
e.createVNode(
|
||||
'img',
|
||||
{
|
||||
src:
|
||||
'data:image/svg+xml;base64,PHN2ZyBpZD0iZGVsZXRlIiBkYXRhLW5hbWU9ImRlbGV0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPmRlbGV0ZTwvdGl0bGU+PHBhdGggZD0iTTI1NiwyNEMzODMuOSwyNCw0ODgsMTI4LjEsNDg4LDI1NlMzODMuOSw0ODgsMjU2LDQ4OCwyNC4wNiwzODMuOSwyNC4wNiwyNTYsMTI4LjEsMjQsMjU2LDI0Wk0wLDI1NkMwLDM5Ny4xNiwxMTQuODQsNTEyLDI1Niw1MTJTNTEyLDM5Ny4xNiw1MTIsMjU2LDM5Ny4xNiwwLDI1NiwwLDAsMTE0Ljg0LDAsMjU2WiIgZmlsbD0iIzViNWI1ZiIvPjxwb2x5Z29uIHBvaW50cz0iMzgyIDE3Mi43MiAzMzkuMjkgMTMwLjAxIDI1NiAyMTMuMjkgMTcyLjcyIDEzMC4wMSAxMzAuMDEgMTcyLjcyIDIxMy4yOSAyNTYgMTMwLjAxIDMzOS4yOCAxNzIuNzIgMzgyIDI1NiAyOTguNzEgMzM5LjI5IDM4MS45OSAzODIgMzM5LjI4IDI5OC43MSAyNTYgMzgyIDE3Mi43MiIgZmlsbD0iIzViNWI1ZiIvPjwvc3ZnPg==',
|
||||
alt: 'delete tag',
|
||||
class: 'icon delete',
|
||||
onClick: e.withModifiers(
|
||||
() => n.addOrRemoveOption(l.$event, t),
|
||||
['prevent', 'stop']
|
||||
),
|
||||
},
|
||||
null,
|
||||
8,
|
||||
['onClick']
|
||||
),
|
||||
]
|
||||
),
|
||||
]),
|
||||
_: 1,
|
||||
},
|
||||
8,
|
||||
['modelValue', 'collapse-tags', 'onClick']
|
||||
),
|
||||
e.createVNode(
|
||||
'span',
|
||||
{
|
||||
class: ['icon arrow-downward', { active: n.isFocusing }],
|
||||
onClick: t[2] || (t[2] = (...e) => n.toggle && n.toggle(...e)),
|
||||
onMousedown:
|
||||
t[3] ||
|
||||
(t[3] = e.withModifiers(() => {}, ['prevent', 'stop'])),
|
||||
},
|
||||
null,
|
||||
34
|
||||
),
|
||||
],
|
||||
64
|
||||
))
|
||||
: (e.openBlock(),
|
||||
e.createBlock(
|
||||
e.Fragment,
|
||||
{ key: 2 },
|
||||
[
|
||||
a.searchable
|
||||
? (e.openBlock(),
|
||||
e.createBlock(
|
||||
d,
|
||||
{
|
||||
key: 0,
|
||||
ref: 'input',
|
||||
modelValue: n.searchingInputValue,
|
||||
'onUpdate:modelValue':
|
||||
t[4] || (t[4] = (e) => (n.searchingInputValue = e)),
|
||||
disabled: a.disabled,
|
||||
placeholder: n.isFocusing
|
||||
? a.searchPlaceholder
|
||||
: n.innerPlaceholder,
|
||||
onInput: n.handleInputForInput,
|
||||
onChange: n.handleChangeForInput,
|
||||
onFocus: n.handleFocusForInput,
|
||||
onBlur: n.handleBlurForInput,
|
||||
onEscape: n.blur,
|
||||
autofocus: a.autofocus || (a.taggable && a.searchable),
|
||||
tabindex: a.tabindex,
|
||||
},
|
||||
null,
|
||||
8,
|
||||
[
|
||||
'modelValue',
|
||||
'disabled',
|
||||
'placeholder',
|
||||
'onInput',
|
||||
'onChange',
|
||||
'onFocus',
|
||||
'onBlur',
|
||||
'onEscape',
|
||||
'autofocus',
|
||||
'tabindex',
|
||||
]
|
||||
))
|
||||
: e.createCommentVNode('v-if', !0),
|
||||
e.withDirectives(e.createVNode('span', h, [v, g, m], 512), [
|
||||
[e.vShow, a.loading],
|
||||
]),
|
||||
e.withDirectives(
|
||||
e.createVNode(
|
||||
'span',
|
||||
{
|
||||
class: ['icon arrow-downward', { active: n.isFocusing }],
|
||||
onClick:
|
||||
t[5] || (t[5] = (...e) => n.toggle && n.toggle(...e)),
|
||||
onMousedown:
|
||||
t[6] ||
|
||||
(t[6] = e.withModifiers(() => {}, ['prevent', 'stop'])),
|
||||
},
|
||||
null,
|
||||
34
|
||||
),
|
||||
[[e.vShow, !1 === a.loading]]
|
||||
),
|
||||
],
|
||||
64
|
||||
)),
|
||||
],
|
||||
512
|
||||
),
|
||||
a.multiple && a.taggable && a.searchable
|
||||
? e.withDirectives(
|
||||
(e.openBlock(),
|
||||
e.createBlock(
|
||||
d,
|
||||
{
|
||||
key: 0,
|
||||
ref: 'input',
|
||||
modelValue: n.searchingInputValue,
|
||||
'onUpdate:modelValue': t[7] || (t[7] = (e) => (n.searchingInputValue = e)),
|
||||
disabled: a.disabled,
|
||||
placeholder: a.searchPlaceholder,
|
||||
onInput: n.handleInputForInput,
|
||||
onChange: n.handleChangeForInput,
|
||||
onFocus: n.handleFocusForInput,
|
||||
onBlur: n.handleBlurForInput,
|
||||
onEscape: n.blur,
|
||||
tabindex: a.tabindex,
|
||||
autofocus: a.autofocus || (a.taggable && a.searchable),
|
||||
},
|
||||
{
|
||||
append: e.withCtx(() => [
|
||||
e.withDirectives(e.createVNode('span', y, [f, b, B], 512), [
|
||||
[e.vShow, a.loading],
|
||||
]),
|
||||
]),
|
||||
_: 1,
|
||||
},
|
||||
8,
|
||||
[
|
||||
'modelValue',
|
||||
'disabled',
|
||||
'placeholder',
|
||||
'onInput',
|
||||
'onChange',
|
||||
'onFocus',
|
||||
'onBlur',
|
||||
'onEscape',
|
||||
'tabindex',
|
||||
'autofocus',
|
||||
]
|
||||
)),
|
||||
[[e.vShow, n.isFocusing]]
|
||||
)
|
||||
: e.createCommentVNode('v-if', !0),
|
||||
e.withDirectives(
|
||||
e.createVNode(
|
||||
s,
|
||||
{
|
||||
modelValue: n.optionsWithInfo,
|
||||
'onUpdate:modelValue': t[8] || (t[8] = (e) => (n.optionsWithInfo = e)),
|
||||
onClick: n.handleClickForDropdown,
|
||||
'header-height': n.headerAndInputHeight,
|
||||
},
|
||||
{
|
||||
default: e.withCtx(({ option: t }) => [
|
||||
e.renderSlot(l.$slots, 'dropdown-item', { option: t.originalOption }, () => [
|
||||
e.createVNode('span', null, e.toDisplayString(t.label), 1),
|
||||
]),
|
||||
]),
|
||||
_: 1,
|
||||
},
|
||||
8,
|
||||
['modelValue', 'onClick', 'header-height']
|
||||
),
|
||||
[[e.vShow, n.isFocusing]]
|
||||
),
|
||||
],
|
||||
42,
|
||||
[
|
||||
'tabindex',
|
||||
'data-is-focusing',
|
||||
'data-visible-length',
|
||||
'data-not-selected-length',
|
||||
'data-selected-length',
|
||||
'data-total-length',
|
||||
]
|
||||
)
|
||||
);
|
||||
}),
|
||||
(r.__file = 'src/index.vue'),
|
||||
r
|
||||
);
|
||||
})(Vue);
|
||||
Loading…
Add table
Reference in a new issue