From b0418183f9a080b0db26eaf37180d9206d283c00 Mon Sep 17 00:00:00 2001
From: sajjad <talkhabisajad10@gmail.com>
Date: Wed, 3 Nov 2021 15:59:52 +0330
Subject: [PATCH] create chip component

---
 src/components/AddProduct/Main.vue            | 13 ++++----
 src/components/AddProgram/Main.vue            | 13 ++++----
 src/components/AddWorkout/Main.vue            | 15 +++++----
 .../Bookmarks/Programs/Programs.vue           | 22 ++++++-------
 .../Bookmarks/Workouts/Workouts.vue           | 15 ++++-----
 src/components/Global/Chip/Chip.vue           | 31 +++++++++++++++++++
 src/components/Programs/Item.vue              | 22 ++++++-------
 src/components/TrainPrograms/Item.vue         | 30 +++++++++---------
 src/components/Workouts/Item.vue              | 11 +++----
 src/utils/GlobalComponents.js                 |  4 ++-
 10 files changed, 100 insertions(+), 76 deletions(-)
 create mode 100644 src/components/Global/Chip/Chip.vue

diff --git a/src/components/AddProduct/Main.vue b/src/components/AddProduct/Main.vue
index 52d633a..b058027 100644
--- a/src/components/AddProduct/Main.vue
+++ b/src/components/AddProduct/Main.vue
@@ -164,17 +164,16 @@
                   small-chips
                   dark
                 >
-                  <template #selection="{ item, select }">
-                    <v-chip
+                  <template #selection="{ item }">
+                    <Chip
                       label
-                      small
                       color="white"
                       text-color="black"
+                      sm
+                      @close="removeTags(item)"
+                      :text="item"
                       close
-                      @click="select"
-                      @click:close="removeTags(item)"
-                      >{{ item }}</v-chip
-                    >
+                    />
                   </template>
                 </v-combobox>
               </v-col>
diff --git a/src/components/AddProgram/Main.vue b/src/components/AddProgram/Main.vue
index 283bb5c..e81b8b0 100644
--- a/src/components/AddProgram/Main.vue
+++ b/src/components/AddProgram/Main.vue
@@ -77,17 +77,16 @@
                   small-chips
                   dark
                 >
-                  <template #selection="{ item, select }">
-                    <v-chip
+                  <template #selection="{ item }">
+                    <Chip
                       label
-                      small
                       color="white"
                       text-color="black"
+                      sm
+                      @close="removeTags(item)"
+                      :text="item"
                       close
-                      @click="select"
-                      @click:close="removeTags(item)"
-                      >{{ item }}</v-chip
-                    >
+                    />
                   </template>
                 </v-combobox>
               </v-col>
diff --git a/src/components/AddWorkout/Main.vue b/src/components/AddWorkout/Main.vue
index 7e6ea2c..dd1f8b8 100644
--- a/src/components/AddWorkout/Main.vue
+++ b/src/components/AddWorkout/Main.vue
@@ -135,17 +135,16 @@
                   small-chips
                   dark
                 >
-                  <template #selection="{ item, select }">
-                    <v-chip
+                  <template #selection="{ item }">
+                    <Chip
                       label
-                      small
                       color="white"
                       text-color="black"
+                      sm
+                      @close="removeTags(item)"
+                      :text="item"
                       close
-                      @click="select"
-                      @click:close="removeTags(item)"
-                      >{{ item }}</v-chip
-                    >
+                    />
                   </template>
                 </v-combobox>
               </v-col>
@@ -249,7 +248,7 @@ export default {
     this.loadSportCategories();
     if (this.workoutId) {
       this.load();
-    } 
+    }
   },
 };
 </script>
diff --git a/src/components/Bookmarks/Programs/Programs.vue b/src/components/Bookmarks/Programs/Programs.vue
index c73b1ef..db4c294 100644
--- a/src/components/Bookmarks/Programs/Programs.vue
+++ b/src/components/Bookmarks/Programs/Programs.vue
@@ -21,24 +21,22 @@
       {{ program.bookmark_data.description }}
     </div>
     <div>
-      <v-chip
-        label
+      <Chip
         color="gray"
         text-color="black"
-        class="mr-1 text-uppercase"
-        x-small
-      >
-        {{ program.bookmark_data.series_count }} series
-      </v-chip>
-      <v-chip
+        xs
         label
+        class="mr-1 text-uppercase"
+        :text="`${program.bookmark_data.series_count} series`"
+      />
+      <Chip
         color="gray"
         text-color="black"
+        xs
+        label
         class="mr-1 text-uppercase"
-        x-small
-      >
-        {{ program.bookmark_data.workouts_count }} workout
-      </v-chip>
+        :text="`${program.bookmark_data.workouts_count} workout`"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/Bookmarks/Workouts/Workouts.vue b/src/components/Bookmarks/Workouts/Workouts.vue
index f22f134..7b5f5be 100644
--- a/src/components/Bookmarks/Workouts/Workouts.vue
+++ b/src/components/Bookmarks/Workouts/Workouts.vue
@@ -15,22 +15,23 @@
             <div class="workout__title wa__f__m__eb text-uppercase">
               {{ workout.bookmark_data.title }}
             </div>
-            <div class="workout__description">{{ workout.bookmark_data.description }}</div>
+            <div class="workout__description">
+              {{ workout.bookmark_data.description }}
+            </div>
           </div>
           <div>
             <div class="d-flex justify-space-between align-center">
               <div>
