adata-ui 2.1.40-beta.2 → 2.1.40-beta.4

package/components/elements/leave-note/ALeaveNote.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import * as z from 'zod'
 import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   isError?: boolean,
   errorText?: string
-}>()
+}>(), {
+  isError: false,
+  errorText: '',
+})
 
 const emit = defineEmits<{
+  (e: 'onCancel'): void
   (e: 'onSubmit'): void
 }>()
 
@@ -30,6 +35,12 @@ const { validation, getError } = useUIValidation(
   submitted,
 )
 
+function onCancel() {
+  submitted.value = false
+  note.value = ''
+  emit('onCancel')
+}
+
 async function onSubmit() {
   submitted.value = true
   if (validation.value) return
@@ -48,31 +59,41 @@ defineExpose({
     </p>
     <a-textarea
       v-model="note"
+      class="min-h-[120px]"
+      color-classes="bg-deepblue-900/5 outline outline-1 outline-gray-200 dark:outline-gray-600 dark:bg-gray-200/5 !rounded-[10px]"
+      size="sm"
+      resizeable="y"
       :label="t('forms.leaveNote.placeholder')"
       :error="getError('note')"
-      class="mb-2 min-h-[120px]"
-      resizeable="none"
-      clearable
-      required
     >
       <template #alert>
         <a-alert
-          v-if="isError || getError('note')"
+          v-if="isError"
           color="red"
           class="mt-1"
         >
-          {{ getError('note') || (isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '') }}
+          {{ isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '' }}
         </a-alert>
       </template>
     </a-textarea>
-    <a-button
-      :disabled="!note.trim() && isLoading"
-      class="w-full sm:w-auto"
-      size="lg"
-      :loading="isLoading"
-      @click="onSubmit"
-    >
-      {{ t('actions.send') }}
-    </a-button>
+    <div class="mt-2 flex w-full justify-end items-center gap-2 md:gap-[10px]">
+      <a-button-v2
+        class="w-full sm:w-auto"
+        view="outline"
+        size="md"
+        @click="onCancel"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+      <a-button-v2
+        :disabled="!note.trim() && isLoading"
+        class="w-full sm:w-auto"
+        size="md"
+        :loading="isLoading"
+        @click="onSubmit"
+      >
+        {{ t('actions.send') }}
+      </a-button-v2>
+    </div>
   </div>
 </template>

package/components/elements/star-rating/AStarRating.vue

@@ -18,6 +18,8 @@ interface Props {
   fontSize?: number;
   error?: string | boolean;
   errorSize?: 'sm' | 'lg';
+  hideValue?: boolean;
+  hideEmptyStars?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +34,9 @@ const props = withDefaults(defineProps<Props>(), {
   ratingPlacement: 'left',
   fontSize: 14,
   error: false,
-  errorSize: 'lg'
+  errorSize: 'lg',
+  hideValue: false,
+  hideEmptyStars: false
 })
 
 const fillLevel = ref<number[]>([])
@@ -51,6 +55,10 @@ const roundedRating = computed(() => {
 })
 const shouldRound = computed(() => ratingSelected.value || props.roundStartRating)
 
+const visibleStarsCount = computed(() => {
+  if (!props.hideEmptyStars) return props.max
+  return Math.min(props.max, Math.max(1, Math.ceil(currentRating.value)))
+})
 
 watch(modelValue, (e)=>{
   currentRating.value = e
@@ -105,7 +113,7 @@ createStars(shouldRound.value)
   <div>
     <div class="w-full flex items-center gap-2">
       <span
-        v-if="ratingPlacement === 'left'"
+        v-if="ratingPlacement === 'left' && !hideValue"
         class="text-gray-600 dark:text-gray-300 mt-px"
         :style="{fontSize: `${fontSize}px`}"
       >
@@ -118,7 +126,7 @@ createStars(shouldRound.value)
         @mouseleave="resetRating"
       >
         <star
-          v-for="n in max"
+          v-for="n in visibleStarsCount"
           :key="n"
           :fill="fillLevel[n-1]"
           :size="starSize"
@@ -127,7 +135,7 @@ createStars(shouldRound.value)
         />
       </div>
       <span
-        v-if="ratingPlacement === 'right'"
+        v-if="ratingPlacement === 'right' && !hideValue"
         class="text-sm text-gray-600 dark:text-gray-300 mt-px"
       >
         {{ modelValue }}

package/components/navigation/header/AHeader.vue

@@ -109,7 +109,7 @@ onMounted(() => {
     <system-notification />
     <header
       ref="headerRef"
-      class="relative h-16 border-b border-deepblue-900/10 bg-gray-50/30 backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30"
+      class="relative h-16 border-b border-deepblue-900/10 bg-gray-50/20 backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30"
     >
       <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
         <!--        Desktop hidden -->
@@ -135,18 +135,18 @@ onMounted(() => {
           </div>
           <div
             v-else-if="mobileHeaderType === 'search'"
-            class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 lg:hidden"
+            class="flex w-full items-center gap-2 lg:hidden"
           >
             <logo
               class="dark:text-gray-200"
               @click="goToAnotherModule"
             />
             <button
-              class="flex w-full items-center gap-2 rounded bg-gray-50 px-4 py-1.5 dark:bg-gray-800 dark:text-gray-500"
+              class="flex w-full items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-1.5 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
               @click="$emit('search')"
             >
-              <a-icon-search />
-              <span class="body-400">Найти</span>
+              <a-icon-search class="text-gray-400 dark:text-gray-500" />
+              <span class="body-400 text-gray-500 dark:text-gray-400">Найти</span>
             </button>
           </div>
         </section>

package/lang/en.ts

@@ -470,7 +470,7 @@ const EnLocale: RuLocale = {
     },
     leaveNote: {
       title: 'Leave a note',
-      placeholder: 'Write a note...',
+      placeholder: 'Your note',
       limit: 'The limit on notes for this company by you has expired',
       errors: {
         required: 'This field is required',

package/lang/kk.ts

@@ -471,7 +471,7 @@ const KkLocale: RuLocale = {
     },
     leaveNote: {
       title: 'Ескертпе қалдыру',
-      placeholder: 'Ескертпе жазу...',
+      placeholder: 'Сіздің жазбаңыз',
       limit: 'Сіз осы компанияға арналған жазбалар лимитін тауысып қойдыңыз',
       errors: {
         required: 'Бұл өріс міндетті',

package/lang/ru.ts

@@ -471,7 +471,7 @@ const RuLocale = {
     },
     leaveNote: {
       title: 'Оставить заметку',
-      placeholder: 'Написать заметку...',
+      placeholder: 'Ваша заметка',
       limit: 'Лимит на заметки для этой компании, установленный вами, истек',
       errors: {
         required: 'Обязательное поле',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.40-beta.2",
+  "version": "2.1.40-beta.4",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",