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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/dist/plugin-vite.js +1 -1
  2. package/package.json +2 -27
  3. package/components/Actions/du-button/du-button.types.ts +0 -14
  4. package/components/Actions/du-button/du-button.vue +0 -149
  5. package/components/Actions/du-dropdown/du-dropdown.types.ts +0 -15
  6. package/components/Actions/du-dropdown/du-dropdown.vue +0 -75
  7. package/components/Actions/du-fab/du-fab.types.ts +0 -28
  8. package/components/Actions/du-fab/du-fab.vue +0 -270
  9. package/components/Actions/du-modal/du-modal.types.ts +0 -10
  10. package/components/Actions/du-modal/du-modal.vue +0 -123
  11. package/components/Actions/du-swap/du-swap.types.ts +0 -3
  12. package/components/Actions/du-swap/du-swap.vue +0 -68
  13. package/components/DataDisplay/du-accordion/du-accordion-item.vue +0 -37
  14. package/components/DataDisplay/du-accordion/du-accordion.types.ts +0 -15
  15. package/components/DataDisplay/du-accordion/du-accordion.vue +0 -73
  16. package/components/DataDisplay/du-avatar/du-avatar.types.ts +0 -59
  17. package/components/DataDisplay/du-avatar/du-avatar.vue +0 -139
  18. package/components/DataDisplay/du-badge/du-badge.types.ts +0 -21
  19. package/components/DataDisplay/du-badge/du-badge.vue +0 -81
  20. package/components/DataDisplay/du-card/du-card.types.ts +0 -18
  21. package/components/DataDisplay/du-card/du-card.vue +0 -86
  22. package/components/DataDisplay/du-carousel/du-carousel-item.vue +0 -11
  23. package/components/DataDisplay/du-carousel/du-carousel.types.ts +0 -15
  24. package/components/DataDisplay/du-carousel/du-carousel.vue +0 -46
  25. package/components/DataDisplay/du-chat/du-chat-item.vue +0 -56
  26. package/components/DataDisplay/du-chat/du-chat.types.ts +0 -31
  27. package/components/DataDisplay/du-chat/du-chat.vue +0 -71
  28. package/components/DataDisplay/du-collapse/du-collapse.types.ts +0 -15
  29. package/components/DataDisplay/du-collapse/du-collapse.vue +0 -59
  30. package/components/DataDisplay/du-countdown/du-countdown-group.vue +0 -88
  31. package/components/DataDisplay/du-countdown/du-countdown.types.ts +0 -15
  32. package/components/DataDisplay/du-countdown/du-countdown.vue +0 -180
  33. package/components/DataDisplay/du-diff/du-diff.types.ts +0 -9
  34. package/components/DataDisplay/du-diff/du-diff.vue +0 -44
  35. package/components/DataDisplay/du-kbd/du-kbd.types.ts +0 -9
  36. package/components/DataDisplay/du-kbd/du-kbd.vue +0 -21
  37. package/components/DataDisplay/du-list/du-list-row.vue +0 -12
  38. package/components/DataDisplay/du-list/du-list.types.ts +0 -3
  39. package/components/DataDisplay/du-list/du-list.vue +0 -11
  40. package/components/DataDisplay/du-stat/du-stat.types.ts +0 -12
  41. package/components/DataDisplay/du-stat/du-stat.vue +0 -28
  42. package/components/DataDisplay/du-stats/du-stats.types.ts +0 -3
  43. package/components/DataDisplay/du-stats/du-stats.vue +0 -91
  44. package/components/DataDisplay/du-status/du-status.types.ts +0 -21
  45. package/components/DataDisplay/du-status/du-status.vue +0 -51
  46. package/components/DataDisplay/du-table/du-table-item.types.ts +0 -6
  47. package/components/DataDisplay/du-table/du-table-item.vue +0 -24
  48. package/components/DataDisplay/du-table/du-table.types.ts +0 -26
  49. package/components/DataDisplay/du-table/du-table.vue +0 -125
  50. package/components/DataDisplay/du-timeline/du-timeline-item.vue +0 -85
  51. package/components/DataDisplay/du-timeline/du-timeline.types.ts +0 -22
  52. package/components/DataDisplay/du-timeline/du-timeline.vue +0 -138
  53. package/components/DataInput/du-checkbox/du-checkbox.types.ts +0 -17
  54. package/components/DataInput/du-checkbox/du-checkbox.vue +0 -40
  55. package/components/DataInput/du-fieldset/du-fieldset.types.ts +0 -4
  56. package/components/DataInput/du-fieldset/du-fieldset.vue +0 -16
  57. package/components/DataInput/du-file-input/du-file-input.types.ts +0 -29
  58. package/components/DataInput/du-file-input/du-file-input.vue +0 -31
  59. package/components/DataInput/du-filter/du-filter.types.ts +0 -30
  60. package/components/DataInput/du-filter/du-filter.vue +0 -47
  61. package/components/DataInput/du-input-field/du-input-field.types.ts +0 -43
  62. package/components/DataInput/du-input-field/du-input-field.vue +0 -47
  63. package/components/DataInput/du-label/du-label.types.ts +0 -3
  64. package/components/DataInput/du-label/du-label.vue +0 -28
  65. package/components/DataInput/du-label-input-validator/du-label-input-validator.types.ts +0 -7
  66. package/components/DataInput/du-label-input-validator/du-label-input-validator.vue +0 -51
  67. package/components/DataInput/du-radio/du-radio.types.ts +0 -15
  68. package/components/DataInput/du-radio/du-radio.vue +0 -27
  69. package/components/DataInput/du-range/du-range.types.ts +0 -18
  70. package/components/DataInput/du-range/du-range.vue +0 -60
  71. package/components/DataInput/du-rating/du-rating-item.vue +0 -65
  72. package/components/DataInput/du-rating/du-rating.types.ts +0 -46
  73. package/components/DataInput/du-rating/du-rating.vue +0 -127
  74. package/components/DataInput/du-search/du-search.types.ts +0 -44
  75. package/components/DataInput/du-search/du-search.vue +0 -425
  76. package/components/DataInput/du-select/du-select.types.ts +0 -31
  77. package/components/DataInput/du-select/du-select.vue +0 -384
  78. package/components/DataInput/du-text-area/du-text-area.types.ts +0 -11
  79. package/components/DataInput/du-text-area/du-text-area.vue +0 -41
  80. package/components/Feedback/du-alert/du-alert.types.ts +0 -16
  81. package/components/Feedback/du-alert/du-alert.vue +0 -113
  82. package/components/Feedback/du-loading/du-loading.types.ts +0 -11
  83. package/components/Feedback/du-loading/du-loading.vue +0 -33
  84. package/components/Feedback/du-progress/du-progress.types.ts +0 -8
  85. package/components/Feedback/du-progress/du-progress.vue +0 -23
  86. package/components/Feedback/du-radial-progress/du-radial-progress.types.ts +0 -9
  87. package/components/Feedback/du-radial-progress/du-radial-progress.vue +0 -64
  88. package/components/Feedback/du-skeleton/du-skeleton.types.ts +0 -3
  89. package/components/Feedback/du-skeleton/du-skeleton.vue +0 -11
  90. package/components/Feedback/du-toast/du-toast.types.ts +0 -11
  91. package/components/Feedback/du-toast/du-toast.vue +0 -54
  92. package/components/Feedback/du-tooltip/du-tooltip.types.ts +0 -12
  93. package/components/Feedback/du-tooltip/du-tooltip.vue +0 -55
  94. package/components/Layout/du-drawer/du-drawer.types.ts +0 -27
  95. package/components/Layout/du-drawer/du-drawer.vue +0 -224
  96. package/components/Layout/du-join/du-join.types.ts +0 -7
  97. package/components/Layout/du-join/du-join.vue +0 -31
  98. package/components/Navigation/du-breadcrumbs/du-breadcrumbs.types.ts +0 -13
  99. package/components/Navigation/du-breadcrumbs/du-breadcrumbs.vue +0 -79
  100. package/components/Navigation/du-button-link/du-button-link.types.ts +0 -17
  101. package/components/Navigation/du-button-link/du-button-link.vue +0 -77
  102. package/components/Navigation/du-dock/du-dock.types.ts +0 -19
  103. package/components/Navigation/du-dock/du-dock.vue +0 -73
  104. package/components/Navigation/du-link/du-link.types.ts +0 -7
  105. package/components/Navigation/du-link/du-link.vue +0 -25
  106. package/components/Navigation/du-menu/du-menu-item.vue +0 -160
  107. package/components/Navigation/du-menu/du-menu.types.ts +0 -33
  108. package/components/Navigation/du-menu/du-menu.vue +0 -87
  109. package/components/Navigation/du-navbar/du-navbar.types.ts +0 -3
  110. package/components/Navigation/du-navbar/du-navbar.vue +0 -21
  111. package/components/Navigation/du-pagination/du-pagination.types.ts +0 -30
  112. package/components/Navigation/du-pagination/du-pagination.vue +0 -186
  113. package/components/Navigation/du-step-item/du-step-item.types.ts +0 -9
  114. package/components/Navigation/du-step-item/du-step-item.vue +0 -46
  115. package/components/Navigation/du-steps/du-steps.types.ts +0 -20
  116. package/components/Navigation/du-steps/du-steps.vue +0 -85
  117. package/components/Navigation/du-tabs/du-tabs.types.ts +0 -25
  118. package/components/Navigation/du-tabs/du-tabs.vue +0 -96
  119. package/composables/useSizeProps.ts +0 -26
  120. package/composables/useVariantProps.ts +0 -18
  121. package/index.ts +0 -69
  122. package/plugin-vite.ts +0 -286
  123. package/types/index.ts +0 -59
  124. package/types/types.sh +0 -80
