feat: manual (#191)
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
* feat: add markdown render deps * feat: add manual route * feat: example toc * feat: add highlight js dependency * feat: add view page * feat: add translations for property and manual in English and Thai * feat: enhance drawer menu with internationalization support and manual section * feat: add conditional internationalization for sub-menu labels * feat: add video support * refactor: add stores and type * fix: wrong path * feat: improve layout structure and enhance scroll functionality in ViewPage * fix: scroll not working * chore: change variable name * feat: show sub tile of manual * feat: add translation for 'Table of Contents' in English and Thai * feat: enhance layout and add conditional rendering for Table of Contents in ViewPage * chore: clean * refactor: use expansion * refactor: show icon * refactor: spacing --------- Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com> Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
This commit is contained in:
puriphatt
GitHub
parent
364a0c807d
commit
dc9f2b9e75
11 changed files with 788 additions and 41 deletions
15
package.json
15
package.json
|
|
@ -15,13 +15,22 @@
|
|||
"changelog:generate": "git-cliff -o CHANGELOG.md"
|
||||
},
|
||||
"dependencies": {
|
||||
"@peaceroad/markdown-it-figure-with-p-caption": "^0.11.0",
|
||||
"@quasar/extras": "^1.16.12",
|
||||
"@tato30/vue-pdf": "^1.11.0",
|
||||
"@vuepic/vue-datepicker": "^8.8.1",
|
||||
"apexcharts": "^4.5.0",
|
||||
"axios": "^1.7.4",
|
||||
"cropperjs": "^1.6.2",
|
||||
"highlight.js": "^11.11.1",
|
||||
"keycloak-js": "^25.0.4",
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-anchor": "^9.2.0",
|
||||
"markdown-it-highlightjs": "^4.2.0",
|
||||
"markdown-it-html5-embed": "^1.0.0",
|
||||
"markdown-it-html5-media": "^0.7.1",
|
||||
"markdown-it-image-figures": "^2.1.1",
|
||||
"markdown-it-video": "^0.6.3",
|
||||
"mime": "^4.0.4",
|
||||
"moment": "^2.30.1",
|
||||
"number-to-words": "^1.2.4",
|
||||
|
|
@ -35,11 +44,11 @@
|
|||
"udsv": "^0.6.0",
|
||||
"uuid": "^10.0.0",
|
||||
"vue": "^3.4.38",
|
||||
"vue3-apexcharts": "^1.7.0",
|
||||
"vue-dragscroll": "^4.0.6",
|
||||
"vue-i18n": "^9.14.0",
|
||||
"vue-pdf": "^4.3.0",
|
||||
"vue-router": "^4.4.3"
|
||||
"vue-router": "^4.4.3",
|
||||
"vue3-apexcharts": "^1.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^9.3.0",
|
||||
|
|
@ -47,6 +56,8 @@
|
|||
"@intlify/unplugin-vue-i18n": "^4.0.0",
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@quasar/app-vite": "2.0.0-beta.19",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/markdown-it-highlightjs": "^3.3.4",
|
||||
"@types/node": "^20.16.1",
|
||||
"@types/number-to-words": "^1.2.3",
|
||||
"@types/uuid": "^10.0.0",
|
||||
|
|
|
|||
244
pnpm-lock.yaml
generated
244
pnpm-lock.yaml
generated
|
|
@ -8,6 +8,9 @@ importers:
|
|||
|
||||
.:
|
||||
dependencies:
|
||||
'@peaceroad/markdown-it-figure-with-p-caption':
|
||||
specifier: ^0.11.0
|
||||
version: 0.11.0
|
||||
'@quasar/extras':
|
||||
specifier: ^1.16.12
|
||||
version: 1.16.12
|
||||
|
|
@ -26,9 +29,33 @@ importers:
|
|||
cropperjs:
|
||||
specifier: ^1.6.2
|
||||
version: 1.6.2
|
||||
highlight.js:
|
||||
specifier: ^11.11.1
|
||||
version: 11.11.1
|
||||
keycloak-js:
|
||||
specifier: ^25.0.4
|
||||
version: 25.0.4
|
||||
markdown-it:
|
||||
specifier: ^14.1.0
|
||||
version: 14.1.0
|
||||
markdown-it-anchor:
|
||||
specifier: ^9.2.0
|
||||
version: 9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.0)
|
||||
markdown-it-highlightjs:
|
||||
specifier: ^4.2.0
|
||||
version: 4.2.0
|
||||
markdown-it-html5-embed:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
markdown-it-html5-media:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
markdown-it-image-figures:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1(markdown-it@14.1.0)
|
||||
markdown-it-video:
|
||||
specifier: ^0.6.3
|
||||
version: 0.6.3
|
||||
mime:
|
||||
specifier: ^4.0.4
|
||||
version: 4.0.4
|
||||
|
|
@ -99,6 +126,12 @@ importers:
|
|||
'@quasar/app-vite':
|
||||
specifier: 2.0.0-beta.19
|
||||
version: 2.0.0-beta.19(@types/node@20.16.1)(eslint@8.57.0)(pinia@2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)))(quasar@2.16.9)(rollup@4.21.0)(terser@5.31.0)(typescript@5.5.4)(vue-router@4.4.3(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
|
||||
'@types/markdown-it':
|
||||
specifier: ^14.1.2
|
||||
version: 14.1.2
|
||||
'@types/markdown-it-highlightjs':
|
||||
specifier: ^3.3.4
|
||||
version: 3.3.4
|
||||
'@types/node':
|
||||
specifier: ^20.16.1
|
||||
version: 20.16.1
|
||||
|
|
@ -582,6 +615,9 @@ packages:
|
|||
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
'@peaceroad/markdown-it-figure-with-p-caption@0.11.0':
|
||||
resolution: {integrity: sha512-nU9H3KsuNCSNRdTX2TC1zeCrBJACUrkb6dtDAwjJ0SSAFLEVOrFgt3NC8WiiPeDdrCxoWa6Gl5td6gTyRzJzJw==}
|
||||
|
||||
'@pkgjs/parseargs@0.11.0':
|
||||
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
|
||||
engines: {node: '>=14'}
|
||||
|
|
@ -800,6 +836,18 @@ packages:
|
|||
'@types/json-schema@7.0.15':
|
||||
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
|
||||
|
||||
'@types/linkify-it@5.0.0':
|
||||
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
|
||||
|
||||
'@types/markdown-it-highlightjs@3.3.4':
|
||||
resolution: {integrity: sha512-hERRPIvWifT0006DIjg1IvuoBzlksk97kPmWjynejzTW9AISS92b/mpu3PFkAWlXYNFC52RqdhNKjdJZ6GC4wg==}
|
||||
|
||||
'@types/markdown-it@14.1.2':
|
||||
resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
|
||||
|
||||
'@types/mdurl@2.0.0':
|
||||
resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
|
||||
|
||||
'@types/mime@1.3.5':
|
||||
resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
|
||||
|
||||
|
|
@ -1108,6 +1156,9 @@ packages:
|
|||
engines: {node: '>=10'}
|
||||
deprecated: This package is no longer supported.
|
||||
|
||||
argparse@1.0.10:
|
||||
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
|
||||
|
||||
argparse@2.0.1:
|
||||
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
|
||||
|
||||
|
|
@ -1685,6 +1736,12 @@ packages:
|
|||
resolution: {integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
entities@1.1.2:
|
||||
resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
|
||||
|
||||
entities@2.1.0:
|
||||
resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
|
||||
|
||||
entities@4.5.0:
|
||||
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
|
||||
engines: {node: '>=0.12'}
|
||||
|
|
@ -2069,6 +2126,13 @@ packages:
|
|||
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
highlight.js@10.7.3:
|
||||
resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
|
||||
|
||||
highlight.js@11.11.1:
|
||||
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
hmac-drbg@1.0.1:
|
||||
resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
|
||||
|
||||
|
|
@ -2347,6 +2411,15 @@ packages:
|
|||
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
linkify-it@2.2.0:
|
||||
resolution: {integrity: sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==}
|
||||
|
||||
linkify-it@3.0.3:
|
||||
resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
|
||||
|
||||
linkify-it@5.0.0:
|
||||
resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
|
||||
|
||||
loader-runner@2.4.0:
|
||||
resolution: {integrity: sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==}
|
||||
engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
|
||||
|
|
@ -2416,9 +2489,52 @@ packages:
|
|||
resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
markdown-it-anchor@9.2.0:
|
||||
resolution: {integrity: sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==}
|
||||
peerDependencies:
|
||||
'@types/markdown-it': '*'
|
||||
markdown-it: '*'
|
||||
|
||||
markdown-it-highlightjs@4.2.0:
|
||||
resolution: {integrity: sha512-NC7pXE8KkOl6xWJVRNt8p6wgJVznXKsE0HgYGdk6DD2tn1l4L9f0ALf3VIoGVkotNU1uGQatSxfBF1zZPUMmuQ==}
|
||||
|
||||
markdown-it-html5-embed@1.0.0:
|
||||
resolution: {integrity: sha512-SPgugO/1+/9sZcgxoxijoTHSUpCUgFCNe1MSuTmDxDkV6NQrVzMclhRMFgE/rcHO+2rhIg3U7Oy80XA/E8ytpg==}
|
||||
|
||||
markdown-it-html5-media@0.7.1:
|
||||
resolution: {integrity: sha512-PfKFD+K1Vpw8+OwfV/VO6Y5Sy1xSS/F1BgbW8Q281LylBBoW47fm4k9Zh0IpsPpM3/HObBD6rooMTaMVlC3PqA==}
|
||||
engines: {node: '>=10.0'}
|
||||
|
||||
markdown-it-image-figures@2.1.1:
|
||||
resolution: {integrity: sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
peerDependencies:
|
||||
markdown-it: '*'
|
||||
|
||||
markdown-it-video@0.6.3:
|
||||
resolution: {integrity: sha512-T4th1kwy0OcvyWSN4u3rqPGxvbDclpucnVSSaH3ZacbGsAts964dxokx9s/I3GYsrDCJs4ogtEeEeVP18DQj0Q==}
|
||||
|
||||
markdown-it@12.3.2:
|
||||
resolution: {integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==}
|
||||
hasBin: true
|
||||
|
||||
markdown-it@14.1.0:
|
||||
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
|
||||
hasBin: true
|
||||
|
||||
markdown-it@8.4.2:
|
||||
resolution: {integrity: sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==}
|
||||
hasBin: true
|
||||
|
||||
md5.js@1.3.5:
|
||||
resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
|
||||
|
||||
mdurl@1.0.1:
|
||||
resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
|
||||
|
||||
mdurl@2.0.0:
|
||||
resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
|
||||
|
||||
media-typer@0.3.0:
|
||||
resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
|
@ -2479,6 +2595,9 @@ packages:
|
|||
resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
mimoza@1.0.0:
|
||||
resolution: {integrity: sha512-+j7SSye/hablu66K/jjeyPmk6WL8RoXfeZ+MMn37vSNDGuaWY/5wm10LpSpxAHX4kNoEwkTWYHba8ePVip+Hqg==}
|
||||
|
||||
minimalistic-assert@1.0.1:
|
||||
resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
|
||||
|
||||
|
|
@ -2718,6 +2837,9 @@ packages:
|
|||
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
p7d-markdown-it-p-captions@0.16.0:
|
||||
resolution: {integrity: sha512-y9jgjgyBRzgoA+Oj10Pu8eyEcr0PRQIu1Zo6iwesWY31Uc7oK3P4LA90JdVhgwkzKpd1hoC6QHymuswgELqk9w==}
|
||||
|
||||
package-json-from-dist@1.0.0:
|
||||
resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
|
||||
|
||||
|
|
@ -2908,6 +3030,10 @@ packages:
|
|||
pumpify@1.5.1:
|
||||
resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
|
||||
|
||||
punycode.js@2.3.1:
|
||||
resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
punycode@1.4.1:
|
||||
resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
|
||||
|
||||
|
|
@ -3256,6 +3382,9 @@ packages:
|
|||
resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
sprintf-js@1.0.3:
|
||||
resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
|
||||
|
||||
ssri@6.0.2:
|
||||
resolution: {integrity: sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==}
|
||||
|
||||
|
|
@ -3451,6 +3580,12 @@ packages:
|
|||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
uc.micro@1.0.6:
|
||||
resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
|
||||
|
||||
uc.micro@2.1.0:
|
||||
resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
|
||||
|
||||
udsv@0.6.0:
|
||||
resolution: {integrity: sha512-na+0EoqqpDeNKZ0HVTtgYtFP9aQgsMwPM77UEK7g4OX2C42w+Qw7QZs9t1ocDGLidtcKJnsPy+o5XrBYaZfzCA==}
|
||||
|
||||
|
|
@ -4090,6 +4225,10 @@ snapshots:
|
|||
'@nodelib/fs.scandir': 2.1.5
|
||||
fastq: 1.17.1
|
||||
|
||||
'@peaceroad/markdown-it-figure-with-p-caption@0.11.0':
|
||||
dependencies:
|
||||
p7d-markdown-it-p-captions: 0.16.0
|
||||
|
||||
'@pkgjs/parseargs@0.11.0':
|
||||
optional: true
|
||||
|
||||
|
|
@ -4304,6 +4443,20 @@ snapshots:
|
|||
|
||||
'@types/json-schema@7.0.15': {}
|
||||
|
||||
'@types/linkify-it@5.0.0': {}
|
||||
|
||||
'@types/markdown-it-highlightjs@3.3.4':
|
||||
dependencies:
|
||||
'@types/markdown-it': 14.1.2
|
||||
highlight.js: 10.7.3
|
||||
|
||||
'@types/markdown-it@14.1.2':
|
||||
dependencies:
|
||||
'@types/linkify-it': 5.0.0
|
||||
'@types/mdurl': 2.0.0
|
||||
|
||||
'@types/mdurl@2.0.0': {}
|
||||
|
||||
'@types/mime@1.3.5': {}
|
||||
|
||||
'@types/node-forge@1.3.11':
|
||||
|
|
@ -4729,6 +4882,10 @@ snapshots:
|
|||
readable-stream: 3.6.2
|
||||
optional: true
|
||||
|
||||
argparse@1.0.10:
|
||||
dependencies:
|
||||
sprintf-js: 1.0.3
|
||||
|
||||
argparse@2.0.1: {}
|
||||
|
||||
arr-diff@4.0.0: {}
|
||||
|
|
@ -5418,6 +5575,10 @@ snapshots:
|
|||
memory-fs: 0.5.0
|
||||
tapable: 1.1.3
|
||||
|
||||
entities@1.1.2: {}
|
||||
|
||||
entities@2.1.0: {}
|
||||
|
||||
entities@4.5.0: {}
|
||||
|
||||
errno@0.1.8:
|
||||
|
|
@ -5957,6 +6118,10 @@ snapshots:
|
|||
dependencies:
|
||||
function-bind: 1.1.2
|
||||
|
||||
highlight.js@10.7.3: {}
|
||||
|
||||
highlight.js@11.11.1: {}
|
||||
|
||||
hmac-drbg@1.0.1:
|
||||
dependencies:
|
||||
hash.js: 1.1.7
|
||||
|
|
@ -6217,6 +6382,18 @@ snapshots:
|
|||
prelude-ls: 1.2.1
|
||||
type-check: 0.4.0
|
||||
|
||||
linkify-it@2.2.0:
|
||||
dependencies:
|
||||
uc.micro: 1.0.6
|
||||
|
||||
linkify-it@3.0.3:
|
||||
dependencies:
|
||||
uc.micro: 1.0.6
|
||||
|
||||
linkify-it@5.0.0:
|
||||
dependencies:
|
||||
uc.micro: 2.1.0
|
||||
|
||||
loader-runner@2.4.0: {}
|
||||
|
||||
loader-utils@1.4.2:
|
||||
|
|
@ -6289,12 +6466,65 @@ snapshots:
|
|||
dependencies:
|
||||
object-visit: 1.0.1
|
||||
|
||||
markdown-it-anchor@9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.0):
|
||||
dependencies:
|
||||
'@types/markdown-it': 14.1.2
|
||||
markdown-it: 14.1.0
|
||||
|
||||
markdown-it-highlightjs@4.2.0:
|
||||
dependencies:
|
||||
highlight.js: 11.11.1
|
||||
|
||||
markdown-it-html5-embed@1.0.0:
|
||||
dependencies:
|
||||
markdown-it: 8.4.2
|
||||
mimoza: 1.0.0
|
||||
|
||||
markdown-it-html5-media@0.7.1:
|
||||
dependencies:
|
||||
markdown-it: 12.3.2
|
||||
|
||||
markdown-it-image-figures@2.1.1(markdown-it@14.1.0):
|
||||
dependencies:
|
||||
markdown-it: 14.1.0
|
||||
|
||||
markdown-it-video@0.6.3: {}
|
||||
|
||||
markdown-it@12.3.2:
|
||||
dependencies:
|
||||
argparse: 2.0.1
|
||||
entities: 2.1.0
|
||||
linkify-it: 3.0.3
|
||||
mdurl: 1.0.1
|
||||
uc.micro: 1.0.6
|
||||
|
||||
markdown-it@14.1.0:
|
||||
dependencies:
|
||||
argparse: 2.0.1
|
||||
entities: 4.5.0
|
||||
linkify-it: 5.0.0
|
||||
mdurl: 2.0.0
|
||||
punycode.js: 2.3.1
|
||||
uc.micro: 2.1.0
|
||||
|
||||
markdown-it@8.4.2:
|
||||
dependencies:
|
||||
argparse: 1.0.10
|
||||
entities: 1.1.2
|
||||
linkify-it: 2.2.0
|
||||
mdurl: 1.0.1
|
||||
uc.micro: 1.0.6
|
||||
|
||||
md5.js@1.3.5:
|
||||
dependencies:
|
||||
hash-base: 3.1.0
|
||||
inherits: 2.0.4
|
||||
safe-buffer: 5.2.1
|
||||
|
||||
mdurl@1.0.1: {}
|
||||
|
||||
mdurl@2.0.0: {}
|
||||
|
||||
media-typer@0.3.0: {}
|
||||
|
||||
memory-fs@0.4.1:
|
||||
|
|
@ -6356,6 +6586,10 @@ snapshots:
|
|||
mimic-response@2.1.0:
|
||||
optional: true
|
||||
|
||||
mimoza@1.0.0:
|
||||
dependencies:
|
||||
mime-db: 1.52.0
|
||||
|
||||
minimalistic-assert@1.0.1: {}
|
||||
|
||||
minimalistic-crypto-utils@1.0.1: {}
|
||||
|
|
@ -6637,6 +6871,8 @@ snapshots:
|
|||
|
||||
p-try@2.2.0: {}
|
||||
|
||||
p7d-markdown-it-p-captions@0.16.0: {}
|
||||
|
||||
package-json-from-dist@1.0.0: {}
|
||||
|
||||
pako@1.0.11: {}
|
||||
|
|
@ -6820,6 +7056,8 @@ snapshots:
|
|||
inherits: 2.0.4
|
||||
pump: 2.0.1
|
||||
|
||||
punycode.js@2.3.1: {}
|
||||
|
||||
punycode@1.4.1: {}
|
||||
|
||||
punycode@2.3.1: {}
|
||||
|
|
@ -7223,6 +7461,8 @@ snapshots:
|
|||
dependencies:
|
||||
extend-shallow: 3.0.2
|
||||
|
||||
sprintf-js@1.0.3: {}
|
||||
|
||||
ssri@6.0.2:
|
||||
dependencies:
|
||||
figgy-pudding: 3.5.2
|
||||
|
|
@ -7448,6 +7688,10 @@ snapshots:
|
|||
|
||||
typescript@5.5.4: {}
|
||||
|
||||
uc.micro@1.0.6: {}
|
||||
|
||||
uc.micro@2.1.0: {}
|
||||
|
||||
udsv@0.6.0: {}
|
||||
|
||||
ufo@1.5.3: {}
|
||||
|
|
|
|||
14
public/manual/toc.json
Normal file
14
public/manual/toc.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
[
|
||||
{
|
||||
"label": "หน้าแรก",
|
||||
"labelEN": "Home Page",
|
||||
"category": "jws",
|
||||
"page": [
|
||||
{
|
||||
"name": "chapter-01-main",
|
||||
"label": "หลัก",
|
||||
"labelEN": "Main"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -150,6 +150,7 @@ export default {
|
|||
notIncluded: 'Not Included',
|
||||
dueDate: 'Due date',
|
||||
year: 'year',
|
||||
tableOfContent: 'Table of Contents',
|
||||
},
|
||||
|
||||
menu: {
|
||||
|
|
@ -194,6 +195,7 @@ export default {
|
|||
personnel: 'Personnel',
|
||||
productService: 'Product and Service',
|
||||
workflow: 'Workflow',
|
||||
property: 'Property',
|
||||
customer: 'Customer',
|
||||
mainData: 'Main Data',
|
||||
agencies: 'Agencies',
|
||||
|
|
@ -240,6 +242,11 @@ export default {
|
|||
mode: 'Mode',
|
||||
addSignature: 'Add Signature',
|
||||
},
|
||||
|
||||
manual: {
|
||||
title: 'Manual',
|
||||
usage: 'การใช้งาน',
|
||||
},
|
||||
},
|
||||
|
||||
noti: {
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@ export default {
|
|||
notIncluded: 'ไม่รวม',
|
||||
dueDate: 'วันครบกำหนด',
|
||||
year: 'ปี',
|
||||
tableOfContent: 'สารบัญ',
|
||||
},
|
||||
|
||||
menu: {
|
||||
|
|
@ -241,6 +242,11 @@ export default {
|
|||
mode: 'โหมด',
|
||||
addSignature: 'เพิ่มลายเซ็น',
|
||||
},
|
||||
|
||||
manual: {
|
||||
title: 'คู่มือ',
|
||||
usage: 'การใช้งาน',
|
||||
},
|
||||
},
|
||||
|
||||
noti: {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Icon } from '@iconify/vue';
|
|||
import useMyBranch from 'stores/my-branch';
|
||||
import { getUserId, getRole } from 'src/services/keycloak';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
type Menu = {
|
||||
label: string;
|
||||
|
|
@ -14,11 +15,13 @@ type Menu = {
|
|||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
isax?: boolean;
|
||||
noI18n?: boolean;
|
||||
children?: Menu[];
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const { locale } = useI18n();
|
||||
|
||||
const userBranch = useMyBranch();
|
||||
const { currentMyBranch } = storeToRefs(userBranch);
|
||||
|
|
@ -58,39 +61,7 @@ function branchSetting() {
|
|||
//TODO: click setting (cog icon) on drawer menu
|
||||
}
|
||||
|
||||
watch(
|
||||
() => currentPath.value,
|
||||
() => {
|
||||
if (currentPath.value === '/') {
|
||||
menuActive.value.fill(false);
|
||||
menuActive.value[0] = true;
|
||||
} else reActiveMenu();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.mini,
|
||||
() => {
|
||||
if (props.mini) {
|
||||
reActiveMenu();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
const uid = getUserId();
|
||||
|
||||
role.value = getRole();
|
||||
|
||||
if (!uid) return;
|
||||
|
||||
if (role.value.includes('system')) {
|
||||
const result = await userBranch.fetchListOptionBranch();
|
||||
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
||||
}
|
||||
const result = await userBranch.fetchListMyBranch(uid);
|
||||
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
||||
|
||||
function initMenu() {
|
||||
menuData.value = [
|
||||
{
|
||||
label: 'menu.manage',
|
||||
|
|
@ -185,7 +156,61 @@ onMounted(async () => {
|
|||
{ label: 'dashboard', route: '/dash-board' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
label: 'menu.manual',
|
||||
icon: 'mdi-book-open-variant-outline',
|
||||
children: [
|
||||
{
|
||||
label: 'usage',
|
||||
route: `/manual`,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
watch(
|
||||
() => currentPath.value,
|
||||
() => {
|
||||
if (currentPath.value === '/') {
|
||||
menuActive.value.fill(false);
|
||||
menuActive.value[0] = true;
|
||||
} else reActiveMenu();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.mini,
|
||||
() => {
|
||||
if (props.mini) {
|
||||
reActiveMenu();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => locale.value,
|
||||
() => {
|
||||
initMenu();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
const uid = getUserId();
|
||||
|
||||
role.value = getRole();
|
||||
|
||||
if (!uid) return;
|
||||
|
||||
if (role.value.includes('system')) {
|
||||
const result = await userBranch.fetchListOptionBranch();
|
||||
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
||||
}
|
||||
const result = await userBranch.fetchListMyBranch(uid);
|
||||
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
||||
|
||||
initMenu();
|
||||
|
||||
menuActive.value = menuData.value.map(() => false);
|
||||
|
||||
|
|
@ -266,10 +291,10 @@ onMounted(async () => {
|
|||
style="white-space: nowrap"
|
||||
:style="!menuActive[i] && `color: var(--foreground)`"
|
||||
>
|
||||
{{ $t(`${menu.label}.title`) }}
|
||||
{{ menu.noI18n ? menu.label : $t(`${menu.label}.title`) }}
|
||||
</span>
|
||||
<q-tooltip :delay="500">
|
||||
{{ $t(`${menu.label}.title`) }}
|
||||
{{ menu.noI18n ? menu.label : $t(`${menu.label}.title`) }}
|
||||
</q-tooltip>
|
||||
|
||||
<q-menu
|
||||
|
|
@ -298,7 +323,11 @@ onMounted(async () => {
|
|||
:id="`sub-menu-${sub.label}`"
|
||||
>
|
||||
<span style="white-space: nowrap">
|
||||
{{ $t(`${menu.label}.${sub.label}`) }}
|
||||
{{
|
||||
sub.noI18n
|
||||
? sub.label
|
||||
: $t(`${menu.label}.${sub.label}`)
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</template>
|
||||
|
|
@ -320,12 +349,16 @@ onMounted(async () => {
|
|||
<nav
|
||||
class="row items-center no-wrap"
|
||||
:class="{
|
||||
active: currentPath === sub.route,
|
||||
active: sub.route && currentPath.includes(sub.route),
|
||||
disabled: sub.disabled,
|
||||
}"
|
||||
>
|
||||
<span class="q-px-md" style="white-space: nowrap">
|
||||
{{ $t(`${menu.label}.${sub.label}`) }}
|
||||
{{
|
||||
sub.noI18n
|
||||
? sub.label
|
||||
: $t(`${menu.label}.${sub.label}`)
|
||||
}}
|
||||
</span>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
81
src/pages/00_manual/MainPage.vue
Normal file
81
src/pages/00_manual/MainPage.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<script setup lang="ts">
|
||||
// NOTE: Library
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
// NOTE: Components
|
||||
|
||||
// NOTE: Stores & Type
|
||||
|
||||
import { useManualStore } from 'src/stores/manual';
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
|
||||
// NOTE: Variable
|
||||
const manualStore = useManualStore();
|
||||
const navigatorStore = useNavigator();
|
||||
const { dataManual } = storeToRefs(manualStore);
|
||||
|
||||
async function fetchManual() {
|
||||
const res = await manualStore.getManual();
|
||||
dataManual.value = res ? res : [];
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navigatorStore.current.title = 'menu.manual.title';
|
||||
navigatorStore.current.path = [{ text: '' }];
|
||||
await fetchManual();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="column full-height no-wrap surface-1 rounded bordered overflow-hidden q-pa-sm"
|
||||
>
|
||||
<section class="scroll q-gutter-y-sm">
|
||||
<q-expansion-item
|
||||
v-for="v in dataManual"
|
||||
:content-inset-level="0.5"
|
||||
class="rounded overflow-hidden bordered"
|
||||
dense
|
||||
>
|
||||
<template #header>
|
||||
<div class="row items-center full-width">
|
||||
<Icon
|
||||
v-if="!!v.icon"
|
||||
:icon="v.icon"
|
||||
:color="'var(--brand-1)'"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
{{ $i18n.locale === 'eng' ? v.labelEN : v.label }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<q-item
|
||||
v-for="x in v.page"
|
||||
clickable
|
||||
dense
|
||||
class="dot items-center rounded q-my-xs"
|
||||
:to="`/manual/${v.category}/${x.name}`"
|
||||
>
|
||||
<Icon
|
||||
v-if="!!x.icon"
|
||||
:icon="x.icon"
|
||||
width="16px"
|
||||
:color="'var(--brand-1)'"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
{{ $i18n.locale === 'eng' ? x.labelEN : x.label }}
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dot::before {
|
||||
content: '•';
|
||||
margin-right: 8px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
288
src/pages/00_manual/ViewPage.vue
Normal file
288
src/pages/00_manual/ViewPage.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<script setup lang="ts">
|
||||
import 'highlight.js/styles/magula.min.css';
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import hljs from 'highlight.js';
|
||||
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
// @ts-expect-error
|
||||
import mditFigureWithPCaption from 'markdown-it-image-figures';
|
||||
// @ts-expect-error
|
||||
import mditMedia from 'markdown-it-html5-media';
|
||||
import mditAnchor from 'markdown-it-anchor';
|
||||
import mditHighlight from 'markdown-it-highlightjs';
|
||||
import { initLang, initTheme } from 'src/utils/ui';
|
||||
import { baseUrl } from 'src/stores/utils';
|
||||
|
||||
import { useManualStore } from 'src/stores/manual';
|
||||
|
||||
const ROUTE = useRoute();
|
||||
const manualStore = useManualStore();
|
||||
|
||||
const md = new MarkdownIt()
|
||||
.use(mditAnchor)
|
||||
.use(mditMedia.html5Media)
|
||||
.use(mditHighlight, { hljs })
|
||||
.use(mditFigureWithPCaption, { figcaption: 'alt' });
|
||||
|
||||
const wrapper = ref<HTMLDivElement>();
|
||||
const category = ref('');
|
||||
const page = ref('');
|
||||
const content = ref('');
|
||||
const contentParsed = ref<ReturnType<typeof md.parse>>();
|
||||
const contentViewing = ref('');
|
||||
const toc = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
if (typeof ROUTE.params['category'] === 'string') {
|
||||
category.value = ROUTE.params['category'];
|
||||
}
|
||||
|
||||
if (typeof ROUTE.params['page'] === 'string') {
|
||||
page.value = ROUTE.params['page'];
|
||||
}
|
||||
|
||||
initLang();
|
||||
initTheme();
|
||||
|
||||
await getContent();
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
window.addEventListener('resize', onResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
window.removeEventListener('resize', onResize);
|
||||
});
|
||||
|
||||
async function getContent() {
|
||||
if (!category.value || !page.value) return;
|
||||
const res = await manualStore.getManualByPage({
|
||||
category: category.value,
|
||||
pageName: page.value,
|
||||
});
|
||||
if (res && res.ok) {
|
||||
const text = await res.text();
|
||||
content.value = text;
|
||||
contentParsed.value = md.parse(text, {});
|
||||
}
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
let current = '';
|
||||
document.querySelectorAll<HTMLElement>('h2,h3').forEach((v) => {
|
||||
if (
|
||||
window.top &&
|
||||
window.top.scrollY + window.innerHeight / 2 > v.offsetTop
|
||||
) {
|
||||
current = v.id;
|
||||
}
|
||||
});
|
||||
contentViewing.value = current;
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
if (window.innerWidth > 1024) {
|
||||
toc.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function scrollTo(id: string) {
|
||||
const pos = document.getElementById(id)?.offsetTop;
|
||||
await nextTick(() => {
|
||||
if (window.innerWidth < 1024) toc.value = false;
|
||||
});
|
||||
if (pos) {
|
||||
wrapper.value?.scrollTo({
|
||||
top: pos,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="full-height q-gutter-sm"
|
||||
:class="{ 'row reverse': $q.screen.gt.xs, column: $q.screen.xs }"
|
||||
>
|
||||
<section
|
||||
v-if="toc"
|
||||
class="surface-1 rounded col-md-3 col-12 scroll full-height"
|
||||
>
|
||||
<q-list padding>
|
||||
<template v-for="(token, idx) in contentParsed" :key="idx">
|
||||
<q-item
|
||||
v-if="token.tag === 'h2' && token.type === 'heading_open'"
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="contentViewing === token.attrGet('id')"
|
||||
@click="scrollTo(token.attrGet('id') || '')"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<q-icon size="11px" name="mdi-circle-medium" />
|
||||
<span class="q-pl-xs">
|
||||
{{ contentParsed?.[idx + 1].content }}
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="token.tag === 'h3' && token.type === 'heading_open'"
|
||||
class="tabNative child-tab"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="contentViewing === token.attrGet('id')"
|
||||
@click="scrollTo(token.attrGet('id') || '')"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<span class="q-pl-xl">
|
||||
{{ contentParsed?.[idx + 1].content }}
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</section>
|
||||
|
||||
<section v-if="!toc && $q.screen.xs">
|
||||
<q-btn
|
||||
dense
|
||||
class="full-width text-capitalize"
|
||||
flat
|
||||
@click="toc = true"
|
||||
color="info"
|
||||
>
|
||||
{{ $t('general.tableOfContent') }}
|
||||
</q-btn>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-if="content || (!toc && $q.screen.xs)"
|
||||
ref="wrapper"
|
||||
class="markdown col scroll full-height rounded"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
"
|
||||
class="surface-1"
|
||||
v-html="
|
||||
md.render(
|
||||
content.replaceAll(
|
||||
'assets/',
|
||||
`${baseUrl}/manual/${category}/assets/`,
|
||||
),
|
||||
)
|
||||
"
|
||||
></div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.toc {
|
||||
top: 4rem;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
|
||||
line-height: 1.5;
|
||||
padding-block: 1rem !important;
|
||||
}
|
||||
|
||||
.markdown :deep(blockquote) {
|
||||
background-color: var(--surface-2);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown :deep(blockquote > p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown :deep(img) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown :deep(p img) {
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.markdown :deep(figure) {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown :deep(figure img) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.markdown :deep(p:has(img:only-child) img) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown :deep(h1) {
|
||||
text-align: left;
|
||||
margin-top: -1rem;
|
||||
margin-inline: -1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
background-color: var(--surface-2);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.markdown :deep(.hljs) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.markdown :deep(a) {
|
||||
color: hsla(var(--info-bg));
|
||||
}
|
||||
|
||||
.markdown :deep(figcaption) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.markdown :deep(h2) {
|
||||
text-align: left;
|
||||
margin-block: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.markdown :deep(h3) {
|
||||
text-align: left;
|
||||
margin-block: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.markdown :deep(video) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -145,6 +145,16 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'Notification',
|
||||
component: () => import('pages/00_notification/MainPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/manual',
|
||||
name: 'Manual',
|
||||
component: () => import('pages/00_manual/MainPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/manual/:category/:page',
|
||||
name: 'ManualView',
|
||||
component: () => import('pages/00_manual/ViewPage.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
|
@ -223,7 +233,6 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'DebitNoteDocumentView',
|
||||
component: () => import('pages/12_debit-note/document-view/MainPage.vue'),
|
||||
},
|
||||
|
||||
// Always leave this as last one,
|
||||
// but you can also remove it
|
||||
{
|
||||
|
|
|
|||
40
src/stores/manual/index.ts
Normal file
40
src/stores/manual/index.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { getToken } from 'src/services/keycloak';
|
||||
import { Manual } from './types';
|
||||
import { baseUrl } from '../utils';
|
||||
|
||||
const ENDPOINT = 'manual';
|
||||
|
||||
export async function getManual() {
|
||||
const res = await api.get<Manual[]>(`/${ENDPOINT}`);
|
||||
if (res.status < 400) {
|
||||
return res.data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export async function getManualByPage(opt: {
|
||||
category: string;
|
||||
pageName: string;
|
||||
}) {
|
||||
const res = await fetch(
|
||||
`${baseUrl}/${ENDPOINT}/${opt.category}/page/${opt.pageName}`,
|
||||
);
|
||||
if (res.status < 400) {
|
||||
return res;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export const useManualStore = defineStore('manual-store', () => {
|
||||
const dataManual = ref<Manual[]>([]);
|
||||
|
||||
return {
|
||||
getManual,
|
||||
getManualByPage,
|
||||
|
||||
dataManual,
|
||||
};
|
||||
});
|
||||
14
src/stores/manual/types.ts
Normal file
14
src/stores/manual/types.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export type Manual = {
|
||||
label: string;
|
||||
labelEN: string;
|
||||
category: string;
|
||||
icon?: string;
|
||||
page: Page[];
|
||||
};
|
||||
|
||||
type Page = {
|
||||
name: string;
|
||||
label: string;
|
||||
labelEN: string;
|
||||
icon?: string;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue