cornet-ui 0.1.0-beta.1

package/components/Feedback/du-radial-progress/du-radial-progress.types.ts

@@ -0,0 +1,9 @@
+import { type Variant } from "../../../composables/useVariantProps";
+import { type Size } from "../../../composables/useSizeProps";
+
+export interface RadialProgressProps {
+  value?: number;
+  variant?: Variant;
+  size?: Size | string;
+  thickness?: string;
+} 

package/components/Feedback/du-radial-progress/du-radial-progress.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useVariantMapping } from "../../../composables/useVariantProps";
+import { AvailableSizes } from "../../../composables/useSizeProps";
+import { type RadialProgressProps } from "./du-radial-progress.types";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<RadialProgressProps>(),
+  {
+    variant: "default",
+    value: 0,
+    size: undefined,
+    thickness: undefined,
+  },
+);
+const { colorClass } = useVariantMapping(props, "text");
+
+const styleVar = computed(() => {
+  const styleObject: any = {
+    "--value": props.value?.toString() || "0",
+  }
+  // let styles = `--value: ${props.value};`;
+
+  if (props.size && AvailableSizes.indexOf(props.size as any) === -1) {
+    // styles += `--size: ${props.size};`;
+    styleObject["--size"] = props.size;
+  }
+
+  if (props.thickness) {
+    styleObject["--thickness"] = props.thickness;
+  }
+
+  return styleObject;
+});
+</script>
+
+<template>
+  <div
+    :class="['radial-progress', colorClass, size]"
+    :style="styleVar"
+    :aria-valuenow="value"
+    role="progressbar"
+  >
+    <slot> {{ value }}% </slot>
+  </div>
+</template>
+
+<style scoped>
+.radial-progress.xs {
+  --size: 3rem;
+}
+.radial-progress.sm {
+  --size: 5rem;
+}
+.radial-progress.md {
+  --size: 7.5rem;
+}
+.radial-progress.lg {
+  --size: 10rem;
+}
+.radial-progress.xl {
+  --size: 12rem;
+}
+</style> 

package/components/Feedback/du-skeleton/du-skeleton.types.ts

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

package/components/Feedback/du-skeleton/du-skeleton.vue

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

package/components/Feedback/du-toast/du-toast.types.ts

@@ -0,0 +1,11 @@
+export const DU_TOAST_HORIZONTAL_POSITIONS = ["start", "center", "end"] as const;
+export type ToastHorizontalPosition = (typeof DU_TOAST_HORIZONTAL_POSITIONS)[number];
+
+export const DU_TOAST_VERTICAL_POSITIONS = ["top", "middle", "bottom"] as const;
+export type ToastVerticalPosition = (typeof DU_TOAST_VERTICAL_POSITIONS)[number];
+
+export interface ToastProps {
+  horizontalPosition?: ToastHorizontalPosition;
+  verticalPosition?: ToastVerticalPosition;
+  to?: string;
+} 

package/components/Feedback/du-toast/du-toast.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type ToastProps } from "./du-toast.types";
+
+const props = withDefaults(
+  defineProps<ToastProps>(),
+  {
+    horizontalPosition: undefined,
+    verticalPosition: undefined,
+    to: undefined,
+  },
+);
+
+const horizontalClass = computed(() => {
+  switch (props.horizontalPosition) {
+    case "start":
+      return "toast-start";
+    case "center":
+      return "toast-center";
+    case "end":
+      return "toast-end";
+    default:
+      return "";
+  }
+});
+
+const verticalClass = computed(() => {
+  switch (props.verticalPosition) {
+    case "top":
+      return "toast-top";
+    case "middle":
+      return "toast-middle";
+    case "bottom":
+      return "toast-bottom";
+    default:
+      return "";
+  }
+});
+</script>
+
+<template>
+  <template v-if="to">
+    <Teleport defer :to="to">
+      <div :class="['toast z-999 absolute max-w-full', horizontalClass, verticalClass]">
+        <slot></slot>
+      </div>
+    </Teleport>
+  </template>
+  <template v-else>
+    <div :class="['toast z-999', horizontalClass, verticalClass]">
+      <slot></slot>
+    </div>
+  </template>
+</template> 

