matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Migrate to electron-vite

Browse Source 
Delete your node_modules. Use pnpm from now on.
This commit is contained in:
Robert Kossessa
2024-03-01 19:45:18 +01:00
parent 057b8a5fc7
commit 7b67516125
392 changed files with 4454 additions and 21172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/App.vue
View File

@@ -1,85 +0,0 @@
<script setup>
import ProfileManager from '@/components/profile/ProfileManager.vue'
import DevicePreview from '@/components/device/DevicePreview.vue'
import ConfigPane from '@/components/config/ConfigPane.vue'
import Navbar from '@/components/navbar/Navbar.vue'
import { useStore } from '@/store'
import { useMessageHandlers } from '@/device'
const { electron } = window
const store = useStore()
const menuActions = {
connect: () => store.setConnected(!store.connected),
orientation: () => store.cycleScreenOrientation(),
skin: () => store.switchPreviewDeviceModel(),
}
electron?.onMenu((key) => {
console.log('menu', key)
if (menuActions[key]) {
menuActions[key]()
}
})
store.fetchProfiles() // TODO remove me!
// handle device events
const handlers = useMessageHandlers(store)
window.nanodevices.on_event('device-attached', (evt, deviceid, data) => store.device_attached(deviceid))
window.nanodevices.on_event('device-detached', (evt, deviceid, data) => store.device_detached(deviceid))
window.nanodevices.on_event('device-error', (evt, deviceid, data) => { /* TODO handle connection errors */ })
window.nanodevices.on_event('connected', (evt, deviceid, data) => store.device_connected(deviceid))
window.nanodevices.on_event('disconnected', (evt, deviceid, data) => store.device_disconnected(deviceid))
window.nanodevices.on_event('update', (evt, deviceid, data) => { handlers.handle_message(data) })
// get list of the currently attached devices
window.nanodevices.list_devices().then((devs)=>store.init_devices(devs))
</script>
<template>
<main class="select-none w-screen h-screen flex flex-col">
<Navbar class="flex-none" />
<div class="flex-1 min-h-0 flex flex-row justify-center">
<div class="basis-1/3 min-w-60 flex-1 flex overflow-hidden">
<Transition name="slide-left">
<ProfileManager
v-if="store.connected"
class="flex-1 max-w-full flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
</Transition>
</div>
<DevicePreview
class="basis-1/3 flex-col flex" />
<div class="basis-2/5 flex-1 flex overflow-hidden">
<Transition name="slide-right">
<ConfigPane
v-if="store.connected"
class="flex-1 max-w-full flex flex-col border-solid border-0 border-l bg-zinc-900 bg-opacity-50" />
</Transition>
</div>
</div>
</main>
</template>
<style scoped>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: transform 700ms ease;
}
.slide-left-enter-active,
.slide-right-enter-active {
transition-delay: 500ms;
}
.slide-left-enter-from,
.slide-left-leave-to {
transform: translateX(-100%);
}
.slide-right-enter-from,
.slide-right-leave-to {
transform: translateX(100%);
}
</style>

117
src/assets/base.css
View File

@@ -1,117 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
@font-face {
font-family: 'ProtoMono';
src: url(fonts/ProtoMono-Regular.ttf), local('monospace');
}
@font-face {
font-family: 'RenoMono';
src: url(fonts/RenoMono.otf), local('monospace');
}
@font-face {
font-family: 'JetBrainsMono';
src: url(fonts/JetBrainsMono[wght].ttf), local('monospace');
}
@font-face {
font-family: 'PixelLg';
src: url(fonts/SG12.ttf), local('monospace');
}
@font-face {
font-family: 'PixelSm';
src: url(fonts/andina.ttf), local('monospace');
}
.font-pixellg {
font-family: 'PixelLg', monospace, sans-serif;
}
.font-pixelsm {
font-family: 'PixelSm', monospace, sans-serif;
}
.font-size-gui-extra {
font-size: 48px;
}
h1, h2, h3, h4, h5, h6 {
@apply font-heading;
}
}

BIN
src/assets/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 200 KiB

BIN
src/assets/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

79
src/assets/index.css
View File

@@ -1,79 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

34
src/assets/main.css
View File

