@frollo/frollo-web-ui 9.0.1 → 9.0.2

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

@@ -0,0 +1,447 @@
+import { defineComponent, computed, ref, shallowRef, watch, onMounted, useCssVars, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, createVNode, renderSlot, Fragment, renderList, withDirectives, withKeys, toDisplayString, createBlock, vShow, TransitionGroup, withCtx, resolveDynamicComponent, mergeProps, toHandlers } from 'vue';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import './fw-button.js';
+import { o as render$3, p as render$4, q as render$5, s as render$6 } from './index-DHyRsKsZ.js';
+import './fw-loading.js';
+import { s as script$2 } from './fw-button-DZTHZLjk.js';
+import { s as script$3 } from './fw-loading-bar-3x4tkF1B.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var __default__ = defineComponent({
+  name: 'FwTable',
+  components: {
+    FwLoadingBar: script$3,
+    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
+    },
+    /**
+     * Optional stable row key. If omitted, falls back to index-based key.
+     */
+    rowKey: {
+      type: [String, Function],
+      required: false
+    }
+  },
+  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 _props$items2;
+    var _useColours = useColours(),
+      bgHoverColor = _useColours.primaryFade5;
+    // Guard for empty items
+    var rawColumns = computed(function () {
+      var _props$items;
+      return (_props$items = props.items) !== null && _props$items !== void 0 && _props$items[0] ? Object.keys(props.items[0]) : [];
+    });
+    // Build per-column metadata ONCE per items/options change.
+    var colMeta = computed(function () {
+      var _props$options;
+      var opts = (_props$options = props.options) !== null && _props$options !== void 0 ? _props$options : {};
+      return rawColumns.value.map(function (key) {
+        var _opts$key, _option$initSortOrder;
+        var option = (_opts$key = opts[key]) !== null && _opts$key !== void 0 ? _opts$key : {};
+        return {
+          key: key,
+          disabled: !!option.disabled,
+          sortable: !!option.isSortable,
+          initSortOrder: (_option$initSortOrder = option.initSortOrder) !== null && _option$initSortOrder !== void 0 ? _option$initSortOrder : 'asc',
+          sortFn: option.sort,
+          html: !!option.html,
+          // allow html opt-in
+          format: function format(val, row) {
+            return option.formatter ? option.formatter(val, row) : val;
+          },
+          component: option.component,
+          componentProps: option.componentProps,
+          componentEventHandlers: option.componentEventHandlers,
+          isActiveSort: key === currentSortedColumn.value
+        };
+      });
+    });
+    var sortBy = ref('');
+    var sortDirection = ref('asc');
+    var currentSortedColumn = ref('');
+    // Cache last sorted result to avoid extra array churn when irrelevant state changes.
+    var sortedCache = shallowRef((_props$items2 = props.items) !== null && _props$items2 !== void 0 ? _props$items2 : []);
+    var doSort = function doSort() {
+      if (props.loading || !sortBy.value) {
+        sortedCache.value = props.items;
+        return;
+      }
+      var data = props.items.slice(); // shallow copy
+      var meta = colMeta.value.find(function (c) {
+        return c.key === sortBy.value;
+      });
+      var customSort = meta === null || meta === void 0 ? void 0 : meta.sortFn;
+      if (customSort) {
+        var _customSort;
+        sortedCache.value = (_customSort = customSort(data, sortBy.value, sortDirection.value)) !== null && _customSort !== void 0 ? _customSort : data;
+        return;
+      }
+      // Fast comparator: normalize once per comparison
+      var dir = sortDirection.value === 'asc' ? 1 : -1;
+      var key = sortBy.value;
+      data.sort(function (a, b) {
+        var av = a[key];
+        var bv = b[key];
+        if (av == null && bv == null) return 0;
+        if (av == null) return -1 * dir;
+        if (bv == null) return 1 * dir;
+        if (typeof av === 'string' || typeof bv === 'string') {
+          var as = String(av).toLowerCase();
+          var bs = String(bv).toLowerCase();
+          return as > bs ? dir : as < bs ? -dir : 0;
+        }
+        return av > bv ? dir : av < bv ? -dir : 0;
+      });
+      sortedCache.value = data;
+    };
+    watch(function () {
+      return [props.items, props.options, props.loading, sortBy.value, sortDirection.value];
+    }, doSort, {
+      immediate: true
+    });
+    var displayRows = computed(function () {
+      return sortedCache.value;
+    });
+    var onSort = function onSort(column) {
+      var isAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var meta = colMeta.value.find(function (c) {
+        return c.key === column;
+      });
+      if (!(meta !== null && meta !== void 0 && meta.sortable)) return;
+      currentSortedColumn.value = column;
+      if (sortBy.value === column) {
+        sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
+      } else {
+        sortBy.value = column;
+        sortDirection.value = meta.initSortOrder;
+      }
+      if (isAction) ctx.emit('columnSorted', column, sortDirection.value);
+    };
+    onMounted(function () {
+      if (Number(props.autoSortColumn) >= 0) {
+        var col = rawColumns.value[Number(props.autoSortColumn)];
+        if (col) onSort(col, false);
+      }
+      if (props.totalAmount && props.pageSize) {
+        maxPageAmount.value = Math.ceil(props.totalAmount / props.pageSize);
+      }
+    });
+    var currentPage = ref(1);
+    var maxPageAmount = ref();
+    var pageArrowClick = function pageArrowClick(next) {
+      currentPage.value += next ? 1 : -1;
+      ctx.emit('pageChanged', next);
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    };
+    var rowClicked = function rowClicked(row) {
+      if (props.clickableRows) ctx.emit('rowClicked', row);
+    };
+    var getRowKey = function getRowKey(row, index) {
+      if (typeof props.rowKey === 'function') return props.rowKey(row);
+      if (typeof props.rowKey === 'string') return row[props.rowKey];
+      return index !== null && index !== void 0 ? index : row; // fallback, not ideal but safe
+    };
+    var skeletonRowCount = computed(function () {
+      var _props$items3;
+      return Math.min(((_props$items3 = props.items) === null || _props$items3 === void 0 ? void 0 : _props$items3.length) || 5, 8);
+    });
+    var getComponentProps = function getComponentProps(col, row) {
+      var value = row[col.key];
+      var ctx = {
+        value: value,
+        row: row,
+        column: col.key
+      };
+      var p = col.componentProps;
+      return typeof p === 'function' ? p(ctx) : p !== null && p !== void 0 ? p : {};
+    };
+    var getComponentHandlers = function getComponentHandlers(col, row) {
+      var value = row[col.key];
+      var ctx = {
+        value: value,
+        row: row,
+        column: col.key
+      };
+      var h = col.componentEventHandlers;
+      return typeof h === 'function' ? h(ctx) : h !== null && h !== void 0 ? h : {};
+    };
+    return {
+      colMeta: colMeta,
+      sortBy: sortBy,
+      sortDirection: sortDirection,
+      currentSortedColumn: currentSortedColumn,
+      onSort: onSort,
+      displayRows: displayRows,
+      rowClicked: rowClicked,
+      bgHoverColor: bgHoverColor,
+      currentPage: currentPage,
+      maxPageAmount: maxPageAmount,
+      pageArrowClick: pageArrowClick,
+      getRowKey: getRowKey,
+      skeletonRowCount: skeletonRowCount,
+      getComponentProps: getComponentProps,
+      getComponentHandlers: getComponentHandlers
+    };
+  }
+});
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "v6ed5b746": _ctx.bgHoverColor
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+
+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 size-5"
+};
+var _hoisted_7 = {
+  key: 0,
+  "class": "py-4 pl-5 pr-3 text-left"
+};
+var _hoisted_8 = ["tabindex", "onClick", "onKeydown"];
+var _hoisted_9 = {
+  key: 1
+};
+var _hoisted_10 = ["innerHTML"];
+var _hoisted_11 = {
+  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", {
+      'cursor-wait': _ctx.loading
+    }]),
+    "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.colMeta, function (col) {
+    return withDirectives((openBlock(), createElementBlock("th", {
+      key: col.key,
+      "class": normalizeClass(["fw-table-head py-6 pl-5 pr-3 text-left font-medium text-brand-text1", col.sortable ? 'cursor-pointer fw-table-head--sortable' : '']),
+      tabindex: col.sortable ? 0 : -1,
+      onKeydown: withKeys(function ($event) {
+        return _ctx.onSort(col.key);
+      }, ["enter", "space"]),
+      onClick: function onClick($event) {
+        return _ctx.onSort(col.key);
+      }
+    }, [createElementVNode("div", _hoisted_5, [createElementVNode("span", {
+      "class": normalizeClass(col.isActiveSort ? 'text-primary' : '')
+    }, toDisplayString(col.key), 3), col.sortable ? (openBlock(), createElementBlock("span", _hoisted_6, [!col.isActiveSort ? (openBlock(), createBlock(_component_ArrowSortSvg, {
+      key: 0,
+      name: "arrow-sort",
+      "class": "inline-block size-5 text-brand-text2"
+    })) : (openBlock(), createBlock(_component_ArrowDownSvg, {
+      key: 1,
+      name: "arrow-down",
+      "class": normalizeClass(["inline-block size-4 text-primary", _ctx.sortDirection === 'asc' ? 'rotate-180' : ''])
+    }, null, 8, ["class"]))])) : createCommentVNode("", true)])], 42, _hoisted_4)), [[vShow, !col.disabled]]);
+  }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
+    key: 1
+  }) : createCommentVNode("", true)])]), createVNode(TransitionGroup, {
+    tag: "tbody",
+    name: "fw-table-animate",
+    "class": "fw-table--tbody text-base bg-white font-normal",
+    mode: "out-in"
+  }, {
+    "default": withCtx(function () {
+      return [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
+        key: 0
+      }, renderList(_ctx.skeletonRowCount, function (n) {
+        return openBlock(), createElementBlock("tr", {
+          key: 'skeleton-' + n
+        }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.colMeta, function (col) {
+          return withDirectives((openBlock(), createElementBlock("td", {
+            key: 'skeleton-' + n + '-' + col.key,
+            "class": "py-4 pl-5 pr-3 text-left"
+          }, [createVNode(_component_FwLoadingBar, {
+            "class": "w-full h-7"
+          })])), [[vShow, !col.disabled]]);
+        }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
+          "class": "w-full h-7"
+        })])) : createCommentVNode("", true)]);
+      }), 128)) : (openBlock(true), createElementBlock(Fragment, {
+        key: 1
+      }, renderList(_ctx.displayRows, function (row) {
+        return openBlock(), createElementBlock("tr", {
+          key: _ctx.getRowKey(row),
+          "class": normalizeClass(["fw-table-row border-b last:border-b-0 border-grey-60", {
+            'cursor-pointer': _ctx.clickableRows
+          }]),
+          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.colMeta, function (col) {
+          return withDirectives((openBlock(), createElementBlock("td", {
+            key: col.key,
+            "class": "py-5 pl-5 pr-3 text-left"
+          }, [col.component ? (openBlock(), createBlock(resolveDynamicComponent(col.component), mergeProps({
+            key: 0,
+            ref_for: true
+          }, _ctx.getComponentProps(col, row), toHandlers(_ctx.getComponentHandlers(col, row))), null, 16)) : !col.html ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(col.format(row[col.key], row)), 1)) : (openBlock(), createElementBlock("span", {
+            key: 2,
+            innerHTML: col.format(row[col.key], row)
+          }, null, 8, _hoisted_10))])), [[vShow, !col.disabled]]);
+        }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
+          key: 1,
+          row: row
+        }) : createCommentVNode("", true)], 42, _hoisted_8);
+      }), 128))];
+    }),
+    _: 3
+  })], 10, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_11, [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[data-v-2c8e41ee]{-webkit-transition:background-color .16s ease,color .16s ease;-moz-transition:background-color .16s ease,color .16s ease;transition:background-color .16s ease,color .16s ease}.fw-table-head--sortable[data-v-2c8e41ee]:hover{background-color:var(--v6ed5b746)}.fw-table-row[data-v-2c8e41ee]{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:background-color .16s ease;-moz-transition:background-color .16s ease;transition:background-color .16s ease}.fw-table-row[data-v-2c8e41ee]:hover{background-color:var(--v6ed5b746)}.fw-table--tbody[data-v-2c8e41ee]{overflow-anchor:none;position:relative;will-change:transform,opacity}.fw-table-animate-move[data-v-2c8e41ee]{-webkit-transition:-webkit-transform .22s cubic-bezier(.16,1,.3,1);transition:-webkit-transform .22s cubic-bezier(.16,1,.3,1);-moz-transition:transform .22s cubic-bezier(.16,1,.3,1),-moz-transform .22s cubic-bezier(.16,1,.3,1);transition:transform .22s cubic-bezier(.16,1,.3,1);transition:transform .22s cubic-bezier(.16,1,.3,1),-webkit-transform .22s cubic-bezier(.16,1,.3,1),-moz-transform .22s cubic-bezier(.16,1,.3,1);will-change:transform}.fw-table-animate-enter-active[data-v-2c8e41ee]{-webkit-transition:opacity .12s ease;-moz-transition:opacity .12s ease;transition:opacity .12s ease}.fw-table-animate-enter-from[data-v-2c8e41ee]{opacity:0}.fw-table-animate-enter-active[data-v-2c8e41ee],.fw-table-animate-leave-active[data-v-2c8e41ee]{will-change:transform,opacity}.fw-table-animate-leave-active[data-v-2c8e41ee]{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}.fw-table-animate-leave-to[data-v-2c8e41ee]{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}@media (prefers-reduced-motion:reduce){.fw-table-animate-enter-active[data-v-2c8e41ee],.fw-table-animate-leave-active[data-v-2c8e41ee],.fw-table-animate-move[data-v-2c8e41ee],.fw-table-head[data-v-2c8e41ee],.fw-table-row[data-v-2c8e41ee]{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}}";
+var stylesheet = ".fw-table-head[data-v-2c8e41ee]{-webkit-transition:background-color .16s ease,color .16s ease;-moz-transition:background-color .16s ease,color .16s ease;transition:background-color .16s ease,color .16s ease}.fw-table-head--sortable[data-v-2c8e41ee]:hover{background-color:var(--v6ed5b746)}.fw-table-row[data-v-2c8e41ee]{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:background-color .16s ease;-moz-transition:background-color .16s ease;transition:background-color .16s ease}.fw-table-row[data-v-2c8e41ee]:hover{background-color:var(--v6ed5b746)}.fw-table--tbody[data-v-2c8e41ee]{overflow-anchor:none;position:relative;will-change:transform,opacity}.fw-table-animate-move[data-v-2c8e41ee]{-webkit-transition:-webkit-transform .22s cubic-bezier(.16,1,.3,1);transition:-webkit-transform .22s cubic-bezier(.16,1,.3,1);-moz-transition:transform .22s cubic-bezier(.16,1,.3,1),-moz-transform .22s cubic-bezier(.16,1,.3,1);transition:transform .22s cubic-bezier(.16,1,.3,1);transition:transform .22s cubic-bezier(.16,1,.3,1),-webkit-transform .22s cubic-bezier(.16,1,.3,1),-moz-transform .22s cubic-bezier(.16,1,.3,1);will-change:transform}.fw-table-animate-enter-active[data-v-2c8e41ee]{-webkit-transition:opacity .12s ease;-moz-transition:opacity .12s ease;transition:opacity .12s ease}.fw-table-animate-enter-from[data-v-2c8e41ee]{opacity:0}.fw-table-animate-enter-active[data-v-2c8e41ee],.fw-table-animate-leave-active[data-v-2c8e41ee]{will-change:transform,opacity}.fw-table-animate-leave-active[data-v-2c8e41ee]{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}.fw-table-animate-leave-to[data-v-2c8e41ee]{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}@media (prefers-reduced-motion:reduce){.fw-table-animate-enter-active[data-v-2c8e41ee],.fw-table-animate-leave-active[data-v-2c8e41ee],.fw-table-animate-move[data-v-2c8e41ee],.fw-table-head[data-v-2c8e41ee],.fw-table-row[data-v-2c8e41ee]{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}}";
+styleInject(css_248z);
+
+__default__.render = render$2;
+__default__.__scopeId = "data-v-2c8e41ee";
+
+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-table.js

@@ -1,10 +1,9 @@
-export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-Cgi8871h.js';
-import './_rollupPluginBabelHelpers-DODWUb5N.js';
+export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-D6FdCJMs.js';
 import 'vue';
-import './get-root-colours-DCjlYelc.js';
+import './get-root-colours-DCCAnRF4.js';
 import './fw-button.js';
-import './fw-button-YMoW4x4c.js';
-import './index-BsEH8YYr.js';
+import './fw-button-DZTHZLjk.js';
+import './index-DHyRsKsZ.js';
 import './style-inject.es-tgCJW-Cu.js';
 import './fw-loading.js';
-import './fw-loading-bar-DecYSBC_.js';
+import './fw-loading-bar-3x4tkF1B.js';

package/esm/fw-tabs.js

@@ -1,7 +1,13 @@
-import { defineComponent, reactive, ref, computed, provide, createElementBlock, openBlock, createCommentVNode, renderSlot, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, getCurrentInstance, inject, watchEffect, withDirectives, vShow } from 'vue';
+import { defineComponent, shallowReactive, shallowRef, computed, provide, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, Fragment, renderList, createVNode, normalizeClass, withCtx, createTextVNode, toDisplayString, renderSlot, inject, getCurrentInstance, ref, onMounted, onBeforeUnmount, createBlock, Transition, withDirectives, vShow } from 'vue';
+import { s as script$2 } from './fw-button-DZTHZLjk.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './index-DHyRsKsZ.js';
 
 var script$1 = defineComponent({
   name: 'FwTabs',
+  components: {
+    FwButton: script$2
+  },
   props: {
     /**
      * The active tab v-model
@@ -13,18 +19,41 @@ var script$1 = defineComponent({
   },
   emits: ['update:modelValue'],
   setup: function setup(props, ctx) {
-    var state = reactive({
-      active: computed(function () {
-        return props.modelValue;
-      }),
-      tabs: ref([])
+    var tabs = shallowReactive([]);
+    var nextIndex = shallowRef(0);
+    var active = computed(function () {
+      return props.modelValue;
     });
-    var selectTab = function selectTab(tab) {
-      ctx.emit('update:modelValue', tab);
+    var registerTabs = function registerTabs(uid, label) {
+      var index = nextIndex.value++;
+      tabs.push({
+        uid: uid,
+        label: label,
+        index: index
+      });
+      return index;
+    };
+    var unregisterTabs = function unregisterTabs(uid) {
+      var i = tabs.findIndex(function (t) {
+        return t.uid === uid;
+      });
+      if (i !== -1) tabs.splice(i, 1);
+    };
+    var selectTab = function selectTab(index) {
+      if (index !== active.value) {
+        ctx.emit('update:modelValue', index);
+      }
+    };
+    var api = {
+      active: active,
+      registerTabs: registerTabs,
+      unregisterTabs: unregisterTabs,
+      tabs: tabs
     };
-    provide('tabsState', state);
+    provide('tabsApi', api);
     return {
-      state: state,
+      tabs: tabs,
+      active: active,
       selectTab: selectTab
     };
   }
@@ -37,23 +66,39 @@ var _hoisted_2 = {
   key: 0,
   "class": "flex flex-wrap -mb-px border-b border-brand-border2"
 };
-var _hoisted_3 = ["onClick"];
+var _hoisted_3 = {
+  "class": "fw-tabs--panels relative"
+};
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.state.tabs ? (openBlock(), createElementBlock("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.state.tabs, function (tab, i) {
+  var _component_FwButton = resolveComponent("FwButton");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.tabs.length ? (openBlock(), createElementBlock("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, function (tab) {
     return openBlock(), createElementBlock("li", {
-      key: i,
+      key: tab.uid,
       "class": "mr-2"
-    }, [createElementVNode("button", {
+    }, [createVNode(_component_FwButton, {
       type: "button",
-      "class": normalizeClass(["inline-block p-4 outline-primary border-b-2 border-transparent transition ease-in", _ctx.state.active === i && '!border-primary']),
+      variant: "transparent",
+      rounded: false,
+      "class": normalizeClass(["fw-tab-btn !no-underline relative inline-block p-4 outline-primary", _ctx.active === tab.index && 'is-active']),
+      selected: _ctx.active === tab.index,
       onClick: function onClick($event) {
-        return _ctx.selectTab(i);
+        return _ctx.selectTab(tab.index);
       }
-    }, toDisplayString(tab.props.label), 11, _hoisted_3)]);
-  }), 128))])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]);
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(tab.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["selected", "class", "onClick"])]);
+  }), 128))])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")])]);
 }
 
+var css_248z$1 = ".fw-tab-btn[data-v-1f725c9a]:after{background:var(--colorPrimary);bottom:-1px;content:\"\";height:2px;left:0;pointer-events:none;position:absolute;right:0;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform .22s ease;transition:-webkit-transform .22s ease;-moz-transition:transform .22s ease,-moz-transform .22s ease;transition:transform .22s ease;transition:transform .22s ease,-webkit-transform .22s ease,-moz-transform .22s ease;will-change:transform}.fw-tab-btn[data-v-1f725c9a]:hover:after{-webkit-transform:scaleX(.15);-moz-transform:scaleX(.15);-ms-transform:scaleX(.15);transform:scaleX(.15)}.fw-tab-btn.is-active[data-v-1f725c9a]{color:var(--color-primary)}.fw-tab-btn.is-active[data-v-1f725c9a]:after{-webkit-transform:scaleX(1)!important;-moz-transform:scaleX(1)!important;-ms-transform:scaleX(1)!important;transform:scaleX(1)!important}.fw-tab-btn[data-v-1f725c9a]:focus-visible:after{-webkit-transform:scaleX(.35);-moz-transform:scaleX(.35);-ms-transform:scaleX(.35);transform:scaleX(.35)}";
+var stylesheet$1 = ".fw-tab-btn[data-v-1f725c9a]:after{background:var(--colorPrimary);bottom:-1px;content:\"\";height:2px;left:0;pointer-events:none;position:absolute;right:0;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform .22s ease;transition:-webkit-transform .22s ease;-moz-transition:transform .22s ease,-moz-transform .22s ease;transition:transform .22s ease;transition:transform .22s ease,-webkit-transform .22s ease,-moz-transform .22s ease;will-change:transform}.fw-tab-btn[data-v-1f725c9a]:hover:after{-webkit-transform:scaleX(.15);-moz-transform:scaleX(.15);-ms-transform:scaleX(.15);transform:scaleX(.15)}.fw-tab-btn.is-active[data-v-1f725c9a]{color:var(--color-primary)}.fw-tab-btn.is-active[data-v-1f725c9a]:after{-webkit-transform:scaleX(1)!important;-moz-transform:scaleX(1)!important;-ms-transform:scaleX(1)!important;transform:scaleX(1)!important}.fw-tab-btn[data-v-1f725c9a]:focus-visible:after{-webkit-transform:scaleX(.35);-moz-transform:scaleX(.35);-ms-transform:scaleX(.35);transform:scaleX(.35)}";
+styleInject(css_248z$1);
+
 script$1.render = render$1;
+script$1.__scopeId = "data-v-1f725c9a";
 
 var script = defineComponent({
   name: 'FwTab',
@@ -67,27 +112,21 @@ var script = defineComponent({
     }
   },
   setup: function setup(props) {
+    var api = inject('tabsApi');
+    if (!api) throw new Error('FwTab must be used inside FwTabs.');
     var instance = getCurrentInstance();
-    var state = inject('tabsState');
-    var index = computed(function () {
-      var _state$tabs;
-      return state === null || state === void 0 || (_state$tabs = state.tabs) === null || _state$tabs === void 0 ? void 0 : _state$tabs.findIndex(function (target) {
-        return target.uid === (instance === null || instance === void 0 ? void 0 : instance.uid);
-      });
+    var myIndex = ref(-1);
+    onMounted(function () {
+      myIndex.value = api.registerTabs(instance.uid, props.label);
     });
-    var isActive = computed(function () {
-      return index.value === (state === null || state === void 0 ? void 0 : state.active);
+    onBeforeUnmount(function () {
+      api.unregisterTabs(instance.uid);
     });
-    watchEffect(function () {
-      if (instance && index.value === -1) {
-        var _state$tabs2;
-        state === null || state === void 0 || (_state$tabs2 = state.tabs) === null || _state$tabs2 === void 0 || _state$tabs2.push(instance);
-      }
+    var isActive = computed(function () {
+      return myIndex.value === api.active.value;
     });
     return {
-      isActive: isActive,
-      index: index,
-      props: props
+      isActive: isActive
     };
   }
 });
@@ -96,9 +135,22 @@ var _hoisted_1 = {
   "class": "fw-tab w-full"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.isActive]]);
+  return openBlock(), createBlock(Transition, {
+    name: "fw-tab-slide",
+    appear: ""
+  }, {
+    "default": withCtx(function () {
+      return [withDirectives(createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, _ctx.isActive]])];
+    }),
+    _: 3
+  });
 }
 
+var css_248z = ".fw-tab[data-v-334b8b64]{inset:0;position:absolute}.fw-tab[style*=\"display: none\"][data-v-334b8b64]{pointer-events:none}.fw-tab-slide-enter-active[data-v-334b8b64],.fw-tab-slide-leave-active[data-v-334b8b64]{-webkit-transition:opacity .32s cubic-bezier(.22,1,.36,1),-webkit-transform .32s cubic-bezier(.22,1,.36,1);transition:opacity .32s cubic-bezier(.22,1,.36,1),-webkit-transform .32s cubic-bezier(.22,1,.36,1);-moz-transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),-moz-transform .32s cubic-bezier(.22,1,.36,1);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),-webkit-transform .32s cubic-bezier(.22,1,.36,1),-moz-transform .32s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}.fw-tab-slide-enter-from[data-v-334b8b64],.fw-tab-slide-leave-to[data-v-334b8b64]{opacity:0;-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}.fw-tab-slide-enter-to[data-v-334b8b64],.fw-tab-slide-leave-from[data-v-334b8b64]{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}";
+var stylesheet = ".fw-tab[data-v-334b8b64]{inset:0;position:absolute}.fw-tab[style*=\"display: none\"][data-v-334b8b64]{pointer-events:none}.fw-tab-slide-enter-active[data-v-334b8b64],.fw-tab-slide-leave-active[data-v-334b8b64]{-webkit-transition:opacity .32s cubic-bezier(.22,1,.36,1),-webkit-transform .32s cubic-bezier(.22,1,.36,1);transition:opacity .32s cubic-bezier(.22,1,.36,1),-webkit-transform .32s cubic-bezier(.22,1,.36,1);-moz-transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),-moz-transform .32s cubic-bezier(.22,1,.36,1);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),-webkit-transform .32s cubic-bezier(.22,1,.36,1),-moz-transform .32s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}.fw-tab-slide-enter-from[data-v-334b8b64],.fw-tab-slide-leave-to[data-v-334b8b64]{opacity:0;-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}.fw-tab-slide-enter-to[data-v-334b8b64],.fw-tab-slide-leave-from[data-v-334b8b64]{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}";
+styleInject(css_248z);
+
 script.render = render;
+script.__scopeId = "data-v-334b8b64";
 
 export { script as FwTab, script$1 as FwTabs };