@finema/core 3.17.1 → 3.18.0

package/dist/runtime/components/Table/Pagination.vue

@@ -1,90 +1,90 @@
 <template>
-  <div
+  <div
     :class="
   theme.paginationContainer({
     class: [ui?.paginationContainer]
   })
-"
-  >
-    <div
+"
+  >
+    <div
       :class="
   theme.paginationInfoWrapper({
     class: [ui?.paginationInfoWrapper]
   })
-"
-    >
-      <USelect
-        v-if="options.pageOptions && !options.isHideLimitSelect"
-        size="lg"
-        trailing="รายการ"
+"
+    >
+      <USelect
+        v-if="options.pageOptions && !options.isHideLimitSelect"
+        size="lg"
+        trailing="รายการ"
         :class="
   theme.paginationLimitSelect({
     class: [ui?.paginationLimitSelect, 'cursor-pointer']
   })
-"
-        :items="pageLimitItems"
-        :model-value="pageLimit"
-        @update:modelValue="emits('pageLimitChange', $event)"
-      >
-        <template #default="{ modelValue }">
-          <p
+"
+        :items="pageLimitItems"
+        :model-value="pageLimit"
+        @update:modelValue="emits('pageLimitChange', $event)"
+      >
+        <template #default="{ modelValue }">
+          <p
             :class="
   theme.paginationLimitSelectLabel({
     class: [ui?.paginationLimitSelectLabel]
   })
-"
-          >
-            {{ modelValue }}
-            {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}
-          </p>
-        </template>
-      </USelect>
-      <p
+"
+          >
+            {{ modelValue }}
+            {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}
+          </p>
+        </template>
+      </USelect>
+      <p
         :class="
   theme.paginationInfo({
     class: [ui?.paginationInfo, '']
   })
