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

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

@@ -1,363 +0,0 @@
----
-title: MazContainer
-description: MazContainer is a lightweight component to wrap content with optional header, border, elevation, and rounded corners - a simpler alternative to MazCard
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-::: tip
-MazContainer is designed to be a lighter alternative to [MazCard](/components/maz-card.html). Use it when you need a simple container with basic styling options without the extra features like galleries, collapsible content, or actions.
-:::
-
-## Basic usage
-
-<ComponentDemo>
-  <MazContainer>
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer>
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
-  </MazContainer>
-</template>
-
-<script lang="ts" setup>
-  import MazContainer from 'maz-ui/components/MazContainer'
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-## With title
-
-Add a header with a title using the `title` prop or the `title` slot.
-
-<ComponentDemo>
-  <MazContainer title="Section Title">
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer title="Section Title">
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## With icons
-
-Add icons to the header using `start-icon` and `end-icon` props.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazContainer title="Settings" start-icon="/cog-6-tooth.svg">
-      Configure your application settings here.
-    </MazContainer>
-    <MazContainer title="User Profile" start-icon="/user.svg" end-icon="/pencil.svg">
-      View and edit your profile information.
-    </MazContainer>
-  </div>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer title="Settings" start-icon="/cog-6-tooth.svg">
-    Configure your application settings here.
-  </MazContainer>
-
-  <MazContainer title="User Profile" start-icon="/user.svg" end-icon="/pencil.svg">
-    View and edit your profile information.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-`startIcon` and `endIcon` also accept a full `MazIconProps` object — pass the same shape `<MazIcon>` accepts to override the icon size, add a `<title>` for screen readers, etc.
-
-```vue
-<MazContainer
-  title="Settings"
-  :start-icon="{
-    icon: MazCog6Tooth,
-    size: 'lg',
-    title: 'Open settings',
-  }"
->
-  Configure your application settings here.
-</MazContainer>
-```
-
-## Styling options
-
-### Elevation
-
-Add shadow to make the container stand out.
-
-<ComponentDemo>
-  <MazContainer elevation :bordered="false">
-    Container with elevation effect and no border.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer elevation :bordered="false">
-    Container with elevation effect and no border.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Bordered
-
-By default, the container has a border. You can disable it.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazContainer title="With border (default)">
-      This container has a border.
-    </MazContainer>
-    <MazContainer title="Without border" :bordered="false">
-      This container has no border.
-    </MazContainer>
-  </div>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer title="With border (default)">
-    This container has a border.
-  </MazContainer>
-
-  <MazContainer title="Without border" :bordered="false">
-    This container has no border.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Transparent
-
-Remove the background color with the `transparent` prop.
-
-<ComponentDemo>
-  <MazContainer title="Transparent container" transparent>
-    This container has a transparent background.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer title="Transparent container" transparent>
-    This container has a transparent background.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Rounded sizes
-
-Customize the border radius with the `rounded-size` prop.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-wrap maz:gap-4">
-    <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
-      {{ size }}
-    </MazContainer>
-  </div>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
-    {{ size }}
-  </MazContainer>
-</template>
-
-<script lang="ts" setup>
-  import MazContainer from 'maz-ui/components/MazContainer'
-
-  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full']
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-### No padding
-
-Remove internal padding with `:padding="false"`.
-
-<ComponentDemo>
-  <MazContainer title="No padding" :padding="false">
-    Content without container padding - useful for custom layouts.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer title="No padding" :padding="false">
-    Content without container padding - useful for custom layouts.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Full width
-
-Use the `block` prop to make the container take full width.
-
-<ComponentDemo>
-  <MazContainer title="Full width container" block>
-    This container spans the full width of its parent.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer title="Full width container" block>
-    This container spans the full width of its parent.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Custom header
-
-Use the `header` slot to fully customize the header, or use `title`, `icon-start`, and `icon-end` slots for more granular control.
-
-<ComponentDemo>
-  <MazContainer>
-    <template #header>
-      <div class="maz:flex maz:items-center maz:justify-between maz:w-full maz:px-4 maz:py-3 maz:bg-primary maz:text-primary-foreground">
-        <span class="maz:font-semibold">Custom Header</span>
-        <MazBadge size="sm" color="white" class="maz:text-primary">
-          New
-        </MazBadge>
-      </div>
-    </template>
-    Content with a fully customized header.
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer>
-    <template #header>
-      <div class="maz:flex maz:items-center maz:justify-between maz:w-full maz:px-4 maz:py-3 maz:bg-primary maz:text-primary-foreground">
-        <span class="maz:font-semibold">Custom Header</span>
-        <MazBadge size="sm" color="white" class="maz:text-primary">
-          New
-        </MazBadge>
-      </div>
-    </template>
-    Content with a fully customized header.
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Combining options
-
-<ComponentDemo>
-  <MazContainer
-    title="Dashboard Overview"
-    start-icon="/chart-bar.svg"
-    elevation
-    :bordered="false"
-    rounded-size="xl"
-    block
-  >
-    <div class="maz:flex maz:gap-4 maz:flex-wrap">
-      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
-        <p class="maz:text-muted maz:text-sm">Users</p>
-        <p class="maz:text-2xl maz:font-bold">1,234</p>
-      </MazContainer>
-      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
-        <p class="maz:text-muted maz:text-sm">Revenue</p>
-        <p class="maz:text-2xl maz:font-bold">$12.5k</p>
-      </MazContainer>
-      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
-        <p class="maz:text-muted maz:text-sm">Orders</p>
-        <p class="maz:text-2xl maz:font-bold">567</p>
-      </MazContainer>
-    </div>
-  </MazContainer>
-
-  <template #code>
-
-```vue
-<template>
-  <MazContainer
-    title="Dashboard Overview"
-    start-icon="/chart-bar.svg"
-    elevation
-    :bordered="false"
-    rounded-size="xl"
-    block
-  >
-    <div class="maz:flex maz:gap-4 maz:flex-wrap">
-      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
-        <p class="maz:text-muted maz:text-sm">Users</p>
-        <p class="maz:text-2xl maz:font-bold">1,234</p>
-      </MazContainer>
-      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
-        <p class="maz:text-muted maz:text-sm">Revenue</p>
-        <p class="maz:text-2xl maz:font-bold">$12.5k</p>
-      </MazContainer>
-      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
-        <p class="maz:text-muted maz:text-sm">Orders</p>
-        <p class="maz:text-2xl maz:font-bold">567</p>
-      </MazContainer>
-    </div>
-  </MazContainer>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-<script lang="ts" setup>
-  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full']
-</script>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-container.doc.md-->

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

@@ -1,240 +0,0 @@
----
-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/composables/useToast'
-  import MazDialogConfirm, {
-    useMazDialogConfirm, type MazDialogConfirmButton, type MazDialogConfirmData
-  } from 'maz-ui/components/MazDialogConfirm'
-
-  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>