@xenknight/framework7-vue 0.0.2

package/components/app.js

@@ -0,0 +1,267 @@
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  const _component_routable_modals = _resolveComponent("routable-modals");
+  return _openBlock(), _createElementBlock("div", {
+    id: "framework7-root",
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default"), _createVNode(_component_routable_modals)], 2);
+}
+import { ref, onMounted, computed, toRaw } from 'vue';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import RoutableModals from './routable-modals.js';
+import { f7init, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-app',
+  render,
+  components: {
+    RoutableModals
+  },
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      default: undefined
+    },
+    theme: {
+      type: String,
+      default: undefined
+    },
+    routes: {
+      type: Array,
+      default: () => []
+    },
+    store: Object,
+    darkMode: {
+      type: [Boolean, String],
+      default: false
+    },
+    colors: {
+      type: Object,
+      default: () => undefined
+    },
+    lazyModulesPath: {
+      type: String,
+      default: undefined
+    },
+    initOnDeviceReady: {
+      type: Boolean,
+      default: undefined
+    },
+    iosTranslucentBars: {
+      type: Boolean,
+      default: undefined
+    },
+    iosTranslucentModals: {
+      type: Boolean,
+      default: undefined
+    },
+    userAgent: {
+      type: String,
+      default: undefined
+    },
+    url: {
+      type: String,
+      default: undefined
+    },
+    // components
+    accordion: {
+      type: Object,
+      default: () => undefined
+    },
+    actions: {
+      type: Object,
+      default: () => undefined
+    },
+    areaChart: {
+      type: Object,
+      default: () => undefined
+    },
+    autocomplete: {
+      type: Object,
+      default: () => undefined
+    },
+    calendar: {
+      type: Object,
+      default: () => undefined
+    },
+    card: {
+      type: Object,
+      default: () => undefined
+    },
+    colorPicker: {
+      type: Object,
+      default: () => undefined
+    },
+    dialog: {
+      type: Object,
+      default: () => undefined
+    },
+    form: {
+      type: Object,
+      default: () => undefined
+    },
+    gauge: {
+      type: Object,
+      default: () => undefined
+    },
+    infiniteScroll: {
+      type: Object,
+      default: () => undefined
+    },
+    input: {
+      type: Object,
+      default: () => undefined
+    },
+    listIndex: {
+      type: Object,
+      default: () => undefined
+    },
+    loginScreen: {
+      type: Object,
+      default: () => undefined
+    },
+    messagebar: {
+      type: Object,
+      default: () => undefined
+    },
+    messages: {
+      type: Object,
+      default: () => undefined
+    },
+    navbar: {
+      type: Object,
+      default: () => undefined
+    },
+    notification: {
+      type: Object,
+      default: () => undefined
+    },
+    panel: {
+      type: Object,
+      default: () => undefined
+    },
+    photoBrowser: {
+      type: Object,
+      default: () => undefined
+    },
+    picker: {
+      type: Object,
+      default: () => undefined
+    },
+    pieChart: {
+      type: Object,
+      default: () => undefined
+    },
+    popover: {
+      type: Object,
+      default: () => undefined
+    },
+    popup: {
+      type: Object,
+      default: () => undefined
+    },
+    range: {
+      type: Object,
+      default: () => undefined
+    },
+    searchbar: {
+      type: Object,
+      default: () => undefined
+    },
+    sheet: {
+      type: Object,
+      default: () => undefined
+    },
+    smartSelect: {
+      type: Object,
+      default: () => undefined
+    },
+    sortable: {
+      type: Object,
+      default: () => undefined
+    },
+    statusbar: {
+      type: Object,
+      default: () => undefined
+    },
+    stepper: {
+      type: Object,
+      default: () => undefined
+    },
+    swipeout: {
+      type: Object,
+      default: () => undefined
+    },
+    textEditor: {
+      type: Object,
+      default: () => undefined
+    },
+    toast: {
+      type: Object,
+      default: () => undefined
+    },
+    toolbar: {
+      type: Object,
+      default: () => undefined
+    },
+    tooltip: {
+      type: Object,
+      default: () => undefined
+    },
+    view: {
+      type: Object,
+      default: () => undefined
+    },
+    virtualList: {
+      type: Object,
+      default: () => undefined
+    },
+    // modules
+    clicks: {
+      type: Object,
+      default: () => undefined
+    },
+    serviceWorker: {
+      type: Object,
+      default: () => undefined
+    },
+    touch: {
+      type: Object,
+      default: () => undefined
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const elRef = ref(null);
+    const routes = toRaw(props.routes);
+    if (!f7 || typeof window === 'undefined') {
+      f7init(elRef.value, noUndefinedProps({
+        ...props,
+        routes
+      }), false);
+    }
+    onMounted(() => {
+      const parentEl = elRef.value && elRef.value.parentNode;
+      /* eslint-disable no-restricted-globals */
+      if (typeof document !== 'undefined' && parentEl && parentEl !== document.body && parentEl.parentNode === document.body) {
+        parentEl.style.height = '100%';
+      }
+      /* eslint-enable no-restricted-globals */
+      if (f7) {
+        f7.init(elRef.value);
+        return;
+      }
+      f7init(elRef.value, noUndefinedProps({
+        ...props,
+        routes
+      }), true);
+    });
+    const classes = computed(() => classNames('framework7-root', colorClasses(props)));
+    return {
+      classes,
+      elRef
+    };
+  }
+};