package/components/Feedback/du-tooltip/du-tooltip.types.ts

@@ -0,0 +1,12 @@
+import { type Variant } from "../../../composables/useVariantProps";
+
+export const DU_TOOLTIP_POSITIONS = ["top", "right", "bottom", "left"] as const;
+export type TooltipPosition = (typeof DU_TOOLTIP_POSITIONS)[number];
+
+export interface TooltipProps {
+  variant?: Variant;
+  dataTip?: string;
+  open?: boolean;
+  position?: TooltipPosition;
+  responsive?: boolean;
+} 

package/components/Feedback/du-tooltip/du-tooltip.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import { useVariantMapping } from "../../../composables/useVariantProps";
+import { type TooltipProps } from "./du-tooltip.types";
+
+const slots = useSlots();
+
+const props = withDefaults(
+  defineProps<TooltipProps>(),
+  {
+    variant: "default",
+    dataTip: undefined,
+    open: false,
+    position: "top",
+    responsive: false,
+  },
+);
+
+const openClass = computed(() => {
+  return props.open ? "tooltip-open" : "";
+});
+
+const positionClass = computed(() => {
+  switch (props.position) {
+    case "top":
+      return "tooltip-top";
+    case "right":
+      return "tooltip-right";
+    case "bottom":
+      return "tooltip-bottom";
+    case "left":
+      return "tooltip-left";
+    default:
+      return "";
+  }
+});
+
+const responsiveClass = computed(() => {
+  return props.responsive ? "lg:tooltip" : "tooltip";
+});
+
+const { colorClass } = useVariantMapping(props, "tooltip");
+</script>
+
+<template>
+  <div
+    :class="[responsiveClass, openClass, positionClass, colorClass]"
+    :data-tip="dataTip"
+  >
+    <div class="tooltip-content" v-if="slots.content">
+      <slot name="content"></slot>
+    </div>
+    <slot />
+  </div>
+</template> 

package/components/Layout/du-drawer/du-drawer.types.ts

@@ -0,0 +1,27 @@
+import { type MenuItem } from '../../Navigation/du-menu/du-menu.types'
+
+export const DRAWER_POSITIONS = ['start', 'end'] as const
+
+export type DRAWERPosition = (typeof DRAWER_POSITIONS)[number]
+
+export interface DRAWERItem extends MenuItem {
+    icon?: any
+    customClass?: string
+    [key: string]: any
+}
+
+export interface DRAWERProps {
+    id?: string
+    position?: 'start' | 'end'
+    open?: boolean
+    responsive?: boolean
+    alwaysOpenOnLarge?: boolean
+    modelValue?: boolean
+    sidebarClass?: string
+    sidebarWrapperClass?: string
+    contentClass?: string
+    overlayClass?: string
+    items?: DRAWERItem[]
+    /** Enable icon-only collapsible mode with is-drawer-open/is-drawer-close variants */
+    iconOnly?: boolean
+}