@@ -1,34 +0,0 @@
@import './base.css';
@layer base {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
}
body {
overflow: hidden;
--scrollbar-foreground: rgb(39 39 42);
--scrollbar-background: black;
scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-thumb { /* Foreground */
background: var(--scrollbar-foreground);
}
::-webkit-scrollbar-track { /* Background */
background: var(--scrollbar-background);
}
::selection {
background: #c66936;
color: black;
text-shadow: none;
}

155
src/backend/nanodevices.js
View File

@@ -1,155 +0,0 @@
import { SerialPort } from 'serialport';
import { EventEmitter } from 'events';
// JTAG interface, TODO: change me!
const NANO_PRODUCT_ID = '1001';
const NANO_VENDOR_ID = '303a';
const NANO_BAUD_RATE = 115200;
class NanoDevices extends EventEmitter {
constructor() {
super();
this.all_nano_devices = {};
this.connected_nano_devices = {};
}
_list() {
let p = new Promise((resolve, reject) => {
SerialPort.list().then((ports, err) => {
if (err) {
reject(err); // TODO format for errors?
}
else {
let found_nano_devices = []
for (let port of ports) {
if (port.productId === NANO_PRODUCT_ID && port.vendorId === NANO_VENDOR_ID) {
found_nano_devices.push(port.serialNumber);
if (this.all_nano_devices[port.serialNumber] === undefined) {
this.all_nano_devices[port.serialNumber] = port;
this.emit('nanodevices:device-attached', port.serialNumber);
console.log('attached', port.serialNumber);
}
}
}
resolve(found_nano_devices);
for (let serialNumber in this.all_nano_devices) {
if (found_nano_devices.indexOf(serialNumber) === -1) {
delete this.all_nano_devices[serialNumber];
this.emit('nanodevices:device-detached', serialNumber);
console.log('detached', serialNumber);
}
}
}
});
});
return p;
};
_handle_data(connected_port, data) {
connected_port.data += data;
let lines = connected_port.data.split('\n');
if (lines.length > 1) {
for (let i = 0; i < lines.length - 1; i++) {
if (lines[i].length > 0) {
if (lines[i].startsWith('{')) // if its a json object
this.emit('nanodevices:update', connected_port.serialNumber, lines[i]);
else
console.log("Device: "+lines[i]); // otherwise just log it
}
}
connected_port.data = lines[lines.length - 1];
}
};
list_devices() {
let result = [];
for (const [key, value] of Object.entries(this.all_nano_devices)) {
if (value.serialNumber)
result.push(key);
}
console.log('list_devices', result);
return result;
};
async send(deviceid, jsonstr) {
let connected_port = this.connected_nano_devices[deviceid];
if (connected_port === undefined) {
return Promise.reject('Device not connected');
}
else {
connected_port.port.write(jsonstr+'\n');
return Promise.resolve();
}
};
async connect(deviceid) {
const nanodevices = this;
let p = new Promise((resolve, reject) => {
let nano_device = nanodevices.all_nano_devices[deviceid];
if (nano_device === undefined) {
reject('Device not attached');
}
else {
console.log('nano_device', nano_device);
let port = new SerialPort({ path: nano_device.path, baudRate: NANO_BAUD_RATE, autoOpen: false });
port.on('error', (err) => {
// forward error to FE
nanodevices.emit('nanodevices:error', nano_device.serialNumber, err);
});
port.on('close', (err) => {
if (err && err.disconnected) {
// forward close to FE
nanodevices.emit('nanodevices:disconnected', nano_device.serialNumber);
}
delete nanodevices.connected_nano_devices[nano_device.serialNumber];
});
port.on('open', () => {
resolve(nano_device.serialNumber);
nanodevices.connected_nano_devices[nano_device.serialNumber] = { port: port, data: '' };
nanodevices.emit('nanodevices:connected', nano_device.serialNumber);
});
port.on('data', (data) => {
let connected_port = nanodevices.connected_nano_devices[nano_device.serialNumber];
nanodevices._handle_data(connected_port, data);
});
port.open((err)=>{
if (err) {
reject(err);
}
});
}
});
return p;
};
disconnect(deviceid) {
const nanodevices = this;
let p = new Promise((resolve, reject) => {
let nano_device = nanodevices.all_nano_devices[deviceid];
if (nano_device === undefined) {
reject('Device not attached');
}
else {
if (nanodevices.connected_nano_devices[nano_device.serialNumber] === undefined) {
reject('Device not connected');
}
else {
nano_device.close();
resolve(nano_device.serialNumber);
}
}
});
return p;
};
};
const nanodevices = new NanoDevices();
export default nanodevices;

81
src/background.js
View File

@@ -1,81 +0,0 @@
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}

8
src/components/old/DevPlayground.vue
View File

@@ -1,8 +0,0 @@
<template>
<WIP />
<DeviceLEDRing />
</template>
<script setup>
import WIP from '@/components/WIP.vue'
import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
</script>

22
src/components/ui/accordion/Accordion.vue
View File

