cornet-ui 0.1.0-beta.1

package/components/DataDisplay/du-card/du-card.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
+
+const props = withDefaults(
+  defineProps<{
+    size?: Size
+    bordered?: boolean
+    dash?: boolean
+    side?: boolean
+    imageFull?: boolean
+    responsive?: boolean
+    title?: string
+  }>(),
+  {
+    size: 'default',
+    bordered: false,
+    dash: false,
+    side: false,
+    imageFull: false,
+    responsive: false,
+    title: '',
+  },
+)
+
+const { sizeClass } = useSizeMapping(props, 'card')
+
+const borderedClass = computed(() => {
+  return props.bordered ? 'card-border' : ''
+})
+
+const dashClass = computed(() => {
+  return props.dash ? 'card-dash' : ''
+})
+
+const sideClass = computed(() => {
+  return props.side ? 'card-side' : ''
+})
+
+const responsiveClass = computed(() => {
+  return props.responsive ? 'card-compact sm:card-normal' : ''
+})
+
+const imageFullClass = computed(() => {
+  return props.imageFull ? 'image-full' : ''
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'card',
+      sizeClass,
+      borderedClass,
+      dashClass,
+      sideClass,
+      responsiveClass,
+      imageFullClass,
+    ]"
+  >
+    <slot name="figure"></slot>
+
+    <template v-if="$slots.body">
+      <slot name="body"></slot>
+      <slot name="default"></slot>
+    </template>
+
+    <div
+      v-else-if="$slots.title || $slots.actions || $slots.default || title"
+      class="card-body"
+    >
+      <h2 v-if="title || $slots.title" class="card-title flex-wrap">
+        <template v-if="title">{{ title }}</template>
+        <slot name="title"></slot>
+      </h2>
+
+      <slot></slot>
+
+      <div v-if="$slots.actions" class="card-actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+
+    <slot name="content"></slot>
+  </div>
+</template> 

package/components/DataDisplay/du-carousel/du-carousel-item.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  id?: string
+}>()
+</script>
+
+<template>
+  <div :id="id" class="carousel-item">
+    <slot></slot>
+  </div>
+</template> 

package/components/DataDisplay/du-carousel/du-carousel.types.ts

@@ -0,0 +1,15 @@
+export const CAROUSEL_POSITIONS = [
+  'carousel-start',
+  'carousel-center',
+  'carousel-end',
+] as const
+
+export type CAROUSELPosition = (typeof CAROUSEL_POSITIONS)[number]
+
+export interface CarouselItem {
+  id?: string
+  src?: string
+  alt?: string
+  content?: string
+  customClass?: string
+} 

package/components/DataDisplay/du-carousel/du-carousel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { type CarouselItem } from './du-carousel.types'
+import DuCarouselItem from './du-carousel-item.vue'
+
+const props = withDefaults(
+  defineProps<{
+    items?: CarouselItem[]
+    start?: boolean
+    center?: boolean
+    end?: boolean
+    vertical?: boolean
+  }>(),
+  {
+    items: undefined,
+    start: true,
+    center: false,
+    end: false,
+    vertical: false,
+  },
+)
+
+const positionClass = computed(() => {
+  if (props.center) return "carousel-center"
+  if (props.end) return "carousel-end"
+  if (props.start) return "carousel-start"
+  return null
+})
+</script>
+
+<template>
+  <div :class="['carousel', positionClass, { 'carousel-vertical': vertical }]">
+    <template v-if="items && items.length">
+      <DuCarouselItem
+        v-for="(item, index) in items"
+        :key="item.id ?? index"
+        :id="item.id"
+        :class="item.customClass"
+      >
+        <img v-if="item.src" :src="item.src" :alt="item.alt ?? `Slide ${index + 1}`" />
+        <template v-else-if="item.content">{{ item.content }}</template>
+      </DuCarouselItem>
+    </template>
+    <slot v-else></slot>
+  </div>
+</template> 

