@frollo/frollo-web-ui 9.0.1 → 9.0.2

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

@@ -1,389 +0,0 @@
-import { b as _toConsumableArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
-import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, renderSlot, Fragment, renderList, withKeys, toDisplayString, createBlock, createVNode, withCtx } from 'vue';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
-import './fw-button.js';
-import { o as render$3, p as render$4, q as render$5, s as render$6 } from './index-BsEH8YYr.js';
-import './fw-loading.js';
-import { s as script$2 } from './fw-button-YMoW4x4c.js';
-import { _ as __default__$1 } from './fw-loading-bar-DecYSBC_.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var __default__ = defineComponent({
-  name: 'FwTable',
-  components: {
-    FwLoadingBar: __default__$1,
-    FwButton: script$2,
-    ArrowDownSvg: render$6,
-    ArrowSortSvg: render$5,
-    ChevronLeftSvg: render$4,
-    ChevronRightSvg: render$3
-  },
-  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
-    },
-    enablePagination: {
-      type: Boolean,
-      "default": false
-    },
-    totalAmount: {
-      type: Number
-    },
-    pageSize: {
-      type: Number
-    }
-  },
-  emits: [/** Fired when a row is clicked with row data */
-  'rowClicked', /** Fired when a column is sorted */
-  'columnSorted', /** Fired when a page number or arrow is clicked */
-  'pageChanged'],
-  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('');
-    var currentPage = ref(1);
-    var maxPageAmount = ref();
-    onMounted(function () {
-      if (Number(props.autoSortColumn) >= 0) {
-        sortColumn(columns.value[Number(props.autoSortColumn)], false);
-      }
-      if (props.totalAmount && props.pageSize) {
-        maxPageAmount.value = Math.ceil(props.totalAmount / props.pageSize);
-      }
-    });
-    var _useColours = useColours(),
-      bgHoverColor = _useColours.primaryFade5;
-    var sortColumn = function sortColumn(column) {
-      var isAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      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);
-      }
-      if (isAction) ctx.emit('columnSorted', column, sortDirection.value);
-    };
-    var sortedData = computed(function () {
-      var _props$options$sortBy;
-      if (!sortBy.value) {
-        return props.items;
-      }
-      var data = _toConsumableArray(props.items);
-      var customSort = props.options ? (_props$options$sortBy = props.options[sortBy.value]) === null || _props$options$sortBy === void 0 ? void 0 : _props$options$sortBy.sort : false;
-      if (customSort) {
-        return customSort(data, sortBy.value, sortDirection.value);
-      } else {
-        data.sort(function (a, b) {
-          var sortVal = typeof a[sortBy.value] === 'string' ? a[sortBy.value].toString().toLowerCase() > b[sortBy.value].toString().toLowerCase() ? 1 : -1 : 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);
-    };
-    var pageArrowClick = function pageArrowClick(next) {
-      currentPage.value = currentPage.value + (next ? 1 : -1);
-      ctx.emit('pageChanged', next);
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
-    };
-    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,
-      currentPage: currentPage,
-      maxPageAmount: maxPageAmount,
-      pageArrowClick: pageArrowClick
-    };
-  }
-});
-var __injectCSSVars__ = function __injectCSSVars__() {
-  useCssVars(function (_ctx) {
-    return {
-      "00d6962e": _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-d847bfa2"), n = n(), popScopeId(), n;
-};
-var _hoisted_1$2 = {
-  "class": "flex flex-col"
-};
-var _hoisted_2$1 = ["aria-busy"];
-var _hoisted_3$1 = {
-  "class": "text-base border-b border-grey-60"
-};
-var _hoisted_4 = ["tabindex", "onKeydown", "onClick"];
-var _hoisted_5 = {
-  "class": "flex flex-row items-center"
-};
-var _hoisted_6 = {
-  key: 0,
-  "class": "ml-1 flex items-center justify-center w-5"
-};
-var _hoisted_7 = {
-  "class": "text-base bg-white font-normal"
-};
-var _hoisted_8 = {
-  key: 0,
-  "class": "py-4 pl-5 pr-3 text-left"
-};
-var _hoisted_9 = {
-  key: 0,
-  "class": "py-4 pl-5 pr-3 text-left"
-};
-var _hoisted_10 = ["tabindex", "onClick", "onKeydown"];
-var _hoisted_11 = ["innerHTML"];
-var _hoisted_12 = {
-  key: 0,
-  "class": "flex flex-row justify-center h-[44px] mt-8 space-x-2 mb-[40px]"
-};
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
-  var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
-  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
-  var _component_ChevronLeftSvg = resolveComponent("ChevronLeftSvg");
-  var _component_FwButton = resolveComponent("FwButton");
-  var _component_ChevronRightSvg = resolveComponent("ChevronRightSvg");
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("table", {
-    "class": normalizeClass(["fw-table table-auto flex-1", _ctx.loading ? 'cursor-wait' : '']),
-    "aria-live": "polite",
-    "aria-busy": _ctx.loading
-  }, [createElementVNode("thead", _hoisted_3$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 text-brand-text1", _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_5, [createElementVNode("span", {
-      "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
-    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_6, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
-      key: 0,
-      name: "arrow-sort",
-      "class": "inline-block w-full text-brand-text2"
-    })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
-      key: 1,
-      name: "arrow-down",
-      "class": "inline-block w-4 text-primary rotate-180"
-    })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
-      key: 2,
-      name: "arrow-down",
-      "class": "inline-block w-4 text-primary"
-    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_4)) : createCommentVNode("", true)], 64);
-  }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
-    key: 1
-  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_7, [_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_8, [createVNode(_component_FwLoadingBar, {
-        "class": "w-full h-7"
-      })])) : createCommentVNode("", true)], 64);
-    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_9, [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", {
-      key: trKey,
-      "class": normalizeClass(["fw-table-row border-b last:border-b-0 border-grey-60", _ctx.clickableRows ? 'cursor-pointer' : '']),
-      tabindex: _ctx.clickableRows ? 0 : -1,
-      onClick: function onClick($event) {
-        return _ctx.rowClicked(row);
-      },
-      onKeydown: withKeys(function ($event) {
-        return _ctx.rowClicked(row);
-      }, ["enter", "space"])
-    }, [_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-5 pl-5 pr-3 text-left",
-        innerHTML: _ctx.formattedText(row, column)
-      }, null, 8, _hoisted_11)) : createCommentVNode("", true)], 64);
-    }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
-      key: 1,
-      row: row
-    }) : createCommentVNode("", true)], 42, _hoisted_10);
-  }), 128))])], 10, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(_component_FwButton, {
-    variant: 'tertiary',
-    disabled: _ctx.currentPage === 1,
-    size: "sm",
-    "class": "border-grey-40",
-    onClick: _cache[0] || (_cache[0] = function ($event) {
-      return _ctx.pageArrowClick(false);
-    })
-  }, {
-    "default": withCtx(function () {
-      return [createVNode(_component_ChevronLeftSvg, {
-        name: "chevron-left",
-        "class": "h-4 w-4",
-        "stroke-width": "3"
-      })];
-    }),
-    _: 1
-  }, 8, ["disabled"]), renderSlot(_ctx.$slots, "page"), createVNode(_component_FwButton, {
-    variant: 'tertiary',
-    disabled: _ctx.currentPage === _ctx.maxPageAmount,
-    size: "sm",
-    "class": "border-grey-40",
-    onClick: _cache[1] || (_cache[1] = function ($event) {
-      return _ctx.pageArrowClick(true);
-    })
-  }, {
-    "default": withCtx(function () {
-      return [createVNode(_component_ChevronRightSvg, {
-        name: "chevron-right",
-        "class": "h-4 w-4"
-      })];
-    }),
-    _: 1
-  }, 8, ["disabled"])])) : createCommentVNode("", true)]);
-}
-
-var css_248z = ".fw-table-head--sortable[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}.fw-table-row[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}";
-var stylesheet = ".fw-table-head--sortable[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}.fw-table-row[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}";
-styleInject(css_248z);
-
-__default__.render = render$2;
-__default__.__scopeId = "data-v-d847bfa2";
-
-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 };

