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

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

@@ -0,0 +1,14 @@
+export const BUTTON_SIZES = ['btn-xs', 'btn-sm', 'btn-md', 'btn-lg', 'btn-xl'] as const
+export const BUTTON_COLORS = [
+  'btn-primary',
+  'btn-secondary',
+  'btn-accent',
+  'btn-neutral',
+  'btn-info',
+  'btn-success',
+  'btn-warning',
+  'btn-error',
+] as const
+
+export type BUTTONSize = (typeof BUTTON_SIZES)[number]
+export type BUTTONColor = (typeof BUTTON_COLORS)[number]

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
+import { useVariantMapping, type Variant } from '../../../composables/useVariantProps'
+import { computed, inject } from 'vue'
+
+type ElementType = 'button' | 'a' | 'input' | 'div' | 'RouterLink' | 'NuxtLink' | string
+
+const props = withDefaults(
+  defineProps<{
+    customClass?: string
+    size?: Size
+    variant?: Variant
+    outline?: boolean
+    soft?: boolean
+    dash?: boolean
+    active?: boolean
+    ghost?: boolean
+    link?: boolean
+    wide?: boolean
+    disabled?: boolean
+    square?: boolean
+    circle?: boolean
+    block?: boolean
+    as?: ElementType
+    type?: string
+    href?: string
+    value?: string
+    inputType?: 'button' | 'submit' | 'reset' | 'radio' | 'checkbox'
+    label?: string
+  }>(),
+  {
+    customClass: undefined,
+    size: 'default',
+    variant: 'default',
+    outline: false,
+    soft: false,
+    dash: false,
+    active: false,
+    ghost: false,
+    link: false,
+    wide: false,
+    disabled: undefined,
+    square: false,
+    circle: false,
+    block: false,
+    type: undefined,
+    href: undefined,
+    value: undefined,
+    inputType: undefined,
+    label: undefined,
+  },
+)
+
+const isInDropdownTrigger = inject('isDropdownTrigger', false)
+const inJoin = inject("isInJoin", false)
+const filterName = inject('filterName', undefined)
+
+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' : ''
+})
+
+const elementTag = computed((): ElementType => {
+  if (props.as) return props.as
+  if (isInDropdownTrigger) return 'div'
+  if (filterName) return 'input'
+
+  return 'button'
+})
+
+const isInputElement = computed(() => elementTag.value === 'input')
+const isAnchorElement = computed(() => elementTag.value === 'a')
+
+const buttonAttributes = computed(() => {
+  const attrs: Record<string, any> = {}
+
+  if (filterName) {
+    attrs.name = filterName
+    attrs.type = 'radio'
+  } else if (isInputElement.value) {
+    attrs.type = props.inputType || 'button'
+    attrs.value = props.value || ''
+  } else if (isAnchorElement.value) {
+    attrs.href = props.href || '#'
+    attrs.role = 'button'
+  } else if (isInDropdownTrigger) {
+    attrs.tabindex = '0'
+    attrs.role = 'button'
+  } else {
+    attrs.type = props.type || 'button'
+  }
+  return attrs
+})
+</script>
+<template>
+  <component
+    :is="elementTag"
+    v-bind="buttonAttributes"
+    :class="[
+      'btn',
+      customClass,
+      sizeClass,
+      colorClass,
+      softClass,
+      outlineClass,
+      dashClass,
+      activeClass,
+      ghostClass,
+      linkClass,
+      wideClass,
+      squareClass,
+      circleClass,
+      blockClass,
+      inJoin && 'join-item',
+    ]"
+    :aria-label="props.label"
+    :disabled="props.disabled"
+  >
+    <slot v-if="!isInputElement"></slot>
+  </component>
+</template>

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

