Merge branch 'electron-vite' into dev
Console.logs are back, I'll do some debugging anyways
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
|
||||||
20
.eslintrc.cjs
Normal file
20
.eslintrc.cjs
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
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',
|
||||||
|
'plugin:tailwindcss/recommended'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'vue/require-default-prop': 'off',
|
||||||
|
'vue/multi-word-component-names': 'off',
|
||||||
|
'tailwindcss/no-custom-classname': 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
37
.gitignore
vendored
37
.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
|
node_modules
|
||||||
.DS_Store
|
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
out
|
||||||
coverage
|
.DS_Store
|
||||||
*.local
|
*.log*
|
||||||
|
|
||||||
/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
|
|
||||||
|
|||||||
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
|
||||||
8
.vscode/extensions.json
vendored
8
.vscode/extensions.json
vendored
@@ -1,3 +1,9 @@
|
|||||||
{
|
{
|
||||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
"recommendations": [
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"Vue.volar",
|
||||||
|
"kamikillerto.vscode-colorize",
|
||||||
|
"formulahendry.auto-close-tag",
|
||||||
|
"formulahendry.auto-rename-tag"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
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
|
## Running the code
|
||||||
|
|
||||||
- use VSCode (or WebStorm) with the appropriate Vue plugins (Vetur, i18n Ally, ESLint, Prettier, etc.)
|
- use VSCode (or WebStorm) with the appropriate Vue plugins (Vetur, i18n Ally, ESLint, Prettier, etc.)
|
||||||
- run `npm i` to install dependencies
|
- run `pnpm i` to install dependencies
|
||||||
- run `npm run dev` to start the json-server and electron app
|
- run `pnpm dev` to start the json-server and electron app
|
||||||
|
|
||||||
## Connecting your Nano
|
## 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.
|
Before Width: | Height: | Size: 200 KiB After Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
@@ -1,16 +1,16 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://shadcn-vue.com/schema.json",
|
"$schema": "https://shadcn-vue.com/schema.json",
|
||||||
"style": "new-york",
|
"style": "new-york",
|
||||||
"typescript": false,
|
"typescript": true,
|
||||||
"tailwind": {
|
"tailwind": {
|
||||||
"config": "tailwind.config.js",
|
"config": "tailwind.config.js",
|
||||||
"css": "src/assets/index.css",
|
"css": "src/renderer/src/assets/main.css",
|
||||||
"baseColor": "zinc",
|
"baseColor": "zinc",
|
||||||
"cssVariables": true
|
"cssVariables": true
|
||||||
},
|
},
|
||||||
"framework": "vite",
|
"framework": "vite",
|
||||||
"aliases": {
|
"aliases": {
|
||||||
"components": "@/components",
|
"components": "src/renderer/src/components",
|
||||||
"utils": "@/lib/utils"
|
"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>
|
|
||||||
19815
package-lock.json
generated
19815
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
159
package.json
159
package.json
@@ -1,133 +1,68 @@
|
|||||||
{
|
{
|
||||||
"name": "zeroone",
|
"name": "zeroone",
|
||||||
"version": "0.1.1",
|
"version": "1.0.0",
|
||||||
"description": "Haptic configuration tool",
|
"description": "Configuration Suite for Binaris Devices",
|
||||||
"private": true,
|
"main": "./out/main/index.js",
|
||||||
"main": ".vite/build/main.js",
|
"author": "katbinaris",
|
||||||
|
"homepage": "https://electron-vite.org",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron-forge start",
|
"preinstall": "npx only-allow pnpm",
|
||||||
"package": "electron-forge package",
|
"format": "prettier --write .",
|
||||||
"make": "electron-forge make",
|
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
|
||||||
"publish": "electron-forge publish",
|
"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
|
||||||
"lint": "eslint . --ext .js, .vue",
|
"typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
|
||||||
"dev": "concurrently --kill-others \"json-server src/data/nanoConfig.json --port=3001\" \"electron-forge start\" "
|
"typecheck": "npm run typecheck:node && npm run typecheck:web",
|
||||||
|
"start": "electron-vite preview",
|
||||||
|
"dev": "electron-vite dev",
|
||||||
|
"build": "npm run typecheck && electron-vite build",
|
||||||
|
"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": {
|
"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-icons/vue": "^1.0.0",
|
||||||
"@radix-ui/react-icons": "^1.3.0",
|
"@vueuse/core": "^10.9.0",
|
||||||
"@radix-ui/react-slot": "^1.0.2",
|
"ajv": "^8.12.0",
|
||||||
"@vee-validate/zod": "^4.12.4",
|
|
||||||
"@vueuse/core": "^10.7.1",
|
|
||||||
"ajv": "^6.12.6",
|
|
||||||
"axios": "^1.6.5",
|
|
||||||
"class-variance-authority": "^0.7.0",
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "^2.1.0",
|
"clsx": "^2.1.0",
|
||||||
"color": "^4.2.3",
|
"color": "^4.2.3",
|
||||||
"concurrently": "^8.2.2",
|
"electron-updater": "^6.1.7",
|
||||||
"electron-squirrel-startup": "^1.0.0",
|
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
"lucide-vue-next": "^0.309.0",
|
"lucide-vue-next": "^0.344.0",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"radix-vue": "^1.3.0",
|
"radix-vue": "^1.4.9",
|
||||||
"serialport": "^12.0.0",
|
"serialport": "^12.0.0",
|
||||||
"tailwind-merge": "^2.2.0",
|
"tailwind-merge": "^2.2.1",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"vee-validate": "^4.12.4",
|
"vue-i18n": "^9.10.1",
|
||||||
"vue": "^3.4.15",
|
"vuedraggable": "^4.1.0"
|
||||||
"vue-i18n": "^9.9.0",
|
|
||||||
"vuedraggable": "^4.1.0",
|
|
||||||
"zod": "^3.22.4"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.9",
|
"@electron-toolkit/eslint-config": "^1.0.2",
|
||||||
"@babel/eslint-parser": "^7.23.10",
|
"@electron-toolkit/eslint-config-ts": "^1.0.1",
|
||||||
"@electron-forge/cli": "^7.2.0",
|
"@electron-toolkit/tsconfig": "^1.0.1",
|
||||||
"@electron-forge/maker-deb": "^7.2.0",
|
"@rushstack/eslint-patch": "^1.7.1",
|
||||||
"@electron-forge/maker-rpm": "^7.2.0",
|
"@types/node": "^18.19.21",
|
||||||
"@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",
|
|
||||||
"@vitejs/plugin-vue": "^5.0.3",
|
"@vitejs/plugin-vue": "^5.0.3",
|
||||||
|
"@vue/eslint-config-prettier": "^9.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^12.0.0",
|
||||||
"autoprefixer": "^10.4.17",
|
"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": "^8.56.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-plugin-tailwindcss": "^3.14.3",
|
||||||
"eslint-plugin-vue": "^9.20.1",
|
"eslint-plugin-vue": "^9.20.1",
|
||||||
"json-server": "^1.0.0-alpha.21",
|
"postcss": "^8.4.35",
|
||||||
"postcss": "^8.4.33",
|
"prettier": "^3.2.4",
|
||||||
"postcss-loader": "^8.0.0",
|
|
||||||
"prettier": "3.2.4",
|
|
||||||
"tailwindcss": "^3.4.1",
|
"tailwindcss": "^3.4.1",
|
||||||
"vite-plugin-eslint": "^1.8.1"
|
"typescript": "^5.3.3",
|
||||||
},
|
"vite": "^5.0.12",
|
||||||
"eslintConfig": {
|
"vue": "^3.4.15",
|
||||||
"root": true,
|
"vue-tsc": "^1.8.27"
|
||||||
"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"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
|
|||||||
4454
pnpm-lock.yaml
generated
Normal file
4454
pnpm-lock.yaml
generated
Normal file
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: 6.4 KiB |
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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,154 +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 {
|
|
||||||
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,60 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Collapsible v-model:open="collapse" :default-open="true">
|
|
||||||
<div class="w-full bg-zinc-900 h-12 flex">
|
|
||||||
<div
|
|
||||||
class="flex-1 flex items-center px-4"
|
|
||||||
:class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
|
|
||||||
@click="toggle = !toggle">
|
|
||||||
<component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 mr-2" />
|
|
||||||
<h2 class="text-sm py-4">{{ title }}<slot name="title"/></h2>
|
|
||||||
<Switch
|
|
||||||
v-if="showToggle" :checked="toggle"
|
|
||||||
class="ml-auto" @click.stop="toggle=!toggle" />
|
|
||||||
</div>
|
|
||||||
<CollapsibleTrigger v-if="foldable" class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
|
|
||||||
<ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
</div>
|
|
||||||
<CollapsibleContent>
|
|
||||||
<slot />
|
|
||||||
</CollapsibleContent>
|
|
||||||
</Collapsible>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ChevronLeft } from 'lucide-vue-next'
|
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { Switch } from '@/components/ui/switch'
|
|
||||||
|
|
||||||
const collapse = ref(true)
|
|
||||||
|
|
||||||
const toggle = defineModel({
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
})
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: 'MISSING_TITLE',
|
|
||||||
},
|
|
||||||
iconComponent: {
|
|
||||||
type: [String, Object, Function],
|
|
||||||
default: undefined,
|
|
||||||
},
|
|
||||||
showToggle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
foldable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
[data-state=open] > .chevrot {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flex flex-col px-8 my-4">
|
|
||||||
<span class="text-sm text-muted-foreground font-mono">{{ label }}</span>
|
|
||||||
<Slider
|
|
||||||
ref="steppedSlider" v-model="sliderModelValue" :max="max" :step="1"
|
|
||||||
class="pt-4" />
|
|
||||||
<div class="flex justify-between py-2">
|
|
||||||
<button
|
|
||||||
v-for="(position, index) in positions" :key="position"
|
|
||||||
class="min-w-0 text-nowrap group"
|
|
||||||
:class="{
|
|
||||||
'slider-start mr-4': index===0,
|
|
||||||
'slider-center': index > 0 && index < positions.length-1,
|
|
||||||
'slider-end ml-4': index === positions.length-1}"
|
|
||||||
@click="value = position.value">
|
|
||||||
<span
|
|
||||||
v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
|
|
||||||
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
|
|
||||||
<span
|
|
||||||
v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
|
|
||||||
:class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
|
|
||||||
<span
|
|
||||||
v-if="!position.label || index === positions.length-1"
|
|
||||||
class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
|
|
||||||
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Slider } from '@/components/ui/slider'
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
const value = defineModel({
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
})
|
|
||||||
|
|
||||||
const sliderModelValue = computed({
|
|
||||||
get: () => [value.value],
|
|
||||||
set: (val) => {
|
|
||||||
value.value = val[0]
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
max: {
|
|
||||||
type: Number,
|
|
||||||
default: 4,
|
|
||||||
},
|
|
||||||
namedPositions: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [
|
|
||||||
{
|
|
||||||
label: 'Min',
|
|
||||||
value: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Max',
|
|
||||||
value: 4,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
autoMarkers: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const positions = computed(() => {
|
|
||||||
if (props.autoMarkers) {
|
|
||||||
const filled = []
|
|
||||||
for (let i = 0; i <= props.max; i++) {
|
|
||||||
const position = props.namedPositions.find((p) => p.value === i) || { value: i }
|
|
||||||
filled.push(position)
|
|
||||||
}
|
|
||||||
return filled
|
|
||||||
}
|
|
||||||
return props.namedPositions
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.slider-start {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-end {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-start,
|
|
||||||
.slider-end {
|
|
||||||
flex: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-center {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button
|
|
||||||
class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all border"
|
|
||||||
:class="{'text-black bg-zinc-300 hover:bg-zinc-200 border-zinc-100': selected,
|
|
||||||
'hover:bg-zinc-800 text-muted-foreground border-transparent' : !selected}"
|
|
||||||
@click="$emit('select'); $refs.title?.scramble()">
|
|
||||||
<slot v-if="$slots['replace']" name="replace" />
|
|
||||||
<template v-else>
|
|
||||||
<img
|
|
||||||
v-if="icon"
|
|
||||||
draggable="false"
|
|
||||||
:src="icon" :alt="title"
|
|
||||||
class="h-16"
|
|
||||||
:class="{'invert': selected}">
|
|
||||||
<ScrambleText ref="title" :resize="false" class="text-xs text-wrap line-clamp-2 text-ellipsis overflow-hidden" :text="title" />
|
|
||||||
</template>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import ScrambleText from '@/components/common/ScrambleText.vue'
|
|
||||||
|
|
||||||
defineEmits(['select'])
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: [String, Object, Function],
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
const model = defineModel({ type: Number, default: 60 })
|
|
||||||
|
|
||||||
const bar = ref(null)
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
width: { type: Number, default: 160 },
|
|
||||||
count: { type: Number, default: 40 },
|
|
||||||
gapWidth: { type: Number, default: 2 },
|
|
||||||
})
|
|
||||||
|
|
||||||
const rectWidth = computed(() => {
|
|
||||||
return (props.width - ((props.count + 1) * props.gapWidth)) / props.count
|
|
||||||
})
|
|
||||||
const currentPosition = computed(() => {
|
|
||||||
return Math.round((model.value / 100) * (props.count - 1))
|
|
||||||
})
|
|
||||||
|
|
||||||
function onMouseDown() {
|
|
||||||
window.addEventListener('mousemove', onMouseMove)
|
|
||||||
window.addEventListener('mouseup', onMouseUp)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseMove(e) {
|
|
||||||
const rect = bar.value.getBoundingClientRect()
|
|
||||||
model.value = Math.max(0, Math.min(Math.round((e.clientX - rect.left - 9) / (props.width - 6) * 100), 100))
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseUp() {
|
|
||||||
window.removeEventListener('mousemove', onMouseMove)
|
|
||||||
window.removeEventListener('mouseup', onMouseUp)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<span @mousedown="onMouseDown">
|
|
||||||
<svg ref="bar" :width="width+12" height="32">
|
|
||||||
<g>
|
|
||||||
<rect
|
|
||||||
v-for="(_, i) in count"
|
|
||||||
:key="`key${i}`"
|
|
||||||
:style="`fill:${i < currentPosition ? '#fff' : '#4a4a4a'}`"
|
|
||||||
:width="rectWidth"
|
|
||||||
:height="i===0 || i===count-1 ? 8 : 5"
|
|
||||||
:x="6+gapWidth+i*(rectWidth+gapWidth)"
|
|
||||||
y="10" />
|
|
||||||
<g :transform="`translate(${6+(rectWidth+gapWidth)*currentPosition},0)`">
|
|
||||||
<rect
|
|
||||||
style="fill:#000"
|
|
||||||
:width="6"
|
|
||||||
height="13"
|
|
||||||
x="0"
|
|
||||||
y="10"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
style="fill:#c66936"
|
|
||||||
:width="2"
|
|
||||||
height="11"
|
|
||||||
:x="2"
|
|
||||||
y="10"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
style="fill:#c66936"
|
|
||||||
:width="2"
|
|
||||||
:height="2"
|
|
||||||
x="0"
|
|
||||||
y="21"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
style="fill:#c66936"
|
|
||||||
:width="2"
|
|
||||||
:height="2"
|
|
||||||
:x="4"
|
|
||||||
y="21"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button
|
|
||||||
class="app-titlebar-button text-muted-foreground flex items-center rounded-sm px-3 py-1 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
@@ -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,166 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="h-12 flex overflow-hidden rounded-lg m-2 transition-all"
|
|
||||||
:class="{'border border-zinc-100 bg-zinc-300': selected,
|
|
||||||
'border border-transparent hover:border-zinc-900': !selected,
|
|
||||||
'group': showHoverButtons}">
|
|
||||||
<form
|
|
||||||
v-if="nameEditable && editing"
|
|
||||||
class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
|
|
||||||
:class="{'bg-zinc-300' : selected}"
|
|
||||||
@submit.prevent="store.renameProfile(profile.id, nameInput); editing=false">
|
|
||||||
<input
|
|
||||||
ref="profileNameInput" v-model="nameInput"
|
|
||||||
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
|
|
||||||
class="flex-1 pl-8 h-full rounded-lg text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-all"
|
|
||||||
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
|
||||||
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
|
|
||||||
@blur="onNameInputBlur">
|
|
||||||
<button
|
|
||||||
ref="nameSubmitButton"
|
|
||||||
type="submit"
|
|
||||||
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
|
||||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
|
|
||||||
class="flex h-full rounded-lg aspect-square justify-center items-center flex-shrink-0 transition-all">
|
|
||||||
<Check class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<!-- TODO: Make hover buttons use Transition(Group) and v-if directive -->
|
|
||||||
<button
|
|
||||||
v-else
|
|
||||||
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
|
||||||
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
|
|
||||||
class="flex-1 h-12 rounded-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
|
|
||||||
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
|
|
||||||
<span class="ml-2 w-4 mr-2 cursor-grab" :class="{'ml-2': !draggable}">
|
|
||||||
<GripHorizontal
|
|
||||||
v-if="draggable"
|
|
||||||
:class="{'text-zinc-600': selected,
|
|
||||||
'text-muted-foreground': !selected}"
|
|
||||||
class="mb-0.5 h-4 w-4 opacity-0 group-hover:opacity-100 inline-block transition-all" />
|
|
||||||
</span>
|
|
||||||
<ScrambleText
|
|
||||||
ref="profileTitle"
|
|
||||||
class="transition-colors"
|
|
||||||
:class="{'text-black': selected, 'text-muted-foreground': !selected}"
|
|
||||||
:text="profile.name" />
|
|
||||||
<span
|
|
||||||
v-if="showId"
|
|
||||||
class="text-xs text-zinc-600 group-hover:hidden"> UID:{{ profile.id }}</span>
|
|
||||||
</button>
|
|
||||||
<template v-if="!confirmDelete">
|
|
||||||
<button
|
|
||||||
v-if="nameEditable"
|
|
||||||
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
|
||||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
|
|
||||||
'group-hover:w-12' : !editing}"
|
|
||||||
class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
|
|
||||||
@click="startEditing">
|
|
||||||
<PenLine class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
|
||||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
|
|
||||||
'group-hover:w-12' : !editing,
|
|
||||||
'rounded-l-lg': !nameEditable}"
|
|
||||||
class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
|
|
||||||
@click="$emit('duplicate')">
|
|
||||||
<Copy class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
:class="{'bg-orange-700 hover:bg-orange-600 text-black' : selected,
|
|
||||||
'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
|
|
||||||
'group-hover:w-12' : !editing}"
|
|
||||||
class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
|
|
||||||
@click="confirmDelete=true">
|
|
||||||
<Trash2 class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<button
|
|
||||||
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
|
|
||||||
'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
|
|
||||||
'group-hover:w-12' : !editing}"
|
|
||||||
class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
|
|
||||||
@click="$emit('delete', profile.id)">
|
|
||||||
<Check class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
|
||||||
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
|
|
||||||
'group-hover:w-12' : !editing}"
|
|
||||||
class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
|
|
||||||
@click="confirmDelete=false">
|
|
||||||
<X class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Check, Copy, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
|
|
||||||
import ScrambleText from '@/components/common/ScrambleText.vue'
|
|
||||||
import { nextTick, ref } from 'vue'
|
|
||||||
import { useStore } from '@/store'
|
|
||||||
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
defineEmits(['select', 'duplicate', 'delete'])
|
|
||||||
|
|
||||||
const nameSubmitButton = ref(null)
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
profile: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({
|
|
||||||
id: '1234',
|
|
||||||
name: 'Profile Name',
|
|
||||||
}),
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
showId: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
nameEditable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
initEditing: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
draggable: {
|
|
||||||
// Not implemented yet
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showHoverButtons: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
async function startEditing() {
|
|
||||||
editing.value = true
|
|
||||||
await nextTick()
|
|
||||||
profileNameInput.value.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
function onNameInputBlur(e) {
|
|
||||||
if (e.relatedTarget === nameSubmitButton.value) return
|
|
||||||
editing.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const profileNameInput = ref(null)
|
|
||||||
|
|
||||||
const nameInput = ref(props.profile.name)
|
|
||||||
|
|
||||||
const editing = ref(props.initEditing)
|
|
||||||
|
|
||||||
const confirmDelete = ref(false)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
|
|
||||||
<div class="px-8 my-4">
|
|
||||||
<span class="text-sm text-muted-foreground font-mono">Title</span>
|
|
||||||
<Input class="font-pixelsm mt-2 uppercase" default-value="Title text" />
|
|
||||||
</div>
|
|
||||||
<div class="px-8 my-4">
|
|
||||||
<span class="text-sm text-muted-foreground font-mono">Description</span>
|
|
||||||
<Textarea class="font-pixelsm mt-2 uppercase" default-value="Descriptive description describing the profile" />
|
|
||||||
</div>
|
|
||||||
</ConfigSection>
|
|
||||||
<ConfigSection
|
|
||||||
v-if="false" :title="$t('config_options.profile_settings.connection_type.title')"
|
|
||||||
:icon-component="Cable">
|
|
||||||
<!-- TODO: Remove later if not needed -->
|
|
||||||
<TabSelect v-model="connectionType" :options="connectionTypeOptions" />
|
|
||||||
</ConfigSection>
|
|
||||||
|
|
||||||
<ConfigSection
|
|
||||||
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
|
|
||||||
:icon-component="Replace" :show-toggle="true">
|
|
||||||
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
|
|
||||||
{{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
|
|
||||||
<Separator class="mt-4" />
|
|
||||||
<span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
|
|
||||||
}}:<br>
|
|
||||||
<Badge class="bg-orange-500">SHIFT</Badge> + <Badge
|
|
||||||
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
|
|
||||||
<Separator />
|
|
||||||
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
|
|
||||||
</p>
|
|
||||||
</ConfigSection>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { Cable, Replace, Type } from 'lucide-vue-next'
|
|
||||||
import ConfigSection from '@/components/common/ConfigSection.vue'
|
|
||||||
import { Separator } from '@/components/ui/separator'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import UsbIcon from '@/assets/logos/logoUsb.svg'
|
|
||||||
import MidiIcon from '@/assets/logos/logoMidi.svg'
|
|
||||||
import { Badge } from '@/components/ui/badge'
|
|
||||||
import WIP from '@/components/WIP.vue'
|
|
||||||
import TabSelect from '@/components/common/TabSelect.vue'
|
|
||||||
import { Input } from '@/components/ui/input'
|
|
||||||
import { Textarea } from '@/components/ui/textarea'
|
|
||||||
|
|
||||||
const connectionType = ref('usb') // TODO: replace with actual value
|
|
||||||
|
|
||||||
const connectionTypeOptions = {
|
|
||||||
usb: {
|
|
||||||
icon: UsbIcon,
|
|
||||||
titleKey: 'config_options.profile_settings.connection_type.usb',
|
|
||||||
},
|
|
||||||
midi: {
|
|
||||||
icon: MidiIcon,
|
|
||||||
titleKey: 'config_options.profile_settings.connection_type.midi',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
</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>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user