@iqual/nuxt-icms 1.0.2

package/components/Paragraph/Tabs/Layout/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12">
+        <DesignSystemOrganismsContentBlock
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="text-center mb-12"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+    <DesignSystemAtomsGridRow>
+      <div class="relative col-span-12" v-if="isEditing">
+        <Tabs class="rounded-lg shadow-custom">
+          <BlokkliField
+            name="field_icms_tab_elements"
+            :list="tabElements"
+            :class="{ droptarget: isEditing }"
+          />
+        </Tabs>
+      </div>
+
+      <div class="relative col-span-12" v-else>
+        <Tabs
+          v-if="!isMobile"
+          default-value="tab-1"
+          class="rounded-lg shadow-custom"
+        >
+          <TabsList
+            class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
+          >
+            <TabsTrigger
+              v-for="(tabElement, key) in tabElements"
+              :key="key"
+              :value="`tab-${key + 1}`"
+              :class="tabTrigger({ colorScheme })"
+            >
+              {{ tabElement?.props?.tabTitle }}
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent
+            v-for="(tabElement, key) in tabElements"
+            :key="key"
+            :value="`tab-${key + 1}`"
+            :class="tabContent({ colorScheme })"
+          >
+            <DesignSystemOrganismsContentBlock
+              :pretitle="tabElement?.props?.pretitle"
+              :title="tabElement?.props?.title"
+              :titleWeight="childTitleWeight"
+              :titleStyle="tabElement?.props?.titleStyle"
+              :subtitle="tabElement?.props?.subtitle"
+              :media="tabElement?.props?.media"
+              mediaClass="size-full rounded-lg overflow-hidden"
+              mediaSliderClass="max-w-[500px] rounded-lg overflow-hidden"
+              :text="tabElement?.props?.text"
+              :links="tabElement?.props?.buttons"
+              :button-alignment="buttonAlignment"
+              :colorScheme="colorScheme"
+            />
+          </TabsContent>
+        </Tabs>
+
+        <Accordion
+          v-else
+          type="single"
+          class="w-full"
+          collapsible
+          default-value="accordion-1"
+        >
+          <AccordionItem
+            v-for="(tabElement, key) in tabElements"
+            :key="key"
+            :value="`accordion-${key + 1}`"
+            class="mb-1 border-none [&>h3]:mb-0"
+          >
+            <AccordionTrigger
+              :ref="(el: any) => (triggerRefs[key] = el)"
+              :class="accordionTrigger({ colorScheme })"
+              @click="handleClick(key)"
+            >
+              {{ tabElement?.props?.tabTitle }}
+            </AccordionTrigger>
+            <AccordionContent class="p-4 pb-6 text-base">
+              <DesignSystemOrganismsContentBlock
+                :pretitle="tabElement?.props?.pretitle"
+                :title="tabElement?.props?.title"
+                :titleWeight="childTitleWeight"
+                :titleStyle="tabElement?.props?.titleStyle"
+                :subtitle="tabElement?.props?.subtitle"
+                :media="tabElement?.props?.media"
+                mediaClass="size-full rounded-lg overflow-hidden"
+                mediaSliderClass="max-w-[500px] rounded-lg overflow-hidden"
+                :text="tabElement?.props?.text"
+                :links="tabElement?.props?.buttons"
+                :button-alignment="buttonAlignment"
+                :colorScheme="colorScheme"
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import { useAccordionScroll } from '@/composables/useAccordionScroll'
+
+import type { ParagraphIcmsLayoutTabsFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTabsFragment>()
+
+const { options, isEditing } = defineBlokkli({
+  bundle: 'icms_layout_tabs',
+  globalOptions: [
+    'spacingBottom',
+    'spacingTop',
+    'colorScheme',
+    'buttonAlignment',
+  ],
+})
+
+const { isMobile } = useIsMobile()
+
+const tabTrigger = tv({
+  base: 'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none rounded-t-lg py-4 text-base shadow-custom-inner transition-all disabled:pointer-events-none lg:w-fit data-[state=active]:shadow-none',
+  variants: {
+    colorScheme: {
+      none: 'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
+      dark: 'bg-gray-700 dark:bg-gray-700 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white',
+      light:
+        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
+      accent:
+        'bg-primary-600 dark:bg-primary-600 text-white dark:text-white data-[state=active]:bg-primary-700 dark:data-[state=active]:bg-primary-700 data-[state=active]:text-white',
+    },
+  },
+})
+
+const tabContent = tv({
+  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
+  variants: {
+    colorScheme: {
+      none: 'bg-white text-black',
+      dark: 'bg-gray-900 text-white',
+      light: 'bg-white text-black',
+      accent: 'bg-primary-700 text-white',
+    },
+  },
+})
+
+const accordionTrigger = tv({
+  base: 'items-center rounded-lg px-6 py-4 shadow-custom-small hover:no-underline gap-4 text-left text-base',
+  variants: {
+    colorScheme: {
+      none: 'bg-white text-black',
+      dark: 'bg-gray-900 text-white',
+      light: 'bg-white text-black',
+      accent: 'bg-primary-700 text-white',
+    },
+  },
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const buttonAlignment = computed(() => {
+  return options.value.buttonAlignment
+})
+
+const triggerRefs = ref<Array<ComponentPublicInstance>>([])
+
+const handleClick = (index: number): void => {
+  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
+  handleAccordionOpen()
+}
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+provide('buttonAlignment', buttonAlignment)
+provide('childTitleWeight', childTitleWeight)
+</script>
+

package/components/Paragraph/Team/Element/fragment.graphql

@@ -0,0 +1,17 @@
+fragment paragraphIcmsTeamElement on ParagraphIcmsTeamElement {
+  firstname: fieldIcmsFirstName
+  lastname: fieldIcmsLastName
+  position: fieldIcmsPosition
+  email: fieldIcmsEmail
+  phone: fieldIcmsPhone
+  text: fieldIcmsText
+  image: fieldIcmsMediaElement {
+    ...media
+  }
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+}

package/components/Paragraph/Team/Element/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <DesignSystemOrganismsTeamElement
+    :firstname="firstname"
+    :lastname="lastname"
+    :titleWeight="titleWeight"
+    :position="position"
+    :email="email"
+    :phone="phone"
+    :text="text"
+    :image="image"
+    :buttons="buttons"
+    :colorScheme="colorScheme"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsTeamElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsTeamElementFragment>()
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Paragraph/Team/Layout/fragment.graphql

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutTeam on ParagraphIcmsLayoutTeam {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  teamElements: fieldIcmsTeamElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsTeamElement
+    }
+  }
+}

package/components/Paragraph/Team/Layout/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-6 lg:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :subtitle="subtitle"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 lg:col-start-7">
+        <DesignSystemOrganismsContentBlock
+          :text="text"
+          :colorScheme="colorScheme"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <BlokkliField
+      name="field_icms_team_elements"
+      :list="teamElements"
+      class="container mx-auto mt-10 grid gap-6 md:mt-20"
+      :class="['grid-3-col', { droptarget: isEditing }]"
+    />
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTeamFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTeamFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/Teasers/fragment.graphql

@@ -0,0 +1,25 @@
+fragment paragraphIcmsLayoutTeasers on ParagraphIcmsLayoutTeasers {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  teasers: fieldIcmsContentEntities {
+    pretitle: fieldIcmsTeaserPretitle
+    title: fieldIcmsTeaserTitle
+    mainTitle: label
+    text: fieldIcmsTeaserText
+    mainText: body
+    image: fieldIcmsTeaserImage {
+      ...media
+    }
+    mainImage: fieldIcmsImage {
+      ...media
+    }
+    link: url {
+      path
+    }
+    linkLabel: fieldIcmsTeaserLinkLabel
+  }
+}

package/components/Paragraph/Teasers/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 md:col-start-7">
+        <DesignSystemOrganismsContentBlock
+          :subtitle="subtitle"
+          :text="text"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :colorScheme="colorScheme"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <DesignSystemAtomsGridRow class="grid-4-col mt-10 md:mt-20">
+      <DesignSystemOrganismsTeaserCard
+        v-for="teaser in teasers"
+        :image="teaser?.image || teaser?.mainImage"
+        :pretitle="teaser?.pretitle"
+        :title="teaser?.title || teaser?.mainTitle"
+        :titleWeight="childTitleWeight"
+        :subtitle="teaser?.subtitle"
+        :text="teaser?.text || teaser?.mainText"
+        :link="teaser?.link?.path"
+        :link-label="teaser?.linkLabel"
+        :colorScheme="colorScheme"
+      />
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTeasersFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTeasersFragment>()
+
+const { options, parentType } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+</script>

package/components/Paragraph/Testimonial/Element/fragment.graphql

@@ -0,0 +1,13 @@
+fragment paragraphIcmsTestimonialElement on ParagraphIcmsTestimonialElement {
+  title: fieldIcmsTitle
+  text: fieldIcmsTextPlain
+  image: fieldIcmsMediaElement {
+    ...media
+  }
+  firstName: fieldIcmsFirstName
+  lastName: fieldIcmsLastName
+  position: fieldIcmsPosition
+  logo: fieldIcmsLogo {
+    ...media
+  }
+}

package/components/Paragraph/Testimonial/Element/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <CarouselItem
+    class="flex flex-col flex-wrap justify-center"
+    :class="{ 'not-last:mb-10 not-last:border-b-1 not-last:pb-10': isEditing }"
+  >
+    <DesignSystemOrganismsTestimonial
+      :title="title"
+      :titleWeight="titleWeight"
+      :text="text"
+      :image="image"
+      :first-name="firstName"
+      :last-name="lastName"
+      :position="position"
+      :logo="logo"
+      :colorScheme="colorScheme"
+    />
+  </CarouselItem>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsTestimonialElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsTestimonialElementFragment>()
+
+const { isEditing } = useAttrs().blokkliData
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Paragraph/Testimonial/Layout/fragment.graphql

@@ -0,0 +1,13 @@
+fragment paragraphIcmsLayoutTestimonials on ParagraphIcmsLayoutTestimonials {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  testimonialElements: fieldIcmsTestimonialElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsTestimonialElement
+    }
+  }
+}

