feat/mcu: improved wip

app/components/pub/my-ui/data/camuflage-input.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const model = defineModel<string>()
+const props = defineProps<{
+  class: string
+  defaultClass?: string
+  disabled?: boolean
+  width?: number
+  widthUnit?: string
+}>()
+
+const InputComp = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+const activeState = ref(false)
+
+let defaultClass = props.defaultClass ?? 'h-8 xl:h-9'
+let widthStyle = '';
+if(props.width) {
+  widthStyle = `width: ${props.width}${props.widthUnit ?? 'px'};`
+} else {
+  widthStyle = `width: 100%;`
+}
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+
+watch(activeState, () => {
+  nextTick(() => {
+    if (asyncInputRef.value && typeof asyncInputRef.value.focus === 'function') {
+        asyncInputRef.value.focus()
+      }
+  })
+
+    //   document.getElementById('editable-div')?.scrollIntoView({ behavior: 'smooth' })
+    InputComp.value.focus()
+    // console.log(inputComp.__defaults)
+})
+</script>
+
+<template>
+  <div
+    v-if="!activeState || disabled" @click="() => activeState = true"
+    :class="`${defaultClass}`"
+    :style="widthStyle">
+    {{ model }}
+  </div>
+  <InputComp v-else 
+    v-model="model"
+    :class="`${defaultClass}`"
+    :style="widthStyle"
+    @blur="() => activeState = false"
+  />
+  <!-- {{ inputComp.value }} -->
+  <!-- <Input
+    v-else v-model="model" @blur="() => activeState = false"
+    :class="`${defaultClass}`"
+    :style="widthStyle"
+    autofocus
+  /> -->
+</template>