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

package/library/entity/components/Tabs/VcEntityEditableTabs.vue2.mjs

@@ -0,0 +1,288 @@
+import { defineComponent, ref, computed, watch, openBlock, createBlock, isRef, unref, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode } from "vue";
+import { LIST_TAB_QUERY_VALUE, CREATE_TAB_QUERY_VALUE } from "../../../enum/constants.mjs";
+import _sfc_main$1 from "../../../components/VcTabs/VcTabs.vue.mjs";
+import '../../../assets/components/VcTabs/VcTabPane.css';import '../../../assets/components/VcTabs/VcTabs.css';/* empty css                                      */
+import { useVModel } from "@vueuse/core";
+import { isEqual } from "lodash-es";
+import { useTabsEditableDataProvide } from "../../composable/useEntityTabsProvideInject.mjs";
+import _sfc_main$2 from "../../../components/VcTabs/VcTabPane.vue.mjs";
+/* empty css                                         */
+import { Plus, Pencil, List } from "@lucide/vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcEntityEditableTabs",
+  props: {
+    entity: {},
+    entityMethodDataType: { default: void 0 },
+    hideCreateTab: { type: Boolean, default: false },
+    lazyLoad: { type: Boolean, default: false },
+    modelValue: { default: LIST_TAB_QUERY_VALUE },
+    queryTabName: { default: "" },
+    confirmClose: { type: Function, default: void 0 },
+    tabListIcon: { default: () => List },
+    tabEditIcon: { default: () => Pencil },
+    tabCreateIcon: { default: () => Plus }
+  },
+  emits: ["update:modelValue", "close-tab", "tab-change", "permission-error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const TAB_ICONS = {
+      list: List,
+      edit: Pencil,
+      add: Plus
+    };
+    const props = __props;
+    const emit = __emit;
+    const vcTabs = ref(null);
+    const editTabs = ref([]);
+    const activeTabModel = useVModel(
+      props,
+      "modelValue",
+      emit
+    );
+    const editableTabsData = ref({});
+    const dataTabs = computed(() => {
+      const listTab = {
+        name: LIST_TAB_QUERY_VALUE,
+        icon: props.tabListIcon ?? TAB_ICONS.list,
+        label: props.entity.entityTypeListLabelTranslations
+      };
+      const editTabsList = [
+        ...editTabs.value
+      ];
+      const tabs = [
+        listTab,
+        ...editTabsList
+      ];
+      if (!props.hideCreateTab) {
+        return [
+          ...tabs,
+          {
+            name: CREATE_TAB_QUERY_VALUE,
+            icon: props.tabCreateIcon ?? TAB_ICONS.add,
+            label: "",
+            navClass: "create-nav-tab",
+            disabled: !props.entity.canCreate()
+          }
+        ];
+      } else {
+        return tabs;
+      }
+    });
+    function isTabActive(tabName) {
+      return activeTabModel.value === tabName;
+    }
+    function setActiveTabByRouteQueryValue() {
+      const queryTabName = props.queryTabName;
+      if (typeof queryTabName !== "string") {
+        return;
+      }
+      const tabFromOpened = dataTabs.value.find(({ name }) => name === queryTabName);
+      if (tabFromOpened) {
+        if (queryTabName === CREATE_TAB_QUERY_VALUE && !props.entity.canCreate()) {
+          return;
+        }
+        activeTabModel.value = tabFromOpened.name;
+      } else {
+        try {
+          const parsedQueryTabName = parseInt(queryTabName);
+          if (isNaN(parsedQueryTabName)) return;
+          props.entity.info(parsedQueryTabName).then((res) => {
+            const _res = res;
+            if (!_res) {
+              return;
+            }
+            if (props.entity.canEdit(_res)) {
+              openEditTab(_res);
+            } else {
+              emit("permission-error", {
+                tabName: queryTabName,
+                response: _res
+              });
+            }
+          });
+        } catch {
+          console.error("Error while trying to load data for id:", queryTabName);
+        }
+      }
+    }
+    function onActiveTabChange(tabName) {
+      emit("tab-change", tabName);
+    }
+    function openEditTab(entityData) {
+      if (!entityData) {
+        return;
+      }
+      const entityName = props.entity.getEntityName(entityData) || "";
+      const tabName = createTabName(entityData);
+      if (!tabName) {
+        console.error("Cannot extract name from", entityData);
+        return;
+      }
+      const isTabOpened = dataTabs.value.find(({ name }) => name === tabName);
+      if (!isTabOpened) {
+        const newTab = {
+          entityData,
+          label: entityName,
+          name: tabName
+        };
+        editTabs.value.push(newTab);
+      }
+      activeTabModel.value = tabName;
+    }
+    function checkTabDataIsUpdated(tabName, entityTabData) {
+      const editableData = editableTabsData.value[+tabName];
+      let isEditable = false;
+      if (entityTabData && editableData) {
+        const _entityTabData = entityTabData;
+        Object.keys(_entityTabData).forEach((key) => {
+          const _key = key;
+          const _objectValue = _entityTabData[_key];
+          if (!Array.isArray(_objectValue)) {
+            if (typeof _objectValue === "object") {
+              if (!isEqual(_objectValue, _entityTabData[_key])) {
+                isEditable = true;
+              }
+            } else {
+              if (_objectValue !== _entityTabData[_key]) {
+                isEditable = true;
+              }
+            }
+          }
+        });
+      }
+      return isEditable;
+    }
+    function onTabRemove(tabName) {
+      const tabIndex = editTabs.value.findIndex(({ name }) => name === tabName);
+      const _entityTabData = editTabs.value[tabIndex].entityData;
+      const isUpdated = checkTabDataIsUpdated(tabName, _entityTabData);
+      if (isUpdated && props.confirmClose) {
+        props.confirmClose(_entityTabData).then((res) => {
+          if (res) {
+            removeTab(tabName);
+          }
+        });
+      } else {
+        removeTab(tabName);
+      }
+    }
+    function clearEditableData(tabName) {
+      if (editableTabsData.value[tabName]) {
+        delete editableTabsData.value[tabName];
+      }
+    }
+    function createTabName(entity) {
+      if (!entity) return void 0;
+      const entityId = props.entity.getEntityId(entity);
+      return entityId == null ? void 0 : entityId.toString();
+    }
+    function removeTab(tabName) {
+      const tabIndex = editTabs.value.findIndex(({ name }) => name === tabName);
+      if (tabIndex !== -1) {
+        if (isTabActive(tabName)) {
+          openListTab();
+        }
+        editTabs.value.splice(tabIndex, 1);
+        clearEditableData(tabName);
+      }
+      emit("close-tab", tabName);
+    }
+    function closeActiveTab() {
+      onTabRemove(activeTabModel.value);
+    }
+    function getTabIcon(tab) {
+      if (tab.name === CREATE_TAB_QUERY_VALUE || tab.name === LIST_TAB_QUERY_VALUE) {
+        return tab.icon;
+      }
+      return props.tabEditIcon ?? TAB_ICONS.edit;
+    }
+    function openListTab() {
+      activeTabModel.value = LIST_TAB_QUERY_VALUE;
+    }
+    function openCreateTab() {
+      activeTabModel.value = CREATE_TAB_QUERY_VALUE;
+    }
+    function setFirstActiveTab() {
+      var _a;
+      (_a = vcTabs.value) == null ? void 0 : _a.setFirstActiveTab();
+    }
+    function setLastActiveTab() {
+      var _a;
+      (_a = vcTabs.value) == null ? void 0 : _a.setLastActiveTab();
+    }
+    function togglePreviousTab() {
+      var _a;
+      (_a = vcTabs.value) == null ? void 0 : _a.togglePreviousTab();
+    }
+    function toggleNextTab() {
+      var _a;
+      (_a = vcTabs.value) == null ? void 0 : _a.toggleNextTab();
+    }
+    watch(activeTabModel, onActiveTabChange);
+    setActiveTabByRouteQueryValue();
+    useTabsEditableDataProvide({
+      editableModels: editableTabsData,
+      updateEditableModel: (data) => {
+        const _id = props.entity.getEntityId(data.value);
+        if (_id !== void 0) {
+          editableTabsData.value[_id] = data;
+        }
+      }
+    });
+    __expose({
+      createTabName,
+      removeTab,
+      closeActiveTab,
+      openEditTab,
+      openListTab,
+      openCreateTab,
+      setFirstActiveTab,
+      setLastActiveTab,
+      togglePreviousTab,
+      toggleNextTab,
+      getActiveTab: () => activeTabModel.value
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        ref_key: "vcTabs",
+        ref: vcTabs,
+        modelValue: unref(activeTabModel),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(activeTabModel) ? activeTabModel.value = $event : null),
+        class: "vc-editable-tabs",
+        "open-by-form-validate": false,
+        "nav-scrollable": "",
+        onTabRemove
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(dataTabs.value, (tabItem, index) => {
+            return openBlock(), createBlock(_sfc_main$2, {
+              key: tabItem.name || `edit-tab-${index + 1}`,
+              name: tabItem.name,
+              index,
+              label: tabItem.label,
+              closable: tabItem.name !== "list" && tabItem.name !== "create",
+              icon: getTabIcon(tabItem),
+              lazy: __props.lazyLoad,
+              disabled: tabItem.disabled,
+              "nav-class": tabItem.navClass,
+              class: "pt-3"
+            }, {
+              default: withCtx(() => [
+                tabItem.name === "list" ? renderSlot(_ctx.$slots, "tab-list", { key: 0 }, void 0, true) : tabItem.name === "create" ? renderSlot(_ctx.$slots, "tab-create", { key: 1 }, void 0, true) : tabItem.entityData ? renderSlot(_ctx.$slots, "tab-edit", {
+                  key: 2,
+                  index,
+                  tabData: tabItem,
+                  entity: tabItem.entityData
+                }, void 0, true) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["name", "index", "label", "closable", "icon", "lazy", "disabled", "nav-class"]);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/entity/composable/useEditableTabs.mjs

@@ -0,0 +1,53 @@
+function useEditableTabs(editableTabs) {
+  const _editableTabs = editableTabs;
+  const removeTab = (tabName) => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.removeTab(tabName);
+  };
+  const closeActiveTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.closeActiveTab();
+  };
+  const openEditTab = (entity) => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.openEditTab(entity);
+  };
+  const openListTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.openListTab();
+  };
+  const openCreateTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.openCreateTab();
+  };
+  const setFirstActiveTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.setFirstActiveTab();
+  };
+  const setLastActiveTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.setLastActiveTab();
+  };
+  const togglePreviousTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.togglePreviousTab();
+  };
+  const toggleNextTab = () => {
+    var _a;
+    (_a = _editableTabs.value) == null ? void 0 : _a.toggleNextTab();
+  };
+  return {
+    removeTab,
+    closeActiveTab,
+    openEditTab,
+    openListTab,
+    openCreateTab,
+    setFirstActiveTab,
+    setLastActiveTab,
+    togglePreviousTab,
+    toggleNextTab
+  };
+}
+export {
+  useEditableTabs as default
+};