@@ -103,7 +103,7 @@ function v(n = {}) {
103
103
  v = n.libPath ? c(n.libPath) : g(a(l(import.meta.url))), y = s(v, "index.css");
104
104
  let o = s(v, "index.ts");
105
105
  if (!e(o)) {
106
- console.warn(`[vite-plugin-cornet] library index not found at ${o}, skipping detection`);
106
+ r && console.log("[vite-plugin-cornet] sources not present (dist install), CSS exclusions skipped");
107
107
  return;
108
108
  }
109
109
  let b = f(t(o, "utf-8")), S = n.packageNames;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cornet-ui",
3
3
  "private": false,
4
- "version": "0.1.0-beta.1",
4
+ "version": "0.1.0-beta.5",
5
5
  "description": "Cornet — Vue 3 component library built on DaisyUI 5 and Tailwind CSS 4. Usable as an npm package or embedded directly as source in your project.",
6
6
  "license": "MIT",
7
7
  "type": "module",
@@ -19,20 +19,14 @@
19
19
  },
20
20
  "files": [
21
21
  "dist",
22
- "components",
23
- "!components/**/*.stories.ts",
24
- "composables",
25
- "types",
26
- "index.ts",
27
22
  "index.css",
28
- "plugin-vite.ts",
29
23
  "README.md",
30
24
  "LICENSE"
31
25
  ],
