framework7-vue 6.3.4 → 7.0.0-beta.3

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

@@ -1,8 +1,6 @@
-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("i", {
+const _hoisted_1 = /*#__PURE__*/_createVNode("i", {
   class: "icon-checkbox"
 }, null, -1);
 
@@ -17,9 +15,7 @@ function render(_ctx, _cache) {
     disabled: _ctx.disabled,
     readonly: _ctx.readonly,
     checked: _ctx.checked,
-    onChange: _cache[1] || (_cache[1] = function () {
-      return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments);
-    })
+    onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
   }, null, 40, ["name", "value", "disabled", "readonly", "checked"]), _hoisted_1, _renderSlot(_ctx.$slots, "default")], 2);
 }
 
@@ -28,8 +24,8 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-checkbox',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     checked: Boolean,
     indeterminate: Boolean,
     name: [Number, String],
@@ -38,40 +34,40 @@ export default {
       default: undefined
     },
     disabled: Boolean,
-    readonly: Boolean
-  }, colorProps),
+    readonly: Boolean,
+    ...colorProps
+  },
   emits: ['update:checked', 'change'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var inputElRef = ref(null);
 
-    var onChange = function onChange(event) {
+  setup(props, {
+    emit
+  }) {
+    const inputElRef = ref(null);
+
+    const onChange = event => {
       emit('update:checked', event.target.checked);
       emit('change', event);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (inputElRef.value) {
         inputElRef.value.indeterminate = !!props.indeterminate;
       }
     });
-    watch(function () {
-      return props.indeterminate;
-    }, function (newValue) {
+    watch(() => props.indeterminate, newValue => {
       if (inputElRef.value) {
         inputElRef.value.indeterminate = !!newValue;
       }
     });
-    var classes = computed(function () {
-      return classNames({
-        checkbox: true,
-        disabled: props.disabled
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames({
+      checkbox: true,
+      disabled: props.disabled
+    }, colorClasses(props)));
     return {
-      inputElRef: inputElRef,
-      classes: classes,
-      onChange: onChange
+      inputElRef,
+      classes,
+      onChange
     };
   }
+
 };

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

@@ -1,13 +1,11 @@
-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 { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 1,
   class: "chip-label"
 };
 
 function render(_ctx, _cache) {
-  var _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
 
   return _openBlock(), _createBlock("div", {
     ref: "elRef",
@@ -21,9 +19,7 @@ function render(_ctx, _cache) {
   }, null, 8, ["icon"])) : _createCommentVNode("", true), _createTextVNode(" " + _toDisplayString(_ctx.media) + " ", 1), _renderSlot(_ctx.$slots, "media")], 2)) : _createCommentVNode("", true), _ctx.hasLabel ? (_openBlock(), _createBlock("div", _hoisted_1, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _renderSlot(_ctx.$slots, "default")])) : _createCommentVNode("", true), _ctx.deleteable ? (_openBlock(), _createBlock("a", {
     key: 2,
     class: "chip-delete",
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.onDeleteClick && _ctx.onDeleteClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onDeleteClick && _ctx.onDeleteClick(...args))
   })) : _createCommentVNode("", true)], 2);
 }
 
