{"version":3,"file":"AccordionTrigger-50bee2b8.js","sources":["../../../app/frontend/components/accordion/AccordionBody.vue","../../../app/frontend/components/accordion/AccordionTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  defineComponent,\n  PropType,\n  ref,\n  useSlots,\n  onMounted,\n  onBeforeUnmount,\n  watch,\n  nextTick\n} from 'vue'\nimport type { Ref } from 'vue'\nimport throttle from 'lodash/throttle'\nimport resizedWidth from '@/utilities/resizedWidth'\n\nconst EVENT_STATE = {\n  DONE: 0,\n  BEFORE_ENTER: 1,\n  ENTER: 2,\n  LEAVE: 3,\n}\n\nexport default defineComponent({\n  name: 'AccordionBody',\n\n  props: {\n    /**\n     * アコーディオンの開閉状態制御用フラグ\n     */\n    openState: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * 本コンポーネントの root element のタグ名\n     * dom に依存しないための属性\n     *\n     * @see https://jp.vuejs.org/v2/api/#is\n     */\n    tagName: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * アコーディオン非表示時の高さの「値」\n     *\n     * もっと見るボタンと併用する際などに完全に非表示ではなく\n     * 省略表示状態を表すために使用する\n     */\n    valueOfVisibleHeight: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * アコーディオン非表示時の高さの「単位」\n     * [制約事項] CSS アニメーションのため、「%」は不可\n     * ex) rem, em, px...\n     */\n    unitOfVisibleHeight: {\n      type: String as PropType<'px' | 'pt' | 'em' | 'rem' | 'vh'>,\n      default: 'rem',\n      validator: (value: string) => {\n        return ['px', 'pt', 'em', 'rem', 'vh'].includes(value)\n      },\n    },\n\n    /**\n     * トグル時のアコーディオンアニメーションをするかどうか\n     * false の場合、瞬時に開閉する\n     */\n    enableTransition: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: ['transitionend', 'transitionleave'],\n\n  setup(props, { emit }) {\n    const slots = useSlots()\n\n    /**\n     * slot コンテンツの高さの値(px)\n     *\n     * @type {String}\n     */\n    const height: Ref<string | number | undefined> = ref()\n    /**\n     * 開閉トランジションのイベントサイクル\n     */\n    const eventPhase: Ref<number | null> = ref(null)\n\n    const root = ref()\n\n    onMounted(() => {\n      const slotContents = slots.default\n      if (!slotContents) return\n\n      /**\n       * 制約事項\n       *\n       * slot コンテンツの css.display プロパティの値に依存せずアコーディオン内の高さを\n       * 適切に取得するための制約事項として、配信される slot コンテンツは 1 ルートエレメントに限定する\n       *\n       * @example\n       *\n       * [OK]\n       * ```\n       *   <accordion :is-show=\"bool\">\n       *    <div>...</div>\n       *   </accordion>\n       * ```\n       *\n       * [NG]\n       * inline-block の場合に全体の高さの取得が困難\n       *\n       * ```\n       *   <accordion :is-show=\"bool\">\n       *    <div style=\"display:inline-block\">...</div>\n       *    <div style=\"display:inline-block\">...</div>\n       *   </accordion>\n       * ```\n       */\n      if (slotContents.length > 1) {\n        if (import.meta.env.MODE !== 'production') {\n          console.error('invalid slot contents. require single root element.')\n        }\n        return\n      }\n      // const resizeListener = () => {\n      //   // 閉じている時は高さを追従する必要はないので何もしない。\n      //   if (!props.openState) return\n      //   if (resizedWidth()) {\n      //     kickTransition()\n      //   }\n      // }\n\n      window.addEventListener('resize', resizeListener)\n\n      // slot コンテンツ dom の変更を監視して、変更があったら高さを再取得する\n      // @see https://developer.mozilla.org/ja/docs/Web/API/MutationObserver\n      const observer = new MutationObserver(mutations => {\n        if (mutations.length) {\n          kickTransition()\n        }\n      })\n\n      observer.observe(root.value, {\n        attributes: false,\n        childList: true,\n        characterData: true,\n        subtree: true,\n      })\n\n      /**\n       * 開くアニメーション完了後に高さを 具体値 -> auto に再設定する\n       *\n       * [理由]\n       * slot で配信されたアコーディオンコンテンツの高さの変更に対して\n       * 成り行きで高さ変更されるようにするため\n       */\n      const eventList = [\n        'transitionend',\n        'webkitTransitionEnd',\n        'oTransitionEnd',\n        'MSTransitionEnd',\n      ]\n      eventList.forEach(eventName => {\n        root.value.addEventListener(eventName, () => {\n          eventPhase.value = EVENT_STATE.LEAVE\n        })\n      })\n    })\n\n    onBeforeUnmount(() => {\n      // イベントリスナー解除\n      window.removeEventListener('resize', resizeListener)\n      window.removeEventListener('load', kickTransition)\n    })\n\n    // window のリサイズイベントを監視して、幅に変更があったら高さを再取得する\n    const resizeListener = throttle(async () => {\n      // 閉じている時は高さを追従する必要はないので何もしない。\n      if (!props.openState) return\n      if (await resizedWidth()) {\n        kickTransition()\n      }\n    }, 100)\n\n    const eventCycle = async () => {\n      switch (eventPhase.value) {\n        case EVENT_STATE.BEFORE_ENTER:\n        // 閉じる処理準備\n          if (!props.openState) {\n          // css トランジションのため、auto から 具体値に変更する\n            await setOffsetHeight()\n          }\n          // next phase\n          eventPhase.value = EVENT_STATE.ENTER\n          break\n        case EVENT_STATE.ENTER:\n          await updateHeight()\n          leaveEventCycleManuallyIfNeed()\n          break\n        case EVENT_STATE.LEAVE:\n          if (props.openState) {\n            height.value = 'auto'\n          }\n          emit('transitionleave')\n          // next phase\n          eventPhase.value = EVENT_STATE.DONE\n      }\n    }\n\n    const kickTransition = () => {\n      eventPhase.value = EVENT_STATE.BEFORE_ENTER\n    }\n\n    const updateHeight = async () => {\n      // 開くアニメーション\n      if (props.openState) {\n        await setOffsetHeight()\n      // 閉じるアニメーション\n      } else {\n        // イベント処理を一番後ろに回す。\n        // @todo 改善したい.何を待つ必要があるのか考える.\n        setTimeout(() => {\n          height.value = `${props.valueOfVisibleHeight}${props.unitOfVisibleHeight}`\n        }, 0)\n      }\n    }\n\n    /**\n     * 要素が非表示の状態では高さが常に0となってしまい、\n     * `transitionend`のイベントが発生しないため、\n     * 手動で終了処理を行います。\n     */\n    const leaveEventCycleManuallyIfNeed  = () => {\n      const _height = typeof height.value === 'string'\n        ? parseInt(height.value)\n        : typeof height.value === 'number'\n          ? height.value\n          : undefined\n\n      // 「開く時」かつ「`transitionend`が発生しないとき(= 非表示のとき = 高さ0のとき)」が対象になります。\n      // 上記の条件に当てはまらない場合はここで抜けます。\n      emit('transitionend')\n      if (!(props.openState && _height === 0)) return\n      eventPhase.value = EVENT_STATE.LEAVE\n    }\n\n    /**\n     * アコーディオンコンテンツ dom の高さを取得しリアクティブデータへセットする。\n     */\n    const setOffsetHeight = async () => {\n      await nextTick()\n      // const newHeight = slots.default()[0].el.offsetHeight\n\n      // Vue2 -> Vue3 の変更で el が取得できなくなったので、root から子要素をたどる\n      const newHeight = root.value.firstElementChild.offsetHeight\n      height.value = `${newHeight}px`\n    }\n\n    watch(() => props.openState, () => {\n      kickTransition()\n    })\n\n    watch(() => eventPhase.value, () => {\n      eventCycle()\n    })\n    watch(() => props.valueOfVisibleHeight, () => {\n      updateHeight()\n    })\n\n    if (props.openState) {\n      // コンテンツダウンロード完了後に高さを取得する\n      window.addEventListener('load', kickTransition)\n    } else {\n      // 初期状態が閉じる状態の場合 dom がレンダリングする前に初期値をセットしておく\n      height.value = `${props.valueOfVisibleHeight}${props.unitOfVisibleHeight}`\n    }\n\n    return {\n      height,\n      root,\n    }\n  },\n})\n</script>\n\n<template>\n  <component\n    :is=\"tagName\"\n    ref=\"root\"\n    :style=\"{\n      'height': height,\n      'transition': enableTransition ? 'all 0.3s ease' : 'none',\n      'overflow-y': 'hidden',\n      'overflow-x': 'auto'\n    }\">\n    <slot />\n  </component>\n</template>\n","<script lang=\"ts\">\nimport { defineComponent, ref, computed } from 'vue'\nimport { hasOwnProperty } from '@/utilities/syntaxSugar'\n\nconst CLASS_NAME = {\n  OPEN: 'is-open',\n  CLOSE: 'is-close',\n}\n\nexport default defineComponent({\n  name: 'AccordionTrigger',\n\n  props: {\n    /**\n     * アコーディオンの開閉状態管理\n     */\n    openState: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * アコーディオンの開閉初期状態\n     *\n     * props で openState フラグを受け取っている場合、本設定は無視される\n     */\n    initOpen: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * トグル可能かどうか\n     */\n    isTogglable: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * 本コンポーネントの root element のタグ名\n     * dom に依存しないための属性\n     *\n     * @see https://jp.vuejs.org/v2/api/#is\n     */\n    tagName: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  emits: ['update:openState'],\n\n  setup(props, context) {\n    /**\n     * props で openState フラグが指定されなかった場合は\n     * このコンポーネント内部のデータで状態を管理する\n     */\n    const openStateLocal = ref(props.initOpen)\n\n    /**\n     * props で openState の指定があれば、それをそのまま使う。\n     * なければ、自身の dataプロパティである openStateLocal を使う。\n     */\n    const isOpen = computed(() => {\n      return hasGlobalState.value ? props.openState : openStateLocal.value\n    })\n    /**\n     * 親から開閉状態（openState）を受け取っているかどうか\n     * @return {boolean}\n     */\n    const hasGlobalState = computed(() => {\n      return hasOwnProperty(props, 'openState')\n    })\n    /**\n     * トリガーを表示するかどうか\n     * トグル機能なし、且つ展開状態になったらトリガーは非表示になる\n     */\n    const isShowTrigger = computed(() => {\n      return props.isTogglable || !isOpen.value\n    })\n\n    const toggle = () => {\n      if (hasGlobalState.value) {\n        context.emit('update:openState', !isOpen.value)\n      } else {\n        // 内部で更新後の状態を通知\n        openStateLocal.value = !openStateLocal.value\n        context.emit('update:openState', isOpen.value)\n      }\n    }\n\n    return {\n      CLASS_NAME,\n      isOpen,\n      isShowTrigger,\n      toggle,\n    }\n  },\n})\n</script>\n\n<template>\n  <component\n    :is=\"tagName\"\n    v-if=\"isShowTrigger\"\n    :class=\"[isOpen ? CLASS_NAME.OPEN : CLASS_NAME.CLOSE]\"\n    @click.prevent=\"toggle\">\n    <slot />\n  </component>\n</template>\n"],"names":["EVENT_STATE","_sfc_main$1","defineComponent","value","props","emit","slots","useSlots","height","ref","eventPhase","root","onMounted","slotContents","resizeListener","mutations","kickTransition","eventName","onBeforeUnmount","throttle","resizedWidth","eventCycle","setOffsetHeight","updateHeight","leaveEventCycleManuallyIfNeed","_height","nextTick","newHeight","watch","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeStyle","CLASS_NAME","_sfc_main","context","openStateLocal","isOpen","computed","hasGlobalState","hasOwnProperty","isShowTrigger","_normalizeClass","_withModifiers"],"mappings":"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"}