@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Paragraph/FlipTeasers/index.vue

@@ -1,80 +0,0 @@
-<template>
-  <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
-    :spacing="spacing"
-    :class="themedClass('containerClass')"
-  >
-    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
-      <div
-        v-if="pretitle || title"
-        :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
-        "
-      >
-        <DesignSystemOrganismsContentBlock
-          :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
-          :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
-        />
-      </div>
-      <div
-        :class="
-          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
-        "
-      >
-        <DesignSystemOrganismsContentBlock
-          :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :text="text"
-          :textClass="themedClass('textClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
-        />
-      </div>
-    </DesignSystemAtomsGridRow>
-
-    <DesignSystemAtomsGridRow
-      :class="themedClass('secondRowClass', pretitle || title ? 'mt-10' : '')"
-    >
-      <DesignSystemOrganismsFlipTeaser
-        v-for="flipTeaser in flipTeasers"
-        :image="flipTeaser?.image || flipTeaser?.mainImage"
-        :pretitle="flipTeaser?.pretitle"
-        :title="flipTeaser?.title || flipTeaser?.mainTitle"
-        :titleWeight="childTitleWeight"
-        :subtitle="flipTeaser?.subtitle"
-        :text="flipTeaser?.text || flipTeaser?.mainText"
-        :link="flipTeaser?.link?.alias"
-        :link-label="flipTeaser?.linkLabel"
-      />
-    </DesignSystemAtomsGridRow>
-  </DesignSystemAtomsContainer>
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsLayoutFlipTeasersFragment } from '#graphql-operations'
-import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-
-const props = defineProps<ParagraphIcmsLayoutFlipTeasersFragment>()
-
-const themedClass = useTheme('ParagraphFlipTeasers')
-
-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 ?? '')
-
-provide('colorScheme', colorScheme)
-</script>

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

@@ -1,17 +0,0 @@
-fragment paragraphIcmsTabElement on ParagraphIcmsTabElement {
-  tabTitle: fieldIcmsTabTitle
-  pretitle: fieldIcmsPretitle
-  title: fieldIcmsTitle
-  titleStyle: fieldIcmsTitleStyle
-  subtitle: fieldIcmsSubtitle
-  media: fieldIcmsMediaElements {
-    ...media
-  }
-  text: fieldIcmsText
-  buttons: fieldIcmsButtons {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsButtonElement
-    }
-  }
-}

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

@@ -1,96 +0,0 @@
-<template>
-  <div :class="[tabContent({ colorScheme }), { 'not-last:mb-10': isEditing }]">
-    <DesignSystemOrganismsContentBlock
-      :pretitle="pretitle"
-      :pretitleClass="themedClass('pretitleClass')"
-      :title="title"
-      :titleClass="themedClass('titleClass')"
-      :titleWeight="titleWeight"
-      :titleStyle="titleStyle"
-      :subtitle="subtitle"
-      :subtitleClass="themedClass('subtitleClass')"
-      :media="media"
-      :mediaClass="themedClass('mediaClass')"
-      :mediaContainerClass="themedClass('mediaContainerClass', 'max-w-[500px]')"
-      :text="text"
-      :textClass="themedClass('textClass')"
-      :colorScheme="colorScheme"
-    />
-
-    <BlokkliField
-      name="field_icms_buttons"
-      :list="buttons"
-      :class="
-        cn(
-          themedClass(
-            'buttonsContainerClass',
-            'mt-8 flex flex-wrap items-center gap-6',
-          ),
-          buttonAlignmentClass,
-          {
-            droptarget: isEditing,
-          },
-        )
-      "
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
-import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-import { tv } from 'tailwind-variants'
-import cn from '@iqual/nuxt-icms/composables/useCn'
-
-import type { ParagraphIcmsTabElementFragment } from '#graphql-operations'
-
-defineProps<ParagraphIcmsTabElementFragment>()
-
-const { isEditing } = useAttrs().blokkliData as any
-
-const themedClass = useTheme('ParagraphTabsElement')
-
-const tabContent = tv({
-  base: themedClass(
-    'tabContentBase',
-    'm-0 rounded-b-lg p-8 text-black md:p-16',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass(
-        'tabContentVariantsColorSchemeNone',
-        'bg-white text-black',
-      ),
-      dark: themedClass(
-        'tabContentVariantsColorSchemeDark',
-        'bg-gray-900 text-gray-200',
-      ),
-      light: themedClass(
-        'tabContentVariantsColorSchemeLight',
-        'bg-white text-black',
-      ),
-      accent: themedClass(
-        'tabContentVariantsColorSchemeAccent',
-        'bg-primary-700 text-white',
-      ),
-    },
-  },
-})
-
-const colorScheme = inject<ColorScheme>('colorScheme')
-const buttonAlignment = inject<string>('buttonAlignment')
-const titleWeight = inject<string>('childTitleWeight')
-
-const buttonAlignmentClass = computed(() => {
-  switch (buttonAlignment?.value) {
-    case 'left':
-      return 'justify-start'
-    case 'center':
-      return 'justify-center'
-    case 'right':
-      return 'justify-end'
-    default:
-      return 'justify-start'
-  }
-})
-</script>

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

