feat: add font api and command

Author: twizzler

src/components/VueCommand.vue

@@ -4,7 +4,8 @@
     :class="{
       'vue-command': !invert,
       'vue-command--invert': invert
-    }">
+    }"
+    :style="font ? { 'font-family': font } : {}">
     <!-- Bar -->
     <slot
       v-if="!hideBar"
@@ -270,6 +271,12 @@ const props = defineProps({
     default: '',
     required: false,
     type: String
+  },
+
+  font: {
+    default: undefined,
+    required: false,
+    type: String
   }
 })
 
@@ -299,7 +306,8 @@ const local = reactive({
   historyPosition: props.historyPosition,
   isFullscreen: props.isFullscreen,
   prompt: props.prompt,
-  query: props.query
+  query: props.query,
+  font: props.font
 })
 // Signals like SIGINT or SIGKILL
 const signals = reactive(newEventBus())
@@ -312,7 +320,8 @@ const terminal = computed(() => ({
   invert: props.invert,
   isFullscreen: local.isFullscreen,
   prompt: local.prompt,
-  query: local.query
+  query: local.query,
+  font: local.font
 }))
 
 // Provided commands as programs. It takes the keys of the commands object

src/components/VueCommandQuery.vue

@@ -18,6 +18,7 @@
         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()"
@@ -500,7 +501,6 @@ defineExpose({
   .vue-command__multiline-query--invert {
     display: flex;
 
-    input::placeholder,
     input {
       font: 1rem Consolas,
         Monaco,

src/hosted/App.vue

@@ -29,7 +29,8 @@
             :prompt="prompt"
             :options-resolver="optionsResolver"
             :show-help="showHelp"
-            :title="title" />
+            :title="title"
+            :font="font" />
         </div>
 
         <div class="table-responsive">
@@ -202,6 +203,7 @@ export default {
     const query = ref('')
     const showHelp = ref(true)
     const title = ref('bash - 720x350')
+    const font = ref('')
 
     const optionsResolver = (program, parsedQuery, setQuery) => {
       const lastArgument = parsedQuery[parsedQuery.length - 1]
@@ -260,6 +262,18 @@ export default {
         return createStdout('Hello world')
       },
 
+      changefont: parsedQuery => {
+        const joinedQuery = parsedQuery.join(' ')
+        const regex = /(["'])(.*?)\1/
+        const match = joinedQuery.match(regex)
+        if (match) {
+          font.value = match[2]
+          return createQuery()
+        }
+
+        return createStdout('No quotes found')
+      },
+
       history: () => {
         const history = []
         for (const [index, entry] of [...dispatchedQueries.value].entries()) {
@@ -297,6 +311,7 @@ export default {
       query,
       showHelp,
       title,
+      font,
 
       optionsResolver
     }