@naptics/vue-collection 0.2.14 → 0.3.0

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 (170) hide show
  1. package/.github/workflows/build.yml +26 -0
  2. package/.github/workflows/deploy-demo.yml +46 -0
  3. package/.github/workflows/deploy-lib.yml +65 -0
  4. package/.gitlab-ci.yml +57 -0
  5. package/.nvmrc +1 -0
  6. package/.prettierrc +8 -0
  7. package/.vscode/extensions.json +10 -0
  8. package/.vscode/launch.json +23 -0
  9. package/.vscode/settings.json +13 -0
  10. package/babel.config.json +3 -0
  11. package/components/NAlert.d.ts +1 -44
  12. package/components/NBadge.d.ts +1 -133
  13. package/components/NBreadcrub.d.ts +2 -106
  14. package/components/NBreadcrub.js +1 -1
  15. package/components/NButton.d.ts +2 -118
  16. package/components/NCheckbox.d.ts +1 -32
  17. package/components/NCheckboxLabel.d.ts +1 -45
  18. package/components/NCheckboxLabel.js +1 -1
  19. package/components/NCrudModal.d.ts +9 -221
  20. package/components/NCrudModal.js +1 -1
  21. package/components/NDialog.d.ts +1 -110
  22. package/components/NDialog.js +1 -1
  23. package/components/NDropdown.d.ts +1 -69
  24. package/components/NDropdown.js +1 -1
  25. package/components/NDropzone.d.ts +1 -115
  26. package/components/NDropzone.js +1 -1
  27. package/components/NForm.d.ts +1 -23
  28. package/components/NFormModal.d.ts +9 -127
  29. package/components/NIconButton.d.ts +3 -159
  30. package/components/NIconButton.js +1 -1
  31. package/components/NIconCircle.d.ts +1 -87
  32. package/components/NInput.d.ts +1 -164
  33. package/components/NInput.js +1 -1
  34. package/components/NInputPhone.d.ts +2 -114
  35. package/components/NInputPhone.js +1 -1
  36. package/components/NInputSelect.d.ts +2 -187
  37. package/components/NInputSelect.js +1 -1
  38. package/components/NInputSuggestion.d.ts +2 -155
  39. package/components/NInputSuggestion.js +1 -1
  40. package/components/NLink.d.ts +1 -70
  41. package/components/NList.d.ts +1 -43
  42. package/components/NList.js +1 -1
  43. package/components/NLoadingIndicator.d.ts +1 -49
  44. package/components/NModal.d.ts +15 -227
  45. package/components/NModal.js +16 -2
  46. package/components/NPagination.d.ts +1 -63
  47. package/components/NSearchbar.d.ts +1 -56
  48. package/components/NSearchbarList.d.ts +3 -63
  49. package/components/NSearchbarList.js +1 -1
  50. package/components/NSelect.d.ts +2 -148
  51. package/components/NSelect.js +1 -1
  52. package/components/NSuggestionList.d.ts +3 -126
  53. package/components/NSuggestionList.js +5 -2
  54. package/components/NTable.d.ts +1 -85
  55. package/components/NTable.js +12 -6
  56. package/components/NTableAction.d.ts +2 -46
  57. package/components/NTableAction.js +1 -1
  58. package/components/NTextArea.d.ts +2 -181
  59. package/components/NTextArea.js +1 -1
  60. package/components/NTooltip.d.ts +1 -105
  61. package/components/NTooltip.js +1 -1
  62. package/components/NValInput.d.ts +7 -182
  63. package/components/NValInput.js +1 -1
  64. package/env.d.ts +15 -0
  65. package/eslint.config.cjs +29 -0
  66. package/index.html +13 -0
  67. package/package.json +21 -19
  68. package/postcss.config.js +6 -0
  69. package/public/favicon.ico +0 -0
  70. package/scripts/build-lib.sh +52 -0
  71. package/scripts/sync-node-types.js +70 -0
  72. package/src/demo/App.css +9 -0
  73. package/src/demo/App.tsx +5 -0
  74. package/src/demo/components/ColorGrid.tsx +26 -0
  75. package/src/demo/components/ComponentGrid.tsx +26 -0
  76. package/src/demo/components/ComponentSection.tsx +30 -0
  77. package/src/demo/components/VariantSection.tsx +18 -0
  78. package/src/demo/i18n/de.ts +7 -0
  79. package/src/demo/i18n/en.ts +7 -0
  80. package/src/demo/i18n/index.ts +24 -0
  81. package/src/demo/main.ts +13 -0
  82. package/src/demo/router/index.ts +21 -0
  83. package/src/demo/views/HomeView.tsx +94 -0
  84. package/src/demo/views/NavigationView.tsx +43 -0
  85. package/src/demo/views/presentation/AlertView.tsx +40 -0
  86. package/src/demo/views/presentation/BadgeView.tsx +61 -0
  87. package/src/demo/views/presentation/BreadcrumbView.tsx +52 -0
  88. package/src/demo/views/presentation/ButtonView.tsx +49 -0
  89. package/src/demo/views/presentation/CheckboxView.tsx +59 -0
  90. package/src/demo/views/presentation/DropdownView.tsx +59 -0
  91. package/src/demo/views/presentation/DropzoneView.tsx +39 -0
  92. package/src/demo/views/presentation/IconButtonView.tsx +47 -0
  93. package/src/demo/views/presentation/IconCircleView.tsx +38 -0
  94. package/src/demo/views/presentation/InputView.tsx +179 -0
  95. package/src/demo/views/presentation/LinkView.tsx +50 -0
  96. package/src/demo/views/presentation/ListView.tsx +29 -0
  97. package/src/demo/views/presentation/LoadingIndicatorView.tsx +38 -0
  98. package/src/demo/views/presentation/ModalView.tsx +210 -0
  99. package/src/demo/views/presentation/PaginationView.tsx +25 -0
  100. package/src/demo/views/presentation/SearchbarView.tsx +80 -0
  101. package/src/demo/views/presentation/TableView.tsx +146 -0
  102. package/src/demo/views/presentation/TooltipView.tsx +86 -0
  103. package/src/lib/components/NAlert.tsx +85 -0
  104. package/src/lib/components/NBadge.tsx +75 -0
  105. package/src/lib/components/NBreadcrub.tsx +97 -0
  106. package/src/lib/components/NButton.tsx +80 -0
  107. package/src/lib/components/NCheckbox.tsx +55 -0
  108. package/src/lib/components/NCheckboxLabel.tsx +51 -0
  109. package/src/lib/components/NCrudModal.tsx +133 -0
  110. package/src/lib/components/NDialog.tsx +182 -0
  111. package/src/lib/components/NDropdown.tsx +167 -0
  112. package/src/lib/components/NDropzone.tsx +265 -0
  113. package/src/lib/components/NForm.tsx +32 -0
  114. package/src/lib/components/NFormModal.tsx +66 -0
  115. package/src/lib/components/NIconButton.tsx +92 -0
  116. package/src/lib/components/NIconCircle.tsx +78 -0
  117. package/src/lib/components/NInput.css +11 -0
  118. package/src/lib/components/NInput.tsx +139 -0
  119. package/src/lib/components/NInputPhone.tsx +53 -0
  120. package/src/lib/components/NInputSelect.tsx +126 -0
  121. package/src/lib/components/NInputSuggestion.tsx +80 -0
  122. package/src/lib/components/NLink.tsx +68 -0
  123. package/src/lib/components/NList.tsx +67 -0
  124. package/src/lib/components/NLoadingIndicator.css +46 -0
  125. package/src/lib/components/NLoadingIndicator.tsx +63 -0
  126. package/src/lib/components/NModal.tsx +243 -0
  127. package/src/lib/components/NPagination.css +15 -0
  128. package/src/lib/components/NPagination.tsx +131 -0
  129. package/src/lib/components/NSearchbar.tsx +78 -0
  130. package/src/lib/components/NSearchbarList.tsx +47 -0
  131. package/src/lib/components/NSelect.tsx +128 -0
  132. package/src/lib/components/NSuggestionList.tsx +216 -0
  133. package/src/lib/components/NTable.css +3 -0
  134. package/src/lib/components/NTable.tsx +247 -0
  135. package/src/lib/components/NTableAction.tsx +49 -0
  136. package/src/lib/components/NTextArea.tsx +159 -0
  137. package/src/lib/components/NTooltip.css +37 -0
  138. package/src/lib/components/NTooltip.tsx +250 -0
  139. package/src/lib/components/NValInput.tsx +163 -0
  140. package/src/lib/components/ValidatedForm.ts +71 -0
  141. package/src/lib/components/__tests__/NButton.spec.tsx +26 -0
  142. package/src/lib/components/__tests__/NCheckbox.spec.tsx +39 -0
  143. package/src/lib/i18n/de/vue-collection.json +58 -0
  144. package/src/lib/i18n/en/vue-collection.json +58 -0
  145. package/src/lib/i18n/index.ts +54 -0
  146. package/src/lib/index.ts +2 -0
  147. package/src/lib/jsx.d.ts +13 -0
  148. package/src/lib/utils/__tests__/identifiable.spec.ts +72 -0
  149. package/src/lib/utils/__tests__/validation.spec.ts +92 -0
  150. package/src/lib/utils/breakpoints.ts +47 -0
  151. package/src/lib/utils/component.tsx +131 -0
  152. package/src/lib/utils/deferred.ts +28 -0
  153. package/src/lib/utils/identifiable.ts +87 -0
  154. package/src/lib/utils/stringMaxLength.ts +25 -0
  155. package/src/lib/utils/tailwind.ts +41 -0
  156. package/src/lib/utils/utils.ts +90 -0
  157. package/src/lib/utils/vModel.ts +260 -0
  158. package/src/lib/utils/validation.ts +189 -0
  159. package/src/lib/utils/vue.ts +25 -0
  160. package/tailwind.config.js +38 -0
  161. package/tsconfig.config.json +9 -0
  162. package/tsconfig.demo.json +19 -0
  163. package/tsconfig.json +16 -0
  164. package/tsconfig.lib.json +18 -0
  165. package/tsconfig.vitest.json +8 -0
  166. package/utils/breakpoints.d.ts +1 -1
  167. package/utils/component.d.ts +3 -7
  168. package/utils/component.js +5 -2
  169. package/utils/identifiable.js +5 -1
  170. package/vite.config.ts +28 -0
