feat(nc-gui): add 12, 24 hrs time format option in field modal

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -341,6 +341,7 @@ const updateCdfValue = (cdf: string | null) => {
           <LazySmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
           <LazySmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
           <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
+          <LazySmartsheetColumnTimeOptions v-if="formState.uidt === UITypes.Time" v-model:value="formState" />
           <LazySmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
           <LazySmartsheetColumnDateTimeOptions v-if="formState.uidt === UITypes.DateTime" v-model:value="formState" />
           <LazySmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" v-model:value="formState" />
@@ -360,10 +361,7 @@ const updateCdfValue = (cdf: string | null) => {
           />
         </template>
       </div>
-      <div
-        v-if="formState.meta && columnToValidate.includes(formState.uidt)"
-        class="my-4 flex items-center gap-1"
-      >
+      <div v-if="formState.meta && columnToValidate.includes(formState.uidt)" class="my-4 flex items-center gap-1">
         <NcSwitch v-model:checked="formState.meta.validate" size="small" class="nc-switch">
           <div class="text-sm text-gray-800">
             {{ `${$t('msg.acceptOnlyValid', { type: `${UITypesName[formState.uidt as UITypes]}s` })}` }}

packages/nc-gui/components/smartsheet/column/TimeOptions.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value: any
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const vModel = useVModel(props, 'value', emit)
+
+// set default value
+vModel.value.meta = {
+  is12hrFormat: false,
+  ...(vModel.value.meta ?? {}),
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center gap-2 children:flex-1">
+      <a-form-item>
+        <a-radio-group v-if="vModel.meta" v-model:value="vModel.meta.is12hrFormat" class="nc-time-form-layout">
+          <a-radio :value="true">12 Hrs</a-radio>
+          <a-radio :value="false">24 Hrs</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.nc-time-form-layout) {
+  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-200 rounded-lg);
+
+  .ant-radio-wrapper {
+    @apply transition-all;
+    &.ant-radio-wrapper-checked {
+      @apply border-brand-500;
+    }
+  }
+}
+</style>