@@ -1,11 +0,0 @@
-fragment paragraphIcmsLayoutTabs on ParagraphIcmsLayoutTabs {
-  title: fieldIcmsTitle
-  titleWeight: fieldIcmsTitleWeight
-  titleStyle: fieldIcmsTitleStyle
-  tabElements: fieldIcmsTabElements {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsTabElement
-    }
-  }
-}

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

@@ -1,271 +0,0 @@
-<template>
-  <DesignSystemAtomsContainer
-    :spacing="spacing"
-    :colorScheme="colorScheme"
-    :class="themedClass('containerClass')"
-  >
-    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
-      <div
-        v-if="title"
-        :class="themedClass('firstRowColumnClass', 'col-span-12')"
-      >
-        <DesignSystemOrganismsContentBlock
-          :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :titleClass="themedClass('titleClass', 'text-center mb-12')"
-        />
-      </div>
-    </DesignSystemAtomsGridRow>
-    <DesignSystemAtomsGridRow :class="themedClass('secondRowClass')">
-      <div class="relative col-span-12" v-if="isEditing">
-        <Tabs>
-          <BlokkliField
-            name="field_icms_tab_elements"
-            :list="tabElements"
-            :class="{ droptarget: isEditing }"
-          />
-        </Tabs>
-      </div>
-
-      <div
-        :class="themedClass('secondRowColumnClass', 'relative col-span-12')"
-        v-else
-      >
-        <Tabs
-          v-if="!isMobile"
-          default-value="tab-1"
-          :class="themedClass('tabsClass')"
-        >
-          <TabsList :class="tabList({ colorScheme })">
-            <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"
-              :pretitleClass="themedClass('tabsContentPretitleClass')"
-              :title="tabElement?.props?.title"
-              :titleWeight="childTitleWeight"
-              :titleStyle="tabElement?.props?.titleStyle"
-              :titleClass="themedClass('tabsContentTitleClass')"
-              :subtitle="tabElement?.props?.subtitle"
-              :subtitleClass="themedClass('tabsContentSubtitleClass')"
-              :media="tabElement?.props?.media"
-              :mediaClass="themedClass('tabsContentMediaClass')"
-              :mediaContainerClass="
-                themedClass('tabsContentMediaContainerClass', 'max-w-[500px]')
-              "
-              :text="tabElement?.props?.text"
-              :textClass="themedClass('tabsContentTextClass')"
-              :links="tabElement?.props?.buttons"
-              :buttonAlignment="buttonAlignment"
-              :colorScheme="colorScheme"
-            />
-          </TabsContent>
-        </Tabs>
-
-        <Accordion
-          v-else
-          type="single"
-          :class="themedClass('accordionClass', 'w-full')"
-          collapsible
-          default-value="accordion-1"
-        >
-          <AccordionItem
-            v-for="(tabElement, key) in tabElements"
-            :key="key"
-            :value="`accordion-${key + 1}`"
-            :class="
-              themedClass('accordionItemClass', '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="
-                themedClass('accordionContentClass', 'p-4 pb-6 text-base')
-              "
-            >
-              <DesignSystemOrganismsContentBlock
-                :pretitle="tabElement?.props?.pretitle"
-                :pretitleClass="themedClass('accordionContentPretitleClass')"
-                :title="tabElement?.props?.title"
-                :titleClass="themedClass('accordionContentTitleClass')"
-                :titleWeight="childTitleWeight"
-                :titleStyle="tabElement?.props?.titleStyle"
-                :subtitle="tabElement?.props?.subtitle"
-                :subtitleClass="themedClass('accordionContentSubtitleClass')"
-                :media="tabElement?.props?.media"
-                :mediaClass="themedClass('accordionContentMediaClass')"
-                :mediaContainerClass="
-                  themedClass(
-                    'accordionContentMediaContainerClass',
-                    'max-w-[500px]',
-                  )
-                "
-                :text="tabElement?.props?.text"
-                :textClass="themedClass('accordionContentTextClass')"
-                :links="tabElement?.props?.buttons"
-                :buttonAlignment="buttonAlignment"
-                :colorScheme="colorScheme"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    </DesignSystemAtomsGridRow>
-  </DesignSystemAtomsContainer>
-</template>
-
-<script lang="ts" setup>
-import { tv } from 'tailwind-variants'
-import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-import { useAccordionScroll } from '@iqual/nuxt-icms/composables/useAccordionScroll'
-
-import type { ParagraphIcmsLayoutTabsFragment } from '#graphql-operations'
-
-const props = defineProps<ParagraphIcmsLayoutTabsFragment>()
-
-const { options, isEditing } = useAttrs().blokkliData as any
-
-const themedClass = useTheme('ParagraphTabsLayout')
-const { isMobile } = useIsMobile()
-
-const tabList = tv({
-  base: themedClass(
-    'tabListBase',
-    'rounded-none flex flex-col items-stretch justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent border-b',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass('tabListVariantsColorSchemeNone', 'border-gray-200'),
-      dark: themedClass('tabListVariantsColorSchemeDark', 'border-gray-950'),
-      light: themedClass('tabListVariantsColorSchemeLight', 'border-gray-100'),
-      accent: themedClass(
-        'tabListVariantsColorSchemeAccent',
-        'border-primary-900',
-      ),
-    },
-  },
-})
-
-const tabTrigger = tv({
-  base: themedClass(
-    'tabTriggerBase',
-    'min-w-0 inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none data-[state=active]:shadow-none py-4 text-base transition-all disabled:pointer-events-none lg:w-fit not-last:border-r [&>span]:overflow-visible [&>span]:text-ellipsis-none [&>span]:whitespace-normal',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass(
-        'tabTriggerVariantsColorSchemeNone',
-        'bg-gray-50 dark:bg-gray-50 text-black dark:text-black data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-100 dark:data-[state=active]:text-black border-gray-200',
-      ),
-      dark: themedClass(
-        'tabTriggerVariantsColorSchemeDark',
-        'bg-gray-800 dark:bg-gray-800 text-gray-200 dark:text-gray-200 data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-gray-200 border-gray-950',
-      ),
-      light: themedClass(
-        'tabTriggerVariantsColorSchemeLight',
-        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-100 dark:data-[state=active]:text-black border-gray-100',
-      ),
-      accent: themedClass(
-        'tabTriggerVariantsColorSchemeAccent',
-        'bg-primary-700 dark:bg-primary-700 text-white dark:text-white data-[state=active]:bg-primary-800 dark:data-[state=active]:bg-primary-800 data-[state=active]:text-white border-primary-900',
-      ),
-    },
-  },
-})
-
-const tabContent = tv({
-  base: themedClass('tabContentBase', 'm-0 p-8 text-black md:p-16'),
-  variants: {
-    colorScheme: {
-      none: themedClass(
-        'tabContentVariantsColorSchemeNone',
-        'bg-gray-50 text-black',
-      ),
-      dark: themedClass(
-        'tabContentVariantsColorSchemeDark',
-        'bg-gray-900 text-gray-200',
-      ),
-      light: themedClass(
-        'tabContentVariantsColorSchemeLight',
-        'bg-white text-black',
-      ),
-      accent: themedClass(
-        'tabContentVariantsColorSchemeAccent',
-        'bg-primary-700 text-white',
-      ),
-    },
-  },
-})
-
-const accordionTrigger = tv({
-  base: themedClass(
-    'accordionTriggerBase',
-    'items-center px-6 py-4 hover:no-underline gap-4 text-left text-base',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass(
-        'accordionVariantsColorSchemeNone',
-        'bg-gray-50 text-black',
-      ),
-      dark: themedClass(
-        'accordionVariantsColorSchemeDark',
-        'bg-gray-900 text-gray-200',
-      ),
-      light: themedClass(
-        'accordionVariantsColorSchemeLight',
-        'bg-white text-black',
-      ),
-      accent: themedClass(
-        'accordionVariantsColorSchemeAccent',
-        '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/ui/accordion/Accordion.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue'
-import {
-  AccordionRoot,
-
-  useForwardPropsEmits,
-} from 'radix-vue'
-
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AccordionRoot v-bind="forwarded">
-    <slot />
-  </AccordionRoot>
-</template>

package/components/ui/accordion/AccordionContent.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { AccordionContentProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { AccordionContent } from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionContent
-    v-bind="delegatedProps"
-    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-  >
-    <div :class="cn('pb-4 pt-0', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
-</template>

package/components/ui/accordion/AccordionItem.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { AccordionItemProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { AccordionItem, useForwardProps } from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AccordionItem
-    v-bind="forwardedProps"
-    :class="cn('border-b', props.class)"
-  >
-    <slot />
-  </AccordionItem>
-</template>

package/components/ui/accordion/AccordionTrigger.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { AccordionTriggerProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import {
-  AccordionHeader,
-  AccordionTrigger,
-
-} from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      v-bind="delegatedProps"
-      :class="
-        cn(
-          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-          props.class,
-        )
-      "
-    >
-      <slot />
-      <slot name="icon">
-        <ChevronDown
-          class="h-4 w-4 shrink-0 transition-transform duration-200"
-        />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>

package/components/ui/accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/components/ui/alert/Alert.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { AlertVariants } from '.'
-import { cn } from '@/lib/utils'
-import { alertVariants } from '.'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-  variant?: AlertVariants['variant']
-}>()
-</script>
-
-<template>
-  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
-    <slot />
-  </div>
-</template>

package/components/ui/alert/AlertDescription.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>

package/components/ui/alert/AlertTitle.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
-    <slot />
-  </h5>
-</template>

package/components/ui/alert/index.ts

@@ -1,24 +0,0 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-
-export { default as Alert } from './Alert.vue'
-export { default as AlertDescription } from './AlertDescription.vue'
-export { default as AlertTitle } from './AlertTitle.vue'
-
-export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>