@webitel/ui-sdk 24.12.68 → 24.12.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.68",
+  "version": "24.12.72",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/api/types/ApiModule.type.ts

@@ -0,0 +1,21 @@
+export type Id = number | string;
+
+export interface ApiModule<Entity> {
+  getList?: (
+    params?: unknown,
+  ) => Promise<{ items?: Entity[]; next?: boolean; aggs?: unknown }>;
+  getLookup?: (
+    params?: unknown,
+  ) => Promise<{ items?: Entity[]; next?: boolean }>;
+  get?: ({ itemId }: { itemId: Id }) => Promise<Entity>;
+  add?: ({ itemInstance }: { itemInstance?: Entity }) => Promise<Entity>;
+  update?: ({
+    itemId,
+    itemInstance,
+  }: {
+    itemId: Id;
+    itemInstance?: Entity;
+  }) => Promise<Entity>;
+  patch?: ({ id, changes }: { id?: Id; changes?: Entity }) => Promise<Entity>;
+  delete?: ({ itemId }: { itemId: Id }) => Promise<void>;
+}

package/src/components/wt-popup/wt-popup.vue

@@ -1,22 +1,24 @@
 <template>
-<!--  @slot check source code for scoped bindings :( -->
-  <slot
-    class="wt-popup-activator"
-    name="activator"
-    v-bind="{
-    shown: wrapperShown,
-    size,
-    disabled,
-    open: openPopup,
-    close: closePopup,
-    toggle: togglePopup,
-  } as ActivatorSlotScope"
-  />
   <div
-    v-show="wrapperShown || isCloseAnimationPlaying"
+    v-show="showPopupComponent"
     :class="[`wt-popup--size-${size}`, { 'wt-popup--overflow': overflow }]"
     class="wt-popup"
   >
+
+<!--    &lt;!&ndash;  @slot check source code for scoped bindings :( &ndash;&gt;-->
+<!--    <slot-->
+<!--      class="wt-popup-activator"-->
+<!--      name="activator"-->
+<!--      v-bind="{-->
+<!--    shown: wrapperShown,-->
+<!--    size,-->
+<!--    disabled,-->
+<!--    open: openPopup,-->
+<!--    close: closePopup,-->
+<!--    toggle: togglePopup,-->
+<!--  } as ActivatorSlotScope"-->
+<!--    />-->
+
     <transition-slide :offset="[0, -1440 / 2]">
       <aside
         v-if="wrapperShown"
@@ -53,7 +55,7 @@
 
 <script lang="ts" setup>
 import {TransitionSlide} from '@morev/vue-transitions';
-import {defineEmits, defineProps, ref, watch} from 'vue';
+import {computed, defineEmits, defineProps, ref, watch} from 'vue';
 
 import {ComponentSize} from "../../enums/ComponentSize/ComponentSize.enum.ts";
 
@@ -105,6 +107,7 @@ interface ActivatorSlotScope {
 const slots = defineSlots<{
   activator?: ActivatorSlotScope;
 }>();
+const activatorMode = !!slots.activator;
 
 const wrapperShown = ref(false);
 const isCloseAnimationPlaying = ref(false);
@@ -123,13 +126,17 @@ const closePopup = () => {
   }, 200); // 200 -> 0.2s css var(--transition); duration
 };
 
