@tak-ps/vue-tabler 3.79.0 → 3.79.2

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 +9 -0
  2. package/components/Slidedown.vue +52 -36
  3. package/components/input/FileInput.vue +1 -1
  4. package/components/input/Input.vue +2 -2
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -10,6 +10,15 @@
10
10
 
11
11
  ## Version History
12
12
 
13
+ ### v3.79.2
14
+
15
+ - :bug: Fix `ref` bug on inputs
16
+ - :rocket: Further improved Slidedown CSS
17
+
18
+ ### v3.79.1
19
+
20
+ - :rocket: Fix a bunch of lints the new setup syntax uncovered
21
+
13
22
  ### v3.79.0
14
23
 
15
24
  - :tada: Migrate all components to `<script setup>`
package/components/Slidedown.vue CHANGED
@@ -1,29 +1,40 @@
1
1
  <template>
2
+
3
+ <span v-text='isExpanded ? "Collapse" : "Expand"' />
2
4
  <div
3
- class="hover-expandable rounded position-relative px-2 py-2"
4
- :class="{ 'is-expanded': isExpanded }"
5
+ class='hover-expandable rounded position-relative px-2 py-2'
6
+ :class='{
7
+ "expanded": isExpanded
8
+ }'
5
9
  >
6
-
7
- <div class='mb-2'>
8
- <slot/>
9
- </div>
10
-
11
- <div class="expandable-content-wrapper" ref="contentWrapperRef">
12
- <div class="expandable-content-inner p-3">
13
- <slot name="expanded"></slot>
14
- </div>
15
- </div>
16
-
17
- <div class="arrow-container" @click="toggle" title="Toggle content">
18
- <IconChevronDown
19
- size="24"
20
- stroke="1.5"
21
- class='arrow'
22
- :class="{ 'expanded': isExpanded }"
23
- />
10
+ <div class='mb-2'>
11
+ <slot />
12
+ </div>
13
+
14
+ <div
15
+ ref='contentWrapperRef'
16
+ class='expandable-content-wrapper'
17
+ >
18
+ <div class='expandable-content-inner p-3'>
19
+ <slot name='expanded' />
20
+ </div>
21
+ </div>
22
+
23
+ <div
24
+ class='arrow-container'
25
+ title='Toggle content'
26
+ @click='toggle'
27
+ >
28
+ <IconChevronDown
29
+ size='24'
30
+ stroke='1.5'
31
+ class='arrow'
32
+ :class='{
33
+ "expanded": isExpanded
34
+ }'
35
+ />
36
+ </div>
24
37
  </div>
25
-
26
- </div>
27
38
  </template>
28
39
 
29
40
  <script setup>
@@ -37,16 +48,17 @@ const isExpanded = ref(false);
37
48
  const contentWrapperRef = ref(null);
38
49
 
39
50
  function toggle() {
40
- isExpanded.value = !isExpanded.value;
41
- const el = contentWrapperRef.value;
42
-
43
- if (el) {
44
- if (isExpanded.value) {
45
- el.style.maxHeight = el.scrollHeight + 'px';
46
- } else {
47
- el.style.maxHeight = null;
51
+ isExpanded.value = !isExpanded.value;
52
+
53
+ const el = contentWrapperRef.value;
54
+
55
+ if (el) {
56
+ if (isExpanded.value) {
57
+ el.style.maxHeight = el.scrollHeight + 'px';
58
+ } else {
59
+ el.style.maxHeight = null;
60
+ }
48
61
  }
49
- }
50
62
  };
51
63
  </script>
52
64
 
@@ -56,15 +68,15 @@ function toggle() {
56
68
  transition: border-color 0.2s ease;
57
69
  }
58
70
 
59
- .hover-expandable:not(.is-expanded):hover {
60
- border: 1px solid color-mix(in srgb, var(--tblr-border-color), white 25%);
71
+ .hover-expandable:not(.expanded):hover {
72
+ border: 1px solid color-mix(in srgb, var(--tblr-border-color), white 10%);
61
73
  }
62
74
 
63
- .hover-expandable:not(.is-expanded):hover .arrow-container {
64
- border-color: var(--tblr-primary-rgb);
75
+ .hover-expandable:not(.expanded):hover .arrow-container {
76
+ border-color: color-mix(in srgb, var(--tblr-border-color), white 25%);
65
77
  }
66
78
 
67
- .hover-expandable:not(.is-expanded):hover .arrow {
79
+ .hover-expandable:not(.expanded):hover .arrow {
68
80
  color: var(--tblr-secondary-color, white);
69
81
  }
70
82
 
@@ -92,6 +104,10 @@ function toggle() {
92
104
  transition: background-color 0.2s ease, border-color 0.2s ease;
93
105
  }
94
106
 
107
+ .arrow-container:hover {
108
+ border-color: var(--tblr-primary-rgb) !important;
109
+ }
110
+
95
111
  .arrow {
96
112
  transition: transform 0.3s ease-out, color 0.2s ease;
97
113
  }
package/components/input/FileInput.vue CHANGED
@@ -10,7 +10,7 @@
10
10
  </TablerLabel>
11
11
  <div class='col-12'>
12
12
  <input
13
- ref='text-input'
13
+ ref='textInput'
14
14
  :disabled='disabled'
15
15
  :autofocus='autofocus'
16
16
  :accept='accept'
package/components/input/Input.vue CHANGED
@@ -36,7 +36,7 @@
36
36
  />
37
37
  </span>
38
38
  <input
39
- ref='text-input'
39
+ ref='textInput'
40
40
  v-model='current'
41
41
  :disabled='disabled'
42
42
  :autocomplete='autocomplete'
@@ -69,7 +69,7 @@
69
69
  </template>
70
70
  <template v-else>
71
71
  <textarea
72
- ref='text-input'
72
+ ref='textInput'
73
73
  v-model='current'
74
74
  :disabled='disabled'
75
75
  :autofocus='autofocus'
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tak-ps/vue-tabler",
3
3
  "type": "module",
4
- "version": "3.79.0",
4
+ "version": "3.79.2",
5
5
  "lib": "lib.js",
6
6
  "module": "lib.js",
7
7
  "description": "Tabler UI components for Vue3",