@@ -0,0 +1,15 @@
+export const DROPDOWN_PLACEMENTS = [
+  'dropdown-start',
+  'dropdown-center',
+  'dropdown-end',
+  'dropdown-top',
+  'dropdown-bottom',
+  'dropdown-left',
+  'dropdown-right',
+] as const
+
+export type DROPDOWNPlacement = (typeof DROPDOWN_PLACEMENTS)[number] 
+
+
+export type PlacementValue = 'start' | 'center' | 'end' | 'top' | 'bottom' | 'left' | 'right'
+export type PlacementInput = PlacementValue | string | PlacementValue[] | Partial<Record<PlacementValue, boolean>>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { type PlacementInput, type PlacementValue } from './du-dropdown.types'
+
+const props = withDefaults(
+  defineProps<{
+    hover?: boolean
+    open?: boolean
+    placement?: PlacementInput
+  }>(),
+  {
+    hover: false,
+    open: false,
+    placement: 'bottom',
+  },
+)
+
+provide('isDropdownTrigger', true)
+
+const placementToClass = (value: PlacementValue): string => {
+  return `dropdown-${value}`
+}
+
+const getPlacementClasses = (input: PlacementInput): string[] => {
+  if (!input) return []
+
+  if (typeof input === 'string') {
+    if (input.includes(',')) {
+      return input.split(',').map(s => s.trim()).filter(Boolean).map(s => placementToClass(s as PlacementValue))
+    }
+    return [placementToClass(input as PlacementValue)]
+  }
+
+  if (Array.isArray(input)) {
+    return input.map(placementToClass)
+  }
+
+  if (typeof input === 'object') {
+    const keys = Object.keys(input)
+    if (keys.every(key => key in { start: 1, center: 1, end: 1, top: 1, bottom: 1, left: 1, right: 1 })) {
+      return keys.map(key => placementToClass(key as PlacementValue))
+    }
+    return Object.entries(input)
+      .filter(([, enabled]) => enabled)
+      .map(([key]) => placementToClass(key as PlacementValue))
+  }
+
+  return []
+}
+
+const placementClass = computed(() => {
+  const classes = getPlacementClasses(props.placement)
+  return classes.join(' ')
+})
+
+const hoverClass = computed(() => {
+  return props.hover ? 'dropdown-hover' : ''
+})
+
+const openClass = computed(() => {
+  return props.open ? 'dropdown-open' : ''
+})
+</script>
+
+<template>
+  <div :class="['dropdown', placementClass, hoverClass, openClass]">
+    <!-- Bind triggerProps on your trigger element (v-bind="triggerProps")
+         to get the expected role/tabindex/aria attributes for free. -->
+    <slot name="trigger" :trigger-props="{ role: 'button', tabindex: 0, 'aria-haspopup': 'true' }"></slot>
+    <div class="dropdown-content" tabindex="0">
+      <slot name="content"></slot>
+      <slot></slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,28 @@
+export const FAB_MODIFIERS = ['fab-flower'] as const
+
+export type FABModifier = (typeof FAB_MODIFIERS)[number]
+
+export interface FABItem {
+  label?: string
+  icon?: any
+  customClass?: string
+  onClick?: () => void
+  tooltip?: string
+  tooltipPosition?: 'left' | 'top' | 'right' | 'bottom'
+  [key: string]: any
+}
+
+export interface FABMainAction {
+  label?: string
+  icon?: any
+  customClass?: string
+  variant?: string
+  onClick?: () => void
+}
+
+export interface FABCloseButton {
+  label?: string
+  icon?: string
+  customClass?: string
+  variant?: string
+}

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

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
+import { type Variant, useVariantMapping } from '../../../composables/useVariantProps'
+import { type FABItem, type FABMainAction, type FABCloseButton } from './du-fab.types'
+import DuButton from '../du-button/du-button.vue'
+import DuTooltip from '../../Feedback/du-tooltip/du-tooltip.vue'
+
+const props = withDefaults(
+  defineProps<{
+    items?: FABItem[]
+    modifier?: 'fab-flower'
+    customClass?: string
+    size?: Size
+    variant?: Variant
+    circle?: boolean
+    mainAction?: FABMainAction
+    closeButton?: FABCloseButton
+    absolute?: boolean
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  }>(),
+  {
+    items: undefined,
+    modifier: undefined,
+    customClass: '',
+    size: 'lg',
+    variant: 'primary',
+    circle: true,
+    mainAction: undefined,
+    closeButton: undefined,
+    absolute: true,
+    position: 'bottom-right',
+  },
+)
+
+const { sizeClass } = useSizeMapping(props, 'btn')
+const { colorClass } = useVariantMapping(props, 'btn')
+
+const modifierClass = computed(() => {
+  return props.modifier ? props.modifier : ''
+})
+
+const positionClass = computed(() => {
+  if (!props.absolute) return ''
+  
+  switch (props.position) {
+    case 'bottom-right':
+      return 'absolute bottom-4 right-4'
+    case 'bottom-left':
+      return 'absolute bottom-4 left-4'
+    case 'top-right':
+      return 'absolute top-4 right-4'
+    case 'top-left':
+      return 'absolute top-4 left-4'
+    default:
+      return 'absolute bottom-4 right-4'
+  }
+})
+
+const fabClasses = computed(() => {
+  return [
+    'fab',
+    modifierClass.value,
+    positionClass.value,
+    'z-50',
+    props.customClass,
+  ]
+})
+
+const getTooltipPosition = (position?: 'left' | 'top' | 'right' | 'bottom') => {
+  return position || 'left'
+}
+</script>
+
+<template>
+  <!-- Dynamic items mode -->
+  <template v-if="items || mainAction">
+    <div :class="fabClasses">
+      <!-- Main trigger button -->
+      <div
+        tabindex="0"
+        role="button"
+        :class="[
+          'btn',
+          sizeClass,
+          colorClass,
+          props.circle ? 'btn-circle' : '',
+        ]"
+      >
+        <slot name="trigger">
+          <slot name="trigger-icon">F</slot>
+        </slot>
+      </div>
+
+      <!-- Close button (optional) -->
+      <div
+        v-if="closeButton"
+        class="fab-close"
+      >
+        <slot name="close-button" :closeButton="closeButton">
+          {{ closeButton.label || 'Close' }}
+          <span
+            :class="[
+              'btn',
+              sizeClass,
+              'btn-circle',
+              closeButton.variant ? `btn-${closeButton.variant}` : 'btn-error',
+              closeButton.customClass,
+            ]"
+          >
+            <slot name="close-icon">{{ closeButton.icon || '✕' }}</slot>
+          </span>
+        </slot>
+      </div>
+
+      <!-- Main action button (optional) -->
+      <DuButton
+        v-if="mainAction"
+        as="button"
+        customClass="fab-main-action"
+        :size="props.size"
+        :variant="(mainAction.variant as Variant) || 'default'"
+        circle
+        @click="mainAction.onClick"
+      >
+        <slot name="main-action" :mainAction="mainAction">
+          <slot name="main-action-icon" :mainAction="mainAction">
+            <component
+              class="w-6 h-6"
+              :is="mainAction.icon"
+              v-if="typeof mainAction.icon === 'object' || typeof mainAction.icon === 'function'"
+            />
+            <img
+              v-else-if="typeof mainAction.icon === 'string' && mainAction.icon.startsWith('http')"
+              :src="mainAction.icon"
+              :alt="mainAction.label"
+              class="w-6 h-6"
+            />
+            <div
+              v-else-if="typeof mainAction.icon === 'string'"
+              v-html="mainAction.icon"
+            ></div>
+            <template v-else>
+              {{ mainAction.label || 'M' }}
+            </template>
+          </slot>
+        </slot>
+      </DuButton>
+
+      <!-- Speed dial buttons -->
+      <template v-for="(item, index) in items" :key="index">
+        <!-- With tooltip wrapper -->
+        <DuTooltip
+          v-if="item.tooltip"
+          :dataTip="item.tooltip"
+          :position="getTooltipPosition(item.tooltipPosition)"
+        >
+          <DuButton
+            as="button"
+            :size="props.size"
+            :circle="props.circle"
+            :customClass="item.customClass"
+            @click="item.onClick"
+          >
+            <slot name="item" :item="item" :index="index">
+              <slot :name="`item-${index}`" :item="item" :index="index">
+                <component
+                  class="w-6 h-6"
+                  :is="item.icon"
+                  v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                />
+                <img
+                  v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
+                  :src="item.icon"
+                  :alt="item.label"
+                  class="w-6 h-6"
+                />
+                <div
+                  v-else-if="typeof item.icon === 'string'"
+                  v-html="item.icon"
+                ></div>
+                <template v-else>
+                  {{ item.label || index + 1 }}
+                </template>
+              </slot>
+            </slot>
+          </DuButton>
+        </DuTooltip>
+
+        <!-- Without tooltip wrapper -->
+        <template v-else>
+          <!-- With label wrapper -->
+          <div v-if="item.label && !props.modifier">
+            {{ item.label }}
+            <DuButton
+              as="button"
+              :size="props.size"
+              :circle="props.circle"
+              :customClass="item.customClass"
+              @click="item.onClick"
+            >
+              <slot name="item" :item="item" :index="index">
+                <slot :name="`item-${index}`" :item="item" :index="index">
+                  <component
+                    class="w-6 h-6"
+                    :is="item.icon"
+                    v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                  />
+                  <img
+                    v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
+                    :src="item.icon"
+                    :alt="item.label"
+                    class="w-6 h-6"
+                  />
+                  <div
+                    v-else-if="typeof item.icon === 'string'"
+                    v-html="item.icon"
+                  ></div>
+                  <template v-else>
+                    {{ index + 1 }}
+                  </template>
+                </slot>
+              </slot>
+            </DuButton>
+          </div>
+
+          <!-- Without label wrapper -->
+          <DuButton
+            v-else
+            as="button"
+            :size="props.size"
+            :circle="props.circle"
+            :customClass="item.customClass"
+            @click="item.onClick"
+          >
+            <slot name="item" :item="item" :index="index">
+              <slot :name="`item-${index}`" :item="item" :index="index">
+                <component
+                  class="w-6 h-6"
+                  :is="item.icon"
+                  v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                />
+                <img
+                  v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
+                  :src="item.icon"
+                  :alt="item.label"
+                  class="w-6 h-6"
+                />
+                <div
+                  v-else-if="typeof item.icon === 'string'"
+                  v-html="item.icon"
+                ></div>
+                <template v-else>
+                  {{ item.label || index + 1 }}
+                </template>
+              </slot>
+            </slot>
+          </DuButton>
+        </template>
+      </template>
+    </div>
+  </template>
+
+  <!-- Manual mode -->
+  <template v-else>
+    <div :class="fabClasses">
+      <slot></slot>
+    </div>
+  </template>
+</template>

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

@@ -0,0 +1,10 @@
+export const MODAL_PLACEMENTS = [
+  'modal-top',
+  'modal-middle',
+  'modal-bottom',
+  'modal-start',
+  'modal-end',
+  'modal-bottom sm:modal-middle'
+] as const
+
+export type MODALPlacement = (typeof MODAL_PLACEMENTS)[number] 

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]