vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
69 lines (68 loc) • 2.4 kB
JavaScript
import { defineComponent as A, ref as D, createElementBlock as u, openBlock as n, Fragment as K, renderList as N, unref as e, createElementVNode as a, withDirectives as d, vModelText as i, createBlock as p, createCommentVNode as c } from "vue";
import { useMapInput as b } from "./hook/useMapInput.mjs";
import { Icon as m } from "@vuux/icons";
const w = { class: "app-map-input" }, F = { class: "item-value" }, L = ["onUpdate:modelValue"], R = ["onUpdate:modelValue"], T = { class: "item-buts" }, H = /* @__PURE__ */ A({
name: "MapInput",
__name: "index",
props: {
modelValue: { default: () => [] }
},
emits: ["update:modelValue"],
setup(f, { expose: k, emit: v }) {
const y = f, _ = v, I = D([]), { items: V, syncValue: o, addItem: g, deleteItem: B, canDelete: h, canAdd: C, getAll: x, getById: U, getByKey: E, getByIds: M, getByKeys: z } = b(y, I, _);
return k({
getAll: x,
getById: U,
getByKey: E,
getByIds: M,
getByKeys: z
}), ($, s) => (n(), u("div", w, [
(n(!0), u(K, null, N(e(V), (l, r) => (n(), u("li", {
key: l.id,
class: "map-lists",
ref_for: !0,
ref: "el => itemRefs.value[index] = el"
}, [
a("div", F, [
d(a("input", {
"onUpdate:modelValue": (t) => l.key = t,
placeholder: "key",
class: "is-input",
onInput: s[0] || (s[0] = //@ts-ignore
(...t) => e(o) && e(o)(...t))
}, null, 40, L), [
[i, l.key]
]),
d(a("input", {
"onUpdate:modelValue": (t) => l.value = t,
placeholder: "value",
class: "is-input",
onInput: s[1] || (s[1] = //@ts-ignore
(...t) => e(o) && e(o)(...t))
}, null, 40, R), [
[i, l.value]
])
]),
a("div", T, [
e(h)() ? (n(), p(e(m), {
key: 0,
name: "Icon1052679",
onClick: (t) => e(B)(r),
size: 20,
color: "var(--app-danger)"
}, null, 8, ["onClick"])) : c("", !0),
e(C)(r) ? (n(), p(e(m), {
key: 1,
name: "Icon2384854",
onClick: e(g),
size: 20,
color: "var(--app-theme)"
}, null, 8, ["onClick"])) : c("", !0)
])
]))), 128))
]));
}
});
export {
H as default
};