fix(nc-gui): oss shared form ui changes

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

@@ -1122,18 +1122,20 @@ useEventListener(
                             class="nc-form-field-layout !mt-2"
                             @change="updateColMeta(element)"
                           >
-                            <a-radio :value="false">Dropdown</a-radio>
-                            <a-radio :value="true">List</a-radio>
+                            <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                            <a-radio :value="true">{{ $t('general.list') }}</a-radio>
                           </a-radio-group>
                         </div>
                         <!-- Todo: Show on conditions,... -->
-                        <div class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
+                        <!-- eslint-disable vue/no-constant-condition -->
+                        <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
                           <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" />
                           <div>
                             <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
                             <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                           </div>
                         </div>
+
                         <!-- Limit options -->
                         <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
                           <div class="flex items-start gap-3">

packages/nc-gui/lang/en.json

@@ -195,7 +195,9 @@
     "restore": "Restore",
     "replace": "Replace",
     "banner": "Banner",
-    "logo": "Logo"
+    "logo": "Logo",
+    "dropdown":"Dropdown",
+    "list":"List"
   },
   "objects": {
     "day": "Day",

packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue

@@ -66,8 +66,16 @@ p {
 }
 
 .nc-form-view {
+  .nc-data-cell {
+    @apply !border-none rounded-none;
+
+    &:focus-within {
+      @apply !border-none;
+    }
+  }
+
   .nc-cell {
-    @apply bg-white dark:bg-slate-500;
+    @apply bg-white dark:bg-slate-500 appearance-none;
 
     &.nc-cell-checkbox {
       @apply color-transition !border-0;
@@ -89,7 +97,18 @@ p {
       @apply bg-white dark:bg-slate-500;
 
       &.nc-input {
-        @apply w-full rounded p-2 min-h-[40px] flex items-center;
+        @apply w-full;
+
+        &:not(.layout-list) {
+          @apply rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
+
+          & > div {
+            @apply !bg-transparent;
+          }
+        }
+        &.layout-list {
+          @apply h-auto !pl-0 !py-1 !bg-transparent !dark:bg-none;
+        }
 
         .duration-cell-wrapper {
           @apply w-full;
@@ -105,8 +124,7 @@ p {
 
         input,
         textarea,
-        &.nc-virtual-cell,
-        > div {
+        &.nc-virtual-cell {
           @apply bg-white dark:(bg-slate-500 text-white);
 
           .ant-btn {
@@ -117,6 +135,18 @@ p {
             @apply dark:(bg-slate-700 text-white);
           }
         }
+        &:not(.layout-list) > div {
+          @apply bg-white dark:(bg-slate-500 text-white);
+        }
+        &.layout-list > div {
+          .ant-btn {
+            @apply dark:(bg-slate-300);
+          }
+
+          .chip {
+            @apply dark:(bg-slate-700 text-white);
+          }
+        }
 
         &.nc-cell-longtext {
           @apply p-0 h-auto;
@@ -132,7 +162,7 @@ p {
           }
         }
         &:not(.nc-cell-longtext) {
-          @apply px-2 py-2;
+          @apply p-2;
         }
 
         textarea {

packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue

@@ -176,7 +176,10 @@ const onDecode = async (scannedCodeValue: string) => {
                         v-model="formState[field.title]"
                         class="nc-input truncate"
                         :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                        :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                        :class="[
+                          `nc-form-input-${field.title?.replaceAll(' ', '')}`,
+                          { 'layout-list': parseProp(field?.meta)?.isList },
+                        ]"
                         :column="field"
                         edit-enabled
                       />

packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

@@ -292,6 +292,7 @@ onMounted(() => {
                 v-else
                 v-model="formState[field.title]"
                 class="nc-input h-auto"
+                :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
                 :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
                 edit-enabled
@@ -481,33 +482,6 @@ onMounted(() => {
     @apply flex items-center justify-center gap-2 text-left;
   }
 
-  .nc-input {
-    @apply appearance-none w-full !bg-white !rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
-    &.nc-cell-rating,
-    &.nc-cell-geodata {
-      @apply !py-1;
-    }
-
-    :deep(input) {
-      @apply !px-1;
-    }
-    &.nc-cell-longtext {
-      @apply p-0 h-auto overflow-hidden;
-    }
-    &:not(.nc-cell-longtext) {
-      @apply px-2 py-2;
-      :deep(textarea) {
-        @apply !p-2;
-      }
-    }
-
-    &.nc-cell-checkbox {
-      > * {
-        @apply justify-center flex items-center;
-      }
-    }
-  }
-
   .nc-form-data-cell.nc-data-cell {
     @apply !border-none rounded-none;