From 6cb16d4fa36231e85072e9ea3dab3c9168055c9d Mon Sep 17 00:00:00 2001 From: Mika Date: Tue, 9 Jul 2024 16:35:30 +0200 Subject: [PATCH] web: refactor listview Co-authored-by: wollenberg.niklas@gmail.com --- package.json | 2 +- pnpm-lock.yaml | 250 ++++++++++++++++++++++- web/components.d.ts | 1 + web/package.json | 1 + web/pnpm-lock.yaml | 51 +++++ web/src/App.vue | 5 + web/src/components/CategoryContainer.vue | 10 +- web/src/components/Clipboard.vue | 20 ++ web/src/components/HeaderBar.vue | 23 ++- web/src/components/ListViewElement.vue | 87 +++++--- 10 files changed, 403 insertions(+), 47 deletions(-) create mode 100644 web/src/components/Clipboard.vue diff --git a/package.json b/package.json index 0967ef4..8d2383a 100644 --- a/package.json +++ b/package.json @@ -1 +1 @@ -{} +{"dependencies":{"@vueuse/core":"^10.11.0"}} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b60ae1..d669bd4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,4 +6,252 @@ settings: importers: - .: {} + .: + dependencies: + '@vueuse/core': + specifier: ^10.11.0 + version: 10.11.0(vue@3.4.31) + +packages: + + '@babel/helper-string-parser@7.24.7': + resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-identifier@7.24.7': + resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==} + engines: {node: '>=6.9.0'} + + '@babel/parser@7.24.7': + resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/types@7.24.7': + resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==} + engines: {node: '>=6.9.0'} + + '@jridgewell/sourcemap-codec@1.4.15': + resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} + + '@types/web-bluetooth@0.0.20': + resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} + + '@vue/compiler-core@3.4.31': + resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==} + + '@vue/compiler-dom@3.4.31': + resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==} + + '@vue/compiler-sfc@3.4.31': + resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==} + + '@vue/compiler-ssr@3.4.31': + resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==} + + '@vue/reactivity@3.4.31': + resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==} + + '@vue/runtime-core@3.4.31': + resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==} + + '@vue/runtime-dom@3.4.31': + resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==} + + '@vue/server-renderer@3.4.31': + resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==} + peerDependencies: + vue: 3.4.31 + + '@vue/shared@3.4.31': + resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==} + + '@vueuse/core@10.11.0': + resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==} + + '@vueuse/metadata@10.11.0': + resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==} + + '@vueuse/shared@10.11.0': + resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==} + + csstype@3.1.3: + resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + + magic-string@0.30.10: + resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} + + nanoid@3.3.7: + resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + picocolors@1.0.1: + resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + + postcss@8.4.39: + resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==} + engines: {node: ^10 || ^12 || >=14} + + source-map-js@1.2.0: + resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} + engines: {node: '>=0.10.0'} + + to-fast-properties@2.0.0: + resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} + engines: {node: '>=4'} + + vue-demi@0.14.8: + resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} + engines: {node: '>=12'} + hasBin: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + + vue@3.4.31: + resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + +snapshots: + + '@babel/helper-string-parser@7.24.7': {} + + '@babel/helper-validator-identifier@7.24.7': {} + + '@babel/parser@7.24.7': + dependencies: + '@babel/types': 7.24.7 + + '@babel/types@7.24.7': + dependencies: + '@babel/helper-string-parser': 7.24.7 + '@babel/helper-validator-identifier': 7.24.7 + to-fast-properties: 2.0.0 + + '@jridgewell/sourcemap-codec@1.4.15': {} + + '@types/web-bluetooth@0.0.20': {} + + '@vue/compiler-core@3.4.31': + dependencies: + '@babel/parser': 7.24.7 + '@vue/shared': 3.4.31 + entities: 4.5.0 + estree-walker: 2.0.2 + source-map-js: 1.2.0 + + '@vue/compiler-dom@3.4.31': + dependencies: + '@vue/compiler-core': 3.4.31 + '@vue/shared': 3.4.31 + + '@vue/compiler-sfc@3.4.31': + dependencies: + '@babel/parser': 7.24.7 + '@vue/compiler-core': 3.4.31 + '@vue/compiler-dom': 3.4.31 + '@vue/compiler-ssr': 3.4.31 + '@vue/shared': 3.4.31 + estree-walker: 2.0.2 + magic-string: 0.30.10 + postcss: 8.4.39 + source-map-js: 1.2.0 + + '@vue/compiler-ssr@3.4.31': + dependencies: + '@vue/compiler-dom': 3.4.31 + '@vue/shared': 3.4.31 + + '@vue/reactivity@3.4.31': + dependencies: + '@vue/shared': 3.4.31 + + '@vue/runtime-core@3.4.31': + dependencies: + '@vue/reactivity': 3.4.31 + '@vue/shared': 3.4.31 + + '@vue/runtime-dom@3.4.31': + dependencies: + '@vue/reactivity': 3.4.31 + '@vue/runtime-core': 3.4.31 + '@vue/shared': 3.4.31 + csstype: 3.1.3 + + '@vue/server-renderer@3.4.31(vue@3.4.31)': + dependencies: + '@vue/compiler-ssr': 3.4.31 + '@vue/shared': 3.4.31 + vue: 3.4.31 + + '@vue/shared@3.4.31': {} + + '@vueuse/core@10.11.0(vue@3.4.31)': + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 10.11.0 + '@vueuse/shared': 10.11.0(vue@3.4.31) + vue-demi: 0.14.8(vue@3.4.31) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + '@vueuse/metadata@10.11.0': {} + + '@vueuse/shared@10.11.0(vue@3.4.31)': + dependencies: + vue-demi: 0.14.8(vue@3.4.31) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + csstype@3.1.3: {} + + entities@4.5.0: {} + + estree-walker@2.0.2: {} + + magic-string@0.30.10: + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + + nanoid@3.3.7: {} + + picocolors@1.0.1: {} + + postcss@8.4.39: + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.1 + source-map-js: 1.2.0 + + source-map-js@1.2.0: {} + + to-fast-properties@2.0.0: {} + + vue-demi@0.14.8(vue@3.4.31): + dependencies: + vue: 3.4.31 + + vue@3.4.31: + dependencies: + '@vue/compiler-dom': 3.4.31 + '@vue/compiler-sfc': 3.4.31 + '@vue/runtime-dom': 3.4.31 + '@vue/server-renderer': 3.4.31(vue@3.4.31) + '@vue/shared': 3.4.31 diff --git a/web/components.d.ts b/web/components.d.ts index c1e707d..f1d75da 100644 --- a/web/components.d.ts +++ b/web/components.d.ts @@ -8,6 +8,7 @@ export {} declare module 'vue' { export interface GlobalComponents { CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default'] + Clipboard: typeof import('./src/components/Clipboard.vue')['default'] HeaderBar: typeof import('./src/components/HeaderBar.vue')['default'] ListViewElement: typeof import('./src/components/ListViewElement.vue')['default'] LoginPage: typeof import('./src/components/loginPage.vue')['default'] diff --git a/web/package.json b/web/package.json index 1c233fd..31e7076 100644 --- a/web/package.json +++ b/web/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "@mdi/font": "6.2.95", + "@vueuse/core": "^10.11.0", "axios": "^1.7.2", "lucide-vue-next": "^0.402.0", "roboto-fontface": "*", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 9610ddb..e77ff72 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@mdi/font': specifier: 6.2.95 version: 6.2.95 + '@vueuse/core': + specifier: ^10.11.0 + version: 10.11.0(vue@3.4.31(typescript@5.5.3)) axios: specifier: ^1.7.2 version: 1.7.2 @@ -328,6 +331,9 @@ packages: '@types/node@20.14.9': resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==} + '@types/web-bluetooth@0.0.20': + resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} + '@vitejs/plugin-vue@5.0.5': resolution: {integrity: sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==} engines: {node: ^18.0.0 || >=20.0.0} @@ -387,6 +393,15 @@ packages: vue: ^3.0.0 vuetify: ^3.0.0 + '@vueuse/core@10.11.0': + resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==} + + '@vueuse/metadata@10.11.0': + resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==} + + '@vueuse/shared@10.11.0': + resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==} + acorn@8.12.1: resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==} engines: {node: '>=0.4.0'} @@ -721,6 +736,17 @@ packages: vscode-uri@3.0.8: resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + vue-demi@0.14.8: + resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} + engines: {node: '>=12'} + hasBin: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue-template-compiler@2.7.16: resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==} @@ -929,6 +955,8 @@ snapshots: dependencies: undici-types: 5.26.5 + '@types/web-bluetooth@0.0.20': {} + '@vitejs/plugin-vue@5.0.5(vite@5.3.3(@types/node@20.14.9)(sass@1.77.6))(vue@3.4.31(typescript@5.5.3))': dependencies: vite: 5.3.3(@types/node@20.14.9)(sass@1.77.6) @@ -1019,6 +1047,25 @@ snapshots: vue: 3.4.31(typescript@5.5.3) vuetify: 3.6.11(typescript@5.5.3)(vite-plugin-vuetify@2.0.3)(vue@3.4.31(typescript@5.5.3)) + '@vueuse/core@10.11.0(vue@3.4.31(typescript@5.5.3))': + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 10.11.0 + '@vueuse/shared': 10.11.0(vue@3.4.31(typescript@5.5.3)) + vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3)) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + '@vueuse/metadata@10.11.0': {} + + '@vueuse/shared@10.11.0(vue@3.4.31(typescript@5.5.3))': + dependencies: + vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3)) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + acorn@8.12.1: {} anymatch@3.1.3: @@ -1337,6 +1384,10 @@ snapshots: vscode-uri@3.0.8: {} + vue-demi@0.14.8(vue@3.4.31(typescript@5.5.3)): + dependencies: + vue: 3.4.31(typescript@5.5.3) + vue-template-compiler@2.7.16: dependencies: de-indent: 1.0.2 diff --git a/web/src/App.vue b/web/src/App.vue index e6fc788..c85c58a 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -10,6 +10,7 @@
  • +
    • @@ -30,5 +31,9 @@ import { store } from './store'; li { list-style-type: none; } + + html,body,main { + background-color: #E3E3E3 + } diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue index 8720a5e..5eb8a7d 100644 --- a/web/src/components/CategoryContainer.vue +++ b/web/src/components/CategoryContainer.vue @@ -6,9 +6,17 @@ licenseKey="321z8321789" startDate="12.12.2020" endDate="13.12.2021" - :amount=1 + :amount=undefined notes="No notes" /> + + Copy + Copied! + +

    Current copied: {{ text || 'none' }}

    + +

    + Your browser does not support Clipboard API +

    + diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue index 1cb705e..776babb 100644 --- a/web/src/components/HeaderBar.vue +++ b/web/src/components/HeaderBar.vue @@ -6,20 +6,21 @@ prominent > -
    + + + + + + - - - - - - - +
    + + + > + + @@ -40,9 +43,9 @@