feat(gui-v2): integer cell

packages/nc-gui-v2/components/cell/Integer.vue

@@ -3,34 +3,36 @@ interface Props {
   modelValue: number
 }
 
-const { modelValue: value } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', model: number): void
+}
+
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits<Emits>()
 
 const editEnabled = inject<boolean>('editEnabled')
 
 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()
 })
+
+function onKeyDown(evt: KeyboardEvent) {
+  return evt.key === '.' && evt.preventDefault()
+}
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" type="number" />
-  <span v-else>{{ localState }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" type="number" @keydown="onKeyDown" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
 input {
-  outline: none;
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
+  @apply outline-none w-full h-full;
 }
 </style>