45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<template lang="pug">
|
|
.flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
|
|
:style="{ width : width + 'px'}",
|
|
)
|
|
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}}
|
|
.name(v-if="isOpenChange")
|
|
base-input(
|
|
@click.stop,
|
|
v-model="value.fullName",
|
|
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)
|
|
.name
|
|
width: 300px
|
|
</style>
|