bootstrap-vue-wrapper 3.0.10 → 3.0.11

package/dist/bootstrap-vue-wrapper.css

@@ -1 +1 @@
-.page-link[data-v-f98dc134]{cursor:pointer}.page-item-first[data-v-f98dc134],.page-item-last[data-v-f98dc134],.page-item-number[data-v-f98dc134]:not(.active){display:none}@media(min-width:576px){.page-item-number[data-v-f98dc134]:not(.active){display:block}}@media(min-width:992px){.page-item-first[data-v-f98dc134],.page-item-last[data-v-f98dc134]{display:block}}.cursor-pointer[data-v-4b67cfc2]{cursor:pointer}
+.page-link[data-v-f98dc134]{cursor:pointer}.page-item-first[data-v-f98dc134],.page-item-last[data-v-f98dc134],.page-item-number[data-v-f98dc134]:not(.active){display:none}@media(min-width:576px){.page-item-number[data-v-f98dc134]:not(.active){display:block}}@media(min-width:992px){.page-item-first[data-v-f98dc134],.page-item-last[data-v-f98dc134]{display:block}}.cursor-pointer[data-v-f3847220]{cursor:pointer}.bs-skeleton-line[data-v-f3847220]{display:block;width:100%;height:.85em;border-radius:999px;margin:.25rem 0;--sk-base: color-mix(in srgb, var(--bs-body-color) 10%, transparent);--sk-shine: color-mix(in srgb, var(--bs-body-color) 18%, transparent);background-image:linear-gradient(90deg,var(--sk-base) 0%,var(--sk-shine) 20%,var(--sk-base) 40%,var(--sk-base) 100%);background-size:200% 100%;background-position:100% 0;animation:bs-skeleton-shimmer-f3847220 1.15s ease-in-out infinite}@supports not (color: color-mix(in srgb,black,white)){.bs-skeleton-line[data-v-f3847220]{background-image:linear-gradient(90deg,#00000014,#00000024 20%,#00000014 40% 100%)}}@keyframes bs-skeleton-shimmer-f3847220{to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.bs-skeleton-line[data-v-f3847220]{animation:none}}

package/dist/components/bs-table/BsTable.vue.d.ts

@@ -70,6 +70,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Use skeleton loading instead of spinner when isLoading is true
+     */
+    skeletonLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {
     /**
      * Is order by active by field?
@@ -173,6 +180,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Use skeleton loading instead of spinner when isLoading is true
+     */
+    skeletonLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onOrderChanged?: ((...args: any[]) => any) | undefined;
     onRowClicked?: ((...args: any[]) => any) | undefined;
@@ -186,5 +200,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     emptyText: string;
     sortAscIconClass: string;
     sortDescIconClass: string;
+    skeletonLoading: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/bs-table/BsTable.vue.js

@@ -1,86 +1,92 @@
 import h from "./BsTable.vue2.js";
-import { openBlock as t, createElementBlock as o, createElementVNode as r, Fragment as a, renderList as u, normalizeClass as d, renderSlot as l, createTextVNode as y, toDisplayString as c, createCommentVNode as p } from "vue";
+import { openBlock as t, createElementBlock as o, createElementVNode as n, Fragment as l, renderList as p, normalizeClass as i, renderSlot as d, createTextVNode as c, toDisplayString as y, createCommentVNode as u } from "vue";
 /* empty css             */
 import C from "../../_virtual/_plugin-vue_export-helper.js";
-const m = { class: "table" }, v = ["onClick"], $ = { key: 0 }, b = ["colspan"], g = { key: 1 }, f = ["colspan"], w = ["textContent"], B = ["data-id", "onClick"], S = { key: 0 }, T = ["colspan"];
-function _(e, k, D, N, V, A) {
+const m = { class: "table" }, v = ["onClick"], g = { key: 0 }, $ = ["colspan"], b = { key: 1 }, f = ["colspan"], w = ["textContent"], L = ["data-id", "onClick"], B = { key: 1 }, S = { key: 0 }, T = ["colspan"];
+function D(e, a, N, V, A, E) {
   return t(), o("table", m, [
-    r("thead", null, [
-      r("tr", null, [
-        (t(!0), o(a, null, u(e.fields, (s) => (t(), o("th", {
+    n("thead", null, [
+      n("tr", null, [
+        (t(!0), o(l, null, p(e.fields, (s) => (t(), o("th", {
           key: s.key,
-          class: d({
+          class: i({
             "cursor-pointer": e.isSortableField(s),
             "active-order-by": e.isActiveOrderBy(s.key),
             thClass: e.thClass
           }),
-          onClick: (i) => e.onHeadClick(s)
+          onClick: (k) => e.onHeadClick(s)
         }, [
-          l(e.$slots, "tr", {}, () => [
-            y(c(s.label) + " ", 1),
+          d(e.$slots, "tr", {}, () => [
+            c(y(s.label) + " ", 1),
             e.isActiveOrderBy(s.key) && e.sortDesc !== void 0 ? (t(), o("i", {
               key: 0,
-              class: d(e.getSortIconClass())
-            }, null, 2)) : p("", !0)
+              class: i(e.getSortIconClass())
+            }, null, 2)) : u("", !0)
           ], !0)
         ], 10, v))), 128))
       ])
     ]),
-    r("tbody", null, [
-      e.isLoading ? (t(), o("tr", $, [
-        r("td", {
+    n("tbody", null, [
+      e.isLoading && !e.skeletonLoading ? (t(), o("tr", g, [
+        n("td", {
           colspan: e.fields.length
         }, [
-          l(e.$slots, "loading", {}, () => [
-            k[0] || (k[0] = r("div", { class: "d-flex justify-content-center p-2" }, [
-              r("div", { class: "spinner-border spinner-border-sm" })
+          d(e.$slots, "loading", {}, () => [
+            a[0] || (a[0] = n("div", { class: "d-flex justify-content-center p-2" }, [
+              n("div", { class: "spinner-border spinner-border-sm" })
             ], -1))
           ], !0)
-        ], 8, b)
-      ])) : e.items.length === 0 ? (t(), o("tr", g, [
-        r("td", {
+        ], 8, $)
+      ])) : e.items.length === 0 ? (t(), o("tr", b, [
+        n("td", {
           colspan: e.fields.length
         }, [
-          l(e.$slots, "empty", {}, () => [
+          d(e.$slots, "empty", {}, () => [
             e.emptyText !== void 0 ? (t(), o("div", {
               key: 0,
               class: "text-center text-muted small",
-              textContent: c(e.emptyText)
-            }, null, 8, w)) : p("", !0)
+              textContent: y(e.emptyText)
+            }, null, 8, w)) : u("", !0)
           ], !0)
         ], 8, f)
-      ])) : (t(!0), o(a, { key: 2 }, u(e.items, (s, i) => (t(), o(a, { key: i }, [
-        r("tr", {
-          class: d([s.trClass || "", { "cursor-pointer": e.rowClickable }]),
+      ])) : (t(!0), o(l, { key: 2 }, p(e.items, (s, k) => (t(), o(l, { key: k }, [
+        n("tr", {
+          class: i([s.trClass || "", { "cursor-pointer": e.rowClickable }]),
           "data-id": s.id,
-          onClick: (n) => e.$emit("rowClicked", s)
+          onClick: (r) => e.$emit("rowClicked", s)
         }, [
-          (t(!0), o(a, null, u(e.fields, (n) => (t(), o("td", {
-            key: n.key,
-            class: d(n.tdClass || e.tdClass)
+          (t(!0), o(l, null, p(e.fields, (r) => (t(), o(l, {
+            key: r.key
           }, [
-            l(e.$slots, "td", {
-              key: i,
-              field: n.key,
-              row: s,
-              value: n.key in s ? s[n.key] : null
-            }, () => [
-              y(c(s[n.key]), 1)
-            ], !0)
-          ], 2))), 128))
-        ], 10, B),
-        s._showRowDetails ? (t(), o("tr", S, [
-          r("td", {
+            e.isLoading ? e.skeletonLoading ? (t(), o("td", B, [...a[1] || (a[1] = [
+              n("div", { class: "bs-skeleton-line" }, null, -1)
+            ])])) : u("", !0) : (t(), o("td", {
+              key: 0,
+              class: i(r.tdClass || e.tdClass)
+            }, [
+              d(e.$slots, "td", {
+                key: k,
+                field: r.key,
+                row: s,
+                value: r.key in s ? s[r.key] : null
+              }, () => [
+                c(y(s[r.key]), 1)
+              ], !0)
+            ], 2))
+          ], 64))), 128))
+        ], 10, L),
+        s._showRowDetails && !e.isLoading ? (t(), o("tr", S, [
+          n("td", {
             colspan: e.fields.length
           }, [
-            l(e.$slots, "row-details", { row: s }, void 0, !0)
+            d(e.$slots, "row-details", { row: s }, void 0, !0)
           ], 8, T)
-        ])) : p("", !0)
+        ])) : u("", !0)
       ], 64))), 128))
     ])
   ]);
 }
-const O = /* @__PURE__ */ C(h, [["render", _], ["__scopeId", "data-v-4b67cfc2"]]);
+const z = /* @__PURE__ */ C(h, [["render", D], ["__scopeId", "data-v-f3847220"]]);
 export {
-  O as default
+  z as default
 };

package/dist/components/bs-table/BsTable.vue2.js

@@ -70,6 +70,13 @@ const s = t({
     sortDescIconClass: {
       type: String,
       default: "bi bi-caret-up-fill"
+    },
+    /**
+     * Use skeleton loading instead of spinner when isLoading is true
+     */
+    skeletonLoading: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["orderChanged", "rowClicked"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "description": "Bootstrap 5 components in Vue3 wrapper.",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",