package/eslint.config.cjs ADDED
@@ -0,0 +1,29 @@
1
+ const pluginVue = require('eslint-plugin-vue')
2
+ const { defineConfigWithVueTs, vueTsConfigs } = require('@vue/eslint-config-typescript')
3
+ const js = require('@eslint/js')
4
+ const prettierConfig = require('@vue/eslint-config-prettier')
5
+
6
+ require('@rushstack/eslint-patch/modern-module-resolution')
7
+
8
+ module.exports = defineConfigWithVueTs(
9
+ {
10
+ ignores: ['node_modules/**', 'dist/**', 'dist-ssr/**', 'lib/**', 'coverage/**', 'scripts/*.js'],
11
+ },
12
+ js.configs.recommended,
13
+ pluginVue.configs['flat/essential'],
14
+ vueTsConfigs.recommended,
15
+ prettierConfig,
16
+ {
17
+ files: ['**/*.config.js', '**/*.config.cjs'],
18
+ languageOptions: {
19
+ globals: {
20
+ require: 'readonly',
21
+ module: 'readonly',
22
+ __dirname: 'readonly',
23
+ },
24
+ },
25
+ rules: {
26
+ '@typescript-eslint/no-require-imports': 'off',
27
+ },
28
+ }
29
+ )
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vue Collection</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/demo/main.ts"></script>
12
+ </body>
13
+ </html>
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@naptics/vue-collection",
3
3
  "author": "Timo Siegenthaler",