package/components/area-chart.d.ts

@@ -0,0 +1,88 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const AreaChart: DefineComponent<
+  {
+    
+    lineChart: {
+      type: BooleanConstructor;
+    },
+
+    axis: {
+      type: BooleanConstructor;
+    },
+
+    tooltip: {
+      type: BooleanConstructor;
+    },
+
+    legend: {
+      type: BooleanConstructor;
+    },
+
+    toggleDatasets: {
+      type: BooleanConstructor;
+    },
+
+    formatAxisLabel: {
+      type: FunctionConstructor;
+    },
+
+    formatLegendLabel: {
+      type: FunctionConstructor;
+    },
+
+    formatTooltip: {
+      type: FunctionConstructor;
+    },
+
+    formatTooltipAxisLabel: {
+      type: FunctionConstructor;
+    },
+
+    formatTooltipTotal: {
+      type: FunctionConstructor;
+    },
+
+    formatTooltipDataset: {
+      type: FunctionConstructor;
+    },
+
+    datasets: {
+      type: ArrayConstructor;
+      default: () => [];
+    },
+
+    axisLabels: {
+      type: ArrayConstructor;
+      default: () => [];
+    },
+
+    width: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    height: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    maxAxisLabels: {
+      type: NumberConstructor;
+      default: number;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("select")[],
+  "select"
+>;
+
+export default AreaChart;
+  

package/components/area-chart.js

@@ -0,0 +1,364 @@
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, normalizeClass as _normalizeClass, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, renderSlot as _renderSlot } from "vue";
+const _hoisted_1 = ["width", "height", "viewBox"];
+const _hoisted_2 = ["data-index", "x1", "x2", "y2"];
+const _hoisted_3 = {
+  key: 0,
+  class: "area-chart-axis"
+};
+const _hoisted_4 = {
+  key: 0
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "area-chart-legend"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [(_openBlock(), _createElementBlock("svg", {
+    ref: "svgElRef",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: _ctx.width,
+    height: _ctx.height,
+    viewBox: `0 0 ${_ctx.width} ${_ctx.height}`,
+    preserveAspectRatio: "none"
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.chartData, (data, index) => {
+    return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.ChartTag), {
+      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), _createElementBlock(_Fragment, null, _renderList(_ctx.verticalLines, (line, index) => {
+    return _openBlock(), _createElementBlock("line", {
+      key: `line-${index}`,
+      "data-index": index,
+      fill: "#000",
+      x1: line,
+      y1: 0,
+      x2: line,
+      y2: _ctx.height,
+      class: _normalizeClass(_ctx.classNames({
+        'area-chart-current-line': _ctx.currentIndex === index
+      }))
+    }, null, 10, _hoisted_2);
+  }), 128))], 8, _hoisted_1)), _ctx.axis ? (_openBlock(), _createElementBlock("div", _hoisted_3, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.axisLabels, (label, index) => {
+    return _openBlock(), _createElementBlock("span", {
+      key: index
+    }, [_ctx.visibleLegends.includes(label) ? (_openBlock(), _createElementBlock("span", _hoisted_4, _toDisplayString(_ctx.formatAxisLabelMethod(label)), 1)) : _createCommentVNode("", true)]);
+  }), 128))])) : _createCommentVNode("", true), _ctx.legend ? (_openBlock(), _createElementBlock("div", _hoisted_5, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.datasets, (dataset, index) => {
+    return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.LegendItemTag), {
+      key: index,
+      class: _normalizeClass(_ctx.classNames('area-chart-legend-item', {
+        'area-chart-legend-item-hidden': _ctx.hiddenDatasets.includes(index),
+        'area-chart-legend-button': _ctx.toggleDatasets
+      })),
+      type: _ctx.toggleDatasets ? 'button' : undefined,
+      onClick: $event => _ctx.toggleDataset(index)
+    }, {
+      default: _withCtx(() => [_createElementVNode("span", {
+        style: _normalizeStyle({
+          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);
+}
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-area-chart',
+  render,
+  props: {
+    lineChart: Boolean,
+    datasets: {
+      type: Array,
+      default: () => []
+    },
+    axis: Boolean,
+    axisLabels: {
+      type: Array,
+      default: () => []
+    },
+    tooltip: Boolean,
+    legend: Boolean,
+    toggleDatasets: Boolean,
+    width: {
+      type: Number,
+      default: 640
+    },
+    height: {
+      type: Number,
+      default: 320
+    },
+    maxAxisLabels: {
+      type: Number,
+      default: 8
+    },
+    formatAxisLabel: Function,
+    formatLegendLabel: Function,
+    formatTooltip: Function,
+    formatTooltipAxisLabel: Function,
+    formatTooltipTotal: Function,
+    formatTooltipDataset: Function
+  },
+  emits: ['select'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    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;
+      const skipStep = Math.ceil(props.axisLabels.length / props.maxAxisLabels);
+      const filtered = props.axisLabels.filter((label, index) => index % skipStep === 0);
+      return filtered;
+    });
+    const summValues = computed(() => {
+      const summ = [];
+      props.datasets.filter((dataset, index) => !hiddenDatasets.value.includes(index)).forEach(_ref2 => {
+        let {
+          values
+        } = _ref2;
+        values.forEach((value, valueIndex) => {
+          if (!summ[valueIndex]) summ[valueIndex] = 0;
+          summ[valueIndex] += value;
+        });
+      });
+      return summ;
+    });
+    const chartData = computed(() => {
+      const {
+        datasets,
+        lineChart,
+        width,
+        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 {
+            values
+          } = _ref3;
+          const datasetMaxValue = Math.max(...values);
+          if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
+        });
+      } else {
+        maxValue = Math.max(...summValues.value);
+      }
+      datasets.filter((dataset, index) => !hiddenDatasets.value.includes(index)).forEach(_ref4 => {
+        let {
+          label,
+          values,
+          color
+        } = _ref4;
+        const points = values.map((originalValue, valueIndex) => {
+          lastValues[valueIndex] += originalValue;
+          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(' '),
+          color
+        });
+      });
+      return data.reverse();
+    });
+    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;
+        lines.push(x);
+      });
+      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 '';
+      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,
+          total,
+          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 datasetsText = currentValues.length > 0 ? `
+      <ul class="area-chart-tooltip-list">
+        ${currentValues.map(_ref5 => {
+        let {
+          label,
+          color,
+          value
+        } = _ref5;
+        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}
+    `;
+    };
+    const setTooltip = () => {
+      const {
+        tooltip,
+        datasets
+      } = props;
+      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',
+          containerEl: elRef.value,
+          targetEl: svgElRef.value.querySelector(`line[data-index="${index}"]`),
+          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}"]`));
+        f7Tooltip.show();
+      } else {
+        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));
+      const minDistance = Math.min(...distances);
+      const closestIndex = distances.indexOf(minDistance);
+      currentIndex.value = closestIndex;
+    };
+    const onMouseLeave = () => {
+      currentIndex.value = null;
+    };
+    watch(() => currentIndex.value, () => {
+      emit('select', currentIndex.value);
+      setTooltip();
+    });
+    onMounted(() => {
+      if (!svgElRef.value) return;
+      svgElRef.value.addEventListener('mouseenter', onMouseEnter);
+      svgElRef.value.addEventListener('mousemove', onMouseMove);
+      svgElRef.value.addEventListener('mouseleave', onMouseLeave);
+    });
+    onBeforeUnmount(() => {
+      if (f7Tooltip && f7Tooltip.destroy) {
+        f7Tooltip.destroy();
+      }
+      f7Tooltip = null;
+      if (!svgElRef.value) return;
+      svgElRef.value.removeEventListener('mouseenter', onMouseEnter);
+      svgElRef.value.removeEventListener('mousemove', onMouseMove);
+      svgElRef.value.removeEventListener('mouseleave', onMouseLeave);
+    });
+    const classes = computed(() => classNames('area-chart'));
+    const LegendItemTag = computed(() => props.toggleDatasets ? 'button' : 'span');
+    const ChartTag = computed(() => props.lineChart ? 'path' : 'polygon');
+    return {
+      currentIndex,
+      hiddenDatasets,
+      visibleLegends,
+      chartData,
+      verticalLines,
+      elRef,
+      svgElRef,
+      classes,
+      toggleDataset,
+      formatAxisLabelMethod,
+      formatLegendLabelMethod,
+      LegendItemTag,
+      ChartTag,
+      classNames
+    };
+  }
+};