@webitel/ui-datalist 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "build:types": "vue-tsc -p ./tsconfig.build.json",
@@ -29,6 +29,10 @@
     "./presets": {
       "import": "./src/modules/filter-presets/index.ts",
       "types": "./types/filter-presets/index.d.ts"
+    },
+    "./form": {
+      "import": "./src/modules/form/index.ts",
+      "types": "./types/form/index.d.ts"
     }
   },
   "files": [
@@ -44,13 +48,16 @@
     "vue": "^3.5"
   },
   "dependencies": {
+    "@regle/schemas": "^1.2.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@webitel/styleguide": "^24.12.26",
-    "@webitel/ui-sdk": "^25.4.76"
+    "@webitel/ui-sdk": "^25.4.76",
+    "zod": "^4.0.0-beta.20250505T195954"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
+    "@standard-schema/spec": "^1.0.0",
     "@tsconfig/node22": "^22.0.0",
     "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^5.2.3",
@@ -74,6 +81,9 @@
     "vite-plugin-checker": "^0.9.0",
     "vue-tsc": "^2.2.8"
   },
+  "overrides": {
+    "zod": "^4.0.0-beta.20250505T195954"
+  },
   "engines": {
     "npm": "10",
     "node": "v22"

package/src/modules/_shared/createDatalistStore.ts

@@ -0,0 +1,73 @@
+import {
+  defineStore as definePiniaStore,
+  StoreGeneric,
+  storeToRefs as piniaStoreToRefs,
+} from 'pinia';
+import { ToRefs, toRefs as composableStoreToRefs } from 'vue';
+
+import { applyStorePatch } from '../scripts/utils';
+import {
+  CreateDatalistStoreParams,
+  Identifiable,
+  Patch,
+  PatchableStore,
+  PatchableStoreFactory,
+  StoreInstance,
+} from '../types/createDatalistStore.types';
+import {
+  DatalistStoreProvider,
+  DatalistStoreProviderType,
+} from '../types/StoreProvider';
+
+const defaultStoreType = DatalistStoreProvider.Pinia;
+
+/**
+ * makeThisToRefs converts a store object into a set of reactive references (toRefs),
+ * using Pinia's storeToRefs if it's a Pinia store, or Vue's toRefs for composable stores.
+ * */
+export const makeThisToRefs = <StoreBody extends object>(
+  store: StoreBody,
+  storeType: DatalistStoreProviderType,
+): ToRefs<StoreBody> => {
+  const thisStoreType = storeType || defaultStoreType;
+
+  if (thisStoreType === DatalistStoreProvider.Pinia) {
+    return piniaStoreToRefs(store as StoreGeneric) as ToRefs<StoreBody>;
+  }
+
+  return composableStoreToRefs(store) as ToRefs<StoreBody>;
+};
+
+export const createDatalistStore = <
+  StoreBody extends StoreInstance,
+  G extends Identifiable,
+>({
+  config,
+  namespace,
+  storeBody,
+}: CreateDatalistStoreParams<
+  StoreBody,
+  G
+>): PatchableStoreFactory<StoreBody> => {
+  const thisStoreType = config.storeType || defaultStoreType;
+
+  if (thisStoreType === DatalistStoreProvider.Composable) {
+    const storeFactory = storeBody({
+      ...config,
+      storeType: thisStoreType,
+    }) as PatchableStore<StoreBody>;
+    storeFactory.$patch = (val: Patch) => applyStorePatch(storeFactory, val);
+    return () => storeFactory;
+  }
+
+  if (thisStoreType === DatalistStoreProvider.Pinia) {
+    return definePiniaStore(namespace, () =>
+      storeBody({
+        ...config,
+        storeType: thisStoreType,
+      }),
+    );
+  }
+
+  throw new Error(`Unsupported store type: ${thisStoreType}`);
+};

package/src/modules/filters/components/search-bar/dynamic-filter-search.vue

@@ -12,25 +12,26 @@
 
 <script lang="ts" setup>
 import { WtSearchBar } from '@webitel/ui-sdk/components';
-import {computed, type Ref, ref,watch} from 'vue';
+import { computed, type Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import {FilterInitParams, FilterName} from "../../classes/Filter";
-import {IFiltersManager} from "../../classes/FiltersManager";
+import { FilterInitParams, FilterName } from '../../classes/Filter';
+import { IFiltersManager } from '../../classes/FiltersManager';
 import type { DynamicFilterSearchSearchModeOption } from './types/DynamicFilterSearch';
 
-/**
- * @description
- * default search name is used when there are no search modes
- */
-const defaultSearchName = 'search';
-
 const props = defineProps<{
   filtersManager: IFiltersManager;
   searchModeOptions?: DynamicFilterSearchSearchModeOption[];
   isFiltersRestoring?: boolean;
+  /**
+   * @description
+   * default search name is used when there are no search modes
+   */
+  singleSearchName?: string;
 }>();
 
+const defaultSearchName = props.singleSearchName || 'search';
+
 const emit = defineEmits<{
   'filter:add': [FilterInitParams];
   'filter:update': [FilterInitParams];
@@ -85,7 +86,9 @@ const handleSearch = (value = localSearchValue.value) => {
   }
 };
 
-const updateSearchMode = (nextSearchMode: DynamicFilterSearchSearchModeOption) => {
+const updateSearchMode = (
+  nextSearchMode: DynamicFilterSearchSearchModeOption,
+) => {
   if (hasFilter(currentSearchName.value)) {
     deleteFilter({
       name: currentSearchName.value,
@@ -99,7 +102,8 @@ const updateSearchMode = (nextSearchMode: DynamicFilterSearchSearchModeOption) =
  * @description
  * Restoring search value after filters were restored
  */
-watch(() => props.isFiltersRestoring,
+watch(
+  () => props.isFiltersRestoring,
   (next) => {
     if (next) return;
 

package/src/modules/filters/createTableFiltersStore.ts

@@ -1,83 +1,93 @@
-import { defineStore } from 'pinia';
 import { computed, reactive, ref } from 'vue';
 
-import { PersistedStorageType } from '../persist/PersistedStorage.types.ts';
-import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
+import { createDatalistStore } from '../_shared/createDatalistStore';
+import { PersistedStorageType } from '../persist/PersistedStorage.types';
+import { usePersistedStorage } from '../persist/usePersistedStorage';
+import { useTableStoreConfig } from '../types/tableStore.types';
 import {
   createFiltersManager,
   FiltersManagerConfig,
-} from './classes/FiltersManager.ts';
+} from './classes/FiltersManager';
+
+export const tableFiltersStoreBody = (config?: {
+  filtersManagerConfig: FiltersManagerConfig;
+}) => {
+  const filtersManager = reactive(
+    createFiltersManager(config?.filtersManagerConfig),
+  );
+
+  /* for watchers in filter components */
+  const isRestoring = ref(false);
+
+  /*
+   wrapping filtersManager methods to extend their functionality
+   if it will be needed in future
+   */
+  const hasFilter = filtersManager.hasFilter.bind(filtersManager);
+  const addFilter = filtersManager.addFilter.bind(filtersManager);
+  const updateFilter = filtersManager.updateFilter.bind(filtersManager);
+  const deleteFilter = filtersManager.deleteFilter.bind(filtersManager);
+
+  const filtersList = computed(() => filtersManager.getFiltersList());
+
+  const setupPersistence = () => {
+    const { restore: restoreFilters } = usePersistedStorage({
+      name: 'filters',
+
+      value: computed(
+        () => filtersManager,
+      ) /* computed is used to provide value as ref(), not reactive() – as per usePersistedStorage interface */,
+
+      storages: [PersistedStorageType.Route],
+
+      /* use custom .toString() logic, provided by FiltersManager */
+      onStore: async (save, { name }) => {
+        const snapshotStr = filtersManager.toString();
+        return save({ name, value: snapshotStr });
+      },
+
+      /* use custom .fromString() logic, provided by FiltersManager */
+      onRestore: async (restore, name) => {
+        isRestoring.value = true;
+        const snapshotStr = await restore(name);
+        /*
+        snapshot as string because we know that filtersManager.toString() returns string,
+         not string[]
+         */
+        if (snapshotStr) filtersManager.fromString(snapshotStr as string);
+
+        isRestoring.value = false;
+      },
+    });
+
+    return restoreFilters();
+  };
+
+  return {
+    filtersManager,
+    isRestoring,
+
+    filtersList,
+
+    hasFilter,
+    addFilter,
+    updateFilter,
+    deleteFilter,
+
+    setupPersistence,
+  };
+};
 
-export const createTableFiltersStore = (
+export const createTableFiltersStore = <Entity>(
   namespace: string,
-  config?: { filtersManagerConfig: FiltersManagerConfig },
+  config: useTableStoreConfig<Entity> & {
+    filtersManagerConfig?: FiltersManagerConfig;
+  },
 ) => {
   const id = `${namespace}/filters`;
-
-  return defineStore(id, () => {
-    const filtersManager = reactive(
-      createFiltersManager(config?.filtersManagerConfig),
-    );
-
-    /* for watchers in filter components */
-    const isRestoring = ref(false);
-
-    /*
-     wrapping filtersManager methods to extend their functionality
-     if it will be needed in future
-     */
-    const hasFilter = filtersManager.hasFilter.bind(filtersManager);
-    const addFilter = filtersManager.addFilter.bind(filtersManager);
-    const updateFilter = filtersManager.updateFilter.bind(filtersManager);
-    const deleteFilter = filtersManager.deleteFilter.bind(filtersManager);
-
-    const filtersList = computed(() => filtersManager.getFiltersList());
-
-    const setupPersistence = () => {
-      const { restore: restoreFilters } = usePersistedStorage({
-        name: 'filters',
-
-        value: computed(
-          () => filtersManager,
-        ) /* computed is used to provide value as ref(), not reactive() – as per usePersistedStorage interface */,
-
-        storages: [PersistedStorageType.Route],
-
-        /* use custom .toString() logic, provided by FiltersManager */
-        onStore: async (save, { name }) => {
-          const snapshotStr = filtersManager.toString();
-          return save({ name, value: snapshotStr });
-        },
-
-        /* use custom .fromString() logic, provided by FiltersManager */
-        onRestore: async (restore, name) => {
-          isRestoring.value = true;
-          const snapshotStr = await restore(name);
-          /*
-          snapshot as string because we know that filtersManager.toString() returns string,
-           not string[]
-           */
-          if (snapshotStr) filtersManager.fromString(snapshotStr as string);
-
-          isRestoring.value = false;
-        },
-      });
-
-      return restoreFilters();
-    };
-
-    return {
-      filtersManager,
-      isRestoring,
-
-      filtersList,
-
-      hasFilter,
-      addFilter,
-      updateFilter,
-      deleteFilter,
-
-      setupPersistence,
-    };
+  return createDatalistStore({
+    storeBody: tableFiltersStoreBody,
+    config,
+    namespace: id,
   });
 };

package/src/modules/filters/modules/filterConfig/components/case-assignee/case-assignee-filter-value-field.vue

@@ -25,7 +25,8 @@ import { WtCheckbox, WtSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import {WtSysTypeFilterConfig} from "../../classes/FilterConfig";
+import { CaseAssigneeFilterConfig } from "./index";
+
 
 type ModelValue = {
   list: string[];
@@ -35,7 +36,7 @@ type ModelValue = {
 const model = defineModel<ModelValue>();
 
 const props = defineProps<{
-  filterConfig: WtSysTypeFilterConfig;
+  filterConfig: CaseAssigneeFilterConfig;
 }>();
 
 const emit = defineEmits<{

package/src/modules/filters/modules/filterConfig/components/case-assignee/filterConfig.ts

@@ -14,6 +14,7 @@ class CaseAssigneeFilterConfig extends WtSysTypeFilterConfig {
     params: object,
     { filterValue } = {},
   ): Promise<{ items: unknown[]; next?: boolean }> {
+    if (filterValue?.unassigned && !filterValue.list.length) return { items: [] };
     const id =
       params.id?.list /* general logic from dynamic-filter-preview.vue*/ ||
       params.id /* wt-select options loadings */ ||

package/src/modules/filters/modules/filterConfig/components/case-source/config.js

@@ -1,3 +1,3 @@
-import CaseSourcesAPI from '@webitel/ui-sdk/api/clients/caseSources/caseSources';
+import { caseSources } from '@webitel/ui-sdk/api/clients/index';
 
-export const searchMethod = CaseSourcesAPI.getLookup;
+export const searchMethod = caseSources.getLookup;

package/src/modules/form/index.ts

@@ -0,0 +1 @@
+export * from './stores/createFormStore';

package/src/modules/form/stores/createFormStore.ts

@@ -0,0 +1,107 @@
+import { ref } from 'vue';
+import { useRegleSchema, RegleSchemaBehaviourOptions } from '@regle/schemas';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import { ApiModule } from '@webitel/ui-sdk/api/types/ApiModule.type';
+import { defineStore } from 'pinia';
+
+export const createFormStore = <Entity = object>({
+  namespace,
+  apiModule,
+  standardValidationSchema,
+  validationSchemaOptions,
+}: {
+  namespace: string;
+  apiModule: ApiModule<Entity>;
+  standardValidationSchema?: StandardSchemaV1 | null;
+  validationSchemaOptions?: RegleSchemaBehaviourOptions;
+}) => {
+  return defineStore(namespace, () => {
+    // form data vars
+    const parentId = ref<string | number | null>();
+    const itemId = ref<string | number | null>();
+    const itemInstance = ref<Entity>({} as Entity); // mb rename to formData? – in case of multiple stores for 1 main item instance
+
+    // form state vars
+    const validationSchema = ref();
+
+    // processing progress vars
+    const isLoading = ref(false);
+    const isSaving = ref(false);
+    const error = ref(null); // if needed
+
+    if (standardValidationSchema) {
+      validationSchema.value = useRegleSchema(
+        itemInstance,
+        standardValidationSchema,
+        validationSchemaOptions,
+      );
+    }
+
+    const loadItem = async () => {
+      isLoading.value = true;
+      try {
+        const loadedItemInstance = await apiModule.get({
+          id: itemId.value,
+          itemId: itemId.value, // compat, use "id" instead
+          parentId: parentId.value,
+        });
+
+        itemInstance.value = loadedItemInstance;
+      } catch (err) {
+        error.value = err;
+      } finally {
+        isLoading.value = false;
+      }
+    };
+
+    const saveItem = async () => {};
+
+    const initializeItemInstance = async () => {
+      if (itemId.value) {
+        await loadItem();
+      } else {
+        // todo: fill with defaults from zod schema
+        itemInstance.value = {} as Entity;
+      }
+    };
+
+    const initialize = ({
+      itemInstance: initialItemInstance,
+      itemId: initialItemId,
+      parentId: initialParentId,
+    }: {
+      itemInstance?: Entity;
+      itemId?: string | number;
+      parentId?: string | number;
+    }) => {
+      if (initialParentId) {
+        parentId.value = initialParentId;
+      }
+
+      if (initialItemId) {
+        itemId.value = initialItemId;
+      }
+
+      if (initialItemInstance) {
+        itemInstance.value = initialItemInstance;
+      } else {
+      } // todo: ??
+
+      return initializeItemInstance();
+    };
+
+    return {
+      parentId,
+      itemId,
+      itemInstance,
+
+      validationSchema,
+
+      isLoading,
+      isSaving,
+      error,
+
+      initialize,
+    };
+  });
+};