@xenknight/framework7-vue 0.0.2

package/components/text-editor.d.ts

@@ -0,0 +1,95 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const TextEditor: DefineComponent<
+  {
+    
+    buttons: {
+      type: ArrayConstructor;
+    },
+
+    customButtons: {
+      type: ObjectConstructor;
+    },
+
+    mode: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    value: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    dividers: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    imageUrlText: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    linkUrlText: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    placeholder: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    clearFormattingOnPaste: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    resizable: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("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")[],
+  "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"
+>;
+
+export default TextEditor;
+  

package/components/text-editor.js

@@ -0,0 +1,147 @@
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  class: "text-editor-content",
+  contenteditable: ""
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "root-start"), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "root-end"), _renderSlot(_ctx.$slots, "root")], 2);
+}
+import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+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,
+  props: {
+    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
+    },
+    ...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(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7TextEditor = null;
+    const elRef = ref(null);
+    const onChange = (editor, editorValue) => {
+      emit('texteditor:change', editorValue);
+      emit('texteditorChange', editorValue);
+    };
+    const onInput = (editor, editorValue) => {
+      emit('texteditor:input', editorValue);
+      emit('texteditorInput', editorValue);
+    };
+    const onFocus = () => {
+      emit('texteditor:focus');
+      emit('texteditorFocus');
+    };
+    const onBlur = () => {
+      emit('texteditor:blur');
+      emit('texteditorBlur');
+    };
+    const onButtonClick = (editor, button) => {
+      emit('texteditor:buttonclick', button);
+    };
+    const onKeyboardOpen = () => {
+      emit('texteditor:keyboardopen');
+    };
+    const onKeyboardClose = () => {
+      emit('texteditor:keyboardclose');
+    };
+    const onPopoverOpen = () => {
+      emit('texteditor:popoveropen');
+    };
+    const onPopoverClose = () => {
+      emit('texteditor:popoverclose');
+    };
+    const onInsertLink = (editor, url) => {
+      emit('texteditor:insertlink', url);
+    };
+    const onInsertImage = (editor, url) => {
+      emit('texteditor:insertimage', url);
+    };
+    watch(() => props.value, newValue => {
+      if (f7TextEditor) {
+        f7TextEditor.setValue(newValue);
+      }
+    });
+    onMounted(() => {
+      const params = 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
+        }
+      });
+      f7ready(() => {
+        f7TextEditor = f7.textEditor.create(params);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7TextEditor && f7TextEditor.destroy) {
+        f7TextEditor.destroy();
+      }
+      f7TextEditor = null;
+    });
+    const classes = computed(() => classNames('text-editor', props.resizable && 'text-editor-resizable', colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+};

package/components/toggle.d.ts

@@ -0,0 +1,80 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Toggle: DefineComponent<
+  {
+    
+    checked: {
+      type: BooleanConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    readonly: {
+      type: BooleanConstructor;
+    },
+
+    name: {
+      type: StringConstructor;
+    },
+
+    value: {
+      type: StringConstructor | NumberConstructor | ArrayConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("change" | "toggle:change" | "update:checked")[],
+  "change" | "toggle:change" | "update:checked"
+>;
+
+export default Toggle;
+  

package/components/toggle.js

@@ -0,0 +1,89 @@
+import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["name", "disabled", "readonly", "checked", "value"];
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", {
+  class: "toggle-icon"
+}, null, -1);
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("label", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("input", {
+    type: "checkbox",
+    name: _ctx.name,
+    disabled: _ctx.disabled,
+    readonly: _ctx.readonly,
+    checked: _ctx.checked,
+    value: _ctx.value,
+    onChange: _cache[0] || (_cache[0] = function () {
+      return _ctx.onChange && _ctx.onChange(...arguments);
+    })
+  }, null, 40, _hoisted_1), _hoisted_2], 2);
+}
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+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,
+  props: {
+    init: {
+      type: Boolean,
+      default: true
+    },
+    checked: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    name: String,
+    value: [String, Number, Array],
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps
+  },
+  emits: ['change', 'toggle:change', 'update:checked'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7Toggle = null;
+    const elRef = ref(null);
+    useTooltip(elRef, props);
+    const onChange = event => {
+      emit('change', event);
+    };
+    watch(() => props.checked, newValue => {
+      if (!f7Toggle) return;
+      f7Toggle.checked = newValue;
+    });
+    onMounted(() => {
+      f7ready(() => {
+        if (!props.init || !elRef.value) return;
+        f7Toggle = f7.toggle.create({
+          el: elRef.value,
+          on: {
+            change(toggleInstance) {
+              emit('toggle:change', toggleInstance.checked);
+              emit('update:checked', toggleInstance.checked);
+            }
+          }
+        });
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Toggle && f7Toggle.destroy && f7Toggle.$el) {
+        f7Toggle.destroy();
+      }
+      f7Toggle = null;
+    });
+    const classes = computed(() => classNames('toggle', {
+      disabled: props.disabled
+    }, colorClasses(props)));
+    return {
+      classes,
+      elRef,
+      f7Toggle,
+      onChange
+    };
+  }
+};

