@voicenter-team/voicenter-ui-plus 3.0.0 → 3.0.2

package/library/entity/components/Table/VcEntityListTable.vue.mjs

@@ -1,7 +1,416 @@
-import _sfc_main from "./VcEntityListTable.vue2.mjs";
-import '../../../assets/entity/components/Table/VcEntityListTable.css';/* empty css                        */
-import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const VcEntityListTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82a0632a"]]);
+import '../../../assets/entity/components/Table/VcEntityListTable.css';
+import { defineComponent, useSlots, useAttrs, ref, computed, watch, openBlock, createElementBlock, createVNode, mergeProps, unref, createSlots, withCtx, createElementVNode, createBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { Trash2 } from "@lucide/vue";
+import _sfc_main$5 from "../../../components/VcInput/VcInput.vue.mjs";
+import '../../../assets/components/VcButton/VcButton.css';import '../../../assets/components/VcTable/VcTable2.css';import '../../../assets/components/VcTable/VcTable.css';import '../../../assets/components/VcInput/VcInput.css';/* empty css                                        */
+import _sfc_main$1 from "../../../components/VcTable/VcTable.vue.mjs";
+/* empty css                                        */
+/* empty css                                        */
+import { useEntityInject } from "../../composable/useEntityProvideInject.mjs";
+import { useEntityListTableInject } from "../../composable/useEntityListTableExternalPaginate.mjs";
+import { refDebounced } from "@vueuse/core";
+import { get } from "lodash-es";
+import _sfc_main$7 from "../Button/VcEntityAddButton.vue.mjs";
+import _sfc_main$2 from "../Button/VcEntityRestoreButton.vue.mjs";
+import _sfc_main$3 from "../Button/VcEntityEditIconButton.vue.mjs";
+import _sfc_main$4 from "../Button/VcEntityDeleteIconButton.vue.mjs";
+import { tVU } from "../../../localization/index.mjs";
+import _sfc_main$6 from "../../../components/VcButton/VcButton.vue.mjs";
+/* empty css                                          */
+const _hoisted_1 = { class: "vc-entity-list-table__wrap relative" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = ["colspan"];
+const _hoisted_4 = { class: "w-full p-4 items-center flex flex-col" };
+const _hoisted_5 = { class: "text-default-text text-sm font-semibold" };
+const _hoisted_6 = { class: "flex-center px-2" };
+const _hoisted_7 = { class: "flex justify-between flex-wrap md:flex-nowrap gap-2" };
+const _hoisted_8 = { class: "left-header-actions flex items-center order-2 md:order-1 w-full md:w-auto" };
+const _hoisted_9 = {
+  key: 0,
+  class: "md:mx-6 w-full md:w-60"
+};
+const _hoisted_10 = { class: "right-header-actions flex items-center flex-wrap md:flex-nowrap gap-2 order-1 md:order-2" };
+const _hoisted_11 = { class: "flex items-center justify-center gap-1" };
+const _hoisted_12 = {
+  key: 1,
+  class: "flex-center gap-1"
+};
+const _hoisted_13 = {
+  key: 0,
+  class: "vc-entity-table-disabled-overflow"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcEntityListTable",
+  props: {
+    columns: {},
+    data: { default: () => [] },
+    searchKeys: { default: () => [] },
+    showRecycleBinAction: { type: Boolean, default: true },
+    showActionColumns: { type: Boolean, default: true },
+    showSelection: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    addEntityLabel: { default: "" },
+    tableNoDataText: { default: "" },
+    inputSearch: { default: "" },
+    loaderType: { default: "lds-spinner" },
+    editIcon: { default: "vc-icon-settings" },
+    editIconAnimate: { type: Boolean, default: true },
+    deleteIcon: { default: () => Trash2 }
+  },
+  emits: ["handle-selection-change", "edit", "add", "update:inputSearch"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const {
+      entity,
+      loading,
+      editableTabs,
+      onEditFunction,
+      onDeleteFunction,
+      onRestoreFunction,
+      onRecycleBinToggleFunction,
+      onCreateFunction,
+      onEntityTableDeleteSelectedFunction
+    } = useEntityInject();
+    const { perPageOptions, loadPaginatedDataFunction, updateCurrentPaginationDataModel, currentPaginationDataModel } = useEntityListTableInject();
+    const selectedItems = ref([]);
+    const localData = ref([]);
+    const isRecycleBin = ref(false);
+    const searchModel = ref("");
+    const searchInputRef = ref();
+    const debouncedSearchModel = refDebounced(searchModel, 300);
+    const usedSlots = computed(() => {
+      return Object.keys(slots);
+    });
+    const paginationModelToTablePaginationType = computed(() => {
+      return {
+        currentPage: (currentPaginationDataModel == null ? void 0 : currentPaginationDataModel.value.Page) || 1,
+        perPage: (currentPaginationDataModel == null ? void 0 : currentPaginationDataModel.value.PerPage) || 10,
+        total: (currentPaginationDataModel == null ? void 0 : currentPaginationDataModel.value.Total) || 0
+      };
+    });
+    const externalPaginate = computed(() => {
+      if (entity == null ? void 0 : entity.hasPagination) {
+        return paginationModelToTablePaginationType.value;
+      } else {
+        return void 0;
+      }
+    });
+    const dataSearched = computed(() => {
+      if (!props.searchKeys.length || !debouncedSearchModel.value) {
+        return localData.value;
+      }
+      return localData.value.filter((el) => {
+        const searchByString = props.searchKeys.map((key) => get(el, key, "")).join(" ").toLowerCase();
+        return searchByString.includes(debouncedSearchModel.value.toLowerCase());
+      });
+    });
+    const isShowSelection = computed(() => {
+      return props.showSelection || onEntityTableDeleteSelectedFunction !== void 0;
+    });
+    async function loadInitialExternalPaginateData() {
+      await loadPaginatedDataFunction();
+    }
+    async function onUpdatePagination(paginationData) {
+      if (externalPaginate.value) {
+        if (updateCurrentPaginationDataModel) {
+          updateCurrentPaginationDataModel({
+            Page: paginationData.currentPage,
+            PerPage: paginationData.perPage
+          });
+        }
+        await loadPaginatedDataFunction();
+      }
+    }
+    function recycleBinClickHandler() {
+      isRecycleBin.value = !isRecycleBin.value;
+      if (onRecycleBinToggleFunction) {
+        onRecycleBinToggleFunction(isRecycleBin.value);
+      }
+    }
+    function deleteClickHandler(entityData, index) {
+      if (onDeleteFunction) {
+        onDeleteFunction(entityData, index).then(() => {
+          var _a, _b;
+          if (editableTabs) {
+            (_b = editableTabs.value) == null ? void 0 : _b.removeTab(((_a = editableTabs.value) == null ? void 0 : _a.createTabName(entityData)) ?? "");
+          }
+        });
+      }
+    }
+    function editClickHandler(entityData) {
+      if (onEditFunction && !isEditDisabled(entityData)) {
+        onEditFunction(entityData);
+        emit("edit", entityData);
+      }
+    }
+    function restoreClickHandler(entityData) {
+      if (onRestoreFunction) {
+        onRestoreFunction(entityData);
+      }
+    }
+    function addNewClickHandler() {
+      if (onCreateFunction) {
+        onCreateFunction();
+        emit("add");
+      }
+    }
+    function handleSelectionChange(entityDataList) {
+      selectedItems.value = entityDataList;
+      emit("handle-selection-change", entityDataList);
+    }
+    function deleteSelectedClickHandler() {
+      if (!onEntityTableDeleteSelectedFunction) {
+        return;
+      }
+      onEntityTableDeleteSelectedFunction(selectedItems.value);
+    }
+    function mapDataWithDisabledIfHasNoPermissionsProp(data) {
+      return data.map((option) => {
+        return {
+          ...option,
+          hasNoPermissionsToSelect: isDeleteDisabled(option)
+          // !option?.permissions?.delete || !option?.permissions?.edit
+        };
+      });
+    }
+    function isEditDisabled(data) {
+      if ((data == null ? void 0 : data.editDisabled) === void 0) {
+        return !(entity == null ? void 0 : entity.canEdit(data));
+      } else {
+        return data.editDisabled;
+      }
+    }
+    function isDeleteDisabled(data) {
+      if ((data == null ? void 0 : data.deleteDisabled) === void 0) {
+        return !(entity == null ? void 0 : entity.canDelete(data));
+      } else {
+        return data.deleteDisabled;
+      }
+    }
+    watch(
+      () => props.data,
+      (data) => {
+        localData.value = mapDataWithDisabledIfHasNoPermissionsProp(data);
+        selectedItems.value = (data == null ? void 0 : data.filter((value) => value.selected)) || [];
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    watch(
+      () => props.inputSearch,
+      (val) => {
+        if (val !== void 0) {
+          searchModel.value = val;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      debouncedSearchModel,
+      (val) => {
+        emit("update:inputSearch", val || "");
+      }
+    );
+    if (entity == null ? void 0 : entity.hasPagination) {
+      loadInitialExternalPaginateData();
+    }
+    __expose({
+      deleteClickHandler,
+      editClickHandler,
+      onUpdatePagination,
+      setSearchInputValue: (val) => searchModel.value = val,
+      getSearchInputValue: () => searchModel.value
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, mergeProps(unref(attrs), {
+          options: dataSearched.value,
+          columns: props.columns,
+          loading: !!unref(loading),
+          "show-selection": isShowSelection.value,
+          "show-actions-column": __props.showActionColumns,
+          "with-pagination": "",
+          "is-server-data": (_a = unref(entity)) == null ? void 0 : _a.hasPagination,
+          "per-page-options": unref(perPageOptions),
+          "external-paginate": externalPaginate.value,
+          config: {
+            disabledKey: "hasNoPermissionsToSelect"
+          },
+          "loader-type": __props.loaderType,
+          "onUpdate:currentPage": onUpdatePagination,
+          "onUpdate:perPage": onUpdatePagination,
+          onOnRowDbclick: editClickHandler,
+          onHandleSelectionChange: handleSelectionChange
+        }), createSlots({
+          "empty-data": withCtx(() => {
+            var _a2;
+            return [
+              !unref(loading) ? (openBlock(), createElementBlock("tr", _hoisted_2, [
+                createElementVNode("td", {
+                  colspan: ((_a2 = props.columns) == null ? void 0 : _a2.length) + 1
+                }, [
+                  createElementVNode("div", _hoisted_4, [
+                    createElementVNode("div", _hoisted_5, toDisplayString(__props.tableNoDataText || unref(tVU).t("voicenterUi.general.no.data")), 1),
+                    isRecycleBin.value ? (openBlock(), createBlock(_sfc_main$6, {
+                      key: 0,
+                      type: "borderless",
+                      icon: "vc-icon-exit-recycle-bin",
+                      "data-test-name": "exit-recycle-bit-button",
+                      onClick: recycleBinClickHandler
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(tVU).t("voicenterUi.general.exitRecycleBin")), 1)
+                      ]),
+                      _: 1
+                    })) : unref(onCreateFunction) ? renderSlot(_ctx.$slots, "add-entity-button", {
+                      key: 1,
+                      entity: unref(entity)
+                    }, () => [
+                      createVNode(_sfc_main$7, {
+                        entity: unref(entity),
+                        "add-entity-label": __props.addEntityLabel,
+                        onClick: addNewClickHandler
+                      }, null, 8, ["entity", "add-entity-label"])
+                    ]) : createCommentVNode("", true)
+                  ])
+                ], 8, _hoisted_3)
+              ])) : createCommentVNode("", true)
+            ];
+          }),
+          "header-filter": withCtx(() => [
+            renderSlot(_ctx.$slots, "filter-actions")
+          ]),
+          "checked-tooltip": withCtx(() => [
+            renderSlot(_ctx.$slots, "checked-tooltip", {}, () => [
+              createElementVNode("div", _hoisted_6, [
+                unref(onEntityTableDeleteSelectedFunction) && selectedItems.value.length ? (openBlock(), createBlock(_sfc_main$6, {
+                  key: 0,
+                  color: "destructive",
+                  type: "borderless",
+                  icon: "vc-icon-recycle-bin",
+                  "data-test-name": "recycle-bin-button",
+                  onClick: deleteSelectedClickHandler
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(tVU).t("voicenterUi.general.delete")), 1)
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true)
+              ])
+            ])
+          ]),
+          "header-actions": withCtx(() => {
+            var _a2;
+            return [
+              createElementVNode("div", _hoisted_7, [
+                createElementVNode("div", _hoisted_8, [
+                  ((_a2 = __props.searchKeys) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                    createVNode(_sfc_main$5, {
+                      ref_key: "searchInputRef",
+                      ref: searchInputRef,
+                      modelValue: searchModel.value,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchModel.value = $event),
+                      placeholder: unref(tVU).t("voicenterUi.general.search"),
+                      clearable: "",
+                      "prefix-icon": "vc-icon-search",
+                      "data-test-name": "table-search"
+                    }, null, 8, ["modelValue", "placeholder"])
+                  ])) : createCommentVNode("", true)
+                ]),
+                createElementVNode("div", _hoisted_10, [
+                  renderSlot(_ctx.$slots, "pre-header-actions"),
+                  __props.showRecycleBinAction && unref(onRecycleBinToggleFunction) ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 0,
+                    type: "borderless",
+                    "data-test-name": "RecycleBin-button",
+                    icon: isRecycleBin.value ? "vc-icon-exit-recycle-bin" : "vc-icon-recycle-bin",
+                    onClick: recycleBinClickHandler
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(isRecycleBin.value ? unref(tVU).t("voicenterUi.general.exitRecycleBin") : unref(tVU).t("voicenterUi.general.recycleBin")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["icon"])) : createCommentVNode("", true),
+                  !isRecycleBin.value && unref(onCreateFunction) ? renderSlot(_ctx.$slots, "add-entity-button", {
+                    key: 1,
+                    entity: unref(entity)
+                  }, () => [
+                    createVNode(_sfc_main$7, {
+                      entity: unref(entity),
+                      "add-entity-label": __props.addEntityLabel,
+                      onClick: addNewClickHandler
+                    }, null, 8, ["entity", "add-entity-label"])
+                  ]) : createCommentVNode("", true)
+                ])
+              ])
+            ];
+          }),
+          "actions-column": withCtx(({ row, index }) => [
+            createElementVNode("div", _hoisted_11, [
+              isRecycleBin.value ? (openBlock(), createBlock(_sfc_main$2, {
+                key: 0,
+                "entity-data": row,
+                entity: unref(entity),
+                disabled: !unref(onRestoreFunction),
+                "data-test-name": "restore-button",
+                onRestore: restoreClickHandler
+              }, null, 8, ["entity-data", "entity", "disabled"])) : (openBlock(), createElementBlock("div", _hoisted_12, [
+                renderSlot(_ctx.$slots, "pre-column-actions", {
+                  row,
+                  index
+                }),
+                renderSlot(_ctx.$slots, "column-actions", {}, () => [
+                  unref(onEditFunction) ? (openBlock(), createBlock(_sfc_main$3, {
+                    key: 0,
+                    "entity-data": row,
+                    entity: unref(entity),
+                    disabled: isEditDisabled(row),
+                    icon: __props.editIcon,
+                    animate: __props.editIconAnimate,
+                    "data-test-name": "edit-button",
+                    onClick: ($event) => editClickHandler(row)
+                  }, null, 8, ["entity-data", "entity", "disabled", "icon", "animate", "onClick"])) : createCommentVNode("", true),
+                  unref(onDeleteFunction) ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 1,
+                    "entity-data": row,
+                    entity: unref(entity),
+                    disabled: isDeleteDisabled(row),
+                    icon: __props.deleteIcon,
+                    "data-test-name": "delete-button",
+                    onDelete: ($event) => deleteClickHandler($event, index)
+                  }, null, 8, ["entity-data", "entity", "disabled", "icon", "onDelete"])) : createCommentVNode("", true)
+                ]),
+                renderSlot(_ctx.$slots, "post-column-actions", {
+                  row,
+                  index
+                })
+              ]))
+            ])
+          ]),
+          _: 2
+        }, [
+          renderList(usedSlots.value, (slotItem) => {
+            return {
+              name: slotItem,
+              fn: withCtx((slotData) => [
+                renderSlot(_ctx.$slots, slotItem, normalizeProps(guardReactiveProps(slotData)))
+              ])
+            };
+          })
+        ]), 1040, ["options", "columns", "loading", "show-selection", "show-actions-column", "is-server-data", "per-page-options", "external-paginate", "loader-type"]),
+        __props.disabled ? (openBlock(), createElementBlock("div", _hoisted_13)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 export {
-  VcEntityListTable as default
+  _sfc_main as default
 };

package/library/entity/components/Table/VcEntityListTable.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcEntityListTable.vue.mjs";
+import '../../../assets/entity/components/Table/VcEntityListTable.css';/* empty css                        */
+export {
+  _sfc_main as default
+};