framework7-vue 6.3.16 → 7.0.0-beta.12

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,30 +18,28 @@ 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);
 }
 
 import { computed, ref, inject } from 'vue';
-import { classNames, isStringProp } from '../shared/utils';
-import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses, colorProps, actionsProps, routerProps, iconProps } from '../shared/mixins';
-import { useIcon } from '../shared/use-icon';
-import { useRouteProps } from '../shared/use-route-props';
-import { useTooltip } from '../shared/use-tooltip';
-import { useSmartSelect } from '../shared/use-smart-select';
-import f7Badge from './badge';
-import f7UseIcon from './use-icon';
+import { classNames, isStringProp } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses, colorProps, actionsProps, routerProps, iconProps } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
+import f7Badge from './badge.js';
+import f7UseIcon from './use-icon.js';
 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
     };
   }
+
 };

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,21 +5,19 @@ 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)]);
 }
 
 import { computed, ref } from 'vue';
-import { classNames, isStringProp } from '../shared/utils';
-import { colorClasses, colorProps, actionsAttrs, actionsClasses, actionsProps, routerAttrs, routerClasses, routerProps } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
-import { useRouteProps } from '../shared/use-route-props';
+import { classNames, isStringProp } from '../shared/utils.js';
+import { colorClasses, colorProps, actionsAttrs, actionsClasses, actionsProps, routerAttrs, routerClasses, routerProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useRouteProps } from '../shared/use-route-props.js';
 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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+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) {
@@ -10,13 +8,13 @@ function render(_ctx, _cache) {
 }
 
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
 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
     };
   }
+
 };