{"version":3,"file":"ElementCardsGridDynamic.vue_vue_type_script_setup_true_lang-351bb6b2.js","sources":["../../src/composables/useIsTouch.ts","../../src/composables/useHoverTilt.ts","../../src/components/sb-elements/SbElementCardsCard.vue","../../src/components/sb-elements/SbElementSpotlightGridCard.vue","../../src/components/elements/ElementCardsGridFixed.vue","../../src/components/elements/ElementCardsGridDynamic.vue"],"sourcesContent":["export default function useIsTouch() {\n  return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);\n}","import { MaybeElementRef, useMouseInElement } from \"@vueuse/core\";\nimport useIsTouch from '@/composables/useIsTouch';\n\nconst round = (n: number, decimals: number) => {\n  const factor = 10 ** decimals;\n  return Math.round(n * factor) / factor;\n};\n\nexport default function useHoverTilt(target: MaybeElementRef) {\n  const isTouch = useIsTouch();\n\n  if (isTouch) return { tilt: computed(() => ({ x: 0, y: 0 })) };\n\n  const { elementX, elementY, elementWidth, elementHeight, isOutside } = useMouseInElement(target, { handleOutside: false});\n\n  // mouse 3d tilt effect with css\n  const tilt = computed(() => {\n    if (isOutside.value) return { x: 0, y: 0 };\n    \n    const amount = 30;\n    const tiltY = round((elementY.value / elementHeight.value - 0.5) * amount, 0);\n    const tiltX = round((elementX.value / elementWidth.value - 0.5) * amount, 0);\n    \n    return {\n      x: -tiltY,\n      y: tiltX,\n    };\n  });\n\n  return { tilt };\n}\n","<template>\n  <div\n    v-editable=\"blok\"\n    class=\"relative h-full flex flex-col clamp-gap-4-8 text-[--text-color]\"\n    :style=\"{\n      '--text-color': backgroundColor.hexFg,\n    }\"\n  >\n    <div\n      class=\"clamp-max-h-70-140 clamp-mx-4-8 clamp-mb-neg-8-16 z-1\"\n      v-if=\"blok.media?.length\"\n    >\n      <ElementMedia\n        :bloks=\"blok.media\"\n        ratio=\"orig\"\n        :sizes=\"sizes\"\n        class=\"w-full h-full object-contain\"\n      />\n    </div>\n\n    <div\n      class=\"relative flex-1 clamp-px-4-8 clamp-py-8-16 bg-[--bg-color] clamp-rounded-8-10\"\n      :style=\"{\n        '--bg-color': backgroundColor.hex,\n      }\"\n      v-if=\"blok.texts?.length\"\n    >\n      <ElementTexts\n        :bloks=\"blok.texts\"\n        class=\"element-texts-my-sm text-max-w-card h-full\"\n        textPosition=\"center\"\n        buttonSize=\"sm\"\n        buttonAlignment=\"bottom\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ElementCardsCardStoryblok } from '@/types';\nimport { ImgSizes } from '@/components/atoms/AImage.vue';\nimport { ISbPluginThemeColorPicker } from '@/types';\n\ninterface Props {\n  blok: ElementCardsCardStoryblok;\n  sizes: ImgSizes;\n}\nconst props = defineProps<Props>();\n\nconst backgroundColor = computed(\n  () => props.blok.backgroundColor as ISbPluginThemeColorPicker,\n);\n</script>\n","<template>\n  <ALink\n    v-editable=\"blok\"\n    class=\"relative grid card-rounded overflow-hidden shadow-card effect-hover-tilt group\"\n    ref=\"cardRef\"\n    :style=\"{\n      '--rotate-x': `${tilt.x}deg`,\n      '--rotate-y': `${tilt.y}deg`,\n    }\"\n    :to=\"blok.link\"\n  >\n    <div\n      v-if=\"blok.media.length\"\n      class=\"col-start-1 row-start-1 clamp-h-70-120 effect-hover-tilt-media\"\n    >\n      <ElementMedia\n        :bloks=\"blok.media\"\n        :ratio=\"{ w: 1, h: 1 }\"\n        :sizes=\"sizes\"\n        class=\"w-full h-full object-cover\"\n      />\n    </div>\n    <ElementSpotlightCardText\n      :blok=\"blok\"\n      class=\"relative col-start-1 row-start-1\"\n    />\n  </ALink>\n</template>\n\n<script setup lang=\"ts\">\nimport { ElementSpotlightCardStoryblok } from '@/types';\nimport { ImgSizes } from '@/components/atoms/AImage.vue';\nimport useHoverTilt from '@/composables/useHoverTilt';\n\ninterface Props {\n  blok: ElementSpotlightCardStoryblok;\n  sizes: ImgSizes;\n}\ndefineProps<Props>();\n\nconst cardRef = ref<HTMLElement | null>(null);\nconst { tilt } = useHoverTilt(cardRef);\n</script>\n","<template>\n  <div\n    class=\"grid grid-cols-12 clamp-gap-4-4\"\n    :class=\"{\n      'clamp-gap-y-8-8': component === 'ModuleCards',\n    }\"\n  >\n    <div\n      v-for=\"card in cards\"\n      :key=\"card._uid\"\n      class=\"effect-hover-tilt-parent col-span-6\"\n      :class=\"{\n        'tp:col-span-6': layout === 'grid-2',\n        'tp:col-span-4': layout === 'grid-3',\n        'tp:col-span-3': layout === 'grid-4',\n      }\"\n    >\n      <SbElementSpotlightGridCard\n        v-if=\"card.component === 'ElementSpotlightCard'\"\n        :blok=\"card\"\n        :sizes=\"[\n          { vw: 100 / cols, bpMin: 'tp' },\n          { vw: 50, bpMin: '0' },\n        ]\"\n      />\n      <SbElementCardsCard\n        v-else\n        :blok=\"card\"\n        :sizes=\"[\n          { vw: 100 / cols, bpMin: 'tp' },\n          { vw: 50, bpMin: '0' },\n        ]\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  ElementCardsCardStoryblok,\n  ElementSpotlightCardStoryblok,\n  ModuleCardsStoryblok,\n  ModuleSpotlightStoryblok,\n} from '@/types';\n\ninterface Props {\n  component:\n    | ModuleSpotlightStoryblok['component']\n    | ModuleCardsStoryblok['component'];\n  layout: ModuleSpotlightStoryblok['layout'] | ModuleCardsStoryblok['layout'];\n  cards: ElementSpotlightCardStoryblok[] | ElementCardsCardStoryblok[];\n}\nconst props = defineProps<Props>();\n\nconst cols = computed(() => {\n  switch (props.layout) {\n    case 'grid-2':\n      return 2;\n    case 'grid-3':\n      return 3;\n    case 'grid-4':\n      return 4;\n    default:\n      return 1;\n  }\n});\n</script>\n\n<style scoped></style>\n","<template>\n  <div\n    class=\"grid grid-cols-12 clamp-gap-4-4\"\n    :class=\"{\n      'clamp-gap-y-8-8': component === 'ModuleCards',\n    }\"\n  >\n    <div\n      v-for=\"(card, idx) in cards\"\n      :key=\"card._uid\"\n      class=\"effect-hover-tilt-parent\"\n      :class=\"{\n        // mobile-large 2 or 3 first cards span 12 cols while the rest span 6 cols - prevents lonely card on last line\n        'col-span-12': idx < 2 || (idx === 2 && cards.length % 2),\n        'col-span-6': !(idx < 2 || (idx === 2 && cards.length % 2)),\n        // ALTERNATIVE LAYOUT - mobile-large - alternate between span 12 and 6 columns - if the second last is 12 cols make it 6 col instead to avoid lonely card on the last row\n        // 'col-span-12': idx % 3 === 0 && idx + 1 !== cards.length - 1,\n        // 'col-span-6': !(idx % 3 === 0 && idx + 1 !== cards.length - 1),\n        // tablet-portrait - follow the layout below\n        'tp:col-span-12': layouts[cards.length - 1][idx] === 12,\n        'tp:col-span-6': layouts[cards.length - 1][idx] === 6,\n        'tp:col-span-4': layouts[cards.length - 1][idx] === 4,\n        'tp:col-span-3': layouts[cards.length - 1][idx] === 3,\n      }\"\n    >\n      <SbElementSpotlightGridCard\n        v-if=\"card.component === 'ElementSpotlightCard'\"\n        :blok=\"card\"\n        :sizes=\"[\n          { vw: (layouts[cards.length - 1][idx] / 12) * 100, bpMin: 'tp' },\n          {\n            vw: idx < 2 || (idx === 2 && cards.length % 2) ? 100 : 50,\n            bpMin: '0',\n          },\n        ]\"\n      />\n      <SbElementCardsCard\n        v-else\n        :blok=\"card\"\n        :sizes=\"[\n          { vw: (layouts[cards.length - 1][idx] / 12) * 100, bpMin: 'tp' },\n          {\n            vw: idx < 2 || (idx === 2 && cards.length % 2) ? 100 : 50,\n            bpMin: '0',\n          },\n        ]\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  ElementCardsCardStoryblok,\n  ElementSpotlightCardStoryblok,\n  ModuleCardsStoryblok,\n  ModuleSpotlightStoryblok,\n} from '@/types';\n\ninterface Props {\n  component:\n    | ModuleSpotlightStoryblok['component']\n    | ModuleCardsStoryblok['component'];\n  cards: ElementSpotlightCardStoryblok[] | ElementCardsCardStoryblok[];\n}\ndefineProps<Props>();\n\nconst rows = (arrs: number[][]) => arrs.flat();\n\nconst one = [12];\nconst two = [6, 6];\nconst three = [4, 4, 4];\nconst four = [3, 3, 3, 3];\n\n// the layout below currently supports 1-30 cards\nconst layouts = [\n  // 1-10\n  rows([one]),\n  rows([two]),\n  rows([three]),\n  rows([four]),\n  rows([two, three]), // means that in the first row there are 2 cards and in the second row there are 3 cards\n  rows([two, four]),\n  rows([three, four]),\n  rows([two, three, three]),\n  rows([two, three, four]),\n  rows([three, three, four]),\n  // 11-20\n  rows([three, four, four]),\n  rows([two, three, three, four]),\n  rows([two, three, four, four]),\n  rows([two, three, three, three, three]),\n  rows([two, three, three, three, four]),\n  rows([two, three, three, four, four]),\n  rows([two, three, three, three, three, three]),\n  rows([two, three, three, three, three, four]),\n  rows([two, three, three, three, four, four]),\n  rows([two, three, three, three, three, three, three]),\n  // 21-30\n  rows([two, three, three, three, three, three, four]),\n  rows([two, three, three, three, three, four, four]),\n  rows([two, three, three, three, three, three, three, three]),\n  rows([two, three, three, three, three, three, three, four]),\n  rows([two, three, three, three, three, three, four, four]),\n  rows([two, three, three, three, three, three, three, three, three]),\n  rows([two, three, three, three, three, three, three, three, four]),\n  rows([two, three, three, three, three, three, three, four, four]),\n  rows([two, three, three, three, three, three, three, three, three, three]),\n  rows([two, three, three, three, three, three, three, three, three, four]),\n];\n</script>\n\n<style scoped></style>\n"],"names":["useIsTouch","round","n","decimals","factor","useHoverTilt","target","computed","elementX","elementY","elementWidth","elementHeight","isOutside","useMouseInElement","amount","tiltY","tiltX","props","__props","backgroundColor","cardRef","ref","tilt","cols","rows","arrs","one","two","three","four","layouts"],"mappings":"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"}