3f59597864
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
49 lines
1015 B
Vue
49 lines
1015 B
Vue
<template>
|
|
<Story title="Auto Complete">
|
|
<div class="h-[50vh]">
|
|
<HoppSmartAutoComplete placeholder="Select a header" :source="commonHeaders" :spellcheck="false"
|
|
:value="header[0].key" autofocus styles="
|
|
bg-transparent
|
|
flex
|
|
flex-1
|
|
py-1
|
|
px-4
|
|
truncate
|
|
" class="flex-1 !flex" @input="updateHeader()" />
|
|
</div>
|
|
</Story>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { HoppSmartAutoComplete } from "../components/smart"
|
|
import { ref } from "vue"
|
|
|
|
type GQLHeader = {
|
|
key: string
|
|
value: string
|
|
active: boolean
|
|
}
|
|
|
|
const header = ref<GQLHeader[]>([
|
|
{
|
|
key: "Content-Type",
|
|
value: "application/json",
|
|
active: true,
|
|
},
|
|
])
|
|
|
|
const commonHeaders = [
|
|
"Push-Policy",
|
|
"Retry-After",
|
|
"Signature",
|
|
"Signed-Headers",
|
|
"Server-Timing",
|
|
"SourceMap",
|
|
"Upgrade",
|
|
]
|
|
|
|
const updateHeader = () => {
|
|
// alert("updated")
|
|
}
|
|
</script>
|