@webitel/ui-sdk 24.12.119 → 24.12.121

package/package.json

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

package/src/components/index.js

@@ -1,6 +1,7 @@
 import WtNavigationMenu from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
 import WtSelectionPopup from './on-demand/wt-selection-popup/wt-selection-popup.vue';
 import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
+import WtReplaceTransition from './transitions/cases/wt-replace-transition.vue';
 import WtActionBar from './wt-action-bar/wt-action-bar.vue';
 import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
@@ -85,6 +86,7 @@ const Components = {
   WtLabel,
   WtLoader,
   WtRoundedAction,
+  WtReplaceTransition,
   WtCheckbox,
   WtDatepicker,
   WtIconBtn,
@@ -187,6 +189,7 @@ export {
   WtPopup,
   WtProgressBar,
   WtRadio,
+  WtReplaceTransition,
   WtRoundedAction,
   WtSearchBar,
   WtSelect,

package/src/components/transitions/cases/wt-replace-transition.vue

@@ -0,0 +1,38 @@
+<template>
+  <wt-transition
+    class="wt-replace-transition"
+    :duration="props.duration"
+    :name="transitionName"
+  >
+    <template #default>
+      <slot />
+    </template>
+  </wt-transition>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+import WtTransition from '../wt-transition.vue';
+
+const props = defineProps({
+  // can choose replace pattern [opacity, slide ets]
+  // ATTENTION!! need to add another names(patterns) to <wt-transition/>, now we have fade-opacity only
+  pattern: {
+    type: String,
+    default: 'opacity',
+  },
+  duration: {
+    type: String,
+    default: 'sm',
+  },
+  appear: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const transitionName = computed(() => `fade-${props.pattern}`);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/transitions/wt-transition.vue

@@ -0,0 +1,53 @@
+<template>
+  <transition
+    class="wt-transition"
+    :class="[`wt-transition--${props.duration}`]"
+    :mode="props.mode"
+    :appear="props.appear"
+    :name="props.name"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'fade-opacity',
+  },
+  mode: {
+    type: String,
+    default: 'out-in',
+  },
+  appear: {
+    type: Boolean,
+    default: false,
+  },
+  duration: {
+    type: String,
+    default: 'sm',
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.fade-opacity-enter-active,
+.fade-opacity-leave-active {
+  transition: opacity;
+}
+
+.fade-opacity-enter,
+.fade-opacity-leave-to {
+  opacity: 0;
+}
+
+.wt-transition {
+  &--sm {
+    transition-duration: 0.3s; // TODO: add variable
+  }
+  &--md {
+    transition-duration: 0.6s; // TODO: add variable
+  }
+}
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+  <wt-search-bar
+    :placeholder="t('reusable.search')"
+    :search-mode="props.searchMode"
+    :search-mode-options="searchModeOptions"
+    :value="model"
+    :v="v$.model"
+    @input="model = $event"
+    @search="handleSearch"
+    @update:search-mode="emit('update:search-mode', $event.value)"
+  >
+    <template
+      v-if="props.showTextSearchIcon"
+      #search-icon
+    >
+      <wt-icon icon="stt-search" />
+    </template>
+  </wt-search-bar>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSearchBar from '../../../../../components/wt-search-bar/wt-search-bar.vue';
+
+type ModelValue = string;
+const model = defineModel<ModelValue>();
+
+const props = defineProps<{
+  searchMode: string;
+  searchModeOptions: Record<string, string>;
+  showTextSearchIcon: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:search-mode': [string];
+  'handle-search': [string];
+}>();
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+const handleSearch = () => {
+  emit('handle-search', model.value);
+};
+
+const searchModeOptions = computed(() =>
+  Object.values(props.searchModeOptions).map((mode) => {
+    return {
+      value: mode,
+      text: t(`filters.search.${mode}`),
+    };
+  }),
+);
+</script>
+
+<style lang="scss" scoped></style>