feat: migrate checkbox cell

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/editable-cell/Boolean.vue

@@ -1,5 +1,38 @@
-<script>
-export default {
+<script setup lang="ts">
+
+import { ColumnType } from "nocodb-sdk";
+import { computed } from "vue";
+
+const column = inject<ColumnType & { meta?: any }>("column");
+const isForm =inject<boolean>('isForm')
+
+const { modelValue:value } = defineProps<{ modelValue: any }>()
+const emit = defineEmits(["update:modelValue"]);
+
+const checkboxMeta = computed(() => {
+  return {
+    icon: {
+      checked: "mdi-check-circle-outline",
+      unchecked: "mdi-checkbox-blank-circle-outline"
+    },
+    color: "primary",
+    // ...(column?.meta || {})
+  };
+});
+const localState = $computed({
+  get() {
+    return value;
+  }, set(val) {
+    emit("update:modelValue", val);
+  }
+});
+
+const toggle = () =>  {
+  localState = !localState
+}
+
+
+/*export default {
   name: 'BooleanCell',
   props: {
     column: Object,
@@ -42,11 +75,12 @@ export default {
       this.localState = !this.localState
     },
   },
-}
+}*/
 </script>
 
 <template>
-  <div class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }">
+  <div
+    class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }">
     <v-icon small :color="checkboxMeta.color" @click="toggle">
       {{ localState ? checkedIcon : uncheckedIcon }}
     </v-icon>

packages/nc-gui-v2/components/smartsheet/EditableCell.vue

@@ -55,122 +55,149 @@ const {
           v-on="$listeners"
         /> -->
 
-    <RatingCell
-      v-else-if="isRating"
-      v-model="localState"
-      :active="active"
-      :is-form="isForm"
-      :column="column"
-      :is-public-grid="isPublic && !isForm"
-      :is-public-form="isPublic && isForm"
-      :is-locked="isLocked"
-      v-on="$listeners"
-    />
-
-    <DurationCell
-      v-else-if="isDuration"
-      v-model="localState"
-      :active="active"
-      :is-form="isForm"
-      :column="column"
-      :is-locked="isLocked"
-      v-on="parentListeners"
-    />
-
-    <BooleanCell
-      v-else-if="isBoolean"
-      v-model="localState"
-      :column="column"
-      :is-form="isForm"
-      v-on="parentListeners"
-    />
+    <!--    <RatingCell -->
+    <!--      v-if="isRating" -->
+    <!--      /> -->
+    <!--      v-model="localState"
+          :active="active"
+          :is-form="isForm"
+          :column="column"
+          :is-public-grid="isPublic && !isForm"
+          :is-public-form="isPublic && isForm"
+          :is-locked="isLocked"
+          v-on="$listeners"
+        /> -->
 
-    <IntegerCell
-      v-else-if="isInt"
-      v-model="localState"
-      v-on="parentListeners"
-    />
+    <!--    <DurationCell -->
+    <!--      v-else-if="isDuration" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      :active="active" -->
+    <!--      :is-form="isForm" -->
+    <!--      :column="column" -->
+    <!--      :is-locked="isLocked" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
 
-    <FloatCell
-      v-else-if="isFloat"
-      v-model="localState"
-      v-on="parentListeners"
-    />
 
-    <DatePickerCell
-      v-else-if="isDate"
-      v-model="localState"
-      v-on="parentListeners"
-    />
 
-    <TimePickerCell
-      v-else-if="isTime"
-      v-model="localState"
-      v-on="parentListeners"
-      @save="$emit('save')"
-    />
+    <!--    <IntegerCell -->
+    <!--      v-else-if="isInt" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
 
-    <DateTimePickerCell
-      v-else-if="isDateTime"
-      v-model="localState"
-      ignore-focus
-      v-on="parentListeners"
-    />
+    <!--    <FloatCell -->
+    <!--      v-else-if="isFloat" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
 
-    <EnumCell
-      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))"
-      v-model="localState"
-      :column="column"
-      v-on="parentListeners"
-    />
-    <EnumListCell
-      v-else-if="isEnum"
-      v-model="localState"
-      :is-form="isForm"
-      :column="column"
-      v-on="parentListeners"
-    />
+    <!--    <DatePickerCell -->
+    <!--      v-else-if="isDate" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
 
