{"version":3,"mappings":";g2CAIA,MAAMA,EAAQC,EAURC,EAAWC,EAAY,EACvBC,EAASC,EAAU,EAEnBC,EAAkBC,EAA8C,MAAM,EAC5E,eAAeC,EAAaC,EAAc,CACxC,MAAMC,EAAOD,EAAM,OAEbE,EAAU,CAAC,GADJ,IAAI,SAASD,CAAI,EACL,SAAS,EAElCJ,EAAgB,MAAQ,UAEpB,IAWE,GAVE,MAAAJ,EAAS,QAAQU,EAAW,mBAAoB,CACpD,KAAMZ,EAAM,KAAK,GAEjB,OAAQW,EAAQ,IAAI,CAAC,CAACE,EAAIC,CAAK,KAAO,CACpC,MAAOD,EACP,MAAAC,CAAA,EACA,EACH,CAAC,EACFR,EAAgB,MAAQ,UAEpBN,EAAM,KAAK,qBAAsB,CAC7B,MAAAe,EAAM,IAAI,IAAIf,EAAM,KAAK,qBAAsB,OAAO,SAAS,MAAM,EACvEe,EAAI,OAAS,OAAO,SAAS,KACxBX,EAAA,KAAKW,EAAI,QAAQ,EAGjB,gBAAS,KAAOf,EAAM,KAAK,oBACpC,CAGFU,EAAK,MAAM,QAENM,EAAO,CACZV,EAAgB,MAAQ,QACxB,QAAQ,MAAMU,CAAK,EACrB,s9GC/CF,MAAMd,EAAWC,EAAY,EAEvBc,EAAQC,EAAoB,EAE5B,CAAE,KAAMC,CAAK,GAAI,CAAAC,EAAAC,CAAA,EAAAC,EAAA,SAAMC,EAAa,SAASN,EAAM,OAAO,WAAa,IAAI,KAAK,GAAG,CAAC,2GAqDzF,oBAEG,IAACE,EAAK,MACR,MAAMK,EAAY,CAChB,WAAY,IACb,EAGQ,OAAAC,EAAA,CACT,OAAOC,EAAAP,EAAK,QAAL,YAAAO,EAAY,MACnB,aAAaC,EAAAR,EAAK,QAAL,YAAAQ,EAAY,YAC1B","names":["props","__props","directus","useDirectus","router","useRouter","submissionState","ref","handleSubmit","event","form","entries","createItem","id","value","url","error","route","useRoute","page","__temp","__restore","_withAsyncContext","useAsyncData","createError","useSeoMeta","_a","_b"],"ignoreList":[],"sources":["../../../../../../../app/components/FormBlock.vue","../../../../../../../app/pages/[...permalink].vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createItem } from '@directus/sdk'\nimport type { BlockForm, Form, FormField } from '#build/directus-types'\n\nconst props = defineProps<Omit<BlockForm, 'form'> & {\n  fields: FormField[]\n  form: {\n    submit_label?: Form['submit_label'] | null\n    success_message?: Form['success_message'] | null\n    success_redirect_url?: Form['success_redirect_url'] | null\n    id?: Form['id'] | null\n  }\n}>()\n\nconst directus = useDirectus()\nconst router = useRouter()\n\nconst submissionState = ref<'idle' | 'loading' | 'success' | 'error'>('idle')\nasync function handleSubmit(event: Event) {\n  const form = event.target as HTMLFormElement\n  const data = new FormData(form)\n  const entries = [...data.entries()]\n\n  submissionState.value = 'loading'\n\n  try {\n    await directus.request(createItem('form_submissions', {\n      form: props.form.id,\n      // @ts-expect-error id is not actually required\n      values: entries.map(([id, value]) => ({\n        field: id as string,\n        value: value as string,\n      })),\n    }))\n    submissionState.value = 'success'\n\n    if (props.form.success_redirect_url) {\n      const url = new URL(props.form.success_redirect_url, window.location.origin)\n      if (url.host === window.location.host) {\n        router.push(url.pathname)\n      }\n      else {\n        window.location.href = props.form.success_redirect_url\n      }\n    }\n\n    form.reset()\n  }\n  catch (error) {\n    submissionState.value = 'error'\n    console.error(error)\n  }\n}\n</script>\n\n<template>\n  <form\n    class=\"flex flex-col gap-2\"\n    @submit.prevent=\"handleSubmit\"\n  >\n    <header class=\"text-2xl font-bold\">\n      {{ title }}\n    </header>\n    <p class=\"text-xl font-light\">\n      {{ headline }}\n    </p>\n    <div class=\"grid grid-cols-6 gap-8\">\n      <component\n        :is=\"field.label ? 'label' : 'div'\"\n        v-for=\"field in fields\"\n        :key=\"field.id\"\n        class=\"flex flex-col gap-2\"\n        :class=\"{\n          'col-span-2': field.width === '33',\n          'col-span-3': field.width === '50',\n          'col-span-4': field.width === '67',\n          'col-span-6': field.width === '100',\n        }\"\n      >\n        <span\n          v-if=\"field.label\"\n          class=\"text-xs uppercase\"\n        >\n          {{ field.label }}\n        </span>\n        <input\n          v-if=\"field.type === 'text'\"\n          type=\"text\"\n          :name=\"field.id\"\n          :placeholder=\"field.placeholder || ''\"\n          class=\"flex h-10 w-full border border-input bg-background px-3 py-2 text-sm ring-black ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        >\n        <select\n          v-else-if=\"field.type === 'select'\"\n          :name=\"field.id\"\n          class=\"p-1 border-1 flex h-10 w-full border border-input bg-background px-3 py-2 text-sm ring-black ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        >\n          <option\n            v-for=\"option in field.choices\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n          >\n            {{ option.text }}\n          </option>\n        </select>\n        <textarea\n          v-else-if=\"field.type === 'textarea'\"\n          class=\"min-h-36 flex h-10 w-full border border-input bg-background px-3 py-2 text-sm ring-black ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n          :name=\"field.id\"\n          :placeholder=\"field.placeholder || ''\"\n        />\n      </component>\n      <span\n        v-if=\"submissionState === 'success'\"\n        class=\"col-span-6\"\n      >\n        {{ form.success_message || 'Form submitted successfully' }}\n      </span>\n      <span\n        v-else-if=\"submissionState === 'error'\"\n        class=\"col-span-6\"\n      >\n        There was an error submitting the form.\n      </span>\n      <button\n        type=\"submit\"\n        class=\"col-span-6 justify-center bg-black text-white flex h-10 w-full border border-input bg-background px-3 py-2 text-sm ring-black ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n      >\n        {{ form.submit_label }}\n      </button>\n    </div>\n  </form>\n</template>\n","<script setup lang=\"ts\">\nimport { readItems } from '@directus/sdk'\nimport { withLeadingSlash } from 'ufo'\n\nconst directus = useDirectus()\n\nconst route = useRoute('permalink')\n\nconst { data: page } = await useAsyncData(`page-${(route.params.permalink || []).join('/')}`, async () => {\n  const pages = await directus.request(readItems('pages', {\n    filter: {\n      permalink: {\n        _eq: withLeadingSlash((route.params.permalink || []).join('/')),\n      },\n      status: {\n        _eq: 'published',\n      },\n    },\n    fields: [\n      'title',\n      'description',\n      'published_at',\n      {\n        blocks: [\n          'id',\n          'collection',\n          {\n            item: {\n              block_richtext: ['id', 'content', 'headline', 'title', 'alignment'],\n              block_hero: ['id', 'alignment', 'title', 'headline', { image: ['*', 'id', 'width', 'height', 'description'] }],\n              block_gallery: [\n                'id',\n                'headline',\n                'title',\n                {\n                  items: ['sort', { directus_file: ['id', 'width', 'height', 'description'] }],\n                },\n              ],\n              block_form: [\n                'id',\n                'title',\n                'headline',\n                {\n                  form: [\n                    'submit_label',\n                    'success_message',\n                    'success_redirect_url',\n                    'id',\n                    {\n                      fields: ['sort', '*'],\n                    },\n                  ],\n                },\n              ],\n            },\n          },\n        ],\n      },\n    ],\n  }))\n  return pages[0]\n})\n\nif (!page.value) {\n  throw createError({\n    statusCode: 404,\n  })\n}\n\nuseSeoMeta({\n  title: page.value?.title,\n  description: page.value?.description,\n})\n</script>\n\n<template>\n  <div\n    v-if=\"page\"\n    class=\"flex flex-col gap-12 lg:gap-22 max-w-2xl w-full py-14 mx-auto min-h-[50vh] sm:min-h-[65vh]\"\n  >\n    <h1 class=\"text-4xl font-light lg:text-5xl\">\n      {{ page.title }}\n    </h1>\n    <section\n      v-for=\"block in page.blocks\"\n      :key=\"block.id\"\n    >\n      <RichTextBlock\n        v-if=\"block.collection === 'block_richtext'\"\n        v-bind=\"block.item\"\n      />\n      <FormBlock\n        v-else-if=\"block.collection === 'block_form' && block.item.form\"\n        :fields=\"block.item.form.fields || []\"\n        v-bind=\"{\n          ...block.item,\n          form: block.item.form,\n        }\"\n      />\n      <HeroBlock\n        v-else-if=\"block.collection === 'block_hero'\"\n        v-bind=\"block.item\"\n      />\n      <GalleryBlock\n        v-else-if=\"block.collection === 'block_gallery'\"\n        :images=\"(block.item.items as Array<{ directus_file: any }>).map(i => i.directus_file)\"\n        v-bind=\"block.item\"\n      />\n    </section>\n  </div>\n</template>\n"],"file":"_nuxt/B0Jw6fll.js"}