@xenknight/framework7-vue 0.0.2

package/components/breadcrumbs-separator.js

@@ -0,0 +1,20 @@
+import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  ref: "elRef",
+  class: "breadcrumbs-separator"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, null, 512);
+}
+import { ref } from 'vue';
+export default {
+  name: 'f7-breadcrumbs-separator',
+  render,
+  props: {},
+  setup() {
+    const elRef = ref(null);
+    return {
+      elRef
+    };
+  }
+};

package/components/breadcrumbs.d.ts

@@ -0,0 +1,19 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Breadcrumbs: DefineComponent<
+  {
+    
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default Breadcrumbs;
+  

package/components/breadcrumbs.js

@@ -0,0 +1,20 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  ref: "elRef",
+  class: "breadcrumbs"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")], 512);
+}
+import { ref } from 'vue';
+export default {
+  name: 'f7-breadcrumbs',
+  render,
+  props: {},
+  setup() {
+    const elRef = ref(null);
+    return {
+      elRef
+    };
+  }
+};

package/components/button.d.ts

@@ -0,0 +1,371 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Button: DefineComponent<
+  {
+    
+    text: {
+      type: StringConstructor;
+    },
+
+    tabLink: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    tabLinkActive: {
+      type: BooleanConstructor;
+    },
+
+    type: {
+      type: StringConstructor;
+    },
+
+    target: {
+      type: StringConstructor;
+    },
+
+    round: {
+      type: BooleanConstructor;
+    },
+
+    roundMd: {
+      type: BooleanConstructor;
+    },
+
+    roundIos: {
+      type: BooleanConstructor;
+    },
+
+    fill: {
+      type: BooleanConstructor;
+    },
+
+    fillMd: {
+      type: BooleanConstructor;
+    },
+
+    fillIos: {
+      type: BooleanConstructor;
+    },
+
+    tonal: {
+      type: BooleanConstructor;
+    },
+
+    tonalMd: {
+      type: BooleanConstructor;
+    },
+
+    tonalIos: {
+      type: BooleanConstructor;
+    },
+
+    large: {
+      type: BooleanConstructor;
+    },
+
+    largeMd: {
+      type: BooleanConstructor;
+    },
+
+    largeIos: {
+      type: BooleanConstructor;
+    },
+
+    small: {
+      type: BooleanConstructor;
+    },
+
+    smallMd: {
+      type: BooleanConstructor;
+    },
+
+    smallIos: {
+      type: BooleanConstructor;
+    },
+
+    raised: {
+      type: BooleanConstructor;
+    },
+
+    raisedMd: {
+      type: BooleanConstructor;
+    },
+
+    raisedIos: {
+      type: BooleanConstructor;
+    },
+
+    outline: {
+      type: BooleanConstructor;
+    },
+
+    outlineMd: {
+      type: BooleanConstructor;
+    },
+
+    outlineIos: {
+      type: BooleanConstructor;
+    },
+
+    active: {
+      type: BooleanConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    preloader: {
+      type: BooleanConstructor;
+    },
+
+    preloaderSize: {
+      type: NumberConstructor | StringConstructor;
+    },
+
+    preloaderColor: {
+      type: StringConstructor;
+    },
+
+    loading: {
+      type: BooleanConstructor;
+    },
+
+    href: {
+      type: StringConstructor | BooleanConstructor;
+      default: string;
+    },
+
+    icon: {
+      type: StringConstructor;
+    },
+
+    iconMaterial: {
+      type: StringConstructor;
+    },
+
+    iconF7: {
+      type: StringConstructor;
+    },
+
+    iconIos: {
+      type: StringConstructor;
+    },
+
+    iconMd: {
+      type: StringConstructor;
+    },
+
+    iconColor: {
+      type: StringConstructor;
+    },
+
+    iconSize: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    },
+
+    searchbarEnable: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    searchbarDisable: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    searchbarClear: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    searchbarToggle: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    panelOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    panelClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    panelToggle: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    popupOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    popupClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    actionsOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    actionsClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    popoverOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    popoverClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    loginScreenOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    loginScreenClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    sheetOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    sheetClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    sortableEnable: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    sortableDisable: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    sortableToggle: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    cardOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    cardPreventOpen: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    cardClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    menuClose: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    back: {
+      type: BooleanConstructor;
+    },
+
+    external: {
+      type: BooleanConstructor;
+    },
+
+    force: {
+      type: BooleanConstructor;
+    },
+
+    animate: {
+      type: BooleanConstructor;
+    },
+
+    ignoreCache: {
+      type: BooleanConstructor;
+    },
+
+    reloadCurrent: {
+      type: BooleanConstructor;
+    },
+
+    reloadAll: {
+      type: BooleanConstructor;
+    },
+
+    reloadPrevious: {
+      type: BooleanConstructor;
+    },
+
+    reloadDetail: {
+      type: BooleanConstructor;
+    },
+
+    routeTabId: {
+      type: StringConstructor;
+    },
+
+    view: {
+      type: StringConstructor;
+    },
+
+    routeProps: {
+      type: ObjectConstructor;
+    },
+
+    preventRouter: {
+      type: BooleanConstructor;
+    },
+
+    transition: {
+      type: StringConstructor;
+    },
+
+    openIn: {
+      type: StringConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default Button;
+  

package/components/button.js

@@ -0,0 +1,182 @@
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createElementVNode as _createElementVNode, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 1
+};
+const _hoisted_2 = {
+  key: 1
+};
+function render(_ctx, _cache) {
+  const _component_f7_preloader = _resolveComponent("f7-preloader");
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
+    ref: "elRef",
+    class: _ctx.classesComputed
+  }, _ctx.attrs), {
+    default: _withCtx(() => [_ctx.preloader ? (_openBlock(), _createElementBlock(_Fragment, {
+      key: 0
+    }, [_createVNode(_component_f7_preloader, {
+      size: _ctx.preloaderSize,
+      color: _ctx.preloaderColor
+    }, null, 8, ["size", "color"]), _createElementVNode("span", null, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")])], 64)) : (_openBlock(), _createElementBlock(_Fragment, {
+      key: 1
+    }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 64))]),
+    _: 3
+  }, 16, ["class"]);
+}
+import { ref, computed } from 'vue';
+import { classNames, extend, isStringProp } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses, iconProps, colorProps, actionsProps, routerProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import f7Preloader from './preloader.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-button',
+  render,
+  components: {
+    f7Preloader,
+    f7UseIcon
+  },
+  props: {
+    text: String,
+    tabLink: [Boolean, String],
+    tabLinkActive: Boolean,
+    type: String,
+    href: {
+      type: [String, Boolean],
+      default: '#'
+    },
+    target: String,
+    round: Boolean,
+    roundMd: Boolean,
+    roundIos: Boolean,
+    fill: Boolean,
+    fillMd: Boolean,
+    fillIos: Boolean,
+    tonal: Boolean,
+    tonalMd: Boolean,
+    tonalIos: Boolean,
+    large: Boolean,
+    largeMd: Boolean,
+    largeIos: Boolean,
+    small: Boolean,
+    smallMd: Boolean,
+    smallIos: Boolean,
+    raised: Boolean,
+    raisedMd: Boolean,
+    raisedIos: Boolean,
+    outline: Boolean,
+    outlineMd: Boolean,
+    outlineIos: Boolean,
+    active: Boolean,
+    disabled: Boolean,
+    tooltip: String,
+    tooltipTrigger: String,
+    preloader: Boolean,
+    preloaderSize: [Number, String],
+    preloaderColor: String,
+    loading: Boolean,
+    ...iconProps,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
+  setup(props) {
+    const elRef = ref(null);
+    useTooltip(elRef, props);
+    useRouteProps(elRef, props);
+    const icon = computed(() => useIcon(props));
+    const tag = computed(() => props.type === 'submit' || props.type === 'reset' || props.type === 'button' ? 'button' : 'a');
+    const attrs = computed(() => {
+      const {
+        href,
+        tabLink,
+        target,
+        type
+      } = props;
+      let hrefComputed = href;
+      if (href === true) hrefComputed = '#';
+      if (href === false || tag.value === 'button') hrefComputed = undefined; // no href attribute
+      return extend({
+        href: hrefComputed,
+        target,
+        type,
+        'data-tab': isStringProp(tabLink) && tabLink || undefined
+      }, routerAttrs(props), actionsAttrs(props));
+    });
+    const classesComputed = computed(() => {
+      const {
+        tabLink,
+        tabLinkActive,
+        round,
+        roundMd,
+        roundIos,
+        fill,
+        fillMd,
+        fillIos,
+        tonal,
+        tonalMd,
+        tonalIos,
+        large,
+        largeMd,
+        largeIos,
+        small,
+        smallMd,
+        smallIos,
+        raised,
+        raisedMd,
+        raisedIos,
+        outline,
+        outlineMd,
+        outlineIos,
+        active,
+        disabled,
+        preloader,
+        loading
+      } = props;
+      return classNames('button', {
+        'tab-link': tabLink || tabLink === '',
+        'tab-link-active': tabLinkActive,
+        'button-round': round,
+        'button-round-ios': roundIos,
+        'button-round-md': roundMd,
+        'button-fill': fill,
+        'button-fill-ios': fillIos,
+        'button-fill-md': fillMd,
+        'button-tonal': tonal,
+        'button-tonal-ios': tonalIos,
+        'button-tonal-md': tonalMd,
+        'button-large': large,
+        'button-large-ios': largeIos,
+        'button-large-md': largeMd,
+        'button-small': small,
+        'button-small-ios': smallIos,
+        'button-small-md': smallMd,
+        'button-raised': raised,
+        'button-raised-ios': raisedIos,
+        'button-raised-md': raisedMd,
+        'button-active': active,
+        'button-outline': outline,
+        'button-outline-ios': outlineIos,
+        'button-outline-md': outlineMd,
+        'button-preloader': preloader,
+        'button-loading': loading,
+        disabled
+      }, colorClasses(props), routerClasses(props), actionsClasses(props));
+    });
+    return {
+      tag,
+      elRef,
+      attrs,
+      classesComputed,
+      icon
+    };
+  }
+};

package/components/card-content.d.ts

@@ -0,0 +1,51 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const CardContent: DefineComponent<
+  {
+    
+    padding: {
+      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 CardContent;
+  

package/components/card-content.js

@@ -0,0 +1,28 @@
+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-card-content',
+  render,
+  props: {
+    padding: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('card-content', {
+      'card-content-padding': props.padding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};