chore: merged with 2023.12.0

histoire.config.ts

@@ -3,18 +3,16 @@ import { defineConfig } from "histoire"
 
 export default defineConfig({
   theme: {
-    title: "Hoppscotch • UI",
+    title: "Hoppscotch Design • Hoppscotch",
     logo: {
-      square: "/logo.png",
-      light: "/logo.png",
-      dark: "/logo.png",
+      square: "/logo.svg",
+      light: "/logo.svg",
+      dark: "/logo.svg",
     },
-    logoHref: "https://ui.hoppscotch.io",
-    favicon: 'favicon.ico',
+    logoHref: "/",
+    favicon: "favicon.ico",
   },
   setupFile: "histoire.setup.ts",
   plugins: [HstVue()],
-  viteIgnorePlugins: [
-    'vite:dts'
-  ]
+  viteIgnorePlugins: ["vite:dts"],
 })

package.json

@@ -101,10 +101,6 @@
     ".": "./dist/index.js",
     "./style.css": "./dist/style.css",
     "./themes.scss": "./dist/themes.scss",
-    "./postcss.config": {
-      "import": "./postcss.config.cjs",
-      "require": "./postcss.config.cjs"
-    },
     "./ui-preset": {
       "import": "./dist/ui-preset.js",
       "require": "./dist/ui-preset.js"

src/components/smart/AutoComplete.vue

@@ -3,7 +3,7 @@
     <input
       ref="acInput"
       v-model="text"
-      type="text"
+      :type="type"
       autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue"
+import { onMounted, ref, computed, watch } from "vue"
 
 const acInput = ref<HTMLInputElement>()
 
@@ -67,6 +67,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  type: {
+    type: String,
+    default: "text",
+  },
 })
 
 const emit = defineEmits<{
@@ -85,14 +90,21 @@ onMounted(() => {
   })
 })
 
+watch(
+  () => props.value,
+  (newValue) => {
+    text.value = newValue
+  },
+)
+
 const suggestions = computed(() => {
   const input = text.value.substring(0, selectionStart.value)
   return (
     props.source
       .filter(
         (entry) =>
           entry.toLowerCase().startsWith(input.toLowerCase()) &&
-          input.toLowerCase() !== entry.toLowerCase()
+          input.toLowerCase() !== entry.toLowerCase(),
       )
       // We only want the top 10 suggestions.
       .slice(0, 10)
@@ -155,8 +167,8 @@ function handleKeystroke(event: any) {
       if (currentSuggestionIndex.value > -1)
         forceSuggestion(
           suggestions.value.find(
-            (_item, index) => index === currentSuggestionIndex.value
-          )!
+            (_item, index) => index === currentSuggestionIndex.value,
+          )!,
         )
       break
 
@@ -196,15 +208,15 @@ function handleKeystroke(event: any) {
     @apply shadow-lg;
     @apply max-h-46;
     @apply overflow-y-auto;
-    @apply border-b border-x border-divider;
+    @apply border-x border-b border-divider;
 
     top: calc(100% + 1px);
     border-radius: 0 0 8px 8px;
 
     li {
       @apply w-full;
       @apply block;
-      @apply py-2 px-4;
+      @apply px-4 py-2;
       @apply text-secondary;
       @apply font-semibold;
 

src/components/smart/FileChip.vue

@@ -1,6 +1,12 @@
 <template>
-  <span class="inline-flex items-center justify-center rounded pl-2 pr-0.5 bg-primaryDark">
-    <icon-lucide-file class="opacity-75 svg-icons" />
-    <span class="px-2 truncate max-w-54"><slot></slot></span>
+  <span
+    class="inline-flex items-center justify-center space-x-1 rounded bg-primaryDark px-2"
+  >
+    <IconLucideFile class="svg-icons opacity-75" />
+    <span class="max-w-54 truncate"><slot></slot></span>
   </span>
 </template>
+
+<script setup lang="ts">
+import IconLucideFile from "~icons/lucide/file"
+</script>