framework7-vue 6.3.4 → 7.0.0-beta.3

package/cjs/components/tab.js

@@ -1,142 +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 _useTab = require("../shared/use-tab");
-
-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 _mergeProps2;
-
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    ref: "elRef",
-    class: _ctx.classes
-  }, [_ctx.tabContent ? ((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.getComponent(_ctx.tabContent)), (0, _vue.mergeProps)((_mergeProps2 = {
-    key: 0
-  }, _mergeProps2["key"] = _ctx.tabContent.id, _mergeProps2), _ctx.getProps(_ctx.tabContent)), null, 16)) : (0, _vue.renderSlot)(_ctx.$slots, "default", {
-    key: 1
-  })], 2);
-}
-
-var _default = {
-  name: 'f7-tab',
-  render: render,
-  props: _extends({
-    tabActive: Boolean
-  }, _mixins.colorProps),
-  emits: ['tab:show', 'tab:hide'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = (0, _vue.ref)(null);
-    var routerData = (0, _vue.ref)(null);
-    var route = (0, _vue.inject)('f7route', null);
-    var router = (0, _vue.inject)('f7route', null);
-    var initialTabContent = null;
-
-    if (!routerData.value && route && route.route && route.route.tab && route.route.tab.id === props.id) {
-      var _route$route$tab = route.route.tab,
-          component = _route$route$tab.component,
-          asyncComponent = _route$route$tab.asyncComponent,
-          tabRouteOptions = _route$route$tab.options;
-
-      if (component || asyncComponent) {
-        var parentProps = route.route.options && route.route.options.props;
-        initialTabContent = {
-          id: (0, _utils.getComponentId)(),
-          component: component || asyncComponent,
-          isAsync: !!asyncComponent,
-          props: _extends({}, parentProps || {}, tabRouteOptions && tabRouteOptions.props || {}, {
-            f7router: router,
-            f7route: route
-          }, route.params)
-        };
-      }
-    }
-
-    var tabContent = (0, _vue.ref)(initialTabContent || null);
-
-    var setTabContent = function setTabContent(newContent) {
-      tabContent.value = newContent;
-    };
-
-    if (_f.f7 && !routerData.value) {
-      routerData.value = {
-        setTabContent: setTabContent
-      };
-
-      _f.f7routers.tabs.push(routerData.value);
-    }
-
-    (0, _vue.onMounted)(function () {
-      if (elRef.value && initialTabContent) {
-        elRef.value.f7RouterTabLoaded = true;
-      }
-
-      (0, _f.f7ready)(function () {
-        if (!routerData.value) {
-          routerData.value = {
-            el: elRef.value,
-            setTabContent: setTabContent
-          };
-
-          _f.f7routers.tabs.push(routerData.value);
-        } else {
-          routerData.value.el = elRef.value;
-        }
-      });
-    });
-    (0, _vue.onBeforeUnmount)(function () {
-      if (!routerData.value) return;
-
-      _f.f7routers.tabs.splice(_f.f7routers.tabs.indexOf(routerData.value), 1);
-
-      routerData.value = null;
-    });
-    (0, _vue.onUpdated)(function () {
-      if (!routerData.value || !_f.f7) return;
-
-      _f.f7events.emit('tabRouterDidUpdate', routerData.value);
-    });
-    (0, _useTab.useTab)(elRef, emit);
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('tab', {
-        'tab-active': props.tabActive
-      }, (0, _mixins.colorClasses)(props));
-    });
-
-    var getComponent = function getComponent(content) {
-      return (0, _vue.toRaw)(content.component);
-    };
-
-    var getProps = function getProps(content) {
-      var tabComponent = content.component,
-          tabProps = content.props;
-      var keys = [];
-      var passProps = {};
-      if (tabComponent && tabComponent.props) keys = Object.keys(tabComponent.props);
-      keys.forEach(function (key) {
-        if (key in tabProps) passProps[key] = tabProps[key];
-      });
-      return passProps;
-    };
-
-    return {
-      elRef: elRef,
-      classes: classes,
-      tabContent: tabContent,
-      getComponent: getComponent,
-      getProps: getProps
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/tabs.js

@@ -1,71 +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 _ctx.animated || _ctx.swipeable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    key: 0,
-    ref: "elRef",
-    class: _ctx.classNames(_ctx.wrapClasses, _ctx.classes)
-  }, [(0, _vue.createVNode)("div", {
-    class: _ctx.tabsClasses
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2)], 2)) : ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    key: 1,
-    ref: "elRef",
-    class: _ctx.classNames(_ctx.tabsClasses, _ctx.classes)
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2));
-}
-
-var _default = {
-  name: 'f7-tabs',
-  render: render,
-  props: _extends({
-    animated: Boolean,
-    swipeable: Boolean,
-    routable: Boolean,
-    swiperParams: {
-      type: Object,
-      default: undefined
-    }
-  }, _mixins.colorProps),
-  setup: function setup(props) {
-    var elRef = (0, _vue.ref)(null);
-    (0, _vue.onMounted)(function () {
-      if (!props.swipeable || !props.swiperParams) return;
-      if (!elRef.value) return;
-      elRef.value.f7SwiperParams = props.swiperParams;
-    });
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)((0, _mixins.colorClasses)(props));
-    });
-    var wrapClasses = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)({
-        'tabs-animated-wrap': props.animated,
-        'tabs-swipeable-wrap': props.swipeable
-      });
-    });
-    var tabsClasses = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)({
-        tabs: true,
-        'tabs-routable': props.routable
-      });
-    });
-    return {
-      elRef: elRef,
-      classes: classes,
-      wrapClasses: wrapClasses,
-      tabsClasses: tabsClasses,
-      classNames: _utils.classNames
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/text-editor.js

@@ -1,174 +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");
-
-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 = {
-  class: "text-editor-content",
-  contenteditable: ""
-};
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    ref: "elRef",
-    class: _ctx.classes
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "root-start"), (0, _vue.createVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default")]), (0, _vue.renderSlot)(_ctx.$slots, "root-end"), (0, _vue.renderSlot)(_ctx.$slots, "root")], 2);
-}
-
-var _default = {
-  name: 'f7-text-editor',
-  render: render,
-  props: _extends({
-    mode: {
-      type: String,
-      default: undefined
-    },
-    value: {
-      type: String,
-      default: undefined
-    },
-    buttons: Array,
-    customButtons: Object,
-    dividers: {
-      type: Boolean,
-      default: undefined
-    },
-    imageUrlText: {
-      type: String,
-      default: undefined
-    },
-    linkUrlText: {
-      type: String,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    },
-    clearFormattingOnPaste: {
-      type: Boolean,
-      default: undefined
-    },
-    resizable: {
-      type: Boolean,
-      default: false
-    }
-  }, _mixins.colorProps),
-  emits: ['texteditor:change', 'texteditor:input', 'texteditor:focus', 'texteditor:blur', 'texteditor:buttonclick', 'texteditor:keyboardopen', 'texteditor:keyboardclose', 'texteditor:popoveropen', 'texteditor:popoverclose', 'texteditor:insertlink', 'texteditor:insertimage', 'texteditorChange', 'texteditorInput', 'texteditorFocus', 'texteditorBlur'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7TextEditor = null;
-    var elRef = (0, _vue.ref)(null);
-
-    var onChange = function onChange(editor, editorValue) {
-      emit('texteditor:change', editorValue);
-      emit('texteditorChange', editorValue);
-    };
-
-    var onInput = function onInput(editor, editorValue) {
-      emit('texteditor:input', editorValue);
-      emit('texteditorInput', editorValue);
-    };
-
-    var onFocus = function onFocus() {
-      emit('texteditor:focus');
-      emit('texteditorFocus');
-    };
-
-    var onBlur = function onBlur() {
-      emit('texteditor:blur');
-      emit('texteditorBlur');
-    };
-
-    var onButtonClick = function onButtonClick(editor, button) {
-      emit('texteditor:buttonclick', button);
-    };
-
-    var onKeyboardOpen = function onKeyboardOpen() {
-      emit('texteditor:keyboardopen');
-    };
-
-    var onKeyboardClose = function onKeyboardClose() {
-      emit('texteditor:keyboardclose');
-    };
-
-    var onPopoverOpen = function onPopoverOpen() {
-      emit('texteditor:popoveropen');
-    };
-
-    var onPopoverClose = function onPopoverClose() {
-      emit('texteditor:popoverclose');
-    };
-
-    var onInsertLink = function onInsertLink(editor, url) {
-      emit(props, 'texteditor:insertlink', url);
-    };
-
-    var onInsertImage = function onInsertImage(editor, url) {
-      emit(props, 'texteditor:insertimage', url);
-    };
-
-    (0, _vue.watch)(function () {
-      return props.value;
-    }, function (newValue) {
-      if (f7TextEditor) {
-        f7TextEditor.setValue(newValue);
-      }
-    });
-    (0, _vue.onMounted)(function () {
-      var params = (0, _utils.noUndefinedProps)({
-        el: elRef.value,
-        mode: props.mode,
-        value: props.value,
-        buttons: props.buttons,
-        customButtons: props.customButtons,
-        dividers: props.dividers,
-        imageUrlText: props.imageUrlText,
-        linkUrlText: props.linkUrlText,
-        placeholder: props.placeholder,
-        clearFormattingOnPaste: props.clearFormattingOnPaste,
-        on: {
-          change: onChange,
-          input: onInput,
-          focus: onFocus,
-          blur: onBlur,
-          buttonClick: onButtonClick,
-          keyboardOpen: onKeyboardOpen,
-          keyboardClose: onKeyboardClose,
-          popoverOpen: onPopoverOpen,
-          popoverClose: onPopoverClose,
-          insertLink: onInsertLink,
-          insertImage: onInsertImage
-        }
-      });
-      (0, _f.f7ready)(function () {
-        f7TextEditor = _f.f7.textEditor.create(params);
-      });
-    });
-    (0, _vue.onBeforeUnmount)(function () {
-      if (f7TextEditor && f7TextEditor.destroy) {
-        f7TextEditor.destroy();
-      }
-
-      f7TextEditor = null;
-    });
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('text-editor', props.resizable && 'text-editor-resizable', (0, _mixins.colorClasses)(props));
-    });
-    return {
-      elRef: elRef,
-      classes: classes
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/toggle.js

@@ -1,106 +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 _useTooltip = require("../shared/use-tooltip");
-
-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)("span", {
-  class: "toggle-icon"
-}, null, -1);
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("label", {
-    ref: "elRef",
-    class: _ctx.classes
-  }, [(0, _vue.createVNode)("input", {
-    type: "checkbox",
-    name: _ctx.name,
-    disabled: _ctx.disabled,
-    readonly: _ctx.readonly,
-    checked: _ctx.checked,
-    value: _ctx.value,
-    onChange: _cache[1] || (_cache[1] = function () {
-      return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments);
-    })
-  }, null, 40, ["name", "disabled", "readonly", "checked", "value"]), _hoisted_1], 2);
-}
-
-var _default = {
-  name: 'f7-toggle',
-  render: render,
-  props: _extends({
-    init: {
-      type: Boolean,
-      default: true
-    },
-    checked: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    name: String,
-    value: [String, Number, Array],
-    tooltip: String,
-    tooltipTrigger: String
-  }, _mixins.colorProps),
-  emits: ['change', 'toggle:change', 'update:checked'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Toggle = null;
-    var elRef = (0, _vue.ref)(null);
-    (0, _useTooltip.useTooltip)(elRef, props);
-
-    var onChange = function onChange(event) {
-      emit('change', event);
-    };
-
-    (0, _vue.watch)(function () {
-      return props.checked;
-    }, function (newValue) {
-      if (!f7Toggle) return;
-      f7Toggle.checked = newValue;
-    });
-    (0, _vue.onMounted)(function () {
-      (0, _f.f7ready)(function () {
-        if (!props.init || !elRef.value) return;
-        f7Toggle = _f.f7.toggle.create({
-          el: elRef.value,
-          on: {
-            change: function change(toggleInstance) {
-              emit('toggle:change', toggleInstance.checked);
-              emit('update:checked', toggleInstance.checked);
-            }
-          }
-        });
-      });
-    });
-    (0, _vue.onBeforeUnmount)(function () {
-      if (f7Toggle && f7Toggle.destroy && f7Toggle.$el) {
-        f7Toggle.destroy();
-      }
-
-      f7Toggle = null;
-    });
-    var classes = (0, _vue.computed)(function () {
-      return (0, _utils.classNames)('toggle', {
-        disabled: props.disabled
-      }, (0, _mixins.colorClasses)(props));
-    });
-    return {
-      classes: classes,
-      elRef: elRef,
-      f7Toggle: f7Toggle,
-      onChange: onChange
-    };
-  }
-};
-exports.default = _default;

