framework7-vue/components/treeview-item.js

Build full featured iOS & Android apps using Framework7 & Vue

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, {
    slots,
    emit
  }) {
    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
    };
  }
};