docs: add modal-long-scroll example to use cases page #337

Author: hunterliu1003

docs/components/content/ModalLongScroll.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { VueFinalModal } from 'vue-final-modal'
+
+defineProps<{
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: boolean): void
+  (e: 'confirm'): void
+}>()
+</script>
+
+<template>
+  <VueFinalModal
+    content-transition="vfm-fade"
+    overlay-transition="vfm-fade"
+    content-class="absolute inset-0"
+    @update:model-value="(val) => emit('update:modelValue', val)"
+  >
+    <div
+      class="absolute inset-0 h-full overflow-auto"
+      @click.self="() => emit('update:modelValue', false)"
+    >
+      <div class="flex flex-col max-w-xl my-12 mx-auto p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2">
+        <h1 class="text-xl">
+          {{ title }}
+        </h1>
+        <slot />
+        <button class="mt-1 ml-auto px-2 border rounded-lg" @click="() => emit('confirm')">
+          Confirm
+        </button>
+      </div>
+    </div>
+  </VueFinalModal>
+</template>

docs/components/content/ModalLongScrollPreview.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ModalsContainer, useModal } from 'vue-final-modal'
+import ModalLongScroll from './ModalLongScroll.vue'
+
+const p = `<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper,
+      ex at blandit iaculis, nibh urna lacinia tellus, a auctor lorem libero a
+      lectus. Nulla bibendum mollis sapien, nec euismod mi mattis cursus.
+      Curabitur accumsan erat eu viverra fringilla. Interdum et malesuada fames
+      ac ante ipsum primis in faucibus. Phasellus ut neque eu diam vehicula
+      efficitur. Vivamus ultricies purus facilisis augue porttitor vestibulum a
+      non neque. Nunc egestas risus elit, sed fringilla velit posuere et.
+    </p>`
+
+const { open, close } = useModal({
+  component: ModalLongScroll,
+  attrs: {
+    title: 'Hello World!',
+    onConfirm: () => close(),
+  },
+  slots: {
+    default: p + p + p + p + p + p + p + p + p + p + p + p,
+  },
+})
+</script>
+
+<template>
+  <VButton @click="open">
+    Open Modal
+  </VButton>
+
+  <ModalsContainer />
+</template>

docs/content/4.use-cases/9.modal-long-scroll.md

@@ -0,0 +1,96 @@
+---
+head.title: 'Modal Long Scroll | Examples'
+---
+
+# Modal Long Scroll
+
+A long scrollable modal example like [Bootstrap Modal  scrolling-long-content](https://getbootstrap.com/docs/5.3/components/modal/#scrolling-long-content)
+
+## Preview
+
+::code-group
+  ::code-block{label="Preview" preview}
+    ::modal-long-scroll-preview
+    ::
+  ::
+
+  ```vue [Preview.vue]
+    <script setup lang="ts">
+    import { ModalsContainer, useModal } from 'vue-final-modal'
+    import ModalLongScroll from './ModalLongScroll.vue'
+
+    const p = `<p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper,
+          ex at blandit iaculis, nibh urna lacinia tellus, a auctor lorem libero a
+          lectus. Nulla bibendum mollis sapien, nec euismod mi mattis cursus.
+          Curabitur accumsan erat eu viverra fringilla. Interdum et malesuada fames
+          ac ante ipsum primis in faucibus. Phasellus ut neque eu diam vehicula
+          efficitur. Vivamus ultricies purus facilisis augue porttitor vestibulum a
+          non neque. Nunc egestas risus elit, sed fringilla velit posuere et.
+        </p>`
+
+    const { open, close } = useModal({
+      component: ModalLongScroll,
+      attrs: {
+        title: 'Hello World!',
+        onConfirm: () => close(),
+      },
+      slots: {
+        default: p + p + p + p + p + p + p + p + p + p + p + p,
+      },
+    })
+    </script>
+
+    <template>
+      <VButton @click="open">
+        Open Modal
+      </VButton>
+
+      <ModalsContainer />
+    </template>
+
+  ```
+::
+
+## `<ModalLongScroll>` component
+
+::code-group
+  ```vue [ModalLongScroll.vue]
+    <script setup lang="ts">
+    import { VueFinalModal } from 'vue-final-modal'
+
+    defineProps<{
+      title?: string
+    }>()
+
+    const emit = defineEmits<{
+      (e: 'update:modelValue', modelValue: boolean): void
+      (e: 'confirm'): void
+    }>()
+    </script>
+
+    <template>
+      <VueFinalModal
+        content-transition="vfm-fade"
+        overlay-transition="vfm-fade"
+        content-class="absolute inset-0"
+        @update:model-value="(val) => emit('update:modelValue', val)"
+      >
+        <div
+          class="absolute inset-0 h-full overflow-auto"
+          @click.self="() => emit('update:modelValue', false)"
+        >
+          <div class="flex flex-col max-w-xl my-12 mx-auto p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2">
+            <h1 class="text-xl">
+              {{ title }}
+            </h1>
+            <slot />
+            <button class="mt-1 ml-auto px-2 border rounded-lg" @click="() => emit('confirm')">
+              Confirm
+            </button>
+          </div>
+        </div>
+      </VueFinalModal>
+    </template>
+  ```
+::