@kalisio/kdk 2.1.7 → 2.1.8

package/core/client/components/form/KSelectField.vue

@@ -1,143 +1,143 @@
-<template>
-  <div v-if="readOnly">
-    <q-chip :id="properties.name + '-field'" dense>
-      {{ model }}
-    </q-chip>
-  </div>
-  <q-select v-else
-    :for="properties.name + '-field'"
-    :id="properties.name + '-field'"
-    ref="select"
-    v-model="model"
-    :label="label"
-    :multiple="multiple"
-    :toggle="toggle"
-    :radio="radio"
-    :use-chips="chips"
-    :options="options"
-    emit-value
-    map-options
-    use-input
-    :clearable="clearable"
-    :error="hasError"
-    :error-message="errorLabel"
-    :disable="disabled"
-    bottom-slots
-    @filter="onFilter"
-    @blur="onChanged"
-    @update:model-value="onChanged"
-  >
-    <!-- pptions display -->
-    <template v-slot:option="scope">
-      <q-item
-        v-bind="scope.itemProps"
-        :id="getId(scope.opt)"
-      >
-        <q-item-section>
-          <q-item-label>{{ scope.opt.label }}</q-item-label>
-        </q-item-section>
-      </q-item>
-    </template>
-    <!-- selected item display -->
-    <template v-slot:selected-item="scope">
-      <span :class="selectedClass()">
-        {{ scope.opt.label }}
-      </span>
-    </template>
-    <!-- helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
-    </template>
-  </q-select>
-</template>
-
-<script>
-import _ from 'lodash'
-import { makeDiacriticPattern } from '../../../common'
-import { baseField } from '../../mixins'
-
-export default {
-  mixins: [baseField],
-  computed: {
-    multiple () {
-      return _.get(this.properties, 'multiselect', false)
-    },
-    clearable () {
-      return _.get(this.properties, 'field.clearable', true)
-    },
-    toggle () {
-      return _.get(this.properties, 'field.toggle', false)
-    },
-    radio () {
-      return _.get(this.properties, 'field.radio', false)
-    },
-    chips () {
-      return _.get(this.properties, 'field.chips', false)
-    },
-    options () {
-      let opts = _.map(_.get(this.properties, 'field.options', []), option => {
-        const label = this.$tie(_.get(option, 'label', ''))
-        return Object.assign({}, option, { label: label })
-      })
-      if (this.filter) {
-        opts = _.filter(opts, option => {
-          const regExp = new RegExp(makeDiacriticPattern(this.filter))
-          return regExp.test(option.label.toLowerCase())
-        })
-      }
-      return opts
-    }
-  },
-  data () {
-    return {
-      filter: null
-    }
-  },
-  watch: {
-    options: {
-      immediate: true,
-      handler (opts) {
-        if (_.isEmpty(this.filter) && opts.length === 1 && this.required) {
-          this.$nextTick(() => {
-            this.model = opts[0].value
-          })
-        }
-      }
-    }
-  },
-  methods: {
-    getId (option) {
-      let id = option.value
-      // Complex object ?
-      if (typeof id === 'object') {
-        // Extract value property or use label if none
-        const valueField = _.get(this.properties, 'field.valueField')
-        if (valueField) id = _.get(id, valueField)
-        else id = option.label
-      } else {
-        // Ensure string not eg number
-        id = id.toString()
-      }
-      return _.kebabCase(id)
-    },
-    emptyModel () {
-      if (this.multiple) return []
-      return null
-    },
-    onFilter (pattern, update) {
-      if (pattern === '') {
-        update(() => {
-          this.filter = null
-        })
-        return
-      }
-      update(() => {
-        this.filter = pattern.toLowerCase()
-      })
-    },
-    selectedClass () {
-      return _.get(this.properties, 'field.selectedClass', 'text-weight-regular')
-    }
-  }
-}
-</script>
+<template>
+  <div v-if="readOnly">
+    <q-chip :id="properties.name + '-field'" dense>
+      {{ model }}
+    </q-chip>
+  </div>
+  <q-select v-else
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    ref="select"
+    v-model="model"
+    :label="label"
+    :multiple="multiple"
+    :toggle="toggle"
+    :radio="radio"
+    :use-chips="chips"
+    :options="options"
+    emit-value
+    map-options
+    use-input
+    :clearable="clearable"
+    :error="hasError"
+    :error-message="errorLabel"
+    :disable="disabled"
+    bottom-slots
+    @filter="onFilter"
+    @blur="onChanged"
+    @update:model-value="onChanged"
+  >
+    <!-- pptions display -->
+    <template v-slot:option="scope">
+      <q-item
+        v-bind="scope.itemProps"
+        :id="getId(scope.opt)"
+      >
+        <q-item-section>
+          <q-item-label>{{ scope.opt.label }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+    <!-- selected item display -->
+    <template v-slot:selected-item="scope">
+      <span :class="selectedClass()">
+        {{ scope.opt.label }}
+      </span>
+    </template>
+    <!-- helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-select>
+</template>
+
+<script>
+import _ from 'lodash'
+import { makeDiacriticPattern } from '../../../common'
+import { baseField } from '../../mixins'
+
+export default {
+  mixins: [baseField],
+  computed: {
+    multiple () {
+      return _.get(this.properties, 'multiselect', false)
+    },
+    clearable () {
+      return _.get(this.properties, 'field.clearable', true)
+    },
+    toggle () {
+      return _.get(this.properties, 'field.toggle', false)
+    },
+    radio () {
+      return _.get(this.properties, 'field.radio', false)
+    },
+    chips () {
+      return _.get(this.properties, 'field.chips', false)
+    },
+    options () {
+      let opts = _.map(_.get(this.properties, 'field.options', []), option => {
+        const label = this.$tie(_.get(option, 'label', ''))
+        return Object.assign({}, option, { label: label })
+      })
+      if (this.filter) {
+        opts = _.filter(opts, option => {
+          const regExp = new RegExp(makeDiacriticPattern(this.filter))
+          return regExp.test(option.label.toLowerCase())
+        })
+      }
+      return opts
+    }
+  },
+  data () {
+    return {
+      filter: null
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      handler (opts) {
+        if (_.isEmpty(this.filter) && opts.length === 1 && this.required) {
+          this.$nextTick(() => {
+            this.model = opts[0].value
+          })
+        }
+      }
+    }
+  },
+  methods: {
+    getId (option) {
+      let id = option.value
+      // Complex object ?
+      if (typeof id === 'object') {
+        // Extract value property or use label if none
+        const valueField = _.get(this.properties, 'field.valueField')
+        if (valueField) id = _.get(id, valueField)
+        else id = option.label
+      } else {
+        // Ensure string not eg number
+        id = id.toString()
+      }
+      return _.kebabCase(id)
+    },
+    emptyModel () {
+      if (this.multiple) return []
+      return null
+    },
+    onFilter (pattern, update) {
+      if (pattern === '') {
+        update(() => {
+          this.filter = null
+        })
+        return
+      }
+      update(() => {
+        this.filter = pattern.toLowerCase()
+      })
+    },
+    selectedClass () {
+      return _.get(this.properties, 'field.selectedClass', 'text-weight-regular')
+    }
+  }
+}
+</script>

package/core/client/components/form/KTextField.vue

@@ -1,48 +1,48 @@
-<template>
-  <div v-if="readOnly" :id="properties.name + '-field'">
-    <div v-html="text" />
-  </div>
-  <q-input v-else
-    :for="properties.name + '-field'"
-    :id="properties.name + '-field'"
-    type="text"
-    v-model="model"
-    :label="label"
-    :input-class="inputClass()"
-    clearable
-    :disable="disabled"
-    :error="hasError"
-    :error-message="errorLabel"
-    bottom-slots
-    @blur="onChanged"
-    @update:model-value='onChanged'
-  >
-    <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
-    </template>
-  </q-input>
-</template>
-
-<script>
-import _ from 'lodash'
-import { baseField } from '../../mixins'
-
-export default {
-  mixins: [baseField],
-  computed: {
-    text () {
-      if (_.startsWith(this.model, 'http://') || _.startsWith(this.model, 'https://')) {
-        return `<a href='${this.model}' target="_blank">${this.model}</a>`
-      } else {
-        return this.model
-      }
-    }
-  },
-  methods: {
-    inputClass () {
-      return _.get(this.properties, 'field.inputClass', 'text-weight-regular')
-    }
-  }
-}
-</script>
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    <div v-html="text" />
+  </div>
+  <q-input v-else
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    type="text"
+    v-model="model"
+    :label="label"
+    :input-class="inputClass()"
+    clearable
+    :disable="disabled"
+    :error="hasError"
+    :error-message="errorLabel"
+    bottom-slots
+    @blur="onChanged"
+    @update:model-value='onChanged'
+  >
+    <!-- Helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-input>
+</template>
+
+<script>
+import _ from 'lodash'
+import { baseField } from '../../mixins'
+
+export default {
+  mixins: [baseField],
+  computed: {
+    text () {
+      if (_.startsWith(this.model, 'http://') || _.startsWith(this.model, 'https://')) {
+        return `<a href='${this.model}' target="_blank">${this.model}</a>`
+      } else {
+        return this.model
+      }
+    }
+  },
+  methods: {
+    inputClass () {
+      return _.get(this.properties, 'field.inputClass', 'text-weight-regular')
+    }
+  }
+}
+</script>

package/core/client/components/form/KTextareaField.vue

@@ -1,88 +1,88 @@
-<template>
-  <k-text-area v-if="readOnly" :text="model"  :length="150" />
-  <q-field v-else
-    :value="model"
-    :label="label"
-    :error-message="errorLabel"
-    :error="hasError"
-    :disable="disabled"
-    bottom-slots
-  >
-    <!-- Content -->
-    <template v-slot:default>
-      <div class="q-pt-md full-width">
-        <q-editor
-          :id="properties.name + '-field'"
-          v-model="model"
-          :toolbar="editorToolbar"
-          content-class="text-grey-8"
-          min-height="5rem"
-          max-height="10rem"
-          dense />
-      </div>
-    </template>
-    <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
-    </template>
-  </q-field>
-</template>
-
-<script>
-import _ from 'lodash'
-import KTextArea from '../KTextArea.vue'
-import { baseField } from '../../mixins'
-
-export default {
-  mixins: [baseField],
-  components: {
-    KTextArea
-  },
-  props: {
-    toolbar: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data () {
-    return {
-      defaultToolbar: {
-        xs: [
-          ['bold', 'italic', 'underline', 'strike', 'align'],
-          [{
-            label: '',
-            icon: this.$q.iconSet.editor.align,
-            list: 'only-icons',
-            options: ['left', 'center', 'right', 'justify']
-          }],
-          ['undo', 'redo']
-        ],
-        'gt.xs': [
-          ['bold', 'italic', 'underline', 'strike', 'unordered', 'ordered'],
-          ['quote', 'link', 'hr'],
-          [{
-            label: this.$q.lang.editor.align,
-            icon: this.$q.iconSet.editor.align,
-            fixedLabel: true,
-            list: 'only-icons',
-            options: ['left', 'center', 'right', 'justify']
-          }],
-          ['undo', 'redo']
-        ]
-      }
-    }
-  },
-  computed: {
-    editorToolbar () {
-      let configuration
-      _.forEach(this.toolbar || this.defaultToolbar, (value, key) => {
-        if (_.get(this.$q.screen, key)) {
-          configuration = value
-          return false
-        }
-      })
-      return configuration
-    }
-  }
-}
-</script>
+<template>
+  <k-text-area v-if="readOnly" :text="model"  :length="150" />
+  <q-field v-else
+    :value="model"
+    :label="label"
+    :error-message="errorLabel"
+    :error="hasError"
+    :disable="disabled"
+    bottom-slots
+  >
+    <!-- Content -->
+    <template v-slot:default>
+      <div class="q-pt-md full-width">
+        <q-editor
+          :id="properties.name + '-field'"
+          v-model="model"
+          :toolbar="editorToolbar"
+          content-class="text-grey-8"
+          min-height="5rem"
+          max-height="10rem"
+          dense />
+      </div>
+    </template>
+    <!-- Helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-field>
+</template>
+
+<script>
+import _ from 'lodash'
+import KTextArea from '../KTextArea.vue'
+import { baseField } from '../../mixins'
+
+export default {
+  mixins: [baseField],
+  components: {
+    KTextArea
+  },
+  props: {
+    toolbar: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    return {
+      defaultToolbar: {
+        xs: [
+          ['bold', 'italic', 'underline', 'strike', 'align'],
+          [{
+            label: '',
+            icon: this.$q.iconSet.editor.align,
+            list: 'only-icons',
+            options: ['left', 'center', 'right', 'justify']
+          }],
+          ['undo', 'redo']
+        ],
+        'gt.xs': [
+          ['bold', 'italic', 'underline', 'strike', 'unordered', 'ordered'],
+          ['quote', 'link', 'hr'],
+          [{
+            label: this.$q.lang.editor.align,
+            icon: this.$q.iconSet.editor.align,
+            fixedLabel: true,
+            list: 'only-icons',
+            options: ['left', 'center', 'right', 'justify']
+          }],
+          ['undo', 'redo']
+        ]
+      }
+    }
+  },
+  computed: {
+    editorToolbar () {
+      let configuration
+      _.forEach(this.toolbar || this.defaultToolbar, (value, key) => {
+        if (_.get(this.$q.screen, key)) {
+          configuration = value
+          return false
+        }
+      })
+      return configuration
+    }
+  }
+}
+</script>

package/core/client/components/form/KToggleField.vue

@@ -1,46 +1,46 @@
-<template>
-  <div v-if="readOnly" :id="properties.name + '-field'">
-    <q-chip dense :icon="model ? 'las la-check' : 'las la-ban'" :color="model ? 'positive' : 'negative'" />
-  </div>
-  <q-field v-else
-    :for="properties.name + '-field'"
-    :id="properties.name + '-field'"
-    v-model="model"
-    :label="label"
-    borderless
-    :error-message="errorLabel"
-    :error="hasError"
-    :disable="disabled"
-    bottom-slots
-  >
-    <!-- Control -->
-    <template v-slot:control>
-      <q-toggle
-        :id="properties.name + '-field'"
-        v-model="model"
-        @blur="onChanged"
-      />
-    </template>
-    <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
-    </template>
-  </q-field>
-</template>
-
-<script>
-import { baseField } from '../../mixins'
-
-export default {
-  mixins: [baseField],
-  methods: {
-    emptyModel () {
-      return false
-    },
-    isEmpty () {
-      // Can't actually be
-      return false
-    }
-  }
-}
-</script>
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    <q-chip dense :icon="model ? 'las la-check' : 'las la-ban'" :color="model ? 'positive' : 'negative'" />
+  </div>
+  <q-field v-else
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    v-model="model"
+    :label="label"
+    borderless
+    :error-message="errorLabel"
+    :error="hasError"
+    :disable="disabled"
+    bottom-slots
+  >
+    <!-- Control -->
+    <template v-slot:control>
+      <q-toggle
+        :id="properties.name + '-field'"
+        v-model="model"
+        @blur="onChanged"
+      />
+    </template>
+    <!-- Helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-field>
+</template>
+
+<script>
+import { baseField } from '../../mixins'
+
+export default {
+  mixins: [baseField],
+  methods: {
+    emptyModel () {
+      return false
+    },
+    isEmpty () {
+      // Can't actually be
+      return false
+    }
+  }
+}
+</script>