framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/area-chart.js

@@ -1,12 +1,12 @@
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, resolveDynamicComponent as _resolveDynamicComponent, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, createVNode as _createVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, renderSlot as _renderSlot } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "area-chart-axis"
 };
-var _hoisted_2 = {
+const _hoisted_2 = {
   key: 0
 };
-var _hoisted_3 = {
+const _hoisted_3 = {
   key: 1,
   class: "area-chart-legend"
 };
@@ -20,20 +20,20 @@ function render(_ctx, _cache) {
     xmlns: "http://www.w3.org/2000/svg",
     width: _ctx.width,
     height: _ctx.height,
-    viewBox: "0 0 " + _ctx.width + " " + _ctx.height,
+    viewBox: `0 0 ${_ctx.width} ${_ctx.height}`,
     preserveAspectRatio: "none"
-  }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.chartData, function (data, index) {
+  }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.chartData, (data, index) => {
     return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.ChartTag), {
-      key: _ctx.ChartTag + "-" + index,
+      key: `${_ctx.ChartTag}-${index}`,
       fill: _ctx.lineChart ? undefined : data.color,
       stroke: _ctx.lineChart ? data.color : undefined,
       "fill-rule": "evenodd",
       points: _ctx.lineChart ? undefined : data.points,
       d: _ctx.lineChart ? data.points : undefined
     }, null, 8, ["fill", "stroke", "points", "d"]);
-  }), 128)), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.verticalLines, function (line, index) {
+  }), 128)), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.verticalLines, (line, index) => {
     return _openBlock(), _createBlock("line", {
-      key: "line-" + index,
+      key: `line-${index}`,
       "data-index": index,
       fill: "#000",
       x1: line,
@@ -44,11 +44,11 @@ function render(_ctx, _cache) {
         'area-chart-current-line': _ctx.currentIndex === index
       })
     }, null, 10, ["data-index", "x1", "x2", "y2"]);
-  }), 128))], 8, ["width", "height", "viewBox"])), _ctx.axis ? (_openBlock(), _createBlock("div", _hoisted_1, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.axisLabels, function (label, index) {
+  }), 128))], 8, ["width", "height", "viewBox"])), _ctx.axis ? (_openBlock(), _createBlock("div", _hoisted_1, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.axisLabels, (label, index) => {
     return _openBlock(), _createBlock("span", {
       key: index
     }, [_ctx.visibleLegends.includes(label) ? (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.formatAxisLabelMethod(label)), 1)) : _createCommentVNode("", true)]);
-  }), 128))])) : _createCommentVNode("", true), _ctx.legend ? (_openBlock(), _createBlock("div", _hoisted_3, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.datasets, function (dataset, index) {
+  }), 128))])) : _createCommentVNode("", true), _ctx.legend ? (_openBlock(), _createBlock("div", _hoisted_3, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.datasets, (dataset, index) => {
     return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.LegendItemTag), {
       key: index,
       class: _ctx.classNames('area-chart-legend-item', {
@@ -56,17 +56,13 @@ function render(_ctx, _cache) {
         'area-chart-legend-button': _ctx.toggleDatasets
       }),
       type: _ctx.toggleDatasets ? 'button' : undefined,
-      onClick: function onClick($event) {
-        return _ctx.toggleDataset(index);
-      }
+      onClick: $event => _ctx.toggleDataset(index)
     }, {
-      default: _withCtx(function () {
-        return [_createVNode("span", {
-          style: {
-            backgroundColor: dataset.color
-          }
-        }, null, 4), _createTextVNode(" " + _toDisplayString(_ctx.formatLegendLabelMethod(dataset.label)), 1)];
-      }),
+      default: _withCtx(() => [_createVNode("span", {
+        style: {
+          backgroundColor: dataset.color
+        }
+      }, null, 4), _createTextVNode(" " + _toDisplayString(_ctx.formatLegendLabelMethod(dataset.label)), 1)]),
       _: 2
     }, 1032, ["class", "type", "onClick"]);
   }), 128))])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2);