package/library/entity/composable/useEntityListTableExternalPaginate.mjs

@@ -0,0 +1,23 @@
+import { inject, provide } from "vue";
+import { VcEntityListTableExternalPaginateToken } from "../../tokens/tokens.mjs";
+const useEntityListTableProvide = (param) => {
+  provide(VcEntityListTableExternalPaginateToken, param);
+};
+const useEntityListTableInject = () => {
+  const injectData = inject(
+    VcEntityListTableExternalPaginateToken,
+    {
+      loadPaginatedDataFunction: () => {
+        return Promise.resolve();
+      }
+    }
+  );
+  return {
+    perPageOptions: [10, 25, 50, 100],
+    ...injectData
+  };
+};
+export {
+  useEntityListTableInject,
+  useEntityListTableProvide
+};

package/library/entity/composable/useEntityProvideInject.mjs

@@ -0,0 +1,16 @@
+import { inject, provide } from "vue";
+import { VcEntityToken } from "../../tokens/tokens.mjs";
+function useEntityProvide(param) {
+  provide(VcEntityToken, param);
+}
+function useEntityInject() {
+  const injectData = inject(VcEntityToken);
+  if (!injectData) {
+    throw new Error("Entity must be provided");
+  }
+  return injectData;
+}
+export {
+  useEntityInject,
+  useEntityProvide
+};