package/components/Layout/du-drawer/du-drawer.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { computed, ref, watch, useSlots } from 'vue'
+import { type DRAWERItem } from './du-drawer.types'
+import DuMenu from '../../Navigation/du-menu/du-menu.vue'
+
+const slots = useSlots()
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        position?: 'start' | 'end'
+        open?: boolean
+        responsive?: boolean | 'xl' | 'lg' | 'md' | 'sm'
+        // keep alwaysOpenOnLarge due to breaking changes
+        alwaysOpenOnLarge?: boolean
+        modelValue?: boolean
+        sidebarClass?: string
+        sidebarWrapperClass?: string
+        contentClass?: string
+        overlayClass?: string
+        items?: DRAWERItem[]
+        /** Enable icon-only collapsible mode with is-drawer-open/is-drawer-close variants */
+        iconOnly?: boolean
+    }>(),
+    {
+        id: undefined,
+        position: 'start',
+        open: false,
+        responsive: false,
+        alwaysOpenOnLarge: false,
+        modelValue: false,
+        sidebarClass: '',
+        sidebarWrapperClass: '',
+        contentClass: '',
+        overlayClass: '',
+        items: undefined,
+        iconOnly: false,
+    },
+)
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    'update:open': [value: boolean]
+}>()
+
+const drawerId = computed(() => {
+    return props.id || `drawer-${Math.random().toString(36).substring(2, 11)}`
+})
+
+const drawerClasses = computed(() => {
+    const classes = ['drawer']
+
+    if (props.position === 'end') {
+        classes.push('drawer-end')
+    }
+
+    if (props.alwaysOpenOnLarge && !props.responsive) {
+        classes.push('lg:drawer-open')
+    }
+
+    switch (props.responsive) {
+        case 'xl':
+            classes.push('xl:drawer-open')
+            break
+        case 'lg':
+        case true:
+            classes.push('lg:drawer-open')
+            break
+        case 'md':
+            classes.push('md:drawer-open')
+            break
+        case 'sm':
+            classes.push('sm:drawer-open')
+            break
+    }
+
+    return classes
+})
+
+const drawerSideClasses = computed(() => {
+    const classes = ['drawer-side']
+
+    if (props.alwaysOpenOnLarge && !props.responsive) {
+        classes.push('max-lg:z-[1002]')
+    }
+
+    switch (props.responsive) {
+        case 'xl':
+            classes.push('xl:max-lg:z-[1002]')
+            break
+        case 'lg':
+        case true:
+            classes.push('lg:max-md:z-[1002]')
+            break
+        case 'md':
+            classes.push('md:max-sm:z-[1002]')
+            break
+        case 'sm':
+            classes.push('sm:max-xs:z-[1002]')
+            break
+    }
+
+    if (props.iconOnly) {
+        classes.push('is-drawer-close:overflow-visible')
+    }
+
+    if (props.sidebarClass) {
+        classes.push(props.sidebarClass)
+    }
+
+    return classes
+})
+
+const sidebarWrapperClasses = computed(() => {
+    const classes = ['text-base-content', 'h-full', 'min-h-full']
+
+    if (props.iconOnly) {
+        classes.push('flex', 'flex-col', 'items-start', 'bg-base-200')
+        classes.push('is-drawer-close:w-14', 'is-drawer-open:w-64')
+        classes.push('transition-all', 'duration-200')
+    }
+
+    if (props.sidebarWrapperClass) {
+        classes.push(props.sidebarWrapperClass)
+    }
+
+    return classes
+})
+
+const drawerContentClasses = computed(() => {
+    const classes = ['drawer-content']
+
+    if (props.contentClass) {
+        classes.push(props.contentClass)
+    }
+
+    return classes
+})
+
+const drawerOverlayClasses = computed(() => {
+    const classes = ['drawer-overlay']
+
+    if (props.overlayClass) {
+        classes.push(props.overlayClass)
+    }
+
+    return classes
+})
+
+const internalOpen = ref(props.open || props.modelValue)
+
+watch(
+    () => props.open,
+    (newValue) => {
+        internalOpen.value = newValue
+    },
+)
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        internalOpen.value = newValue
+    },
+)
+
+watch(internalOpen, (newValue) => {
+    emit('update:modelValue', newValue)
+    emit('update:open', newValue)
+})
+
+const toggleDrawer = () => {
+    internalOpen.value = !internalOpen.value
+}
+
+const menuSlots = computed(() => {
+    const excludedSlots = ['default', 'content', 'sidebar', 'side']
+    return Object.keys(slots).filter(name => !excludedSlots.includes(name))
+})
+
+defineExpose({
+    toggleDrawer,
+})
+</script>
+
+<template>
+    <div :class="drawerClasses">
+        <input :id="drawerId" type="checkbox" class="drawer-toggle" v-model="internalOpen" />
+
+        <!-- Drawer Content -->
+        <div :class="drawerContentClasses">
+            <slot name="content">
+                <slot></slot>
+            </slot>
+        </div>
+
+        <!-- Drawer Side -->
+        <div :class="drawerSideClasses">
+            <label :for="drawerId" aria-label="close sidebar" :class="drawerOverlayClasses"></label>
+
+            <div :class="sidebarWrapperClasses">
+                <!-- Dynamic items mode -->
+                <template v-if="items">
+                    <!-- Forward menu customization slots (item, title, submenu, indexed) to DuMenu -->
+                    <DuMenu :items="items" class="w-full">
+                        <template
+                            v-for="name in menuSlots"
+                            :key="name"
+                            #[name]="slotProps"
+                        >
+                            <slot :name="name" v-bind="slotProps" />
+                        </template>
+                    </DuMenu>
+                </template>
+
+                <!-- Manual/Slot mode -->
+                <template v-else>
+                    <slot name="sidebar">
+                        <slot name="side"></slot>
+                    </slot>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

