@kalisio/kdk 2.0.0 → 2.1.0

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

@@ -0,0 +1,80 @@
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    <div v-html="text" />
+  </div>
+  <div  v-else class="q-pa-md">
+    <p :class="labelClass">{{ label }}</p>
+    <div class="row q-gutter-x-sm justify-center" id="token-field">
+      <q-input
+        v-for="i in tokenLength"
+        :for="properties.name + '-field' + i"
+        :id="properties.name + '-field'  + i"
+        type="text"
+        mask="#"
+        v-model="fieldValues[i - 1]"
+        style="width: 5ch"
+        :disable="disabled"
+        outlined
+        :ref="el => updateFieldRef(el, i - 1)"
+        @update:model-value='updateModel(i)'
+        @blur="onChanged"
+        @keyup="onKeyUp($event, i - 1)"
+      >
+        <!-- Helper -->
+        <template v-if="helper" v-slot:hint>
+          <span v-html="helper"></span>
+        </template>
+      </q-input>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { baseField } from '../../mixins'
+
+export default {
+  mixins: [baseField],
+  data () {
+    return {
+      fieldValues: [],
+      fields: []
+    }
+  },
+  computed: {
+    tokenLength () {
+      return _.get(this.properties, 'tokenLength')
+    },
+    labelClass () {
+      const classObject = {}
+      classObject['row justify-center'] = true
+      if (this.errorLabel) classObject['text-red'] = true
+      return classObject
+    }
+  },
+  methods: {
+    updateModel (index) {
+      this.model = _.join(this.fieldValues, '')
+      this.onChanged()
+      this.focusNextInput(index)
+    },
+    updateFieldRef (element, index) {
+      if (element) this.fields[index] = element
+    },
+    focusNextInput (index) {
+      if (_.inRange(index, 0, this.tokenLength)) this.fields[index].select()
+    },
+    clearInput (index) {
+      this.fieldValues[index] = ''
+    },
+    onKeyUp (event, index) {
+      const key = event.key
+      if (key === 'ArrowLeft' || key === 'Backspace') {
+        this.focusNextInput(index - 1)
+        this.clearInput(index - 1)
+      }
+      if (key === 'ArrowRight') this.focusNextInput(index + 1)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    {{ model }}
+  </div>
+  <q-select v-else
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    v-model="model"
+    :label="label"
+    :options="options"
+    emit-value
+    map-options
+    :error="hasError"
+    :error-message="errorLabel"
+    :disable="disabled"
+    bottom-slots
+    @blur="onChanged"
+    @update:model-value='onChanged'
+
+  >
+    <!-- Options display -->
+    <template v-slot:option="scope">
+      <q-item
+        v-bind="scope.itemProps"
+        :id="scope.opt.value"
+      >
+        <q-item-section>
+          <q-item-label>{{ scope.opt.label }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+    <!-- Helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-select>
+</template>
+
+<script>
+import _ from 'lodash'
+import { baseField } from '../../mixins'
+import { Units } from '../../units'
+
+export default {
+  mixins: [baseField],
+  computed: {
+    options () {
+      const units = Units.getUnits(_.get(this.properties, 'field.quantity'))
+      return units.map(unit => {
+        // Check if we have a translation key or directly the label content
+        const label = _.get(unit, 'label', '')
+        return { value: unit.name, label: this.$tie(label) }
+      })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    <a href="model" target="_blank">{{ model }}</a>
+  </div>
+  <q-input v-else
+    :for="properties.name + '-field'"
+    :id="properties.name + '-field'"
+    type="url"
+    v-model="model"
+    :label="label"
+    clearable
+    @blur="onChanged"
+    @update:model-value="onChanged"
+    :disable="disabled"
+    :error="hasError"
+    :error-message="errorLabel"
+    bottom-slots
+  >
+    <!-- Helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-input>
+</template>
+
+<script>
+import { baseField } from '../../mixins'
+
+export default {
+  mixins: [baseField]
+}
+</script>

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="column">
+    <!--
+      Non-grouped fields
+     -->
+    <template v-for="field in fields" :key="field.name">
+      <div
+        v-if="!field.group"
+         class="row items-center"
+        v-bind:class="{ 'k-view-row': separators }"
+      >
+        <!-- Field label -->
+        <span class="col-xs-5 col-sm-4 col-3 text-caption ellipsis">
+          {{ getLabel(field) }}
+        </span>
+        <!-- Field value -->
+        <component class="col"
+          :is="field.component"
+          v-bind="$props"
+          :properties="field"
+          :readOnly="true"
+        />
+      </div>
+    </template>
+    <!--
+      Grouped fields
+     -->
+    <template v-for="group in groups" :key="group">
+      <q-expansion-item icon="las la-file-alt" :group="group" :label="$t(group)">
+        <template v-for="field in fields" :key="field.group + field.name">
+          <div
+            v-if="field.group === group"
+            class="row items-center"
+            v-bind:class="{ 'k-view-row': separators }"
+          >
+            <!-- Field label -->
+            <span class="col-xs-5 col-sm-4 col-3 text-caption ellipsis">
+              {{ getLabel(field) }}
+            </span>
+            <!-- Field value -->
+            <component class="col"
+              :is="field.component"
+              v-bind="$props"
+              :properties="field"
+              :readOnly="true" />
+          </div>
+        </template>
+      </q-expansion-item>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, watch } from 'vue'
+import { loadComponent } from '../../utils/index.js'
+import { i18n } from '../../i18n.js'
+
+// Props
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => null
+  },
+  values: {
+    type: Object,
+    default: () => null
+  },
+  separators: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Data
+const fields = ref([])
+const groups = ref([])
+
+// Watch
+watch(() => props.schema, () => {
+  refresh()
+}, { immediate: true })
+
+// Functions
+function getLabel (field) {
+  return i18n.tie(_.get(field, 'field.label'))
+}
+async function refresh () {
+  // clear the states
+  fields.value = []
+  groups.value = []
+  // build the fields
+  // 1- assign a name corresponding to the key to enable a binding between properties and fields
+  // 2- assign a component key corresponding to the component path
+  // 3- load the component if not previously loaded
+  if (props.schema) {
+    Object.keys(props.schema.properties).forEach(property => {
+      const field = props.schema.properties[property]
+      // 1- assign a name corresponding to the key to enable a binding between properties and fields
+      field.name = property
+      // 2 - qdds the field to the list of fields to be rendered
+      fields.value.push(field)
+      if (field.group && !this.groups.includes(field.group)) groups.value.push(field.group)
+      // 3- load the component
+      field.component = loadComponent(field.field.component)
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+  .k-view-row {
+    border-bottom: solid 1px $secondary;
+  }
+  .k-view-row:hover {
+    background: $secondary;
+  }
+</style>

package/core/client/components/form/index.js

@@ -0,0 +1,7 @@
+import KForm from './KForm.vue'
+import KView from './KView.vue'
+
+export {
+  KForm,
+  KView
+}

package/core/client/components/index.js

@@ -0,0 +1,48 @@
+import KAction from './KAction.vue'
+import KAvatar from './KAvatar.vue'
+import KBlock from './KBlock.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'
+import KLogo from './KLogo.vue'
+import KModal from './KModal.vue'
+import KPanel from './KPanel.vue'
+import KSponsor from './KSponsor.vue'
+import KScrollArea from './KScrollArea.vue'
+import KStamp from './KStamp.vue'
+import KTextArea from './KTextArea.vue'
+import KVersion from './KVersion.vue'
+
+export {
+  KAction,
+  KAvatar,
+  KBlock,
+  KChip,
+  KChipsPane,
+  KContent,
+  KDialog,
+  KExpandable,
+  KLogo,
+  KModal,
+  KPanel,
+  KSponsor,
+  KScrollArea,
+  KStamp,
+  KTextArea,
+  KVersion
+}
+
+export * from './layout/index.js'
+export * from './form/index.js'
+export * from './collection/index.js'
+export * from './editor/index.js'
+export * from './input/index.js'
+export * from './account/index.js'
+export * from './media/index.js'
+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'

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

@@ -0,0 +1,63 @@
+<template>
+  <KModal ref="modal" :buttons="getButtons()">
+    <div class="column q-gutter-sm">
+      <div class="row justify-between items-center q-gutter-sm">
+        <KPalette shape="round" v-model="selectedColor" />
+      </div>
+    </div>
+  </KModal>
+</template>
+
+<script>
+import KModal from '../KModal.vue'
+import KPalette from '../input/KPalette.vue'
+
+export default {
+  name: 'k-color-chooser',
+  components: {
+    KModal,
+    KPalette
+  },
+  emits: ['color-choosed'],
+  data () {
+    return {
+      selectedColor: 'dark'
+    }
+  },
+  methods: {
+    getButtons () {
+      return [
+        {
+          id: 'cancel-action',
+          label: 'KColorChooser.CANCEL_BUTTON',
+          icon: 'las la-times',
+          renderer: 'form-button',
+          outline: true,
+          handler: () => this.doClose()
+        },
+        {
+          id: 'done-button',
+          label: 'KColorChooser.DONE_BUTTON',
+          renderer: 'form-button',
+          handler: (event) => this.doDone(event)
+        }
+      ]
+    },
+    open (defaultColor) {
+      this.selectedColor = defaultColor
+      // Open the modal
+      this.$refs.modal.open()
+    },
+    iconSelected () {
+      return this.selectedIcon.name.length > 0
+    },
+    doDone (event) {
+      this.$emit('color-choosed', this.selectedColor)
+      this.doClose()
+    },
+    doClose (event) {
+      this.$refs.modal.close()
+    }
+  }
+}
+</script>