@@ -35,11 +31,11 @@ import { useIcon } from '../shared/use-icon';
 import f7UseIcon from './use-icon';
 export default {
   name: 'f7-chip',
-  render: render,
+  render,
   components: {
-    f7UseIcon: f7UseIcon
+    f7UseIcon
   },
-  props: _extends({
+  props: {
     media: String,
     text: [String, Number],
     deleteable: Boolean,
@@ -47,44 +43,43 @@ export default {
     mediaTextColor: String,
     outline: Boolean,
     tooltip: String,
-    tooltipTrigger: String
-  }, iconProps, colorProps),
+    tooltipTrigger: String,
+    ...iconProps,
+    ...colorProps
+  },
   emits: ['delete'],
-  setup: function setup(props, _ref) {
-    var slots = _ref.slots,
-        emit = _ref.emit;
-    var elRef = ref(null);
 
-    var onDeleteClick = function onDeleteClick(event) {
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const elRef = ref(null);
+
+    const onDeleteClick = event => {
       emit('delete', event);
     };
 
     useTooltip(elRef, props);
-    var icon = computed(function () {
-      return useIcon(props);
-    });
-    var mediaClasses = computed(function () {
-      return classNames('chip-media', props.mediaTextColor && "text-color-" + props.mediaTextColor, props.mediaBgColor && "bg-color-" + props.mediaBgColor);
-    });
-    var classes = computed(function () {
-      return classNames('chip', {
-        'chip-outline': props.outline
-      }, colorClasses(props));
-    });
-    var hasLabel = computed(function () {
+    const icon = computed(() => useIcon(props));
+    const mediaClasses = computed(() => classNames('chip-media', props.mediaTextColor && `text-color-${props.mediaTextColor}`, props.mediaBgColor && `bg-color-${props.mediaBgColor}`));
+    const classes = computed(() => classNames('chip', {
+      'chip-outline': props.outline
+    }, colorClasses(props)));
+    const hasLabel = computed(() => {
       return props.text || slots && (slots.text || slots.default);
     });
-    var hasMedia = computed(function () {
+    const hasMedia = computed(() => {
       return props.media || icon.value || slots && slots.media;
     });
     return {
-      classes: classes,
-      icon: icon,
-      mediaClasses: mediaClasses,
-      elRef: elRef,
-      hasLabel: hasLabel,
-      hasMedia: hasMedia,
-      onDeleteClick: onDeleteClick
+      classes,
+      icon,
+      mediaClasses,
+      elRef,
+      hasLabel,
+      hasMedia,
+      onDeleteClick
     };
   }
+
 };

package/components/col.js

@@ -0,0 +1,96 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "resize-handler"
+};
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    ref: "elRef",
+    class: _ctx.classes
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.resizable && _ctx.resizableHandler ? (_openBlock(), _createBlock("span", _hoisted_1)) : _createCommentVNode("", true)]),
+    _: 3
+  }, 8, ["class"]);
+}
+
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+import { f7ready, f7 } from '../shared/f7';
+export default {
+  name: 'f7-col',
+  render,
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    width: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    xsmall: {
+      type: [Number, String]
+    },
+    small: {
+      type: [Number, String]
+    },
+    medium: {
+      type: [Number, String]
+    },
+    large: {
+      type: [Number, String]
+    },
+    xlarge: {
+      type: [Number, String]
+    },
+    resizable: Boolean,
+    resizableFixed: Boolean,
+    resizableAbsolute: Boolean,
+    resizableHandler: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['grid:resize'],
+
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+
+    const onResize = el => {
+      if (el === elRef.value) {
+        emit('grid:resize');
+      }
+    };
+
+    onMounted(() => {
+      f7ready(() => {
+        f7.on('gridResize', onResize);
+      });
+    });
+    onBeforeUnmount(() => {
+      f7.off('gridResize', onResize);
+    });
+    const classes = computed(() => classNames({
+      col: props.width === 'auto',
+      [`col-${props.width}`]: props.width !== 'auto',
+      [`xsmall-${props.xsmall}`]: props.xsmall,
+      [`small-${props.small}`]: props.small,
+      [`medium-${props.medium}`]: props.medium,
+      [`large-${props.large}`]: props.large,
+      [`xlarge-${props.xlarge}`]: props.xlarge,
+      resizable: props.resizable,
+      'resizable-fixed': props.resizableFixed,
+      'resizable-absolute': props.resizableAbsolute
+    }, colorClasses(props)));
+    return {
+      classes,
+      elRef
+    };
+  }
+
+};

package/components/fab-backdrop.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-fab-backdrop',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('fab-backdrop', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/fab-button.js

@@ -1,7 +1,5 @@
-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, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "fab-label"
 };
