first

documentation/modal/v-modal-base-documentation.md

@@ -0,0 +1,40 @@
+### VModal
+
+Vuero ships with a dead simple and versatile `<VModal />` component.
+The VModal component has 2 available `slots`: one for the `content`,
+so you can put anything you want inside, and one for the primary `action`.
+Check the code example for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const centeredActionsOpen = ref(false)
+</script>
+
+<template>
+  <VButton bold @click="centeredActionsOpen = true">
+    Open Modal
+  </VButton>
+
+  <VModal
+    :open="centeredActionsOpen"
+    actions="center"
+    @close="centeredActionsOpen = false"
+  >
+    <template #content>
+      <VPlaceholderSection
+        title="Go Premium"
+        subtitle="Unlock more features and business tools by going premium"
+      />
+    </template>
+    <template #action>
+      <VButton color="primary" raised>
+        Confirm
+      </VButton>
+    </template>
+  </VModal>
+</template>
+```
+
+<!--/code-->

documentation/modal/v-modal-forms-documentation.md

@@ -0,0 +1,76 @@
+### Modal Forms
+
+Vuero `<VModal />` component can be used for anything, including displaying
+and handling forms, set the `is` property to change the element used to render
+the modal tag. Use the `content` slot `<template #content></template>`
+to inject any kind of content inside the modal.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const smallFormOpen = ref(false)
+</script>
+
+<template>
+  <VButton bold @click="smallFormOpen = true">
+    Open Modal
+  </VButton>
+
+  <VModal
+    is="form"
+    :open="smallFormOpen"
+    title="Leave a Comment"
+    size="small"
+    actions="right"
+    @submit.prevent="smallFormOpen = false"
+    @close="smallFormOpen = false"
+  >
+    <template #content>
+      <div class="modal-form">
+        <div class="field">
+          <label>Username *</label>
+          <div class="control">
+            <input
+              type="text"
+              class="input"
+              placeholder="Username"
+            >
+          </div>
+        </div>
+        <div class="field">
+          <label>Email *</label>
+          <div class="control">
+            <input
+              type="text"
+              class="input"
+              placeholder="Email Address"
+            >
+          </div>
+        </div>
+        <div class="field">
+          <label>Comment *</label>
+          <div class="control">
+            <textarea
+              class="textarea"
+              rows="4"
+              placeholder="Your message..."
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #action>
+      <VButton
+        type="submit"
+        color="primary"
+        raised
+      >
+        Publish
+      </VButton>
+    </template>
+  </VModal>
+</template>
+```
+
+<!--/code-->

documentation/modal/v-modal-options-documentation.md

@@ -0,0 +1,43 @@
+### Modal Options
+
+The `<VModal />` component behavior can be customized. Use the `noscroll`
+prop to disable page scrolling when the modal is open.
+You also can use the `noclose` prop to prevent modal from closing
+if the user click on the background overlay.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const isOpen = ref(false)
+</script>
+
+<template>
+  <VButton bold @click="isOpen = true">
+    Open Modal
+  </VButton>
+
+  <VModal
+    :open="isOpen"
+    size="small"
+    actions="center"
+    noscroll
+    noclose
+    @close="isOpen = false"
+  >
+    <template #content>
+      <VPlaceholderSection
+        title="Go Premium"
+        subtitle="Unlock more features and business tools by going premium"
+      />
+    </template>
+    <template #action>
+      <VButton color="primary" raised>
+        Confirm
+      </VButton>
+    </template>
+  </VModal>
+</template>
+```
+
+<!--/code-->

documentation/modal/v-modal-sizes-documentation.md

@@ -0,0 +1,40 @@
+### Modal Sizes
+
+The `<VModal />` component can have different sizes. use the size `true`
+prop to change the modal size. Available sizes are: `small`, default,
+`medium`, `large` and `big`.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const centeredActionsOpen = ref(false)
+</script>
+
+<template>
+  <VButton bold @click="centeredActionsOpen = true">
+    Open Modal
+  </VButton>
+
+  <VModal
+    :open="centeredActionsOpen"
+    size="small"
+    actions="center"
+    @close="centeredActionsOpen = false"
+  >
+    <template #content>
+      <VPlaceholderSection
+        title="Go Premium"
+        subtitle="Unlock more features and business tools by going premium"
+      />
+    </template>
+    <template #action>
+      <VButton color="primary" raised>
+        Confirm
+      </VButton>
+    </template>
+  </VModal>
+</template>
+```
+
+<!--/code-->