@maz-ui/mcp 5.0.0 → 5.1.0-beta.0

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

@@ -1,164 +0,0 @@
----
-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 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>
-  <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/MazDialog'
-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)
-
-<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 v-for="i in 40" :key="i" style="padding-bottom: 2rem;">
-        Scroll down
-      </p>
-    </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 v-for="i in 40" :key="i" style="padding-bottom: 2rem">Scroll down</p>
-  </template>
-
-  <template #footer>
-    <MazBtn @click="scollableOpened = false"> Confirm </MazBtn>
-  </template>
-</MazDialog>
-```
-
-  </template>
-</ComponentDemo>
-
-## Width
-
-On tablet and up, the dialog is sized by two CSS variables coming from the active theme preset (`components.dialog`):
-
-- `--maz-dialog-max-width` (default `38rem`)
-- `--maz-dialog-min-width` (default `32rem`)
-
-You can set these defaults globally per preset — see [the theme `components.dialog` documentation](./../ecosystem/themes.md#dialog-sizing). To change the width of a single dialog, pass the `max-width` / `min-width` props — they always override the preset:
-
-<ComponentDemo>
-  <MazBtn @click="widthOpened = true">Open Wide Dialog</MazBtn>
-
-  <MazDialog v-model="widthOpened" title="Custom width" max-width="50rem" min-width="40rem">
-    <p>
-      This dialog overrides the preset width through props.
-    </p>
-    <template #footer="{ close }">
-      <MazBtn @click="close">
-        Confirm
-      </MazBtn>
-    </template>
-  </MazDialog>
-
-<template #code>
-
-```vue
-<template>
-  <MazDialog
-    v-model="isOpen"
-    title="Custom width"
-    max-width="50rem"
-    min-width="40rem"
-  >
-    <p>This dialog overrides the preset width through props.</p>
-  </MazDialog>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-::: tip
-The default widths are expressed in `rem`, so they scale with the preset's `base-font-size`. Presets with a larger base size (e.g. `ocean` at `16px`) ship rem values adjusted to keep the rendered pixel width consistent across presets.
-:::
-
-## Accessibility
-
-- The dialog is a modal `dialog` (`aria-modal`), labelled by its title and described by its content (override them with the `aria-labelledby` / `aria-describedby` props).
-- The focus moves into the dialog on open, stays trapped inside and goes back to the previous element on close. <kbd>Esc</kbd> closes it (`close-on-escape`).
-- While it is open, the rest of the page is `inert` (no focus, no click, hidden from assistive technologies), except the toasts and the live regions.
-
-<!--@include: ./../../.vitepress/generated-docs/maz-dialog.doc.md-->
-
-<script setup>
-  import { ref } from 'vue'
-  const isOpen = ref(false)
-  const scollableOpened = ref(false)
-  const widthOpened = ref(false)
-</script>

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

@@ -1,181 +0,0 @@
----
-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="start" 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="end" 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="start" 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="end" 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>
-
-## Accessibility
-
-The drawer is a modal `dialog` labelled by its `title`. The focus is trapped inside while it is open, <kbd>Esc</kbd> closes it, and the rest of the page is `inert` (except the toasts and the live regions). The close button is labelled from `@maz-ui/translations` (`aria.close`).
-
-<!--@include: ./../../.vitepress/generated-docs/maz-drawer.doc.md-->