framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/list-button.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, mergeProps as _mergeProps, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
 function render(_ctx, _cache) {
@@ -7,9 +5,7 @@ function render(_ctx, _cache) {
     ref: "linkElRef",
     class: _ctx.linkClasses
   }, _ctx.linkAttrs, {
-    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))
   }), [_createTextVNode(_toDisplayString(_ctx.title) + " " + _toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "default")], 16)]);
 }
 
@@ -20,8 +16,8 @@ import { useTooltip } from '../shared/use-tooltip';
 import { useRouteProps } from '../shared/use-route-props';
 export default {
   name: 'f7-list-button',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     title: [String, Number],
     text: [String, Number],
     tabLink: [Boolean, String],
@@ -30,38 +26,49 @@ export default {
     href: [Boolean, String],
     target: String,
     tooltip: String,
-    tooltipTrigger: String
-  }, colorProps, actionsProps, routerProps),
+    tooltipTrigger: String,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
   emits: ['click'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var linkElRef = ref(null);
 
-    var onClick = function onClick(e) {
+  setup(props, {
+    emit
+  }) {
+    const linkElRef = ref(null);
+
+    const onClick = e => {
       emit('click', e);
     };
 
     useTooltip(linkElRef, props);
     useRouteProps(linkElRef, props);
-    var linkAttrs = computed(function () {
-      return _extends({
+    const linkAttrs = computed(() => {
+      return {
         href: typeof props.link === 'boolean' && typeof props.href === 'boolean' ? '#' : props.link || props.href,
         target: props.target,
-        'data-tab': isStringProp(props.tabLink) && props.tabLink
-      }, routerAttrs(props), actionsAttrs(props));
+        'data-tab': isStringProp(props.tabLink) && props.tabLink,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
     });
-    var linkClasses = computed(function () {
-      return classNames(_extends({
+    const linkClasses = computed(() => {
+      return classNames({
         'list-button': true,
         'tab-link': props.tabLink || props.tabLink === '',
-        'tab-link-active': props.tabLinkActive
-      }, colorClasses(props), routerClasses(props), actionsClasses(props)));
+        'tab-link-active': props.tabLinkActive,
+        ...colorClasses(props),
+        ...routerClasses(props),
+        ...actionsClasses(props)
+      });
     });
     return {
-      linkAttrs: linkAttrs,
-      linkClasses: linkClasses,
-      onClick: onClick,
-      linkElRef: linkElRef
+      linkAttrs,
+      linkClasses,
+      onClick,
+      linkElRef
     };
   }
+
 };

package/components/list-group.js

@@ -0,0 +1,56 @@
+import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes,
+    "data-sortable-move-elements": typeof _ctx.sortableMoveElements !== 'undefined' ? _ctx.sortableMoveElements.toString() : undefined
+  }, [_createVNode("ul", null, [_renderSlot(_ctx.$slots, "default")])], 10, ["data-sortable-move-elements"]);
+}
+
+import { computed, provide, inject } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-list-group',
+  render,
+  props: {
+    mediaList: Boolean,
+    simpleList: Boolean,
+    sortable: Boolean,
+    sortableOpposite: Boolean,
+    sortableTapHold: Boolean,
+    sortableMoveElements: {
+      type: Boolean,
+      default: undefined
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const ListContextParent = inject('ListContext', {
+      value: {
+        listIsMedia: props.mediaList,
+        listIsSimple: props.simpleList,
+        listIsSortable: props.sortable,
+        listIsSortableOpposite: props.sortableOpposite
+      }
+    });
+    const ListContext = computed(() => ({
+      listIsMedia: props.mediaList || ListContextParent.value.listIsMedia,
+      listIsSimple: props.simpleList || ListContextParent.value.listIsSimple,
+      listIsSortable: props.sortable || ListContextParent.value.listIsSortable,
+      listIsSortableOpposite: props.sortableOpposite || ListContextParent.value.listIsSortableOpposite
+    }));
+    provide('ListContext', ListContext);
+    const classes = computed(() => classNames('list-group', {
+      'media-list': props.mediaList,
+      sortable: props.sortable,
+      'sortable-tap-hold': props.sortableTapHold,
+      'sortable-opposite': props.sortableOpposite
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/list-index.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) {
@@ -15,8 +13,8 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { f7ready, f7 } from '../shared/f7';
 export default {
   name: 'f7-list-index',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     init: {
       type: Boolean,
       default: true
@@ -45,34 +43,35 @@ export default {
     auroraItemHeight: {
       type: Number,
       default: 14
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['listindex:select'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7ListIndex = null;
-    var elRef = ref(null);
 
-    var update = function update() {
+  setup(props, {
+    emit
+  }) {
+    let f7ListIndex = null;
+    const elRef = ref(null);
+
+    const update = () => {
       if (!f7ListIndex) return;
       f7ListIndex.update();
     };
 
-    var scrollListToIndex = function scrollListToIndex(indexContent) {
+    const scrollListToIndex = indexContent => {
       if (!f7ListIndex) return;
       f7ListIndex.scrollListToIndex(indexContent);
     };
 
-    watch(function () {
-      return props.indexes;
-    }, function (newValue) {
+    watch(() => props.indexes, newValue => {
       if (!f7ListIndex) return;
       f7ListIndex.params.indexes = newValue;
       update();
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!props.init) return;
-      f7ready(function () {
+      f7ready(() => {
         f7ListIndex = f7.listIndex.create({
           el: elRef.value,
           listEl: props.listEl,
@@ -83,28 +82,28 @@ export default {
           scrollList: props.scrollList,
           label: props.label,
           on: {
-            select: function select(index, itemContent, itemIndex) {
+            select(index, itemContent, itemIndex) {
               emit('listindex:select', itemContent, itemIndex);
             }
+
           }
         });
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7ListIndex && f7ListIndex.destroy) {
         f7ListIndex.destroy();
       }
 
       f7ListIndex = null;
     });
-    var classes = computed(function () {
-      return classNames('list-index', colorClasses(props));
-    });
+    const classes = computed(() => classNames('list-index', colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes,
-      update: update,
-      scrollListToIndex: scrollListToIndex
+      elRef,
+      classes,
+      update,
+      scrollListToIndex
     };
   }
+
 };

package/{esm/components → components}/list-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, h, ref, onMounted, onBeforeUnmount, watch, inject, onUpdated } from 'vue';
 import { classNames, extend, noUndefinedProps } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -7,7 +5,7 @@ import { f7ready, f7 } from '../shared/f7';
 import f7TextEditor from './text-editor';
 export default {
   name: 'f7-list-input',
-  props: _extends({
+  props: {
     sortable: {
       type: Boolean,
       default: undefined
@@ -82,15 +80,18 @@ export default {
     // Colorpicker
     colorPickerParams: Object,
     // Text editor
-    textEditorParams: Object
-  }, colorProps),
+    textEditorParams: Object,
+    ...colorProps
+  },
   emits: ['textarea:resize', 'input:notempty', 'input:empty', 'input:clear', 'texteditor:change', 'calendar:change', 'colorpicker:change', 'change', 'focus', 'blur', 'input', 'update:value'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var inputInvalid = ref(false);
-    var inputFocused = ref(false);
-    var ListContext = inject('ListContext', {
+
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const inputInvalid = ref(false);
+    const inputFocused = ref(false);
+    const ListContext = inject('ListContext', {
       value: {
         listIsMedia: false,
         listIsSortable: false,
@@ -98,20 +99,20 @@ export default {
         listIsSimple: false
       }
     });
-    var f7Calendar = null;
-    var f7ColorPicker = null;
-    var elRef = ref(null);
-    var inputElRef = ref(null);
-    var itemContentElRef = ref(null);
-    var updateInputOnDidUpdate = false;
-
-    var getDomValue = function getDomValue() {
+    let f7Calendar = null;
+    let f7ColorPicker = null;
+    const elRef = ref(null);
+    const inputElRef = ref(null);
+    const itemContentElRef = 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;
       }
@@ -119,9 +120,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) {
@@ -139,28 +140,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;
@@ -175,21 +172,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(inputElRef.value);
@@ -198,12 +187,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[0]);
@@ -211,9 +196,9 @@ export default {
       }
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (!elRef.value && !itemContentElRef.value) return;
-      f7ready(function () {
+      f7ready(() => {
         if (!inputElRef.value) return;
         inputElRef.value.addEventListener('input:notempty', onInputNotEmpty, false);
         inputElRef.value.addEventListener('textarea:resize', onTextareaResize, false);
@@ -221,33 +206,37 @@ export default {
         inputElRef.value.addEventListener('input:clear', onInputClear, false);
 
         if (props.type === 'datepicker') {
-          f7Calendar = f7.calendar.create(_extends({
+          f7Calendar = f7.calendar.create({
             inputEl: inputElRef.value,
             value: props.value,
             on: {
-              change: function change(calendar, calendarValue) {
+              change(calendar, calendarValue) {
                 emit('update:value', calendarValue);
                 emit('calendar:change', calendarValue);
               }
-            }
-          }, props.calendarParams || {}));
+
+            },
+            ...(props.calendarParams || {})
+          });
         }
 
         if (props.type === 'colorpicker') {
-          f7ColorPicker = f7.colorPicker.create(_extends({
+          f7ColorPicker = f7.colorPicker.create({
             inputEl: inputElRef.value,
             value: props.value,
             on: {
-              change: function change(colorPicker, colorPickerValue) {
+              change(colorPicker, colorPickerValue) {
                 emit('update:value', colorPickerValue);
                 emit('colorpicker:change', colorPickerValue);
               }
-            }
-          }, props.colorPickerParams || {}));
+
+            },
+            ...(props.colorPickerParams || {})
+          });
         }
 
         if (!(props.validateOnBlur || props.validateOnBlur === '') && (props.validate || props.validate === '') && typeof props.value !== 'undefined' && props.value !== null && props.value !== '') {
-          setTimeout(function () {
+          setTimeout(() => {
             validateInput();
           }, 0);
         }
@@ -257,7 +246,7 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (inputElRef.value) {
         inputElRef.value.removeEventListener('input:notempty', onInputNotEmpty, false);
         inputElRef.value.removeEventListener('textarea:resize', onTextareaResize, false);
@@ -275,7 +264,7 @@ export default {
         f7ColorPicker = null;
       }
     });
-    onUpdated(function () {
+    onUpdated(() => {
       if (!f7) return;
 
       if (updateInputOnDidUpdate) {
@@ -291,21 +280,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 (!f7) return;
       updateInputOnDidUpdate = true;
 
@@ -317,39 +300,37 @@ export default {
         f7ColorPicker.setValue(newValue);
       }
     });
-    var isSortableComputed = computed(function () {
-      return props.sortable || ListContext.value.listIsSortable || false;
-    });
+    const isSortableComputed = computed(() => props.sortable === true || props.sortable === false ? props.sortable : ListContext.value.listIsSortable || false);
 
-    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,
@@ -376,23 +357,24 @@ 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]);
     };
 
-    return function () {
-      var inputEl;
+    return () => {
+      let inputEl;
 
       if (props.input) {
         if (props.type === 'select' || props.type === 'textarea' || props.type === 'file') {
@@ -404,22 +386,23 @@ export default {
             inputEl = createInput('textarea');
           }
         } 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');
         }
       }
 
-      var hasErrorMessage = !!props.errorMessage || slots['error-message'];
-      var ItemContent = h('div', {
+      const hasErrorMessage = !!props.errorMessage || slots['error-message'];
+      const ItemContent = h('div', {
         ref: itemContentElRef,
         class: classNames('item-content item-input', !props.wrap && {
           disabled: props.disabled
@@ -464,4 +447,5 @@ export default {
       }), slots.root && slots.root(), slots['root-end'] && slots['root-end']()]);
     };
   }
+
 };

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