spark-grid-vue3 0.0.76 → 0.0.77

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/InputDate.vue +106 -11
  3. package/src/components/InputText.vue +60 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spark-grid-vue3",
3
- "version": "0.0.76",
3
+ "version": "0.0.77",
4
4
  "description": "",
5
5
  "files": [
6
6
  "src"
package/src/components/InputDate.vue CHANGED
@@ -1,26 +1,62 @@
1
1
  <template>
2
- <div class="spark-grid-datatable-date-input">
2
+ <div class="spark-grid-datatable-date-input" @mouseenter="hovered = true" @mouseleave="hovered = false">
3
3
  <!-- Single date input -->
4
- <input v-if="type === 'date'" type="date" :value="formattedValue" @input="onDateInput" :disabled="disabled"
5
- class="spark-grid-datatable-input" />
4
+ <div v-if="type === 'date'" class="spark-grid-input-wrapper">
5
+ <input type="date" :value="formattedValue" @input="onDateInput" :disabled="disabled"
6
+ class="spark-grid-datatable-input" :class="{ 'has-clear': showClearSingle }" />
7
+ <span v-if="showClearSingle" class="spark-grid-input-clear" @click="clearSingle">
8
+ <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
9
+ <path fill="currentColor"
10
+ d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z" />
11
+ <path fill="currentColor"
12
+ d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" />
13
+ </svg>
14
+ </span>
15
+ </div>
6
16
 
7
17
  <!-- Month picker -->
8
- <input v-else-if="type === 'month'" type="month" :value="formattedMonthValue" @input="onMonthInput"
9
- :disabled="disabled" class="spark-grid-datatable-input" />
18
+ <div v-else-if="type === 'month'" class="spark-grid-input-wrapper">
19
+ <input type="month" :value="formattedMonthValue" @input="onMonthInput" :disabled="disabled"
20
+ class="spark-grid-datatable-input" :class="{ 'has-clear': showClearSingle }" />
21
+ <span v-if="showClearSingle" class="spark-grid-input-clear" @click="clearSingle">
22
+ <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
23
+ <path fill="currentColor"
24
+ d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z" />
25
+ <path fill="currentColor"
26
+ d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" />
27
+ </svg>
28
+ </span>
29
+ </div>
10
30
 
11
31
  <!-- Date range -->
12
32
  <div v-else-if="type === 'daterange'" class="spark-grid-datatable-date-range">
13
- <input type="date" :value="rangeStart" @input="onRangeStartInput" :disabled="disabled"
14
- class="spark-grid-datatable-input spark-grid-datatable-input-range" placeholder="Data início" />
33
+ <div class="spark-grid-input-wrapper spark-grid-datatable-input-range">
34
+ <input type="date" :value="rangeStart" @input="onRangeStartInput" :disabled="disabled"
35
+ class="spark-grid-datatable-input" :class="{ 'has-clear': showClearRange }"
36
+ placeholder="Data início" />
37
+ </div>
15
38
  <span class="spark-grid-datatable-date-separator">-</span>
16
- <input type="date" :value="rangeEnd" @input="onRangeEndInput" :disabled="disabled"
17
- class="spark-grid-datatable-input spark-grid-datatable-input-range" placeholder="Data fim" />
39
+ <div class="spark-grid-input-wrapper spark-grid-datatable-input-range">
40
+ <input type="date" :value="rangeEnd" @input="onRangeEndInput" :disabled="disabled"
41
+ class="spark-grid-datatable-input" :class="{ 'has-clear': showClearRange }"
42
+ placeholder="Data fim" />
43
+ </div>
44
+ <span v-if="showClearRange" class="spark-grid-input-clear spark-grid-input-clear-range" @click="clearRange">
45
+ <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
46
+ <path fill="currentColor"
47
+ d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z" />
48
+ <path fill="currentColor"
49
+ d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" />
50
+ </svg>
51
+ </span>
18
52
  </div>
19
53
  </div>
20
54
  </template>
21
55
 
22
56
  <script setup lang="ts">
23
- import { computed } from 'vue'
57
+ import { computed, ref } from 'vue'
58
+
59
+ const hovered = ref(false)
24
60
 
25
61
  const props = defineProps<{
26
62
  modelValue?: string | Date | [string, string] | [Date, Date] | null
@@ -33,6 +69,26 @@ const emit = defineEmits<{
33
69
  (e: 'change', value: string | [string, string] | null): void
34
70
  }>()
35
71
 
72
+ const showClearSingle = computed(() => {
73
+ return hovered.value && !props.disabled && props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== ''
74
+ })
75
+
76
+ const showClearRange = computed(() => {
77
+ if (!hovered.value || props.disabled) return false
78
+ if (!Array.isArray(props.modelValue)) return false
79
+ return props.modelValue[0] || props.modelValue[1]
80
+ })
81
+
82
+ const clearSingle = () => {
83
+ emit('update:modelValue', null)
84
+ emit('change', null)
85
+ }
86
+
87
+ const clearRange = () => {
88
+ emit('update:modelValue', ['', ''])
89
+ emit('change', ['', ''])
90
+ }
91
+
36
92
  // Format date value for native input
37
93
  const formattedValue = computed(() => {
38
94
  if (!props.modelValue) return ''
@@ -112,9 +168,14 @@ const onRangeEndInput = (event: Event) => {
112
168
  width: 100%;
113
169
  }
114
170
 
171
+ .spark-grid-input-wrapper {
172
+ position: relative;
173
+ width: 100%;
174
+ }
175
+
115
176
  .spark-grid-datatable-input {
116
177
  width: 100%;
117
- padding: 8px 12px;
178
+ padding: 5px 12px;
118
179
  border: 1px solid #dcdfe6;
119
180
  border-radius: 4px;
120
181
  font-size: 12px;
@@ -122,6 +183,10 @@ const onRangeEndInput = (event: Event) => {
122
183
  transition: border-color 0.2s;
123
184
  }
124
185
 
186
+ .spark-grid-datatable-input.has-clear {
187
+ padding-right: 24px;
188
+ }
189
+
125
190
  .spark-grid-datatable-input:hover {
126
191
  border-color: #c0c4cc;
127
192
  }
@@ -137,6 +202,36 @@ const onRangeEndInput = (event: Event) => {
137
202
  color: #c0c4cc;
138
203
  }
139
204
 
205
+ .spark-grid-input-clear {
206
+ position: absolute;
207
+ right: 6px;
208
+ top: 50%;
209
+ transform: translateY(-50%);
210
+ cursor: pointer;
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: center;
214
+ color: #c0c4cc;
215
+ transition: color 0.2s;
216
+ }
217
+
218
+ .spark-grid-input-clear:hover {
219
+ color: #909399;
220
+ }
221
+
222
+ .spark-grid-input-clear svg {
223
+ width: 14px;
224
+ height: 14px;
225
+ }
226
+
227
+ .spark-grid-input-clear-range {
228
+ position: relative;
229
+ right: auto;
230
+ top: auto;
231
+ transform: none;
232
+ flex-shrink: 0;
233
+ }
234
+
140
235
  .spark-grid-datatable-date-range {
141
236
  display: flex;
142
237
  align-items: center;
package/src/components/InputText.vue CHANGED
@@ -1,10 +1,26 @@
1
1
  <template>
2
- <input type="text" :value="modelValue" @input="onInput" @keyup.enter="$emit('keyup.enter', $event)"
3
- @change="$emit('change', $event)" :disabled="disabled" :placeholder="placeholder" class="spark-grid-datatable-input" />
2
+ <div class="spark-grid-input-wrapper" @mouseenter="hovered = true" @mouseleave="hovered = false">
3
+ <input type="text" :value="modelValue" @input="onInput" @keyup.enter="$emit('keyup.enter', $event)"
4
+ @change="$emit('change', $event)" :disabled="disabled" :placeholder="placeholder"
5
+ class="spark-grid-datatable-input" :class="{ 'has-clear': showClear }" />
6
+
7
+ <span v-if="showClear" class="spark-grid-input-clear" @click="clear">
8
+ <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
9
+ <path fill="currentColor"
10
+ d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z" />
11
+ <path fill="currentColor"
12
+ d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" />
13
+ </svg>
14
+ </span>
15
+ </div>
4
16
  </template>
5
17
 
6
18
  <script setup lang="ts">
7
- defineProps<{
19
+ import { computed, ref } from 'vue'
20
+
21
+ const hovered = ref(false)
22
+
23
+ const props = defineProps<{
8
24
  modelValue?: string | number
9
25
  disabled?: boolean
10
26
  placeholder?: string
@@ -16,16 +32,30 @@ const emit = defineEmits<{
16
32
  (e: 'change', event: Event): void
17
33
  }>()
18
34
 
35
+ const showClear = computed(() => {
36
+ return hovered.value && !props.disabled && props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== ''
37
+ })
38
+
19
39
  const onInput = (event: Event) => {
20
40
  const target = event.target as HTMLInputElement
21
41
  emit('update:modelValue', target.value)
22
42
  }
43
+
44
+ const clear = () => {
45
+ emit('update:modelValue', '')
46
+ emit('change', new Event('change'))
47
+ }
23
48
  </script>
24
49
 
25
50
  <style scoped>
51
+ .spark-grid-input-wrapper {
52
+ position: relative;
53
+ width: 100%;
54
+ }
55
+
26
56
  .spark-grid-datatable-input {
27
57
  width: 100%;
28
- padding: 8px 12px;
58
+ padding: 5px 12px;
29
59
  border: 1px solid #dcdfe6;
30
60
  border-radius: 4px;
31
61
  font-size: 12px;
@@ -33,6 +63,10 @@ const onInput = (event: Event) => {
33
63
  transition: border-color 0.2s;
34
64
  }
35
65
 
66
+ .spark-grid-datatable-input.has-clear {
67
+ padding-right: 24px;
68
+ }
69
+
36
70
  .spark-grid-datatable-input:hover {
37
71
  border-color: #c0c4cc;
38
72
  }
@@ -48,6 +82,28 @@ const onInput = (event: Event) => {
48
82
  color: #c0c4cc;
49
83
  }
50
84
 
85
+ .spark-grid-input-clear {
86
+ position: absolute;
87
+ right: 6px;
88
+ top: 50%;
89
+ transform: translateY(-50%);
90
+ cursor: pointer;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ color: #c0c4cc;
95
+ transition: color 0.2s;
96
+ }
97
+
98
+ .spark-grid-input-clear:hover {
99
+ color: #909399;
100
+ }
101
+
102
+ .spark-grid-input-clear svg {
103
+ width: 14px;
104
+ height: 14px;
105
+ }
106
+
51
107
  /* Mobile responsive */
52
108
  @media screen and (max-width: 480px) {
53
109
  .spark-grid-datatable-input {