@maz-ui/mcp 4.0.0-beta.26

package/docs/src/components/maz-dialog-confirm.md

@@ -0,0 +1,240 @@
+---
+title: MazDialogConfirm
+description: MazDialogConfirm is a standalone component that dialogs with the user to show important information and propose confirmation. You should wait for this response with await.
+
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+::: info
+This component uses [MazDialog](./maz-dialog.md), so it inherits all its props
+:::
+
+::: tip
+This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props
+:::
+
+## Basic usage
+
+<MazBtn @click="askToUser">Ask user</MazBtn>
+
+<MazDialogConfirm identifier="one" accept-text="Ok" reject-text="Reject" />
+
+<MazDialogConfirm identifier="two" :buttons="buttons">
+  <template #title>
+    Do you really want to delete this user?
+  </template>
+  <template #default>
+    Are you really sure you want to delete this user?
+  </template>
+</MazDialogConfirm>
+
+<MazDialog v-model="confirmDialog">
+  <template #title>
+    User deleted
+  </template>
+  <template #default>
+    User has been deleted!
+  </template>
+  <template #footer="{ close }">
+    <MazBtn @click="close">
+      Ok
+    </MazBtn>
+  </template>
+</MazDialog>
+
+```vue
+<script setup>
+import MazDialogConfirm, { useMazDialogConfirm } from 'maz-ui/components/MazDialogConfirm'
+import MazDialog from 'maz-ui/components/MazDialog'
+
+import { ref } from 'vue'
+
+const confirmDialog = ref(false)
+
+const { showDialogAndWaitChoice, data } = useMazDialogConfirm()
+
+data.value = {
+  title: 'Delete user',
+  message: 'Are you sure you want to delete this user?',
+}
+
+const buttons: DialogCustomButton[] = [
+  {
+    text: 'Cancel',
+    type: 'reject',
+    color: 'destructive',
+    outlined: true,
+    response: 'cancel',
+    size: 'sm',
+  },
+  {
+    text: 'Delete!',
+    type: 'resolve',
+    color: 'success',
+    response: 'delete',
+    size: 'lg',
+  },
+]
+
+async function askToUser() {
+  try {
+    const acceptResponse = await showDialogAndWaitChoice('one')
+    toast.success(acceptResponse, {
+      position: 'top-right'
+    })
+    const rejectResponse = await showDialogAndWaitChoice('two')
+    toast.success(rejectResponse, {
+      position: 'top-right'
+    })
+    confirmDialog.value = true
+  }
+  catch (rejectResponse) {
+    toast.error(rejectResponse, {
+      position: 'top-right'
+    })
+  }
+}
+</script>
+
+<template>
+  <MazBtn @click="askToUser">
+    Ask user
+  </MazBtn>
+
+  <MazDialogConfirm
+    :data="dataPromiseOne"
+    identifier="one"
+  />
+
+  <MazDialogConfirm identifier="two" :buttons="buttons">
+    <template #title>
+      Do you really want to delete this user?
+    </template>
+    <template #default>
+      Are you really sure you want to delete this user?
+    </template>
+  </MazDialogConfirm>
+
+  <MazDialog v-model="confirmDialog">
+    <template #title>
+      User deleted
+    </template>
+    <template #default>
+      User has been deleted!
+    </template>
+    <template #footer="{ close }">
+      <MazBtn @click="close">
+        Ok
+      </MazBtn>
+    </template>
+  </MazDialog>
+</template>
+```
+
+## Types
+
+```ts
+interface MazDialogConfirmData {
+  /**
+   * Dialog title
+   */
+  title?: string
+  /**
+   * Dialog message
+   */
+  message?: string
+  /**
+   * Dialog custom buttons
+   * @default [{ text: 'Confirm', color: 'success', type: 'accept' }, { text: 'Cancel', color: 'destructive', type: 'reject' }]
+   * @type {MazDialogConfirmButton[]}
+   */
+  buttons?: MazDialogConfirmButton[]
+}
+
+// All props of MazBtn
+interface MazDialogConfirmButton {
+  text?: string
+  block?: boolean
+  color?: Color
+  disabled?: boolean
+  loading?: boolean
+  outlined?: boolean
+  rounded?: boolean
+  size?: Size
+  text: string
+  type: 'accept' | 'reject'
+  response?: unknown
+}
+
+type Color = 'primary'
+    | 'secondary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'destructive'
+    | 'accent'
+    | 'contrast'
+    | 'transparent'
+
+type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+```
+
+<!--@include: ./../../.vitepress/generated-docs/maz-dialog-confirm.doc.md-->
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useToast } from 'maz-ui/src/composables/useToast'
+  import MazDialogConfirm, {
+    useMazDialogConfirm, type MazDialogConfirmButton, type MazDialogConfirmData
+  } from 'maz-ui/src/components/MazDialogConfirm.vue'
+
+  const { showDialogAndWaitChoice, data } = useMazDialogConfirm()
+  const confirmDialog = ref(false)
+  const toast = useToast()
+
+  async function askToUser () {
+    try {
+      const acceptResponse = await showDialogAndWaitChoice('one')
+      toast.success(acceptResponse, {
+        position: 'top-right'
+      })
+      const rejectResponse = await showDialogAndWaitChoice('two')
+      toast.success(rejectResponse, {
+        position: 'top-right'
+      })
+      confirmDialog.value = true
+    } catch (rejectResponse) {
+      toast.error(rejectResponse, {
+        position: 'top-right'
+      })
+    }
+  }
+
+  data.value = {
+    title: 'Delete user',
+    message: 'Are you sure you want to delete this user?',
+  }
+
+  const buttons: MazDialogConfirmButton[] = [
+    {
+      text: 'Cancel',
+      type: 'reject',
+      color: 'destructive',
+      outlined: true,
+      response: 'cancel',
+      size: 'sm',
+    },
+    {
+      text: 'Delete!',
+      type: 'accept',
+      color: 'success',
+      response: 'delete',
+      size: 'lg',
+    },
+  ]
+</script>

