feat: match autocomplete component to related plugin (#36)

shuriken-ui · Aug 7, 2023 · f665f46 · f665f46
1 parent 9514e39
commit f665f46
Show file tree

Hide file tree

Showing 2 changed files with 197 additions and 116 deletions.
diff --git a/.playground/pages/tests/form/autocomplete.vue b/.playground/pages/tests/form/autocomplete.vue
@@ -5,6 +5,8 @@ definePageMeta({
   description: 'SVG icons',
   section: 'form',
 })
+
+const items = ref<any[]>(['Javascript', 'Vue.js', 'React.js', 'Angular'])
 </script>
 
 <template>
@@ -13,8 +15,97 @@ definePageMeta({
   >
     <div>
       <BaseHeading size="xl" weight="medium" class="mb-10">
-        Autocomplete
+        Autocomplete shape
+      </BaseHeading>
+      <div class="grid grid-cols-5 gap-4">
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="straight"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="rounded"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="smooth"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="curved"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="full"
+          label-float
+          clearable
+          multiple
+        />
+      </div>
+    </div>
+    <div>
+      <BaseHeading size="xl" weight="medium" class="mb-10">
+        Autocomplete Size
       </BaseHeading>
+      <div class="grid grid-cols-3 gap-4">
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          size="sm"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          size="md"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          size="lg"
+          label-float
+          clearable
+          multiple
+        />
+      </div>
     </div>
   </div>
 </template>