@kalisio/kdk 2.1.8 → 2.2.0

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

@@ -30,8 +30,18 @@
       </q-option-group>
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :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>

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

@@ -26,8 +26,18 @@
       />
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-input>
 </template>

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

@@ -16,9 +16,19 @@
     @blur="onChanged"
     @update:model-value="onChanged"
   >
-     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <!-- Helper -->
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-input>
 </template>

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

@@ -49,8 +49,18 @@
       </q-item>
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-select>
 </template>

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

@@ -0,0 +1,126 @@
+<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>
+</template>
+
+<script>
+import _ from 'lodash'
+import { baseField } from '../../mixins'
+import { i18n } from '../../i18n.js'
+
+export default {
+  mixins: [baseField],
+  data () {
+    return {
+      width: 1280,
+      height: 720,
+      resolution: undefined
+    }
+  },
+  watch: {
+    resolution: {
+      immediate: true,
+      handler (value) {
+        if (!value) this.resolution = this.getResolutions()[1]
+        else {
+          const size = _.split(this.resolution.value, 'x')
+          this.width = size[0]
+          this.height = size[1]
+        }
+        this.updateModel()
+      }
+    },
+    width: {
+      handler (value) {
+        if (value < 256) this.width = 256
+        if (value > 4000) this.width = 4000
+        this.updateModel()
+      }
+    },
+    height: {
+      handler (value) {
+        if (value < 256) this.height = 256
+        if (value > 4000) this.height = 4000
+        this.updateModel()
+      }
+    }
+  },
+  computed: {
+    labelClass () {
+      const classObject = {}
+      classObject['row items-center no-wrap q-gutter-x-xs q-pb-md items-start'] = true
+      if (this.properties.center) classObject['justify-center'] = true
+      return classObject
+    },
+    borderless () {
+      return this.properties.borderless ? this.properties.borderless : false
+    },
+    readonly () {
+      return this.resolution.readonly
+    }
+  },
+  methods: {
+    getResolutions () {
+      return [
+        { label: i18n.t('KResolutionField.SD_LABEL'), description: i18n.t('KResolutionField.SD_DESCRIPTION'), value: '640x480', readonly: true },
+        { label: i18n.t('KResolutionField.HD_LABEL'), description: i18n.t('KResolutionField.HD_DESCRIPTION'), value: '1280x720', readonly: true },
+        { label: i18n.t('KResolutionField.FHD_LABEL'), description: i18n.t('KResolutionField.FHD_DESCRIPTION'), value: '1920x1080', readonly: true },
+        { 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 }
+      ]
+    },
+    updateModel () {
+      this.model = { width: this.width, height: this.height }
+    }
+  }
+}
+</script>

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

@@ -24,8 +24,18 @@
       />
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :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>

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

@@ -27,7 +27,7 @@
     @blur="onChanged"
     @update:model-value="onChanged"
   >
-    <!-- pptions display -->
+    <!-- options display -->
     <template v-slot:option="scope">
       <q-item
         v-bind="scope.itemProps"
@@ -44,9 +44,19 @@
         {{ scope.opt.label }}
       </span>
     </template>
-    <!-- helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <!-- Helper -->
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-select>
 </template>

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

@@ -18,8 +18,18 @@
     @update:model-value='onChanged'
   >
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-input>
 </template>

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

