UPD: Migrate to electron-vite
Delete your node_modules. Use pnpm from now on.
This commit is contained in:
Robert Kossessa
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
4
.eslintignore
Normal file
4
.eslintignore
Normal file
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
out
|
||||
.gitignore
|
||||
17
.eslintrc.cjs
Normal file
17
.eslintrc.cjs
Normal file
@@ -0,0 +1,17 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:vue/vue3-recommended',
|
||||
'@electron-toolkit',
|
||||
'@electron-toolkit/eslint-config-ts/eslint-recommended',
|
||||
'@vue/eslint-config-typescript/recommended',
|
||||
'@vue/eslint-config-prettier'
|
||||
],
|
||||
rules: {
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
}
|
||||
35
.gitignore
vendored
35
.gitignore
vendored
@@ -1,36 +1,5 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
#Electron-builder output
|
||||
/dist_electron
|
||||
|
||||
.vite
|
||||
out
|
||||
.DS_Store
|
||||
*.log*
|
||||
|
||||
3
.npmrc
Normal file
3
.npmrc
Normal file
@@ -0,0 +1,3 @@
|
||||
electron_mirror=https://npmmirror.com/mirrors/electron/
|
||||
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
|
||||
shamefully-hoist=true
|
||||
6
.prettierignore
Normal file
6
.prettierignore
Normal file
@@ -0,0 +1,6 @@
|
||||
out
|
||||
dist
|
||||
pnpm-lock.yaml
|
||||
LICENSE.md
|
||||
tsconfig.json
|
||||
tsconfig.*.json
|
||||
5
.prettierrc.yaml
Normal file
5
.prettierrc.yaml
Normal file
@@ -0,0 +1,5 @@
|
||||
singleQuote: true
|
||||
semi: false
|
||||
printWidth: 100
|
||||
trailingComma: none
|
||||
endOfLine: auto
|
||||
2
.vscode/extensions.json
vendored
2
.vscode/extensions.json
vendored
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
"recommendations": ["dbaeumer.vscode-eslint"]
|
||||
}
|
||||
|
||||
39
.vscode/launch.json
vendored
Normal file
39
.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug Main Process",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceRoot}",
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
|
||||
"windows": {
|
||||
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
|
||||
},
|
||||
"runtimeArgs": ["--sourcemap"],
|
||||
"env": {
|
||||
"REMOTE_DEBUGGING_PORT": "9222"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Debug Renderer Process",
|
||||
"port": 9222,
|
||||
"request": "attach",
|
||||
"type": "chrome",
|
||||
"webRoot": "${workspaceFolder}/src/renderer",
|
||||
"timeout": 60000,
|
||||
"presentation": {
|
||||
"hidden": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"compounds": [
|
||||
{
|
||||
"name": "Debug All",
|
||||
"configurations": ["Debug Main Process", "Debug Renderer Process"],
|
||||
"presentation": {
|
||||
"order": 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
14
.vscode/settings.json
vendored
Normal file
14
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": "explicit"
|
||||
}
|
||||
}
|
||||
@@ -5,8 +5,8 @@ Haptic configuration tool
|
||||
## Running the code
|
||||
|
||||
- use VSCode (or WebStorm) with the appropriate Vue plugins (Vetur, i18n Ally, ESLint, Prettier, etc.)
|
||||
- run `npm i` to install dependencies
|
||||
- run `npm run dev` to start the json-server and electron app
|
||||
- run `pnpm i` to install dependencies
|
||||
- run `pnpm dev` to start the json-server and electron app
|
||||
|
||||
## Connecting your Nano
|
||||
|
||||
|
||||
12
build/entitlements.mac.plist
Normal file
12
build/entitlements.mac.plist
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.cs.allow-jit</key>
|
||||
<true/>
|
||||
<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
|
||||
<true/>
|
||||
<key>com.apple.security.cs.allow-dyld-environment-variables</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
BIN
build/icon.icns
Normal file
BIN
build/icon.icns
Normal file
Binary file not shown.
BIN
build/icon.ico
Normal file
BIN
build/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
build/icon.png
Normal file
BIN
build/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@@ -1,16 +1,16 @@
|
||||
{
|
||||
"$schema": "https://shadcn-vue.com/schema.json",
|
||||
"style": "new-york",
|
||||
"typescript": false,
|
||||
"typescript": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/assets/index.css",
|
||||
"css": "src/renderer/src/assets/main.css",
|
||||
"baseColor": "zinc",
|
||||
"cssVariables": true
|
||||
},
|
||||
"framework": "vite",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
"components": "src/renderer/src/components",
|
||||
"utils": "src/renderer/src/lib/utils"
|
||||
}
|
||||
}
|
||||
3
dev-app-update.yml
Normal file
3
dev-app-update.yml
Normal file
@@ -0,0 +1,3 @@
|
||||
provider: generic
|
||||
url: https://example.com/auto-updates
|
||||
updaterCacheDirName: zeroone-updater
|
||||
45
electron-builder.yml
Normal file
45
electron-builder.yml
Normal file
@@ -0,0 +1,45 @@
|
||||
appId: com.electron.app
|
||||
productName: zeroone
|
||||
directories:
|
||||
buildResources: build
|
||||
files:
|
||||
- '!**/.vscode/*'
|
||||
- '!src/*'
|
||||
- '!electron.vite.config.{js,ts,mjs,cjs}'
|
||||
- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
|
||||
- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
|
||||
- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
|
||||
asarUnpack:
|
||||
- resources/**
|
||||
win:
|
||||
executableName: zeroone
|
||||
nsis:
|
||||
artifactName: ${name}-${version}-setup.${ext}
|
||||
shortcutName: ${productName}
|
||||
uninstallDisplayName: ${productName}
|
||||
createDesktopShortcut: always
|
||||
mac:
|
||||
entitlementsInherit: build/entitlements.mac.plist
|
||||
extendInfo:
|
||||
- NSCameraUsageDescription: Application requests access to the device's camera.
|
||||
- NSMicrophoneUsageDescription: Application requests access to the device's microphone.
|
||||
- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
|
||||
- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
|
||||
notarize: false
|
||||
dmg:
|
||||
artifactName: ${name}-${version}.${ext}
|
||||
linux:
|
||||
target:
|
||||
- AppImage
|
||||
- snap
|
||||
- deb
|
||||
maintainer: electronjs.org
|
||||
category: Utility
|
||||
appImage:
|
||||
artifactName: ${name}-${version}.${ext}
|
||||
npmRebuild: false
|
||||
publish:
|
||||
provider: generic
|
||||
url: https://example.com/auto-updates
|
||||
electronDownload:
|
||||
mirror: https://npmmirror.com/mirrors/electron/
|
||||
34
electron.vite.config.ts
Normal file
34
electron.vite.config.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
||||
|
||||
import tailwind from 'tailwindcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
|
||||
export default defineConfig({
|
||||
main: {
|
||||
plugins: [externalizeDepsPlugin()]
|
||||
},
|
||||
preload: {
|
||||
plugins: [externalizeDepsPlugin()]
|
||||
},
|
||||
renderer: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@renderer': resolve('src/renderer/src')
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
VueI18nPlugin({
|
||||
jitCompilation: true // Without this, we get CSP errors
|
||||
})
|
||||
],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwind(), autoprefixer()]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,54 +0,0 @@
|
||||
module.exports = {
|
||||
packagerConfig: {
|
||||
icon: 'src/assets/favicon',
|
||||
},
|
||||
rebuildConfig: {},
|
||||
makers: [
|
||||
{
|
||||
name: '@electron-forge/maker-squirrel',
|
||||
config: {},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-zip',
|
||||
platforms: ['darwin'],
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-deb',
|
||||
config: {},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-rpm',
|
||||
config: {},
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
name: '@electron-forge/plugin-vite',
|
||||
config: {
|
||||
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
|
||||
// If you are familiar with Vite configuration, it will look really familiar.
|
||||
build: [
|
||||
{
|
||||
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
|
||||
entry: 'src/main.js',
|
||||
config: 'vite.main.config.mjs',
|
||||
},
|
||||
{
|
||||
entry: 'src/preload.js',
|
||||
config: 'vite.preload.config.mjs',
|
||||
},
|
||||
],
|
||||
renderer: [
|
||||
{
|
||||
name: 'main_window',
|
||||
config: 'vite.renderer.config.mjs',
|
||||
},
|
||||
{
|
||||
name: 'loading_window',
|
||||
config: 'vite.loading.config.mjs',
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
22
index.html
22
index.html
@@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/src/assets/favicon.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ZERO/ONE Configuration Suite</title>
|
||||
<style>
|
||||
html {
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
<link rel="preload" href="/src/assets/fonts/ProtoMono-Regular.ttf" as="font" crossorigin="anonymous" />
|
||||
<link rel="preload" href="/src/assets/fonts/JetBrainsMono%5Bwght%5D.ttf" as="font" crossorigin="anonymous" />
|
||||
<link rel="preload" href="/src/assets/fonts/SG12.ttf" as="font" crossorigin="anonymous" />
|
||||
<link rel="preload" href="/src/assets/fonts/andina.ttf" as="font" crossorigin="anonymous" />
|
||||
</head>
|
||||
<body class="dark bg-background">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
62
loading.html
62
loading.html
@@ -1,62 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="src/assets/favicon.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ZERO/ONE Starting...</title>
|
||||
<link rel="stylesheet" href="src/assets/main.css">
|
||||
<style>
|
||||
body {
|
||||
background: black url(src/assets/images/splashBG.png) center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: #f79c1e;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
width: fit-content;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 10vh;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex h-full flex-col text-center justify-between items-center p-2 px-8 select-none">
|
||||
<div class="title flex flex-col gap-2">
|
||||
<h1 class="text-5xl">ZERO<span class="opacity-70">/</span>ONE</h1>
|
||||
<p class="text-muted-foreground">Configuration Suite v0.1</p>
|
||||
<div class="badge text-xs">PUBLIC BETA</div>
|
||||
<div class="status">
|
||||
<p>Stand by...</p>
|
||||
<p class="text-muted-foreground text-sm">The goblins are turning the cogs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer flex flex-col gap-2 text-muted-foreground">
|
||||
<img class="w-3 self-center" src="/src/assets/icons/binarisEmblem.svg" alt="binaris-logo">
|
||||
<p>Copyright 2024 Binaris Circuitry Ltd.</p>
|
||||
<p>This software is licensed under the Apache License, Version 2.0 (the "License"). Usage of this
|
||||
software is
|
||||
permitted only in compliance with the terms of the License.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
158
package.json
158
package.json
@@ -1,135 +1,69 @@
|
||||
{
|
||||
"name": "zeroone",
|
||||
"version": "0.1.1",
|
||||
"description": "Haptic configuration tool",
|
||||
"private": true,
|
||||
"main": ".vite/build/main.js",
|
||||
"version": "1.0.0",
|
||||
"description": "An Electron application with Vue and TypeScript",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "example.com",
|
||||
"homepage": "https://electron-vite.org",
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"start": "electron-forge start",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make",
|
||||
"publish": "electron-forge publish",
|
||||
"lint": "eslint . --ext .js, .vue",
|
||||
"dev": "concurrently --kill-others \"json-server src/data/nanoConfig.json --port=3001\" \"electron-forge start\" "
|
||||
"format": "prettier --write .",
|
||||
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
|
||||
"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
|
||||
"typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
|
||||
"typecheck": "npm run typecheck:node && npm run typecheck:web",
|
||||
"start": "electron-vite preview",
|
||||
"dev": "electron-vite dev",
|
||||
"build": "npm run typecheck && electron-vite build",
|
||||
"postinstall": "electron-builder install-app-deps",
|
||||
"build:unpack": "npm run build && electron-builder --dir",
|
||||
"build:win": "npm run build && electron-builder --win",
|
||||
"build:mac": "npm run build && electron-builder --mac",
|
||||
"build:linux": "npm run build && electron-builder --linux"
|
||||
},
|
||||
"dependencies": {
|
||||
"@electron-toolkit/preload": "^3.0.0",
|
||||
"@electron-toolkit/utils": "^3.0.0",
|
||||
"@intlify/unplugin-vue-i18n": "^2.0.0",
|
||||
"@radix-icons/vue": "^1.0.0",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@vee-validate/zod": "^4.12.4",
|
||||
"@vueuse/core": "^10.7.1",
|
||||
"ajv": "^6.12.6",
|
||||
"axios": "^1.6.5",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"ajv": "^8.12.0",
|
||||
"axios": "^1.6.7",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.0",
|
||||
"color": "^4.2.3",
|
||||
"concurrently": "^8.2.2",
|
||||
"electron-squirrel-startup": "^1.0.0",
|
||||
"electron-updater": "^6.1.7",
|
||||
"gsap": "^3.12.5",
|
||||
"lucide-vue-next": "^0.309.0",
|
||||
"lucide-vue-next": "^0.344.0",
|
||||
"pinia": "^2.1.7",
|
||||
"radix-vue": "^1.3.0",
|
||||
"radix-vue": "^1.4.9",
|
||||
"serialport": "^12.0.0",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vee-validate": "^4.12.4",
|
||||
"vite": "^5.1.4",
|
||||
"vue": "^3.4.15",
|
||||
"vue-i18n": "^9.9.0",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"zod": "^3.22.4"
|
||||
"vue-i18n": "^9.10.1",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.9",
|
||||
"@babel/eslint-parser": "^7.23.10",
|
||||
"@electron-forge/cli": "^7.2.0",
|
||||
"@electron-forge/maker-deb": "^7.2.0",
|
||||
"@electron-forge/maker-rpm": "^7.2.0",
|
||||
"@electron-forge/maker-squirrel": "^7.2.0",
|
||||
"@electron-forge/maker-zip": "^7.2.0",
|
||||
"@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
|
||||
"@electron-forge/plugin-vite": "^7.2.0",
|
||||
"@electron/rebuild": "^3.6.0",
|
||||
"@intlify/eslint-plugin-vue-i18n": "^2.0.0",
|
||||
"@types/node": "^20.11.0",
|
||||
"@electron-toolkit/eslint-config": "^1.0.2",
|
||||
"@electron-toolkit/eslint-config-ts": "^1.0.1",
|
||||
"@electron-toolkit/tsconfig": "^1.0.1",
|
||||
"@rushstack/eslint-patch": "^1.7.1",
|
||||
"@types/node": "^18.19.21",
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"electron": "28.2.0",
|
||||
"electron": "^28.2.0",
|
||||
"electron-builder": "^24.9.1",
|
||||
"electron-vite": "^2.0.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-vue": "^9.20.1",
|
||||
"json-server": "^1.0.0-alpha.21",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-loader": "^8.0.0",
|
||||
"prettier": "3.2.4",
|
||||
"postcss": "^8.4.35",
|
||||
"prettier": "^3.2.4",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"vite-plugin-eslint": "^1.8.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser",
|
||||
"ecmaVersion": 2020,
|
||||
"requireConfigFile": false
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/vue3-recommended",
|
||||
"plugin:@intlify/vue-i18n/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"settings": {
|
||||
"vue-i18n": {
|
||||
"localeDir": "@/lang/*.{json,json5,yaml,yml}",
|
||||
"messageSyntaxVersion": "^9.0.0"
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.12",
|
||||
"vue": "^3.4.15",
|
||||
"vue-tsc": "^1.8.27"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"indent": "off",
|
||||
"camelcase": "off",
|
||||
"space-before-function-paren": "off",
|
||||
"object-curly-spacing": "off",
|
||||
"comma-dangle": "off",
|
||||
"vue/html-self-closing": "warn",
|
||||
"@intlify/vue-i18n/no-v-html": "off",
|
||||
"@intlify/vue-i18n/no-dynamic-keys": "off",
|
||||
"@intlify/vue-i18n/no-raw-text": [
|
||||
"warn",
|
||||
{
|
||||
"ignorePattern": "^(([\\W\\d]+)|(http.*))|()$",
|
||||
"ignoreNodes": [
|
||||
"code"
|
||||
]
|
||||
}
|
||||
],
|
||||
"@intlify/vue-i18n/no-unused-keys": [
|
||||
"error",
|
||||
{
|
||||
"extensions": [
|
||||
".js",
|
||||
".ts",
|
||||
".vue"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"globals": {
|
||||
"MAIN_WINDOW_VITE_DEV_SERVER_URL": "readonly",
|
||||
"MAIN_WINDOW_VITE_NAME": "readonly",
|
||||
"LOADING_WINDOW_VITE_DEV_SERVER_URL": "readonly",
|
||||
"LOADING_WINDOW_VITE_NAME": "readonly"
|
||||
}
|
||||
},
|
||||
"prettier": {
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 120,
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
},
|
||||
"web-types": "./web-types.json"
|
||||
}
|
||||
|
||||
4988
pnpm-lock.yaml
generated
4988
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
BIN
resources/icon.png
Normal file
BIN
resources/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
85
src/App.vue
85
src/App.vue
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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()
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<WIP />
|
||||
<DeviceLEDRing />
|
||||
</template>
|
||||
<script setup>
|
||||
import WIP from '@/components/WIP.vue'
|
||||
import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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",
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -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>
|
||||
@@ -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",
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -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>
|
||||
@@ -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",
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
@@ -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 +0,0 @@
|
||||
export { default as Checkbox } from "./Checkbox.vue";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user