nocodb/packages/nc-gui/components/roles/Selector.vue

<script lang="ts" setup>
import { RoleDescriptions } from 'nocodb-sdk'
import type { RoleLabels } from 'nocodb-sdk'
import type { SelectValue } from 'ant-design-vue/es/select'
import { toRef } from '#imports'

const props = withDefaults(
  defineProps<{
    role: keyof typeof RoleLabels
    roles: (keyof typeof RoleLabels)[]
    description?: boolean
    inherit?: string
    onRoleChange: (role: keyof typeof RoleLabels) => void
    size: 'sm' | 'md' | 'lg'
  }>(),
  {
    description: true,
    size: 'sm',
  },
)

const roleRef = toRef(props, 'role')
const inheritRef = toRef(props, 'inherit')
const descriptionRef = toRef(props, 'description')
const isDropdownOpen = ref(false)
const dropdownRef = ref(null)
const sizeRef = toRef(props, 'size')

onClickOutside(dropdownRef, () => (isDropdownOpen.value = false))

function onChangeRole(val: SelectValue) {
  props.onRoleChange(val as keyof typeof RoleLabels)
  isDropdownOpen.value = false
}
</script>

<template>
  <div ref="dropdownRef" size="lg" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" :size="sizeRef" clickable />
    <a-select
      v-model:value="roleRef"
      :open="isDropdownOpen"
      :dropdown-match-select-width="false"
      dropdown-class-name="!rounded-lg !h-fit max-w-[350px] nc-role-selector-dropdown"
      class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
      @change="onChangeRole"
    >
      <a-select-option v-for="rl in props.roles" :key="rl" v-e="['c:workspace:settings:user-role-change']" :value="rl">
        <div
          :class="{
            'w-full': descriptionRef,
            'w-[200px]': !descriptionRef,
          }"
          class="flex flex-col nc-role-select-dropdown gap-1"
        >
          <div class="flex items-center justify-between">
            <RolesBadge :class="`nc-role-select-${rl}`" :role="rl" :inherit="inheritRef === rl" :border="false" />
            <GeneralIcon v-if="rl === roleRef" icon="check" class="text-primary" />
          </div>
          <div v-if="descriptionRef" class="text-gray-500 text-xs">{{ RoleDescriptions[rl] }}</div>
        </div>
      </a-select-option>
    </a-select>
  </div>
</template>

<style lang="scss">
.ant-select-item-option-content {
  white-space: normal; /* Change from 'nowrap' to 'normal' */
}
.nc-role-selector-dropdown {
  .rc-virtual-list-holder {
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-track-piece {
      width: 0px;
    }
    &::-webkit-scrollbar {
      @apply bg-transparent;
    }
    &::-webkit-scrollbar-thumb {
      width: 4px;
      @apply bg-gray-200 rounded-md;
    }
    &::-webkit-scrollbar-thumb:hover {
      @apply bg-gray-300;
    }
  }
}
</style>