@@ -1,22 +0,0 @@
<script setup>
import { AccordionRoot, useEmitAsProps } from "radix-vue";
const props = defineProps({
type: { type: String, required: true },
modelValue: { type: [String, Array], required: false },
defaultValue: { type: [String, Array], required: false },
collapsible: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
dir: { type: String, required: false },
orientation: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits(["update:modelValue"]);
</script>
<template>
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
<slot />
</AccordionRoot>
</template>

26
src/components/ui/accordion/AccordionContent.vue
View File

@@ -1,26 +0,0 @@
<script setup>
import { AccordionContent } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<AccordionContent
v-bind="props"
:class="
cn(
'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
props.class
)
"
>
<div class="pb-4 pt-0">
<slot />
</div>
</AccordionContent>
</template>

18
src/components/ui/accordion/AccordionItem.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { AccordionItem } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
disabled: { type: Boolean, required: false },
value: { type: String, required: true },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<AccordionItem v-bind="props" :class="cn('border-b', props.class ?? '')">
<slot />
</AccordionItem>
</template>

30
src/components/ui/accordion/AccordionTrigger.vue
View File

@@ -1,30 +0,0 @@
<script setup>
import { AccordionHeader, AccordionTrigger } from "radix-vue";
import { ChevronDownIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<AccordionHeader class="flex" as="div">
<AccordionTrigger
v-bind="props"
:class="
cn(
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
props.class
)
"
>
<slot />
<ChevronDownIcon
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
/>
</AccordionTrigger>
</AccordionHeader>
</template>

4
src/components/ui/accordion/index.js
View File

@@ -1,4 +0,0 @@
export { default as Accordion } from "./Accordion.vue";
export { default as AccordionContent } from "./AccordionContent.vue";
export { default as AccordionItem } from "./AccordionItem.vue";
export { default as AccordionTrigger } from "./AccordionTrigger.vue";

17
src/components/ui/alert-dialog/AlertDialog.vue
View File

@@ -1,17 +0,0 @@
<script setup>
import { AlertDialogRoot, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<AlertDialogRoot v-bind="forwarded">
<slot />
</AlertDialogRoot>
</template>

19
src/components/ui/alert-dialog/AlertDialogAction.vue
View File

@@ -1,19 +0,0 @@
<script setup>
import { AlertDialogAction } from "radix-vue";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<AlertDialogAction
v-bind="props"
:class="cn(buttonVariants(), $attrs.class ?? '')"
>
<slot />
</AlertDialogAction>
</template>

25
src/components/ui/alert-dialog/AlertDialogCancel.vue
View File

@@ -1,25 +0,0 @@
<script setup>
import { AlertDialogCancel } from "radix-vue";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<AlertDialogCancel
v-bind="props"
:class="
cn(
buttonVariants({ variant: 'outline' }),
'mt-2 sm:mt-0',
$attrs.class ?? ''
)
"
>
<slot />
</AlertDialogCancel>
</template>

49
src/components/ui/alert-dialog/AlertDialogContent.vue
View File

@@ -1,49 +0,0 @@
<script setup>
import {
AlertDialogContent,
AlertDialogOverlay,
AlertDialogPortal,
useEmitAsProps,
} from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
trapFocus: { type: Boolean, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
"openAutoFocus",
"closeAutoFocus",
]);
const emitsAsProps = useEmitAsProps(emits);
</script>
<template>
<AlertDialogPortal>
<AlertDialogOverlay
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<AlertDialogContent
v-bind="{ ...props, ...emitsAsProps }"
:class="
cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
props.class
)
"
>
<slot />
</AlertDialogContent>
</AlertDialogPortal>
</template>

19
src/components/ui/alert-dialog/AlertDialogDescription.vue
View File

@@ -1,19 +0,0 @@
<script setup>
import { AlertDialogDescription } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<AlertDialogDescription
:class="cn('text-muted-foreground text-sm', props.class)"
:as-child="props.asChild"
>
<slot />
</AlertDialogDescription>
</template>

23
src/components/ui/alert-dialog/AlertDialogFooter.vue
View File

@@ -1,23 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<div
:class="
cn(
'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
props.class
)
"
>
<slot />
</div>
</template>

18
src/components/ui/alert-dialog/AlertDialogHeader.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
>
<slot />
</div>
</template>

19
src/components/ui/alert-dialog/AlertDialogTitle.vue
View File

@@ -1,19 +0,0 @@
<script setup>
import { AlertDialogTitle } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<AlertDialogTitle
:as-child="props.asChild"
:class="cn('text-lg text-foreground font-semibold', props.class)"
>
<slot />
</AlertDialogTitle>
</template>

14
src/components/ui/alert-dialog/AlertDialogTrigger.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { AlertDialogTrigger } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<AlertDialogTrigger v-bind="props">
<slot />
</AlertDialogTrigger>
</template>

9
src/components/ui/alert-dialog/index.js
View File

@@ -1,9 +0,0 @@
export { default as AlertDialog } from "./AlertDialog.vue";
export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
export { default as AlertDialogContent } from "./AlertDialogContent.vue";
export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
export { default as AlertDialogAction } from "./AlertDialogAction.vue";
export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";

15
src/components/ui/alert/Alert.vue
View File

@@ -1,15 +0,0 @@
<script setup>
import { alertVariants } from ".";
import { cn } from "@/lib/utils";
const props = defineProps({
variant: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<div :class="cn(alertVariants({ variant }), props.class ?? '')">
<slot />
</div>
</template>

13
src/components/ui/alert/AlertDescription.vue
View File

@@ -1,13 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: String,
});
</script>
<template>
<div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
<slot />
</div>
</template>

13
src/components/ui/alert/AlertTitle.vue
View File

@@ -1,13 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
</script>
<template>
<h5
:class="
cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')
"
>
<slot />
</h5>
</template>

21
src/components/ui/alert/index.js
View File

@@ -1,21 +0,0 @@
import { cva } from "class-variance-authority";
export { default as Alert } from "./Alert.vue";
export { default as AlertTitle } from "./AlertTitle.vue";
export { default as AlertDescription } from "./AlertDescription.vue";
export const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
);

14
src/components/ui/badge/Badge.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { badgeVariants } from ".";
import { cn } from "@/lib/utils";
defineProps({
variant: { type: null, required: false },
});
</script>
<template>
<div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
<slot />
</div>
</template>

23
src/components/ui/badge/index.js
View File

@@ -1,23 +0,0 @@
import { cva } from "class-variance-authority";
export { default as Badge } from "./Badge.vue";
export const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
);

22
src/components/ui/button/Button.vue
View File

@@ -1,22 +0,0 @@
<script setup>
import { Primitive } from "radix-vue";
import { buttonVariants } from ".";
import { cn } from "@/lib/utils";
defineProps({
variant: { type: null, required: false },
size: { type: null, required: false },
as: { type: String, required: false, default: "button" },
asChild: { type: Boolean, required: false },
});
</script>
<template>
<Primitive
:as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
>
<slot />
</Primitive>
</template>

