-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from qianmoQ/feature-dev
[Page] [Card] Add some card
- Loading branch information
Showing
11 changed files
with
262 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <script setup lang="ts"> | ||
| import { type HTMLAttributes, computed } from 'vue' | ||
| import { Separator, type SeparatorProps } from 'radix-vue' | ||
| import { cn } from '@/lib/utils' | ||
| const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>() | ||
| const delegatedProps = computed(() => { | ||
| const { class: _, ...delegated } = props | ||
| return delegated | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <Separator | ||
| v-bind="delegatedProps" | ||
| :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)" | ||
| /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as Separator } from './Separator.vue' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <template> | ||
| <Card> | ||
| <CardHeader class="grid grid-cols-[minmax(0,1fr)_110px] items-start gap-4 space-y-0"> | ||
| <div class="space-y-1"> | ||
| <CardTitle> | ||
| <a href="https://github.com/devlive-community/shadcn-ui-vue-admin" target="_blank">devlive-community/shadcn-ui-vue-admin</a> | ||
| </CardTitle> | ||
| <CardDescription>Admin crafted with Shadcn ui and Vite and Vue. Built with responsiveness and accessibility in mind.</CardDescription> | ||
| </div> | ||
| <div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground"> | ||
| <Button variant="secondary" class="px-3 shadow-none cursor-pointer"> | ||
| <StarIcon class="mr-2 h-4 w-4"/> | ||
| Star | ||
| </Button> | ||
| <Separator orientation="vertical" class="h-5"/> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger as-child> | ||
| <Button variant="secondary" class="px-2 shadow-none"> | ||
| <ChevronDownIcon class="h-4 w-4 text-secondary-foreground"/> | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end" :align-offset="-5" class="w-[200px]"> | ||
| <DropdownMenuLabel>{{ $t('card.common.functionList') }}</DropdownMenuLabel> | ||
| <DropdownMenuSeparator/> | ||
| <DropdownMenuCheckboxItem class="cursor-pointer" checked>{{ $t('card.common.function1') }}</DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem class="cursor-pointer">{{ $t('card.common.function2') }}</DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem class="cursor-pointer">{{ $t('card.common.function3') }}</DropdownMenuCheckboxItem> | ||
| <DropdownMenuSeparator/> | ||
| <DropdownMenuItem class="cursor-pointer"> | ||
| <PlusIcon class="mr-2 h-4 w-4"/> | ||
| {{ $t('card.common.newList') }} | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div class="flex space-x-4 text-sm text-muted-foreground"> | ||
| <div class="flex items-center cursor-pointer"> | ||
| <CircleIcon class="mr-1 h-3 w-3 fill-sky-400 text-sky-400"/> | ||
| TypeScript | ||
| </div> | ||
| <div class="flex items-center cursor-pointer"> | ||
| <StarIcon class="mr-1 h-3 w-3"/> | ||
| 0 k | ||
| </div> | ||
| <div>Updated April 2024</div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { ChevronDownIcon, CircleIcon, PlusIcon, StarIcon } from 'lucide-vue-next' | ||
| import { Button } from '@/components/ui/button' | ||
| import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuCheckboxItem, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuLabel, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger | ||
| } from '@/components/ui/dropdown-menu' | ||
| import { Separator } from '@/components/ui/separator' | ||
| export default defineComponent({ | ||
| name: 'CardGit', | ||
| components: { | ||
| ChevronDownIcon, CircleIcon, PlusIcon, StarIcon, | ||
| Button, | ||
| Card, CardContent, CardDescription, CardHeader, CardTitle, | ||
| DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, | ||
| Separator | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <template> | ||
| <Card> | ||
| <CardHeader class="pb-3"> | ||
| <CardTitle>{{ $t('card.common.notification') }}</CardTitle> | ||
| <CardDescription>{{ $t('card.tip.notification') }}</CardDescription> | ||
| </CardHeader> | ||
| <CardContent class="grid gap-1"> | ||
| <div class="cursor-pointer -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"> | ||
| <BellIcon class="mt-px h-5 w-5"/> | ||
| <div class="space-y-1"> | ||
| <p class="text-sm font-medium leading-none">{{ $t('card.common.notification') }}</p> | ||
| <p class="text-sm text-muted-foreground">{{ $t('card.tip.notification') }}</p> | ||
| </div> | ||
| </div> | ||
| <div class="cursor-pointer -mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all"> | ||
| <PersonStandingIcon class="mt-px h-5 w-5"/> | ||
| <div class="space-y-1"> | ||
| <p class="text-sm font-medium leading-none">{{ $t('card.common.available') }}</p> | ||
| <p class="text-sm text-muted-foreground">{{ $t('card.tip.available') }}</p> | ||
| </div> | ||
| </div> | ||
| <div class="cursor-pointer -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"> | ||
| <EyeOffIcon class="mt-px h-5 w-5"/> | ||
| <div class="space-y-1"> | ||
| <p class="text-sm font-medium leading-none">{{ $t('card.common.ignored') }}</p> | ||
| <p class="text-sm text-muted-foreground">{{ $t('card.tip.ignored') }}</p> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' | ||
| import { BellIcon, EyeOffIcon, PersonStandingIcon } from 'lucide-vue-next' | ||
| export default defineComponent({ | ||
| name: 'CardNotification', | ||
| components: { | ||
| Card, CardContent, CardDescription, CardHeader, CardTitle, | ||
| BellIcon, EyeOffIcon, PersonStandingIcon | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <template> | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>{{ $t('card.common.setting') }}</CardTitle> | ||
| <CardDescription>{{ $t('card.tip.setting') }}</CardDescription> | ||
| </CardHeader> | ||
| <CardContent class="grid gap-6"> | ||
| <div class="flex items-center justify-between space-x-2"> | ||
| <Label for="necessary" class="flex flex-col space-y-1"> | ||
| <span>{{ $t('card.common.setting1') }}</span> | ||
| <span class="font-normal leading-snug text-muted-foreground">{{ $t('card.tip.setting1') }}</span> | ||
| </Label> | ||
| <Switch id="necessary" default-checked/> | ||
| </div> | ||
| <div class="flex items-center justify-between space-x-2"> | ||
| <Label for="functional" class="flex flex-col space-y-1"> | ||
| <span>{{ $t('card.common.setting1') }}</span> | ||
| <span class="font-normal leading-snug text-muted-foreground">{{ $t('card.tip.setting1') }}</span> | ||
| </Label> | ||
| <Switch id="functional"/> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter> | ||
| <Button variant="outline" class="w-full">{{ $t('common.common.button') }}</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { Button } from '@/components/ui/button' | ||
| import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' | ||
| import { Label } from '@/components/ui/label' | ||
| import { Switch } from '@/components/ui/switch' | ||
| export default defineComponent({ | ||
| name: 'CardSetting', | ||
| components: { | ||
| Button, | ||
| Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, | ||
| Label, Switch | ||
| } | ||
| }) | ||
| </script> |