Clickable cards

src/components/Card/SCard.vue

@@ -1,6 +1,7 @@
 <template>
   <el-card
     class="s-card"
+    :class="{ clickable }"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -33,6 +34,27 @@ export default class SCard extends Vue {
    * By default, it's set to `"hover"`
    */
   @Prop({ default: CardShadow.HOVER, type: String }) readonly shadow!: string
+  /**
+   * Clickable property of the Card component which means that the user can click on the card
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
+
+  handleClick (): void {
+    if (!this.clickable) {
+      return
+    }
+    this.$emit('click')
+  }
+
+  mounted (): void {
+    this.$el.addEventListener('click', this.handleClick)
+  }
+
+  destroyed (): void {
+    this.$el.removeEventListener('click', this.handleClick)
+  }
 }
 </script>
 
@@ -42,6 +64,9 @@ export default class SCard extends Vue {
 .s-card {
   border-radius: 8px;
   border-color: $color-neutral-border;
+  &.clickable {
+    cursor: pointer;
+  }
   &:hover, &:focus {
     border-color: $color-basic-white;
   }

src/components/Dropdown/SDropdown.vue

@@ -13,6 +13,7 @@
     @click="handleClick"
     @command="handleSelect"
     @visible-change="handleVisibleChange"
+    @click.native="handleVisibleEventChange"
   >
     <span v-if="type === DropdownType.DEFAULT || splitButton">
       <slot></slot>
@@ -77,9 +78,9 @@ export default class SDropdown extends Vue {
   /**
    * A placement of the popup menu. You can use any value from `DropdownPlacement` enum.
    *
-   * By default, it's set to `"bottom-end"`
+   * By default, it's set to `"bottom"`
    */
-  @Prop({ type: String, default: DropdownPlacement.BOTTOM_END }) readonly placement!: string
+  @Prop({ type: String, default: DropdownPlacement.BOTTOM }) readonly placement!: string
   /**
    * A trigger action of the dropdown component. Can be `"hover"` or `"click"`.
    * When dropdown type is "ellipsis", `trigger = "click"`.
@@ -180,6 +181,10 @@ export default class SDropdown extends Vue {
   handleVisibleChange (isAppear: boolean): void {
     this.$emit('visible-change', isAppear)
   }
+
+  handleVisibleEventChange (event: MouseEvent): void {
+    event.stopPropagation()
+  }
 }
 </script>
 

src/stories/SCard.stories.ts

@@ -1,6 +1,6 @@
-import { text, withKnobs, select } from '@storybook/addon-knobs'
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SCard, SRow, SButton } from '../components'
+import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
 import { CardShadow } from '../components/Card'
 
 export default {
@@ -10,12 +10,21 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCard, SRow, SButton },
+  components: { SCard, SRow, SDropdown, SDropdownItem },
   template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card :shadow="shadow">
+               <s-card style="width: 80%;" :shadow="shadow" :clickable="clickable" @click="handleClick">
                  <template slot="header">
-                   <span>{{ header }}</span>
-                   <s-button type="tertiary" size="medium">Close</s-button>
+                   <div class="flex" style="justify-content: space-between; padding-right: 20px;">
+                     <span>{{ header }}</span>
+                     <s-dropdown type="ellipsis">
+                       Menu
+                       <template #menu>
+                         <s-dropdown-item>First</s-dropdown-item>
+                         <s-dropdown-item>Second</s-dropdown-item>
+                         <s-dropdown-item>Third</s-dropdown-item>
+                       </template>
+                     </s-dropdown>
+                   </div>
                  </template>
                  <div v-for="o in 4" :key="o" style="margin-bottom: 18px;">
                    {{'List item ' + o }}
@@ -28,6 +37,12 @@ export const configurable = () => ({
     },
     header: {
       default: text('Header', 'Card header')
+    },
+    clickable: {
+      default: boolean('Clickable', false)
     }
+  },
+  methods: {
+    handleClick: () => alert('Card component was clicked')
   }
 })