framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/icon.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 { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
 function render(_ctx, _cache) {
@@ -21,8 +19,8 @@ import { useTooltip } from '../shared/use-tooltip';
 import { useTheme } from '../shared/use-theme';
 export default {
   name: 'f7-icon',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     material: String,
     f7: String,
     icon: String,
@@ -31,29 +29,33 @@ export default {
     md: String,
     tooltip: String,
     tooltipTrigger: String,
-    size: [String, Number]
-  }, colorProps),
-  setup: function setup(props) {
-    var elRef = ref(null);
-    var theme = useTheme();
+    size: [String, Number],
+    ...colorProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
+    const theme = useTheme();
     useTooltip(elRef, props);
-    var classesComputed = computed(function () {
-      var ios = props.ios,
-          md = props.md,
-          aurora = props.aurora,
-          f7 = props.f7,
-          material = props.material,
-          icon = props.icon;
-      var classes = {
+    const classesComputed = computed(() => {
+      const {
+        ios,
+        md,
+        aurora,
+        f7,
+        material,
+        icon
+      } = props;
+      let classes = {
         icon: true
       };
-      var themeIcon;
+      let themeIcon;
       if (theme.value && theme.value.ios) themeIcon = ios;else if (theme.value && theme.value.md) themeIcon = md;else if (theme.value && theme.value.aurora) themeIcon = aurora;
 
       if (themeIcon) {
-        var parts = themeIcon.split(':');
-        var prop = parts[0];
-        var value = parts[1];
+        const parts = themeIcon.split(':');
+        const prop = parts[0];
+        const value = parts[1];
 
         if (prop === 'material' || prop === 'f7') {
           classes['material-icons'] = prop === 'material';
@@ -74,22 +76,24 @@ export default {
 
       return classNames(classes, colorClasses(props));
     });
-    var sizeComputed = computed(function () {
-      var size = props.size;
+    const sizeComputed = computed(() => {
+      let size = props.size;
 
       if (typeof props.size === 'number' || parseFloat(props.size) === props.size * 1) {
-        size = props.size + "px";
+        size = `${props.size}px`;
       }
 
       return size;
     });
-    var iconText = computed(function () {
-      var ios = props.ios,
-          md = props.md,
-          aurora = props.aurora,
-          f7 = props.f7,
-          material = props.material;
-      var text = material || f7;
+    const iconText = computed(() => {
+      const {
+        ios,
+        md,
+        aurora,
+        f7,
+        material
+      } = props;
+      let text = material || f7;
 
       if (md && theme.value && theme.value.md && (md.indexOf('material:') >= 0 || md.indexOf('f7:') >= 0)) {
         text = md.split(':')[1];
@@ -102,10 +106,11 @@ export default {
       return text;
     });
     return {
-      elRef: elRef,
-      sizeComputed: sizeComputed,
-      classesComputed: classesComputed,
-      iconText: iconText
+      elRef,
+      sizeComputed,
+      classesComputed,
+      iconText
     };
   }
+
 };

package/{esm/components → components}/input.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 { computed, ref, onMounted, onBeforeUnmount, h, watch, onUpdated } from 'vue';
 import { classNames, extend, noUndefinedProps } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -9,7 +7,7 @@ import f7Range from './range';
 import f7TextEditor from './text-editor';
 export default {
   name: 'f7-input',
-  props: _extends({
+  props: {
     type: String,
     name: String,
     value: {
@@ -69,27 +67,30 @@ export default {
     // Colorpciker
     colorPickerParams: Object,
     // Text editor
-    textEditorParams: Object
-  }, colorProps),
+    textEditorParams: Object,
+    ...colorProps
+  },
   emits: ['input', 'focus', 'blur', 'change', 'textarea:resize', 'input:notempty', 'input:empty', 'input:clear', 'texteditor:change', 'calendar:change', 'colorpicker:change', 'update:value'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var f7Calendar = null;
-    var f7ColorPicker = null;
-    var inputInvalid = ref(false);
-    var inputFocused = ref(false);
-    var elRef = ref(null);
-    var inputElRef = ref(null);
-    var updateInputOnDidUpdate = false;
-
-    var getDomValue = function getDomValue() {
+
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let f7Calendar = null;
+    let f7ColorPicker = null;
+    const inputInvalid = ref(false);
+    const inputFocused = ref(false);
+    const elRef = ref(null);
+    const inputElRef = ref(null);
+    let updateInputOnDidUpdate = false;
+
+    const getDomValue = () => {
       if (!inputElRef.value) return undefined;
       return inputElRef.value.value;
     };
 
-    var domValue = ref(getDomValue());
-    var inputHasValue = computed(function () {
+    const domValue = ref(getDomValue());
+    const inputHasValue = computed(() => {
       if (props.type === 'datepicker' && Array.isArray(props.value) && props.value.length === 0) {
         return false;
       }
@@ -97,9 +98,9 @@ export default {
       return typeof props.value === 'undefined' ? domValue.value || domValue.value === 0 : props.value || props.value === 0;
     });
 
-    var validateInput = function validateInput() {
+    const validateInput = () => {
       if (!f7 || !inputElRef.value) return;
-      var validity = inputElRef.value.validity;
+      const validity = inputElRef.value.validity;
       if (!validity) return;
 
       if (!validity.valid) {
@@ -117,28 +118,24 @@ export default {
       }
     };
 
-    var onTextareaResize = function onTextareaResize(event) {
+    const onTextareaResize = event => {
       emit('textarea:resize', event);
     };
 
-    var onInputNotEmpty = function onInputNotEmpty(event) {
+    const onInputNotEmpty = event => {
       emit('input:notempty', event);
     };
 
-    var onInputEmpty = function onInputEmpty(event) {
+    const onInputEmpty = event => {
       emit('input:empty', event);
     };
 
-    var onInputClear = function onInputClear(event) {
+    const onInputClear = event => {
       emit('input:clear', event);
     };
 
-    var onInput = function onInput() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      emit.apply(void 0, ['input'].concat(args));
+    const onInput = (...args) => {
+      emit('input', ...args);
 
       if (inputElRef.value) {
         domValue.value = inputElRef.value.value;
@@ -153,21 +150,13 @@ export default {
       }
     };
 
-    var onFocus = function onFocus() {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-
-      emit.apply(void 0, ['focus'].concat(args));
+    const onFocus = (...args) => {
+      emit('focus', ...args);
       inputFocused.value = true;
     };
 
-    var onBlur = function onBlur() {
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-
-      emit.apply(void 0, ['blur'].concat(args));
+    const onBlur = (...args) => {
+      emit('blur', ...args);
 
       if ((props.validate || props.validate === '' || props.validateOnBlur || props.validateOnBlur === '') && inputElRef.value) {
         validateInput();
@@ -176,12 +165,8 @@ export default {
       inputFocused.value = false;
     };
 
-    var onChange = function onChange() {
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
-      }
-
-      emit.apply(void 0, ['change'].concat(args));
+    const onChange = (...args) => {
+      emit('change', ...args);
 
       if (props.type === 'texteditor') {
         emit('texteditor:change', args[1]);
@@ -189,16 +174,18 @@ export default {
       }
     };
 
-    onMounted(function () {
-      var type = props.type,
-          resizable = props.resizable,
-          clearButton = props.clearButton,
-          value = props.value,
-          calendarParams = props.calendarParams,
-          colorPickerParams = props.colorPickerParams,
-          validate = props.validate,
-          validateOnBlur = props.validateOnBlur;
-      f7ready(function () {
+    onMounted(() => {
+      const {
+        type,
+        resizable,
+        clearButton,
+        value,
+        calendarParams,
+        colorPickerParams,
+        validate,
+        validateOnBlur
+      } = props;
+      f7ready(() => {
         if (type === 'range' || type === 'toggle') return;
         if (!inputElRef.value) return;
         inputElRef.value.addEventListener('input:notempty', onInputNotEmpty, false);
@@ -213,35 +200,39 @@ export default {
         }
 
         if (type === 'datepicker') {
-          f7Calendar = f7.calendar.create(_extends({
+          f7Calendar = f7.calendar.create({
             inputEl: inputElRef.value,
-            value: value,
+            value,
             on: {
-              change: function change(calendar, calendarValue) {
+              change(calendar, calendarValue) {
                 emit('calendar:change', calendarValue);
                 emit('update:value', calendarValue);
               }
-            }
-          }, calendarParams || {}));
+
+            },
+            ...(calendarParams || {})
+          });
         }
 
         if (type === 'colorpicker') {
-          f7ColorPicker = f7.colorPicker.create(_extends({
+          f7ColorPicker = f7.colorPicker.create({
             inputEl: inputElRef.value,
-            value: value,
+            value,
             on: {
-              change: function change(colorPicker, colorPickerValue) {
+              change(colorPicker, colorPickerValue) {
                 emit('colorpicker:change', colorPickerValue);
                 emit('update:value', colorPickerValue);
               }
-            }
-          }, colorPickerParams || {}));
+
+            },
+            ...(colorPickerParams || {})
+          });
         }
 
         f7.input.checkEmptyState(inputElRef.value);
 
         if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && typeof value !== 'undefined' && value !== null && value !== '') {
-          setTimeout(function () {
+          setTimeout(() => {
             validateInput();
           }, 0);
         }
@@ -251,7 +242,7 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (props.type === 'range' || props.type === 'toggle') return;
       if (!inputElRef.value) return;
       inputElRef.value.removeEventListener('input:notempty', onInputNotEmpty, false);
@@ -275,7 +266,7 @@ export default {
         f7ColorPicker = null;
       }
     });
-    onUpdated(function () {
+    onUpdated(() => {
       if (!f7) return;
 
       if (updateInputOnDidUpdate) {
@@ -292,21 +283,15 @@ export default {
         }
       }
     });
-    watch(function () {
-      return props.colorPickerParams;
-    }, function (newValue) {
+    watch(() => props.colorPickerParams, newValue => {
       if (!f7 || !f7ColorPicker) return;
       extend(f7ColorPicker.params, newValue || {});
     });
-    watch(function () {
-      return props.calendarParams;
-    }, function (newValue) {
+    watch(() => props.calendarParams, newValue => {
       if (!f7 || !f7Calendar) return;
       extend(f7Calendar.params, newValue || {});
     });
-    watch(function () {
-      return props.value;
-    }, function (newValue) {
+    watch(() => props.value, newValue => {
       if (props.type === 'range' || props.type === 'toggle' || !f7) return;
       updateInputOnDidUpdate = true;
 
@@ -319,35 +304,35 @@ export default {
       }
     });
 
-    var createInput = function createInput(InputTag, children) {
-      var needsValue = props.type !== 'file' && props.type !== 'datepicker' && props.type !== 'colorpicker';
-      var needsType = InputTag === 'input';
-      var inputType = props.type;
+    const createInput = (InputTag, children) => {
+      const needsValue = props.type !== 'file' && props.type !== 'datepicker' && props.type !== 'colorpicker';
+      const needsType = InputTag === 'input';
+      let inputType = props.type;
 
       if (inputType === 'datepicker' || inputType === 'colorpicker') {
         inputType = 'text';
       }
 
-      var inputClassName = classNames({
+      const inputClassName = classNames({
         resizable: inputType === 'textarea' && props.resizable,
         'no-store-data': props.noFormStoreData || props.noStoreData || props.ignoreStoreData,
         'input-invalid': props.errorMessage && props.errorMessageForce || inputInvalid.value,
         'input-with-value': inputHasValue.value,
         'input-focused': inputFocused.value
       });
-      var inputValue;
+      let inputValue;
 
       if (needsValue) {
         if (typeof props.value !== 'undefined') inputValue = props.value;else inputValue = domValue.value;
       }
 
-      var valueProps = {};
+      const valueProps = {};
 
       if (props.type !== 'datepicker' && props.type !== 'colorpicker') {
         if ('value' in props) valueProps.value = inputValue;
       }
 
-      var inputProps = noUndefinedProps({
+      const inputProps = noUndefinedProps({
         name: props.name,
         type: needsType ? inputType : undefined,
         placeholder: props.placeholder,
@@ -375,30 +360,29 @@ export default {
         validate: typeof props.validate === 'string' && props.validate.length ? props.validate : undefined,
         tabindex: props.tabindex
       });
-      return h(InputTag, _extends({
+      return h(InputTag, {
         ref: inputElRef,
-        style: props.inputStyle
-      }, inputProps, {
+        style: props.inputStyle,
+        ...inputProps,
         'data-validate': props.validate === true || props.validate === '' || props.validateOnBlur === true || props.validateOnBlur === '' ? true : undefined,
         'data-validate-on-blur': props.validateOnBlur === true || props.validateOnBlur === '' ? true : undefined,
         'data-error-message': props.errorMessageForce ? undefined : props.errorMessage,
         class: inputClassName,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onInput: onInput,
-        onChange: onChange
-      }, valueProps), [children]);
+        onFocus,
+        onBlur,
+        onInput,
+        onChange,
+        ...valueProps
+      }, [children]);
     };
 
-    var wrapClasses = computed(function () {
-      return classNames('input', {
-        'input-outline': props.outline,
-        'input-dropdown': props.dropdown === 'auto' ? props.type === 'select' : props.dropdown,
-        'input-invalid': props.errorMessage && props.errorMessageForce || inputInvalid.value
-      }, colorClasses(props));
-    });
-    return function () {
-      var inputEl;
+    const wrapClasses = computed(() => classNames('input', {
+      'input-outline': props.outline,
+      'input-dropdown': props.dropdown === 'auto' ? props.type === 'select' : props.dropdown,
+      'input-invalid': props.errorMessage && props.errorMessageForce || inputInvalid.value
+    }, colorClasses(props)));
+    return () => {
+      let inputEl;
 
       if (props.type === 'select' || props.type === 'textarea' || props.type === 'file') {
         if (props.type === 'select') {
@@ -418,7 +402,7 @@ export default {
           value: props.value,
           disabled: props.disabled,
           id: props.inputId,
-          onChange: onChange
+          onChange
         });
       } else if (props.type === 'range') {
         inputEl = h(f7Range, {
@@ -433,15 +417,16 @@ export default {
           onRangeChange: onChange
         });
       } else if (props.type === 'texteditor') {
-        inputEl = h(f7TextEditor, _extends({
+        inputEl = h(f7TextEditor, {
           value: props.value,
           resizable: props.resizable,
           placeholder: props.placeholder,
           onTextEditorFocus: onFocus,
           onTextEditorBlur: onBlur,
           onTextEditorInput: onInput,
-          onTextEditorChange: onChange
-        }, props.textEditorParams || {}));
+          onTextEditorChange: onChange,
+          ...(props.textEditorParams || {})
+        });
       } else {
         inputEl = createInput('input');
       }
@@ -459,4 +444,5 @@ export default {
       }, [props.info, slots.info && slots.info()])]);
     };
   }
+
 };

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

@@ -1,11 +1,9 @@
-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, createTextVNode as _createTextVNode, withCtx as _withCtx, renderSlot as _renderSlot, mergeProps as _mergeProps } from "vue";
 
 function render(_ctx, _cache) {
-  var _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
 
-  var _component_f7_badge = _resolveComponent("f7-badge");
+  const _component_f7_badge = _resolveComponent("f7-badge");
 
   return _openBlock(), _createBlock("a", _mergeProps({
     ref: "elRef",
@@ -20,9 +18,7 @@ function render(_ctx, _cache) {
     key: 0,
     color: _ctx.badgeColor
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.badge), 1)];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.badge), 1)]),
     _: 1
   }, 8, ["color"])) : _createCommentVNode("", true)], 2)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 16);
 }
@@ -38,12 +34,12 @@ import f7Badge from './badge';
 import f7UseIcon from './use-icon';
 export default {
   name: 'f7-link',
-  render: render,
+  render,
   components: {
-    f7Badge: f7Badge,
-    f7UseIcon: f7UseIcon
+    f7Badge,
+    f7UseIcon
   },
-  props: _extends({
+  props: {
     noLinkClass: Boolean,
     text: String,
     tabLink: [Boolean, String],
@@ -60,48 +56,58 @@ export default {
     tooltip: String,
     tooltipTrigger: String,
     smartSelect: Boolean,
-    smartSelectParams: Object
-  }, iconProps, colorProps, actionsProps, routerProps),
-  setup: function setup(props, _ref) {
-    var slots = _ref.slots;
-    var elRef = ref(null);
-    var f7SmartSelect = null;
+    smartSelectParams: Object,
+    ...iconProps,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
+
+  setup(props, {
+    slots
+  }) {
+    const elRef = ref(null);
+    let f7SmartSelect = null;
     useTooltip(elRef, props);
     useRouteProps(elRef, props);
-    useSmartSelect(props, function (instance) {
+    useSmartSelect(props, instance => {
       f7SmartSelect = instance;
-    }, function () {
+    }, () => {
       return elRef.value;
     });
-    var TabbarContext = inject('TabbarContext', {
+    const TabbarContext = inject('TabbarContext', {
       value: {}
     });
-    var isTabbarLabel = computed(function () {
-      return props.tabbarLabel || TabbarContext.value.tabbarHasLabels;
-    });
-    var attrs = computed(function () {
-      var href = props.href,
-          tabLink = props.tabLink,
-          target = props.target;
-      var hrefComputed = href;
+    const isTabbarLabel = computed(() => props.tabbarLabel || TabbarContext.value.tabbarHasLabels);
+    const attrs = computed(() => {
+      const {
+        href,
+        tabLink,
+        target
+      } = props;
+      let hrefComputed = href;
       if (href === true) hrefComputed = '#';
       if (href === false) hrefComputed = undefined; // no href attribute
 
-      return _extends({
+      return {
         href: hrefComputed,
-        target: target,
-        'data-tab': isStringProp(tabLink) && tabLink || undefined
-      }, routerAttrs(props), actionsAttrs(props));
+        target,
+        'data-tab': isStringProp(tabLink) && tabLink || undefined,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
     });
-    var classes = computed(function () {
-      var iconOnly = props.iconOnly,
-          text = props.text,
-          noLinkClass = props.noLinkClass,
-          tabLink = props.tabLink,
-          tabLinkActive = props.tabLinkActive,
-          smartSelect = props.smartSelect;
-      var iconOnlyComputed;
-      var hasChildren = slots && slots.default;
+    const classes = computed(() => {
+      const {
+        iconOnly,
+        text,
+        noLinkClass,
+        tabLink,
+        tabLinkActive,
+        smartSelect
+      } = props;
+      let iconOnlyComputed;
+      const hasChildren = slots && slots.default;
 
       if (iconOnly || !text && !hasChildren) {
         iconOnlyComputed = true;
@@ -117,16 +123,15 @@ export default {
         'smart-select': smartSelect
       }, colorClasses(props), routerClasses(props), actionsClasses(props));
     });
-    var icon = computed(function () {
-      return useIcon(props);
-    });
+    const icon = computed(() => useIcon(props));
     return {
-      elRef: elRef,
-      icon: icon,
-      isTabbarLabel: isTabbarLabel,
-      attrs: attrs,
-      classes: classes,
-      f7SmartSelect: f7SmartSelect
+      elRef,
+      icon,
+      isTabbarLabel,
+      attrs,
+      classes,
+      f7SmartSelect
     };
   }
+
 };