@topvisor/ui
Version:
Topvisor UI-kit Vue
191 lines (188 loc) • 7.64 kB
JavaScript
import { Core as _autoloadCSSCore } from '../core/app.js';
const fileNames = ['../assets/dialog_selectorRegions.css'].map(fileName => import.meta.resolve(fileName));
_autoloadCSSCore.insertCSSLinkToPage(fileNames, true);
import { defineComponent as j, ref as I, reactive as w, computed as D, watch as M, resolveComponent as R, createBlock as V, openBlock as d, unref as h, withCtx as u, createVNode as m, createTextVNode as L, toDisplayString as v, createElementVNode as _, createElementBlock as f, Fragment as O, renderList as P, createCommentVNode as x } from "vue";
import { _ as G, a as X } from "./page.vue_vue_type_script_setup_true_lang-Bz40v24a.es.js";
import { b as Q } from "./utils-CLxr2Yzo.es.js";
import { genFlagLinkByCountryCode as q } from "../utils/string.js";
import { getSearcherGIcon as z, getLangLabel as H, getDeviceGIcon as J } from "../utils/searchers.js";
import { C as B } from "./forms-EIQ_3SBd.es.js";
const K = { class: "dialog_selectorRegions_header" }, W = ["data-top-icon"], Y = ["src", "alt"], Z = { class: "top-ellipsis" }, F = { class: "dialog_selectorRegions_regionAreaName" }, ee = { key: 1 }, oe = ["data-top-icon"], ie = /* @__PURE__ */ j({
id: "selectorRegions",
__name: "dialog_selectorRegions",
props: {
regions: {},
regionsIndexes: {},
"@update:regionsIndexes": { type: Function }
},
setup(N) {
const l = N, k = Q(), a = I([]), i = I(null), p = w({
searcher_key: -1,
key: -1,
name: -1
}), b = D({
get() {
return a.value.every((o) => o.selected);
},
set(o) {
a.value = a.value.map((n) => ({ ...n, selected: o }));
}
}), y = (o) => {
p[o] = -p[o], a.value.sort((n, e) => !n[o] || !e[o] ? -1 : n[o] >= e[o] ? p[o] : -p[o]);
}, S = () => {
var n;
if (!a.value.some((e) => e.selected)) return;
const o = a.value.filter((e) => e.selected).map((e) => e.index);
(n = l["@update:regionsIndexes"]) == null || n.call(l, o), k.close();
};
M([
() => l.regions,
() => l.regionsIndexes
], () => {
if (a.value = [], !l.regions || !l.regionsIndexes) return;
let o = [...l.regions];
const n = new Map(l.regionsIndexes.map((e, s) => [e, s]));
o.sort((e, s) => {
const t = n.get(e.index) ?? Number.MAX_VALUE, r = n.get(s.index) ?? Number.MAX_VALUE;
return t - r;
}), o.forEach((e) => {
var C;
let s = e.name;
e.areaName && (s += ` (${e.areaName})`);
const t = ((C = l.regionsIndexes) == null ? void 0 : C.includes(e.index)) ?? !1, r = z(e.searcher_key), g = e.lang !== void 0 ? H(e.searcher_key ?? 999, e.lang) : void 0, c = e.device !== void 0 ? J(e.device) : void 0, U = e.countryCode !== void 0 ? q(e.countryCode) : void 0, E = {
...e,
selected: t,
title: s,
searcherIcon: r,
langLabel: g,
deviceIcon: c,
flagLink: U
};
a.value.push(E);
});
});
const A = () => {
var o;
if (!((o = B.$) != null && o.ui.sortable)) {
console.info("Для работы сортировки требуется глобальная загрузка jQuery UI Sortable");
return;
}
i.value && $(i.value).sortable({
distance: 10,
stop: () => {
const n = [...i.value.children].map((e) => Number(e.getAttribute("data-region-index")));
a.value.sort((e, s) => n.indexOf(e.index) - n.indexOf(s.index));
}
});
}, T = () => {
var o;
(o = B.$) != null && o.ui.sortable && i.value && $(i.value).sortable("destroy");
};
return (o, n) => {
const e = R("TopCheckbox"), s = R("TopButton");
return d(), V(h(G), {
id: h(k).id,
pageActive: "selectorRegions",
class: "dialog_selectorRegions",
height: "600px",
width: "600px",
onOpen: A,
onClose: T
}, {
default: u(() => [
m(h(X), {
name: "selectorRegions",
order: 0
}, {
header: u(() => {
var t, r, g;
return [
_("div", K, [
m(e, {
modelValue: b.value,
"onUpdate:modelValue": n[0] || (n[0] = (c) => b.value = c)
}, null, 8, ["modelValue"]),
m(s, {
class: "dialog_selectorRegions_sortButton",
color: "theme",
"data-top-icon": "",
onClick: n[1] || (n[1] = (c) => y("searcher_key")),
title: (t = o.$i18n.Projects) == null ? void 0 : t.Sort_by_search_engine
}, null, 8, ["title"]),
m(s, {
class: "dialog_selectorRegions_sortButton",
color: "theme",
"data-top-icon": "",
onClick: n[2] || (n[2] = (c) => y("key")),
title: (r = o.$i18n.Projects) == null ? void 0 : r.Sort_by_yande_region_code
}, null, 8, ["title"]),
m(s, {
class: "dialog_selectorRegions_sortButton",
color: "theme",
"data-top-icon": "",
onClick: n[3] || (n[3] = (c) => y("name")),
title: (g = o.$i18n.Projects) == null ? void 0 : g.Sort_by_lphabetically
}, null, 8, ["title"])
])
];
}),
body: u(() => [
_("div", {
ref_key: "elRegions",
ref: i
}, [
(d(!0), f(O, null, P(a.value, (t) => (d(), V(e, {
key: t.index,
modelValue: t.selected,
"onUpdate:modelValue": (r) => t.selected = r,
class: "dialog_selectorRegions_region",
"data-region-index": t.index
}, {
default: u(() => [
_("div", {
class: "dialog_selectorRegions_regionSearcherIcon",
"data-top-icon": t.searcherIcon
}, null, 8, W),
t.flagLink ? (d(), f("img", {
key: 0,
class: "top-flag",
src: "//topvisor.dev" + t.flagLink,
alt: t.countryCode
}, null, 8, Y)) : x("", !0),
_("div", Z, [
L(v(t.name) + " ", 1),
_("span", F, v(t.areaName), 1)
]),
t.langLabel ? (d(), f("div", ee, " [" + v(t.langLabel) + "] ", 1)) : x("", !0),
t.deviceIcon ? (d(), f("div", {
key: 2,
"data-top-icon": t.deviceIcon
}, null, 8, oe)) : x("", !0)
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue", "data-region-index"]))), 128))
], 512)
]),
footer: u(() => [
m(s, { onClick: S }, {
default: u(() => {
var t;
return [
L(v((t = o.$i18n.Common) == null ? void 0 : t.Apply), 1)
];
}),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["id"]);
};
}
});
export {
ie as default
};
//# sourceMappingURL=dialog_selectorRegions-BYuC3Yqz.es.js.map