@webitel/ui-sdk 23.9.2 → 23.12.2

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

@@ -1,11 +1,13 @@
 <template>
   <div
     class="wt-button-select"
-    v-clickaway="away">
+    v-clickaway="away"
+  >
 
     <wt-button
-      class="wt-button-select__button"
       v-bind="$attrs"
+      class="wt-button-select__button"
+      :color="color"
       :disabled="disabled"
       @click="$emit('click', $event)"
     >
@@ -19,8 +21,9 @@
     >
       <template v-slot:activator>
         <wt-button
-          class="wt-button-select__select-btn"
           v-bind="$attrs"
+          class="wt-button-select__select-btn"
+          :color="color"
           :disabled="disabled"
           :loading="false"
           @click="isOpened = !isOpened"
@@ -29,6 +32,7 @@
             class="wt-button-select__select-arrow"
             :class="{'wt-button-select__select-arrow--active': isOpened}"
             icon="arrow-down"
+            :color="color === 'primary' ? 'on-primary' : 'default'"
             :disabled="disabled"
           ></wt-icon>
         </wt-button>
@@ -44,16 +48,41 @@ export default {
     isOpened: false,
   }),
   props: {
-    // all buttons props are passed as "$attrs"
+    /**
+     * See context-menu component docs
+     */
     options: {
       type: Array,
       required: true,
     },
+    /**
+     * @values 'primary', 'secondary'
+     * @example <wt-button color="secondary"></wt-button>
+     */
+    color: {
+      type: String,
+      default: 'primary',
+    },
     disabled: {
       type: Boolean,
       default: false,
     },
   },
+  emits: [
+    /**
+     * @event click
+     */
+    'click',
+    /**
+     * Click on option in context-menu
+     *
+     * @event click:option
+     *
+     * @property {object} option clicked option object
+     * @property {index} index clicked option index in options list
+     */
+    'click:option',
+  ],
   methods: {
     selectOption({ option, index }) {
       this.$emit('click:option', option, index);
@@ -89,94 +118,6 @@ export default {
   padding: var(--button-select-icon-button-padding);
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
 
-  // NORMAL MODE
-  &:not(.wt-button--outline)::v-deep {
-    & .wt-icon__icon {
-      fill: var(--button-select-icon-color-dark);
-    }
-
-    // For secondary color, the icon color and icon hover color are the same as in primary color mode
-
-    &.danger,
-    &.success,
-    &.transfer {
-      .wt-icon__icon {
-        fill: var(--button-select-icon-color-ligth);
-      }
-    }
-  }
-
-  //OUTLINE MODE
-  &.wt-button--outline::v-deep {
-    & .wt-icon__icon {
-      fill: var(--button-select-icon-color-primary);
-    }
-
-    &:hover,
-    &:active {
-      .wt-icon__icon {
-        fill: var(--button-select-icon-color-primary--hover);
-      }
-    }
-
-    &.danger {
-      & .wt-icon__icon {
-        fill: var(--icon-color-danger)
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-danger--hover);
-        }
-      }
-    }
-
-    &.success {
-      & .wt-icon__icon {
-        fill: var(--icon-color-success)
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-success--hover);
-        }
-      }
-    }
-
-    &.transfer {
-      & .wt-icon__icon {
-        fill: var(--icon-color-transfer)
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-transfer--hover);
-        }
-      }
-    }
-
-    &.secondary {
-      .wt-icon__icon {
-        fill: var(--button-select-icon-color-secondary);
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-secondary--hover);
-        }
-      }
-    }
-  }
-
-  // DISABLED MODE
-  &.wt-button--disabled .wt-icon::v-deep .wt-icon__icon {
-    fill: var(--icon-color-secondary-50);
-  }
-
   // OPEN AND SHUT ARROW
   .wt-button-select__select-arrow {
     display: flex;

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

@@ -7,7 +7,10 @@
       'wt-checkbox--disabled': disabled,
     }"
   >
-    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
+    <wt-label
+      v-bind="labelProps"
+      class="wt-checkbox__wrapper"
+    >
       <input
         class="wt-checkbox__input"
         type="checkbox"
