framework7-vue 7.1.5 → 8.0.0-beta.2

package/components/area-chart.js

@@ -12,7 +12,6 @@ const _hoisted_5 = {
   key: 1,
   class: "area-chart-legend"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
@@ -69,7 +68,6 @@ function render(_ctx, _cache) {
     }, 1032, ["class", "type", "onClick"]);
   }), 128))])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { f7 } from '../shared/f7.js';
@@ -110,7 +108,6 @@ export default {
     formatTooltipDataset: Function
   },
   emits: ['select'],
-
   setup(props, _ref) {
     let {
       emit
@@ -148,14 +145,11 @@ export default {
         height
       } = props;
       const data = [];
-
       if (!datasets.length) {
         return data;
       }
-
       const lastValues = datasets[0].values.map(() => 0);
       let maxValue = 0;
-
       if (lineChart) {
         datasets.forEach(_ref3 => {
           let {
@@ -167,7 +161,6 @@ export default {
       } else {
         maxValue = Math.max(...summValues.value);
       }
-
       datasets.filter((dataset, index) => !hiddenDatasets.value.includes(index)).forEach(_ref4 => {
         let {
           label,
@@ -179,18 +172,14 @@ export default {
           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 `${x} ${y}`;
         });
-
         if (!lineChart) {
           points.push(`${width} ${height} 0 ${height}`);
         }
-
         data.push({
           label,
           points: points.join(' '),
@@ -201,11 +190,9 @@ export default {
     });
     const verticalLines = computed(() => {
       const lines = [];
-
       if (!props.datasets.length) {
         return lines;
       }
-
       const values = props.datasets[0].values;
       values.forEach((value, valueIndex) => {
         const x = valueIndex / (values.length - 1) * props.width;
@@ -213,38 +200,30 @@ export default {
       });
       return lines;
     });
-
     const toggleDataset = index => {
       if (!props.toggleDatasets) return;
-
       if (hiddenDatasets.value.includes(index)) {
         hiddenDatasets.value.splice(hiddenDatasets.value.indexOf(index), 1);
       } else {
         hiddenDatasets.value.push(index);
       }
-
       hiddenDatasets.value = [...hiddenDatasets.value];
     };
-
     const formatAxisLabelMethod = label => {
       if (props.formatAxisLabel) return props.formatAxisLabel(label);
       return label;
     };
-
     const formatLegendLabelMethod = label => {
       if (props.formatLegendLabel) return props.formatLegendLabel(label);
       return label;
     };
-
     const calcLinesOffsets = () => {
       const lines = svgElRef.value.querySelectorAll('line');
       linesOffsets.value = [];
-
       for (let i = 0; i < lines.length; i += 1) {
         linesOffsets.value.push(lines[i].getBoundingClientRect().left);
       }
     };
-
     const formatTooltip = () => {
       const index = currentIndex.value;
       if (index === null) return '';
@@ -257,7 +236,6 @@ export default {
       currentValues.forEach(dataset => {
         total += dataset.value;
       });
-
       if (props.formatTooltip) {
         return props.formatTooltip({
           index,
@@ -265,11 +243,10 @@ export default {
           datasets: currentValues
         });
       }
-
       let labelText = props.formatTooltipAxisLabel ? props.formatTooltipAxisLabel(props.axisLabels[index]) : formatAxisLabelMethod(props.axisLabels[index]);
       if (!labelText) labelText = '';
-      const totalText = props.formatTooltipTotal ? props.formatTooltipTotal(total) : total; // prettier-ignore
-
+      const totalText = props.formatTooltipTotal ? props.formatTooltipTotal(total) : total;
+      // prettier-ignore
       const datasetsText = currentValues.length > 0 ? `
       <ul class="area-chart-tooltip-list">
         ${currentValues.map(_ref5 => {
@@ -283,15 +260,14 @@ export default {
               <li><span style="background-color: ${color};"></span>${valueText}</li>
             `;
       }).join('')}
-      </ul>` : ''; // prettier-ignore
-
+      </ul>` : '';
+      // prettier-ignore
       return `
       <div class="area-chart-tooltip-label">${labelText}</div>
       <div class="area-chart-tooltip-total">${totalText}</div>
       ${datasetsText}
     `;
     };
-
     const setTooltip = () => {
       const {
         tooltip,
@@ -300,12 +276,10 @@ export default {
       const index = currentIndex.value;
       if (!tooltip) return;
       const hasVisibleDataSets = datasets.filter((dataset, i) => !hiddenDatasets.value.includes(i)).length > 0;
-
       if (!hasVisibleDataSets) {
         if (f7Tooltip && f7Tooltip.hide) f7Tooltip.hide();
         return;
       }
-
       if (index !== null && !f7Tooltip) {
         f7Tooltip = f7.tooltip.create({
           trigger: 'manual',
@@ -314,18 +288,14 @@ export default {
           text: formatTooltip(),
           cssClass: 'area-chart-tooltip'
         });
-
         if (f7Tooltip && f7Tooltip.show) {
           f7Tooltip.show();
         }
-
         return;
       }
-
       if (!f7Tooltip || !f7Tooltip.hide || !f7Tooltip.show) {
         return;
       }
-
       if (index !== null) {
         f7Tooltip.setText(formatTooltip());
         f7Tooltip.setTargetEl(svgElRef.value.querySelector(`line[data-index="${index}"]`));
@@ -334,16 +304,13 @@ export default {
         f7Tooltip.hide();
       }
     };
-
     const onMouseEnter = () => {
       calcLinesOffsets();
     };
-
     const onMouseMove = e => {
       if (!linesOffsets.value) {
         calcLinesOffsets();
       }
-
       let currentLeft = e.pageX;
       if (typeof currentLeft === 'undefined') currentLeft = 0;
       const distances = linesOffsets.value.map(left => Math.abs(currentLeft - left));
@@ -351,11 +318,9 @@ export default {
       const closestIndex = distances.indexOf(minDistance);
       currentIndex.value = closestIndex;
     };
-
     const onMouseLeave = () => {
       currentIndex.value = null;
     };
-
     watch(() => currentIndex.value, () => {
       emit('select', currentIndex.value);
       setTooltip();
@@ -370,7 +335,6 @@ export default {
       if (f7Tooltip && f7Tooltip.destroy) {
         f7Tooltip.destroy();
       }
-
       f7Tooltip = null;
       if (!svgElRef.value) return;
       svgElRef.value.removeEventListener('mouseenter', onMouseEnter);
@@ -397,5 +361,4 @@ export default {
       classNames
     };
   }
-
 };

package/components/badge.js

@@ -1,12 +1,10 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("span", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed, ref } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -19,7 +17,6 @@ export default {
     tooltipTrigger: String,
     ...colorProps
   },
-
   setup(props) {
     const elRef = ref(null);
     useTooltip(elRef, props);
@@ -29,5 +26,4 @@ export default {
       classes
     };
   }
-
 };

package/components/block-footer.js

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

package/components/block-header.js

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

package/components/block-title.js

@@ -1,13 +1,11 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["medium"];
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes),
     medium: _ctx.medium
   }, [_renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
 }
-
 import { computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -19,7 +17,6 @@ export default {
     medium: Boolean,
     ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => {
       const {
@@ -35,5 +32,4 @@ export default {
       classes
     };
   }
-
 };

package/components/block.d.ts

@@ -9,63 +9,115 @@ declare const Block: DefineComponent<
       type: BooleanConstructor;
     },
 
+    insetIos: {
+      type: BooleanConstructor;
+    },
+
+    insetMd: {
+      type: BooleanConstructor;
+    },
+
     xsmallInset: {
       type: BooleanConstructor;
     },
 
+    xsmallInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    xsmallInsetMd: {
+      type: BooleanConstructor;
+    },
+
     smallInset: {
       type: BooleanConstructor;
     },
 
+    smallInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    smallInsetMd: {
+      type: BooleanConstructor;
+    },
+
     mediumInset: {
       type: BooleanConstructor;
     },
 
+    mediumInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    mediumInsetMd: {
+      type: BooleanConstructor;
+    },
+
     largeInset: {
       type: BooleanConstructor;
     },
 
+    largeInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    largeInsetMd: {
+      type: BooleanConstructor;
+    },
+
     xlargeInset: {
       type: BooleanConstructor;
     },
 
+    xlargeInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    xlargeInsetMd: {
+      type: BooleanConstructor;
+    },
+
     strong: {
       type: BooleanConstructor;
     },
 
-    tabs: {
+    strongIos: {
       type: BooleanConstructor;
     },
 
-    tab: {
+    strongMd: {
       type: BooleanConstructor;
     },
 
-    tabActive: {
+    outline: {
       type: BooleanConstructor;
     },
 
-    accordionList: {
+    outlineIos: {
       type: BooleanConstructor;
     },
 
-    accordionOpposite: {
+    outlineMd: {
+      type: BooleanConstructor;
+    },
+
+    tabs: {
       type: BooleanConstructor;
     },
 
-    noHairlines: {
+    tab: {
       type: BooleanConstructor;
     },
 
-    noHairlinesMd: {
+    tabActive: {
       type: BooleanConstructor;
     },
 
-    noHairlinesIos: {
+    accordionList: {
       type: BooleanConstructor;
     },
 
-    noHairlinesAurora: {
+    accordionOpposite: {
       type: BooleanConstructor;
     },
 

package/components/block.js

@@ -1,12 +1,10 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { ref, computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -16,25 +14,37 @@ export default {
   render,
   props: {
     inset: Boolean,
+    insetIos: Boolean,
+    insetMd: Boolean,
     xsmallInset: Boolean,
+    xsmallInsetIos: Boolean,
+    xsmallInsetMd: Boolean,
     smallInset: Boolean,
+    smallInsetIos: Boolean,
+    smallInsetMd: Boolean,
     mediumInset: Boolean,
+    mediumInsetIos: Boolean,
+    mediumInsetMd: Boolean,
     largeInset: Boolean,
+    largeInsetIos: Boolean,
+    largeInsetMd: Boolean,
     xlargeInset: Boolean,
+    xlargeInsetIos: Boolean,
+    xlargeInsetMd: Boolean,
     strong: Boolean,
+    strongIos: Boolean,
+    strongMd: Boolean,
+    outline: Boolean,
+    outlineIos: Boolean,
+    outlineMd: Boolean,
     tabs: Boolean,
     tab: Boolean,
     tabActive: Boolean,
     accordionList: Boolean,
     accordionOpposite: Boolean,
-    noHairlines: Boolean,
-    noHairlinesMd: Boolean,
-    noHairlinesIos: Boolean,
-    noHairlinesAurora: Boolean,
     ...colorProps
   },
   emits: ['tab:hide', 'tab:show'],
-
   setup(props, _ref) {
     let {
       emit
@@ -44,39 +54,65 @@ export default {
     const classes = computed(() => {
       const {
         inset,
+        insetIos,
+        insetMd,
         xsmallInset,
+        xsmallInsetIos,
+        xsmallInsetMd,
         smallInset,
+        smallInsetIos,
+        smallInsetMd,
         mediumInset,
+        mediumInsetIos,
+        mediumInsetMd,
         largeInset,
+        largeInsetIos,
+        largeInsetMd,
         xlargeInset,
+        xlargeInsetIos,
+        xlargeInsetMd,
         strong,
+        strongIos,
+        strongMd,
+        outline,
+        outlineIos,
+        outlineMd,
         accordionList,
         accordionOpposite,
         tabs,
         tab,
-        tabActive,
-        noHairlines,
-        noHairlinesMd,
-        noHairlinesIos,
-        noHairlinesAurora
+        tabActive
       } = props;
       return classNames('block', {
         inset,
+        'inset-ios': insetIos,
+        'inset-md': insetMd,
         'xsmall-inset': xsmallInset,
+        'xsmall-inset-ios': xsmallInsetIos,
+        'xsmall-inset-md': xsmallInsetMd,
         'small-inset': smallInset,
+        'small-inset-ios': smallInsetIos,
+        'small-inset-md': smallInsetMd,
         'medium-inset': mediumInset,
+        'medium-inset-ios': mediumInsetIos,
+        'medium-inset-md': mediumInsetMd,
         'large-inset': largeInset,
+        'large-inset-ios': largeInsetIos,
+        'large-inset-md': largeInsetMd,
         'xlarge-inset': xlargeInset,
+        'xlarge-inset-ios': xlargeInsetIos,
+        'xlarge-inset-md': xlargeInsetMd,
         'block-strong': strong,
+        'block-strong-ios': strongIos,
+        'block-strong-md': strongMd,
         'accordion-list': accordionList,
         'accordion-opposite': accordionOpposite,
         tabs,
         tab,
         'tab-active': tabActive,
-        'no-hairlines': noHairlines,
-        'no-hairlines-md': noHairlinesMd,
-        'no-hairlines-ios': noHairlinesIos,
-        'no-hairlines-aurora': noHairlinesAurora
+        'block-outline': outline,
+        'block-outline-md': outlineMd,
+        'block-outline-ios': outlineIos
       }, colorClasses(props));
     });
     return {
@@ -84,5 +120,4 @@ export default {
       classes
     };
   }
-
 };

package/components/breadcrumbs-collapsed.js

@@ -3,24 +3,19 @@ const _hoisted_1 = {
   ref: "elRef",
   class: "breadcrumbs-collapsed"
 };
-
 const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1);
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", _hoisted_1, [_hoisted_2, _renderSlot(_ctx.$slots, "default")], 512);
 }
-
 import { ref } from 'vue';
 export default {
   name: 'f7-breadcrumbs-collapsed',
   render,
   props: {},
-
   setup() {
     const elRef = ref(null);
     return {
       elRef
     };
   }
-
 };

package/components/breadcrumbs-item.js

@@ -1,5 +1,4 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
@@ -9,7 +8,6 @@ function render(_ctx, _cache) {
     })
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { ref } from 'vue';
 export default {
   name: 'f7-breadcrumbs-item',
@@ -17,12 +15,10 @@ export default {
   props: {
     active: Boolean
   },
-
   setup() {
     const elRef = ref(null);
     return {
       elRef
     };
   }
-
 };

package/components/breadcrumbs-separator.js

@@ -3,22 +3,18 @@ const _hoisted_1 = {
   ref: "elRef",
   class: "breadcrumbs-separator"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", _hoisted_1, null, 512);
 }
-
 import { ref } from 'vue';
 export default {
   name: 'f7-breadcrumbs-separator',
   render,
   props: {},
-
   setup() {
     const elRef = ref(null);
     return {
       elRef
     };
   }
-
 };

package/components/breadcrumbs.js

@@ -3,22 +3,18 @@ const _hoisted_1 = {
   ref: "elRef",
   class: "breadcrumbs"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")], 512);
 }
-
 import { ref } from 'vue';
 export default {
   name: 'f7-breadcrumbs',
   render,
   props: {},
-
   setup() {
     const elRef = ref(null);
     return {
       elRef
     };
   }
-
 };