mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-11-04 13:07:55 +00:00 
			
		
		
		
	These fixes are all auto generated and can be merged directly Fixes the following issues 1. Event used on components should be hypenated 2. Attribute orders in components 3. Use `unmounted` instead of `destroyed` 4. Add explicit `emits` declarations for components, autofixed [using this script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf) We ignore the top level v-if for now, we will fix it later
		
			
				
	
	
		
			75 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			75 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<script>
 | 
						|
import { mapGetters } from 'vuex';
 | 
						|
 | 
						|
export default {
 | 
						|
  components: {},
 | 
						|
  props: {
 | 
						|
    action: {
 | 
						|
      type: Object,
 | 
						|
      default: () => {},
 | 
						|
    },
 | 
						|
    isSelected: {
 | 
						|
      type: Boolean,
 | 
						|
      default: false,
 | 
						|
    },
 | 
						|
  },
 | 
						|
  emits: ['optionSelect'],
 | 
						|
  computed: {
 | 
						|
    ...mapGetters({
 | 
						|
      widgetColor: 'appConfig/getWidgetColor',
 | 
						|
    }),
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    onClick() {
 | 
						|
      this.$emit('optionSelect', this.action);
 | 
						|
    },
 | 
						|
  },
 | 
						|
};
 | 
						|
</script>
 | 
						|
 | 
						|
<template>
 | 
						|
  <li
 | 
						|
    class="option"
 | 
						|
    :class="{ 'is-selected': isSelected }"
 | 
						|
    :style="{ borderColor: widgetColor }"
 | 
						|
  >
 | 
						|
    <button class="option-button button" @click="onClick">
 | 
						|
      <span :style="{ color: widgetColor }">{{ action.title }}</span>
 | 
						|
    </button>
 | 
						|
  </li>
 | 
						|
</template>
 | 
						|
 | 
						|
<style scoped lang="scss">
 | 
						|
@import 'widget/assets/scss/variables.scss';
 | 
						|
 | 
						|
.option {
 | 
						|
  border-radius: $space-jumbo;
 | 
						|
  border: 1px solid $color-woot;
 | 
						|
  float: left;
 | 
						|
  margin: $space-smaller;
 | 
						|
  max-width: 100%;
 | 
						|
 | 
						|
  .option-button {
 | 
						|
    background: transparent;
 | 
						|
    border-radius: $space-large;
 | 
						|
    border: 0;
 | 
						|
    cursor: pointer;
 | 
						|
    height: auto;
 | 
						|
    line-height: 1.5;
 | 
						|
    min-height: $space-two * 2;
 | 
						|
    text-align: left;
 | 
						|
    white-space: normal;
 | 
						|
 | 
						|
    span {
 | 
						|
      display: inline-block;
 | 
						|
      vertical-align: middle;
 | 
						|
    }
 | 
						|
 | 
						|
    > .icon {
 | 
						|
      margin-right: $space-smaller;
 | 
						|
      font-size: $font-size-medium;
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 |