77c6a16040
* chore: update unovis deps * chore: update color to use the themePrimary * docs: use gradient for overview component * docs: add themePopover to MainLayout * docs: enable global theme on every page * feat: introduce area, line, bar, donut chart * feat: add more props * fix: revert old pipeline * fix: patch @unovis/vue deps * fix: patch @unovis/vue deps again * chore: revert unovis/ts to 1.2.1 * chore: wip * docs: add alpha tag, fix tooltipo styling * docs: add charts installations step * feat: use generic, add better color * chore: build registry * feat: improve generic props * chore: build registry * docs: add alpha label * fix: collapsible not open correctly * docs: add badge to mobile nav * chore: better types * chore: run registry * chore: wip * fix: crosshair issue * chore: fix type, import missing error * chore: build registry * chore: arrange interface, expose margin, slot * chore: build registry * docs: guide page feat: add prop to barchart * chore: fix pnpm-lock * chore: add feature * chore: run build registry * refactor: change color var * feat: codegen * chore: add meta tables * feat: add line, area example * feat: bar and donut examples * docs: codege * chore: build registry * docs: improve chart doc * chore: fix missing icon package
78 lines
2.6 KiB
Vue
78 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { type Ref, ref } from 'vue'
|
|
import type { DateRange } from 'radix-vue'
|
|
import { getLocalTimeZone, today } from '@internationalized/date'
|
|
|
|
import ThemingLayout from './../../layout/ThemingLayout.vue'
|
|
|
|
import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
|
|
import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
|
|
import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
|
|
import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
|
|
import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
|
|
import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
|
|
|
|
import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
|
|
import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
|
|
import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
|
|
import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
|
|
import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
|
|
|
|
import { Card } from '@/lib/registry/new-york/ui/card'
|
|
import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
|
|
|
|
const now = today(getLocalTimeZone())
|
|
|
|
const range = ref({
|
|
start: now,
|
|
end: now.add({ days: 8 }),
|
|
}) as Ref<DateRange>
|
|
</script>
|
|
|
|
<template>
|
|
<ThemingLayout>
|
|
<div
|
|
class="items-start justify-center gap-6 rounded-lg md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4"
|
|
>
|
|
<div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
|
|
<CardStats />
|
|
|
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
|
|
<div class="space-y-4">
|
|
<TeamMembers />
|
|
<CookieSettings />
|
|
<PaymentMethod />
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<CardChat />
|
|
<CreateAccount />
|
|
<ReportAnIssue />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
|
|
<div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
|
|
<Card class="max-w-[280px]">
|
|
<RangeCalendar v-model="range" />
|
|
</Card>
|
|
|
|
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
|
|
<ActivityGoal />
|
|
</div>
|
|
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
|
<Metric />
|
|
</div>
|
|
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
|
<DataTable />
|
|
</div>
|
|
|
|
<div class="pt-3 sm:col-span-2 xl:pt-3">
|
|
<ShareDocument />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ThemingLayout>
|
|
</template>
|