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

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

@@ -1,7 +1,289 @@
-import _sfc_main from "./VcEntityEditableTabs.vue2.mjs";
-import '../../../assets/entity/components/Tabs/VcEntityEditableTabs.css';/* empty css                           */
-import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const VcEntityEditableTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4ce6470f"]]);
+import '../../../assets/entity/components/Tabs/VcEntityEditableTabs.css';
+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 }) : tabItem.name === "create" ? renderSlot(_ctx.$slots, "tab-create", { key: 1 }) : tabItem.entityData ? renderSlot(_ctx.$slots, "tab-edit", {
+                  key: 2,
+                  index,
+                  tabData: tabItem,
+                  entity: tabItem.entityData
+                }) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["name", "index", "label", "closable", "icon", "lazy", "disabled", "nav-class"]);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["modelValue"]);
+    };
+  }
+});
 export {
-  VcEntityEditableTabs as default
+  _sfc_main as default
 };

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

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

package/library/index.mjs

@@ -2,6 +2,7 @@ import './assets/assets/sass/main.css';/* empty css                       */
 import { default as default2 } from "./components/VcButton/VcButton.vue.mjs";
 /* empty css                                   */
 import { default as default3 } from "./components/VcButton/VcButtonIcon.vue.mjs";
+/* empty css                                       */
 import { default as default4 } from "./components/VcButton/VcToggleButton.vue.mjs";
 /* empty css                                         */
 import { default as default5 } from "./components/VcInput/VcInput.vue.mjs";
@@ -85,6 +86,8 @@ import { default as default46 } from "./components/VcDropdown/VcDropdown.vue.mjs
 import { default as default47 } from "./components/VcDropdown/VcDropdownItem.vue.mjs";
 /* empty css                                           */
 import { default as default48 } from "./components/VcTable/VcTable.vue.mjs";
+/* empty css                                 */
+/* empty css                                 */
 import { default as default49 } from "./components/VcPagination/VcPagination.vue.mjs";
 /* empty css                                           */
 import { default as default50 } from "./components/VcTree/VcTree.vue.mjs";
@@ -97,6 +100,7 @@ import { default as default52 } from "./components/VcTransfer/VcTransfer.vue.mjs
 import { default as default53 } from "./components/VcTag/VcTag.vue.mjs";
 /* empty css                             */
 import { default as default54 } from "./components/VcDelimitedList/VcDelimitedList.vue.mjs";
+/* empty css                                                 */
 import { default as default55 } from "./components/VcSparkline/VcSparkline.vue.mjs";
 import { default as default56 } from "./components/VcViewSwitcher/VcViewSwitcher.vue.mjs";
 /* empty css                                               */
@@ -127,6 +131,7 @@ import { default as default70 } from "./components/VcMeterGroup/VcMeterGroupLabe
 import { default as default71 } from "./components/VcMdEditor/VcMdEditor.vue.mjs";
 import { default as default72 } from "./components/VcSystemUserPrompt/VcSystemUserPrompt.vue.mjs";
 import { default as default73 } from "./components/VcSoundplayer/VcSoundPlayer.vue.mjs";
+/* empty css                                             */
 import { default as default74 } from "./components/VcJsonSchema/VcJsonSchema.vue.mjs";
 /* empty css                                           */
 import { VcCollapseProvideKey, VcEditableTabsDataToken, VcEntityListTableExternalPaginateToken, VcEntityToken, VcSoundPlayerProvideKey, VcTabPaneProvideKey, VcTabsProvideKey } from "./tokens/tokens.mjs";
@@ -185,8 +190,11 @@ import { default as default104 } from "./entity/components/Button/VcEntityEditIc
 import { default as default105 } from "./entity/components/Button/VcEntityRestoreButton.vue.mjs";
 import { default as default106 } from "./entity/components/Button/VcEntityStatusButton.vue.mjs";
 import { default as default107 } from "./entity/components/Tabs/VcEntityEditableTabs.vue.mjs";
+/* empty css                                                  */
 import { default as default108 } from "./entity/components/Table/VcEntityListTable.vue.mjs";
+/* empty css                                                */
 import { default as default109 } from "./entity/components/Form/VcBaseVerticalForm.vue.mjs";
+/* empty css                                                */
 import { default as default110 } from "./entity/components/Form/VcEntityVerticalCreateForm.vue.mjs";
 import { default as default111 } from "./entity/components/Form/VcEntityVerticalEditForm.vue.mjs";
 import { default as default112 } from "./entity/components/Form/VcEntityEditPageForm.vue.mjs";