@hotelinking/ui 4.35.0 → 4.35.2

package/CHANGELOG.md

@@ -2,4 +2,7 @@
 - Añadido a uiTable el item href
 
 #4.35.0
-- Añadido uiCircleCharts
+- Añadido uiCircleCharts
+
+#4.35.2
+- Añadidos datalabels a las gráficas

package/dist/ui.es.js

@@ -2305,7 +2305,7 @@ const Rr = Ro(ar, [["render", function(l2, r2, s2, u2, d2, c2) {
   return (t3, l3) => (e(), a("ul", Br, [i("li", { class: n({ selected: "24h" === d(s2) }), onClick: l3[0] || (l3[0] = (e2) => c2("24h")) }, " 24H ", 2), i("li", { class: n({ selected: "7d" === d(s2) }), onClick: l3[1] || (l3[1] = (e2) => c2("7d")) }, "7D", 2), i("li", { class: n({ selected: "1m" === d(s2) }), onClick: l3[2] || (l3[2] = (e2) => c2("1m")) }, "1M", 2), i("li", { class: n({ selected: "3m" === d(s2) }), onClick: l3[3] || (l3[3] = (e2) => c2("3m")) }, "3M", 2)]));
 } }), Fr = { class: "chart-header flex flex-row justify-between" }, Nr = { class: "text-sm font-medium text-gray-500 truncate" }, zr = { class: "chart-content" }, $r = { class: "h-full w-full flex items-center justify-center flex-col" }, Hr = i("p", { class: "text-xs uppercase text-gray-300 font-bold" }, "No data", -1), Vr = { class: "card chart apex-chart px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 flex grow h-80" }, Yr = [i("div", { role: "status", class: "w-full animate-pulse h-full flex flex-col" }, [i("div", { class: "h-2.5 w-36 bg-gray-200 rounded-full mb-2.5" }), i("div", { class: "w-48 h-2 mb-6 bg-gray-200 rounded-full" }), i("div", { class: "flex flex-row justify-between items-baseline grow gap-x-1" }, [i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-4/5" }), i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-4/5" }), i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-4/5" }), i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" })])], -1)], Ur = { name: "uiChart" }, qr = Object.assign(Ur, { props: { title: String, id: { type: String, default: "noChartId" }, type: { type: String, default: "area" }, series: { type: Array, required: true }, options: { type: Object, required: true }, loading: { type: Boolean, default: true }, empty: { type: Boolean, default: false }, range: { type: String, default: "24h" }, horizontal: { type: Boolean, default: false }, stacked: { type: Boolean, default: false }, height: { type: Number, default: 320 } }, emits: ["selectedRange", "chartUpdated", "dataPointSelection"], setup(t2, { emit: l2 }) {
   const r2 = l2, s2 = t2;
-  let c2 = { chart: { toolbar: { show: false }, zoom: { enabled: false } }, colors: ["#715aff", "#00ffff", "#aba9ba"], stroke: { show: true, curve: "stepline", lineCap: "butt", width: 1, dashArray: 0 }, dataLabels: { enabled: false }, markers: { strokeWidth: 0, size: 4, hover: { size: 8 } } };
+  let c2 = { chart: { toolbar: { show: false }, zoom: { enabled: false } }, colors: ["#715aff", "#00ffff", "#aba9ba"], stroke: { show: true, curve: "stepline", lineCap: "butt", width: 1, dashArray: 0 }, dataLabels: { enabled: true }, markers: { strokeWidth: 0, size: 4, hover: { size: 8 } } };
   "area" === s2.type && (c2.tooltip = { intersect: true, shared: false });
   const p2 = u(() => s2.series), g2 = u(() => (c2.chart.stacked = s2.stacked, { ...c2, ...s2.options, plotOptions: { bar: { horizontal: s2.horizontal } } })), m2 = () => r2("chartUpdated"), f2 = (e2, t3, l3) => {
     r2("dataPointSelection", { id: s2.id, chartContext: t3, config: l3, event: e2 });
@@ -2322,9 +2322,9 @@ const Gr = Ro(Wr, [["render", function(t2, l2, n2, o2, r2, i2) {
     return e2;
   });
   return (l3, s2) => t2.loading ? (e(), a("div", pi, gi)) : (e(), a("div", ei, [i("div", ti, [i("a", li, [r(l3.$slots, "previous")]), i("a", ni, [r(l3.$slots, "next")])]), i("div", ai, [i("div", null, [i("p", oi, [r(l3.$slots, "showing"), I(), i("span", ri, _(t2.current + " "), 1), r(l3.$slots, "of"), I(), i("span", ii, _(t2.total), 1)])]), i("div", null, [i("nav", si, [B(i("button", { onClick: s2[0] || (s2[0] = (e2) => c2("changePage", t2.current - 1)), class: "relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" }, [i("span", ui, [r(l3.$slots, "previous")]), o(d(an), { class: "h-5 w-5", "aria-hidden": "true" })], 512), [[L, 1 !== t2.current]]), (e(true), a(w, null, j(v2.value, (l4) => (e(), a("button", { onClick: (e2) => c2("changePage", l4), key: l4, "aria-current": "page", class: n([[l4 === t2.current ? "z-10 bg-indigo-50 border-indigo-500 text-indigo-600" : "bg-white border-gray-300 text-gray-500 hover:bg-gray-50"], "relative inline-flex items-center px-4 py-2 border text-sm font-medium"]) }, _(l4), 11, di))), 128)), B(i("button", { onClick: s2[1] || (s2[1] = (e2) => c2("changePage", t2.current + 1)), class: "relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" }, [i("span", ci, [r(l3.$slots, "next")]), o(d(on), { class: "h-5 w-5", "aria-hidden": "true" })], 512), [[L, t2.current !== t2.total]])])])])]));
-} }), vi = { class: "hidden md:flex md:flex-col sticky md:inset-y-0" }, hi = { class: "flex flex-col flex-grow overflow-y-auto" }, yi = { class: "grow flex flex-col" }, bi = { class: "flex-1 space-y-1", "aria-label": "Sidebar" }, xi = { key: 0 }, wi = ["onClick"], ki = { key: 0 }, Si = { key: 0, class: "flex-1" }, Ci = { key: 1, class: "flex-1" }, Oi = [i("div", { class: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-300 w-1/2" }, null, -1)], Mi = { key: 0 }, Ti = { key: 1, class: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-300 w-1/2" }, Di = { class: "h-12 flex flex-row items-center" }, Ei = [i("div", { class: "w-6 h-6 animate-pulse bg-gray-200 rounded-full dark:bg-gray-300 mr-4" }, null, -1), i("div", { class: "h-3 animate-pulse bg-gray-200 rounded-full dark:bg-gray-300 grow" }, null, -1)], Ii = { name: "uiSidebar" }, _i = Object.assign(Ii, { props: { navigation: { type: Array, required: true }, loading: { type: Boolean, default: true } }, emits: ["sideBarClick"], setup(l2, { emit: r2 }) {
+} }), vi = { class: "hidden md:flex md:flex-col sticky md:inset-y-0" }, hi = { class: "flex flex-col flex-grow overflow-y-auto" }, yi = { class: "grow flex flex-col" }, bi = { class: "flex-1 space-y-1", "aria-label": "Sidebar" }, xi = { key: 0 }, wi = ["onClick"], ki = { key: 0, class: "align-left" }, Si = { key: 0, class: "flex-1 align-left" }, Ci = { key: 1, class: "flex-1" }, Oi = [i("div", { class: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-300 w-1/2" }, null, -1)], Mi = { key: 0, class: "align-left" }, Ti = { key: 1, class: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-300 w-1/2" }, Di = { class: "h-12 flex flex-row items-center" }, Ei = [i("div", { class: "w-6 h-6 animate-pulse bg-gray-200 rounded-full dark:bg-gray-300 mr-4" }, null, -1), i("div", { class: "h-3 animate-pulse bg-gray-200 rounded-full dark:bg-gray-300 grow" }, null, -1)], Ii = { name: "uiSidebar" }, _i = Object.assign(Ii, { props: { navigation: { type: Array, required: true }, loading: { type: Boolean, default: true } }, emits: ["sideBarClick"], setup(l2, { emit: r2 }) {
   const s2 = r2;
-  return (r3, u2) => (e(), a("div", vi, [i("div", hi, [i("div", yi, [i("nav", bi, [l2.loading ? (e(), a(w, { key: 1 }, j(5, (e2) => i("div", Di, Ei)), 64)) : (e(true), a(w, { key: 0 }, j(l2.navigation, (r4) => (e(), a(w, { key: r4.name }, [r4.children ? (e(), t(d(hl), { key: 1, as: "div", class: "space-y-1" }, { default: E(({ open: i2 }) => [o(d(yl), { class: n([r4.current ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900", "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none"]) }, { default: E(() => [o(K, { loading: l2.loading, icon: r4.icon, class: "mr-3 flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500", "aria-hidden": "true" }, null, 8, ["loading", "icon"]), l2.loading ? (e(), a("div", Ci, Oi)) : (e(), a("span", Si, _(r4.name), 1)), o(d(on), { class: n([i2 ? "text-gray-400 rotate-90" : "text-gray-400", "ml-3 flex-shrink-0 h-3 w-3 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150"]) }, null, 8, ["class"])]), _: 2 }, 1032, ["class"]), o(d(bl), { class: "space-y-1" }, { default: E(() => [(e(true), a(w, null, j(r4.children, (n2) => (e(), t(d(yl), { onClick: (e2) => s2("sideBarClick", n2.id), key: n2.name, class: "group w-full flex items-center pl-11 pr-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50" }, { default: E(() => [l2.loading ? (e(), a("div", Ti)) : (e(), a("span", Mi, _(n2.name), 1))]), _: 2 }, 1032, ["onClick"]))), 128))]), _: 2 }, 1024)]), _: 2 }, 1024)) : (e(), a("div", xi, [i("button", { onClick: (e2) => s2("sideBarClick", r4.id), class: n([r4.current ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900", "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"]) }, [o(K, { loading: l2.loading, icon: r4.icon, class: n([r4.current ? "text-white" : "text-gray-400 group-hover:text-gray-500", "mr-3 flex-shrink-0 h-6 w-6"]), "aria-hidden": "true" }, null, 8, ["loading", "icon", "class"]), l2.loading ? R("", true) : (e(), a("span", ki, _(r4.name), 1))], 10, wi)]))], 64))), 128))])])])]));
+  return (r3, u2) => (e(), a("div", vi, [i("div", hi, [i("div", yi, [i("nav", bi, [l2.loading ? (e(), a(w, { key: 1 }, j(5, (e2) => i("div", Di, Ei)), 64)) : (e(true), a(w, { key: 0 }, j(l2.navigation, (r4) => (e(), a(w, { key: r4.name }, [r4.children ? (e(), t(d(hl), { key: 1, as: "div", class: "space-y-1" }, { default: E(({ open: i2 }) => [o(d(yl), { class: n([r4.current ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900", "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none"]) }, { default: E(() => [o(K, { loading: l2.loading, icon: r4.icon, class: n([r4.current ? "text-white" : "text-gray-400 group-hover:text-gray-500", "mr-3 flex-shrink-0 h-6 w-6"]), "aria-hidden": "true" }, null, 8, ["loading", "icon", "class"]), l2.loading ? (e(), a("div", Ci, Oi)) : (e(), a("span", Si, _(r4.name), 1)), o(d(on), { class: n([i2 ? "text-gray-400 rotate-90" : "text-gray-400", "ml-3 flex-shrink-0 h-3 w-3 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150"]) }, null, 8, ["class"])]), _: 2 }, 1032, ["class"]), o(d(bl), { class: "space-y-1" }, { default: E(() => [(e(true), a(w, null, j(r4.children, (n2) => (e(), t(d(yl), { onClick: (e2) => s2("sideBarClick", n2.id), key: n2.name, class: "group w-full flex items-center pl-11 pr-2 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50" }, { default: E(() => [l2.loading ? (e(), a("div", Ti)) : (e(), a("span", Mi, _(n2.name), 1))]), _: 2 }, 1032, ["onClick"]))), 128))]), _: 2 }, 1024)]), _: 2 }, 1024)) : (e(), a("div", xi, [i("button", { onClick: (e2) => s2("sideBarClick", r4.id), class: n([r4.current ? "bg-indigo-600 text-white" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900", "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"]) }, [o(K, { loading: l2.loading, icon: r4.icon, class: n([r4.current ? "text-white" : "text-gray-400 group-hover:text-gray-500", "mr-3 flex-shrink-0 h-6 w-6"]), "aria-hidden": "true" }, null, 8, ["loading", "icon", "class"]), l2.loading ? R("", true) : (e(), a("span", ki, _(r4.name), 1))], 10, wi)]))], 64))), 128))])])])]));
 } }), Pi = { key: 0 }, ji = { class: "ml-16 text-sm font-medium text-gray-500 truncate" }, Ri = { class: "ml-16 flex items-baseline pb-5" }, Bi = { class: "text-2xl font-semibold text-gray-900" }, Ai = { class: "absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6" }, Li = { class: "text-sm" }, Fi = { key: 1 }, Ni = { class: "relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden h-full pb-6" }, zi = { class: "absolute bg-gray-200 rounded-md p-3 animate-pulse" }, $i = i("div", { class: "ml-16" }, [i("div", { class: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-300 w-1/2 mb-4 animate-pulse" })], -1), Hi = i("div", { class: "ml-16" }, [i("div", { class: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-300 w-1/2 animate-pulse" })], -1), Vi = { name: "uiStats" }, Yi = Object.assign(Vi, { props: { item: { type: Object, required: true }, loading: { type: Boolean, default: true } }, emits: ["statClick"], setup(l2, { emit: r2 }) {
   const s2 = r2;
   return (r3, u2) => l2.loading ? (e(), a("div", Fi, [i("div", Ni, [i("dt", null, [i("div", zi, [o(K, { loading: l2.loading, icon: l2.item.icon, class: "h-6 w-6 text-white", "aria-hidden": "true" }, null, 8, ["loading", "icon"])]), $i, Hi])])])) : (e(), a("div", Pi, [i("div", { class: n(["relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden h-full", { "pb-12": l2.item.showFooter }]) }, [i("dt", null, [i("div", { class: n(["absolute rounded-md p-3", { "bg-indigo-500": !l2.item.color, "bg-green-500": "success" === l2.item.color, "bg-red-500": "danger" === l2.item.color, "bg-yellow-500": "warning" === l2.item.color }]) }, [o(K, { icon: l2.item.icon, class: "h-6 w-6 text-white", "aria-hidden": "true", loading: l2.loading }, null, 8, ["icon", "loading"])], 2), i("p", ji, _(l2.item.name), 1)]), i("dd", Ri, [i("p", Bi, _(l2.item.stat), 1), l2.item.changeType ? (e(), a("p", { key: 0, class: n([{ "text-green-600": "increase" === l2.item.changeType, "text-red-600": "decrease" === l2.item.changeType, "text-black": "neutral" === l2.item.changeType }, "ml-2 flex items-baseline text-sm font-semibold"]) }, ["increase" === l2.item.changeType ? (e(), t(d(Ql), { key: 0, class: "self-center flex-shrink-0 h-3 w-3 text-green-500", "aria-hidden": "true" })) : R("", true), "decrease" === l2.item.changeType ? (e(), t(d(Xl), { key: 1, class: "self-center flex-shrink-0 h-3 w-3 text-red-500", "aria-hidden": "true" })) : R("", true), I(" " + _(l2.item.change), 1)], 2)) : R("", true), B(i("div", Ai, [i("div", Li, [i("span", { onClick: u2[0] || (u2[0] = (e2) => s2("statClick", l2.item.id)), class: "font-medium text-indigo-600 hover:text-indigo-500 cursor-pointer" }, _(l2.item.actionText), 1)])], 512), [[L, l2.item.showFooter]])])], 2)]));
@@ -2380,7 +2380,7 @@ const Nu = Ro(fu, [["render", function(l2, r2, s2, u2, d2, c2) {
   }), (n3, s2) => l2.loading ? (e(), a("div", jd, Rd)) : (e(), t(d(q), { key: 0, modelValue: d(r2), "onUpdate:modelValue": s2[0] || (s2[0] = (e2) => V(r2) ? r2.value = e2 : r2 = e2) }, { item: E(({ item: t2 }) => [i("div", Td, [i("div", Dd, [o(K, { icon: d(en), loading: false, color: "gray", class: "mr-4", size: "big" }, null, 8, ["icon"]), i("div", Ed, [i("p", Id, _(t2.name), 1), t2.description ? (e(), a("p", _d, _(t2.description), 1)) : R("", true)]), i("div", Pd, _(d(r2).indexOf(t2) + 1), 1)])])]), _: 1 }, 8, ["modelValue"]));
 } }), Ld = { class: "chart-header flex flex-row justify-between" }, Fd = { class: "text-sm font-medium text-gray-500 truncate" }, Nd = { class: "chart-content" }, zd = { class: "h-full w-full flex items-center justify-center flex-col" }, $d = i("p", { class: "text-xs uppercase text-gray-300 font-bold" }, "No data", -1), Hd = { class: "card chart apex-chart px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 flex grow h-80" }, Vd = [i("div", { role: "status", class: "w-full animate-pulse h-full flex flex-col" }, [i("div", { class: "h-2.5 w-36 bg-gray-200 rounded-full mb-2.5" }), i("div", { class: "w-48 h-2 mb-6 bg-gray-200 rounded-full" }), i("div", { class: "flex flex-row justify-between items-baseline grow gap-x-1" }, [i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-4/5" }), i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-4/5" }), i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-4/5" }), i("div", { class: "w-full bg-gray-200 rounded h-full" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" }), i("div", { class: "w-full bg-gray-200 rounded h-1/3" }), i("div", { class: "w-full bg-gray-200 rounded h-1/2" })])], -1)], Yd = { name: "uiCircleChart" }, Ud = Object.assign(Yd, { props: { title: String, id: { type: String, default: "noChartId" }, series: { type: Array, required: true }, labels: { type: Array, required: true }, loading: { type: Boolean, default: true }, empty: { type: Boolean, default: false }, range: { type: String, default: "24h" }, height: { type: Number, default: 320 } }, emits: ["selectedRange", "chartUpdated", "dataPointSelection"], setup(t2, { emit: l2 }) {
   const r2 = l2, s2 = t2;
-  let c2 = { labels: s2.labels, chart: { toolbar: { show: false }, zoom: { enabled: false } }, colors: ["#715aff", "#00ffff", "#aba9ba"], stroke: { show: true, curve: "stepline", lineCap: "butt", width: 1, dashArray: 0 }, dataLabels: { enabled: false } };
+  let c2 = { labels: s2.labels, chart: { toolbar: { show: false }, zoom: { enabled: false } }, colors: ["#715aff", "#00ffff", "#aba9ba"], stroke: { show: true, curve: "stepline", lineCap: "butt", width: 1, dashArray: 0 }, dataLabels: { enabled: true, dropShadow: { enabled: false } } };
   const p2 = u(() => s2.series), g2 = u(() => ({ ...c2, ...s2.options })), m2 = () => r2("chartUpdated"), f2 = (e2, t3, l3) => {
     r2("dataPointSelection", { id: s2.id, chartContext: t3, config: l3, event: e2 });
   };