package/components/DataDisplay/du-chat/du-chat-item.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { type Variant, useVariantMapping } from "../../../composables/useVariantProps";
+import { type ChatPlacement } from "./du-chat.types";
+
+interface ChatItemProps {
+  message?: string;
+  placement?: ChatPlacement;
+  variant?: Variant;
+  customClass?: string;
+}
+
+const props = withDefaults(
+  defineProps<ChatItemProps>(),
+  {
+    message: "",
+    placement: undefined,
+    variant: "default",
+    customClass: "",
+  },
+);
+
+const defaultPlacement = inject("defaultChatPlacement", "start");
+
+const finalPlacement = computed(() => props.placement || defaultPlacement);
+
+const { colorClass } = useVariantMapping(props, "chat-bubble");
+
+const placementClass = computed(() => {
+  return finalPlacement.value === "end" ? "chat-end" : "chat-start";
+});
+</script>
+
+<template>
+  <div :class="['chat', placementClass, customClass]">
+    <div v-if="$slots.image" class="chat-image avatar">
+      <div class="w-10 rounded-full">
+        <slot name="image"></slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.header" class="chat-header">
+      <slot name="header"></slot>
+    </div>
+
+    <div :class="['chat-bubble', colorClass]">
+      <slot name="message">
+        {{ message }}
+      </slot>
+    </div>
+
+    <div v-if="$slots.footer" class="chat-footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template> 

package/components/DataDisplay/du-chat/du-chat.types.ts

@@ -0,0 +1,31 @@
+export const CHAT_COLORS = [
+  'chat-bubble-primary',
+  'chat-bubble-secondary',
+  'chat-bubble-accent',
+  'chat-bubble-neutral',
+  'chat-bubble-info',
+  'chat-bubble-success',
+  'chat-bubble-warning',
+  'chat-bubble-error',
+] as const
+
+export type CHATColor = (typeof CHAT_COLORS)[number]
+
+export const DU_CHAT_PLACEMENTS = ["start", "end"] as const;
+export type ChatPlacement = (typeof DU_CHAT_PLACEMENTS)[number];
+
+export interface ChatItem {
+  message?: string;
+  image?: string;
+  header?: string;
+  footer?: string;
+  placement?: ChatPlacement;
+  variant?: CHATColor;
+  customClass?: string;
+}
+
+export interface ChatProps {
+  items?: ChatItem[];
+  placement?: ChatPlacement;
+  customClass?: string;
+} 

package/components/DataDisplay/du-chat/du-chat.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import { type ChatProps } from './du-chat.types';
+
+const props = withDefaults(
+  defineProps<ChatProps>(),
+  {
+    items: undefined,
+    placement: "start",
+    customClass: "",
+  },
+);
+
+provide("defaultChatPlacement", props.placement);
+
+const getPlacementClass = (itemPlacement: string | undefined) => {
+  const finalPlacement = itemPlacement || props.placement;
+  return finalPlacement === "end" ? "chat-end" : "chat-start";
+};
+</script>
+
+<template>
+  <!-- Dynamic items mode -->
+  <template v-if="items">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      :class="[
+        'chat',
+        getPlacementClass(item.placement),
+        item.customClass || customClass,
+      ]"
+    >
+      <div
+        v-if="item.image || $slots[`image-${index}`]"
+        class="chat-image avatar"
+      >
+        <div class="w-10 rounded-full">
+          <slot :name="`image-${index}`" :item="item" :index="index">
+            <img v-if="item.image" :src="item.image" alt="Chat avatar" />
+          </slot>
+        </div>
+      </div>
+
+      <div v-if="item.header || $slots[`header-${index}`]" class="chat-header">
+        <slot :name="`header-${index}`" :item="item" :index="index">
+          {{ item.header }}
+        </slot>
+      </div>
+
+      <div
+        :class="['chat-bubble', item.variant ? `chat-bubble-${item.variant}` : '']"
+      >
+        <slot :name="`message-${index}`" :item="item" :index="index">
+          {{ item.message }}
+        </slot>
+      </div>
+
+      <div v-if="item.footer || $slots[`footer-${index}`]" class="chat-footer">
+        <slot :name="`footer-${index}`" :item="item" :index="index">
+          {{ item.footer }}
+        </slot>
+      </div>
+    </div>
+  </template>
+
+  <!-- Manual mode -->
+  <template v-else>
+    <slot></slot>
+  </template>
+</template> 

package/components/DataDisplay/du-collapse/du-collapse.types.ts

@@ -0,0 +1,15 @@
+export const COLLAPSE_MODIFIERS = [
+  'collapse-arrow',
+  'collapse-plus',
+  'collapse-open',
+  'collapse-close',
+] as const
+
+export interface COLLAPSEItem {
+  title?: string
+  content?: string
+  open?: boolean
+  customClass?: string
+}
+
+export type COLLAPSEModifier = (typeof COLLAPSE_MODIFIERS)[number] 