package/components/toolbar.d.ts

@@ -0,0 +1,108 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Toolbar: DefineComponent<
+  {
+    
+    tabbar: {
+      type: BooleanConstructor;
+    },
+
+    icons: {
+      type: BooleanConstructor;
+    },
+
+    scrollable: {
+      type: BooleanConstructor;
+    },
+
+    hidden: {
+      type: BooleanConstructor;
+    },
+
+    outline: {
+      type: any;
+      default: boolean;
+    },
+
+    position: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    topMd: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    topIos: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    top: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    bottomMd: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    bottomIos: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    bottom: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    inner: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("toolbar:hide" | "toolbar:show")[],
+  "toolbar:hide" | "toolbar:show"
+>;
+
+export default Toolbar;
+  

package/components/toolbar.js

@@ -0,0 +1,135 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  className: "toolbar-inner"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "before-inner"), _ctx.inner ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")])) : _renderSlot(_ctx.$slots, "default", {
+    key: 1
+  }), _renderSlot(_ctx.$slots, "after-inner")], 2);
+}
+import { computed, ref, provide, onMounted, onBeforeUnmount } from 'vue';
+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,
+  props: {
+    tabbar: Boolean,
+    icons: Boolean,
+    scrollable: Boolean,
+    hidden: Boolean,
+    outline: {
+      type: Boolean,
+      default: true
+    },
+    position: {
+      type: String,
+      default: undefined
+    },
+    topMd: {
+      type: Boolean,
+      default: undefined
+    },
+    topIos: {
+      type: Boolean,
+      default: undefined
+    },
+    top: {
+      type: Boolean,
+      default: undefined
+    },
+    bottomMd: {
+      type: Boolean,
+      default: undefined
+    },
+    bottomIos: {
+      type: Boolean,
+      default: undefined
+    },
+    bottom: {
+      type: Boolean,
+      default: undefined
+    },
+    inner: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['toolbar:hide', 'toolbar:show'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const theme = useTheme();
+    const onHide = toolbarEl => {
+      if (elRef.value !== toolbarEl) return;
+      emit('toolbar:hide');
+    };
+    const onShow = toolbarEl => {
+      if (elRef.value !== toolbarEl) return;
+      emit('toolbar:show');
+    };
+    const hide = animate => {
+      if (!f7) return;
+      f7.toolbar.hide(elRef.value, animate);
+    };
+    const show = animate => {
+      if (!f7) return;
+      f7.toolbar.show(elRef.value, animate);
+    };
+    onMounted(() => {
+      if (props.tabbar && f7 && elRef.value) {
+        f7.toolbar.setHighlight(elRef.value);
+      }
+      f7.on('toolbarShow', onShow);
+      f7.on('toolbarHide', onHide);
+    });
+    onBeforeUnmount(() => {
+      f7.off('toolbarShow', onShow);
+      f7.off('toolbarHide', onHide);
+    });
+    const TabbarContext = computed(() => ({
+      tabbarHasIcons: props.icons
+    }));
+    provide('TabbarContext', TabbarContext);
+    const classes = computed(() => {
+      const {
+        tabbar,
+        bottomMd,
+        bottomIos,
+        bottom,
+        position,
+        topMd,
+        topIos,
+        top,
+        icons,
+        scrollable,
+        hidden,
+        outline
+      } = props;
+      return classNames('toolbar', {
+        tabbar,
+        'toolbar-bottom': theme.value && theme.value.md && bottomMd || theme.value && theme.value.ios && bottomIos || bottom || position === 'bottom',
+        'toolbar-top': theme.value && theme.value.md && topMd || theme.value && theme.value.ios && topIos || top || position === 'top',
+        'tabbar-icons': icons,
+        'tabbar-scrollable': scrollable,
+        'toolbar-hidden': hidden,
+        'no-outline': !outline
+      }, colorClasses(props));
+    });
+    return {
+      classes,
+      elRef,
+      hide,
+      show
+    };
+  }
+};