framework7-vue 6.3.5 → 7.0.0-beta.10

package/components/button.js

@@ -0,0 +1,198 @@
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, renderSlot as _renderSlot, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 1
+};
+const _hoisted_2 = {
+  key: 1
+};
+
+function render(_ctx, _cache) {
+  const _component_f7_preloader = _resolveComponent("f7-preloader");
+
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
+    ref: "elRef",
+    class: _ctx.classesComputed
+  }, _ctx.attrs), {
+    default: _withCtx(() => [_ctx.preloader ? (_openBlock(), _createBlock(_Fragment, {
+      key: 0
+    }, [_createVNode(_component_f7_preloader, {
+      size: _ctx.preloaderSize,
+      color: _ctx.preloaderColor
+    }, null, 8, ["size", "color"]), _createVNode("span", null, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createBlock("span", _hoisted_1, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")])], 64)) : (_openBlock(), _createBlock(_Fragment, {
+      key: 1
+    }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 64))]),
+    _: 3
+  }, 16, ["class"]);
+}
+
+import { ref, computed } from 'vue';
+import { classNames, extend, isStringProp } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses, iconProps, colorProps, actionsProps, routerProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import f7Preloader from './preloader.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-button',
+  render,
+  components: {
+    f7Preloader,
+    f7UseIcon
+  },
+  props: {
+    text: String,
+    tabLink: [Boolean, String],
+    tabLinkActive: Boolean,
+    type: String,
+    href: {
+      type: [String, Boolean],
+      default: '#'
+    },
+    target: String,
+    round: Boolean,
+    roundMd: Boolean,
+    roundIos: Boolean,
+    roundAurora: Boolean,
+    fill: Boolean,
+    fillMd: Boolean,
+    fillIos: Boolean,
+    fillAurora: Boolean,
+    large: Boolean,
+    largeMd: Boolean,
+    largeIos: Boolean,
+    largeAurora: Boolean,
+    small: Boolean,
+    smallMd: Boolean,
+    smallIos: Boolean,
+    smallAurora: Boolean,
+    raised: Boolean,
+    raisedMd: Boolean,
+    raisedIos: Boolean,
+    raisedAurora: Boolean,
+    outline: Boolean,
+    outlineMd: Boolean,
+    outlineIos: Boolean,
+    outlineAurora: Boolean,
+    active: Boolean,
+    disabled: Boolean,
+    tooltip: String,
+    tooltipTrigger: String,
+    preloader: Boolean,
+    preloaderSize: [Number, String],
+    preloaderColor: String,
+    loading: Boolean,
+    ...iconProps,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
+    useTooltip(elRef, props);
+    useRouteProps(elRef, props);
+    const icon = computed(() => useIcon(props));
+    const tag = computed(() => props.type === 'submit' || props.type === 'reset' || props.type === 'button' ? 'button' : 'a');
+    const attrs = computed(() => {
+      const {
+        href,
+        tabLink,
+        target,
+        type
+      } = props;
+      let hrefComputed = href;
+      if (href === true) hrefComputed = '#';
+      if (href === false || tag.value === 'button') hrefComputed = undefined; // no href attribute
+
+      return extend({
+        href: hrefComputed,
+        target,
+        type,
+        'data-tab': isStringProp(tabLink) && tabLink || undefined
+      }, routerAttrs(props), actionsAttrs(props));
+    });
+    const classesComputed = computed(() => {
+      const {
+        tabLink,
+        tabLinkActive,
+        round,
+        roundMd,
+        roundIos,
+        roundAurora,
+        fill,
+        fillMd,
+        fillIos,
+        fillAurora,
+        large,
+        largeMd,
+        largeIos,
+        largeAurora,
+        small,
+        smallMd,
+        smallIos,
+        smallAurora,
+        raised,
+        raisedMd,
+        raisedIos,
+        raisedAurora,
+        outline,
+        outlineMd,
+        outlineIos,
+        outlineAurora,
+        active,
+        disabled,
+        preloader,
+        loading
+      } = props;
+      return classNames('button', {
+        'tab-link': tabLink || tabLink === '',
+        'tab-link-active': tabLinkActive,
+        'button-round': round,
+        'button-round-ios': roundIos,
+        'button-round-aurora': roundAurora,
+        'button-round-md': roundMd,
+        'button-fill': fill,
+        'button-fill-ios': fillIos,
+        'button-fill-aurora': fillAurora,
+        'button-fill-md': fillMd,
+        'button-large': large,
+        'button-large-ios': largeIos,
+        'button-large-aurora': largeAurora,
+        'button-large-md': largeMd,
+        'button-small': small,
+        'button-small-ios': smallIos,
+        'button-small-aurora': smallAurora,
+        'button-small-md': smallMd,
+        'button-raised': raised,
+        'button-raised-ios': raisedIos,
+        'button-raised-aurora': raisedAurora,
+        'button-raised-md': raisedMd,
+        'button-active': active,
+        'button-outline': outline,
+        'button-outline-ios': outlineIos,
+        'button-outline-aurora': outlineAurora,
+        'button-outline-md': outlineMd,
+        'button-preloader': preloader,
+        'button-loading': loading,
+        disabled
+      }, colorClasses(props), routerClasses(props), actionsClasses(props));
+    });
+    return {
+      tag,
+      elRef,
+      attrs,
+      classesComputed,
+      icon
+    };
+  }
+
+};

