@webitel/ui-sdk 23.12.16 → 23.12.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.16",
+  "version": "23.12.18",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

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

@@ -1,14 +1,13 @@
 <template>
   <div
+    v-clickaway="atClickaway"
     class="wt-button-select"
-    v-clickaway="away"
   >
-
     <wt-button
       v-bind="$attrs"
-      class="wt-button-select__button"
       :color="color"
       :disabled="disabled"
+      class="wt-button-select__button"
       @click="$emit('click', $event)"
     >
       <slot></slot>
@@ -16,24 +15,24 @@
 
     <wt-context-menu
       :options="options"
-      :visible="isOpened"
+      :visible="isContextMenuVisible"
       @click="selectOption"
     >
       <template v-slot:activator>
         <wt-button
           v-bind="$attrs"
-          class="wt-button-select__select-btn"
           :color="color"
           :disabled="disabled"
           :loading="false"
+          class="wt-button-select__select-btn"
           @click="isOpened = !isOpened"
         >
           <wt-icon
-            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"
+            class="wt-button-select__select-arrow"
+            icon="arrow-down"
           ></wt-icon>
         </wt-button>
       </template>
@@ -41,58 +40,63 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'wt-button-select',
-  data: () => ({
-    isOpened: false,
-  }),
-  props: {
-    /**
-     * 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,
-    },
+<script setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  /**
+   * See context-menu component docs
+   */
+  options: {
+    type: Array,
+    required: true,
   },
-  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);
-      this.isOpened = false;
-    },
-    away() {
-      this.isOpened = false;
-    },
+  /**
+   * @values 'primary', 'secondary'
+   * @example <wt-button color="secondary"></wt-button>
+   */
+  color: {
+    type: String,
+    default: 'primary',
   },
-};
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  /**
+   * @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',
+]);
+
+const isOpened = ref(false);
+
+const isContextMenuVisible = computed(() => {
+  if (props.disabled) return false;
+  return isOpened.value;
+});
+
+function selectOption({ option, index }) {
+  emit('click:option', option, index);
+  isOpened.value = false;
+}
+
+function atClickaway() {
+  isOpened.value = false;
+}
+
 </script>
 
 <style lang="scss">

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

@@ -5,7 +5,7 @@
 
 Different color icons:
 ```vue
-const colors = ['default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
+const colors = ['default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
 
 <div
   style="display: flex; align-items: center; gap: 5px;"

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

@@ -9,6 +9,7 @@
   --icon-xs-size: 8px;
 
   --icon-color: var(--grey-darken-2);
+  --icon-active-color: var(--grey-darken-4);
   --icon-primary-color: var(--primary-color);
   --icon-error-color: var(--error-color);
   --icon-success-color: var(--success-color);
@@ -25,5 +26,6 @@
 
 :root.theme--dark {
   --icon-color: var(--grey-lighten-2);
+  --icon-active-color: var(--grey-lighten-4);
   --icon-disabled-color: var(--grey-darken-2);
 }

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

@@ -35,7 +35,7 @@ const props = defineProps({
     default: 'md',
   },
   /**
-   * @values 'default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
+   * @values 'default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
    */
   color: {
     type: String,
@@ -88,6 +88,9 @@ svg {
   &-default .wt-icon__icon {
     fill: var(--icon-color);
   }
+  &-active .wt-icon__icon {
+    fill: var(--icon-active-color);
+  }
   &-primary .wt-icon__icon {
     fill: var(--icon-primary-color);
   }