cornet-ui 0.1.0-beta.1

package/components/Navigation/du-button-link/du-button-link.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type ButtonLinkProps } from './du-button-link.types';
+import { useVariantMapping } from "../../../composables/useVariantProps";
+import { useSizeMapping } from "../../../composables/useSizeProps";
+
+const props = withDefaults(
+  defineProps<ButtonLinkProps>(),
+  {
+    size: "default",
+    variant: "default",
+    outline: false,
+    soft: false,
+    dash: false,
+    active: false,
+    ghost: false,
+    link: false,
+    wide: false,
+    square: false,
+    circle: false,
+    block: false,
+  },
+);
+const { sizeClass } = useSizeMapping(props, "btn");
+const { colorClass } = useVariantMapping(props, "btn");
+const softClass = computed(() => {
+  return props.soft ? "btn-soft" : "";
+});
+const outlineClass = computed(() => {
+  return props.outline ? "btn-outline" : "";
+});
+const dashClass = computed(() => {
+  return props.dash ? "btn-dash" : "";
+});
+const activeClass = computed(() => {
+  return props.active ? "btn-active" : "";
+});
+const ghostClass = computed(() => {
+  return props.ghost ? "btn-ghost" : "";
+});
+const linkClass = computed(() => {
+  return props.link ? "btn-link" : "";
+});
+const wideClass = computed(() => {
+  return props.wide ? "btn-wide" : "";
+});
+const squareClass = computed(() => {
+  return props.square ? "btn-square" : "";
+});
+const circleClass = computed(() => {
+  return props.circle ? "btn-circle" : "";
+});
+const blockClass = computed(() => {
+  return props.block ? "btn-block" : "";
+});
+</script>
+<template>
+  <a
+    :class="[
+      'btn',
+      sizeClass,
+      colorClass,
+      softClass,
+      outlineClass,
+      dashClass,
+      activeClass,
+      ghostClass,
+      linkClass,
+      wideClass,
+      squareClass,
+      circleClass,
+      blockClass,
+    ]"
+  >
+    <slot></slot>
+  </a>
+</template> 

package/components/Navigation/du-dock/du-dock.types.ts

@@ -0,0 +1,19 @@
+import { type Size } from "../../../composables/useSizeProps";
+
+export const DOCK_SIZES = ['dock-xs', 'dock-sm', 'dock-md', 'dock-lg', 'dock-xl'] as const
+
+export type DOCKSize = (typeof DOCK_SIZES)[number]
+export interface DockItem {
+  label?: string;
+  icon?: any;
+  class?: string;
+  active?: boolean;
+  onClick?: () => void;
+  [key: string]: any;
+}
+
+export interface DockProps {
+  size?: Size;
+  items?: DockItem[];
+  reverseTheme?: boolean;
+} 

package/components/Navigation/du-dock/du-dock.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { type DockItem, type DockProps } from './du-dock.types';
+import { useSizeMapping } from "../../../composables/useSizeProps";
+
+const props = withDefaults(
+  defineProps<DockProps>(),
+  {
+    size: "default",
+    items: undefined,
+    reverseTheme: false,
+  },
+);
+
+const { sizeClass } = useSizeMapping(props, "dock");
+
+const emit = defineEmits<{
+  change: [item: DockItem | undefined]
+}>();
+
+const firstActiveItem = props.items?.findIndex((item) => item.active) ?? 0;
+const activeItem = ref(firstActiveItem > -1 ? firstActiveItem : 0);
+const selectedItem = ref(props.items?.[activeItem.value]);
+
+const setActiveItem = (index: number) => {
+  activeItem.value = index;
+  selectedItem.value = props.items?.[activeItem.value];
+  emit("change", selectedItem.value);
+  selectedItem.value?.onClick?.();
+};
+const isActive = (index: number) => {
+  return activeItem.value === index;
+};
+
+defineExpose({
+  activeItem,
+  selectedItem,
+});
+</script>
+
+<template>
+  <div :class="[
+    'dock',
+    sizeClass,
+    reverseTheme && 'bg-neutral text-neutral-content',
+  ]">
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+    <template v-else-if="items">
+      <button v-for="(item, index) in items" :key="index" @click="setActiveItem(index)"
+        :class="[item.class, isActive(index) && 'dock-active']">
+        <slot name="icon" :item="item" :index="index">
+          <slot :name="`icon-${index}`" :item="item" :index="index">
+            <component :is="item.icon" v-if="typeof item.icon === 'object'" />
+            <img v-else-if="
+              typeof item.icon === 'string' && item.icon.startsWith('http')
+            " :src="item.icon" :alt="item.label" />
+            <div v-else-if="typeof item.icon === 'string'" v-html="item.icon"></div>
+          </slot>
+        </slot>
+
+        <span v-if="item.label || $slots.label" :class="'dock-label'">
+          <slot name="label" :item="item" :index="index">
+            <slot :name="`label-${index}`" :item="item" :index="index">
+              {{ item.label }}
+            </slot>
+          </slot>
+        </span>
+      </button>
+    </template>
+  </div>
+</template>

