@regcheq/ui-vue-2 1.4.1 → 1.5.0

package/dist/index.css

@@ -1464,11 +1464,33 @@
   align-items: center;
   gap: 8px;
 }
-.rq-search-input .rq-field {
+.rq-search-input__field {
+  position: relative;
   flex: 1;
   min-width: 220px;
   max-width: 234px;
 }
+.rq-search-input .rq-field {
+  width: 100%;
+}
+.rq-search-input__clear {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #71717a;
+  transition: color 100ms ease;
+}
+.rq-search-input__clear:hover {
+  color: #3f3f46;
+}
 .rq-search-input__visually-hidden {
   position: absolute;
   width: 1px;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { ref, watch, computed } from '@vue/composition-api';
+import { ref, watch, computed } from 'vue';
 
 /**
  * @license lucide-vue v0.517.0 - ISC
@@ -32971,7 +32971,7 @@ var __vue_render__$e = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   }), _vm._v(" "), _c("div", {
@@ -33079,7 +33079,7 @@ var __vue_render__$d = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   }), _vm._v(" "), _c("span", {
@@ -33194,7 +33194,7 @@ var __vue_render__$c = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   }), _vm._v(" "), _c("span", {
@@ -33301,7 +33301,7 @@ var __vue_render__$b = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   })], 1), _vm._v(" "), _c("div", {
@@ -33947,12 +33947,24 @@ const searchInputVariants = cva('rq-search-input', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$7 = {
   name: 'SearchInput',
   components: {
     Input: __vue_component__$m,
-    Button: __vue_component__$l
+    Button: __vue_component__$l,
+    X
   },
   props: {
     value: {
@@ -33970,11 +33982,18 @@ var script$7 = {
     },
     inputId() {
       return `rq-search-input-${this._uid}`;
+    },
+    hasValue() {
+      return !!this.value;
     }
   },
   methods: {
     onKeydown(event) {
       if (event.key === 'Enter') this.$emit('search', this.value);
+    },
+    onClear() {
+      this.$emit('input', '');
+      this.$emit('search', '');
     }
   }
 };
@@ -33994,7 +34013,9 @@ var __vue_render__$7 = function () {
     attrs: {
       for: _vm.inputId
     }
-  }, [_vm._v(_vm._s(_vm.placeholder))]), _vm._v(" "), _c("Input", {
+  }, [_vm._v(_vm._s(_vm.placeholder))]), _vm._v(" "), _c("div", {
+    staticClass: "rq-search-input__field"
+  }, [_c("Input", {
     attrs: {
       id: _vm.inputId,
       value: _vm.value,
@@ -34007,7 +34028,20 @@ var __vue_render__$7 = function () {
       },
       keydown: _vm.onKeydown
     }
-  }), _vm._v(" "), _c("Button", {
+  }), _vm._v(" "), _vm.hasValue ? _c("button", {
+    staticClass: "rq-search-input__clear",
+    attrs: {
+      type: "button",
+      "aria-label": "Limpiar búsqueda"
+    },
+    on: {
+      click: _vm.onClear
+    }
+  }, [_c("X", {
+    attrs: {
+      size: 16
+    }
+  })], 1) : _vm._e()], 1), _vm._v(" "), _c("Button", {
     attrs: {
       variant: "primary",
       "icon-left": "Search"
@@ -37799,7 +37833,9 @@ var __vue_render__$4 = function () {
     attrs: {
       colspan: _vm.columns.length + (_vm.selectable ? 1 : 0)
     }
-  }, [_vm._t("empty", [_c("span", [_vm._v("Sin datos")])])], 2)]) : _vm._e(), _vm._v(" "), _vm._l(_vm.tableRows, function (row) {
+  }, [_vm._t("empty", function () {
+    return [_c("span", [_vm._v("Sin datos")])];
+  })], 2)]) : _vm._e(), _vm._v(" "), _vm._l(_vm.tableRows, function (row) {
     return _c("tr", {
       key: row.id,
       staticClass: "rq-table__tr rq-table__tr--body",
@@ -37837,7 +37873,9 @@ var __vue_render__$4 = function () {
           "rq-table__td--pinned": header.id in _vm.pinnedLeftWidths
         },
         style: _vm.getColStyle(header)
-      }, [_vm._t("cell-" + header.id, [_vm._v("\n              " + _vm._s(row.getValue(header.id)) + "\n            ")], {
+      }, [_vm._t("cell-" + header.id, function () {
+        return [_vm._v("\n              " + _vm._s(row.getValue(header.id)) + "\n            ")];
+      }, {
         row: row.original,
         value: row.getValue(header.id)
       })], 2);

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var compositionApi = require('@vue/composition-api');
+var vue = require('vue');
 
 /**
  * @license lucide-vue v0.517.0 - ISC
@@ -32973,7 +32973,7 @@ var __vue_render__$e = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   }), _vm._v(" "), _c("div", {
@@ -33081,7 +33081,7 @@ var __vue_render__$d = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   }), _vm._v(" "), _c("span", {
@@ -33196,7 +33196,7 @@ var __vue_render__$c = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   }), _vm._v(" "), _c("span", {
@@ -33303,7 +33303,7 @@ var __vue_render__$b = function () {
     nativeOn: {
       click: function ($event) {
         $event.stopPropagation();
-        return function () {}();
+        return function () {}.apply(null, arguments);
       }
     }
   })], 1), _vm._v(" "), _c("div", {
@@ -33949,12 +33949,24 @@ const searchInputVariants = cva('rq-search-input', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$7 = {
   name: 'SearchInput',
   components: {
     Input: __vue_component__$m,
-    Button: __vue_component__$l
+    Button: __vue_component__$l,
+    X
   },
   props: {
     value: {
@@ -33972,11 +33984,18 @@ var script$7 = {
     },
     inputId() {
       return `rq-search-input-${this._uid}`;
+    },
+    hasValue() {
+      return !!this.value;
     }
   },
   methods: {
     onKeydown(event) {
       if (event.key === 'Enter') this.$emit('search', this.value);
+    },
+    onClear() {
+      this.$emit('input', '');
+      this.$emit('search', '');
     }
   }
 };
@@ -33996,7 +34015,9 @@ var __vue_render__$7 = function () {
     attrs: {
       for: _vm.inputId
     }
-  }, [_vm._v(_vm._s(_vm.placeholder))]), _vm._v(" "), _c("Input", {
+  }, [_vm._v(_vm._s(_vm.placeholder))]), _vm._v(" "), _c("div", {
+    staticClass: "rq-search-input__field"
+  }, [_c("Input", {
     attrs: {
       id: _vm.inputId,
       value: _vm.value,
@@ -34009,7 +34030,20 @@ var __vue_render__$7 = function () {
       },
       keydown: _vm.onKeydown
     }
-  }), _vm._v(" "), _c("Button", {
+  }), _vm._v(" "), _vm.hasValue ? _c("button", {
+    staticClass: "rq-search-input__clear",
+    attrs: {
+      type: "button",
+      "aria-label": "Limpiar búsqueda"
+    },
+    on: {
+      click: _vm.onClear
+    }
+  }, [_c("X", {
+    attrs: {
+      size: 16
+    }
+  })], 1) : _vm._e()], 1), _vm._v(" "), _c("Button", {
     attrs: {
       variant: "primary",
       "icon-left": "Search"
@@ -37198,23 +37232,23 @@ function getCoreRowModel() {
 
 function useTable(props, emit) {
   // --- Estado Vue ---
-  const columnOrder = compositionApi.ref([]);
-  const columnPinning = compositionApi.ref({
+  const columnOrder = vue.ref([]);
+  const columnPinning = vue.ref({
     left: [],
     right: []
   });
-  const rowSelection = compositionApi.ref({});
-  const activeChevronKey = compositionApi.ref(null);
-  const draggingKey = compositionApi.ref(null);
-  const dragOverKey = compositionApi.ref(null);
+  const rowSelection = vue.ref({});
+  const activeChevronKey = vue.ref(null);
+  const draggingKey = vue.ref(null);
+  const dragOverKey = vue.ref(null);
 
   // --- Sincronizar props → estado Vue ---
-  compositionApi.watch(() => props.columnOrder, val => {
+  vue.watch(() => props.columnOrder, val => {
     columnOrder.value = val ? [...val] : props.columns.map(c => c.key);
   }, {
     immediate: true
   });
-  compositionApi.watch(() => props.pinnedColumns, val => {
+  vue.watch(() => props.pinnedColumns, val => {
     columnPinning.value = {
       left: val ? [...val] : [],
       right: []
@@ -37224,13 +37258,13 @@ function useTable(props, emit) {
   });
 
   // --- TanStack: solo para el row model (getValue, getRowModel) ---
-  const tanstackColumns = compositionApi.computed(() => props.columns.map(col => ({
+  const tanstackColumns = vue.computed(() => props.columns.map(col => ({
     id: col.key,
     accessorKey: col.key,
     header: col.label,
     size: col.width || 150
   })));
-  const table = compositionApi.computed(() => createTable({
+  const table = vue.computed(() => createTable({
     columns: tanstackColumns.value,
     data: props.rows,
     getCoreRowModel: getCoreRowModel(),
@@ -37252,7 +37286,7 @@ function useTable(props, emit) {
   //
   // Regla: pinned (en el orden de columnPinning.left) primero,
   //        luego el resto (en el orden de columnOrder).
-  const orderedColumnKeys = compositionApi.computed(() => {
+  const orderedColumnKeys = vue.computed(() => {
     const leftKeys = columnPinning.value.left || [];
     const leftSet = new Set(leftKeys);
     const pinned = leftKeys.filter(k => columnOrder.value.includes(k));
@@ -37262,7 +37296,7 @@ function useTable(props, emit) {
 
   // headerGroups: estructura que itera el template, idéntica a la de TanStack
   // pero con orden garantizado
-  const headerGroups = compositionApi.computed(() => [{
+  const headerGroups = vue.computed(() => [{
     id: 'main',
     headers: orderedColumnKeys.value.map(key => {
       const colDef = props.columns.find(c => c.key === key) || {};
@@ -37277,11 +37311,11 @@ function useTable(props, emit) {
       };
     })
   }]);
-  const tableRows = compositionApi.computed(() => table.value.getRowModel().rows);
+  const tableRows = vue.computed(() => table.value.getRowModel().rows);
 
   // --- Offsets sticky para columnas fijadas ---
   // Sigue el orden de columnPinning.left (igual que orderedColumnKeys para pinned)
-  const pinnedLeftWidths = compositionApi.computed(() => {
+  const pinnedLeftWidths = vue.computed(() => {
     const left = columnPinning.value.left || [];
     if (!left.length) return {};
     const offsets = {};
@@ -37343,11 +37377,11 @@ function useTable(props, emit) {
   }
 
   // --- Handlers de selección de filas ---
-  const allSelected = compositionApi.computed(() => {
+  const allSelected = vue.computed(() => {
     if (!props.rows.length) return false;
     return props.rows.every(row => rowSelection.value[String(row[props.rowId])]);
   });
-  const someSelected = compositionApi.computed(() => !allSelected.value && props.rows.some(row => rowSelection.value[String(row[props.rowId])]));
+  const someSelected = vue.computed(() => !allSelected.value && props.rows.some(row => rowSelection.value[String(row[props.rowId])]));
   function toggleRow(rowId) {
     const sel = {
       ...rowSelection.value
@@ -37801,7 +37835,9 @@ var __vue_render__$4 = function () {
     attrs: {
       colspan: _vm.columns.length + (_vm.selectable ? 1 : 0)
     }
-  }, [_vm._t("empty", [_c("span", [_vm._v("Sin datos")])])], 2)]) : _vm._e(), _vm._v(" "), _vm._l(_vm.tableRows, function (row) {
+  }, [_vm._t("empty", function () {
+    return [_c("span", [_vm._v("Sin datos")])];
+  })], 2)]) : _vm._e(), _vm._v(" "), _vm._l(_vm.tableRows, function (row) {
     return _c("tr", {
       key: row.id,
       staticClass: "rq-table__tr rq-table__tr--body",
@@ -37839,7 +37875,9 @@ var __vue_render__$4 = function () {
           "rq-table__td--pinned": header.id in _vm.pinnedLeftWidths
         },
         style: _vm.getColStyle(header)
-      }, [_vm._t("cell-" + header.id, [_vm._v("\n              " + _vm._s(row.getValue(header.id)) + "\n            ")], {
+      }, [_vm._t("cell-" + header.id, function () {
+        return [_vm._v("\n              " + _vm._s(row.getValue(header.id)) + "\n            ")];
+      }, {
         row: row.original,
         value: row.getValue(header.id)
       })], 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regcheq/ui-vue-2",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "files": [
@@ -26,8 +26,7 @@
     "prepare": "husky"
   },
   "peerDependencies": {
-    "vue": "^2.6.0",
-    "@vue/composition-api": "^1.7.0"
+    "vue": "^2.7.0"
   },
   "dependencies": {
     "@tanstack/table-core": "^8.21.3",
@@ -73,13 +72,12 @@
     "semantic-release": "^22.0.12",
     "storybook": "7.6.17",
     "style-loader": "^3.3.3",
-    "@vue/composition-api": "^1.7.2",
-    "vue": "2.6.11",
+    "vue": "2.7.16",
     "vue-docgen-api": "^4.79.2",
     "vue-docgen-loader": "^2.0.1",
     "vue-loader": "^15.11.1",
     "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "2.6.11",
+    "vue-template-compiler": "2.7.16",
     "webpack": "^5.88.0"
   }
 }