@it-enterprise/forcebpm-ui-kit 1.0.2-beta.26 → 1.0.2-beta.28

package/index.js

@@ -26,6 +26,7 @@ export { default as FDatePicker } from './src/f-date-picker/FDatePicker.vue'
 export { default as FMenuDatePicker } from './src/f-date-picker/FMenuDatePicker.vue'
 export { default as FTextFieldDate } from './src/f-date-picker/FTextFieldDate.vue'
 export { default as FUserGroupPicker } from './src/FUserGroupPicker.vue'
+export { default as FLangSwitcher } from './src/FLangSwitcher.vue'
 
 // Utils
 export { hexToRGBA, createRadialGradient } from './src/utils/color.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.26",
+  "version": "1.0.2-beta.28",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",

package/src/FLangSwitcher.vue

@@ -0,0 +1,47 @@
+<script setup>
+// FLangSwitcher
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps({
+  background: {
+    type: String,
+    default: 'transparent'
+  },
+  color: {
+    type: String,
+    default: 'text'
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const { locale } = useI18n()
+
+const locales = [
+  { code: 'uk', name: 'Українська', flag: 'UA' },
+  { code: 'ru', name: 'Русский', flag: 'RU' },
+  { code: 'en', name: 'English', flag: 'EN' }
+]
+
+const lang = computed(() => {
+  return locales.find(i => i.code === locale.value) || locales[0]
+})
+</script>
+
+<template>
+  <v-menu offset="0, -6" location="bottom right" content-class="f-lang-switcher-content">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" variant="text" height="32px" width="54px" class="pa-0 f-lang-switcher-btn" :class="`bg-${background}`" :color="color">
+        {{ lang.flag }}
+        <FIcon icon="chevron-down" :color="color" size="0.9em" />
+      </v-btn>
+    </template>
+
+    <v-list>
+      <v-list-item v-for="item in locales" :key="item.code" @click="emit('change', item.code)">
+        <v-list-item-title :class="item.code === lang.code ? 'text-primary' : `text-${color}`"> {{ item.flag }} ({{ item.name }}) </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>

package/src/FUserGroupPicker.vue

@@ -432,10 +432,6 @@ const selectMenuItem = id => {
   selectedMenuId.value = selectedMenuId.value === id ? null : id
 }
 
-const open = () => {
-  state.value = true
-}
-
 const close = () => {
   state.value = false
   search.value = ''
@@ -443,10 +439,19 @@ const close = () => {
 }
 
 const selectHandler = () => {
-  if (props.returnObject) {
-    modelValue.value = selectedItems.value
+  if (props.multiple) {
+    if (props.returnObject) {
+      modelValue.value = selectedItems.value
+    } else {
+      modelValue.value = selectedItems.value.map(item => item[props.itemValue])
+    }
   } else {
-    modelValue.value = selectedItems.value.map(item => item[props.itemValue])
+    const selectedItem = selectedItems.value[0]
+    if (props.returnObject) {
+      modelValue.value = selectedItem
+    } else {
+      modelValue.value = selectedItem[props.itemValue]
+    }
   }
 
   state.value = false
@@ -459,11 +464,11 @@ watch(tab, () => {
 
 // Sync with external modelValue changes
 watch(state, newState => {
-  if (newState && modelValue.value) {
-    // Reset
-    selectedIds.value = new Set()
-    selectedGroupIds.value = new Set()
+  // Reset
+  selectedIds.value = new Set()
+  selectedGroupIds.value = new Set()
 
+  if (newState && modelValue.value) {
     // Populate from modelValue
     const values = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
     for (const val of values) {
@@ -508,7 +513,6 @@ watch(state, newState => {
     no-space
     is-search
     :title="$t('user.executors')"
-    @open="open"
     @close="close"
   >
     <div class="user-group-picker">

package/src/assets/scss/input.scss

@@ -46,6 +46,10 @@
     .v-label {
       opacity: 1;
       color: rgb(var(--v-theme-text));
+      font-size: 0.95rem;
+      &.v-field-label--floating {
+        font-size: 0.7rem;
+      }
     }
 
     &.v-field--variant-outlined {
@@ -73,7 +77,7 @@
       padding-top: 16px;
       padding-bottom: 10px;
       padding-inline: 12px 12px;
-      min-height: auto;
+      min-height: 20px;
       font-size: 0.95em;
       line-height: 1em;
       color: rgb(var(--v-theme-subTitle));
@@ -84,6 +88,15 @@
         border-radius: 5.8px !important;
       }
     }
+    input {
+      min-height: 20px;
+      &:is(:-webkit-autofill, :autofill) {
+        -webkit-text-fill-color: rgb(var(--v-theme-subTitle)) !important;
+        -webkit-box-shadow: 0 0 0 1000px rgb(var(--v-theme-background)) inset !important;
+        background-color: rgb(var(--v-theme-background)) !important;
+        border-radius: 5.8px !important;
+      }
+    }
     input::placeholder {
       font-size: 0.9em;
       opacity: 0.9;
@@ -185,8 +198,9 @@
     }
   }
   .v-autocomplete__selection {
+    height: 20px;
     .f-chip.v-chip {
-      --v-chip-height: 22px;
+      --v-chip-height: 20px;
       padding: 0;
       border-radius: 16.8px;
       font-size: 0.75em;