Skip to content

Commit

Permalink
chore(docs): replace placekitten by loremflickr
Browse files Browse the repository at this point in the history
  • Loading branch information
LouisMazel committed Mar 13, 2024
1 parent ffdf6c6 commit 625401b
Show file tree
Hide file tree
Showing 11 changed files with 93 additions and 92 deletions.
25 changes: 13 additions & 12 deletions packages/docs/docs/components/maz-avatar.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ This component uses [vLazyImg](./../directives/lazy-img.md) directive

## Basic usage

<MazAvatar src="https://placekitten.com/740/600" />
<MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />

```vue
<template>
<MazAvatar src="https://placekitten.com/740/600" />
<MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
</template>
<script lang="ts" setup>
Expand All @@ -39,9 +39,9 @@ See all the options props [here](#props-event-slots)
size="1.5rem"
/>
<MazAvatar
src="https://placekitten.com/640/600"
src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
size="2rem"
href="https://placekitten.com/640/600"
href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
target="_blank"
rounded-size="none"
clickable
Expand All @@ -52,7 +52,7 @@ See all the options props [here](#props-event-slots)
</MazAvatar>
<MazAvatar
src="https://placekitten.com/200/200"
src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
size="2.5rem"
clickable
rounded-size="xl"
Expand All @@ -61,7 +61,7 @@ See all the options props [here](#props-event-slots)
/>

<MazAvatar
src="https://placekitten.com/740/600"
src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
size="3rem"
bordered
noElevation
Expand All @@ -75,9 +75,9 @@ See all the options props [here](#props-event-slots)
size="1.5rem"
/>
<MazAvatar
src="https://placekitten.com/640/600"
src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
size="2rem"
href="https://placekitten.com/640/600"
href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
target="_blank"
rounded-size="none"
clickable
Expand All @@ -88,14 +88,14 @@ See all the options props [here](#props-event-slots)
</template>
</MazAvatar>
<MazAvatar
src="https://placekitten.com/200/200"
src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
size="2.5rem"
clickable
rounded-size="xl"
@click="clicked"
/>
<MazAvatar
src="https://placekitten.com/740/600"
src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
size="3rem"
bordered
/>
Expand All @@ -118,11 +118,12 @@ See all the options props [here](#props-event-slots)
## Fallback image loaded on error

<MazAvatar
fallback-src="https://placekitten.com/200/200"
class="vp-raw"
fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
/>

```html
<MazAvatar fallback-src="https://placekitten.com/200/200" />
<MazAvatar fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100" />
```

<script lang="ts" setup>
Expand Down
24 changes: 12 additions & 12 deletions packages/docs/docs/components/maz-card.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ description: MazCard is a standalone component to display some texts and images

## Basic usage

<MazCard :images="['https://placekitten.com/600/600']" :gallery-height="300" zoom>
<MazCard :images="['https://loremflickr.com/600/600']" :gallery-height="300" zoom>
<template #title>
<h3 style="margin: 0">
Cute Kitten
Expand Down Expand Up @@ -50,7 +50,7 @@ description: MazCard is a standalone component to display some texts and images
```vue
<template>
<MazCard
:images="['https://placekitten.com/600/600']"
:images="['https://loremflickr.com/600/600']"
:gallery-height="300"
zoom
>
Expand Down Expand Up @@ -102,7 +102,7 @@ When you display images, you can change the orientation of the card, available o
### Row

<br />
<MazCard :images="['https://placekitten.com/600/600']" orientation="row">
<MazCard :images="['https://loremflickr.com/600/600']" orientation="row">
<template #title>
<h3 style="margin: 0; margin-bottom: 20px">
Cute Kitten
Expand All @@ -118,7 +118,7 @@ When you display images, you can change the orientation of the card, available o
::: details Show code

```html
<MazCard :images="['https://placekitten.com/600/600']" orientation="row">
<MazCard :images="['https://loremflickr.com/600/600']" orientation="row">
<template #title>
<h3 style="margin: 0; margin-bottom: 20px">
Cute Kitten
Expand All @@ -138,7 +138,7 @@ When you display images, you can change the orientation of the card, available o

<br />

<MazCard :images="['https://placekitten.com/600/600']" orientation="row-reverse">
<MazCard :images="['https://loremflickr.com/600/600']" orientation="row-reverse">
<template #title>
<h3 style="margin: 0; margin-bottom: 20px">
Cute Kitten
Expand All @@ -155,7 +155,7 @@ When you display images, you can change the orientation of the card, available o

```html
<MazCard
:images="['https://placekitten.com/600/600']"
:images="['https://loremflickr.com/600/600']"
orientation="row-reverse"
>
<template #title>
Expand All @@ -178,7 +178,7 @@ When you display images, you can change the orientation of the card, available o
<br />

<MazCard
:images="['https://placekitten.com/600/600']"
:images="['https://loremflickr.com/600/600']"
orientation="column-reverse"
>
<template #title>
Expand All @@ -197,7 +197,7 @@ When you display images, you can change the orientation of the card, available o