@@ -23,7 +26,10 @@
       ></wt-icon>
     </span>
       <!-- @slot Custom label markup -->
-      <slot name="label" v-bind="{ label, isChecked, disabled }">
+      <slot
+        v-bind="{ label, isChecked, disabled }"
+        name="label"
+      >
         <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
       </slot>
     </wt-label>

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -28,7 +28,10 @@
             href="#"
             @click.prevent="handleOptionClick({ option, index, hide })"
           >
-            <slot name="option" v-bind="option">
+            <slot
+              v-bind="option"
+              name="option"
+            >
               {{ option.text || option }}
             </slot>
           </a>

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

@@ -5,17 +5,23 @@
     }"
     class="wt-datepicker"
   >
-    <wt-label :disabled="disabled" v-bind="labelProps">
+    <wt-label
+      v-bind="labelProps"
+      :disabled="disabled"
+    >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ label }}</slot>
     </wt-label>
     <vue-datepicker
+      v-bind="{ ...$attrs, ...$props }"
       ref="datepicker"
       :locale="$i18n.locale === 'ua' ? 'uk' : $i18n.locale"
       :model-value="+value"
       :placeholder="label || placeholder"
       class="wt-datepicker__datepicker"
-      v-bind="{ ...$attrs, ...$props }"
       :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
       :close-on-auto-apply="false"
       auto-apply

package/src/components/wt-icon/Readme.md

