fix: set font

Author: ndabAP

README.md

@@ -129,6 +129,7 @@ directive is required.
 | `cursor-position`    | Cursor position                             | `Number`   | `0`                       | No       | Yes             |
 | `dispatched-queries` | Non-empty dispatched queries                | `Set`      | `new Set()`               | No       | Yes             |
 | `event-resolver`     | See [Event resolver](#event-resolver)       | `Function` | `newDefaultEventResolver` | No       | No              |
+| `font`               | Terminal font                               | `String`   | `''`                      | No       | No              |
 | `help-text`          | Command help                                | `String`   | `''`                      | No       | Yes             |
 | `help-timeout`       | Command help timeout                        | `Number`   | `3000`                    | No       | No              |
 | `hide-bar`           | Hides the bar                               | `Boolean`  | `false`                   | No       | No              |
@@ -246,6 +247,7 @@ Library provides helper methods to render terminal related content.
 | Function                      | Parameters                                                         | Description                           |
 | ----------------------------- | ------------------------------------------------------------------ | ------------------------------------- |
 | `createCommandNotFound`       | `command, text = 'command not found', name = 'VueCommandNotFound'` | Creates a command not found component |
+| `createStderr`                | `formatterOrText, name = 'VueCommandStderr'`                       | Creates a "stderr" component          |
 | `createStdout`                | `formatterOrText, name = 'VueCommandStdout'`                       | Creates a "stdout" component          |
 | `createQuery`                 |                                                                    | Creates a query component             |
 | `defaultHistoryEventResolver` | `refs, eventProvider`                                              | The default history event resolver    |

src/components/VueCommand.vue

@@ -166,6 +166,12 @@ const props = defineProps({
     type: Array
   },
 
+  font: {
+    default: '',
+    required: false,
+    type: String
+  },
+
   helpText: {
     default: null,
     required: false,
@@ -271,12 +277,6 @@ const props = defineProps({
     default: '',
     required: false,
     type: String
-  },
-
-  font: {
-    default: undefined,
-    required: false,
-    type: String
   }
 })
 
@@ -306,22 +306,21 @@ const local = reactive({
   historyPosition: props.historyPosition,
   isFullscreen: props.isFullscreen,
   prompt: props.prompt,
-  query: props.query,
-  font: props.font
+  query: props.query
 })
 // Signals like SIGINT or SIGKILL
 const signals = reactive(newEventBus())
 // Reactive terminal state
 const terminal = computed(() => ({
   cursorPosition: local.cursorPosition,
   dispatchedQueries: local.dispatchedQueries,
+  font: props.font,
   history: local.history,
   historyPosition: local.historyPosition,
   invert: props.invert,
   isFullscreen: local.isFullscreen,
   prompt: local.prompt,
-  query: local.query,
-  font: local.font
+  query: local.query
 }))
 
 // Provided commands as programs. It takes the keys of the commands object
@@ -378,7 +377,7 @@ const appendToHistory = (...components) => {
 // Parses the query, looks for a user given command and appends the resulting
 // component to the history
 const dispatch = async query => {
-  // Call given interpreter to execute arbitrary code, if given
+  // Call optional interpreter to execute arbitrary code
   if (isFunction(props.interpreter)) {
     props.interpreter(query)
     return
@@ -413,7 +412,7 @@ const dispatch = async query => {
   // instantly to history
   // TODO Find a better way to find out the name
   if (eq(get(command, '__name'), 'VueCommandQuery')) {
-    appendToHistory(command)
+    exit()
     return
   }
 
@@ -435,9 +434,9 @@ const dispatch = async query => {
   })
   appendToHistory(markRaw(component))
 }
-// Tear down component and execute final steps
+// Tear down component, execute final steps and return a new query
 const exit = () => {
-  // TODO Does order matter?
+  // TODO: Does order matter?
   appendToHistory(createQuery())
   setCursorPosition(0)
   setFullscreen(false)
@@ -522,7 +521,7 @@ onMounted(() => {
 
   // Scroll to bottom if history changes
   const resizeObsever = new ResizeObserver(() => {
-    // TODO Only scroll to bottom if user scrolled to bottom before
+    // TODO: Only scroll to bottom if user scrolled to bottom before
     vueCommandHistoryRef.value.scrollTop = vueCommandHistoryRef.value.scrollHeight
   })
   for (const vueCommandHistoryEntry of vueCommandHistoryRef.value.children) {

src/components/VueCommandQuery.vue

@@ -8,17 +8,17 @@
       <VueCommandPrompt />
 
       <!-- Query -->
-      <!-- TODO Convert to textarea to enforce word breaks -->
+      <!-- TODO: Implement line breaks -->
       <input
         ref="queryRef"
         v-model="local.query"
         class="vue-command__query__input"
         :disabled="isOutdatedQuery"
         :placeholder="placeholder"
+        :style="queryStyle"
         autocapitalize="none"
         autocorrect="off"
         type="text"
-        :style="terminal.font ? { 'font': `1rem ${terminal.font}`} : {}"
         @click="setCursorPosition($refs.queryRef.selectionStart)"
         @keydown.tab.exact.prevent="autocompleteQuery"
         @keydown.ctrl.r.exact.prevent="showReverseISearch()"
@@ -40,6 +40,7 @@
         ref="multilineQueryRefs"
         class="vue-command__multiline-query__input"
         :disabled="isOutdatedMultilineQuery(index)"
+        :style="queryStyle"
         :value="multilineQuery"
         autocapitalize="none"
         autocorrect="off"
@@ -63,6 +64,7 @@
         v-model="reverseISearch"
         class="vue-command__reverse-i-search__input"
         :disabled="isOutdated"
+        :style="queryStyle"
         autocapitalize="none"
         autocorrect="off"
         type="text"
@@ -163,9 +165,17 @@ const VueCommandPrompt = computed(() => {
     class: 'vue-command__query__prompt'
   }, prompt))
 })
+const queryStyle = computed(() => {
+  if (!isEmpty(terminal.value.font)) {
+    return {
+      font: `1rem ${terminal.value.font}`
+    }
+  }
+
+  return {}
+})
 
 const local = reactive({
-  prompt: terminal.value.prompt,
   query: ''
 })
 // Entered with "\"