feat(v-collapsible): add new hideIcon prop

gitsindonesia · Apr 8, 2022 · 3a8944c · 3a8944c
1 parent 3e28328
commit 3a8944c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/collapsible/src/VCollapsible.stories.ts b/packages/collapsible/src/VCollapsible.stories.ts
@@ -1,6 +1,6 @@
 import {Story} from '@storybook/vue3';
 import {ref} from 'vue';
-import MyCollapse from './VCollapse.vue';
+// import MyCollapse from './VCollapse.vue';
 import MyCollapsible from './VCollapsible.vue';
 import MyCollapsibleGroup from './VCollapsibleGroup.vue';
 
@@ -9,6 +9,7 @@ export default {
   component: MyCollapsible,
   args: {
     modelValue: false,
+    hideIcon: false,
     title: 'Title',
     headerClass: 'font-semibold',
     activeClass: '',
@@ -43,6 +44,11 @@ AutoOpen.args = {
   modelValue: true,
 };
 
+export const HideIcon = Template.bind({});
+HideIcon.args = {
+  hideIcon: true,
+};
+
 export const CustomClasses = Template.bind({});
 CustomClasses.args = {
   headerClass: '',
@@ -66,7 +72,7 @@ CustomClasses.args = {
 //   </MyCollapsible>`,
 // });
 
-export const Accordion = (args) => ({
+export const Accordion: Story = (args) => ({
   components: {MyCollapsibleGroup, MyCollapsible},
   setup() {
     const items = Array.from({length: 5}, (v, k) => ({

diff --git a/packages/collapsible/src/VCollapsible.vue b/packages/collapsible/src/VCollapsible.vue
@@ -40,6 +40,10 @@ const props = defineProps({
     type: String,
     default: 'px-4 pb-4',
   },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {
@@ -99,6 +103,7 @@ watch(isOpen, (value) => {
 
       <slot name="icon">
         <ChevronDownIcon
+          v-if="!hideIcon"
           class="w-5 h-5 transform transition duration-300"
           :class="[isOpen ? 'rotate-180' : '']"
         />