create chip component

src/components/AddProduct/Main.vue

@@ -164,17 +164,16 @@
                   small-chips
                   dark
                 >
-                  <template #selection="{ item, select }">
+                  <template #selection="{ item }">
-                    <v-chip
+                    <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>

src/components/AddProgram/Main.vue

@@ -77,17 +77,16 @@
                   small-chips
                   dark
                 >
-                  <template #selection="{ item, select }">
+                  <template #selection="{ item }">
-                    <v-chip
+                    <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>

src/components/AddWorkout/Main.vue

@@ -135,17 +135,16 @@
                   small-chips
                   dark
                 >
-                  <template #selection="{ item, select }">
+                  <template #selection="{ item }">
-                    <v-chip
+                    <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>

src/components/Bookmarks/Programs/Programs.vue

@@ -21,24 +21,22 @@
       {{ program.bookmark_data.description }}
     </div>
     <div>
-      <v-chip
+      <Chip
-        label
         color="gray"
         text-color="black"
-        class="mr-1 text-uppercase"
+        xs
-        x-small
-      >
-        {{ program.bookmark_data.series_count }} series
-      </v-chip>
-      <v-chip
         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
+        :text="`${program.bookmark_data.workouts_count} workout`"
-      >
+      />
-        {{ program.bookmark_data.workouts_count }} workout
-      </v-chip>
     </div>
   </div>
 </template>

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
+                  xs
-                  v-for="(item, i) in workout.tags"
+                  v-for="(item, i) in workout.bookmark_data.tags"
                   :key="i"
-                >
+                  :text="item.name"
-                  {{ item.text }}
+                />
-                </v-chip>
               </div>
               <div>
                 <RectangleButton

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>

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
+      <Chip
-        label
         color="gray"
         text-color="black"
-        class="mr-1 text-uppercase"
+        xs
-        x-small
-      >
-        {{ program.series_count }} sets
-      </v-chip>
-      <v-chip
         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
+        :text="`${program.workouts_count} workout`"
-      >
+      />
-        {{ program.workouts_count }} workout
-      </v-chip>
     </div>
   </div>
 </template>

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
+            <Chip
-              label
               color="gray"
               text-color="black"
-              class="mr-1 text-uppercase"
+              xs
-              x-small
-            >
-              {{ program.sets }} sets
-            </v-chip>
-            <v-chip
               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
+              :text="`${program.workout} workout`"
-            >
+            />
-              {{ program.workout }} workout
-            </v-chip>
           </div>
         </div>
       </v-col>
@@ -88,12 +86,12 @@ export default {
   line-height: 12px;
 }
 .not__enf {
-    color: var(--color-service);
+  color: var(--color-service);
-    background-color: #ee35514f;
+  background-color: #ee35514f;
 }
 .enf {
-    color: var(--color-cyan);
+  color: var(--color-cyan);
-    background-color: #32cad531;
+  background-color: #32cad531;
 }
 .done {
   font-size: 13px;

src/components/Workouts/Item.vue

@@ -18,17 +18,16 @@
           <div>
             <div class="d-flex justify-space-between align-center">
               <div>
-                <v-chip
+                <Chip
-                  label
                   color="gray"
                   text-color="black"
+                  xs
+                  label
                   class="mr-1 text-uppercase"
-                  x-small
                   v-for="(item, i) in workout.tags"
                   :key="i"
-                >
+                  :text="item"
-                  {{ item }}
+                />
-                </v-chip>
               </div>
               <div class="d-flex">
                 <RectangleButton

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';
@@ -24,3 +25,4 @@ Vue.component('DateInput', DateInput);
 Vue.component('TimeInput', TimeInput);
 Vue.component('basic-modal', BasicModal);
 Vue.component('pagination', Pagination);
+Vue.component('Chip', Chip);