-const togglePopup = () => {
-  if (wrapperShown.value) {
-    closePopup();
-  } else {
-    openPopup();
-  }
-};
+// const togglePopup = () => {
+//   if (wrapperShown.value) {
+//     closePopup();
+//   } else {
+//     openPopup();
+//   }
+// };
+
+const showPopupComponent = computed(() => {
+  return wrapperShown.value || isCloseAnimationPlaying.value;
+});
 
 // overlay should be shown before popup to show animation properly
 watch(
@@ -144,7 +151,6 @@ watch(
      * but if that's so, there's no `shown` prop => it's true by default => popup is initially shown
      * so we need to handle initial popup visibility depending on activator slot presence
      */
-    const activatorMode = !!slots.activator;
     if (activatorMode) return;
 
 

package/src/components/wt-table/types/{table-header.ts → WtTable.type.ts}

@@ -1,4 +1,4 @@
-export type TableHeader = {
+export type WtTableHeader = {
   value: string;
   locale?: string | string[];
   text?: string;

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -94,7 +94,7 @@ import { computed, withDefaults } from 'vue';
 
 import { useWtTable } from '../../composables/useWtTable/useWtTable.ts';
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters';
-import type { TableHeader } from '../wt-table/types/table-header.js';
+import { WtTableHeader } from '../wt-table/types/WtTable.type.ts';
 import WtTreeTableRow from '../wt-tree-table-row/wt-tree-table-row.vue';
 
 const props = withDefaults(
@@ -102,7 +102,7 @@ const props = withDefaults(
     /**
      * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets minmax(150px, 1fr). '
      */
-    headers: TableHeader[];
+    headers: WtTableHeader[];
     /**
      * 'List of data, represented by table. '
      */
@@ -193,7 +193,7 @@ const { tableHeaders: dataHeaders } = useWtTable({
   headers: props.headers,
 });
 
-const isColSortable = ({ sort }: TableHeader) => {
+const isColSortable = ({ sort }: WtTableHeader) => {
   /*       --sortable = sortable && col.sort === undefined cause there may be some columns we don't want to sort
         strict check for  === undefined is used because col.sort = null is sort order too (actualu, without sort)
         so we need to check if this property is present
@@ -201,7 +201,7 @@ const isColSortable = ({ sort }: TableHeader) => {
   return props.sortable && sort !== undefined;
 };
 
-const sort = (col: TableHeader) => {
+const sort = (col: WtTableHeader) => {
   if (!isColSortable(col)) return;
   const nextSort = getNextSortOrder(col.sort);
   emit('sort', col, nextSort);

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -1,7 +1,7 @@
 <template>
   <tr
-    class="wt-tree-table-row"
     :class="[{ 'wt-tree-table-row--alternate': rowPosition % 2 }]"
+    class="wt-tree-table-row"
   >
     <td
       v-for="(col, headerKey) of dataHeaders"
@@ -69,14 +69,14 @@
     <wt-tree-table-row
       v-for="(child, index) in data[childrenProp]"
       :key="index"
-      :row-position="rowPosition"
-      :data-headers="dataHeaders"
-      :data="child"
-      :selectable="selectable"
-      :selected-elements="selectedElements"
       :children-prop="childrenProp"
+      :data="child"
+      :data-headers="dataHeaders"
       :nesting-level="childLevel"
+      :row-position="rowPosition"
       :searched-prop="searchedProp"
+      :selectable="selectable"
+      :selected-elements="selectedElements"
       @expanded-collapse="openCollapse"
       @update:selected="
         $emit('update:selected', {
@@ -109,12 +109,12 @@
   </template>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
 
 import WtCheckbox from '../wt-checkbox/wt-checkbox.vue';
 import WtIconBtn from '../wt-icon-btn/wt-icon-btn.vue';
-import type { TableHeader } from '../wt-table/types/table-header.ts';
+import { WtTableHeader } from "../wt-table/types/WtTable.type.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -132,7 +132,7 @@ const props = withDefaults(
     childrenProp: string;
     selectable?: boolean;
     selectedElements: Record<string, any>[];
-    dataHeaders: TableHeader[];
+    dataHeaders: WtTableHeader[];
     gridActions?: boolean;
     /**
      * 'It's a nesting level of row. 0 - root row, 1 - first level of nesting, etc.'
@@ -219,8 +219,8 @@ onMounted(() => {
 
   &__icon-wrapper {
     display: flex;
-    margin-right: var(--spacing-xs);
     align-items: flex-start;
+    margin-right: var(--spacing-xs);
   }
 
   &__content {

package/src/composables/useWtTable/useWtTable.ts

@@ -1,18 +1,24 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { TableHeader } from '../../components/wt-table/types/table-header.ts';
+
+import { WtTableHeader } from '../../components/wt-table/types/WtTable.type.ts';
 
 export const useWtTable = ({ headers }) => {
   const { t } = useI18n();
 
-  const tableHeaders = computed<TableHeader[]>(() => {
+  const tableHeaders = computed<WtTableHeader[]>(() => {
     return headers
-      .filter((header: TableHeader) => header.show === undefined || header.show)
-      .map((header: TableHeader) => {
+      .filter(
+        (header: WtTableHeader) => header.show === undefined || header.show,
+      )
+      .map((header: WtTableHeader) => {
         if (!header.text && header.locale) {
           return {
             ...header,
-            text: typeof header.locale === 'string' ? t(header.locale) : t(header.locale[0]),
+            text:
+              typeof header.locale === 'string'
+                ? t(header.locale)
+                : t(header.locale[0]),
           };
         }
         return header;

package/src/modules/ObjectPermissions/components/permissions-tab.vue

@@ -19,15 +19,16 @@
       </div>
     </header>
 
-    <wt-loader v-show="isLoading" />
+    <div class="table-section__table-wrapper">
 
-    <wt-empty
-      v-show="showEmpty"
-      :image="imageEmpty"
-      :text="textEmpty"
-    />
+      <wt-loader v-show="isLoading" />
+
+      <wt-empty
+        v-show="showEmpty"
+        :image="imageEmpty"
+        :text="textEmpty"
+      />
 
-    <div class="table-section__table-wrapper">
       <div class="table-section__visible-scroll-wrapper">
         <wt-table-transition v-if="dataList.length && !isLoading" >
           <wt-table