```html
<MazCard
:images="['https://placekitten.com/600/600']"
:images="['https://loremflickr.com/600/600']"
orientation="column-reverse"
>
<template #title>
Expand Down Expand Up @@ -294,7 +294,7 @@ To access the link, simply click the card.
- You can use `:scale="false"` to remove the scale animation on hover

<MazCard
:images="['https://placekitten.com/500/500']"
:images="['https://loremflickr.com/500/500']"
href="/components/maz-card#linked-card"
href-target="_blank"
style="width: 100%"
Expand All @@ -309,7 +309,7 @@ To access the link, simply click the card.

```html
<MazCard
:images="['https://placekitten.com/1000/1000']"
:images="['https://loremflickr.com/1000/1000']"
href="/components/maz-card#linked-card"
href-target="_blank"
scale
Expand All @@ -332,7 +332,7 @@ Bordered and has no elevation
## Gallery images

<MazCard
:images="['https://placekitten.com/600/600', 'https://placekitten.com/700/700', 'https://placekitten.com/400/400', 'https://placekitten.com/300/300']"
:images="['https://loremflickr.com/600/600', 'https://loremflickr.com/700/700', 'https://loremflickr.com/400/400', 'https://loremflickr.com/300/300']"
:images-show-count="3"
:no-remaining="false"
zoom
Expand All @@ -346,7 +346,7 @@ Bordered and has no elevation

