@webitel/ui-datalist 1.0.2 → 1.0.3

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
     "lint:fix-staged": "npx lint-staged",
     "lint:package": "publint",
     "utils:i": "npm i",
+    "utils:link": "npm link",
     "utils:publish": "npm publish --access public"
   },
   "type": "module",
@@ -16,15 +17,9 @@
     "../../"
   ],
   "exports": {
-    ".": {
-      "import": "./src/index.ts"
-    },
-    "./filters": {
-      "import": "./src/filters/index.ts"
-    },
-    "./presets": {
-      "import": "./src/filter-presets/index.ts"
-    }
+    ".": "./src/index.ts",
+    "./filters": "./src/filters/index.ts",
+    "./presets": "./src/filter-presets/index.ts"
   },
   "files": [
     "src/*",

package/src/filter-presets/api/PresetQuery.api.ts

@@ -3,7 +3,7 @@ import {
   getDefaultGetParams,
   getDefaultInstance,
   getDefaultOpenAPIConfig,
-} from '@webitel/ui-sdk/src/api/defaults/index';
+} from '@webitel/ui-sdk/api/defaults/index';
 import applyTransform, {
   camelToSnake,
   merge,
@@ -11,7 +11,7 @@ import applyTransform, {
   skipIf,
   snakeToCamel,
   starToSearch,
-} from '@webitel/ui-sdk/src/api/transformers/index';
+} from '@webitel/ui-sdk/api/transformers/index';
 import {
   EngineCreatePresetQueryRequest,
   EnginePresetQuery,

package/src/filter-presets/components/_shared/input-fields/preset-description-field.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { WtLabel, WtTextarea } from '@webitel/ui-sdk/src/components/index';
+import { WtLabel, WtTextarea } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
 const model = defineModel<string>();
@@ -29,4 +29,4 @@ const props = defineProps<{
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

package/src/filter-presets/components/_shared/input-fields/preset-name-field.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { Validation } from '@vuelidate/core';
-import { WtInput } from '@webitel/ui-sdk/src/components/index';
+import { WtInput } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
 type ModelValue = string;
@@ -25,4 +25,4 @@ const props = defineProps<Props>();
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

package/src/filter-presets/components/_shared/preset-filters-preview.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { WtLabel } from '@webitel/ui-sdk/src/components/index';
+import { WtLabel } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
 import type { IFilter } from '../../../filters';
@@ -42,4 +42,4 @@ const props = defineProps<Props>();
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

package/src/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -74,10 +74,10 @@ import {
   WtIconAction,
   WtPopup,
   WtSearchBar,
-} from '@webitel/ui-sdk/src/components/index';
-import { IconAction } from '@webitel/ui-sdk/src/enums';
-import { useTableEmpty } from '@webitel/ui-sdk/src/TableComponentModule/composables/useTableEmpty';
-import { type StoreDefinition, storeToRefs } from 'pinia';
+} from '@webitel/ui-sdk/components';
+import { IconAction } from '@webitel/ui-sdk/enums';
+import { useTableEmpty } from '@webitel/ui-sdk/modules/TableComponentModule/composables/useTableEmpty';
+import { type Store, storeToRefs } from 'pinia';
 import { computed, inject, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
@@ -90,7 +90,7 @@ const props = defineProps<{
    * presets "section" namespace
    */
   namespace: string;
-  usePresetsStore: StoreDefinition;
+  usePresetsStore: Store;
 }>();
 
 const emit = defineEmits<{

package/src/filter-presets/components/apply-preset/preset-preview.vue

@@ -80,12 +80,12 @@ import {
   WtExpansionPanel,
   WtIconAction,
   WtRadio,
-} from '@webitel/ui-sdk/src/components/index';
-import { createFiltersManager } from '@webitel/ui-sdk/src/filters/index';
+} from '@webitel/ui-sdk/components';
 import { AxiosError } from 'axios';
 import { computed, ref } from 'vue';
 import { EnginePresetQuery } from 'webitel-sdk';
 
+import { createFiltersManager } from '../../../filters';
 import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
 import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';

package/src/filter-presets/components/save-preset/overwrite-preset-popup.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { WtPopup } from '@webitel/ui-sdk/src/components/index';
+import { WtPopup } from '@webitel/ui-sdk/components';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 

package/src/filter-presets/components/save-preset/save-preset-action.vue

@@ -30,13 +30,13 @@
 </template>
 
 <script lang="ts" setup>
-import { WtIconAction } from '@webitel/ui-sdk/src/components/index';
-import { IconAction } from '@webitel/ui-sdk/src/enums';
+import { WtIconAction } from '@webitel/ui-sdk/components';
+import { IconAction } from '@webitel/ui-sdk/enums';
 import { computed, inject, type Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import { IFiltersManager } from '../../../filters/index';
+import { IFiltersManager } from '../../../filters';
 import {
   addPreset,
   getPresetList,
@@ -136,4 +136,4 @@ const handlePresetOverwriteConfirmation = async ({
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filter-presets/components/save-preset/save-preset-popup.vue

@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtPopup } from '@webitel/ui-sdk/src/components/index';
+import { WtPopup } from '@webitel/ui-sdk/components';
 import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';

package/src/filters/classes/FiltersManager.ts

@@ -1,4 +1,4 @@
-import { isEmpty } from '@webitel/ui-sdk/src/scripts';
+import { isEmpty } from '@webitel/ui-sdk/scripts';
 
 import {
   filterLabelToSnapshotKey,

package/src/filters/components/config/dynamic-filter-config-form-label.vue

@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { maxLength } from '@vuelidate/validators';
-import WtInput from '@webitel/ui-sdk/src/components/wt-input/wt-input.vue';
+import { WtInput } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -46,4 +46,4 @@ watch(
 );
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

package/src/filters/components/config/dynamic-filter-config-form.vue

@@ -16,11 +16,20 @@
       v-bind="{
         filterName,
         filterValue,
-        inputLabel: t('webitelUI.filters.filterValue'),
-        onValueChange: (v) => (filterValue = v),
-        onValueInvalidChange: (v) => (invalid = v),
+        inputLabel: valueInputLabelText,
+        onValueChange,
+        onValueInvalidChange,
       }"
-    />
+    >
+      <component
+        :is="FilterOptionToValueComponentMap[filterName]"
+        :key="filterName"
+        :model-value="filterValue"
+        :label="valueInputLabelText"
+        @update:model-value="onValueChange"
+        @update:invalid="onValueInvalidChange"
+      />
+    </slot>
 
     <dynamic-filter-config-form-label
       :value="filterLabel"
@@ -49,19 +58,19 @@
 </template>
 
 <script lang="ts" setup>
-import { WtButton, WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtButton, WtSelect } from '@webitel/ui-sdk/components';
 import deepcopy from 'deep-copy';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type { FilterInitParams, FilterName, IFilter } from '../../types/Filter';
+import type {
+  FilterInitParams,
+  FilterNameSelectRepresentation,
+  IFilter,
+} from '../../types/Filter';
+import { FilterOptionToValueComponentMap } from '../filter-options';
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 
-interface FilterNameSelectRepresentation {
-  name: string;
-  value: FilterName;
-}
-
 interface AddModeProps {
   options: Array<FilterNameSelectRepresentation>;
 }
@@ -89,6 +98,18 @@ const editMode = !!props.filter;
 
 const invalid = ref(false);
 
+const onValueChange = (v) => {
+  filterValue.value = v;
+};
+
+const onValueInvalidChange = (v) => {
+  invalid.value = v;
+};
+
+const valueInputLabelText = computed(() => {
+  return t('webitelUI.filters.filterValue');
+});
+
 const onLabelValueUpdate = (val: string) => {
   filterLabel.value = val;
 };

package/src/filters/components/config/dynamic-filter-config-view.vue

@@ -8,13 +8,13 @@
       <template #activator="slotScope">
         <slot
           name="activator"
-          v-bind="slotScope"
+          v-bind="{ tooltipSlotScope: slotScope }"
         />
       </template>
       <template #default="slotScope">
         <slot
           name="content"
-          v-bind="slotScope"
+          v-bind="{ tooltipSlotScope: slotScope }"
         />
       </template>
     </wt-tooltip>
@@ -27,7 +27,7 @@
  * and their styling
  */
 
-import WtTooltip from '@webitel/ui-sdk/src/components/index';
+import { WtTooltip } from '@webitel/ui-sdk/components';
 
 interface Props {
   disabled?: boolean;
@@ -37,4 +37,4 @@ interface Props {
 const props = defineProps<Props>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/dynamic-filter-add-action.vue

@@ -12,30 +12,52 @@
       </div>
     </template>
 
-    <template #content="slotScope">
+    <template #content="{ tooltipSlotScope }">
       <slot
         name="form"
-        v-bind="slotScope"
+        v-bind="{ tooltipSlotScope }"
       >
-        filter form should be here
+        <dynamic-filter-config-form
+          :options="props.filterOptions"
+          @cancel="() => tooltipSlotScope.hide()"
+          @submit="
+            (payload) =>
+              submitFilterChange(payload, { hide: tooltipSlotScope.hide })
+          "
+        />
       </slot>
     </template>
   </dynamic-filter-config-view>
 </template>
 
 <script lang="ts" setup>
-import { WtIconAction } from '@webitel/ui-sdk/src/components/index';
+import { WtIconAction } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
+import type {
+  FilterInitParams,
+  FilterNameSelectRepresentation,
+} from '../types/Filter';
+import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
 
 interface Props {
+  filterOptions: FilterNameSelectRepresentation[];
   showLabel?: boolean;
 }
 
 const props = defineProps<Props>();
 
 const { t } = useI18n();
+
+const emit = defineEmits<{
+  'add:filter': [FilterInitParams];
+}>();
+
+const submitFilterChange = (payload: FilterInitParams, { hide }) => {
+  emit('add:filter', payload);
+  hide();
+};
 </script>
 
 <style lang="scss" scoped>

package/src/filters/components/dynamic-filter-panel-wrapper.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentSize } from '@webitel/ui-sdk/src/enums/index';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
 
 const props = withDefaults(
   defineProps<{

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

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { WtSearchBar } from '@webitel/ui-sdk/src/components/index';
+import { WtSearchBar } from '@webitel/ui-sdk/components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -57,4 +57,4 @@ const searchModeOptions = computed(() =>
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/_shared/has-options/has-option-filter-value-field.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -35,4 +35,4 @@ const strModel = computed({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/actual-reaction-time/actual-reaction-time-filter-value-field.vue

@@ -15,4 +15,4 @@ type ModelValue = {
 const model = defineModel<ModelValue>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/actual-resolution-time/actual-resolution-time-filter-value-field.vue

@@ -15,4 +15,4 @@ type ModelValue = {
 const model = defineModel<ModelValue>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/agent/agent-filter-value-field.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -55,4 +55,4 @@ const handleInput = (value: ModelValue) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/agent/agent-filter-value-preview.vue

@@ -28,4 +28,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/agent/config.js

@@ -1,4 +1,4 @@
-import AgentsAPI from '@webitel/ui-sdk/src/api/clients/agents/agents';
+import AgentsAPI from '@webitel/ui-sdk/api/clients/agents/agents';
 
 export const searchMethod = AgentsAPI.getLookup;
 export const localePath = '';

package/src/filters/components/filter-options/amd-result/amd-result-filter-value-field.vue

@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -49,4 +49,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/amd-result/amd-result-filter-value-preview.vue

@@ -15,4 +15,4 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/assignee/assignee-filter-value-field.vue

@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
-import { WtCheckbox, WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtCheckbox, WtSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -70,4 +70,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/assignee/assignee-filter-value-preview.vue

@@ -33,4 +33,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/assignee/config.js

@@ -1,4 +1,4 @@
-import ContactsAPI from '@webitel/ui-sdk/src/api/clients/сontacts/contacts';
+import ContactsAPI from '@webitel/ui-sdk/api/clients/сontacts/contacts';
 
 export const searchMethod = ContactsAPI.getLookup;
 export const localePath = '';

package/src/filters/components/filter-options/author/author-filter-value-field.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -53,4 +53,4 @@ const handleInput = (value: ModelValue) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/author/author-filter-value-preview.vue

@@ -28,4 +28,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/author/config.js

@@ -1,4 +1,4 @@
-import UsersAPI from '@webitel/ui-sdk/src/api/clients/users/users';
+import UsersAPI from '@webitel/ui-sdk/api/clients/users/users';
 
 export const searchMethod = UsersAPI.getLookup;
 export const localePath = '';

package/src/filters/components/filter-options/cause/cause-filter-value-field.vue

@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -49,4 +49,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/cause/cause-filter-value-preview.vue

@@ -15,4 +15,4 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/close-reason-groups-case/close-reason-groups-case-filter-value-field.vue

@@ -31,7 +31,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -99,4 +99,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/close-reason-groups-case/close-reason-groups-case-filter-value-preview.vue

@@ -31,4 +31,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/close-reason-groups-case/config.js

@@ -1,5 +1,5 @@
-import CaseCloseReasonGroupsAPI from '@webitel/ui-sdk/src/api/clients/caseCloseReasonGroups/caseCloseReasonGroups';
-import CaseCloseReasonsAPI from '@webitel/ui-sdk/src/api/clients/caseCloseReasons/caseCloseReasons';
+import CaseCloseReasonGroupsAPI from '@webitel/ui-sdk/api/clients/caseCloseReasonGroups/caseCloseReasonGroups';
+import CaseCloseReasonsAPI from '@webitel/ui-sdk/api/clients/caseCloseReasons/caseCloseReasons';
 
 export const caseCloseReasonsGroupsSearchMethod =
   CaseCloseReasonGroupsAPI.getLookup;

package/src/filters/components/filter-options/contact/config.js

@@ -1,4 +1,4 @@
-import ContactsAPI from '@webitel/ui-sdk/src/api/clients/сontacts/contacts';
+import ContactsAPI from '@webitel/ui-sdk/api/clients/сontacts/contacts';
 
 export const searchMethod = ContactsAPI.getLookup;
 export const localePath = '';

package/src/filters/components/filter-options/contact/contact-filter-value-field.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -53,4 +53,4 @@ const handleInput = (value: ModelValue) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/contact/contact-filter-value-preview.vue

@@ -28,4 +28,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/contact-group/config.js

@@ -1,4 +1,4 @@
-import ContactGroupsAPI from '@webitel/ui-sdk/src/api/clients/contactGroups/contactGroups';
+import ContactGroupsAPI from '@webitel/ui-sdk/api/clients/contactGroups/contactGroups';
 
 export const searchMethod = ContactGroupsAPI.getLookup;
 export const localePath = '';