package/cjs/components/toolbar.js

@@ -1,168 +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 _useTheme = require("../shared/use-theme");
-
-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: 0,
-  className: "toolbar-inner"
-};
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
-    ref: "elRef",
-    class: _ctx.classes
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "before-inner"), _ctx.inner ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default")])) : (0, _vue.renderSlot)(_ctx.$slots, "default", {
-    key: 1
-  }), (0, _vue.renderSlot)(_ctx.$slots, "after-inner")], 2);
-}
-
-var _default = {
-  name: 'f7-toolbar',
-  render: render,
-  props: _extends({
-    tabbar: Boolean,
-    labels: Boolean,
-    scrollable: Boolean,
-    hidden: Boolean,
-    noShadow: Boolean,
-    noHairline: Boolean,
-    noBorder: Boolean,
-    position: {
-      type: String,
-      default: undefined
-    },
-    topMd: {
-      type: Boolean,
-      default: undefined
-    },
-    topIos: {
-      type: Boolean,
-      default: undefined
-    },
-    topAurora: {
-      type: Boolean,
-      default: undefined
-    },
-    top: {
-      type: Boolean,
-      default: undefined
-    },
-    bottomMd: {
-      type: Boolean,
-      default: undefined
-    },
-    bottomIos: {
-      type: Boolean,
-      default: undefined
-    },
-    bottomAurora: {
-      type: Boolean,
-      default: undefined
-    },
-    bottom: {
-      type: Boolean,
-      default: undefined
-    },
-    inner: {
-      type: Boolean,
-      default: true
-    }
-  }, _mixins.colorProps),
-  emits: ['toolbar:hide', 'toolbar:show'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = (0, _vue.ref)(null);
-    var theme = (0, _useTheme.useTheme)();
-
-    var onHide = function onHide(toolbarEl) {
-      if (elRef.value !== toolbarEl) return;
-      emit('toolbar:hide');
-    };
-
-    var onShow = function onShow(toolbarEl) {
-      if (elRef.value !== toolbarEl) return;
-      emit('toolbar:show');
-    };
-
-    var hide = function hide(animate) {
-      if (!_f.f7) return;
-
-      _f.f7.toolbar.hide(elRef.value, animate);
-    };
-
-    var show = function show(animate) {
-      if (!_f.f7) return;
-
-      _f.f7.toolbar.show(elRef.value, animate);
-    };
-
-    (0, _vue.onMounted)(function () {
-      if (props.tabbar && _f.f7 && elRef.value) {
-        _f.f7.toolbar.setHighlight(elRef.value);
-      }
-
-      _f.f7.on('toolbarShow', onShow);
-
-      _f.f7.on('toolbarHide', onHide);
-    });
-    (0, _vue.onBeforeUnmount)(function () {
-      _f.f7.off('toolbarShow', onShow);
-
-      _f.f7.off('toolbarHide', onHide);
-    });
-    var TabbarContext = (0, _vue.computed)(function () {
-      return {
-        tabbarHasLabels: props.labels
-      };
-    });
-    (0, _vue.provide)('TabbarContext', TabbarContext);
-    var classes = (0, _vue.computed)(function () {
-      var tabbar = props.tabbar,
-          bottomMd = props.bottomMd,
-          bottomIos = props.bottomIos,
-          bottomAurora = props.bottomAurora,
-          bottom = props.bottom,
-          position = props.position,
-          topMd = props.topMd,
-          topIos = props.topIos,
-          topAurora = props.topAurora,
-          top = props.top,
-          labels = props.labels,
-          scrollable = props.scrollable,
-          hidden = props.hidden,
-          noShadow = props.noShadow,
-          noHairline = props.noHairline,
-          noBorder = props.noBorder;
-      return (0, _utils.classNames)('toolbar', {
-        tabbar: tabbar,
-        'toolbar-bottom': theme.value && theme.value.md && bottomMd || theme.value && theme.value.ios && bottomIos || theme.value && theme.value.aurora && bottomAurora || bottom || position === 'bottom',
-        'toolbar-top': theme.value && theme.value.md && topMd || theme.value && theme.value.ios && topIos || theme.value && theme.value.aurora && topAurora || top || position === 'top',
-        'tabbar-labels': labels,
-        'tabbar-scrollable': scrollable,
-        'toolbar-hidden': hidden,
-        'no-shadow': noShadow,
-        'no-hairline': noHairline || noBorder
-      }, (0, _mixins.colorClasses)(props));
-    });
-    return {
-      classes: classes,
-      elRef: elRef,
-      hide: hide,
-      show: show
-    };
-  }
-};
-exports.default = _default;