cornet-ui 0.1.0-beta.1

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { type DIFFAspectRatio } from './du-diff.types'
+
+withDefaults(
+  defineProps<{
+    item1?: string
+    item2?: string
+    aspectRatio?: DIFFAspectRatio | string | null
+  }>(),
+  {
+    item1: undefined,
+    item2: undefined,
+    aspectRatio: "",
+  },
+)
+</script>
+
+<template>
+  <figure :class="['diff', aspectRatio]">
+    <div class="diff-item-1">
+      <slot name="item1">
+        <img v-if="item1" :src="item1" alt="Image 1" />
+        <div
+          v-else
+          class="bg-primary text-primary-content flex items-center justify-center h-full"
+        >
+          Image 1
+        </div>
+      </slot>
+    </div>
+    <div class="diff-item-2">
+      <slot name="item2">
+        <img v-if="item2" :src="item2" alt="Image 2" />
+        <div
+          v-else
+          class="bg-secondary text-secondary-content flex items-center justify-center h-full"
+        >
+          Image 2
+        </div>
+      </slot>
+    </div>
+    <div class="diff-resizer"></div>
+  </figure>
+</template>

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

@@ -0,0 +1,9 @@
+export const KBD_SIZES = [
+  'kbd-xs',
+  'kbd-sm',
+  'kbd-md',
+  'kbd-lg',
+  'kbd-xl',
+] as const
+
+export type KBDSize = (typeof KBD_SIZES)[number] 

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type Size, useSizeMapping } from "../../../composables/useSizeProps"
+
+// Définition des types pour les props
+const props = withDefaults(
+  defineProps<{
+    size?: Size
+  }>(),
+  {
+    size: "default",
+  },
+)
+
+const { sizeClass } = useSizeMapping(props, "kbd")
+</script>
+
+<template>
+  <kbd :class="['kbd', sizeClass]">
+    <slot></slot>
+  </kbd>
+</template> 

package/components/DataDisplay/du-list/du-list-row.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  class?: string
+  as?: string
+}>()
+</script>
+
+<template>
+  <component :class="['list-row', props.class, (props.as == 'label') && 'cursor-pointer']" :is="props.as || 'li'">
+      <slot></slot>
+  </component>
+</template> 

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

@@ -0,0 +1,3 @@
+export interface LISTProps {
+  class?: string
+} 

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { type LISTProps } from './du-list.types'
+
+const props = defineProps<LISTProps>()
+</script>
+
+<template>
+  <ul :class="['list', props.class]">
+    <slot></slot>
+  </ul>
+</template> 

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

@@ -0,0 +1,12 @@
+export interface STATItem {
+  title?: string
+  value?: string | number
+  description?: string
+  figure?: any
+  figureClass?: string
+  valueClass?: string
+  descClass?: string
+  titleClass?: string
+  actions?: any
+  [key: string]: any
+} 

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  figureClass?: string
+  valueClass?: string
+  descClass?: string
+  titleClass?: string
+}>()
+</script>
+
+<template>
+  <div class="stat">
+    <div v-if="$slots.figure" class="stat-figure" :class="figureClass">
+      <slot name="figure"></slot>
+    </div>
+    <div v-if="$slots.title" class="stat-title" :class="titleClass">
+      <slot name="title"></slot>
+    </div>
+    <div v-if="$slots.value" class="stat-value" :class="valueClass">
+      <slot name="value"></slot>
+    </div>
+    <div v-if="$slots.desc" class="stat-desc" :class="descClass">
+      <slot name="desc"></slot>
+    </div>
+    <div v-if="$slots.actions" class="stat-actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template> 

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

