@tak-ps/vue-tabler 4.10.1 → 4.11.3

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.
@@ -17,13 +17,17 @@ jobs:
17
17
 
18
18
  - uses: actions/setup-node@v6
19
19
  with:
20
- node-version: 22
20
+ node-version: 24
21
+ cache: npm
22
+ registry-url: https://registry.npmjs.org
21
23
 
22
- - name: Update npm
23
- run: npm install -g npm@latest
24
+ - name: Install dependencies
25
+ run: npm ci
24
26
 
25
- - name: npm install
26
- run: npm install
27
+ - name: Verify package
28
+ run: |
29
+ npm run check
30
+ npm test
27
31
 
28
- - name: npm publish
32
+ - name: Publish package
29
33
  run: npm publish --provenance --access public
package/CHANGELOG.md CHANGED
@@ -10,6 +10,22 @@
10
10
 
11
11
  ## Version History
12
12
 
13
+ ### v4.11.3
14
+
15
+ - :bug: GH Actions Updates
16
+
17
+ ### v4.11.2
18
+
19
+ - :bug: TS@6 Compatibility
20
+
21
+ ### v4.11.1
22
+
23
+ - :arrow_up: Move typescript-eslint to dev deps
24
+
25
+ ### v4.11.0
26
+
27
+ - :rocket: Improved Dropdown Style
28
+
13
29
  ### v4.10.1
14
30
 
15
31
  - :arrow_up: Update Core Deps
@@ -18,7 +18,7 @@
18
18
  <ul
19
19
  :class='menuClasses'
20
20
  :style='{
21
- "width": width
21
+ width
22
22
  }'
23
23
  :aria-labelledby='id'
24
24
  >
@@ -50,8 +50,8 @@ const props = withDefaults(defineProps<DropdownProps>(), {
50
50
  const id = ref('tabler-dropdown-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now().toString(36));
51
51
 
52
52
  const dropdownClasses = computed(() => {
53
- const baseClass = 'dropdown';
54
-
53
+ const baseClass = 'dropdown tabler-dropdown';
54
+
55
55
  switch (props.position) {
56
56
  case 'top':
57
57
  case 'top-start':
@@ -67,8 +67,8 @@ const dropdownClasses = computed(() => {
67
67
  });
68
68
 
69
69
  const menuClasses = computed(() => {
70
- const baseClasses = 'dropdown-menu dropdown-menu-card';
71
-
70
+ const baseClasses = 'dropdown-menu dropdown-menu-card tabler-dropdown__menu';
71
+
72
72
  switch (props.position) {
73
73
  case 'bottom-start':
74
74
  case 'top-start':
@@ -81,3 +81,51 @@ const menuClasses = computed(() => {
81
81
  }
82
82
  });
83
83
  </script>
84
+
85
+ <style scoped>
86
+ .tabler-dropdown__menu {
87
+ --tblr-body-color: rgba(255, 255, 255, 0.92);
88
+ --tblr-body-bg: rgba(20, 20, 25, 0.96);
89
+ --tblr-border-color: rgba(255, 255, 255, 0.15);
90
+ --tblr-dropdown-bg: rgba(20, 20, 25, 0.96);
91
+ --tblr-dropdown-border-color: rgba(255, 255, 255, 0.25);
92
+ --tblr-dropdown-link-hover-bg: rgba(255, 255, 255, 0.1);
93
+ --tblr-dropdown-link-active-bg: rgba(var(--tblr-primary-rgb), 0.25);
94
+ --tblr-dropdown-link-active-color: var(--tblr-primary);
95
+ margin-block: 0.25rem;
96
+ padding: 0.25rem 0;
97
+ overflow: hidden;
98
+ border-color: var(--tblr-dropdown-border-color);
99
+ background: var(--tblr-dropdown-bg);
100
+ backdrop-filter: blur(8px);
101
+ }
102
+
103
+ .tabler-dropdown__menu.dropdown-menu-arrow::before,
104
+ .tabler-dropdown__menu.dropdown-menu-arrow::after {
105
+ display: none;
106
+ }
107
+
108
+ .tabler-dropdown__menu :deep(.dropdown-item),
109
+ .tabler-dropdown__menu :deep(.tabler-dropdown__item) {
110
+ cursor: pointer;
111
+ color: inherit;
112
+ transition: background 0.1s ease;
113
+ }
114
+
115
+ .tabler-dropdown__menu :deep(.dropdown-item:hover),
116
+ .tabler-dropdown__menu :deep(.tabler-dropdown__item:hover) {
117
+ background: rgba(255, 255, 255, 0.1);
118
+ }
119
+
120
+ .tabler-dropdown__menu :deep(.dropdown-item.active),
121
+ .tabler-dropdown__menu :deep(.dropdown-item:active),
122
+ .tabler-dropdown__menu :deep(.tabler-dropdown__item--active) {
123
+ background: rgba(var(--tblr-primary-rgb), 0.25);
124
+ color: var(--tblr-primary);
125
+ }
126
+
127
+ .tabler-dropdown__menu :deep(.dropdown-item.active .text-white-50),
128
+ .tabler-dropdown__menu :deep(.tabler-dropdown__item--active .text-white-50) {
129
+ color: rgba(var(--tblr-primary-rgb), 0.7) !important;
130
+ }
131
+ </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tak-ps/vue-tabler",
3
3
  "type": "module",
4
- "version": "4.10.1",
4
+ "version": "4.11.3",
5
5
  "lib": "lib.ts",
6
6
  "main": "lib.ts",
7
7
  "module": "lib.ts",
@@ -27,11 +27,10 @@
27
27
  "homepage": "https://github.com/tak-ps/vue-tabler#readme",
28
28
  "dependencies": {
29
29
  "@tabler/icons-vue": "^3.0.0",
30
- "showdown": "^2.1.0",
31
- "typescript-eslint": "^8.36.0",
32
- "vue": "^3.5.12"
30
+ "showdown": "^2.1.0"
33
31
  },
34
32
  "peerDependencies": {
33
+ "vue": "^3.5.12",
35
34
  "vue-router": "^5.0.0"
36
35
  },
37
36
  "devDependencies": {
@@ -43,9 +42,11 @@
43
42
  "eslint-plugin-vue": "^10.0.0",
44
43
  "globals": "^17.0.0",
45
44
  "jsdom": "^29.0.0",
46
- "typescript": "^5.9.3",
45
+ "typescript": "^6.0.0",
46
+ "typescript-eslint": "^8.36.0",
47
47
  "vite": "^8.0.0",
48
48
  "vitest": "^4.1.0",
49
+ "vue": "^3.5.12",
49
50
  "vue-tsc": "^3.2.1"
50
51
  }
51
52
  }
package/tsconfig.json CHANGED
@@ -4,20 +4,14 @@
4
4
  "module": "esnext",
5
5
  "strict": true,
6
6
  "jsx": "preserve",
7
- "moduleResolution": "node",
7
+ "moduleResolution": "bundler",
8
8
  "skipLibCheck": true,
9
9
  "esModuleInterop": true,
10
10
  "allowSyntheticDefaultImports": true,
11
11
  "forceConsistentCasingInFileNames": true,
12
12
  "useDefineForClassFields": true,
13
13
  "sourceMap": true,
14
- "baseUrl": ".",
15
- "types": [],
16
- "paths": {
17
- "@/*": [
18
- "src/*"
19
- ]
20
- }
14
+ "types": []
21
15
  },
22
16
  "include": [
23
17
  "lib.ts",