Skip to content

Commit

Permalink
1,317th Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shyam-Chen
Shyam-Chen committed Jan 17, 2024
1 parent 7087f0a commit 774b13e
Show file tree
Hide file tree
Showing 9 changed files with 423 additions and 450 deletions.
22 changes: 10 additions & 12 deletions src/routes/(backstage)/(library)/data-display/accordion/+page.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ const accordionGroupMultiple = ref<string[]>([]);
<template>
<XBreadcrumb :items="[{ text: 'Library' }, { text: 'Data Display' }, { text: 'Accordion' }]" />

<div class="my-4">
<div class="text-4xl font-extrabold">Accordion</div>
</div>
<h1 class="text-4xl font-extrabold my-4">Accordion</h1>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">Group</div>
<section class="my-8">
<h2 class="text-3xl font-bold my-4">Basic</h2>

<XAccordion>
<XAccordion.Item>
Expand Down Expand Up @@ -56,10 +54,10 @@ const accordionGroupMultiple = ref<string[]>([]);
</template>
</XAccordion.Item>
</XAccordion>
</div>
</section>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">Model</div>
<section class="my-8">
<h2 class="text-3xl font-bold my-4 pt-6">Model</h2>

<div class="mb-2">{{ accordionGroup }}</div>

Expand Down Expand Up @@ -103,10 +101,10 @@ const accordionGroupMultiple = ref<string[]>([]);
</template>
</XAccordion.Item>
</XAccordion>
</div>
</section>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">Model with multiple</div>
<section class="my-8">
<h2 class="text-3xl font-bold my-4 pt-6">Model with multiple</h2>

<div class="mb-2">{{ accordionGroupMultiple }}</div>

Expand Down Expand Up @@ -150,5 +148,5 @@ const accordionGroupMultiple = ref<string[]>([]);
</template>
</XAccordion.Item>
</XAccordion>
</div>
</section>
</template>
56 changes: 29 additions & 27 deletions src/routes/(backstage)/(library)/data-display/avatar/+page.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,46 @@
<script lang="ts" setup>
import { XBreadcrumb, XAvatar, XBadge } from '@x/ui';
import { XBreadcrumb, XCard, XAvatar, XBadge } from '@x/ui';
</script>

<template>
<XBreadcrumb :items="[{ text: 'Library' }, { text: 'Data Display' }, { text: 'Avatar' }]" />

<div class="my-4">
<div class="text-3xl font-bold">Avatar</div>
</div>
<h1 class="text-4xl font-extrabold my-4">Avatar</h1>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">Basic</div>
<section class="my-8">
<h2 class="text-3xl font-bold my-4">Basic</h2>

<div class="flex justify-center gap-2">
<XAvatar src="https://mui.com/static/images/avatar/1.jpg" alt="Remy Sharp" />
<XAvatar icon="i-mdi-account" class="bg-indigo-700 text-white" />
<XAvatar class="bg-red-700 text-white">SC</XAvatar>
</div>
</div>
<XCard>
<div class="flex justify-center gap-4">
<XAvatar src="https://mui.com/static/images/avatar/1.jpg" alt="Remy Sharp" />
<XAvatar icon="i-mdi-account" class="bg-indigo-700 text-white" />
<XAvatar class="bg-red-700 text-white">SC</XAvatar>
</div>
</XCard>
</section>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">Grouped</div>
<section class="my-8">
<h2 class="text-3xl font-bold my-4 pt-6">Grouped</h2>

<div class="flex justify-center">
<XCard>
<XAvatar.Group :total="24">
<XAvatar src="https://mui.com/static/images/avatar/1.jpg" alt="Remy Sharp" />
<XAvatar src="https://mui.com/static/images/avatar/2.jpg" alt="Travis Howard" />
<XAvatar src="https://mui.com/static/images/avatar/3.jpg" alt="Cindy Baker" />
<XAvatar src="https://mui.com/static/images/avatar/4.jpg" alt="Agnes Walker" />
</XAvatar.Group>
</div>
</div>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">With badge</div>

<div class="flex justify-center">
<XBadge class="important:bg-green-500 top-auto right-1 -bottom-1 border">
<XAvatar src="https://mui.com/static/images/avatar/1.jpg" alt="Remy Sharp" />
</XBadge>
</div>
</div>
</XCard>
</section>

<section class="my-8">
<h2 class="text-3xl font-bold my-4 pt-6">With badge</h2>

<XCard>
<div class="flex">
<XBadge class="!bg-green-500 top-auto right-1 -bottom-1 border">
<XAvatar src="https://mui.com/static/images/avatar/1.jpg" alt="Remy Sharp" />
</XBadge>
</div>
</XCard>
</section>
</template>
64 changes: 32 additions & 32 deletions src/routes/(backstage)/(library)/data-display/badge/+page.vue
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
<script lang="ts" setup>
import { XBreadcrumb, XBadge } from '@x/ui';
import { XBreadcrumb, XCard, XBadge } from '@x/ui';
</script>

<template>
<XBreadcrumb :items="[{ text: 'Library' }, { text: 'Data Display' }, { text: 'Badge' }]" />

<div class="my-4">
<div class="text-3xl font-bold">Badge</div>
</div>

<div class="flex flex-col border p-4 mb-4">
<div class="mb-2">Basic</div>

<div class="flex justify-center items-center gap-15">
<XBadge>
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>

<XBadge count="7">
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>

<XBadge count="77">
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>

<XBadge count="99+">
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>
</div>

<div class="flex justify-center items-center gap-15 mt-6">
<XBadge>
<div>Link something</div>
</XBadge>
</div>
</div>
<h1 class="text-4xl font-extrabold my-4">Badge</h1>

<section class="my-8">
<h2 class="text-3xl font-bold my-4">Basic</h2>

<XCard>
<div class="flex justify-center items-center gap-15">
<XBadge>
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>

<XBadge count="7">
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>

<XBadge count="77">
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>

<XBadge count="99+">
<div class="w-6 h-6 i-fa-envelope"></div>
</XBadge>
</div>

<div class="flex justify-center items-center gap-15 mt-6">
<XBadge>
<div>Link something</div>
</XBadge>
</div>
</XCard>
</section>
</template>
Loading

0 comments on commit 774b13e

Please sign in to comment.