bfg-common 1.4.781 → 1.4.782

package/components/atoms/alert/lib/models/enums.ts

@@ -1,12 +1,12 @@
-export enum UI_E_IconsByStatus {
-  'alert-danger' = 'exclamation-circle',
-  'alert-warning' = 'exclamation-triangle',
-  'alert-info' = 'info-circle',
-  'alert-success' = 'success-circle',
-}
-
-export enum UI_E_IconsByStatusNotification {
-  'success' = 'success-circle',
-  'error' = 'info',
-  'warning' = 'warning',
-}
+export enum UI_E_IconsByStatus {
+  'alert-danger' = 'exclamation-circle',
+  'alert-warning' = 'exclamation-triangle',
+  'alert-info' = 'info-circle',
+  'alert-success' = 'success-circle',
+}
+
+export enum UI_E_IconsByStatusNotification {
+  'success' = 'success-circle',
+  'error' = 'info',
+  'warning' = 'warning',
+}

package/components/atoms/alert/lib/models/interfaces.ts

@@ -1,27 +1,27 @@
-import type { UI_T_NotificationStatus } from '~/components/atoms/alert/lib/models/types'
-
-interface UI_I_NotificationMessageItem {
-  title: string
-  descriptions: string[]
-}
-
-export interface UI_I_NotificationMessage {
-  status: UI_T_NotificationStatus
-  messages: UI_I_NotificationMessageItem[]
-  headline: string
-  id?: number
-  isShow?: boolean
-  timeout?: number
-}
-
-export interface UI_I_NotificationHide {
-  id: number
-  clear?: boolean
-}
-
-export interface UI_I_NotificationMsgBody {
-  // временно потом удалить
-  show: boolean
-  title: string
-  desc: string
-}
+import type { UI_T_NotificationStatus } from '~/components/atoms/alert/lib/models/types'
+
+interface UI_I_NotificationMessageItem {
+  title: string
+  descriptions: string[]
+}
+
+export interface UI_I_NotificationMessage {
+  status: UI_T_NotificationStatus
+  messages: UI_I_NotificationMessageItem[]
+  headline: string
+  id?: number
+  isShow?: boolean
+  timeout?: number
+}
+
+export interface UI_I_NotificationHide {
+  id: number
+  clear?: boolean
+}
+
+export interface UI_I_NotificationMsgBody {
+  // временно потом удалить
+  show: boolean
+  title: string
+  desc: string
+}

package/components/atoms/alert/lib/models/types.ts

@@ -1,11 +1,11 @@
-export type UI_T_NotificationStatus = 'success' | 'error' | 'warning'
-export type UI_T_NotificationIcon = 'success-circle' | 'info' | 'warning'
-
-export type UI_T_AlertStatus = 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
-export type UI_T_AlertIcon = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'success-circle'
-
-
-
-
-
-
+export type UI_T_NotificationStatus = 'success' | 'error' | 'warning'
+export type UI_T_NotificationIcon = 'success-circle' | 'info' | 'warning'
+
+export type UI_T_AlertStatus = 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
+export type UI_T_AlertIcon = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'success-circle'
+
+
+
+
+
+

package/components/atoms/autocomplete/Autocomplete.vue

