@kalisio/kdk 2.0.0 → 2.1.0

package/core/client/components/menu/KMenu.vue

@@ -0,0 +1,147 @@
+<template>
+  <q-btn-dropdown
+    v-if="hasContent"
+    :id="id"
+    :icon="icon"
+    :color="color"
+    :size="size"
+    :dropdown-icon="dropdownIcon"
+    :no-icon-animation="!dropdownAnimation"
+    :disable="disabled"
+    :dense="dense"
+    :persistent="persistent"
+    :auto-close="autoClose"
+    :menu-anchor="direction === 'vertical' ? 'bottom left' : 'bottom middle' "
+    menu-self="top left"
+    flat
+    rounded
+    no-caps
+    @click="onClicked">
+      <template v-slot:label>
+        <div class="row items-center no-wrap">
+          <q-badge v-if="badge" v-bind="badge" />
+          <div class="text-center">
+            {{ $tie(label) }}
+          </div>
+        </div>
+      </template>
+      <KPanel
+        id="menu-entries"
+        :content="content"
+        :mode="mode"
+        :context="context"
+        :action-renderer="actionRenderer"
+        :direction="direction"
+        class="no-wrap"
+      />
+  </q-btn-dropdown>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import KPanel from '../KPanel.vue'
+
+// Props
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: undefined
+  },
+  color: {
+    type: String,
+    default: 'grey-9'
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  tooltip: {
+    type: String,
+    default: undefined
+  },
+  dropdownIcon: {
+    type: String,
+    default: undefined
+  },
+  dropdownAnimation: {
+    type: Boolean,
+    default: true
+  },
+  badge: {
+    type: Object,
+    default: () => null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  persistent: {
+    type: Boolean,
+    default: false
+  },
+  propagate: {
+    type: Boolean,
+    default: true
+  },
+  content: {
+    type: [Object, Array],
+    default: () => null
+  },
+  mode: {
+    type: String,
+    default: undefined
+  },
+  filter: {
+    type: Object,
+    default: () => {}
+  },
+  context: {
+    type: Object,
+    default: () => null
+  },
+  direction: {
+    type: String,
+    default: () => 'vertical'
+  },
+  actionRenderer: {
+    type: String,
+    default: 'button',
+    validator: (value) => {
+      return ['button', 'item'].includes(value)
+    }
+  }
+})
+
+// Computed
+const hasContent = computed(() => {
+  return !_.isEmpty(props.content)
+})
+
+// Functions
+function onClicked (event) {
+  if (!props.propagate) event.stopPropagation()
+}
+</script>
+
+<style lang="scss" scoped>
+  .q-btn-dropdown__arrow {
+    margin-left: 0px !important;
+  }
+</style>

package/core/client/components/menu/KRadialFab.vue

