cornet-ui 0.1.0-beta.1

package/components/Actions/du-modal/du-modal.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    open?: boolean
+    closeButton?: boolean
+    closeOnEscape?: boolean
+    closeBackdrop?: boolean
+    placement?: 'top' | 'middle' | 'bottom' | 'start' | 'end' | 'responsive'
+    classBox?: string
+    /** Accessible name of the dialog (use when there is no visible title). */
+    ariaLabel?: string
+    /** id of the element naming the dialog (e.g. your title element). */
+    ariaLabelledby?: string
+    /** Accessible label of the close button and backdrop. */
+    closeLabel?: string
+  }>(),
+  {
+    id: undefined,
+    open: false,
+    closeButton: false,
+    closeOnEscape: true,
+    closeBackdrop: true,
+    placement: 'middle',
+    classBox: '',
+    ariaLabel: undefined,
+    ariaLabelledby: undefined,
+    closeLabel: 'Close',
+  },
+)
+
+const dialogRef = ref<HTMLDialogElement | null>(null)
+
+const placementClass = computed(() => {
+  switch (props.placement) {
+    case 'top':
+      return 'modal-top'
+    case 'middle':
+      return 'modal-middle'
+    case 'bottom':
+      return 'modal-bottom'
+    case 'start':
+      return 'modal-start'
+    case 'end':
+      return 'modal-end'
+    case 'responsive':
+      return 'modal-bottom sm:modal-middle'
+    default:
+      return ''
+  }
+})
+
+const showModal = () => {
+  if (dialogRef.value) {
+    dialogRef.value.showModal()
+  }
+}
+
+const closeModal = () => {
+  if (dialogRef.value) {
+    dialogRef.value.close()
+  }
+}
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+defineExpose({
+  showModal,
+  closeModal,
+})
+
+onMounted(() => {
+  if (props.open && dialogRef.value) {
+    showModal()
+  }
+})
+
+watch(
+  () => props.open,
+  (newValue: boolean) => {
+    if (newValue && dialogRef.value) {
+      showModal()
+    } else if (!newValue && dialogRef.value) {
+      closeModal()
+    }
+  },
+)
+
+function handleEscapeKey(_event: KeyboardEvent) {
+  if (props.closeOnEscape) {
+    closeModal()
+  }
+}
+</script>
+
+<template>
+  <dialog
+    ref="dialogRef"
+    :id="id"
+    :class="['modal', placementClass]"
+    :aria-label="ariaLabel"
+    :aria-labelledby="ariaLabelledby"
+    @keydown.esc.prevent="handleEscapeKey"
+    @close="emit('update:open', false)"
+  >
+    <div :class="['modal-box', classBox]">
+      <form v-if="closeButton" method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" :aria-label="closeLabel">
+          ✕
+        </button>
+      </form>
+      <slot></slot>
+      <div class="modal-action" v-if="$slots.actions"><slot name="actions"> </slot></div>
+    </div>
+    <form v-if="closeBackdrop" method="dialog" class="modal-backdrop">
+      <button>{{ closeLabel }}</button>
+    </form>
+  </dialog>
+</template> 

package/components/Actions/du-swap/du-swap.types.ts

@@ -0,0 +1,3 @@
+export const SWAP_PROPERTIES = ['swap-rotate', 'swap-flip', 'swap-active'] as const
+
+export type SWAPProperty = (typeof SWAP_PROPERTIES)[number] 