@@ -0,0 +1,327 @@
+
+```vue
+<wt-icon icon="edit"></wt-icon>
+```
+
+Different color icons:
+```vue
+const colors = ['default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'];
+
+<div
+  style="display: flex; align-items: center; gap: 5px;"
+  v-for="color of this.colors"
+  :key="color"
+>
+<wt-icon
+  icon="edit"
+  size="lg"
+  :color="color"
+></wt-icon>
+{{ color }}
+</div>
+```
+
+## How does it work?
+
+Icons are located in <code>assets/icons/sprite</code> directory, in <code>SVG</code> format,
+without <code>width</code> and <code>height</code> attributes, but with <code>
+[viewBox](https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/viewBox)
+</code> attribute.
+(<code>viewBox</code> is provided by designer in svg pic itself - so you just need to check it presence,
+by the way check for `width` `height` absence).
+
+For example:
+
+```
+const img = require('./docs/svg-icon-code-example.png');
+<img :src="this.img" alt="svg icon code example">
+```
+
+At build stage, <code><a href="https://github.com/JetBrains/svg-sprite-loader#svg-sprite-loader">svg-sprite-loader</a></code>
+collects all icons (looking for "All files`.svg` in all directories, which names include `sprite`,
+). This rule is described in <code>vue.config.js:</code>
+(from "Quick Start" icons installation section):
+
+<pre class="language-javascript"><code>
+config.module
+    .rule('svg')
+    .exclude.add(/^(.*sprite).*\.svg/); // same as in svg-sprite-loader
+
+config.module
+    .rule('svg-sprite')
+    .test(/^(.*sprite).*\.svg/) // same as in svg-url-loader
+    .use('svg-sprite-loader')
+    .loader('svg-sprite-loader');
+</code></pre>
+
+So that, all these icons are collected in one sprite. This sprite is injected in <code>index.html</code>.
+
+For example: (By the way, you can check it if you want to see, which icons were collected in this sprite):
+
+```
+const img = require('./docs/svg-sprite-in-dom.png');
+<img :src="this.img" alt="svg-sprite-in-dom">
+```
+
+Then, these icons can be used as:
+
+<pre class="language-html"><code>
+&lt;svg&gt;&lt;use xlink:href="#attach"&gt;&lt;/use&gt;&lt;/svg&gt;
+// or, using wt-icon component:
+&lt;wt-icon icon="attach"&gt;&lt;/wt-icon&gt;
+</code></pre>
+
+## How to install your custom icons to project?
+
+`svg-sprite-loader` webpack rule in <code>vue.config.js</code> also collects all icons from `sprite`
+directories in project and adds it to final sprite.
+
+*In fact, webitel-ui icons are added to sprite just cause they're imported from
+"sprite" directory - just in <code>node_modules</code>*
+
+For stylistic purposes, it's recommended to allocate icons in <code>src/(app?)/assets/icons/sprite/*</code>,
+So that developers and designer could find (and then check or update) them in any project.
+
+All icons from this directory should be imported in <code>index.js</code> in this directory
+(create `index.js` if it doesn't exist).
+
+Then, `index.html` should be imported in `main.js`:
+<pre class="language-javascript"><code>import './assets/icons/sprite';</code></pre>
+
+And, then, if you put some new icons in this directory, and import them in `index.js`,
+they automatically become available in project.
+
+### Simple TODO:
+* Create directory `src/(app?)/assets/icons/sprite/` (if doesn't exists)
+* in this folder, create `index.js` (if doesn't exists)
+* Import `index.js` to `>main.js` (if doesn't exists)
+* Put icon to this directory, and import it to `index.js`
+* That's all, you're awesome!
+
+## Icon sprites naming convention:
+
+App-specific icons are highly recommended to be named with the prefix corresponding to this application.
+
+The reason is: when you see an icon usage, you will be able to distinguish `svg` location:
+in this app, or library - and update it, if needed.
+*For example, if you want to move this icon from app to library, you just need to remove `icon-prefix` prop
+from all icon usages (and, of course, rename the icon file)*
+
+### Icon prefix corresponding to application:
+* **Webitel UI:** no prefix
+* **Admin:** `adm-`
+* **Workspace:** `ws-`
+* **Supervisor:** `sv-`
+* **History:** `hs-`
+* **Webitel CC UI:** `cc-`
+
+## How to clean up icons before adding them to project?
+
+After export from Figma, icons should be cleaned up to avoid a few issues.
+
+Use this checklist:
+1. **Remove** `width` and `height` from svg-tag
+```
+const img = require('./docs/cleanup-svg-width-height.png');
+<img :src="this.img" alt="Remove width and height">
+```
+
+2. **Check** `viewBox`: it's size should be square **(BUT DO NOT DELETE!)**
+
+If there's an issue, contact the designer.
+
+Incorrect:
+```
+const img = require('./docs/cleanup-svg-viewbox-incorrect.png');
+<img :src="this.img" alt="viewBox is incorrect">
+```
+
+Correct:
+```
+const img = require('./docs/cleanup-svg-viewbox-correct.png');
+<img :src="this.img" alt="viewBox is correct">
+```
+
+4. **Remove** `fill="none"` from svg-tag
+```
+const img = require('./docs/cleanup-svg-fill-none.png');
+<img :src="this.img" alt="Remove "fill=none"">
+```
+
+5. **Remove** all `fill=""` with default color
+
+*Default "fill" should be cleaned up, cause Figma adds it to icon by default, but we are
+changing this fill in styles to suit our needs.
+But! Specific colors should stay in svg-code. (for instance, red dot in `record` icon)*
+
+```
+const img = require('./docs/cleanup-svg-fill.png');
+<img :src="this.img" alt="Remove this fill">
+```
+
+```vue
+<template>
+  <div style="display: grid; grid-template-columns: repeat(auto-fit, 120px); grid-gap: var(--spacing-xs);">
+    <div
+      style="text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px;"
+      v-for="icon of this.icons"
+      :key="icon"
+    >
+      <wt-icon
+        :icon="icon"
+        size="xl"
+      ></wt-icon>
+      {{ icon }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const icons = [
+  'email',
+  'adfs',
+  'azure',
+  'instagram',
+  'zoom-in',
+  'zoom-out',
+  'send-arrow',
+  'close',
+  'close--filled',
+  'attach',
+  'mail',
+  'mail--color',
+  'telegram-bot',
+  'messenger-infobip',
+  'messenger-telegram',
+  'messenger-telegram--filled',
+  'messenger-facebook',
+  'messenger-facebook--filled',
+  'messenger-viber',
+  'messenger-viber--filled',
+  'messenger-web-chat',
+  'messenger-whatsapp',
+  'messenger-whatsapp--filled',
+  'messenger-messenger',
+  'meta',
+  'lock',
+  'move',
+  'queue-member',
+  'history',
+  'generate',
+  'google',
+  'rounded-info',
+  'copy',
+  'menu',
+  'clear',
+  'video-cam',
+  'video-cam-off',
+  'bell',
+  'bell-badged',
+  'star',
+  'star--filled',
+  'sound-on',
+  'sound-off',
+  'back',
+  'prompter',
+  'play',
+  'pause',
+  'stop',
+  'download',
+  'upload',
+  'filter',
+  'column-select',
+  'refresh',
+  'calendar',
+  'radio',
+  'radio--checked',
+  'checkbox',
+  'checkbox--checked',
+  'checkbox--checked--filled',
+  'eye--closed',
+  'eye--opened',
+  'numpad',
+  'settings',
+  'docs',
+  'logout',
+  'account',
+  'app-navigator',
+  'collapse',
+  'expand',
+  'bucket',
+  'tick',
+  'edit',
+  'plus',
+  'search',
+  'rec-off',
+  'rec',
+  'note',
+  'mic',
+  'mic-muted',
+  'hold',
+  'contacts',
+  'done',
+  'attention',
+
+  'call',
+  'call--filled',
+  'call-end',
+  'call-end--filled',
+  'call-transfer',
+  'call-transfer--filled',
+  'call-ringing',
+  'call-ringing--filled',
+  'call-missed',
+  'call-missed--filled',
+  'call-add-to',
+  'call-add-to--filled',
+  'call-disconnect',
+  'call-disconnect--filled',
+  'call-outbound',
+  'call-outbound--filled',
+  'call-inbound',
+  'call-inbound--filled',
+
+  'chat',
+  'chat--filled',
+  'chat-join',
+  'chat-transfer',
+  'chat-transfer--filled',
+  'chat-end',
+  'chat-end--filled',
+  'chat-group',
+  'chat-quick-response',
+  'chat-quick-response--filled',
+  'chat-send',
+  'chat-emoji',
+  'chat-reply',
+  'chat-message-status-sent',
+  'chat-message-status-read',
+
+  'job',
+  'job--accept',
+  'job--end',
+
+  'sort-arrow-down',
+  'sort-arrow-up',
+  'arrow-down',
+  'arrow-left',
+  'arrow-mix',
+  'arrow-right',
+  'arrow-up',
+  'tts-download',
+  'stt',
+  'stt-download',
+  'stt-search',
+  'scorecard',
+  'idle',
+  'pin',
+  'unpin',
+  'options',
+
+  'preview-tag-video',
+  'preview-tag-audio',
+  'preview-tag-application',
+  'preview-tag-image',
+].sort();
+</script>
+```

package/src/components/wt-icon/_variables.scss

@@ -7,4 +7,30 @@
   --icon-md-size: 24px;
   --icon-sm-size: 16px;
   --icon-xs-size: 8px;
+
+  --icon-color: var(--grey-darken-2);
+  --icon-error-color: var(--error-color);
+  --icon-success-color: var(--success-color);
+  --icon-warning-color: var(--warning-color);
+  --icon-on-dark-color: var(--white);
+  --icon-on-light-color: var(--grey-darken-3);
+  --icon-on-primary-color: var(--on-primary-color);
+  --icon-info-color: var(--info-color);
+  --icon-chat-color: var(--chat-color);
+  --icon-transfer-color: var(--transfer-color);
+  --icon-disabled-color: var(--grey-lighten-4);
+}
+
+:root.theme--dark {
+  --icon-color: var(--grey-lighten-2);
+  --icon-disabled-color: var(--grey-darken-2);
+  --icon-error-color: var(--error-color);
+  --icon-success-color: var(--success-color);
+  --icon-warning-color: var(--warning-color);
+  --icon-on-dark-color: var(--white);
+  --icon-on-light-color: var(--grey-darken-3);
+  --icon-on-primary-color: var(--on-primary-color);
+  --icon-info-color: var(--info-color);
+  --icon-chat-color: var(--chat-color);
+  --icon-transfer-color: var(--transfer-color);
 }