package/docs/src/components/maz-dialog.md

@@ -0,0 +1,208 @@
+---
+title: MazDialog
+description: MazDialog is a standalone dialog component to show important informations to the user or propose specific action. Many options are available. You can hide the header or the footer, full-size layout, differents states etc.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+::: tip
+This component usex `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props
+:::
+
+## Basic usage
+
+<ComponentDemo expanded>
+  <MazBtn @click="isOpen = true">Open Dialog</MazBtn>
+
+  <MazDialog v-model="isOpen" title="Dialog Title">
+    <p>
+      Your content
+    </p>
+    <template #footer="{ close }">
+      <MazBtn @click="close">
+        Confirm
+      </MazBtn>
+    </template>
+  </MazDialog>
+
+<template #code>
+
+```vue
+<script setup>
+import { MazDialog } from 'maz-ui/components'
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <MazBtn @click="isOpen = true">
+    Open Dialog
+  </MazBtn>
+
+  <MazDialog v-model="isOpen" title="Dialog Title">
+    <p>
+      Your content
+    </p>
+
+    <template #footer="{ close }">
+      <MazBtn @click="close">
+        Confirm
+      </MazBtn>
+    </template>
+  </MazDialog>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Scrollable
+
+For long content, you can enable scrolling in content part (Header and footer slot remain visible at top and bottom)
+
+::: warning
+With this option, an overflow is applied: So, some problems with absolute content may appear - such as `<MazSelect />` opened list can not be visible outside the dialog content part, you should scroll again to show the full content - **Check example below**
+:::
+
+<ComponentDemo>
+  <MazBtn @click="scollableOpened = true">Open Scrollable Dialog</MazBtn>
+
+  <MazDialog v-model="scollableOpened" title="Dialog Title" max-height="400px" scrollable>
+    <template #title>
+      Scrollable Dialog Title
+    </template>
+    <template #default>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Scroll
+      </p>
+      <p style="padding-bottom: 2rem;">
+        Click on the select to open the list
+      </p>
+      <MazSelect
+        :model-value="1"
+        :options="[
+          { value: 1, label: 1 },
+          { value: 2, label: 2 },
+          { value: 3, label: 3 },
+          { value: 4, label: 4 },
+          { value: 5, label: 5 },
+          { value: 6, label: 6 },
+        ]"
+      />
+    </template>
+    <template #footer>
+      <MazBtn @click="scollableOpened = false">
+        Confirm
+      </MazBtn>
+    </template>
+  </MazDialog>
+
+<template #code>
+
+```html
+<MazDialog v-model="scollableOpened" title="Dialog Title" max-height="400px" scrollable>
+  <template #title> Scrollable Dialog Title </template>
+
+  <template #default>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <p style="padding-bottom: 2rem">Scroll</p>
+    <MazSelect
+      :model-value="1"
+      :options="[
+      { value: 1, label: 1 },
+      { value: 2, label: 2 },
+      { value: 3, label: 3 },
+      { value: 4, label: 4 },
+      { value: 5, label: 5 },
+      { value: 6, label: 6 },
+    ]"
+    />
+  </template>
+  <template #footer>
+    <MazBtn @click="scollableOpened = false"> Confirm </MazBtn>
+  </template>
+</MazDialog>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-dialog.doc.md-->
+
+<script setup>
+  import { ref } from 'vue'
+  const isOpen = ref(false)
+  const scollableOpened = ref(false)
+</script>

package/docs/src/components/maz-drawer.md

@@ -0,0 +1,177 @@
+---
+title: MazDrawer
+description: MazDrawer is a standalone component to add a collapsible sidebar at the top and bottom bar
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+::: tip
+This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props
+:::
+
+## Basic usage
+
+<ComponentDemo expanded>
+  <div class="maz-flex maz-flex-col maz-gap-2 maz-flex-center">
+    <MazBtn @click="isOpenedTop = !isOpenedTop">
+      Open top drawer
+    </MazBtn>
+    <div class="maz-flex maz-flex-wrap maz-gap-2">
+      <MazBtn @click="isOpenedLeft = !isOpenedLeft">
+        Open left drawer
+      </MazBtn>
+      <MazBtn @click="isOpenedRight = !isOpenedRight">
+        Open right drawer
+      </MazBtn>
+    </div>
+    <MazBtn @click="isOpenedBottom = !isOpenedBottom">
+      Open bottom drawer
+    </MazBtn>
+  </div>
+
+<template #code>
+
+```html
+<MazBtn @click="isOpenedTop = !isOpenedTop"> Open top drawer </MazBtn>
+<MazBtn @click="isOpenedLeft = !isOpenedLeft"> Open left drawer </MazBtn>
+<MazBtn @click="isOpenedRight = !isOpenedRight"> Open right drawer </MazBtn>
+<MazBtn @click="isOpenedBottom = !isOpenedBottom"> Open bottom drawer </MazBtn>
+
+<MazDrawer variant="top" v-model="isOpenedTop">
+  <template #title> Drawer top </template>
+  <template #default="{ close }">
+    <div style="padding: 16px">
+      <p>Content</p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close"> Close </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<MazDrawer variant="bottom" v-model="isOpenedBottom">
+  <template #title> Drawer bottom </template>
+  <template #default="{ close }">
+    <div style="padding: 16px">
+      <p>Content</p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close"> Close </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<MazDrawer variant="left" v-model="isOpenedLeft">
+  <template #title> Drawer left </template>
+  <template #default="{ close }">
+    <div style="padding: 16px">
+      <p>Content</p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close"> Close </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<MazDrawer variant="right" v-model="isOpenedRight">
+  <template #title> Drawer right </template>
+  <template #default="{ close }">
+    <div style="padding: 16px">
+      <p>Content</p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close"> Close </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+```
+
+  </template>
+</ComponentDemo>
+
+<MazDrawer variant="top" v-model="isOpenedTop">
+  <template #title>
+    Drawer top
+  </template>
+  <template #default="{ close }">
+    <div style="padding: 16px;">
+      <p>
+        Content
+      </p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close">
+          Close
+        </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<MazDrawer variant="bottom" v-model="isOpenedBottom">
+  <template #title>
+    Drawer bottom
+  </template>
+  <template #default="{ close }">
+    <div style="padding: 16px;">
+      <p>
+        Content
+      </p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close">
+          Close
+        </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<MazDrawer variant="left" v-model="isOpenedLeft">
+  <template #title>
+    Drawer left
+  </template>
+  <template #default="{ close }">
+    <div style="padding: 16px;">
+      <p>
+        Content
+      </p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close">
+          Close
+        </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<MazDrawer variant="right" v-model="isOpenedRight">
+  <template #title>
+    Drawer right
+  </template>
+  <template #default="{ close }">
+    <div style="padding: 16px;">
+      <p>
+        Content
+      </p>
+      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
+        <MazBtn color="destructive" @click="close">
+          Close
+        </MazBtn>
+      </div>
+    </div>
+  </template>
+</MazDrawer>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const isOpenedTop = ref(false)
+  const isOpenedBottom = ref(false)
+  const isOpenedRight = ref(false)
+  const isOpenedLeft = ref(false)
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-drawer.doc.md-->