33
src/components/ui/button/index.js
View File

@@ -1,33 +0,0 @@
import { cva } from "class-variance-authority";
export { default as Button } from "./Button.vue";
export const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);

20
src/components/ui/card/Card.vue
View File

@@ -1,20 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<div
:class="
cn('rounded-lg border bg-card text-card-foreground shadow', props.class)
"
>
<slot />
</div>
</template>

16
src/components/ui/card/CardContent.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<div :class="cn('p-6 pt-0', props.class)">
<slot />
</div>
</template>

16
src/components/ui/card/CardDescription.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<p :class="cn('text-sm text-muted-foreground', props.class)">
<slot />
</p>
</template>

16
src/components/ui/card/CardFooter.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<div :class="cn('flex items-center p-6 pt-0', props.class)">
<slot />
</div>
</template>

16
src/components/ui/card/CardHeader.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
<slot />
</div>
</template>

16
src/components/ui/card/CardTitle.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: {
type: String,
default: "",
},
});
</script>
<template>
<h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
<slot />
</h3>
</template>

6
src/components/ui/card/index.js
View File

@@ -1,6 +0,0 @@
export { default as Card } from "./Card.vue";
export { default as CardHeader } from "./CardHeader.vue";
export { default as CardTitle } from "./CardTitle.vue";
export { default as CardDescription } from "./CardDescription.vue";
export { default as CardContent } from "./CardContent.vue";
export { default as CardFooter } from "./CardFooter.vue";

42
src/components/ui/checkbox/Checkbox.vue
View File