@@ -0,0 +1,3 @@
+import { type STATItem } from '../du-stat/du-stat.types'
+
+export type STATSItem = STATItem

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import DuStat from "../du-stat/du-stat.vue"
+import { type STATSItem } from './du-stats.types'
+
+const props = defineProps<{
+  items?: STATSItem[]
+  vertical?: boolean
+  shadow?: boolean
+  dash?: boolean
+}>()
+
+const verticalClass = computed(() => {
+  return props.vertical ? "stats-vertical" : "stats-horizontal"
+})
+
+const shadowClass = computed(() => {
+  return props.shadow ? "shadow" : ""
+})
+
+const dashClass = computed(() => {
+  return props.dash ? "stats-dash" : ""
+})
+</script>
+
+<template>
+  <div :class="['stats', verticalClass, shadowClass, dashClass]">
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+    <template v-else-if="items">
+      <DuStat
+        v-for="(item, index) in items"
+        :key="index"
+        :figureClass="item.figureClass"
+        :valueClass="item.valueClass"
+        :descClass="item.descClass"
+        :titleClass="item.titleClass"
+      >
+        <template v-if="item.figure || $slots.figure" #figure>
+          <slot name="figure" :item="item">
+            <component
+              :is="item.figure"
+              v-if="typeof item.figure === 'object'"
+            />
+            <img
+              v-else-if="
+                typeof item.figure === 'string' &&
+                item.figure.startsWith('http')
+              "
+              :src="item.figure"
+              :alt="item.title"
+            />
+            <div
+              v-else-if="typeof item.figure === 'string'"
+              v-html="item.figure"
+            ></div>
+          </slot>
+        </template>
+
+        <template v-if="item.title || $slots.title" #title>
+          <slot name="title" :item="item">{{ item.title }}</slot>
+        </template>
+
+        <template v-if="item.value || $slots.value" #value>
+          <slot name="value" :item="item">{{ item.value }}</slot>
+        </template>
+
+        <template v-if="item.description || $slots.desc" #desc>
+          <slot name="desc" :item="item">{{ item.description }}</slot>
+        </template>
+
+        <template v-if="item.actions || $slots.actions" #actions>
+          <slot name="actions" :item="item">
+            <component
+              :is="item.actions"
+              v-if="typeof item.actions === 'object'"
+            />
+          </slot>
+        </template>
+      </DuStat>
+    </template>
+  </div>
+</template> 
+
+
+<style scoped>
+.stats-dash {
+  border:var(--border)dashed color-mix(in oklab,currentColor 10%,#0000);
+}
+</style>

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

@@ -0,0 +1,21 @@
+export const STATUS_SIZES = [
+  'status-xs',
+  'status-sm',
+  'status-md',
+  'status-lg',
+  'status-xl',
+] as const
+
+export const STATUS_VARIANTS = [
+  'status-primary',
+  'status-secondary',
+  'status-accent',
+  'status-neutral',
+  'status-info',
+  'status-success',
+  'status-warning',
+  'status-error',
+] as const
+
+export type STATUSSize = (typeof STATUS_SIZES)[number]
+export type STATUSVariant = (typeof STATUS_VARIANTS)[number] 

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { type Size, useSizeMapping } from "../../../composables/useSizeProps"
+import { type Variant, useVariantMapping } from "../../../composables/useVariantProps"
+import { computed } from "vue"
+
+// Définition des types pour les props
+const props = withDefaults(
+  defineProps<{
+    size?: Size
+    variant?: Variant
+    bounce?: boolean
+    ping?: boolean
+  }>(),
+  {
+    size: "default",
+    variant: "default",
+    bounce: false,
+    ping: false,
+  },
+)
+
+const ariaLabel = computed(() => {
+  switch (props.variant) {
+    case "info":
+    case "success":
+    case "warning":
+    case "error":
+      return props.variant
+    default:
+      return "status"
+  }
+})
+
+const { colorClass } = useVariantMapping(props, "status")
+const { sizeClass } = useSizeMapping(props, "status")
+const animateBounceClass = computed(() => {
+  return props.bounce ? "animate-bounce" : ""
+})
+</script>
+
+<template>
+  <div
+    v-if="!ping"
+    :aria-label="ariaLabel"
+    :class="['status', sizeClass, colorClass, animateBounceClass]"
+  ></div>
+  <div class="inline-grid *:[grid-area:1/1]" v-else>
+    <div :class="['status', sizeClass, colorClass, 'animate-ping']"></div>
+    <div :class="['status', sizeClass, colorClass]"></div>
+  </div>
+</template> 

package/components/DataDisplay/du-table/du-table-item.types.ts

@@ -0,0 +1,6 @@
+export interface TABLEItemProps {
+  customClass?: string
+  isHeader?: boolean
+  colspan?: number
+  rowspan?: number
+} 

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type TABLEItemProps } from './du-table-item.types'
+
+withDefaults(
+  defineProps<TABLEItemProps>(),
+  {
+    customClass: "",
+    isHeader: false,
+    colspan: undefined,
+    rowspan: undefined,
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="isHeader ? 'th' : 'td'"
+    :class="customClass"
+    :colspan="colspan"
+    :rowspan="rowspan"
+  >
+    <slot></slot>
+  </component>
+</template> 

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

@@ -0,0 +1,26 @@
+export const TABLE_SIZES = ['default', 'xs', 'sm', 'md', 'lg', 'xl'] as const
+export type TABLESize = (typeof TABLE_SIZES)[number]
+
+export interface TABLEColumn {
+  key: string
+  label: string
+  customClass?: string
+}
+
+export interface TABLERow {
+  id: string | number
+  [key: string]: any
+  customClass?: string
+}
+
+export interface TABLEProps {
+  columns?: TABLEColumn[]
+  rows?: TABLERow[]
+  zebra?: boolean
+  pinRows?: boolean
+  pinCols?: boolean
+  size?: TABLESize
+  customClass?: string
+  header?: boolean
+  footer?: boolean
+} 

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

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { type TABLEProps } from './du-table.types'
+import { useSizeMapping } from "../../../composables/useSizeProps"
+
+const props = withDefaults(
+  defineProps<TABLEProps>(),
+  {
+    columns: undefined,
+    rows: undefined,
+    zebra: false,
+    pinRows: false,
+    pinCols: false,
+    size: "default",
+    customClass: "",
+    header: true,
+    footer: false,
+  },
+)
+
+
+const { sizeClass } = useSizeMapping(props, "table")
+
+const zebraClass = computed(() => {
+  return props.zebra ? "table-zebra" : ""
+})
+
+const pinRowsClass = computed(() => {
+  return props.pinRows ? "table-pin-rows" : ""
+})
+
+const pinColsClass = computed(() => {
+  return props.pinCols ? "table-pin-cols" : ""
+})
+
+const customClassValue = computed(() => {
+  return props.customClass || ""
+})
+</script>
+
+<template>
+  <div class="overflow-x-auto">
+    <!-- Dynamic mode -->
+    <table
+      v-if="columns && rows"
+      :class="[
+        'table',
+        sizeClass,
+        zebraClass,
+        pinRowsClass,
+        pinColsClass,
+        customClassValue,
+      ]"
+    >
+      <thead v-if="$slots.header || header">
+        <template v-if="$slots.header">
+          <slot name="header"></slot>
+        </template>
+        <tr v-else>
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            :class="column.customClass"
+          >
+            <slot :name="`header-${column.key}`" :column="column">
+              {{ column.label }}
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(row, rowIndex) in rows"
+          :key="row.id"
+          :class="row.customClass"
+        >
+          <td
+            v-for="(column, colIndex) in columns"
+            :key="`${rowIndex}-${colIndex}`"
+          >
+            <slot
+              :name="`cell-${column.key}`"
+              :row="row"
+              :column="column"
+              :value="row[column.key]"
+            >
+              {{ row[column.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot v-if="$slots.footer || footer">
+        <template v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </template>
+        <tr v-else>
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            :class="column.customClass"
+          >
+            <slot :name="`footer-${column.key}`" :column="column">
+              {{ column.label }}
+            </slot>
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+
+    <!-- Manual mode -->
+    <table
+      v-else
+      :class="[
+        'table',
+        sizeClass,
+        zebraClass,
+        pinRowsClass,
+        pinColsClass,
+        customClassValue,
+      ]"
+    >
+      <slot></slot>
+    </table>
+  </div>
+</template> 

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    start?: string
+    middle?: string
+    end?: string
+    customClass?: string
+    valid?: boolean | undefined
+    hrClass?: string
+  }>(),
+  {
+    start: "",
+    middle: "",
+    end: "",
+    customClass: "",
+    valid: undefined,
+    hrClass: "",
+  },
+)
+
+const lineClass = computed(() => {
+  if (props.hrClass) {
+    return props.hrClass
+  }
+
+  if (props.valid === true) {
+    return "bg-primary"
+  } else if (props.valid === false) {
+    return "bg-error"
+  }
+
+  return ""
+})
+</script>
+
+<template>
+  <li :class="customClass">
+    <hr v-if="$parent?.$slots?.default" :class="lineClass" />
+
+    <div v-if="start || $slots.start" class="timeline-start">
+      <slot name="start">
+        {{ start }}
+      </slot>
+    </div>
+    <div class="timeline-middle">
+      <slot name="middle">
+        <template v-if="middle">{{ middle }}</template>
+        <template v-else>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            :class="[
+              'w-5 h-5',
+              valid === true
+                ? 'text-primary'
+                : valid === false
+                  ? 'text-error'
+                  : '',
+            ]"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </template>
+      </slot>
+    </div>
+    <div
+      v-if="end || $slots.end"
+      class="timeline-end"
+      :class="{ 'timeline-box': $slots.end || end }"
+    >
+      <slot name="end">
+        {{ end }}
+      </slot>
+    </div>
+    <hr v-if="$slots.default || $parent?.$slots?.default" :class="lineClass" />
+    <slot></slot>
+  </li>
+</template> 

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

@@ -0,0 +1,22 @@
+export const TIMELINE_DIRECTIONS = [
+  'timeline-vertical',
+  'timeline-horizontal',
+] as const
+
+export const TIMELINE_MODIFIERS = [
+  'timeline-snap-icon',
+  'timeline-box',
+  'timeline-compact',
+] as const
+
+export type TIMELINEDirection = (typeof TIMELINE_DIRECTIONS)[number]
+export type TIMELINEModifier = (typeof TIMELINE_MODIFIERS)[number]
+
+export interface TIMELINEItem {
+  start?: string
+  middle?: string
+  end?: string
+  customClass?: string
+  valid?: boolean | undefined
+  hrClass?: string
+}