@kalisio/kdk 2.4.0 → 2.5.1

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

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    {{ formattedDate }}
+  </div>
+  <q-field v-else
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    v-model="model"
+    :label="label"
+    :error-message="errorLabel"
+    :error="hasError"
+    :disable="disabled"
+    bottom-slots
+    stack-label
+  >
+    <!-- Prepend icons -->
+    <template v-slot:control>
+      <KDate
+        v-model="model"
+        v-bind="props"
+        dense
+        @update:modelValue="onChanged"
+      />
+    </template>
+    <!-- Helper -->
+    <template v-if="hasHelper" v-slot:append>
+      <KAction
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
+    </template>
+  </q-field>
+</template>
+
+<script>
+import _ from 'lodash'
+import moment from 'moment'
+import { baseField } from '../../mixins'
+import KAction from '../action/KAction.vue'
+import KDate from '../time/KDate.vue'
+
+export default {
+  mixins: [baseField],
+  components: {
+    KAction,
+    KDate
+  },
+  computed: {
+    formattedDateTime () {
+      return this.model
+    },
+    props () {
+      return _.omit(_.get(this.properties, 'field'), ['component', 'dense', 'label'])
+    }
+  },
+  methods: {
+    emptyModel () {
+      const dateMask = 'YYYY/MM/DD'
+      return moment().format(dateMask)
+    }
+  }
+}
+</script>

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

@@ -17,16 +17,14 @@
     <template v-slot:control>
       <KDateTimeRange
         v-model="model"
-        :options="options"
-        :min="min"
-        :max="max"
+        v-bind="props"
         dense
         @update:modelValue="onChanged"
       />
     </template>
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
-      <k-action
+      <KAction
         :id="properties.name + '-helper'"
         :label="helperLabel"
         :icon="helperIcon"
@@ -44,11 +42,13 @@
 <script>
 import _ from 'lodash'
 import { baseField } from '../../mixins'
