feat(nc-gui): list option for single & multiselect field

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

@@ -353,9 +353,48 @@ const onFocus = () => {
 <template>
   <div
     class="nc-cell-field nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly }"
+    :class="{ 'read-only': readOnly, readOnly, 'max-w-full': isForm }"
     @click="toggleMenu"
   >
+    <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
+      <a-checkbox-group v-model:value="vModel" class="nc-field-layout-list">
+        <a-checkbox
+          v-for="op of options"
+          :key="op.title"
+          :value="op.title"
+          :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
+          :class="`nc-select-option-${column.title}-${op.title}`"
+        >
+          <a-tag class="rounded-tag max-w-full" :color="op.color">
+            <span
+              :style="{
+                'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                  ? '#fff'
+                  : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+                'font-size': '13px',
+              }"
+            >
+              <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                <template #title>
+                  {{ op.title }}
+                </template>
+                <span
+                  class="text-ellipsis overflow-hidden"
+                  :style="{
+                    wordBreak: 'keep-all',
+                    whiteSpace: 'nowrap',
+                    display: 'inline',
+                  }"
+                >
+                  {{ op.title }}
+                </span>
+              </NcTooltip>
+            </span>
+          </a-tag>
+        </a-checkbox>
+      </a-checkbox-group>
+    </div>
+    <template v-else>
       <div
         v-if="!active"
         class="flex flex-wrap"
@@ -501,6 +540,7 @@ const onFocus = () => {
           </a-tag>
         </template>
       </a-select>
+    </template>
   </div>
 </template>
 
@@ -570,6 +610,31 @@ const onFocus = () => {
 :deep(.ant-select-selection-search-input) {
   @apply !text-xs;
 }
+
+.nc-field-layout-list {
+  @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
+
+  :deep(.ant-checkbox-wrapper) {
+    @apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
+
+    &:hover {
+      .ant-checkbox-checked:after {
+        @apply !rounded;
+      }
+    }
+    .ant-checkbox {
+      @apply !top-0;
+
+      & + span {
+        @apply !flex !pl-4 max-w-[calc(100%_-_16px)];
+      }
+      .ant-checkbox-checked:after,
+      .ant-checkbox-inner {
+        @apply !rounded;
+      }
+    }
+  }
+}
 </style>
 
 <style lang="scss">

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

@@ -276,7 +276,7 @@ const onFocus = () => {
     @click="toggleMenu"
     @keydown.enter.stop.prevent="toggleMenu"
   >
-    <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="max-w-full">
+    <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
       <a-radio-group v-model:value="vModel" class="nc-field-layout-list">
         <a-radio
           v-for="op of options"

packages/nc-gui/components/smartsheet/Form.vue

@@ -1502,7 +1502,7 @@ useEventListener(
     @apply !bg-white rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
   }
   &.layout-list {
-    @apply h-auto !pl-0;
+    @apply h-auto !pl-0 !py-1;
   }
   &.nc-cell-rating,
   &.nc-cell-geodata {