```html
<MazCard
:images="['https://placekitten.com/600/600', 'https://placekitten.com/700/700', 'https://placekitten.com/400/400', 'https://placekitten.com/300/300']"
:images="['https://loremflickr.com/600/600', 'https://loremflickr.com/700/700', 'https://loremflickr.com/400/400', 'https://loremflickr.com/300/300']"
:images-show-count="3"
:no-remaining="false"
zoom
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/docs/components/maz-carousel.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ head:
v-for="(item, i) in Array(8)"
:key="i"
:images="[
'https://placekitten.com/250/300'
'https://loremflickr.com/250/300'
]"
style="min-width: 250px;"
>
Expand All @@ -56,7 +56,7 @@ head:
v-for="(item, i) in Array(8)"
:key="i"
:images="[
'https://placekitten.com/250/300'
'https://loremflickr.com/250/300'
]"
style="min-width: 250px;"
>
Expand Down Expand Up @@ -93,7 +93,7 @@ This options will display the component without scrollbar only when the componen
v-for="(item, i) in Array(8)"
:key="i"
:images="[
'https://placekitten.com/250/300'
'https://loremflickr.com/250/300'
]"
style="min-width: 250px;"
>
Expand Down
38 changes: 19 additions & 19 deletions packages/docs/docs/components/maz-dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -189,9 +189,9 @@ You can provide a template to replace menuitem labels to add more elements in ea

<MazDropdown
:items="[
{ label: 'Action', action: () => toast.success('CLICKED'), additionnalData: 'https://placekitten.com/240/200' },
{ label: 'Link (href)', href: 'https://www.google.com', target: '_blank', additionnalData: 'https://placekitten.com/340/300' },
{ label: 'Router Link', to: { name: 'index' }, additionnalData: 'https://placekitten.com/440/400' },
{ label: 'Action', action: () => toast.success('CLICKED'), additionnalData: 'https://loremflickr.com/240/200' },
{ label: 'Link (href)', href: 'https://www.google.com', target: '_blank', additionnalData: 'https://loremflickr.com/340/300' },
{ label: 'Router Link', to: { name: 'index' }, additionnalData: 'https://loremflickr.com/440/400' },
]"
>
<template #default>
Expand All @@ -213,9 +213,9 @@ You can provide a template to replace menuitem labels to add more elements in ea
```html
<MazDropdown
:items="[
{ label: 'Action', action: () => toast.success('CLICKED'), additionnalData: 'https://placekitten.com/240/200' },
{ label: 'Link (href)', href: 'https://www.google.com', target: '_blank', additionnalData: 'https://placekitten.com/340/300' },
{ label: 'Router Link', to: { name: 'index' }, additionnalData: 'https://placekitten.com/440/400' },
{ label: 'Action', action: () => toast.success('CLICKED'), additionnalData: 'https://loremflickr.com/240/200' },
{ label: 'Link (href)', href: 'https://www.google.com', target: '_blank', additionnalData: 'https://loremflickr.com/340/300' },
{ label: 'Router Link', to: { name: 'index' }, additionnalData: 'https://loremflickr.com/440/400' },
]"
>
<template #default>
Expand Down Expand Up @@ -249,26 +249,26 @@ Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab k
{
label: 'Action',
action: () => toast.success('CLICKED'),
additionnalData: 'https://placekitten.com/240/200',
additionnalData: 'https://loremflickr.com/240/200',
},
{
label: 'Link (href)',
href: 'https://www.google.com',
target: '_blank',
additionnalData: 'https://placekitten.com/340/300',
additionnalData: 'https://loremflickr.com/340/300',
},
{
label: 'Router Link',
to: { name: 'index' },
additionnalData: 'https://placekitten.com/440/400',
additionnalData: 'https://loremflickr.com/440/400',
},
]"
>
<template #element>
<MazAvatar
clickable
no-clickable-icon
src="https://cdn.artphotolimited.com/images/5ff5a529bd40b83c5a537440/1000x1000/gerard-depardieu-1983.jpg"
src="https://loremflickr.com/200/200"
tabindex="-1"
/>
</template>
Expand All @@ -280,18 +280,18 @@ Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab k
{
label: 'Action',
action: () => toast.success('CLICKED'),
additionnalData: 'https://placekitten.com/240/200',
additionnalData: 'https://loremflickr.com/240/200',
},
{
label: 'Link (href)',
href: 'https://www.google.com',
target: '_blank',
additionnalData: 'https://placekitten.com/340/300',
additionnalData: 'https://loremflickr.com/340/300',
},
{
label: 'Router Link',
to: { name: 'index' },
additionnalData: 'https://placekitten.com/440/400',
additionnalData: 'https://loremflickr.com/440/400',
},
]"
>
Expand All @@ -311,18 +311,18 @@ Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab k
{
label: 'Action',
action: () => toast.success('CLICKED'),
additionnalData: 'https://placekitten.com/240/200',
additionnalData: 'https://loremflickr.com/240/200',
},
{
label: 'Link (href)',
href: 'https://www.google.com',
target: '_blank',
additionnalData: 'https://placekitten.com/340/300',
additionnalData: 'https://loremflickr.com/340/300',
},
{
label: 'Router Link',
to: { name: 'index' },
additionnalData: 'https://placekitten.com/440/400',
additionnalData: 'https://loremflickr.com/440/400',
},
]"
>
Expand All @@ -342,18 +342,18 @@ Add `tabindex="-1"` attribute to your element to avoid a double focus with Tab k
{
label: 'Action',
action: () => toast.success('CLICKED'),
additionnalData: 'https://placekitten.com/240/200',
additionnalData: 'https://loremflickr.com/240/200',
},
{
label: 'Link (href)',
href: 'https://www.google.com',
target: '_blank',
additionnalData: 'https://placekitten.com/340/300',
additionnalData: 'https://loremflickr.com/340/300',
},
{
label: 'Router Link',
to: { name: 'index' },
additionnalData: 'https://placekitten.com/440/400',
additionnalData: 'https://loremflickr.com/440/400',
},
]"
>
Expand Down
24 changes: 12 additions & 12 deletions packages/docs/docs/components/maz-gallery.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,24 @@ description: MazGallery is a standalone component used to display images in a co
import MazGallery, { type MazGalleryImage } from 'maz-ui/components/MazGallery'
const images: MazGalleryImage[] = [
'https://placekitten.com/640/500',
{ src: 'https://placekitten.com/640/600', thumbnail: 'https://placekitten.com/100/100', alt: 'image description' },
{ src: 'https://placekitten.com/640/700', alt: 'image description' },
'https://placekitten.com/640/800',
'https://placekitten.com/640/1000',
'https://placekitten.com/800/800'
'https://loremflickr.com/640/400',
{ src: 'https://loremflickr.com/640/600', thumbnail: 'https://loremflickr.com/100/100', alt: 'image description' },
{ src: 'https://loremflickr.com/640/700', alt: 'image description' },
'https://loremflickr.com/640/800',
'https://loremflickr.com/640/1000',
'https://loremflickr.com/800/800'
]
</script>
```

<script lang="ts" setup>
const images: MazGalleryImage[] = [
'https://placekitten.com/640/500',
{ src: 'https://placekitten.com/640/600', thumbnail: 'https://placekitten.com/100/100', alt: 'image description' },
{ src: 'https://placekitten.com/640/700', alt: 'image description' },
'https://placekitten.com/640/800',
'https://placekitten.com/640/1000',
'https://placekitten.com/800/800'
'https://loremflickr.com/640/400',
{ src: 'https://loremflickr.com/640/600', thumbnail: 'https://loremflickr.com/100/100', alt: 'image description' },
{ src: 'https://loremflickr.com/640/700', alt: 'image description' },
'https://loremflickr.com/640/800',
'https://loremflickr.com/640/1000',
'https://loremflickr.com/800/800'
]
</script>

Expand Down
4 changes: 2 additions & 2 deletions packages/docs/docs/components/maz-lazy-img.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ description: MazLazyImg is a standalone component to display images and svgs wit

<!--@include: ./../.vitepress/mixins/getting-started.md-->

<MazLazyImg src="https://placekitten.com/2000/2000" class="w-100"/>
<MazLazyImg src="https://loremflickr.com/1000/1000" class="w-100"/>

```vue
<template>
<MazLazyImg src="https://placekitten.com/2000/2000" />
<MazLazyImg src="https://loremflickr.com/1000/1000" />
</template>
<script setup lang="ts">
Expand Down
Loading

0 comments on commit 625401b

Please sign in to comment.