framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/photo-browser.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 { watch, onMounted, onBeforeUnmount } from 'vue';
 import { extend } from '../shared/utils';
 import { f7ready, f7 } from '../shared/f7';
@@ -86,34 +84,34 @@ export default {
     renderStandalone: Function
   },
   emits: ['photobrowser:open', 'photobrowser:close', 'photobrowser:opened', 'photobrowser:closed', 'photobrowser:swipetoclose'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7PhotoBrowser = null;
 
-    var open = function open(index) {
+  setup(props, {
+    emit
+  }) {
+    let f7PhotoBrowser = null;
+
+    const open = index => {
       return f7PhotoBrowser.open(index);
     };
 
-    var close = function close() {
+    const close = () => {
       return f7PhotoBrowser.close();
     };
 
-    var expositionToggle = function expositionToggle() {
+    const expositionToggle = () => {
       return f7PhotoBrowser.expositionToggle();
     };
 
-    var expositionEnable = function expositionEnable() {
+    const expositionEnable = () => {
       return f7PhotoBrowser.expositionEnable();
     };
 
-    var expositionDisable = function expositionDisable() {
+    const expositionDisable = () => {
       return f7PhotoBrowser.expositionDisable();
     };
 
-    watch(function () {
-      return props.photos;
-    }, function (value) {
-      var pb = f7PhotoBrowser;
+    watch(() => props.photos, value => {
+      const pb = f7PhotoBrowser;
       if (!pb) return;
       pb.params.photos = value;
 
@@ -121,56 +119,64 @@ export default {
         pb.swiper.update();
       }
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!props.init) return;
-      f7ready(function () {
-        var paramsComputed;
+      f7ready(() => {
+        let paramsComputed;
 
         if (typeof props.params !== 'undefined') {
           paramsComputed = props.params;
         } else {
-          paramsComputed = _extends({}, props);
+          paramsComputed = { ...props
+          };
           delete paramsComputed.params;
         }
 
-        Object.keys(paramsComputed).forEach(function (param) {
+        Object.keys(paramsComputed).forEach(param => {
           if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
         });
         paramsComputed = extend({}, paramsComputed, {
           on: {
-            open: function open() {
+            open() {
               emit('photobrowser:open');
             },
-            close: function close() {
+
+            close() {
               emit('photobrowser:close');
             },
-            opened: function opened() {
+
+            opened() {
               emit('photobrowser:opened');
             },
-            closed: function closed() {
+
+            closed() {
               emit('photobrowser:closed');
             },
-            swipeToClose: function swipeToClose() {
+
+            swipeToClose() {
               emit('photobrowser:swipetoclose');
             }
+
           }
         });
         f7PhotoBrowser = f7.photoBrowser.create(paramsComputed);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7PhotoBrowser && f7PhotoBrowser.destroy) f7PhotoBrowser.destroy();
       f7PhotoBrowser = null;
     });
     return {
-      open: open,
-      close: close,
-      expositionToggle: expositionToggle,
-      expositionEnable: expositionEnable,
-      expositionDisable: expositionDisable
+      open,
+      close,
+      expositionToggle,
+      expositionEnable,
+      expositionDisable
     };
   },
-  render: function render() {
+
+  render() {
     return null;
   }
+
 };

package/components/pie-chart.js

@@ -0,0 +1,184 @@
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, renderSlot as _renderSlot } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    ref: "elRef",
+    class: _ctx.classes
+  }, [(_openBlock(), _createBlock("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: _ctx.size,
+    height: _ctx.size,
+    viewBox: `-${_ctx.size / 3} -${_ctx.size / 3} ${_ctx.size * 2 / 3} ${_ctx.size * 2 / 3}`,
+    style: {
+      transform: 'rotate(-90deg)'
+    }
+  }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.paths, (path, index) => {
+    return _openBlock(), _createBlock("path", {
+      key: path.label || index,
+      d: path.points,
+      fill: path.color,
+      "data-index": index,
+      class: _ctx.classNames({
+        'pie-chart-hidden': _ctx.currentIndex !== null && _ctx.currentIndex !== index
+      }),
+      onClick: $event => _ctx.setCurrentIndex(index),
+      onMouseenter: $event => _ctx.setCurrentIndex(index),
+      onMouseleave: _cache[1] || (_cache[1] = $event => _ctx.setCurrentIndex(null))
+    }, null, 42, ["d", "fill", "data-index", "onClick", "onMouseenter"]);
+  }), 128))], 12, ["width", "height", "viewBox"])), _renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { classNames } from '../shared/utils';
+import { f7 } from '../shared/f7';
+export default {
+  name: 'f7-pie-chart',
+  render,
+  props: {
+    size: {
+      type: Number,
+      default: 320
+    },
+    tooltip: Boolean,
+    datasets: {
+      type: Array,
+      default: () => []
+    },
+    formatTooltip: Function
+  },
+  emits: ['select'],
+
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+    let f7Tooltip = null;
+    const currentIndex = ref(null);
+
+    const setCurrentIndex = index => {
+      currentIndex.value = index;
+    };
+
+    const summValue = computed(() => {
+      let summ = 0;
+      props.datasets.map(d => d.value || 0).forEach(value => {
+        summ += value;
+      });
+      return summ;
+    });
+    const paths = computed(() => {
+      const p = [];
+      let cumulativePercentage = 0;
+
+      function getCoordinatesForPercentage(percentage) {
+        const x = Math.cos(2 * Math.PI * percentage) * (props.size / 3);
+        const y = Math.sin(2 * Math.PI * percentage) * (props.size / 3);
+        return [x, y];
+      }
+
+      props.datasets.forEach(({
+        value,
+        label,
+        color
+      }) => {
+        const percentage = value / summValue.value;
+        const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
+        cumulativePercentage += percentage;
+        const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
+        const largeArcFlag = percentage > 0.5 ? 1 : 0;
+        const points = [`M ${startX} ${startY}`, // Move
+        `A ${props.size / 3} ${props.size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+        'L 0 0' // Line
+        ].join(' ');
+        p.push({
+          points,
+          label,
+          color
+        });
+      });
+      return p;
+    });
+
+    const formatTooltipText = () => {
+      if (currentIndex.value === null) return '';
+      const {
+        value,
+        label,
+        color
+      } = props.datasets[currentIndex.value];
+      const percentage = value / summValue.value * 100;
+
+      const round = v => {
+        if (parseInt(v, 10) === v) return v;
+        return Math.round(v * 100) / 100;
+      };
+
+      if (props.formatTooltip) {
+        return props.formatTooltip({
+          index: currentIndex.value,
+          value,
+          label,
+          color,
+          percentage
+        });
+      }
+
+      const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
+      return `
+      <div class="pie-chart-tooltip-label">
+        <span class="pie-chart-tooltip-color" style="background-color: ${color};"></span> ${tooltipText}
+      </div>
+    `;
+    };
+
+    const setTooltip = () => {
+      const index = currentIndex.value;
+      if (index === null && !f7Tooltip) return;
+      if (!props.tooltip || !elRef.value || !f7) return;
+
+      if (index !== null && !f7Tooltip) {
+        f7Tooltip = f7.tooltip.create({
+          trigger: 'manual',
+          containerEl: elRef.value,
+          targetEl: elRef.value.querySelector(`path[data-index="${index}"]`),
+          text: formatTooltipText(),
+          cssClass: 'pie-chart-tooltip'
+        });
+        f7Tooltip.show();
+        return;
+      }
+
+      if (!f7Tooltip) return;
+
+      if (index !== null) {
+        f7Tooltip.setText(formatTooltipText());
+        f7Tooltip.setTargetEl(elRef.value.querySelector(`path[data-index="${index}"]`));
+        f7Tooltip.show();
+      } else {
+        f7Tooltip.hide();
+      }
+    };
+
+    watch(() => currentIndex.value, () => {
+      emit('select', currentIndex.value, props.datasets[currentIndex.value]);
+      setTooltip();
+    });
+    onBeforeUnmount(() => {
+      if (f7Tooltip && f7Tooltip.destroy) {
+        f7Tooltip.destroy();
+      }
+
+      f7Tooltip = null;
+    });
+    const classes = computed(() => classNames('pie-chart'));
+    return {
+      elRef,
+      currentIndex,
+      classes,
+      paths,
+      classNames,
+      setCurrentIndex
+    };
+  }
+
+};

package/{esm/components → components}/popover.js

@@ -1,12 +1,10 @@
-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 { createVNode as _createVNode, renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
-var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
+const _hoisted_1 = /*#__PURE__*/_createVNode("div", {
   class: "popover-angle"
 }, null, -1);
 
-var _hoisted_2 = {
+const _hoisted_2 = {
   class: "popover-inner"
 };
 
@@ -24,8 +22,8 @@ import { f7ready, f7 } from '../shared/f7';
 import { modalStateClasses } from '../shared/modal-state-classes';
 export default {
   name: 'f7-popover',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     opened: Boolean,
     animate: {
       type: Boolean,
@@ -58,43 +56,44 @@ export default {
     containerEl: {
       type: [String, Object],
       default: undefined
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['popover:open', 'popover:opened', 'popover:close', 'popover:closed', 'update:opened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Popover = ref(null); // eslint-disable-next-line
 
-    var isOpened = props.opened;
-    var isClosing = false;
-    var elRef = ref(null);
+  setup(props, {
+    emit
+  }) {
+    const f7Popover = ref(null); // eslint-disable-next-line
+
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
 
-    var onOpen = function onOpen(instance) {
+    const onOpen = instance => {
       isOpened = true;
       isClosing = false;
       emit('popover:open', instance);
       emit('update:opened', true);
     };
 
-    var onOpened = function onOpened(instance) {
+    const onOpened = instance => {
       emit('popover:opened', instance);
     };
 
-    var onClose = function onClose(instance) {
+    const onClose = instance => {
       isOpened = false;
       isClosing = true;
       emit('popover:close', instance);
     };
 
-    var onClosed = function onClosed(instance) {
+    const onClosed = instance => {
       isClosing = false;
       emit('popover:closed', instance);
       emit('update:opened', false);
     };
 
-    watch(function () {
-      return props.opened;
-    }, function (value) {
+    watch(() => props.opened, value => {
       if (!f7Popover.value) return;
 
       if (value) {
@@ -103,9 +102,9 @@ export default {
         f7Popover.value.close();
       }
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!elRef.value) return;
-      var popoverParams = {
+      const popoverParams = {
         el: elRef.value,
         on: {
           open: onOpen,
@@ -114,13 +113,15 @@ export default {
           closed: onClosed
         }
       };
-      var targetEl = props.targetEl,
-          closeByBackdropClick = props.closeByBackdropClick,
-          closeByOutsideClick = props.closeByOutsideClick,
-          closeOnEscape = props.closeOnEscape,
-          backdrop = props.backdrop,
-          backdropEl = props.backdropEl,
-          containerEl = props.containerEl;
+      const {
+        targetEl,
+        closeByBackdropClick,
+        closeByOutsideClick,
+        closeOnEscape,
+        backdrop,
+        backdropEl,
+        containerEl
+      } = props;
       if (typeof targetEl !== 'undefined') popoverParams.targetEl = targetEl;
       if (typeof closeByBackdropClick !== 'undefined') popoverParams.closeByBackdropClick = closeByBackdropClick;
       if (typeof closeByOutsideClick !== 'undefined') popoverParams.closeByOutsideClick = closeByOutsideClick;
@@ -128,7 +129,7 @@ export default {
       if (typeof backdrop !== 'undefined') popoverParams.backdrop = backdrop;
       if (typeof backdropEl !== 'undefined') popoverParams.backdropEl = backdropEl;
       if (typeof containerEl !== 'undefined') popoverParams.containerEl = containerEl;
-      f7ready(function () {
+      f7ready(() => {
         f7Popover.value = f7.popover.create(popoverParams);
 
         if (props.opened) {
@@ -136,22 +137,21 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Popover.value) {
         f7Popover.value.destroy();
       }
 
       f7Popover.value = null;
     });
-    var classes = computed(function () {
-      return classNames('popover', modalStateClasses({
-        isOpened: isOpened,
-        isClosing: isClosing
-      }), colorClasses(props));
-    });
+    const classes = computed(() => classNames('popover', modalStateClasses({
+      isOpened,
+      isClosing
+    }), colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };

package/{esm/components → components}/popup.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) {
@@ -16,8 +14,8 @@ import { f7ready, f7 } from '../shared/f7';
 import { modalStateClasses } from '../shared/modal-state-classes';
 export default {
   name: 'f7-popup',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     tabletFullscreen: Boolean,
     opened: Boolean,
     animate: {
@@ -52,59 +50,60 @@ export default {
     containerEl: {
       type: [String, Object],
       default: undefined
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['popup:swipestart', 'popup:swipemove', 'popup:swipeend', 'popup:swipeclose', 'popup:open', 'popup:opened', 'popup:close', 'popup:closed', 'update:opened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Popup = ref(null); // eslint-disable-next-line
 
-    var isOpened = props.opened;
-    var isClosing = false;
-    var elRef = ref(null);
+  setup(props, {
+    emit
+  }) {
+    const f7Popup = ref(null); // eslint-disable-next-line
+
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
 
-    var onSwipeStart = function onSwipeStart(instance) {
+    const onSwipeStart = instance => {
       emit('popup:swipestart', instance);
     };
 
-    var onSwipeMove = function onSwipeMove(instance) {
+    const onSwipeMove = instance => {
       emit('popup:swipemove', instance);
     };
 
-    var onSwipeEnd = function onSwipeEnd(instance) {
+    const onSwipeEnd = instance => {
       emit('popup:swipeend', instance);
     };
 
-    var onSwipeClose = function onSwipeClose(instance) {
+    const onSwipeClose = instance => {
       emit('popup:swipeclose', instance);
     };
 
-    var onOpen = function onOpen(instance) {
+    const onOpen = instance => {
       isOpened = true;
       isClosing = false;
       emit('popup:open', instance);
       emit('update:opened', true);
     };
 
-    var onOpened = function onOpened(instance) {
+    const onOpened = instance => {
       emit('popup:opened', instance);
     };
 
-    var onClose = function onClose(instance) {
+    const onClose = instance => {
       isOpened = false;
       isClosing = true;
       emit('popup:close', instance);
     };
 
-    var onClosed = function onClosed(instance) {
+    const onClosed = instance => {
       isClosing = false;
       emit('popup:closed', instance);
       emit('update:opened', false);
     };
 
-    watch(function () {
-      return props.opened;
-    }, function (value) {
+    watch(() => props.opened, value => {
       if (!f7Popup.value) return;
 
       if (value) {
@@ -113,9 +112,9 @@ export default {
         f7Popup.value.close();
       }
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!elRef.value) return;
-      var popupParams = {
+      const popupParams = {
         el: elRef.value,
         on: {
           swipeStart: onSwipeStart,
@@ -128,14 +127,16 @@ export default {
           closed: onClosed
         }
       };
-      var closeByBackdropClick = props.closeByBackdropClick,
-          closeOnEscape = props.closeOnEscape,
-          animate = props.animate,
-          backdrop = props.backdrop,
-          backdropEl = props.backdropEl,
-          swipeToClose = props.swipeToClose,
-          swipeHandler = props.swipeHandler,
-          containerEl = props.containerEl;
+      const {
+        closeByBackdropClick,
+        closeOnEscape,
+        animate,
+        backdrop,
+        backdropEl,
+        swipeToClose,
+        swipeHandler,
+        containerEl
+      } = props;
       if (typeof closeByBackdropClick !== 'undefined') popupParams.closeByBackdropClick = closeByBackdropClick;
       if (typeof closeOnEscape !== 'undefined') popupParams.closeOnEscape = closeOnEscape;
       if (typeof animate !== 'undefined') popupParams.animate = animate;
@@ -144,7 +145,7 @@ export default {
       if (typeof swipeToClose !== 'undefined') popupParams.swipeToClose = swipeToClose;
       if (typeof swipeHandler !== 'undefined') popupParams.swipeHandler = swipeHandler;
       if (typeof containerEl !== 'undefined') popupParams.containerEl = containerEl;
-      f7ready(function () {
+      f7ready(() => {
         f7Popup.value = f7.popup.create(popupParams);
 
         if (props.opened) {
@@ -152,25 +153,24 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Popup.value) {
         f7Popup.value.destroy();
       }
 
       f7Popup.value = null;
     });
-    var classes = computed(function () {
-      return classNames('popup', {
-        'popup-tablet-fullscreen': props.tabletFullscreen,
-        'popup-push': props.push
-      }, modalStateClasses({
-        isOpened: isOpened,
-        isClosing: isClosing
-      }), colorClasses(props));
-    });
+    const classes = computed(() => classNames('popup', {
+      'popup-tablet-fullscreen': props.tabletFullscreen,
+      'popup-push': props.push
+    }, modalStateClasses({
+      isOpened,
+      isClosing
+    }), colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };