Initial Code commit
This commit is contained in:
parent
2d0b3ca4a5
commit
19b04f1af4
12
.editorconfig
Normal file
12
.editorconfig
Normal file
@ -0,0 +1,12 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = false
|
||||
insert_final_newline = false
|
||||
31
.gitignore
vendored
31
.gitignore
vendored
@ -1,11 +1,24 @@
|
||||
# ---> Vue
|
||||
# gitignore template for Vue.js projects
|
||||
#
|
||||
# Recommended template: Node.gitignore
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
docs/_book
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
test/
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
27
README.md
27
README.md
@ -1,3 +1,28 @@
|
||||
# JANE
|
||||
|
||||
Just another note editor written in VUE.js for learning purposes.
|
||||
Just another note editor written in VUE.js for learning purposes.
|
||||
|
||||
## Description
|
||||
|
||||
This is version 1.0.0 - with the basic setup to creating, deleting and editing new notes.
|
||||
There is no persistent storage a reload deletes all notes.
|
||||
|
||||
## Coming next
|
||||
|
||||
* [ ] runner based release pipeline
|
||||
* [ ] release note generator based on the commits
|
||||
* [ ] better UI
|
||||
* [ ] better Icons
|
||||
* [ ] markdown rendering
|
||||
* [ ] link rendering
|
||||
* [ ] code rendering
|
||||
* [ ] emoji rendering
|
||||
* [ ] persistent storage based on something like local storage of the browser
|
||||
* [ ] persistent storage based on backend api (can be edited by the user)
|
||||
* [ ] PWA Setup so that the "app" can be installed on the users system
|
||||
* [ ] Website to inform the user about and give the user an entry point for JANE
|
||||
|
||||
## Possible Ideas
|
||||
|
||||
* [ ] persistent storage service?
|
||||
* [ ] login service?
|
||||
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/editor-icon.svg" />
|
||||
<!-- Light mode favicon -->
|
||||
<link rel="icon" href="editor-icon-light.svg" type="image/x-icon" media="(prefers-color-scheme: light)">
|
||||
<!-- Dark mode favicon -->
|
||||
<link rel="icon" href="editor-icon-dark.svg" type="image/x-icon" media="(prefers-color-scheme: dark)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JANE - Just another note editor</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1818
package-lock.json
generated
Normal file
1818
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "jane",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"description": "Just another note editor written in VUE.js for learning purposes.",
|
||||
"homepage": "https://projects.nisch.codes/nischcodes/JANE#readme",
|
||||
"author": "nisch.codes <nischcodes@noreply.projects.nisch.codes>",
|
||||
"license": "GPL-3.0",
|
||||
"keywords": [],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://projects.nisch.codes/nischcodes/JANE.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://projects.nisch.codes/nischcodes/JANE/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.0.14",
|
||||
"tailwindcss": "^4.0.14",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"typescript": "~5.7.2",
|
||||
"vite": "^6.2.0",
|
||||
"vue-tsc": "^2.2.4"
|
||||
}
|
||||
}
|
||||
9
public/editor-icon-dark.svg
Normal file
9
public/editor-icon-dark.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 122.88 110.78" style="enable-background:new 0 0 122.88 110.78" xml:space="preserve">
|
||||
<style type="text/css"><![CDATA[
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff;}
|
||||
]]></style>
|
||||
<g>
|
||||
<path class="st0" d="M7.05,0h100.97c1.92,0,3.68,0.8,4.95,2.07l0,0l0.01,0.01l0.01,0.01L113,2.1c1.27,1.28,2.06,3.03,2.06,4.95 v35.02c-0.53-0.48-1.13-0.91-1.78-1.28c-1.54-0.87-3.06-1.36-4.58-1.52V25.21l0,0c-0.22,0.04-0.45,0.06-0.67,0.06H7.05 c-0.23,0-0.46-0.02-0.67-0.06v78.51c0,0.19,0.07,0.36,0.19,0.48l0,0l0.01,0.01c0.12,0.12,0.28,0.19,0.48,0.19h52.44 c-0.01,2.74,0.52,4.86,1.58,6.38l-54.02,0c-1.92,0-3.68-0.79-4.96-2.07l-0.01-0.01l-0.01-0.01l-0.01-0.01 C0.79,107.4,0,105.65,0,103.73l0-96.7c0.02-1.94,0.81-3.7,2.08-4.97c0.08-0.08,0.15-0.15,0.23-0.22C3.57,0.7,5.23,0,7.05,0L7.05,0 L7.05,0z M55.11,47.78c-1.48,0-2.68-1.3-2.68-2.91c0-1.61,1.2-2.91,2.68-2.91h40.15c1.25,0,2.3,0.93,2.6,2.19l-3.51,3.64H55.11 L55.11,47.78L55.11,47.78z M55.11,62.5c-1.48,0-2.68-1.3-2.68-2.91s1.2-2.91,2.68-2.91h30.65l-5.62,5.82H55.11L55.11,62.5 L55.11,62.5z M89.25,97.9c-2.05,0.65-4.1,1.29-6.15,1.94c-2.05,0.65-4.1,1.4-6.15,2.05c-4.86,1.51-7.55,2.48-8.1,2.59 c-0.54,0.11-0.21-2.05,0.97-6.8l3.88-14.78l0.32-0.32L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9z M79.64,76.85l27.16-28.13c0.65-0.54,1.3-0.75,2.05-0.32l13.6,13.17c0.54,0.65,0.65,1.4-0.11,2.16L94.86,92.18L79.64,76.85 L79.64,76.85L79.64,76.85L79.64,76.85z M115.06,85.16v18.58c0,1.94-0.79,3.7-2.07,4.97c-1.27,1.27-3.03,2.07-4.97,2.07H79.74 l0.51-0.16l0.5-0.14c0.55-0.17,1.86-0.62,3.16-1.07c0.67-0.23,1.34-0.46,2.74-0.9l5.9-1.86l-0.01-0.02 c1.39-0.44,2.7-1.18,3.83-2.23h11.65c0.18,0,0.35-0.08,0.48-0.21c0.12-0.12,0.21-0.29,0.21-0.48V91.74L115.06,85.16L115.06,85.16z M19.51,92.45c-1.46,0-2.65-1.3-2.65-2.91s1.19-2.91,2.65-2.91h43.62l-1.53,5.82H19.51L19.51,92.45L19.51,92.45z M18.45,79.73 c-1.46,0-2.65-1.3-2.65-2.91c0-1.61,1.19-2.91,2.65-2.91h50.92c-0.56,0.37-1.1,0.81-1.6,1.31l-0.05,0.05 c-1.26,1.18-2.24,2.7-2.77,4.46H18.45L18.45,79.73L18.45,79.73z M16.49,34.55h29.25v29.51H16.49V34.55L16.49,34.55L16.49,34.55z M46.94,9.08c2.53,0,4.57,2.05,4.57,4.57c0,2.52-2.05,4.57-4.57,4.57c-2.52,0-4.57-2.05-4.57-4.57 C42.37,11.13,44.42,9.08,46.94,9.08L46.94,9.08L46.94,9.08z M30.96,9.08c2.53,0,4.57,2.05,4.57,4.57c0,2.52-2.05,4.57-4.57,4.57 c-2.53,0-4.57-2.05-4.57-4.57C26.39,11.13,28.44,9.08,30.96,9.08L30.96,9.08L30.96,9.08z M14.99,9.08c2.53,0,4.57,2.05,4.57,4.57 c0,2.52-2.05,4.57-4.57,4.57c-2.53,0-4.57-2.05-4.57-4.57C10.42,11.13,12.46,9.08,14.99,9.08L14.99,9.08L14.99,9.08z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
9
public/editor-icon-light.svg
Normal file
9
public/editor-icon-light.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 122.88 110.78" style="enable-background:new 0 0 122.88 110.78" xml:space="preserve">
|
||||
<style type="text/css"><![CDATA[
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#000;}
|
||||
]]></style>
|
||||
<g>
|
||||
<path class="st0" d="M7.05,0h100.97c1.92,0,3.68,0.8,4.95,2.07l0,0l0.01,0.01l0.01,0.01L113,2.1c1.27,1.28,2.06,3.03,2.06,4.95 v35.02c-0.53-0.48-1.13-0.91-1.78-1.28c-1.54-0.87-3.06-1.36-4.58-1.52V25.21l0,0c-0.22,0.04-0.45,0.06-0.67,0.06H7.05 c-0.23,0-0.46-0.02-0.67-0.06v78.51c0,0.19,0.07,0.36,0.19,0.48l0,0l0.01,0.01c0.12,0.12,0.28,0.19,0.48,0.19h52.44 c-0.01,2.74,0.52,4.86,1.58,6.38l-54.02,0c-1.92,0-3.68-0.79-4.96-2.07l-0.01-0.01l-0.01-0.01l-0.01-0.01 C0.79,107.4,0,105.65,0,103.73l0-96.7c0.02-1.94,0.81-3.7,2.08-4.97c0.08-0.08,0.15-0.15,0.23-0.22C3.57,0.7,5.23,0,7.05,0L7.05,0 L7.05,0z M55.11,47.78c-1.48,0-2.68-1.3-2.68-2.91c0-1.61,1.2-2.91,2.68-2.91h40.15c1.25,0,2.3,0.93,2.6,2.19l-3.51,3.64H55.11 L55.11,47.78L55.11,47.78z M55.11,62.5c-1.48,0-2.68-1.3-2.68-2.91s1.2-2.91,2.68-2.91h30.65l-5.62,5.82H55.11L55.11,62.5 L55.11,62.5z M89.25,97.9c-2.05,0.65-4.1,1.29-6.15,1.94c-2.05,0.65-4.1,1.4-6.15,2.05c-4.86,1.51-7.55,2.48-8.1,2.59 c-0.54,0.11-0.21-2.05,0.97-6.8l3.88-14.78l0.32-0.32L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9z M79.64,76.85l27.16-28.13c0.65-0.54,1.3-0.75,2.05-0.32l13.6,13.17c0.54,0.65,0.65,1.4-0.11,2.16L94.86,92.18L79.64,76.85 L79.64,76.85L79.64,76.85L79.64,76.85z M115.06,85.16v18.58c0,1.94-0.79,3.7-2.07,4.97c-1.27,1.27-3.03,2.07-4.97,2.07H79.74 l0.51-0.16l0.5-0.14c0.55-0.17,1.86-0.62,3.16-1.07c0.67-0.23,1.34-0.46,2.74-0.9l5.9-1.86l-0.01-0.02 c1.39-0.44,2.7-1.18,3.83-2.23h11.65c0.18,0,0.35-0.08,0.48-0.21c0.12-0.12,0.21-0.29,0.21-0.48V91.74L115.06,85.16L115.06,85.16z M19.51,92.45c-1.46,0-2.65-1.3-2.65-2.91s1.19-2.91,2.65-2.91h43.62l-1.53,5.82H19.51L19.51,92.45L19.51,92.45z M18.45,79.73 c-1.46,0-2.65-1.3-2.65-2.91c0-1.61,1.19-2.91,2.65-2.91h50.92c-0.56,0.37-1.1,0.81-1.6,1.31l-0.05,0.05 c-1.26,1.18-2.24,2.7-2.77,4.46H18.45L18.45,79.73L18.45,79.73z M16.49,34.55h29.25v29.51H16.49V34.55L16.49,34.55L16.49,34.55z M46.94,9.08c2.53,0,4.57,2.05,4.57,4.57c0,2.52-2.05,4.57-4.57,4.57c-2.52,0-4.57-2.05-4.57-4.57 C42.37,11.13,44.42,9.08,46.94,9.08L46.94,9.08L46.94,9.08z M30.96,9.08c2.53,0,4.57,2.05,4.57,4.57c0,2.52-2.05,4.57-4.57,4.57 c-2.53,0-4.57-2.05-4.57-4.57C26.39,11.13,28.44,9.08,30.96,9.08L30.96,9.08L30.96,9.08z M14.99,9.08c2.53,0,4.57,2.05,4.57,4.57 c0,2.52-2.05,4.57-4.57,4.57c-2.53,0-4.57-2.05-4.57-4.57C10.42,11.13,12.46,9.08,14.99,9.08L14.99,9.08L14.99,9.08z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
3
public/editor-icon.svg
Normal file
3
public/editor-icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 110.78" style="enable-background:new 0 0 122.88 110.78" xml:space="preserve"><style type="text/css"><![CDATA[
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;}
|
||||
]]></style><g><path class="st0" d="M7.05,0h100.97c1.92,0,3.68,0.8,4.95,2.07l0,0l0.01,0.01l0.01,0.01L113,2.1c1.27,1.28,2.06,3.03,2.06,4.95 v35.02c-0.53-0.48-1.13-0.91-1.78-1.28c-1.54-0.87-3.06-1.36-4.58-1.52V25.21l0,0c-0.22,0.04-0.45,0.06-0.67,0.06H7.05 c-0.23,0-0.46-0.02-0.67-0.06v78.51c0,0.19,0.07,0.36,0.19,0.48l0,0l0.01,0.01c0.12,0.12,0.28,0.19,0.48,0.19h52.44 c-0.01,2.74,0.52,4.86,1.58,6.38l-54.02,0c-1.92,0-3.68-0.79-4.96-2.07l-0.01-0.01l-0.01-0.01l-0.01-0.01 C0.79,107.4,0,105.65,0,103.73l0-96.7c0.02-1.94,0.81-3.7,2.08-4.97c0.08-0.08,0.15-0.15,0.23-0.22C3.57,0.7,5.23,0,7.05,0L7.05,0 L7.05,0z M55.11,47.78c-1.48,0-2.68-1.3-2.68-2.91c0-1.61,1.2-2.91,2.68-2.91h40.15c1.25,0,2.3,0.93,2.6,2.19l-3.51,3.64H55.11 L55.11,47.78L55.11,47.78z M55.11,62.5c-1.48,0-2.68-1.3-2.68-2.91s1.2-2.91,2.68-2.91h30.65l-5.62,5.82H55.11L55.11,62.5 L55.11,62.5z M89.25,97.9c-2.05,0.65-4.1,1.29-6.15,1.94c-2.05,0.65-4.1,1.4-6.15,2.05c-4.86,1.51-7.55,2.48-8.1,2.59 c-0.54,0.11-0.21-2.05,0.97-6.8l3.88-14.78l0.32-0.32L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9L89.25,97.9z M79.64,76.85l27.16-28.13c0.65-0.54,1.3-0.75,2.05-0.32l13.6,13.17c0.54,0.65,0.65,1.4-0.11,2.16L94.86,92.18L79.64,76.85 L79.64,76.85L79.64,76.85L79.64,76.85z M115.06,85.16v18.58c0,1.94-0.79,3.7-2.07,4.97c-1.27,1.27-3.03,2.07-4.97,2.07H79.74 l0.51-0.16l0.5-0.14c0.55-0.17,1.86-0.62,3.16-1.07c0.67-0.23,1.34-0.46,2.74-0.9l5.9-1.86l-0.01-0.02 c1.39-0.44,2.7-1.18,3.83-2.23h11.65c0.18,0,0.35-0.08,0.48-0.21c0.12-0.12,0.21-0.29,0.21-0.48V91.74L115.06,85.16L115.06,85.16z M19.51,92.45c-1.46,0-2.65-1.3-2.65-2.91s1.19-2.91,2.65-2.91h43.62l-1.53,5.82H19.51L19.51,92.45L19.51,92.45z M18.45,79.73 c-1.46,0-2.65-1.3-2.65-2.91c0-1.61,1.19-2.91,2.65-2.91h50.92c-0.56,0.37-1.1,0.81-1.6,1.31l-0.05,0.05 c-1.26,1.18-2.24,2.7-2.77,4.46H18.45L18.45,79.73L18.45,79.73z M16.49,34.55h29.25v29.51H16.49V34.55L16.49,34.55L16.49,34.55z M46.94,9.08c2.53,0,4.57,2.05,4.57,4.57c0,2.52-2.05,4.57-4.57,4.57c-2.52,0-4.57-2.05-4.57-4.57 C42.37,11.13,44.42,9.08,46.94,9.08L46.94,9.08L46.94,9.08z M30.96,9.08c2.53,0,4.57,2.05,4.57,4.57c0,2.52-2.05,4.57-4.57,4.57 c-2.53,0-4.57-2.05-4.57-4.57C26.39,11.13,28.44,9.08,30.96,9.08L30.96,9.08L30.96,9.08z M14.99,9.08c2.53,0,4.57,2.05,4.57,4.57 c0,2.52-2.05,4.57-4.57,4.57c-2.53,0-4.57-2.05-4.57-4.57C10.42,11.13,12.46,9.08,14.99,9.08L14.99,9.08L14.99,9.08z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
101
src/App.vue
Normal file
101
src/App.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
|
||||
const notes = ref([])
|
||||
const active_note = ref(null)
|
||||
|
||||
const input_title = ref('')
|
||||
const input_content = ref('')
|
||||
|
||||
// create note
|
||||
function create_note() {
|
||||
// generate random id
|
||||
const id = Math.random().toString(36).substring(2,9)
|
||||
// push new note to notes array
|
||||
notes.value.push({
|
||||
id,
|
||||
title: 'Untitled',
|
||||
content: ''
|
||||
})
|
||||
// set active note to id
|
||||
set_active_note(id)
|
||||
}
|
||||
|
||||
// delete note
|
||||
function delete_note({id, evt}) {
|
||||
// stop the propagation of the event
|
||||
evt.stopPropagation()
|
||||
// find the current note id in the notes array
|
||||
let noteId = notes.value.findIndex(note => note.id === id)
|
||||
// delete the note out of the array
|
||||
notes.value.splice(noteId, 1)
|
||||
// unset the active note and the inputs
|
||||
active_note.value = null
|
||||
input_title.value = ''
|
||||
input_content.value = ''
|
||||
}
|
||||
|
||||
// update note
|
||||
function update_note() {
|
||||
// find the current note id in the notes array
|
||||
let noteId = notes.value.findIndex(note => note.id === active_note.value)
|
||||
// set the note properties to the current input values
|
||||
notes.value[noteId].title = input_title.value
|
||||
notes.value[noteId].content = input_content.value
|
||||
}
|
||||
|
||||
// set active note
|
||||
function set_active_note(id) {
|
||||
// set the active note property
|
||||
active_note.value = id
|
||||
// find the current note in the notes array
|
||||
let note = notes.value.find(note => note.id === id)
|
||||
// set the input properties to the current note
|
||||
input_title.value = note.title
|
||||
input_content.value = note.content
|
||||
// set timeout to wait a tick to get it ready
|
||||
setTimeout(() => {
|
||||
document.querySelector('input#note-title').focus()
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// save notes
|
||||
|
||||
// load notes
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-700 text-white min-h-screen flex items-stretch justify-start">
|
||||
<!-- SIDEBAR -->
|
||||
<Sidebar
|
||||
:active_note="active_note"
|
||||
:notes="notes"
|
||||
@new-note="create_note"
|
||||
@delete-note="delete_note"
|
||||
@set-active-note="set_active_note"
|
||||
/>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<main class="flex-1">
|
||||
<div v-if="active_note" class="px-4 py-8 flex flex-col h-full">
|
||||
<input
|
||||
v-model="input_title"
|
||||
@input="update_note"
|
||||
type="text"
|
||||
name="note-title"
|
||||
id="note-title"
|
||||
class="block w-full text-3xl pb-2 font-bold border-b-2 border-gray-500 focus:border-white outline-none transition-colors duration-200"
|
||||
/>
|
||||
<textarea
|
||||
v-model="input_content"
|
||||
@input="update_note"
|
||||
name="note-content"
|
||||
id="note-content"
|
||||
class="block w-full h-full mt-4 text-lg outline-none flex-1"
|
||||
></textarea>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
29
src/components/Sidebar.vue
Normal file
29
src/components/Sidebar.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps(['active_note', 'notes'])
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="w-[256px] min-h-screen bg-gray-800">
|
||||
<div class="p-4">
|
||||
<button class="button w-full" @click="$emit('new-note')">
|
||||
New Note
|
||||
</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="note in props.notes"
|
||||
:key="note.id"
|
||||
@click="$emit('set-active-note', note.id)"
|
||||
class="p-4 border-b border-gray-700 hover:bg-gray-600 cursor-pointer flex justify-between items-center gap-4">
|
||||
<span>{{ note.title }}</span>
|
||||
<button
|
||||
class="text-red-500 cursor-pointer"
|
||||
@click="evt => $emit('delete-note', {id: note.id, evt})"
|
||||
>Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</template>
|
||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
7
src/style.css
Normal file
7
src/style.css
Normal file
@ -0,0 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@layer components {
|
||||
.button {
|
||||
@apply bg-green-500 text-gray-700 font-bold px-4 py-2 rounded cursor-pointer;
|
||||
}
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
14
tsconfig.app.json
Normal file
14
tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
8
vite.config.ts
Normal file
8
vite.config.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), tailwindcss()],
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user