adata-ui 2.1.19 → 2.1.21

package/components/navigation/header/TopHeader.vue

@@ -1,194 +1,194 @@
-<script setup lang="ts">
-import ArrowCurrency from '#adata-ui/icons/currency/currency-down.vue'
-import UsdIcon from '#adata-ui/icons/currency/currency-usd.vue'
-import EurIcon from '#adata-ui/icons/currency/currency-eur.vue'
-import RubIcon from '#adata-ui/icons/currency/currency-rub.vue'
-import YuanIcon from '#adata-ui/icons/currency/currency-yuan.vue'
-
-interface Props {
-  daysRemaining: number
-  limitRemaining: number
-  moduleName: string
-  isAuthenticated: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  moduleName: 'counterparty'
-})
-
-const { t, locale } = useI18n()
-
-interface ResponseData<DataResult> {
-  success: boolean
-  message: string
-  data: DataResult
-}
-
-interface Currency {
-  buy: number
-  buy_state: string
-  currency: 'USD' | 'EUR' | 'RUB' | 'CNY'
-  sell: number
-  sell_state: string
-}
-
-interface Currencies {
-  currencies: Currency[]
-  request_time: string
-  time: string
-}
-
-const currencies = ref<Currency[]>([])
-const systemMessage = ref(null)
-const isOpenNotification = ref(false)
-const message = useCookie('message')
-
-const { myLayer } = useAppConfig()
-const env = myLayer.mode
-
-const mode = computed(() => {
-  if (props.moduleName === 'pk') {
-    return 'counterparty'
-  } else {
-    return props.moduleName
-  }
-})
-
-const fetchCurrencies = async () => {
-  try {
-    const response = await fetch('https://users.adata.kz/api/v1/information/currency')
-    const { data } = await response.json()
-
-    if (data.currencies) {
-      currencies.value = data.currencies
-    }
-  } catch (e) {
-    console.error(e.message)
-  }
-}
-
-const Symbols = {
-  USD: UsdIcon,
-  EUR: EurIcon,
-  RUB: RubIcon,
-  CNY: YuanIcon
-}
-
-const computedClass = (state: string) =>
-  state === 'UP' ? 'text-green-400 rotate-180' : 'text-red-400'
-
-const fetchNotification = async () => {
-  try {
-    if (message.value === undefined) {
-      const link = `https://users.${env}.kz/api/v1/system-messages/active-list/?module_name=${mode.value}`
-      const response = await fetch(link)
-      const { data } = await response.json()
-
-      if (data.details?.length) {
-        switch (locale.value) {
-          case 'ru':
-            systemMessage.value = data.details[0].message
-            break
-          case 'en':
-            systemMessage.value = data.details[0].message_en
-            break
-          case 'kk':
-            systemMessage.value = data.details[0].message_kz
-            break
-        }
-        isOpenNotification.value = true
-      }
-    }
-  } catch (e) {
-    console.error(e.message)
-  }
-}
-
-onBeforeMount(() => {
-  fetchNotification()
-  fetchCurrencies()
-})
-
-const closeMessage = () => {
-  message.value = false
-  isOpenNotification.value = false
-}
-</script>
-
-<template>
-  <div class="min-h-[40px]" :class="[isOpenNotification && systemMessage ? '' : 'hidden lg:block']">
-    <transition name="fade">
-      <div
-        v-if="isOpenNotification && systemMessage"
-        class="bg-[#FFF5E6] px-2 py-3 text-[#FCA204] dark:bg-[#161617] md:px-0"
-      >
-        <div class="a-container flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <a-icon-info-circle
-              class="max-h-[16px] w-full max-w-[16px] stroke-orange-500 dark:stroke-orange-500"
-            />
-            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
-          </div>
-          <a-icon-x-mark
-            class="max-h-[16px] w-full max-w-[16px] cursor-pointer stroke-orange-500"
-            @click="closeMessage"
-          />
-        </div>
-      </div>
-    </transition>
-    <div
-      v-if="!isOpenNotification || !systemMessage"
-      class="hidden min-h-10 bg-gray-50 dark:bg-gray-950 lg:block"
-    >
-      <div class="a-container flex justify-between py-2 items-center text-sm">
-        <div class="flex items-center leading-[24px]">
-          <div v-for="currency in currencies" :key="currency.currency" class="mr-4 flex gap-2">
-            <div class="flex items-center">
-              <component
-                :is="Symbols[currency.currency]"
-                class="mr-2 size-4 rounded-sm border border-solid border-[#E0E3E6] dark:border-[#2B2B2C]"
-              />
-              {{ currency.buy }}
-              <div :class="computedClass(currency.sell_state)">
-                <arrow-currency />
-              </div>
-            </div>
-            <div class="flex items-center">
-              {{ currency.sell }}
-              <div :class="computedClass(currency.sell_state)">
-                <arrow-currency />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-if="isAuthenticated" class="flex items-center gap-5">
-          <div v-if="limitRemaining != null || limitRemaining != undefined">
-            <span class="mr-2 text-xs">{{ t('header.top.requestLimit') }}</span>
-            <a-status-badge size="sm">
-              {{ limitRemaining }}
-            </a-status-badge>
-          </div>
-          <div v-if="daysRemaining">
-            <span class="mr-2 text-xs">{{ t('header.top.daysLeft') }}</span>
-            <a-status-badge size="sm">
-              {{ daysRemaining }}
-            </a-status-badge>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: 0.1s ease;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-  top: 0px;
-}
-</style>
+<script setup lang="ts">
+import ArrowCurrency from '#adata-ui/icons/currency/currency-down.vue'
+import UsdIcon from '#adata-ui/icons/currency/currency-usd.vue'
+import EurIcon from '#adata-ui/icons/currency/currency-eur.vue'
+import RubIcon from '#adata-ui/icons/currency/currency-rub.vue'
+import YuanIcon from '#adata-ui/icons/currency/currency-yuan.vue'
+
+interface Props {
+  daysRemaining: number
+  limitRemaining: number
+  moduleName: string
+  isAuthenticated: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  moduleName: 'counterparty'
+})
+
+const { t, locale } = useI18n()
+
+interface ResponseData<DataResult> {
+  success: boolean
+  message: string
+  data: DataResult
+}
+
+interface Currency {
+  buy: number
+  buy_state: string
+  currency: 'USD' | 'EUR' | 'RUB' | 'CNY'
+  sell: number
+  sell_state: string
+}
+
+interface Currencies {
+  currencies: Currency[]
+  request_time: string
+  time: string
+}
+
+const currencies = ref<Currency[]>([])
+const systemMessage = ref(null)
+const isOpenNotification = ref(false)
+const message = useCookie('message')
+
+const { myLayer } = useAppConfig()
+const env = myLayer.mode
+
+const mode = computed(() => {
+  if (props.moduleName === 'pk') {
+    return 'counterparty'
+  } else {
+    return props.moduleName
+  }
+})
+
+const fetchCurrencies = async () => {
+  try {
+    const response = await fetch('https://users.adata.kz/api/v1/information/currency')
+    const { data } = await response.json()
+
+    if (data.currencies) {
+      currencies.value = data.currencies
+    }
+  } catch (e) {
+    console.error(e.message)
+  }
+}
+
+const Symbols = {
+  USD: UsdIcon,
+  EUR: EurIcon,
+  RUB: RubIcon,
+  CNY: YuanIcon
+}
+
+const computedClass = (state: string) =>
+  state === 'UP' ? 'text-green-400 rotate-180' : 'text-red-400'
+
+const fetchNotification = async () => {
+  try {
+    if (message.value === undefined) {
+      const link = `https://users.${env}.kz/api/v1/system-messages/active-list/?module_name=${mode.value}`
+      const response = await fetch(link)
+      const { data } = await response.json()
+
+      if (data.details?.length) {
+        switch (locale.value) {
+          case 'ru':
+            systemMessage.value = data.details[0].message
+            break
+          case 'en':
+            systemMessage.value = data.details[0].message_en
+            break
+          case 'kk':
+            systemMessage.value = data.details[0].message_kz
+            break
+        }
+        isOpenNotification.value = true
+      }
+    }
+  } catch (e) {
+    console.error(e.message)
+  }
+}
+
+onBeforeMount(() => {
+  fetchNotification()
+  fetchCurrencies()
+})
+
+const closeMessage = () => {
+  message.value = false
+  isOpenNotification.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-[40px]" :class="[isOpenNotification && systemMessage ? '' : 'hidden lg:block']">
+    <transition name="fade">
+      <div
+        v-if="isOpenNotification && systemMessage"
+        class="bg-[#FFF5E6] px-2 py-3 text-[#FCA204] dark:bg-[#161617] md:px-0"
+      >
+        <div class="a-container flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <a-icon-info-circle
+              class="max-h-[16px] w-full max-w-[16px] stroke-orange-500 dark:stroke-orange-500"
+            />
+            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
+          </div>
+          <a-icon-x-mark
+            class="max-h-[16px] w-full max-w-[16px] cursor-pointer stroke-orange-500"
+            @click="closeMessage"
+          />
+        </div>
+      </div>
+    </transition>
+    <div
+      v-if="!isOpenNotification || !systemMessage"
+      class="hidden min-h-10 bg-gray-50 dark:bg-gray-950 lg:block"
+    >
+      <div class="a-container flex justify-between py-2 items-center text-sm">
+        <div class="flex items-center leading-[24px]">
+          <div v-for="currency in currencies" :key="currency.currency" class="mr-4 flex gap-2">
+            <div class="flex items-center">
+              <component
+                :is="Symbols[currency.currency]"
+                class="mr-2 size-4 rounded-sm border border-solid border-[#E0E3E6] dark:border-[#2B2B2C]"
+              />
+              {{ currency.buy }}
+              <div :class="computedClass(currency.sell_state)">
+                <arrow-currency />
+              </div>
+            </div>
+            <div class="flex items-center">
+              {{ currency.sell }}
+              <div :class="computedClass(currency.sell_state)">
+                <arrow-currency />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="isAuthenticated" class="flex items-center gap-5">
+          <div v-if="limitRemaining != null || limitRemaining != undefined">
+            <span class="mr-2 text-xs">{{ t('header.top.requestLimit') }}</span>
+            <a-status-badge size="sm">
+              {{ limitRemaining }}
+            </a-status-badge>
+          </div>
+          <div v-if="daysRemaining">
+            <span class="mr-2 text-xs">{{ t('header.top.daysLeft') }}</span>
+            <a-status-badge size="sm">
+              {{ daysRemaining }}
+            </a-status-badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.1s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  top: 0px;
+}
+</style>

