@xenknight/framework7 0.0.2

package/components/contacts-list/contacts-list-vars.less

@@ -0,0 +1,24 @@
+:root {
+}
+.ios-vars({
+  --f7-contacts-list-title-font-size: inherit;
+  --f7-contacts-list-title-font-weight: 600;
+  --f7-contacts-list-title-height: 22px;
+  .light-vars({
+    --f7-contacts-list-title-text-color: #000;
+    --f7-contacts-list-title-bg-color: #f7f7f7;
+  });
+  .dark-vars({
+    --f7-contacts-list-title-text-color: #fff;
+    --f7-contacts-list-title-bg-color: #323234;
+  });
+});
+.md-vars({
+  --f7-contacts-list-title-font-size: 20px;
+  --f7-contacts-list-title-font-weight: 500;
+  --f7-contacts-list-title-height: 48px;
+  --f7-contacts-list-title-bg-color: transparent;
+});
+.md-color-vars({
+  --f7-contacts-list-title-text-color: var(--f7-theme-color);
+});

package/components/contacts-list/contacts-list.css

@@ -0,0 +1 @@
+.ios{--f7-contacts-list-title-font-size:inherit;--f7-contacts-list-title-font-weight:600;--f7-contacts-list-title-height:22px;--f7-contacts-list-title-text-color:#000;--f7-contacts-list-title-bg-color:#f7f7f7}.ios .dark,.ios.dark{--f7-contacts-list-title-text-color:#fff;--f7-contacts-list-title-bg-color:#323234}.md{--f7-contacts-list-title-font-size:20px;--f7-contacts-list-title-font-weight:500;--f7-contacts-list-title-height:48px;--f7-contacts-list-title-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-contacts-list-title-text-color:var(--f7-theme-color)}.contacts-list{--f7-list-margin-vertical:0px}.contacts-list .list-group-title,.contacts-list li.list-group-title{background-color:var(--f7-contacts-list-title-bg-color,var(--f7-list-group-title-bg-color));font-weight:var(--f7-contacts-list-title-font-weight,var(--f7-list-group-title-font-weight));font-size:var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));color:var(--f7-contacts-list-title-text-color,var(--f7-theme-color));line-height:var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));height:var(--f7-contacts-list-title-height,var(--f7-list-group-title-height))}.contacts-list .list-group:first-child ul:before{display:none!important}.contacts-list .list-group:last-child ul:after{display:none!important}.md .contacts-list .list-group-title{pointer-events:none;overflow:visible;width:40px}.md .contacts-list .list-group-title+li{margin-top:calc(var(--f7-contacts-list-title-height) * -1)}.md .contacts-list .list-group-title:before{display:none!important}.md .contacts-list li:not(.list-group-title){padding-left:40px}

package/components/contacts-list/contacts-list.d.ts

@@ -0,0 +1,14 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace ContactsList {
+  interface AppMethods {}
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const ContactsListComponent: Framework7Plugin;
+export default ContactsListComponent;

package/components/contacts-list/contacts-list.js

@@ -0,0 +1,3 @@
+export default {
+  name: 'contactsList'
+};

package/components/contacts-list/contacts-list.less

@@ -0,0 +1,26 @@
+/* === Contacts === */
+@import './contacts-list-vars.less';
+.contacts-list {
+  --f7-list-margin-vertical: 0px;
+  .list-group-title,
+  li.list-group-title {
+    background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
+    font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
+    font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
+    color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
+    line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
+    height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
+  }
+  .list-group:first-child ul {
+    .hairline-remove(top);
+  }
+  .list-group:last-child ul {
+    .hairline-remove(bottom);
+  }
+}
+.if-ios-theme({
+  @import './contacts-list-ios.less';
+});
+.if-md-theme({
+  @import './contacts-list-md.less';
+});

package/components/data-table/data-table-class.js

@@ -0,0 +1,141 @@
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+class DataTable extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const table = this;
+    const defaults = {};
+
+    // Extend defaults with modules params
+    table.useModulesParams(defaults);
+    table.params = extend(defaults, params);
+
+    // El
+    const $el = $(table.params.el);
+    if ($el.length === 0) return undefined;
+    table.$el = $el;
+    table.el = $el[0];
+    if (table.$el[0].f7DataTable) {
+      const instance = table.$el[0].f7DataTable;
+      table.destroy();
+      return instance;
+    }
+    table.$el[0].f7DataTable = table;
+    extend(table, {
+      collapsible: $el.hasClass('data-table-collapsible'),
+      // Headers
+      $headerEl: $el.find('.data-table-header'),
+      $headerSelectedEl: $el.find('.data-table-header-selected')
+    });
+
+    // Events
+    function handleChange(e) {
+      if (e.detail && e.detail.sentByF7DataTable) {
+        // Scripted event, don't do anything
+        return;
+      }
+      const $inputEl = $(this);
+      const checked = $inputEl[0].checked;
+      const columnIndex = $inputEl.parents('td,th').index();
+      if ($inputEl.parents('thead').length > 0) {
+        if (columnIndex === 0) {
+          $el.find('tbody tr')[checked ? 'addClass' : 'removeClass']('data-table-row-selected');
+        }
+        $el.find(`tbody tr td:nth-child(${columnIndex + 1}) input`).prop('checked', checked).trigger('change', {
+          sentByF7DataTable: true
+        });
+        $inputEl.prop('indeterminate', false);
+      } else {
+        if (columnIndex === 0) {
+          $inputEl.parents('tr')[checked ? 'addClass' : 'removeClass']('data-table-row-selected');
+        }
+        const checkedRows = $el.find(`tbody .checkbox-cell:nth-child(${columnIndex + 1}) input[type="checkbox"]:checked`).length;
+        const totalRows = $el.find('tbody tr').length;
+        const $headCheckboxEl = $el.find(`thead .checkbox-cell:nth-child(${columnIndex + 1}) input[type="checkbox"]`);
+        if (!checked) {
+          $headCheckboxEl.prop('checked', false);
+        } else if (checkedRows === totalRows) {
+          $headCheckboxEl.prop('checked', true).trigger('change', {
+            sentByF7DataTable: true
+          });
+        }
+        $headCheckboxEl.prop('indeterminate', checkedRows > 0 && checkedRows < totalRows);
+      }
+      table.checkSelectedHeader();
+    }
+    function handleSortableClick() {
+      const $cellEl = $(this);
+      const isActive = $cellEl.hasClass('sortable-cell-active');
+      const currentSort = $cellEl.hasClass('sortable-desc') ? 'desc' : 'asc';
+      let newSort;
+      if (isActive) {
+        newSort = currentSort === 'desc' ? 'asc' : 'desc';
+        $cellEl.removeClass('sortable-desc sortable-asc').addClass(`sortable-${newSort}`);
+      } else {
+        $el.find('thead .sortable-cell-active').removeClass('sortable-cell-active');
+        $cellEl.addClass('sortable-cell-active');
+        newSort = currentSort;
+      }
+      $cellEl.trigger('datatable:sort', newSort);
+      table.emit('local::sort dataTableSort', table, newSort);
+    }
+    table.attachEvents = function attachEvents() {
+      table.$el.on('change', '.checkbox-cell input[type="checkbox"]', handleChange);
+      table.$el.find('thead .sortable-cell').on('click', handleSortableClick);
+    };
+    table.detachEvents = function detachEvents() {
+      table.$el.off('change', '.checkbox-cell input[type="checkbox"]', handleChange);
+      table.$el.find('thead .sortable-cell').off('click', handleSortableClick);
+    };
+
+    // Install Modules
+    table.useModules();
+
+    // Init
+    table.init();
+    return table;
+  }
+  setCollapsibleLabels() {
+    const table = this;
+    if (!table.collapsible) return;
+    table.$el.find('tbody td:not(.checkbox-cell)').each(el => {
+      const $el = $(el);
+      const elIndex = $el.index();
+      const collapsibleTitle = $el.attr('data-collapsible-title');
+      if (!collapsibleTitle && collapsibleTitle !== '') {
+        $el.attr('data-collapsible-title', table.$el.find('thead th').eq(elIndex).text());
+      }
+    });
+  }
+  checkSelectedHeader() {
+    const table = this;
+    if (table.$headerEl.length > 0 && table.$headerSelectedEl.length > 0) {
+      const checkedItems = table.$el.find('tbody .checkbox-cell input:checked').length;
+      table.$el[checkedItems > 0 ? 'addClass' : 'removeClass']('data-table-has-checked');
+      table.$headerSelectedEl.find('.data-table-selected-count').text(checkedItems);
+    }
+  }
+  init() {
+    const table = this;
+    table.attachEvents();
+    table.setCollapsibleLabels();
+    table.checkSelectedHeader();
+  }
+  destroy() {
+    let table = this;
+    table.$el.trigger('datatable:beforedestroy');
+    table.emit('local::beforeDestroy dataTableBeforeDestroy', table);
+    table.detachEvents();
+    if (table.$el[0]) {
+      table.$el[0].f7DataTable = null;
+      delete table.$el[0].f7DataTable;
+    }
+    deleteProps(table);
+    table = null;
+  }
+}
+export default DataTable;