package/components/Layout/du-join/du-join.types.ts

@@ -0,0 +1,7 @@
+export const DU_JOIN_DIRECTIONS = ["horizontal", "vertical"] as const;
+export type JoinDirection = (typeof DU_JOIN_DIRECTIONS)[number];
+
+export interface JoinProps {
+  as?: string;
+  direction?: JoinDirection;
+} 

package/components/Layout/du-join/du-join.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed, provide } from "vue";
+import { type JoinProps } from "./du-join.types";
+
+const props = withDefaults(
+  defineProps<JoinProps>(),
+  {
+    as: "div",
+    direction: undefined,
+  },
+);
+
+const directionClass = computed(() => {
+  switch (props.direction) {
+    case "horizontal":
+      return "join-horizontal";
+    case "vertical":
+      return "join-vertical";
+    default:
+      return "";
+  }
+});
+
+provide("isInJoin", true);
+</script>
+
+<template>
+  <component :is="as" :class="['join', directionClass]">
+    <slot></slot>
+  </component>
+</template> 

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

@@ -0,0 +1,13 @@
+import type { Component } from "vue";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: string;
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  separator?: string;
+  as?: string | Component;
+} 

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type BreadcrumbsProps } from './du-breadcrumbs.types';
+
+const ROUTER_COMPONENTS = ['RouterLink', 'router-link', 'NuxtLink', 'nuxt-link'];
+
+const props = withDefaults(
+  defineProps<BreadcrumbsProps>(),
+  {
+    separator: undefined,
+  },
+);
+
+const separatorClass = computed(() => {
+  return props.separator ? "spec-seperator" : "";
+});
+
+const cssVars = computed(() => ({
+  '--separator': props.separator
+}));
+
+const linkTag = computed(() => props.as || 'a');
+
+const isRouterComponent = computed(() => {
+  const tag = props.as;
+  if (!tag) return false;
+  if (typeof tag === 'string') return ROUTER_COMPONENTS.includes(tag);
+  return tag.name ? ROUTER_COMPONENTS.includes(tag.name) : false;
+});
+
+function linkProps(href: string) {
+  if (isRouterComponent.value) {
+    return { to: href };
+  }
+  return { href };
+}
+</script>
+
+<template>
+  <div
+    class="breadcrumbs"
+    :class="[separatorClass]"
+    :style="cssVars"
+  >
+    <ul>
+      <li v-for="(item, index) in items" :key="index">
+        <component :is="linkTag" v-if="item.href" v-bind="linkProps(item.href)">
+          <span v-if="item.icon" class="mr-1">{{ item.icon }}</span>
+          {{ item.label }}
+        </component>
+        <span v-else>
+          <span v-if="item.icon" class="mr-1">{{ item.icon }}</span>
+          {{ item.label }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+:is(
+    .breadcrumbs.spec-seperator > menu,
+    .breadcrumbs.spec-seperator > ul,
+    .breadcrumbs.spec-seperator > ol
+  )
+  > li
+  + ::before {
+  content: var(--separator);
+  opacity: 0.4;
+  background-color: #0000;
+  width: 0.375rem;
+  margin-left: 0.5rem;
+  margin-right: 0.75rem;
+  display: block;
+  border: unset;
+  height: auto;
+  rotate: 0deg;
+}
+</style> 

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

@@ -0,0 +1,17 @@
+import { type Variant } from "../../../composables/useVariantProps";
+import { type Size } from "../../../composables/useSizeProps";
+
+export interface ButtonLinkProps {
+  size?: Size;
+  variant?: Variant;
+  outline?: boolean;
+  soft?: boolean;
+  dash?: boolean;
+  active?: boolean;
+  ghost?: boolean;
+  link?: boolean;
+  wide?: boolean;
+  square?: boolean;
+  circle?: boolean;
+  block?: boolean;
+}