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

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-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>

package/components/elements/segmented/ASegmentedV2.vue

@@ -1,58 +1,151 @@
-<script generic="T extends string | number" lang="ts" setup>
-interface Option {
-  value: T
-  label: string
-  disabled?: boolean
-  count?: number
-  dotColor?: string
-}
-
-const props = withDefaults(defineProps<{
-  options: Option[]
-  size?: 'sm' | 'md'
-  deselectable?: boolean
-}>(), {
-  size: 'md',
-  deselectable: true,
-})
-
-const modelValue = defineModel<T | undefined | null>()
-
-function select(option: Option) {
-  if (option.disabled) return
-  if (props.deselectable && modelValue.value === option.value) {
-    modelValue.value = undefined
-    return
-  }
-  modelValue.value = option.value
-}
-</script>
-
-<template>
-  <div class="flex flex-wrap gap-2">
-    <button
-      v-for="option in options"
-      :key="String(option.value)"
-      type="button"
-      :disabled="option.disabled"
-      class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
-      :class="[
-        size === 'sm' ? 'px-3 py-1 text-xs' : 'px-3.5 py-1.5 text-sm',
-        modelValue === option.value
-          ? 'border-transparent bg-blue-700 font-medium text-white dark:bg-blue-500 dark:text-gray-900'
-          : 'border-gray-300 bg-transparent text-gray-700 hover:border-gray-400 dark:border-gray-600 dark:text-gray-300 dark:hover:border-gray-500',
-      ]"
-      @click="select(option)"
-    >
-      <span
-        v-if="option.dotColor"
-        class="size-2 shrink-0 rounded-full"
-        :style="{ backgroundColor: option.dotColor }"
-      />
-      <span>{{ option.label }}</span>
-      <span v-if="option.count != null" class="tabular-nums opacity-70">
-        {{ option.count }}
-      </span>
-    </button>
-  </div>
-</template>
+<script generic="T extends string | number" lang="ts" setup>
+type Color = 'gray' | 'blue' | 'green' | 'yellow' | 'red'
+type View = 'outline' | 'solid'
+
+interface Option {
+  value: T
+  label: string
+  disabled?: boolean
+  count?: number | string
+  color?: Color
+  dotColor?: string
+}
+
+const props = withDefaults(defineProps<{
+  options: Option[]
+  size?: 'sm' | 'md'
+  view?: View
+  color?: Color
+  deselectable?: boolean
+  withDot?: boolean
+  neutral?: boolean
+}>(), {
+  size: 'md',
+  view: 'outline',
+  color: 'gray',
+  deselectable: true,
+  withDot: false,
+  neutral: false,
+})
+
+defineSlots<{
+  prepend?: (props: { option: Option, selected: boolean }) => any
+  count?: (props: { option: Option, selected: boolean }) => any
+}>()
+
+const modelValue = defineModel<T | undefined | null>()
+
+const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
+  gray: {
+    outline: 'border-[#D1D5DC] bg-white text-[#4A5565] hover:bg-[#F3F4F6] dark:bg-gray-900 dark:border-[#4A5565]/50 dark:text-gray-300 dark:hover:bg-[#4A5565]/10',
+    solid: 'border-transparent bg-[#F3F4F6] text-[#4A5565] hover:bg-[#D1D5DC] dark:bg-[#4A5565]/10 dark:text-gray-300 dark:hover:bg-[#4A5565]/20',
+    selected: 'border-transparent bg-[#4A5565] text-white dark:border-[#4A5565]/50 dark:bg-[#4A5565]/30 dark:text-gray-100',
+  },
+  blue: {
+    outline: 'border-[#B3DCFF] bg-white text-[#068DFF] hover:bg-[#F0F8FF] dark:bg-gray-900 dark:border-[#068DFF]/50 dark:text-blue-400 dark:hover:bg-[#068DFF]/10',
+    solid: 'border-transparent bg-[#F0F8FF] text-[#068DFF] hover:bg-[#B3DCFF] dark:bg-[#068DFF]/10 dark:text-blue-400 dark:hover:bg-[#068DFF]/20',
+    selected: 'border-transparent bg-[#068DFF] text-white dark:border-[#068DFF]/50 dark:bg-[#068DFF]/30 dark:text-blue-100',
+  },
+  green: {
+    outline: 'border-[#7BF1A8] bg-white text-[#00A63E] hover:bg-[#DCFCE7] dark:bg-gray-900 dark:border-[#00A63E]/50 dark:text-green-400 dark:hover:bg-[#00A63E]/10',
+    solid: 'border-transparent bg-[#DCFCE7] text-[#00A63E] hover:bg-[#7BF1A8] dark:bg-[#00A63E]/10 dark:text-green-400 dark:hover:bg-[#00A63E]/20',
+    selected: 'border-transparent bg-[#00A63E] text-white dark:border-[#00A63E]/50 dark:bg-[#00A63E]/30 dark:text-green-100',
+  },
+  yellow: {
+    outline: 'border-[#FFD230] bg-white text-[#E17100] hover:bg-[#FEF3C6] dark:bg-gray-900 dark:border-[#E17100]/50 dark:text-orange-400 dark:hover:bg-[#E17100]/10',
+    solid: 'border-transparent bg-[#FEF3C6] text-[#E17100] hover:bg-[#FFD230] dark:bg-[#E17100]/10 dark:text-orange-400 dark:hover:bg-[#E17100]/20',
+    selected: 'border-transparent bg-[#E17100] text-white dark:border-[#E17100]/50 dark:bg-[#E17100]/30 dark:text-orange-100',
+  },
+  red: {
+    outline: 'border-[#FFA2A2] bg-white text-[#E7000B] hover:bg-[#FFE2E2] dark:bg-gray-900 dark:border-[#E7000B]/50 dark:text-red-400 dark:hover:bg-[#E7000B]/10',
+    solid: 'border-transparent bg-[#FFE2E2] text-[#E7000B] hover:bg-[#FFA2A2] dark:bg-[#E7000B]/10 dark:text-red-400 dark:hover:bg-[#E7000B]/20',
+    selected: 'border-transparent bg-[#E7000B] text-white dark:border-[#E7000B]/50 dark:bg-[#E7000B]/30 dark:text-red-100',
+  },
+}
+
+const DOT_CLASS: Record<Color, Record<View, string>> = {
+  gray: { outline: 'bg-[#6A7282] dark:bg-gray-300', solid: 'bg-[#6A7282] dark:bg-gray-300' },
+  blue: { outline: 'bg-[#068DFF] dark:bg-blue-400', solid: 'bg-[#068DFF] dark:bg-blue-400' },
+  green: { outline: 'bg-[#00A63E] dark:bg-green-400', solid: 'bg-[#00A63E] dark:bg-green-400' },
+  yellow: { outline: 'bg-[#E17100] dark:bg-orange-400', solid: 'bg-[#E17100] dark:bg-orange-400' },
+  red: { outline: 'bg-[#E7000B] dark:bg-red-400', solid: 'bg-[#E7000B] dark:bg-red-400' },
+}
+
+const DOT_SELECTED_CLASS = 'bg-white'
+
+function dotColorName(option: Option): Color {
+  return option.color ?? props.color
+}
+
+function chipColorName(option: Option): Color {
+  return props.neutral ? 'gray' : dotColorName(option)
+}
+
+function isSelected(option: Option): boolean {
+  return modelValue.value === option.value
+}
+
+function chipClass(option: Option): string {
+  return isSelected(option)
+    ? `${CHIP_CLASS[dotColorName(option)].selected} font-medium`
+    : CHIP_CLASS[chipColorName(option)][props.view]
+}
+
+function showDot(option: Option): boolean {
+  return props.withDot || Boolean(option.color || option.dotColor)
+}
+
+function dotClass(option: Option): string {
+  return isSelected(option)
+    ? DOT_SELECTED_CLASS
+    : DOT_CLASS[dotColorName(option)][props.view]
+}
+
+function select(option: Option) {
+  if (option.disabled) return
+  if (props.deselectable && modelValue.value === option.value) {
+    modelValue.value = undefined
+    return
+  }
+  modelValue.value = option.value
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      :disabled="option.disabled"
+      class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+      :class="[
+        size === 'sm' ? 'px-3 py-1 text-body-sm' : 'px-3.5 py-1.5 text-body-md',
+        chipClass(option),
+      ]"
+      @click="select(option)"
+    >
+      <slot
+        name="prepend"
+        :option="option"
+        :selected="isSelected(option)"
+      />
+      <span
+        v-if="showDot(option)"
+        class="size-2 shrink-0 rounded-full"
+        :class="!option.dotColor || option.color || isSelected(option) ? dotClass(option) : undefined"
+        :style="option.dotColor && !option.color && !isSelected(option) ? { backgroundColor: option.dotColor } : undefined"
+      />
+      <span>{{ option.label }}</span>
+      <slot
+        name="count"
+        :option="option"
+        :selected="isSelected(option)"
+      >
+        <span v-if="option.count != null" class="tabular-nums opacity-70">
+          {{ option.count }}
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>