framework7-vue 8.2.0 → 8.3.0

package/components/appbar.js

@@ -0,0 +1,41 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "before-inner"), _ctx.inner ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.innerClasses)
+  }, [_renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)) : _renderSlot(_ctx.$slots, "default", {
+    key: 1
+  }), _renderSlot(_ctx.$slots, "after-inner")], 2 /* CLASS */);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-appbar',
+  render,
+  props: {
+    noShadow: Boolean,
+    noHairline: Boolean,
+    inner: {
+      type: Boolean,
+      default: true
+    },
+    innerClass: String,
+    innerClassName: String,
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('appbar', {
+      'no-shadow': props.noShadow,
+      'no-hairline': props.noHairline
+    }, colorClasses(props)));
+    const innerClasses = computed(() => classNames('appbar-inner', props.innerClass, props.innerClassName));
+    return {
+      classes,
+      innerClasses
+    };
+  }
+};

package/components/col.js

@@ -0,0 +1,91 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "resize-handler"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.resizable && _ctx.resizableHandler ? (_openBlock(), _createElementBlock("span", _hoisted_1)) : _createCommentVNode("v-if", true)]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class"]);
+}
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-col',
+  render,
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    width: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    xsmall: {
+      type: [Number, String]
+    },
+    small: {
+      type: [Number, String]
+    },
+    medium: {
+      type: [Number, String]
+    },
+    large: {
+      type: [Number, String]
+    },
+    xlarge: {
+      type: [Number, String]
+    },
+    resizable: Boolean,
+    resizableFixed: Boolean,
+    resizableAbsolute: Boolean,
+    resizableHandler: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['grid:resize'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const onResize = el => {
+      if (el === elRef.value) {
+        emit('grid:resize');
+      }
+    };
+    onMounted(() => {
+      f7ready(() => {
+        f7.on('gridResize', onResize);
+      });
+    });
+    onBeforeUnmount(() => {
+      f7.off('gridResize', onResize);
+    });
+    const classes = computed(() => classNames({
+      col: props.width === 'auto',
+      [`col-${props.width}`]: props.width !== 'auto',
+      [`xsmall-${props.xsmall}`]: props.xsmall,
+      [`small-${props.small}`]: props.small,
+      [`medium-${props.medium}`]: props.medium,
+      [`large-${props.large}`]: props.large,
+      [`xlarge-${props.xlarge}`]: props.xlarge,
+      resizable: props.resizable,
+      'resizable-fixed': props.resizableFixed,
+      'resizable-absolute': props.resizableAbsolute
+    }, colorClasses(props)));
+    return {
+      classes,
+      elRef
+    };
+  }
+};

package/components/list-item-cell.js

@@ -0,0 +1,23 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-list-item-cell',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('item-cell', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/list-item-row.js

@@ -0,0 +1,23 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-list-item-row',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('item-row', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/menu-dropdown-item.js

@@ -0,0 +1,69 @@
+import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _mergeProps({
+    ref: "elRef",
+    class: _ctx.classes
+  }, _ctx.attrs, {
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onClick && _ctx.onClick(...arguments);
+    })
+  }), [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1 /* TEXT */), _renderSlot(_ctx.$slots, "default")], 16 /* FULL_PROPS */);
+}
+
+import { computed, ref } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, routerProps, routerAttrs, routerClasses, actionsProps, actionsAttrs, actionsClasses } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+export default {
+  name: 'f7-menu-dropdown-item',
+  render,
+  props: {
+    text: String,
+    link: Boolean,
+    href: String,
+    target: String,
+    divider: Boolean,
+    ...colorProps,
+    ...routerProps,
+    ...actionsProps
+  },
+  emits: ['click'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const onClick = e => {
+      emit('click', e);
+    };
+    useRouteProps(elRef, props);
+    const isLink = computed(() => props.link || props.href || props.href === '');
+    const tag = computed(() => isLink.value ? 'a' : 'div');
+    const classes = computed(() => {
+      return classNames({
+        'menu-dropdown-link': isLink.value && !props.divider,
+        'menu-dropdown-item': !isLink.value && !props.divider,
+        'menu-dropdown-divider': props.divider
+      }, colorClasses(props), routerClasses(props), actionsClasses(props), {
+        'menu-close': typeof props.menuClose === 'undefined'
+      });
+    });
+    const attrs = computed(() => {
+      let hrefComputed = props.href;
+      if (typeof hrefComputed === 'undefined' && props.link) hrefComputed = '#';
+      return {
+        href: hrefComputed,
+        target: props.target,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    return {
+      classes,
+      attrs,
+      tag,
+      onClick,
+      elRef
+    };
+  }
+};

package/components/menu-dropdown.js

@@ -0,0 +1,39 @@
+import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("div", {
+    class: "menu-dropdown-content",
+    style: _normalizeStyle({
+      height: _ctx.contentHeight
+    })
+  }, [_renderSlot(_ctx.$slots, "default")], 4 /* STYLE */)], 2 /* CLASS */);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-menu-dropdown',
+  render,
+  props: {
+    contentHeight: String,
+    position: String,
+    left: Boolean,
+    center: Boolean,
+    right: Boolean,
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => {
+      let positionComputed = props.position || 'left';
+      if (props.left) positionComputed = 'left';
+      if (props.center) positionComputed = 'center';
+      if (props.right) positionComputed = 'right';
+      return classNames('menu-dropdown', `menu-dropdown-${positionComputed}`, colorClasses(props));
+    });
+    return {
+      classes
+    };
+  }
+};

