23.12.18: wt-button-select refactored to compositions api [WTEL-3915]

webitel · Oct 16, 2023 · 7d91d74 · 7d91d74
1 parent e8a6e42
commit 7d91d74
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.17",
+  "version": "23.12.18",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

diff --git a/src/components/wt-button-select/wt-button-select.vue b/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>
@@ -22,77 +21,77 @@
       <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>
     </wt-context-menu>
   </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,
+  },
+  /**
+   * @values 'primary', 'secondary'
+   * @example <wt-button color="secondary"></wt-button>
+   */
+  color: {
+    type: String,
+    default: 'primary',
   },
-  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;
-    },
+  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);
+
+function selectOption({ option, index }) {
+  emit('click:option', option, index);
+  isOpened.value = false;
+}
+
+function atClickaway() {
+  isOpened.value = false;
+}
+
 </script>
 
 <style lang="scss">