maz-ui 5.0.0 → 5.1.0-beta.0

package/docs/components/maz-btn.md

@@ -0,0 +1,423 @@
+---
+title: "MazBtn"
+description: "MazBtn is a standalone component that replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, icons are included. Support of router-link and nuxt-link"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-btn"
+---
+
+# MazBtn
+
+> MazBtn is a standalone component that replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, icons are included. Support of router-link and nuxt-link
+
+- Package: `maz-ui`
+- Import: `import MazBtn from 'maz-ui/components/MazBtn'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-btn
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import MazBtn from 'maz-ui/components/MazBtn'
+</script>
+
+<template>
+  <MazBtn>Button</MazBtn>
+</template>
+```
+
+## Sizes
+
+Use the attribute `size` with value ``
+
+```vue
+<script setup lang="ts">
+const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
+</script>
+
+<template>
+  <MazBtn v-for="size in sizes" :key="size" :size="size">
+    {{ size }}
+  </MazBtn>
+</template>
+```
+
+## Colors
+
+```html
+<MazBtn>primary</MazBtn>
+<MazBtn color="secondary">secondary</MazBtn>
+<MazBtn color="info">info</MazBtn>
+<MazBtn color="success">success</MazBtn>
+<MazBtn color="warning">warning</MazBtn>
+<MazBtn color="destructive">destructive</MazBtn>
+<MazBtn color="contrast">contrast</MazBtn>
+<MazBtn color="accent">accent</MazBtn>
+<MazBtn color="surface">surface</MazBtn>
+<MazBtn color="transparent">transparent</MazBtn>
+```
+
+## Outlined
+
+Transform the button into an outlined button with the attribute `outlined`
+
+```html
+<MazBtn outlined>primary</MazBtn>
+<MazBtn color="secondary" outlined>secondary</MazBtn>
+<MazBtn color="info" outlined>info</MazBtn>
+<MazBtn color="success" outlined>success</MazBtn>
+<MazBtn color="warning" outlined>warning</MazBtn>
+<MazBtn color="destructive" outlined>destructive</MazBtn>
+<MazBtn color="contrast" outlined>contrast</MazBtn>
+<MazBtn color="accent" outlined>accent</MazBtn>
+<MazBtn color="surface" outlined>surface</MazBtn>
+<MazBtn color="transparent" outlined>transparent</MazBtn>
+```
+
+## Loading
+
+The loading state is available with the attribute `loading`
+
+```vue
+<script lang="ts" setup>
+const colors = [
+  'primary',
+  'secondary',
+  'info',
+  'success',
+  'warning',
+  'destructive',
+  'contrast',
+  'accent',
+  'transparent',
+  'surface',
+]
+</script>
+
+<template>
+  <MazBtn
+    v-for="color of colors"
+    :key="color"
+    loading
+    :color="color"
+  >
+    {{ color }}
+  </MazBtn>
+</template>
+```
+
+## Pastel
+
+The pastel state is available with the attribute `pastel`
+
+**Note:**
+
+Better in light mode
+
+```html
+<MazBtn pastel>primary</MazBtn>
+<MazBtn color="secondary" pastel>secondary</MazBtn>
+<MazBtn color="info" pastel>info</MazBtn>
+<MazBtn color="success" pastel>success</MazBtn>
+<MazBtn color="warning" pastel>warning</MazBtn>
+<MazBtn color="destructive" pastel>destructive</MazBtn>
+<MazBtn color="contrast" pastel>contrast</MazBtn>
+<MazBtn color="accent" pastel>accent</MazBtn>
+<MazBtn color="surface" pastel>surface</MazBtn>
+<MazBtn color="transparent" pastel>transparent</MazBtn>
+```
+
+## Rounded Size
+
+Choose the size of the rounded with the attribute `rounded-size` and value `none`, `sm`, `md`, `lg`, `xl`, `full`
+
+```html
+<MazBtn rounded-size="none">none</MazBtn>
+<MazBtn rounded-size="sm">sm</MazBtn>
+<MazBtn rounded-size="md">md</MazBtn>
+<MazBtn rounded-size="lg">lg</MazBtn>
+<MazBtn rounded-size="xl">xl</MazBtn>
+<MazBtn rounded-size="full">full</MazBtn>
+```
+
+## Fab
+
+The button can be a fab button with the attribute `fab`
+
+```html
+<MazBtn fab icon="/sun.svg" size="mini" />
+<MazBtn fab icon="/sun.svg" size="xs" />
+<MazBtn fab icon="/sun.svg" size="sm" />
+<MazBtn fab> fab </MazBtn>
+<MazBtn fab icon="/sun.svg" size="lg" />
+<MazBtn fab icon="/sun.svg" size="xl" />
+```
+
+## Block
+
+Will take `width: 100%;`
+
+```html
+<MazBtn block>block</MazBtn>
+```
+
+## Justify
+
+This property is used to align the content of the button.
+
+By default, the justify is `center`
+
+```html
+<MazBtn block justify="center" icon="/users.svg" end-icon="/sun.svg" size="md">center</MazBtn>
+<MazBtn block justify="start" icon="/users.svg" end-icon="/sun.svg" size="md">start</MazBtn>
+<MazBtn block justify="end" icon="/users.svg" end-icon="/sun.svg" size="md">end</MazBtn>
+<MazBtn block justify="space-between" icon="/users.svg" end-icon="/sun.svg" size="md">between</MazBtn>
+<MazBtn block justify="space-around" icon="/users.svg" end-icon="/sun.svg" size="md">around</MazBtn>
+<MazBtn block justify="space-evenly" icon="/users.svg" end-icon="/sun.svg" size="md">evenly</MazBtn>
+```
+
+## Disabled
+
+```html
+<MazBtn disabled>disabled</MazBtn>
+```
+
+## Icons
+
+```html
+<MazBtn :start-icon="MazCheck" size="mini">
+  start-icon
+</MazBtn>
+<MazBtn :start-icon="MazCheck" size="xs">
+  start-icon
+</MazBtn>
+<MazBtn :start-icon="MazCheck" size="sm">
+  start-icon
+</MazBtn>
+<MazBtn :start-icon="MazCheck" size="md">
+  start-icon
+</MazBtn>
+<MazBtn :start-icon="MazCheck" size="lg">
+  start-icon
+</MazBtn>
+<MazBtn :start-icon="MazCheck" size="xl">
+  start-icon
+</MazBtn>
+<MazBtn fab :icon="MazCommandLine" size="lg" />
+<MazBtn :start-icon="MazSpinner" size="sm" color="warning">
+  icon component
+</MazBtn>
+```
+
+### Use icon path
+
+**Details: View code**
+
+When you use the properties `end-icon`, `start-icon` or `icon` with the icon path, the component uses `<MazIcon icon="..." />` component.
+
+Check out how [MazIcon](./maz-icon.md) works, see all available icons and download them to put them in your public folder.
+
+```html
+<MazBtn start-icon="/check.svg" size="sm"> start-icon </MazBtn>
+<MazBtn end-icon="/home.svg"> end-icon </MazBtn>
+<MazBtn icon="/command-line.svg" fab size="lg" />
+```
+
+### Use your own SVG icons
+
+**Details: View code**
+
+```html
+<MazBtn size="sm">
+  <template #start-icon>
+    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.5 12.75L10.5 18.75L19.5 5.25"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </template>
+  start-icon
+</MazBtn>
+<MazBtn>
+  <template #end-icon>
+    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.25 12L11.2045 3.04549C11.6438 2.60615 12.3562 2.60615 12.7955 3.04549L21.75 12M4.5 9.75V19.875C4.5 20.4963 5.00368 21 5.625 21H9.75V16.125C9.75 15.5037 10.2537 15 10.875 15H13.125C13.7463 15 14.25 15.5037 14.25 16.125V21H18.375C18.9963 21 19.5 20.4963 19.5 19.875V9.75M8.25 21H16.5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </template>
+  end-icon
+</MazBtn>
+<MazBtn fab size="lg">
+  <template #icon>
+    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.75 7.5L9.75 9.75L6.75 12M11.25 12H14.25M5.25 20.25H18.75C19.9926 20.25 21 19.2426 21 18V6C21 4.75736 19.9926 3.75 18.75 3.75H5.25C4.00736 3.75 3 4.75736 3 6V18C3 19.2426 4.00736 20.25 5.25 20.25Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </template>
+</MazBtn>
+```
+
+### Use [@maz-ui/icons](../ecosystem/icons/index.md)
+
+**Details: View code**
+
+```vue
+<script lang="ts" setup>
+import MazBtn from 'maz-ui/components/MazBtn'
+
+import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
+import { MazHome } from '@maz-ui/icons/raw/MazHome'
+import { MazCommandLine } from '@maz-ui/icons/raw/MazCommandLine'
+</script>
+
+<template>
+  <MazBtn :start-icon="MazCheck" size="sm">
+    start-icon
+  </MazBtn>
+  <MazBtn :end-icon="MazHome">
+    end-icon
+  </MazBtn>
+  <MazBtn fab :icon="MazCommandLine" size="lg" />
+</template>
+```
+
+### Use [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader)
+
+**Details: View code**
+
+```vue
+<script lang="ts" setup>
+import MazBtn from 'maz-ui/components/MazBtn'
+
+import MazCheck from '@maz-ui/icons/svg/check.svg?component'
+import MazHome from '@maz-ui/icons/svg/home.svg?component'
+import MazCommandLine from '@maz-ui/icons/svg/command-line.svg?component'
+</script>
+
+<template>
+  <MazBtn :start-icon="MazCheck" size="sm">
+    start-icon
+  </MazBtn>
+  <MazBtn :end-icon="MazHome">
+    end-icon
+  </MazBtn>
+  <MazBtn fab :icon="MazCommandLine" size="lg" />
+</template>
+```
+
+### Use your own components
+
+**Details: View code**
+
+```vue
+<script lang="ts" setup>
+import { MazBtn, MazSpinner } from 'maz-ui/components'
+</script>
+
+<template>
+  <MazBtn :start-icon="MazSpinner" size="sm" color="info">
+    start-icon
+  </MazBtn>
+</template>
+```
+
+### Pass a full `MazIconProps` object
+
+`startIcon`, `endIcon` and `icon` accept either a bare value (Vue component, URL, raw SVG string) **or** a full `MazIconProps` object. The latter is useful when you want to override the auto-derived size, set a `<title>` for screen readers, flip a directional icon for RTL, or attach extra SVG attributes.
+
+**Details: View code**
+
+```vue
+<script lang="ts" setup>
+import MazBtn from 'maz-ui/components/MazBtn'
+import { MazStar } from '@maz-ui/icons/raw/MazStar'
+</script>
+
+<template>
+  <!-- The button picks an icon size from its own size - `sm` defaults to a small icon. -->
+  <MazBtn size="sm" :start-icon="MazStar">favorite</MazBtn>
+
+  <!-- Pass an object to override per-icon. -->
+  <MazBtn
+    size="sm"
+    :start-icon="{
+      icon: MazStar,
+      size: 'xl',
+      title: 'Favorite',
+      flipIconForRtl: true,
+    }"
+  >
+    favorite
+  </MazBtn>
+</template>
+```
+
+## [HTMLLinkElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement)
+
+**Note:**
+
+When `href` attribute is provided, the component automatically becomes a `<a href="..." />`
+
+```html
+<MazBtn href="https://www.google.com" target="_blank"> Is Button Link </MazBtn>
+```
+
+## [RouterLink](https://router.vuejs.org/api/#router-link)
+
+**Note:**
+
+When `to` attribute is provided, the component automatically becomes a `<RouterLink to="..." />`
+
+```html
+<MazBtn :to="{ path: '/made-with-maz-ui.html' }"> Is RouterLink </MazBtn>
+```
+
+## MazBtn API
+
+`import MazBtn from 'maz-ui/components/MazBtn'`
+
+### Props
+
+- `text` (`string`): The text of the button, if not provided, the slot will be used.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`): Predifined sizes of the button.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"`, default: `"primary"`): The color of the button.
+- `text-color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "muted"`): The text color of the button.
+- `type` (`"submit" | "reset" | "button"`, default: `"button"`): The type of the button.
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size of the rounded. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
+- `outlined` (`boolean`, default: `false`): If true, the button have the "border" style.
+- `pastel` (`boolean`, default: `false`): If true, the button will have a pastel color.
+- `block` (`boolean`, default: `false`): If true, the button will have a full width.
+- `loading` (`boolean`, default: `false`): Enable the button loader.
+- `disabled` (`boolean`, default: `false`): Disable the button.
+- `fab` (`boolean`, default: `false`): If true, the button will have a fab style.
+- `icon` (`MazIconLike`): The icon to display in the fab variant. Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) for the common case, or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, flipIconForRtl, …).
+- `start-icon` (`MazIconLike`): The icon to display on the inline-start edge (left in LTR, right in RTL). Accepts a bare value or a full `MazIconProps` object.
+- `end-icon` (`MazIconLike`): The icon to display on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.
+- `padding` (`boolean`, default: `true`): If true, the button will have no padding.
+- `justify` (`"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"`, default: `"center"`): Choose how the elements are aligned in the button.
+- `active` (`boolean`, default: `false`): If true, the button will have an active state.
+- `overflow-hidden` (`boolean`, default: `true`): If true, the button will have an overflow-hidden style.
+
+### Slots
+
+- `#start-icon`: The icon to display on the inline-start edge (left in LTR, right in RTL)
+- `#icon`: The icon to display on the fab button
+- `#default`: The content of the button
+- `#end-icon`: The icon to display on the inline-end edge (right in LTR, left in RTL)
+- `#loader`: The loader to display in the button

