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
|
# Logs
|
||||||
# gitignore template for Vue.js projects
|
logs
|
||||||
#
|
*.log
|
||||||
# Recommended template: Node.gitignore
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
# TODO: where does this rule come from?
|
node_modules
|
||||||
docs/_book
|
dist
|
||||||
|
dist-ssr
|
||||||
# TODO: where does this rule come from?
|
*.local
|
||||||
test/
|
|
||||||
|
|
||||||
|
# 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
|
# 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