adata-ui 2.0.23 → 2.0.24

package/components/elements/curve-block/ACurveBlock.vue

@@ -13,12 +13,11 @@ const props = defineProps<{
   <component
     :is="to ? NuxtLinkLocale : 'button'"
     :to="to"
-    class="curve-block relative w-fit cursor-pointer"
+    class="curve-block relative w-full cursor-pointer"
     active-class="active-item"
   >
     <svg
-      width="306"
-      height="182"
+      class="w-full"
       viewBox="-1 -1 308 184"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -79,9 +78,7 @@ const props = defineProps<{
     </div>
 
     <svg
-      class="absolute bottom-0 right-0"
-      width="48"
-      height="48"
+      class="absolute bottom-0 right-0 size-12 2xl:size-14"
       viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
     >

package/components/elements/select/ASelect.vue

@@ -6,6 +6,8 @@ import { onClickOutside, useToggle } from '@vueuse/core'
 import { isEqual } from 'lodash-es'
 import type { Ref } from 'vue'
 
+import { useFloating, offset, flip, shift, size as floatingSize, autoUpdate } from '@floating-ui/vue'
+
 type Props = {
   label: string
   required?: boolean
@@ -61,6 +63,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits<Emits>()
 
+
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  middleware: [
+    offset(6),
+    flip({ fallbackPlacements: ['top-start'] }),
+    shift({ padding: 8 }),
+    floatingSize({
+      apply({ availableHeight, elements, rects }) {
+        const el = elements.floating as HTMLElement
+        el.style.width = `${rects.reference.width}px`
+        el.style.maxHeight = `${Math.max(140, Math.min(availableHeight, 320))}px`
+        el.style.overflowY = 'auto'
+      },
+    }),
+  ],
+})
+
+let cleanup: (() => void) | null = null
+
+
+
 const modelValue = defineModel<T | T[] | null | any>({ required: true })
 const search = defineModel<T | null | any>('search')
 const isOpen = defineModel<T | null | any>('open', {
@@ -235,10 +263,21 @@ onUpdated(() => (countedVisibleItems.value = countOfVisibleItems.value))
 defineExpose({
   onClear
 })
+watch(() => isOpen.value, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  } else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+
+onUnmounted(() => cleanup?.())
 </script>
 <template>
   <div ref="wrapper" class="relative w-full rounded-md text-sm">
     <button
+      ref="reference"
       :class="[
         clearable ? 'pr-16' : 'pr-9',
         {
@@ -262,7 +301,7 @@ defineExpose({
       </span>
       <component :is="startIcon" v-if="startIcon" />
 
-      <span :class="{ 'py-1': size === 'md' }" class="w-full text-start">
+      <span :class="{ 'py-1': size === 'md' }" class=" w-full text-start">
         <span v-if="valueToShow">
           <span v-if="!multiple" class="line-clamp-1 text-deepblue-900 dark:text-gray-200">
             <slot name="single-selected" :value="valueToShow">{{ valueToShow[keyToShow] }}</slot>
@@ -310,10 +349,16 @@ defineExpose({
       </span>
     </button>
     <transition>
-      <div
-        v-if="isOpen"
-        class="absolute z-20 mt-1 w-full rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
-      >
+        <div
+          v-if="isOpen"
+          ref="floating"
+          class="z-[10000] rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
+          :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+        >
         <slot :options="options" name="options">
           <ul class="select m-2 max-h-[250px] overflow-y-auto overflow-x-hidden">
             <li v-if="searchFromOut" class="p-1">

package/components/navigation/footer/NewFooter.vue

@@ -212,8 +212,8 @@ const contactLinks = {
             />
           </div>
         </div>
-
-        <div class="flex flex-col gap-2 items-start">
+        <!--noindex-->
+        <div class="flex flex-col gap-2 items-start" data-nosnippet>
           <nuxt-link
             class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
             :to="contactLinks.link?.replace(/\/$/, '')"
@@ -249,6 +249,7 @@ const contactLinks = {
             </div>
           </div>
         </div>
+        <!--/noindex-->
       </div>
 
       <div class="lg:hidden flex gap-8 flex-wrap">

package/components/navigation/header/AlmatyContacts.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-[272px]">
+  <!--noindex-->
+  <div class="h-[272px]" data-nosnippet>
     <h2 class="heading-02 mb-4">
       {{ t('header.contacts.almaty.title') }}
     </h2>
@@ -89,6 +90,7 @@
 <!--      </div>-->
     </div>
   </div>
+  <!--/noindex-->
 </template>
 
 <script setup lang="ts">

package/components/navigation/header/AstanaContacts.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-[272px]">
+  <!--noindex-->
+  <div class="h-[272px]" data-nosnippet>
     <h2 class="heading-02 mb-4">
       {{ t('header.contacts.astana.title') }}
     </h2>
@@ -23,6 +24,7 @@
       </div>
     </div>
   </div>
+  <!--/noindex-->
 </template>
 
 <script setup lang="ts">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -34,6 +34,7 @@
     "vue-tsc": "^2.2.12"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.9",
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "^1.7.23",
     "@nuxt/image": "1.8.1",