package/library/entity/composable/useEntityTabsProvideInject.mjs

@@ -0,0 +1,16 @@
+import { provide, inject, ref } from "vue";
+import { VcEditableTabsDataToken } from "../../tokens/tokens.mjs";
+const useTabsEditableDataProvide = (params) => {
+  provide(VcEditableTabsDataToken, params);
+};
+const useTabsEditableDataInject = () => {
+  const injectData = inject(VcEditableTabsDataToken);
+  if (!injectData) {
+    return { editableModels: ref({}) };
+  }
+  return injectData;
+};
+export {
+  useTabsEditableDataInject,
+  useTabsEditableDataProvide
+};

package/library/entity/services/BaseEntityService.mjs

@@ -0,0 +1,133 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { get } from "lodash-es";
+class BaseEntityService {
+  constructor(entityType) {
+    __publicField(this, "entityType");
+    if (new.target === BaseEntityService) {
+      throw new TypeError("Cannot construct BaseEntityService instances directly");
+    }
+    if (!entityType) {
+      throw new Error("Entity type must be provided");
+    }
+    this.entityType = entityType;
+  }
+  get hasPagination() {
+    return !!this.entityType.hasPagination;
+  }
+  get isPermissionsIgnored() {
+    return !!this.entityType.ignorePermissions;
+  }
+  get entityTypeName() {
+    return this.entityType.entityTypeName;
+  }
+  get entityTypeLabel() {
+    return this.entityType.label;
+  }
+  get entityTypeLabelTranslations() {
+    return this.entityType.label;
+  }
+  get entityTypeListLabelTranslations() {
+    return this.entityType.listLabel ?? this.entityType.label;
+  }
+  get entityTypeIDProp() {
+    return this.entityType.prop.id;
+  }
+  get entityTypeNameProp() {
+    return this.entityType.prop.name;
+  }
+  get entityTypeStatusProp() {
+    return this.entityType.prop.status;
+  }
+  get entityTypeListFilterIDListProp() {
+    return this.entityType.prop.listFilterIDList;
+  }
+  get entityTypeEnabledStatus() {
+    var _a;
+    return (_a = this.entityType.statuses) == null ? void 0 : _a.enabled;
+  }
+  get entityTypeDisabledStatus() {
+    var _a;
+    return (_a = this.entityType.statuses) == null ? void 0 : _a.disabled;
+  }
+  get entityTypeRecycleBinStatus() {
+    var _a;
+    return (_a = this.entityType.statuses) == null ? void 0 : _a.recycleBin;
+  }
+  get entityTypeDefaultListStatuses() {
+    const res = [];
+    if (this.entityTypeEnabledStatus !== void 0) {
+      res.push(this.entityTypeEnabledStatus);
+    }
+    if (this.entityTypeDisabledStatus !== void 0) {
+      res.push(this.entityTypeDisabledStatus);
+    }
+    return res;
+  }
+  get entityTypeListFilterStatusListProp() {
+    return this.entityType.prop.listFilterStatusList || this.entityTypeStatusProp;
+  }
+  get entityTypeDeletedStatus() {
+    var _a;
+    return (_a = this.entityType.statuses) == null ? void 0 : _a.deleted;
+  }
+  getEntityTypeRoute(routes) {
+    return routes.find((route) => {
+      return route.meta.entityTypeName === this.entityType.entityTypeName;
+    });
+  }
+  /**
+   * Get Entity Status by Status Name
+   * @param statusName
+   */
+  getEntityTypeStatusByName(statusName) {
+    const statuses = this.entityType.statuses;
+    if (!statuses) return void 0;
+    for (const [key, value] of Object.entries(statuses)) {
+      if (key === statusName) return value;
+    }
+    return void 0;
+  }
+  /**
+   * Get Entity Statuses by Array Status Names
+   * @param statusNames
+   */
+  getEntityTypeStatusesByName(statusNames) {
+    return statusNames.map((i) => this.getEntityTypeStatusByName(i)).filter((i) => i !== void 0);
+  }
+  getEntityId(data) {
+    const v = get(data, this.entityTypeIDProp);
+    return typeof v === "number" ? v : void 0;
+  }
+  getEntityName(data) {
+    const v = get(data, this.entityTypeNameProp);
+    return typeof v === "string" ? v : void 0;
+  }
+  getEntityStatus(data) {
+    const v = get(data, this.entityTypeStatusProp);
+    return typeof v === "number" ? v : void 0;
+  }
+  isInStatus(data, status) {
+    return this.getEntityStatus(data) === status;
+  }
+  /**
+   * Check if user can create entityTypes
+   *
+   * @returns {Boolean}
+   */
+  canCreate() {
+    throw new Error("Method not implemented.");
+  }
+  canEdit(entityData) {
+    console.error("Method not implemented.", entityData);
+    throw new Error("Method not implemented.");
+  }
+  canDelete(entityData) {
+    console.error("Method not implemented.", entityData);
+    throw new Error("Method not implemented.");
+  }
+}
+export {
+  BaseEntityService
+};