@@ -1,42 +0,0 @@
<script setup>
import {
CheckboxIndicator,
CheckboxRoot,
useForwardPropsEmits,
} from "radix-vue";
import { CheckIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
defaultChecked: { type: Boolean, required: false },
checked: { type: [Boolean, String], required: false },
disabled: { type: Boolean, required: false },
required: { type: Boolean, required: false },
name: { type: String, required: false },
value: { type: String, required: false },
id: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits(["update:checked"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<CheckboxRoot
v-bind="forwarded"
:class="
cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
$attrs.class ?? ''
)
"
>
<CheckboxIndicator
class="flex h-full w-full items-center justify-center text-current"
>
<CheckIcon class="h-4 w-4" />
</CheckboxIndicator>
</CheckboxRoot>
</template>

1
src/components/ui/checkbox/index.js
View File

@@ -1 +0,0 @@
export { default as Checkbox } from "./Checkbox.vue";

21
src/components/ui/collapsible/Collapsible.vue
View File

@@ -1,21 +0,0 @@
<script setup>
import { CollapsibleRoot, useEmitAsProps } from "radix-vue";
const props = defineProps({
defaultOpen: { type: Boolean, required: false },
open: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits(["update:open"]);
</script>
<template>
<CollapsibleRoot
v-slot="{ open }"
v-bind="{ ...props, ...useEmitAsProps(emits) }"
>
<slot :open="open" />
</CollapsibleRoot>
</template>

18
src/components/ui/collapsible/CollapsibleContent.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { CollapsibleContent } from "radix-vue";
const props = defineProps({
forceMount: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<CollapsibleContent
v-bind="props"
class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
>
<slot />
</CollapsibleContent>
</template>

14
src/components/ui/collapsible/CollapsibleTrigger.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { CollapsibleTrigger } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<CollapsibleTrigger v-bind="props">
<slot />
</CollapsibleTrigger>
</template>

3
src/components/ui/collapsible/index.js
View File

@@ -1,3 +0,0 @@
export { default as Collapsible } from "./Collapsible.vue";
export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
export { default as CollapsibleContent } from "./CollapsibleContent.vue";

42
src/components/ui/command/Command.vue
View File

@@ -1,42 +0,0 @@
<script setup>
import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
modelValue: { type: null, required: false },
defaultValue: { type: null, required: false },
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
searchTerm: { type: String, required: false },
multiple: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
name: { type: String, required: false },
dir: { type: String, required: false },
filterFunction: { type: Function, required: false },
displayValue: { type: Function, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits([
"update:modelValue",
"update:open",
"update:searchTerm",
]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ComboboxRoot
v-bind="forwarded"
:open="true"
:class="
cn(
'flex h-full w-full flex-col overflow-hidden rounded-md text-popover-foreground',
$attrs.class ?? ''
)
"
>
<slot />
</ComboboxRoot>
</template>

26
src/components/ui/command/CommandDialog.vue
View File

@@ -1,26 +0,0 @@
<script setup>
import { useEmitAsProps } from "radix-vue";
import Command from "./Command.vue";
import { Dialog, DialogContent } from "@/components/ui/dialog";
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
modal: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const emitsAsProps = useEmitAsProps(emits);
</script>
<template>
<Dialog v-bind="{ ...props, ...emitsAsProps }">
<DialogContent class="overflow-hidden p-0 shadow-lg">
<Command
class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
>
<slot />
</Command>
</DialogContent>
</Dialog>
</template>

18
src/components/ui/command/CommandEmpty.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { ComboboxEmpty } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<ComboboxEmpty
v-bind="props"
:class="cn('py-6 text-center text-sm', $attrs.class ?? '')"
>
<slot />
</ComboboxEmpty>
</template>

25
src/components/ui/command/CommandGroup.vue
View File

@@ -1,25 +0,0 @@
<script setup>
import { ComboboxGroup, ComboboxLabel } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
heading: { type: String, required: false },
});
</script>
<template>
<ComboboxGroup
v-bind="props"
:class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
>
<ComboboxLabel
v-if="heading"
class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
>
{{ heading }}
</ComboboxLabel>
<slot />
</ComboboxGroup>
</template>

35
src/components/ui/command/CommandInput.vue
View File

@@ -1,35 +0,0 @@
<script setup>
import { MagnifyingGlassIcon } from "@radix-icons/vue";
import { ComboboxInput } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
type: { type: String, required: false },
disabled: { type: Boolean, required: false },
autoFocus: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<script>
export default {
inheritAttrs: false,
};
</script>
<template>
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
<MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<ComboboxInput
v-bind="{ ...props, ...$attrs }"
auto-focus
:class="
cn(
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
$attrs.class ?? ''
)
"
/>
</div>
</template>

30
src/components/ui/command/CommandItem.vue
View File

@@ -1,30 +0,0 @@
<script setup>
import { ComboboxItem, useEmitAsProps } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
value: { type: null, required: true },
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits(["select"]);
const emitsAsProps = useEmitAsProps(emits);
</script>
<template>
<ComboboxItem
v-bind="{ ...props, ...emitsAsProps }"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
$attrs.class ?? ''
)
"
@select.prevent
>
<slot />
</ComboboxItem>
</template>

48
src/components/ui/command/CommandList.vue
View File

@@ -1,48 +0,0 @@
<script setup>
import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
position: { type: String, required: false },
bodyLock: { type: Boolean, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
side: { type: null, required: false },
sideOffset: { type: Number, required: false },
align: { type: null, required: false },
alignOffset: { type: Number, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
updatePositionStrategy: { type: String, required: false },
onPlaced: { type: Function, required: false },
prioritizePosition: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ComboboxContent
v-bind="forwarded"
:class="
cn('max-h-[500px] max-h-full overflow-y-auto overflow-x-hidden', $attrs.class ?? '')
"
>
<div role="presentation">
<slot />
</div>
</ComboboxContent>
</template>

18
src/components/ui/command/CommandSeparator.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { ComboboxSeparator } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<ComboboxSeparator
v-bind="props"
:class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
>
<slot />
</ComboboxSeparator>
</template>

16
src/components/ui/command/CommandShortcut.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
</script>
<template>
<span
:class="
cn(
'ml-auto text-xs tracking-widest text-muted-foreground',
$attrs.class ?? ''
)
"
>
<slot />
</span>
</template>

9
src/components/ui/command/index.js
View File

@@ -1,9 +0,0 @@
export { default as Command } from "./Command.vue";
export { default as CommandDialog } from "./CommandDialog.vue";
export { default as CommandEmpty } from "./CommandEmpty.vue";
export { default as CommandGroup } from "./CommandGroup.vue";
export { default as CommandInput } from "./CommandInput.vue";
export { default as CommandItem } from "./CommandItem.vue";
export { default as CommandList } from "./CommandList.vue";
export { default as CommandSeparator } from "./CommandSeparator.vue";
export { default as CommandShortcut } from "./CommandShortcut.vue";

17
src/components/ui/context-menu/ContextMenu.vue
View File

@@ -1,17 +0,0 @@
<script setup>
import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
dir: { type: String, required: false },
modal: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuRoot v-bind="forwarded">
<slot />
</ContextMenuRoot>
</template>

40
src/components/ui/context-menu/ContextMenuCheckboxItem.vue
View File

@@ -1,40 +0,0 @@
<script setup>
import {
ContextMenuCheckboxItem,
ContextMenuItemIndicator,
useEmitAsProps,
} from "radix-vue";
import { CheckIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
checked: { type: [Boolean, String], required: false },
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits(["select", "update:checked"]);
</script>
<template>
<ContextMenuCheckboxItem
v-bind="{ ...props, ...useEmitAsProps(emits) }"
:class="[
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
),
]"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator
class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
>
<CheckIcon class="h-4 w-4" />
</ContextMenuItemIndicator>
</span>
<slot />
</ContextMenuCheckboxItem>
</template>

51
src/components/ui/context-menu/ContextMenuContent.vue
View File

@@ -1,51 +0,0 @@
<script setup>
import {
ContextMenuContent,
ContextMenuPortal,
useForwardPropsEmits,
} from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
loop: { type: Boolean, required: false },
alignOffset: { type: Number, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
"entryFocus",
"openAutoFocus",
"closeAutoFocus",
]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuPortal>
<ContextMenuContent
:align-offset="props.alignOffset"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
),
]"
v-bind="forwarded"
>
<slot />
</ContextMenuContent>
</ContextMenuPortal>
</template>

14
src/components/ui/context-menu/ContextMenuGroup.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { ContextMenuGroup } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<ContextMenuGroup v-bind="props">
<slot />
</ContextMenuGroup>
</template>

29
src/components/ui/context-menu/ContextMenuItem.vue
View File

@@ -1,29 +0,0 @@
<script setup>
import { ContextMenuItem, useEmitAsProps } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
inset: { type: Boolean, required: false },
});
const emits = defineEmits(["select"]);
</script>
<template>
<ContextMenuItem
v-bind="{ ...props, ...useEmitAsProps(emits) }"
:class="[
cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class
),
]"
>
<slot />
</ContextMenuItem>
</template>

