ShareProjectDialog.vue

<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
import avatar7 from '@images/avatars/avatar-7.png'
import avatar8 from '@images/avatars/avatar-8.png'

const props = defineProps({
  isDialogVisible: {
    type: Boolean,
    required: true,
  },
})

const emit = defineEmits(['update:isDialogVisible'])

const dialogVisibleUpdate = val => {
  emit('update:isDialogVisible', val)
}

const membersList = [
  {
    avatar: avatar1,
    name: 'Lester Palmer',
    email: 'jerrod98@gmail.com',
    permission: 'Can Edit',
  },
  {
    avatar: avatar2,
    name: 'Mattie Blair',
    email: 'prudence.boehm@yahoo.com',
    permission: 'Owner',
  },
  {
    avatar: avatar3,
    name: 'Marvin Wheeler',
    email: 'rumet@jujpejah.net',
    permission: 'Can Comment',
  },
  {
    avatar: avatar4,
    name: 'Nannie Ford',
    email: 'negza@nuv.io',
    permission: 'Can View',
  },
  {
    avatar: avatar5,
    name: 'Julian Murphy',
    email: 'lunebame@umdomgu.net',
    permission: 'Can Edit',
  },
  {
    avatar: avatar6,
    name: 'Sophie Gilbert',
    email: 'ha@sugit.gov',
    permission: 'Can View',
  },
  {
    avatar: avatar7,
    name: 'Chris Watkins',
    email: 'zokap@mak.org',
    permission: 'Can Comment',
  },
  {
    avatar: avatar8,
    name: 'Adelaide Nichols',
    email: 'ujinomu@jigo.com',
    permission: 'Can Edit',
  },
]
</script>

<template>
  <VDialog
    :model-value="props.isDialogVisible"
    max-width="900"
    @update:model-value="dialogVisibleUpdate"
  >
    <VCard class="share-project-dialog pa-sm-11 pa-3">
      <!-- 👉 dialog close btn -->
      <DialogCloseBtn
        size="default"
        variant="text"
        @click="emit('update:isDialogVisible', false)"
      />
      <VCardText class="pt-5">
        <div class="text-center mb-6">
          <h4 class="text-h4 mb-2">
            Share Project
          </h4>
          <p class="text-body-1">
            Share project with the team members
          </p>
        </div>

        <div class="mb-6">
          <h5 class="text-h5 mb-2">
            Add Members
          </h5>
          <VAutocomplete
            :items="membersList"
            item-title="name"
            item-value="name"
            density="compact"
            placeholder="Add project members..."
          >
            <template #item="{ props: listItemProp, item }">
              <VListItem v-bind="listItemProp">
                <template #prepend>
                  <VAvatar
                    :image="item.raw.avatar"
                    size="30"
                  />
                </template>
              </VListItem>
            </template>
          </VAutocomplete>
        </div>

        <h6 class="text-h6 mb-4">
          8 Members
        </h6>

        <VList class="card-list mb-6">
          <VListItem
            v-for="member in membersList"
            :key="member.name"
          >
            <template #prepend>
              <VAvatar :image="member.avatar" />
            </template>

            <VListItemTitle class="text-high-emphasis">
              {{ member.name }}
            </VListItemTitle>
            <VListItemSubtitle>
              {{ member.email }}
            </VListItemSubtitle>

            <template #append>
              <VBtn
                variant="text"
                color="secondary"
                :icon="$vuetify.display.xs"
              >
                <template v-if="!$vuetify.display.xs">
                  {{ member.permission }}
                </template>
                <VIcon
                  end
                  icon="ri-arrow-down-s-line"
                  size="16"
                  :class="$vuetify.display.xs ? 'ms-0' : ''"
                />

                <VMenu activator="parent">
                  <VList :selected="[member.permission]">
                    <VListItem
                      v-for="(item, index) in ['Owner', 'Can Edit', 'Can Comment', 'Can View']"
                      :key="index"
                      :value="item"
                    >
                      <VListItemTitle>{{ item }}</VListItemTitle>
                    </VListItem>
                  </VList>
                </VMenu>
              </VBtn>
            </template>
          </VListItem>
        </VList>

        <div class="d-flex justify-space-between align-center flex-wrap gap-3">
          <div class="text-body-1 text-high-emphasis font-weight-medium d-flex align-center">
            <VIcon
              icon="ri-group-line"
              size="20"
              class="me-2"
            />
            <span>Public to Master - ThemeSelection</span>
          </div>

          <VBtn
            variant="outlined"
            prepend-icon="ri-link"
            size="small"
          >
            Copy Project Link
          </VBtn>
        </div>
      </VCardText>
    </VCard>
  </VDialog>
</template>

<style lang="scss">
.share-project-dialog {
  .card-list {
    --v-card-list-gap: 1rem;
  }
}
</style>