-
-
Notifications
You must be signed in to change notification settings - Fork 212
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
626 additions
and
541 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| AlertDialogRoot, | ||
| AlertDialogTrigger, | ||
| AlertDialogContent, | ||
| AlertDialogOverlay, | ||
| AlertDialogCancel, | ||
| AlertDialogAction, | ||
| AlertDialogPortal, | ||
| AlertDialogTitle, | ||
| AlertDialogDescription, | ||
| } from "radix-vue"; | ||
| const alertDialogOpen = ref(false); | ||
| function handleAction() { | ||
| alert("clicked action button!"); | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| Hello alert dialog | ||
| <!-- | ||
| <AlertDialogRoot> | ||
| <AlertDialogTrigger | ||
| class="text-violet11 hover:bg-mauve3 shadow-blackA7 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black" | ||
| > | ||
| Delete account | ||
| </AlertDialogTrigger> | ||
| <AlertDialogPortal> | ||
| <AlertDialogOverlay | ||
| class="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0" | ||
| /> | ||
| <AlertDialogContent | ||
| class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none" | ||
| > | ||
| <AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-medium"> | ||
| Are you absolutely sure? | ||
| </AlertDialogTitle> | ||
| <AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal"> | ||
| This action cannot be undone. This will permanently delete your account and | ||
| remove your data from our servers. | ||
| </AlertDialogDescription> | ||
| <div class="flex justify-end gap-[25px]"> | ||
| <AlertDialogCancel | ||
| class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]" | ||
| > | ||
| Cancel | ||
| </AlertDialogCancel> | ||
| <AlertDialogAction | ||
| @click="handleAction" | ||
| class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]" | ||
| > | ||
| Yes, delete account | ||
| </AlertDialogAction> | ||
| </div> | ||
| </AlertDialogContent> | ||
| </AlertDialogPortal> | ||
| </AlertDialogRoot> | ||
| --> | ||
| </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,26 @@ | ||
| <template> | ||
| <div class="[&>div>pre]:!rounded-t-none"> | ||
| <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass, overflowClass]"> | ||
| <ContentSlot v-if="$slots.default" :use="$slots.default" /> | ||
| </div> | ||
|
|
||
| <ContentSlot v-if="$slots.code" :use="$slots.code" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| defineProps({ | ||
| padding: { | ||
| type: Boolean, | ||
| default: true | ||
| }, | ||
| backgroundClass: { | ||
| type: String, | ||
| default: 'bg-white dark:bg-gray-900' | ||
| }, | ||
| overflowClass: { | ||
| type: String, | ||
| default: '' | ||
| } | ||
| }) | ||
| </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,3 @@ | ||
| <template> | ||
| <button>My button!</button> | ||
| </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,8 @@ | ||
| <script setup> | ||
| const page = ref(1) | ||
| const items = ref(Array(55)) | ||
| </script> | ||
|
|
||
| <template> | ||
| <button class="bg-gray-800">Hello world</button> | ||
| </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
File renamed without changes.
Oops, something went wrong.