@frollo/frollo-web-ui 9.0.1 → 9.0.2

package/esm/fw-loading.js

@@ -1,16 +1,16 @@
-import { _ as __default__ } from './fw-loading-bar-DecYSBC_.js';
-import { defineComponent, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, normalizeClass, normalizeStyle, Fragment, renderList } from 'vue';
+import { s as script$3 } from './fw-loading-bar-3x4tkF1B.js';
+import { defineComponent, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, computed, normalizeClass, Fragment, renderList, normalizeStyle, createBlock } from 'vue';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './get-root-colours-DCjlYelc.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
 
 var script$2 = defineComponent({
   name: 'FwLoadingCard',
   components: {
-    FwLoadingBar: __default__
+    FwLoadingBar: script$3
   }
 });
 
-var _hoisted_1$2 = {
+var _hoisted_1$1 = {
   "class": "fw-loading-card rounded shadow-card relative"
 };
 var _hoisted_2$1 = {
@@ -18,7 +18,7 @@ var _hoisted_2$1 = {
 };
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$1, [createVNode(_component_FwLoadingBar, {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("div", _hoisted_2$1, [createVNode(_component_FwLoadingBar, {
     "class": "w-2/4 h-5"
   })]), createVNode(_component_FwLoadingBar, {
     "class": "w-full h-full rounded-t-none"
@@ -30,7 +30,7 @@ script$2.render = render$2;
 var script$1 = defineComponent({
   name: 'FwLoadingTable',
   components: {
-    FwLoadingBar: __default__
+    FwLoadingBar: script$3
   },
   props: {
     columns: {
@@ -42,67 +42,116 @@ var script$1 = defineComponent({
       "default": 5
     }
   },
-  setup: function setup() {
-    var tableClass = "fw-loading-table table-auto cursor-wait table-responsive rounded-md shadow-card";
+  setup: function setup(props) {
+    var wrapperClass = 'fw-loading-table-wrapper cursor-wait table-responsive rounded-md shadow-card overflow-hidden';
+    // Pre-compute arrays once; avoids v-for over raw numbers
+    var colList = computed(function () {
+      return Array.from({
+        length: props.columns
+      }, function (_, i) {
+        return i;
+      });
+    });
+    var rowList = computed(function () {
+      return Array.from({
+        length: props.rows
+      }, function (_, i) {
+        return i;
+      });
+    });
+    // Deterministic pseudo-random width so it doesn't jitter between renders
+    var cellWidth = function cellWidth(r, c) {
+      var seed = (r + 1) * 31 + (c + 1) * 17;
+      var pct = 55 + seed % 40; // 55% -> 95%
+      return "".concat(pct, "%");
+    };
     return {
-      tableClass: tableClass
+      wrapperClass: wrapperClass,
+      colList: colList,
+      rowList: rowList,
+      cellWidth: cellWidth
     };
   }
 });
 
-var _hoisted_1$1 = {
-  "class": "text-p-small"
+var _hoisted_1 = {
+  "class": "fw-loading-table table-auto w-full"
 };
 var _hoisted_2 = {
-  "class": "p-0 m-0"
+  "class": "text-p-small"
 };
 var _hoisted_3 = {
-  "class": "m-0 p-0"
-};
-var _hoisted_4 = {
   "class": "text-p-small bg-white font-light"
 };
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
-  return openBlock(), createElementBlock("table", {
-    "class": normalizeClass(_ctx.tableClass),
+  return openBlock(), createElementBlock("div", {
+    "class": normalizeClass(_ctx.wrapperClass),
     "aria-live": "polite",
     "aria-busy": "true"
-  }, [createElementVNode("thead", _hoisted_1$1, [createElementVNode("tr", _hoisted_2, [createElementVNode("th", _hoisted_3, [createVNode(_component_FwLoadingBar, {
-    "class": "h-[4.5rem] py-6 rounded-b-none",
-    style: normalizeStyle("width:".concat(_ctx.columns, "00%;"))
-  }, null, 8, ["style"])])])]), createElementVNode("tbody", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, function (row, trKey) {
+  }, [createElementVNode("table", _hoisted_1, [createElementVNode("colgroup", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (c) {
+    return openBlock(), createElementBlock("col", {
+      key: c
+    });
+  }), 128))]), createElementVNode("thead", _hoisted_2, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (c) {
+    return openBlock(), createElementBlock("th", {
+      key: 'h' + c,
+      "class": "p-4"
+    }, [createVNode(_component_FwLoadingBar, {
+      "class": "h-6 w-full rounded-b-none"
+    })]);
+  }), 128))])]), createElementVNode("tbody", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rowList, function (r) {
     return openBlock(), createElementBlock("tr", {
-      key: trKey
-    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
+      key: r
+    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.colList, function (c) {
       return openBlock(), createElementBlock("td", {
-        key: colKey,
-        "class": "py-4 pl-5 pr-3 text-left whitespace-nowrap"
+        key: r + '-' + c,
+        "class": "py-3 pl-5 pr-3 text-left whitespace-nowrap"
       }, [createVNode(_component_FwLoadingBar, {
-        "class": "w-full h-7"
-      })]);
+        "class": "h-5",
+        style: normalizeStyle({
+          width: _ctx.cellWidth(r, c)
+        })
+      }, null, 8, ["style"])]);
     }), 128))]);
-  }), 128))])], 2);
+  }), 128))])])], 2);
 }
 
+var css_248z = ".fw-loading-table-wrapper{background:#fff}.fw-loading-table{border-collapse:separate;border-spacing:0}.fw-loading-table tbody tr+tr td{border-top:1px solid rgba(0,0,0,.04)}.fw-loading-table thead th{background:rgba(0,0,0,.02)}";
+var stylesheet = ".fw-loading-table-wrapper{background:#fff}.fw-loading-table{border-collapse:separate;border-spacing:0}.fw-loading-table tbody tr+tr td{border-top:1px solid rgba(0,0,0,.04)}.fw-loading-table thead th{background:rgba(0,0,0,.02)}";
+styleInject(css_248z);
+
 script$1.render = render$1;
 
 var script = defineComponent({
-  name: 'FwLoadingDots'
+  name: 'FwLoadingDots',
+  components: {
+    FwLoadingBar: script$3
+  },
+  setup: function setup() {
+    var _useColours = useColours(),
+      primaryFade10 = _useColours.primaryFade10,
+      primaryFade20 = _useColours.primaryFade20;
+    var barVars = computed(function () {
+      return {
+        '--fw-bar-light': primaryFade10,
+        '--fw-bar-dark': primaryFade20
+      };
+    });
+    return {
+      barVars: barVars
+    };
+  }
 });
 
-var _hoisted_1 = {
-  "class": "fw-loading-dots",
-  "aria-hidden": "true"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1);
+  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
+  return openBlock(), createBlock(_component_FwLoadingBar, {
+    "class": "rounded-full w-full h-[20px] max-w-[200px]",
+    style: normalizeStyle(_ctx.barVars)
+  }, null, 8, ["style"]);
 }
 
-var css_248z = ".fw-loading-dots{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);--tw-shadow-color:var(--colorPrimary);--tw-shadow:var(--tw-shadow-colored);-webkit-animation:l21 .5s linear infinite alternate;-moz-animation:l21 .5s linear infinite alternate;animation:l21 .5s linear infinite alternate;aspect-ratio:1;border-radius:9999px;-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);-webkit-box-shadow:19px 0 0 0,38px 0 0 3px,57px 0 0 7px;box-shadow:19px 0 0 0,38px 0 0 3px,57px 0 0 7px;color:var(--colorPrimary);-webkit-transform:translateX(-32px);-moz-transform:translateX(-32px);-ms-transform:translateX(-32px);transform:translateX(-32px);width:6px}@-webkit-keyframes l21{50%{-webkit-box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px;box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px}}@-moz-keyframes l21{50%{box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px}}@keyframes l21{50%{-webkit-box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px;box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px}}";
-var stylesheet = ".fw-loading-dots{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);--tw-shadow-color:var(--colorPrimary);--tw-shadow:var(--tw-shadow-colored);-webkit-animation:l21 .5s linear infinite alternate;-moz-animation:l21 .5s linear infinite alternate;animation:l21 .5s linear infinite alternate;aspect-ratio:1;border-radius:9999px;-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);-webkit-box-shadow:19px 0 0 0,38px 0 0 3px,57px 0 0 7px;box-shadow:19px 0 0 0,38px 0 0 3px,57px 0 0 7px;color:var(--colorPrimary);-webkit-transform:translateX(-32px);-moz-transform:translateX(-32px);-ms-transform:translateX(-32px);transform:translateX(-32px);width:6px}@-webkit-keyframes l21{50%{-webkit-box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px;box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px}}@-moz-keyframes l21{50%{box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px}}@keyframes l21{50%{-webkit-box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px;box-shadow:19px 0 0 3px,38px 0 0 7px,57px 0 0 3px}}";
-styleInject(css_248z);
-
 script.render = render;
 
-export { __default__ as FwLoadingBar, script$2 as FwLoadingCard, script as FwLoadingDots, script$1 as FwLoadingTable };
+export { script$3 as FwLoadingBar, script$2 as FwLoadingCard, script as FwLoadingDots, script$1 as FwLoadingTable };