+import KAction from '../action/KAction.vue'
 import KDateTimeRange from '../time/KDateTimeRange.vue'
 
 export default {
   mixins: [baseField],
   components: {
+    KAction,
     KDateTimeRange
   },
   computed: {
@@ -56,19 +56,8 @@ export default {
       // TODO
       return this.model
     },
-    options () {
-      return _.get(this.properties.field, 'options', {})
-    },
-    min () {
-      return _.get(this.properties.field, 'min')
-    },
-    max () {
-      return _.get(this.properties.field, 'max')
-    }
-  },
-  methods: {
-    emptyModel () {
-      return null
+    props () {
+      return _.omit(_.get(this.properties, 'field'), ['component', 'dense'])
     }
   }
 }

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

@@ -17,16 +17,14 @@
     <template v-slot:control>
       <KDateTime
         v-model="model"
-        :options="options"
-        :min="min"
-        :max="max"
+        v-bind="props"
         dense
         @update:modelValue="onChanged"
       />
     </template>
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
-      <k-action
+      <KAction
         :id="properties.name + '-helper'"
         :label="helperLabel"
         :icon="helperIcon"
@@ -44,26 +42,21 @@
 <script>
 import _ from 'lodash'
 import { baseField } from '../../mixins'
+import KAction from '../action/KAction.vue'
 import KDateTime from '../time/KDateTime.vue'
 
 export default {
   mixins: [baseField],
   components: {
+    KAction,
     KDateTime
   },
   computed: {
     formattedDateTime () {
-      // TODO
       return this.model
     },
-    options () {
-      return _.get(this.properties.field, 'options', {})
-    },
-    min () {
-      return _.get(this.properties.field, 'min')
-    },
-    max () {
-      return _.get(this.properties.field, 'max')
+    props () {
+      return _.omit(_.get(this.properties, 'field'), ['component', 'dense'])
     }
   },
   methods: {

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

@@ -141,7 +141,7 @@ function onFieldRefCreated (reference) {
     // Check whether the form is ready
     nbReadyFields.value++
     if (nbReadyFields.value === fields.value.length) {
-      logger.debug(`schema ${schema.value.$id} ready`)
+      logger.debug(`[KDK] schema ${schema.value.$id} ready`)
       isReady.value = true
       emit('form-ready')
     }
@@ -205,11 +205,11 @@ async function build () {
   buildInProgress = false
 }
 function values () {
-  const val = {}
+  const values = {}
   _.forEach(fields.value, field => {
-    if (!field.reference.isEmpty()) val[field.name] = field.reference.value()
+    if (!(field.required && field.reference.isEmpty())) values[field.name] = field.reference.value()
   })
-  return val
+  return values
 }
 function fill (values) {
   if (!isReady.value) throw new Error('Cannot fill the form while not ready')
@@ -231,8 +231,8 @@ function clear () {
 function validate () {
   if (!isReady.value) throw new Error('Cannot validate the form while not ready')
   logger.debug('[KDK] Validating form', schema.value.$id)
-  const val = values()
-  const { isValid, errors } = validateSchema(val)
+  const fieldValues = values()
+  const { isValid, errors } = validateSchema(fieldValues)
   if (!isValid) {
     _.forEach(fields.value, field => {
       const error = hasFieldError(field.name, errors)
@@ -242,10 +242,10 @@ function validate () {
         field.reference.validate()
       }
     })
-    return { isValid, values: val }
+    return { isValid, values: fieldValues }
   }
   _.forEach(fields.value, field => field.reference.validate())
-  return { isValid, values: val }
+  return { isValid, values: fieldValues }
 }
 async function apply (object) {
   if (!isReady.value) throw new Error('[KDK] Cannot apply the form while not ready')

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

@@ -20,6 +20,8 @@
         :id="properties.name + '-field'"
         v-model="model"
         :options="options()"
+        :disable="disabled"
+        :color="disabled ? 'grey-7' : 'primary'"
         @update:model-value="onChanged"
         inline>
         <template v-slot:label="opt">

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

@@ -1,53 +1,55 @@
 <template>
-  <div :class="labelClass">
-    <q-select
-      v-model="resolution"
-      :options="getResolutions()"
-      style="min-width: 30%"
-      dense
-      :label="label"
-      :borderless="borderless"
-      :disable="disabled"
-    >
-      <template v-slot:option="scope">
-        <q-item v-bind="scope.itemProps">
-          <q-item-section>
-            <q-item-label v-html="scope.opt.label" />
-          </q-item-section>
-          <q-item-section side>
-            <q-item-label caption>{{ scope.opt.description }}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-input
-      v-model.number="width"
-      type="number"
-      min="256" max="4000"
-      mask="(#)###"
-      dense
-      :borderless="borderless"
-      input-class="text-center"
-      style="max-width: 54px"
-      :readonly="readonly"
-      :disable="disabled"
-      @update:model-value='updateModel()'
-    />
-    <span>x</span>
-    <q-input
-      v-model.number="height"
-      type="number"
-      min="256" max="4000"
-      mask="(#)###"
-      dense
-      :borderless="borderless"
-      input-class="text-center"
-      style="max-width: 54px"
-      :readonly="readonly"
-      :disable="disabled"
-      @update:model-value='updateModel()'
-    />
-  </div>
+  <q-select
+    v-model="resolution"
+    :options="getResolutions()"
+    style="min-width: 30%"
+    :label="label"
+    :borderless="borderless"
+    :disable="disabled"
+    class="full-width"
+  >
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section>
+          <q-item-label v-html="scope.opt.label" />
+        </q-item-section>
+        <q-item-section side>
+          <q-item-label caption>{{ scope.opt.description }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+    <template v-slot:after>
+      <div class="row items-baseline q-gutter-x-sm">
+        <q-input
+          v-model.number="width"
+          type="number"
+          min="256" max="4000"
+          mask="(#)###"
+          dense
+          :borderless="borderless"
+          input-class="text-center"
+          style="max-width: 54px"
+          :readonly="readonly"
+          :disable="disabled"
+          @update:model-value='updateModel()'
+        />
+        <span class="text-body1">x</span>
+        <q-input
+          v-model.number="height"
+          type="number"
+          min="256" max="4000"
+          mask="(#)###"
+          dense
+          :borderless="borderless"
+          input-class="text-center"
+          style="max-width: 54px"
+          :readonly="readonly"
+          :disable="disabled"
+          @update:model-value='updateModel()'
+        />
+      </div>
+    </template>
+  </q-select>
 </template>
 
 <script>
@@ -93,9 +95,9 @@ export default {
     }
   },
   computed: {
-    labelClass () {
+    computedClass () {
       const classObject = {}
-      classObject['row items-center no-wrap q-gutter-x-xs q-pb-md items-start'] = true
+      classObject['full-width row items-center no-wrap q-gutter-x-xs q-pb-md'] = true
       if (this.properties.center) classObject['justify-center'] = true
       return classObject
     },
@@ -115,7 +117,7 @@ export default {
         { label: i18n.t('KResolutionField.QHD_LABEL'), description: i18n.t('KResolutionField.QHD_DESCRIPTION'), value: '2560x1440', readonly: true },
         { label: i18n.t('KResolutionField.2K_LABEL'), description: i18n.t('KResolutionField.2K_DESCRIPTION'), value: '2048x1080', readonly: true },
         { label: i18n.t('KResolutionField.4K_LABEL'), description: i18n.t('KResolutionField.4K_DESCRIPTION'), value: '3840x2160', readonly: true },
-        { label: i18n.t('KResolutionField.PERSONALISED_LABEL'), value: '1280x721', readonly: false }
+        { label: i18n.t('KResolutionField.PERSONALIZED_LABEL'), value: '1280x721', readonly: false }
       ]
     },
     updateModel () {

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

@@ -11,13 +11,11 @@
     v-model="model"
     :label="label"
     :multiple="multiple"
-    :toggle="toggle"
-    :radio="radio"
-    :use-chips="chips"
     :options="options"
     emit-value
     map-options
     use-input
+    :dense="dense"
     :clearable="clearable"
     :error="hasError"
     :error-message="errorLabel"
@@ -30,6 +28,7 @@
     <!-- options display -->
     <template v-slot:option="scope">
       <q-item
+        :dense="dense"
         v-bind="scope.itemProps"
         :id="getId(scope.opt)"
       >
@@ -40,7 +39,19 @@
     </template>
     <!-- selected item display -->
     <template v-slot:selected-item="scope">
+      <q-chip v-if="chips && scope.opt.label"
+        removable
+        :dense="dense"
+        :color="scope.opt.color"
+        :textColor="scope.opt.textColor"
+        :tabindex="scope.tabindex"
+        @remove="scope.removeAtIndex(scope.index)"
+      >
       <span :class="selectedClass()">
+          {{ scope.opt.label }}
+        </span>
+      </q-chip>
+      <span v-else :class="selectedClass()">
         {{ scope.opt.label }}
       </span>
     </template>
@@ -70,19 +81,13 @@ export default {
   mixins: [baseField],
   computed: {
     multiple () {
-      return _.get(this.properties, 'multiselect', false)
+      return this.isMultiselect()
     },
     clearable () {
-      return _.get(this.properties, 'field.clearable', true)
-    },
-    toggle () {
-      return _.get(this.properties, 'field.toggle', false)
-    },
-    radio () {
-      return _.get(this.properties, 'field.radio', false)
+      return this.isClearable()
     },
     chips () {
-      return _.get(this.properties, 'field.chips', false)
+      return this.hasChips()
     },
     options () {
       let opts = _.map(_.get(this.properties, 'field.options', []), option => {
@@ -117,6 +122,15 @@ export default {
     }
   },
   methods: {
+    isMultiselect () {
+      return _.get(this.properties, 'multiselect', false)
+    },
+    isClearable () {
+      return _.get(this.properties, 'field.clearable', true)
+    },
+    hasChips () {
+      return _.get(this.properties, 'field.chips', false)
+    },
     getId (option) {
       let id = option.value
       // Complex object ?
@@ -132,7 +146,7 @@ export default {
       return _.kebabCase(id)
     },
     emptyModel () {
-      if (this.multiple) return []
+      if (this.isMultiselect()) return []
       return null
     },
     onFilter (pattern, update) {

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

@@ -1,5 +1,8 @@
 <template>
-  <k-text-area v-if="readOnly" :text="model"  :length="150" />
+  <KTextArea v-if="readOnly"
+    :text="model"
+    :length="150"
+  />
   <q-field v-else
     :value="model"
     :label="label"
@@ -14,6 +17,7 @@
         <q-editor
           :id="properties.name + '-field'"
           v-model="model"
+          :definitions="definitions"
           :toolbar="editorToolbar"
           content-class="text-grey-8"
           min-height="5rem"
@@ -23,7 +27,7 @@
     </template>
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
-      <k-action
+      <KAction
         :id="properties.name + '-helper'"
         :label="helperLabel"
         :icon="helperIcon"
@@ -40,8 +44,8 @@
 
 <script>
 import _ from 'lodash'
-import KTextArea from '../KTextArea.vue'
 import { baseField } from '../../mixins'
+import KTextArea from '../KTextArea.vue'
 
 export default {
   mixins: [baseField],
@@ -56,6 +60,13 @@ export default {
   },
   data () {
     return {
+      definitions: {
+        clear: {
+          tip: this.$t('KTextAreaField.CLEAR_TOOLTIP'),
+          icon: 'cancel',
+          handler: this.clear
+        }
+      },
       defaultToolbar: {
         xs: [
           ['bold', 'italic', 'underline', 'strike', 'align'],
@@ -65,7 +76,8 @@ export default {
             list: 'only-icons',
             options: ['left', 'center', 'right', 'justify']
           }],
-          ['undo', 'redo']
+          ['undo', 'redo'],
+          ['clear']
         ],
         'gt.xs': [
           ['bold', 'italic', 'underline', 'strike', 'unordered', 'ordered'],
@@ -77,7 +89,8 @@ export default {
             list: 'only-icons',
             options: ['left', 'center', 'right', 'justify']
           }],
-          ['undo', 'redo']
+          ['undo', 'redo'],
+          ['clear']
         ]
       }
     }
@@ -93,6 +106,11 @@ export default {
       })
       return configuration
     }
+  },
+  methods: {
+    emptyModel () {
+      return ''
+    }
   }
 }
 </script>

package/core/client/components/graphics/KIcon.vue

@@ -0,0 +1,64 @@
+<template>
+  <q-icon
+    v-bind="computedIcon"
+    class="k-icon"
+  >
+    <div
+      v-if="computedOverlay"
+      class="k-icon-overlay"
+    >
+      <q-icon v-bind="computedOverlay" />
+    </div>
+  </q-icon>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { getHtmlColor } from '../../utils'
+
+// Props
+const props = defineProps({
+  icon: {
+    type: [String, Object],
+    default: undefined
+  }
+})
+
+// Data
+const defaultColor = 'grey-9'
+
+// Computed
+const computedIcon = computed(() => {
+  if (!props.icon) return
+  if (_.isString(props.icon)) return { name: props.icon }
+  return _.omit(props.icon, ['overlay', 'color'])
+})
+const computedIconColor = computed(() => {
+  if (!props.icon) return
+  if (_.isString(props.icon)) return defaultColor
+  return getHtmlColor(props.icon.color, defaultColor)
+})
+const computedOverlay = computed(() => {
+  if (!props.icon && !props.icon.overlay) return
+  return _.omit(props.icon.overlay, ['color', 'rotation'])
+})
+const computedOverlayColor = computed(() => {
+  return getHtmlColor(_.get(props.icon.overlay, 'color', defaultColor))
+})
+const computedOverlayTransform = computed(() => {
+  return `rotate(${_.get(props.icon.overlay, 'rotation', 0)}deg)`
+})
+</script>
+
+<style lang="scss" scoped>
+.k-icon {
+  position: relative;
+  color: v-bind(computedIconColor);
+}
+.k-icon-overlay {
+  position: absolute;
+  color: v-bind(computedOverlayColor);
+  transform: v-bind(computedOverlayTransform);
+}
+</style>

package/core/client/components/index.js

@@ -1,6 +1,5 @@
 import KAvatar from './KAvatar.vue'
 import KChip from './KChip.vue'
-import KChipsPane from './KChipsPane.vue'
 import KContent from './KContent.vue'
 import KDialog from './KDialog.vue'
 import KExpandable from './KExpandable.vue'
@@ -16,7 +15,6 @@ import KVersion from './KVersion.vue'
 export {
   KAvatar,
   KChip,
-  KChipsPane,
   KContent,
   KDialog,
   KExpandable,
@@ -42,4 +40,4 @@ export * from './menu/index.js'
 export * from './screen/index.js'
 export * from './time/index.js'
 export * from './chart/index.js'
-export * from './team/index.js'
+export * from './messages/index.js'

package/core/client/components/input/KColorPicker.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <q-btn
+      id="color-picker"
+      :size="size"
+      round
+      :style="{ 'background-color': color }"
+    />
+    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+      <q-color
+        v-model="color"
+        :no-header-tabs="noHeaderTabs"
+        :no-footer="noFooter"
+        :format-model="formatModel"
+        :default-view="defaultView"
+      />
+    </q-popup-proxy>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getHtmlColor } from '../../utils'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '#FF0000'
+  },
+  formatModel: {
+    type: String,
+    default: 'hex'
+  },
+  noHeaderTabs: {
+    type: Boolean,
+    default: true
+  },
+  noFooter: {
+    type: Boolean,
+    default: false
+  },
+  defaultView: {
+    type: String,
+    default: 'palette',
+    validator: (value) => {
+      return ['spectrum', 'tune', 'palette'].includes(value)
+    }
+  },
+  size: {
+    type: String,
+    default: 'sm'
+  }
+})
+
+// Emit
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const color = ref(null)
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  color.value = getHtmlColor(value)
+}, { immediate: true })
+watch(color, newColor => {
+  emit('update:modelValue', newColor)
+})
+
+</script>