package/components/DataDisplay/du-collapse/du-collapse.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { type COLLAPSEItem } from './du-collapse.types'
+
+withDefaults(
+  defineProps<{
+    items?: COLLAPSEItem[]
+    modifier?:
+      | 'collapse-arrow'
+      | 'collapse-plus'
+      | 'collapse-open'
+      | 'collapse-close'
+    customClass?: string
+  }>(),
+  {
+    items: undefined,
+    modifier: undefined,
+    customClass: '',
+  },
+)
+
+const collapseId = computed(
+  () => `collapse-${Math.random().toString(36).substring(2, 9)}`,
+)
+provide('collapseId', collapseId.value)
+</script>
+
+<template>
+  <!-- Dynamic items mode -->
+  <template v-if="items">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      :class="[
+        'collapse',
+        'bg-base-100 border border-base-300',
+        modifier,
+        item.customClass || customClass,
+      ]"
+    >
+      <input type="checkbox" :checked="item.open ?? false" />
+      <div class="collapse-title">
+        <slot :name="`title-${index}`" :item="item" :index="index">
+          {{ item.title }}
+        </slot>
+      </div>
+      <div class="collapse-content">
+        <slot :name="`content-${index}`" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </div>
+    </div>
+  </template>
+
+  <!-- Manual mode -->
+  <template v-else>
+    <slot></slot>
+  </template>
+</template>

package/components/DataDisplay/du-countdown/du-countdown-group.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import DuCountdown from "./du-countdown.vue"
+import { type COUNTDOWNLabels } from './du-countdown.types'
+
+withDefaults(
+  defineProps<{
+    targetDate?: Date
+    showDays?: boolean
+    showHours?: boolean
+    showMinutes?: boolean
+    showSeconds?: boolean
+    labels?: COUNTDOWNLabels
+    separator?: string
+    customClass?: string
+  }>(),
+  {
+    targetDate: undefined,
+    showDays: true,
+    showHours: true,
+    showMinutes: true,
+    showSeconds: true,
+    labels: () => ({
+      days: "days",
+      hours: "hours",
+      minutes: "min",
+      seconds: "sec",
+    }),
+    separator: ":",
+    customClass: "",
+  },
+)
+
+</script>
+
+<template>
+  <div :class="['flex items-center gap-2', customClass]">
+    <div v-if="showDays" class="flex flex-col items-center">
+      <DuCountdown
+        :target-date="targetDate"
+        format="days"
+        :separator="separator"
+      />
+      <span class="text-xs mt-1">{{ labels.days }}</span>
+    </div>
+
+    <span
+      v-if="showDays && (showHours || showMinutes || showSeconds)"
+      class="text-xl"
+    >
+      {{ separator }}
+    </span>
+
+    <div v-if="showHours" class="flex flex-col items-center">
+      <DuCountdown
+        :target-date="targetDate"
+        format="hours"
+        :separator="separator"
+      />
+      <span class="text-xs mt-1">{{ labels.hours }}</span>
+    </div>
+
+    <span v-if="showHours && (showMinutes || showSeconds)" class="text-xl">
+      {{ separator }}
+    </span>
+
+    <div v-if="showMinutes" class="flex flex-col items-center">
+      <DuCountdown
+        :target-date="targetDate"
+        format="minutes"
+        :separator="separator"
+      />
+      <span class="text-xs mt-1">{{ labels.minutes }}</span>
+    </div>
+
+    <span v-if="showMinutes && showSeconds" class="text-xl">
+      {{ separator }}
+    </span>
+
+    <div v-if="showSeconds" class="flex flex-col items-center">
+      <DuCountdown
+        :target-date="targetDate"
+        format="seconds"
+        :separator="separator"
+      />
+      <span class="text-xs mt-1">{{ labels.seconds }}</span>
+    </div>
+  </div>
+</template> 

package/components/DataDisplay/du-countdown/du-countdown.types.ts

@@ -0,0 +1,15 @@
+export const COUNTDOWN_FORMATS = [
+  'days',
+  'hours',
+  'minutes',
+  'seconds',
+] as const
+
+export type COUNTDOWNFormat = (typeof COUNTDOWN_FORMATS)[number]
+
+export interface COUNTDOWNLabels {
+  days?: string
+  hours?: string
+  minutes?: string
+  seconds?: string
+} 

