feat(vuetify): add custom-select component

Author: abichinger

.github/workflows/release-docs.yml

@@ -27,6 +27,8 @@ jobs:
         with:
           branch: gh-pages
           folder: docs/src/.vuepress/dist
+          clean-exclude: |
+            next
 
       - name: Deploy next
         if: github.ref == 'refs/heads/next'

assets/cron-vuetify-hero.png

@@ -4,7 +4,7 @@
         <v-card>
             <v-card-text>
                 <v-text-field label="" :value="value" @change="value=$event"></v-text-field>
-                <VueCronEditor v-model="value">
+                <VueCronEditor v-model="value" :chip-props="{ color: 'primary' }">
 
                 </VueCronEditor>
             </v-card-text>

vuetify/dev/example-usage.vue

@@ -1,10 +1,15 @@
+import '@mdi/font/css/materialdesignicons.css'
 import Vue from 'vue'
-import example from './example-usage.vue'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
+import example from './example-usage.vue'
 
 Vue.use(Vuetify)
-const opts = {}
+const opts = {
+  icons: {
+    iconfont: 'mdi',
+  },
+}
 const vuetify = new Vuetify(opts)
 
 Vue.config.productionTip = false

vuetify/dev/serve.js

@@ -21,6 +21,7 @@
     "build:unpkg": "yarn rollup --config build/rollup.config.js --format iife --file dist/vuetify.min.js"
   },
   "dependencies": {
+    "@mdi/font": "^7.0.96",
     "@vue-js-cron/core": "2.1.2",
     "vuetify": "^2.4.6"
   },

vuetify/package.json

@@ -5,25 +5,30 @@
             <v-row align="baseline" dense>
                 <v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
                 <v-col cols="auto">
-                    <v-select class="fit" v-bind="period.attrs" :items="period.items" @input="period.events.input" item-value="id" dense></v-select>
+                    <custom-select 
+                        v-bind="period.attrs" 
+                        :items="period.items" 
+                        v-on="period.events" 
+                        item-value="id"
+                        :menu-props="menuProps || { offsetY: true }"
+                        :chipProps="chipProps" />
                 </v-col>
                 <v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>
 
 
                 <template v-for="f in fields">
                     <v-col v-if="f.prefix" class="flex-grow-0" :key="f.id+'-prefix'">{{f.prefix}}</v-col>
                     <v-col cols="auto" :key="f.id">
-                        <v-select class="fit" v-bind="f.attrs" v-on="f.events" :items="f.items" multiple dense :menu-props="{ auto: false, offsetY: true }">
-                            <template #prepend-inner>
-                                <div>{{f.selectedStr}}</div>
-                            </template>
-                            <template #selection>
-                                
-                            </template>
-                            <template #item="{item, attrs}">
-                                <v-list-item-title v-bind="attrs">{{item.text}}</v-list-item-title>
-                            </template>
-                        </v-select>
+                        <custom-select 
+                            v-bind="f.attrs" 
+                            v-on="f.events" 
+                            :cols="cols(f.id)"
+                            :items="f.items" 
+                            :selection="f.selectedStr" 
+                            multiple 
+                            :menu-props="menuProps || { offsetY: true, closeOnContentClick: false }"
+                            :chipProps="chipProps"
+                            :clearable="true" />
                     </v-col>
                     <v-col v-if="f.suffix" class="flex-grow-0" :key="f.id+'-suffix'">{{f.suffix}}</v-col>
                 </template>
@@ -35,12 +40,37 @@
 
 <script>
 import CronCore from '@vue-js-cron/core'
+import CustomSelect from './components/CustomSelect.vue'
 
 export default {
     name: "VueCronEditor",
     components:{
         'CronCore': CronCore.component,
+        CustomSelect
     },
+    props: {
+        chipProps: {
+            type: Object,
+            default() {
+                return {}
+            }
+        },
+        menuProps: {
+            type: Object,
+            default() {
+                return null
+            }
+        },
+        cols: {
+            type: Function,
+            default(fieldId) {
+                if (fieldId === 'minute') return 5
+                else if (fieldId === 'hour') return 4
+                else if (fieldId === 'day') return 4
+                else return 1
+            }
+        }
+    }
 }
 </script>
 

vuetify/src/CronEditor.vue

@@ -1,24 +1,179 @@
 <template>
-<div>
-  <v-select v-bind="$attrs" v-on="$listeners">
+  <v-menu v-bind="menuProps">
+    
+    <template #activator="{ on }">
+      <v-chip v-on="on" v-bind="chipProps">
+        
+        {{selection ? selection : selectedStr}}
 
