adata-ui 2.1.41-beta.7 → 2.1.41-beta.9

package/components/elements/infinite-carousel/AInfiniteCarousel.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-/* fade: gradient — краевые градиенты на bg-main (историческое поведение,
-   верно только когда карусель лежит на основной поверхности);
-   mask — краевая маска, не зависящая от фона под каруселью. */
-withDefaults(defineProps<{
-  duration?: number
-  pauseOnHover?: boolean
-  fade?: 'gradient' | 'mask' | 'none'
-}>(), {
-  duration: 25,
-  pauseOnHover: false,
-  fade: 'gradient',
-})
-</script>
-
-<template>
-  <div
-    class="carousel relative w-full overflow-hidden"
-    :class="[
-      fade === 'gradient' ? 'carousel--fade-gradient' : '',
-      fade === 'mask' ? 'carousel--fade-mask' : '',
-      pauseOnHover ? 'carousel--pausable' : '',
-    ]"
-  >
-    <div
-      class="animate-scroll flex w-max"
-      :style="{ animationDuration: `${duration}s` }"
-    >
-      <div
-        v-for="i in 2"
-        :key="i"
-        class="flex"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@keyframes scroll {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-
-.animate-scroll {
-  animation: scroll 25s linear infinite;
-}
-
-.carousel--pausable:hover .animate-scroll {
-  animation-play-state: paused;
-}
-
-.carousel--fade-gradient:before,
-.carousel--fade-gradient:after {
-  position: absolute;
-  top: 0;
-  width: 120px;
-  height: 100%;
-  content: "";
-  z-index: 2;
-}
-
-.carousel--fade-gradient:before {
-  left: 0;
-  background: linear-gradient(to left, transparent, var(--background-color-main));
-}
-
-.carousel--fade-gradient:after {
-  right: 0;
-  background: linear-gradient(to right, transparent, var(--background-color-main));
-}
-
-/* Маска читает только альфу, поэтому #000 здесь — не цвет (осознанное
-   исключение из запрета сырых hex). */
-.carousel--fade-mask {
-  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-scroll {
-    animation: none;
-  }
-}
-</style>
+<script setup lang="ts">
+/* fade: gradient — краевые градиенты на bg-main (историческое поведение,
+   верно только когда карусель лежит на основной поверхности);
+   mask — краевая маска, не зависящая от фона под каруселью. */
+withDefaults(defineProps<{
+  duration?: number
+  pauseOnHover?: boolean
+  fade?: 'gradient' | 'mask' | 'none'
+}>(), {
+  duration: 25,
+  pauseOnHover: false,
+  fade: 'gradient',
+})
+</script>
+
+<template>
+  <div
+    class="carousel relative w-full overflow-hidden"
+    :class="[
+      fade === 'gradient' ? 'carousel--fade-gradient' : '',
+      fade === 'mask' ? 'carousel--fade-mask' : '',
+      pauseOnHover ? 'carousel--pausable' : '',
+    ]"
+  >
+    <div
+      class="animate-scroll flex w-max"
+      :style="{ animationDuration: `${duration}s` }"
+    >
+      <div
+        v-for="i in 2"
+        :key="i"
+        class="flex"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+.animate-scroll {
+  animation: scroll 25s linear infinite;
+}
+
+.carousel--pausable:hover .animate-scroll {
+  animation-play-state: paused;
+}
+
+.carousel--fade-gradient:before,
+.carousel--fade-gradient:after {
+  position: absolute;
+  top: 0;
+  width: 120px;
+  height: 100%;
+  content: "";
+  z-index: 2;
+}
+
+.carousel--fade-gradient:before {
+  left: 0;
+  background: linear-gradient(to left, transparent, var(--background-color-main));
+}
+
+.carousel--fade-gradient:after {
+  right: 0;
+  background: linear-gradient(to right, transparent, var(--background-color-main));
+}
+
+/* Маска читает только альфу, поэтому #000 здесь — не цвет (осознанное
+   исключение из запрета сырых hex). */
+.carousel--fade-mask {
+  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll {
+    animation: none;
+  }
+}
+</style>