@@ -1,243 +1,281 @@
-<template>
-  <div class="autocomplete" @click.stop>
-    <div class="content-search">
-      <div v-show="props.loading" class="loader">
-        <atoms-loader-pre-loader
-          id="loader"
-          :test-id="`${props.testId}-pre-loader`"
-          class="content-area__loading"
-          :show="true"
-        />
-      </div>
-      <div class="search-icon">
-        <atoms-the-icon
-          fill="#666"
-          stroke-width="10"
-          class="alert-icon search-icon"
-          name="search"
-        />
-      </div>
-      <input
-        :id="`${props.testId}-search-input`"
-        v-model.trim="search"
-        :data-id="`${props.testId}-search-input`"
-        type="text"
-        class="search-input"
-        autocomplete="off"
-        :placeholder="props.placeholder"
-        @input="onSearch"
-      />
-    </div>
-    <div
-      v-show="isShow"
-      :class="['content-filtered', { active: items.length }]"
-    >
-      <ul class="dropdown-menu filtered-items">
-        <li
-          v-for="(item, key) in items"
-          :key="`${item}_${key}`"
-          :class="['item', { active: key === selectedTabIndex }]"
-          :data-id="item.testId"
-          @mouseenter="selectedTabIndex = key"
-          @click="onSelect(key)"
-        >
-          {{ item.firstText }}<b>{{ item.secondText }}</b
-          >{{ item.thirdText }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    placeholder: string
-    items: string[]
-    loading?: boolean
-    testId?: string
-    ms?: number
-  }>(),
-  {
-    testId: 'ui-autocomplete',
-    ms: 500,
-    loading: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'search', value: string): void
-  (event: 'select', value: string): void
-}>()
-
-const search = ref<string>('')
-
-let timer: NodeJS.Timeout
-const onSearch = (): void => {
-  clearTimeout(timer)
-  timer = setTimeout(
-    (value) => {
-      emits('search', value)
-    },
-    props.ms,
-    search.value
-  )
-}
-
-const items = computed<any[]>(() => {
-  return [...props.items].map((text) => {
-    const term = search.value.toLowerCase()
-    const texts = text.toLowerCase().split(term)
-    return {
-      firstText: texts[0],
-      secondText: term,
-      thirdText: texts[1],
-      testId: `${term}-filtered-item`,
-    }
-  })
-})
-
-const selectedTabIndex = ref<number>(0)
-const onSelect = (key: number): void => {
-  search.value = props.items[key]
-  emits('select', search.value)
-  isHide.value = true
-}
-
-const isHide = ref<boolean>(false)
-const isShow = computed<boolean>(
-  () => Boolean(items.value.length) && !isHide.value
-)
-
-const onKeyDown = (event: KeyboardEvent): void => {
-  switch (event.code) {
-    case 'ArrowUp':
-      prevTabItem()
-      break
-    case 'ArrowDown':
-      nextTabItem()
-      break
-    case 'Enter':
-      event.preventDefault()
-      onSelect(selectedTabIndex.value)
-      break
-    case 'Tab':
-      isHide.value = true
-      break
-  }
-}
-
-const nextTabItem = (): void => {
-  if (selectedTabIndex.value === items.value.length - 1)
-    selectedTabIndex.value = 0
-  else selectedTabIndex.value++
-}
-
-const prevTabItem = (): void => {
-  if (selectedTabIndex.value === 0)
-    selectedTabIndex.value = items.value.length - 1
-  else selectedTabIndex.value--
-}
-
-watch(
-  () => props.items,
-  (newValue) => {
-    if (newValue.length) {
-      isHide.value = false
-    }
-  }
-)
-window.addEventListener('keydown', onKeyDown, true)
-watch(isHide, (newValue) => {
-  if (!newValue) {
-    window.addEventListener('keydown', onKeyDown, true)
-  } else {
-    window.removeEventListener('keydown', onKeyDown, true)
-  }
-})
-</script>
-
-<style scoped lang="scss">
-.autocomplete {
-  max-width: 180px;
-  position: relative;
-
-  .content-search {
-    .loader {
-      position: absolute;
-      top: 3px;
-      left: -6px;
-      z-index: 1;
-      height: 16px;
-      width: 16px;
-
-      #loader {
-        height: 100%;
-        width: 100%;
-
-        :deep(.spinner-inverse) {
-          min-width: auto;
-          min-height: auto;
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .search-icon {
-      position: absolute;
-      width: 17px;
-      top: 2px;
-      bottom: 0;
-    }
-    .search-input {
-      background-color: white;
-      padding: 0 6px 0 20px;
-    }
-  }
-
-  .content-filtered {
-    position: absolute;
-    display: block;
-    overflow-y: visible;
-    height: auto;
-    visibility: visible;
-    will-change: transform;
-    top: 0;
-    left: 0;
-    transform: translate3d(0px, 25px, 0px);
-    width: 250px;
-    z-index: 1000;
-
-    &.active .filtered-items {
-      max-height: 164px;
-      visibility: visible;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      min-width: 96px;
-      max-width: 288px;
-      border: 0.8px solid #ccc;
-      padding: 9.6px 0;
-      z-index: 1060;
-      overflow: auto;
-      width: 100%;
-      margin: 1px 0 0;
-
-      .item {
-        line-height: 20px;
-        padding: 5px 0 0 5px;
-        color: #333;
-        cursor: pointer;
-        outline: unset;
-
-        &.active,
-        &:focus,
-        &:hover {
-          background-color: #2b5480;
-          color: #fff;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="autocomplete" @click.stop>
+    <div class="content-search">
+      <div v-show="props.loading" class="loader">
+        <atoms-loader-pre-loader
+          id="loader"
+          :test-id="`${props.testId}-pre-loader`"
+          class="content-area__loading"
+          :show="true"
+        />
+      </div>
+      <div class="search-icon">
+        <atoms-the-icon
+          fill="#666"
+          stroke-width="10"
+          class="alert-icon search-icon"
+          name="search"
+        />
+      </div>
+
+      <div class="clr-error">
+        <div class="form-group__input">
+          <input
+            :id="`${props.testId}-search-input`"
+            v-model.trim="search"
+            :data-id="`${props.testId}-search-input`"
+            type="text"
+            class="search-input"
+            :class="fieldErrorText && 'clr-input'"
+            autocomplete="off"
+            :placeholder="props.placeholder"
+            @blur="onInitValidation"
+            @input="onSearch"
+          />
+          <div v-show="fieldErrorText" class="form-validate">
+            <atoms-the-icon class="is-error tooltip-trigger" name="info" />
+          </div>
+        </div>
+        <div
+          v-show="fieldErrorText"
+          class="form-group__input-error clr-subtext"
+        >
+          {{ fieldErrorText }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="isShow"
+      :class="['content-filtered', { active: items.length }]"
+    >
+      <ul class="dropdown-menu filtered-items">
+        <li
+          v-for="(item, key) in items"
+          :key="`${item}_${key}`"
+          :class="['item', { active: key === selectedTabIndex }]"
+          :data-id="item.testId"
+          @mouseenter="selectedTabIndex = key"
+          @click="onSelect(key)"
+        >
+          {{ item.firstText }}<b>{{ item.secondText }}</b
+          >{{ item.thirdText }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    placeholder: string
+    items: string[]
+    loading?: boolean
+    testId?: string
+    ms?: number
+    showValidation?: boolean
+  }>(),
+  {
+    testId: 'ui-autocomplete',
+    ms: 500,
+    loading: false,
+    showValidation: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'search', value: string): void
+  (event: 'select', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const search = ref<string>('')
+
+let timer: NodeJS.Timeout
+const onSearch = (): void => {
+  onInitValidation()
+  clearTimeout(timer)
+  timer = setTimeout(
+    (value) => {
+      emits('search', value)
+    },
+    props.ms,
+    search.value
+  )
+}
+const isInitFieldValidation = ref<boolean>(false)
+const onInitValidation = (): void => {
+  isInitFieldValidation.value = true
+}
+const fieldErrorText = computed<string>(() => {
+  if (!isInitFieldValidation.value) return ''
+
+  if (!search.value && props.showValidation)
+    return localization.value.common.fieldRequired
+})
+const items = computed<any[]>(() => {
+  return [...props.items].map((text) => {
+    const term = search.value.toLowerCase()
+    const texts = text.toLowerCase().split(term)
+    return {
+      firstText: texts[0],
+      secondText: term,
+      thirdText: texts[1],
+      testId: `${term}-filtered-item`,
+    }
+  })
+})
+
+const selectedTabIndex = ref<number>(0)
+const onSelect = (key: number): void => {
+  search.value = props.items[key]
+  emits('select', search.value)
+  isHide.value = true
+}
+
+const isHide = ref<boolean>(false)
+const isShow = computed<boolean>(
+  () => Boolean(items.value.length) && !isHide.value
+)
+
+const onKeyDown = (event: KeyboardEvent): void => {
+  switch (event.code) {
+    case 'ArrowUp':
+      prevTabItem()
+      break
+    case 'ArrowDown':
+      nextTabItem()
+      break
+    case 'Enter':
+      event.preventDefault()
+      onSelect(selectedTabIndex.value)
+      break
+    case 'Tab':
+      isHide.value = true
+      break
+  }
+}
+
+const nextTabItem = (): void => {
+  if (selectedTabIndex.value === items.value.length - 1)
+    selectedTabIndex.value = 0
+  else selectedTabIndex.value++
+}
+
+const prevTabItem = (): void => {
+  if (selectedTabIndex.value === 0)
+    selectedTabIndex.value = items.value.length - 1
+  else selectedTabIndex.value--
+}
+
+watch(
+  () => props.items,
+  (newValue) => {
+    if (newValue.length) {
+      isHide.value = false
+    }
+  }
+)
+window.addEventListener('keydown', onKeyDown, true)
+watch(isHide, (newValue) => {
+  if (!newValue) {
+    window.addEventListener('keydown', onKeyDown, true)
+  } else {
+    window.removeEventListener('keydown', onKeyDown, true)
+  }
+})
+watch(
+  props.showValidation,
+  (newValue: boolean) => {
+    isInitFieldValidation.value = newValue
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.autocomplete {
+  max-width: 180px;
+  position: relative;
+
+  .content-search {
+    .loader {
+      position: absolute;
+      top: 3px;
+      left: -6px;
+      z-index: 1;
+      height: 16px;
+      width: 16px;
+
+      #loader {
+        height: 100%;
+        width: 100%;
+
+        :deep(.spinner-inverse) {
+          min-width: auto;
+          min-height: auto;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .search-icon {
+      position: absolute;
+      width: 17px;
+      top: 2px;
+      bottom: 0;
+    }
+    .search-input {
+      background-color: white;
+      padding: 0 6px 0 20px;
+    }
+  }
+
+  .content-filtered {
+    position: absolute;
+    display: block;
+    overflow-y: visible;
+    height: auto;
+    visibility: visible;
+    will-change: transform;
+    top: 0;
+    left: 0;
+    transform: translate3d(0px, 25px, 0px);
+    width: 250px;
+    z-index: 1000;
+
+    &.active .filtered-items {
+      max-height: 164px;
+      visibility: visible;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      min-width: 96px;
+      max-width: 288px;
+      border: 0.8px solid #ccc;
+      padding: 9.6px 0;
+      z-index: 1060;
+      overflow: auto;
+      width: 100%;
+      margin: 1px 0 0;
+
+      .item {
+        line-height: 20px;
+        padding: 5px 0 0 5px;
+        color: #333;
+        cursor: pointer;
+        outline: unset;
+
+        &.active,
+        &:focus,
+        &:hover {
+          background-color: #2b5480;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>