@fesjs/fes-design/es/collapse/collapseItem.js

fes-design for PC

import { defineComponent, inject, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, withModifiers, createVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, withCtx, withDirectives, vShow } from 'vue';
import FadeInExpandTransition from '../_util/components/fadeInExpandTransition';
import { RightOutlined } from '../icon';
import { useTheme } from '../_theme/useTheme';
import { collapseItemProps } from './collapseItemExpose';
import { useCollapseItem, useCollapseItemDOM } from './useCollapseItem';
import { arrowPositionKey } from './common';

var script = defineComponent({
  name: 'FCollapseItem',
  components: {
    FadeInExpandTransition,
    RightOutlined
  },
  props: collapseItemProps,
  setup(props) {
    useTheme();
    const {
      arrow,
      embedded
    } = inject(arrowPositionKey);
    const {
      focusing,
      id,
      isActive,
      handleFocus,
      handleHeaderClick,
      handleEnterClick
    } = useCollapseItem(props);
    const {
      arrowKls,
      headKls,
      rootKls,
      itemWrapperKls,
      itemContentKls,
      scopedContentId,
      scopedHeadId
    } = useCollapseItemDOM(props, {
      focusing,
      isActive,
      id,
      embedded
    });
    return {
      arrow,
      arrowKls,
      headKls,
      rootKls,
      itemWrapperKls,
      itemContentKls,
      scopedContentId,
      scopedHeadId,
      focusing,
      isActive,
      handleFocus,
      handleHeaderClick,
      handleEnterClick
    };
  }
});

const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-describedby"];
const _hoisted_2 = ["id", "tabindex"];
const _hoisted_3 = ["id", "aria-hidden", "aria-labelledby"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_right_outlined = resolveComponent("right-outlined");
  const _component_FadeInExpandTransition = resolveComponent("FadeInExpandTransition");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.rootKls)
  }, [createElementVNode("div", {
    role: "tab",
    "aria-expanded": _ctx.isActive,
    "aria-controls": _ctx.scopedContentId,
    "aria-describedby": _ctx.scopedContentId
  }, [createElementVNode("div", {
    id: _ctx.scopedHeadId,
    class: normalizeClass(_ctx.headKls),
    role: "button",
    tabindex: _ctx.disabled ? -1 : 0,
    onClick: _cache[0] || (_cache[0] = function () {
      return _ctx.handleHeaderClick && _ctx.handleHeaderClick(...arguments);
    }),
    onKeypress: _cache[1] || (_cache[1] = withKeys(withModifiers(function () {
      return _ctx.handleEnterClick && _ctx.handleEnterClick(...arguments);
    }, ["stop", "prevent"]), ["space", "enter"])),
    onFocus: _cache[2] || (_cache[2] = function () {
      return _ctx.handleFocus && _ctx.handleFocus(...arguments);
    }),
    onBlur: _cache[3] || (_cache[3] = $event => _ctx.focusing = false)
  }, [_ctx.arrow === 'left' ? (openBlock(), createElementBlock("div", {
    key: 0,
    class: normalizeClass(["fes-collapse-item__arrow-left", _ctx.arrowKls])
  }, [createVNode(_component_right_outlined)], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1 /* TEXT */)]), _ctx.arrow === 'right' ? (openBlock(), createElementBlock("div", {
    key: 1,
    class: normalizeClass(_ctx.arrowKls)
  }, [createVNode(_component_right_outlined)], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2)], 8 /* PROPS */, _hoisted_1), createVNode(_component_FadeInExpandTransition, null, {
    default: withCtx(() => [withDirectives(createElementVNode("div", {
      id: _ctx.scopedContentId,
      class: normalizeClass(_ctx.itemWrapperKls),
      role: "tabpanel",
      "aria-hidden": !_ctx.isActive,
      "aria-labelledby": _ctx.scopedHeadId
    }, [createElementVNode("div", {
      class: normalizeClass(_ctx.itemContentKls)
    }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_3), [[vShow, _ctx.isActive]])]),
    _: 3 /* FORWARDED */
  })], 2 /* CLASS */);
}

script.render = render;
script.__file = "components/collapse/collapseItem.vue";

export { script as default };