@tak-ps/vue-tabler 3.68.4 → 3.69.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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/Dropdown.vue +12 -20
  3. package/components/internal/Label.vue +40 -40
  4. package/eslint.config.js +4 -0
  5. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -10,6 +10,14 @@
10
10
 
11
11
  ## Version History
12
12
 
13
+ ### v3.69.0
14
+
15
+ - :rocket: Move to dropdown for label descriptions
16
+
17
+ ### v3.68.5
18
+
19
+ - :bug: Migrate to Setup for `Dropdown`
20
+
13
21
  ### v3.68.4
14
22
 
15
23
  - :bug: Fix autoclose case
package/components/Dropdown.vue CHANGED
@@ -29,30 +29,22 @@
29
29
  </div>
30
30
  </template>
31
31
 
32
- <script>
32
+ <script setup>
33
+ import { ref } from 'vue';
33
34
  import {
34
35
  IconSettings
35
36
  } from '@tabler/icons-vue';
36
37
 
37
- export default {
38
- name: 'TablerDropdown',
39
- components: {
40
- IconSettings
38
+ const props = defineProps({
39
+ width: {
40
+ type: Number,
41
+ default: 200
41
42
  },
42
- props: {
43
- width: {
44
- type: Number,
45
- default: 200
46
- },
47
- autoclose: {
48
- type: String,
49
- default: 'true'
50
- }
51
- },
52
- data: function() {
53
- return {
54
- id: 'tabler-dropdown-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now().toString(36)
55
- }
43
+ autoclose: {
44
+ type: String,
45
+ default: 'true'
56
46
  }
57
- }
47
+ });
48
+
49
+ const id = ref('tabler-dropdown-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now().toString(36));
58
50
  </script>
package/components/internal/Label.vue CHANGED
@@ -1,22 +1,33 @@
1
1
  <template>
2
2
  <div class='col-12 d-flex my-1'>
3
3
  <span
4
- v-if='description'
4
+ v-if='props.description'
5
5
  class='align-self-center'
6
6
  >
7
- <IconInfoSquare
8
- :size='20'
9
- :stroke='1'
10
- class='cursor-pointer'
11
- @click='help = true'
12
- />
13
- <Help
14
- v-if='help'
15
- :label='label || placeholder'
16
- :description='description'
17
- @click='help = false'
18
- />
19
- </span>
7
+ <Dropdown>
8
+ <template #default>
9
+ <IconInfoSquare
10
+ :size='20'
11
+ :stroke='1'
12
+ class='cursor-pointer'
13
+ @click='help = true'
14
+ />
15
+ </template>
16
+ <template #dropdown>
17
+ <div class='card'>
18
+ <div class='card-header'>
19
+ <div
20
+ class='card-title'
21
+ v-text='props.label'
22
+ />
23
+ </div>
24
+ <div
25
+ class='card-body'
26
+ v-text='props.description'
27
+ />
28
+ </div>
29
+ </template>
30
+ </dropdown></span>
20
31
  <div class='align-self-center'>
21
32
  <div
22
33
  v-if='label'
@@ -24,7 +35,7 @@
24
35
  >
25
36
  <span v-text='label' />
26
37
  <span
27
- v-if='required'
38
+ v-if='props.required'
28
39
  class='text-red mx-1'
29
40
  >*</span>
30
41
  </div>
@@ -35,36 +46,25 @@
35
46
  </div>
36
47
  </template>
37
48
 
38
- <script>
49
+ <script setup>
39
50
  import {
40
51
  IconInfoSquare
41
52
  } from '@tabler/icons-vue';
42
- import Help from '../Help.vue';
43
53
 
44
- export default {
45
- name: 'TablerInternalLabel',
46
- components: {
47
- Help,
48
- IconInfoSquare
54
+ import Dropdown from '../Dropdown.vue';
55
+
56
+ const props = defineProps({
57
+ required: {
58
+ type: Boolean,
59
+ default: false,
49
60
  },
50
- props: {
51
- required: {
52
- type: Boolean,
53
- default: false,
54
- },
55
- description: {
56
- type: String,
57
- default: '',
58
- },
59
- label: {
60
- type: String,
61
- required: true
62
- }
61
+ description: {
62
+ type: String,
63
+ default: '',
63
64
  },
64
- data: function() {
65
- return {
66
- help: false,
67
- }
65
+ label: {
66
+ type: String,
67
+ required: true
68
68
  }
69
- }
69
+ });
70
70
  </script>
package/eslint.config.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import js from "@eslint/js";
2
+ import globals from "globals"
2
3
  import eslintPluginVue from 'eslint-plugin-vue'
3
4
 
4
5
  export default [
@@ -6,6 +7,9 @@ export default [
6
7
  ...eslintPluginVue.configs['flat/recommended'],
7
8
  {
8
9
  languageOptions: {
10
+ globals: {
11
+ ...globals.browser,
12
+ },
9
13
  parserOptions: {
10
14
  parser: '@typescript-eslint/parser'
11
15
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tak-ps/vue-tabler",
3
3
  "type": "module",
4
- "version": "3.68.4",
4
+ "version": "3.69.0",
5
5
  "lib": "lib.js",
6
6
  "module": "lib.js",
7
7
  "description": "Tabler UI components for Vue3",
@@ -29,6 +29,7 @@
29
29
  "@typescript-eslint/parser": "^8.8.1",
30
30
  "@vue/cli-plugin-babel": "^5.0.8",
31
31
  "eslint": "^9.12.0",
32
- "eslint-plugin-vue": "^9.17.0"
32
+ "eslint-plugin-vue": "^10.0.0",
33
+ "globals": "^16.3.0"
33
34
  }
34
35
  }