framework7-vue 6.3.15 → 7.0.0-beta.11

package/{esm/components → components}/list-item.js

@@ -1,80 +1,79 @@
-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, h, onMounted, onBeforeUnmount, watch, inject } from 'vue';
-import { classNames, isStringProp } from '../shared/utils';
-import { colorClasses, colorProps, actionsProps, actionsAttrs, actionsClasses, routerProps, routerAttrs, routerClasses } from '../shared/mixins';
-import { useRouteProps } from '../shared/use-route-props';
-import { useSmartSelect } from '../shared/use-smart-select';
-import { useTooltip } from '../shared/use-tooltip';
-import { f7ready, f7 } from '../shared/f7';
-import f7Badge from './badge';
-
-var ListItemContent = function ListItemContent(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      props = _ref.props,
-      slots = _ref.slots,
-      inputElRef = _ref.inputElRef,
-      onChange = _ref.onChange,
-      onClick = _ref.onClick,
-      isMediaComputed = _ref.isMediaComputed,
-      isSortableComputed = _ref.isSortableComputed,
-      isSortableOppositeComputed = _ref.isSortableOppositeComputed,
-      itemContentClasses = _ref.itemContentClasses;
-
-  var radio = props.radio,
-      checkbox = props.checkbox,
-      value = props.value,
-      name = props.name,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      checked = props.checked,
-      required = props.required,
-      media = props.media,
-      header = props.header,
-      footer = props.footer,
-      title = props.title,
-      subtitle = props.subtitle,
-      text = props.text,
-      after = props.after,
-      badge = props.badge,
-      badgeColor = props.badgeColor,
-      swipeout = props.swipeout,
-      sortable = props.sortable,
-      accordionItem = props.accordionItem;
-  var titleEl;
-  var afterWrapEl;
-  var afterEl;
-  var badgeEl;
-  var innerEl;
-  var titleRowEl;
-  var subtitleEl;
-  var textEl;
-  var mediaEl;
-  var inputEl;
-  var inputIconEl;
-  var headerEl;
-  var footerEl; // Input
+import { classNames, isStringProp } from '../shared/utils.js';
+import { colorClasses, colorProps, actionsProps, actionsAttrs, actionsClasses, routerProps, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import f7Badge from './badge.js';
+
+const ListItemContent = ({
+  props,
+  slots,
+  inputElRef,
+  onChange,
+  onClick,
+  isMediaComputed,
+  isSortableComputed,
+  isSortableOppositeComputed,
+  itemContentClasses
+} = {}) => {
+  const {
+    radio,
+    checkbox,
+    value,
+    name,
+    readonly,
+    disabled,
+    checked,
+    required,
+    media,
+    header,
+    footer,
+    title,
+    subtitle,
+    text,
+    after,
+    badge,
+    badgeColor,
+    swipeout,
+    sortable,
+    accordionItem
+  } = props;
+  let titleEl;
+  let afterWrapEl;
+  let afterEl;
+  let badgeEl;
+  let innerEl;
+  let titleRowEl;
+  let subtitleEl;
+  let textEl;
+  let mediaEl;
+  let inputEl;
+  let inputIconEl;
+  let headerEl;
+  let footerEl; // Input
 
   if (radio || checkbox) {
     inputEl = h('input', {
       ref: inputElRef,
-      value: value,
-      name: name,
-      checked: checked,
-      readonly: readonly,
-      disabled: disabled,
-      required: required,
+      value,
+      name,
+      checked,
+      readonly,
+      disabled,
+      required,
       type: radio ? 'radio' : 'checkbox',
-      onChange: onChange
+      onChange
     });
     inputIconEl = h('i', {
-      class: "icon icon-" + (radio ? 'radio' : 'checkbox')
+      class: `icon icon-${radio ? 'radio' : 'checkbox'}`
     });
   } // Media
 
 
   if (media || slots.media) {
-    var mediaImgEl;
+    let mediaImgEl;
 
     if (media) {
       mediaImgEl = h('img', {
@@ -126,9 +125,7 @@ var ListItemContent = function ListItemContent(_temp) {
     if (badge) {
       badgeEl = h(f7Badge, {
         color: badgeColor
-      }, function () {
-        return badge;
-      });
+      }, () => badge);
     }
 
     afterWrapEl = h('div', {
@@ -149,10 +146,10 @@ var ListItemContent = function ListItemContent(_temp) {
     }, [slots['inner-start'] && slots['inner-start'](), slots['before-title'] && slots['before-title'](), titleEl, slots['after-title'] && slots['after-title'](), afterWrapEl, swipeout || accordionItem ? null : slots.default && slots.default(), slots.inner && slots.inner(), slots['inner-end'] && slots['inner-end']()]);
   }
 
-  var ItemContentTag = checkbox || radio ? 'label' : 'div';
+  const ItemContentTag = checkbox || radio ? 'label' : 'div';
   return h(ItemContentTag, {
     class: itemContentClasses.value,
-    onClick: onClick
+    onClick
   }, [isSortableComputed.value && sortable !== false && isSortableOppositeComputed.value && h('div', {
     class: 'sortable-handler'
   }), slots['content-start'] && slots['content-start'](), inputEl, inputIconEl, mediaEl, innerEl, slots.content && slots.content(), slots['content-end'] && slots['content-end']()]);
@@ -160,7 +157,7 @@ var ListItemContent = function ListItemContent(_temp) {
 
 export default {
   name: 'f7-list-item',
-  props: _extends({
+  props: {
     title: [String, Number],
     text: [String, Number],
     media: String,
@@ -215,13 +212,18 @@ export default {
     readonly: Boolean,
     required: Boolean,
     disabled: Boolean,
-    virtualListIndex: Number
-  }, colorProps, actionsProps, routerProps),
+    virtualListIndex: Number,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
   emits: ['click', 'swipeout', 'swipeout:overswipeenter', 'swipeout:overswipeexit', 'swipeout:deleted', 'swipeout:delete', 'swipeout:close', 'swipeout:closed', 'swipeout:open', 'swipeout:opened', 'accordion:beforeclose', 'accordion:close', 'accordion:closed', 'accordion:beforeopen', 'accordion:open', 'accordion:opened', 'change', 'update:checked'],
-  setup: function setup(props, _ref2) {
-    var slots = _ref2.slots,
-        emit = _ref2.emit;
-    var ListContext = inject('ListContext', {
+
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const ListContext = inject('ListContext', {
       value: {
         listIsMedia: false,
         listIsSortable: false,
@@ -229,116 +231,104 @@ export default {
         listIsSimple: false
       }
     });
-    var listIsMedia = computed(function () {
-      return ListContext.value.listIsMedia || false;
-    });
-    var listIsSortable = computed(function () {
-      return ListContext.value.listIsSortable || false;
-    });
-    var listIsSortableOpposite = computed(function () {
-      return ListContext.value.listIsSortableOpposite || false;
-    });
-    var listIsSimple = computed(function () {
-      return ListContext.value.listIsSimple || false;
-    });
-    var elRef = ref(null);
-    var linkElRef = ref(null);
-    var inputElRef = ref(null);
-
-    var onClick = function onClick(event) {
+    const listIsMedia = computed(() => ListContext.value.listIsMedia || false);
+    const listIsSortable = computed(() => ListContext.value.listIsSortable || false);
+    const listIsSortableOpposite = computed(() => ListContext.value.listIsSortableOpposite || false);
+    const listIsSimple = computed(() => ListContext.value.listIsSimple || false);
+    const elRef = ref(null);
+    const linkElRef = ref(null);
+    const inputElRef = ref(null);
+
+    const onClick = event => {
       if (event.target.tagName.toLowerCase() !== 'input') {
         emit('click', event);
       }
     };
 
-    var onSwipeoutOverswipeEnter = function onSwipeoutOverswipeEnter(el) {
+    const onSwipeoutOverswipeEnter = el => {
       if (elRef.value !== el) return;
       emit('swipeout:overswipeenter');
     };
 
-    var onSwipeoutOverswipeExit = function onSwipeoutOverswipeExit(el) {
+    const onSwipeoutOverswipeExit = el => {
       if (elRef.value !== el) return;
       emit('swipeout:overswipeexit');
     };
 
-    var onSwipeoutDeleted = function onSwipeoutDeleted(el) {
+    const onSwipeoutDeleted = el => {
       if (elRef.value !== el) return;
       emit('swipeout:deleted');
     };
 
-    var onSwipeoutDelete = function onSwipeoutDelete(el) {
+    const onSwipeoutDelete = el => {
       if (elRef.value !== el) return;
       emit('swipeout:delete');
     };
 
-    var onSwipeoutClose = function onSwipeoutClose(el) {
+    const onSwipeoutClose = el => {
       if (elRef.value !== el) return;
       emit('swipeout:close');
     };
 
-    var onSwipeoutClosed = function onSwipeoutClosed(el) {
+    const onSwipeoutClosed = el => {
       if (elRef.value !== el) return;
       emit('swipeout:closed');
     };
 
-    var onSwipeoutOpen = function onSwipeoutOpen(el) {
+    const onSwipeoutOpen = el => {
       if (elRef.value !== el) return;
       emit('swipeout:open');
     };
 
-    var onSwipeoutOpened = function onSwipeoutOpened(el) {
+    const onSwipeoutOpened = el => {
       if (elRef.value !== el) return;
       emit('swipeout:opened');
     };
 
-    var onSwipeout = function onSwipeout(el, progress) {
+    const onSwipeout = (el, progress) => {
       if (elRef.value !== el) return;
       emit('swipeout', progress);
     };
 
-    var onAccBeforeClose = function onAccBeforeClose(el, prevent) {
+    const onAccBeforeClose = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('accordion:beforeclose', prevent);
     };
 
-    var onAccClose = function onAccClose(el) {
+    const onAccClose = el => {
       if (elRef.value !== el) return;
       emit('accordion:close');
     };
 
-    var onAccClosed = function onAccClosed(el) {
+    const onAccClosed = el => {
       if (elRef.value !== el) return;
       emit('accordion:closed');
     };
 
-    var onAccBeforeOpen = function onAccBeforeOpen(el, prevent) {
+    const onAccBeforeOpen = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('accordion:beforeopen', prevent);
     };
 
-    var onAccOpen = function onAccOpen(el) {
+    const onAccOpen = el => {
       if (elRef.value !== el) return;
       emit('accordion:open');
     };
 
-    var onAccOpened = function onAccOpened(el) {
+    const onAccOpened = el => {
       if (elRef.value !== el) return;
       emit('accordion:opened');
     };
 
-    var onChange = function onChange(event) {
+    const onChange = event => {
       emit('change', event);
       emit('update:checked', event.target.checked);
     };
 
     useTooltip(elRef, props);
     useRouteProps(linkElRef, props);
-    useSmartSelect(props, function () {}, function () {
-      return elRef.value.querySelector('a.smart-select');
-    });
-    watch(function () {
-      return props.swipeoutOpened;
-    }, function (newValue) {
+    useSmartSelect(props, () => {}, () => elRef.value.querySelector('a.smart-select'));
+    watch(() => props.swipeoutOpened, newValue => {
       if (!props.swipeout || !elRef.value || !f7) return;
 
       if (newValue) {
@@ -347,8 +337,8 @@ export default {
         f7.swipeout.close(elRef.value);
       }
     });
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         if (props.swipeout) {
           f7.on('swipeoutOpen', onSwipeoutOpen);
           f7.on('swipeoutOpened', onSwipeoutOpened);
@@ -379,7 +369,7 @@ export default {
         inputElRef.value.indeterminate = !!props.indeterminate;
       }
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (!f7) return;
       f7.off('swipeoutOpen', onSwipeoutOpen);
       f7.off('swipeoutOpened', onSwipeoutOpened);
@@ -397,85 +387,71 @@ export default {
       f7.off('accordionClose', onAccClose);
       f7.off('accordionClosed', onAccClosed);
     });
-    watch(function () {
-      return props.indeterminate;
-    }, function (newValue) {
+    watch(() => props.indeterminate, newValue => {
       if (inputElRef.value) {
         inputElRef.value.indeterminate = !!newValue;
       }
     });
-    var isMediaComputed = computed(function () {
-      return props.mediaItem || props.mediaList || listIsMedia.value;
-    });
-    var isSortableComputed = computed(function () {
-      return props.sortable === true || props.sortable === false ? props.sortable : listIsSortable.value;
-    });
-    var isSortableOppositeComputed = computed(function () {
-      return isSortableComputed.value && (props.sortableOpposite || listIsSortableOpposite.value);
-    });
-    var linkAttrs = computed(function () {
-      return _extends({
-        href: props.link === true ? '' : props.link || props.href,
-        target: props.target,
-        'data-tab': isStringProp(props.tabLink) && props.tabLink || undefined
-      }, routerAttrs(props), actionsAttrs(props));
-    });
-    var linkClasses = computed(function () {
-      return classNames({
-        'item-link': true,
-        'smart-select': props.smartSelect,
-        'tab-link': props.tabLink || props.tabLink === '',
-        'tab-link-active': props.tabLinkActive,
-        'item-selected': props.selected
-      }, routerClasses(props), actionsClasses(props));
-    });
-    var itemContentClasses = computed(function () {
-      return classNames('item-content', {
-        'item-checkbox': props.checkbox,
-        'item-radio': props.radio,
-        'item-radio-icon-start': props.radio && props.radioIcon === 'start',
-        'item-radio-icon-end': props.radio && props.radioIcon === 'end'
-      }, colorClasses(props));
-    });
-    var liClasses = computed(function () {
-      return classNames({
-        'item-divider': props.divider,
-        'list-group-title': props.groupTitle,
-        'media-item': isMediaComputed.value,
-        swipeout: props.swipeout,
-        'accordion-item': props.accordionItem,
-        'accordion-item-opened': props.accordionItemOpened,
-        disabled: props.disabled && !(props.radio || props.checkbox),
-        'no-chevron': props.noChevron,
-        'chevron-center': props.chevronCenter,
-        'disallow-sorting': props.sortable === false
-      }, colorClasses(props));
-    });
-    return function () {
-      var linkEl;
-      var itemContentEl;
+    const isMediaComputed = computed(() => props.mediaItem || props.mediaList || listIsMedia.value);
+    const isSortableComputed = computed(() => props.sortable === true || props.sortable === false ? props.sortable : listIsSortable.value);
+    const isSortableOppositeComputed = computed(() => isSortableComputed.value && (props.sortableOpposite || listIsSortableOpposite.value));
+    const linkAttrs = computed(() => ({
+      href: props.link === true ? '' : props.link || props.href,
+      target: props.target,
+      'data-tab': isStringProp(props.tabLink) && props.tabLink || undefined,
+      ...routerAttrs(props),
+      ...actionsAttrs(props)
+    }));
+    const linkClasses = computed(() => classNames({
+      'item-link': true,
+      'smart-select': props.smartSelect,
+      'tab-link': props.tabLink || props.tabLink === '',
+      'tab-link-active': props.tabLinkActive,
+      'item-selected': props.selected
+    }, routerClasses(props), actionsClasses(props)));
+    const itemContentClasses = computed(() => classNames('item-content', {
+      'item-checkbox': props.checkbox,
+      'item-radio': props.radio,
+      'item-radio-icon-start': props.radio && props.radioIcon === 'start',
+      'item-radio-icon-end': props.radio && props.radioIcon === 'end'
+    }, colorClasses(props)));
+    const liClasses = computed(() => classNames({
+      'item-divider': props.divider,
+      'list-group-title': props.groupTitle,
+      'media-item': isMediaComputed.value,
+      swipeout: props.swipeout,
+      'accordion-item': props.accordionItem,
+      'accordion-item-opened': props.accordionItemOpened,
+      disabled: props.disabled && !(props.radio || props.checkbox),
+      'no-chevron': props.noChevron,
+      'chevron-center': props.chevronCenter,
+      'disallow-sorting': props.sortable === false
+    }, colorClasses(props)));
+    return () => {
+      let linkEl;
+      let itemContentEl;
 
       if (!listIsSimple.value) {
         // Item Content
         itemContentEl = ListItemContent({
-          props: props,
-          slots: slots,
-          inputElRef: inputElRef,
-          onChange: onChange,
+          props,
+          slots,
+          inputElRef,
+          onChange,
           onClick: props.link || props.href || props.accordionItem || props.smartSelect ? undefined : onClick,
-          isMediaComputed: isMediaComputed,
-          isSortableComputed: isSortableComputed,
-          isSortableOppositeComputed: isSortableOppositeComputed,
-          itemContentClasses: itemContentClasses
+          isMediaComputed,
+          isSortableComputed,
+          isSortableOppositeComputed,
+          itemContentClasses
         }); // Link
 
         if (props.link || props.href || props.accordionItem || props.smartSelect) {
-          linkEl = h('a', _extends({
+          linkEl = h('a', {
             ref: linkElRef,
-            class: linkClasses.value
-          }, linkAttrs.value, {
-            onClick: onClick
-          }), [itemContentEl]);
+            class: linkClasses.value,
+            ...linkAttrs.value,
+            onClick
+          }, [itemContentEl]);
         }
       }
 
@@ -484,7 +460,7 @@ export default {
           ref: elRef,
           class: liClasses.value,
           'data-virtual-list-index': props.virtualListIndex,
-          onClick: onClick
+          onClick
         }, [props.title, slots.default && slots.default()]);
       }
 
@@ -492,12 +468,12 @@ export default {
         return h('li', {
           ref: elRef,
           class: liClasses.value,
-          onClick: onClick,
+          onClick,
           'data-virtual-list-index': props.virtualListIndex
         }, [props.title, slots.default && slots.default()]);
       }
 
-      var linkItemEl = props.link || props.href || props.smartSelect || props.accordionItem ? linkEl : itemContentEl;
+      const linkItemEl = props.link || props.href || props.smartSelect || props.accordionItem ? linkEl : itemContentEl;
       return h('li', {
         ref: elRef,
         class: liClasses.value,
@@ -509,4 +485,5 @@ export default {
       }), (props.swipeout || props.accordionItem) && slots.default(), slots.root && slots.root(), slots['root-end'] && slots['root-end']()]);
     };
   }
+
 };