-    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
-
-  </v-select>
-</div>
+        <template v-if="clearable">
+          <v-icon v-if="selectedItems.length > 0" size="small" @click.stop="clear()">mdi-close</v-icon>
+        </template>
+      
+      </v-chip>
+    </template>
+    
+    
+    <v-list class="pa-0 ma-0">
+      <v-list-item-group :value="selectedItems" multiple>
+        <v-row v-for="(itemRow, index) in itemRows" :key="index" no-gutters>
+          <v-col v-for="(item, index) in itemRow" :key="index">
+            <v-list-item v-if="item" :value="item" @click="select(item)">{{item[itemText]}}</v-list-item>
+          </v-col>
+        </v-row>
+      </v-list-item-group>
+    </v-list>
+  </v-menu>
+  
 </template>
 
 <script>
-
 export default {
   inheritAttrs: false,
   name: 'CustomSelect',
-  props:{
-
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [String, Array, Object],
+      default (props) {
+        return props.multiple ? [] : null
+      }
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    returnObject: {
+      type: Boolean,
+      default: false
+    },
+    itemText: {
+      type: String,
+      default: 'text'
+    },
+    itemValue: {
+      type: String,
+      default: 'value'
+    },
+    cols: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: 'unset'
+    },
+    chipProps: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    menuProps: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    selection: {
+      type: String,
+      default: ''
+    },
+    closeOnContentClick: {
+      type: Boolean,
+      default: true
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      menu: false
+    }
+  },
+  computed: {
+    listStyle () {
+      return {
+        display: (this.menu) ? 'inline-block' : 'none',
+        minWidth: '5em',
+        width: this.width
+      }
+    },
+    listItemStyle () {
+      return {
+        width: 100 / this.cols + '%'
+      }
+    },
+    _value () {
+      return (this.multiple) ? this.value : [this.value]
+    },
+    selectedItems () {
+      return this.items.filter((item) => {
+        for (const value of this._value) {
+          if (this.returnObject) {
+            if (value === item) return true
+          } else {
+            if (value === item[this.itemValue]) return true
+          }
+        }
+        return false
+      })
+    },
+    selectedStr () {
+      return this.selectedItems.map((item) => item[this.itemText]).join(',')
+    },
+    rows () {
+      return Array.isArray(this.items) ? Math.ceil(this.items.length / this.cols) : 0
+    },
+    itemRows () {
+      return Array.from(Array(this.rows), (_, i) => {
+        return Array.from(Array(this.cols), (_, j) => {
+          return this.items[this.cols * i + j]
+        })
+      })
+    }
+  },
+  methods: {
+    menuEvtListener (evt) {
+      this.menu = false
+      document.removeEventListener('click', this.menuEvtListener)
+    },
+    toggleMenu () {
+      this.menu = !this.menu
+      if (this.menu) {
+        setTimeout(() => {
+          document.addEventListener('click', this.menuEvtListener)
+        }, 1)
+      } else {
+        document.removeEventListener('click', this.menuEvtListener)
+      }
+    },
+    select (item) {
+      if (this.multiple) {
+        const value = this.selectedItems.slice()
+        const i = this.selectedItems.indexOf(item)
+        // deselect
+        if (i >= 0) {
+          value.splice(i, 1)
+        } else { // select
+          value.push(item)
+        }
+        this.$emit('input', (this.returnObject) ? value : value.map((item) => item[this.itemValue]))
+      } else {
+        this.$emit('input', (this.returnObject) ? item : item[this.itemValue])
+      }
+    },
+    clear () {
+      this.$emit('input', this.multiple ? [] : null)
+    }
   }
 }
 </script>
 
 <style>
-
 </style>

vuetify/src/components/CustomSelect.vue

@@ -1203,6 +1203,11 @@
     globby "^11.0.0"
     read-yaml-file "^1.1.0"
 
+"@mdi/font@^7.0.96":
+  version "7.0.96"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.0.96.tgz#9853c222623072f5575b4039c8c195ea929b61fc"
+  integrity sha512-rzlxTfR64hqY8yiBzDjmANfcd8rv+T5C0Yedv/TWk2QyAQYdc66e0kaN1ipmnYU3RukHRTRcBARHzzm+tIhL7w==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2026,6 +2031,21 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@vue-js-cron/core@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@vue-js-cron/core/-/core-2.0.0.tgz#4bc59d8a8a9c9efa27732ff686eb6789e38356e5"
+  integrity sha512-Ce5tmQAbyQ05TSNmRZsDDwsTQDKqef2nAKIsmmSsyRul8uL9Eer33ErdOrHvRGyUfcCJZSiFPYct/cWy/I4i+w==
+  dependencies:
+    mustache "^4.2.0"
+
+"@vue-js-cron/vuetify@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@vue-js-cron/vuetify/-/vuetify-2.0.0.tgz#3360d696ce21f8f69de86154f5a65c5282798ca7"
+  integrity sha512-406qplg1nF/wuf+7C25yIx12m2XOx6FoC6WDi61UQ1oYsuMMgYwzYOWe1PxYKxDQlZrIO+gb5e9zKLuEL0QnAA==
+  dependencies:
+    "@vue-js-cron/core" "2.0.0"
+    vuetify "^2.4.6"
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"