File size: 1,783 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<script lang="ts">
import { computed, defineComponent, provide, reactive } from 'vue'
const statusIcons = {
danger: 'error',
warning: 'warning',
info: 'info',
success: 'check_circle',
} as const
export default defineComponent({
props: {
subtitle: {
type: String,
default: undefined,
},
subtitleIcon: {
type: String,
default: undefined,
},
statusIcon: {
type: Boolean,
default: false,
},
title: {
type: String,
default: undefined,
},
},
setup(props) {
const injectedData = reactive({
focused: false,
status: null,
})
provide('VueFormField', {
data: injectedData,
})
const subtitleIconId = computed(() => {
if (props.subtitleIcon) {
return props.subtitleIcon
}
if (props.statusIcon) {
const status = injectedData.status
if (status) {
return statusIcons[status]
}
}
return ''
})
return {
injectedData,
subtitleIconId,
}
},
})
</script>
<template>
<div
class="vue-ui-form-field"
:class="{
focused: injectedData.focused,
[`status-${injectedData.status}`]: injectedData.status,
}"
>
<div class="wrapper">
<div class="title">
<slot name="title">
<span v-html="title" />
</slot>
</div>
<div class="content">
<slot />
</div>
<div
class="subtitle"
:class="{
[`vue-ui-text ${injectedData.status}`]: injectedData.status,
}"
>
<VueIcon v-if="subtitleIconId" :icon="subtitleIconId" />
<slot name="subtitle">
<span v-html="subtitle" />
</slot>
</div>
</div>
</div>
</template>
|