48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template lang="pug">
|
|
.flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
|
|
:style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
|
|
:class="{'open-change': isOpenChange}"
|
|
)
|
|
base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
|
|
base-avatar(:size="36", v-else)
|
|
img.h-full.object-cover(:src="url + photo")
|
|
span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
|
|
base-input(
|
|
v-if="isOpenChange",
|
|
@click.stop,
|
|
type="text",
|
|
v-model:value="value.fullName",
|
|
:width-input="300",
|
|
placeholder="Фамилия Имя Отчество"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
import BaseAvatar from "@/components/base/BaseAvatar";
|
|
export default {
|
|
name: "TableCellBodyName",
|
|
components: { BaseAvatar, BaseInput },
|
|
props: {
|
|
value: Object,
|
|
avatar: String,
|
|
photo: String,
|
|
width: Number,
|
|
isOpenChange: Boolean,
|
|
avatarColor: String,
|
|
url: String,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.avatar
|
|
width: 36px
|
|
height: 36px
|
|
border-radius: 50%
|
|
background-color: var(--font-grey-color)
|
|
color: var(--font-dark-blue-color)
|
|
.open-change
|
|
padding-left: 36px
|
|
</style>
|