package/components/navigation/header/types.ts

@@ -1,28 +1,28 @@
-export type NavChild = {
-  key: string,
-  name: string
-  items: NavChildItem[]
-}
-export type NavChildItem = {
-  title: string
-  subtitle?: string
-  icon?: any
-  to: string
-}
-
-export type NavLink = {
-  label: string
-  to: string
-  items?: NavChild[],
-  options?:any
-  icon?: any
-}
-export type ProjectKeys =
-  | 'counterparty'
-  | 'pk'
-  | 'work'
-  | 'tenders'
-  | 'fines'
-  | 'analytics'
-  | 'fea'
-  | 'compliance';
+export type NavChild = {
+  key: string,
+  name: string
+  items: NavChildItem[]
+}
+export type NavChildItem = {
+  title: string
+  subtitle?: string
+  icon?: any
+  to: string
+}
+
+export type NavLink = {
+  label: string
+  to: string
+  items?: NavChild[],
+  options?:any
+  icon?: any
+}
+export type ProjectKeys =
+  | 'counterparty'
+  | 'pk'
+  | 'work'
+  | 'tenders'
+  | 'fines'
+  | 'analytics'
+  | 'fea'
+  | 'compliance';

package/components/navigation/line-tabs/ALineTabs.vue

@@ -1,111 +1,111 @@
-<template>
-  <div
-    class="whitespace-nowrap overflow-auto"
-    :class="props.wrapper === 'row'? 'flex':'flex flex-col'"
-  >
-    <button
-      v-for="(option) in options"
-      :key="option.key"
-      :disabled="option.disabled"
-      :class="activeTab === option.key ? selectedClasses() : defaultClasses()"
-      @click="() => handleClick(option)"
-    >
-      <slot
-        name="option"
-        :option="option"
-      >
-        <span
-          class="flex gap-1 "
-          :class="[align === 'left' ? 'justify-between' : 'justify-center' ]"
-        >
-          <span>
-            {{ option.name }}
-          </span>
-          <a-digit-badge
-            v-if="option.count!== undefined"
-            size="md"
-            class="font-normal justify-self-start"
-          >
-            {{ option.count }}
-          </a-digit-badge>
-          <a-icon-warning-circle
-            v-if="option.warning"
-            class="text-black justify-self-end"
-          />
-        </span>
-      </slot>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Tab, ViewType} from "./types";
-
-defineOptions({name: 'ALineTabs'})
-
-interface Props {
-  options: Tab[]
-  view: 'bottom' | 'right' | "left"
-  size?: 'lg' | 'sm'
-  align: 'left' | 'center'
-  block?: boolean
-  wrapper?: 'row' | 'column'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  view: 'bottom',
-  size: 'sm',
-  align: 'center',
-  block: false,
-  wrapper: 'row',
-})
-const emit = defineEmits(['selectOption']);
-const activeTab = defineModel<any>({
-  default: 1
-})
-
-
-const viewTypeValues: ViewType = {
-  bottom: {
-    default: 'border-b-2 border-white dark:border-gray-900 pt-[3px] ',
-    selected: 'border-b-2 border-blue-700 dark:border-blue-500 pt-[3px]'
-  },
-  right: {
-    default: 'text-deepblue-900 bg-transparent',
-    selected: 'border-r-2 border-deepblue-900'
-  },
-  left: {
-    default: 'text-deepblue-900 bg-transparent',
-    selected: 'border-l-2 border-deepblue-900'
-  },
-};
-
-
-
-
-const defaultClasses = () =>
-  [
-    'disabled:cursor-not-allowed disabled:text-gray-500 hover:bg-deepblue-900 disabled:dark:text-gray-300 body-s-400 cursor-pointer text-deepblue-900 dark:text-gray-200 bg-transparent select-none hover:bg-opacity-5 hover:disabled:bg-transparent focus-visible:shadow-[0_0_0_4px#1B64B3]',
-    viewTypeValues[props.view]['default'],
-    props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
-    props.block ? 'w-full' : '',
-  ]
-
-const selectedClasses = () =>
-  [
-    'body-s-400 cursor-pointer transition duration-200 select-none font-semibold focus-visible:shadow-[0_0_0_4px#1B64B3]',
-    viewTypeValues[props.view]['selected'],
-    props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
-    props.block ? 'w-full' : '',
-  ]
-
-const handleClick = (option:Tab) => {
-  activeTab.value = option.key
-  emit('selectOption', option);
-}
-
-</script>
-
-<style>
-/* Add any additional styles here */
-</style>
+<template>
+  <div
+    class="whitespace-nowrap overflow-auto"
+    :class="props.wrapper === 'row'? 'flex':'flex flex-col'"
+  >
+    <button
+      v-for="(option) in options"
+      :key="option.key"
+      :disabled="option.disabled"
+      :class="activeTab === option.key ? selectedClasses() : defaultClasses()"
+      @click="() => handleClick(option)"
+    >
+      <slot
+        name="option"
+        :option="option"
+      >
+        <span
+          class="flex gap-1 "
+          :class="[align === 'left' ? 'justify-between' : 'justify-center' ]"
+        >
+          <span>
+            {{ option.name }}
+          </span>
+          <a-digit-badge
+            v-if="option.count!== undefined"
+            size="md"
+            class="font-normal justify-self-start"
+          >
+            {{ option.count }}
+          </a-digit-badge>
+          <a-icon-warning-circle
+            v-if="option.warning"
+            class="text-black justify-self-end"
+          />
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Tab, ViewType} from "./types";
+
+defineOptions({name: 'ALineTabs'})
+
+interface Props {
+  options: Tab[]
+  view: 'bottom' | 'right' | "left"
+  size?: 'lg' | 'sm'
+  align: 'left' | 'center'
+  block?: boolean
+  wrapper?: 'row' | 'column'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  view: 'bottom',
+  size: 'sm',
+  align: 'center',
+  block: false,
+  wrapper: 'row',
+})
+const emit = defineEmits(['selectOption']);
+const activeTab = defineModel<any>({
+  default: 1
+})
+
+
+const viewTypeValues: ViewType = {
+  bottom: {
+    default: 'border-b-2 border-white dark:border-gray-900 pt-[3px] ',
+    selected: 'border-b-2 border-blue-700 dark:border-blue-500 pt-[3px]'
+  },
+  right: {
+    default: 'text-deepblue-900 bg-transparent',
+    selected: 'border-r-2 border-deepblue-900'
+  },
+  left: {
+    default: 'text-deepblue-900 bg-transparent',
+    selected: 'border-l-2 border-deepblue-900'
+  },
+};
+
+
+
+
+const defaultClasses = () =>
+  [
+    'disabled:cursor-not-allowed disabled:text-gray-500 hover:bg-deepblue-900 disabled:dark:text-gray-300 body-s-400 cursor-pointer text-deepblue-900 dark:text-gray-200 bg-transparent select-none hover:bg-opacity-5 hover:disabled:bg-transparent focus-visible:shadow-[0_0_0_4px#1B64B3]',
+    viewTypeValues[props.view]['default'],
+    props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
+    props.block ? 'w-full' : '',
+  ]
+
+const selectedClasses = () =>
+  [
+    'body-s-400 cursor-pointer transition duration-200 select-none font-semibold focus-visible:shadow-[0_0_0_4px#1B64B3]',
+    viewTypeValues[props.view]['selected'],
+    props.size == 'sm'?  'px-4 py-[7.5px]' : 'px-4 py-[11.5px]',
+    props.block ? 'w-full' : '',
+  ]
+
+const handleClick = (option:Tab) => {
+  activeTab.value = option.key
+  emit('selectOption', option);
+}
+
+</script>
+
+<style>
+/* Add any additional styles here */
+</style>