package/docs/components/maz-card-spotlight.md

@@ -0,0 +1,84 @@
+---
+title: "MazCardSpotlight"
+description: "MazCardSpotlight is a standalone component"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-card-spotlight"
+---
+
+# MazCardSpotlight
+
+> MazCardSpotlight is a standalone component
+
+- Package: `maz-ui`
+- Import: `import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-card-spotlight
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**This component is better in dark mode**
+
+**Tip:**
+
+If you want to increase the border width, you must just add padding @default: `var(--maz-border-width)` (1px)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import { useTheme } from '@maz-ui/themes/composables/useTheme'
+import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'
+
+const { setColorMode } = useTheme()
+</script>
+
+<template>
+  <MazCardSpotlight style="width: 500px; max-width: 100%;">
+    <h3 style="margin-top: 0; Fmargin-bottom: 30px;">
+      Hover this component <br>
+      To see the magic appear
+    </h3>
+    <MazBtn color="contrast" @click="setColorMode('light')">
+      Switch to light theme
+    </MazBtn>
+  </MazCardSpotlight>
+</template>
+```
+
+## Effect with multiple cards and with secondary color
+
+```html
+<div class="grid gap-4 grid-cols-1 mob-l:grid-cols-2 tab-l:grid-cols-3">
+  <MazCardSpotlight v-for="competition of competitions" :key="competition.label" color="secondary">
+    <div class="flex p-4">
+      <MazAvatar
+        v-if="competition.areaEnsignUrl"
+        :src="competition.areaEnsignUrl"
+        style="margin-right: 16px"
+        size="0.8rem"
+      />
+      <div class="truncate flex column">
+        <span class="truncate"> {{ competition.label }} </span>
+        <span class="truncate"> {{ competition.area }} </span>
+      </div>
+    </div>
+  </MazCardSpotlight>
+</div>
+```
+
+## MazCardSpotlight API
+
+`import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'`
+
+### Props
+
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the component.
+- `elevation` (`boolean`, default: `false`): Add elevation to the component.
+- `padding` (`boolean`, default: `true`): Add padding to the content.
+- `content-class` (`ClassValue`): The classes to apply to the content div.
+- `content-style` (`StyleValue`): Style apply to the content div.
+- `inner-opacity` (`number`, default: `0.95`): The opacity of the inner div - should be between 0 and 1 When 0 the spotlight is completely visible When 1 the spotlight is only visible on borders.
+
+### Slots
+
+- `#default`