framework7-vue 6.3.4 → 7.0.0-beta.3

package/cjs/components/button.js

@@ -1,211 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../shared/utils");
-
-var _mixins = require("../shared/mixins");
-
-var _useTooltip = require("../shared/use-tooltip");
-
-var _useIcon = require("../shared/use-icon");
-
-var _useRouteProps = require("../shared/use-route-props");
-
-var _preloader = _interopRequireDefault(require("./preloader"));
-
-var _useIcon2 = _interopRequireDefault(require("./use-icon"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-var _hoisted_1 = {
-  key: 1
-};
-var _hoisted_2 = {
-  key: 1
-};
-
-function render(_ctx, _cache) {
-  var _component_f7_preloader = (0, _vue.resolveComponent)("f7-preloader");
-
-  var _component_f7_use_icon = (0, _vue.resolveComponent)("f7-use-icon");
-
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.tag), (0, _vue.mergeProps)({
-    ref: "elRef",
-    class: _ctx.classesComputed
-  }, _ctx.attrs), {
-    default: (0, _vue.withCtx)(function () {
-      return [_ctx.preloader ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Fragment, {
-        key: 0
-      }, [(0, _vue.createVNode)(_component_f7_preloader, {
-        size: _ctx.preloaderSize,
-        color: _ctx.preloaderColor
-      }, null, 8, ["size", "color"]), (0, _vue.createVNode)("span", null, [_ctx.icon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_f7_use_icon, {
-        key: 0,
-        icon: _ctx.icon
-      }, null, 8, ["icon"])) : (0, _vue.createCommentVNode)("", true), _ctx.text ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("span", _hoisted_1, (0, _vue.toDisplayString)(_ctx.text), 1)) : (0, _vue.createCommentVNode)("", true), (0, _vue.renderSlot)(_ctx.$slots, "default")])], 64)) : ((0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Fragment, {
-        key: 1
-      }, [_ctx.icon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_f7_use_icon, {
-        key: 0,
-        icon: _ctx.icon
-      }, null, 8, ["icon"])) : (0, _vue.createCommentVNode)("", true), _ctx.text ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.text), 1)) : (0, _vue.createCommentVNode)("", true), (0, _vue.renderSlot)(_ctx.$slots, "default")], 64))];
-    }),
-    _: 3
-  }, 16, ["class"]);
-}
-
-var _default = {
-  name: 'f7-button',
-  render: render,
-  components: {
-    f7Preloader: _preloader.default,
-    f7UseIcon: _useIcon2.default
-  },
-  props: _extends({
-    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
-  }, _mixins.iconProps, _mixins.colorProps, _mixins.actionsProps, _mixins.routerProps),
-  setup: function setup(props) {
-    var elRef = (0, _vue.ref)(null);
-    (0, _useTooltip.useTooltip)(elRef, props);
-    (0, _useRouteProps.useRouteProps)(elRef, props);
-    var icon = (0, _vue.computed)(function () {
-      return (0, _useIcon.useIcon)(props);
-    });
-    var tag = (0, _vue.computed)(function () {
-      return props.type === 'submit' || props.type === 'reset' || props.type === 'button' ? 'button' : 'a';
-    });
-    var attrs = (0, _vue.computed)(function () {
-      var href = props.href,
-          tabLink = props.tabLink,
-          target = props.target,
-          type = props.type;
-      var hrefComputed = href;
-      if (href === true) hrefComputed = '#';
-      if (href === false || tag.value === 'button') hrefComputed = undefined; // no href attribute
-
-      return (0, _utils.extend)({
-        href: hrefComputed,
-        target: target,
-        type: type,
-        'data-tab': (0, _utils.isStringProp)(tabLink) && tabLink || undefined
-      }, (0, _mixins.routerAttrs)(props), (0, _mixins.actionsAttrs)(props));
-    });
-    var classesComputed = (0, _vue.computed)(function () {
-      var tabLink = props.tabLink,
-          tabLinkActive = props.tabLinkActive,
-          round = props.round,
-          roundMd = props.roundMd,
-          roundIos = props.roundIos,
-          roundAurora = props.roundAurora,
-          fill = props.fill,
-          fillMd = props.fillMd,
-          fillIos = props.fillIos,
-          fillAurora = props.fillAurora,
-          large = props.large,
-          largeMd = props.largeMd,
-          largeIos = props.largeIos,
-          largeAurora = props.largeAurora,
-          small = props.small,
-          smallMd = props.smallMd,
-          smallIos = props.smallIos,
-          smallAurora = props.smallAurora,
-          raised = props.raised,
-          raisedMd = props.raisedMd,
-          raisedIos = props.raisedIos,
-          raisedAurora = props.raisedAurora,
-          outline = props.outline,
-          outlineMd = props.outlineMd,
-          outlineIos = props.outlineIos,
-          outlineAurora = props.outlineAurora,
-          active = props.active,
-          disabled = props.disabled,
-          preloader = props.preloader,
-          loading = props.loading;
-      return (0, _utils.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: disabled
-      }, (0, _mixins.colorClasses)(props), (0, _mixins.routerClasses)(props), (0, _mixins.actionsClasses)(props));
-    });
-    return {
-      tag: tag,
-      elRef: elRef,
-      attrs: attrs,
-      classesComputed: classesComputed,
-      icon: icon
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/card-content.js

@@ -1,40 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../shared/utils");
-
-var _mixins = require("../shared/mixins");
-
-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); }
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    class: _ctx.classes
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2);
-}
-
-var _default = {
-  name: 'f7-card-content',
-  render: render,
-  props: _extends({
-    padding: {
-      type: Boolean,
-      default: true
-    }
-  }, _mixins.colorProps),
-  setup: function setup(props) {
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('card-content', {
-        'card-content-padding': props.padding
-      }, (0, _mixins.colorClasses)(props));
-    });
-    return {
-      classes: classes
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/card-footer.js

@@ -1,33 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../shared/utils");
-
-var _mixins = require("../shared/mixins");
-
-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); }
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    class: _ctx.classes
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2);
-}
-
-var _default = {
-  name: 'f7-card-footer',
-  render: render,
-  props: _extends({}, _mixins.colorProps),
-  setup: function setup(props) {
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('card-footer', (0, _mixins.colorClasses)(props));
-    });
-    return {
-      classes: classes
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/card-header.js

@@ -1,33 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../shared/utils");
-
-var _mixins = require("../shared/mixins");
-
-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); }
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    class: _ctx.classes
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2);
-}
-
-var _default = {
-  name: 'f7-card-header',
-  render: render,
-  props: _extends({}, _mixins.colorProps),
-  setup: function setup(props) {
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('card-header', (0, _mixins.colorClasses)(props));
-    });
-    return {
-      classes: classes
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/card.js

@@ -1,237 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../shared/utils");
-
-var _mixins = require("../shared/mixins");
-
-var _f = require("../shared/f7");
-
-var _cardHeader = _interopRequireDefault(require("./card-header"));
-
-var _cardContent = _interopRequireDefault(require("./card-content"));
-
-var _cardFooter = _interopRequireDefault(require("./card-footer"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-function render(_ctx, _cache) {
-  var _component_f7_card_header = (0, _vue.resolveComponent)("f7-card-header");
-
-  var _component_f7_card_content = (0, _vue.resolveComponent)("f7-card-content");
-
-  var _component_f7_card_footer = (0, _vue.resolveComponent)("f7-card-footer");
-
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    ref: "elRef",
-    class: _ctx.classes,
-    "data-animate": typeof _ctx.animate === 'undefined' ? _ctx.animate : _ctx.animate.toString(),
-    "data-hide-navbar-on-open": typeof _ctx.hideNavbarOnOpen === 'undefined' ? _ctx.hideNavbarOnOpen : _ctx.hideNavbarOnOpen.toString(),
-    "data-hide-toolbar-on-open": typeof _ctx.hideToolbarOnOpen === 'undefined' ? _ctx.hideToolbarOnOpen : _ctx.hideToolbarOnOpen.toString(),
-    "data-hide-statusbar-on-open": typeof _ctx.hideStatusbarOnOpen === 'undefined' ? _ctx.hideStatusbarOnOpen : _ctx.hideStatusbarOnOpen.toString(),
-    "data-scrollable-el": _ctx.scrollableEl,
-    "data-swipe-to-close": typeof _ctx.swipeToClose === 'undefined' ? _ctx.swipeToClose : _ctx.swipeToClose.toString(),
-    "data-close-by-backdrop-click": typeof _ctx.closeByBackdropClick === 'undefined' ? _ctx.closeByBackdropClick : _ctx.closeByBackdropClick.toString(),
-    "data-backdrop": typeof _ctx.backdrop === 'undefined' ? _ctx.backdrop : _ctx.backdrop.toString(),
-    "data-backdrop-el": _ctx.backdropEl
-  }, [_ctx.hasHeader ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_f7_card_header, {
-    key: 0
-  }, {
-    default: (0, _vue.withCtx)(function () {
-      return [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "header")];
-    }),
-    _: 3
-  })) : (0, _vue.createCommentVNode)("", true), _ctx.hasContent ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_f7_card_content, {
-    key: 1,
-    padding: _ctx.padding
-  }, {
-    default: (0, _vue.withCtx)(function () {
-      return [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.content) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "content")];
-    }),
-    _: 3
-  }, 8, ["padding"])) : (0, _vue.createCommentVNode)("", true), _ctx.hasFooter ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_f7_card_footer, {
-    key: 2
-  }, {
-    default: (0, _vue.withCtx)(function () {
-      return [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.footer) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "footer")];
-    }),
-    _: 3
-  })) : (0, _vue.createCommentVNode)("", true), (0, _vue.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"]);
-}
-
-var _default = {
-  name: 'f7-card',
-  render: render,
-  components: {
-    f7CardHeader: _cardHeader.default,
-    f7CardContent: _cardContent.default,
-    f7CardFooter: _cardFooter.default
-  },
-  props: _extends({
-    title: [String, Number],
-    content: [String, Number],
-    footer: [String, Number],
-    outline: Boolean,
-    expandable: Boolean,
-    expandableAnimateWidth: Boolean,
-    expandableOpened: Boolean,
-    animate: {
-      type: Boolean,
-      default: undefined
-    },
-    hideNavbarOnOpen: {
-      type: Boolean,
-      default: undefined
-    },
-    hideToolbarOnOpen: {
-      type: Boolean,
-      default: undefined
-    },
-    hideStatusbarOnOpen: {
-      type: Boolean,
-      default: undefined
-    },
-    scrollableEl: {
-      type: String,
-      default: undefined
-    },
-    swipeToClose: {
-      type: Boolean,
-      default: undefined
-    },
-    closeByBackdropClick: {
-      type: Boolean,
-      default: undefined
-    },
-    backdrop: {
-      type: Boolean,
-      default: undefined
-    },
-    backdropEl: {
-      type: String,
-      default: undefined
-    },
-    noShadow: Boolean,
-    noBorder: Boolean,
-    padding: {
-      type: Boolean,
-      default: true
-    }
-  }, _mixins.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 = (0, _vue.ref)(null);
-
-    var open = function open() {
-      if (!elRef.value) return;
-
-      _f.f7.card.open(elRef.value);
-    };
-
-    var close = function close() {
-      if (!elRef.value) return;
-
-      _f.f7.card.close(elRef.value);
-    };
-
-    var onBeforeOpen = function onBeforeOpen(el, prevent) {
-      if (elRef.value !== el) return;
-      emit('card:beforeopen', el, prevent);
-    };
-
-    var onOpen = function onOpen(el) {
-      if (elRef.value !== el) return;
-      emit('card:open', el);
-      emit('update:expandableOpened', true);
-    };
-
-    var onOpened = function onOpened(el, pageEl) {
-      if (elRef.value !== el) return;
-      emit('card:opened', el, pageEl);
-    };
-
-    var onClose = function onClose(el) {
-      if (elRef.value !== el) return;
-      emit('card:close', el);
-    };
-
-    var onClosed = function onClosed(el, pageEl) {
-      if (elRef.value !== el) return;
-      emit('card:closed', el, pageEl);
-      emit('update:expandableOpened', false);
-    };
-
-    (0, _vue.onMounted)(function () {
-      if (!props.expandable || !elRef.value) return;
-      (0, _f.f7ready)(function () {
-        if (props.expandable && props.expandableOpened) {
-          _f.f7.card.open(elRef.value, false);
-        }
-
-        _f.f7.on('cardBeforeOpen', onBeforeOpen);
-
-        _f.f7.on('cardOpen', onOpen);
-
-        _f.f7.on('cardOpened', onOpened);
-
-        _f.f7.on('cardClose', onClose);
-
-        _f.f7.on('cardClosed', onClosed);
-      });
-    });
-    (0, _vue.onBeforeUnmount)(function () {
-      _f.f7.off('cardBeforeOpen', onBeforeOpen);
-
-      _f.f7.off('cardOpen', onOpen);
-
-      _f.f7.off('cardOpened', onOpened);
-
-      _f.f7.off('cardClose', onClose);
-
-      _f.f7.off('cardClosed', onClosed);
-    });
-    (0, _vue.watch)(function () {
-      return props.expandableOpened;
-    }, function (value) {
-      if (value) {
-        open();
-      } else {
-        close();
-      }
-    });
-    var hasHeader = (0, _vue.computed)(function () {
-      return props.title || slots.header;
-    });
-    var hasContent = (0, _vue.computed)(function () {
-      return props.content || slots.content;
-    });
-    var hasFooter = (0, _vue.computed)(function () {
-      return props.footer || slots.footer;
-    });
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('card', {
-        'card-outline': props.outline,
-        'card-expandable': props.expandable,
-        'card-expandable-animate-width': props.expandableAnimateWidth,
-        'no-shadow': props.noShadow,
-        'no-border': props.noBorder
-      }, (0, _mixins.colorClasses)(props));
-    });
-    return {
-      elRef: elRef,
-      classes: classes,
-      hasHeader: hasHeader,
-      hasContent: hasContent,
-      hasFooter: hasFooter
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/checkbox.js

@@ -1,84 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _utils = require("../shared/utils");
-
-var _mixins = require("../shared/mixins");
-
-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); }
-
-var _hoisted_1 = /*#__PURE__*/(0, _vue.createVNode)("i", {
-  class: "icon-checkbox"
-}, null, -1);
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("label", {
-    class: _ctx.classes
-  }, [(0, _vue.createVNode)("input", {
-    ref: "inputElRef",
-    type: "checkbox",
-    name: _ctx.name,
-    value: _ctx.value,
-    disabled: _ctx.disabled,
-    readonly: _ctx.readonly,
-    checked: _ctx.checked,
-    onChange: _cache[1] || (_cache[1] = function () {
-      return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments);
-    })
-  }, null, 40, ["name", "value", "disabled", "readonly", "checked"]), _hoisted_1, (0, _vue.renderSlot)(_ctx.$slots, "default")], 2);
-}
-
-var _default = {
-  name: 'f7-checkbox',
-  render: render,
-  props: _extends({
-    checked: Boolean,
-    indeterminate: Boolean,
-    name: [Number, String],
-    value: {
-      type: [Number, String, Boolean],
-      default: undefined
-    },
-    disabled: Boolean,
-    readonly: Boolean
-  }, _mixins.colorProps),
-  emits: ['update:checked', 'change'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var inputElRef = (0, _vue.ref)(null);
-
-    var onChange = function onChange(event) {
-      emit('update:checked', event.target.checked);
-      emit('change', event);
-    };
-
-    (0, _vue.onMounted)(function () {
-      if (inputElRef.value) {
-        inputElRef.value.indeterminate = !!props.indeterminate;
-      }
-    });
-    (0, _vue.watch)(function () {
-      return props.indeterminate;
-    }, function (newValue) {
-      if (inputElRef.value) {
-        inputElRef.value.indeterminate = !!newValue;
-      }
-    });
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)({
-        checkbox: true,
-        disabled: props.disabled
-      }, (0, _mixins.colorClasses)(props));
-    });
-    return {
-      inputElRef: inputElRef,
-      classes: classes,
-      onChange: onChange
-    };
-  }
-};
-exports.default = _default;