choo-taro-ui-vue3/lib/accordion/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, warn, ref, reactive, computed, watch, toRefs, createCommentVNode, resolveComponent, normalizeClass, normalizeStyle, openBlock, createBlock, toDisplayString, createTextVNode, withCtx, createVNode, renderSlot, mergeProps } from 'vue';
import { delayQuerySelector, uuid } from '../utils';
import { useIconStyle, useIconClasses } from '../composables';

const AtAccordion = defineComponent({
  name: "AtAccordion",
  emits: {
    click: (open) => {
      if (typeof open === "boolean") {
        return true;
      } else {
        warn("click payload should be type boolean");
        return false;
      }
    }
  },
  props: {
    open: Boolean,
    title: {
      type: String,
      default: ""
    },
    icon: {
      type: Object,
      default: () => ({ value: "" })
    },
    hasBorder: {
      type: Boolean,
      default: true
    },
    isAnimation: {
      type: Boolean,
      default: true
    },
    note: {
      type: String,
      default: ""
    }
  },
  setup(props, { emit }) {
    const startOpen = ref(false);
    const isCompleted = ref(true);
    const contentID = ref("content");
    const state = reactive({
      wrapperHeight: "unset"
    });
    const { iconStyle } = useIconStyle(props.icon);
    const { iconClasses } = useIconClasses(props.icon, true);
    const contentStyle = computed(() => ({
      height: isCompleted.value ? "" : state.wrapperHeight === "unset" ? state.wrapperHeight : `${state.wrapperHeight}px`
    }));
    watch(() => props.open, (open) => {
      startOpen.value = !!open && !!props.isAnimation;
      toggleWithAnimation();
    });
    function handleClick() {
      if (!isCompleted.value)
        return;
      contentID.value = "content_" + uuid();
      emit("click", !props.open);
    }
    function toggleWithAnimation() {
      if (!isCompleted.value || !props.isAnimation)
        return;
      isCompleted.value = false;
      delayQuerySelector(this, `#${contentID.value}.at-accordion__body`, 30).then((rect) => {
        const height = parseInt(rect[0].height.toString());
        const startHeight = props.open ? 0 : height;
        const endHeight = props.open ? height : 0;
        startOpen.value = false;
        state.wrapperHeight = startHeight;
        setTimeout(() => {
          state.wrapperHeight = endHeight;
        }, 100);
        setTimeout(() => {
          isCompleted.value = true;
        }, 700);
      });
    }
    return {
      ...toRefs(props),
      contentID,
      startOpen,
      isCompleted,
      iconClasses,
      iconStyle,
      contentStyle,
      handleClick
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _normalizeClass = normalizeClass, _normalizeStyle = normalizeStyle, _openBlock = openBlock, _createBlock = createBlock, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _createVNode = createVNode, _renderSlot = renderSlot, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: "at-accordion" }), {
    default: _withCtx(() => [
      _createCommentVNode(" header "),
      _createVNode(_component_taro_view, {
        class: _normalizeClass(['at-accordion__header', {
        'at-accordion__header--noborder': !_ctx.hasBorder
      }]),
        onTap: _ctx.handleClick
      }, {
        default: _withCtx(() => [
          _createCommentVNode(" icon "),
          (Boolean(_ctx.icon && _ctx.icon.value))
            ? (_openBlock(), _createBlock(_component_taro_text, {
                key: 0,
                class: _normalizeClass(['at-accordion__icon', _ctx.iconClasses]),
                style: _normalizeStyle(_ctx.iconStyle)
              }, null, 8 /* PROPS */, ["class", "style"]))
            : _createCommentVNode("v-if", true),
          _createCommentVNode(" info "),
          _createVNode(_component_taro_view, { class: "at-accordion__info" }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_view, { class: "at-accordion__info__title" }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              }),
              _createVNode(_component_taro_view, { class: "at-accordion__info__note" }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(_ctx.note), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              })
            ]),
            _: 1 /* STABLE */
          }),
          _createCommentVNode(" arrow "),
          _createVNode(_component_taro_view, {
            class: _normalizeClass(['at-accordion__arrow', {
        'at-accordion__arrow--folded': !!_ctx.open
      }])
          }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_text, { class: "at-icon at-icon-chevron-down" })
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ["class"])
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["class", "onTap"]),
      _createCommentVNode(" content "),
      _createVNode(_component_taro_view, {
        class: _normalizeClass([
        'at-accordion__content',
        {
          'at-accordion__content--inactive': (!_ctx.open && _ctx.isCompleted) || _ctx.startOpen
        }
      ]),
        style: _normalizeStyle(_ctx.contentStyle)
      }, {
        default: _withCtx(() => [
          _createVNode(_component_taro_view, {
            id: _ctx.contentID,
            class: "at-accordion__body"
          }, {
            default: _withCtx(() => [
              _renderSlot(_ctx.$slots, "default")
            ]),
            _: 3 /* FORWARDED */
          }, 8 /* PROPS */, ["id"])
        ]),
        _: 3 /* FORWARDED */
      }, 8 /* PROPS */, ["class", "style"])
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */))
}


AtAccordion.render = _sfc_render;

export default AtAccordion;