@@ -11,9 +9,7 @@ function render(_ctx, _cache) {
     ref: "elRef",
     class: _ctx.classes,
     target: _ctx.target,
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [_renderSlot(_ctx.$slots, "default"), _ctx.label ? (_openBlock(), _createBlock("span", _hoisted_1, _toDisplayString(_ctx.label), 1)) : _createCommentVNode("", true)], 10, ["target"]);
 }
 
@@ -23,34 +19,36 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { useTooltip } from '../shared/use-tooltip';
 export default {
   name: 'f7-fab-button',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     fabClose: Boolean,
     label: String,
     target: String,
     tooltip: String,
-    tooltipTrigger: String
-  }, colorProps),
+    tooltipTrigger: String,
+    ...colorProps
+  },
   emits: ['click'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = ref(null);
 
-    var onClick = function onClick(e) {
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+
+    const onClick = e => {
       emit('click', e);
     };
 
     useTooltip(elRef, props);
-    var classes = computed(function () {
-      return classNames({
-        'fab-close': props.fabClose,
-        'fab-label-button': props.label
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames({
+      'fab-close': props.fabClose,
+      'fab-label-button': props.label
+    }, colorClasses(props)));
     return {
-      classes: classes,
-      onClick: onClick,
-      elRef: elRef
+      classes,
+      onClick,
+      elRef
     };
   }
+
 };

package/components/fab-buttons.js

@@ -0,0 +1,30 @@
+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-fab-buttons',
+  render,
+  props: {
+    position: {
+      type: String,
+      default: 'top'
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('fab-buttons', `fab-buttons-${props.position}`, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/fab.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 { h, 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-fab',
-  props: _extends({
+  props: {
     morphTo: String,
     href: [Boolean, String],
     target: String,
@@ -16,40 +14,45 @@ export default {
       default: 'right-bottom'
     },
     tooltip: String,
-    tooltipTrigger: String
-  }, colorProps),
+    tooltipTrigger: String,
+    ...colorProps
+  },
   emits: ['click'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var elRef = ref(null);
 
-    var onClick = function onClick(e) {
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const elRef = ref(null);
+
+    const onClick = e => {
       emit('click', e);
     };
 
     useTooltip(elRef, props);
-    var hrefComputed = computed(function () {
-      var href = props.href;
+    const hrefComputed = computed(() => {
+      let href = props.href;
       if (href === true) href = '#';
       if (href === false) href = undefined; // no href attribute
 
       return href;
     });
-    return function () {
-      var linkChildren = [];
-      var rootChildren = [];
-      var textEl;
-      var linkEl;
-      var linkSlots = slots.link,
-          defaultSlots = slots.default,
-          rootSlots = slots.root,
-          textSlots = slots.text;
+    return () => {
+      const linkChildren = [];
+      const rootChildren = [];
+      let textEl;
+      let linkEl;
+      const {
+        link: linkSlots,
+        default: defaultSlots,
+        root: rootSlots,
+        text: textSlots
+      } = slots;
 
       if (defaultSlots) {
-        defaultSlots().forEach(function (vnode) {
+        defaultSlots().forEach(vnode => {
           if (typeof vnode === 'undefined') return;
-          var tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
           if (tag === 'FabButtons' || tag === 'f7-fab-buttons') rootChildren.push(vnode);else linkChildren.push(vnode);
         });
       }
@@ -64,11 +67,11 @@ export default {
         linkEl = h('a', {
           target: props.target,
           href: hrefComputed.value,
-          onClick: onClick
+          onClick
         }, [linkChildren, textEl, linkSlots && linkSlots()]);
       }
 
-      var classes = classNames('fab', "fab-" + props.position, {
+      const classes = classNames('fab', `fab-${props.position}`, {
         'fab-morph': props.morphTo,
         'fab-extended': typeof textEl !== 'undefined'
       }, colorClasses(props));
@@ -79,4 +82,5 @@ export default {
       }, [linkEl, rootChildren, rootSlots && rootSlots()]);
     };
   }
+
 };

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

@@ -1,25 +1,25 @@
 import { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   class: "gauge"
 };
 
 function render(_ctx, _cache) {
   return _openBlock(), _createBlock("div", _hoisted_1, [(_openBlock(), _createBlock("svg", {
     class: "gauge-svg",
-    width: _ctx.size + "px",
-    height: (_ctx.semiCircle ? _ctx.size / 2 : _ctx.size) + "px",
-    viewBox: "0 0 " + _ctx.size + " " + (_ctx.semiCircle ? _ctx.size / 2 : _ctx.size)
+    width: `${_ctx.size}px`,
+    height: `${_ctx.semiCircle ? _ctx.size / 2 : _ctx.size}px`,
+    viewBox: `0 0 ${_ctx.size} ${_ctx.semiCircle ? _ctx.size / 2 : _ctx.size}`
   }, [_ctx.semiCircle ? (_openBlock(), _createBlock("path", {
     key: 0,
     class: "gauge-back-semi",
-    d: "M" + (_ctx.size - _ctx.borderWidth / 2) + "," + _ctx.size / 2 + " a1,1 0 0,0 -" + (_ctx.size - _ctx.borderWidth) + ",0",
+    d: `M${_ctx.size - _ctx.borderWidth / 2},${_ctx.size / 2} a1,1 0 0,0 -${_ctx.size - _ctx.borderWidth},0`,
     stroke: _ctx.borderBgColor,
     "stroke-width": _ctx.borderWidth,
     fill: _ctx.bgColor || 'none'
   }, null, 8, ["d", "stroke", "stroke-width", "fill"])) : _createCommentVNode("", true), _ctx.semiCircle ? (_openBlock(), _createBlock("path", {
     key: 1,
     class: "gauge-front-semi",
-    d: "M" + (_ctx.size - _ctx.borderWidth / 2) + "," + _ctx.size / 2 + " a1,1 0 0,0 -" + (_ctx.size - _ctx.borderWidth) + ",0",
+    d: `M${_ctx.size - _ctx.borderWidth / 2},${_ctx.size / 2} a1,1 0 0,0 -${_ctx.size - _ctx.borderWidth},0`,
     stroke: _ctx.borderColor,
     "stroke-width": _ctx.borderWidth,
     "stroke-dasharray": _ctx.length / 2,
@@ -37,7 +37,7 @@ function render(_ctx, _cache) {
   }, null, 8, ["stroke", "stroke-width", "fill", "cx", "cy", "r"])) : _createCommentVNode("", true), !_ctx.semiCircle ? (_openBlock(), _createBlock("circle", {
     key: 3,
     class: "gauge-front-circle",
-    transform: "rotate(-90 " + _ctx.size / 2 + " " + _ctx.size / 2 + ")",
+    transform: `rotate(-90 ${_ctx.size / 2} ${_ctx.size / 2})`,
     stroke: _ctx.borderColor,
     "stroke-width": _ctx.borderWidth,
     "stroke-dasharray": _ctx.length,
@@ -74,7 +74,7 @@ function render(_ctx, _cache) {
 import { computed } from 'vue';
 export default {
   name: 'f7-gauge',
-  render: render,
+  render,
   props: {
     type: {
       type: String,
@@ -131,24 +131,18 @@ export default {
       default: 400
     }
   },
-  setup: function setup(props) {
-    var semiCircle = computed(function () {
-      return props.type === 'semicircle';
-    });
-    var radius = computed(function () {
-      return props.size / 2 - props.borderWidth / 2;
-    });
-    var length = computed(function () {
-      return 2 * Math.PI * radius.value;
-    });
-    var progress = computed(function () {
-      return Math.max(Math.min(props.value, 1), 0);
-    });
+
+  setup(props) {
+    const semiCircle = computed(() => props.type === 'semicircle');
+    const radius = computed(() => props.size / 2 - props.borderWidth / 2);
+    const length = computed(() => 2 * Math.PI * radius.value);
+    const progress = computed(() => Math.max(Math.min(props.value, 1), 0));
     return {
-      semiCircle: semiCircle,
-      radius: radius,
-      length: length,
-      progress: progress
+      semiCircle,
+      radius,
+      length,
+      progress
     };
   }
+
 };