feat(vuetify): add chipProps

Author: abichinger

vuetify/dev/example-usage.vue

@@ -4,7 +4,7 @@
         <v-card>
             <v-card-text>
                 <v-text-field label="" :model-value="value" @update:model-value="nextValue = $event" @blur="value=nextValue"></v-text-field>
-                <VueCronEditor v-model="value" />
+                <VueCronEditor v-model="value" :chipProps="{ color: 'primary' }" />
             </v-card-text>
         </v-card>
     </v-container>

vuetify/src/CronEditor.vue

@@ -5,15 +5,28 @@
         <v-row align="baseline" dense>
             <v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
             <v-col cols="auto">
-                <custom-select v-bind="period.attrs" :items="period.items" v-on="period.events" item-value="id" :density="density" :variant="variant"></custom-select>
+                <custom-select
+                  v-bind="period.attrs"
+                  :items="period.items"
+                  v-on="period.events"
+                  item-value="id"
+                  :chip-props="chipProps" />
             </v-col>
             <v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>
 
             <template v-for="f in fields" :key="f.id">
                 <v-col v-if="f.prefix" class="flex-grow-0">{{f.prefix}}</v-col>
                 <v-col cols="auto">
-                    <custom-select v-bind="f.attrs" v-on="f.events" :selection="f.selectedStr" :cols="cols(f.id)" :items="f.items" multiple :density="density" :variant="variant" :close-on-content-click="false" clearable>
-                    </custom-select>
+                    <custom-select
+                      v-bind="f.attrs"
+                      v-on="f.events"
+                      :selection="f.selectedStr"
+                      :cols="cols(f.id)"
+                      :items="f.items"
+                      multiple
+                      :chip-props="chipProps"
+                      :menu-props="{ closeOnContentClick: false }"
+                      clearable />
                 </v-col>
                 <v-col v-if="f.suffix" class="flex-grow-0">{{f.suffix}}</v-col>
             </template>
@@ -33,13 +46,11 @@ export default {
     CustomSelect
   },
   props: {
-    variant: {
-      type: String,
-      default: 'elevated'
-    },
-    density: {
-      type: String,
-      default: 'default'
+    chipProps: {
+      type: Object,
+      default () {
+        return {}
+      }
     },
     cols: {
       type: Function,

vuetify/src/components/CustomSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chip v-if="true" :density="density" :variant="variant">
+  <v-chip v-if="true" v-bind="chipProps">
 
     <template #append v-if="clearable">
       <v-icon v-if="selectedItems.length > 0" size="small" icon="mdi-close" @click.stop="clear()">
@@ -8,7 +8,7 @@
 
     {{selection ? selection : selectedStr}}
 
-    <v-menu activator="parent" :close-on-content-click="closeOnContentClick">
+    <v-menu activator="parent" v-bind="menuProps">
       <v-list class="pa-0 ma-0">
           <v-row v-for="(itemRow, index) in itemRows" :key="index" no-gutters>
             <v-col v-for="(item, index) in itemRow" :key="index">
@@ -60,22 +60,18 @@ export default {
       type: String,
       default: 'unset'
     },
-    variant: {
-      type: String,
-      default: 'elevated'
+    menuProps: {
+      type: Object,
+      default: () => {}
     },
-    density: {
-      type: String,
-      default: 'default'
+    chipProps: {
+      type: Object,
+      default: () => {}
     },
     selection: {
       type: String,
       default: ''
     },
-    closeOnContentClick: {
-      type: Boolean,
-      default: true
-    },
     clearable: {
       type: Boolean,
       default: false