framework7-vue 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/text-editor.js

@@ -1,7 +1,5 @@
-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 } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   class: "text-editor-content",
   contenteditable: ""
 };
@@ -14,13 +12,13 @@ function render(_ctx, _cache) {
 }
 
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { classNames, noUndefinedProps } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
 export default {
   name: 'f7-text-editor',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     mode: {
       type: String,
       default: undefined
@@ -54,71 +52,72 @@ export default {
     resizable: {
       type: Boolean,
       default: false
-    }
-  }, colorProps),
+    },
+    ...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 = ref(null);
 
-    var onChange = function onChange(editor, editorValue) {
+  setup(props, {
+    emit
+  }) {
+    let f7TextEditor = null;
+    const elRef = ref(null);
+
+    const onChange = (editor, editorValue) => {
       emit('texteditor:change', editorValue);
       emit('texteditorChange', editorValue);
     };
 
-    var onInput = function onInput(editor, editorValue) {
+    const onInput = (editor, editorValue) => {
       emit('texteditor:input', editorValue);
       emit('texteditorInput', editorValue);
     };
 
-    var onFocus = function onFocus() {
+    const onFocus = () => {
       emit('texteditor:focus');
       emit('texteditorFocus');
     };
 
-    var onBlur = function onBlur() {
+    const onBlur = () => {
       emit('texteditor:blur');
       emit('texteditorBlur');
     };
 
-    var onButtonClick = function onButtonClick(editor, button) {
+    const onButtonClick = (editor, button) => {
       emit('texteditor:buttonclick', button);
     };
 
-    var onKeyboardOpen = function onKeyboardOpen() {
+    const onKeyboardOpen = () => {
       emit('texteditor:keyboardopen');
     };
 
-    var onKeyboardClose = function onKeyboardClose() {
+    const onKeyboardClose = () => {
       emit('texteditor:keyboardclose');
     };
 
-    var onPopoverOpen = function onPopoverOpen() {
+    const onPopoverOpen = () => {
       emit('texteditor:popoveropen');
     };
 
-    var onPopoverClose = function onPopoverClose() {
+    const onPopoverClose = () => {
       emit('texteditor:popoverclose');
     };
 
-    var onInsertLink = function onInsertLink(editor, url) {
+    const onInsertLink = (editor, url) => {
       emit('texteditor:insertlink', url);
     };
 
-    var onInsertImage = function onInsertImage(editor, url) {
+    const onInsertImage = (editor, url) => {
       emit('texteditor:insertimage', url);
     };
 
-    watch(function () {
-      return props.value;
-    }, function (newValue) {
+    watch(() => props.value, newValue => {
       if (f7TextEditor) {
         f7TextEditor.setValue(newValue);
       }
     });
-    onMounted(function () {
-      var params = noUndefinedProps({
+    onMounted(() => {
+      const params = noUndefinedProps({
         el: elRef.value,
         mode: props.mode,
         value: props.value,
@@ -143,23 +142,22 @@ export default {
           insertImage: onInsertImage
         }
       });
-      f7ready(function () {
+      f7ready(() => {
         f7TextEditor = f7.textEditor.create(params);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7TextEditor && f7TextEditor.destroy) {
         f7TextEditor.destroy();
       }
 
       f7TextEditor = null;
     });
-    var classes = computed(function () {
-      return classNames('text-editor', props.resizable && 'text-editor-resizable', colorClasses(props));
-    });
+    const classes = computed(() => classNames('text-editor', props.resizable && 'text-editor-resizable', colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };

package/{esm/components → components}/toggle.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, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
-var _hoisted_1 = /*#__PURE__*/_createVNode("span", {
+const _hoisted_1 = /*#__PURE__*/_createVNode("span", {
   class: "toggle-icon"
 }, null, -1);
 
@@ -17,21 +15,19 @@ function render(_ctx, _cache) {
     readonly: _ctx.readonly,
     checked: _ctx.checked,
     value: _ctx.value,
-    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", "disabled", "readonly", "checked", "value"]), _hoisted_1], 2);
 }
 
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 export default {
   name: 'f7-toggle',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     init: {
       type: Boolean,
       default: true
@@ -42,56 +38,57 @@ export default {
     name: String,
     value: [String, Number, Array],
     tooltip: String,
-    tooltipTrigger: String
-  }, colorProps),
+    tooltipTrigger: String,
+    ...colorProps
+  },
   emits: ['change', 'toggle:change', 'update:checked'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Toggle = null;
-    var elRef = ref(null);
+
+  setup(props, {
+    emit
+  }) {
+    let f7Toggle = null;
+    const elRef = ref(null);
     useTooltip(elRef, props);
 
-    var onChange = function onChange(event) {
+    const onChange = event => {
       emit('change', event);
     };
 
-    watch(function () {
-      return props.checked;
-    }, function (newValue) {
+    watch(() => props.checked, newValue => {
       if (!f7Toggle) return;
       f7Toggle.checked = newValue;
     });
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         if (!props.init || !elRef.value) return;
         f7Toggle = f7.toggle.create({
           el: elRef.value,
           on: {
-            change: function change(toggleInstance) {
+            change(toggleInstance) {
               emit('toggle:change', toggleInstance.checked);
               emit('update:checked', toggleInstance.checked);
             }
+
           }
         });
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Toggle && f7Toggle.destroy && f7Toggle.$el) {
         f7Toggle.destroy();
       }
 
       f7Toggle = null;
     });
-    var classes = computed(function () {
-      return classNames('toggle', {
-        disabled: props.disabled
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames('toggle', {
+      disabled: props.disabled
+    }, colorClasses(props)));
     return {
-      classes: classes,
-      elRef: elRef,
-      f7Toggle: f7Toggle,
-      onChange: onChange
+      classes,
+      elRef,
+      f7Toggle,
+      onChange
     };
   }
+
 };

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

@@ -1,7 +1,5 @@
-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, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   className: "toolbar-inner"
 };
@@ -16,14 +14,14 @@ function render(_ctx, _cache) {
 }
 
 import { computed, ref, provide, onMounted, onBeforeUnmount } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7 } from '../shared/f7';
-import { useTheme } from '../shared/use-theme';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7 } from '../shared/f7.js';
+import { useTheme } from '../shared/use-theme.js';
 export default {
   name: 'f7-toolbar',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     tabbar: Boolean,
     labels: Boolean,
     scrollable: Boolean,
@@ -70,35 +68,38 @@ export default {
     inner: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['toolbar:hide', 'toolbar:show'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = ref(null);
-    var theme = useTheme();
 
-    var onHide = function onHide(toolbarEl) {
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+    const theme = useTheme();
+
+    const onHide = toolbarEl => {
       if (elRef.value !== toolbarEl) return;
       emit('toolbar:hide');
     };
 
-    var onShow = function onShow(toolbarEl) {
+    const onShow = toolbarEl => {
       if (elRef.value !== toolbarEl) return;
       emit('toolbar:show');
     };
 
-    var hide = function hide(animate) {
+    const hide = animate => {
       if (!f7) return;
       f7.toolbar.hide(elRef.value, animate);
     };
 
-    var show = function show(animate) {
+    const show = animate => {
       if (!f7) return;
       f7.toolbar.show(elRef.value, animate);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (props.tabbar && f7 && elRef.value) {
         f7.toolbar.setHighlight(elRef.value);
       }
@@ -106,35 +107,35 @@ export default {
       f7.on('toolbarShow', onShow);
       f7.on('toolbarHide', onHide);
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       f7.off('toolbarShow', onShow);
       f7.off('toolbarHide', onHide);
     });
-    var TabbarContext = computed(function () {
-      return {
-        tabbarHasLabels: props.labels
-      };
-    });
+    const TabbarContext = computed(() => ({
+      tabbarHasLabels: props.labels
+    }));
     provide('TabbarContext', TabbarContext);
-    var classes = 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;
+    const classes = computed(() => {
+      const {
+        tabbar,
+        bottomMd,
+        bottomIos,
+        bottomAurora,
+        bottom,
+        position,
+        topMd,
+        topIos,
+        topAurora,
+        top,
+        labels,
+        scrollable,
+        hidden,
+        noShadow,
+        noHairline,
+        noBorder
+      } = props;
       return classNames('toolbar', {
-        tabbar: 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,
@@ -145,10 +146,11 @@ export default {
       }, colorClasses(props));
     });
     return {
-      classes: classes,
-      elRef: elRef,
-      hide: hide,
-      show: show
+      classes,
+      elRef,
+      hide,
+      show
     };
   }
+
 };

package/components/treeview-item.js

@@ -0,0 +1,152 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  className: "treeview-toggle"
+};
+const _hoisted_2 = {
+  className: "treeview-item-content"
+};
+const _hoisted_3 = {
+  className: "treeview-item-label"
+};
+const _hoisted_4 = {
+  key: 0,
+  className: "treeview-item-children"
+};
+
+function render(_ctx, _cache) {
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+
+  return _openBlock(), _createBlock("div", {
+    ref: "elRef",
+    class: _ctx.classes
+  }, [(_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.itemRootTag), _mergeProps({
+    class: _ctx.itemRootClasses
+  }, _ctx.itemRootAttrs, {
+    onClick: _ctx.onClick
+  }), {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "root-start"), _ctx.needToggle ? (_openBlock(), _createBlock("div", _hoisted_1)) : _createCommentVNode("", true), _createVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "content-start"), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "media"), _createVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "label-start"), _createTextVNode(" " + _toDisplayString(_ctx.label) + " ", 1), _renderSlot(_ctx.$slots, "label")]), _renderSlot(_ctx.$slots, "content"), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "root"), _renderSlot(_ctx.$slots, "root-end")]),
+    _: 3
+  }, 16, ["class", "onClick"])), _ctx.hasChildren ? (_openBlock(), _createBlock("div", _hoisted_4, [_renderSlot(_ctx.$slots, "children-start"), _renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "children")])) : _createCommentVNode("", true)], 2);
+}
+
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, actionsAttrs, actionsProps, actionsClasses, routerAttrs, routerProps, routerClasses, iconProps } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-treeview-item',
+  render,
+  components: {
+    f7UseIcon
+  },
+  props: {
+    toggle: {
+      type: Boolean,
+      default: undefined
+    },
+    itemToggle: Boolean,
+    selectable: Boolean,
+    selected: Boolean,
+    opened: Boolean,
+    label: String,
+    loadChildren: Boolean,
+    link: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    ...colorProps,
+    ...actionsProps,
+    ...iconProps,
+    ...routerProps
+  },
+  emits: ['click', 'treeview:open', 'treeview:close', 'treeview:loadchildren'],
+
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const elRef = ref(null);
+    const hasChildren = computed(() => {
+      return slots.default || slots.children || slots['children-start'];
+    });
+    const needToggle = computed(() => typeof props.toggle === 'undefined' ? hasChildren.value : props.toggle);
+    const icon = computed(() => useIcon(props));
+
+    const onClick = event => {
+      emit('click', event);
+    };
+
+    const onOpen = el => {
+      if (elRef.value !== el) return;
+      emit('treeview:open', el);
+    };
+
+    const onClose = el => {
+      if (elRef.value !== el) return;
+      emit('treeview:close', el);
+    };
+
+    const onLoadChildren = (el, done) => {
+      if (elRef.value !== el) return;
+      emit('treeview:loadchildren', el, done);
+    };
+
+    const attachEvents = () => {
+      if (!elRef.value) return;
+      f7ready(() => {
+        f7.on('treeviewOpen', onOpen);
+        f7.on('treeviewClose', onClose);
+        f7.on('treeviewLoadChildren', onLoadChildren);
+      });
+    };
+
+    const detachEvents = () => {
+      if (!f7) return;
+      f7.off('treeviewOpen', onOpen);
+      f7.off('treeviewClose', onClose);
+      f7.off('treeviewLoadChildren', onLoadChildren);
+    };
+
+    onMounted(() => attachEvents());
+    onBeforeUnmount(() => detachEvents());
+    const classes = computed(() => classNames('treeview-item', {
+      'treeview-item-opened': props.opened,
+      'treeview-load-children': props.loadChildren
+    }, colorClasses(props)));
+    const itemRootClasses = computed(() => classNames('treeview-item-root', {
+      'treeview-item-selectable': props.selectable,
+      'treeview-item-selected': props.selected,
+      'treeview-item-toggle': props.itemToggle
+    }, routerClasses(props), actionsClasses(props)));
+    const itemRootTag = computed(() => props.link || props.link === '' ? 'a' : 'div');
+    const itemRootAttrs = computed(() => {
+      let href = props.link;
+      if (props.link === true) href = '#';
+      if (props.link === false) href = undefined; // no href attribute
+
+      return {
+        href,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    return {
+      itemRootTag,
+      itemRootAttrs,
+      itemRootClasses,
+      classes,
+      icon,
+      onClick,
+      hasChildren,
+      needToggle,
+      elRef
+    };
+  }
+
+};

package/components/treeview.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-treeview',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('treeview', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/use-icon.js

@@ -0,0 +1,31 @@
+import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, mergeProps as _mergeProps, createCommentVNode as _createCommentVNode } from "vue";
+
+function render(_ctx, _cache) {
+  const _component_f7_badge = _resolveComponent("f7-badge");
+
+  const _component_f7_icon = _resolveComponent("f7-icon");
+
+  return _openBlock(), _createBlock(_component_f7_icon, _ctx.icon.props, {
+    default: _withCtx(() => [_ctx.icon.badge ? (_openBlock(), _createBlock(_component_f7_badge, _mergeProps({
+      key: 0
+    }, _ctx.icon.badge.props), {
+      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.icon.badge.content), 1)]),
+      _: 1
+    }, 16)) : _createCommentVNode("", true)]),
+    _: 1
+  }, 16);
+}
+
+import f7Icon from './icon.js';
+import f7Badge from './badge.js';
+export default {
+  name: 'f7-use-icon',
+  render,
+  components: {
+    f7Icon,
+    f7Badge
+  },
+  props: {
+    icon: Object
+  }
+};