package/components/Navigation/du-link/du-link.types.ts

@@ -0,0 +1,7 @@
+import { type Variant } from "../../../composables/useVariantProps";
+
+export interface LinkProps {
+  variant?: Variant;
+  onlyUnderlineOnHover?: boolean;
+  ghost?: boolean;
+} 

package/components/Navigation/du-link/du-link.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type LinkProps } from './du-link.types';
+import { useVariantMapping } from "../../../composables/useVariantProps";
+
+const props = withDefaults(
+  defineProps<LinkProps>(),
+  {
+    variant: "default",
+    onlyUnderlineOnHover: false,
+    ghost: false,
+  },
+);
+const { colorClass } = useVariantMapping(props, "link");
+const hoverClass = computed(() => {
+  return props.onlyUnderlineOnHover ? "link-hover" : "";
+});
+const ghostClass = computed(() => {
+  return props.ghost ? "link-ghost" : "";
+});
+</script>
+
+<template>
+  <a :class="['link', colorClass, hoverClass, ghostClass]"><slot /></a>
+</template> 

package/components/Navigation/du-menu/du-menu-item.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type MenuItem } from './du-menu.types';
+
+const props = defineProps<{
+  item: MenuItem;
+  index: number;
+  parentIndex?: string;
+  onItemClick?: (item: MenuItem) => void;
+  onSubItemClick?: (item: MenuItem) => void;
+}>();
+
+// Typed via defineSlots so the recursive slot forwarding below stays type-safe.
+const _slots = defineSlots();
+
+const idx = computed(() => props.parentIndex ? `${props.parentIndex}-${props.index}` : `${props.index}`);
+
+const ROUTER_COMPONENTS = ['RouterLink', 'router-link', 'NuxtLink', 'nuxt-link'];
+
+const linkTag = computed(() => props.item.as || 'a');
+
+const isRouterComponent = computed(() => {
+  const tag = props.item.as;
+  if (!tag) return false;
+  if (typeof tag === 'string') return ROUTER_COMPONENTS.includes(tag);
+  return tag.name ? ROUTER_COMPONENTS.includes(tag.name) : false;
+});
+
+const linkProps = computed(() => {
+  if (isRouterComponent.value) {
+    return { to: props.item.href };
+  }
+  return { href: props.item.href };
+});
+
+// Détermine si l'item est actif (sélectionné)
+const isActive = computed(() => {
+  if (props.item.multiple) {
+    return props.item.checked
+  } else {
+    return props.item.checked || props.item.active
+  }
+});
+
+function handleClick() {
+  props.item.onClick?.();
+  const callback = props.parentIndex ? props.onSubItemClick : props.onItemClick;
+  callback?.(props.item);
+}
+</script>
+
+<template>
+  <!-- Titre simple (menu-title) -->
+  <template v-if="item.isTitle && !item.subItems">
+    <template v-if="$slots[`title-${idx}`]">
+      <slot :name="`title-${idx}`" :item="item" :index="index" />
+    </template>
+    <template v-else-if="$slots.title">
+      <slot name="title" :item="item" :index="index" />
+    </template>
+    <template v-else>
+      <li class="menu-title">{{ item.label }}</li>
+    </template>
+  </template>
+  <!-- Titre parent (menu-title + sous-menu) -->
+  <template v-else-if="item.isTitle && item.subItems">
+    <template v-if="$slots[`title-${idx}`]">
+      <slot :name="`title-${idx}`" :item="item" :index="index" />
+      <ul role="listbox">
+        <du-menu-item v-for="(sub, subIndex) in item.subItems" :key="subIndex" :item="sub" :index="subIndex"
+          :parent-index="idx" :onItemClick="onItemClick" :onSubItemClick="onSubItemClick" v-bind="$attrs">
+          <template v-for="(_, name) in $slots" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+          </template>
+        </du-menu-item>
+      </ul>
+    </template>
+    <template v-else-if="$slots.title">
+      <slot name="title" :item="item" :index="index" />
+      <ul role="listbox">
+        <du-menu-item v-for="(sub, subIndex) in item.subItems" :key="subIndex" :item="sub" :index="subIndex"
+          :parent-index="idx" :onItemClick="onItemClick" :onSubItemClick="onSubItemClick" v-bind="$attrs">
+          <template v-for="(_, name) in $slots" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+          </template>
+        </du-menu-item>
+      </ul>
+    </template>
+    <template v-else>
+      <li>
+        <h2 class="menu-title">{{ item.label }}</h2>
+        <ul role="listbox">
+          <du-menu-item v-for="(sub, subIndex) in item.subItems" :key="subIndex" :item="sub" :index="subIndex"
+            :parent-index="idx" :onItemClick="onItemClick" :onSubItemClick="onSubItemClick" v-bind="$attrs">
+            <template v-for="(_, name) in $slots" #[name]="slotProps">
+              <slot :name="name" v-bind="slotProps" />
+            </template>
+          </du-menu-item>
+        </ul>
+      </li>
+    </template>
+  </template>
+  <!-- Item avec sous-menu -->
+  <template v-else-if="item.subItems">
+    <template v-if="$slots[`submenu-${idx}`]">
+      <slot :name="`submenu-${idx}`" :item="item" :index="index" />
+    </template>
+    <template v-else-if="$slots.submenu">
+      <slot name="submenu" :item="item" :index="index" />
+    </template>
+    <template v-else>
+      <li>
+        <component :is="linkTag" :role="item.disabled ? undefined : 'option'" v-bind="linkProps" :class="{
+          'menu-disabled': item.disabled,
+          'menu-active': isActive
+        }" @click.stop="handleClick">
+          <component :is="item.icon" v-if="typeof item.icon === 'object'" />
+          <img v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')" :src="item.icon"
+            :alt="item.label" class="w-5 h-5" />
+          <div v-else-if="typeof item.icon === 'string'" v-html="item.icon"></div>
+          {{ item.label }}
+          <slot name="additional" :item="item" :index="index"></slot>
+        </component>
+        <ul role="listbox">
+          <du-menu-item v-for="(sub, subIndex) in item.subItems" :key="subIndex" :item="sub" :index="subIndex"
+            :parent-index="idx" :onItemClick="onItemClick" :onSubItemClick="onSubItemClick" v-bind="$attrs">
+            <template v-for="(_, name) in $slots" #[name]="slotProps">
+              <slot :name="name" v-bind="slotProps" />
+            </template>
+          </du-menu-item>
+        </ul>
+      </li>
+    </template>
+  </template>
+  <!-- Item simple -->
+  <template v-else>
+    <template v-if="$slots[`item-${idx}`]">
+      <slot :name="`item-${idx}`" :item="item" :index="index" />
+    </template>
+    <template v-else-if="$slots.item">
+      <slot name="item" :item="item" :index="index" />
+    </template>
+    <template v-else>
+      <li :class="{ 'menu-disabled': item.disabled }">
+        <component :is="linkTag" :role="item.disabled ? undefined : 'option'" v-bind="linkProps" :class="{ 'menu-active': isActive }"
+          @click.stop="handleClick">
+          <!-- Checkbox pour sélection multiple -->
+          <input v-if="item.multiple && item.value !== undefined" type="checkbox"
+            class="invisible w-0 h-0 overflow-clip" :checked="item.checked" disabled>
+          <component :is="item.icon" v-if="typeof item.icon === 'object'" />
+          <img v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')" :src="item.icon"
+            :alt="item.label" class="w-5 h-5" />
+          <div v-else-if="typeof item.icon === 'string'" v-html="item.icon"></div>
+          {{ item.label }}
+          <slot name="additional" :item="item" :index="index"></slot>
+        </component>
+      </li>
+    </template>
+  </template>
+</template>