4
4
  "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
5
- "version": "0.2.14",
5
+ "version": "0.3.0",
6
6
  "main": "./index.js",
7
7
  "repository": {
8
8
  "type": "git",
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "scripts": {
12
12
  "dev": "vite",
13
- "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
13
+ "lint": "eslint . --fix --ignore-pattern=.gitignore",
14
14
  "type-check": "run-p type-check-lib type-check-demo",
15
15
  "type-check-demo": "vue-tsc --noEmit -p tsconfig.demo.json --composite false",
16
16
  "type-check-lib": "vue-tsc --noEmit -p tsconfig.lib.json --composite false",
@@ -18,7 +18,8 @@
18
18
  "build-demo": "run-p type-check-demo build-only-demo",
19
19
  "build-lib": "run-p type-check-lib build-only-lib",
20
20
  "build-only-demo": "vite build",
21
- "build-only-lib": "bash ./scripts/build-lib.sh"
21
+ "build-only-lib": "bash ./scripts/build-lib.sh",
22
+ "preinstall": "node ./scripts/sync-node-types.js"
22
23
  },
23
24
  "dependencies": {
24
25
  "@headlessui/vue": "^1.7.10",
@@ -27,36 +28,37 @@
27
28
  },
28
29
  "peerDependencies": {
29
30
  "@heroicons/vue": "^2.0.16",
30
- "vue": "^3.2.36"
31
+ "vue": "^3.5.0"
31
32
  },
32
33
  "devDependencies": {
33
34
  "@babel/cli": "^7.21.0",
34
35
  "@babel/core": "^7.21.3",
35
- "@intlify/unplugin-vue-i18n": "^0.8.2",
36
- "@rushstack/eslint-patch": "^1.2.0",
36
+ "@intlify/unplugin-vue-i18n": "^11.0.3",
37
+ "@rushstack/eslint-patch": "^1.15.0",
37
38
  "@tailwindcss/forms": "^0.5.3",
38
39
  "@types/jsdom": "^21.1.0",
39
- "@types/node": "^18.14.0",
40
- "@vitejs/plugin-vue": "^4.0.0",
41
- "@vitejs/plugin-vue-jsx": "^3.0.0",
40
+ "@types/node": "^24",
41
+ "@vitejs/plugin-vue": "^6.0.3",
42
+ "@vitejs/plugin-vue-jsx": "^5.1.2",
42
43
  "@vue/babel-plugin-jsx": "^1.1.1",
43
- "@vue/eslint-config-prettier": "^7.1.0",
44
- "@vue/eslint-config-typescript": "^11.0.2",
44
+ "@vue/eslint-config-prettier": "^10.2.0",
45
+ "@vue/eslint-config-typescript": "^14.6.0",
45
46
  "@vue/test-utils": "^2.3.0",
46
- "@vue/tsconfig": "^0.1.3",
47
+ "@vue/tsconfig": "^0.5.1",
47
48
  "autoprefixer": "^10.4.13",
48
- "eslint": "^8.34.0",
49
- "eslint-plugin-vue": "^9.9.0",
49
+ "eslint": "^9.17.0",
50
+ "eslint-plugin-vue": "^10.6.2",
50
51
  "jsdom": "^21.1.0",
51
52
  "npm-run-all": "^4.1.5",
52
53
  "postcss": "^8.4.21",
53
- "prettier": "^2.8.4",
54
+ "prettier": "^3.0.0",
54
55
  "tailwindcss": "^3.2.7",
55
- "typescript": "^4.9.5",
56
- "vite": "^4.1.3",
57
- "vitest": "^0.28.5",
56
+ "typescript": "~5.5.4",
57
+ "vite": "^7.3.0",
58
+ "vitest": "^4.0.15",
59
+ "vue": "^3.5.25",
58
60
  "vue-i18n": "^9.2.2",
59
61
  "vue-router": "^4.1.6",
60
- "vue-tsc": "^1.1.5"
62
+ "vue-tsc": "^3.1.8"
61
63
  }
62
64
  }
