@mixd-id/web-scaffold 0.1.2207250711 → 0.1.2301231313

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/index.html +13 -15
  2. package/package.json +9 -3
  3. package/postcss.config.js +1 -1
  4. package/public/images/mixd-logo2.png +0 -0
  5. package/server.js +29 -2
  6. package/src/App.vue +15 -1
  7. package/src/{components/UI.vue → UI.vue} +121 -41
  8. package/src/api/feed.js +29 -0
  9. package/src/api/inbox/index.js +33 -0
  10. package/src/api/inbox/message/comment.js +33 -0
  11. package/src/api/inbox/message/index.js +34 -0
  12. package/src/api/index.js +7 -0
  13. package/src/components/Ahref.vue +208 -0
  14. package/src/components/Alert.vue +104 -13
  15. package/src/components/Button.vue +170 -80
  16. package/src/components/Carousel.vue +93 -67
  17. package/src/components/ChatTyping.vue +69 -0
  18. package/src/components/Checkbox.vue +152 -0
  19. package/src/components/ContextMenu.vue +124 -105
  20. package/src/components/CopyToClipboard.vue +59 -0
  21. package/src/components/Datepicker.vue +312 -0
  22. package/src/components/Dropdown.vue +89 -16
  23. package/src/components/ErrorText.vue +36 -0
  24. package/src/components/Feed.vue +118 -0
  25. package/src/components/HTMLEditor.vue +169 -0
  26. package/src/components/Image.vue +122 -57
  27. package/src/components/ListItem.vue +147 -0
  28. package/src/components/ListPage1.vue +422 -0
  29. package/src/components/ListPage1Filter.vue +188 -0
  30. package/src/components/ListPage2.vue +459 -0
  31. package/src/components/Modal.vue +118 -98
  32. package/src/components/OTPField.vue +126 -0
  33. package/src/components/Radio.vue +134 -0
  34. package/src/components/SearchButton.vue +57 -0
  35. package/src/components/Slider.vue +75 -55
  36. package/src/components/SplitPane.vue +129 -0
  37. package/src/components/Switch.vue +36 -9
  38. package/src/components/TableView.vue +201 -0
  39. package/src/components/TableViewHead.vue +159 -0
  40. package/src/components/Tabs.vue +68 -0
  41. package/src/components/Textarea.vue +184 -0
  42. package/src/components/Textbox.vue +188 -0
  43. package/src/components/{TimePicker.vue → Timepicker.vue} +7 -5
  44. package/src/components/Toast.vue +93 -0
  45. package/src/components/VirtualScroll.vue +130 -176
  46. package/src/components/VirtualTable.vue +465 -0
  47. package/src/entry-client.js +7 -1
  48. package/src/entry-server.js +5 -4
  49. package/src/helper.js +7 -2
  50. package/src/helpers.mjs +31 -0
  51. package/src/index.css +3 -0
  52. package/src/index.js +69 -56
  53. package/src/main.js +13 -7
  54. package/src/pages/Home.vue +3 -0
  55. package/src/pages/Inbox.vue +129 -0
  56. package/src/pages/Message.vue +258 -0
  57. package/src/pages/Playground.vue +237 -0
  58. package/src/pages/Test.vue +455 -0
  59. package/src/pages/playground/Ahref.vue +73 -0
  60. package/src/pages/playground/Alert.vue +80 -0
  61. package/src/pages/playground/Button.vue +77 -0
  62. package/src/pages/playground/Carousel.vue +67 -0
  63. package/src/pages/playground/ContextMenu.vue +77 -0
  64. package/src/pages/playground/Datepicker.vue +69 -0
  65. package/src/pages/playground/Dropdown.vue +71 -0
  66. package/src/pages/playground/Image.vue +67 -0
  67. package/src/pages/playground/ListItem.vue +109 -0
  68. package/src/pages/playground/Modal.vue +118 -0
  69. package/src/pages/playground/Slider.vue +68 -0
  70. package/src/pages/playground/Switch.vue +57 -0
  71. package/src/pages/playground/Textarea.vue +78 -0
  72. package/src/pages/playground/Textbox.vue +80 -0
  73. package/src/pages/playground/Toast.vue +80 -0
  74. package/src/pages/playground/components/Preview.vue +15 -0
  75. package/src/pages/playground/components/PropertyTable.vue +38 -0
  76. package/src/pages/playground/components/SourceCode.vue +71 -0
  77. package/src/router.js +34 -1
  78. package/src/stores/components.js +193 -0
  79. package/src/themes/default/index.js +200 -0
  80. package/tailwind.config.js +5 -60
  81. package/vite.config.js +5 -4
  82. package/src/components/Alert.js +0 -151
  83. package/src/components/ContextMenu0.vue +0 -180
  84. package/src/components/DatePicker.vue +0 -330
  85. package/src/components/VirtualScroll0.vue +0 -375
  86. package/src/themes/index.js +0 -66
