@webitel/ui-sdk 25.8.17 → 25.8.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.17",
+  "version": "25.8.18",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -55,7 +55,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.28",
-    "@webitel/styleguide": "^24.12.26",
+    "@webitel/styleguide": "^24.12.32",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

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,
-      },
-    ]"
+    :loading="showLoader"
+    :size="primevueSizeMap[size]"
     class="wt-button"
-    @click="$emit('click', $event)"
+    :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,64 @@
     <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);
-    }
-  }
-
-  &:hover,
-  &:active {
-    background-color: var(--btn-primary-hover-color);
-  }
+<script setup lang="ts">
+import type { ButtonProps } from 'primevue';
+import {computed, defineEmits, defineProps, ref, useAttrs, watch} from 'vue';
 
-  &.secondary {
-    background-color: var(--btn-secondary-color);
-    color: var(--btn-secondary-text-color);
+import { ButtonColor,ComponentSize } from '../../enums';
 
-    &: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);
-    }
-  }
+const primevueSizeMap = {
+  [ComponentSize.SM]: 'small',
+  [ComponentSize.MD]: 'medium',
+};
 
-  &.error {
-    background-color: var(--btn-error-color);
-    color: var(--btn-error-text-color);
+interface WtButtonProps extends  /* @vue-ignore */ ButtonProps {
+  color?: ButtonColor;
+  disabled?: boolean;
+  loading?: boolean;
+  size?: ComponentSize;
+  wide?: boolean;
+  widthByContent?: boolean;
+  containsIcon?: boolean;
+}
 
-    &:hover,
-    &:active {
-      background-color: var(--btn-error-hover-color);
+const props = withDefaults(defineProps<WtButtonProps>(), {
+  color: ButtonColor.PRIMARY,
+  disabled: false,
+  loading: false,
+  size: ComponentSize.MD,
+  wide: false,
+  widthByContent: false,
+  containsIcon: false,
+});
+
+const emit = defineEmits(['click']);
+
+const attrs = useAttrs();
+
+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/css/main.scss

@@ -61,14 +61,6 @@ iframe {
   border: none;
 }
 
-button {
-  cursor: pointer;
-  outline-color: #000;
-  border: none;
-  background: transparent;
-  padding: 0;
-}
-
 a {
   color: #000;
   text-decoration: none;

package/src/enums/ButtonColor/ButtonColor.ts

@@ -2,6 +2,7 @@ export const ButtonColor = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   SUCCESS: 'success',
+  WARN: 'warn',
   ERROR: 'error',
   TRANSFER: 'transfer',
   JOB: 'job',

package/src/plugins/primevue/primevue.plugin.js

@@ -18,7 +18,7 @@ const initPrimevue = (app) => {
     theme: {
       preset: WebitelTheme,
       options: {
-        darkModeSelector: 'theme--dark',
+        darkModeSelector: '.theme--dark',
       },
     },
   });

package/src/plugins/primevue/theme/components/button/button.js

@@ -1,79 +1,4 @@
-const lightTheme = {
-  primary: {
-    color: '{primary-on-color}',
-    activeColor: '{primary-on-color}',
-    hoverColor: '{primary-on-color}',
-
-    background: '{primary-color}',
-    activeBackground: '{primary-hover-color}',
-    hoverBackground: '{primary-hover-color}',
-  },
-
-  secondary: {
-    color: '{grey.darken.4}',
-    activeColor: '{grey.darken.4}',
-    hoverColor: '{grey.darken.4}',
-
-    background: '{dp-surface-color.10}',
-    activeBackground: '{dp-surface-color.14}',
-    hoverBackground: '{dp-surface-color.14}',
-  },
-
-  success: {
-    color: '{grey.lighten.5}',
-    activeColor: '{grey.lighten.5}',
-    hoverColor: '{grey.lighten.5}',
-
-    background: '{success-color}',
-    activeBackground: '{success-hover-color}',
-    hoverBackground: '{success-hover-color}',
-  },
-
-  info: {
-    color: '{grey.lighten.5}',
-    activeColor: '{grey.lighten.5}',
-    hoverColor: '{grey.lighten.5}',
-
-    background: '{info-color}',
-    activeBackground: '{info-hover-color}',
-    hoverBackground: '{info-hover-color}',
-  },
-
-  job: {
-    color: '{grey.lighten.5}',
-    activeColor: '{grey.lighten.5}',
-    hoverColor: '{grey.lighten.5}',
-
-    background: '{job-color}',
-    activeBackground: '{job-hover-color}',
-    hoverBackground: '{job-hover-color}',
-  },
-
-  error: {
-    color: '{grey.lighten.5}',
-    activeColor: '{grey.lighten.5}',
-    hoverColor: '{grey.lighten.5}',
-
-    background: '{error-color}',
-    activeBackground: '{error-hover-color}',
-    hoverBackground: '{error-hover-color}',
-  },
-
-  transfer: {
-    color: '{transfer-on-color}',
-    activeColor: '{transfer-on-color}',
-    hoverColor: '{transfer-on-color}',
-
-    background: '{transfer-color}',
-    activeBackground: '{transfer-hover-color}',
-    hoverBackground: '{transfer-hover-color}',
-  },
-
-  disabled: {
-    color: '{grey.darken.1}',
-    background: '{dp-surface-color.16}',
-  },
-};
+import { ButtonScheme } from '@webitel/styleguide/component-schemes';
 
 const generateCustomColorCss = ({ colorName, dt }) => `
         .p-button-${colorName} {
@@ -91,27 +16,8 @@ const generateCustomColorCss = ({ colorName, dt }) => `
 `;
 
 const button = {
-  border: {
-    radius: '4px',
-  },
-
-  padding: {
-    x: '{spacings.sm}',
-    y: '{spacings.xs}',
-  },
-
-  sm: {
-    padding: {
-      x: '{spacings.xs}',
-      y: '{spacings.2xs}',
-    },
-  },
-
-  colorScheme: {
-    light: {
-      ...lightTheme,
-    },
-  },
+  ...ButtonScheme.sizes,
+  colorScheme: ButtonScheme.colorScheme,
 
   extend: {
     transfer: {
@@ -147,8 +53,8 @@ const button = {
             font-weight: 600;
             font-size: 12px;
             line-height: 24px;
-            font-family: "Montserrat", monospace;
             border: none;
+            font-family: "Montserrat", monospace;
             text-transform: uppercase;
         }
         .p-button.p-button--width-by-content {

package/src/plugins/primevue/theme/components/popover/popover.js

@@ -1,11 +1,8 @@
+import { PopoverScheme } from '@webitel/styleguide/component-schemes';
+
 const popover = {
-  background: '{overlay.popover.background}',
-  borderColor: '{overlay.popover.border.color}',
-  color: '{black}',
-  borderRadius: '{overlay.popover.border.radius}',
-  shadow: '{overlay.popover.shadow}',
-  gutter: '10px',
-  arrowOffset: '1.25rem',
+  ...PopoverScheme.sizes,
+  colorScheme: PopoverScheme.colorScheme,
 };
 
 export default popover;

package/src/plugins/primevue/theme/components/tooltip/tooltip.js

@@ -1,9 +1,8 @@
+import { TooltipScheme } from '@webitel/styleguide/component-schemes';
+
 const tooltip = {
-  maxWidth: '12.5rem',
-  gutter: '0.25rem',
-  shadow: 'none',
-  padding: '0.5rem 0.75rem',
-  borderRadius: '{overlay.popover.border.radius}',
+  ...TooltipScheme.sizes,
+  colorScheme: TooltipScheme.colorScheme,
 };
 
 export default tooltip;

package/src/plugins/primevue/theme/webitel-theme.js

@@ -1,9 +1,9 @@
 import { definePreset } from '@primeuix/themes';
 import Aura from '@primeuix/themes/aura';
+import semantic from '@webitel/styleguide/semantic';
 
 import components from './components/components';
 import extend from './extend/extend';
-import semantic from './semantic/semantic';
 
 const WebitelTheme = definePreset(Aura, {
   semantic,