package/components/Actions/du-swap/du-swap.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    rotate?: boolean
+    flip?: boolean
+    useCheckbox?: boolean
+  }>(),
+  {
+    modelValue: false,
+    rotate: false,
+    flip: false,
+    useCheckbox: true,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const internalActive = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  internalActive.value = val
+})
+
+const isActive = computed({
+  get: () => internalActive.value,
+  set: (value) => {
+    internalActive.value = value
+    emit('update:modelValue', value)
+  },
+})
+
+const classes = computed(() => ({
+  'swap-rotate': props.rotate,
+  'swap-flip': props.flip,
+}))
+</script>
+
+<template>
+  <label v-if="useCheckbox" class="swap" :class="classes">
+    <input
+      type="checkbox"
+      v-model="isActive"
+      :indeterminate="$slots.indeterminate ? true : false"
+    />
+    <div class="swap-on">
+      <slot name="on" />
+    </div>
+    <div class="swap-off">
+      <slot name="off" />
+    </div>
+    <div v-if="$slots.indeterminate" class="swap-indeterminate">
+      <slot name="indeterminate" />
+    </div>
+  </label>
+  <div v-else class="swap" :class="[classes, { 'swap-active': isActive }]" @click="isActive = !isActive">
+    <div class="swap-on">
+      <slot name="on" />
+    </div>
+    <div class="swap-off">
+      <slot name="off" />
+    </div>
+  </div>
+</template> 

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+withDefaults(
+  defineProps<{
+    checked?: boolean
+    customClass?: string
+    title?: string
+  }>(),
+  {
+    checked: false,
+    customClass: '',
+    title: '',
+  },
+)
+
+// Get the accordion name from parent
+const accordionName = inject('accordionName', '')
+</script>
+
+<template>
+  <div :class="['collapse', 'bg-base-100 border border-base-300', customClass]">
+    <input
+      type="radio"
+      :name="accordionName"
+      :checked="checked ? true : undefined"
+    />
+    <div class="collapse-title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="collapse-content">
+      <slot></slot>
+    </div>
+  </div>
+</template> 

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

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

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { type ACCORDIONItem } from './du-accordion.types'
+
+const props = withDefaults(
+  defineProps<{
+    items?: ACCORDIONItem[]
+    name?: string
+    modifier?:
+      | 'collapse-arrow'
+      | 'collapse-plus'
+      | 'collapse-open'
+      | 'collapse-close'
+    customClass?: string
+  }>(),
+  {
+    items: undefined,
+    name: 'accordion',
+    modifier: undefined,
+    customClass: '',
+  },
+)
+
+const accordionName = computed(() => {
+  return (
+    props.name || `accordion-${Math.random().toString(36).substring(2, 9)}`
+  )
+})
+
+// Provide the accordion name to child components
+provide('accordionName', accordionName.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="radio"
+        :name="accordionName"
+        :checked="item.checked ? true : undefined"
+      />
+      <div class="collapse-title">
+        <slot name="title" :item="item" :index="index">
+          <slot :name="`title-${index}`" :item="item" :index="index">
+            {{ item.title }}
+          </slot>
+        </slot>
+      </div>
+      <div class="collapse-content">
+        <slot name="content" :item="item" :index="index">
+          <slot :name="`content-${index}`" :item="item" :index="index">
+            {{ item.content }}
+          </slot>
+        </slot>
+      </div>
+    </div>
+  </template>
+
+  <!-- Manual mode -->
+  <template v-else>
+    <slot></slot>
+  </template>
+</template> 

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

@@ -0,0 +1,59 @@
+export const AVATAR_SIZES = ['avatar-xs', 'avatar-sm', 'avatar-md', 'avatar-lg', 'avatar-xl'] as const
+export const AVATAR_ROUNDED = [
+  'rounded',
+  'rounded-full',
+  'rounded-xs',
+  'rounded-sm',
+  'rounded-md',
+  'rounded-lg',
+  'rounded-xl',
+] as const
+
+export const AVATAR_RING_COLORS = [
+  'ring-primary',
+  'ring-secondary',
+  'ring-accent',
+  'ring-neutral',
+  'ring-info',
+  'ring-success',
+  'ring-warning',
+  'ring-error',
+] as const
+
+export const AVATAR_COLORS = [
+  'avatar-primary',
+  'avatar-secondary',
+  'avatar-accent',
+  'avatar-neutral',
+  'avatar-info',
+  'avatar-success',
+  'avatar-warning',
+  'avatar-error',
+]
+
+export type Rounded = 'default' | 'rounded' | 'full' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type Mask = 'default' | 'heart' | 'squircle' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'parallelogram' | 'parallelogram-2' | 'star' | 'star-2'
+
+export type AVATARSize = (typeof AVATAR_SIZES)[number]
+export type AVATARRounded = (typeof AVATAR_ROUNDED)[number]
+export type AVATARRingColor = (typeof AVATAR_RING_COLORS)[number]
+export type AVATARColor = (typeof AVATAR_COLORS)[number]
+
+// Types pour les masques
+export const AVATAR_MASK = [
+  'mask-heart',
+  'mask-squircle',
+  'mask-hexagon',
+  'mask-hexagon-2',
+  'mask-decagon',
+  'mask-pentagon',
+  'mask-diamond',
+  'mask-square',
+  'mask-circle',
+  'mask-parallelogram',
+  'mask-parallelogram-2',
+  'mask-star',
+  'mask-star-2',
+] as const
+
+export type AVATARMask = (typeof AVATAR_MASK)[number]

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { type Size, useSizeMapping} from '../../../composables/useSizeProps'
+import { useVariantMapping, type Variant } from '../../../composables/useVariantProps'
+import { computed } from 'vue'
+import { type AVATARRounded, type Rounded, type AVATARMask, type Mask } from './du-avatar.types'
+
+const props = withDefaults(
+  defineProps<{
+    size?: Size
+    variant?: Variant
+    rounded?: Rounded
+    offline?: boolean
+    online?: boolean
+    placeholder?: boolean
+    ring?: boolean
+    ringColor?: string
+    ringOffset?: number
+    mask?: Mask
+  }>(),
+  {
+    size: 'default',
+    variant: 'default',
+    rounded: 'default',
+    offline: false,
+    online: false,
+    placeholder: false,
+    ring: false,
+    ringColor: 'primary',
+    ringOffset: 2
+  },
+)
+
+const { sizeClass } = useSizeMapping(props, 'avatar')
+const { colorClass } = useVariantMapping(props, 'avatar')
+
+const roundedClass = computed(() => {
+  return {
+    default: '',
+    rounded: 'rounded',
+    full: 'rounded-full',
+    xs: 'rounded-xs',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+  }[props.rounded] as AVATARRounded
+})
+
+const maskClass = computed(() => {
+  if (!props.mask) return ''
+  return 'mask ' + `mask-${props.mask}` as AVATARMask
+})
+
+const ringClass = computed(() => {
+  if (!props.ring) return ''
+  return `ring-${props.ringOffset} ring-${props.ringColor} ring-offset-base-100 ring-offset-2 ring-2`
+})
+
+const statusClass = computed(() => {
+  if (props.online) return 'avatar-online'
+  if (props.offline) return 'avatar-offline'
+  return ''
+})
+
+const placeholderClass = computed(() => {
+  return props.placeholder ? 'avatar-placeholder' : ''
+})
+</script>
+
+<template>
+  <div :class="['avatar', statusClass, placeholderClass]">
+    <div :class="['bg-base-300', sizeClass, roundedClass, maskClass, ringClass, colorClass]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.avatar-xs {
+  width: calc(var(--spacing)*8);
+}
+
+.avatar-sm {
+  width: calc(var(--spacing)*12);
+}
+
+.avatar-md {
+  width: calc(var(--spacing)*16);
+}
+
+.avatar-lg {
+  width: calc(var(--spacing)*24);
+}
+
+.avatar-xl {
+  width: calc(var(--spacing)*28);
+}
+
+.avatar-primary {
+  background-color: var(--color-primary);
+  color: var(--color-primary-content);
+}
+
+.avatar-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-secondary-content);
+}
+
+.avatar-accent {
+  background-color: var(--color-accent);
+  color: var(--color-accent-content);
+}
+
+.avatar-neutral {
+  background-color: var(--color-neutral);
+  color: var(--color-neutral-content);
+}
+
+.avatar-info {
+  background-color: var(--color-info);
+  color: var(--color-info-content);
+}
+
+.avatar-success {
+  background-color: var(--color-success);
+  color: var(--color-success-content);
+}
+
+.avatar-warning {
+  background-color: var(--color-warning);
+  color: var(--color-warning-content);
+}
+
+.avatar-error {
+  background-color: var(--color-error);
+  color: var(--color-error-content);
+}
+</style>

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