package/components/Navigation/du-menu/du-menu.types.ts

@@ -0,0 +1,33 @@
+import type { Component } from "vue";
+import { type Size } from "../../../composables/useSizeProps";
+
+export const DU_MENU_DIRECTIONS = ["default", "vertical", "horizontal", "responsive"] as const;
+export type MenuDirection = (typeof DU_MENU_DIRECTIONS)[number];
+
+export const MENU_SIZES = ['menu-xs', 'menu-sm', 'menu-md', 'menu-lg', 'menu-xl'] as const
+export type MENUSize = (typeof MENU_SIZES)[number]
+
+export interface MenuItem {
+  label: string;
+  href?: string;
+  as?: string | Component;
+  disabled?: boolean;
+  isTitle?: boolean;
+  subItems?: MenuItem[];
+  value?: string | number;
+  onClick?: () => void;
+  checked?: boolean;
+  multiple?: boolean;
+  active?: boolean;
+  icon?: Component | string | object | unknown;
+}
+
+export interface MenuProps {
+  direction?: MenuDirection;
+  size?: Size;
+  rounded?: boolean;
+  items?: MenuItem[];
+  activeItem?: string;
+  onItemClick?: (item: MenuItem) => void;
+  onSubItemClick?: (item: MenuItem) => void;
+}

