mirror of
https://github.com/kunkunsh/kunkun.git
synced 2025-04-20 21:49:16 +00:00
f37605f9a2
* refactor(api): rename ui subpackage name * refactor(api): update import paths for template UI schemas * chore: update dependencies and bump package versions * chore(api): bump package version to 0.1.1 * refactor(api): rename IUiIframe to IUiCustom and related types * format
88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { notification, toast, ui } from "@kksh/api/ui/custom"
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
CommandShortcut,
|
|
updateTheme,
|
|
type ThemeConfig
|
|
} from "@kksh/vue"
|
|
import {
|
|
CalendarIcon,
|
|
EnvelopeClosedIcon,
|
|
FaceIcon,
|
|
GearIcon,
|
|
PersonIcon,
|
|
RocketIcon
|
|
} from "@radix-icons/vue"
|
|
import { onMounted, reactive, watch } from "vue"
|
|
|
|
const themeConfig = reactive<ThemeConfig>({
|
|
theme: "neutral",
|
|
radius: 0.5,
|
|
lightMode: "auto"
|
|
})
|
|
watch(themeConfig, (newVal, oldVal) => {
|
|
updateTheme(newVal)
|
|
})
|
|
|
|
onMounted(() => {
|
|
ui.getTheme().then((theme) => {
|
|
updateTheme(theme)
|
|
})
|
|
toast.info("Welcome to the Vue Template demo!")
|
|
notification.sendNotification({
|
|
title: "Vue Template",
|
|
body: "Welcome to the Vue Template demo!"
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="h-screen">
|
|
<Command class="w-full rounded-lg border shadow-md">
|
|
<CommandInput placeholder="Type a command or search..." />
|
|
<CommandList>
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandGroup heading="Suggestions">
|
|
<CommandItem value="Calendar">
|
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
|
<span>Calendar</span>
|
|
</CommandItem>
|
|
<CommandItem value="Search Emoji">
|
|
<FaceIcon class="mr-2 h-4 w-4" />
|
|
<span>Search Emoji</span>
|
|
</CommandItem>
|
|
<CommandItem value="Launch">
|
|
<RocketIcon class="mr-2 h-4 w-4" />
|
|
<span>Launch</span>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
<CommandSeparator />
|
|
<CommandGroup heading="Settings">
|
|
<CommandItem value="Profile">
|
|
<PersonIcon class="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
<CommandShortcut>⌘P</CommandShortcut>
|
|
</CommandItem>
|
|
<CommandItem value="Mail">
|
|
<EnvelopeClosedIcon class="mr-2 h-4 w-4" />
|
|
<span>Mail</span>
|
|
<CommandShortcut>⌘B</CommandShortcut>
|
|
</CommandItem>
|
|
<CommandItem value="Settings">
|
|
<GearIcon class="mr-2 h-4 w-4" />
|
|
<span>Settings</span>
|
|
<CommandShortcut>⌘S</CommandShortcut>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</main>
|
|
</template>
|