@@ -0,0 +1,122 @@
+<!-- Adapted from https://github.com/vparadis/vue-radial-menu -->
+<template>
+  <div>
+    <span @click="toggle"><slot name="closed-menu-container" v-if="!isOpen"/></span>
+    <span @click="toggle"><slot name="open-menu-container" v-if="isOpen"/></span>
+    <KRadialFabItem v-if="isOpen"
+      v-for="(action, index) in actions"
+      :key="index" :width="itemSize" :height="itemSize"
+      :left="items[index].left" :top="items[index].top" :handler="items[index].handler">
+      <slot name="menu-item" v-bind="action"></slot>
+    </KRadialFabItem>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import KRadialFabItem from './KRadialFabItem.vue'
+
+const emit = defineEmits(['open', 'close'])
+
+// Props
+const props = defineProps({
+  actions: {
+    type: Array,
+    required: true
+  },
+  startAngle: {
+    type: Number,
+    default: 0
+  },
+  endAngle: {
+    type: Number,
+    default: 180
+  },
+  itemSize: {
+    type: Number,
+    default: 36
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  radius: {
+    type: Number,
+    default: 100
+  },
+  closeOnClick: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Data
+const isOpen = ref(false)
+
+// Computed
+const items = computed(() => {
+  const angle = props.endAngle - props.startAngle
+  const angleStep = angle / Math.max((props.actions.length - 1), 1)
+  const angles = (props.actions.length === 1
+    ? [0.5 * angle * Math.PI / 180]
+    : props.actions.map(
+      (action, index) => props.startAngle + (props.offset + angleStep * index) * Math.PI / 180
+    ))
+
+  return props.actions.map((action, index) => ({
+    left: -1 * (Math.cos(angles[index]) * props.radius), // -1 to have the items in the right order
+    top: -Math.sin(angles[index]) * props.radius,
+    handler: (props.closeOnClick ? close : null) // To prevent double emiting click event
+  }))
+})
+
+// Functions
+function open () {
+  if (!isOpen.value) {
+    isOpen.value = true
+    emit('open')
+  }
+}
+function close () {
+  if (isOpen.value) {
+    isOpen.value = false
+    emit('close')
+  }
+}
+function toggle () {
+  if (isOpen.value) close()
+  else open()
+}
+
+// Expose
+defineExpose({
+  isOpen,
+  open,
+  close,
+  toggle
+})
+</script>
+
+<style lang="scss">
+  .vue-radial-menu-wrapper {
+    position: relative;
+    user-select: none;
+    border-radius: 50%;
+    font-size: 32px;
+    font-weight: bold;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 0 0 rgba(0, 0, 0, 0.16);
+  }
+  .vue-radial-menu-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    position: relative;
+    z-index: 6;
+  }
+  .vue-radial-menu-container.open {
+    transform: rotateZ(45deg);
+  }
+</style>

package/core/client/components/menu/KRadialFabItem.vue

@@ -0,0 +1,73 @@
+<!-- Adapted from https://github.com/vparadis/vue-radial-menu -->
+<template>
+  <Transition name="radial-vue-radial-menu-item">
+    <div
+      :style="style"
+      class="vue-radial-menu-item"
+      @click="handleClick">
+      <slot></slot>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const emit = defineEmits(['click'])
+
+// Props
+const props = defineProps({
+  top: {
+    type: Number,
+    required: true
+  },
+  left: {
+    type: Number,
+    required: true
+  },
+  height: {
+    type: Number,
+    required: true
+  },
+  width: {
+    type: Number,
+    required: true
+  },
+  handler: {
+    type: Function,
+    default: null
+  }
+})
+
+// Computed
+const style = computed(() => ({
+  top: Math.round(props.top) + 'px',
+  left: Math.round(props.left) + 'px',
+  width: Math.round(props.width) + 'px',
+  height: Math.round(props.height) + 'px'
+}))
+
+// Functions
+function handleClick (event) {
+  emit('click', event)
+  if (props.handler) props.handler(event)
+}
+</script>
+
+<style lang="scss">
+  .vue-radial-menu-item {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s ease;
+    transform: none;
+    user-select: none;
+  }
+  .radial-vue-radial-menu-item-enter,
+  .radial-vue-radial-menu-item-leave-to {
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import KMenu from './KMenu.vue'
+import KRadialFab from './KRadialFab.vue'
+import KRadialFabItem from './KRadialFabItem.vue'
+
+export {
+  KMenu,
+  KRadialFab,
+  KRadialFabItem
+}

package/core/client/components/screen/KEndpointScreen.vue

@@ -0,0 +1,80 @@
+<template>
+  <KScreen title="KEndpointScreen.TITLE" :actions="actions">
+    <div class="column items-center q-gutter-y-md">
+      <KForm
+        ref="refForm"
+        class="full-width"
+        :schema="getFormSchema()"
+        @form-ready="onFormReady"
+      />
+      <div class="row full-width justify-around q-gutter-x-md">
+        <KAction
+          id="cancel-button"
+          label="KEndpointScreen.RESET_LABEL"
+          renderer="form-button"
+          :handler="onReset"
+        />
+        <KAction
+          id="apply-button"
+          label="KEndpointScreen.APPLY_LABEL"
+          renderer="form-button"
+          :handler="onApplied"
+        />
+      </div>
+    </div>
+  </KScreen>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../../api.js'
+import KScreen from './KScreen.vue'
+import KForm from '../form/KForm.vue'
+import KAction from '../KAction.vue'
+
+// Data
+const router = useRouter()
+const refForm = ref()
+const actions = ref(_.get(config, 'screens.endpoint.actions', []))
+
+// Functions
+function getFormSchema () {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/change-endpoint.json#',
+    title: 'Change Endpoint form',
+    description: 'Change remote service URL form',
+    type: 'object',
+    properties: {
+      baseUrl: {
+        type: 'string',
+        format: 'uri',
+        field: {
+          component: 'form/KTextField',
+          label: 'KEndpointScreen.BASE_URL_FIELD_LABEL'
+        }
+      }
+    }
+  }
+}
+function onReset () {
+  api.setBaseUrl('')
+  router.push({ name: 'login' })
+  window.location.reload()
+}
+function onApplied (data) {
+  const result = refForm.value.validate()
+  if (result.isValid) {
+    api.setBaseUrl(result.values.baseUrl)
+    window.location.reload()
+  }
+}
+function onFormReady (form) {
+  refForm.value.fill({
+    baseUrl: api.getBaseUrl()
+  })
+}
+</script>

package/core/client/components/screen/KErrorScreen.vue

@@ -0,0 +1,24 @@
+<template>
+  <KScreen
+    :title="message"
+    :actions="actions"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import KScreen from './KScreen.vue'
+
+// Data
+const message = ref(_.get(config, 'screens.error.message', 'KErrorScreen.MESSAGE'))
+const defaultActions = [{
+  id: 'go-home-action',
+  icon: 'las la-home',
+  label: 'KErrorScreen.GO_HOME_LABEL',
+  renderer: 'form-button',
+  route: { name: 'index' }
+}]
+const actions = ref(_.get(config, 'screens.error.actions', defaultActions))
+</script>

package/core/client/components/screen/KLoginScreen.vue

@@ -0,0 +1,79 @@
+<template>
+  <KScreen
+    :actions="actions"
+  >
+    <div class="column items-center q-gutter-y-md">
+      <KForm
+        ref="refForm"
+        class="full-width"
+        :schema="getFormSchema()"
+      />
+      <KAction
+        id="login-button"
+        label="KLoginScreen.LOGIN_LABEL"
+        renderer="form-button"
+        :loading="loading"
+        :handler="onLogin"
+      />
+    </div>
+  </KScreen>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import { useQuasar } from 'quasar'
+import { i18n } from '../../i18n.js'
+import KScreen from './KScreen.vue'
+import KForm from '../form/KForm.vue'
+import KAction from '../KAction.vue'
+import { login } from '../../utils/utils.session.js'
+
+// Data
+const $q = useQuasar()
+const refForm = ref()
+const actions = ref(_.get(config, 'screens.login.actions', []))
+const loading = ref(false)
+
+// Functions
+function getFormSchema () {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http:/kalisio.xyz/schemas/login.json#',
+    title: 'Login form',
+    type: 'object',
+    properties: {
+      email: {
+        type: 'string',
+        format: 'email',
+        field: {
+          component: 'form/KEmailField',
+          label: 'KLoginScreen.EMAIL_FIELD_LABEL'
+        }
+      },
+      password: {
+        type: 'string',
+        format: 'password',
+        field: {
+          component: 'form/KPasswordField',
+          label: 'KLoginScreen.PASSWORD_FIELD_LABEL'
+        }
+      }
+    },
+    required: ['email', 'password']
+  }
+}
+async function onLogin () {
+  const result = refForm.value.validate()
+  if (result.isValid) {
+    loading.value = true
+    try {
+      await login(result.values.email, result.values.password)
+    } catch (error) {
+      $q.notify({ type: 'negative', message: i18n.t('KLoginScreen.LOGIN_ERROR') })
+    }
+    loading.value = false
+  }
+}
+</script>

package/core/client/components/screen/KLogoutScreen.vue

@@ -0,0 +1,20 @@
+<template>
+  <KScreen
+    title="KLogoutScreen.TITLE"
+    :actions="actions"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import KScreen from './KScreen.vue'
+import { logout } from '../../utils/utils.session.js'
+
+// Data
+const actions = ref(_.get(config, 'screens.logout.actions', []))
+
+// Immediate
+logout()
+</script>

package/core/client/components/screen/KRegisterScreen.vue

@@ -0,0 +1,114 @@
+<template>
+  <KScreen message="KRegisterScreen.MESSAGE" :actions="actions">
+    <div class="column items-center q-gutter-y-md">
+      <KForm
+        ref="refForm"
+        class="full-width"
+        :schema="getFormSchema()"
+      />
+      <KAction
+        id="register-button"
+        label="KRegisterScreen.REGISTER_LABEL"
+        renderer="form-button"
+        :loading="loading"
+        :handler="onRegister"
+      />
+    </div>
+  </KScreen>
+</template>
+
+<script setup>
+import { getLocale } from '../../utils/utils.locale.js'
+import { register } from '../../utils/utils.session.js'
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import { useQuasar } from 'quasar'
+import { i18n } from '../../i18n.js'
+import KScreen from './KScreen.vue'
+import KForm from '../form/KForm.vue'
+import KAction from '../KAction.vue'
+
+// Data
+const $q = useQuasar()
+const refForm = ref()
+const actions = ref(_.get(config, 'screens.register.actions', []))
+const loading = ref(false)
+const domain = _.get(config, 'domain')
+
+// Function
+function getFormSchema () {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/register.json#',
+    title: 'Registration Form',
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        minLength: 3,
+        maxLength: 128,
+        field: {
+          component: 'form/KTextField',
+          label: 'KRegisterScreen.NAME_FIELD_LABEL'
+        }
+      },
+      email: {
+        type: 'string',
+        format: 'email',
+        field: {
+          component: 'form/KEmailField',
+          label: 'KRegisterScreen.EMAIL_FIELD_LABEL'
+        }
+      },
+      password: {
+        type: 'string',
+        format: 'password',
+        field: {
+          component: 'form/KPasswordField',
+          label: 'KRegisterScreen.PASSWORD_FIELD_LABEL'
+        }
+      },
+      confirmPassword: {
+        type: 'string',
+        format: 'password',
+        const: {
+          $data: '1/password'
+        },
+        field: {
+          component: 'form/KPasswordField',
+          label: 'KRegisterScreen.CONFIRM_PASSWORD_FIELD_LABEL'
+        }
+      },
+      consentTerms: {
+        type: 'boolean',
+        default: false,
+        enum: [true],
+        field: {
+          component: 'form/KToggleField',
+          label: i18n.t('KRegisterScreen.ACCEPT_TERMS_LABEL'),
+          helper: i18n.t('KRegisterScreen.ACCEPT_TERMS_HELPER', { domain }),
+          errorLabel: i18n.t('KRegisterScreen.ACCEPT_TERMS_ERROR_LABEL', { domain }),
+          'checked-icon': 'check',
+          'unchecked-icon': 'clear'
+        }
+      }
+    },
+    required: ['name', 'email', 'password', 'confirmPassword', 'consentTerms']
+  }
+}
+async function onRegister (event) {
+  const result = refForm.value.validate()
+  if (result.isValid) {
+    loading.value = true
+    // Add the locale information
+    result.values.locale = getLocale()
+    try {
+      await register(result.values)
+    } catch (error) {
+      $q.notify({ type: 'negative', message: i18n.t('KRegisterScreen.REGISTER_ERROR') })
+    }
+    loading.value = false
+  }
+}
+</script>