@@ -0,0 +1,21 @@
+export const BADGE_SIZES = [
+  'badge-xs',
+  'badge-sm',
+  'badge-md',
+  'badge-lg',
+  'badge-xl',
+] as const
+
+export const BADGE_VARIANTS = [
+  'badge-primary',
+  'badge-secondary',
+  'badge-accent',
+  'badge-neutral',
+  'badge-info',
+  'badge-success',
+  'badge-warning',
+  'badge-error',
+] as const
+
+export type BADGESize = (typeof BADGE_SIZES)[number]
+export type BADGEVariant = (typeof BADGE_VARIANTS)[number] 

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type Variant, useVariantMapping } from '../../../composables/useVariantProps'
+import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
+
+// Définition des types pour les props
+const props = withDefaults(
+  defineProps<{
+    size?: Size
+    variant?: Variant
+    outline?: boolean
+    dash?: boolean
+    soft?: boolean
+    ghost?: boolean
+    icon?: boolean
+  }>(),
+  {
+    size: 'default',
+    variant: 'default',
+    outline: false,
+    dash: false,
+    soft: false,
+    ghost: false,
+    icon: false,
+  },
+)
+
+const { sizeClass } = useSizeMapping(props, 'badge')
+const { colorClass } = useVariantMapping(props, 'badge')
+const softClass = computed(() => {
+  return props.soft ? 'badge-soft' : ''
+})
+const outlineClass = computed(() => {
+  return props.outline ? 'badge-outline' : ''
+})
+const dashClass = computed(() => {
+  return props.dash ? 'badge-dash' : ''
+})
+const ghostClass = computed(() => {
+  return props.ghost ? 'badge-ghost' : ''
+})
+// SVG en fonction du type d'alerte
+const svgIcons = {
+  default: '',
+  success: `<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><polyline points="7 13 10 16 17 8" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></polyline></g></svg>`,
+  error: `<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><g fill="currentColor"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="9" y1="6.5" x2="9" y2="10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line></g></svg>`,
+  warning: `<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor"><rect x="1.972" y="11" width="20.056" height="2" transform="translate(-4.971 12) rotate(-45)" fill="currentColor" stroke-width="0"></rect><path d="m12,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-20C7.038,3,3,7.037,3,12s4.038,9,9,9,9-4.037,9-9S16.962,3,12,3Z" stroke-width="0" fill="currentColor"></path></g></svg>`,
+  info: `<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><circle cx="12" cy="7.25" r="1.25" fill="currentColor" stroke-width="2"></circle></g></svg>`,
+}
+const svgIcon = computed(() => {
+  if (props.icon) {
+    if (
+      props.variant === 'default' ||
+      props.variant === 'success' ||
+      props.variant === 'error' ||
+      props.variant === 'warning' ||
+      props.variant === 'info'
+    ) {
+      return svgIcons[props.variant]
+    }
+    return ''
+  }
+  return ''
+})
+</script>
+<template>
+  <div
+    :class="[
+      'badge',
+      sizeClass,
+      colorClass,
+      softClass,
+      outlineClass,
+      dashClass,
+      ghostClass,
+    ]"
+  >
+    <template v-if="svgIcon"><span v-html="svgIcon"></span></template>
+    <slot></slot>
+  </div>
+</template> 

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

@@ -0,0 +1,18 @@
+export const CARD_SIZES = [
+  'card-xs',
+  'card-sm',
+  'card-md',
+  'card-lg',
+  'card-xl',
+] as const
+
+export const CARD_PROPERTIES = [
+  'card-border',
+  'card-dash',
+  'card-side',
+  'lg:card-side',
+  'image-full',
+] as const
+
+export type CARDSize = (typeof CARD_SIZES)[number]
+export type CARDProperty = (typeof CARD_PROPERTIES)[number]