adata-ui 2.1.41-beta.0 → 2.1.41

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-sm font-semibold mb-4">
+      {{ t('forms.leaveNote.title') }}
+    </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"
+      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-blue-700 text-white hover:bg-blue-900': modelValue === 1 },
+          !!activeClasses && 1 === modelValue ? activeClasses : ''
+        ]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        @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-[#2C3E500D] dark:text-white"
+        @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-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
+        ]"
+        @click="modelValue = page"
+      >
+        {{ page }}
+      </li>
+
+      <li
+        :class="[
+          defaultClasses,
+          'bg-blue-700 text-white hover:bg-blue-900',
+          '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-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
+        ]"
+        @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-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        @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-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        @click="modelValue = lastPage"
+      >
+        <double-chevron-right class="text-base" />
+      </li>
+    </ul>
+  </div>
+</template>

package/components/elements/photos-animation/APhotosAnimation.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-interface Photo {
-  src: string
-  classes: string
-}
-
-const props = defineProps<{
-  photos: Photo[]
-}>()
-
-const getAnimationClass = (index: number) => {
-  if (props.photos.length === 1) return 'fade-in'
-  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
-  return directions[index % 4]
-}
-</script>
-
-<template>
-  <div class="relative size-full">
-    <img
-      v-for="(photo, index) in photos"
-      :key="index"
-      :src="photo.src"
-      :alt="photo.src"
-      loading="lazy"
-      :class="['photo', getAnimationClass(index), photo.classes]"
-    />
-  </div>
-</template>
-
-<style scoped>
-.photo {
-  position: absolute;
-  opacity: 0;
-  transform: translate(0, 0);
-  animation: fadeSlide 1s forwards;
-}
-
-.fade-in {
-  animation: fadeOnly 1s forwards;
-}
-
-.from-top {
-  animation-name: slideFromTop;
-}
-.from-right {
-  animation-name: slideFromRight;
-}
-.from-bottom {
-  animation-name: slideFromBottom;
-}
-.from-left {
-  animation-name: slideFromLeft;
-}
-
-@keyframes fadeOnly {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideFromTop {
-  from { transform: translateY(-20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideFromRight {
-  from { transform: translateX(20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes slideFromBottom {
-  from { transform: translateY(20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideFromLeft {
-  from { transform: translateX(-20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-.photo {
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-}
-</style>
+<script setup lang="ts">
+interface Photo {
+  src: string
+  classes: string
+}
+
+const props = defineProps<{
+  photos: Photo[]
+}>()
+
+const getAnimationClass = (index: number) => {
+  if (props.photos.length === 1) return 'fade-in'
+  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
+  return directions[index % 4]
+}
+</script>
+
+<template>
+  <div class="relative size-full">
+    <img
+      v-for="(photo, index) in photos"
+      :key="index"
+      :src="photo.src"
+      :alt="photo.src"
+      loading="lazy"
+      :class="['photo', getAnimationClass(index), photo.classes]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.photo {
+  position: absolute;
+  opacity: 0;
+  transform: translate(0, 0);
+  animation: fadeSlide 1s forwards;
+}
+
+.fade-in {
+  animation: fadeOnly 1s forwards;
+}
+
+.from-top {
+  animation-name: slideFromTop;
+}
+.from-right {
+  animation-name: slideFromRight;
+}
+.from-bottom {
+  animation-name: slideFromBottom;
+}
+.from-left {
+  animation-name: slideFromLeft;
+}
+
+@keyframes fadeOnly {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideFromTop {
+  from { transform: translateY(-20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideFromRight {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideFromBottom {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideFromLeft {
+  from { transform: translateX(-20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+.photo {
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+</style>