Browse Source

feat: wrap MultiSelect tags based on row-height

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/5849/head
mertmit 1 year ago
parent
commit
7bdb7dc361
  1. 18
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 2
      packages/nc-gui/components/cell/SingleSelect.vue
  3. 2
      packages/nc-gui/components/smartsheet/Grid.vue

18
packages/nc-gui/components/cell/MultiSelect.vue

@ -10,6 +10,7 @@ import {
ColumnInj,
IsKanbanInj,
ReadonlyInj,
RowHeightInj,
computed,
enumColor,
extractSdkResponseErrorMsg,
@ -52,6 +53,11 @@ const isPublic = inject(IsPublicInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const rowHeight = inject(
RowHeightInj,
computed(() => undefined),
)
const selectedIds = ref<string[]>([])
const aselect = ref<typeof AntSelect>()
@ -327,7 +333,17 @@ const selectedOpts = computed(() => {
<template>
<div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
<div v-if="!editable && !active" class="flex flex-nowrap">
<div
v-if="!editable && !active"
class="flex flex-wrap"
:style="{
'display': '-webkit-box',
'max-width': '100%',
'-webkit-line-clamp': rowHeight || 1,
'-webkit-box-orient': 'vertical',
'overflow': 'hidden',
}"
>
<template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
<a-tag class="rounded-tag" :color="selectedOpt.color" :style="{ order: selectedOpt.index }">
<span

2
packages/nc-gui/components/cell/SingleSelect.vue

@ -326,7 +326,7 @@ const selectedOpt = computed(() => {
}
:deep(.ant-tag) {
@apply "rounded-tag";
@apply "rounded-tag" my-[2px];
}
:deep(.ant-select-clear) {

2
packages/nc-gui/components/smartsheet/Grid.vue

@ -922,7 +922,7 @@ function addEmptyRow(row?: number) {
<template #default="{ state }">
<tr
class="nc-grid-row"
:style="{ height: rowHeight ? `${rowHeight * 1.5}rem` : `1.5rem` }"
:style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
:data-testid="`grid-row-${rowIndex}`"
>
<td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">

Loading…
Cancel
Save