26
src/components/ui/context-menu/ContextMenuLabel.vue
View File

@@ -1,26 +0,0 @@
<script setup>
import { ContextMenuLabel } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
inset: { type: Boolean, required: false },
});
</script>
<template>
<ContextMenuLabel
v-bind="props"
:class="
cn(
'px-2 py-1.5 text-sm font-semibold text-foreground',
inset && 'pl-8',
props.class ?? ''
)
"
>
<slot />
</ContextMenuLabel>
</template>

15
src/components/ui/context-menu/ContextMenuPortal.vue
View File

@@ -1,15 +0,0 @@
<script setup>
import { ContextMenuPortal } from "radix-vue";
const props = defineProps({
to: { type: null, required: false },
disabled: { type: Boolean, required: false },
forceMount: { type: Boolean, required: false },
});
</script>
<template>
<ContextMenuPortal v-bind="props">
<slot />
</ContextMenuPortal>
</template>

18
src/components/ui/context-menu/ContextMenuRadioGroup.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
modelValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits(["update:modelValue"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuRadioGroup v-bind="forwarded">
<slot />
</ContextMenuRadioGroup>
</template>

40
src/components/ui/context-menu/ContextMenuRadioItem.vue
View File

@@ -1,40 +0,0 @@
<script setup>
import {
ContextMenuItemIndicator,
ContextMenuRadioItem,
useForwardPropsEmits,
} from "radix-vue";
import { DotFilledIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
value: { type: String, required: true },
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits(["select"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuRadioItem
v-bind="forwarded"
:class="[
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
),
]"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator>
<DotFilledIcon class="h-4 w-4 fill-current" />
</ContextMenuItemIndicator>
</span>
<slot />
</ContextMenuRadioItem>
</template>

16
src/components/ui/context-menu/ContextMenuSeparator.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { ContextMenuSeparator } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<ContextMenuSeparator
v-bind="props"
:class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')"
/>
</template>

16
src/components/ui/context-menu/ContextMenuShortcut.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
</script>
<template>
<span
:class="
cn(
'ml-auto text-xs tracking-widest text-muted-foreground',
$attrs.class ?? ''
)
"
>
<slot />
</span>
</template>

17
src/components/ui/context-menu/ContextMenuSub.vue
View File

@@ -1,17 +0,0 @@
<script setup>
import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuSub v-bind="forwarded">
<slot />
</ContextMenuSub>
</template>

53
src/components/ui/context-menu/ContextMenuSubContent.vue
View File

@@ -1,53 +0,0 @@
<script setup>
import { ContextMenuSubContent, useForwardPropsEmits } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
loop: { type: Boolean, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
disableOutsideScroll: { type: Boolean, required: false },
trapFocus: { type: Boolean, required: false },
side: { type: null, required: false },
sideOffset: { type: Number, required: false },
align: { type: null, required: false },
alignOffset: { type: Number, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
updatePositionStrategy: { type: String, required: false },
prioritizePosition: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
"entryFocus",
"openAutoFocus",
"closeAutoFocus",
]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuSubContent
v-bind="forwarded"
:class="
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
)
"
>
<slot />
</ContextMenuSubContent>
</template>

30
src/components/ui/context-menu/ContextMenuSubTrigger.vue
View File

@@ -1,30 +0,0 @@
<script setup>
import { ContextMenuSubTrigger } from "radix-vue";
import { ChevronRightIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
inset: { type: Boolean, required: false },
});
</script>
<template>
<ContextMenuSubTrigger
v-bind="props"
:class="[
cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
props.class
),
]"
>
<slot />
<ChevronRightIcon class="ml-auto h-4 w-4" />
</ContextMenuSubTrigger>
</template>

15
src/components/ui/context-menu/ContextMenuTrigger.vue
View File

@@ -1,15 +0,0 @@
<script setup>
import { ContextMenuTrigger } from "radix-vue";
const props = defineProps({
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<ContextMenuTrigger v-bind="props">
<slot />
</ContextMenuTrigger>
</template>

14
src/components/ui/context-menu/index.js
View File

@@ -1,14 +0,0 @@
export { default as ContextMenu } from "./ContextMenu.vue";
export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue";
export { default as ContextMenuContent } from "./ContextMenuContent.vue";
export { default as ContextMenuGroup } from "./ContextMenuGroup.vue";
export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue";
export { default as ContextMenuItem } from "./ContextMenuItem.vue";
export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue";
export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue";
export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue";
export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue";
export { default as ContextMenuLabel } from "./ContextMenuLabel.vue";
export { default as ContextMenuSub } from "./ContextMenuSub.vue";
export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue";
export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue";

18
src/components/ui/dialog/Dialog.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { DialogRoot, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
modal: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DialogRoot v-bind="forwarded">
<slot />
</DialogRoot>
</template>

14
src/components/ui/dialog/DialogClose.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { DialogClose } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<DialogClose v-bind="props">
<slot />
</DialogClose>
</template>

57
src/components/ui/dialog/DialogContent.vue
View File

@@ -1,57 +0,0 @@
<script setup>
import {
DialogClose,
DialogContent,
DialogOverlay,
DialogPortal,
useEmitAsProps,
} from "radix-vue";
import { Cross2Icon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
trapFocus: { type: Boolean, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
"openAutoFocus",
"closeAutoFocus",
]);
const emitsAsProps = useEmitAsProps(emits);
</script>
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm 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(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
props.class
)
"
v-bind="{ ...props, ...emitsAsProps }"
>
<slot />
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
>
<Cross2Icon class="w-4 h-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>
</DialogPortal>
</template>

19
src/components/ui/dialog/DialogDescription.vue
View File

@@ -1,19 +0,0 @@
<script setup>
import { DialogDescription } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<DialogDescription
v-bind="props"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</DialogDescription>
</template>

20
src/components/ui/dialog/DialogFooter.vue
View File

@@ -1,20 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: String, required: false },
});
</script>
<template>
<div
:class="
cn(
'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
props.class
)
"
>
<slot />
</div>
</template>