package/index.html CHANGED
@@ -1,24 +1,22 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
3
+ <head>
4
4
  <meta charset="UTF-8" />
5
- <link rel="icon" href="/favicon.ico" />
6
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <meta name="description" content="/* default description */" />
8
- <meta name="keywords" content="/* default keywords */" />
9
- <meta name="author" content="/* default author */" />
10
- <title><!-- default title --></title>
11
- <script id="hydration">window.__hydration = JSON.parse('<!--serialize-pinia-->')</script>
6
+ <title>Untitled</title>
7
+ <script id="aHlj"><!--serialize-pinia--></script>
8
+ <script id="aHlk">window.__hydration = JSON.parse(document.getElementById('aHlj').innerText)</script>
12
9
  <script>
13
10
  document.querySelector('html').setAttribute('data-theme', localStorage.getItem('theme') ?? '')
14
11
  </script>
15
- <!--preload-links-->
16
- </head>
17
- <body>
18
- <div><!--app-html--><div class="context-overlay"><!--context-overlay--></div></div>
19
- <div class="alert-overlay"><!--alert-overlay--></div>
20
- <div class="modal-overlay"><!--modal-overlay--></div>
21
-
12
+ <!--preload-links-->
13
+ </head>
14
+ <body>
15
+ <div><!--app-html--></div>
16
+ <div class="bW9k"><!--modal-overlay--></div>
17
+ <div class="Y29u"><!--context-overlay--></div>
18
+ <div class="YWxl"><!--alert-overlay--></div>
19
+ <div class="dG9h"><!--toast-overlay--></div>
22
20
  <script type="module" src="/src/entry-client.js"></script>
23
- </body>
21
+ </body>
24
22
  </html>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mixd-id/web-scaffold",
3
3
  "private": false,
4
- "version": "0.1.2207250711",
4
+ "version": "0.1.2301231313",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
@@ -10,22 +10,29 @@
10
10
  "main": "./src/index.js",
11
11
  "exports": {
12
12
  ".": "./src/index.js",
13
- "./themes/default": "./src/themes/index.js"
13
+ "./themes/default": "./src/themes/default/index.js",
14
+ "./themes/kliknss": "./src/themes/kliknss/index.js",
15
+ "./UI.vue": "./src/UI.vue",
16
+ "./helpers.mjs": "./src/helpers.mjs"
14
17
  },
15
18
  "dependencies": {
16
19
  "@faker-js/faker": "^7.3.0",
17
20
  "@tailwindcss/line-clamp": "^0.4.0",
21
+ "@vueuse/core": "^9.0.2",
22
+ "axios": "^0.27.2",
18
23
  "compression": "^1.7.4",
19
24
  "cookie-parser": "^1.4.6",
20
25
  "cors": "^2.8.5",
21
26
  "daisyui": "^2.19.0",
22
27
  "dayjs": "^1.11.2",
23
28
  "express": "^4.18.1",
29
+ "glob": "^8.0.3",
24
30
  "lodash": "^4.17.21",
25
31
  "nprogress": "^0.2.0",
26
32
  "pinia": "^2.0.14",
27
33
  "prismjs": "^1.28.0",
28
34
  "serve-static": "^1.15.0",
35
+ "tailwindcss": "^3.2.4",
29
36
  "vue": "^3.2.25",
30
37
  "vue-router": "^4.0.14"
31
38
  },
@@ -33,7 +40,6 @@
33
40
  "@vitejs/plugin-vue": "^2.2.0",
34
41
  "autoprefixer": "^10.4.4",
35
42
  "postcss": "^8.4.12",
36
- "tailwindcss": "^3.0.23",
37
43
  "vite": "^2.8.0"
38
44
  },
39
45
  "description": "This scaffold based on express vitejs vuejs",
package/postcss.config.js CHANGED
@@ -3,4 +3,4 @@ module.exports = {
3
3
  tailwindcss: {},
4
4
  autoprefixer: {},
5
5
  },