package/components/menu-item.js

@@ -0,0 +1,119 @@
+import { toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "menu-item-content"
+};
+function render(_ctx, _cache) {
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
+    ref: "elRef",
+    class: _ctx.classes
+  }, _ctx.attrs, {
+    onClick: _ctx.onClick
+  }), {
+    default: _withCtx(() => [_ctx.text || _ctx.$slots.text || _ctx.icon ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1 /* TEXT */), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8 /* PROPS */, ["icon"])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "text")])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "default")]),
+    _: 3 /* FORWARDED */
+  }, 16 /* FULL_PROPS */, ["class", "onClick"]);
+}
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, routerProps, routerAttrs, routerClasses, actionsProps, actionsClasses, actionsAttrs, iconProps } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-menu-item',
+  render,
+  components: {
+    f7UseIcon
+  },
+  props: {
+    text: String,
+    iconOnly: Boolean,
+    href: String,
+    link: Boolean,
+    target: String,
+    dropdown: Boolean,
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps,
+    ...routerProps,
+    ...actionsProps,
+    ...iconProps
+  },
+  emits: ['click', 'menu:opened', 'menu:closed'],
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    useTooltip(elRef, props);
+    const onClick = e => {
+      emit('click', e);
+    };
+    const onOpened = el => {
+      if (elRef.value !== el) return;
+      emit('menu:opened', el);
+    };
+    const onClosed = el => {
+      if (elRef.value !== el) return;
+      emit('menu:closed', el);
+    };
+    useRouteProps(elRef, props);
+    const attachEvents = () => {
+      f7ready(() => {
+        f7.on('menuOpened', onOpened);
+        f7.on('menuClosed', onClosed);
+      });
+    };
+    const detachEvents = () => {
+      f7.off('menuOpened', onOpened);
+      f7.off('menuClosed', onOpened);
+    };
+    onMounted(() => attachEvents());
+    onBeforeUnmount(() => detachEvents());
+    const icon = computed(() => useIcon(props));
+    const tag = computed(() => {
+      const isLink = props.link || props.href || props.href === '';
+      return isLink ? 'a' : 'div';
+    });
+    const classes = computed(() => {
+      let iconOnlyComputed;
+      if (props.iconOnly || !props.text && !slots.text) {
+        iconOnlyComputed = true;
+      } else {
+        iconOnlyComputed = false;
+      }
+      const isDropdown = props.dropdown || props.dropdown === '';
+      return classNames({
+        'menu-item': true,
+        'menu-item-dropdown': isDropdown,
+        'icon-only': iconOnlyComputed
+      }, colorClasses(props), routerClasses(props), actionsClasses(props));
+    });
+    const attrs = computed(() => {
+      let hrefComputed = props.href;
+      if (typeof hrefComputed === 'undefined' && props.link) hrefComputed = '#';
+      return {
+        href: hrefComputed,
+        target: props.target,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    return {
+      tag,
+      classes,
+      attrs,
+      icon,
+      onClick,
+      elRef
+    };
+  }
+};

package/components/menu.js

@@ -0,0 +1,26 @@
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  class: "menu-inner"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")])], 2 /* CLASS */);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-menu',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('menu', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/row.js

@@ -0,0 +1,67 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "resize-handler"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.resizable && _ctx.resizableHandler ? (_openBlock(), _createElementBlock("span", _hoisted_1)) : _createCommentVNode("v-if", true)]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class"]);
+}
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-row',
+  render,
+  props: {
+    noGap: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    resizable: Boolean,
+    resizableFixed: Boolean,
+    resizableAbsolute: Boolean,
+    resizableHandler: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['grid:resize'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const onResize = el => {
+      if (el === elRef.value) {
+        emit('grid:resize');
+      }
+    };
+    onMounted(() => {
+      f7ready(() => {
+        f7.on('gridResize', onResize);
+      });
+    });
+    onBeforeUnmount(() => {
+      f7.off('gridResize', onResize);
+    });
+    const classes = computed(() => classNames('row', {
+      'no-gap': props.noGap,
+      resizable: props.resizable,
+      'resizable-fixed': props.resizableFixed,
+      'resizable-absolute': props.resizableAbsolute
+    }, colorClasses(props)));
+    return {
+      classes,
+      elRef
+    };
+  }
+};

package/components/sheet.d.ts

@@ -75,6 +75,21 @@ declare const Sheet: DefineComponent<
       default: undefined;
     },
 
+    breakpoints: {
+      type: ArrayConstructor;
+      default: () => undefined;
+    },
+
+    backdropBreakpoint: {
+      type: NumberConstructor;
+      default: undefined;
+    },
+
+    pushBreakpoint: {
+      type: NumberConstructor;
+      default: undefined;
+    },
+
     color: {
       type: StringConstructor;
     },
@@ -109,8 +124,8 @@ declare const Sheet: DefineComponent<
   {},
   ComponentOptionsMixin,
   ComponentOptionsMixin,
-  ("sheet:stepprogress" | "sheet:stepopen" | "sheet:stepclose" | "sheet:open" | "sheet:opened" | "sheet:close" | "sheet:closed" | "update:opened")[],
-  "sheet:stepprogress" | "sheet:stepopen" | "sheet:stepclose" | "sheet:open" | "sheet:opened" | "sheet:close" | "sheet:closed" | "update:opened"
+  ("sheet:stepprogress" | "sheet:stepopen" | "sheet:stepclose" | "sheet:open" | "sheet:opened" | "sheet:close" | "sheet:closed" | "sheet:breakpoint" | "update:opened")[],
+  "sheet:stepprogress" | "sheet:stepopen" | "sheet:stepclose" | "sheet:open" | "sheet:opened" | "sheet:close" | "sheet:closed" | "sheet:breakpoint" | "update:opened"
 >;
 
 export default Sheet;

package/components/sheet.js

@@ -51,9 +51,21 @@ export default {
       type: [String, Object],
       default: undefined
     },
+    breakpoints: {
+      type: Array,
+      default: () => undefined
+    },
+    backdropBreakpoint: {
+      type: Number,
+      default: undefined
+    },
+    pushBreakpoint: {
+      type: Number,
+      default: undefined
+    },
     ...colorProps
   },
-  emits: ['sheet:stepprogress', 'sheet:stepopen', 'sheet:stepclose', 'sheet:open', 'sheet:opened', 'sheet:close', 'sheet:closed', 'update:opened'],
+  emits: ['sheet:stepprogress', 'sheet:stepopen', 'sheet:stepclose', 'sheet:open', 'sheet:opened', 'sheet:close', 'sheet:closed', 'sheet:breakpoint', 'update:opened'],
   setup(props, _ref) {
     let {
       emit,
@@ -64,6 +76,9 @@ export default {
     let isOpened = props.opened;
     let isClosing = false;
     const elRef = ref(null);
+    const onBreakpoint = (instance, breakpoint) => {
+      emit('sheet:breakpoint', instance, breakpoint);
+    };
     const onStepProgress = (instance, progress) => {
       emit('sheet:stepprogress', instance, progress);
     };
@@ -103,7 +118,8 @@ export default {
           closed: onClosed,
           stepOpen: onStepOpen,
           stepClose: onStepClose,
-          stepProgress: onStepProgress
+          stepProgress: onStepProgress,
+          breakpoint: onBreakpoint
         }
       };
       const {
@@ -116,7 +132,10 @@ export default {
         swipeToClose,
         swipeToStep,
         swipeHandler,
-        containerEl
+        containerEl,
+        breakpoints,
+        backdropBreakpoint,
+        pushBreakpoint
       } = props;
       if (typeof animate !== 'undefined') sheetParams.animate = animate;
       if (typeof backdrop !== 'undefined') sheetParams.backdrop = backdrop;
@@ -128,6 +147,9 @@ export default {
       if (typeof swipeToStep !== 'undefined') sheetParams.swipeToStep = swipeToStep;
       if (typeof swipeHandler !== 'undefined') sheetParams.swipeHandler = swipeHandler;
       if (typeof containerEl !== 'undefined') sheetParams.containerEl = containerEl;
+      if (typeof breakpoints !== 'undefined') sheetParams.breakpoints = breakpoints;
+      if (typeof backdropBreakpoint !== 'undefined') sheetParams.backdropBreakpoint = backdropBreakpoint;
+      if (typeof pushBreakpoint !== 'undefined') sheetParams.pushBreakpoint = pushBreakpoint;
       f7ready(() => {
         f7Sheet = f7.sheet.create(sheetParams);
         if (props.opened) {

package/components/swiper-slide.js

@@ -0,0 +1,2 @@
+import { SwiperSlide } from 'swiper/vue';
+export default SwiperSlide;

package/components/swiper.js

@@ -0,0 +1,2 @@
+import { Swiper } from 'swiper/vue';
+export default Swiper;

package/framework7-vue-web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/draft-04/schema#",
   "framework": "vue",
   "name": "framework7-vue",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/framework7-vue.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 Vue 8.2.0
+ * Framework7 Vue 8.3.0
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
 import Framework7Vue from './shared/plugin.js';
 import { f7, f7ready, theme } from './shared/f7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-vue",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
   "type": "module",
   "exports": {
@@ -55,5 +55,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "July 6, 2023"
+  "releaseDate": "August 18, 2023"
 }