@webitel/ui-sdk 25.6.25 → 25.6.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.6.25",
+  "version": "25.6.27",
   "private": false,
   "scripts": {
     "dev": "npm run docs:dev",
@@ -82,6 +82,8 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
     "@morev/vue-transitions": "^3.0.5",
+    "@primeuix/themes": "^1.1.1",
+    "@tailwindcss/vite": "^4.1.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.5.1",
@@ -105,8 +107,10 @@
     "mitt": "^3.0.1",
     "path-browserify": "^1.0.1",
     "plyr": "^3.7.8",
+    "primevue": "^4.3.4",
     "query-string": "^9.1.1",
     "sortablejs": "^1.15.3",
+    "tailwindcss": "^4.1.7",
     "vue-i18n": "^11.1.2",
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",

package/src/api/transformers/addQueryParamsToUrl/addQueryParamsToUrl.transformer.js

@@ -0,0 +1,19 @@
+// @author @stanislav-kozak
+// This function adds query parameters to a given URL.
+// Where queryArray is an array of query parameters in the format 'key=value'.
+const addQueryParamsToUrl = (queryArray) => (url) => {
+  let modifyUrl = url;
+
+  if (queryArray && queryArray.length > 0) {
+    if (modifyUrl.includes('?')) {
+      modifyUrl += '&' + queryArray.join('&');
+
+      return modifyUrl;
+    }
+
+    modifyUrl += '?' + queryArray.join('&');
+  }
+
+  return modifyUrl;
+};
+export default addQueryParamsToUrl;

package/src/api/transformers/index.js

@@ -1,3 +1,4 @@
+import addQueryParamsToUrl from './addQueryParamsToUrl/addQueryParamsToUrl.transformer.js';
 import applyTransform from './applyTransform.js';
 import camelToSnake from './camelToSnake/camelToSnake.transformer.js';
 import generateUrl from './generateUrl/generateUrl.transformer.js';
@@ -11,6 +12,7 @@ import snakeToCamel from './snakeToCamel/snakeToCamel.transformer.js';
 import starToSearch from './starToSearch/starToSearch.transformer.js';
 
 export {
+  addQueryParamsToUrl,
   camelToSnake,
   generateUrl,
   log,

package/src/components/index.js

@@ -47,6 +47,7 @@ import WtPageHeader from './wt-page-header/wt-page-header.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
 import WtPagination from './wt-pagination/wt-pagination.vue';
 import WtPlayer from './wt-player/wt-player.vue';
+import WtPopover from './wt-popover/wt-popover.vue';
 import WtPopup from './wt-popup/wt-popup.vue';
 import WtProgressBar from './wt-progress-bar/wt-progress-bar.vue';
 import WtRadio from './wt-radio/wt-radio.vue';
@@ -120,6 +121,7 @@ const Components = {
   WtDualPanel,
   WtPagination,
   WtPlayer,
+  WtPopover,
   WtStatusSelect,
   WtTable,
   WtTree,
@@ -187,6 +189,7 @@ export {
   WtPageWrapper,
   WtPagination,
   WtPlayer,
+  WtPopover,
   WtPopup,
   WtProgressBar,
   WtRadio,

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

@@ -1,22 +1,19 @@
 <template>
-  <button
-    type="button"
+  <p-button
+    v-bind="$attrs"
+    :severity="color"
     :disabled="disabled"
-    :class="[
-      colorClass,
-      `wt-button--size-${size}`,
-      {
-        'wt-button--width-by-content': widthByContent,
-        'wt-button--contains-icon': containsIcon,
-        'wt-button--wide': wide,
-        'wt-button--disabled': disabled,
-        'wt-button--loading': showLoader,
-      },
-    ]"
-    class="wt-button"
-    @click="$emit('click', $event)"
+    :loading="showLoader"
+    :size="primevueSizeMap[size]"
+    class="wt-button mt-2"
+    :class="{
+        'p-button--width-by-content': widthByContent,
+        'p-button--contains-icon': containsIcon,
+        'p-button--wide': wide,
+        'p-button--loading': showLoader,
+      }"
+    @click.prevent="emit('click', $event)"
   >
-    <!--  Show loader and button contents at the same time to prevent width shift if content > min-width of button -->
     <wt-loader
       v-if="showLoader"
       :color="loaderColor"
@@ -25,231 +22,76 @@
     <div class="wt-button__contents">
       <slot> no content provided</slot>
     </div>
-  </button>
+  </p-button>
 </template>
 
-<script>
-export default {
-  name: 'WtButton',
-  props: {
-    /**
-     * @values 'primary', 'secondary', 'success', 'error', 'transfer', 'job', 'info'
-     * @example <wt-button color="success"></wt-button>
-     */
-    color: {
-      type: String,
-      default: 'primary',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * @values 'sm', 'md'
-     * @example <wt-button size="sm"></wt-button>
-     */
-    size: {
-      type: String,
-      default: 'md',
-      options: ['sm', 'md'],
-    },
-    /**
-     * Stretches button to all available width
-     */
-    wide: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Shrinks button to content width
-     */
-    widthByContent: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * sets wt-button line-height to 0 to prevent height changing: [stack overflow](https://stackoverflow.com/a/11126701)
-     */
-    containsIcon: {
-      type: Boolean,
-      default: false,
-      description: 'https://stackoverflow.com/a/11126701',
-    },
-  },
-  emits: ['click'],
-  data: () => ({
-    showLoader: false,
-  }),
-  computed: {
-    colorClass() {
-      if (!this.disabled) return `${this.color}`;
-      return '';
-    },
-    loaderColor() {
-      return 'on-dark';
-      // if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'on-dark';
-      // return 'on-light';
-    },
-  },
-  watch: {
-    loading: {
-      immediate: true,
-      handler(value) {
-        if (value) {
-          this.showLoader = true;
-        } else {
-          setTimeout(() => {
-            this.showLoader = value;
-          }, 1000); // why 1s? https://ux.stackexchange.com/a/104782
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@use './variables.scss';
-</style>
-
-<style lang="scss" scoped>
-@use '@webitel/styleguide/typography' as *;
-
-.wt-button {
-  cursor: pointer;
-  background-clip: padding-box;
-  @extend %typo-button;
-  display: inline-block;
-  position: relative;
-  transition: var(--transition);
-  box-sizing: border-box;
-  border-radius: var(--border-radius);
-  background-color: var(--btn-primary-color);
-  padding: var(--btn-padding);
-  min-width: var(--btn-min-width);
-  color: var(--btn-primary-text-color);
-
-  &__contents {
-    display: contents;
-  }
-
-  .wt-loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &--wide {
-    width: 100%;
-  }
-
-  &--width-by-content {
-    min-width: 0;
-  }
-
-  // https://stackoverflow.com/a/11126701
-  &--contains-icon {
-    line-height: 0;
-  }
-
-  &--loading {
-    pointer-events: none;
-
-    .wt-button__contents {
-      visibility: hidden;
-    }
-  }
-
-  &--size {
-    &-sm {
-      padding: var(--btn-padding--size-sm);
-    }
-
-    &-md {
-      padding: var(--btn-padding);
-    }
-  }
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref, watch } from 'vue';
 
-  &:hover,
-  &:active {
-    background-color: var(--btn-primary-hover-color);
-  }
+import { ButtonColor,ComponentSize } from '../../enums';
 
-  &.secondary {
-    background-color: var(--btn-secondary-color);
-    color: var(--btn-secondary-text-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-secondary-hover-color);
-    }
-  }
-
-  &.success {
-    background-color: var(--btn-success-color);
-    color: var(--btn-success-text-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-success-hover-color);
-    }
-  }
-
-  &.info {
-    background-color: var(--btn-info-color);
-    color: var(--btn-info-text-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-info-hover-color);
-    }
-  }
-
-  &.job {
-    background-color: var(--btn-job-color);
-    color: var(--btn-job-text-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-job-hover-color);
-    }
-  }
-
-  &.transfer {
-    background-color: var(--btn-transfer-color);
-    color: var(--btn-transfer-text-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-transfer-hover-color);
-    }
-  }
-
-  &.error {
-    background-color: var(--btn-error-color);
-    color: var(--btn-error-text-color);
+const primevueSizeMap = {
+  [ComponentSize.SM]: 'small',
+  [ComponentSize.MD]: 'medium',
+};
 
-    &:hover,
-    &:active {
-      background-color: var(--btn-error-hover-color);
+const props = withDefaults(defineProps<{
+  /**
+   * @values 'primary', 'secondary', 'success', 'error', 'transfer', 'job', 'info'
+   * @example <wt-button color="success"></wt-button>
+   */
+  color?: ButtonColor;
+  disabled?: boolean;
+  loading?: boolean;
+  /**
+   * @values 'sm', 'md'
+   * @example <wt-button size="sm"></wt-button>
+   */
+  size?: ComponentSize;
+  /**
+   * Stretches button to all available width
+   */
+  wide?: boolean;
+  /**
+   * Shrinks button to content width
+   */
+  widthByContent?: boolean;
+  /**
+   * sets wt-button line-height to 0 to prevent height changing: [stack overflow](https://stackoverflow.com/a/11126701)
+   */
+  containsIcon?: boolean;
+}>(), {
+  color: ButtonColor.PRIMARY,
+  disabled: false,
+  loading: false,
+  size: ComponentSize.MD,
+  wide: false,
+  widthByContent: false,
+  containsIcon: false,
+});
+
+const emit = defineEmits(['click']);
+
+const showLoader = ref(false);
+
+const loaderColor = computed(() => {
+  return 'on-dark';
+  // if (['success', 'transfer', 'error', 'job'].includes(props.color)) return 'on-dark';
+  // return 'on-light';
+});
+
+watch(
+  () => props.loading,
+  (value) => {
+    if (value) {
+      showLoader.value = true;
+    } else {
+      setTimeout(() => {
+        showLoader.value = value;
+      }, 1000); // why 1s? https://ux.stackexchange.com/a/104782
     }
-  }
-
-  &.wt-button--disabled {
-    cursor: auto;
-    box-shadow: none;
-    background-color: var(--btn-disabled-color);
-    pointer-events: none;
-    color: var(--btn-disabled-text-color);
-  }
-
-  .wt-loader {
-    margin: auto;
-  }
-}
-</style>
+  }, {
+    immediate: true,
+  },
+);
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <popover
+    ref="innerPopover"
+    v-bind="attrs"
+    :append-to="appendTo"
+    :base-z-index="baseZIndex"
+    :auto-z-index="autoZIndex"
+    :breakpoints="breakpoints"
+    :dt="dt"
+    :pt="pt"
+    :pt-options="ptOptions"
+    :close-on-escape="closeOnEscape"
+    v-on="attrs"
+  >
+    <slot />
+  </popover>
+</template>
+
+<script setup lang="ts">
+import { PopoverEmitsOptions, PopoverProps } from 'primevue';
+import Popover from 'primevue/popover';
+import { defineExpose, useAttrs, useTemplateRef } from 'vue';
+
+const attrs = useAttrs();
+const innerPopover = useTemplateRef('innerPopover');
+
+withDefaults(defineProps<PopoverProps>(), {
+  appendTo: 'body',
+  baseZIndex: 0,
+  autoZIndex: true,
+  breakpoints: null,
+  dt: null,
+  pt: null,
+  ptOptions: null,
+  closeOnEscape: true,
+});
+defineEmits<PopoverEmitsOptions>();
+
+// Expose useful Popover methods
+defineExpose({
+  toggle: (...args) => innerPopover.value?.toggle?.(...args),
+  show: (...args) => innerPopover.value?.show?.(...args),
+  hide: (...args) => innerPopover.value?.hide?.(...args),
+});
+</script>