15
src/components/ui/dialog/DialogHeader.vue
View File

@@ -1,15 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: String, required: false },
});
</script>
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
>
<slot />
</div>
</template>

24
src/components/ui/dialog/DialogTitle.vue
View File

@@ -1,24 +0,0 @@
<script setup>
import { DialogTitle } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<DialogTitle
v-bind="props"
:class="
cn(
'text-lg text-foreground font-semibold leading-none tracking-tight',
props.class
)
"
>
<slot />
</DialogTitle>
</template>

14
src/components/ui/dialog/DialogTrigger.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { DialogTrigger } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<DialogTrigger v-bind="props">
<slot />
</DialogTrigger>
</template>

8
src/components/ui/dialog/index.js
View File

@@ -1,8 +0,0 @@
export { default as Dialog } from "./Dialog.vue";
export { default as DialogClose } from "./DialogClose.vue";
export { default as DialogTrigger } from "./DialogTrigger.vue";
export { default as DialogHeader } from "./DialogHeader.vue";
export { default as DialogTitle } from "./DialogTitle.vue";
export { default as DialogDescription } from "./DialogDescription.vue";
export { default as DialogContent } from "./DialogContent.vue";
export { default as DialogFooter } from "./DialogFooter.vue";

19
src/components/ui/dropdown-menu/DropdownMenu.vue
View File

@@ -1,19 +0,0 @@
<script setup>
import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
dir: { type: String, required: false },
modal: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuRoot v-bind="forwarded">
<slot />
</DropdownMenuRoot>
</template>

38
src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View File

@@ -1,38 +0,0 @@
<script setup>
import {
DropdownMenuCheckboxItem,
DropdownMenuItemIndicator,
useEmitAsProps,
} from "radix-vue";
import { CheckIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
checked: { type: [Boolean, String], required: false },
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits(["select", "update:checked"]);
</script>
<template>
<DropdownMenuCheckboxItem
v-bind="{ ...props, ...useEmitAsProps(emits) }"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<CheckIcon class="w-4 h-4" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuCheckboxItem>
</template>

56
src/components/ui/dropdown-menu/DropdownMenuContent.vue
View File

@@ -1,56 +0,0 @@
<script setup>
import {
DropdownMenuContent,
DropdownMenuPortal,
useForwardPropsEmits,
} from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
loop: { type: Boolean, required: false },
side: { type: null, required: false },
sideOffset: { type: Number, required: false, default: 4 },
align: { type: null, required: false },
alignOffset: { type: Number, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
updatePositionStrategy: { type: String, required: false },
prioritizePosition: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
"entryFocus",
"openAutoFocus",
"closeAutoFocus",
]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuPortal>
<DropdownMenuContent
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
),
]"
v-bind="forwarded"
>
<slot />
</DropdownMenuContent>
</DropdownMenuPortal>
</template>

14
src/components/ui/dropdown-menu/DropdownMenuGroup.vue
View File

@@ -1,14 +0,0 @@
<script setup>
import { DropdownMenuGroup } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<DropdownMenuGroup v-bind="props">
<slot />
</DropdownMenuGroup>
</template>

28
src/components/ui/dropdown-menu/DropdownMenuItem.vue
View File

@@ -1,28 +0,0 @@
<script setup>
import { DropdownMenuItem } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
inset: { type: Boolean, required: false },
class: { type: String, required: false },
});
</script>
<template>
<DropdownMenuItem
v-bind="props"
:class="[
cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class
),
]"
>
<slot />
</DropdownMenuItem>
</template>

22
src/components/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@@ -1,22 +0,0 @@
<script setup>
import { DropdownMenuLabel } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
inset: { type: Boolean, required: false },
class: { type: String, required: false },
});
</script>
<template>
<DropdownMenuLabel
v-bind="props"
:class="
cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)
"
>
<slot />
</DropdownMenuLabel>
</template>

20
src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
View File