6
- }
6
+ }
package/public/images/mixd-logo2.png ADDED
Binary file
package/server.js CHANGED
@@ -4,11 +4,34 @@ const path = require('path')
4
4
  const express = require('express')
5
5
  const cors = require('cors')
6
6
  const cookieParser = require('cookie-parser')
7
+ const apiModules = require("./src/api")
7
8
 
8
9
  const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
10
+ const isProd = process.argv.includes('--prod')
9
11
 
10
12
  const root = process.cwd()
11
13
 
14
+ const apiMiddleware = async(req, res, next) => {
15
+
16
+ if(req.originalUrl.indexOf('/api') >= 0){
17
+
18
+ const module = req.originalUrl.replace('/api', '').split('?')[0]
19
+ const method = req.method === 'POST' ? 'store' : 'index'
20
+
21
+ if(apiModules[module] && apiModules[module][method]){
22
+ const json = await apiModules[module][method](req, res)
23
+ if(json) res.send(json)
24
+ }
25
+ else{
26
+ console.warn(`API url not handled: ${req.originalUrl}, ${module}@${method}`)
27
+ }
28
+ res.end()
29
+ }
30
+ else{
31
+ next()
32
+ }
33
+ }
34
+
12
35
  async function createServer() {
13
36
  const resolve = (p) => path.resolve(__dirname, p)
14
37
 
@@ -20,6 +43,7 @@ async function createServer() {
20
43
  app.disable('x-powered-by')
21
44
  app.use(cookieParser())
22
45
 
46
+ app.use(apiMiddleware)
23
47
  app.use(express.json())
24
48
  app.use(cors())
25
49
 
@@ -30,6 +54,9 @@ async function createServer() {
30
54
  logLevel: isTest ? 'error' : 'info',
31
55
  server: {
32
56
  middlewareMode: 'ssr',
57
+ hmr: {
58
+ port: 24677
59
+ },
33
60
  watch: {
34
61
  usePolling: true,
35
62
  interval: 100
@@ -88,8 +115,8 @@ async function createServer() {
88
115
 
89
116
  createServer().then(({ http }) =>{
90
117
 
91
- http.listen(3001, () => {
92
- console.log('Listening on port ' + 3001)
118
+ http.listen(3002, () => {
119
+ console.log('Listening on port ' + 3002)
93
120
  })
94
121
 
95
122
  })
package/src/App.vue CHANGED
@@ -1,3 +1,17 @@
1
1
  <template>
2
2
  <router-view></router-view>
3
- </template>
3
+ </template>
4
+
5
+ <script>
6
+
7
+ </script>
8
+
9
+ <style>
10
+
11
+
12
+ </style>
13
+
14
+ <style module>
15
+
16
+
17
+ </style>
package/src/{components/UI.vue → UI.vue} RENAMED
@@ -23,7 +23,25 @@
23
23
 
24
24
  <div>
25
25
 
26
- <div class="ui-typography bg-base-600 border-[1px] border-base-700 rounded-lg">
26
+ <div class="ui-toast bg-base-600 border-[1px] border-base-700 rounded-lg">
27
+ <div class="px-4 p-2 border-b-[1px] border-base-700">
28
+ <h2 class="text-xl font-light">Toast</h2>
29
+ </div>
30
+ <div class="p-4">
31
+ <Button @click="toast('Hello, im displayed in toast...')">Show Toast</Button>
32
+ <Toast :state="!!showToast" @dismiss="showToast = null">
33
+ <div class="flex p-3">
34
+ <div></div>
35
+ <div>{{ showToast ? showToast.text : '' }}</div>
36
+ <div>
37
+ <button type="button" @click="showToast = null">Dismiss</button>
38
+ </div>
39
+ </div>
40
+ </Toast>
41
+ </div>
42
+ </div>
43
+
44
+ <div class="ui-typography bg-base-600 border-[1px] border-base-700 rounded-lg my-4">
27
45
  <div class="px-4 p-2 border-b-[1px] border-base-700">
28
46
  <h2 class="text-xl font-light">Typography</h2>
29
47
  </div>
@@ -421,13 +439,13 @@
421
439
  <div class="p-4">
422
440
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
423
441
  <div>
424
- <Button class="w-full" @click="showModal1 = 1">Open...</Button>
442
+ <Button @click="showModal1 = 1">Open...</Button>
425
443
  <Modal :state="showModal1" width="480" height="600">
426
444
  <template #head>
427
445
  <div class="p-5 relative">
428
446
  <h3>Modal 1</h3>
429
447
  <div class="absolute top-0 right-0">
430
- <Button type="minimal" class="p-3" @click="showModal1 = 0">
448
+ <Button variant="minimal" class="p-3" @click="showModal1 = 0">
431
449
  <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text" xmlns="http://www.w3.org/2000/svg">
432
450
  <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
433
451
  </svg>
@@ -444,7 +462,7 @@
444
462
  </Button>
445
463
  </div>
446
464
  <div class="pl-2">
447
- <Button type="outline" @click="showModal1 = 0">
465
+ <Button variant="outline" @click="showModal1 = 0">
448
466
  <div class="px-2">
449
467
  Cancel
450
468
  </div>
@@ -492,46 +510,85 @@
492
510
  <div>
493
511
  <label>Primary</label>
494
512
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-1">
495
- <Button type="primary">Primary</Button>
496
- <Button type="primary">
497
- <svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
498
- <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5257 3.23927L5.52566 5.23927C4.91314 5.44344 4.5 6.01665 4.5 6.66229V12C4.5 14.2071 5.60849 16.0569 7.13263 17.5651C8.65915 19.0756 10.4852 20.1206 11.6051 20.6747C11.8585 20.8001 12.1415 20.8001 12.3949 20.6747C13.5148 20.1206 15.3408 19.0756 16.8674 17.5651C18.3915 16.0569 19.5 14.2071 19.5 12V6.66229C19.5 6.01665 19.0869 5.44344 18.4743 5.23927L12.4743 3.23927C12.1664 3.13663 11.8336 3.13663 11.5257 3.23927ZM5.05132 3.81624C3.82629 4.22458 3 5.371 3 6.66229V12C3 17.502 8.56019 20.8417 10.9399 22.0192C11.6125 22.3519 12.3875 22.3519 13.0601 22.0192C15.4398 20.8417 21 17.502 21 12V6.66229C21 5.371 20.1737 4.22459 18.9487 3.81624L12.9487 1.81624C12.3329 1.61098 11.6671 1.61098 11.0513 1.81624L5.05132 3.81624Z"/>
499
- <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L12.096 13.9646C11.4907 14.57 10.5093 14.57 9.90399 13.9646L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L10.9646 12.904C10.9842 12.9235 11.0158 12.9235 11.0354 12.904L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z"/>
500
- </svg>
501
- <span class="overflow-hidden text-ellipsis">Primary</span>
502
- </Button>
503
- <Button type="primary" :state="2"></Button>
504
- <Button type="primary" :state="-1">Disabled</Button>
513
+ <div>
514
+ <Button variant="primary">Primary</Button>
515
+ </div>
516
+ <div>
517
+ <Button variant="primary">
518
+ <svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
519
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5257 3.23927L5.52566 5.23927C4.91314 5.44344 4.5 6.01665 4.5 6.66229V12C4.5 14.2071 5.60849 16.0569 7.13263 17.5651C8.65915 19.0756 10.4852 20.1206 11.6051 20.6747C11.8585 20.8001 12.1415 20.8001 12.3949 20.6747C13.5148 20.1206 15.3408 19.0756 16.8674 17.5651C18.3915 16.0569 19.5 14.2071 19.5 12V6.66229C19.5 6.01665 19.0869 5.44344 18.4743 5.23927L12.4743 3.23927C12.1664 3.13663 11.8336 3.13663 11.5257 3.23927ZM5.05132 3.81624C3.82629 4.22458 3 5.371 3 6.66229V12C3 17.502 8.56019 20.8417 10.9399 22.0192C11.6125 22.3519 12.3875 22.3519 13.0601 22.0192C15.4398 20.8417 21 17.502 21 12V6.66229C21 5.371 20.1737 4.22459 18.9487 3.81624L12.9487 1.81624C12.3329 1.61098 11.6671 1.61098 11.0513 1.81624L5.05132 3.81624Z"/>
520
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L12.096 13.9646C11.4907 14.57 10.5093 14.57 9.90399 13.9646L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L10.9646 12.904C10.9842 12.9235 11.0158 12.9235 11.0354 12.904L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z"/>
521
+ </svg>
522
+ <span class="overflow-hidden text-ellipsis">Primary</span>
523
+ </Button>
524
+ </div>
525
+ <div>
526
+ <Button variant="primary" :state="2"></Button>
527
+ </div>
528
+ <div>
529
+ <Button variant="primary" :state="-1">Disabled</Button>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ <div class="my-3">
534
+ <label>Secondary</label>
535
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-1">
536
+ <div>
537
+ <Button variant="outline">Outline</Button>
538
+ </div>
539
+ <div>
540
+ <Button variant="outline">
541
+ <svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
542
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5257 3.23927L5.52566 5.23927C4.91314 5.44344 4.5 6.01665 4.5 6.66229V12C4.5 14.2071 5.60849 16.0569 7.13263 17.5651C8.65915 19.0756 10.4852 20.1206 11.6051 20.6747C11.8585 20.8001 12.1415 20.8001 12.3949 20.6747C13.5148 20.1206 15.3408 19.0756 16.8674 17.5651C18.3915 16.0569 19.5 14.2071 19.5 12V6.66229C19.5 6.01665 19.0869 5.44344 18.4743 5.23927L12.4743 3.23927C12.1664 3.13663 11.8336 3.13663 11.5257 3.23927ZM5.05132 3.81624C3.82629 4.22458 3 5.371 3 6.66229V12C3 17.502 8.56019 20.8417 10.9399 22.0192C11.6125 22.3519 12.3875 22.3519 13.0601 22.0192C15.4398 20.8417 21 17.502 21 12V6.66229C21 5.371 20.1737 4.22459 18.9487 3.81624L12.9487 1.81624C12.3329 1.61098 11.6671 1.61098 11.0513 1.81624L5.05132 3.81624Z"/>
543
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L12.096 13.9646C11.4907 14.57 10.5093 14.57 9.90399 13.9646L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L10.9646 12.904C10.9842 12.9235 11.0158 12.9235 11.0354 12.904L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z"/>
544
+ </svg>
545
+ <span class="overflow-hidden text-ellipsis">Outline</span>
546
+ </Button>
547
+ </div>
548
+ <div>
549
+ <Button variant="outline" :state="2"></Button>
550
+ </div>
551
+ <div>
552
+ <Button variant="outline" :state="-1">Disabled</Button>
553
+ </div>
505
554
  </div>
506
555
  </div>
507
556
  <div class="my-3">
508
557
  <label>Outline</label>
509
558
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-1">
510
- <Button type="outline">Outline</Button>
511
- <Button type="outline">
512
- <svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
513
- <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5257 3.23927L5.52566 5.23927C4.91314 5.44344 4.5 6.01665 4.5 6.66229V12C4.5 14.2071 5.60849 16.0569 7.13263 17.5651C8.65915 19.0756 10.4852 20.1206 11.6051 20.6747C11.8585 20.8001 12.1415 20.8001 12.3949 20.6747C13.5148 20.1206 15.3408 19.0756 16.8674 17.5651C18.3915 16.0569 19.5 14.2071 19.5 12V6.66229C19.5 6.01665 19.0869 5.44344 18.4743 5.23927L12.4743 3.23927C12.1664 3.13663 11.8336 3.13663 11.5257 3.23927ZM5.05132 3.81624C3.82629 4.22458 3 5.371 3 6.66229V12C3 17.502 8.56019 20.8417 10.9399 22.0192C11.6125 22.3519 12.3875 22.3519 13.0601 22.0192C15.4398 20.8417 21 17.502 21 12V6.66229C21 5.371 20.1737 4.22459 18.9487 3.81624L12.9487 1.81624C12.3329 1.61098 11.6671 1.61098 11.0513 1.81624L5.05132 3.81624Z"/>
514
- <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L12.096 13.9646C11.4907 14.57 10.5093 14.57 9.90399 13.9646L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L10.9646 12.904C10.9842 12.9235 11.0158 12.9235 11.0354 12.904L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z"/>
515
- </svg>
516
- <span class="overflow-hidden text-ellipsis">Outline</span>
517
- </Button>
518
- <Button type="outline" :state="2"></Button>
519
- <Button type="outline" :state="-1">Disabled</Button>
559
+ <div>
560
+ <Button variant="outline">Outline</Button>
561
+ </div>
562
+ <div>
563
+ <Button variant="outline">
564
+ <svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
565
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5257 3.23927L5.52566 5.23927C4.91314 5.44344 4.5 6.01665 4.5 6.66229V12C4.5 14.2071 5.60849 16.0569 7.13263 17.5651C8.65915 19.0756 10.4852 20.1206 11.6051 20.6747C11.8585 20.8001 12.1415 20.8001 12.3949 20.6747C13.5148 20.1206 15.3408 19.0756 16.8674 17.5651C18.3915 16.0569 19.5 14.2071 19.5 12V6.66229C19.5 6.01665 19.0869 5.44344 18.4743 5.23927L12.4743 3.23927C12.1664 3.13663 11.8336 3.13663 11.5257 3.23927ZM5.05132 3.81624C3.82629 4.22458 3 5.371 3 6.66229V12C3 17.502 8.56019 20.8417 10.9399 22.0192C11.6125 22.3519 12.3875 22.3519 13.0601 22.0192C15.4398 20.8417 21 17.502 21 12V6.66229C21 5.371 20.1737 4.22459 18.9487 3.81624L12.9487 1.81624C12.3329 1.61098 11.6671 1.61098 11.0513 1.81624L5.05132 3.81624Z"/>
566
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L12.096 13.9646C11.4907 14.57 10.5093 14.57 9.90399 13.9646L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L10.9646 12.904C10.9842 12.9235 11.0158 12.9235 11.0354 12.904L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z"/>
567
+ </svg>
568
+ <span class="overflow-hidden text-ellipsis">Outline</span>
569
+ </Button>
570
+ </div>
571
+ <div>
572
+ <Button variant="outline" :state="2"></Button>
573
+ </div>
574
+ <div>
575
+ <Button variant="outline" :state="-1">Disabled</Button>
576
+ </div>
520
577
  </div>
521
578
  </div>
579
+
522
580
  <div>
523
- <label>Secondary</label>
581
+ <label>Size</label>
524
582
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-1">
525
- <Button type="secondary">Secondary</Button>
526
- <Button type="secondary">
527
- <svg width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
528
- <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5257 3.23927L5.52566 5.23927C4.91314 5.44344 4.5 6.01665 4.5 6.66229V12C4.5 14.2071 5.60849 16.0569 7.13263 17.5651C8.65915 19.0756 10.4852 20.1206 11.6051 20.6747C11.8585 20.8001 12.1415 20.8001 12.3949 20.6747C13.5148 20.1206 15.3408 19.0756 16.8674 17.5651C18.3915 16.0569 19.5 14.2071 19.5 12V6.66229C19.5 6.01665 19.0869 5.44344 18.4743 5.23927L12.4743 3.23927C12.1664 3.13663 11.8336 3.13663 11.5257 3.23927ZM5.05132 3.81624C3.82629 4.22458 3 5.371 3 6.66229V12C3 17.502 8.56019 20.8417 10.9399 22.0192C11.6125 22.3519 12.3875 22.3519 13.0601 22.0192C15.4398 20.8417 21 17.502 21 12V6.66229C21 5.371 20.1737 4.22459 18.9487 3.81624L12.9487 1.81624C12.3329 1.61098 11.6671 1.61098 11.0513 1.81624L5.05132 3.81624Z"/>
529
- <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L12.096 13.9646C11.4907 14.57 10.5093 14.57 9.90399 13.9646L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L10.9646 12.904C10.9842 12.9235 11.0158 12.9235 11.0354 12.904L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z"/>
530
- </svg>
531
- <span class="overflow-hidden text-ellipsis">Secondary</span>
532
- </Button>
533
- <Button type="secondary" :state="2"></Button>
534
- <Button type="secondary" :state="-1">Disabled</Button>
583
+ <div>
584
+ <Button variant="outline" size="sm" class="px-5">Small</Button>
585
+ </div>
586
+ <div>
587
+ <Button variant="secondary">Normal</Button>
588
+ </div>
589
+ <div>
590
+ <Button variant="primary" size="lg">Large</Button>
591
+ </div>
535
592
  </div>
536
593
  </div>
537
594
  </div>
@@ -558,7 +615,7 @@
558
615
  <Button class="w-full" @click="alert('An error occurred', { description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ullamcorper risus. Phasellus in lobortis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tempus quam non metus semper accumsan. In et justo in magna facilisis porta. Integer eget semper eros. Nam eu nibh at metus dictum volutpat molestie eu lacus. Nunc scelerisque sem eget egestas dictum. Nullam condimentum risus libero, sit amet eleifend diam interdum sit amet. Nulla facilisi. Cras venenatis orci risus, at interdum augue viverra ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur pretium nunc et ante eleifend, vel euismod dui rutrum. Duis luctus felis a tellus pellentesque, vitae pretium magna aliquam. Quisque consectetur, turpis quis sagittis tristique, neque ipsum viverra elit, tempor ultricies metus arcu in nisi. Aliquam congue sodales nibh, quis faucibus urna tempus eu.' })">Alert...</Button>
559
616
  </div>
560
617
  <div>
561
- <Button class="w-full" type="outline" @click="confirm('Are you sure?', { description:'Lorem ipsum dolor sit amet' })">Confirm...</Button>
618
+ <Button class="w-full" variant="outline" @click="confirm('Are you sure?', { description:'Lorem ipsum dolor sit amet' })">Confirm...</Button>
562
619
  </div>
563
620
  </div>
564
621
  </div>
@@ -578,7 +635,7 @@
578
635
  <div class="px-6">OK</div>
579
636
  </Button>
580
637
  <div class="w-2" v-if="showAlert.type === 'confirm'"></div>
581
- <Button @click="showAlert = null" :type="showAlert.type === 'confirm' ? 'outline' : 'primary'">
638
+ <Button @click="showAlert = null" :variant="showAlert.type === 'confirm' ? 'outline' : 'primary'">
582
639
  <div :class="showAlert.type === 'confirm' ? 'px-2' : 'px-5'">
583
640
  {{ showAlert.type === 'confirm' ? 'Cancel' : 'OK' }}
584
641
  </div>
@@ -588,6 +645,25 @@
588
645
  </Alert>
589
646
  </div>
590
647
 
648
+ <div class="ui-textbox bg-base-600 border-[1px] border-base-700 rounded-lg my-4">
649
+ <div class="px-4 p-2 border-b-[1px] border-base-700">
650
+ <h2 class="text-xl font-light">Textbox</h2>
651
+ </div>
652
+ <div class="p-4">
653
+ <div class="grid gap-3">
654
+ <div>
655
+ <Textbox></Textbox>
656
+ </div>
657
+ <div>
658
+ <Textbox class="max-w-[200px]" type="password"></Textbox>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ <div class="p-4 border-t-[1px] border-base-700">
663
+ <Switch>Error</Switch>
664
+ </div>
665
+ </div>
666
+
591
667
  <div class="ui-slider bg-base-600 border-[1px] border-base-700 rounded-lg my-4">
592
668
  <div class="px-4 p-2 border-b-[1px] border-base-700">
593
669
  <h2 class="text-xl font-light">Slider</h2>
@@ -721,12 +797,12 @@
721
797
  export default{
722
798
 
723
799
  data(){
724
-
725
800
  return {
726
- theme: '',
801
+ theme: typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null,
727
802
  dropdown2: null,
728
803
  showModal1: false,
729
804
  showAlert: null,
805
+ showToast: null,
730
806
  carouselImages: [
731
807
  { imageUrl:'https://files.vlad.studio/joy/listener/preview/2560x1600.jpg', target:'' },
732
808
  { imageUrl:'https://files.vlad.studio/joy/tbilisi_2/preview/2560x1600.jpg', target:'' },
@@ -740,7 +816,6 @@ export default{
740
816
  },
741
817
 
742
818
  mounted() {
743
- this.theme = localStorage.getItem('theme') ?? this.theme
744
819
 
745
820
  fetch('https://jsonplaceholder.typicode.com/posts')
746
821
  .then((response) => response.json())
@@ -758,7 +833,6 @@ export default{
758
833
  type
759
834
  }
760
835
  },
761
-
762
836
  confirm(title, { description='', type='confirm' }){
763
837
  this.showAlert = {
764
838
  title,
@@ -775,6 +849,12 @@ export default{
775
849
  changeTheme(theme){
776
850
  localStorage.setItem('theme', theme)
777
851
  document.querySelector('html').setAttribute('data-theme', localStorage.getItem('theme') ?? '')
852
+ },
853
+
854
+ toast(text){
855
+ this.showToast = {
856
+ text
857
+ }
778
858
  }
779
859
 
780
860
  }
package/src/api/feed.js ADDED
@@ -0,0 +1,29 @@
1
+ const { faker } = require('@faker-js/faker')
2
+
3
+
4
+ const index = async(req) => {
5
+
6
+ let { page = 1, itemsPerPage = 12 } = req.query
7
+ page = isNaN(parseInt(page)) ? 1 : parseInt(page)
8
+
9
+ const items = []
10
+ let id = ((page - 1) * 12) + 1
11
+ for(let i = 0 ; i < itemsPerPage ; i++){
12
+ items.push({
13
+ id: id + i,
14
+ name: faker.name.firstName()
15
+ })
16
+ }
17
+
18
+ await new Promise(resolve => setTimeout(resolve, 300));
19
+
20
+ return {
21
+ items,
22
+ page: page,
23
+ nextPage: page + 1
24
+ }
25
+ }
26
+
27
+ module.exports = {
28
+ index
29
+ }
package/src/api/inbox/index.js ADDED
@@ -0,0 +1,33 @@
1
+ const { faker } = require('@faker-js/faker');
2
+ const dayjs = require("dayjs");
3
+ const crypto = require('crypto');
4
+
5
+ const index = async (req, res) => {
6
+
7
+ let { page = 1, itemsPerPage = 12 } = req.query
8
+ page = isNaN(parseInt(page)) ? 1 : parseInt(page)
9
+
10
+ const items = []
11
+ let id = ((page - 1) * 12) + 1
12
+ for(let i = 0 ; i < itemsPerPage ; i++){
13
+ items.push({
14
+ id: id + i,
15
+ uid: crypto.randomUUID(),
16
+ name: faker.name.firstName(),
17
+ text: faker.lorem.words(10),
18
+ updatedAt: dayjs().add(Math.round(Math.random() * 1000 * -1), 'minute').unix()
19
+ })
20
+ }
21
+
22
+ await new Promise(resolve => setTimeout(resolve, 300));
23
+
24
+ return {
25
+ items,
26
+ page: page,
27
+ nextPage: page + 1
28
+ }
29
+ }
30
+
31
+ module.exports = {
32
+ index
33
+ }
package/src/api/inbox/message/comment.js ADDED
@@ -0,0 +1,33 @@
1
+ const { faker } = require('@faker-js/faker');
2
+ const dayjs = require("dayjs");
3
+ const crypto = require('crypto');
4
+
5
+ const index = async (req, res) => {
6
+
7
+ let { page = 1, itemsPerPage = 12 } = req.query
8
+ page = isNaN(parseInt(page)) ? 1 : parseInt(page)
9
+
10
+ const items = []
11
+ let id = ((page - 1) * 12) + 1
12
+ for(let i = 0 ; i < itemsPerPage ; i++){
13
+ items.push({
14
+ id: id + i,
15
+ uid: crypto.randomUUID(),
16
+ name: faker.name.firstName(),
17
+ text: faker.lorem.words(10),
18
+ updatedAt: dayjs().add(Math.round(Math.random() * 1000 * -1), 'minute').unix()
19
+ })
20
+ }
21
+
22
+ await new Promise(resolve => setTimeout(resolve, 300));
23
+
24
+ return {
25
+ items,
26
+ page: page,
27
+ nextPage: page + 1
28
+ }
29
+ }
30
+
31
+ module.exports = {
32
+ index
33
+ }
package/src/api/inbox/message/index.js ADDED
@@ -0,0 +1,34 @@
1
+ const { faker } = require('@faker-js/faker');
2
+ const dayjs = require("dayjs");
3
+ const crypto = require('crypto');
4
+
5
+ const index = async (req, res) => {
6
+
7
+ let { page = 1, itemsPerPage = 12 } = req.query
8
+ page = isNaN(parseInt(page)) ? 1 : parseInt(page)
9
+
10
+ const items = []
11
+ let id = ((page - 1) * 12) + 1
12
+ for(let i = 0 ; i < itemsPerPage ; i++){
13
+ items.push({
14
+ id: id + i,
15
+ direction: Math.round(Math.random() * 100) % 2 === 0 ? 1 : 2,
16
+ uid: crypto.randomUUID(),
17
+ name: faker.name.firstName(),
18
+ text: faker.lorem.words(10),
19
+ updatedAt: dayjs().add(Math.round(Math.random() * 1000 * -1), 'minute').unix()
20
+ })
21
+ }
22
+
23
+ await new Promise(resolve => setTimeout(resolve, 300));
24
+
25
+ return {
26
+ items,
27
+ page: page,
28
+ nextPage: page + 1
29
+ }
30
+ }
31
+
32
+ module.exports = {
33
+ index
34
+ }
package/src/api/index.js ADDED
@@ -0,0 +1,7 @@
1
+ require('glob').sync(__dirname + '/**/*.js').forEach(function(file){
2
+ if(file.indexOf(__dirname + '/index.js') < 0){
3
+ let name = file.replace(__dirname, '').replace('.js', '')
4
+ name = name.replace('/index', '')
5
+ exports[name] = require(file)
6
+ }
7
+ })