@frollo/frollo-web-ui 5.0.1 → 5.0.3

package/esm/fw-table-row-d390fe77.js

@@ -0,0 +1,492 @@
+import { t as toString$1 } from './es.number.constructor-98bae04f.js';
+import { d as deletePropertyOrThrow$1 } from './delete-property-or-throw-cd4c57d6.js';
+import { i as toAbsoluteIndex$1, l as lengthOfArrayLike$2, j as engineUserAgent, f as functionUncurryThis, k as aCallable$1, e as toObject$1, h as fails$1, m as engineV8Version } from './is-forced-fc680e39.js';
+import { _ as _export } from './export-8a363004.js';
+import { c as createProperty$1 } from './create-property-c70ecc08.js';
+import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-fc2e0d8d.js';
+import { d as render$3, e as render$4 } from './index-04d3cb23.js';
+import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createVNode } from 'vue';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
+import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var es_array_sort = {};
+
+var toAbsoluteIndex = toAbsoluteIndex$1;
+var lengthOfArrayLike$1 = lengthOfArrayLike$2;
+var createProperty = createProperty$1;
+
+var $Array = Array;
+var max = Math.max;
+
+var arraySliceSimple = function (O, start, end) {
+  var length = lengthOfArrayLike$1(O);
+  var k = toAbsoluteIndex(start, length);
+  var fin = toAbsoluteIndex(end === undefined ? length : end, length);
+  var result = $Array(max(fin - k, 0));
+  for (var n = 0; k < fin; k++, n++) createProperty(result, n, O[k]);
+  result.length = n;
+  return result;
+};
+
+var arraySlice = arraySliceSimple;
+
+var floor = Math.floor;
+
+var mergeSort = function (array, comparefn) {
+  var length = array.length;
+  var middle = floor(length / 2);
+  return length < 8 ? insertionSort(array, comparefn) : merge(
+    array,
+    mergeSort(arraySlice(array, 0, middle), comparefn),
+    mergeSort(arraySlice(array, middle), comparefn),
+    comparefn
+  );
+};
+
+var insertionSort = function (array, comparefn) {
+  var length = array.length;
+  var i = 1;
+  var element, j;
+
+  while (i < length) {
+    j = i;
+    element = array[i];
+    while (j && comparefn(array[j - 1], element) > 0) {
+      array[j] = array[--j];
+    }
+    if (j !== i++) array[j] = element;
+  } return array;
+};
+
+var merge = function (array, left, right, comparefn) {
+  var llength = left.length;
+  var rlength = right.length;
+  var lindex = 0;
+  var rindex = 0;
+
+  while (lindex < llength || rindex < rlength) {
+    array[lindex + rindex] = (lindex < llength && rindex < rlength)
+      ? comparefn(left[lindex], right[rindex]) <= 0 ? left[lindex++] : right[rindex++]
+      : lindex < llength ? left[lindex++] : right[rindex++];
+  } return array;
+};
+
+var arraySort = mergeSort;
+
+var userAgent$1 = engineUserAgent;
+
+var firefox = userAgent$1.match(/firefox\/(\d+)/i);
+
+var engineFfVersion = !!firefox && +firefox[1];
+
+var UA = engineUserAgent;
+
+var engineIsIeOrEdge = /MSIE|Trident/.test(UA);
+
+var userAgent = engineUserAgent;
+
+var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
+
+var engineWebkitVersion = !!webkit && +webkit[1];
+
+'use strict';
+var $ = _export;
+var uncurryThis = functionUncurryThis;
+var aCallable = aCallable$1;
+var toObject = toObject$1;
+var lengthOfArrayLike = lengthOfArrayLike$2;
+var deletePropertyOrThrow = deletePropertyOrThrow$1;
+var toString = toString$1;
+var fails = fails$1;
+var internalSort = arraySort;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+var FF = engineFfVersion;
+var IE_OR_EDGE = engineIsIeOrEdge;
+var V8 = engineV8Version;
+var WEBKIT = engineWebkitVersion;
+
+var test = [];
+var un$Sort = uncurryThis(test.sort);
+var push = uncurryThis(test.push);
+
+// IE8-
+var FAILS_ON_UNDEFINED = fails(function () {
+  test.sort(undefined);
+});
+// V8 bug
+var FAILS_ON_NULL = fails(function () {
+  test.sort(null);
+});
+// Old WebKit
+var STRICT_METHOD = arrayMethodIsStrict('sort');
+
+var STABLE_SORT = !fails(function () {
+  // feature detection can be too slow, so check engines versions
+  if (V8) return V8 < 70;
+  if (FF && FF > 3) return;
+  if (IE_OR_EDGE) return true;
+  if (WEBKIT) return WEBKIT < 603;
+
+  var result = '';
+  var code, chr, value, index;
+
+  // generate an array with more 512 elements (Chakra and old V8 fails only in this case)
+  for (code = 65; code < 76; code++) {
+    chr = String.fromCharCode(code);
+
+    switch (code) {
+      case 66: case 69: case 70: case 72: value = 3; break;
+      case 68: case 71: value = 4; break;
+      default: value = 2;
+    }
+
+    for (index = 0; index < 47; index++) {
+      test.push({ k: chr + index, v: value });
+    }
+  }
+
+  test.sort(function (a, b) { return b.v - a.v; });
+
+  for (index = 0; index < test.length; index++) {
+    chr = test[index].k.charAt(0);
+    if (result.charAt(result.length - 1) !== chr) result += chr;
+  }
+
+  return result !== 'DGBEFHACIJK';
+});
+
+var FORCED = FAILS_ON_UNDEFINED || !FAILS_ON_NULL || !STRICT_METHOD || !STABLE_SORT;
+
+var getSortCompare = function (comparefn) {
+  return function (x, y) {
+    if (y === undefined) return -1;
+    if (x === undefined) return 1;
+    if (comparefn !== undefined) return +comparefn(x, y) || 0;
+    return toString(x) > toString(y) ? 1 : -1;
+  };
+};
+
+// `Array.prototype.sort` method
+// https://tc39.es/ecma262/#sec-array.prototype.sort
+$({ target: 'Array', proto: true, forced: FORCED }, {
+  sort: function sort(comparefn) {
+    if (comparefn !== undefined) aCallable(comparefn);
+
+    var array = toObject(this);
+
+    if (STABLE_SORT) return comparefn === undefined ? un$Sort(array) : un$Sort(array, comparefn);
+
+    var items = [];
+    var arrayLength = lengthOfArrayLike(array);
+    var itemsLength, index;
+
+    for (index = 0; index < arrayLength; index++) {
+      if (index in array) push(items, array[index]);
+    }
+
+    internalSort(items, getSortCompare(comparefn));
+
+    itemsLength = items.length;
+    index = 0;
+
+    while (index < itemsLength) array[index] = items[index++];
+    while (index < arrayLength) deletePropertyOrThrow(array, index++);
+
+    return array;
+  }
+});
+
+var __default__ = defineComponent({
+  name: 'FwTable',
+  components: {
+    ArrowSortSvg: render$3,
+    ArrowDownSvg: render$4,
+    FwLoadingBar: script$2
+  },
+  emits: ['rowClicked'],
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    options: {
+      type: Object,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Enable click events on rows.
+     * Emits row data when clicked
+     */
+    clickableRows: {
+      type: Boolean,
+      "default": false
+    },
+    autoSortColumn: {
+      type: Number
+    }
+  },
+  setup: function setup(props, ctx) {
+    var columns = computed(function () {
+      return Object.keys(props.items[0]);
+    });
+    var sortBy = ref('');
+    var sortDirection = ref('asc');
+    var currentSortedColumn = ref('');
+    onMounted(function () {
+      if (Number(props.autoSortColumn) >= 0) {
+        sortColumn(columns.value[Number(props.autoSortColumn)]);
+      }
+    });
+    var _useColours = useColours(),
+      bgHoverColor = _useColours.primaryFade5;
+    var sortColumn = function sortColumn(column) {
+      if (!isColumnSortable(column)) return;
+      currentSortedColumn.value = column;
+      if (sortBy.value === column) {
+        sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
+      } else {
+        sortBy.value = column;
+        sortDirection.value = columnInitSort(column);
+      }
+    };
+    var sortedData = computed(function () {
+      if (!sortBy.value) {
+        return props.items;
+      }
+      var data = props.items;
+      data.sort(function (a, b) {
+        var sortVal = a[sortBy.value] > b[sortBy.value] ? 1 : -1;
+        return sortDirection.value === 'asc' ? sortVal : -sortVal;
+      });
+      return data;
+    });
+    var formattedText = function formattedText(row, column) {
+      var _props$options$column;
+      if (props.options && props.options[column] && (_props$options$column = props.options[column]) !== null && _props$options$column !== void 0 && _props$options$column.formatter) {
+        var _props$options$column2;
+        var colFormatter = (_props$options$column2 = props.options[column]) === null || _props$options$column2 === void 0 ? void 0 : _props$options$column2.formatter;
+        if (colFormatter) {
+          return colFormatter(row[column]);
+        }
+      }
+      return row[column];
+    };
+    var sortedIcon = function sortedIcon(sortDir, column) {
+      if (currentSortedColumn.value === column) {
+        if (sortDirection.value === sortDir) {
+          return true;
+        }
+      }
+      return false;
+    };
+    var isColumnSortable = function isColumnSortable(column) {
+      if (props.options && props.options[column]) {
+        var _props$options$column3;
+        return (_props$options$column3 = props.options[column]) === null || _props$options$column3 === void 0 ? void 0 : _props$options$column3.isSortable;
+      }
+      return false;
+    };
+    var columnInitSort = function columnInitSort(column) {
+      if (props.options && props.options[column]) {
+        var _props$options$column4;
+        return ((_props$options$column4 = props.options[column]) === null || _props$options$column4 === void 0 ? void 0 : _props$options$column4.initSortOrder) || 'asc';
+      }
+      return 'asc';
+    };
+    var isDisabled = function isDisabled(column) {
+      var _props$options$column5;
+      if (props.options && (_props$options$column5 = props.options[column]) !== null && _props$options$column5 !== void 0 && _props$options$column5.disabled) {
+        return true;
+      }
+      return false;
+    };
+    var rowClicked = function rowClicked(row) {
+      if (props.clickableRows) ctx.emit('rowClicked', row);
+    };
+    return {
+      columns: columns,
+      sortBy: sortBy,
+      sortDirection: sortDirection,
+      sortColumn: sortColumn,
+      sortedData: sortedData,
+      currentSortedColumn: currentSortedColumn,
+      sortedIcon: sortedIcon,
+      formattedText: formattedText,
+      isColumnSortable: isColumnSortable,
+      isDisabled: isDisabled,
+      rowClicked: rowClicked,
+      bgHoverColor: bgHoverColor
+    };
+  }
+});
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "642aa671": _ctx.bgHoverColor
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+
+var _withScopeId = function _withScopeId(n) {
+  return pushScopeId("data-v-d2effa38"), n = n(), popScopeId(), n;
+};
+var _hoisted_1$2 = ["aria-busy"];
+var _hoisted_2$1 = {
+  "class": "text-p2 border-b border-grey-40"
+};
+var _hoisted_3$1 = ["tabindex", "onKeydown", "onClick"];
+var _hoisted_4 = {
+  "class": "flex flex-row items-center"
+};
+var _hoisted_5 = {
+  key: 0,
+  "class": "ml-1 flex items-center justify-center w-5"
+};
+var _hoisted_6 = {
+  "class": "text-p2 bg-white font-light"
+};
+var _hoisted_7 = {
+  key: 0,
+  "class": "py-4 pl-5 pr-3 text-left"
+};
+var _hoisted_8 = {
+  key: 0,
+  "class": "py-4 pl-5 pr-3 text-left"
+};
+var _hoisted_9 = ["onClick", "tabindex", "onKeydown"];
+var _hoisted_10 = ["innerHTML"];
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
+  var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
+  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
+  return openBlock(), createElementBlock("table", {
+    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : '']),
+    "aria-live": "polite",
+    "aria-busy": _ctx.loading
+  }, [createElementVNode("thead", _hoisted_2$1, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
+    key: 0
+  }) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
+    return openBlock(), createElementBlock(Fragment, {
+      key: thKey
+    }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("th", {
+      key: 0,
+      "class": normalizeClass(["fw-table-head py-6 pl-5 pr-3 text-left font-medium", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
+      tabindex: _ctx.isColumnSortable(column) ? 0 : -1,
+      onKeydown: withKeys(function ($event) {
+        return _ctx.sortColumn(column);
+      }, ["enter", "space"]),
+      onClick: function onClick($event) {
+        return _ctx.sortColumn(column);
+      }
+    }, [createElementVNode("div", _hoisted_4, [createElementVNode("span", {
+      "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
+    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
+      key: 0,
+      "class": "inline-block w-full text-grey-base"
+    })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
+      key: 1,
+      "class": "inline-block w-4 text-primary rotate-180"
+    })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
+      key: 2,
+      "class": "inline-block w-4 text-primary"
+    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_3$1)) : createCommentVNode("", true)], 64);
+  }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
+    key: 1
+  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList(_ctx.sortedData, function (row, trKey) {
+    return openBlock(), createElementBlock("tr", {
+      key: trKey
+    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
+      return openBlock(), createElementBlock(Fragment, {
+        key: colKey
+      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
+        "class": "w-full h-7"
+      })])) : createCommentVNode("", true)], 64);
+    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_8, [createVNode(_component_FwLoadingBar, {
+      "class": "w-full h-7"
+    })])) : createCommentVNode("", true)]);
+  }), 128)) : (openBlock(true), createElementBlock(Fragment, {
+    key: 1
+  }, renderList(_ctx.sortedData, function (row, trKey) {
+    return openBlock(), createElementBlock("tr", {
+      "class": normalizeClass(["fw-table-row border-b border-grey-40", _ctx.clickableRows ? 'cursor-pointer' : '']),
+      onClick: function onClick($event) {
+        return _ctx.rowClicked(row);
+      },
+      tabindex: _ctx.clickableRows ? 0 : -1,
+      onKeydown: withKeys(function ($event) {
+        return _ctx.rowClicked(row);
+      }, ["enter", "space"]),
+      key: trKey
+    }, [_ctx.$slots.preRow ? renderSlot(_ctx.$slots, "preRow", {
+      key: 0,
+      row: row
+    }) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
+      return openBlock(), createElementBlock(Fragment, {
+        key: colKey
+      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", {
+        key: 0,
+        "class": "py-2 pl-5 pr-3 text-left",
+        innerHTML: _ctx.formattedText(row, column)
+      }, null, 8, _hoisted_10)) : createCommentVNode("", true)], 64);
+    }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
+      key: 1,
+      row: row
+    }) : createCommentVNode("", true)], 42, _hoisted_9);
+  }), 128))])], 10, _hoisted_1$2);
+}
+
+var css_248z = ".fw-table-head--sortable[data-v-d2effa38]:hover{background-color:var(--642aa671)}.fw-table-row[data-v-d2effa38]:hover{background-color:var(--642aa671)}";
+var stylesheet = ".fw-table-head--sortable[data-v-d2effa38]:hover{background-color:var(--642aa671)}.fw-table-row[data-v-d2effa38]:hover{background-color:var(--642aa671)}";
+styleInject(css_248z);
+
+__default__.render = render$2;
+__default__.__scopeId = "data-v-d2effa38";
+
+var script$1 = defineComponent({
+  name: 'FwTableHead'
+});
+
+var _hoisted_1$1 = {
+  "class": "py-6 px-5 text-left font-medium"
+};
+var _hoisted_2 = {
+  "class": "flex flex-row"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "w-full"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("th", _hoisted_1$1, [createElementVNode("div", _hoisted_2, [_ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)])]);
+}
+
+script$1.render = render$1;
+
+var script = defineComponent({
+  name: 'FwTableRow'
+});
+
+var _hoisted_1 = {
+  "class": "py-3 px-4 text-left whitespace-nowrap"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("td", _hoisted_1, [_ctx.$slots["default"] ? renderSlot(_ctx.$slots, "default", {
+    key: 0
+  }) : createCommentVNode("", true)]);
+}
+
+script.render = render;
+
+export { __default__ as _, script as a, script$1 as s };