feat: add VModal

Author: manuelodelain

components/molecules/VModal/Alignment.stories.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const isOpen = ref(false)
+const hasLeave = ref(!isOpen.value)
+
+const alignments = ['top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left']
+const selectedAlign = ref('')
+
+function onSelect(event: Event) {
+    const el = event.target as HTMLSelectElement
+    selectedAlign.value = el.options[el.selectedIndex].value
+}
+
+function open() {
+    isOpen.value = true
+    hasLeave.value = false
+}
+</script>
+
+<template>
+    <NuxtStory :class="$style.root">
+        <template #aside>
+            <p>Modal position on enter:</p>
+            <br />
+            <select id="alignment-select" name="alignments" @input="onSelect">
+                <option value="">--Please choose an alignment--</option>
+                <option v-for="alignment in alignments" :key="alignment" :value="alignment">
+                    {{ alignment }}
+                </option>
+            </select>
+            <br />
+            <br />
+            <VButton emphasis="primary" @click="open">Open</VButton>
+        </template>
+
+        <VModal
+            v-if="!hasLeave"
+            v-model="isOpen"
+            :align="selectedAlign"
+            @after-leave="hasLeave = true"
+            @enter="hasLeave = false"
+        >
+            <div :class="$style.content">content</div>
+        </VModal>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.root {
+    min-height: 300vh;
+}
+
+.content {
+    min-height: rem(300);
+    padding: rem(40);
+}
+</style>

components/molecules/VModal/Default.stories.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+const isOpen = ref(false)
+const hasLeave = ref(!isOpen.value)
+
+function onClick() {
+    isOpen.value = true
+    hasLeave.value = false
+}
+</script>
+
+<template>
+    <NuxtStory :class="$style.root">
+        <VButton :class="$style.button" emphasis="secondary" @click="onClick">Open</VButton>
+
+        <VModal v-if="!hasLeave" v-model="isOpen" @enter="hasLeave = false" @after-leave="hasLeave = true">
+            <div :class="$style.content">content test</div>
+        </VModal>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.root {
+    min-height: 200vh;
+}
+
+.button {
+    position: sticky;
+    top: rem(30);
+}
+
+.content {
+    padding: rem(40);
+    border: 1px solid black;
+    margin: rem(50);
+}
+</style>

components/molecules/VModal/InnerScrollable.stories.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+const isOpen = ref(false)
+const hasLeave = ref(!isOpen.value)
+
+function open() {
+    isOpen.value = true
+    hasLeave.value = false
+}
+</script>
+
+<template>
+    <NuxtStory :class="$style.root">
+        <template #aside>
+            <VButton
+                emphasis="primary"
+                @click="open"
+            >
+                Open
+            </VButton>
+        </template>
+
+        <VModal
+            v-if="!hasLeave"
+            v-model="isOpen"
+            :class="$style.modal"
+            align="bottom"
+            @enter="hasLeave = false"
+            @after-leave="hasLeave = true"
+        >
+            <div :class="$style.inner">
+                content
+            </div>
+        </VModal>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.root {
+    min-height: 300vh;
+}
+
+.modal {
+    --v-modal-content-width: #{60vw};
+
+    position: absolute;
+    bottom: 0;
+    overflow: auto scroll;
+    width: 100%;
+    height: 50vh;
+    min-height: rem(300);
+    max-height: 100%;
+    padding: rem(40);
+}
+
+.inner {
+    height: 200vh;
+    background-color: lightgrey;
+}
+</style>