spark-grid-vue3 0.0.76 → 0.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "spark-grid-vue3",
-    "version": "0.0.76",
+    "version": "0.0.78",
     "description": "",
     "files": [
         "src"

package/src/components/InputDate.vue

@@ -1,26 +1,62 @@
 <template>
-    <div class="spark-grid-datatable-date-input">
+    <div class="spark-grid-datatable-date-input" @mouseenter="hovered = true" @mouseleave="hovered = false">
         <!-- Single date input -->
-        <input v-if="type === 'date'" type="date" :value="formattedValue" @input="onDateInput" :disabled="disabled"
-            class="spark-grid-datatable-input" />
+        <div v-if="type === 'date'" class="spark-grid-input-wrapper">
+            <input type="date" :value="formattedValue" @input="onDateInput" :disabled="disabled"
+                class="spark-grid-datatable-input" :class="{ 'has-clear': showClearSingle }" />
+            <span v-if="showClearSingle" class="spark-grid-input-clear" @click="clearSingle">
+                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        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" />
+                    <path fill="currentColor"
+                        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" />
+                </svg>
+            </span>
+        </div>
 
         <!-- Month picker -->
-        <input v-else-if="type === 'month'" type="month" :value="formattedMonthValue" @input="onMonthInput"
-            :disabled="disabled" class="spark-grid-datatable-input" />
+        <div v-else-if="type === 'month'" class="spark-grid-input-wrapper">
+            <input type="month" :value="formattedMonthValue" @input="onMonthInput" :disabled="disabled"
+                class="spark-grid-datatable-input" :class="{ 'has-clear': showClearSingle }" />
+            <span v-if="showClearSingle" class="spark-grid-input-clear" @click="clearSingle">
+                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        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" />
+                    <path fill="currentColor"
+                        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" />
+                </svg>
+            </span>
+        </div>
 
         <!-- Date range -->
         <div v-else-if="type === 'daterange'" class="spark-grid-datatable-date-range">
-            <input type="date" :value="rangeStart" @input="onRangeStartInput" :disabled="disabled"
-                class="spark-grid-datatable-input spark-grid-datatable-input-range" placeholder="Data início" />
+            <div class="spark-grid-input-wrapper spark-grid-datatable-input-range">
+                <input type="date" :value="rangeStart" @input="onRangeStartInput" :disabled="disabled"
+                    class="spark-grid-datatable-input" :class="{ 'has-clear': showClearRange }"
+                    placeholder="Data início" />
+            </div>
             <span class="spark-grid-datatable-date-separator">-</span>
-            <input type="date" :value="rangeEnd" @input="onRangeEndInput" :disabled="disabled"
-                class="spark-grid-datatable-input spark-grid-datatable-input-range" placeholder="Data fim" />
+            <div class="spark-grid-input-wrapper spark-grid-datatable-input-range">
+                <input type="date" :value="rangeEnd" @input="onRangeEndInput" :disabled="disabled"
+                    class="spark-grid-datatable-input" :class="{ 'has-clear': showClearRange }"
+                    placeholder="Data fim" />
+            </div>
+            <span v-if="showClearRange" class="spark-grid-input-clear spark-grid-input-clear-range" @click="clearRange">
+                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        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" />
+                    <path fill="currentColor"
+                        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" />
+                </svg>
+            </span>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+
+const hovered = ref(false)
 
 const props = defineProps<{
     modelValue?: string | Date | [string, string] | [Date, Date] | null
@@ -33,6 +69,26 @@ const emit = defineEmits<{
     (e: 'change', value: string | [string, string] | null): void
 }>()
 
+const showClearSingle = computed(() => {
+    return hovered.value && !props.disabled && props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== ''
+})
+
+const showClearRange = computed(() => {
+    if (!hovered.value || props.disabled) return false
+    if (!Array.isArray(props.modelValue)) return false
+    return props.modelValue[0] || props.modelValue[1]
+})
+
+const clearSingle = () => {
+    emit('update:modelValue', null)
+    emit('change', null)
+}
+
+const clearRange = () => {
+    emit('update:modelValue', ['', ''])
+    emit('change', ['', ''])
+}
+
 // Format date value for native input
 const formattedValue = computed(() => {
     if (!props.modelValue) return ''
@@ -112,9 +168,14 @@ const onRangeEndInput = (event: Event) => {
     width: 100%;
 }
 
+.spark-grid-input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
 .spark-grid-datatable-input {
     width: 100%;
-    padding: 8px 12px;
+    padding: 5px 12px;
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     font-size: 12px;
@@ -122,6 +183,10 @@ const onRangeEndInput = (event: Event) => {
     transition: border-color 0.2s;
 }
 
+.spark-grid-datatable-input.has-clear {
+    padding-right: 24px;
+}
+
 .spark-grid-datatable-input:hover {
     border-color: #c0c4cc;
 }
@@ -137,6 +202,36 @@ const onRangeEndInput = (event: Event) => {
     color: #c0c4cc;
 }
 
+.spark-grid-input-clear {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #c0c4cc;
+    transition: color 0.2s;
+}
+
+.spark-grid-input-clear:hover {
+    color: #909399;
+}
+
+.spark-grid-input-clear svg {
+    width: 14px;
+    height: 14px;
+}
+
+.spark-grid-input-clear-range {
+    position: relative;
+    right: auto;
+    top: auto;
+    transform: none;
+    flex-shrink: 0;
+}
+
 .spark-grid-datatable-date-range {
     display: flex;
     align-items: center;

package/src/components/InputText.vue

@@ -1,10 +1,26 @@
 <template>
-    <input type="text" :value="modelValue" @input="onInput" @keyup.enter="$emit('keyup.enter', $event)"
-        @change="$emit('change', $event)" :disabled="disabled" :placeholder="placeholder" class="spark-grid-datatable-input" />
+    <div class="spark-grid-input-wrapper" @mouseenter="hovered = true" @mouseleave="hovered = false">
+        <input type="text" :value="modelValue" @input="onInput" @keyup.enter="$emit('keyup.enter', $event)"
+            @change="$emit('change', $event)" :disabled="disabled" :placeholder="placeholder"
+            class="spark-grid-datatable-input" :class="{ 'has-clear': showClear }" />
+
+        <span v-if="showClear" class="spark-grid-input-clear" @click="clear">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path fill="currentColor"
+                    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" />
+                <path fill="currentColor"
+                    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" />
+            </svg>
+        </span>
+    </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed, ref } from 'vue'
+
+const hovered = ref(false)
+
+const props = defineProps<{
     modelValue?: string | number
     disabled?: boolean
     placeholder?: string
@@ -16,16 +32,30 @@ const emit = defineEmits<{
     (e: 'change', event: Event): void
 }>()
 
+const showClear = computed(() => {
+    return hovered.value && !props.disabled && props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== ''
+})
+
 const onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
     emit('update:modelValue', target.value)
 }
+
+const clear = () => {
+    emit('update:modelValue', '')
+    emit('change', new Event('change'))
+}
 </script>
 
 <style scoped>
+.spark-grid-input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
 .spark-grid-datatable-input {
     width: 100%;
-    padding: 8px 12px;
+    padding: 5px 12px;
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     font-size: 12px;
@@ -33,6 +63,10 @@ const onInput = (event: Event) => {
     transition: border-color 0.2s;
 }
 
+.spark-grid-datatable-input.has-clear {
+    padding-right: 24px;
+}
+
 .spark-grid-datatable-input:hover {
     border-color: #c0c4cc;
 }
@@ -48,6 +82,28 @@ const onInput = (event: Event) => {
     color: #c0c4cc;
 }
 
+.spark-grid-input-clear {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #c0c4cc;
+    transition: color 0.2s;
+}
+
+.spark-grid-input-clear:hover {
+    color: #909399;
+}
+
+.spark-grid-input-clear svg {
+    width: 14px;
+    height: 14px;
+}
+
 /* Mobile responsive */
 @media screen and (max-width: 480px) {
     .spark-grid-datatable-input {

package/src/utils/DataFetcher.ts

@@ -23,8 +23,9 @@ export class DataFetcher {
                 this.totalRows = response.total
                 this.currentPage = response.page
             } else {
-                this.setRows(response)
-                this.totalRows = response.length
+                const rows = Array.isArray(response) ? response : []
+                this.setRows(rows)
+                this.totalRows = rows.length
                 this.currentPage = 1
             }
 

package/src/utils/EventHandler.ts

@@ -1,15 +1,15 @@
-import type {Column, GridComponent, OrderBy, Row} from "../types"
+import type { Column, GridComponent, OrderBy, Row } from "../types"
 import { DataTableColumnType } from ".."
-import {UuidMapper} from "./UuidMapper"
+import { UuidMapper } from "./UuidMapper"
 // @ts-ignore
-import {v4 as uuid} from "uuid"
-import {isEmpty} from "./Conditionals"
-import {CheckboxSelectedMapper} from "./CheckboxSelectedMapper"
+import { v4 as uuid } from "uuid"
+import { isEmpty } from "./Conditionals"
+import { CheckboxSelectedMapper } from "./CheckboxSelectedMapper"
 // @ts-ignore
 import getValue from 'get-value'
-import type {ComponentPublicInstance} from "@vue/runtime-core";
-import {EventEmitter} from "./EventEmitter";
-import {RadioButtonSelectedMapper} from "./RadioButtonSelectedMapper";
+import type { ComponentPublicInstance } from "@vue/runtime-core";
+import { EventEmitter } from "./EventEmitter";
+import { RadioButtonSelectedMapper } from "./RadioButtonSelectedMapper";
 
 export class EventHandler {
     static async refresh(this: GridComponent): Promise<void> {
@@ -17,6 +17,8 @@ export class EventHandler {
     }
 
     static setRows(this: GridComponent, rows: Row[]): Row[] {
+        if (!Array.isArray(rows)) rows = []
+
         rows = rows
             .map(UuidMapper.add)
             .map((row: Row) => CheckboxSelectedMapper.map(row, this))
@@ -42,13 +44,13 @@ export class EventHandler {
     }
 
     static addRow(this: GridComponent, row: Row): void {
-        this.setRows([...this.getRows(), {...row}])
+        this.setRows([...this.getRows(), { ...row }])
     }
 
     static updateRow(this: GridComponent, uuid: string, row: Row): void {
         this.rows = this.getRows().map((currentRow: Row) => {
             if (currentRow._uuid == uuid) {
-                currentRow = {...currentRow, ...row}
+                currentRow = { ...currentRow, ...row }
             }
 
             return currentRow
@@ -122,7 +124,7 @@ export class EventHandler {
         value = isEmpty(value) ? "" : value
         this.filters[name] = value
         this.currentPage = 1
-        EventEmitter.emit(this, "grid-filter", {name: name, value, uuid: this.uuid})
+        EventEmitter.emit(this, "grid-filter", { name: name, value, uuid: this.uuid })
     }
 
     static setFilters(this: GridComponent, filters: any): void {
@@ -132,7 +134,7 @@ export class EventHandler {
     }
 
     static getFilters(this: GridComponent): any {
-        return {...this.filters}
+        return { ...this.filters }
     }
 
     static async paginate(this: GridComponent, page: number, rowsPerPage: number): Promise<void> {