@xenknight/framework7-vue 0.0.2

package/components/treeview-item.d.ts

@@ -0,0 +1,265 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const TreeviewItem: DefineComponent<
+  {
+    
+    itemToggle: {
+      type: BooleanConstructor;
+    },
+
+    selectable: {
+      type: BooleanConstructor;
+    },
+
+    selected: {
+      type: BooleanConstructor;
+    },
+
+    opened: {
+      type: BooleanConstructor;
+    },
+
+    label: {
+      type: StringConstructor;
+    },
+
+    loadChildren: {
+      type: BooleanConstructor;
+    },
+
+    toggle: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    link: {
+      type: BooleanConstructor | StringConstructor;
+      default: undefined;
+    },
+
+    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;
+    },
+
+    icon: {
+      type: StringConstructor;
+    },
+
+    iconMaterial: {
+      type: StringConstructor;
+    },
+
+    iconF7: {
+      type: StringConstructor;
+    },
+
+    iconIos: {
+      type: StringConstructor;
+    },
+
+    iconMd: {
+      type: StringConstructor;
+    },
+
+    iconColor: {
+      type: StringConstructor;
+    },
+
+    iconSize: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    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" | "treeview:open" | "treeview:close" | "treeview:loadchildren")[],
+  "click" | "treeview:open" | "treeview:close" | "treeview:loadchildren"
+>;
+
+export default TreeviewItem;
+  

package/components/treeview-item.js

@@ -0,0 +1,140 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  className: "treeview-toggle"
+};
+const _hoisted_2 = {
+  className: "treeview-item-content"
+};
+const _hoisted_3 = {
+  className: "treeview-item-label"
+};
+const _hoisted_4 = {
+  key: 0,
+  className: "treeview-item-children"
+};
+function render(_ctx, _cache) {
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [(_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.itemRootTag), _mergeProps({
+    class: _ctx.itemRootClasses
+  }, _ctx.itemRootAttrs, {
+    onClick: _ctx.onClick
+  }), {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "root-start"), _ctx.needToggle ? (_openBlock(), _createElementBlock("div", _hoisted_1)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "content-start"), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "media"), _createElementVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "label-start"), _createTextVNode(" " + _toDisplayString(_ctx.label) + " ", 1), _renderSlot(_ctx.$slots, "label")]), _renderSlot(_ctx.$slots, "content"), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "root"), _renderSlot(_ctx.$slots, "root-end")]),
+    _: 3
+  }, 16, ["class", "onClick"])), _ctx.hasChildren ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_renderSlot(_ctx.$slots, "children-start"), _renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "children")])) : _createCommentVNode("", true)], 2);
+}
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, actionsAttrs, actionsProps, actionsClasses, routerAttrs, routerProps, routerClasses, iconProps } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-treeview-item',
+  render,
+  components: {
+    f7UseIcon
+  },
+  props: {
+    toggle: {
+      type: Boolean,
+      default: undefined
+    },
+    itemToggle: Boolean,
+    selectable: Boolean,
+    selected: Boolean,
+    opened: Boolean,
+    label: String,
+    loadChildren: Boolean,
+    link: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    ...colorProps,
+    ...actionsProps,
+    ...iconProps,
+    ...routerProps
+  },
+  emits: ['click', 'treeview:open', 'treeview:close', 'treeview:loadchildren'],
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const hasChildren = computed(() => {
+      return slots.default || slots.children || slots['children-start'];
+    });
+    const needToggle = computed(() => typeof props.toggle === 'undefined' ? hasChildren.value : props.toggle);
+    const icon = computed(() => useIcon(props));
+    const onClick = event => {
+      emit('click', event);
+    };
+    const onOpen = el => {
+      if (elRef.value !== el) return;
+      emit('treeview:open', el);
+    };
+    const onClose = el => {
+      if (elRef.value !== el) return;
+      emit('treeview:close', el);
+    };
+    const onLoadChildren = (el, done) => {
+      if (elRef.value !== el) return;
+      emit('treeview:loadchildren', el, done);
+    };
+    const attachEvents = () => {
+      if (!elRef.value) return;
+      f7ready(() => {
+        f7.on('treeviewOpen', onOpen);
+        f7.on('treeviewClose', onClose);
+        f7.on('treeviewLoadChildren', onLoadChildren);
+      });
+    };
+    const detachEvents = () => {
+      if (!f7) return;
+      f7.off('treeviewOpen', onOpen);
+      f7.off('treeviewClose', onClose);
+      f7.off('treeviewLoadChildren', onLoadChildren);
+    };
+    onMounted(() => attachEvents());
+    onBeforeUnmount(() => detachEvents());
+    const classes = computed(() => classNames('treeview-item', {
+      'treeview-item-opened': props.opened,
+      'treeview-load-children': props.loadChildren
+    }, colorClasses(props)));
+    const itemRootClasses = computed(() => classNames('treeview-item-root', {
+      'treeview-item-selectable': props.selectable,
+      'treeview-item-selected': props.selected,
+      'treeview-item-toggle': props.itemToggle
+    }, routerClasses(props), actionsClasses(props)));
+    const itemRootTag = computed(() => props.link || props.link === '' ? 'a' : 'div');
+    const itemRootAttrs = computed(() => {
+      let href = props.link;
+      if (props.link === true) href = '#';
+      if (props.link === false) href = undefined; // no href attribute
+      return {
+        href,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    return {
+      itemRootTag,
+      itemRootAttrs,
+      itemRootClasses,
+      classes,
+      icon,
+      onClick,
+      hasChildren,
+      needToggle,
+      elRef
+    };
+  }
+};

package/components/treeview.d.ts

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

package/components/treeview.js

@@ -0,0 +1,22 @@
+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-treeview',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('treeview', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/use-icon.d.ts

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

package/components/use-icon.js

@@ -0,0 +1,27 @@
+import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, mergeProps as _mergeProps, createCommentVNode as _createCommentVNode } from "vue";
+function render(_ctx, _cache) {
+  const _component_f7_badge = _resolveComponent("f7-badge");
+  const _component_f7_icon = _resolveComponent("f7-icon");
+  return _openBlock(), _createBlock(_component_f7_icon, _normalizeProps(_guardReactiveProps(_ctx.icon.props)), {
+    default: _withCtx(() => [_ctx.icon.badge ? (_openBlock(), _createBlock(_component_f7_badge, _normalizeProps(_mergeProps({
+      key: 0
+    }, _ctx.icon.badge.props)), {
+      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.icon.badge.content), 1)]),
+      _: 1
+    }, 16)) : _createCommentVNode("", true)]),
+    _: 1
+  }, 16);
+}
+import f7Icon from './icon.js';
+import f7Badge from './badge.js';
+export default {
+  name: 'f7-use-icon',
+  render,
+  components: {
+    f7Icon,
+    f7Badge
+  },
+  props: {
+    icon: Object
+  }
+};