package/components/Paragraph/Testimonial/Layout/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :subtitle="subtitle"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-7 md:col-start-6">
+        <!-- Slider -->
+        <Carousel :class="carousel({ colorScheme })">
+          <BlokkliField
+            v-slot="{ items }"
+            name="field_icms_testimonial_elements"
+            :list="testimonialElements"
+            class="droptarget"
+            v-if="isEditing"
+          />
+
+          <BlokkliField
+            v-slot="{ items }"
+            name="field_icms_testimonial_elements"
+            :list="testimonialElements"
+            proxy-mode
+            v-else
+          >
+            <CarouselContent>
+              <BlokkliItem v-for="item in items" v-bind="item" />
+            </CarouselContent>
+          </BlokkliField>
+          <CarouselPrevious
+            class="left-3 xl:left-16"
+            :class="carouselButton({ colorScheme })"
+          >
+            <ChevronLeft :size="24" :stroke-width="1" />
+          </CarouselPrevious>
+          <CarouselNext
+            class="right-3 xl:right-16"
+            :class="carouselButton({ colorScheme })"
+          >
+            <ChevronRight :size="24" :stroke-width="1" />
+          </CarouselNext>
+        </Carousel>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTestimonialsFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<ParagraphIcmsLayoutTestimonialsFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const carousel = tv({
+  base: 'rounded-lg px-16 py-8 shadow-custom xl:px-40 xl:py-12',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900 text-white',
+      light: 'bg-white',
+      accent: 'bg-primary-700 text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const carouselButton = tv({
+  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      dark: 'bg-black text-white hover:bg-gray-50 hover:text-black dark:bg-black dark:text-white hover:dark:bg-gray-50 hover:dark:text-black',
+      light:
+        'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      accent:
+        'bg-primary-600 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+provide('isEditing', isEditing)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/Text/fragment.graphql

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutText on ParagraphIcmsLayoutText {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+}

package/components/Paragraph/Text/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div :class="textWrapperClassList">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :subtitle="subtitle"
+          :text="text"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :text-columns="textColumns"
+          :colorScheme="colorScheme"
+        />
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="mt-8 flex flex-wrap gap-6"
+          :class="[buttonAlignment, { droptarget: isEditing }]"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextFragment } from '#graphql-operations'
+const props = defineProps<ParagraphIcmsLayoutTextFragment>()
+const { options, isEditing } = useAttrs().blokkliData
+
+const textWrapperClassList = computed(() => {
+  if (options.value.textWidth === 'medium') {
+    return ['col-span-8', 'col-start-3']
+  } else if (options.value.textWidth === 'narrow') {
+    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+  }
+  return ['col-span-12']
+})
+
+const textColumns = computed(() => {
+  return options.value.textColumns
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const buttonAlignment = computed(() => {
+  switch (options.value.buttonAlignment) {
+    case 'left':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'right':
+      return 'justify-end'
+    default:
+      return 'justify-start'
+  }
+})
+
+provide('colorScheme', colorScheme)
+</script>

package/components/Paragraph/TextMedia/fragment.graphql

@@ -0,0 +1,17 @@
+fragment paragraphIcmsLayoutTextMedia on ParagraphIcmsLayoutTextMedia {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+}