32
26
  "homepage": "https://cornet-ui.com",
33
27
  "repository": {
34
28
  "type": "git",
35
- "url": "git+https://gitlab.limos.fr/hub-isima/daisyui-vue-kit.git"
29
+ "url": "https://gitlab.limos.fr/hub-isima/daisyui-vue-kit.git"
36
30
  },
37
31
  "bugs": {
38
32
  "url": "https://github.com/t-lecoublet/Cornet/issues"
@@ -60,37 +54,18 @@
60
54
  "optional": true
61
55
  }
62
56
  },
63
- "devDependencies": {
64
- "@types/node": "^25.6.0",
65
- "@vitejs/plugin-vue": "^6.0.6",
66
- "@vue/eslint-config-typescript": "^14.0.0",
67
- "@vue/test-utils": "^2.4.6",
68
- "@vue/tsconfig": "^0.9.1",
69
- "eslint": "^9.0.0",
70
- "eslint-plugin-vue": "^10.0.0",
71
- "happy-dom": "^20.0.0",
72
- "typescript": "^6.0.2",
73
- "vite": "^8.0.8",
74
- "vite-plugin-lib-inject-css": "^2.2.2",
75
- "vitest": "^4.0.0",
76
- "vue": "^3.5.32",
77
- "vue-tsc": "^3.2.6"
78
- },
79
57
  "exports": {
80
58
  ".": {
81
59
  "types": "./dist/index.d.ts",
82
- "source": "./index.ts",
83
60
  "import": "./dist/index.js"
84
61
  },
85
62
  "./plugin-vite": {
86
63
  "types": "./dist/plugin-vite.d.ts",
87
- "source": "./plugin-vite.ts",
88
64
  "import": "./dist/plugin-vite.js"
89
65
  },
90
66
  "./css": "./index.css",
91
67
  "./types": {
92
68
  "types": "./dist/types/index.d.ts",
93
- "source": "./types/index.ts",
94
69
  "import": "./dist/types/index.js"
95
70
  },
96
71
  "./package.json": "./package.json"
@@ -1,14 +0,0 @@
1
- export const BUTTON_SIZES = ['btn-xs', 'btn-sm', 'btn-md', 'btn-lg', 'btn-xl'] as const
2
- export const BUTTON_COLORS = [
3
- 'btn-primary',
4
- 'btn-secondary',
5
- 'btn-accent',
6
- 'btn-neutral',
7
- 'btn-info',
8
- 'btn-success',
9
- 'btn-warning',
10
- 'btn-error',
11
- ] as const
12
-
13
- export type BUTTONSize = (typeof BUTTON_SIZES)[number]
14
- export type BUTTONColor = (typeof BUTTON_COLORS)[number]
@@ -1,149 +0,0 @@
1
- <script setup lang="ts">
2
- import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
3
- import { useVariantMapping, type Variant } from '../../../composables/useVariantProps'
4
- import { computed, inject } from 'vue'
5
-
6
- type ElementType = 'button' | 'a' | 'input' | 'div' | 'RouterLink' | 'NuxtLink' | string
7
-
8
- const props = withDefaults(
9
- defineProps<{
10
- customClass?: string
11
- size?: Size
12
- variant?: Variant
13
- outline?: boolean
14
- soft?: boolean
15
- dash?: boolean
16
- active?: boolean
17
- ghost?: boolean
18
- link?: boolean
19
- wide?: boolean
20
- disabled?: boolean
21
- square?: boolean
22
- circle?: boolean
23
- block?: boolean
24
- as?: ElementType
25
- type?: string
26
- href?: string
27
- value?: string
28
- inputType?: 'button' | 'submit' | 'reset' | 'radio' | 'checkbox'
29
- label?: string
30
- }>(),
31
- {
32
- customClass: undefined,
33
- size: 'default',
34
- variant: 'default',
35
- outline: false,
36
- soft: false,
37
- dash: false,
38
- active: false,
39
- ghost: false,
40
- link: false,
41
- wide: false,
42
- disabled: undefined,
43
- square: false,
44
- circle: false,
45
- block: false,
46
- type: undefined,
47
- href: undefined,
48
- value: undefined,
49
- inputType: undefined,
50
- label: undefined,
51
- },
52
- )
53
-
54
- const isInDropdownTrigger = inject('isDropdownTrigger', false)
55
- const inJoin = inject("isInJoin", false)
56
- const filterName = inject('filterName', undefined)
57
-
58
- const { sizeClass } = useSizeMapping(props, 'btn')
59
- const { colorClass } = useVariantMapping(props, 'btn')
60
- const softClass = computed(() => {
61
- return props.soft ? 'btn-soft' : ''
62
- })
63
- const outlineClass = computed(() => {
64
- return props.outline ? 'btn-outline' : ''
65
- })
66
- const dashClass = computed(() => {
67
- return props.dash ? 'btn-dash' : ''
68
- })
69
- const activeClass = computed(() => {
70
- return props.active ? 'btn-active' : ''
71
- })
72
- const ghostClass = computed(() => {
73
- return props.ghost ? 'btn-ghost' : ''
74
- })
75
- const linkClass = computed(() => {
76
- return props.link ? 'btn-link' : ''
77
- })
78
- const wideClass = computed(() => {
79
- return props.wide ? 'btn-wide' : ''
80
- })
81
- const squareClass = computed(() => {
82
- return props.square ? 'btn-square' : ''
83
- })
84
- const circleClass = computed(() => {
85
- return props.circle ? 'btn-circle' : ''
86
- })
87
- const blockClass = computed(() => {
88
- return props.block ? 'btn-block' : ''
89
- })
90
-
91
- const elementTag = computed((): ElementType => {
92
- if (props.as) return props.as
93
- if (isInDropdownTrigger) return 'div'
94
- if (filterName) return 'input'
95
-
96
- return 'button'
97
- })
98
-
99
- const isInputElement = computed(() => elementTag.value === 'input')
100
- const isAnchorElement = computed(() => elementTag.value === 'a')
101
-
102
- const buttonAttributes = computed(() => {
103
- const attrs: Record<string, any> = {}
104
-
105
- if (filterName) {
106
- attrs.name = filterName
107
- attrs.type = 'radio'
108
- } else if (isInputElement.value) {
109
- attrs.type = props.inputType || 'button'
110
- attrs.value = props.value || ''
111
- } else if (isAnchorElement.value) {
112
- attrs.href = props.href || '#'
113
- attrs.role = 'button'
114
- } else if (isInDropdownTrigger) {
115
- attrs.tabindex = '0'
116
- attrs.role = 'button'
117
- } else {
118
- attrs.type = props.type || 'button'
119
- }
120
- return attrs
121
- })
122
- </script>
123
- <template>
124
- <component
125
- :is="elementTag"
126
- v-bind="buttonAttributes"
127
- :class="[
128
- 'btn',
129
- customClass,
130
- sizeClass,
131
- colorClass,
132
- softClass,
133
- outlineClass,
134
- dashClass,
135
- activeClass,
136
- ghostClass,
137
- linkClass,
138
- wideClass,
139
- squareClass,
140
- circleClass,
141
- blockClass,
142
- inJoin && 'join-item',
143
- ]"
144
- :aria-label="props.label"
145
- :disabled="props.disabled"
146
- >
147
- <slot v-if="!isInputElement"></slot>
148
- </component>
149
- </template>
@@ -1,15 +0,0 @@
1
- export const DROPDOWN_PLACEMENTS = [
2
- 'dropdown-start',
3
- 'dropdown-center',
4
- 'dropdown-end',
5
- 'dropdown-top',
6
- 'dropdown-bottom',
7
- 'dropdown-left',
8
- 'dropdown-right',
9
- ] as const
10
-
11
- export type DROPDOWNPlacement = (typeof DROPDOWN_PLACEMENTS)[number]
12
-
13
-
14
- export type PlacementValue = 'start' | 'center' | 'end' | 'top' | 'bottom' | 'left' | 'right'
15
- export type PlacementInput = PlacementValue | string | PlacementValue[] | Partial<Record<PlacementValue, boolean>>
@@ -1,75 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed, provide } from 'vue'
3
- import { type PlacementInput, type PlacementValue } from './du-dropdown.types'
4
-
5
- const props = withDefaults(
6
- defineProps<{
7
- hover?: boolean
8
- open?: boolean
9
- placement?: PlacementInput
10
- }>(),
11
- {
12
- hover: false,
13
- open: false,
14
- placement: 'bottom',
15
- },
16
- )
17
-
18
- provide('isDropdownTrigger', true)
19
-
20
- const placementToClass = (value: PlacementValue): string => {
21
- return `dropdown-${value}`
22
- }
23
-
24
- const getPlacementClasses = (input: PlacementInput): string[] => {
25
- if (!input) return []
26
-
27
- if (typeof input === 'string') {
28
- if (input.includes(',')) {
29
- return input.split(',').map(s => s.trim()).filter(Boolean).map(s => placementToClass(s as PlacementValue))
30
- }
31
- return [placementToClass(input as PlacementValue)]
32
- }
33
-
34
- if (Array.isArray(input)) {
35
- return input.map(placementToClass)
36
- }
37
-
38
- if (typeof input === 'object') {
39
- const keys = Object.keys(input)
40
- if (keys.every(key => key in { start: 1, center: 1, end: 1, top: 1, bottom: 1, left: 1, right: 1 })) {
41
- return keys.map(key => placementToClass(key as PlacementValue))
42
- }
43
- return Object.entries(input)
44
- .filter(([, enabled]) => enabled)
45
- .map(([key]) => placementToClass(key as PlacementValue))
46
- }
47
-
48
- return []
49
- }
50
-
51
- const placementClass = computed(() => {
52
- const classes = getPlacementClasses(props.placement)
53
- return classes.join(' ')
54
- })
55
-
56
- const hoverClass = computed(() => {
57
- return props.hover ? 'dropdown-hover' : ''
58
- })
59
-
60
- const openClass = computed(() => {
61
- return props.open ? 'dropdown-open' : ''
62
- })
63
- </script>
64
-
65
- <template>
66
- <div :class="['dropdown', placementClass, hoverClass, openClass]">
67
- <!-- Bind triggerProps on your trigger element (v-bind="triggerProps")
68
- to get the expected role/tabindex/aria attributes for free. -->
69
- <slot name="trigger" :trigger-props="{ role: 'button', tabindex: 0, 'aria-haspopup': 'true' }"></slot>
70
- <div class="dropdown-content" tabindex="0">
71
- <slot name="content"></slot>
72
- <slot></slot>
73
- </div>
74
- </div>
75
- </template>
@@ -1,28 +0,0 @@
1
- export const FAB_MODIFIERS = ['fab-flower'] as const
2
-
3
- export type FABModifier = (typeof FAB_MODIFIERS)[number]
4
-
5
- export interface FABItem {
6
- label?: string
7
- icon?: any
8
- customClass?: string
9
- onClick?: () => void
10
- tooltip?: string
11
- tooltipPosition?: 'left' | 'top' | 'right' | 'bottom'
12
- [key: string]: any
13
- }
14
-
15
- export interface FABMainAction {
16
- label?: string
17
- icon?: any
18
- customClass?: string
19
- variant?: string
20
- onClick?: () => void
21
- }
22
-
23
- export interface FABCloseButton {
24
- label?: string
25
- icon?: string
26
- customClass?: string
27
- variant?: string
28
- }
@@ -1,270 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue'
3
- import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
4
- import { type Variant, useVariantMapping } from '../../../composables/useVariantProps'
5
- import { type FABItem, type FABMainAction, type FABCloseButton } from './du-fab.types'
6
- import DuButton from '../du-button/du-button.vue'
7
- import DuTooltip from '../../Feedback/du-tooltip/du-tooltip.vue'
8
-
9
- const props = withDefaults(
10
- defineProps<{
11
- items?: FABItem[]
12
- modifier?: 'fab-flower'
13
- customClass?: string
14
- size?: Size
15
- variant?: Variant
16
- circle?: boolean
17
- mainAction?: FABMainAction
18
- closeButton?: FABCloseButton
19
- absolute?: boolean
20
- position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
21
- }>(),
22
- {
23
- items: undefined,
24
- modifier: undefined,
25
- customClass: '',
26
- size: 'lg',
27
- variant: 'primary',
28
- circle: true,
29
- mainAction: undefined,
30
- closeButton: undefined,
31
- absolute: true,
32
- position: 'bottom-right',
33
- },
34
- )
35
-
36
- const { sizeClass } = useSizeMapping(props, 'btn')
37
- const { colorClass } = useVariantMapping(props, 'btn')
38
-
39
- const modifierClass = computed(() => {
40
- return props.modifier ? props.modifier : ''
41
- })
42
-
43
- const positionClass = computed(() => {
44
- if (!props.absolute) return ''
45
-
46
- switch (props.position) {
47
- case 'bottom-right':
48
- return 'absolute bottom-4 right-4'
49
- case 'bottom-left':
50
- return 'absolute bottom-4 left-4'
51
- case 'top-right':
52
- return 'absolute top-4 right-4'
53
- case 'top-left':
54
- return 'absolute top-4 left-4'
55
- default:
56
- return 'absolute bottom-4 right-4'
57
- }
58
- })
59
-
60
- const fabClasses = computed(() => {
61
- return [
62
- 'fab',
63
- modifierClass.value,
64
- positionClass.value,
65
- 'z-50',
66
- props.customClass,
67
- ]
68
- })
69
-
70
- const getTooltipPosition = (position?: 'left' | 'top' | 'right' | 'bottom') => {
71
- return position || 'left'
72
- }
73
- </script>
74
-
75
- <template>
76
- <!-- Dynamic items mode -->
77
- <template v-if="items || mainAction">
78
- <div :class="fabClasses">
79
- <!-- Main trigger button -->
80
- <div
81
- tabindex="0"
82
- role="button"
83
- :class="[
84
- 'btn',
85
- sizeClass,
86
- colorClass,
87
- props.circle ? 'btn-circle' : '',
88
- ]"
89
- >
90
- <slot name="trigger">
91
- <slot name="trigger-icon">F</slot>
92
- </slot>
93
- </div>
94
-
95
- <!-- Close button (optional) -->
96
- <div
97
- v-if="closeButton"
98
- class="fab-close"
99
- >
100
- <slot name="close-button" :closeButton="closeButton">
101
- {{ closeButton.label || 'Close' }}
102
- <span
103
- :class="[
104
- 'btn',
105
- sizeClass,
106
- 'btn-circle',
107
- closeButton.variant ? `btn-${closeButton.variant}` : 'btn-error',
108
- closeButton.customClass,
109
- ]"
110
- >
111
- <slot name="close-icon">{{ closeButton.icon || '✕' }}</slot>
112
- </span>
113
- </slot>
114
- </div>
115
-
116
- <!-- Main action button (optional) -->
117
- <DuButton
118
- v-if="mainAction"
119
- as="button"
120
- customClass="fab-main-action"
121
- :size="props.size"
122
- :variant="(mainAction.variant as Variant) || 'default'"
123
- circle
124
- @click="mainAction.onClick"
125
- >
126
- <slot name="main-action" :mainAction="mainAction">
127
- <slot name="main-action-icon" :mainAction="mainAction">
128
- <component
129
- class="w-6 h-6"
130
- :is="mainAction.icon"
131
- v-if="typeof mainAction.icon === 'object' || typeof mainAction.icon === 'function'"
132
- />
133
- <img
134
- v-else-if="typeof mainAction.icon === 'string' && mainAction.icon.startsWith('http')"
135
- :src="mainAction.icon"
136
- :alt="mainAction.label"
137
- class="w-6 h-6"
138
- />
139
- <div
140
- v-else-if="typeof mainAction.icon === 'string'"
141
- v-html="mainAction.icon"
142
- ></div>
143
- <template v-else>
144
- {{ mainAction.label || 'M' }}
145
- </template>
146
- </slot>
147
- </slot>
148
- </DuButton>
149
-
150
- <!-- Speed dial buttons -->
151
- <template v-for="(item, index) in items" :key="index">
152
- <!-- With tooltip wrapper -->
153
- <DuTooltip
154
- v-if="item.tooltip"
155
- :dataTip="item.tooltip"
156
- :position="getTooltipPosition(item.tooltipPosition)"
157
- >
158
- <DuButton
159
- as="button"
160
- :size="props.size"
161
- :circle="props.circle"
162
- :customClass="item.customClass"
163
- @click="item.onClick"
164
- >
165
- <slot name="item" :item="item" :index="index">
166
- <slot :name="`item-${index}`" :item="item" :index="index">
167
- <component
168
- class="w-6 h-6"
169
- :is="item.icon"
170
- v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
171
- />
172
- <img
173
- v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
174
- :src="item.icon"
175
- :alt="item.label"
176
- class="w-6 h-6"
177
- />
178
- <div
179
- v-else-if="typeof item.icon === 'string'"
180
- v-html="item.icon"
181
- ></div>
182
- <template v-else>
183
- {{ item.label || index + 1 }}
184
- </template>
185
- </slot>
186
- </slot>
187
- </DuButton>
188
- </DuTooltip>
189
-
190
- <!-- Without tooltip wrapper -->
191
- <template v-else>
192
- <!-- With label wrapper -->
193
- <div v-if="item.label && !props.modifier">
194
- {{ item.label }}
195
- <DuButton
196
- as="button"
197
- :size="props.size"
198
- :circle="props.circle"
199
- :customClass="item.customClass"
200
- @click="item.onClick"
201
- >
202
- <slot name="item" :item="item" :index="index">
203
- <slot :name="`item-${index}`" :item="item" :index="index">
204
- <component
205
- class="w-6 h-6"
206
- :is="item.icon"
207
- v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
208
- />
209
- <img
210
- v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
211
- :src="item.icon"
212
- :alt="item.label"
213
- class="w-6 h-6"
214
- />
215
- <div
216
- v-else-if="typeof item.icon === 'string'"
217
- v-html="item.icon"
218
- ></div>
219
- <template v-else>
220
- {{ index + 1 }}
221
- </template>
222
- </slot>
223
- </slot>
224
- </DuButton>
225
- </div>
226
-
227
- <!-- Without label wrapper -->
228
- <DuButton
229
- v-else
230
- as="button"
231
- :size="props.size"
232
- :circle="props.circle"
233
- :customClass="item.customClass"
234
- @click="item.onClick"
235
- >
236
- <slot name="item" :item="item" :index="index">
237
- <slot :name="`item-${index}`" :item="item" :index="index">
238
- <component
239
- class="w-6 h-6"
240
- :is="item.icon"
241
- v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
242
- />
243
- <img
244
- v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
245
- :src="item.icon"
246
- :alt="item.label"
247
- class="w-6 h-6"
248
- />
249
- <div
250
- v-else-if="typeof item.icon === 'string'"
251
- v-html="item.icon"
252
- ></div>
253
- <template v-else>
254
- {{ item.label || index + 1 }}
255
- </template>
256
- </slot>
257
- </slot>
258
- </DuButton>
259
- </template>
260
- </template>
261
- </div>
262
- </template>
263
-
264
- <!-- Manual mode -->
265
- <template v-else>
266
- <div :class="fabClasses">
267
- <slot></slot>
268
- </div>
269
- </template>
270
- </template>
@@ -1,10 +0,0 @@
1
- export const MODAL_PLACEMENTS = [
2
- 'modal-top',
3
- 'modal-middle',
4
- 'modal-bottom',
5
- 'modal-start',
6
- 'modal-end',
7
- 'modal-bottom sm:modal-middle'
8
- ] as const
9
-
10
- export type MODALPlacement = (typeof MODAL_PLACEMENTS)[number]