package/esm/fw-tag-fDo50Nw7.js

@@ -1,177 +0,0 @@
-import { defineComponent, ref, computed, useCssVars, resolveComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createCommentVNode, createBlock, Fragment, createTextVNode, toDisplayString, withCtx, createVNode } from 'vue';
-import './fw-button.js';
-import { d as render$1 } from './index-BsEH8YYr.js';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
-import { s as script } from './fw-button-YMoW4x4c.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var __default__ = defineComponent({
-  name: 'FwTag',
-  components: {
-    FwButton: script,
-    XMarkSvg: render$1
-  },
-  props: {
-    /**
-     * The label text of the tag.
-     * Overrides the default slot content.
-     */
-    label: {
-      type: String
-    },
-    /**
-     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
-     */
-    size: {
-      type: String,
-      "default": 'xs',
-      validator: function validator(value) {
-        return ['xs', 'sm', 'md'].includes(value);
-      }
-    },
-    /**
-     * The colour variant of the tag. Accepts 'primary', 'secondary', 'alert', 'error', 'success'
-     */
-    variant: {
-      type: String,
-      "default": 'primary',
-      validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'quaternary', 'alert', 'error', 'success'].includes(value);
-      }
-    },
-    /**
-     * Whether the tag can be dismissed or closed.
-     */
-    dismissable: {
-      type: Boolean,
-      "default": false
-    }
-  },
-  emits: [/** Fires when the tag is dismissed. */
-  'dismissed'],
-  setup: function setup(props) {
-    var baseClass = ref("\n      inline-flex items-center justify-center text-center whitespace-nowrap rounded-full\n    ");
-    var _useColours = useColours(),
-      primaryFade5 = _useColours.primaryFade5;
-    var tagClasses = ref({
-      primary: {
-        text: 'text-button-primary-text',
-        background: 'bg-button-primary-bg',
-        iconButtonType: 'primary'
-      },
-      secondary: {
-        text: 'text-primary',
-        background: 'fw-tag--secondary-bg',
-        iconButtonType: 'tertiary'
-      },
-      tertiary: {
-        text: 'text-body',
-        background: 'bg-brand-bg4',
-        iconButtonType: 'tertiary'
-      },
-      quaternary: {
-        text: 'text-body',
-        background: 'bg-brand-bg3',
-        iconButtonType: 'tertiary'
-      },
-      alert: {
-        text: 'text-white',
-        background: 'bg-brand-warning-bg',
-        iconButtonType: 'error'
-      },
-      success: {
-        text: 'text-secondary',
-        background: 'bg-brand-success-new',
-        iconButtonType: 'success'
-      },
-      error: {
-        text: 'text-white',
-        background: 'bg-brand-error-text',
-        iconButtonType: 'error'
-      }
-    });
-    var sizes = ref({
-      xs: 'px-2 py-px text-xs',
-      sm: 'px-4 py-1 text-xs',
-      md: 'px-4 py-3 h-6 text-sm'
-    });
-    var iconSizes = ref({
-      xs: 'w-4 h-4',
-      sm: 'w-5 h-5',
-      md: 'w-6 h-6'
-    });
-    var textColorClass = computed(function () {
-      return tagClasses.value[props.variant].text;
-    });
-    var bgColorClass = computed(function () {
-      return tagClasses.value[props.variant].background;
-    });
-    var iconButtonType = computed(function () {
-      return tagClasses.value[props.variant].iconButtonType;
-    });
-    var sizeClass = computed(function () {
-      return sizes.value[props.size];
-    });
-    var iconSizeClass = computed(function () {
-      return iconSizes.value[props.size];
-    });
-    return {
-      baseClass: baseClass,
-      textColorClass: textColorClass,
-      bgColorClass: bgColorClass,
-      sizeClass: sizeClass,
-      iconSizeClass: iconSizeClass,
-      iconButtonType: iconButtonType,
-      primaryFade5: primaryFade5
-    };
-  }
-});
-var __injectCSSVars__ = function __injectCSSVars__() {
-  useCssVars(function (_ctx) {
-    return {
-      "819938ae": _ctx.primaryFade5
-    };
-  });
-};
-var __setup__ = __default__.setup;
-__default__.setup = __setup__ ? function (props, ctx) {
-  __injectCSSVars__();
-  return __setup__(props, ctx);
-} : __injectCSSVars__;
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_XMarkSvg = resolveComponent("XMarkSvg");
-  var _component_FwButton = resolveComponent("FwButton");
-  return openBlock(), createElementBlock("span", {
-    "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.dismissable ? 'shadow font-semibold' : 'font-normal']])
-  }, [_ctx.label ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createTextVNode(toDisplayString(_ctx.label), 1)], 64)) : _ctx.$slots["default"] ? renderSlot(_ctx.$slots, "default", {
-    key: 1
-  }) : createCommentVNode("", true), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
-    key: 2,
-    variant: _ctx.iconButtonType,
-    "class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"]),
-    tabindex: "",
-    title: "Dismiss filter",
-    onClick: _cache[0] || (_cache[0] = function ($event) {
-      return _ctx.$emit('dismissed');
-    })
-  }, {
-    "default": withCtx(function () {
-      return [createVNode(_component_XMarkSvg, {
-        name: "xmark",
-        "class": "w-3 h-3 font-semibold m-0"
-      })];
-    }),
-    _: 1
-  }, 8, ["variant", "class"])) : createCommentVNode("", true)], 2);
-}
-
-var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--819938ae)}";
-var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--819938ae)}";
-styleInject(css_248z);
-
-__default__.render = render;
-
-export { __default__ as _ };