-"
-      >
-        <span v-if="options.pageOptions">{{ pageBetween }}
-          {{ appConfig.core?.locale === "th" ? "\u0E08\u0E32\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "of total" }}
-          {{ totalCountWithComma }}</span>
-        <span v-else>{{ appConfig.core?.locale === "th" ? "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "Total" }}
-          {{ options.rawData.length }}
-          {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}</span>
-      </p>
-    </div>
-    <UPagination
-      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
-      :page="page"
-      :default-page="options.pageOptions?.currentPage || 1"
-      :items-per-page="options.pageOptions.limit"
-      :total="options.pageOptions.totalCount"
-      :to="options.isRouteChange ? to : void 0"
-      show-edges
-      variant="outline"
-      color="neutral"
-      active-color="neutral"
-      active-variant="subtle"
-      @update:page="emits('pageChange', $event)"
-    >
-      <template #item="{ item, page }">
-        <Button
-          :variant="page === item.value ? 'subtle' : 'outline'"
-          :color="page === item.value ? 'neutral' : 'neutral'"
-          :label="String(NumberHelper.withComma(item.value))"
-          :ui="{ label: themePagination.label }"
-          square
-          :to="options.isRouteChange ? to?.(item.value) : void 0"
+"
+      >
+        <span v-if="options.pageOptions">{{ pageBetween }}
+          {{ appConfig.core?.locale === "th" ? "\u0E08\u0E32\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "of total" }}
+          {{ totalCountWithComma }}</span>
+        <span v-else>{{ appConfig.core?.locale === "th" ? "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "Total" }}
+          {{ options.rawData.length }}
+          {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}</span>
+      </p>
+    </div>
+    <UPagination
+      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
+      :page="page"
+      :default-page="options.pageOptions?.currentPage || 1"
+      :items-per-page="options.pageOptions.limit"
+      :total="options.pageOptions.totalCount"
+      :to="options.isRouteChange ? to : void 0"
+      show-edges
+      variant="outline"
+      color="neutral"
+      active-color="neutral"
+      active-variant="subtle"
+      @update:page="emits('pageChange', $event)"
+    >
+      <template #item="{ item, page }">
+        <Button
+          :variant="page === item.value ? 'subtle' : 'outline'"
+          :color="page === item.value ? 'neutral' : 'neutral'"
+          :label="String(NumberHelper.withComma(item.value))"
+          :ui="{ label: themePagination.label }"
+          square
+          :to="options.isRouteChange ? to?.(item.value) : void 0"
           :class="
   theme.buttonPagination({
     class: [ui?.buttonPagination]
   })
-"
-        />
-      </template>
-    </UPagination>
-  </div>
+"
+        />
+      </template>
+    </UPagination>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/Table/Simple.vue

@@ -1,28 +1,28 @@
 <template>
-  <Base
-    v-bind="$attrs"
+  <Base
+    v-bind="$attrs"
     :options="{
   ...options,
   pageOptions,
   isHideLimitSelect: true,
   rawData: itemsByPage
-}"
-    :ui="computedUi"
-    :to="to"
-    :target="target"
-    :preserve-query="preserveQuery"
-    @page-change="onPageChange"
-  >
-    <template
-      v-for="(_, slot) of $slots"
-      #[slot]="slotProps"
-    >
-      <slot
-        :name="slot"
-        v-bind="slotProps || {}"
-      />
-    </template>
-  </Base>
+}"
+    :ui="computedUi"
+    :to="to"
+    :target="target"
+    :preserve-query="preserveQuery"
+    @page-change="onPageChange"
+  >
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
+    </template>
+  </Base>
 </template>
 
 <script setup>

package/dist/runtime/components/Table/index.vue

@@ -1,41 +1,41 @@
 <template>
-  <div ref="tableContainer">
-    <div
-      v-if="options.isEnabledSearch"
+  <div ref="tableContainer">
+    <div
+      v-if="options.isEnabledSearch"
       :class="
   theme.searchContainer({
     class: [ui?.searchContainer]
   })
-"
-    >
-      <Input
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
-      />
-    </div>
-    <Base
-      v-bind="$attrs"
-      :options="options"
-      :ui="computedUi"
-      :column-pinning="computedColumnPinning"
-      :to="to"
-      :target="target"
-      :preserve-query="preserveQuery"
-      @page-change="onPageChange"
-      @search="emits('search', q)"
-    >
-      <template
-        v-for="(_, slot) of $slots"
-        #[slot]="slotProps"
-      >
-        <slot
-          :name="slot"
-          v-bind="slotProps || {}"
-        />
-      </template>
-    </Base>
-  </div>
+"
+    >
+      <Input
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
+      />
+    </div>
+    <Base
+      v-bind="$attrs"
+      :options="options"
+      :ui="computedUi"
+      :column-pinning="computedColumnPinning"
+      :to="to"
+      :target="target"
+      :preserve-query="preserveQuery"
+      @page-change="onPageChange"
+      @search="emits('search', q)"
+    >
+      <template
+        v-for="(_, slot) of $slots"
+        #[slot]="slotProps"
+      >
+        <slot
+          :name="slot"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </Base>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/composables/loaderList.js

@@ -1,5 +1,6 @@
 import { reactive, computed } from "vue";
 import { ObjectHelper } from "../utils/ObjectHelper.js";
+import { createCancelableRequest } from "../helpers/apiCancelHelper.js";
 import {
   apiListHelper
 } from "../helpers/apiListHelper.js";
@@ -9,28 +10,49 @@ export const useListLoader = (loaderOptions) => {
     status: ObjectHelper.createStatus(),
     options: {}
   });
+  let request = null;
+  const isActiveRequest = (currentRequest) => request === currentRequest;
+  const cancel = () => {
+    if (!request) return;
+    request.controller.abort();
+    request.cleanup();
+    request = null;
+    result.status = ObjectHelper.toCompleteStatus(result.status);
+  };
   const clear = () => {
+    cancel();
     result.status = ObjectHelper.createStatus();
     result.items = [];
     result.options = {};
   };
   const run = async (payload) => {
-    await apiListHelper(
-      () => result,
-      (_data) => {
-        result.status = _data;
-      },
-      (_data) => {
-        result.options = _data;
-      },
-      (_data) => {
-        result.items = _data;
-      },
-      {
-        ...loaderOptions,
-        ...payload
+    cancel();
+    const currentRequest = createCancelableRequest(payload?.signal);
+    request = currentRequest;
+    try {
+      await apiListHelper(
+        () => result,
+        (_data) => {
+          if (isActiveRequest(currentRequest)) result.status = _data;
+        },
+        (_data) => {
+          if (isActiveRequest(currentRequest)) result.options = _data;
+        },
+        (_data) => {
+          if (isActiveRequest(currentRequest)) result.items = _data;
+        },
+        {
+          ...loaderOptions,
+          ...payload,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      if (isActiveRequest(currentRequest)) {
+        currentRequest.cleanup();
+        request = null;
       }
-    );
+    }
   };
   const setLoading = () => {
     result.items = [];
@@ -44,6 +66,7 @@ export const useListLoader = (loaderOptions) => {
     status: computed(() => result.status),
     options: computed(() => result.options),
     run,
+    cancel,
     clear,
     setItems,
     setLoading

package/dist/runtime/composables/loaderObject.js

@@ -1,5 +1,6 @@
 import { computed, reactive } from "vue";
 import { ObjectHelper } from "../utils/ObjectHelper.js";
+import { createCancelableRequest } from "../helpers/apiCancelHelper.js";
 import {
   apiObjectHelper
 } from "../helpers/apiObjectHelper.js";
@@ -9,32 +10,59 @@ export const useObjectLoader = (loaderOptions) => {
     status: ObjectHelper.createStatus(),
     options: {}
   });
+  let request = null;
+  const isActiveRequest = (currentRequest) => request === currentRequest;
+  const canUpdateState = (currentRequest) => {
+    return isActiveRequest(currentRequest) || !currentRequest.signal.aborted;
+  };
+  const cancel = () => {
+    if (!request) return;
+    request.controller.abort();
+    request.cleanup();
+    request = null;
+    state.status = ObjectHelper.toCompleteStatus(state.status);
+  };
   const clear = () => {
+    cancel();
     state.status = ObjectHelper.createStatus();
     state.data = null;
   };
   const run = async (payload = {}) => {
-    await apiObjectHelper(
-      () => ({
-        data: state.data,
-        status: state.status,
-        options: state.options
-      }),
-      (_status) => {
-        state.status = _status;
-      },
-      (_options) => {
-        state.options = _options;
-      },
-      (_data) => {
-        state.data = _data ?? null;
-      },
-      payload.data,
-      {
-        ...loaderOptions,
-        ...payload
+    const method = String(payload.method ?? loaderOptions.method).toUpperCase();
+    if (method === "GET") cancel();
+    const currentRequest = createCancelableRequest(payload.signal);
+    request = currentRequest;
+    try {
+      await apiObjectHelper(
+        () => ({
+          data: state.data,
+          status: state.status,
+          options: state.options
+        }),
+        (_status) => {
+          if (canUpdateState(currentRequest)) state.status = _status;
+        },
+        (_options) => {
+          if (canUpdateState(currentRequest)) state.options = _options;
+        },
+        (_data) => {
+          if (canUpdateState(currentRequest)) {
+            state.data = _data ?? null;
+          }
+        },
+        payload.data,
+        {
+          ...loaderOptions,
+          ...payload,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      currentRequest.cleanup();
+      if (isActiveRequest(currentRequest)) {
+        request = null;
       }
-    );
+    }
   };
   const setLoading = () => {
     state.status = ObjectHelper.toLoadingStatus(state.status);
@@ -47,6 +75,7 @@ export const useObjectLoader = (loaderOptions) => {
     status: computed(() => state.status),
     options: computed(() => state.options),
     run,
+    cancel,
     clear,
     setLoading,
     setData