@@ -1,20 +0,0 @@
<script setup>
import { DropdownMenuRadioGroup } from "radix-vue";
const props = defineProps({
modelValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits(["update:modelValue"]);
</script>
<template>
<DropdownMenuRadioGroup
v-bind="props"
@update:model-value="emits('update:modelValue', $event)"
>
<slot />
</DropdownMenuRadioGroup>
</template>

39
src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
View File

@@ -1,39 +0,0 @@
<script setup>
import {
DropdownMenuItemIndicator,
DropdownMenuRadioItem,
useEmitAsProps,
} from "radix-vue";
import { DotFilledIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
value: { type: String, required: true },
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
const emits = defineEmits(["select"]);
</script>
<template>
<DropdownMenuRadioItem
v-bind="{ ...props, ...useEmitAsProps(emits) }"
:class="
cn(
'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
props.class
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<DotFilledIcon class="h-4 w-4 fill-current" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuRadioItem>
</template>

12
src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
View File

@@ -1,12 +0,0 @@
<script setup>
import { DropdownMenuSeparator } from "radix-vue";
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
</template>

13
src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
View File

@@ -1,13 +0,0 @@
<script setup>
import { cn } from "@/lib/utils";
</script>
<template>
<span
:class="
cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')
"
>
<slot />
</span>
</template>

17
src/components/ui/dropdown-menu/DropdownMenuSub.vue
View File

@@ -1,17 +0,0 @@
<script setup>
import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
});
const emits = defineEmits(["update:open"]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuSub v-bind="forwarded">
<slot />
</DropdownMenuSub>
</template>

52
src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@@ -1,52 +0,0 @@
<script setup>
import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";
import { cn } from "@/lib/utils";
const props = defineProps({
forceMount: { type: Boolean, required: false },
loop: { type: Boolean, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
disableOutsideScroll: { type: Boolean, required: false },
trapFocus: { type: Boolean, required: false },
side: { type: null, required: false },
sideOffset: { type: Number, required: false },
align: { type: null, required: false },
alignOffset: { type: Number, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
updatePositionStrategy: { type: String, required: false },
prioritizePosition: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const emits = defineEmits([
"escapeKeyDown",
"pointerDownOutside",
"focusOutside",
"interactOutside",
"dismiss",
"entryFocus",
"openAutoFocus",
"closeAutoFocus",
]);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuSubContent
v-bind="forwarded"
:class="
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
$attrs.class ?? ''
)
"
>
<slot />
</DropdownMenuSubContent>
</template>

28
src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@@ -1,28 +0,0 @@
<script setup>
import { DropdownMenuSubTrigger } from "radix-vue";
import { ChevronRightIcon } from "@radix-icons/vue";
import { cn } from "@/lib/utils";
const props = defineProps({
disabled: { type: Boolean, required: false },
textValue: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: String, required: false },
});
</script>
<template>
<DropdownMenuSubTrigger
v-bind="props"
:class="[
cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
props.class
),
]"
>
<slot />
<ChevronRightIcon class="ml-auto h-4 w-4" />
</DropdownMenuSubTrigger>
</template>

15
src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
View File

@@ -1,15 +0,0 @@
<script setup>
import { DropdownMenuTrigger } from "radix-vue";
const props = defineProps({
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
</script>
<template>
<DropdownMenuTrigger class="outline-none" v-bind="props">
<slot />
</DropdownMenuTrigger>
</template>

16
src/components/ui/dropdown-menu/index.js
View File

@@ -1,16 +0,0 @@
export { DropdownMenuPortal } from "radix-vue";
export { default as DropdownMenu } from "./DropdownMenu.vue";
export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";

18
src/components/ui/form/FormControl.vue
View File

@@ -1,18 +0,0 @@
<script setup>
import { Slot } from "radix-vue";
import { useFormField } from "./useFormField";
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
</script>
<template>
<Slot
:id="formItemId"
:aria-describedby="
!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
"
:aria-invalid="!!error"
>
<slot />
</Slot>
</template>

15
src/components/ui/form/FormDescription.vue
View File

@@ -1,15 +0,0 @@
<script setup>
import { useFormField } from "./useFormField";
import { cn } from "@/lib/utils";
const { formDescriptionId } = useFormField();
</script>
<template>
<p
:id="formDescriptionId"
:class="cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')"
>
<slot />
</p>
</template>

18
src/components/ui/form/FormItem.vue
View File

@@ -1,18 +0,0 @@
<script>
export const FORM_ITEM_INJECTION_KEY = Symbol();
</script>
<script setup>
import { provide } from "vue";
import { useId } from "radix-vue";
import { cn } from "@/lib/utils";
const id = useId();
provide(FORM_ITEM_INJECTION_KEY, id);
</script>
<template>
<div :class="cn('space-y-2', $attrs.class ?? '')">
<slot />
</div>
</template>

28
src/components/ui/form/FormLabel.vue
View File

@@ -1,28 +0,0 @@
<script setup>
import { Label } from "radix-vue";
import { useFormField } from "./useFormField";
import { cn } from "@/lib/utils";
const props = defineProps({
for: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
});
const { error, formItemId } = useFormField();
</script>
<template>
<Label
:class="
cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
error && 'text-destructive',
$attrs.class ?? ''
)
"
:for="formItemId"
>
<slot />
</Label>
</template>

16
src/components/ui/form/FormMessage.vue
View File

@@ -1,16 +0,0 @@
<script setup>
import { ErrorMessage } from "vee-validate";
import { toValue } from "vue";
import { useFormField } from "./useFormField";
const { name, formMessageId } = useFormField();
</script>
<template>
<ErrorMessage
:id="formMessageId"
as="p"
:name="toValue(name)"
class="text-[0.8rem] font-medium text-destructive"
/>
</template>

Some files were not shown because too many files have changed in this diff Show More