-                <v-chip
+                <Chip
                   label
                   color="gray"
                   text-color="black"
                   class="mr-1 text-uppercase"
-                  x-small
-                  v-for="(item, i) in workout.tags"
+                  xs
+                  v-for="(item, i) in workout.bookmark_data.tags"
                   :key="i"
-                >
-                  {{ item.text }}
-                </v-chip>
+                  :text="item.name"
+                />
               </div>
               <div>
                 <RectangleButton
diff --git a/src/components/Global/Chip/Chip.vue b/src/components/Global/Chip/Chip.vue
new file mode 100644
index 0000000..c612cc8
--- /dev/null
+++ b/src/components/Global/Chip/Chip.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-chip
+    :label="label"
+    :color="color"
+    :text-color="textColor"
+    :x-small="xs"
+    :small="sm"
+    :large="lg"
+    :x-large="xl"
+    @click="$emit('click')"
+    @click:close="$emit('close')"
+    :close="close"
+  >
+    {{ text }}
+  </v-chip>
+</template>
+<script>
+export default {
+  props: {
+    text: {},
+    textColor: {},
+    color: {},
+    xs: Boolean,
+    sm: Boolean,
+    lg: Boolean,
+    xl: Boolean,
+    close: Boolean,
+    label: {},
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/Programs/Item.vue b/src/components/Programs/Item.vue
index 04ae1de..79ba4e8 100644
--- a/src/components/Programs/Item.vue
+++ b/src/components/Programs/Item.vue
@@ -51,24 +51,22 @@
     <div class="program__title">{{ program.title }}</div>
     <div class="program__sub-title">{{ program.description }}</div>
     <div>
-      <v-chip
-        label
+      <Chip
         color="gray"
         text-color="black"
-        class="mr-1 text-uppercase"
-        x-small
-      >
-        {{ program.series_count }} sets
-      </v-chip>
-      <v-chip
+        xs
         label
+        class="mr-1 text-uppercase"
+        :text="`${program.series_count} sets`"
+      />
+      <Chip
         color="gray"
         text-color="black"
+        xs
+        label
         class="mr-1 text-uppercase"
-        x-small
-      >
-        {{ program.workouts_count }} workout
-      </v-chip>
+        :text="`${program.workouts_count} workout`"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/TrainPrograms/Item.vue b/src/components/TrainPrograms/Item.vue
index e8ee177..3dce562 100644
--- a/src/components/TrainPrograms/Item.vue
+++ b/src/components/TrainPrograms/Item.vue
@@ -6,24 +6,22 @@
           <div class="program__title">{{ program.name }}</div>
           <div class="program__sub_title">{{ program.text }}</div>
           <div>
-            <v-chip
-              label
+            <Chip
               color="gray"
               text-color="black"
-              class="mr-1 text-uppercase"
-              x-small
-            >
-              {{ program.sets }} sets
-            </v-chip>
-            <v-chip
+              xs
               label
+              class="mr-1 text-uppercase"
+              :text="`${program.sets} sets`"
+            />
+            <Chip
               color="gray"
               text-color="black"
+              xs
+              label
               class="mr-1 text-uppercase"
-              x-small
-            >
-              {{ program.workout }} workout
-            </v-chip>
+              :text="`${program.workout} workout`"
+            />
           </div>
         </div>
       </v-col>
@@ -88,12 +86,12 @@ export default {
   line-height: 12px;
 }
 .not__enf {
-    color: var(--color-service);
-    background-color: #ee35514f;
+  color: var(--color-service);
+  background-color: #ee35514f;
 }
 .enf {
-    color: var(--color-cyan);
-    background-color: #32cad531;
+  color: var(--color-cyan);
+  background-color: #32cad531;
 }
 .done {
   font-size: 13px;
diff --git a/src/components/Workouts/Item.vue b/src/components/Workouts/Item.vue
index 72f218f..a4260ac 100644
--- a/src/components/Workouts/Item.vue
+++ b/src/components/Workouts/Item.vue
@@ -18,17 +18,16 @@
           <div>
             <div class="d-flex justify-space-between align-center">
               <div>
-                <v-chip
-                  label
+                <Chip
                   color="gray"
                   text-color="black"
+                  xs
+                  label
                   class="mr-1 text-uppercase"
-                  x-small
                   v-for="(item, i) in workout.tags"
                   :key="i"
-                >
-                  {{ item }}
-                </v-chip>
+                  :text="item"
+                />
               </div>
               <div class="d-flex">
                 <RectangleButton
diff --git a/src/utils/GlobalComponents.js b/src/utils/GlobalComponents.js
index 2dcd096..95e4eae 100644
--- a/src/utils/GlobalComponents.js
+++ b/src/utils/GlobalComponents.js
@@ -11,6 +11,7 @@ import DateInput from '../components/Global/Input/DateInput.vue';
 import TimeInput from '../components/Global/Input/TimeInput.vue';
 import BasicModal from "../components/Global/Modal/BasicModal";
 import Pagination from "../components/Global/Pagination/Pagination.vue";
+import Chip from "../components/Global/Chip/Chip.vue";
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
@@ -23,4 +24,5 @@ Vue.component('main-back', MainBack);
 Vue.component('DateInput', DateInput);
 Vue.component('TimeInput', TimeInput);
 Vue.component('basic-modal', BasicModal);
-Vue.component('pagination', Pagination);
\ No newline at end of file
+Vue.component('pagination', Pagination);
+Vue.component('Chip', Chip);
\ No newline at end of file