package/components/DataDisplay/du-countdown/du-countdown.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue"
+import { type COUNTDOWNFormat } from './du-countdown.types'
+
+const props = withDefaults(
+  defineProps<{
+    value?: number
+    targetDate?: Date
+    format?: COUNTDOWNFormat
+    separator?: string
+    customClass?: string
+    autoStart?: boolean
+  }>(),
+  {
+    value: undefined,
+    targetDate: undefined,
+    format: "seconds",
+    separator: ":",
+    customClass: "",
+    autoStart: true,
+  },
+)
+
+const currentValue = ref(props.value !== undefined ? props.value : 0)
+const intervalId = ref<number | null>(null)
+
+const calculateTimeRemaining = () => {
+  if (!props.targetDate) return 0
+
+  const now = new Date().getTime()
+  const target = props.targetDate.getTime()
+  const difference = Math.max(0, target - now)
+
+  const calculators = {
+    days: () => Math.floor(difference / (1000 * 60 * 60 * 24)),
+    hours: () =>
+      Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+    minutes: () => Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
+    seconds: () => Math.floor((difference % (1000 * 60)) / 1000),
+  }
+
+  return (calculators[props.format] || calculators.seconds)()
+}
+
+// Calculer le temps total restant en millisecondes
+const getTotalTimeRemaining = () => {
+  if (!props.targetDate) return 0
+  const now = new Date().getTime()
+  const target = props.targetDate.getTime()
+  return Math.max(0, target - now)
+}
+
+// Mettre à jour la valeur en fonction de la date cible
+const updateFromTargetDate = () => {
+  if (props.targetDate) {
+    currentValue.value = calculateTimeRemaining()
+  }
+}
+
+// Nombre de chiffres à afficher (2 ou 3)
+const digits = computed(() => {
+  return currentValue.value > 99 ? 3 : 2
+})
+
+// Formater la valeur pour l'affichage
+const formattedValue = computed(() => {
+  const value = Math.min(999, Math.max(0, currentValue.value))
+  return value.toString().padStart(digits.value, '0')
+})
+
+// Valeur pour l'attribut aria-label
+const ariaLabel = computed(() => {
+  return `${currentValue.value} ${props.format}`
+})
+
+// Définir l'émetteur d'événements
+const emit = defineEmits<{
+  (e: "end"): void
+}>()
+
+// Démarrer le compte à rebours
+const startCountdown = () => {
+  if (intervalId.value !== null) return
+
+  updateFromTargetDate()
+
+  intervalId.value = window.setInterval(() => {
+    if (props.targetDate) {
+      updateFromTargetDate()
+      // Vérifier si le temps total restant est 0, pas juste la valeur affichée
+      if (getTotalTimeRemaining() === 0) {
+        emit("end")
+        stopCountdown()
+      }
+    } else if (currentValue.value > 0) {
+      currentValue.value--
+      if (currentValue.value === 0) {
+        emit("end")
+        stopCountdown()
+      }
+    } else {
+      stopCountdown()
+    }
+  }, 1000)
+}
+
+// Arrêter le compte à rebours
+const stopCountdown = () => {
+  if (intervalId.value !== null) {
+    clearInterval(intervalId.value)
+    intervalId.value = null
+  }
+}
+
+// Réinitialiser le compte à rebours
+const resetCountdown = () => {
+  stopCountdown()
+  if (props.value !== undefined) {
+    currentValue.value = props.value
+  } else if (props.targetDate) {
+    updateFromTargetDate()
+  } else {
+    currentValue.value = 0
+  }
+}
+
+// Exposer les méthodes pour le contrôle externe
+defineExpose({
+  start: startCountdown,
+  stop: stopCountdown,
+  reset: resetCountdown,
+})
+
+// Surveiller les changements de props
+watch(
+  () => props.value,
+  (newValue) => {
+    if (newValue !== undefined) {
+      currentValue.value = newValue
+    }
+  },
+)
+
+watch(
+  () => props.targetDate,
+  () => {
+    resetCountdown()
+    if (props.autoStart) {
+      startCountdown()
+    }
+  },
+)
+
+// Démarrer le compte à rebours au montage si autoStart est true
+onMounted(() => {
+  if (props.autoStart) {
+    startCountdown()
+  }
+})
+
+// Nettoyer l'intervalle avant de démonter le composant
+onBeforeUnmount(() => {
+  stopCountdown()
+})
+
+const cssVars = computed(() => ({
+  '--value': Math.min(999, Math.max(0, currentValue.value)),
+  '--digits': digits.value
+}))
+</script>
+
+<template>
+  <span
+    :class="['countdown', customClass]"
+    aria-live="polite"
+    :aria-label="ariaLabel"
+  >
+    <span :style="cssVars">{{ formattedValue }}</span>
+  </span>
+</template> 

package/components/DataDisplay/du-diff/du-diff.types.ts

@@ -0,0 +1,9 @@
+export const DIFF_ASPECT_RATIOS = [
+  'aspect-16/9',
+  'aspect-4/3',
+  'aspect-1/1',
+  'aspect-video',
+  'aspect-square',
+] as const
+
+export type DIFFAspectRatio = (typeof DIFF_ASPECT_RATIOS)[number]