From 6c7d33d16a776f67723009141ada363b4ea90744 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 2 Aug 2022 17:03:43 +0800
Subject: [PATCH 1/2] feat(gui-v2): SingleLineText Cell

---
 packages/nc-gui-v2/components/cell/Text.vue | 89 +++------------------
 1 file changed, 12 insertions(+), 77 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index b1de025b8d..65fac3f5bc 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,100 +1,35 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, onMounted, ref } from '#imports'
 
 interface Props {
   modelValue: any
 }
 
-const { modelValue: value } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject<boolean>('editEnabled', false)
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
 onMounted(() => {
   root.value?.focus()
 })
 
-/* export default {
-  name: 'TextCell',
-  props: {
-    value: [String, Object, Number, Boolean, Array],
+watch(
+  () => root.value,
+  (el) => {
+    el?.focus()
   },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      if (this.$listeners.cancel) {
-        $listeners.cancel = this.$listeners.cancel
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-  },
-} */
+)
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else>{{ localState }}</span>
-  <!--  v-on="parentListeners" /> -->
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="h-full w-full outline-none" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
-input,
-textarea {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-  outline: none;
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
+<style scoped></style>

From 37e45ac53a05a1e5f101a59f75203d0e7cac2884 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 13:08:15 +0800
Subject: [PATCH 2/2] refactor(gui-v2): use onSetRef

---
 packages/nc-gui-v2/components/cell/Text.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 65fac3f5bc..653842a105 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -15,20 +15,13 @@ const root = ref<HTMLInputElement>()
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
-
-watch(
-  () => root.value,
-  (el) => {
-    el?.focus()
-  },
-)
+const onSetRef = (el: HTMLInputElement) => {
+  el.focus()
+}
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
   <span v-else>{{ vModel }}</span>
 </template>