ocn-vue-components
Version:
A collection of Vue 3 components with @vorms/core
323 lines (322 loc) • 11.5 kB
JavaScript
import { computed as p, openBlock as d, createElementBlock as i, normalizeClass as M, toDisplayString as F, unref as o, createTextVNode as O, createCommentVNode as x, createElementVNode as t, createVNode as m, withDirectives as v, mergeProps as S, isRef as N, vModelText as V, Fragment as C, renderList as B, vModelSelect as U, createBlock as w, vModelCheckbox as _, toRefs as z, defineAsyncComponent as A, ref as D, renderSlot as R } from "vue";
import { useField as k } from "@vorms/core";
const $ = {
__name: "LabelField",
props: {
field: {
type: String,
required: !0
},
labelName: {
type: String,
default: ""
}
},
setup(e) {
const { field: u } = e, { error: r } = k(u), s = p(() => r.value ? "block mb-2 text-sm font-medium text-red-700 dark:text-red-500" : "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300");
return (n, c) => (d(), i("label", {
class: M(s.value)
}, F(e.labelName), 3));
}
}, H = {
key: 0,
class: "mt-2 text-sm text-red-600 dark:text-red-500"
}, I = /* @__PURE__ */ t("span", { class: "font-medium" }, "Hata!", -1), q = {
__name: "ErrorField",
props: {
field: {
type: String,
required: !0
}
},
setup(e) {
const { field: u } = e, { error: r } = k(u);
return (s, n) => o(r) ? (d(), i("p", H, [
I,
O(" " + F(o(r)), 1)
])) : x("", !0);
}
}, P = ["placeholder"], ue = {
__name: "TextField",
props: {
field: {
type: String,
required: !0
},
labelName: {
type: String,
required: !0
},
placeholder: {
type: String,
default: null
},
isShow: {
type: Boolean,
default: !0
}
},
setup(e) {
const { field: u } = e, { value: r, error: s, attrs: n } = k(u), c = p(() => s.value ? "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" : "bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");
return (b, l) => (d(), i("div", null, [
m($, {
labelName: e.labelName,
field: e.field
}, null, 8, ["labelName", "field"]),
v(t("input", S({
class: c.value,
type: "text",
placeholder: e.placeholder,
"onUpdate:modelValue": l[0] || (l[0] = (a) => N(r) ? r.value = a : null)
}, o(n)), null, 16, P), [
[V, o(r)]
]),
m(q, { field: e.field }, null, 8, ["field"])
]));
}
}, G = ["placeholder"], J = ["value"], se = {
__name: "SelectField",
props: {
field: {
type: String,
required: !0
},
labelName: {
type: String,
required: !0
},
placeholder: {
type: String,
default: null
},
options: {
type: Array,
required: !0
}
},
setup(e) {
const { field: u } = e, { value: r, error: s, attrs: n } = k(u), c = p(() => s.value ? "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" : "bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");
return (b, l) => (d(), i("div", null, [
m($, {
labelName: e.labelName,
field: e.field
}, null, 8, ["labelName", "field"]),
v(t("select", S({
class: c.value,
placeholder: e.placeholder,
"onUpdate:modelValue": l[0] || (l[0] = (a) => N(r) ? r.value = a : null)
}, o(n)), [
(d(!0), i(C, null, B(e.options, (a) => (d(), i("option", {
key: a.value,
value: a.value
}, F(a.label), 9, J))), 128))
], 16, G), [
[U, o(r)]
]),
m(q, { field: e.field }, null, 8, ["field"])
]));
}
}, K = ["placeholder", "disabled"], ne = {
__name: "CheckboxField",
props: {
field: {
type: String,
required: !0
},
labelName: {
type: String,
required: !0
},
placeholder: {
type: String,
default: null
},
isShow: {
type: Object,
default: () => ({
label: !0,
error: !0,
isDisabled: !1
})
}
},
setup(e) {
const { field: u } = e, { value: r, error: s, attrs: n } = k(u), c = p(() => s.value ? "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" : "bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");
return (b, l) => (d(), i("div", null, [
e.isShow.label ? (d(), w($, {
key: 0,
labelName: e.labelName,
field: e.field
}, null, 8, ["labelName", "field"])) : x("", !0),
v(t("input", S({
class: c.value,
type: "checkbox",
placeholder: e.placeholder,
"onUpdate:modelValue": l[0] || (l[0] = (a) => N(r) ? r.value = a : null)
}, o(n), {
onChange: l[1] || (l[1] = (a) => b.$emit("onChange", o(r))),
disabled: e.isShow.isDisabled
}), null, 16, K), [
[_, o(r)]
]),
e.isShow.error ? (d(), w(q, {
key: 1,
field: e.field
}, null, 8, ["field"])) : x("", !0)
]));
}
}, Q = ["step", "placeholder", "disabled"], ie = {
__name: "NumberField",
props: {
field: {
type: String,
required: !0
},
labelName: {
type: String,
required: !0
},
placeholder: {
type: String,
default: null
},
isShow: {
type: Object,
default: () => ({
label: !0,
error: !0,
isDisabled: !1
})
},
step: {
type: String,
default: null
}
},
setup(e) {
const { field: u } = e, { value: r, error: s, attrs: n } = k(u), c = p(() => s.value ? "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" : "bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");
return (b, l) => (d(), i("div", null, [
e.isShow.label ? (d(), w($, {
key: 0,
labelName: e.labelName,
field: e.field
}, null, 8, ["labelName", "field"])) : x("", !0),
v(t("input", S({
class: c.value,
type: "number",
step: e.step ? e.step : null,
placeholder: e.placeholder,
"onUpdate:modelValue": l[0] || (l[0] = (a) => N(r) ? r.value = a : null)
}, o(n), {
onInput: l[1] || (l[1] = (a) => b.$emit("onInput", o(r))),
disabled: e.isShow.isDisabled
}), null, 16, Q), [
[V, o(r)]
]),
e.isShow.error ? (d(), w(q, {
key: 1,
field: e.field
}, null, 8, ["field"])) : x("", !0)
]));
}
}, W = { class: "pb-4 bg-white dark:bg-gray-900" }, X = /* @__PURE__ */ t("label", {
for: "table-search",
class: "sr-only"
}, "Search", -1), Y = { class: "relative mt-1" }, Z = /* @__PURE__ */ t("div", { class: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none" }, [
/* @__PURE__ */ t("svg", {
class: "w-5 h-5 text-gray-500 dark:text-gray-400",
"aria-hidden": "true",
fill: "currentColor",
viewBox: "0 0 20 20",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ t("path", {
"fill-rule": "evenodd",
d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
"clip-rule": "evenodd"
})
])
], -1), ee = { class: "relative overflow-x-auto shadow-md sm:rounded-lg" }, re = { class: "w-full text-sm text-left text-gray-500 dark:text-gray-400" }, le = { class: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" }, te = /* @__PURE__ */ t("th", {
scope: "col",
class: "px-6 py-3"
}, null, -1), ae = { class: "flex items-center px-6 py-4 space-x-3" }, ce = {
__name: "Table",
props: {
headers: {
type: Object,
required: !0
},
data: {
type: Array,
required: !0
}
},
setup(e) {
const u = e, { data: r, headers: s } = z(u), n = A(() => import("./TableHeader-9d4bc4f2.js")), c = A(() => import("./TableData-b2cb07a2.js")), b = D(null), l = D("asc"), a = D(""), j = p(() => {
let g = r.value;
if (a.value) {
const y = a.value.toLowerCase();
g = g.filter((f) => Object.values(f).some((h) => String(h).toLowerCase().includes(y)));
}
if (b.value !== null) {
const y = Object.keys(s.value)[b.value];
g.sort((f, h) => {
const E = f[y], T = h[y];
return E < T ? l.value === "asc" ? -1 : 1 : E > T ? l.value === "asc" ? 1 : -1 : 0;
});
}
return g;
}), L = (g) => {
g === b.value ? l.value = l.value === "asc" ? "desc" : "asc" : (b.value = g, l.value = "asc");
};
return (g, y) => (d(), i(C, null, [
t("div", W, [
X,
t("div", Y, [
Z,
v(t("input", {
type: "text",
"onUpdate:modelValue": y[0] || (y[0] = (f) => a.value = f),
id: "table-search",
class: "block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
placeholder: "Ara..."
}, null, 512), [
[V, a.value]
])
])
]),
t("div", ee, [
t("table", re, [
t("thead", le, [
t("tr", null, [
m(o(n), { onSortList: L }),
te
])
]),
t("tbody", null, [
(d(!0), i(C, null, B(j.value, (f, h) => (d(), i("tr", {
class: "bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 odd:bg-white even:bg-gray-50",
key: f.id
}, [
m(o(c), {
item: f,
index: h,
headers: o(s)
}, null, 8, ["item", "index", "headers"]),
t("td", ae, [
R(g.$slots, "actions", { item: f })
])
]))), 128))
])
])
])
], 64));
}
};
export {
ne as CheckboxField,
ie as NumberField,
se as SelectField,
ce as Table,
ue as TextField
};