framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/searchbar.js

@@ -1,14 +1,12 @@
-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, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   class: "searchbar-inner"
 };
-var _hoisted_2 = {
+const _hoisted_2 = {
   class: "searchbar-input-wrap"
 };
 
-var _hoisted_3 = /*#__PURE__*/_createVNode("i", {
+const _hoisted_3 = /*#__PURE__*/_createVNode("i", {
   class: "searchbar-icon"
 }, null, -1);
 
@@ -18,38 +16,24 @@ function render(_ctx, _cache) {
     class: _ctx.classes,
     onSubmit: _ctx.onSubmit
   }, {
-    default: _withCtx(function () {
-      return [_renderSlot(_ctx.$slots, "before-inner"), _createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "inner-start"), _createVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "input-wrap-start"), _createVNode("input", {
-        value: _ctx.value,
-        placeholder: _ctx.placeholder,
-        spellcheck: _ctx.spellcheck,
-        type: "search",
-        onInput: _cache[1] || (_cache[1] = function () {
-          return _ctx.onInput && _ctx.onInput.apply(_ctx, arguments);
-        }),
-        onChange: _cache[2] || (_cache[2] = function () {
-          return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments);
-        }),
-        onFocus: _cache[3] || (_cache[3] = function () {
-          return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
-        }),
-        onBlur: _cache[4] || (_cache[4] = function () {
-          return _ctx.onBlur && _ctx.onBlur.apply(_ctx, arguments);
-        })
-      }, null, 40, ["value", "placeholder", "spellcheck"]), _hoisted_3, _ctx.clearButton ? (_openBlock(), _createBlock("span", {
-        key: 0,
-        class: "input-clear-button",
-        onClick: _cache[5] || (_cache[5] = function () {
-          return _ctx.onClearButtonClick && _ctx.onClearButtonClick.apply(_ctx, arguments);
-        })
-      })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createBlock("span", {
-        key: 0,
-        class: "searchbar-disable-button",
-        onClick: _cache[6] || (_cache[6] = function () {
-          return _ctx.onDisableButtonClick && _ctx.onDisableButtonClick.apply(_ctx, arguments);
-        })
-      }, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")];
-    }),
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "before-inner"), _createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "inner-start"), _createVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "input-wrap-start"), _createVNode("input", {
+      value: _ctx.value,
+      placeholder: _ctx.placeholder,
+      spellcheck: _ctx.spellcheck,
+      type: "search",
+      onInput: _cache[1] || (_cache[1] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+      onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
+      onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+      onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+    }, null, 40, ["value", "placeholder", "spellcheck"]), _hoisted_3, _ctx.clearButton ? (_openBlock(), _createBlock("span", {
+      key: 0,
+      class: "input-clear-button",
+      onClick: _cache[5] || (_cache[5] = (...args) => _ctx.onClearButtonClick && _ctx.onClearButtonClick(...args))
+    })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createBlock("span", {
+      key: 0,
+      class: "searchbar-disable-button",
+      onClick: _cache[6] || (_cache[6] = (...args) => _ctx.onDisableButtonClick && _ctx.onDisableButtonClick(...args))
+    }, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")]),
     _: 3
   }, 8, ["class", "onSubmit"]);
 }
@@ -60,8 +44,8 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { f7ready, f7 } from '../shared/f7';
 export default {
   name: 'f7-searchbar',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     noShadow: Boolean,
     noHairline: Boolean,
     form: {
@@ -158,72 +142,75 @@ export default {
     init: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['change', 'input', 'focus', 'blur', 'submit', 'click:clear', 'click:disable', 'searchbar:search', 'searchbar:clear', 'searchbar:enable', 'searchbar:disable', 'update:value'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Searchbar = null;
-    var elRef = ref(null);
 
-    var search = function search(query) {
+  setup(props, {
+    emit
+  }) {
+    let f7Searchbar = null;
+    const elRef = ref(null);
+
+    const search = query => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.search(query);
     };
 
-    var enable = function enable() {
+    const enable = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.enable();
     };
 
-    var disable = function disable() {
+    const disable = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.disable();
     };
 
-    var toggle = function toggle() {
+    const toggle = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.toggle();
     };
 
-    var clear = function clear() {
+    const clear = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.clear();
     };
 
-    var onChange = function onChange(event) {
+    const onChange = event => {
       emit('change', event);
     };
 
-    var onInput = function onInput(event) {
+    const onInput = event => {
       emit('input', event);
       emit('update:value', event.target.value);
     };
 
-    var onFocus = function onFocus(event) {
+    const onFocus = event => {
       emit('focus', event);
     };
 
-    var onBlur = function onBlur(event) {
+    const onBlur = event => {
       emit('blur', event);
     };
 
-    var onSubmit = function onSubmit(event) {
+    const onSubmit = event => {
       emit('submit', event);
     };
 
-    var onClearButtonClick = function onClearButtonClick(event) {
+    const onClearButtonClick = event => {
       emit('click:clear', event);
     };
 
-    var onDisableButtonClick = function onDisableButtonClick(event) {
+    const onDisableButtonClick = event => {
       emit('click:disable', event);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (!props.init) return;
-      f7ready(function () {
-        var params = noUndefinedProps({
+      f7ready(() => {
+        const params = noUndefinedProps({
           el: elRef.value,
           inputEvents: props.inputEvents,
           searchContainer: props.searchContainer,
@@ -246,21 +233,25 @@ export default {
           expandable: props.expandable,
           inline: props.inline,
           on: {
-            search: function search(searchbar, query, previousQuery) {
+            search(searchbar, query, previousQuery) {
               emit('searchbar:search', searchbar, query, previousQuery);
             },
-            clear: function clear(searchbar, previousQuery) {
+
+            clear(searchbar, previousQuery) {
               emit('searchbar:clear', searchbar, previousQuery);
             },
-            enable: function enable(searchbar) {
+
+            enable(searchbar) {
               emit('searchbar:enable', searchbar);
             },
-            disable: function disable(searchbar) {
+
+            disable(searchbar) {
               emit('searchbar:disable', searchbar);
             }
+
           }
         });
-        Object.keys(params).forEach(function (key) {
+        Object.keys(params).forEach(key => {
           if (params[key] === '') {
             delete params[key];
           }
@@ -268,37 +259,34 @@ export default {
         f7Searchbar = f7.searchbar.create(params);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Searchbar && f7Searchbar.destroy) f7Searchbar.destroy();
       f7Searchbar = null;
     });
-    var classes = computed(function () {
-      return classNames('searchbar', {
-        'searchbar-inline': props.inline,
-        'no-shadow': props.noShadow,
-        'no-hairline': props.noHairline,
-        'searchbar-expandable': props.expandable
-      }, colorClasses(props));
-    });
-    var tag = computed(function () {
-      return props.form ? 'form' : 'div';
-    });
+    const classes = computed(() => classNames('searchbar', {
+      'searchbar-inline': props.inline,
+      'no-shadow': props.noShadow,
+      'no-hairline': props.noHairline,
+      'searchbar-expandable': props.expandable
+    }, colorClasses(props)));
+    const tag = computed(() => props.form ? 'form' : 'div');
     return {
-      elRef: elRef,
-      tag: tag,
-      classes: classes,
-      search: search,
-      enable: enable,
-      disable: disable,
-      toggle: toggle,
-      clear: clear,
-      onChange: onChange,
-      onInput: onInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onSubmit: onSubmit,
-      onClearButtonClick: onClearButtonClick,
-      onDisableButtonClick: onDisableButtonClick
+      elRef,
+      tag,
+      classes,
+      search,
+      enable,
+      disable,
+      toggle,
+      clear,
+      onChange,
+      onInput,
+      onFocus,
+      onBlur,
+      onSubmit,
+      onClearButtonClick,
+      onDisableButtonClick
     };
   }
+
 };

package/components/segmented.js

@@ -0,0 +1,63 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "segmented-highlight"
+};
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    class: _ctx.classes
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.strong || _ctx.strongIos || _ctx.strongMd || _ctx.strongAurora ? (_openBlock(), _createBlock("span", _hoisted_1)) : _createCommentVNode("", true)]),
+    _: 3
+  }, 8, ["class"]);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-segmented',
+  render,
+  props: {
+    raised: Boolean,
+    raisedIos: Boolean,
+    raisedMd: Boolean,
+    raisedAurora: Boolean,
+    round: Boolean,
+    roundIos: Boolean,
+    roundMd: Boolean,
+    roundAurora: Boolean,
+    strong: Boolean,
+    strongIos: Boolean,
+    strongMd: Boolean,
+    strongAurora: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames({
+      segmented: true,
+      'segmented-raised': props.raised,
+      'segmented-raised-ios': props.raisedIos,
+      'segmented-raised-aurora': props.raisedAurora,
+      'segmented-raised-md': props.raisedMd,
+      'segmented-round': props.round,
+      'segmented-round-ios': props.roundIos,
+      'segmented-round-aurora': props.roundAurora,
+      'segmented-round-md': props.roundMd,
+      'segmented-strong': props.strong,
+      'segmented-strong-ios': props.strongIos,
+      'segmented-strong-md': props.strongMd,
+      'segmented-strong-aurora': props.strongAurora
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/sheet.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 { h, computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -7,7 +5,7 @@ import { f7ready, f7 } from '../shared/f7';
 import { modalStateClasses } from '../shared/modal-state-classes';
 export default {
   name: 'f7-sheet',
-  props: _extends({
+  props: {
     opened: Boolean,
     animate: {
       type: Boolean,
@@ -52,56 +50,59 @@ export default {
     containerEl: {
       type: [String, Object],
       default: undefined
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['sheet:stepprogress', 'sheet:stepopen', 'sheet:stepclose', 'sheet:open', 'sheet:opened', 'sheet:close', 'sheet:closed', 'update:opened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var f7Sheet = null; // eslint-disable-next-line
 
-    var isOpened = props.opened;
-    var isClosing = false;
-    var elRef = ref(null);
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let f7Sheet = null; // eslint-disable-next-line
+
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
 
-    var onStepProgress = function onStepProgress(instance, progress) {
+    const onStepProgress = (instance, progress) => {
       emit('sheet:stepprogress', instance, progress);
     };
 
-    var onStepOpen = function onStepOpen(instance) {
+    const onStepOpen = instance => {
       emit('sheet:stepopen', instance);
     };
 
-    var onStepClose = function onStepClose(instance) {
+    const onStepClose = instance => {
       emit('sheet:stepclose', instance);
     };
 
-    var onOpen = function onOpen(instance) {
+    const onOpen = instance => {
       isOpened = true;
       isClosing = false;
       emit('sheet:open', instance);
       emit('update:opened', true);
     };
 
-    var onOpened = function onOpened(instance) {
+    const onOpened = instance => {
       emit('sheet:opened', instance);
     };
 
-    var onClose = function onClose(instance) {
+    const onClose = instance => {
       isOpened = false;
       isClosing = true;
       emit('sheet:close', instance);
     };
 
-    var onClosed = function onClosed(instance) {
+    const onClosed = instance => {
       isClosing = false;
       emit('sheet:closed', instance);
       emit('update:opened', false);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (!elRef.value) return;
-      var sheetParams = {
+      const sheetParams = {
         el: elRef.value,
         on: {
           open: onOpen,
@@ -113,16 +114,18 @@ export default {
           stepProgress: onStepProgress
         }
       };
-      var animate = props.animate,
-          backdrop = props.backdrop,
-          backdropEl = props.backdropEl,
-          closeByBackdropClick = props.closeByBackdropClick,
-          closeByOutsideClick = props.closeByOutsideClick,
-          closeOnEscape = props.closeOnEscape,
-          swipeToClose = props.swipeToClose,
-          swipeToStep = props.swipeToStep,
-          swipeHandler = props.swipeHandler,
-          containerEl = props.containerEl;
+      const {
+        animate,
+        backdrop,
+        backdropEl,
+        closeByBackdropClick,
+        closeByOutsideClick,
+        closeOnEscape,
+        swipeToClose,
+        swipeToStep,
+        swipeHandler,
+        containerEl
+      } = props;
       if (typeof animate !== 'undefined') sheetParams.animate = animate;
       if (typeof backdrop !== 'undefined') sheetParams.backdrop = backdrop;
       if (typeof backdropEl !== 'undefined') sheetParams.backdropEl = backdropEl;
@@ -133,7 +136,7 @@ export default {
       if (typeof swipeToStep !== 'undefined') sheetParams.swipeToStep = swipeToStep;
       if (typeof swipeHandler !== 'undefined') sheetParams.swipeHandler = swipeHandler;
       if (typeof containerEl !== 'undefined') sheetParams.containerEl = containerEl;
-      f7ready(function () {
+      f7ready(() => {
         f7Sheet = f7.sheet.create(sheetParams);
 
         if (props.opened) {
@@ -141,16 +144,14 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Sheet) {
         f7Sheet.destroy();
       }
 
       f7Sheet = null;
     });
-    watch(function () {
-      return props.opened;
-    }, function (value) {
+    watch(() => props.opened, value => {
       if (!f7Sheet) return;
 
       if (value) {
@@ -159,27 +160,25 @@ export default {
         f7Sheet.close();
       }
     });
-    var classes = computed(function () {
-      var positionComputed = 'bottom';
+    const classes = computed(() => {
+      let positionComputed = 'bottom';
       if (props.position) positionComputed = props.position;else if (props.top) positionComputed = 'top';else if (props.bottom) positionComputed = 'bottom';
-      return classNames('sheet-modal', "sheet-modal-" + positionComputed, {
+      return classNames('sheet-modal', `sheet-modal-${positionComputed}`, {
         'sheet-modal-push': props.push
       }, modalStateClasses({
-        isOpened: isOpened,
-        isClosing: isClosing
+        isOpened,
+        isClosing
       }), colorClasses(props));
     });
-    var fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(function (tagName) {
-      return "f7-" + tagName;
-    });
-    return function () {
-      var fixedList = [];
-      var staticList = [];
+    const fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(tagName => `f7-${tagName}`);
+    return () => {
+      const fixedList = [];
+      const staticList = [];
 
       if (slots.default) {
-        slots.default().forEach(function (vnode) {
+        slots.default().forEach(vnode => {
           if (typeof vnode === 'undefined') return;
-          var tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
 
           if (fixedTags.indexOf(tag) >= 0) {
             fixedList.push(vnode);
@@ -197,4 +196,5 @@ export default {
       }, [staticList, slots.static && slots.static()])]);
     };
   }
+
 };