@xenknight/framework7-vue 0.0.2

package/components/photo-browser.d.ts

@@ -0,0 +1,164 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const PhotoBrowser: DefineComponent<
+  {
+    
+    params: {
+      type: ObjectConstructor;
+    },
+
+    photos: {
+      type: ArrayConstructor;
+    },
+
+    thumbs: {
+      type: ArrayConstructor;
+    },
+
+    view: {
+      type: StringConstructor | ObjectConstructor;
+    },
+
+    renderNavbar: {
+      type: FunctionConstructor;
+    },
+
+    renderToolbar: {
+      type: FunctionConstructor;
+    },
+
+    renderCaption: {
+      type: FunctionConstructor;
+    },
+
+    renderObject: {
+      type: FunctionConstructor;
+    },
+
+    renderLazyPhoto: {
+      type: FunctionConstructor;
+    },
+
+    renderPhoto: {
+      type: FunctionConstructor;
+    },
+
+    renderPage: {
+      type: FunctionConstructor;
+    },
+
+    renderPopup: {
+      type: FunctionConstructor;
+    },
+
+    renderStandalone: {
+      type: FunctionConstructor;
+    },
+
+    renderThumb: {
+      type: FunctionConstructor;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    exposition: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    expositionHideCaptions: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    type: {
+      type: StringConstructor;
+    },
+
+    navbar: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    toolbar: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    theme: {
+      type: StringConstructor;
+    },
+
+    captionsTheme: {
+      type: StringConstructor;
+    },
+
+    iconsColor: {
+      type: StringConstructor;
+    },
+
+    swipeToClose: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    pageBackLinkText: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    popupCloseLinkIcon: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    popupCloseLinkText: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    navbarOfText: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    navbarShowCount: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    swiper: {
+      type: ObjectConstructor;
+    },
+
+    url: {
+      type: StringConstructor;
+    },
+
+    routableModals: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    virtualSlides: {
+      type: BooleanConstructor;
+      default: boolean;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("photobrowser:open" | "photobrowser:close" | "photobrowser:opened" | "photobrowser:closed" | "photobrowser:swipetoclose")[],
+  "photobrowser:open" | "photobrowser:close" | "photobrowser:opened" | "photobrowser:closed" | "photobrowser:swipetoclose"
+>;
+
+export default PhotoBrowser;
+  

package/components/photo-browser.js

@@ -0,0 +1,181 @@
+import { watch, onMounted, onBeforeUnmount } from 'vue';
+import { extend } from '../shared/utils.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-photo-browser',
+  props: {
+    init: {
+      type: Boolean,
+      default: true
+    },
+    params: Object,
+    photos: Array,
+    thumbs: Array,
+    exposition: {
+      type: Boolean,
+      default: true
+    },
+    expositionHideCaptions: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String
+    },
+    navbar: {
+      type: Boolean,
+      default: true
+    },
+    toolbar: {
+      type: Boolean,
+      default: true
+    },
+    theme: {
+      type: String
+    },
+    captionsTheme: {
+      type: String
+    },
+    iconsColor: {
+      type: String
+    },
+    swipeToClose: {
+      type: Boolean,
+      default: true
+    },
+    pageBackLinkText: {
+      type: String,
+      default: undefined
+    },
+    popupCloseLinkIcon: {
+      type: Boolean,
+      default: undefined
+    },
+    popupCloseLinkText: {
+      type: String,
+      default: undefined
+    },
+    navbarOfText: {
+      type: String,
+      default: undefined
+    },
+    navbarShowCount: {
+      type: Boolean,
+      default: undefined
+    },
+    swiper: {
+      type: Object
+    },
+    url: {
+      type: String
+    },
+    routableModals: {
+      type: Boolean,
+      default: false
+    },
+    virtualSlides: {
+      type: Boolean,
+      default: true
+    },
+    view: [String, Object],
+    renderNavbar: Function,
+    renderToolbar: Function,
+    renderCaption: Function,
+    renderObject: Function,
+    renderLazyPhoto: Function,
+    renderPhoto: Function,
+    renderPage: Function,
+    renderPopup: Function,
+    renderStandalone: Function,
+    renderThumb: Function
+  },
+  emits: ['photobrowser:open', 'photobrowser:close', 'photobrowser:opened', 'photobrowser:closed', 'photobrowser:swipetoclose'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7PhotoBrowser = null;
+    const open = index => {
+      return f7PhotoBrowser.open(index);
+    };
+    const close = () => {
+      return f7PhotoBrowser.close();
+    };
+    const expositionToggle = () => {
+      return f7PhotoBrowser.expositionToggle();
+    };
+    const expositionEnable = () => {
+      return f7PhotoBrowser.expositionEnable();
+    };
+    const expositionDisable = () => {
+      return f7PhotoBrowser.expositionDisable();
+    };
+    watch(() => props.photos, value => {
+      const pb = f7PhotoBrowser;
+      if (!pb) return;
+      pb.params.photos = value;
+      if (pb.opened && pb.swiper) {
+        pb.swiper.update();
+      }
+    });
+    watch(() => props.thumbs, value => {
+      const pb = f7PhotoBrowser;
+      if (!pb) return;
+      pb.params.thumbs = value;
+      if (pb.opened && pb.thumbsSwiper) {
+        pb.thumbsSwiper.update();
+      }
+    });
+    onMounted(() => {
+      if (!props.init) return;
+      f7ready(() => {
+        let paramsComputed;
+        if (typeof props.params !== 'undefined') {
+          paramsComputed = props.params;
+        } else {
+          paramsComputed = {
+            ...props
+          };
+          delete paramsComputed.params;
+        }
+        Object.keys(paramsComputed).forEach(param => {
+          if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
+        });
+        paramsComputed = extend({}, paramsComputed, {
+          on: {
+            open() {
+              emit('photobrowser:open');
+            },
+            close() {
+              emit('photobrowser:close');
+            },
+            opened() {
+              emit('photobrowser:opened');
+            },
+            closed() {
+              emit('photobrowser:closed');
+            },
+            swipeToClose() {
+              emit('photobrowser:swipetoclose');
+            }
+          }
+        });
+        f7PhotoBrowser = f7.photoBrowser.create(paramsComputed);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7PhotoBrowser && f7PhotoBrowser.destroy) f7PhotoBrowser.destroy();
+      f7PhotoBrowser = null;
+    });
+    return {
+      open,
+      close,
+      expositionToggle,
+      expositionEnable,
+      expositionDisable
+    };
+  },
+  render() {
+    return null;
+  }
+};

package/components/pie-chart.d.ts

@@ -0,0 +1,37 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const PieChart: DefineComponent<
+  {
+    
+    tooltip: {
+      type: BooleanConstructor;
+    },
+
+    formatTooltip: {
+      type: FunctionConstructor;
+    },
+
+    size: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    datasets: {
+      type: ArrayConstructor;
+      default: () => [];
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("select")[],
+  "select"
+>;
+
+export default PieChart;
+  

package/components/pie-chart.js

@@ -0,0 +1,172 @@
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, renderSlot as _renderSlot } from "vue";
+const _hoisted_1 = ["width", "height", "viewBox"];
+const _hoisted_2 = ["d", "fill", "data-index", "onClick", "onMouseenter"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [(_openBlock(), _createElementBlock("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: _normalizeStyle({
+      transform: 'rotate(-90deg)'
+    })
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.paths, (path, index) => {
+    return _openBlock(), _createElementBlock("path", {
+      key: path.label || index,
+      d: path.points,
+      fill: path.color,
+      "data-index": index,
+      class: _normalizeClass(_ctx.classNames({
+        'pie-chart-hidden': _ctx.currentIndex !== null && _ctx.currentIndex !== index
+      })),
+      onClick: $event => _ctx.setCurrentIndex(index),
+      onMouseenter: $event => _ctx.setCurrentIndex(index),
+      onMouseleave: _cache[0] || (_cache[0] = $event => _ctx.setCurrentIndex(null))
+    }, null, 42, _hoisted_2);
+  }), 128))], 12, _hoisted_1)), _renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { f7 } from '../shared/f7.js';
+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, _ref) {
+    let {
+      emit
+    } = _ref;
+    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(_ref2 => {
+        let {
+          value,
+          label,
+          color
+        } = _ref2;
+        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/components/popover.d.ts

@@ -0,0 +1,101 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Popover: DefineComponent<
+  {
+    
+    opened: {
+      type: BooleanConstructor;
+    },
+
+    animate: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    targetEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    arrow: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdrop: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdropEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    closeByBackdropClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    closeByOutsideClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    closeOnEscape: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    containerEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    verticalPosition: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("popover:open" | "popover:opened" | "popover:close" | "popover:closed" | "update:opened")[],
+  "popover:open" | "popover:opened" | "popover:close" | "popover:closed" | "update:opened"
+>;
+
+export default Popover;
+