Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4f433e7bf9 | |||
| 2fd0107197 | |||
| 35d7cd817f | |||
| af3d940cec | |||
| 2c059a655e | |||
| 59ce598023 | |||
| 43e067d5f0 | |||
| fc31598dbb |
@@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="display: flex; height: 100%; min-height: 100vh; flex-direction: column">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -17,7 +17,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@auth0/auth0-vue": "^1.0.0",
|
"@auth0/auth0-vue": "^1.0.0",
|
||||||
"@quasar/extras": "^1.13.5",
|
|
||||||
"@types/katex": "^0.14.0",
|
"@types/katex": "^0.14.0",
|
||||||
"@types/uuid": "^8.3.4",
|
"@types/uuid": "^8.3.4",
|
||||||
"@vuetify/vite-plugin": "1.0.0-alpha.10",
|
"@vuetify/vite-plugin": "1.0.0-alpha.10",
|
||||||
@@ -25,7 +24,6 @@
|
|||||||
"install": "^0.13.0",
|
"install": "^0.13.0",
|
||||||
"katex": "^0.15.3",
|
"katex": "^0.15.3",
|
||||||
"mathjs": "^10.4.3",
|
"mathjs": "^10.4.3",
|
||||||
"quasar": "^2.6.6",
|
|
||||||
"uuid": "^8.3.2",
|
"uuid": "^8.3.2",
|
||||||
"vue": "^3.2.25",
|
"vue": "^3.2.25",
|
||||||
"vue-router": "^4.0.14",
|
"vue-router": "^4.0.14",
|
||||||
@@ -33,13 +31,11 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@braks/revue-draggable": "^0.4.2",
|
"@braks/revue-draggable": "^0.4.2",
|
||||||
"@quasar/vite-plugin": "^1.0.9",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||||
"@typescript-eslint/parser": "^5.18.0",
|
"@typescript-eslint/parser": "^5.18.0",
|
||||||
"@vitejs/plugin-vue": "^2.3.1",
|
"@vitejs/plugin-vue": "^2.3.1",
|
||||||
"@volar/vue-language-service": "^0.33.9",
|
"@volar/vue-language-service": "^0.33.9",
|
||||||
"eslint": "^8.13.0",
|
"eslint": "^8.13.0",
|
||||||
"sass": "1.32.0",
|
|
||||||
"typescript": "^4.5.4",
|
"typescript": "^4.5.4",
|
||||||
"vite": "^2.9.0",
|
"vite": "^2.9.0",
|
||||||
"vue-tsc": "^0.33.9"
|
"vue-tsc": "^0.33.9"
|
||||||
|
|||||||
10
plugins/vuetify.ts
Normal file
10
plugins/vuetify.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import 'vuetify/styles'
|
||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
|
||||||
|
export default createVuetify({
|
||||||
|
theme: {
|
||||||
|
defaultTheme: 'dark'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
94
pnpm-lock.yaml
generated
94
pnpm-lock.yaml
generated
@@ -3,8 +3,6 @@ lockfileVersion: 5.3
|
|||||||
specifiers:
|
specifiers:
|
||||||
'@auth0/auth0-vue': ^1.0.0
|
'@auth0/auth0-vue': ^1.0.0
|
||||||
'@braks/revue-draggable': ^0.4.2
|
'@braks/revue-draggable': ^0.4.2
|
||||||
'@quasar/extras': ^1.13.5
|
|
||||||
'@quasar/vite-plugin': ^1.0.9
|
|
||||||
'@types/katex': ^0.14.0
|
'@types/katex': ^0.14.0
|
||||||
'@types/uuid': ^8.3.4
|
'@types/uuid': ^8.3.4
|
||||||
'@typescript-eslint/eslint-plugin': ^5.18.0
|
'@typescript-eslint/eslint-plugin': ^5.18.0
|
||||||
@@ -17,8 +15,6 @@ specifiers:
|
|||||||
install: ^0.13.0
|
install: ^0.13.0
|
||||||
katex: ^0.15.3
|
katex: ^0.15.3
|
||||||
mathjs: ^10.4.3
|
mathjs: ^10.4.3
|
||||||
quasar: ^2.6.6
|
|
||||||
sass: 1.32.0
|
|
||||||
typescript: ^4.5.4
|
typescript: ^4.5.4
|
||||||
uuid: ^8.3.2
|
uuid: ^8.3.2
|
||||||
vite: ^2.9.0
|
vite: ^2.9.0
|
||||||
@@ -29,7 +25,6 @@ specifiers:
|
|||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@auth0/auth0-vue': 1.0.0_vue-router@4.0.14
|
'@auth0/auth0-vue': 1.0.0_vue-router@4.0.14
|
||||||
'@quasar/extras': 1.13.5
|
|
||||||
'@types/katex': 0.14.0
|
'@types/katex': 0.14.0
|
||||||
'@types/uuid': 8.3.4
|
'@types/uuid': 8.3.4
|
||||||
'@vuetify/vite-plugin': 1.0.0-alpha.10_vite@2.9.1+vuetify@3.0.0-beta.0
|
'@vuetify/vite-plugin': 1.0.0-alpha.10_vite@2.9.1+vuetify@3.0.0-beta.0
|
||||||
@@ -37,7 +32,6 @@ dependencies:
|
|||||||
install: 0.13.0
|
install: 0.13.0
|
||||||
katex: 0.15.3
|
katex: 0.15.3
|
||||||
mathjs: 10.4.3
|
mathjs: 10.4.3
|
||||||
quasar: 2.6.6
|
|
||||||
uuid: 8.3.2
|
uuid: 8.3.2
|
||||||
vue: 3.2.31
|
vue: 3.2.31
|
||||||
vue-router: 4.0.14_vue@3.2.31
|
vue-router: 4.0.14_vue@3.2.31
|
||||||
@@ -45,15 +39,13 @@ dependencies:
|
|||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@braks/revue-draggable': 0.4.2_vue@3.2.31
|
'@braks/revue-draggable': 0.4.2_vue@3.2.31
|
||||||
'@quasar/vite-plugin': 1.0.9_c0effa32a194597943674c123f9c6ed2
|
|
||||||
'@typescript-eslint/eslint-plugin': 5.18.0_0dd9be2ba5ed9805045f3fec8be848f5
|
'@typescript-eslint/eslint-plugin': 5.18.0_0dd9be2ba5ed9805045f3fec8be848f5
|
||||||
'@typescript-eslint/parser': 5.18.0_eslint@8.13.0+typescript@4.6.3
|
'@typescript-eslint/parser': 5.18.0_eslint@8.13.0+typescript@4.6.3
|
||||||
'@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31
|
'@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31
|
||||||
'@volar/vue-language-service': 0.33.9
|
'@volar/vue-language-service': 0.33.9
|
||||||
eslint: 8.13.0
|
eslint: 8.13.0
|
||||||
sass: 1.32.0
|
|
||||||
typescript: 4.6.3
|
typescript: 4.6.3
|
||||||
vite: 2.9.1_sass@1.32.0
|
vite: 2.9.1
|
||||||
vue-tsc: 0.33.9_typescript@4.6.3
|
vue-tsc: 0.33.9_typescript@4.6.3
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
@@ -211,23 +203,6 @@ packages:
|
|||||||
fastq: 1.13.0
|
fastq: 1.13.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@quasar/extras/1.13.5:
|
|
||||||
resolution: {integrity: sha512-H4X3jwqOJpDrn1Pof1mJIpoHdBrZQSR9ZpnQ7RCkJsJccpTyQzs8Q6ehVXfIZrco2kd3UPitRQqEiW7k45ckLg==}
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/@quasar/vite-plugin/1.0.9_c0effa32a194597943674c123f9c6ed2:
|
|
||||||
resolution: {integrity: sha512-i3tOXLu9SvBG/u/VH/vlPpwzU3QHVtogoSl23Y3i9Clgo6XCtm9mHB0XnQvsLQgNfUTkAKJPKnGwAPQd9uBu1A==}
|
|
||||||
engines: {node: '>=12'}
|
|
||||||
peerDependencies:
|
|
||||||
quasar: ^2.0.0
|
|
||||||
vite: ^2.0.0
|
|
||||||
vue: ^3.0.0
|
|
||||||
dependencies:
|
|
||||||
quasar: 2.6.6
|
|
||||||
vite: 2.9.1_sass@1.32.0
|
|
||||||
vue: 3.2.31
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/@sindresorhus/is/0.14.0:
|
/@sindresorhus/is/0.14.0:
|
||||||
resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
|
resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
@@ -537,7 +512,7 @@ packages:
|
|||||||
vite: ^2.5.10
|
vite: ^2.5.10
|
||||||
vue: ^3.2.25
|
vue: ^3.2.25
|
||||||
dependencies:
|
dependencies:
|
||||||
vite: 2.9.1_sass@1.32.0
|
vite: 2.9.1
|
||||||
vue: 3.2.31
|
vue: 3.2.31
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
@@ -764,7 +739,7 @@ packages:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@vuetify/loader-shared': 1.3.0_vuetify@3.0.0-beta.0
|
'@vuetify/loader-shared': 1.3.0_vuetify@3.0.0-beta.0
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
vite: 2.9.1_sass@1.32.0
|
vite: 2.9.1
|
||||||
vuetify: 3.0.0-beta.0_vue@3.2.31
|
vuetify: 3.0.0-beta.0_vue@3.2.31
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
@@ -877,14 +852,6 @@ packages:
|
|||||||
color-convert: 2.0.1
|
color-convert: 2.0.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/anymatch/3.1.2:
|
|
||||||
resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
|
|
||||||
engines: {node: '>= 8'}
|
|
||||||
dependencies:
|
|
||||||
normalize-path: 3.0.0
|
|
||||||
picomatch: 2.3.1
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/argparse/1.0.10:
|
/argparse/1.0.10:
|
||||||
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
|
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -937,11 +904,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/binary-extensions/2.2.0:
|
|
||||||
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
|
||||||
engines: {node: '>=8'}
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/boxen/3.2.0:
|
/boxen/3.2.0:
|
||||||
resolution: {integrity: sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==}
|
resolution: {integrity: sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
@@ -1069,21 +1031,6 @@ packages:
|
|||||||
is-regex: 1.1.4
|
is-regex: 1.1.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/chokidar/3.5.3:
|
|
||||||
resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
|
|
||||||
engines: {node: '>= 8.10.0'}
|
|
||||||
dependencies:
|
|
||||||
anymatch: 3.1.2
|
|
||||||
braces: 3.0.2
|
|
||||||
glob-parent: 5.1.2
|
|
||||||
is-binary-path: 2.1.0
|
|
||||||
is-glob: 4.0.3
|
|
||||||
normalize-path: 3.0.0
|
|
||||||
readdirp: 3.6.0
|
|
||||||
optionalDependencies:
|
|
||||||
fsevents: 2.3.2
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/ci-info/2.0.0:
|
/ci-info/2.0.0:
|
||||||
resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
|
resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
|
||||||
dev: true
|
dev: true
|
||||||
@@ -2169,13 +2116,6 @@ packages:
|
|||||||
resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
|
resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/is-binary-path/2.1.0:
|
|
||||||
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
|
|
||||||
engines: {node: '>=8'}
|
|
||||||
dependencies:
|
|
||||||
binary-extensions: 2.2.0
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/is-buffer/2.0.5:
|
/is-buffer/2.0.5:
|
||||||
resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
|
resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
@@ -2646,11 +2586,6 @@ packages:
|
|||||||
validate-npm-package-license: 3.0.4
|
validate-npm-package-license: 3.0.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/normalize-path/3.0.0:
|
|
||||||
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
|
||||||
engines: {node: '>=0.10.0'}
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/normalize-url/4.5.1:
|
/normalize-url/4.5.1:
|
||||||
resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
|
resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
@@ -3001,11 +2936,6 @@ packages:
|
|||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/quasar/2.6.6:
|
|
||||||
resolution: {integrity: sha512-rXoGZROOXVutQX14l/ys0te/NrgQ754krI0Vz52pBXdznyS+dTL6AgGpr3JMwffoxpxhQyedrL2jOAMpq+Jsgw==}
|
|
||||||
engines: {node: '>= 10.18.1', npm: '>= 6.13.4', yarn: '>= 1.21.1'}
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/queue-microtask/1.2.3:
|
/queue-microtask/1.2.3:
|
||||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||||
dev: true
|
dev: true
|
||||||
@@ -3078,13 +3008,6 @@ packages:
|
|||||||
util-deprecate: 1.0.2
|
util-deprecate: 1.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/readdirp/3.6.0:
|
|
||||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
|
||||||
engines: {node: '>=8.10.0'}
|
|
||||||
dependencies:
|
|
||||||
picomatch: 2.3.1
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/redent/2.0.0:
|
/redent/2.0.0:
|
||||||
resolution: {integrity: sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=}
|
resolution: {integrity: sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
@@ -3208,14 +3131,6 @@ packages:
|
|||||||
suf-regex: 0.3.4
|
suf-regex: 0.3.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/sass/1.32.0:
|
|
||||||
resolution: {integrity: sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==}
|
|
||||||
engines: {node: '>=8.9.0'}
|
|
||||||
hasBin: true
|
|
||||||
dependencies:
|
|
||||||
chokidar: 3.5.3
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/seedrandom/3.0.5:
|
/seedrandom/3.0.5:
|
||||||
resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
|
resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
|
||||||
dev: false
|
dev: false
|
||||||
@@ -3813,7 +3728,7 @@ packages:
|
|||||||
vfile-message: 2.0.4
|
vfile-message: 2.0.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/vite/2.9.1_sass@1.32.0:
|
/vite/2.9.1:
|
||||||
resolution: {integrity: sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==}
|
resolution: {integrity: sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==}
|
||||||
engines: {node: '>=12.2.0'}
|
engines: {node: '>=12.2.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
@@ -3833,7 +3748,6 @@ packages:
|
|||||||
postcss: 8.4.12
|
postcss: 8.4.12
|
||||||
resolve: 1.22.0
|
resolve: 1.22.0
|
||||||
rollup: 2.70.1
|
rollup: 2.70.1
|
||||||
sass: 1.32.0
|
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.2
|
fsevents: 2.3.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|||||||
49
src/App.vue
49
src/App.vue
@@ -1,39 +1,25 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Home from "./pages/Login.vue";
|
|
||||||
// This starter template is using Vue 3 <script setup> SFCs
|
|
||||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
|
||||||
import HelloWorld from "./components/HelloWorld.vue";
|
|
||||||
import { MathStatement } from "./support/parse";
|
import { MathStatement } from "./support/parse";
|
||||||
import { MathPage } from "./support/page";
|
import { MathPage } from "./support/page";
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
(window as any).Stmt = MathStatement;
|
(window as any).Stmt = MathStatement;
|
||||||
(window as any).Pg = MathPage;
|
(window as any).Pg = MathPage;
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-layout view="hHr LpR fFf">
|
<v-app>
|
||||||
<q-header elevated class="bg-primary text-white" height-hint="98">
|
<v-app-bar height="30" elevation="0">
|
||||||
<q-toolbar>
|
<div id="nav">
|
||||||
<q-toolbar-title>
|
<router-link class="links" to="/">Home</router-link> |
|
||||||
<q-avatar>
|
<router-link class="links" to="/scratch">Scratch Testing</router-link> |
|
||||||
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
|
<router-link class="links" to="/editor">Editor</router-link>
|
||||||
</q-avatar>
|
</div>
|
||||||
Title
|
</v-app-bar>
|
||||||
</q-toolbar-title>
|
|
||||||
</q-toolbar>
|
|
||||||
|
|
||||||
<q-tabs align="left">
|
<div style="margin-top: 30px"> <!-- Account for the navbar height -->
|
||||||
<q-route-tab to="/Scratch" label="Scratch" />
|
|
||||||
<q-route-tab to="/Editor" label="Editor" />
|
|
||||||
|
|
||||||
</q-tabs>
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-page-container>
|
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</q-page-container>
|
</div>
|
||||||
</q-layout>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -42,7 +28,14 @@ import { ref } from "vue";
|
|||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
display: flex;
|
||||||
margin-top: 60px;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.links:visited {
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
|
|
||||||
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
|
|
||||||
</pattern>
|
|
||||||
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
|
|
||||||
<rect width="80" height="80" fill="url(#smallGrid)"/>
|
|
||||||
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
|
|
||||||
</pattern>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 561 B |
15
src/components/Editor.vue
Normal file
15
src/components/Editor.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-navigation-drawer width="100" permanent>
|
||||||
|
|
||||||
|
</v-navigation-drawer>
|
||||||
|
|
||||||
|
<Draggable>
|
||||||
|
<div class="box">I use a wrapper</div>
|
||||||
|
</Draggable>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -7,26 +7,19 @@ const props = defineProps<{
|
|||||||
size?: 'big' | 'small',
|
size?: 'big' | 'small',
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const getRenderedHTML = () => {
|
const getRenderedHTML = () => props.statement.toHTMLString()
|
||||||
console.log('getRenderedHTML', props.statement)
|
|
||||||
try {
|
|
||||||
return props.statement.toHTMLString()
|
|
||||||
} catch (_) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let renderedHtml = getRenderedHTML()
|
const renderedHtml = getRenderedHTML()
|
||||||
computed(() => renderedHtml = getRenderedHTML())
|
computed(getRenderedHTML)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.big {
|
.big {
|
||||||
font-size: 1.3em;
|
transform: scale(1.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-size: 0.9em;
|
transform: scale(0.9);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
21
src/components/Scratch.vue
Normal file
21
src/components/Scratch.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {MathPage} from '../support/page'
|
||||||
|
import {v4 as uuidv4} from 'uuid'
|
||||||
|
import Statement from './Statement.vue'
|
||||||
|
import {MathStatement} from '../support/parse'
|
||||||
|
|
||||||
|
const page = new MathPage(uuidv4())
|
||||||
|
const stmt1Id = page.addRaw('x = y+3/4')
|
||||||
|
const stmt2Id = page.addRaw('y = 9')
|
||||||
|
const evaluation = page.evaluate()
|
||||||
|
|
||||||
|
const stmt = page.getStatement(stmt1Id)
|
||||||
|
console.log({page, stmt1Id})
|
||||||
|
|
||||||
|
const onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<p>Scratch page for testing!</p>
|
||||||
|
<Statement v-if="stmt" :statement="stmt" :evaluation="evaluation"/>
|
||||||
|
</template>
|
||||||
@@ -6,11 +6,11 @@ import Katex from './Katex.vue'
|
|||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
statement: MathStatement,
|
statement: MathStatement,
|
||||||
evaluation?: EvaluationResult,
|
evaluation: EvaluationResult,
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const getValueStatement = (): Maybe<MathStatement> => {
|
const getValueStatement = (): Maybe<MathStatement> => {
|
||||||
const value = props.evaluation?.statements?.[props.statement.id]
|
const value = props.evaluation.statements[props.statement.id]
|
||||||
if ( value ) {
|
if ( value ) {
|
||||||
return MathStatement.temp(String(value))
|
return MathStatement.temp(String(value))
|
||||||
}
|
}
|
||||||
@@ -36,18 +36,10 @@ computed(() => value = getValueStatement())
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-button {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="math-statement" style="background: white">
|
<div class="math-statement">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<Katex :statement="statement" size="big"/>
|
<Katex :statement="statement" size="big"/>
|
||||||
<div class="result" v-if="value">
|
<div class="result" v-if="value">
|
||||||
@@ -56,7 +48,7 @@ computed(() => value = getValueStatement())
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<button class="edit-button" @click="() => $emit('edit')" title="Edit this expression">
|
<button>
|
||||||
<img src="../assets/edit.svg" alt="Edit" height="16">
|
<img src="../assets/edit.svg" alt="Edit" height="16">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,37 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
statement: { type: String, required: true },
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Draggable :grid="[25, 25]">
|
|
||||||
<div style="display: flex">
|
|
||||||
<q-card flat bordered>
|
|
||||||
<q-card-section>
|
|
||||||
<div class="row items-center no-wrap">
|
|
||||||
<q-card-section v-html="props.statement" />
|
|
||||||
<div class="col-auto">
|
|
||||||
<q-btn color="grey-7" round flat icon="more_vert">
|
|
||||||
<q-menu cover auto-close>
|
|
||||||
<q-list>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('edit')">Edit</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<q-item clickable>
|
|
||||||
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="sass" scoped></style>
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const count = ref(0);
|
|
||||||
function increment() {
|
|
||||||
count.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Draggable :grid="[25, 25]">
|
|
||||||
<div>
|
|
||||||
<div>Grid with component</div>
|
|
||||||
|
|
||||||
<q-btn @click="increment">Count is: {{ count }}</q-btn>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
|
||||||
</template>
|
|
||||||
<style lang="sass" scoped>
|
|
||||||
.my-card
|
|
||||||
width: 50%
|
|
||||||
max-width: 250px
|
|
||||||
</style>
|
|
||||||
59
src/main.ts
59
src/main.ts
@@ -1,54 +1,27 @@
|
|||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
Vue Helpers
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
import router from './router'
|
|
||||||
|
|
||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
App UI
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import { Quasar } from 'quasar'
|
|
||||||
|
|
||||||
// Import icon libraries
|
|
||||||
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
|
|
||||||
import '@quasar/extras/material-icons/material-icons.css'
|
|
||||||
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
|
|
||||||
|
|
||||||
// A few examples for animations from Animate.css:
|
|
||||||
// import @quasar/extras/animate/fadeIn.css
|
|
||||||
// import @quasar/extras/animate/fadeOut.css
|
|
||||||
|
|
||||||
// Import Quasar css
|
|
||||||
import 'quasar/src/css/index.sass'
|
|
||||||
|
|
||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
Plugins
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import { DraggablePlugin } from '@braks/revue-draggable'
|
import { DraggablePlugin } from '@braks/revue-draggable'
|
||||||
import { createAuth0 } from '@auth0/auth0-vue'
|
import { createAuth0 } from '@auth0/auth0-vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
import 'vuetify/styles' // Global CSS has to be imported
|
||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
import * as components from 'vuetify/components'
|
||||||
|
import * as directives from 'vuetify/directives'
|
||||||
import 'katex/dist/katex.min.css'
|
import 'katex/dist/katex.min.css'
|
||||||
import 'katex/dist/contrib/auto-render.min'
|
import 'katex/dist/contrib/auto-render.min'
|
||||||
|
|
||||||
/*
|
|
||||||
--------------------------------------------------
|
|
||||||
Components
|
|
||||||
--------------------------------------------------
|
|
||||||
*/
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
const vuetify = createVuetify({
|
||||||
app.use(Quasar, {
|
components,
|
||||||
plugins: {}, // import Quasar plugins and add here
|
directives,
|
||||||
})
|
theme: {
|
||||||
|
defaultTheme: 'dark',
|
||||||
|
},
|
||||||
|
}) // Replaces new Vuetify(...)
|
||||||
|
app.use(vuetify)
|
||||||
|
|
||||||
app.use(
|
app.use(
|
||||||
createAuth0({
|
createAuth0({
|
||||||
@@ -60,5 +33,5 @@ app.use(
|
|||||||
|
|
||||||
app.use(router)
|
app.use(router)
|
||||||
|
|
||||||
app.use(DraggablePlugin)
|
app.use(DraggablePlugin);
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -1,192 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
|
||||||
import WrapperBox from '../components/WrapperBox.vue'
|
|
||||||
import {MathPage} from '../support/page'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import Katex from '../components/Katex.vue'
|
|
||||||
import {EvaluationResult, StatementID} from '../types'
|
|
||||||
import Statement from '../components/Statement.vue'
|
|
||||||
import VarDeclEditor from './VarDeclEditor.vue'
|
|
||||||
import ExpressionEditor from './ExpressionEditor.vue'
|
|
||||||
import TextBox from '../components/TextBox.vue'
|
|
||||||
|
|
||||||
const math = new MathPage(uuidv4())
|
|
||||||
const statements = ref<MathStatement[]>([])
|
|
||||||
const evaluation = ref<EvaluationResult|undefined>()
|
|
||||||
const statementsKey = ref<string>(uuidv4())
|
|
||||||
const leftDrawerOpen = ref(false);
|
|
||||||
|
|
||||||
function toggleLeftDrawer() {
|
|
||||||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newVariableModalOpen = ref(false)
|
|
||||||
const openNewVariableDeclModal = () => {
|
|
||||||
newVariableModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const newExpressionModalOpen = ref(false)
|
|
||||||
const openNewExpressionModal = () => {
|
|
||||||
newExpressionModalOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateStatements = () => {
|
|
||||||
statements.value = math.getStatements()
|
|
||||||
try {
|
|
||||||
evaluation.value = math.evaluate()
|
|
||||||
} catch (_) {
|
|
||||||
evaluation.value = undefined
|
|
||||||
}
|
|
||||||
statementsKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveNewVariable = (stmt: MathStatement) => {
|
|
||||||
math.addStatement(stmt)
|
|
||||||
newVariableModalOpen.value = false
|
|
||||||
updateStatements()
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveNewExpression = (stmt: MathStatement) => {
|
|
||||||
math.addStatement(stmt)
|
|
||||||
newExpressionModalOpen.value = false
|
|
||||||
updateStatements()
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Rich Text Stuff
|
|
||||||
*/
|
|
||||||
|
|
||||||
const richTextStatments = ref([
|
|
||||||
{ text: "test" },
|
|
||||||
{ text: "test2" },
|
|
||||||
{ text: "test3" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const richEditModal = ref(false);
|
|
||||||
const richEditExpression = ref("");
|
|
||||||
const richEditID = ref(0);
|
|
||||||
|
|
||||||
const richEditStatement = (id: number) => {
|
|
||||||
console.log("editing statement", id, richEditModal);
|
|
||||||
richEditModal.value = true;
|
|
||||||
richEditID.value = id;
|
|
||||||
richEditExpression.value = richTextStatments.value[richEditID.value].text;
|
|
||||||
};
|
|
||||||
|
|
||||||
function richUpdateValue() {
|
|
||||||
richTextStatments.value[richEditID.value].text = richEditExpression.value;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-layout view="hHh Lpr fff">
|
|
||||||
<q-header reveal bordered class="bg-primary text-white" height-hint="98">
|
|
||||||
<q-toolbar>
|
|
||||||
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
|
|
||||||
|
|
||||||
<q-toolbar-title>
|
|
||||||
<q-avatar>
|
|
||||||
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
|
|
||||||
</q-avatar>
|
|
||||||
Title
|
|
||||||
</q-toolbar-title>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-tabs align="left">
|
|
||||||
<q-route-tab to="/Scratch" label="Scratch" />
|
|
||||||
<q-route-tab to="/Editor" label="Editor" />
|
|
||||||
</q-tabs>
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
|
|
||||||
<div class="column" style="height: 100%">
|
|
||||||
<div class="col">variables</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-separator />
|
|
||||||
function
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- drawer content -->
|
|
||||||
</q-drawer>
|
|
||||||
|
|
||||||
<q-page-container id="editor" style="display: flex">
|
|
||||||
<!-- <WrapperBox />-->
|
|
||||||
|
|
||||||
<span v-for="statement in statements">
|
|
||||||
<Draggable
|
|
||||||
:grid="[25, 25]"
|
|
||||||
>
|
|
||||||
<Statement
|
|
||||||
:key="statementsKey"
|
|
||||||
:statement="statement"
|
|
||||||
:evaluation="evaluation"
|
|
||||||
/>
|
|
||||||
</Draggable>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<q-dialog v-model="newVariableModalOpen">
|
|
||||||
<VarDeclEditor
|
|
||||||
v-on:save="s => saveNewVariable(s)"
|
|
||||||
/>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="newExpressionModalOpen">
|
|
||||||
<ExpressionEditor
|
|
||||||
v-on:save="s => saveNewExpression(s)"
|
|
||||||
/>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-page-sticky position="bottom-right" :offset="[32, 32]">
|
|
||||||
<q-fab color="primary" icon="add" direction="left">
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
label="x"
|
|
||||||
label-style="font-family: serif; font-size: 1.4em; padding: 0"
|
|
||||||
title="Add a variable declaration"
|
|
||||||
@click="() => openNewVariableDeclModal()"
|
|
||||||
/>
|
|
||||||
<q-fab-action
|
|
||||||
color="secondary"
|
|
||||||
icon="code"
|
|
||||||
label-style="font-family: serif; font-size: 1.4em; padding: 0"
|
|
||||||
title="Add an expression"
|
|
||||||
@click="() => openNewExpressionModal()"
|
|
||||||
/>
|
|
||||||
</q-fab>
|
|
||||||
</q-page-sticky>
|
|
||||||
|
|
||||||
<q-dialog v-model="richEditModal">
|
|
||||||
<q-card>
|
|
||||||
<q-editor v-model="richEditExpression" min-height="5rem" />
|
|
||||||
<q-card-actions align="right" class="text-primary">
|
|
||||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
||||||
<q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<span v-for="(item, index) in richTextStatments">
|
|
||||||
<TextBox
|
|
||||||
:statement="item.text"
|
|
||||||
v-on:edit="() => (item.text ? richEditStatement(index) : {})"
|
|
||||||
></TextBox>
|
|
||||||
</span>
|
|
||||||
</q-page-container>
|
|
||||||
|
|
||||||
<q-footer reveal elevated class="bg-grey-8 text-white">
|
|
||||||
<q-toolbar>
|
|
||||||
<q-toolbar-title>
|
|
||||||
<div>Status</div>
|
|
||||||
</q-toolbar-title>
|
|
||||||
</q-toolbar>
|
|
||||||
</q-footer>
|
|
||||||
</q-layout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#editor {
|
|
||||||
background-image: url(../assets/grid.svg);
|
|
||||||
background-repeat: repeat;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {defineEmits, ref} from 'vue'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import Katex from '../components/Katex.vue'
|
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
|
||||||
import {StatementID} from '../types'
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'save', statement: MathStatement): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const expressionPreview = ref(MathStatement.temp(''))
|
|
||||||
const expressionPreviewKey = ref(uuidv4())
|
|
||||||
const expressionError = ref<string|undefined>(undefined)
|
|
||||||
const expressionValue = ref<string>('')
|
|
||||||
|
|
||||||
const updateExpressionPreview = () => {
|
|
||||||
const previewStmt = MathStatement.temp(expressionValue.value)
|
|
||||||
if ( previewStmt.isValid() ) {
|
|
||||||
expressionPreview.value = MathStatement.temp(expressionValue.value)
|
|
||||||
expressionPreviewKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const validateExpression = () => {
|
|
||||||
const stmt = MathStatement.temp(expressionValue.value)
|
|
||||||
if ( !stmt.isValid() ) {
|
|
||||||
return 'The expression is invalid'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( stmt.defines().length > 0 ) {
|
|
||||||
return 'Expressions cannot declare variables'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveExpression = () => {
|
|
||||||
expressionError.value = validateExpression()
|
|
||||||
if ( expressionError.value ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('save', new MathStatement(
|
|
||||||
uuidv4() as StatementID,
|
|
||||||
expressionValue.value
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card>
|
|
||||||
<q-card-section>
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<Katex
|
|
||||||
:key="expressionPreviewKey"
|
|
||||||
:statement="expressionPreview"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section v-if="expressionError">
|
|
||||||
<div style="color: darkred; font-weight: bold">{{ expressionError }}</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section>
|
|
||||||
<q-input
|
|
||||||
v-model="expressionValue"
|
|
||||||
v-on:update:model-value="() => updateExpressionPreview()"
|
|
||||||
outlined
|
|
||||||
autogrow
|
|
||||||
type="textarea"
|
|
||||||
autofocus
|
|
||||||
label="Expression"
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-actions align="right" class="text-primary">
|
|
||||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
||||||
<q-btn flat label="Save" @click="() => saveExpression()"></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {MathPage} from '../support/page'
|
|
||||||
import {v4 as uuidv4} from 'uuid'
|
|
||||||
import Statement from '../components/Statement.vue'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import {onMounted, ref} from 'vue'
|
|
||||||
import Katex from '../components/Katex.vue'
|
|
||||||
|
|
||||||
const page = new MathPage(uuidv4())
|
|
||||||
const stmt1Id = page.addRaw('x = y+3/4')
|
|
||||||
const stmt2Id = page.addRaw('y = 9')
|
|
||||||
const evaluation = page.evaluate()
|
|
||||||
|
|
||||||
const stmt = page.getStatement(stmt1Id)
|
|
||||||
console.log({page, stmt1Id})
|
|
||||||
|
|
||||||
let editModal = ref(false)
|
|
||||||
let editExpression = ref('')
|
|
||||||
let editPreview = ref(MathStatement.temp(''))
|
|
||||||
let activeStatement!: MathStatement
|
|
||||||
|
|
||||||
const editStatement = (stmt: MathStatement) => {
|
|
||||||
console.log('editing statement', stmt, editModal)
|
|
||||||
activeStatement = stmt
|
|
||||||
editPreview.value = MathStatement.temp(stmt.raw)
|
|
||||||
editModal.value = true
|
|
||||||
editExpression.value = stmt.raw
|
|
||||||
}
|
|
||||||
|
|
||||||
let key = ref(uuidv4())
|
|
||||||
const updateEditRender = () => {
|
|
||||||
const previewStmt = MathStatement.temp(editExpression.value)
|
|
||||||
if ( previewStmt.isValid() ) {
|
|
||||||
editPreview.value = MathStatement.temp(editExpression.value)
|
|
||||||
key.value = uuidv4()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<p>Scratch page for testing!</p>
|
|
||||||
<q-dialog ref="edit-modal" v-model="editModal">
|
|
||||||
<q-card>
|
|
||||||
<q-card-section>
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<Katex :statement="editPreview" :key="key"/>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section>
|
|
||||||
<q-input
|
|
||||||
v-model="editExpression"
|
|
||||||
v-on:update:model-value="() => updateEditRender()"
|
|
||||||
type="textarea"
|
|
||||||
outlined
|
|
||||||
label="Expression"
|
|
||||||
autogrow
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-actions align="right" class="text-primary">
|
|
||||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
||||||
<q-btn flat label="Save" v-close-popup></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<Statement
|
|
||||||
v-if="stmt"
|
|
||||||
v-on:edit="() => stmt ? editStatement(stmt) : {}"
|
|
||||||
:statement="stmt"
|
|
||||||
:evaluation="evaluation"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {ref} from 'vue'
|
|
||||||
import {MathStatement} from '../support/parse'
|
|
||||||
import {v4 as uuidv4} from 'uuid'
|
|
||||||
import Katex from '../components/Katex.vue'
|
|
||||||
import {StatementID} from '../types'
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(eventName: 'save', statement: MathStatement): void,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const newVariablePreview = ref(MathStatement.temp('? = ?'))
|
|
||||||
let newVariablePreviewKey = ref(uuidv4())
|
|
||||||
const newVariableModalError = ref<string|undefined>(undefined)
|
|
||||||
const newVariableName = ref('')
|
|
||||||
const newVariableValue = ref('')
|
|
||||||
|
|
||||||
const updateNewVariablePreview = () => {
|
|
||||||
const previewStmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
|
|
||||||
if ( previewStmt.isValid() ) {
|
|
||||||
newVariablePreview.value = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
|
|
||||||
newVariablePreviewKey.value = uuidv4()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const validateNewVariable = () => {
|
|
||||||
if ( !newVariableName.value ) {
|
|
||||||
return 'Missing variable name'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !newVariableValue.value ) {
|
|
||||||
return 'Missing variable value'
|
|
||||||
}
|
|
||||||
|
|
||||||
const stmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
|
|
||||||
if ( !stmt.isValid() ) {
|
|
||||||
return 'Assignment is invalid'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !stmt.isNotRecursive() ) {
|
|
||||||
return 'A variable may not reference itself'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveNewVariable = () => {
|
|
||||||
newVariableModalError.value = validateNewVariable()
|
|
||||||
if ( newVariableModalError.value ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('save', new MathStatement(
|
|
||||||
uuidv4() as StatementID,
|
|
||||||
`${newVariableName.value} = ${newVariableValue.value}`
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card>
|
|
||||||
<q-card-section>
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<Katex
|
|
||||||
:key="newVariablePreviewKey"
|
|
||||||
:statement="newVariablePreview"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section v-if="newVariableModalError">
|
|
||||||
<div style="color: darkred; font-weight: bold">{{ newVariableModalError }}</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section>
|
|
||||||
<q-input
|
|
||||||
v-model="newVariableName"
|
|
||||||
v-on:update:model-value="() => updateNewVariablePreview()"
|
|
||||||
outlined
|
|
||||||
autofocus
|
|
||||||
label="Variable name"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
<q-input
|
|
||||||
v-model="newVariableValue"
|
|
||||||
v-on:update:model-value="() => updateNewVariablePreview()"
|
|
||||||
outlined
|
|
||||||
type="textarea"
|
|
||||||
autogrow
|
|
||||||
label="Value"
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-actions align="right" class="text-primary">
|
|
||||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
|
||||||
<q-btn flat label="Save" @click="() => saveNewVariable()"></q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
$primary : #1976D2
|
|
||||||
$secondary : #26A69A
|
|
||||||
$accent : #9C27B0
|
|
||||||
|
|
||||||
$dark : #1D1D1D
|
|
||||||
|
|
||||||
$positive : #21BA45
|
|
||||||
$negative : #C10015
|
|
||||||
$info : #31CCEC
|
|
||||||
$warning : #F2C037
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import Home from './pages/Login.vue'
|
import Home from './components/Home.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@@ -10,14 +10,14 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/scratch',
|
path: '/scratch',
|
||||||
name: 'Scratch',
|
name: 'Scratch',
|
||||||
component: () => import(/* webpackChunkName: "scratch" */ './pages/Scratch.vue'),
|
component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'),
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/editor',
|
path: '/editor',
|
||||||
name: 'Editor',
|
name: 'Editor',
|
||||||
component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
|
component: () => import(/* webpackChunkName: "scratch" */ './components/Editor.vue'),
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
@@ -16,11 +16,6 @@ export class MathPage {
|
|||||||
public readonly id: string,
|
public readonly id: string,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
/** Get all defined statements. */
|
|
||||||
getStatements(): MathStatement[] {
|
|
||||||
return Object.values(this.statements)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Get a statement by ID if it exists. */
|
/** Get a statement by ID if it exists. */
|
||||||
getStatement(id: StatementID): Maybe<MathStatement> {
|
getStatement(id: StatementID): Maybe<MathStatement> {
|
||||||
return this.statements[id]
|
return this.statements[id]
|
||||||
|
|||||||
@@ -300,16 +300,6 @@ export class MathStatement {
|
|||||||
return node
|
return node
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Returns true if the expression is valid. */
|
|
||||||
isValid(): boolean {
|
|
||||||
try {
|
|
||||||
this.toHTMLString()
|
|
||||||
return true
|
|
||||||
} catch (_) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Get all symbols referenced in this statement. */
|
/** Get all symbols referenced in this statement. */
|
||||||
symbols(): math.SymbolNode[] {
|
symbols(): math.SymbolNode[] {
|
||||||
return (new SymbolWalk()).walk(this.parse())
|
return (new SymbolWalk()).walk(this.parse())
|
||||||
@@ -324,18 +314,4 @@ export class MathStatement {
|
|||||||
uses(): math.SymbolNode[] {
|
uses(): math.SymbolNode[] {
|
||||||
return (new RValSymbolWalk()).walk(this.parse())
|
return (new RValSymbolWalk()).walk(this.parse())
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Returns true if the definition is correctly non-recursive. */
|
|
||||||
isNotRecursive(): boolean {
|
|
||||||
const uses = this.uses()
|
|
||||||
const defines = this.defines()
|
|
||||||
|
|
||||||
for ( const define of defines ) {
|
|
||||||
if ( uses.some(x => x.name === define.name) ) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,25 +1,10 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
|
import vuetify from '@vuetify/vite-plugin'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
server: {
|
plugins: [vue(),
|
||||||
proxy: {
|
vuetify({ autoImport: true }), // Enabled by default
|
||||||
'/api': {
|
],
|
||||||
target: 'http://localhost:8000/',
|
|
||||||
},
|
|
||||||
'/auth': {
|
|
||||||
target: 'http://localhost:8000/',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
vue({
|
|
||||||
template: { transformAssetUrls },
|
|
||||||
}),
|
|
||||||
|
|
||||||
quasar({
|
|
||||||
sassVariables: 'src/quasar-variables.sass',
|
|
||||||
})],
|
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user