@@ -77,21 +73,17 @@ import { classNames } from '../shared/utils';
 import { f7 } from '../shared/f7';
 export default {
   name: 'f7-area-chart',
-  render: render,
+  render,
   props: {
     lineChart: Boolean,
     datasets: {
       type: Array,
-      default: function _default() {
-        return [];
-      }
+      default: () => []
     },
     axis: Boolean,
     axisLabels: {
       type: Array,
-      default: function _default() {
-        return [];
-      }
+      default: () => []
     },
     tooltip: Boolean,
     legend: Boolean,
@@ -116,108 +108,107 @@ export default {
     formatTooltipDataset: Function
   },
   emits: ['select'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Tooltip = null;
-    var currentIndex = ref(null);
-    var hiddenDatasets = ref([]);
-    var elRef = ref(null);
-    var svgElRef = ref(null);
-    var linesOffsets = ref(null);
-    var visibleLegends = computed(function () {
+
+  setup(props, {
+    emit
+  }) {
+    let f7Tooltip = null;
+    const currentIndex = ref(null);
+    const hiddenDatasets = ref([]);
+    const elRef = ref(null);
+    const svgElRef = ref(null);
+    const linesOffsets = ref(null);
+    const visibleLegends = computed(() => {
       if (!props.maxAxisLabels || props.axisLabels.length <= props.maxAxisLabels) return props.axisLabels;
-      var skipStep = Math.ceil(props.axisLabels.length / props.maxAxisLabels);
-      var filtered = props.axisLabels.filter(function (label, index) {
-        return index % skipStep === 0;
-      });
+      const skipStep = Math.ceil(props.axisLabels.length / props.maxAxisLabels);
+      const filtered = props.axisLabels.filter((label, index) => index % skipStep === 0);
       return filtered;
     });
-    var summValues = computed(function () {
-      var summ = [];
-      props.datasets.filter(function (dataset, index) {
-        return !hiddenDatasets.value.includes(index);
-      }).forEach(function (_ref2) {
-        var values = _ref2.values;
-        values.forEach(function (value, valueIndex) {
+    const summValues = computed(() => {
+      const summ = [];
+      props.datasets.filter((dataset, index) => !hiddenDatasets.value.includes(index)).forEach(({
+        values
+      }) => {
+        values.forEach((value, valueIndex) => {
           if (!summ[valueIndex]) summ[valueIndex] = 0;
           summ[valueIndex] += value;
         });
       });
       return summ;
     });
-    var chartData = computed(function () {
-      var datasets = props.datasets,
-          lineChart = props.lineChart,
-          width = props.width,
-          height = props.height;
-      var data = [];
+    const chartData = computed(() => {
+      const {
+        datasets,
+        lineChart,
+        width,
+        height
+      } = props;
+      const data = [];
 
       if (!datasets.length) {
         return data;
       }
 
-      var lastValues = datasets[0].values.map(function () {
-        return 0;
-      });
-      var maxValue = 0;
+      const lastValues = datasets[0].values.map(() => 0);
+      let maxValue = 0;
 
       if (lineChart) {
-        datasets.forEach(function (_ref3) {
-          var values = _ref3.values;
-          var datasetMaxValue = Math.max.apply(Math, values);
+        datasets.forEach(({
+          values
+        }) => {
+          const datasetMaxValue = Math.max(...values);
           if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
         });
       } else {
-        maxValue = Math.max.apply(Math, summValues.value);
+        maxValue = Math.max(...summValues.value);
       }
 
-      datasets.filter(function (dataset, index) {
-        return !hiddenDatasets.value.includes(index);
-      }).forEach(function (_ref4) {
-        var label = _ref4.label,
-            values = _ref4.values,
-            color = _ref4.color;
-        var points = values.map(function (originalValue, valueIndex) {
+      datasets.filter((dataset, index) => !hiddenDatasets.value.includes(index)).forEach(({
+        label,
+        values,
+        color
+      }) => {
+        const points = values.map((originalValue, valueIndex) => {
           lastValues[valueIndex] += originalValue;
-          var value = lineChart ? originalValue : lastValues[valueIndex];
-          var x = valueIndex / (values.length - 1) * width;
-          var y = height - value / maxValue * height;
+          const value = lineChart ? originalValue : lastValues[valueIndex];
+          const x = valueIndex / (values.length - 1) * width;
+          const y = height - value / maxValue * height;
 
           if (lineChart) {
-            return "" + (valueIndex === 0 ? 'M' : 'L') + x + "," + y;
+            return `${valueIndex === 0 ? 'M' : 'L'}${x},${y}`;
           }
 
-          return x + " " + y;
+          return `${x} ${y}`;
         });
 
         if (!lineChart) {
-          points.push(width + " " + height + " 0 " + height);
+          points.push(`${width} ${height} 0 ${height}`);
         }
 
         data.push({
-          label: label,
+          label,
           points: points.join(' '),
-          color: color
+          color
         });
       });
       return data.reverse();
     });
-    var verticalLines = computed(function () {
-      var lines = [];
+    const verticalLines = computed(() => {
+      const lines = [];
 
       if (!props.datasets.length) {
         return lines;
       }
 
-      var values = props.datasets[0].values;
-      values.forEach(function (value, valueIndex) {
-        var x = valueIndex / (values.length - 1) * props.width;
+      const values = props.datasets[0].values;
+      values.forEach((value, valueIndex) => {
+        const x = valueIndex / (values.length - 1) * props.width;
         lines.push(x);
       });
       return lines;
     });
 
-    var toggleDataset = function toggleDataset(index) {
+    const toggleDataset = index => {
       if (!props.toggleDatasets) return;
 
       if (hiddenDatasets.value.includes(index)) {
@@ -226,76 +217,82 @@ export default {
         hiddenDatasets.value.push(index);
       }
 
-      hiddenDatasets.value = [].concat(hiddenDatasets.value);
+      hiddenDatasets.value = [...hiddenDatasets.value];
     };
 
-    var formatAxisLabelMethod = function formatAxisLabelMethod(label) {
+    const formatAxisLabelMethod = label => {
       if (props.formatAxisLabel) return props.formatAxisLabel(label);
       return label;
     };
 
-    var formatLegendLabelMethod = function formatLegendLabelMethod(label) {
+    const formatLegendLabelMethod = label => {
       if (props.formatLegendLabel) return props.formatLegendLabel(label);
       return label;
     };
 
-    var calcLinesOffsets = function calcLinesOffsets() {
-      var lines = svgElRef.value.querySelectorAll('line');
+    const calcLinesOffsets = () => {
+      const lines = svgElRef.value.querySelectorAll('line');
       linesOffsets.value = [];
 
-      for (var i = 0; i < lines.length; i += 1) {
+      for (let i = 0; i < lines.length; i += 1) {
         linesOffsets.value.push(lines[i].getBoundingClientRect().left);
       }
     };
 
-    var formatTooltip = function formatTooltip() {
-      var index = currentIndex.value;
+    const formatTooltip = () => {
+      const index = currentIndex.value;
       if (index === null) return '';
-      var total = 0;
-      var currentValues = props.datasets.filter(function (dataset, i) {
-        return !hiddenDatasets.value.includes(i);
-      }).map(function (dataset) {
-        return {
-          color: dataset.color,
-          label: dataset.label,
-          value: dataset.values[index]
-        };
-      });
-      currentValues.forEach(function (dataset) {
+      let total = 0;
+      const currentValues = props.datasets.filter((dataset, i) => !hiddenDatasets.value.includes(i)).map(dataset => ({
+        color: dataset.color,
+        label: dataset.label,
+        value: dataset.values[index]
+      }));
+      currentValues.forEach(dataset => {
         total += dataset.value;
       });
 
       if (props.formatTooltip) {
         return props.formatTooltip({
-          index: index,
-          total: total,
+          index,
+          total,
           datasets: currentValues
         });
       }
 
-      var labelText = props.formatTooltipAxisLabel ? props.formatTooltipAxisLabel(props.axisLabels[index]) : formatAxisLabelMethod(props.axisLabels[index]);
+      let labelText = props.formatTooltipAxisLabel ? props.formatTooltipAxisLabel(props.axisLabels[index]) : formatAxisLabelMethod(props.axisLabels[index]);
       if (!labelText) labelText = '';
-      var totalText = props.formatTooltipTotal ? props.formatTooltipTotal(total) : total; // prettier-ignore
-
-      var datasetsText = currentValues.length > 0 ? "\n      <ul class=\"area-chart-tooltip-list\">\n        " + currentValues.map(function (_ref5) {
-        var label = _ref5.label,
-            color = _ref5.color,
-            value = _ref5.value;
-        var valueText = props.formatTooltipDataset ? props.formatTooltipDataset(label, value, color) : label + ": " + value;
-        return "\n              <li><span style=\"background-color: " + color + ";\"></span>" + valueText + "</li>\n            ";
-      }).join('') + "\n      </ul>" : ''; // prettier-ignore
-
-      return "\n      <div class=\"area-chart-tooltip-label\">" + labelText + "</div>\n      <div class=\"area-chart-tooltip-total\">" + totalText + "</div>\n      " + datasetsText + "\n    ";
+      const totalText = props.formatTooltipTotal ? props.formatTooltipTotal(total) : total; // prettier-ignore
+
+      const datasetsText = currentValues.length > 0 ? `
+      <ul class="area-chart-tooltip-list">
+        ${currentValues.map(({
+        label,
+        color,
+        value
+      }) => {
+        const valueText = props.formatTooltipDataset ? props.formatTooltipDataset(label, value, color) : `${label}: ${value}`;
+        return `
+              <li><span style="background-color: ${color};"></span>${valueText}</li>
+            `;
+      }).join('')}
+      </ul>` : ''; // prettier-ignore
+
+      return `
+      <div class="area-chart-tooltip-label">${labelText}</div>
+      <div class="area-chart-tooltip-total">${totalText}</div>
+      ${datasetsText}
+    `;
     };
 
-    var setTooltip = function setTooltip() {
-      var tooltip = props.tooltip,
-          datasets = props.datasets;
-      var index = currentIndex.value;
+    const setTooltip = () => {
+      const {
+        tooltip,
+        datasets
+      } = props;
+      const index = currentIndex.value;
       if (!tooltip) return;
-      var hasVisibleDataSets = datasets.filter(function (dataset, i) {
-        return !hiddenDatasets.value.includes(i);
-      }).length > 0;
+      const hasVisibleDataSets = datasets.filter((dataset, i) => !hiddenDatasets.value.includes(i)).length > 0;
 
       if (!hasVisibleDataSets) {
         if (f7Tooltip && f7Tooltip.hide) f7Tooltip.hide();
@@ -306,7 +303,7 @@ export default {
         f7Tooltip = f7.tooltip.create({
           trigger: 'manual',
           containerEl: elRef.value,
-          targetEl: svgElRef.value.querySelector("line[data-index=\"" + index + "\"]"),
+          targetEl: svgElRef.value.querySelector(`line[data-index="${index}"]`),
           text: formatTooltip(),
           cssClass: 'area-chart-tooltip'
         });
@@ -324,49 +321,45 @@ export default {
 
       if (index !== null) {
         f7Tooltip.setText(formatTooltip());
-        f7Tooltip.setTargetEl(svgElRef.value.querySelector("line[data-index=\"" + index + "\"]"));
+        f7Tooltip.setTargetEl(svgElRef.value.querySelector(`line[data-index="${index}"]`));
         f7Tooltip.show();
       } else {
         f7Tooltip.hide();
       }
     };
 
-    var onMouseEnter = function onMouseEnter() {
+    const onMouseEnter = () => {
       calcLinesOffsets();
     };
 
-    var onMouseMove = function onMouseMove(e) {
+    const onMouseMove = e => {
       if (!linesOffsets.value) {
         calcLinesOffsets();
       }
 
-      var currentLeft = e.pageX;
+      let currentLeft = e.pageX;
       if (typeof currentLeft === 'undefined') currentLeft = 0;
-      var distances = linesOffsets.value.map(function (left) {
-        return Math.abs(currentLeft - left);
-      });
-      var minDistance = Math.min.apply(Math, distances);
-      var closestIndex = distances.indexOf(minDistance);
+      const distances = linesOffsets.value.map(left => Math.abs(currentLeft - left));
+      const minDistance = Math.min(...distances);
+      const closestIndex = distances.indexOf(minDistance);
       currentIndex.value = closestIndex;
     };
 
-    var onMouseLeave = function onMouseLeave() {
+    const onMouseLeave = () => {
       currentIndex.value = null;
     };
 
-    watch(function () {
-      return currentIndex.value;
-    }, function () {
+    watch(() => currentIndex.value, () => {
       emit('select', currentIndex.value);
       setTooltip();
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!svgElRef.value) return;
       svgElRef.value.addEventListener('mouseenter', onMouseEnter);
       svgElRef.value.addEventListener('mousemove', onMouseMove);
       svgElRef.value.addEventListener('mouseleave', onMouseLeave);
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Tooltip && f7Tooltip.destroy) {
         f7Tooltip.destroy();
       }
@@ -377,30 +370,25 @@ export default {
       svgElRef.value.removeEventListener('mousemove', onMouseMove);
       svgElRef.value.removeEventListener('mouseleave', onMouseLeave);
     });
-    var classes = computed(function () {
-      return classNames('area-chart');
-    });
-    var LegendItemTag = computed(function () {
-      return props.toggleDatasets ? 'button' : 'span';
-    });
-    var ChartTag = computed(function () {
-      return props.lineChart ? 'path' : 'polygon';
-    });
+    const classes = computed(() => classNames('area-chart'));
+    const LegendItemTag = computed(() => props.toggleDatasets ? 'button' : 'span');
+    const ChartTag = computed(() => props.lineChart ? 'path' : 'polygon');
     return {
-      currentIndex: currentIndex,
-      hiddenDatasets: hiddenDatasets,
-      visibleLegends: visibleLegends,
-      chartData: chartData,
-      verticalLines: verticalLines,
-      elRef: elRef,
-      svgElRef: svgElRef,
-      classes: classes,
-      toggleDataset: toggleDataset,
-      formatAxisLabelMethod: formatAxisLabelMethod,
-      formatLegendLabelMethod: formatLegendLabelMethod,
-      LegendItemTag: LegendItemTag,
-      ChartTag: ChartTag,
-      classNames: classNames
+      currentIndex,
+      hiddenDatasets,
+      visibleLegends,
+      chartData,
+      verticalLines,
+      elRef,
+      svgElRef,
+      classes,
+      toggleDataset,
+      formatAxisLabelMethod,
+      formatLegendLabelMethod,
+      LegendItemTag,
+      ChartTag,
+      classNames
     };
   }
+
 };

package/components/badge.js

@@ -0,0 +1,33 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("span", {
+    ref: "elRef",
+    class: _ctx.classes
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { computed, ref } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+import { useTooltip } from '../shared/use-tooltip';
+export default {
+  name: 'f7-badge',
+  render,
+  props: {
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
+    useTooltip(elRef, props);
+    const classes = computed(() => classNames('badge', colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+
+};

package/components/block-footer.js

@@ -0,0 +1,25 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-block-footer',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('block-footer', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/block-header.js

@@ -0,0 +1,25 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-block-header',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('block-header', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/block-title.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
 function render(_ctx, _cache) {
@@ -14,22 +12,27 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-block-title',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     large: Boolean,
-    medium: Boolean
-  }, colorProps),
-  setup: function setup(props) {
-    var classes = computed(function () {
-      var large = props.large,
-          medium = props.medium;
+    medium: Boolean,
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => {
+      const {
+        large,
+        medium
+      } = props;
       return classNames('block-title', {
         'block-title-large': large,
         'block-title-medium': medium
       }, colorClasses(props));
     });
     return {
-      classes: classes
+      classes
     };
   }
+
 };