package/library/enum/constants.mjs

@@ -0,0 +1,61 @@
+const componentSizes = ["", "default", "small", "large"];
+const componentColors = ["", "primary", "secondary", "destructive", "success", "warning", "active", "primary-alternative"];
+const textSizes = ["", "xxs", "xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+const iconSizes = ["", "xxs", "xs", "sm", "base", "md", "2md", "lg", "xl", "2xl", "3xl", "2r", "4r"];
+const DEFAULT_COMPONENT_SIZE = "default";
+const UPDATE_MODEL_EVENT = "update:modelValue";
+const CHANGE_EVENT = "change";
+const INPUT_EVENT = "input";
+const EVENT_CODE = {
+  tab: "Tab",
+  enter: "Enter",
+  space: "Space",
+  left: "ArrowLeft",
+  // 37
+  up: "ArrowUp",
+  // 38
+  right: "ArrowRight",
+  // 39
+  down: "ArrowDown",
+  // 40
+  esc: "Escape",
+  delete: "Delete",
+  backspace: "Backspace",
+  numpadEnter: "NumpadEnter",
+  pageUp: "PageUp",
+  pageDown: "PageDown",
+  home: "Home",
+  end: "End"
+};
+function isComponentColor(color) {
+  const colors = componentColors;
+  return colors.includes(color);
+}
+const EDITABLE_TAB_SUB_SECTION_QUERY_PARAM_NAME = "id";
+const LIST_TAB_QUERY_VALUE = "list";
+const CREATE_TAB_QUERY_VALUE = "create";
+const TEXT_COLORS = {
+  primary: "text-primary",
+  secondary: "text-secondary-actions",
+  destructive: "text-destructive-actions",
+  success: "text-success",
+  warning: "text-warning",
+  active: "text-active-elements",
+  "primary-alternative": "text-primary-alternative-actions"
+};
+export {
+  CHANGE_EVENT,
+  CREATE_TAB_QUERY_VALUE,
+  DEFAULT_COMPONENT_SIZE,
+  EDITABLE_TAB_SUB_SECTION_QUERY_PARAM_NAME,
+  EVENT_CODE,
+  INPUT_EVENT,
+  LIST_TAB_QUERY_VALUE,
+  TEXT_COLORS,
+  UPDATE_MODEL_EVENT,
+  componentColors,
+  componentSizes,
+  iconSizes,
+  isComponentColor,
+  textSizes
+};