@xenknight/framework7-vue 0.0.2

package/components/popover.js

@@ -0,0 +1,157 @@
+import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "popover-arrow"
+};
+const _hoisted_2 = {
+  class: "popover-inner"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.arrow !== false ? (_openBlock(), _createElementBlock("div", _hoisted_1)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "default")])], 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 { modalStateClasses } from '../shared/modal-state-classes.js';
+export default {
+  name: 'f7-popover',
+  render,
+  props: {
+    opened: Boolean,
+    animate: {
+      type: Boolean,
+      default: undefined
+    },
+    targetEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    arrow: {
+      type: Boolean,
+      default: undefined
+    },
+    backdrop: {
+      type: Boolean,
+      default: undefined
+    },
+    backdropEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    closeByBackdropClick: {
+      type: Boolean,
+      default: undefined
+    },
+    closeByOutsideClick: {
+      type: Boolean,
+      default: undefined
+    },
+    closeOnEscape: {
+      type: Boolean,
+      default: undefined
+    },
+    containerEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    verticalPosition: {
+      type: String,
+      default: undefined
+    },
+    ...colorProps
+  },
+  emits: ['popover:open', 'popover:opened', 'popover:close', 'popover:closed', 'update:opened'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const f7Popover = ref(null);
+    // eslint-disable-next-line
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
+    const onOpen = instance => {
+      isOpened = true;
+      isClosing = false;
+      emit('popover:open', instance);
+      emit('update:opened', true);
+    };
+    const onOpened = instance => {
+      emit('popover:opened', instance);
+    };
+    const onClose = instance => {
+      isOpened = false;
+      isClosing = true;
+      emit('popover:close', instance);
+    };
+    const onClosed = instance => {
+      isClosing = false;
+      emit('popover:closed', instance);
+      emit('update:opened', false);
+    };
+    watch(() => props.opened, value => {
+      if (!f7Popover.value) return;
+      if (value) {
+        f7Popover.value.open();
+      } else {
+        f7Popover.value.close();
+      }
+    });
+    onMounted(() => {
+      if (!elRef.value) return;
+      const popoverParams = {
+        el: elRef.value,
+        on: {
+          open: onOpen,
+          opened: onOpened,
+          close: onClose,
+          closed: onClosed
+        }
+      };
+      const {
+        targetEl,
+        closeByBackdropClick,
+        closeByOutsideClick,
+        closeOnEscape,
+        arrow,
+        backdrop,
+        backdropEl,
+        containerEl,
+        verticalPosition
+      } = props;
+      if (typeof targetEl !== 'undefined') popoverParams.targetEl = targetEl;
+      if (typeof closeByBackdropClick !== 'undefined') popoverParams.closeByBackdropClick = closeByBackdropClick;
+      if (typeof closeByOutsideClick !== 'undefined') popoverParams.closeByOutsideClick = closeByOutsideClick;
+      if (typeof closeOnEscape !== 'undefined') popoverParams.closeOnEscape = closeOnEscape;
+      if (typeof arrow !== 'undefined') popoverParams.arrow = arrow;
+      if (typeof backdrop !== 'undefined') popoverParams.backdrop = backdrop;
+      if (typeof backdropEl !== 'undefined') popoverParams.backdropEl = backdropEl;
+      if (typeof containerEl !== 'undefined') popoverParams.containerEl = containerEl;
+      if (typeof verticalPosition !== 'undefined') popoverParams.verticalPosition = verticalPosition;
+      f7ready(() => {
+        f7Popover.value = f7.popover.create(popoverParams);
+        if (props.opened) {
+          f7Popover.value.open(targetEl, false);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Popover.value) {
+        f7Popover.value.destroy();
+      }
+      f7Popover.value = null;
+    });
+    const classes = computed(() => classNames('popover', modalStateClasses({
+      isOpened,
+      isClosing
+    }), colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+};

package/components/popup.d.ts

@@ -0,0 +1,99 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Popup: DefineComponent<
+  {
+    
+    tabletFullscreen: {
+      type: BooleanConstructor;
+    },
+
+    opened: {
+      type: BooleanConstructor;
+    },
+
+    push: {
+      type: BooleanConstructor;
+    },
+
+    animate: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdrop: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdropEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    closeByBackdropClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    closeOnEscape: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    swipeToClose: {
+      type: BooleanConstructor | StringConstructor;
+      default: boolean;
+    },
+
+    swipeHandler: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    containerEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    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,
+  ("popup:swipestart" | "popup:swipemove" | "popup:swipeend" | "popup:swipeclose" | "popup:open" | "popup:opened" | "popup:close" | "popup:closed" | "update:opened")[],
+  "popup:swipestart" | "popup:swipemove" | "popup:swipeend" | "popup:swipeclose" | "popup:open" | "popup:opened" | "popup:close" | "popup:closed" | "update:opened"
+>;
+
+export default Popup;
+  

package/components/popup.js

@@ -0,0 +1,161 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 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 { modalStateClasses } from '../shared/modal-state-classes.js';
+export default {
+  name: 'f7-popup',
+  render,
+  props: {
+    tabletFullscreen: Boolean,
+    opened: Boolean,
+    animate: {
+      type: Boolean,
+      default: undefined
+    },
+    backdrop: {
+      type: Boolean,
+      default: undefined
+    },
+    backdropEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    closeByBackdropClick: {
+      type: Boolean,
+      default: undefined
+    },
+    closeOnEscape: {
+      type: Boolean,
+      default: undefined
+    },
+    swipeToClose: {
+      type: [Boolean, String],
+      default: false
+    },
+    swipeHandler: {
+      type: [String, Object],
+      default: undefined
+    },
+    push: Boolean,
+    containerEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    ...colorProps
+  },
+  emits: ['popup:swipestart', 'popup:swipemove', 'popup:swipeend', 'popup:swipeclose', 'popup:open', 'popup:opened', 'popup:close', 'popup:closed', 'update:opened'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const f7Popup = ref(null);
+    // eslint-disable-next-line
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
+    const onSwipeStart = instance => {
+      emit('popup:swipestart', instance);
+    };
+    const onSwipeMove = instance => {
+      emit('popup:swipemove', instance);
+    };
+    const onSwipeEnd = instance => {
+      emit('popup:swipeend', instance);
+    };
+    const onSwipeClose = instance => {
+      emit('popup:swipeclose', instance);
+    };
+    const onOpen = instance => {
+      isOpened = true;
+      isClosing = false;
+      emit('popup:open', instance);
+      emit('update:opened', true);
+    };
+    const onOpened = instance => {
+      emit('popup:opened', instance);
+    };
+    const onClose = instance => {
+      isOpened = false;
+      isClosing = true;
+      emit('popup:close', instance);
+    };
+    const onClosed = instance => {
+      isClosing = false;
+      emit('popup:closed', instance);
+      emit('update:opened', false);
+    };
+    watch(() => props.opened, value => {
+      if (!f7Popup.value) return;
+      if (value) {
+        f7Popup.value.open();
+      } else {
+        f7Popup.value.close();
+      }
+    });
+    onMounted(() => {
+      if (!elRef.value) return;
+      const popupParams = {
+        el: elRef.value,
+        on: {
+          swipeStart: onSwipeStart,
+          swipeMove: onSwipeMove,
+          swipeEnd: onSwipeEnd,
+          swipeClose: onSwipeClose,
+          open: onOpen,
+          opened: onOpened,
+          close: onClose,
+          closed: onClosed
+        }
+      };
+      const {
+        closeByBackdropClick,
+        closeOnEscape,
+        animate,
+        backdrop,
+        backdropEl,
+        swipeToClose,
+        swipeHandler,
+        containerEl
+      } = props;
+      if (typeof closeByBackdropClick !== 'undefined') popupParams.closeByBackdropClick = closeByBackdropClick;
+      if (typeof closeOnEscape !== 'undefined') popupParams.closeOnEscape = closeOnEscape;
+      if (typeof animate !== 'undefined') popupParams.animate = animate;
+      if (typeof backdrop !== 'undefined') popupParams.backdrop = backdrop;
+      if (typeof backdropEl !== 'undefined') popupParams.backdropEl = backdropEl;
+      if (typeof swipeToClose !== 'undefined') popupParams.swipeToClose = swipeToClose;
+      if (typeof swipeHandler !== 'undefined') popupParams.swipeHandler = swipeHandler;
+      if (typeof containerEl !== 'undefined') popupParams.containerEl = containerEl;
+      f7ready(() => {
+        f7Popup.value = f7.popup.create(popupParams);
+        if (props.opened) {
+          f7Popup.value.open(false, true);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Popup.value) {
+        f7Popup.value.destroy();
+      }
+      f7Popup.value = null;
+    });
+    const classes = computed(() => classNames('popup', {
+      'popup-tablet-fullscreen': props.tabletFullscreen,
+      'popup-push': props.push
+    }, modalStateClasses({
+      isOpened,
+      isClosing
+    }), colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+};

package/components/preloader.d.ts

@@ -0,0 +1,50 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Preloader: DefineComponent<
+  {
+    
+    size: {
+      type: NumberConstructor | StringConstructor;
+    },
+
+    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,
+  
+>;
+
+export default Preloader;
+  

package/components/preloader.js

@@ -0,0 +1,65 @@
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createStaticVNode as _createStaticVNode } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "preloader-inner"
+};
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("svg", {
+  viewBox: "0 0 36 36"
+}, [/*#__PURE__*/_createElementVNode("circle", {
+  cx: "18",
+  cy: "18",
+  r: "16"
+})], -1);
+const _hoisted_3 = [_hoisted_2];
+const _hoisted_4 = {
+  key: 1,
+  class: "preloader-inner"
+};
+const _hoisted_5 = /*#__PURE__*/_createStaticVNode("<span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span>", 8);
+const _hoisted_13 = [_hoisted_5];
+const _hoisted_14 = {
+  key: 2,
+  class: "preloader-inner"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes),
+    style: _normalizeStyle(_ctx.style)
+  }, [_ctx.theme && _ctx.theme.md ? (_openBlock(), _createElementBlock("span", _hoisted_1, _hoisted_3)) : _ctx.theme && _ctx.theme.ios ? (_openBlock(), _createElementBlock("span", _hoisted_4, _hoisted_13)) : !_ctx.theme ? (_openBlock(), _createElementBlock("span", _hoisted_14)) : _createCommentVNode("", true)], 6);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
+export default {
+  name: 'f7-preloader',
+  render,
+  props: {
+    size: [Number, String],
+    ...colorProps
+  },
+  setup(props) {
+    const theme = useTheme();
+    const classes = computed(() => classNames('preloader', {
+      preloader: true
+    }, colorClasses(props)));
+    const style = computed(() => {
+      const preloaderStyle = {};
+      let sizeComputed = props.size;
+      if (sizeComputed && typeof sizeComputed === 'string' && sizeComputed.indexOf('px') >= 0) {
+        sizeComputed = sizeComputed.replace('px', '');
+      }
+      if (sizeComputed) {
+        preloaderStyle.width = `${sizeComputed}px`;
+        preloaderStyle.height = `${sizeComputed}px`;
+        preloaderStyle['--f7-preloader-size'] = `${sizeComputed}px`;
+      }
+      return preloaderStyle;
+    });
+    return {
+      classes,
+      style,
+      theme
+    };
+  }
+};

package/components/progressbar.d.ts

@@ -0,0 +1,54 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Progressbar: DefineComponent<
+  {
+    
+    progress: {
+      type: NumberConstructor;
+    },
+
+    infinite: {
+      type: BooleanConstructor;
+    },
+
+    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,
+  
+>;
+
+export default Progressbar;
+  

package/components/progressbar.js

@@ -0,0 +1,44 @@
+import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-progress"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("span", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes),
+    "data-progress": _ctx.progress
+  }, [_createElementVNode("span", {
+    style: _normalizeStyle(_ctx.transformStyle)
+  }, null, 4)], 10, _hoisted_1);
+}
+import { computed, ref } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-progressbar',
+  render,
+  props: {
+    progress: Number,
+    infinite: Boolean,
+    ...colorProps
+  },
+  setup(props) {
+    const elRef = ref(null);
+    const set = (newProgress, speed) => {
+      if (!f7) return;
+      f7.progressbar.set(elRef.value, newProgress, speed);
+    };
+    const transformStyle = computed(() => ({
+      transform: props.progress ? `translate3d(${-100 + props.progress}%, 0, 0)` : '',
+      WebkitTransform: props.progress ? `translate3d(${-100 + props.progress}%, 0, 0)` : ''
+    }));
+    const classes = computed(() => classNames('progressbar', {
+      'progressbar-infinite': props.infinite
+    }, colorClasses(props)));
+    return {
+      classes,
+      set,
+      transformStyle,
+      elRef
+    };
+  }
+};

package/components/radio.d.ts

@@ -0,0 +1,68 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Radio: DefineComponent<
+  {
+    
+    checked: {
+      type: BooleanConstructor;
+    },
+
+    name: {
+      type: NumberConstructor | StringConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    readonly: {
+      type: BooleanConstructor;
+    },
+
+    value: {
+      type: NumberConstructor | StringConstructor | BooleanConstructor;
+      default: undefined;
+    },
+
+    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,
+  ("update:checked" | "change")[],
+  "update:checked" | "change"
+>;
+
+export default Radio;
+