@webitel/ui-sdk 25.10.22 → 25.10.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.22",
+  "version": "25.10.24",
   "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",

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="wt-image"
     :style="{
       width,
       height,
@@ -7,24 +8,33 @@
       minHeight,
       maxWidth,
       maxHeight,
+      cursor: overlayIcon ? 'pointer' : 'auto'
     }"
-    class="wt-image"
   >
     <!--    @slot Replaces `<img>` tag
             @scope `{ alt, src }`
      -->
     <slot v-bind="{ alt, src }">
-      <img
+      <p-image
         :alt="alt"
         :src="src"
         class="wt-image__img"
       />
+      <div v-if="overlayIcon" class="wt-image__overlay-icon">
+        <wt-icon 
+          :icon="overlayIcon"
+          :icon-prefix="overlayIconPrefix"
+          :color="IconColor.ON_DARK"
+        />
+      </div>
     </slot>
   </div>
 </template>
 
-<script setup>
-import { computed } from 'vue';
+<script setup lang="ts">
+import { computed, defineProps } from 'vue';
+
+import { IconColor } from '../../enums';
 
 const sizeToUnits = {
   '3xs': '32px',
@@ -36,53 +46,21 @@ const sizeToUnits = {
   xl: '380px',
   '2xl': '512px',
   '3xl': '600px',
-};
-
-const props = defineProps({
-  src: {
-    type: [Object, String],
-    required: true,
-  },
-  // все в одну лінію, бо повалиться дока
-  /**
-   *  `'3xs': '32px', '2xs': '64px', 'xs': '92px', 'sm': '128px', 'md': '192px', 'lg': '256px', 'xl': '380px', '2xl': '512px', '3xl': '600px',`
-   */
-  size: {
-    type: String,
-    // default: 'md',
-    // required: true,
-    validator: (v) =>
-      ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(v),
-  },
-  alt: {
-    type: String,
-    default: 'wt-image',
-  },
-  width: {
-    type: [String, Number],
-  },
-  height: {
-    type: [String, Number],
-  },
-  minWidth: {
-    type: [String, Number],
-  },
-  minHeight: {
-    type: [String, Number],
-  },
-  maxWidth: {
-    type: [String, Number],
-  },
-  maxHeight: {
-    type: [String, Number],
-  },
-  // aspectRatio: {
-  //   type: [String, Number, null],
-  //   default: 1,
-  // },
-});
+} as const;
 
-const emit = defineEmits([]);
+const props = defineProps<{
+  src: string | object;
+  size?: keyof typeof sizeToUnits;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  minWidth?: string | number;
+  minHeight?: string | number;
+  maxWidth?: string | number;
+  maxHeight?: string | number;
+  overlayIcon?: string;
+  overlayIconPrefix?: string;
+}>();
 
 const width = computed(() => {
   const width = props.size ? sizeToUnits[props.size] : props.width;
@@ -107,7 +85,8 @@ const height = computed(() => {
 
   return height;
 });
-</script>
+</script> 
+
 
 <style lang="scss" scoped>
 //@use '../../css/styleguide/styleguide';
@@ -116,10 +95,32 @@ const height = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 
   &__img {
+    display: inline-flex;
     max-width: 100%;
     max-height: 100%;
+    width: 100%;
+    height: auto;
+  }
+}
+
+.wt-image__overlay-icon {
+  opacity: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.25);
+
+  &:hover {
+    opacity: 1;
   }
 }
 </style>

package/src/components/wt-tree-line/_variables.scss

@@ -2,6 +2,9 @@
   --wt-tree-item-active: var(--primary-light-color);
   --wt-tree-item-active-on: var(--grey-darken-4);
 
+  --wt-tree-item-searched: var(--light-blue-lighten-4);
+  --wt-tree-item-searched-on: var(--grey-darken-4);
+
   --wt-tree-item: var(--primary-light-color);
   --wt-tree-item-on: var(--grey-darken-1);
 
@@ -13,6 +16,9 @@
   --wt-tree-item-active: var(--primary-light-color);
   --wt-tree-item-active-on: var(--grey-lighten-4);
 
+  --wt-tree-item-searched: var(--light-blue-lighten-2);
+  --wt-tree-item-searched-on: var(--grey-darken-4);
+
   --wt-tree-item: var(--primary-light-color);
   --wt-tree-item-on: var(--grey-lighten-3);
 

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="wt-tree-line">
+  <div
+    class="wt-tree-line">
     <div class="wt-tree-line__icon-wrapper">
       <wt-icon
         v-for="(icon, index) in nestedIcons"
@@ -18,7 +19,10 @@
       />
     </div>
     <div
-      :class="{ active: displayActiveState }"
+      :class="{
+      active: displayActiveState,
+      searched: props.data[props.searchedProp]
+    }"
       class="wt-tree-line__label-wrapper"
       @click="selectElement"
     >
@@ -347,6 +351,11 @@ watch(
       color: var(--wt-tree-item-hover-on);
     }
 
