feat: Input component

Author: webfansplz

packages/core/src/components/Input.ts

@@ -0,0 +1,144 @@
+import { defineComponent, h, ref, computed, PropType } from '@vue/runtime-core'
+import chalk from 'chalk'
+import { TuiText } from './Text'
+import { onInputData } from '../composables/input'
+import type { KeyDataEvent } from '../input/types'
+
+const SKIP_EVENT_KEY = ['ArrowUp', 'ArrowDown', 'Ctrl', 'Tab', 'Shift']
+const PWD_FIGURE = '*'
+
+export const TuiInput = defineComponent({
+  props: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    cursor: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String as PropType<'text' | 'password'>,
+      required: false,
+      default: 'text',
+    },
+  },
+  emits: ['update:modelValue', 'change', 'submit'],
+  setup(props, { emit }) {
+    const cursorOffset = ref(props.modelValue.length)
+    const exited = ref(false)
+    const content = computed(() => {
+      if (props.cursor && !exited.value) {
+        if (props.modelValue) {
+          if (
+            props.modelValue &&
+            props.modelValue.length <= cursorOffset.value
+          ) {
+            return (
+              (props.type === 'text'
+                ? props.modelValue
+                : PWD_FIGURE.repeat(props.modelValue.length)) +
+              chalk.inverse(' ')
+            )
+          }
+
+          const l = props.modelValue.slice(0, cursorOffset.value)
+          const m = chalk.inverse(props.modelValue[cursorOffset.value])
+          const r = props.modelValue.slice(cursorOffset.value + 1)
+
+          return props.type === 'text'
+            ? l + m + r
+            : PWD_FIGURE.repeat(l.length) +
+                chalk.inverse(PWD_FIGURE) +
+                PWD_FIGURE.repeat(r.length)
+        } else {
+          return props.placeholder ? '' : chalk.inverse(' ')
+        }
+      } else {
+        const value = props.modelValue
+        return props.type === 'text' ? value : PWD_FIGURE.repeat(value.length)
+      }
+    })
+
+    function updateCursorOffset(type: '-' | '+') {
+      if (type === '-') {
+        cursorOffset.value = Math.max(0, cursorOffset.value - 1)
+      } else {
+        cursorOffset.value = Math.min(
+          cursorOffset.value + 1,
+          +props.modelValue.length + 1
+        )
+      }
+    }
+
+    function updateValue(value: string) {
+      emit('change', value)
+      emit('update:modelValue', value)
+    }
+
+    const stop = onInputData(({ data, event }) => {
+      const eventKey = (<KeyDataEvent>event!).key
+      if (SKIP_EVENT_KEY.includes(eventKey) || !eventKey) return
+
+      // Submit
+      if (eventKey === 'Enter') {
+        stop()
+        exited.value = true
+        emit('submit', props.modelValue)
+        return
+      }
+
+      // Move cursor
+      if (props.cursor && eventKey === 'ArrowLeft') {
+        updateCursorOffset('-')
+      } else if (props.cursor && eventKey === 'ArrowRight') {
+        updateCursorOffset('+')
+      }
+      // Delete Content
+      else if (eventKey === 'Backspace' || eventKey === 'Delete') {
+        if (!props.cursor) {
+          updateValue(props.modelValue.slice(0, -1))
+        } else if (props.cursor && cursorOffset.value > 0) {
+          updateValue(
+            props.modelValue.slice(0, cursorOffset.value - 1) +
+              props.modelValue.slice(cursorOffset.value)
+          )
+          updateCursorOffset('-')
+        }
+      }
+      // Typing Content
+      else {
+        updateValue(
+          props.cursor
+            ? props.modelValue.slice(0, cursorOffset.value) +
+                data +
+                props.modelValue.slice(cursorOffset.value)
+            : props.modelValue + data
+        )
+        updateCursorOffset('+')
+        if (props.cursor && cursorOffset.value === props.modelValue.length) {
+          updateCursorOffset('+')
+        }
+      }
+    })
+
+    return () =>
+      h(TuiText, () =>
+        props.placeholder && !props.modelValue
+          ? h(
+              TuiText,
+              {
+                dimmed: true,
+              },
+              () => props.placeholder
+            )
+          : h(TuiText, () => content.value)
+      )
+  },
+})

packages/core/src/components/Input.vue

@@ -3,6 +3,7 @@ export { TuiTextTransform } from './TextTransform'
 export { TuiNewline } from './Newline'
 export { TuiApp } from './App'
 export { TuiBox } from './Box'
+export { TuiInput } from './Input'
 
 export { TuiLink } from './Link'
 // export { default as TuiInput } from './Input.vue'

packages/core/src/components/index.ts

@@ -7,6 +7,7 @@ export {
   TuiNewline,
   TuiLink,
   TuiTextTransform,
+  TuiInput,
 } from './components'
 
 export { render } from './renderer'

packages/core/src/index.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     Box: typeof import('vue-termui')['TuiBox']
     Br: typeof import('vue-termui')['TuiNewline']
     Div: typeof import('vue-termui')['TuiBox']
+    Input: typeof import('vue-termui')['TuiInput']
     Link: typeof import('vue-termui')['TuiLink']
     Span: typeof import('vue-termui')['TuiText']
     Text: typeof import('vue-termui')['TuiText']

packages/playground/components.d.ts

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const value = ref('')
+const visible = ref(false)
+function submit() {
+  visible.value = true
+}
+</script>
+
+<template borderStyle="round">
+  <Input
+    v-model="value"
+    placeholder="Hello World"
+    @submit="submit"
+    type="password"
+  />
+  <Text v-if="visible">Value:{{ value }}</Text>
+</template>

packages/playground/src/InputDemo.vue

@@ -1,12 +1,13 @@
 // import devtools from '@vue/devtools'
 // import devtools from '@vue/devtools/node'
 import { createApp } from 'vue-termui'
-import App from './Focusables.vue'
+// import App from './Focusables.vue'
 // import App from './Fragments.vue'
 // import App from './CenteredDemo.vue'
 // import App from './App.vue'
 // import App from './Counter.vue'
 // import App from './Borders.vue'
+import App from './InputDemo.vue'
 
 createApp(App, {
   // swapScreens: true,

packages/playground/src/main.ts

@@ -172,6 +172,8 @@ export const VueTuiComponents = new Map<string, ModuleExports>([
   ['div', 'TuiBox'],
   ['box', 'TuiBox'],
 
+  ['input', 'TuiInput'],
+
   ['transform', 'TuiTextTransform'],
   ['text-transform', 'TuiTextTransform'],
 ])