adata-ui 2.1.23 → 2.1.25

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

@@ -1,57 +1,57 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div class="carousel overflow-hidden w-full relative">
-    <div class="flex w-max animate-scroll">
-      <div
-        v-for="i in 2"
-        :key="i"
-        class="flex"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@keyframes scroll {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-.animate-scroll {
-  animation: scroll 25s linear infinite;
-}
-
-.carousel:before,
-.carousel:after {
-  position: absolute;
-  top: 0;
-  width: 120px;
-  height: 100%;
-  content: "";
-  z-index: 2;
-}
-
-.carousel:before {
-  left: 0;
-  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
-}
-
-.carousel:after {
-  right: 0;
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
-}
-
-.dark {
-  .carousel:before {
-    background: linear-gradient(to left, rgba(38, 40, 43, 0), #161617);
-  }
-
-  .carousel:after {
-    background: linear-gradient(to right, rgba(38, 40, 43, 0), #161617);
-  }
-}
-</style>
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="carousel overflow-hidden w-full relative">
+    <div class="flex w-max animate-scroll">
+      <div
+        v-for="i in 2"
+        :key="i"
+        class="flex"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@keyframes scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+.animate-scroll {
+  animation: scroll 25s linear infinite;
+}
+
+.carousel:before,
+.carousel:after {
+  position: absolute;
+  top: 0;
+  width: 120px;
+  height: 100%;
+  content: "";
+  z-index: 2;
+}
+
+.carousel:before {
+  left: 0;
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
+}
+
+.carousel:after {
+  right: 0;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
+}
+
+.dark {
+  .carousel:before {
+    background: linear-gradient(to left, rgba(38, 40, 43, 0), #161617);
+  }
+
+  .carousel:after {
+    background: linear-gradient(to right, rgba(38, 40, 43, 0), #161617);
+  }
+}
+</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,78 +1,78 @@
-<script setup lang="ts">
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-
-const props = defineProps<{
-  isError?: boolean,
-  errorText?: string
-}>()
-
-const emit = defineEmits<{
-  (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,
-)
-
-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-md">
-    <p class="text-sm font-semibold mb-4">
-      {{ t('forms.leaveNote.title') }}
-    </p>
-    <a-textarea
-      v-model="note"
-      :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')"
-          color="red"
-          class="mt-1"
-        >
-          {{ getError('note') || (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>
-</template>
+<script setup lang="ts">
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  isError?: boolean,
+  errorText?: string
+}>()
+
+const emit = defineEmits<{
+  (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,
+)
+
+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-md">
+    <p class="text-sm font-semibold mb-4">
+      {{ t('forms.leaveNote.title') }}
+    </p>
+    <a-textarea
+      v-model="note"
+      :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')"
+          color="red"
+          class="mt-1"
+        >
+          {{ getError('note') || (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>
+</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-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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
-        @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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        @click="modelValue = lastPage"
+      >
+        <double-chevron-right class="text-base" />
+      </li>
+    </ul>
+  </div>
+</template>