@xenknight/framework7-vue 0.0.2

package/components/link.js

@@ -0,0 +1,129 @@
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock, renderSlot as _renderSlot, mergeProps as _mergeProps } from "vue";
+function render(_ctx, _cache) {
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  const _component_f7_badge = _resolveComponent("f7-badge");
+  return _openBlock(), _createElementBlock("a", _mergeProps({
+    ref: "elRef",
+    class: _ctx.classes
+  }, _ctx.attrs), [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+    key: 0,
+    icon: _ctx.icon
+  }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createElementBlock("span", {
+    key: 1,
+    class: _normalizeClass(_ctx.isTabbarIcons ? 'tabbar-label' : '')
+  }, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _ctx.badge ? (_openBlock(), _createBlock(_component_f7_badge, {
+    key: 0,
+    color: _ctx.badgeColor
+  }, {
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.badge), 1)]),
+    _: 1
+  }, 8, ["color"])) : _createCommentVNode("", true)], 2)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 16);
+}
+import { computed, ref, inject } from 'vue';
+import { classNames, isStringProp } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses, colorProps, actionsProps, routerProps, iconProps } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
+import f7Badge from './badge.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-link',
+  render,
+  components: {
+    f7Badge,
+    f7UseIcon
+  },
+  props: {
+    noLinkClass: Boolean,
+    text: String,
+    tabLink: [Boolean, String],
+    tabLinkActive: Boolean,
+    tabbarLabel: Boolean,
+    iconOnly: Boolean,
+    badge: [String, Number],
+    badgeColor: [String],
+    href: {
+      type: [String, Boolean],
+      default: '#'
+    },
+    target: String,
+    tooltip: String,
+    tooltipTrigger: String,
+    smartSelect: Boolean,
+    smartSelectParams: Object,
+    ...iconProps,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const elRef = ref(null);
+    let f7SmartSelect = null;
+    useTooltip(elRef, props);
+    useRouteProps(elRef, props);
+    useSmartSelect(props, instance => {
+      f7SmartSelect = instance;
+    }, () => {
+      return elRef.value;
+    });
+    const TabbarContext = inject('TabbarContext', {
+      value: {}
+    });
+    const isTabbarIcons = computed(() => props.tabbarLabel || TabbarContext.value.tabbarHasIcons);
+    const attrs = computed(() => {
+      const {
+        href,
+        tabLink,
+        target
+      } = props;
+      let hrefComputed = href;
+      if (href === true) hrefComputed = '#';
+      if (href === false) hrefComputed = undefined; // no href attribute
+      return {
+        href: hrefComputed,
+        target,
+        'data-tab': isStringProp(tabLink) && tabLink || undefined,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    const classes = computed(() => {
+      const {
+        iconOnly,
+        text,
+        noLinkClass,
+        tabLink,
+        tabLinkActive,
+        smartSelect
+      } = props;
+      let iconOnlyComputed;
+      const hasChildren = slots && slots.default;
+      if (iconOnly || !text && !hasChildren) {
+        iconOnlyComputed = true;
+      } else {
+        iconOnlyComputed = false;
+      }
+      return classNames({
+        link: !(noLinkClass || isTabbarIcons.value),
+        'icon-only': iconOnlyComputed,
+        'tab-link': tabLink || tabLink === '',
+        'tab-link-active': tabLinkActive,
+        'smart-select': smartSelect
+      }, colorClasses(props), routerClasses(props), actionsClasses(props));
+    });
+    const icon = computed(() => useIcon(props));
+    return {
+      elRef,
+      icon,
+      isTabbarIcons,
+      attrs,
+      classes,
+      f7SmartSelect
+    };
+  }
+};

package/components/list-button.d.ts

@@ -0,0 +1,239 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const ListButton: DefineComponent<
+  {
+    
+    title: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    text: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    tabLink: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    tabLinkActive: {
+      type: BooleanConstructor;
+    },
+
+    link: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    href: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    target: {
+      type: StringConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    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,
+  ("click")[],
+  "click"
+>;
+
+export default ListButton;
+  

package/components/list-button.js

@@ -0,0 +1,71 @@
+import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, mergeProps as _mergeProps, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("li", null, [_createElementVNode("a", _mergeProps({
+    ref: "linkElRef",
+    class: _ctx.linkClasses
+  }, _ctx.linkAttrs, {
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onClick && _ctx.onClick(...arguments);
+    })
+  }), [_createTextVNode(_toDisplayString(_ctx.title) + " " + _toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "default")], 16)]);
+}
+import { computed, ref } from 'vue';
+import { classNames, isStringProp } from '../shared/utils.js';
+import { colorClasses, colorProps, actionsAttrs, actionsClasses, actionsProps, routerAttrs, routerClasses, routerProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+export default {
+  name: 'f7-list-button',
+  render,
+  props: {
+    title: [String, Number],
+    text: [String, Number],
+    tabLink: [Boolean, String],
+    tabLinkActive: Boolean,
+    link: [Boolean, String],
+    href: [Boolean, String],
+    target: String,
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
+  emits: ['click'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const linkElRef = ref(null);
+    const onClick = e => {
+      emit('click', e);
+    };
+    useTooltip(linkElRef, props);
+    useRouteProps(linkElRef, props);
+    const linkAttrs = computed(() => {
+      return {
+        href: typeof props.link === 'boolean' && typeof props.href === 'boolean' ? '#' : props.link || props.href,
+        target: props.target,
+        'data-tab': isStringProp(props.tabLink) && props.tabLink,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    const linkClasses = computed(() => {
+      return classNames({
+        'list-button': true,
+        'tab-link': props.tabLink || props.tabLink === '',
+        'tab-link-active': props.tabLinkActive,
+        ...colorClasses(props),
+        ...routerClasses(props),
+        ...actionsClasses(props)
+      });
+    });
+    return {
+      linkAttrs,
+      linkClasses,
+      onClick,
+      linkElRef
+    };
+  }
+};

package/components/list-group.d.ts

@@ -0,0 +1,71 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const ListGroup: DefineComponent<
+  {
+    
+    mediaList: {
+      type: BooleanConstructor;
+    },
+
+    simpleList: {
+      type: BooleanConstructor;
+    },
+
+    sortable: {
+      type: BooleanConstructor;
+    },
+
+    sortableOpposite: {
+      type: BooleanConstructor;
+    },
+
+    sortableTapHold: {
+      type: BooleanConstructor;
+    },
+
+    sortableMoveElements: {
+      type: 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,
+  
+>;
+
+export default ListGroup;
+  

package/components/list-group.js

@@ -0,0 +1,53 @@
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-sortable-move-elements"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes),
+    "data-sortable-move-elements": typeof _ctx.sortableMoveElements !== 'undefined' ? _ctx.sortableMoveElements.toString() : undefined
+  }, [_createElementVNode("ul", null, [_renderSlot(_ctx.$slots, "default")])], 10, _hoisted_1);
+}
+import { computed, provide, inject } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-list-group',
+  render,
+  props: {
+    mediaList: Boolean,
+    simpleList: Boolean,
+    sortable: Boolean,
+    sortableOpposite: Boolean,
+    sortableTapHold: Boolean,
+    sortableMoveElements: {
+      type: Boolean,
+      default: undefined
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const ListContextParent = inject('ListContext', {
+      value: {
+        listIsMedia: props.mediaList,
+        listIsSimple: props.simpleList,
+        listIsSortable: props.sortable,
+        listIsSortableOpposite: props.sortableOpposite
+      }
+    });
+    const ListContext = computed(() => ({
+      listIsMedia: props.mediaList || ListContextParent.value.listIsMedia,
+      listIsSimple: props.simpleList || ListContextParent.value.listIsSimple,
+      listIsSortable: props.sortable || ListContextParent.value.listIsSortable,
+      listIsSortableOpposite: props.sortableOpposite || ListContextParent.value.listIsSortableOpposite
+    }));
+    provide('ListContext', ListContext);
+    const classes = computed(() => classNames('list-group', {
+      'media-list': props.mediaList,
+      sortable: props.sortable,
+      'sortable-tap-hold': props.sortableTapHold,
+      'sortable-opposite': props.sortableOpposite
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/list-index.d.ts

@@ -0,0 +1,81 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const ListIndex: DefineComponent<
+  {
+    
+    listEl: {
+      type: StringConstructor | ObjectConstructor;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    indexes: {
+      type: StringConstructor | ArrayConstructor;
+      default: string;
+    },
+
+    scrollList: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    label: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    iosItemHeight: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    mdItemHeight: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    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,
+  ("listindex:select")[],
+  "listindex:select"
+>;
+
+export default ListIndex;
+