+    &.searched:not(.active) {
+      background: var(--wt-tree-item-searched);
+      color: var(--wt-tree-item-searched-on);
+    }
+
     &.active {
       background: var(--wt-tree-item-active);
       color: var(--wt-tree-item-active-on);

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

@@ -8,6 +8,7 @@ import PColumn from 'primevue/column';
 import PrimeVue from 'primevue/config';
 import PTable from 'primevue/datatable';
 import PDivider from 'primevue/divider';
+import PImage from 'primevue/image';
 import PInputText from 'primevue/inputtext';
 import PMenubar from 'primevue/menubar';
 import PPopover from 'primevue/popover';
@@ -51,6 +52,7 @@ const initPrimevue = (app) => {
   app.component('PBreadcrumb', changeComponentCompatMode(PBreadcrumb));
   app.component('PSlider', changeComponentCompatMode(PSlider));
   app.component('PDivider', changeComponentCompatMode(PDivider));
+  app.component('PImage', changeComponentCompatMode(PImage));
 
   app.directive('tooltip', Tooltip);
 };

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

@@ -5,6 +5,7 @@ import button from './button/button.js';
 import checkbox from './checkbox/checkbox.js';
 import chip from './chip/chip.js';
 import divider from './divider/divider.js';
+import image from './image/image.js';
 import menubar from './menubar/menubar.js';
 import popover from './popover/popover.js';
 import radio from './radio/radio.js';
@@ -23,6 +24,7 @@ const components = {
   checkbox,
   toggleswitch: switcher,
   divider,
+  image,
   menubar,
   popover,
   radiobutton: radio,

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

@@ -0,0 +1,11 @@
+const image = {
+  css: () => `
+    .p-image img{
+      height: auto;
+      width: 100%;
+      object-fit: cover;
+    }
+  `
+}
+
+export default image

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

@@ -1,5 +1,15 @@
 import { TableScheme } from '@webitel/styleguide/component-schemes';
 
+const rowStateStyles = (state, dt) => `
+            .p-datatable-tbody > tr.row-${state} {
+                background: ${dt(`datatable.row.${state}Background`)};
+            }
+
+            .p-datatable-tbody > tr.row-${state}:hover {
+                background: ${dt(`datatable.row.${state}HoverBackground`)};
+            }
+        `;
+
 const table = {
   ...TableScheme.sizes,
   colorScheme: TableScheme.colorScheme,
@@ -19,6 +29,10 @@ const table = {
             background: ${dt('datatable.row.hoverBackground')};
         }
 
+        ${rowStateStyles('error', dt)}
+        ${rowStateStyles('warning', dt)}
+        ${rowStateStyles('success', dt)}
+
         .p-datatable-scrollable .p-datatable-frozen-column:not(.p-datatable-header-cell) {
             background: ${dt('datatable.frozenColumn.background')};
         }

package/types/components/wt-image/wt-image.vue.d.ts

@@ -1,34 +1,48 @@
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $emit: (event: any, ...args: any[]) => void;
-    alt: string;
-    src: string | Record<string, any>;
-    size?: string;
+import { IconColor } from '../../enums';
+declare const sizeToUnits: {
+    readonly '3xs': "32px";
+    readonly '2xs': "64px";
+    readonly xs: "92px";
+    readonly sm: "128px";
+    readonly md: "192px";
+    readonly lg: "256px";
+    readonly xl: "380px";
+    readonly '2xl': "512px";
+    readonly '3xl': "600px";
+};
+type __VLS_Props = {
+    src: string | object;
+    size?: keyof typeof sizeToUnits;
+    alt?: string;
     width?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
     height?: string | number;
+    minWidth?: string | number;
     minHeight?: string | number;
+    maxWidth?: string | number;
     maxHeight?: string | number;
-    $props: {
-        readonly alt?: string;
-        readonly src?: string | Record<string, any>;
-        readonly size?: string;
-        readonly width?: string | number;
-        readonly minWidth?: string | number;
-        readonly maxWidth?: string | number;
-        readonly height?: string | number;
-        readonly minHeight?: string | number;
-        readonly maxHeight?: string | number;
+    overlayIcon?: string;
+    overlayIconPrefix?: string;
+};
+declare const width: import("vue").ComputedRef<string | number>;
+declare const height: import("vue").ComputedRef<string | number>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {
+    alt: string;
+    src: string | object;
+};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    IconColor: typeof IconColor;
+    width: typeof width;
+    height: typeof height;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: (props: {
-        alt: string;
-        src: string | Record<string, any>;
-    }) => any;
 };

package/types/plugins/primevue/theme/components/components.d.ts

@@ -8,6 +8,7 @@ declare namespace components {
     export { checkbox };
     export { switcher as toggleswitch };
     export { divider };
+    export { image };
     export { menubar };
     export { popover };
     export { radio as radiobutton };
@@ -24,6 +25,7 @@ import chip from './chip/chip.js';
 import checkbox from './checkbox/checkbox.js';
 import switcher from './switcher/switcher.js';
 import divider from './divider/divider.js';
+import image from './image/image.js';
 import menubar from './menubar/menubar.js';
 import popover from './popover/popover.js';
 import radio from './radio/radio.js';

package/types/plugins/primevue/theme/components/image/image.d.ts

@@ -0,0 +1,4 @@
+export default image;
+declare namespace image {
+    function css(): string;
+}