@webitel/ui-sdk 24.12.85 → 24.12.86

package/package.json

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

package/src/assets/icons/sprite/add-filter.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="Name=add-filter, Filled=false, Colored=false, Version=current, Badged=False">
+<g id="Union">
+<path d="M13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V11L8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13L11 13V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H13V8Z" fill="#454E68"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="#454E68"/>
+</g>
+</g>
+</svg>

package/src/assets/icons/sprite/index.js

@@ -14,6 +14,7 @@ import assignee from './assignee.svg';
 import attach from './attach.svg';
 import attention from './attention.svg';
 import azure from './azure.svg';
+import addFilter from './add-filter.svg';
 import back from './back.svg';
 import bell from './bell.svg';
 import bellBadged from './bell-badged.svg';
@@ -213,6 +214,7 @@ export default objCamelToKebab({
   attach,
   attention,
   azure,
+  addFilter,
   back,
   bell,
   bellBadged,

package/src/components/index.js

@@ -138,4 +138,75 @@ const Components = {
   WtSelectionPopup,
 };
 
+export {
+  WtActionBar,
+  WtAppHeader,
+  WtAppNavigator,
+  WtAvatar,
+  WtBadge,
+  WtButton,
+  WtButtonSelect,
+  WtCheckbox,
+  WtChip,
+  WtConfirmDialog,
+  WtContextMenu,
+  WtCopyAction,
+  WtDatepicker,
+  WtDivider,
+  WtDualPanel,
+  WtDummy,
+  WtEmpty,
+  WtErrorPage,
+  WtExpansionPanel,
+  WtFiltersPanelWrapper,
+  WtHeaderActions,
+  WtHeadline,
+  WtHeadlineNav,
+  WtHint,
+  WtIcon,
+  WtIconAction,
+  WtIconBtn,
+  WtImage,
+  WtIndicator,
+  WtInput,
+  WtInputInfo,
+  WtIntersectionObserver,
+  WtItemLink,
+  WtLabel,
+  WtLoadBar,
+  WtLoader,
+  WtLogo,
+  WtNavigationBar,
+  WtNavigationMenu,
+  WtNotification,
+  WtNotificationsBar,
+  WtPageHeader,
+  WtPageWrapper,
+  WtPagination,
+  WtPlayer,
+  WtPopup,
+  WtProgressBar,
+  WtRadio,
+  WtRoundedAction,
+  WtSearchBar,
+  WtSelect,
+  WtSelectionPopup,
+  WtSlider,
+  WtStartPage,
+  WtStatusSelect,
+  WtStepper,
+  WtSwitcher,
+  WtTable,
+  WtTableActions,
+  WtTableColumnSelect,
+  WtTabs,
+  WtTagsInput,
+  WtTextarea,
+  WtTimeInput,
+  WtTimepicker,
+  WtTooltip,
+  WtTree,
+  WtTreeTable,
+};
+
 export default Components;

package/src/components/wt-action-bar/wt-action-bar.vue

@@ -14,17 +14,17 @@
     <slot v-bind="{ size }" />
 
     <!--    @slot May be useful to set complex component which draws the same `wt-icon-action`
-            @scope `{ action<IconAction>, size<ComponentSize> }`
+            @scope `{ action<IconAction>, size<ComponentSize>, onClick: () => emit('click:[action]') }`
       -->
     <slot
       v-for="action in shownActions"
       :name="action"
-      v-bind="{ action, size }"
+      v-bind="{ action, size, onClick: () => handleActionClick(action) }"
     >
       <wt-icon-action
         :action="action"
         :disabled="props[`disabled:${action}`]"
-        @click="emit(`click:${action}`)"
+        @click="handleActionClick(action)"
       />
     </slot>
   </div>
@@ -32,11 +32,12 @@
 
 <script setup>
 import { computed } from 'vue';
+
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
 import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
 import {
-  tableActionsOrder,
   sectionActionsOrder,
+  tableActionsOrder,
 } from './WtActionBarActionsOrder.js';
 
 const props = defineProps({
@@ -110,6 +111,10 @@ const shownActions = computed(() => {
 
   return actionsOrder;
 });
+
+const handleActionClick = (action) => {
+  emit(`click:${action}`);
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/wt-icon-action/iconMappings.js

@@ -11,4 +11,5 @@ export const WtIconActionIconMappings = Object.freeze({
   [IconAction.COLLAPSE]: 'collapse',
   [IconAction.FILTERS]: 'filter',
   [IconAction.COLUMNS]: 'column-select',
+  [IconAction.CLOSE]: 'close--filled',
 });

package/src/components/wt-loader/_internals/wt-loader--md.vue

@@ -21,7 +21,7 @@ export default {};
 
 <style lang="scss" scoped>
 // https://codepen.io/aaroniker/pen/omvYNZ
-@use "sass:math";
+@use 'sass:math';
 
 .wt-loader--md {
   position: relative;
@@ -55,7 +55,8 @@ export default {};
       stroke-width: 10px;
       stroke-linejoin: round;
       stroke-linecap: round;
-      stroke-dasharray:  math.div(256, 4) * 3 math.div(256, 4) math.div(256, 4) * 3 math.div(256, 4);
+      stroke-dasharray: math.div(256, 4) * 3 math.div(256, 4) math.div(256, 4) *
+        3 math.div(256, 4);
       stroke-dashoffset: 0;
     }
   }

package/src/components/wt-tooltip/_internals/useTooltipTriggerSubscriptions.js

@@ -18,7 +18,6 @@ const HIDE_EVENT_MAP = {
   pointer: 'pointerup',
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export const useTooltipTriggerSubscriptions = ({
   target,
   triggers,

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

@@ -9,7 +9,10 @@
       ref="activator"
       class="wt-tooltip__activator"
     >
-      <slot name="activator" />
+      <slot
+        name="activator"
+        v-bind="{ visible: isVisible }"
+      />
     </div>
     <wt-tooltip-floating
       v-if="isVisible"

package/src/css/main.scss

@@ -3,7 +3,6 @@
 @use 'pages/card-page';
 @use 'pages/table-page';
 
-
 @include wt-placeholder;
 
 :root {

package/src/css/pages/table-page.scss

@@ -1,7 +1,6 @@
 @use '../styleguide/styleguide' as *;
 
 .table-page {
-
   &.wt-page-wrapper {
     width: 100%;
     height: 100%;

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -1,7 +1,7 @@
 // https://stackoverflow.com/a/17181946/17782185
 // https://stackoverflow.com/a/49192800/17782185
-@use "sass:selector";
-///піу
+@use 'sass:selector';
+
 //@mixin optional-at-root($sel) {
 //  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
 //    @content;

package/src/enums/IconAction/IconAction.enum.js

@@ -12,6 +12,7 @@ const IconAction = Object.freeze({
   EDIT: 'edit',
   COLLAPSE: 'collapse',
   EXPAND: 'expand',
+  CLOSE: 'close',
 });
 
 export default IconAction;

package/src/locale/en/en.js

@@ -115,6 +115,7 @@ export default {
     messaging: 'Messaging',
     emptyResultSearch: 'Your search yielded no results',
     contact: 'Contact | Contacts',
+    column: 'Column | Columns',
   },
   // date-related texts
   date: {
@@ -373,6 +374,7 @@ export default {
         [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
         [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
         [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+        [IconAction.CLOSE]: ({ linked }) => linked('reusable.close'),
       },
     },
     errorPages: {
@@ -436,6 +438,23 @@ export default {
       label: 'Something went wrong, please try again',
       exportToJson: 'Export to JSON',
     },
+    filters: {
+      addFilter: ({ linked }) => {
+        return `${linked('reusable.add')} ${linked(
+          'reusable.filter',
+        ).toLowerCase()}`;
+      },
+      filterName: ({ linked }) => {
+        // because filter select has a 'column' label now
+        return linked('vocabulary.column');
+      },
+      filterValue: ({ linked }) => {
+        return linked('vocabulary.values');
+      },
+      filterLabel: ({ linked }) => {
+        return linked('vocabulary.labels');
+      },
+    },
   },
   errorNotifications: {
     chatHistoryApi: 'There was an error loading the chat history',

package/src/locale/ru/ru.js

@@ -371,6 +371,7 @@ export default {
         [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
         [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
         [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+        [IconAction.CLOSE]: ({ linked }) => linked('reusable.close'),
       },
     },
     errorPages: {

package/src/locale/ua/ua.js

@@ -371,6 +371,7 @@ export default {
         [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
         [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
         [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+        [IconAction.CLOSE]: ({ linked }) => linked('reusable.close'),
       },
     },
     errorPages: {

package/src/modules/Filters/v2/filters/classes/Filter.ts

@@ -0,0 +1,30 @@
+import type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from '../types/Filter';
+
+export class Filter implements IFilter {
+  readonly name: FilterName;
+  label: FilterLabel;
+  value: FilterValue;
+
+  constructor(
+    { name, value, label }: FilterInitParams,
+    public payload: object | undefined,
+    public config: FilterConfig,
+  ) {
+    this.name = name;
+    this.value = value;
+    this.label = label;
+  }
+
+  set({ value, label }: { value?: FilterValue; label?: FilterLabel }): IFilter {
+    this.value = value;
+    this.label = label;
+    return this;
+  }
+}

package/src/modules/Filters/v2/filters/classes/FilterStorage.ts

@@ -0,0 +1,34 @@
+import { FilterValue } from '../types/Filter';
+import type { FilterStorageOptions } from './FilterStorageOptions';
+
+export class BrowserFilterStorage implements FilterStorageOptions {
+  constructor(private prefix: string) {}
+
+  get(name: string): FilterValue {
+    const value = localStorage.getItem(`filters:${this.prefix}:${name}`);
+    return value ? JSON.parse(value) : undefined;
+  }
+
+  set(name: string, value: FilterValue): void {
+    localStorage.setItem(
+      `filters:${this.prefix}:${name}`,
+      JSON.stringify(value),
+    );
+  }
+}
+
+export class QueryFilterStorage implements FilterStorageOptions {
+  constructor(private prefix: string) {}
+
+  get(name: string): FilterValue {
+    const url = new URL(window.location.href);
+    const value = url.searchParams.get(`${this.prefix}:${name}`);
+    return value ? JSON.parse(value) : undefined;
+  }
+
+  set(name: string, value: FilterValue): void {
+    const url = new URL(window.location.href);
+    url.searchParams.set(`${this.prefix}:${name}`, JSON.stringify(value));
+    window.history.pushState({}, '', url.toString());
+  }
+}

package/src/modules/Filters/v2/filters/classes/FilterStorageOptions.d.ts

@@ -0,0 +1,6 @@
+import { FilterValue } from '../types/Filter';
+
+export interface FilterStorageOptions {
+  get: (name: string) => FilterValue;
+  set: (name: string, value: FilterValue) => void;
+}

package/src/modules/Filters/v2/filters/classes/FiltersManager.ts

@@ -0,0 +1,189 @@
+import { isEmpty } from '../../../../../scripts';
+import {
+  filterLabelToSnapshotKey,
+  filterNameFromSnapshotKey,
+  filterValuePropFromSnapshotKey,
+  filterValueToSnapshotKey,
+} from '../scripts/utils.ts';
+import type {
+  FilterConfig,
+  FilterData,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from '../types/Filter';
+import { FiltersManagerConfig, IFiltersManager } from '../types/FiltersManager';
+import { Filter } from './Filter.ts';
+
+class FiltersManager implements IFiltersManager {
+  filters = new Map<FilterName, IFilter>();
+
+  constructor(private config?: FiltersManagerConfig) {}
+
+  hasFilter(name: FilterName): boolean {
+    return this.filters.has(name);
+  }
+
+  getFilter(name: FilterName): IFilter {
+    return this.filters.get(name);
+  }
+
+  addFilter(
+    filterInitParams: FilterInitParams,
+    payload?: object,
+    config?: FilterConfig,
+  ): IFilter {
+    const filter = new Filter(filterInitParams, payload, config || this.config);
+    this.filters.set(filterInitParams.name, filter);
+    return filter;
+  }
+
+  updateFilter({
+    name,
+    value,
+    label,
+  }: {
+    name: FilterName;
+    value?: FilterValue;
+    label?: FilterLabel;
+  }): IFilter {
+    const filter = this.filters.get(name);
+    filter.set({ value, label });
+    return filter;
+  }
+
+  deleteFilter(name: FilterName): IFilter {
+    const filter = this.filters.get(name);
+    this.filters.delete(name);
+    return filter;
+  }
+
+  getAllValues(): { [name: FilterName]: FilterValue } {
+    const filters = [...this.filters.values()].reduce((acc, filter) => {
+      acc[filter.name] = filter.value;
+      return acc;
+    }, {});
+
+    return filters;
+  }
+
+  toString(): string {
+    const filtersData = [...this.filters.values()].reduce(
+      (acc, { name, label, value }) => {
+        if (isEmpty(value)) return acc;
+
+        acc[filterValueToSnapshotKey(name)] = value;
+
+        if (label) {
+          acc[filterLabelToSnapshotKey(name)] = label;
+        }
+
+        return acc;
+      },
+      {},
+    );
+
+    return JSON.stringify(filtersData);
+  }
+
+  fromString(snapshotStr: string): void {
+    const snapshot = JSON.parse(snapshotStr);
+
+    /*
+    first, make transition object from snapshot,
+    because filter should bw always added with value
+     */
+    const filtersData: { FilterName: FilterData } = Object.entries(
+      snapshot,
+    ).reduce(
+      (filtersAcc, [snapshotKey, snapshotValue]) => {
+        const name = filterNameFromSnapshotKey(snapshotKey);
+        const valueProp = filterValuePropFromSnapshotKey(snapshotKey);
+
+        if (filtersAcc[name]) {
+          filtersAcc[name][valueProp] = snapshotValue;
+        } else {
+          filtersAcc[name] = {
+            [valueProp]: snapshotValue,
+          };
+        }
+
+        return filtersAcc;
+      },
+      {} as { FilterName: FilterData },
+    );
+
+    Object.entries(filtersData).forEach(([name, filterData]) => {
+      this.addFilter({ ...filterData, name });
+    });
+  }
+
+  getAllKeys(): FilterName[] {
+    return [...this.filters.keys()];
+  }
+
+  getFiltersList({
+    include,
+    exclude,
+  }: {
+    include: FilterName[];
+    exclude: FilterName[];
+  }): IFilter[] {
+    const useInclude = !isEmpty(include);
+    const useExclude = !isEmpty(exclude) && !useInclude;
+
+    if (!useInclude && !useExclude) {
+      return [...this.filters.values()];
+    }
+
+    return [...this.filters.values()].filter(({ name }) => {
+      if (useInclude) {
+        return include.includes(name);
+      } else if (useExclude) {
+        return !exclude.includes(name);
+      }
+
+      return true;
+    });
+  }
+
+  reset({
+    include,
+    exclude,
+  }: {
+    include: FilterName[];
+    exclude: FilterName[];
+  }): void {
+    const useInclude = !isEmpty(include);
+    const useExclude = !isEmpty(exclude) && !useInclude;
+
+    if (!useInclude && !useExclude) {
+      this.filters.clear();
+      return;
+    }
+
+    if (useInclude) {
+      include.forEach((name) => {
+        this.filters.delete(name);
+      });
+      return;
+    }
+
+    if (useExclude) {
+      this.filters.forEach((_, filterName) => {
+        if (exclude.includes(filterName)) {
+          this.filters.delete(filterName);
+        }
+      });
+      return;
+    }
+  }
+}
+
+export const createFiltersManager = (
+  config?: FiltersManagerConfig,
+): IFiltersManager => {
+  return new FiltersManager(config);
+};