feature/disable-function-in-components (#405)

* feat: added disable functionality * feat: added initial sort * chore: added validation to not emit an event when is the initial sort
Adapcon · Mar 14, 2024 · e7d7d27 · e7d7d27
1 parent 6f4d1d5
commit e7d7d27
Show file tree

Hide file tree

Showing 13 changed files with 197 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-polar-bear",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "author": "adapcon",
   "scripts": {
     "storybook": "start-storybook --quiet -p 6006 -s ./src/static",

diff --git a/src/components/DataVisualization/Chips/Chips.stories.mdx b/src/components/DataVisualization/Chips/Chips.stories.mdx
@@ -30,6 +30,10 @@ import PbChips from './Chips.vue';
     },
     defaultValue: 'secondary',
   },
+  disabled: {
+    type: 'boolean',
+    defaultValue: false,
+  },
   chips: {
     type: 'array',
     defaultValue: [
@@ -63,6 +67,7 @@ export const Template = (args, { argTypes }) => ({
       :showClearButton="showClearButton"
       :clearButtonStyle="clearButtonStyle"
       :color="color"
+      :disabled="disabled"
     />
   `
 });

diff --git a/src/components/DataVisualization/Chips/Chips.vue b/src/components/DataVisualization/Chips/Chips.vue
@@ -1,9 +1,15 @@
 <template>
-  <ul v-if="chips.length" class="chips-wrapper">
+  <ul 
+    v-if="chips.length"
+    class="chips-wrapper"
+  >
     <li
       v-for="(chip, index) of chips"
       :key="`${chip.title}||${index}`"
       :style="chipsStyleHandler"
+      :class="{
+        'chips-disabled': disabled
+      }"
       @click="removeChip(index)"
     >
       <small class="pb">
@@ -13,7 +19,14 @@
       <PbIcon icon="fas fa-times fa-xs" style="margin-left: 10px" />
     </li>
 
-    <li v-if="showClearButton" :style="clearButtonStyleHandler" @click="clearChips()">
+    <li
+      v-if="showClearButton"
+      :style="clearButtonStyleHandler"
+      :class="{
+        'chips-disabled': disabled
+      }"
+      @click="clearChips()"
+    >
       <small class="pb">
         <b>Limpar Todos</b>
       </small>
@@ -61,6 +74,11 @@ export default {
       default: 'secondary',
       validator: color => ['primary', 'secondary', 'white'].includes(color),
     },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -75,6 +93,8 @@ export default {
 
   methods: {
     removeChip(index) {
+      if (this.disabled) return;
+
       const newChips = this.copyChips();
       const removedChips = newChips.splice(index, 1);
 
@@ -83,6 +103,8 @@ export default {
     },
 
     clearChips() {
+      if (this.disabled) return;
+
       const newChips = this.copyChips();
       const removedChips = newChips.splice(0);
 
@@ -131,34 +153,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .chips-wrapper {
-    list-style: none;
-    user-select: none;
-    margin: 0;
-    padding: 0;
+.chips-wrapper {
+  list-style: none;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+  position: relative;
+
+  li {
     display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    width: 100%;
-    position: relative;
-
-    li {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      margin: 4px;
-      padding: 2px 14px;
-      border-radius: 40px;
-      cursor: pointer;
-      max-width: 100%;
-
-      small {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
+    flex-wrap: nowrap;
+    align-items: center;
+    margin: 4px;
+    padding: 2px 14px;
+    border-radius: 40px;
+    cursor: pointer;
+    max-width: 100%;
+
+    small {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
+
   }
+}
+
+.chips-disabled {
+  opacity: 0.5;
+  cursor: not-allowed !important;
+}
 </style>