feat(Experimental/Select): custom selected icon placement

gitsindonesia · Sep 4, 2023 · cbf6c47 · cbf6c47
1 parent ea551d3
commit cbf6c47
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/select/src/Select.stories.ts b/packages/select/src/Select.stories.ts
@@ -103,6 +103,11 @@ Clearable.args = {
   clearable: true,
 };
 
+export const SelectedIconPlacementRight = Template.bind({});
+SelectedIconPlacementRight.args = {
+  selectedIconPlacement: 'right',
+};
+
 export const WrapperClass = Template.bind({});
 WrapperClass.args = {
   wrapperClass: 'border-b-2 border-error-500 rounded-b-lg',

diff --git a/packages/select/src/Select.vue b/packages/select/src/Select.vue
@@ -74,6 +74,7 @@ const props = withDefaults(
     searchSuffixIconSize?: string;
     searchSuffixIconClass?: string;
     wrapperClass?: string;
+    selectedIconPlacement?: 'left' | 'right';
   }>(),
   {
     itemText: 'text',
@@ -96,6 +97,7 @@ const props = withDefaults(
     clearIcon: 'heroicons:x-mark',
     searchPrefixIconSize: 'sm',
     searchSuffixIconSize: 'sm',
+    selectedIconPlacement: 'right',
   },
 );
 
@@ -431,6 +433,8 @@ defineSlots<{
                   :class="{
                     'v-select-option--active': active,
                     'v-select-option--selected': selected,
+                    'v-select-option--icon-left': selectedIconPlacement === 'left',
+                    'v-select-option--icon-right': selectedIconPlacement === 'right',
                   }"
                 >
                   <div

diff --git a/packages/themes/src/morpheme/_select.scss b/packages/themes/src/morpheme/_select.scss
@@ -280,6 +280,10 @@
         height: 1.25rem /* 20px */;
       }
     }
+
+    &--icon-right {
+      flex-direction: row-reverse;
+    }
   }
 
   &-searchable {