Skip to content

Commit

Permalink
chore: shadcn init (#110)
Browse files Browse the repository at this point in the history
* chore: shadcn init

* chore: header&catalog
  • Loading branch information
nexmoe authored Apr 24, 2024
1 parent a637270 commit 1cbc42e
Show file tree
Hide file tree
Showing 19 changed files with 7,202 additions and 8,922 deletions.
16 changes: 16 additions & 0 deletions components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "default",
"typescript": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "assets/css/tailwind.css",
"baseColor": "slate",
"cssVariables": true
},
"framework": "nuxt",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
37 changes: 27 additions & 10 deletions components/public/Catalog.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<script setup lang="ts">
import {
Sheet,
SheetContent,
SheetTrigger,
} from '@/components/ui/sheet'
interface List {
active: boolean
title: string
Expand Down Expand Up @@ -49,17 +55,28 @@ onUnmounted(() => {
</script>

<template>
<div class="hidden md:flex py-6 px-4 items-center h-full shu-card !rounded-none">
<div class="space-y-1 w-full">
<div v-for="item in list" :key="item.title" class="item" :class="{
active: item.active,
}" @click="scrollToTitle(`#${item.anchor}`)">
<div class="text-base truncate">
{{ item.title }}
<Sheet>
<SheetTrigger>
<button aria-label="catalog"
class="hover:scale-125 transition-all flex items-center justify-center overflow-hidden w-12 h-12 bg-white shadow-lg ring-1 ring-gray-900/5 rounded-full">
<Icon name="mdi:menu" />
</button>
</SheetTrigger>
<SheetContent class="w-72">
<div class="flex py-6 items-center h-full">
<div class="space-y-1 w-full">
<div v-for="item in list" :key="item.title" class="item" :class="{
active: item.active
}" @click="scrollToTitle(`#${item.anchor}`)">
<div class="text-base truncate">
{{ item.title }}
</div>
</div>
</div>
</div>
</div>
</div>
</SheetContent>
</Sheet>

</template>

<style scoped>
Expand All @@ -68,6 +85,6 @@ onUnmounted(() => {
}
.active {
@apply bg-black text-white hover:bg-black;
@apply bg-[#f7d038] text-[#1a1306] hover:bg-[#f7d038];
}
</style>
14 changes: 7 additions & 7 deletions components/public/Header.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script setup lang="ts">
// import {
// Sheet,
// SheetContent,
// SheetTrigger,
// } from '@/components/ui/sheet'
import {
Sheet,
SheetContent,
SheetTrigger,
} from '@/components/ui/sheet'
const config = await useGetConfig()
</script>
Expand Down Expand Up @@ -32,7 +32,7 @@ const config = await useGetConfig()
<Social v-for="item in config.socials" v-bind="item" :key="item.url" />
</div>
</div>
<!-- <Sheet>
<Sheet>
<SheetTrigger>
<div class="md:hidden text-2xl text-gray-600 flex">
<Icon name="mdi:menu" />
Expand All @@ -57,7 +57,7 @@ const config = await useGetConfig()
</div>

</SheetContent>
</Sheet> -->
</Sheet>
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion components/public/Tool.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ onUnmounted(() => {
<div
class="fixed z-50 flex flex-col text-2xl space-y-4 bottom-8 right-8 md:bottom-16 md:right-16"
>
<!-- <PublicCatalog :list="globalStore.catalog" v-if="globalStore.catalog.length > 0" /> -->
<PublicCatalog :list="globalStore.catalog" v-if="globalStore.catalog.length > 0" />
<transition name="fade">
<button
v-if="showButton"
Expand Down
14 changes: 14 additions & 0 deletions components/ui/sheet/Sheet.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
const props = defineProps<DialogRootProps>()
const emits = defineEmits<DialogRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
<DialogRoot v-bind="forwarded">
<slot />
</DialogRoot>
</template>
11 changes: 11 additions & 0 deletions components/ui/sheet/SheetClose.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { DialogClose, type DialogCloseProps } from 'radix-vue'
const props = defineProps<DialogCloseProps>()
</script>

<template>
<DialogClose v-bind="props">
<slot />
</DialogClose>
</template>
56 changes: 56 additions & 0 deletions components/ui/sheet/SheetContent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import {
DialogClose,
DialogContent,
type DialogContentEmits,
type DialogContentProps,
DialogOverlay,
DialogPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { X } from 'lucide-vue-next'
import { type SheetVariants, sheetVariants } from '.'
import { cn } from '@/lib/utils'
interface SheetContentProps extends DialogContentProps {
class?: HTMLAttributes['class']
side?: SheetVariants['side']
}
defineOptions({
inheritAttrs: false,
})
const props = defineProps<SheetContentProps>()
const emits = defineEmits<DialogContentEmits>()
const delegatedProps = computed(() => {
const { class: _, side, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<DialogContent
:class="cn(sheetVariants({ side }), props.class)"
v-bind="{ ...forwarded, ...$attrs }"
>
<slot />

<DialogClose
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<X class="w-4 h-4 text-muted-foreground" />
</DialogClose>
</DialogContent>
</DialogPortal>
</template>
22 changes: 22 additions & 0 deletions components/ui/sheet/SheetDescription.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script>

<template>
<DialogDescription
:class="cn('text-sm text-muted-foreground', props.class)"
v-bind="delegatedProps"
>
<slot />
</DialogDescription>
</template>
19 changes: 19 additions & 0 deletions components/ui/sheet/SheetFooter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
<div
:class="
cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
props.class,
)
"
>
<slot />
</div>
</template>
16 changes: 16 additions & 0 deletions components/ui/sheet/SheetHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
<div
:class="
cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
"
>
<slot />
</div>
</template>
22 changes: 22 additions & 0 deletions components/ui/sheet/SheetTitle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { DialogTitle, type DialogTitleProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script>

<template>
<DialogTitle
:class="cn('text-lg font-semibold text-foreground', props.class)"
v-bind="delegatedProps"
>
<slot />
</DialogTitle>
</template>
11 changes: 11 additions & 0 deletions components/ui/sheet/SheetTrigger.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
const props = defineProps<DialogTriggerProps>()
</script>

<template>
<DialogTrigger v-bind="props">
<slot />
</DialogTrigger>
</template>
31 changes: 31 additions & 0 deletions components/ui/sheet/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { type VariantProps, cva } from 'class-variance-authority'

export { default as Sheet } from './Sheet.vue'
export { default as SheetTrigger } from './SheetTrigger.vue'
export { default as SheetClose } from './SheetClose.vue'
export { default as SheetContent } from './SheetContent.vue'
export { default as SheetHeader } from './SheetHeader.vue'
export { default as SheetTitle } from './SheetTitle.vue'
export { default as SheetDescription } from './SheetDescription.vue'
export { default as SheetFooter } from './SheetFooter.vue'

export const sheetVariants = cva(
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
bottom:
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
right:
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
},
},
defaultVariants: {
side: 'right',
},
},
)

export type SheetVariants = VariantProps<typeof sheetVariants>
6 changes: 6 additions & 0 deletions lib/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Loading

0 comments on commit 1cbc42e

Please sign in to comment.