sprintify-ui 0.10.38 → 0.10.40

package/dist/types/components/BaseDataIterator.vue.d.ts

@@ -263,7 +263,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vu
             filter?: Record<string, any> | undefined;
         };
         updateQuery: (newQuery: DataTableQuery) => void;
-        updateQueryValue: (key: string, value: any) => void;
+        updateQueryValue: (key: string | DataTableQuery, value: any) => void;
         updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
     }) => any) & ((props: {
         query: {
@@ -274,7 +274,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vu
             filter?: Record<string, any> | undefined;
         };
         updateQuery: (newQuery: DataTableQuery) => void;
-        updateQueryValue: (key: string, value: any) => void;
+        updateQueryValue: (key: string | DataTableQuery, value: any) => void;
         updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
     }) => any) & ((props: {
         query: {
@@ -285,7 +285,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vu
             filter?: Record<string, any> | undefined;
         };
         updateQuery: (newQuery: DataTableQuery) => void;
-        updateQueryValue: (key: string, value: any) => void;
+        updateQueryValue: (key: string | DataTableQuery, value: any) => void;
         updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
     }) => any)) | undefined;
     default?: ((props: {

package/dist/types/components/BaseDataTable.vue.d.ts

@@ -246,13 +246,7 @@ declare const table: import("vue").Ref<({
     };
     $forceUpdate: () => void;
     $nextTick: typeof import("vue").nextTick;
-    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (
-    /**
-     * Checked rows array
-     */
-    ... /**
-     * Checked rows array
-     */args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
     data: import("@/types").Row[];
     size: "xs" | "sm" | "md" | "lg" | "xl";
@@ -626,13 +620,7 @@ declare const table: import("vue").Ref<({
     };
     $forceUpdate: () => void;
     $nextTick: typeof import("vue").nextTick;
-    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (
-    /**
-     * Checked rows array
-     */
-    ... /**
-     * Checked rows array
-     */args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
     data: import("@/types").Row[];
     size: "xs" | "sm" | "md" | "lg" | "xl";
@@ -959,13 +947,7 @@ declare const dataIteratorRef: import("vue").Ref<({
     };
     $forceUpdate: () => void;
     $nextTick: typeof import("vue").nextTick;
-    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (
-    /**
-     * Checked rows array
-     */
-    ... /**
-     * Checked rows array
-     */args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
     search: (items: Collection, search: string | null) => Collection;
     size: "xs" | "sm" | "md" | "lg" | "xl";
@@ -1071,7 +1053,7 @@ declare const dataIteratorRef: import("vue").Ref<({
                 filter?: Record<string, any> | undefined;
             };
             updateQuery: (newQuery: DataTableQuery) => void;
-            updateQueryValue: (key: string, value: any) => void;
+            updateQueryValue: (key: string | DataTableQuery, value: any) => void;
             updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
         }) => any) & ((props: {
             query: {
@@ -1082,7 +1064,7 @@ declare const dataIteratorRef: import("vue").Ref<({
                 filter?: Record<string, any> | undefined;
             };
             updateQuery: (newQuery: DataTableQuery) => void;
-            updateQueryValue: (key: string, value: any) => void;
+            updateQueryValue: (key: string | DataTableQuery, value: any) => void;
             updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
         }) => any) & ((props: {
             query: {
@@ -1093,7 +1075,7 @@ declare const dataIteratorRef: import("vue").Ref<({
                 filter?: Record<string, any> | undefined;
             };
             updateQuery: (newQuery: DataTableQuery) => void;
-            updateQueryValue: (key: string, value: any) => void;
+            updateQueryValue: (key: string | DataTableQuery, value: any) => void;
             updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
         }) => any)) | undefined;
         default?: ((props: {
@@ -1307,13 +1289,7 @@ declare const dataIteratorRef: import("vue").Ref<({
     };
     $forceUpdate: () => void;
     $nextTick: typeof import("vue").nextTick;
-    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (
-    /**
-     * Checked rows array
-     */
-    ... /**
-     * Checked rows array
-     */args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
     search: (items: Collection, search: string | null) => Collection;
     size: "xs" | "sm" | "md" | "lg" | "xl";
@@ -1419,7 +1395,7 @@ declare const dataIteratorRef: import("vue").Ref<({
                 filter?: Record<string, any> | undefined;
             };
             updateQuery: (newQuery: DataTableQuery) => void;
-            updateQueryValue: (key: string, value: any) => void;
+            updateQueryValue: (key: string | DataTableQuery, value: any) => void;
             updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
         }) => any) & ((props: {
             query: {
@@ -1430,7 +1406,7 @@ declare const dataIteratorRef: import("vue").Ref<({
                 filter?: Record<string, any> | undefined;
             };
             updateQuery: (newQuery: DataTableQuery) => void;
-            updateQueryValue: (key: string, value: any) => void;
+            updateQueryValue: (key: string | DataTableQuery, value: any) => void;
             updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
         }) => any) & ((props: {
             query: {
@@ -1441,7 +1417,7 @@ declare const dataIteratorRef: import("vue").Ref<({
                 filter?: Record<string, any> | undefined;
             };
             updateQuery: (newQuery: DataTableQuery) => void;
-            updateQueryValue: (key: string, value: any) => void;
+            updateQueryValue: (key: string | DataTableQuery, value: any) => void;
             updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
         }) => any)) | undefined;
         default?: ((props: {
@@ -1527,7 +1503,7 @@ declare var __VLS_28: {
         filter?: Record<string, any> | undefined;
     };
     updateQuery: (newQuery: DataTableQuery) => void;
-    updateQueryValue: (key: string, value: any) => void;
+    updateQueryValue: (key: string | DataTableQuery, value: any) => void;
     updateQueryValueDebounce: import("lodash").DebouncedFunc<(key: string, value: any) => void>;
 }, __VLS_57: {
     paginationMetadata: import("@/types").PaginationMetadata | null;

package/dist/types/types/index.d.ts

@@ -129,7 +129,7 @@ export interface DialogOptions {
     confirmText?: string;
     cancelText?: string;
     closeOnOutsideClick?: boolean;
-    onConfirm?: (input?: string) => void;
+    onConfirm?: (input?: string) => Promise<void> | void;
     onCancel?: () => void;
 }
 export interface Dialog {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.38",
+  "version": "0.10.40",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDataIterator.vue

@@ -450,7 +450,18 @@ watch(
 |--------------------------------------------------------------------------
 */
 
-function updateFilterQueryValue(key: string, value: any) {
+function updateFilterQueryValue(key: string | DataTableQuery, value: any) {
+
+  if (typeof key === 'object') {
+    // If the key is an object, merge it into the query
+    let newQuery = cloneDeep(query.value);
+    newQuery = merge(newQuery, key);
+    newQuery = set(newQuery, 'page', 1);
+
+    updateQuery(newQuery);
+    return;
+  }
+
   let newQuery = cloneDeep(query.value);
   newQuery = set(newQuery, key, value);
   newQuery = set(newQuery, 'page', 1);

package/src/components/BaseDataTable.vue

@@ -615,44 +615,54 @@ const canDelete = (row: CollectionItem): boolean => {
 };
 
 function onDeleteClick(row: CollectionItem) {
-  dialogs.push({
-    title: props.deleteLabel ? props.deleteLabel : (t('sui.delete_record') + '?'),
-    message: props.deleteMessage ? props.deleteMessage : t('sui.delete_record_description'),
-    color: 'danger',
-    closeOnOutsideClick: true,
-    confirmText: t('sui.yes_delete'),
-    onConfirm: () => onDelete(row),
+  return new Promise<void>((resolve) => {
+    dialogs.push({
+      title: props.deleteLabel ? props.deleteLabel : (t('sui.delete_record') + '?'),
+      message: props.deleteMessage ? props.deleteMessage : t('sui.delete_record_description'),
+      color: 'danger',
+      closeOnOutsideClick: true,
+      confirmText: t('sui.yes_delete'),
+      onConfirm: async () => {
+        await onDelete(row),
+          resolve();
+      },
+      onCancel: () => {
+        resolve();
+      },
+    });
   });
 }
 
-const onDelete = (row: CollectionItem) => {
+async function onDelete(row: CollectionItem) {
   if (!props.deleteUrl) {
     return;
   }
 
-  http
-    .delete(props.deleteUrl(row))
-    .then((response) => {
-      if (response.data && response.data.message) {
-        snackbars.push({
-          title: t('sui.success'),
-          text: response.data.message,
-          color: 'success',
-        });
-      }
-      emit('delete', row);
-
-      // Refetch even if URL is the same
-      fetch();
-    })
-    .catch((error) => {
+  try {
+
+    const response = await http.delete(props.deleteUrl(row));
+
+    if (response.data && response.data.message) {
       snackbars.push({
-        title: t('sui.error'),
-        text: error.response.data?.message ?? 'Unknown error',
-        color: 'danger',
+        title: t('sui.success'),
+        text: response.data.message,
+        color: 'success',
       });
+    }
+
+    emit('delete', row);
+
+    // Refetch even if URL is the same
+    fetch();
+
+  } catch (error: any) {
+    snackbars.push({
+      title: t('sui.error'),
+      text: error.response.data?.message ?? 'Unknown error',
+      color: 'danger',
     });
-};
+  }
+}
 
 const componentStorageKey = 'base_data_table.';
 const settingsStorage = config.settingsStorage;

package/src/components/BaseDataTableRowAction.vue

@@ -1,70 +1,39 @@
 <template>
-  <button
+  <BaseButton
     v-if="rowAction.action"
     type="button"
-    class="btn btn-white border border-slate-300 shadow-sm"
-    :class="{
-      'btn-xs px-1.5 py-1': size === 'sm',
-      'btn-sm px-2 py-1.5': size === 'md',
-    }"
+    :loading="loading"
+    :size="sizeInternal"
+    :icon="rowAction.icon"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
-    @click="rowAction.action ? rowAction.action(row) : null"
-  >
-    <BaseIcon
-      :icon="rowAction.icon"
-      class="text-slate-500"
-      :class="{
-        'h-3 w-3': size === 'sm',
-      }"
-    />
-  </button>
-  <component
-    :is="(rowAction.disabled && rowAction.disabled(row)) ? 'span' : 'a'"
+    @click="completeAction()"
+  />
+  <BaseButton
     v-else-if="rowAction.href"
+    :as="(rowAction.disabled && rowAction.disabled(row)) ? 'span' : 'a'"
     :href="rowAction.href(row)"
-    class="btn btn-white border border-slate-300 shadow-sm"
-    :class="{
-      'btn-xs px-1.5 py-1': size === 'sm',
-      'btn-sm px-2 py-1.5': size === 'md',
-      'opacity-50 cursor-not-allowed': rowAction.disabled && rowAction.disabled(row),
-    }"
+    :size="sizeInternal"
+    :icon="rowAction.icon"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
-  >
-    <BaseIcon
-      :icon="rowAction.icon"
-      class="text-slate-500"
-      :class="{
-        'h-3 w-3': size === 'sm',
-      }"
-    />
-  </component>
-  <component
-    :is="(rowAction.disabled && rowAction.disabled(row)) ? 'span' : 'router-link'"
+  />
+  <BaseButton
     v-else-if="rowAction.to"
+    :as="(rowAction.disabled && rowAction.disabled(row)) ? 'span' : 'router-link'"
     :to="rowAction.to(row)"
-    class="btn btn-white border border-slate-300 shadow-sm hover:bg-slate-100"
-    :class="{
-      'btn-xs px-1.5 py-1': size === 'sm',
-      'btn-sm px-2 py-1.5': size === 'md',
-      'opacity-50 cursor-not-allowed': rowAction.disabled && rowAction.disabled(row),
-    }"
-  >
-    <BaseIcon
-      :icon="rowAction.icon"
-      class="text-slate-500"
-      :class="{
-        'h-3 w-3': size === 'sm',
-      }"
-    />
-  </component>
+    :size="sizeInternal"
+    :icon="rowAction.icon"
+    :disabled="rowAction.disabled && rowAction.disabled(row)"
+  />
 </template>
 
 <script lang="ts" setup>
 import { CollectionItem, RowAction } from '@/types';
-import { BaseIcon } from '.';
 import { Size } from '@/utils/sizes';
+import BaseButton from './BaseButton.vue';
+
+const loading = ref(false);
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   row: CollectionItem;
   rowAction: RowAction;
   size?: Size,
@@ -72,4 +41,27 @@ withDefaults(defineProps<{
   size: 'md',
 });
 
+const sizeInternal = computed(() => {
+  if (props.size === 'md') {
+    return 'sm';
+  } else if (props.size === 'sm') {
+    return 'xs';
+  }
+  return 'sm';
+});
+
+async function completeAction() {
+  if (props.rowAction.action) {
+    loading.value = true;
+    try {
+      await props.rowAction.action(props.row);
+    } catch (error) {
+      console.error('Error executing row action:', error);
+    } finally {
+      loading.value = false;
+    }
+
+  }
+}
+
 </script>

package/src/types/index.ts

@@ -161,7 +161,7 @@ export interface DialogOptions {
   confirmText?: string;
   cancelText?: string;
   closeOnOutsideClick?: boolean;
-  onConfirm?: (input?: string) => void;
+  onConfirm?: (input?: string) => Promise<void> | void;
   onCancel?: () => void;
 }