1<!-- Copyright (C) 2020 The Android Open Source Project
2
3     Licensed under the Apache License, Version 2.0 (the "License");
4     you may not use this file except in compliance with the License.
5     You may obtain a copy of the License at
6
7          http://www.apache.org/licenses/LICENSE-2.0
8
9     Unless required by applicable law or agreed to in writing, software
10     distributed under the License is distributed on an "AS IS" BASIS,
11     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12     See the License for the specific language governing permissions and
13     limitations under the License.
14-->
15
16<template>
17  <md-menu-item
18    :class="optionClasses"
19    :disabled="isDisabled" @click="setSelection"
20  >
21    <md-checkbox
22      class="md-primary"
23      v-model="isChecked"
24      v-if="MdSelect.multiple"
25      :disabled="isDisabled"
26    />
27
28    <div class="item">
29      <i class="material-icons" v-if="icon">
30        {{ icon }}
31      </i>
32      <span class="value">
33        {{ displayValue || value }}
34      </span>
35      <span class="material-icons help-icon">
36        help_outline
37        <md-tooltip md-direction="right">{{ desc }}</md-tooltip>
38      </span>
39    </div>
40  </md-menu-item>
41</template>
42
43<script>
44export default {
45  name: 'MdIconOption',
46  props: {
47    // Serves as key for option (should be unique within an MdSelect)
48    // Also serves as the backup to displayValue if null
49    value: [String, Number, Boolean],
50    // Value shown to describe an option in dropdown selection
51    displayValue: [String, Number, Boolean],
52    // If present, this is shown to represent item when dropdown is collapsed
53    shortValue: [String, Number, Boolean],
54    icon: String,
55    desc: String,
56    disabled: Boolean,
57  },
58  inject: {
59    MdSelect: {},
60    MdOptgroup: {
61      default: {},
62    },
63  },
64  data: () => ({
65    isSelected: false,
66    isChecked: false,
67  }),
68  computed: {
69    selectValue() {
70      return this.MdSelect.modelValue;
71    },
72    isMultiple() {
73      return this.MdSelect.multiple;
74    },
75    isDisabled() {
76      return this.MdOptgroup.disabled || this.disabled;
77    },
78    key() {
79      return this.value;
80    },
81    inputLabel() {
82      return this.MdSelect.label;
83    },
84    optionClasses() {
85      return {
86        'md-selected': this.isSelected || this.isChecked,
87      };
88    },
89  },
90  watch: {
91    selectValue() {
92      this.setIsSelected();
93    },
94    isChecked(val) {
95      if (val === this.isSelected) {
96        return;
97      }
98      this.setSelection();
99    },
100    isSelected(val) {
101      this.isChecked = val;
102    },
103  },
104  methods: {
105    getTextContent() {
106      return this.shortValue || this.displayValue || this.value;
107    },
108    setIsSelected() {
109      if (!this.isMultiple) {
110        this.isSelected = this.selectValue === this.value;
111        return;
112      }
113      if (this.selectValue === undefined) {
114        this.isSelected = false;
115        return;
116      }
117      this.isSelected = this.selectValue.includes(this.value);
118    },
119    setSingleSelection() {
120      this.MdSelect.setValue(this.value);
121    },
122    setMultipleSelection() {
123      this.MdSelect.setMultipleValue(this.value);
124    },
125    setSelection() {
126      if (!this.isDisabled) {
127        if (this.isMultiple) {
128          this.setMultipleSelection();
129        } else {
130          this.setSingleSelection();
131        }
132      }
133    },
134    setItem() {
135      this.$set(this.MdSelect.items, this.key, this.getTextContent());
136    },
137  },
138  updated() {
139    this.setItem();
140  },
141  created() {
142    this.setItem();
143    this.setIsSelected();
144  },
145};
146</script>
147
148<style scoped>
149.item {
150  display: inline-flex;
151  align-items: center;
152  width: 100%;
153  flex: 1;
154}
155
156.item .value {
157  flex-grow: 1;
158  margin: 0 10px;
159}
160
161.item .help-icon {
162  font-size: 15px;
163}
164</style>
165