feat: prompt slot

Author: ndabAP

README.md

@@ -224,6 +224,19 @@ and `title` property have no effect. Example:
 </vue-command>
 ```
 
+### Prompt
+
+You can overwrite the prompt with the prompt slot. If you use this slot,
+`hidePrompt` and `prompt` property have no effect. Example:
+
+```vue
+<vue-command>
+  <template #prompt>
+    ~$
+  </template>
+</vue-command>
+```
+
 ## Library
 
 Library provides helper methods to render terminal related content.
@@ -292,6 +305,7 @@ import { listFormatter } from "vue-command";
 | `setQuery`           | `Function` | `query`                          |
 | `showHelp`           | `Boolean`  |                                  |
 | `signals`            | `Object`   |                                  |
+| `slots`              | `Object`   |                                  |
 | `terminal`           | `Object`   |                                  |
 
 Provider can be injected into your component by name:
@@ -349,6 +363,9 @@ to subscribe to the signal.
 signals.off("SIGINT", sigint);
 ```
 
+The libraries query component makes usage of that and allows to cancel a query
+with `SIGIN`.
+
 ## Nice-to-haves
 
 These features didn't make it into the last release. If you would like to

src/components/VueCommand.vue

@@ -104,7 +104,8 @@ import {
   computed,
   onMounted,
   nextTick,
-  getCurrentInstance
+  getCurrentInstance,
+  useSlots
 } from 'vue'
 import {
   createCommandNotFound,
@@ -132,6 +133,8 @@ import {
   lt
 } from 'lodash'
 
+const slots = useSlots()
+
 const props = defineProps({
   commands: {
     default: () => ({}),
@@ -526,17 +529,17 @@ provide('helpText', props.helpText)
 provide('helpTimeout', props.helpTimeout)
 provide('hidePrompt', props.hidePrompt)
 provide('incrementHistory', incrementHistory)
-provide('invert', props.invert)
 provide('optionsResolver', props.optionsResolver)
 provide('parser', props.parser)
 provide('programs', programs)
 provide('sendSignal', sendSignal)
 provide('setCursorPosition', setCursorPosition)
 provide('setFullscreen', setFullscreen)
 provide('setHistoryPosition', setHistoryPosition)
+provide('setQuery', setQuery)
 provide('showHelp', props.showHelp)
 provide('signals', signals)
-provide('setQuery', setQuery)
+provide('slots', slots)
 provide('terminal', terminal)
 
 defineExpose({

src/components/VueCommandQuery.vue

@@ -3,27 +3,16 @@
     <!-- Query -->
     <div
       v-show="shouldShowQuery"
-      :class="{
-        'vue-command__query': !invert,
-        'vue-command__query--invert': invert
-      }">
-      <span
-        v-if="!hidePrompt"
-        :class="{
-          'vue-command__query__prompt': !invert,
-          'vue-command__query__prompt--invert': invert
-        }">
-        {{ local.prompt }}
-      </span>
-
-      <!-- TODO Make textarea to enforce word break -->
+      class="vue-command__query">
+      <!-- Prompt -->
+      <VueCommandPrompt />
+
+      <!-- Query -->
+      <!-- TODO Convert to textarea to enforce word breaks -->
       <input
         ref="queryRef"
         v-model="local.query"
-        :class="{
-          'vue-command__query__input': !invert,
-          'vue-command__query__input--invert': invert
-        }"
+        class="vue-command__query__input"
         :disabled="isOutdatedQuery"
         :placeholder="placeholder"
         autocapitalize="none"
@@ -43,21 +32,12 @@
       v-for="(multilineQuery, index) in multilineQueries"
       v-show="isBeforeReverseISearch(index)"
       :key="index"
-      :class="{
-        'vue-command__multiline-query': !invert,
-        'vue-command__multiline-query--invert': invert
-      }">
+      class="vue-command__multiline-query">
       <span
-        :class="{
-          'vue-command__multiline-query__prompt': !invert,
-          'vue-command__multiline-query__prompt--invert': invert
-        }">></span>
+        class="vue-command__multiline-query__prompt">></span>
       <input
         ref="multilineQueryRefs"
-        :class="{
-          'vue-command__multiline-query__input': !invert,
-          'vue-command__multiline-query__input--invert': invert
-        }"
+        class="vue-command__multiline-query__input"
         :disabled="isOutdatedMultilineQuery(index)"
         :value="multilineQuery"
         autocapitalize="none"
@@ -75,21 +55,12 @@
     <!-- Reverse I search -->
     <div
       v-if="isReverseISearch"
-      :class="{
-        'vue-command__reverse-i-search': !invert,
-        'vue-command__reverse-i-search--invert': invert
-      }">
+      class="vue-command__reverse-i-search">
       <span
-        :class="{
-          'vue-command__reverse-i-search-status': !invert,
-          'vue-command__reverse-i-search-status--invert': invert
-        }">({{ reverseISearchStatus }})`</span><input
+        class="vue-command__reverse-i-search-status">({{ reverseISearchStatus }})`</span><input
         ref="reverseISearchRef"
         v-model="reverseISearch"
-        :class="{
-          'vue-command__reverse-i-search__input': !invert,
-          'vue-command__reverse-i-search__input--invert': invert
-        }"
+        class="vue-command__reverse-i-search__input"
         :disabled="isOutdated"
         autocapitalize="none"
         autocorrect="off"
@@ -116,7 +87,9 @@ import {
   onBeforeUnmount,
   reactive,
   nextTick,
-  computed
+  computed,
+  Fragment,
+  h
 } from 'vue'
 import {
   and,
@@ -140,13 +113,13 @@ import {
   set,
   trimStart,
   lt,
-  join
+  join,
+  isUndefined
 } from 'lodash'
 
 const appendToHistory = inject('appendToHistory')
 const dispatch = inject('dispatch')
 const hidePrompt = inject('hidePrompt')
-const invert = inject('invert')
 const helpText = inject('helpText')
 const helpTimeout = inject('helpTimeout')
 const optionsResolver = inject('optionsResolver')
@@ -156,6 +129,7 @@ const setCursorPosition = inject('setCursorPosition')
 const setQuery = inject('setQuery')
 const showHelp = inject('showHelp')
 const signals = inject('signals')
+const slots = inject('slots')
 const terminal = inject('terminal')
 
 // Indicates if the query, including multiline queries and reverse I search, is
@@ -169,6 +143,23 @@ const reverseISearchRef = ref(null)
 const reverseISearchStatus = ref('reverse-i-search')
 const queryRef = ref(null)
 
+// Prompt slot with fallback
+const VueCommandPrompt = computed(() => {
+  if (hidePrompt) {
+    return h(Fragment)
+  }
+
+  // Render prompt slot if given
+  if (!isUndefined(slots.prompt)) {
+    return h(Fragment, slots.prompt())
+  }
+
+  // Show default prompt slot
+  return h(Fragment, h('span', {
+    class: 'vue-command__query__prompt'
+  }, terminal.value.prompt))
+})
+
 const local = reactive({
   prompt: terminal.value.prompt,
   query: ''