Browse Source

[ui] Vue 3 - Migrated Dropdown components

sreenaths 4 years ago
parent
commit
a1eec246d9

+ 7 - 3
desktop/core/src/desktop/js/components/dropdown/DropdownMenu.test.ts

@@ -21,15 +21,19 @@ import DropdownMenu from './DropdownMenu.vue';
 describe('DropdownMenu.vue', () => {
   it('should render empty dropdown', () => {
     const wrapper = shallowMount(DropdownMenu, {
-      stubs: { 'dropdown-panel': DropdownPanel }
+      global: {
+        stubs: { 'dropdown-panel': DropdownPanel }
+      }
     });
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it('should render dropdown with slots', () => {
     const wrapper = shallowMount(DropdownMenu, {
-      stubs: { 'dropdown-panel': DropdownPanel },
-      scopedSlots: {
+      global: {
+        stubs: { 'dropdown-panel': DropdownPanel }
+      },
+      slots: {
         default: '<div>Some item</div>'
       }
     });

+ 20 - 12
desktop/core/src/desktop/js/components/dropdown/DropdownMenu.vue

@@ -29,20 +29,28 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent } from 'vue';
+
   import DropdownPanel from './DropdownPanel.vue';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
 
-  @Component({
-    components: { DropdownPanel }
-  })
-  export default class DropdownMenu extends Vue {
-    @Prop({ required: false, default: '' })
-    text!: string;
-    @Prop({ required: false, default: false })
-    link!: boolean;
-  }
+  export default defineComponent({
+    components: {
+      DropdownPanel
+    },
+
+    props: {
+      text: {
+        type: String,
+        required: false,
+        default: ''
+      },
+      link: {
+        type: Boolean,
+        required: false,
+        default: false
+      }
+    }
+  });
 </script>
 
 <style lang="scss" scoped>

+ 4 - 4
desktop/core/src/desktop/js/components/dropdown/DropdownMenuButton.vue

@@ -23,11 +23,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
+  import { defineComponent } from 'vue';
 
-  @Component
-  export default class DropdownMenuButton extends Vue {}
+  export default defineComponent({
+    emits: ['click']
+  });
 </script>
 
 <style lang="scss" scoped></style>

+ 9 - 8
desktop/core/src/desktop/js/components/dropdown/DropdownMenuGroup.vue

@@ -26,15 +26,16 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
 
-  @Component
-  export default class DropdownMenuGroup extends Vue {
-    @Prop({ required: true })
-    header!: string;
-  }
+  export default defineComponent({
+    props: {
+      header: {
+        type: String,
+        required: true
+      }
+    }
+  });
 </script>
 
 <style lang="scss" scoped>

+ 9 - 4
desktop/core/src/desktop/js/components/dropdown/DropdownMenuItem.vue

@@ -24,11 +24,16 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
+  import { defineComponent } from 'vue';
 
-  @Component
-  export default class DropdownMenuItem extends Vue {}
+  export default defineComponent({
+    props: {
+      text: {
+        type: String,
+        required: true
+      }
+    }
+  });
 </script>
 
 <style lang="scss" scoped></style>

+ 10 - 8
desktop/core/src/desktop/js/components/dropdown/DropdownMenuText.vue

@@ -24,15 +24,17 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
 
-  @Component
-  export default class DropdownMenuText extends Vue {
-    @Prop({ required: false, default: '' })
-    text;
-  }
+  export default defineComponent({
+    props: {
+      text: {
+        type: String,
+        required: false,
+        default: ''
+      }
+    }
+  });
 </script>
 
 <style lang="scss" scoped>

+ 60 - 39
desktop/core/src/desktop/js/components/dropdown/DropdownPanel.vue

@@ -36,12 +36,11 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent } from 'vue';
+
   import { clickOutsideDirective } from '../directives/clickOutsideDirective';
   import HueButton from '../HueButton.vue';
   import HueLink from '../HueLink.vue';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
 
   interface OutsideStatus {
     left: boolean;
@@ -60,49 +59,71 @@
     };
   };
 
-  @Component({
-    components: { HueButton, HueLink },
+  export default defineComponent({
+    components: {
+      HueButton,
+      HueLink
+    },
+
     directives: {
       'click-outside': clickOutsideDirective
-    }
-  })
-  export default class DropdownPanel extends Vue {
-    @Prop({ required: false, default: '' })
-    text!: string;
-    @Prop({ required: false, default: false })
-    link!: boolean;
-    @Prop({ required: false, default: false })
-    disabled!: boolean;
-
-    panelOpen = false;
-
-    positionTop = false;
-    positionLeft = false;
-
-    togglePanel(): void {
-      if (!this.panelOpen) {
-        const dropdownElement = this.$el.getElementsByClassName('hue-dropdown-container');
-        if (dropdownElement.length) {
-          const outsideStatus = isOutsideViewport(dropdownElement[0]);
-          this.positionTop = outsideStatus.bottom;
-          this.positionLeft = outsideStatus.right;
-        }
+    },
+
+    props: {
+      text: {
+        type: String,
+        default: ''
+      },
+      link: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
-      this.panelOpen = !this.panelOpen;
-    }
+    },
+
+    data(): {
+      panelOpen: boolean;
+
+      positionTop: boolean;
+      positionLeft: boolean;
+    } {
+      return {
+        panelOpen: false,
+
+        positionTop: false,
+        positionLeft: false
+      };
+    },
+
+    methods: {
+      togglePanel(): void {
+        if (!this.panelOpen) {
+          const dropdownElement = this.$el.getElementsByClassName('hue-dropdown-container');
+          if (dropdownElement.length) {
+            const outsideStatus = isOutsideViewport(dropdownElement[0]);
+            this.positionTop = outsideStatus.bottom;
+            this.positionLeft = outsideStatus.right;
+          }
+        }
+        this.panelOpen = !this.panelOpen;
+      },
 
-    closePanel(): void {
-      if (this.panelOpen) {
-        this.togglePanel();
-      }
-    }
+      closePanel(): void {
+        if (this.panelOpen) {
+          this.togglePanel();
+        }
+      },
 
-    clickOutside(): void {
-      if (this.panelOpen) {
-        this.panelOpen = false;
+      clickOutside(): void {
+        if (this.panelOpen) {
+          this.panelOpen = false;
+        }
       }
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>