{"version":3,"file":"LayoutSolutionContentsCards-d3b53090.js","sources":["../../../app/frontend/components/solutions/LayoutSolutionContentsCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue'\nimport SolutionContentsCard from '@/components/solutions/SolutionContentsCard.vue'\nimport { DEFAULT_IMAGE_OPTIONS, DEFAULT_HEADING_OPTIONS } from '@/components/_parials/contentsCard'\n\nexport default defineComponent({\n  name: 'LayoutSolutionContentsCards',\n\n  components: {\n    SolutionContentsCard,\n  },\n\n  props: {\n    /**\n     * 資料情報の配列\n     */\n    items: {\n      type: Array as PropType<SolutionContentItem[]>,\n      required: true,\n    },\n\n    /**\n     * 表示する列数\n     * 指定範囲: 1 〜 6\n     */\n    cols: {\n      type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6>,\n      default: 3,\n      validator(value: number) {\n        // 1 〜 6 の整数値が指定されてるかどうか\n        return [...Array(6)].map((_, i) => i + 1).includes(value)\n      },\n    },\n\n    /**\n     * PC でも横向きタイプ表示にするフラグ\n     * @description 重複定義の場合は full の設定が優先される\n     */\n    horizontal: {\n      type: Object as PropType<{ pc: boolean, sp: boolean }>,\n      default: () => ({\n        pc: false,\n        sp: true,\n      }),\n    },\n\n    /**\n     * ハイライト表示するワード\n     */\n    highlightWord: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * 見出しのオプション\n     */\n    headingOptions: {\n      type: Object as PropType<{\n        // HTML 要素名\n        tagName?: keyof HTMLElementTagNameMap,\n\n        // CSS の line-height 値\n        lineHeight?: number,\n\n        // CSS の font-size\n        fontSize?: {\n          pc: string,\n          sp: string,\n        },\n\n        // 文字の太さ\n        fontWeight?: 'normal' | 'bold',\n\n        // 表示最大行数\n        maxLine?: number,\n      }>,\n      default: () => ({\n        tagName: DEFAULT_HEADING_OPTIONS.TAG_NAME,\n        lineHeight: DEFAULT_HEADING_OPTIONS.LINE_HEIGHT,\n        fontSize: {\n          pc: DEFAULT_HEADING_OPTIONS.FONT_SIZE.PC,\n          sp: DEFAULT_HEADING_OPTIONS.FONT_SIZE.SP,\n        },\n        fontWeight: DEFAULT_HEADING_OPTIONS.FONT_WEIGHT,\n        maxLine: DEFAULT_HEADING_OPTIONS.MAX_LINE,\n      }),\n    },\n\n    /**\n     * 画像の表示オプション\n     * @description horizontal が有効のときのみ評価される\n     */\n    imageOptions: {\n      type: Object as PropType<{\n        // 幅\n        width?: {\n          pc: number,\n          sp: number,\n        },\n\n        // 高さ\n        height?: {\n          pc: number,\n          sp: number,\n        },\n      }>,\n      default: () => ({\n        width: {\n          pc: DEFAULT_IMAGE_OPTIONS.WIDTH.PC,\n          sp: DEFAULT_IMAGE_OPTIONS.WIDTH.SP,\n        },\n        height: {\n          pc: DEFAULT_IMAGE_OPTIONS.HEIGHT.PC,\n          sp: DEFAULT_IMAGE_OPTIONS.HEIGHT.SP,\n        },\n      }),\n    },\n  },\n})\n</script>\n\n<template>\n  <div\n    v-if=\"items.length\"\n    :class=\"[\n      'l-cols__solutionContents',\n      `is-col${cols}`,\n    ]\">\n    <div\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      class=\"l-cols__solutionContents--col\">\n      <SolutionContentsCard\n        :item=\"item\"\n        :has-solution-link=\"false\"\n        :highlight-word=\"highlightWord\"\n        :horizontal=\"horizontal\"\n        :heading-options=\"headingOptions\"\n        :image-options=\"imageOptions\" />\n    <!-- /.l-cols__solutionContents col --></div>\n  <!-- /.l-cols__solutionContents --></div>\n\n  <p\n    v-else\n    class=\"p u-text__bold\">\n    データがありません\n  </p>\n</template>\n\n<style lang=\"sass\" scoped>\n.l-cols__solutionContents\n  $root: &\n  $margin-size: 24\n  display: flex\n  flex-wrap: wrap\n  margin: 24px auto 0\n\n  &:first-child\n    margin-top: 0\n\n  & &--col\n    margin-top: #{$margin-size}px\n\n  @for $i from 1 through 6\n    &.is-col#{$i}\n      $col-width: math.div(($global-contents-width-pc - $margin-size * ($i - 1)), $i)\n      > #{$root}--col\n        width: getRelativeValue($col-width, $global-contents-width-pc)\n        margin-left: getRelativeValue($margin-size, $global-contents-width-pc)\n\n        &:nth-child(-n+#{$i})\n          margin-top: 0\n\n        &:nth-child(#{$i}n+1)\n          margin-left: 0\n\n  +breakpoint\n    display: block\n\n    $margin-size: 12\n    @for $i from 1 through 6\n      &.is-col#{$i}\n        $col-width: math.div(($global-contents-width-pc - $margin-size * ($i - 1)), $i)\n        > #{$root}--col\n          width: auto\n          margin:\n            top: #{$margin-size}px\n            left: 0\n          padding-bottom: #{$margin-size}px\n          border-bottom: 1px solid $border-x-light-gray\n\n          &:nth-child(-n+#{$i})\n            margin-top: #{$margin-size}px\n\n          &:first-child\n            margin-top: 0\n\n          &:last-child\n            border-bottom: none\n</style>\n"],"names":["_sfc_main","defineComponent","SolutionContentsCard","value","_","i","DEFAULT_HEADING_OPTIONS","DEFAULT_IMAGE_OPTIONS","_hoisted_1","_component_SolutionContentsCard","_resolveComponent","_ctx","_openBlock","_createElementBlock","_normalizeClass","_Fragment","_renderList","item"],"mappings":"2KAKA,MAAAA,EAAeC,EAAgB,CAC7B,KAAM,8BAEN,WAAY,CACV,qBAAAC,CACF,EAEA,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EACZ,EAMA,KAAM,CACJ,KAAM,OACN,QAAS,EACT,UAAUC,EAAe,CAEvB,MAAO,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAACC,EAAGC,IAAMA,EAAI,CAAC,EAAE,SAASF,CAAK,CAC1D,CACF,EAMA,WAAY,CACV,KAAM,OACN,QAAS,KAAO,CACd,GAAI,GACJ,GAAI,EAAA,EAER,EAKA,cAAe,CACb,KAAM,OACN,QAAS,EACX,EAKA,eAAgB,CACd,KAAM,OAmBN,QAAS,KAAO,CACd,QAASG,EAAwB,SACjC,WAAYA,EAAwB,YACpC,SAAU,CACR,GAAIA,EAAwB,UAAU,GACtC,GAAIA,EAAwB,UAAU,EACxC,EACA,WAAYA,EAAwB,YACpC,QAASA,EAAwB,QAAA,EAErC,EAMA,aAAc,CACZ,KAAM,OAaN,QAAS,KAAO,CACd,MAAO,CACL,GAAIC,EAAsB,MAAM,GAChC,GAAIA,EAAsB,MAAM,EAClC,EACA,OAAQ,CACN,GAAIA,EAAsB,OAAO,GACjC,GAAIA,EAAsB,OAAO,EACnC,CAAA,EAEJ,CACF,CACF,CAAC,QA0BGC,EAAM,CAAA,IAAA,kDArBY,MAAAC,EAAAC,EAAA,sBAAA,EACZ,OAAAC,EAAA,MAAA,QAAAC,EAAA,EAAAC,EAAA,MAAA,CAAA,IAAA,QAAqDC,EAAI,CAAA,oDAMvD,EAAO,EAAAD,EAAAE,EAAA,KAAAC,EAAAL,EAAA,MAAAM,IACRL,EAAA,EAAgCC,EAAA,MAAA,CAAA,IAAAI,EAAA,GACrC,MAAA,+BAAA,EAAA,GAEGR,EAAwB,CACxB,KAAAQ,EACA,oBAAY,GACZ,iBAAeN,EAAE,cACjB,WAAeA,EAAA,WAAA,kBAAAA,EAAA"}