package/postcss.config.js ADDED
@@ -0,0 +1,6 @@
1
+ module.exports = {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
package/public/favicon.ico ADDED
Binary file
package/scripts/build-lib.sh ADDED
@@ -0,0 +1,52 @@
1
+ #!/usr/bin/env bash
2
+ # Exit on error
3
+ set -e
4
+ # Remove lib folder
5
+ echo "Removing ./lib folder."
6
+ rm -rf ./lib
7
+
8
+ # Compile typescript code to javascript code
9
+ echo "Compiling typescript code with tsconfig.lib.json."
10
+ tsc --project tsconfig.lib.json
11
+
12
+ # Move lib two directories up
13
+ echo "Cleaning up ./lib directory."
14
+ if [ ! -d "./lib/src/lib" ]; then
15
+ echo "Error: ./lib/src/lib directory not found after compilation"
16
+ exit 1
17
+ fi
18
+ mv ./lib/src/lib/* ./lib
19
+
20
+ # Remove unused files
21
+ rm -rf ./lib/src
22
+ rm -f ./lib/tsconfig.lib.tsbuildinfo
23
+
24
+ # Move all css files from components to lib
25
+ echo "Copying .css files from the components folder."
26
+ if ls ./src/lib/components/*.css 1> /dev/null 2>&1; then
27
+ cp ./src/lib/components/*.css ./lib/components
28
+ else
29
+ echo "Warning: No CSS files found in ./src/lib/components/"
30
+ fi
31
+
32
+ # Transpile jsx files to js with babel
33
+ echo "Using Babel to transpile jsx."
34
+ BABEL_OUTPUT=$(./node_modules/.bin/babel lib --out-dir lib 2>&1)
35
+ BABEL_EXIT_CODE=$?
36
+ echo "$BABEL_OUTPUT"
37
+
38
+ # Check if Babel command succeeded
39
+ if [ $BABEL_EXIT_CODE -ne 0 ]; then
40
+ echo "Error: Babel transpilation failed with exit code $BABEL_EXIT_CODE"
41
+ exit $BABEL_EXIT_CODE
42
+ fi
43
+
44
+ # Optionally, check if any .js files were produced
45
+ if ! find ./lib -name "*.js" -type f | grep -q .; then
46
+ echo "Error: No .js files produced by Babel transpilation"
47
+ exit 1
48
+ fi
49
+
50
+ find ./lib -name "*.jsx" -type f -delete
51
+
52
+ echo "Build completed successfully!"
package/scripts/sync-node-types.js ADDED
@@ -0,0 +1,70 @@
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require('fs')
4
+ const path = require('path')
5
+
6
+ const rootDir = path.join(__dirname, '..')
7
+ const nvmrcPath = path.join(rootDir, '.nvmrc')
8
+ const packageJsonPath = path.join(rootDir, 'package.json')
9
+
10
+ // Read .nvmrc
11
+ if (!fs.existsSync(nvmrcPath)) {
12
+ console.error('Error: .nvmrc file not found')
13
+ process.exit(1)
14
+ }
15
+
16
+ const nvmrcContent = fs.readFileSync(nvmrcPath, 'utf8').trim()
17
+
18
+ // Extract major version from .nvmrc
19
+ // Supports formats like: "24", "v24", "24.12.0", "lts/iron", etc.
20
+ let nodeMajorVersion
21
+
22
+ if (nvmrcContent.startsWith('lts/')) {
23
+ // Map LTS names to major versions
24
+ const ltsMap = {
25
+ krypton: '24',
26
+ jod: '22',
27
+ iron: '20',
28
+ hydrogen: '18',
29
+ gallium: '16',
30
+ fermium: '14',
31
+ }
32
+ const ltsName = nvmrcContent.replace('lts/', '').toLowerCase()
33
+ nodeMajorVersion = ltsMap[ltsName]
34
+ if (!nodeMajorVersion) {
35
+ console.error(`Error: Unknown LTS name "${ltsName}"`)
36
+ process.exit(1)
37
+ }
38
+ } else {
39
+ // Extract numeric version
40
+ const versionMatch = nvmrcContent.match(/^v?(\d+)/)
41
+ if (!versionMatch) {
42
+ console.error(`Error: Could not extract Node version from .nvmrc: "${nvmrcContent}"`)
43
+ process.exit(1)
44
+ }
45
+ nodeMajorVersion = versionMatch[1]
46
+ }
47
+
48
+ console.log(`Node version from .nvmrc: ${nodeMajorVersion}`)
49
+
50
+ // Read package.json
51
+ const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
52
+
53
+ // Check current @types/node version
54
+ const currentTypesNode = packageJson.devDependencies?.['@types/node']
55
+ const desiredTypesNode = `^${nodeMajorVersion}`
56
+
57
+ if (currentTypesNode === desiredTypesNode) {
58
+ console.log(`✓ @types/node is already set to ${desiredTypesNode}`)
59
+ process.exit(0)
60
+ }
61
+
62
+ console.log(`Updating @types/node from ${currentTypesNode} to ${desiredTypesNode}`)
63
+
64
+ // Update package.json
65
+ packageJson.devDependencies['@types/node'] = desiredTypesNode
66
+
67
+ // Write back to package.json
68
+ fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8')
69
+
70
+ console.log('✓ package.json updated. Run `npm install` to install the correct @types/node version.')
package/src/demo/App.css ADDED
@@ -0,0 +1,9 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ body {
7
+ @apply text-default-900;
8
+ }
9
+ }
package/src/demo/App.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import { createView } from '@/lib/utils/component'
2
+ import { RouterView } from 'vue-router'
3
+ import './App.css'
4
+
5
+ export default createView('App', () => () => <RouterView />)
package/src/demo/components/ColorGrid.tsx ADDED
@@ -0,0 +1,26 @@
1
+ import { createComponent } from '@/lib/utils/component'
2
+ import { computed, type PropType } from 'vue'
3
+ import ComponentGrid, { componentGridProps } from '@/demo/components/ComponentGrid'
4
+
5
+ export const colorGridProps = {
6
+ ...componentGridProps,
7
+ colors: {
8
+ type: Number,
9
+ default: 6,
10
+ },
11
+ item: Function as PropType<(color: string, index: number) => JSX.Element>,
12
+ } as const
13
+
14
+ export default createComponent('ColorGrid', colorGridProps, props => {
15
+ const colors = ['primary', 'secondary', 'green', 'red', 'yellow', 'default']
16
+
17
+ const selectedColors = computed(() => colors.slice(0, props.colors))
18
+
19
+ return () => (
20
+ <ComponentGrid cols={props.cols}>
21
+ {selectedColors.value.map((color, index) => (
22
+ <div class="flex">{props.item?.(color, index)}</div>
23
+ ))}
24
+ </ComponentGrid>
25
+ )
26
+ })
package/src/demo/components/ComponentGrid.tsx ADDED
@@ -0,0 +1,26 @@
1
+ import { createComponent } from '@/lib/utils/component'
2
+ import { computed, type PropType } from 'vue'
3
+
4
+ export const componentGridProps = {
5
+ cols: {
6
+ type: Number as PropType<2 | 4 | 6 | 8>,
7
+ default: 6,
8
+ },
9
+ } as const
10
+
11
+ export default createComponent('ComponentGrid', componentGridProps, (props, { slots }) => {
12
+ const classes = computed(() => {
13
+ switch (props.cols) {
14
+ case 2:
15
+ return 'grid-cols-1 sm:grid-cols-2'
16
+ case 4:
17
+ return 'grid-cols-2 sm:grid-cols-4'
18
+ case 8:
19
+ return 'grid-cols-4 sm:grid-cols-8'
20
+ default:
21
+ return 'grid-cols-3 sm:grid-cols-6'
22
+ }
23
+ })
24
+
25
+ return () => <div class={`grid gap-4 ${classes.value}`}>{slots.default?.()}</div>
26
+ })
package/src/demo/components/ComponentSection.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import { createComponent } from '@/lib/utils/component'
2
+ import { LinkIcon } from '@heroicons/vue/24/solid'
3
+ import { RouterLink } from 'vue-router'
4
+
5
+ export const componentSectionProps = {
6
+ id: String,
7
+ title: String,
8
+ subtitle: String,
9
+ } as const
10
+
11
+ export default createComponent('ComponentSection', componentSectionProps, (props, { slots }) => {
12
+ return () => (
13
+ <div class="border-b-2 border-default-200" id={props.id}>
14
+ <div>
15
+ <div class="px-8 py-10 max-w-4xl mx-auto">
16
+ <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-none">
17
+ <h2 class="font-bold text-4xl mb-2 flex items-center space-x-2 ">
18
+ <span>{props.title}</span>
19
+ <LinkIcon class="h-8 w-8 text-default-900 opacity-30 hidden group-hover:block group-focus-visible:block" />
20
+ </h2>
21
+ </RouterLink>
22
+ <p class="text-default-500 text-xl font-light">{props.subtitle}</p>
23
+ </div>
24
+ </div>
25
+ <div class="bg-default-50">
26
+ <div class="px-8 pt-10 pb-20 space-y-8 max-w-4xl mx-auto">{slots.default?.()}</div>
27
+ </div>
28
+ </div>
29
+ )
30
+ })
package/src/demo/components/VariantSection.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { createComponent } from '@/lib/utils/component'
2
+
3
+ export const variantSectionProps = {
4
+ title: String,
5
+ subtitle: String,
6
+ } as const
7
+
8
+ export default createComponent('VariantSection', variantSectionProps, (props, { slots }) => {
9
+ return () => (
10
+ <div>
11
+ <div class="mb-6">
12
+ <h3 class="text-lg font-medium text-default-700"> {props.title} </h3>
13
+ {props.subtitle && <p class="text-default-500 text-sm"> {props.subtitle} </p>}
14
+ </div>
15
+ <div class="border-2 border-dashed rounded-lg p-8 border-default-200 bg-white">{slots.default?.()}</div>
16
+ </div>
17
+ )
18
+ })
package/src/demo/i18n/de.ts ADDED
@@ -0,0 +1,7 @@
1
+ import vueCollection from '@/lib/i18n/de/vue-collection.json'
2
+
3
+ const de = {
4
+ ['vue-collection']: vueCollection,
5
+ }
6
+
7
+ export default de
package/src/demo/i18n/en.ts ADDED
@@ -0,0 +1,7 @@
1
+ import vueCollection from '@/lib/i18n/en/vue-collection.json'
2
+
3
+ const en = {
4
+ ['vue-collection']: vueCollection,
5
+ }
6
+
7
+ export default en
package/src/demo/i18n/index.ts ADDED
@@ -0,0 +1,24 @@
1
+ import en from './en'
2
+ import de from './de'
3
+ import { createI18n } from 'vue-i18n'
4
+ import { registerTranslationProvider } from '@/lib/i18n'
5
+
6
+ export const i18n = createI18n({
7
+ legacy: false,
8
+ locale: 'en',
9
+ messages: {
10
+ en,
11
+ de,
12
+ },
13
+ })
14
+
15
+ registerTranslationProvider({
16
+ trsl(key, params) {
17
+ return i18n.global.t(key, params == null ? {} : params)
18
+ },
19
+ trslc(key, count, params) {
20
+ const newCount = count ?? 0
21
+ const newParams = { n: newCount, ...params }
22
+ return i18n.global.t(key, newParams, { plural: newCount })
23
+ },
24
+ })
package/src/demo/main.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { createApp } from 'vue'
2
+ import App from './App'
3
+ import router from './router'
4
+ import { addDocumentResizeEventListener } from '@/lib/utils/breakpoints'
5
+ import { i18n } from './i18n'
6
+
7
+ addDocumentResizeEventListener()
8
+
9
+ const app = createApp(App)
10
+ app.use(router)
11
+ app.use(i18n)
12
+
13
+ app.mount('#app')
package/src/demo/router/index.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { createRouter, createWebHistory } from 'vue-router'
2
+
3
+ const router = createRouter({
4
+ history: createWebHistory(import.meta.env.BASE_URL),
5
+ scrollBehavior: to => {
6
+ if (to.hash) {
7
+ return {
8
+ el: to.hash,
9
+ }
10
+ }
11
+ },
12
+ routes: [
13
+ {
14
+ path: '/',
15
+ name: 'home',
16
+ component: () => import('../views/HomeView'),
17
+ },
18
+ ],
19
+ })
20
+
21
+ export default router
package/src/demo/views/HomeView.tsx ADDED
@@ -0,0 +1,94 @@
1
+ import ModalView from './presentation/ModalView'
2
+ import { createView } from '@/lib/utils/component'
3
+ import AlertView from './presentation/AlertView'
4
+ import BadgeView from './presentation/BadgeView'
5
+ import ButtonView from './presentation/ButtonView'
6
+ import CheckboxView from './presentation/CheckboxView'
7
+ import IconButtonView from './presentation/IconButtonView'
8
+ import DropdownView from './presentation/DropdownView'
9
+ import IconCircleView from './presentation/IconCircleView'
10
+ import InputView from './presentation/InputView'
11
+ import ListView from './presentation/ListView'
12
+ import LoadingIndicatorView from './presentation/LoadingIndicatorView'
13
+ import PaginationView from './presentation/PaginationView'
14
+ import SearchbarView from './presentation/SearchbarView'
15
+ import TableView from './presentation/TableView'
16
+ import NavigationView from './NavigationView'
17
+ import { RouterLink } from 'vue-router'
18
+ import { ChevronDoubleUpIcon } from '@heroicons/vue/24/solid'
19
+ import { ref, Transition } from 'vue'
20
+ import NBadge from '@/lib/components/NBadge'
21
+ import LinkView from './presentation/LinkView'
22
+ import BreadcrumbView from './presentation/BreadcrumbView'
23
+ import TooltipView from './presentation/TooltipView'
24
+ import DropzoneView from './presentation/DropzoneView'
25
+
26
+ export default createView('HomeView', () => {
27
+ const showButton = ref(false)
28
+ window.onscroll = () => {
29
+ const treshhold = 1000
30
+ showButton.value = document.documentElement.scrollTop > treshhold || document.body.scrollTop > treshhold
31
+ }
32
+
33
+ return () => (
34
+ <div>
35
+ <div class="bg-gradient-to-r from-primary-500/70 to-white">
36
+ <div
37
+ class="bg-gradient-to-b from-default-300/80 to-default-50 border-b-2 border-default-200 z-50"
38
+ id="overview"
39
+ >
40
+ <div class="px-8 py-20 min-h-screen m-auto text-center max-w-4xl flex items-center justify-center flex-col">
41
+ <h1 class="text-6xl font-semibold mb-8">Vue Collection</h1>
42
+ <p class="text-3xl font-light text-default-500">
43
+ Styled and fully functional components created by naptics.
44
+ </p>
45
+ <NavigationView class="mt-16" />
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <div class="space-y-10">
51
+ <AlertView />
52
+ <ButtonView />
53
+ <IconButtonView />
54
+ <LinkView />
55
+ <IconCircleView />
56
+ <BadgeView />
57
+ <BreadcrumbView />
58
+ <CheckboxView />
59
+ <DropdownView />
60
+ <InputView />
61
+ <SearchbarView />
62
+ <LoadingIndicatorView />
63
+ <ModalView />
64
+ <ListView />
65
+ <TableView />
66
+ <TooltipView />
67
+ <PaginationView />
68
+ <DropzoneView />
69
+ </div>
70
+
71
+ <Transition
72
+ enterActiveClass="transition duration-400"
73
+ enterFromClass="opacity-0"
74
+ enterToClass="opacity-100"
75
+ leaveActiveClass="transition duration-400"
76
+ leaveFromClass="opacity-100"
77
+ leaveToClass="opacity-0"
78
+ >
79
+ {showButton.value && (
80
+ <div class="fixed z-20 bottom-4 right-4">
81
+ <RouterLink to={{ hash: '#overview' }}>
82
+ <NBadge textSize="text-base" allCaps={false}>
83
+ <div class="flex items-center space-x-2">
84
+ <span>Overview</span>
85
+ <ChevronDoubleUpIcon class="h-5 w-5" />
86
+ </div>
87
+ </NBadge>
88
+ </RouterLink>
89
+ </div>
90
+ )}
91
+ </Transition>
92
+ </div>
93
+ )
94
+ })
package/src/demo/views/NavigationView.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import NBadge from '@/lib/components/NBadge'
2
+ import { createView } from '@/lib/utils/component'
3
+ import { RouterLink } from 'vue-router'
4
+
5
+ export default createView('NavigationView', () => {
6
+ const sections = [
7
+ { hash: 'alerts', label: 'Alerts' },
8
+ { hash: 'buttons', label: 'Buttons' },
9
+ { hash: 'icon-buttons', label: 'Icon Buttons' },
10
+ { hash: 'links', label: 'Links' },
11
+ { hash: 'icon-circles', label: 'Icon Circles' },
12
+ { hash: 'badges', label: 'Badges' },
13
+ { hash: 'breadcrumbs', label: 'Breadcrumbs' },
14
+ { hash: 'checkboxes', label: 'Checkboxes' },
15
+ { hash: 'dropdowns', label: 'Dropdowns' },
16
+ { hash: 'inputs', label: 'Inputs and Forms' },
17
+ { hash: 'searchbars', label: 'Searchbars' },
18
+ { hash: 'loading-indicators', label: 'Loading Indicators' },
19
+ { hash: 'modals', label: 'Modals' },
20
+ { hash: 'lists', label: 'Lists' },
21
+ { hash: 'tables', label: 'Tables' },
22
+ { hash: 'tooltips', label: 'Tooltips' },
23
+ { hash: 'pagination', label: 'Pagination' },
24
+ { hash: 'dropzones', label: 'Dropzones' },
25
+ ]
26
+
27
+ return () => (
28
+ <div>
29
+ <div class="flex flex-wrap gap-6 justify-center">
30
+ {sections.map(section => (
31
+ <RouterLink
32
+ to={{ hash: `#${section.hash}` }}
33
+ class="outline-none focus-visible:ring-2 focus-visible ring-primary-500 rounded-md"
34
+ >
35
+ <NBadge color="primary" allCaps={false} textSize="text-2xl">
36
+ {section.label}
37
+ </NBadge>
38
+ </RouterLink>
39
+ ))}
40
+ </div>
41
+ </div>
42
+ )
43
+ })
package/src/demo/views/presentation/AlertView.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import type { AlertVariant } from '@/lib/components/NAlert'
2
+ import NAlert from '@/lib/components/NAlert'
3
+ import ComponentGrid from '@/demo/components/ComponentGrid'
4
+ import ComponentSection from '@/demo/components/ComponentSection'
5
+ import VariantSection from '@/demo/components/VariantSection'
6
+ import { createView } from '@/lib/utils/component'
7
+
8
+ export default createView('AlertView', () => {
9
+ const variants: AlertVariant[] = ['success', 'info', 'warning', 'error']
10
+
11
+ return () => (
12
+ <ComponentSection
13
+ title="Alerts"
14
+ id="alerts"
15
+ subtitle="Alerts can be used directly in a view or they can appear at a fixed position as a notification."
16
+ >
17
+ <VariantSection title="Normal Alerts">
18
+ <ComponentGrid cols={2}>
19
+ {variants.map(variant => (
20
+ <NAlert variant={variant} text="Hello, this is an important Alert." />
21
+ ))}
22
+ </ComponentGrid>
23
+ </VariantSection>
24
+
25
+ <VariantSection title="Hide Dismiss Button">
26
+ <ComponentGrid cols={2}>
27
+ {variants.slice(0, 2).map(variant => (
28
+ <NAlert variant={variant} hideX text="This is undismissable." />
29
+ ))}
30
+ </ComponentGrid>
31
+ </VariantSection>
32
+
33
+ <VariantSection title="Loading Alert">
34
+ <ComponentGrid cols={2}>
35
+ <NAlert variant="loading">The file is currently downloading...</NAlert>
36
+ </ComponentGrid>
37
+ </VariantSection>
38
+ </ComponentSection>
39
+ )
40
+ })