feat: ProgressBar component (vue-terminal#14)

feat: `ProgressBar` component

Author: webfansplz

packages/core/src/components/ProgressBar.ts

@@ -0,0 +1,73 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  onUpdated,
+  onUnmounted,
+  computed,
+} from '@vue/runtime-core'
+import type { PropType } from '@vue/runtime-core'
+import { colorize } from '../renderer/textColor'
+import type { ForegroundColorProp } from '../renderer/textColor'
+import { scheduleUpdateSymbol } from '../injectionSymbols'
+
+const FIGURES = {
+  basic: '█',
+  shade: '▓',
+} as const
+
+type FigureType = keyof typeof FIGURES
+
+export const TuiProgressBar = defineComponent({
+  name: 'TuiProgressBar',
+
+  props: {
+    color: {
+      required: false,
+      default: 'blue',
+      type: String as PropType<ForegroundColorProp>,
+    },
+    bgColor: {
+      required: false,
+      default: 'white',
+      type: String as PropType<ForegroundColorProp>,
+    },
+    width: {
+      required: false,
+      default: 25,
+      type: Number,
+    },
+    value: {
+      required: true,
+      type: Number,
+    },
+    type: {
+      required: false,
+      type: String as PropType<FigureType>,
+      default: 'basic',
+    },
+  },
+
+  setup(props) {
+    const scheduleUpdate = inject(scheduleUpdateSymbol)!
+
+    onMounted(scheduleUpdate)
+
+    onUpdated(scheduleUpdate)
+
+    onUnmounted(scheduleUpdate)
+
+    const content = computed(() => {
+      const type = FIGURES[props.type]
+      const w = Math.floor(props.value * (props.width / 100))
+      const bg = colorize(type, props.bgColor, 'foreground')
+      const fg = colorize(type, props.color, 'foreground')
+      return fg.repeat(w) + bg.repeat(props.width - w)
+    })
+
+    return () => {
+      return h('tui:text', content.value)
+    }
+  },
+})

packages/core/src/components/index.ts

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

packages/core/src/index.ts

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

packages/core/src/renderer/textColor.ts

@@ -1,6 +1,9 @@
 import chalk from 'chalk'
-
+import type { ForegroundColor } from 'chalk'
 type ColorType = 'foreground' | 'background'
+import type { LiteralUnion } from '../utils'
+
+export type ForegroundColorProp = LiteralUnion<ForegroundColor, string>
 
 const RGB_LIKE_REGEX = /^(rgb|hsl|hsv|hwb)\(\s?(\d+),\s?(\d+),\s?(\d+)\s?\)$/
 const ANSI_REGEX = /^(ansi|ansi256)\(\s?(\d+)\s?\)$/

packages/playground/components.d.ts

@@ -11,6 +11,8 @@ declare module '@vue/runtime-core' {
     Br: typeof import('vue-termui')['TuiNewline']
     Div: typeof import('vue-termui')['TuiBox']
     Link: typeof import('vue-termui')['TuiLink']
+    Newline: typeof import('vue-termui')['TuiNewline']
+    Progressbar: typeof import('vue-termui')['TuiProgressBar']
     Span: typeof import('vue-termui')['TuiText']
     Text: typeof import('vue-termui')['TuiText']
   }

packages/playground/src/ProgressBarDemo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const progress = ref(50)
+useInterval(() => {
+  progress.value < 100 && progress.value++
+}, 0)
+</script>
+
+<template>
+  <Text>
+    <Newline :n="2" />
+    <ProgressBar :value="progress" color="green" :width="12" />
+    <Newline :n="2" />
+    <ProgressBar :value="progress" color="yellow" />
+    <Newline :n="2" />
+    <ProgressBar :value="progress" color="blue" :width="50" />
+    <Newline :n="2" />
+  </Text>
+</template>

packages/playground/src/main.ts

@@ -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 './ProgressBarDemo.vue'
 
 createApp(App, {
   // swapScreens: true,

packages/vite-plugin-vue-termui/src/index.ts

@@ -174,6 +174,8 @@ export const VueTuiComponents = new Map<string, ModuleExports>([
 
   ['transform', 'TuiTextTransform'],
   ['text-transform', 'TuiTextTransform'],
+
+  ['progressbar', 'TuiProgressBar'],
 ])
 
 // copied from auto import plugin source code