feat: add "disabled" option

issue: Add "readonly" option #38

Author: abichinger

ant/src/components/cron-ant.vue

@@ -8,6 +8,7 @@
         item-value="id"
         :items="period.items"
         @update:model-value="period.select($event)"
+        :disabled="disabled"
         :button-props="buttonProps"
       />
     </div>
@@ -26,6 +27,7 @@
           :selection="f.text.value"
           multiple
           clearable
+          :disabled="disabled"
           :button-props="buttonProps"
           :dropdown-props="dropdownProps"
           :hideOnClick="false"

ant/src/components/select.vue

@@ -1,6 +1,11 @@
 <template>
   <span class="custom-select">
-    <a-dropdown :trigger="['click']" v-model:visible="visible" v-bind="dropdownProps">
+    <a-dropdown
+      :trigger="['click']"
+      v-model:visible="visible"
+      v-bind="dropdownProps"
+      :disabled="disabled"
+    >
       <a-button v-bind="buttonProps">
         {{ selection ?? selectedStr
         }}<CloseCircleFilled v-if="clearable && !isEmpty" @click="clear()" @click.stop="" />

core/src/components/cron-core.ts

@@ -331,6 +331,11 @@ export const cronCoreProps = () => ({
       }
     },
   },
+  /** Disable the cron editor */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 /**

core/src/components/select.ts

@@ -118,6 +118,10 @@ export function selectProps<T, V>() {
       type: [String, Function] as PropType<string | ((item: T) => V)>,
       default: 'value',
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   }
 }
 

docs/src/.vuepress/components/cron-demo.vue

@@ -2,14 +2,15 @@
   <div class="cron-demo">
     <p>Flavor</p>
     <v-btn-toggle
-        v-model="text"
+        v-model="toggle"
         tile
         color="secondary"
         group
         density="compact"
-        class="mb-5 elevation-5">
+        class="mb-5 elevation-5"
+        mandatory>
 
-        <v-btn v-for="item in flavors" :value="item.name" :key="item.name" @click="flavor = item">
+        <v-btn v-for="item in flavors" :key="item.name" @click="flavor = item">
           {{item.name}}
         </v-btn>
 
@@ -36,14 +37,16 @@
         color="secondary"
         group
         density="compact"
-        class="mb-10 elevation-5">
+        class="mb-5 elevation-5">
 
         <v-btn v-for="item in formats" :value="item" :key="item">
           {{item}}
         </v-btn>
 
     </v-btn-toggle>
 
+    <v-switch v-model="disabled" color="secondary" label="Disabled"></v-switch>
+
     <iframe :src="src"></iframe>
 
   </div>
@@ -54,12 +57,6 @@ import { withBase, } from '@vuepress/client'
 import { computed, ref } from 'vue'
 
 export default {
-  props: {
-    index: {
-      type: Number,
-      default: 0,
-    }
-  },
   setup (props) {
     const flavors = [
       {
@@ -81,9 +78,10 @@ export default {
     const locales = ['en', 'de', 'pt', 'es', 'da', 'zh-cn']
     const formats = ['crontab', 'quartz']
     
-    const flavor = ref(flavors[props.index])
+    const flavor = ref(flavors[0])
     const locale = ref('en')
     const format = ref(formats[0])
+    const disabled = ref(false)
 
     const selectFlavor = (name) => {
       let i = flavors.map(f => f.name).indexOf(name)
@@ -95,7 +93,8 @@ export default {
       const params = {
         locale: locale.value,
         format: format.value,
-        'initial-value': format.value == 'quartz' ? '* * * * * *' : '* * * * *'
+        'initial-value': format.value == 'quartz' ? '* * * * * *' : '* * * * *',
+        ...(disabled.value ? { disabled:true } : {})
       }
       const query = new URLSearchParams(params)
       const path = 'demo/' + flavor.value.name.replace(' ', '-').toLowerCase() + '/index.html?' + query.toString()
@@ -108,11 +107,12 @@ export default {
       flavor: flavor,
       flavors,
       selectFlavor,
-      text: ref(flavor.name),
+      toggle: ref(0),
       locales,
       locale: locale,
       formats,
       format,
+      disabled,
       value: ref('* * * * *')
     }
   }

element-plus/src/components/cron-element-plus.vue

@@ -7,6 +7,7 @@
       item-value="id"
       :items="period.items"
       @update:model-value="period.select($event)"
+      :disabled="disabled"
       :button-props="buttonProps"
     />
 
@@ -24,6 +25,7 @@
           :selection="f.text.value"
           multiple
           clearable
+          :disabled="disabled"
           :button-props="buttonProps"
           :dropdown-props="{ hideOnClick: false }"
         />

element-plus/src/components/select.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="custom-select">
     <el-dropdown style="vertical-align: baseline" trigger="click" v-bind="dropdownProps">
-      <el-button v-bind="buttonProps">
+      <el-button v-bind="buttonProps" :disabled="disabled">
         {{ selection ?? selectedStr }}
         <el-icon v-if="clearable && !isEmpty" class="el-icon--right" @click="clear()" @click.stop=""
           ><Close

light/src/components/cron-light.vue

@@ -8,6 +8,7 @@
         :items="period.items"
         @update:model-value="period.select($event)"
         :cols="cols['period'] || 1"
+        :disabled="disabled"
       />
     </div>
     <span>{{ period.suffix.value }}</span>
@@ -23,6 +24,7 @@
           :selection="f.text.value"
           multiple
           clearable
+          :disabled="disabled"
         ></custom-select>
       </div>
       <span>{{ f.suffix.value }}</span>

light/src/components/select.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="vcron-select-container">
-    <span class="vcron-select-input" @click="toggleMenu">
+    <span
+      class="vcron-select-input"
+      :class="{ 'vcron-select-disabled': disabled }"
+      @click="
+        () => {
+          if (!disabled) toggleMenu()
+        }
+      "
+    >
       {{ selection ?? selectedStr }}
 
       <span v-if="clearable && !isEmpty" @click="clear">&#x2715;</span>
@@ -73,13 +81,21 @@ export default defineComponent({
   display: inline-block;
   border-radius: 3px;
   border: 1px solid #ddd;
-  background-color: #eee;
   user-select: none;
   padding: 0 0.5em;
   color: black;
 }
 
-.vcron-select-input:hover {
+.vcron-select-disabled {
+  background-color: #ccc;
+  color: #444;
+}
+
+:not(.vcron-select-disabled).vcron-select-input {
+  background-color: #eee;
+}
+
+:not(.vcron-select-disabled).vcron-select-input:hover {
   border: 1px solid #ccc;
   background-color: #ddd;
 }

quasar/src/components/cron-quasar.vue

@@ -8,6 +8,7 @@
         item-value="id"
         :items="period.items"
         @update:model-value="period.select($event)"
+        :disabled="disabled"
         :button-props="buttonProps"
         :menu-props="{ autoClose: true }"
       />
@@ -25,6 +26,7 @@
           :selection="f.text.value"
           multiple
           clearable
+          :disabled="disabled"
           :button-props="buttonProps"
         />
 

quasar/src/components/select.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <q-btn class="q-ma-xs" v-bind="buttonProps">
+    <q-btn class="q-ma-xs" v-bind="buttonProps" :disabled="disabled">
       {{ selection ?? selectedStr }}
       <q-icon
         class="q-pl-xs"

vuetify/src/components/cron-vuetify.vue

@@ -8,6 +8,7 @@
           item-value="id"
           :items="period.items"
           @update:model-value="period.select($event)"
+          :disabled="disabled"
           :chip-props="chipProps"
         />
       </v-col>
@@ -24,6 +25,7 @@
             :selection="f.text.value"
             multiple
             clearable
+            :disabled="disabled"
             :chip-props="chipProps"
             :menu-props="{ closeOnContentClick: false }"
           />

vuetify/src/components/select.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chip v-bind="chipProps">
+  <v-chip v-bind="chipProps" :disabled="disabled">
     <template #append v-if="clearable && !isEmpty">
       <v-icon size="small" icon="mdi-close" @click.stop="clear()"> </v-icon>
     </template>