package/components/card-content.js

@@ -0,0 +1,32 @@
+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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-card-content',
+  render,
+  props: {
+    padding: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('card-content', {
+      'card-content-padding': props.padding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/card-footer.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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-card-footer',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('card-footer', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/card-header.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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-card-header',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('card-header', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/card.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 { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
 
 function render(_ctx, _cache) {
-  var _component_f7_card_header = _resolveComponent("f7-card-header");
+  const _component_f7_card_header = _resolveComponent("f7-card-header");
 
-  var _component_f7_card_content = _resolveComponent("f7-card-content");
+  const _component_f7_card_content = _resolveComponent("f7-card-content");
 
-  var _component_f7_card_footer = _resolveComponent("f7-card-footer");
+  const _component_f7_card_footer = _resolveComponent("f7-card-footer");
 
   return _openBlock(), _createBlock("div", {
     ref: "elRef",
@@ -24,44 +22,38 @@ function render(_ctx, _cache) {
   }, [_ctx.hasHeader ? (_openBlock(), _createBlock(_component_f7_card_header, {
     key: 0
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.title) + " ", 1), _renderSlot(_ctx.$slots, "header")];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.title) + " ", 1), _renderSlot(_ctx.$slots, "header")]),
     _: 3
   })) : _createCommentVNode("", true), _ctx.hasContent ? (_openBlock(), _createBlock(_component_f7_card_content, {
     key: 1,
     padding: _ctx.padding
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.content) + " ", 1), _renderSlot(_ctx.$slots, "content")];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.content) + " ", 1), _renderSlot(_ctx.$slots, "content")]),
     _: 3
   }, 8, ["padding"])) : _createCommentVNode("", true), _ctx.hasFooter ? (_openBlock(), _createBlock(_component_f7_card_footer, {
     key: 2
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")]),
     _: 3
   })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 10, ["data-animate", "data-hide-navbar-on-open", "data-hide-toolbar-on-open", "data-hide-statusbar-on-open", "data-scrollable-el", "data-swipe-to-close", "data-close-by-backdrop-click", "data-backdrop", "data-backdrop-el"]);
 }
 
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7, f7ready } from '../shared/f7';
-import f7CardHeader from './card-header';
-import f7CardContent from './card-content';
-import f7CardFooter from './card-footer';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
+import f7CardHeader from './card-header.js';
+import f7CardContent from './card-content.js';
+import f7CardFooter from './card-footer.js';
 export default {
   name: 'f7-card',
-  render: render,
+  render,
   components: {
-    f7CardHeader: f7CardHeader,
-    f7CardContent: f7CardContent,
-    f7CardFooter: f7CardFooter
+    f7CardHeader,
+    f7CardContent,
+    f7CardFooter
   },
-  props: _extends({
+  props: {
     title: [String, Number],
     content: [String, Number],
     footer: [String, Number],
@@ -110,54 +102,57 @@ export default {
     padding: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['card:beforeopen', 'card:open', 'card:opened', 'card:close', 'card:closed', 'update:expandableOpened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var elRef = ref(null);
 
-    var open = function open() {
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const elRef = ref(null);
+
+    const open = () => {
       if (!elRef.value) return;
       f7.card.open(elRef.value);
     };
 
-    var close = function close() {
+    const close = () => {
       if (!elRef.value) return;
       f7.card.close(elRef.value);
     };
 
-    var onBeforeOpen = function onBeforeOpen(el, prevent) {
+    const onBeforeOpen = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('card:beforeopen', el, prevent);
     };
 
-    var onOpen = function onOpen(el) {
+    const onOpen = el => {
       if (elRef.value !== el) return;
       emit('card:open', el);
       emit('update:expandableOpened', true);
     };
 
-    var onOpened = function onOpened(el, pageEl) {
+    const onOpened = (el, pageEl) => {
       if (elRef.value !== el) return;
       emit('card:opened', el, pageEl);
     };
 
-    var onClose = function onClose(el) {
+    const onClose = el => {
       if (elRef.value !== el) return;
       emit('card:close', el);
     };
 
-    var onClosed = function onClosed(el, pageEl) {
+    const onClosed = (el, pageEl) => {
       if (elRef.value !== el) return;
       emit('card:closed', el, pageEl);
       emit('update:expandableOpened', false);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (!props.expandable || !elRef.value) return;
-      f7ready(function () {
+      f7ready(() => {
         if (props.expandable && props.expandableOpened) {
           f7.card.open(elRef.value, false);
         }
@@ -169,46 +164,37 @@ export default {
         f7.on('cardClosed', onClosed);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       f7.off('cardBeforeOpen', onBeforeOpen);
       f7.off('cardOpen', onOpen);
       f7.off('cardOpened', onOpened);
       f7.off('cardClose', onClose);
       f7.off('cardClosed', onClosed);
     });
-    watch(function () {
-      return props.expandableOpened;
-    }, function (value) {
+    watch(() => props.expandableOpened, value => {
       if (value) {
         open();
       } else {
         close();
       }
     });
-    var hasHeader = computed(function () {
-      return props.title || slots.header;
-    });
-    var hasContent = computed(function () {
-      return props.content || slots.content;
-    });
-    var hasFooter = computed(function () {
-      return props.footer || slots.footer;
-    });
-    var classes = computed(function () {
-      return classNames('card', {
-        'card-outline': props.outline,
-        'card-expandable': props.expandable,
-        'card-expandable-animate-width': props.expandableAnimateWidth,
-        'no-shadow': props.noShadow,
-        'no-border': props.noBorder
-      }, colorClasses(props));
-    });
+    const hasHeader = computed(() => props.title || slots.header);
+    const hasContent = computed(() => props.content || slots.content);
+    const hasFooter = computed(() => props.footer || slots.footer);
+    const classes = computed(() => classNames('card', {
+      'card-outline': props.outline,
+      'card-expandable': props.expandable,
+      'card-expandable-animate-width': props.expandableAnimateWidth,
+      'no-shadow': props.noShadow,
+      'no-border': props.noBorder
+    }, colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes,
-      hasHeader: hasHeader,
-      hasContent: hasContent,
-      hasFooter: hasFooter
+      elRef,
+      classes,
+      hasHeader,
+      hasContent,
+      hasFooter
     };
   }
+
 };

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,19 +15,17 @@ 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);
 }
 
 import { ref, computed, onMounted, watch } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
 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
     };
   }
+
 };