feat(Autocomplete): add shadow prop and fix disabled styles

gitsindonesia · May 23, 2023 · 4260db5 · 4260db5
1 parent 1b12e8a
commit 4260db5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/packages/autocomplete/src/VAutocomplete.stories.ts b/packages/autocomplete/src/VAutocomplete.stories.ts
@@ -5,7 +5,6 @@ import VAutocomplete from './VAutocomplete.vue';
 import VBtn from '@morpheme/button';
 import {Story} from '@storybook/vue3';
 
-
 const items = [
   {value: 1, text: 'Wade Cooper'},
   {value: 2, text: 'Arlene Mccoy'},
@@ -39,6 +38,11 @@ const Template: Story = (args) => ({
 export const Default = Template.bind({});
 Default.args = {};
 
+export const Shadow = Template.bind({});
+Shadow.args = {
+  shadow: true,
+};
+
 export const Clearable = Template.bind({});
 Clearable.args = {
   clearable: true,

diff --git a/packages/autocomplete/src/VAutocomplete.vue b/packages/autocomplete/src/VAutocomplete.vue
@@ -37,6 +37,7 @@ export type Props = {
   disabled?: boolean
   hideError?: boolean
   hint?: string
+  shadow?: boolean
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -97,6 +98,7 @@ const clear = () => {
         'autocomplete--error': !!errorMessage,
         'autocomplete--selected': !!uncontrolledValue,
         'autocomplete--disabled': disabled,
+        'autocomplete--shadow': shadow,
       },
     ]"
     as="div"

diff --git a/packages/themes/src/morpheme/_autocomplete.scss b/packages/themes/src/morpheme/_autocomplete.scss
@@ -51,7 +51,8 @@
   --v-autocomplete-error-color: var(--color-base-error-300);
 
   // disabled
-  --v-autocomplete-input-disabled-color: var(--v-input-disabled-bg-color);
+  --v-autocomplete-input-disabled-bg-color: var(--v-input-disabled-bg-color);
+  --v-autocomplete-input-disabled-border-color: var(--v-input-disabled-border-color);
 
   // hint
   --v-autocomplete-hint-font-size: var(--v-input-hint-font-size, 14px);
@@ -65,6 +66,21 @@
 
 .autocomplete {
   position: relative;
+  border-radius: var(--border-radius-lg);
+
+  $c: &;
+
+  &--disabled {
+    #{$c}-input {
+      cursor: not-allowed;
+      background-color: var(--v-autocomplete-input-disabled-bg-color);
+      border-color: var(--v-autocomplete-input-disabled-border-color);
+    }
+  }
+
+  &--shadow {
+    box-shadow: var(--effect-shadow-md);
+  }
 
   &-label {
     color: var(--v-input-label-color);