@@ -22,8 +22,18 @@
       </div>
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :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>
@@ -75,7 +85,7 @@ export default {
   computed: {
     editorToolbar () {
       let configuration
-      _.forEach(this.toolbar || this.defaultToolbar, (value, key) => {
+      _.forEach(this.properties.toolbar || this.toolbar || this.defaultToolbar, (value, key) => {
         if (_.get(this.$q.screen, key)) {
           configuration = value
           return false

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

@@ -22,8 +22,18 @@
       />
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :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>

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

@@ -21,8 +21,18 @@
         @keyup="onKeyUp($event, i - 1)"
       >
         <!-- Helper -->
-        <template v-if="helper" v-slot:hint>
-          <span v-html="helper"></span>
+        <template v-if="hasHelper" v-slot:append>
+          <k-action
+            :id="properties.name + '-helper'"
+            :label="helperLabel"
+            :icon="helperIcon"
+            :tooltip="helperTooltip"
+            :url="helperUrl"
+            :dialog="helperDialog"
+            :context="helperContext"
+            @dialog-confirmed="onHelperDialogConfirmed"
+            color="primary"
+          />
         </template>
       </q-input>
     </div>

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

@@ -30,8 +30,18 @@
       </q-item>
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-select>
 </template>

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

@@ -17,8 +17,18 @@
     bottom-slots
   >
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-input>
 </template>

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

@@ -18,18 +18,9 @@
           dense />
       </div>
       <div id="icons" class="row justify-start items-center q-gutter-sm">
-        <template v-for="icon in iconsPage">
-          <q-icon :id="getIconId(icon.name)" v-if="icon.name === selectedIcon.name" :key="icon.name"
-            style="border-bottom: 0.25rem solid" :color="selectedIcon.color" :name="icon.name" size="2rem" @click="onIconSelected(icon)">
-            <q-tooltip>
-              {{icon.title}}
-            </q-tooltip>
-          </q-icon>
-          <q-icon :id="getIconId(icon.name)" v-if="icon.name !== selectedIcon.name" :key="icon.name"
-            color="grey-7" :name="icon.name" size="2rem" @click="onIconSelected(icon)">
-            <q-tooltip>
-              {{icon.title}}
-            </q-tooltip>
+        <template v-for="icon in iconsPage" :key="icon.name">
+          <q-icon :id="getIconId(icon.name)" :color="getIconColor(icon.name)" :name="icon.name" size="2rem" @click="onIconSelected(icon)">
+            <q-tooltip>{{icon.title}}</q-tooltip>
           </q-icon>
         </template>
       </div>
@@ -106,6 +97,13 @@ export default {
     getIconId (name) {
       return _.kebabCase(name)
     },
+    getIconColor (name) {
+      let color = 'grey-7'
+      if (name === this.selectedIcon.name) {
+        color = this.selectedIcon.color === 'white' ? 'black' : this.selectedIcon.color
+      }
+      return color
+    },
     getIconsForCategory (category) {
       const categoryIcons = this.categoryInfos[this.selectedCategory.value].icons
       const icons = []

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

@@ -1,11 +1,12 @@
 <template>
-  <div class="row justify-start q-gutter-sm full-width">
+  <div class="row justify-center q-gutter-xs full-width">
     <template v-for="(color, index) in colors" :key="index">
       <q-btn
         :id="'style-color-' + color"
         :round="shape === 'round'"
         :icon="modelValue === color ? 'las la-check' : ''"
         :color="color"
+        :text-color="color === 'white' ? 'black' : 'white'"
         small
         @click="$emit('update:modelValue', color)" />
     </template>

package/core/client/components/layout/KPage.vue

@@ -18,7 +18,7 @@
       Managed stickies
       Be careful of the order
      -->
-    <!-- bottom -->
+    <!-- bottom pane -->
     <q-page-sticky position="bottom" class="k-sticky">
       <div id="bottom-pane" v-show="hasBottomPaneComponents" class="column items-center">
         <KOpener id="bottom-opener" v-if="bottomPane.opener" v-model="isBottomPaneOpened" position="bottom" />
@@ -34,7 +34,7 @@
         </div>
       </div>
     </q-page-sticky>
-    <!-- right -->
+    <!-- right pane -->
     <q-page-sticky position="right" class="k-sticky">
       <div id="right-pane" v-show="hasRightPaneComponents" class="row items-center">
         <KOpener id="right-opener" v-if="rightPane.opener" v-model="isRightPaneOpened" position="right" />
@@ -51,7 +51,7 @@
         </div>
       </div>
     </q-page-sticky>
-    <!-- top -->
+    <!-- top pane -->
     <q-page-sticky position="top" class="k-sticky">
       <div id="top-pane" v-show="hasTopPaneComponents" class="column items-center">
         <div>
@@ -113,7 +113,7 @@
         :style="`max-width: ${bottomWindowSize[0]}px; max-height: ${bottomWindowSize[1]};px`"
       />
     </q-page-sticky>
-    <!-- left -->
+    <!-- left pane -->
     <q-page-sticky position="left" class="k-sticky">
       <div id="left-pane" v-show="hasLeftPaneComponents" class="row items-center">
         <div>
@@ -309,6 +309,7 @@ body {
   background-color: #FFFFFF;
   border: solid 1px lightgrey;
   border-radius: 3px;
+  position: relative;
 }
 .k-pane:hover, .k-left-pane:hover {
   border: solid 1px $primary;

package/core/client/components/layout/KWindow.vue

@@ -37,13 +37,13 @@
         dense
         direction="horizontal"
         action-renderer="button"
-        :content="controls"
+        :content="headerControls"
         class="q-pr-xs"
       />
       <KPanel
         v-else
         id="window-controls"
-        :content="controls"
+        :content="headerControls"
       />
     </div>
     <!--
@@ -75,7 +75,7 @@
       <q-resize-observer @resize="onFooterResized" />
       <!-- window grip -->
       <q-icon
-        v-if="currentWindow.state !== 'maximized'"
+        v-if="currentWindow.controls.resize && currentWindow.state !== 'maximized'"
         class="k-window-grip"
         name="las la-slash"
         size="10px"
@@ -161,7 +161,7 @@ const menu = computed(() => {
       id: `${props.placement}-window-menu`,
       component: 'menu/KMenu',
       icon: 'las la-cube',
-      size: 'sm',
+      dense: true,
       tooltip: 'Widgets',
       actionRenderer: 'item',
       content: widgetMenuItems
@@ -169,14 +169,14 @@ const menu = computed(() => {
   }
   return menu
 })
-const controls = computed(() => {
+const headerControls = computed(() => {
   return [{
     id: `pin-${props.placement}-window`,
     icon: pinIcons[props.placement],
     size: 'sm',
     tooltip: 'KWindow.PIN_ACTION',
     class: 'k-window-control',
-    visible: currentWindow.state === 'floating',
+    visible: currentWindow.controls.pin && currentWindow.state === 'floating',
     handler: () => Layout.setWindowState(props.placement, 'pinned')
   }, {
     id: `unpin-${props.placement}-window`,
@@ -184,27 +184,28 @@ const controls = computed(() => {
     size: 'sm',
     tooltip: 'KWindow.RESTORE_ACTION',
     class: 'k-window-control',
-    visible: currentWindow.state === 'pinned' && restoreGeometry,
+    visible: currentWindow.controls.unpin && currentWindow.state === 'pinned' && restoreGeometry,
     handler: () => Layout.setWindowState(props.placement, 'floating')
   }, {
     id: `unpin-${props.placement}-window`,
     icon: 'las la-expand',
     size: 'sm',
     tooltip: 'KWindow.MAXIMIZE_ACTION',
-    visible: currentWindow.state !== 'maximized',
+    visible: currentWindow.controls.maximize && currentWindow.state !== 'maximized',
     handler: () => Layout.setWindowState(props.placement, 'maximized')
   }, {
     id: `restore-${props.placement}-window`,
     icon: 'las la-compress',
     size: 'sm',
     tooltip: 'KWindow.RESTORE_ACTION',
-    visible: currentWindow.state === 'maximized',
+    visible: currentWindow.controls.restore && currentWindow.state === 'maximized',
     handler: () => Layout.setWindowState(props.placement, backupState)
   }, {
     id: `close-${props.placement}-window`,
     icon: 'las la-times',
     size: 'sm',
     tooltip: 'KWindow.CLOSE_ACTION',
+    visible: currentWindow.controls.close,
     handler: () => Layout.setWindowVisible(props.placement, false)
   }]
 })
@@ -288,7 +289,6 @@ function refresh (newState, oldState) {
       logger.warn(`[KDK] invalid window state ${currentWindow.state}`)
   }
 }
-
 function setPinnedGeometry () {
   const sizeRatio = currentWindow.sizePolicy.pinned[$q.screen.name]
   const w = $q.screen.width * sizeRatio[0] / 100