package/components/data-table/data-table-ios.less

@@ -0,0 +1,70 @@
+.ios {
+  .data-table {
+    th,
+    td {
+      &.actions-cell {
+        a.link + a.link {
+          .ltr({ margin-left: 16px; });
+          .rtl({ margin-right: 16px; });
+        }
+      }
+    }
+  }
+  .sortable-cell:not(.numeric-cell):after {
+    .ltr({ margin-left: 5px; });
+    .rtl({ margin-right: 5px; });
+  }
+  .sortable-cell.numeric-cell:before {
+    .ltr({ margin-right: 5px; });
+    .rtl({ margin-left: 5px; });
+  }
+  .data-table-links,
+  .data-table-actions {
+    a.link + a.link,
+    .button + .button {
+      .ltr({ margin-left: 16px; });
+      .rtl({ margin-right: 16px; });
+    }
+  }
+  .data-table-actions {
+    a.link.icon-only {
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  // Footer
+  .data-table-rows-select,
+  .data-table-pagination {
+    a.link {
+      width: 44px;
+      height: 44px;
+    }
+  }
+  .data-table-rows-select {
+    + .data-table-pagination {
+      .ltr({
+        margin-left: 30px;
+      });
+      .rtl({
+        margin-right: 30px;
+      });
+    }
+    .input {
+      .ltr({
+        margin-left: 20px;
+      });
+      .rtl({
+        margin-right: 20px;
+      });
+    }
+  }
+  .data-table-pagination-label {
+    .ltr({
+      margin-right: 16px;
+    });
+    .rtl({
+      margin-left: 16px;
+    });
+  }
+}

package/components/data-table/data-table-md.less

@@ -0,0 +1,88 @@
+.md {
+  .data-table {
+    th,
+    td {
+      &.actions-cell {
+        a.link {
+          + a.link {
+            .ltr({ margin-left: 24px; });
+            .rtl({ margin-right: 24px; });
+          }
+        }
+        a.icon-only {
+          width: 24px;
+          height: 24px;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+  .sortable-cell:not(.numeric-cell):after {
+    .ltr({ margin-left: 8px; });
+    .rtl({ margin-right: 8px; });
+  }
+  .sortable-cell.numeric-cell:before {
+    .ltr({ margin-right: 8px; });
+    .rtl({ margin-left: 8px; });
+  }
+  .data-table-links,
+  .data-table-actions {
+    a.link + a.link,
+    .button + .button {
+      .ltr({ margin-left: 24px; });
+      .rtl({ margin-right: 24px; });
+    }
+  }
+  .data-table-actions {
+    a.link.icon-only {
+      width: 24px;
+      height: 24px;
+      overflow: visible;
+      &.active-state {
+        background: none;
+      }
+    }
+  }
+
+  // Footer
+  .data-table-rows-select,
+  .data-table-pagination {
+    a.link {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .data-table-rows-select {
+    + .data-table-pagination {
+      .ltr({
+        margin-left: 32px;
+      });
+      .rtl({
+        margin-right: 32px;
+      });
+    }
+    .input {
+      .ltr({
+        margin-left: 24px;
+      });
+      .rtl({
+        margin-right: 24px;
+      });
+    }
+  }
+  .data-table-pagination-label {
+    .ltr({
+      margin-right: 20px;
+    });
+    .rtl({
+      margin-left: 20px;
+    });
+  }
+
+  // Inputs
+  .input-cell {
+    .input-clear-button {
+      transform: scale(0.8);
+    }
+  }
+}

package/components/data-table/data-table-rtl.css

@@ -0,0 +1 @@
+:root{--f7-table-head-font-size:12px;--f7-table-body-font-size:14px;--f7-table-footer-font-size:12px;--f7-table-input-height:24px;--f7-table-input-font-size:14px;--f7-table-collapsible-cell-padding:16px;--f7-table-link-icon-only-icon-size:20px;--f7-table-head-bg-color:transparent;--f7-table-card-header-bg-color:transparent;--f7-table-card-header-height:64px;--f7-table-cell-padding-vertical:0px;--f7-table-sortable-icon-color:#000}:root .dark,:root.dark{--f7-table-sortable-icon-color:#fff;--f7-table-input-text-color:#fff}.ios{--f7-table-head-font-weight:600;--f7-table-head-cell-height:44px;--f7-table-head-icon-size:18px;--f7-table-body-cell-height:44px;--f7-table-cell-padding-horizontal:16px;--f7-table-edge-cell-padding-horizontal:16px;--f7-table-label-cell-padding-horizontal:16px;--f7-table-checkbox-cell-width:22px;--f7-table-title-font-size:17px;--f7-table-title-font-weight:600;--f7-table-footer-height:44px;--f7-table-head-text-color:rgba(0, 0, 0, 0.45);--f7-table-cell-border-color:rgba(0, 0, 0, 0.22);--f7-table-selected-row-bg-color:rgba(0, 0, 0, 0.03);--f7-table-footer-text-color:rgba(0, 0, 0, 0.45);--f7-table-input-text-color:#000}.ios .dark,.ios.dark{--f7-table-head-text-color:rgba(255, 255, 255, 0.55);--f7-table-cell-border-color:rgba(255, 255, 255, 0.15);--f7-table-footer-text-color:rgba(255, 255, 255, 0.55);--f7-table-selected-row-bg-color:rgba(255, 255, 255, 0.08)}.md{--f7-table-head-font-weight:500;--f7-table-head-cell-height:56px;--f7-table-head-icon-size:16px;--f7-table-body-cell-height:48px;--f7-table-cell-padding-horizontal:28px;--f7-table-edge-cell-padding-horizontal:24px;--f7-table-label-cell-padding-horizontal:24px;--f7-table-checkbox-cell-width:18px;--f7-table-title-font-size:20px;--f7-table-title-font-weight:400;--f7-table-footer-height:56px;--f7-table-actions-cell-link-color:rgba(0, 0, 0, 0.54);--f7-table-actions-link-color:rgba(0, 0, 0, 0.54);--f7-table-input-text-color:#212121}.md .dark,.md.dark{--f7-table-actions-cell-link-color:rgba(255, 255, 255, 0.54);--f7-table-actions-link-color:rgba(255, 255, 255, 0.54)}.md,.md .dark,.md [class*=color-]{--f7-table-head-text-color:var(--f7-md-on-surface-variant);--f7-table-footer-text-color:var(--f7-md-on-surface-variant);--f7-table-selected-row-bg-color:var(--f7-md-secondary-container);--f7-table-cell-border-color:var(--f7-md-outline)}.data-table{overflow-x:auto}.data-table table,table.data-table{width:100%;border:none;padding:0;margin:0;border-collapse:collapse;text-align:right}.data-table thead td,.data-table thead th{font-size:var(--f7-table-head-font-size);font-weight:var(--f7-table-head-font-weight);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:16px;height:var(--f7-table-head-cell-height);background-color:var(--f7-table-head-bg-color)}.data-table thead td:not(.sortable-cell-active),.data-table thead th:not(.sortable-cell-active){color:var(--f7-table-head-text-color)}.data-table thead i.f7-icons,.data-table thead i.icon,.data-table thead i.material-icons{vertical-align:top;font-size:var(--f7-table-head-icon-size)}.data-table tbody{font-size:var(--f7-table-body-font-size)}.data-table tbody td,.data-table tbody th{height:var(--f7-table-body-cell-height)}.data-table tbody tr.data-table-row-selected,.device-desktop .data-table tbody tr:hover{background:var(--f7-table-selected-row-bg-color)}.data-table tbody td:before,.data-table tbody th:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table td,.data-table th{--f7-table-cell-padding-left:var(--f7-table-cell-padding-horizontal);--f7-table-cell-padding-right:var(--f7-table-cell-padding-horizontal);padding-top:var(--f7-table-cell-padding-vertical);padding-bottom:var(--f7-table-cell-padding-vertical);padding-left:var(--f7-table-cell-padding-left);padding-right:var(--f7-table-cell-padding-right);position:relative;box-sizing:border-box}.data-table td:first-child,.data-table th:first-child{--f7-table-cell-padding-right:var(--f7-table-edge-cell-padding-horizontal)}.data-table td:last-child,.data-table th:last-child{--f7-table-cell-padding-left:var(--f7-table-edge-cell-padding-horizontal)}.data-table td.label-cell,.data-table th.label-cell{--f7-table-cell-padding-left:var(--f7-table-label-cell-padding-horizontal);--f7-table-cell-padding-right:var(--f7-table-label-cell-padding-horizontal)}.data-table td.numeric-cell,.data-table th.numeric-cell{text-align:left}.data-table td.checkbox-cell,.data-table th.checkbox-cell{overflow:visible;width:var(--f7-table-checkbox-cell-width)}.data-table td.checkbox-cell label+span,.data-table th.checkbox-cell label+span{margin-right:8px}.data-table td.checkbox-cell:first-child,.data-table th.checkbox-cell:first-child{padding-left:calc(var(--f7-table-cell-padding-left)/ 2)}.data-table td.checkbox-cell:first-child+td,.data-table td.checkbox-cell:first-child+th,.data-table th.checkbox-cell:first-child+td,.data-table th.checkbox-cell:first-child+th{padding-right:calc(var(--f7-table-cell-padding-right)/ 2)}.data-table td.checkbox-cell:last-child,.data-table th.checkbox-cell:last-child{padding-right:calc(var(--f7-table-cell-padding-right)/ 2)}.data-table td.actions-cell,.data-table th.actions-cell{text-align:left;white-space:nowrap}.data-table td.actions-cell a.link,.data-table th.actions-cell a.link{color:var(--f7-table-actions-cell-link-color,var(--f7-theme-color))}.card .data-table td a.icon-only,.card .data-table th a.icon-only,.card.data-table td a.icon-only,.card.data-table th a.icon-only,.data-table td a.icon-only,.data-table th a.icon-only{display:inline-block;vertical-align:middle;text-align:center;font-size:0;min-width:0}.card .data-table td a.icon-only i,.card .data-table th a.icon-only i,.card.data-table td a.icon-only i,.card.data-table th a.icon-only i,.data-table td a.icon-only i,.data-table th a.icon-only i{font-size:var(--f7-table-link-icon-only-icon-size);vertical-align:middle}.data-table .sortable-cell:not(.input-cell){cursor:pointer;position:relative}.data-table .sortable-cell.input-cell .table-head-label{cursor:pointer;position:relative}.data-table .sortable-cell.numeric-cell.input-cell>.table-head-label:before,.data-table .sortable-cell.numeric-cell:not(.input-cell):before,.data-table .sortable-cell:not(.numeric-cell).input-cell>.table-head-label:after,.data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after{content:'arrow_bottom_md';font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;display:inline-block;vertical-align:top;width:16px;height:16px;color:var(--f7-table-sortable-icon-color);font-size:13px;line-height:16px;transition-duration:.3s;transform:rotate(0);opacity:0}.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before{opacity:.54}.data-table .sortable-cell.sortable-cell-active .table-head-label:after,.data-table .sortable-cell.sortable-cell-active .table-head-label:before,.data-table .sortable-cell.sortable-cell-active:after,.data-table .sortable-cell.sortable-cell-active:before{opacity:.87!important}.data-table .sortable-cell.sortable-desc:after,.data-table .sortable-cell.sortable-desc:before,.data-table .table-head-label:after,.data-table .table-head-label:before{transform:rotate(180deg)!important}.card .data-table .card-footer,.card .data-table .card-header,.data-table.card .card-footer,.data-table.card .card-header{padding-left:var(--f7-table-edge-cell-padding-horizontal);padding-right:var(--f7-table-edge-cell-padding-horizontal)}.card .data-table .card-header,.data-table.card .card-header{min-height:var(--f7-table-card-header-height);background-color:var(--f7-table-card-header-bg-color)}.card .data-table .card-content,.data-table.card .card-content{overflow-x:auto}.card .data-table .card-footer,.data-table.card .card-footer{min-height:var(--f7-table-footer-height)}.data-table .data-table-title{font-size:var(--f7-table-title-font-size);font-weight:var(--f7-table-title-font-weight)}.data-table .data-table-actions,.data-table .data-table-links{display:flex}.data-table .data-table-links .button{min-width:64px}.data-table .data-table-actions{margin-right:auto;align-items:center}.data-table .data-table-actions a.link{color:var(--f7-table-actions-link-color,var(--f7-theme-color));min-width:0}.data-table .data-table-actions a.link.icon-only{line-height:1;justify-content:center;padding:0}.data-table .data-table-header,.data-table .data-table-header-selected{display:flex;justify-content:space-between;align-items:center;width:100%}.data-table .card-header>.data-table-header,.data-table .card-header>.data-table-header-selected{padding-top:var(--f7-card-header-padding-vertical);padding-bottom:var(--f7-card-header-padding-vertical);height:100%;margin-top:calc(-1 * var(--f7-card-header-padding-vertical));margin-bottom:calc(-1 * var(--f7-card-header-padding-vertical));min-height:var(--f7-table-card-header-height);padding-right:var(--f7-table-edge-cell-padding-horizontal);padding-left:var(--f7-table-edge-cell-padding-horizontal);margin-right:calc(-1 * var(--f7-table-edge-cell-padding-horizontal));margin-left:calc(-1 * var(--f7-table-edge-cell-padding-horizontal))}.data-table .data-table-header-selected{background:rgba(var(--f7-theme-color-rgb),.1);display:none}.data-table.data-table-has-checked .data-table-header{display:none}.data-table.data-table-has-checked .data-table-header-selected{display:flex}.data-table .data-table-title-selected{font-size:14px;color:var(--f7-theme-color)}.data-table .data-table-footer{display:flex;align-items:center;box-sizing:border-box;position:relative;font-size:var(--f7-table-footer-font-size);overflow:hidden;min-height:var(--f7-table-footer-height);color:var(--f7-table-footer-text-color);justify-content:flex-start}.data-table .data-table-footer:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table .data-table-pagination,.data-table .data-table-rows-select{display:flex;align-items:center}.data-table .input-cell{padding-top:8px;padding-bottom:8px;height:auto;vertical-align:top}.data-table .input-cell .table-head-label+.input{margin-top:4px}.data-table .input-cell .input{height:var(--f7-table-input-height)}.data-table .input-cell .input input,.data-table .input-cell .input select,.data-table .input-cell .input textarea{height:var(--f7-table-input-height);color:var(--f7-table-input-text-color);font-size:var(--f7-table-input-font-size)}@media (max-width:480px) and (orientation:portrait){.data-table.data-table-collapsible thead{display:none}.data-table.data-table-collapsible tbody,.data-table.data-table-collapsible td,.data-table.data-table-collapsible tr{display:block}.data-table.data-table-collapsible tr{position:relative}.data-table.data-table-collapsible tr:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table.data-table-collapsible tr:hover{background-color:inherit}.data-table.data-table-collapsible td{--f7-table-cell-padding-left:var(--f7-table-collapsible-cell-padding);--f7-table-cell-padding-right:var(--f7-table-collapsible-cell-padding);height:auto;min-height:var(--f7-table-body-cell-height);display:flex;align-content:center;align-items:center;justify-content:flex-start;text-align:right}.data-table.data-table-collapsible td:before{display:none!important}.data-table.data-table-collapsible td:not(.checkbox-cell):before{width:40%;display:block!important;content:attr(data-collapsible-title);position:relative;height:auto;background:0 0!important;transform:none!important;font-size:var(--f7-table-head-font-size);font-weight:var(--f7-table-head-font-weight);color:var(--f7-table-head-text-color);margin-left:16px;flex-shrink:0}.data-table.data-table-collapsible td.checkbox-cell{position:absolute;top:0;right:0}.data-table.data-table-collapsible td.checkbox-cell+td{padding-right:16px}.data-table.data-table-collapsible td.checkbox-cell~td{margin-right:32px}}.data-table .xsmall-landscape-only,.data-table .xsmall-only{display:none}@media (min-width:480px){.data-table .xsmall-only{display:table-cell}}@media (min-width:480px) and (orientation:landscape){.data-table .xsmall-landscape-only{display:table-cell}}.data-table .small-landscape-only,.data-table .small-only{display:none}@media (min-width:568px){.data-table .small-only{display:table-cell}}@media (min-width:568px) and (orientation:landscape){.data-table .small-landscape-only{display:table-cell}}.data-table .medium-landscape-only,.data-table .medium-only{display:none}@media (min-width:768px){.data-table .medium-only{display:table-cell}}@media (min-width:768px) and (orientation:landscape){.data-table .medium-landscape-only{display:table-cell}}.data-table .large-landscape-only,.data-table .large-only{display:none}@media (min-width:1024px){.data-table .large-only{display:table-cell}}@media (min-width:1024px) and (orientation:landscape){.data-table .large-landscape-only{display:table-cell}}.data-table .xlarge-landscape-only,.data-table .xlarge-only{display:none}@media (min-width:1200px){.data-table .xlarge-only{display:table-cell}}@media (min-width:1200px) and (orientation:landscape){.data-table .xlarge-landscape-only{display:table-cell}}.ios .data-table td.actions-cell a.link+a.link,.ios .data-table th.actions-cell a.link+a.link{margin-right:16px}.ios .sortable-cell:not(.numeric-cell):after{margin-right:5px}.ios .sortable-cell.numeric-cell:before{margin-left:5px}.ios .data-table-actions .button+.button,.ios .data-table-actions a.link+a.link,.ios .data-table-links .button+.button,.ios .data-table-links a.link+a.link{margin-right:16px}.ios .data-table-actions a.link.icon-only{width:44px;height:44px}.ios .data-table-pagination a.link,.ios .data-table-rows-select a.link{width:44px;height:44px}.ios .data-table-rows-select+.data-table-pagination{margin-right:30px}.ios .data-table-rows-select .input{margin-right:20px}.ios .data-table-pagination-label{margin-left:16px}.md .data-table td.actions-cell a.link+a.link,.md .data-table th.actions-cell a.link+a.link{margin-right:24px}.md .data-table td.actions-cell a.icon-only,.md .data-table th.actions-cell a.icon-only{width:24px;height:24px;line-height:24px}.md .sortable-cell:not(.numeric-cell):after{margin-right:8px}.md .sortable-cell.numeric-cell:before{margin-left:8px}.md .data-table-actions .button+.button,.md .data-table-actions a.link+a.link,.md .data-table-links .button+.button,.md .data-table-links a.link+a.link{margin-right:24px}.md .data-table-actions a.link.icon-only{width:24px;height:24px;overflow:visible}.md .data-table-actions a.link.icon-only.active-state{background:0 0}.md .data-table-pagination a.link,.md .data-table-rows-select a.link{width:48px;height:48px}.md .data-table-rows-select+.data-table-pagination{margin-right:32px}.md .data-table-rows-select .input{margin-right:24px}.md .data-table-pagination-label{margin-left:20px}.md .input-cell .input-clear-button{transform:scale(.8)}

package/components/data-table/data-table-vars.less

@@ -0,0 +1,77 @@
+:root {
+  --f7-table-head-font-size: 12px;
+  --f7-table-body-font-size: 14px;
+  --f7-table-footer-font-size: 12px;
+  --f7-table-input-height: 24px;
+  --f7-table-input-font-size: 14px;
+  --f7-table-collapsible-cell-padding: 16px;
+  --f7-table-link-icon-only-icon-size: 20px;
+  --f7-table-head-bg-color: transparent;
+  --f7-table-card-header-bg-color: transparent;
+  --f7-table-card-header-height: 64px;
+  --f7-table-cell-padding-vertical: 0px;
+  .light-vars({
+    --f7-table-sortable-icon-color:  #000;
+  });
+  .dark-vars({
+    --f7-table-sortable-icon-color: #fff;
+    --f7-table-input-text-color: #fff;
+  });
+}
+.ios-vars({
+  --f7-table-head-font-weight: 600;
+  --f7-table-head-cell-height: 44px;
+  --f7-table-head-icon-size: 18px;
+  --f7-table-body-cell-height: 44px;
+  --f7-table-cell-padding-horizontal: 16px;
+  --f7-table-edge-cell-padding-horizontal: 16px;
+  --f7-table-label-cell-padding-horizontal: 16px;
+  --f7-table-checkbox-cell-width: 22px;
+  /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
+  /* --f7-table-actions-link-color: var(--f7-theme-color); */
+  --f7-table-title-font-size: 17px;
+  --f7-table-title-font-weight: 600;
+  --f7-table-footer-height: 44px;
+  .light-vars({
+    --f7-table-head-text-color: rgba(0,0,0,0.45);
+    --f7-table-cell-border-color: rgba(0,0,0,0.22);
+    --f7-table-selected-row-bg-color: rgba(0,0,0,0.03);
+    --f7-table-footer-text-color: rgba(0,0,0,0.45);
+    --f7-table-input-text-color: #000;
+  });
+  .dark-vars({
+    --f7-table-head-text-color: rgba(255,255,255,0.55);
+    --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
+    --f7-table-footer-text-color: rgba(255,255,255,0.55);
+    --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
+  });
+});
+.md-vars({
+  --f7-table-head-font-weight: 500;
+  --f7-table-head-cell-height: 56px;
+  --f7-table-head-icon-size: 16px;
+  --f7-table-body-cell-height: 48px;
+  --f7-table-cell-padding-horizontal: 28px;
+  --f7-table-edge-cell-padding-horizontal: 24px;
+  --f7-table-label-cell-padding-horizontal: 24px;
+  --f7-table-checkbox-cell-width: 18px;
+  --f7-table-title-font-size: 20px;
+  --f7-table-title-font-weight: 400;
+  --f7-table-footer-height: 56px;
+  .light-vars({
+    --f7-table-actions-cell-link-color: rgba(0,0,0,0.54);
+    --f7-table-actions-link-color: rgba(0,0,0,0.54);
+    --f7-table-input-text-color: #212121;
+  });
+  .dark-vars({
+    --f7-table-actions-cell-link-color: rgba(255,255,255,0.54);
+    --f7-table-actions-link-color: rgba(255,255,255,0.54);
+  });
+});
+
+.md-color-vars({
+  --f7-table-head-text-color: var(--f7-md-on-surface-variant);
+  --f7-table-footer-text-color: var(--f7-md-on-surface-variant);
+  --f7-table-selected-row-bg-color: var(--f7-md-secondary-container);
+  --f7-table-cell-border-color: var(--f7-md-outline);
+});

package/components/data-table/data-table.css

@@ -0,0 +1 @@
+:root{--f7-table-head-font-size:12px;--f7-table-body-font-size:14px;--f7-table-footer-font-size:12px;--f7-table-input-height:24px;--f7-table-input-font-size:14px;--f7-table-collapsible-cell-padding:16px;--f7-table-link-icon-only-icon-size:20px;--f7-table-head-bg-color:transparent;--f7-table-card-header-bg-color:transparent;--f7-table-card-header-height:64px;--f7-table-cell-padding-vertical:0px;--f7-table-sortable-icon-color:#000}:root .dark,:root.dark{--f7-table-sortable-icon-color:#fff;--f7-table-input-text-color:#fff}.ios{--f7-table-head-font-weight:600;--f7-table-head-cell-height:44px;--f7-table-head-icon-size:18px;--f7-table-body-cell-height:44px;--f7-table-cell-padding-horizontal:16px;--f7-table-edge-cell-padding-horizontal:16px;--f7-table-label-cell-padding-horizontal:16px;--f7-table-checkbox-cell-width:22px;--f7-table-title-font-size:17px;--f7-table-title-font-weight:600;--f7-table-footer-height:44px;--f7-table-head-text-color:rgba(0, 0, 0, 0.45);--f7-table-cell-border-color:rgba(0, 0, 0, 0.22);--f7-table-selected-row-bg-color:rgba(0, 0, 0, 0.03);--f7-table-footer-text-color:rgba(0, 0, 0, 0.45);--f7-table-input-text-color:#000}.ios .dark,.ios.dark{--f7-table-head-text-color:rgba(255, 255, 255, 0.55);--f7-table-cell-border-color:rgba(255, 255, 255, 0.15);--f7-table-footer-text-color:rgba(255, 255, 255, 0.55);--f7-table-selected-row-bg-color:rgba(255, 255, 255, 0.08)}.md{--f7-table-head-font-weight:500;--f7-table-head-cell-height:56px;--f7-table-head-icon-size:16px;--f7-table-body-cell-height:48px;--f7-table-cell-padding-horizontal:28px;--f7-table-edge-cell-padding-horizontal:24px;--f7-table-label-cell-padding-horizontal:24px;--f7-table-checkbox-cell-width:18px;--f7-table-title-font-size:20px;--f7-table-title-font-weight:400;--f7-table-footer-height:56px;--f7-table-actions-cell-link-color:rgba(0, 0, 0, 0.54);--f7-table-actions-link-color:rgba(0, 0, 0, 0.54);--f7-table-input-text-color:#212121}.md .dark,.md.dark{--f7-table-actions-cell-link-color:rgba(255, 255, 255, 0.54);--f7-table-actions-link-color:rgba(255, 255, 255, 0.54)}.md,.md .dark,.md [class*=color-]{--f7-table-head-text-color:var(--f7-md-on-surface-variant);--f7-table-footer-text-color:var(--f7-md-on-surface-variant);--f7-table-selected-row-bg-color:var(--f7-md-secondary-container);--f7-table-cell-border-color:var(--f7-md-outline)}.data-table{overflow-x:auto}.data-table table,table.data-table{width:100%;border:none;padding:0;margin:0;border-collapse:collapse;text-align:left}.data-table thead td,.data-table thead th{font-size:var(--f7-table-head-font-size);font-weight:var(--f7-table-head-font-weight);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:16px;height:var(--f7-table-head-cell-height);background-color:var(--f7-table-head-bg-color)}.data-table thead td:not(.sortable-cell-active),.data-table thead th:not(.sortable-cell-active){color:var(--f7-table-head-text-color)}.data-table thead i.f7-icons,.data-table thead i.icon,.data-table thead i.material-icons{vertical-align:top;font-size:var(--f7-table-head-icon-size)}.data-table tbody{font-size:var(--f7-table-body-font-size)}.data-table tbody td,.data-table tbody th{height:var(--f7-table-body-cell-height)}.data-table tbody tr.data-table-row-selected,.device-desktop .data-table tbody tr:hover{background:var(--f7-table-selected-row-bg-color)}.data-table tbody td:before,.data-table tbody th:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table td,.data-table th{--f7-table-cell-padding-left:var(--f7-table-cell-padding-horizontal);--f7-table-cell-padding-right:var(--f7-table-cell-padding-horizontal);padding-top:var(--f7-table-cell-padding-vertical);padding-bottom:var(--f7-table-cell-padding-vertical);padding-left:var(--f7-table-cell-padding-left);padding-right:var(--f7-table-cell-padding-right);position:relative;box-sizing:border-box}.data-table td:first-child,.data-table th:first-child{--f7-table-cell-padding-left:var(--f7-table-edge-cell-padding-horizontal)}.data-table td:last-child,.data-table th:last-child{--f7-table-cell-padding-right:var(--f7-table-edge-cell-padding-horizontal)}.data-table td.label-cell,.data-table th.label-cell{--f7-table-cell-padding-left:var(--f7-table-label-cell-padding-horizontal);--f7-table-cell-padding-right:var(--f7-table-label-cell-padding-horizontal)}.data-table td.numeric-cell,.data-table th.numeric-cell{text-align:right}.data-table td.checkbox-cell,.data-table th.checkbox-cell{overflow:visible;width:var(--f7-table-checkbox-cell-width)}.data-table td.checkbox-cell label+span,.data-table th.checkbox-cell label+span{margin-left:8px}.data-table td.checkbox-cell:first-child,.data-table th.checkbox-cell:first-child{padding-right:calc(var(--f7-table-cell-padding-right)/ 2)}.data-table td.checkbox-cell:first-child+td,.data-table td.checkbox-cell:first-child+th,.data-table th.checkbox-cell:first-child+td,.data-table th.checkbox-cell:first-child+th{padding-left:calc(var(--f7-table-cell-padding-left)/ 2)}.data-table td.checkbox-cell:last-child,.data-table th.checkbox-cell:last-child{padding-left:calc(var(--f7-table-cell-padding-left)/ 2)}.data-table td.actions-cell,.data-table th.actions-cell{text-align:right;white-space:nowrap}.data-table td.actions-cell a.link,.data-table th.actions-cell a.link{color:var(--f7-table-actions-cell-link-color,var(--f7-theme-color))}.card .data-table td a.icon-only,.card .data-table th a.icon-only,.card.data-table td a.icon-only,.card.data-table th a.icon-only,.data-table td a.icon-only,.data-table th a.icon-only{display:inline-block;vertical-align:middle;text-align:center;font-size:0;min-width:0}.card .data-table td a.icon-only i,.card .data-table th a.icon-only i,.card.data-table td a.icon-only i,.card.data-table th a.icon-only i,.data-table td a.icon-only i,.data-table th a.icon-only i{font-size:var(--f7-table-link-icon-only-icon-size);vertical-align:middle}.data-table .sortable-cell:not(.input-cell){cursor:pointer;position:relative}.data-table .sortable-cell.input-cell .table-head-label{cursor:pointer;position:relative}.data-table .sortable-cell.numeric-cell.input-cell>.table-head-label:before,.data-table .sortable-cell.numeric-cell:not(.input-cell):before,.data-table .sortable-cell:not(.numeric-cell).input-cell>.table-head-label:after,.data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after{content:'arrow_bottom_md';font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;display:inline-block;vertical-align:top;width:16px;height:16px;color:var(--f7-table-sortable-icon-color);font-size:13px;line-height:16px;transition-duration:.3s;transform:rotate(0);opacity:0}.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before{opacity:.54}.data-table .sortable-cell.sortable-cell-active .table-head-label:after,.data-table .sortable-cell.sortable-cell-active .table-head-label:before,.data-table .sortable-cell.sortable-cell-active:after,.data-table .sortable-cell.sortable-cell-active:before{opacity:.87!important}.data-table .sortable-cell.sortable-desc:after,.data-table .sortable-cell.sortable-desc:before,.data-table .table-head-label:after,.data-table .table-head-label:before{transform:rotate(180deg)!important}.card .data-table .card-footer,.card .data-table .card-header,.data-table.card .card-footer,.data-table.card .card-header{padding-left:var(--f7-table-edge-cell-padding-horizontal);padding-right:var(--f7-table-edge-cell-padding-horizontal)}.card .data-table .card-header,.data-table.card .card-header{min-height:var(--f7-table-card-header-height);background-color:var(--f7-table-card-header-bg-color)}.card .data-table .card-content,.data-table.card .card-content{overflow-x:auto}.card .data-table .card-footer,.data-table.card .card-footer{min-height:var(--f7-table-footer-height)}.data-table .data-table-title{font-size:var(--f7-table-title-font-size);font-weight:var(--f7-table-title-font-weight)}.data-table .data-table-actions,.data-table .data-table-links{display:flex}.data-table .data-table-links .button{min-width:64px}.data-table .data-table-actions{margin-left:auto;align-items:center}.data-table .data-table-actions a.link{color:var(--f7-table-actions-link-color,var(--f7-theme-color));min-width:0}.data-table .data-table-actions a.link.icon-only{line-height:1;justify-content:center;padding:0}.data-table .data-table-header,.data-table .data-table-header-selected{display:flex;justify-content:space-between;align-items:center;width:100%}.data-table .card-header>.data-table-header,.data-table .card-header>.data-table-header-selected{padding-top:var(--f7-card-header-padding-vertical);padding-bottom:var(--f7-card-header-padding-vertical);height:100%;margin-top:calc(-1 * var(--f7-card-header-padding-vertical));margin-bottom:calc(-1 * var(--f7-card-header-padding-vertical));min-height:var(--f7-table-card-header-height);padding-left:var(--f7-table-edge-cell-padding-horizontal);padding-right:var(--f7-table-edge-cell-padding-horizontal);margin-left:calc(-1 * var(--f7-table-edge-cell-padding-horizontal));margin-right:calc(-1 * var(--f7-table-edge-cell-padding-horizontal))}.data-table .data-table-header-selected{background:rgba(var(--f7-theme-color-rgb),.1);display:none}.data-table.data-table-has-checked .data-table-header{display:none}.data-table.data-table-has-checked .data-table-header-selected{display:flex}.data-table .data-table-title-selected{font-size:14px;color:var(--f7-theme-color)}.data-table .data-table-footer{display:flex;align-items:center;box-sizing:border-box;position:relative;font-size:var(--f7-table-footer-font-size);overflow:hidden;min-height:var(--f7-table-footer-height);color:var(--f7-table-footer-text-color);justify-content:flex-end}.data-table .data-table-footer:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table .data-table-pagination,.data-table .data-table-rows-select{display:flex;align-items:center}.data-table .input-cell{padding-top:8px;padding-bottom:8px;height:auto;vertical-align:top}.data-table .input-cell .table-head-label+.input{margin-top:4px}.data-table .input-cell .input{height:var(--f7-table-input-height)}.data-table .input-cell .input input,.data-table .input-cell .input select,.data-table .input-cell .input textarea{height:var(--f7-table-input-height);color:var(--f7-table-input-text-color);font-size:var(--f7-table-input-font-size)}@media (max-width:480px) and (orientation:portrait){.data-table.data-table-collapsible thead{display:none}.data-table.data-table-collapsible tbody,.data-table.data-table-collapsible td,.data-table.data-table-collapsible tr{display:block}.data-table.data-table-collapsible tr{position:relative}.data-table.data-table-collapsible tr:before{content:'';position:absolute;background-color:var(--f7-table-cell-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.data-table.data-table-collapsible tr:hover{background-color:inherit}.data-table.data-table-collapsible td{--f7-table-cell-padding-left:var(--f7-table-collapsible-cell-padding);--f7-table-cell-padding-right:var(--f7-table-collapsible-cell-padding);height:auto;min-height:var(--f7-table-body-cell-height);display:flex;align-content:center;align-items:center;justify-content:flex-start;text-align:left}.data-table.data-table-collapsible td:before{display:none!important}.data-table.data-table-collapsible td:not(.checkbox-cell):before{width:40%;display:block!important;content:attr(data-collapsible-title);position:relative;height:auto;background:0 0!important;transform:none!important;font-size:var(--f7-table-head-font-size);font-weight:var(--f7-table-head-font-weight);color:var(--f7-table-head-text-color);margin-right:16px;flex-shrink:0}.data-table.data-table-collapsible td.checkbox-cell{position:absolute;top:0;left:0}.data-table.data-table-collapsible td.checkbox-cell+td{padding-left:16px}.data-table.data-table-collapsible td.checkbox-cell~td{margin-left:32px}}.data-table .xsmall-landscape-only,.data-table .xsmall-only{display:none}@media (min-width:480px){.data-table .xsmall-only{display:table-cell}}@media (min-width:480px) and (orientation:landscape){.data-table .xsmall-landscape-only{display:table-cell}}.data-table .small-landscape-only,.data-table .small-only{display:none}@media (min-width:568px){.data-table .small-only{display:table-cell}}@media (min-width:568px) and (orientation:landscape){.data-table .small-landscape-only{display:table-cell}}.data-table .medium-landscape-only,.data-table .medium-only{display:none}@media (min-width:768px){.data-table .medium-only{display:table-cell}}@media (min-width:768px) and (orientation:landscape){.data-table .medium-landscape-only{display:table-cell}}.data-table .large-landscape-only,.data-table .large-only{display:none}@media (min-width:1024px){.data-table .large-only{display:table-cell}}@media (min-width:1024px) and (orientation:landscape){.data-table .large-landscape-only{display:table-cell}}.data-table .xlarge-landscape-only,.data-table .xlarge-only{display:none}@media (min-width:1200px){.data-table .xlarge-only{display:table-cell}}@media (min-width:1200px) and (orientation:landscape){.data-table .xlarge-landscape-only{display:table-cell}}.ios .data-table td.actions-cell a.link+a.link,.ios .data-table th.actions-cell a.link+a.link{margin-left:16px}.ios .sortable-cell:not(.numeric-cell):after{margin-left:5px}.ios .sortable-cell.numeric-cell:before{margin-right:5px}.ios .data-table-actions .button+.button,.ios .data-table-actions a.link+a.link,.ios .data-table-links .button+.button,.ios .data-table-links a.link+a.link{margin-left:16px}.ios .data-table-actions a.link.icon-only{width:44px;height:44px}.ios .data-table-pagination a.link,.ios .data-table-rows-select a.link{width:44px;height:44px}.ios .data-table-rows-select+.data-table-pagination{margin-left:30px}.ios .data-table-rows-select .input{margin-left:20px}.ios .data-table-pagination-label{margin-right:16px}.md .data-table td.actions-cell a.link+a.link,.md .data-table th.actions-cell a.link+a.link{margin-left:24px}.md .data-table td.actions-cell a.icon-only,.md .data-table th.actions-cell a.icon-only{width:24px;height:24px;line-height:24px}.md .sortable-cell:not(.numeric-cell):after{margin-left:8px}.md .sortable-cell.numeric-cell:before{margin-right:8px}.md .data-table-actions .button+.button,.md .data-table-actions a.link+a.link,.md .data-table-links .button+.button,.md .data-table-links a.link+a.link{margin-left:24px}.md .data-table-actions a.link.icon-only{width:24px;height:24px;overflow:visible}.md .data-table-actions a.link.icon-only.active-state{background:0 0}.md .data-table-pagination a.link,.md .data-table-rows-select a.link{width:48px;height:48px}.md .data-table-rows-select+.data-table-pagination{margin-left:32px}.md .data-table-rows-select .input{margin-left:24px}.md .data-table-pagination-label{margin-right:20px}.md .input-cell .input-clear-button{transform:scale(.8)}

package/components/data-table/data-table.d.ts

@@ -0,0 +1,61 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace DataTable {
+  interface DataTable extends Framework7EventsClass<Events> {
+    /** Data table HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with Data table HTML element */
+    $el: Dom7Array;
+    /** Destroy data table */
+    destroy(): void;
+  }
+
+  interface Parameters {
+    /** Data Table element. Can be useful if you already have Data Table element in your HTML and want to create new instance using this element */
+    el: HTMLElement | CSSSelector;
+
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered data table sort changed. As an argument event handler receives data table instance and new sort order (asc or desc) */
+    sort: (dataTable: DataTable, sort: string) => void;
+    /** Event will be triggered right before Data Table instance will be destroyed. As an argument event handler receives Data table instance */
+    beforeDestroy: (dataTable: DataTable) => void;
+  }
+
+  interface AppMethods {
+    dataTable: {
+      /** create DataTable instance */
+      create(parameters: Parameters): DataTable;
+      /** destroy DataTable instance */
+      destroy(el: HTMLElement | CSSSelector | DataTable): void;
+      /** get DataTable instance by HTML element */
+      get(el: HTMLElement | CSSSelector): DataTable;
+    };
+  }
+  interface AppParams {}
+  interface DomEvents {
+    /** Event will be triggered data table sort changed */
+    'datatable:sort': () => void;
+    /** Event will be triggered right before Data Table instance will be destroyed */
+    'datatable:beforedestroy': () => void;
+  }
+  interface AppEvents {
+    /** Event will be triggered data table sort changed. As an argument event handler receives data table instance and new sort order (asc or desc) */
+    dataTableSort: (dataTable: DataTable, sort: string) => void;
+    /** Event will be triggered right before Data Table instance will be destroyed. As an argument event handler receives Data table instance */
+    dataTableBeforeDestroy: (dataTable: DataTable) => void;
+  }
+}
+
+declare const DataTableComponent: Framework7Plugin;
+
+export default DataTableComponent;

package/components/data-table/data-table.js

@@ -0,0 +1,64 @@
+import $ from '../../shared/dom7.js';
+import DataTable from './data-table-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'dataTable',
+  static: {
+    DataTable
+  },
+  create() {
+    const app = this;
+    app.dataTable = ConstructorMethods({
+      defaultSelector: '.data-table',
+      constructor: DataTable,
+      app,
+      domProp: 'f7DataTable'
+    });
+  },
+  on: {
+    tabBeforeRemove(tabEl) {
+      const app = this;
+      $(tabEl).find('.data-table-init').each(tableEl => {
+        app.dataTable.destroy(tableEl);
+      });
+    },
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.data-table-init').each(tableEl => {
+        app.dataTable.create({
+          el: tableEl
+        });
+      });
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.data-table-init').each(tableEl => {
+        app.dataTable.destroy(tableEl);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.data-table-init').each(tableEl => {
+        app.dataTable.create({
+          el: tableEl
+        });
+      });
+    }
+  },
+  vnode: {
+    'data-table-init': {
+      insert(vnode) {
+        const app = this;
+        const tableEl = vnode.elm;
+        app.dataTable.create({
+          el: tableEl
+        });
+      },
+      destroy(vnode) {
+        const app = this;
+        const tableEl = vnode.elm;
+        app.dataTable.destroy(tableEl);
+      }
+    }
+  }
+};