cornet-ui 0.1.0-beta.4 → 0.1.0-beta.5

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

@@ -1,123 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-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

@@ -1,68 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,73 +0,0 @@
-<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

@@ -1,59 +0,0 @@
-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

@@ -1,139 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,81 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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]