package/components/Navigation/du-menu/du-menu.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { type MenuProps, type MenuItem } from './du-menu.types';
+import { useSizeMapping } from "../../../composables/useSizeProps";
+import DuMenuItem from './du-menu-item.vue';
+
+const props = withDefaults(
+  defineProps<MenuProps>(),
+  {
+    direction: "vertical",
+    size: "default",
+    rounded: true,
+  },
+);
+
+const emit = defineEmits<{
+  itemClick: [item: MenuItem];
+  subItemClick: [item: MenuItem];
+}>();
+
+function handleItemClick(item: MenuItem) {
+  props.onItemClick?.(item);
+  emit('itemClick', item);
+}
+
+function handleSubItemClick(item: MenuItem) {
+  props.onSubItemClick?.(item);
+  emit('subItemClick', item);
+}
+
+const isInDropdownTrigger = inject("isDropdownTrigger", false);
+
+const directionClass = computed(() => {
+  return {
+    default: "",
+    vertical: "menu-vertical",
+    horizontal: "menu-horizontal",
+    responsive: "menu-vertical lg:menu-horizontal",
+  }[props.direction];
+});
+const { sizeClass } = useSizeMapping(props, "menu");
+const roundedClass = computed(() => {
+  return props.rounded ? "rounded-box" : "[&_li>*]:rounded-none p-0";
+});
+const inDropdownClass = computed(() => {
+  return isInDropdownTrigger ? "" : "bg-base-200";
+});
+
+const ariaOrientation = computed(() => {
+  return props.direction === "horizontal" || props.direction === "responsive" ? "horizontal" : "vertical";
+});
+// Slots documentation : voir le template pour la gestion des slots indexés et globaux.
+</script>
+
+<template>
+  <ul role="listbox" :aria-orientation="ariaOrientation" :class="['menu', inDropdownClass, roundedClass, directionClass, sizeClass]">
+    <!-- Mode automatique (items) -->
+    <template v-if="items && !$slots.default">
+      <DuMenuItem
+        v-for="(item, index) in items"
+        :key="index"
+        :item="item"
+        :index="index"
+        :onItemClick="handleItemClick"
+        :onSubItemClick="handleSubItemClick"
+      >
+        <!-- Transmission de tous les slots au composant enfant -->
+        <template v-for="(_, name) in $slots" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps" />
+        </template>
+      </DuMenuItem>
+    </template>
+    <!-- Mode manuel (slot) -->
+    <template v-else>
+      <slot />
+    </template>
+  </ul>
+</template>
+
+
+<style>
+
+.menu * a, .menu * button {
+  margin: .125rem 0;
+}
+
+</style>

package/components/Navigation/du-navbar/du-navbar.types.ts

@@ -0,0 +1,3 @@
+// The Navbar component has no specific props for now.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface NavbarProps {}

package/components/Navigation/du-navbar/du-navbar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type NavbarProps } from './du-navbar.types';
+
+defineProps<NavbarProps>();
+</script>
+
+<template>
+  <nav class="navbar bg-base-100 shadow-sm">
+    <div v-if="$slots.start" class="navbar-start">
+      <slot name="start"></slot>
+    </div>
+    <div v-if="$slots.center" class="navbar-center">
+      <slot name="center"></slot>
+    </div>
+    <div v-if="$slots.end" class="navbar-end">
+      <slot name="end"></slot>
+    </div>
+
+    <slot></slot>
+  </nav>
+</template> 

package/components/Navigation/du-pagination/du-pagination.types.ts

@@ -0,0 +1,30 @@
+import { type Size } from "../../../composables/useSizeProps";
+import { type Variant } from "../../../composables/useVariantProps";
+
+export interface PaginationProps {
+  modelValue?: number;
+  total: number;
+  perPage?: number;
+  showNext?: boolean;
+  showPrevious?: boolean;
+  showFirst?: boolean;
+  showLast?: boolean;
+  size?: Size;
+  nextLabel?: string;
+  previousLabel?: string;
+  firstLabel?: string;
+  lastLabel?: string;
+  variant?: Variant;
+  outline?: boolean;
+  manual?: boolean;
+  showEllipsis?: boolean;
+  maxPages?: number;
+  soft?: boolean;
+  /** Accessible name of the navigation landmark. */
+  ariaLabel?: string;
+  /** Accessible labels for the symbol-only buttons. */
+  previousAriaLabel?: string;
+  nextAriaLabel?: string;
+  firstAriaLabel?: string;
+  lastAriaLabel?: string;
+}