|
|
|
@ -6,13 +6,13 @@
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="text">{{ text }}</span>
|
|
|
|
<span class="text">{{ text }}</span>
|
|
|
|
<span class="close-icon" @click="deleteChip">
|
|
|
|
<span class="close-icon" @click="deleteChip">
|
|
|
|
<CloseIcon :size="16" />
|
|
|
|
<CloseIcon :size="18" />
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import CloseIcon from 'vue-material-design-icons/CloseThick.vue'
|
|
|
|
import CloseIcon from 'vue-material-design-icons/Close.vue'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'SearchFilterChip',
|
|
|
|
name: 'SearchFilterChip',
|
|
|
|
@ -20,8 +20,14 @@ export default {
|
|
|
|
CloseIcon,
|
|
|
|
CloseIcon,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
text: String,
|
|
|
|
text: {
|
|
|
|
pretext: String,
|
|
|
|
type: String,
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
pretext: {
|
|
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
deleteChip() {
|
|
|
|
deleteChip() {
|
|
|
|
@ -40,8 +46,6 @@ export default {
|
|
|
|
border-radius: 20px;
|
|
|
|
border-radius: 20px;
|
|
|
|
background-color: var(--color-primary-element-light);
|
|
|
|
background-color: var(--color-primary-element-light);
|
|
|
|
margin: 2px;
|
|
|
|
margin: 2px;
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
.icon {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
@ -61,7 +65,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.close-icon {
|
|
|
|
.close-icon {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer ;
|
|
|
|
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
:hover {
|
|
|
|
filter: invert(20%);
|
|
|
|
filter: invert(20%);
|
|
|
|
|