-    <JsonEditableCell
-      v-else-if="isJSON"
-      v-model="localState"
-      :is-form="isForm"
-      v-on="parentListeners"
-      @input="$emit('save')"
-    />
+    <!--    <TimePickerCell -->
+    <!--      v-else-if="isTime" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      v-on="parentListeners" -->
+    <!--      @save="$emit('save')" -->
+    <!--    />&ndash;&gt; -->
 
-    <SetListEditableCell
-      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)"
-      v-model="localState"
-      :column="column"
-      v-on="parentListeners"
-    />
-    <SetListCell
-      v-else-if="isSet"
-      v-model="localState"
-      :column="column"
-      v-on="parentListeners"
-    />
+    <!--    <DateTimePickerCell -->
+    <!--      v-else-if="isDateTime" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      ignore-focus -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
 
-    <EditableUrlCell v-else-if="isURL" v-model="localState" v-on="parentListeners" />
+    <!--    <EnumCell -->
+    <!--      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      :column="column" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
+    <!--    <EnumListCell -->
+    <!--      v-else-if="isEnum" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState"&ndash;&gt; -->
+    <!-- &lt;!&ndash;      :is-form="isForm"&ndash;&gt; -->
+    <!-- &lt;!&ndash;      :column="column"&ndash;&gt; -->
+    <!-- &lt;!&ndash;      v-on="parentListeners"&ndash;&gt; -->
+    <!-- &lt;!&ndash;    />&ndash;&gt; -->
+
+    <!--    <JsonEditableCell -->
+    <!--      v-else-if="isJSON" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      :is-form="isForm" -->
+    <!--      v-on="parentListeners" -->
+    <!--      @input="$emit('save')" -->
+    <!--    />&ndash;&gt; -->
+
+    <!--    <SetListEditableCell -->
+    <!--      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      :column="column" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
+    <!--    <SetListCell -->
+    <!--      v-else-if="isSet" -->
+    <!--      /> -->
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      :column="column" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
+
+    <!--    <EditableUrlCell v-else-if="isURL" -->
+    <!--                     /> -->
+    <!-- &lt;!&ndash;                     v-model="localState" v-on="parentListeners" &ndash;&gt; -->
+    <!-- &lt;!&ndash;    />&ndash;&gt; -->
+
+    <EditableCellText v-if="isString" v-model="localState" />
+    <!-- v-on="parentListeners"
+        />
+    -->
+
+    <EditableCellTextArea v-else-if="isTextArea" v-model="localState" />
+    <!--      v-model="localState"
+          :is-form="isForm"
+          v-on="parentListeners"
+        /> -->
 
-    <TextCell v-else-if="isString" v-model="localState" v-on="parentListeners" />
 
-    <TextAreaCell
-      v-else-if="isTextArea"
+    <EditableCellBoolean
+      v-else-if="isBoolean"
       v-model="localState"
-      :is-form="isForm"
-      v-on="parentListeners"
     />
+    <!-- &lt;!&ndash;      v-model="localState" -->
+    <!--      :column="column" -->
+    <!--      :is-form="isForm" -->
+    <!--      v-on="parentListeners" -->
+    <!--    />&ndash;&gt; -->
 
-    <TextCell v-else v-model="localState" v-on="$listeners" />
-    <span v-if="hint" class="nc-hint">{{ hint }}</span>
 
-    <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" />
+    <EditableCellText v-else v-model="localState" />
+    <!--  v-on="$listeners"   <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
+
+    <!--    <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
   </div>
 </template>
 
 <style scoped>
+textarea {
+  outline: none;
+}
+
 div {
   width: 100%;
   height: 100%;

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

@@ -13,6 +13,9 @@ const isPublicView = false;
 const selected = reactive<{ row?: number | null; col?: number | null }>({});
 const editEnabled = ref(false);
 
+provide('isForm', false)
+provide('isGrid', true)
+
 const { loadData, paginationData, formattedData: data } = useViewData(meta);
 
 onMounted(() => loadData({}));