@fesjs/fes-design/es/layout/aside.js

fes-design for PC

import { defineComponent, getCurrentInstance, inject, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, withCtx, renderSlot, Fragment, createBlock, createCommentVNode } from 'vue';
import { FScrollbar } from '../scrollbar';
import LeftOutlined from '../icon/LeftOutlined';
import RightOutlined from '../icon/RightOutlined';
import getPrefixCls from '../_util/getPrefixCls';
import { useNormalModel } from '../_util/use/useModel';
import { noop } from '../_util/utils';
import { COMPONENT_NAME, LAYOUT_PROVIDE_KEY } from './const';

const prefixCls = getPrefixCls('layout');
const layoutAsideProps = {
  collapsed: {
    type: Boolean
  },
  collapsible: {
    type: Boolean,
    default: false
  },
  collapsedWidth: {
    type: String,
    default: '48px'
  },
  width: {
    type: String,
    default: '200px'
  },
  fixed: {
    type: Boolean,
    default: false
  },
  inverted: {
    type: Boolean,
    default: false
  },
  bordered: {
    type: Boolean,
    default: false
  },
  showTrigger: {
    type: Boolean,
    default: true
  }
};
var script = defineComponent({
  name: COMPONENT_NAME.ASIDE,
  components: {
    FScrollbar,
    LeftOutlined,
    RightOutlined
  },
  props: layoutAsideProps,
  emits: ['update:collapsed'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const vm = getCurrentInstance();
    if (!vm.parent || !vm.parent.type || vm.parent.type.name !== COMPONENT_NAME.LAYOUT) {
      console.warn(`[${COMPONENT_NAME.ASIDE}] must be a child of ${COMPONENT_NAME.LAYOUT}`);
    }
    const {
      addChild,
      asidePlacement
    } = inject(LAYOUT_PROVIDE_KEY, {
      addChild: noop,
      asidePlacement: ref('')
    });
    const [currentCollapsed, updateCurrentCollapsed] = useNormalModel(props, emit, {
      prop: 'collapsed'
    });
    const classList = computed(() => [`${prefixCls}-aside`, props.fixed && 'is-fixed', props.collapsible && props.showTrigger && 'is-has-trigger', props.inverted && 'is-inverted', props.collapsible && currentCollapsed.value && 'is-collapsed', asidePlacement.value && `is-placement-${asidePlacement.value}`, props.bordered && 'is-bordered'].filter(Boolean));
    const style = computed(() => ({
      width: props.collapsible && currentCollapsed.value ? props.collapsedWidth : props.width
    }));
    const handleTrigger = () => {
      updateCurrentCollapsed(!currentCollapsed.value);
    };
    addChild({
      type: COMPONENT_NAME.ASIDE
    });
    return {
      prefixCls,
      classList,
      style,
      handleTrigger,
      asidePlacement,
      currentCollapsed
    };
  }
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_FScrollbar = resolveComponent("FScrollbar");
  const _component_LeftOutlined = resolveComponent("LeftOutlined");
  const _component_RightOutlined = resolveComponent("RightOutlined");
  return openBlock(), createElementBlock("aside", {
    class: normalizeClass(_ctx.classList),
    style: normalizeStyle(_ctx.style)
  }, [createVNode(_component_FScrollbar, {
    style: normalizeStyle([_ctx.collapsible && _ctx.showTrigger && {
      height: 'calc(100% - 48px)'
    }]),
    "thumb-style": [_ctx.inverted && {
      backgroundColor: '#fff'
    }]
  }, {
    default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
    _: 3 /* FORWARDED */
  }, 8 /* PROPS */, ["style", "thumb-style"]), _ctx.collapsible && _ctx.showTrigger ? (openBlock(), createElementBlock("div", {
    key: 0,
    class: normalizeClass(`${_ctx.prefixCls}-aside-trigger`),
    onClick: _cache[0] || (_cache[0] = function () {
      return _ctx.handleTrigger && _ctx.handleTrigger(...arguments);
    })
  }, [_ctx.asidePlacement === 'left' ? (openBlock(), createElementBlock(Fragment, {
    key: 0
  }, [!_ctx.currentCollapsed ? (openBlock(), createBlock(_component_LeftOutlined, {
    key: 0
  })) : (openBlock(), createBlock(_component_RightOutlined, {
    key: 1
  }))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
    key: 1
  }, [_ctx.currentCollapsed ? (openBlock(), createBlock(_component_LeftOutlined, {
    key: 0
  })) : (openBlock(), createBlock(_component_RightOutlined, {
    key: 1
  }))], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
}

script.render = render;
script.__file = "components/layout/aside.vue";

export { script as default, layoutAsideProps };