@webitel/ui-sdk 2.1.43 → 2.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.1.43",
+  "version": "2.1.45",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -22,6 +22,7 @@
     "src/mixins/*",
     "src/scripts/*",
     "src/modules/*",
+    "src/plugins/*",
     "src/store/*",
     "CHANGELOG.md"
   ],

package/src/components/atoms/wt-avatar/wt-avatar.vue

@@ -6,6 +6,7 @@
     <wt-badge
       v-if="badge"
       :color-variable="badgeColorVar"
+      :icon-badge="isDnd ? 'dnd' : null"
     ></wt-badge>
     <img
       class="wt-avatar__img"
@@ -44,6 +45,9 @@ export default {
     imgSrc() {
       return this.src || defaultAvatar;
     },
+    isDnd() {
+      return this.status === AbstractUserStatus.DND;
+    },
     badgeColorVar() {
       switch (this.status) {
         case AbstractUserStatus.ACTIVE: return 'online-color';

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -2,11 +2,13 @@
   <aside
     class="wt-badge"
     :class="{ 'wt-badge--outside': outside }"
-    :style="{ background: `var(--${colorVariable})` }"
+    :style="{ background: iconBadge ? `url(${this.showIconBadge})` : `var(--${colorVariable})` }"
   ></aside>
 </template>
 
 <script>
+import BadgeDnd from '../../../assets/icons/badge-dnd.svg';
+
 export default {
   name: 'wt-badge',
   props: {
@@ -19,6 +21,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    iconBadge: {
+      type: String,
+    },
+  },
+  computed: {
+    showIconBadge() {
+      switch (this.iconBadge) {
+        case 'dnd': return BadgeDnd;
+        default: return null;
+      }
+    },
   },
 };
 </script>

package/src/css/styleguide/viewport-breakpoints/_viewport-breakpoints.scss

@@ -6,15 +6,20 @@ sm: @media only screen and (max-width: $viewport-md) {}
 xs: @media only screen and (max-width: $viewport-sm) {}
  */
 
-$viewport-xl: 1440px;
-$viewport-lg: 1280px;
-$viewport-md: 992px;
-$viewport-sm: 600px;
+// OLD, REMOVE ME
+//$viewport-xl: 1440px;
+//$viewport-lg: 1280px;
+//$viewport-md: 992px;
+//$viewport-sm: 600px;
+
+$viewport-lg: 1904px; // and lower
+$viewport-md: 1264px; // and lower
+$viewport-sm: 960px; // and lower
+$viewport-xs: 600px; // and lower
 
 $media: #{'only screen'};
-$media-width-xl: #{'min-width: '} $viewport-xl;
-$media-width-lg: #{'max-width: '} $viewport-xl;
-$media-width-md: #{'max-width: '} $viewport-lg;
-$media-width-sm: #{'max-width: '} $viewport-md;
-$media-width-xs: #{'max-width: '} $viewport-sm;
+$media-width-lg: #{'min-width: '} $viewport-lg;
+$media-width-md: #{'max-width: '} $viewport-md;
+$media-width-sm: #{'max-width: '} $viewport-sm;
+$media-width-xs: #{'max-width: '} $viewport-xs;
 

package/src/plugins/breakpoint/breakpoint.plugin.js

@@ -0,0 +1,136 @@
+import debounce from '../../scripts/debounce';
+
+// https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
+// https://stackoverflow.com/questions/50111231/vue-prototype-not-reactive-when-data-changes
+
+// https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/breakpoint/index.ts
+
+const breakpoint = {
+  // Breakpoints
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+
+  // Conditionals
+  xsOnly: false,
+  smOnly: false,
+  smAndDown: false,
+  smAndUp: false,
+  mdOnly: false,
+  mdAndDown: false,
+  mdAndUp: false,
+  lgOnly: false,
+  lgAndDown: false,
+  lgAndUp: false,
+  xlOnly: false,
+
+  // true if screen width < mobileBreakpoint
+  mobile: true,
+
+  // Current breakpoint name (e.g. 'md')
+  name: 'xs',
+  // Dimensions
+  height: 0,
+  width: 0,
+};
+
+const getClientWidth = () => Math.max(
+  document.documentElement.clientWidth,
+  window.innerWidth || 0,
+);
+
+const getClientHeight = () => Math.max(
+  document.documentElement.clientHeight,
+  window.innerHeight || 0,
+);
+
+const thresholds = {
+  xs: 600,
+  sm: 960,
+  md: 1264,
+  lg: 1904,
+};
+const mobileBreakpoint = 'sm';
+const scrollBarWidth = 16;
+
+const onResize = () => {
+  const height = getClientHeight();
+  const width = getClientWidth();
+
+  const xs = width < thresholds.xs;
+  const sm = width < thresholds.sm && !xs;
+  const md = width < (thresholds.md - scrollBarWidth) && !(sm || xs);
+  const lg = width < (thresholds.lg - scrollBarWidth) && !(md || sm || xs);
+  const xl = width >= (thresholds.lg - scrollBarWidth);
+
+  breakpoint.height = height;
+  breakpoint.width = width;
+
+  breakpoint.xs = xs;
+  breakpoint.sm = sm;
+  breakpoint.md = md;
+  breakpoint.lg = lg;
+  breakpoint.xl = xl;
+
+  breakpoint.xsOnly = xs;
+  breakpoint.smOnly = sm;
+  breakpoint.smAndDown = (xs || sm) && !(md || lg || xl);
+  breakpoint.smAndUp = !xs && (sm || md || lg || xl);
+  breakpoint.mdOnly = md;
+  breakpoint.mdAndDown = (xs || sm || md) && !(lg || xl);
+  breakpoint.mdAndUp = !(xs || sm) && (md || lg || xl);
+  breakpoint.lgOnly = lg;
+  breakpoint.lgAndDown = (xs || sm || md || lg) && !xl;
+  breakpoint.lgAndUp = !(xs || sm || md) && (lg || xl);
+  breakpoint.xlOnly = xl;
+
+  switch (true) {
+    case (xs):
+      breakpoint.name = 'xs';
+      break;
+    case (sm):
+      breakpoint.name = 'sm';
+      break;
+    case (md):
+      breakpoint.name = 'md';
+      break;
+    case (lg):
+      breakpoint.name = 'lg';
+      break;
+    default:
+      breakpoint.name = 'xl';
+      break;
+  }
+
+  if (typeof mobileBreakpoint === 'number') {
+    breakpoint.mobile = width < parseInt(mobileBreakpoint, 10);
+
+    return;
+  }
+
+  const breakpoints = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+  };
+
+  const current = breakpoints[breakpoint.name];
+  const max = breakpoints[mobileBreakpoint];
+
+  breakpoint.mobile = current <= max;
+};
+
+const install = (Vue) => {
+  window.addEventListener('resize', debounce(onResize), { passive: true });
+
+  onResize();
+
+  // eslint-disable-next-line no-param-reassign
+  Vue.prototype.$breakpoint = Vue.observable(breakpoint);
+};
+
+export default { install };