@xenknight/framework7-vue 0.0.2

package/components/subnavbar.d.ts

@@ -0,0 +1,59 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Subnavbar: DefineComponent<
+  {
+    
+    sliding: {
+      type: BooleanConstructor;
+    },
+
+    title: {
+      type: StringConstructor;
+    },
+
+    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,
+  
+>;
+
+export default Subnavbar;
+  

package/components/subnavbar.js

@@ -0,0 +1,40 @@
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "subnavbar-inner"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "subnavbar-title"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.inner ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_ctx.title ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(_ctx.title), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")])) : _renderSlot(_ctx.$slots, "default", {
+    key: 1
+  })], 2);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-subnavbar',
+  render,
+  props: {
+    sliding: Boolean,
+    title: String,
+    inner: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('subnavbar', {
+      sliding: props.sliding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/swipeout-actions.d.ts

@@ -0,0 +1,58 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const SwipeoutActions: DefineComponent<
+  {
+    
+    left: {
+      type: BooleanConstructor;
+    },
+
+    right: {
+      type: BooleanConstructor;
+    },
+
+    side: {
+      type: 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 SwipeoutActions;
+  

package/components/swipeout-actions.js

@@ -0,0 +1,33 @@
+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);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-swipeout-actions',
+  render,
+  props: {
+    left: Boolean,
+    right: Boolean,
+    side: String,
+    ...colorProps
+  },
+  setup(props) {
+    const side = computed(() => {
+      let sideComputed = props.side;
+      if (!sideComputed) {
+        if (props.left) sideComputed = 'left';
+        if (props.right) sideComputed = 'right';
+      }
+      return sideComputed;
+    });
+    const classes = computed(() => classNames(`swipeout-actions-${side.value}`, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/swipeout-button.d.ts

@@ -0,0 +1,75 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const SwipeoutButton: DefineComponent<
+  {
+    
+    text: {
+      type: StringConstructor;
+    },
+
+    confirmTitle: {
+      type: StringConstructor;
+    },
+
+    confirmText: {
+      type: StringConstructor;
+    },
+
+    overswipe: {
+      type: BooleanConstructor;
+    },
+
+    close: {
+      type: BooleanConstructor;
+    },
+
+    delete: {
+      type: BooleanConstructor;
+    },
+
+    href: {
+      type: 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,
+  ("click")[],
+  "click"
+>;
+
+export default SwipeoutButton;
+  

package/components/swipeout-button.js

@@ -0,0 +1,48 @@
+import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["href", "data-confirm", "data-confirm-title"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("a", {
+    href: _ctx.href || '#',
+    "data-confirm": _ctx.confirmText || undefined,
+    "data-confirm-title": _ctx.confirmTitle || undefined,
+    class: _normalizeClass(_ctx.classes),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onClick && _ctx.onClick(...arguments);
+    })
+  }, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-swipeout-button',
+  render,
+  props: {
+    text: String,
+    confirmTitle: String,
+    confirmText: String,
+    overswipe: Boolean,
+    close: Boolean,
+    delete: Boolean,
+    href: String,
+    ...colorProps
+  },
+  emits: ['click'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const onClick = e => {
+      emit('click', e);
+    };
+    const classes = computed(() => classNames({
+      'swipeout-overswipe': props.overswipe,
+      'swipeout-delete': props.delete,
+      'swipeout-close': props.close
+    }, colorClasses(props)));
+    return {
+      classes,
+      onClick
+    };
+  }
+};

package/components/tab.d.ts

@@ -0,0 +1,51 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Tab: DefineComponent<
+  {
+    
+    tabActive: {
+      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,
+  ("tab:show" | "tab:hide")[],
+  "tab:show" | "tab:hide"
+>;
+
+export default Tab;
+  

package/components/tab.js

@@ -0,0 +1,128 @@
+import { resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _ctx.isSwiper ? (_openBlock(), _createElementBlock("swiper-slide", {
+    key: 0,
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.tabContent ? (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.getComponent(_ctx.tabContent)), _mergeProps({
+    key: _ctx.tabContent.id
+  }, _ctx.getProps(_ctx.tabContent)), null, 16)) : _renderSlot(_ctx.$slots, "default", {
+    key: 1
+  })], 2)) : (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.tabContent ? (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.getComponent(_ctx.tabContent)), _mergeProps({
+    key: _ctx.tabContent.id
+  }, _ctx.getProps(_ctx.tabContent)), null, 16)) : _renderSlot(_ctx.$slots, "default", {
+    key: 1
+  })], 2));
+}
+import { computed, ref, inject, onMounted, onBeforeUnmount, onUpdated, toRaw } from 'vue';
+import { classNames, getComponentId } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
+import { useTab } from '../shared/use-tab.js';
+export default {
+  name: 'f7-tab',
+  render,
+  props: {
+    tabActive: Boolean,
+    ...colorProps
+  },
+  emits: ['tab:show', 'tab:hide'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const routerData = ref(null);
+    const route = inject('f7route', null);
+    const router = inject('f7route', null);
+    const isSwiper = inject('TabsSwipeableContext', false);
+    let initialTabContent = null;
+    if (!routerData.value && route && route.route && route.route.tab && route.route.tab.id === props.id) {
+      const {
+        component,
+        asyncComponent,
+        options: tabRouteOptions
+      } = route.route.tab;
+      if (component || asyncComponent) {
+        const parentProps = route.route.options && route.route.options.props;
+        initialTabContent = {
+          id: getComponentId(),
+          component: component || asyncComponent,
+          isAsync: !!asyncComponent,
+          props: {
+            ...(parentProps || {}),
+            ...(tabRouteOptions && tabRouteOptions.props || {}),
+            f7router: router,
+            f7route: route,
+            ...route.params
+          }
+        };
+      }
+    }
+    const tabContent = ref(initialTabContent || null);
+    const setTabContent = newContent => {
+      tabContent.value = newContent;
+    };
+    if (f7 && !routerData.value) {
+      routerData.value = {
+        setTabContent
+      };
+      f7routers.tabs.push(routerData.value);
+    }
+    onMounted(() => {
+      if (elRef.value && initialTabContent) {
+        elRef.value.f7RouterTabLoaded = true;
+      }
+      f7ready(() => {
+        if (!routerData.value) {
+          routerData.value = {
+            el: elRef.value,
+            setTabContent
+          };
+          f7routers.tabs.push(routerData.value);
+        } else {
+          routerData.value.el = elRef.value;
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (!routerData.value) return;
+      f7routers.tabs.splice(f7routers.tabs.indexOf(routerData.value), 1);
+      routerData.value = null;
+    });
+    onUpdated(() => {
+      if (!routerData.value || !f7) return;
+      f7events.emit('tabRouterDidUpdate', routerData.value);
+    });
+    useTab(elRef, emit);
+    const classes = computed(() => classNames('tab', {
+      'tab-active': props.tabActive
+    }, colorClasses(props)));
+    const getComponent = content => toRaw(content.component);
+    const getProps = content => {
+      const {
+        component: tabComponent,
+        props: tabProps
+      } = content;
+      let keys = [];
+      const passProps = {};
+      if (tabComponent && tabComponent.props) keys = Object.keys(tabComponent.props);
+      keys.forEach(key => {
+        if (key in tabProps) passProps[key] = tabProps[key];
+      });
+      return passProps;
+    };
+    return {
+      elRef,
+      classes,
+      tabContent,
+      getComponent,
+      getProps,
+      isSwiper
+    };
+  }
+};

package/components/tabs.d.ts

@@ -0,0 +1,63 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Tabs: DefineComponent<
+  {
+    
+    animated: {
+      type: BooleanConstructor;
+    },
+
+    swipeable: {
+      type: BooleanConstructor;
+    },
+
+    routable: {
+      type: BooleanConstructor;
+    },
+
+    swiperParams: {
+      type: 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,
+  
+>;
+
+export default Tabs;
+  

package/components/tabs.js

@@ -0,0 +1,59 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
+const _hoisted_1 = ["init"];
+function render(_ctx, _cache) {
+  return _ctx.animated ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classNames('tabs-animated-wrap', _ctx.classes))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.tabsClasses)
+  }, [_renderSlot(_ctx.$slots, "default")], 2)], 2)) : _ctx.swipeable ? (_openBlock(), _createElementBlock("swiper-container", {
+    key: 1,
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classNames(_ctx.tabsClasses, _ctx.classes)),
+    init: _ctx.swiperParams ? 'false' : 'true'
+  }, [_renderSlot(_ctx.$slots, "default")], 10, _hoisted_1)) : (_openBlock(), _createElementBlock("div", {
+    key: 2,
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classNames(_ctx.tabsClasses, _ctx.classes))
+  }, [_renderSlot(_ctx.$slots, "default")], 2));
+}
+import { computed, ref, onMounted, provide } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-tabs',
+  render,
+  props: {
+    animated: Boolean,
+    swipeable: Boolean,
+    routable: Boolean,
+    swiperParams: {
+      type: Object,
+      default: undefined
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const elRef = ref(null);
+    onMounted(() => {
+      if (!props.swipeable || !props.swiperParams) return;
+      if (!elRef.value) return;
+      Object.assign(elRef.value, props.swiperParams);
+      elRef.value.initialize();
+    });
+    const classes = computed(() => classNames(colorClasses(props)));
+    const tabsClasses = computed(() => classNames({
+      tabs: true,
+      'tabs-routable': props.routable
+    }));
+    const TabsSwipeableContext = computed(() => props.swipeable);
+    provide('TabsSwipeableContext', TabsSwipeableContext);
+    return {
+      elRef,
+      classes,
+      tabsClasses,
+      classNames
+    };
+  }
+};