{"version":3,"file":"TabDefault-812467d9.js","sources":["../../../app/frontend/components/tab/TabCore.vue","../../../app/frontend/components/tab/TabDefault.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue'\n\n/**\n * @fileoverview\n *  機能と DOM のみの準ヘッドレスコンポーネントです。\n *  実際に利用する際は、ラッパーコンポーネントを用意し、deep オブション付きのスタイルを定義した上での運用を想定しており、\n *  よってこのコンポーネントのみでの使用はできません。\n * @example /app/frontend/components/tab/TabDefault.vue\n */\nexport default defineComponent({\n  name: 'TabCore',\n\n  props: {\n    items: {\n      type: Object as PropType<TabItem[]>,\n      required: true,\n    },\n\n    /**\n     * 現在ページのタブ item key\n     */\n    isCurrentKey: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: ['click'],\n})\n</script>\n\n<template>\n  <!--\n    タブの CSS は外側から deep style で注入する\n    @see https://qiita.com/olt/items/7da218af89d563c7c7a0\n  -->\n  <div class=\"o-list__tab\">\n    <ul class=\"o-list__tab--items\">\n      <template\n        v-for=\"item in items\"\n        :key=\"item.key\">\n        <!--\n          各タブ item の isShow プロパティは、明示的に注入されなかった場合（undefined）は「表示」する。\n          状態によってタブの項目が変動する場合のみ、isShow プロパティを明示的に注入することで、表示制御として評価される。\n        -->\n        <li\n          v-if=\"item.isShow || item.isShow === undefined\"\n          class=\"o-list__tab--item\">\n          <!-- current 表示 -->\n          <template v-if=\"item.key === isCurrentKey\">\n            <div class=\"o-label__tab\">\n              <p class=\"o-label__tab--item\">\n                {{ item.label }}\n              </p>\n            <!-- /.o-label__tab --></div>\n          </template>\n\n          <!-- リンク -->\n          <template v-else>\n            <div class=\"o-action__tab\">\n              <a\n                v-if=\"item.to\"\n                class=\"o-action__tab--item\"\n                :href=\"item.to\">\n                {{ item.label }}\n              </a>\n              <button\n                v-else\n                class=\"o-action__tab--item\"\n                @click.prevent=\"$emit('click', item.key)\">\n                {{ item.label }}\n              </button>\n            <!-- /.o-action__tab --></div>\n          </template>\n        </li>\n      </template>\n    </ul>\n  <!-- /.o-list__tab --></div>\n</template>\n","<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue'\nimport TabCore from '@/components/tab/TabCore.vue'\n\nexport default defineComponent({\n  name: 'TabDefault',\n\n  components: {\n    TabCore,\n  },\n\n  props: {\n    items: {\n      type: Object as PropType<TabItem[]>,\n      required: true,\n    },\n\n    /**\n     * 現在ページのタブ item key\n     */\n    isCurrentKey: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * タブを横幅いっぱいに並べるかどうか\n     * @description true の場合、タブエリアの全体幅に対して、タブが均等幅で横いっぱいに配置される\n     */\n    full: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: ['click'],\n})\n</script>\n\n<template>\n  <nav class=\"nav\">\n    <TabCore\n      :class=\"{ 'is-full': full }\"\n      :items=\"items\"\n      :is-current-key=\"isCurrentKey\"\n      @click=\"$emit('click', $event)\" />\n  </nav>\n</template>\n\n<style lang=\"sass\" scoped>\n/**\n * deep 修飾子で TabCore.vue にスタイルを注入\n * @see https://zenn.dev/karan_coron/articles/87597250de406018e351\n */\n$tab-padding-top: 8\n$tab-padding-bottom: 16\n$tab-padding-horizontal: 20\n$tab-padding-sp: 12\n.nav\n  // object\n  ::v-deep(.o-list__tab)\n    $root: '.o-list__tab'\n    margin-bottom: changeSizePx2Em(24, $font-normal-px)\n    box-shadow: $drop-bottom-shadow\n\n    &:last-child\n      margin-bottom: 0\n\n    #{$root}--items\n      min-width: 0\n      display: flex\n      overflow-x: auto\n\n    &.is-full\n      #{$root}--items\n        justify-content: space-between\n\n      #{$root}--item\n        flex: 1\n\n  ::v-deep(.o-label__tab)\n    $root: '.o-label__tab'\n    #{$root}--item\n      position: relative\n      line-height: 1\n      color: $font-orange\n      font:\n        size: $font-small\n        weight: bold\n      text-align: center\n      white-space: nowrap\n      padding:\n        top: changeSizePx2Em($tab-padding-top, $font-small-px)\n        bottom: changeSizePx2Em($tab-padding-bottom, $font-small-px)\n        left: changeSizePx2Em($tab-padding-horizontal, $font-small-px)\n        right: changeSizePx2Em($tab-padding-horizontal, $font-small-px)\n      cursor: default\n\n      &::before\n        content: \"\"\n        width: 100%\n        height: 2px\n        display: block\n        position: absolute\n        bottom: 0\n        left: 0\n        background-color: rgba($bg-orange, 1)\n\n    +breakpoint\n      #{$root}--item\n        font-size: $font-small\n        padding: changeSizePx2Em($tab-padding-sp, $font-small-px)\n        padding-top: 0\n\n  ::v-deep(.o-action__tab)\n    $root: '.o-action__tab'\n    #{$root}--item\n      width: 100%\n      display: block\n      position: relative\n      overflow: hidden\n      line-height: 1\n      color: $font-black\n      font-size: $font-small\n      font-family: inherit  // for button element (different font families set by default) @see https://www.curict.com/item/9f/9fbb57a.html\n      text-align: center\n      text-decoration: none\n      white-space: nowrap\n      padding:\n        top: changeSizePx2Em($tab-padding-top, $font-small-px)\n        bottom: changeSizePx2Em($tab-padding-bottom, $font-small-px)\n        left: changeSizePx2Em($tab-padding-horizontal, $font-small-px)\n        right: changeSizePx2Em($tab-padding-horizontal, $font-small-px)\n      +transition\n\n      $icon-width: 16px\n      $icon-height: 6px\n      &::before\n        content: \"\"\n        width: 0\n        height: 2px\n        display: block\n        position: absolute\n        bottom: 0\n        left: 50%\n        transform: translateX(-50%)\n        opacity: 0\n        background-color: rgba($bg-gray, 1)\n        +transition\n\n      +mouseover\n        color: $font-orange\n\n        &::before\n          width: 100%\n          opacity: 1\n\n    +breakpoint\n      #{$root}--item\n        font-size: $font-small\n        padding: changeSizePx2Em($tab-padding-sp, $font-small-px)\n        padding-top: 0\n</style>\n"],"names":["_sfc_main$1","defineComponent","_hoisted_3","_hoisted_4","_hoisted_6","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_hoisted_1","_createElementVNode","_hoisted_2","_openBlock","_createElementBlock","_Fragment","_renderList","item","_hoisted_5","_toDisplayString","_sfc_main","TabCore","_component_TabCore","_resolveComponent","_createVNode"],"mappings":"wHAUA,MAAAA,EAAeC,EAAgB,CAC7B,KAAM,UAEN,MAAO,CACL,MAAO,CACL,KAAM,OACN,SAAU,EACZ,EAKA,aAAc,CACZ,KAAM,OACN,QAAS,EACX,CACF,EAEA,MAAO,CAAC,OAAO,CACjB,CAAC,yDAmBSC,EAAM,CAAA,IAAA,6BAGCC,EAAM,CAAA,IAAA,uDASNC,EAAM,CAAA,IAAA,kDAtBnB,SAAAC,EAAAC,EAuCKC,EAvCLC,EAuCKC,EAAAC,EAAAC,EAAA,cAtCH,MAqCWC,EAAA,CAAAC,EAAA,KAAAC,EAAA,EAnCHC,EAAA,EAAK,EAAGC,EAAAC,EAAA,KAAAC,EAAAZ,EAAA,MAAAa,iBAMFA,EAAC,GAAA,EAAA,WAGaA,EAAK,SAAA,QAAAJ,IAAAC,EAC3B,KAI6Bd,EAJ7B,CACEiB,EAAA,MAAAb,EAAA,cAAAS,EAAA,EAAAC,EAAA,MAAAb,EAAA,GAQF,IAa8BiB,EAAAC,EAAAF,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA,IAAAJ,EAAA,EAAAC,EAZ5B,MAKIZ,EAAA,CAAAe,EAAA,IAAAJ,IAHyBC,EAAA,IAAA,CAC1B,IAAI,EAAA,MAAA,uDAKsBA,EAAA,SAAA,CAC1B,IAAA,EAAA,MAAA,qJClEjBM,EAAerB,EAAgB,CAC7B,KAAM,aAEN,WAAY,CACV,QAAAsB,CACF,EAEA,MAAO,CACL,MAAO,CACL,KAAM,OACN,SAAU,EACZ,EAKA,aAAc,CACZ,KAAM,OACN,QAAS,EACX,EAMA,KAAM,CACJ,KAAM,QACN,QAAS,EACX,CACF,EAEA,MAAO,CAAC,OAAO,CACjB,CAAC,gDAIC,MAAAC,EAAAC,EAMM,SANN,EAEK,OAAAV,MAAoB,MAAIH,EAAA,CAAAc,EACjBF,EAAK,CACZ,QAAgB,CAAY,UAAAlB,EAAA,IAAA,CAAA,EAC5B,MAAKA,EAAA,MAAA,iBAAAA,EAAA"}