package/components/elements/infinite-scroll/AInfiniteScroll.vue

@@ -1,33 +1,33 @@
-<script lang="ts" setup>
-import { useInfiniteScroll } from '@vueuse/core'
-
-const props = withDefaults(defineProps<{ canLoadMore: boolean }>(), {
-  canLoadMore: true
-})
-const emit = defineEmits<{ (e: 'intersected'): void }>()
-
-const observe = ref<HTMLDivElement | null>(null)
-
-useInfiniteScroll(
-  observe,
-  () => {
-    emit('intersected')
-  },
-  {
-    distance: 10,
-    interval: 1000,
-    canLoadMore() {
-      return props.canLoadMore
-    }
-  }
-)
-</script>
-
-<template>
-  <div>
-    <slot />
-    <div ref="observe" />
-  </div>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+import { useInfiniteScroll } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{ canLoadMore: boolean }>(), {
+  canLoadMore: true
+})
+const emit = defineEmits<{ (e: 'intersected'): void }>()
+
+const observe = ref<HTMLDivElement | null>(null)
+
+useInfiniteScroll(
+  observe,
+  () => {
+    emit('intersected')
+  },
+  {
+    distance: 10,
+    interval: 1000,
+    canLoadMore() {
+      return props.canLoadMore
+    }
+  }
+)
+</script>
+
+<template>
+  <div>
+    <slot />
+    <div ref="observe" />
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -1,102 +1,102 @@
-<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 = withDefaults(defineProps<{
-  isError?: boolean,
-  errorText?: string
-}>(), {
-  isError: false,
-  errorText: '',
-})
-
-const emit = defineEmits<{
-  (e: 'onCancel'): void
-  (e: 'onSubmit'): void
-}>()
-
-const { t } = useI18n()
-
-const note = defineModel<string>({ required: true })
-const isLoading = defineModel<boolean>('loading')
-
-const schema = z.object({
-  note: z.string().nonempty(t('forms.leaveNote.errors.required')).max(100, t('forms.leaveNote.errors.maxLength', { n: 100 })),
-})
-
-const submitted = ref(false)
-
-const { validation, getError } = useUIValidation(
-  schema,
-  () => ({
-    note: note.value,
-  }),
-  submitted,
-)
-
-function onCancel() {
-  submitted.value = false
-  note.value = ''
-  emit('onCancel')
-}
-
-async function onSubmit() {
-  submitted.value = true
-  if (validation.value) return
-  emit('onSubmit')
-}
-
-defineExpose({
-  reset: () => (submitted.value = false),
-})
-</script>
-
-<template>
-  <div class="flex flex-col items-start rounded-sm">
-    <p class="text-body-md-strong mb-4">
-      {{ t('forms.leaveNote.title') }}
-    </p>
-    <a-textarea
-      v-model="note"
-      class="min-h-[120px]"
-      color-classes="bg-muted outline outline-1 outline-(--border-color-default) !rounded-[10px]"
-      size="sm"
-      resizeable="y"
-      data-test-id="favorites-notes-textarea"
-      :label="t('forms.leaveNote.placeholder')"
-      :error="getError('note')"
-    >
-      <template #alert>
-        <a-alert
-          v-if="isError"
-          color="red"
-          class="mt-1"
-        >
-          {{ isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '' }}
-        </a-alert>
-      </template>
-    </a-textarea>
-    <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"
-        data-test-id="favorites-notes-cancel-button"
-        @click="onCancel"
-      >
-        {{ t('actions.cancel') }}
-      </a-button-v2>
-      <a-button-v2
-        :disabled="!note.trim() && isLoading"
-        class="w-full sm:w-auto"
-        size="md"
-        data-test-id="favorites-notes-submit-button"
-        :loading="isLoading"
-        @click="onSubmit"
-      >
-        {{ t('actions.send') }}
-      </a-button-v2>
-    </div>
-  </div>
-</template>
+<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 = withDefaults(defineProps<{
+  isError?: boolean,
+  errorText?: string
+}>(), {
+  isError: false,
+  errorText: '',
+})
+
+const emit = defineEmits<{
+  (e: 'onCancel'): void
+  (e: 'onSubmit'): void
+}>()
+
+const { t } = useI18n()
+
+const note = defineModel<string>({ required: true })
+const isLoading = defineModel<boolean>('loading')
+
+const schema = z.object({
+  note: z.string().nonempty(t('forms.leaveNote.errors.required')).max(100, t('forms.leaveNote.errors.maxLength', { n: 100 })),
+})
+
+const submitted = ref(false)
+
+const { validation, getError } = useUIValidation(
+  schema,
+  () => ({
+    note: note.value,
+  }),
+  submitted,
+)
+
+function onCancel() {
+  submitted.value = false
+  note.value = ''
+  emit('onCancel')
+}
+
+async function onSubmit() {
+  submitted.value = true
+  if (validation.value) return
+  emit('onSubmit')
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-start rounded-sm">
+    <p class="text-body-md-strong mb-4">
+      {{ t('forms.leaveNote.title') }}
+    </p>
+    <a-textarea
+      v-model="note"
+      class="min-h-[120px]"
+      color-classes="bg-muted outline outline-1 outline-(--border-color-default) !rounded-[10px]"
+      size="sm"
+      resizeable="y"
+      data-test-id="favorites-notes-textarea"
+      :label="t('forms.leaveNote.placeholder')"
+      :error="getError('note')"
+    >
+      <template #alert>
+        <a-alert
+          v-if="isError"
+          color="red"
+          class="mt-1"
+        >
+          {{ isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '' }}
+        </a-alert>
+      </template>
+    </a-textarea>
+    <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"
+        data-test-id="favorites-notes-cancel-button"
+        @click="onCancel"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+      <a-button-v2
+        :disabled="!note.trim() && isLoading"
+        class="w-full sm:w-auto"
+        size="md"
+        data-test-id="favorites-notes-submit-button"
+        :loading="isLoading"
+        @click="onSubmit"
+      >
+        {{ t('actions.send') }}
+      </a-button-v2>
+    </div>
+  </div>
+</template>

package/components/elements/pagination/APagination.vue

@@ -1,110 +1,110 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import DoubleChevronRight from '#adata-ui/icons/chevron/double-chevron-right.vue'
-
-interface Props {
-  lastPage: number
-  disabled?: boolean
-  amountOfShownPages?: number
-  activeClasses?: string
-  defaultClasses?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  activeClasses: '',
-  defaultClasses: '',
-  amountOfShownPages: 3
-})
-
-const modelValue = defineModel<number>({ required: true })
-
-const prevPage = computed(() => modelValue.value > 1)
-
-const nextPage = computed(() => modelValue.value !== props.lastPage)
-
-const showFirstPageIndex = computed(() => modelValue.value > 3)
-</script>
-<template>
-  <div class="flex items-center justify-center">
-    <ul
-      v-if="lastPage > 1"
-      :class="['flex items-center justify-center', { 'pointer-events-none': disabled }]"
-    >
-      <li
-        v-if="showFirstPageIndex"
-        :class="[
-          defaultClasses,
-          { 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover': modelValue === 1 },
-          !!activeClasses && 1 === modelValue ? activeClasses : ''
-        ]"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover"
-        @click="modelValue = 1"
-      >
-        <double-chevron-right class="rotate-180 text-base" />
-      </li>
-      <li
-        v-show="prevPage"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover"
-        @click="modelValue -= 1"
-      >
-        <a-icon-chevron-left />
-      </li>
-
-      <li
-        v-for="page in [modelValue - 2, modelValue - 1].filter((n) => n > 0)"
-        :key="page"
-        :class="[
-          defaultClasses,
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover'
-        ]"
-        @click="modelValue = page"
-      >
-        {{ page }}
-      </li>
-
-      <li
-        :class="[
-          defaultClasses,
-          'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover',
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition'
-        ]"
-      >
-        {{ modelValue }}
-      </li>
-
-      <li
-        v-for="(n, idx) in [modelValue + 1, modelValue + 2].filter((n) => n <= lastPage)"
-        :key="idx"
-        :class="[
-          defaultClasses,
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover'
-        ]"
-        @click="modelValue = n"
-      >
-        {{ n }}
-      </li>
-
-      <li
-        v-show="nextPage"
-        :class="{ disabled: disabled }"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-action-secondary-hover"
-        @click="modelValue += 1"
-      >
-        <a-icon-chevron-right />
-      </li>
-      <li
-        v-if="modelValue !== lastPage && lastPage > 3 && lastPage - modelValue >= 3"
-        :class="[
-          defaultClasses,
-          { disabled: disabled },
-          !!activeClasses && lastPage === modelValue ? activeClasses : ''
-        ]"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-action-secondary-hover"
-        @click="modelValue = lastPage"
-      >
-        <double-chevron-right class="text-base" />
-      </li>
-    </ul>
-  </div>
-</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import DoubleChevronRight from '#adata-ui/icons/chevron/double-chevron-right.vue'
+
+interface Props {
+  lastPage: number
+  disabled?: boolean
+  amountOfShownPages?: number
+  activeClasses?: string
+  defaultClasses?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  activeClasses: '',
+  defaultClasses: '',
+  amountOfShownPages: 3
+})
+
+const modelValue = defineModel<number>({ required: true })
+
+const prevPage = computed(() => modelValue.value > 1)
+
+const nextPage = computed(() => modelValue.value !== props.lastPage)
+
+const showFirstPageIndex = computed(() => modelValue.value > 3)
+</script>
+<template>
+  <div class="flex items-center justify-center">
+    <ul
+      v-if="lastPage > 1"
+      :class="['flex items-center justify-center', { 'pointer-events-none': disabled }]"
+    >
+      <li
+        v-if="showFirstPageIndex"
+        :class="[
+          defaultClasses,
+          { 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover': modelValue === 1 },
+          !!activeClasses && 1 === modelValue ? activeClasses : ''
+        ]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover"
+        @click="modelValue = 1"
+      >
+        <double-chevron-right class="rotate-180 text-base" />
+      </li>
+      <li
+        v-show="prevPage"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover"
+        @click="modelValue -= 1"
+      >
+        <a-icon-chevron-left />
+      </li>
+
+      <li
+        v-for="page in [modelValue - 2, modelValue - 1].filter((n) => n > 0)"
+        :key="page"
+        :class="[
+          defaultClasses,
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover'
+        ]"
+        @click="modelValue = page"
+      >
+        {{ page }}
+      </li>
+
+      <li
+        :class="[
+          defaultClasses,
+          'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover',
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition'
+        ]"
+      >
+        {{ modelValue }}
+      </li>
+
+      <li
+        v-for="(n, idx) in [modelValue + 1, modelValue + 2].filter((n) => n <= lastPage)"
+        :key="idx"
+        :class="[
+          defaultClasses,
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-action-secondary-hover'
+        ]"
+        @click="modelValue = n"
+      >
+        {{ n }}
+      </li>
+
+      <li
+        v-show="nextPage"
+        :class="{ disabled: disabled }"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-action-secondary-hover"
+        @click="modelValue += 1"
+      >
+        <a-icon-chevron-right />
+      </li>
+      <li
+        v-if="modelValue !== lastPage && lastPage > 3 && lastPage - modelValue >= 3"
+        :class="[
+          defaultClasses,
+          { disabled: disabled },
+          !!activeClasses && lastPage === modelValue ? activeClasses : ''
+        ]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-action-secondary-hover"
+        @click="modelValue = lastPage"
+      >
+        <double-chevron-right class="text-base" />
+      </li>
+    </ul>
+  </div>
+</template>