dendelion-ui 0.0.11 → 0.0.13

package/src/components/button/interface.ts

@@ -1,13 +1,13 @@
-import { Color } from "@/types";
-
-export type Type = 'button' | 'submit' | 'reset';
-
-export type ButtonProps = {
-    type?: Type,
-    loading?: boolean,
-    color?: Color,
-    soft?: boolean,
-    outline?: boolean,
-    disabled?: boolean,
-    click?: () => void,
-  };
+import { Color } from '@/types';
+
+export type Type = 'button' | 'submit' | 'reset';
+
+export type ButtonProps = {
+	type?: Type;
+	loading?: boolean;
+	color?: Color;
+	soft?: boolean;
+	outline?: boolean;
+	disabled?: boolean;
+	click?: () => void;
+};

package/src/components/card/Card.vue

@@ -1,25 +1,32 @@
-<template>
-    <div :class="classes" >
-        <slot></slot>
-    </div>
-</template>
-
-<script setup lang="ts">
-import classNames from 'classnames';
-import { ref } from 'vue';
-import { CardProps } from './interface';
-import { Color, BackgroundColorUtils, RoundedSizeUtils } from '@/types';
-
-const props = withDefaults(defineProps<CardProps>(), {
-    backgroundColor: Color.Primary,
-    shadow: false,
-    fullWidth: false,
-});
-
-const classes = ref(classNames('card',
-    BackgroundColorUtils.toClassName(props.backgroundColor),
-    props.shadow ? 'shadow-lg' : '',
-    props.fullWidth ? 'w-full' : '',
-    props.rounded && !props.roundedSize ? 'rounded' : props.roundedSize ? RoundedSizeUtils.toClassName(props.roundedSize) : '',
-));
-</script>
+<template>
+	<div :class="classes">
+		<slot></slot>
+	</div>
+</template>
+
+<script setup lang="ts">
+import classNames from 'classnames';
+import { ref } from 'vue';
+import { CardProps } from './interface';
+import { Color, BackgroundColorUtils, RoundedSizeUtils } from '@/types';
+
+const props = withDefaults(defineProps<CardProps>(), {
+	backgroundColor: Color.Primary,
+	shadow: false,
+	fullWidth: false,
+});
+
+const classes = ref(
+	classNames(
+		'card',
+		BackgroundColorUtils.toClassName(props.backgroundColor),
+		props.shadow ? 'shadow-lg' : '',
+		props.fullWidth ? 'w-full' : '',
+		props.rounded && !props.roundedSize
+			? 'rounded'
+			: props.roundedSize
+				? RoundedSizeUtils.toClassName(props.roundedSize)
+				: '',
+	),
+);
+</script>

package/src/components/card/CardBody.vue

@@ -1,9 +1,7 @@
-<template>
-    <div class="card-body">
-        <slot></slot>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
+<template>
+	<div class="card-body">
+		<slot></slot>
+	</div>
+</template>
+
+<script setup lang="ts"></script>

package/src/components/card/CardTitle.vue

@@ -1,18 +1,20 @@
-<template>
-    <component :is="is" class="card-title">
-      {{ text }}
-    </component>
-  </template>
-  
-  <script setup lang="ts">
-  import type { Component } from 'vue';
-  
-  withDefaults(defineProps<{
-    is?: string | object | Component,
-    text: string
-  }>(), {
-    is: 'h1',
-    text: ''
-  })
-  </script>
-  
+<template>
+	<component :is="is" class="card-title">
+		{{ text }}
+	</component>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+withDefaults(
+	defineProps<{
+		is?: string | object | Component;
+		text: string;
+	}>(),
+	{
+		is: 'h1',
+		text: '',
+	},
+);
+</script>

package/src/components/card/index.ts

@@ -1,4 +1,4 @@
-export { default as Card } from './Card.vue';
-export { default as CardBody } from './CardBody.vue';
-export { default as CardTitle } from './CardTitle.vue';
-export type { CardProps } from './interface';
+export { default as Card } from './Card.vue';
+export { default as CardBody } from './CardBody.vue';
+export { default as CardTitle } from './CardTitle.vue';
+export type { CardProps } from './interface';

package/src/components/card/interface.ts

@@ -1,9 +1,9 @@
-import { Color, Size } from "@/types";
-
-export type CardProps = {
-    backgroundColor?: Color,
-    shadow?: boolean,
-    fullWidth?: boolean,
-    rounded?: boolean,
-    roundedSize?: Size
-};
+import { Color, Size } from '@/types';
+
+export type CardProps = {
+	backgroundColor?: Color;
+	shadow?: boolean;
+	fullWidth?: boolean;
+	rounded?: boolean;
+	roundedSize?: Size;
+};

package/src/components/container/Container.vue

@@ -1,21 +1,20 @@
-<template>
-    <div :class="classes">
-        <slot></slot>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ContainerProps } from './interface';
-
-
-const props = withDefaults(defineProps<ContainerProps>(), {
-    container: true,
-    padding: true
-});
-
-const classes = ref([
-    props.container ? 'container' : '', //To disable the max width in some cases
-    props.padding ? 'p-6' : ''
-]);
-</script>
+<template>
+	<div :class="classes">
+		<slot></slot>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ContainerProps } from './interface';
+
+const props = withDefaults(defineProps<ContainerProps>(), {
+	container: true,
+	padding: true,
+});
+
+const classes = ref([
+	props.container ? 'container' : '', //To disable the max width in some cases
+	props.padding ? 'p-6' : '',
+]);
+</script>

package/src/components/container/index.ts

@@ -1,2 +1,2 @@
-export { default as Container } from './Container.vue';
-export type { ContainerProps } from './interface';
+export { default as Container } from './Container.vue';
+export type { ContainerProps } from './interface';

package/src/components/container/interface.ts

@@ -1,5 +1,4 @@
-
-export type ContainerProps = {
-    container?: boolean,
-    padding?: boolean
-};
+export type ContainerProps = {
+	container?: boolean;
+	padding?: boolean;
+};

package/src/components/modal/Modal.vue

@@ -1,50 +1,70 @@
-<template>
-    <dialog ref="modal" :class="classes" aria-modal="true" aria-hidden="true" role="dialog"
-        @close="(e) => emit('close', e)">
-        <div class="modal-box">
-            <form v-if="closeButton" method="dialog">
-                <button :class="closeButtonClasses">✕</button>
-            </form>
-            <slot></slot>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-            <button>close</button>
-        </form>
-    </dialog>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ModalProps } from './interface';
-import classNames from 'classnames';
-import { Size, ButtonSizeUtils } from '@/types';
-
-const modal = ref<HTMLDialogElement | null>(null);
-
-const emit = defineEmits(['close']);
-
-const props = withDefaults(defineProps<ModalProps>(), {
-    closeButton: true,
-    overflow: false,
-    closeButtonSize: Size.SM
-});
-
-const classes = ref(classNames('modal', {
-    'overflow-visible': props.overflow
-}));
-
-const closeButtonClasses = ref(classNames('btn', ButtonSizeUtils.toClassName(props.closeButtonSize), 'btn-circle', 'btn-ghost', 'absolute', 'right-2', 'top-2'));
-
-const showModal = () => {
-    modal.value?.showModal();
-}
-
-const closeModal = () => {
-    modal.value?.close();
-}
-
-defineExpose({
-    showModal,
-    closeModal
-})
-</script>
+<template>
+	<dialog
+		ref="modal"
+		:class="[classes, $attrs.class]"
+		aria-modal="true"
+		aria-hidden="true"
+		role="dialog"
+		@close="(e) => emit('close', e)"
+	>
+		<div :class="boxClasses">
+			<form v-if="closeButton" method="dialog">
+				<button :class="closeButtonClasses">✕</button>
+			</form>
+			<slot></slot>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ModalProps } from './interface';
+import classNames from 'classnames';
+import { Size, ButtonSizeUtils } from '@/types';
+
+const modal = ref<HTMLDialogElement | null>(null);
+
+const emit = defineEmits(['close']);
+
+const props = withDefaults(defineProps<ModalProps>(), {
+	closeButton: true,
+	overflow: false,
+	closeButtonSize: Size.SM,
+});
+
+const boxClasses = ref(classNames('modal-box', props.extraBoxClasses));
+
+const classes = ref(
+	classNames('modal', {
+		'overflow-visible': props.overflow,
+	}),
+);
+
+const closeButtonClasses = ref(
+	classNames(
+		'btn',
+		ButtonSizeUtils.toClassName(props.closeButtonSize),
+		'btn-circle',
+		'btn-ghost',
+		'absolute',
+		'right-2',
+		'top-2',
+	),
+);
+
+const showModal = () => {
+	modal.value?.showModal();
+};
+
+const closeModal = () => {
+	modal.value?.close();
+};
+
+defineExpose({
+	showModal,
+	closeModal,
+});
+</script>

package/src/components/modal/index.ts

@@ -1,2 +1,2 @@
-export {default as Modal} from './Modal.vue';
-export type {ModalProps} from './interface';
+export { default as Modal } from './Modal.vue';
+export type { ModalProps } from './interface';

package/src/components/modal/interface.ts

@@ -1,11 +1,12 @@
-import { Size } from "@/types";
-
-export type ModalProps = {
-    closeButton?: boolean;
-    overflow?: boolean;
-    closeButtonSize?: Size;
-}
-
-export interface Modal {
-    showModal: () => void;
-}
+import { Size } from '@/types';
+
+export type ModalProps = {
+	closeButton?: boolean;
+	overflow?: boolean;
+	closeButtonSize?: Size;
+	extraBoxClasses?: string;
+};
+
+export interface Modal {
+	showModal: () => void;
+}

package/src/components/search/SearchBar.vue

@@ -1,53 +1,62 @@
-<template>
-    <div class="hidden w-full max-w-sm lg:flex">
-        <label class="relative mx-3 w-full">
-            <svg class="pointer-events-none absolute z-10 my-3.5 ms-4 opacity-60 text-base-content" aria-hidden="true"
-                width="16" height="16" viewBox="0.48 0.48 23.04 23.04" fill="currentColor">
-                <path fill="none" d="M0 0h24v24H0z"></path>
-                <path
-                    d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
-                </path>
-            </svg>
-            <div class="w-full max-w-full relative">
-                <form>
-                    <input ref="searchInput" type="search" placeholder="Zoeken..." :value="props.modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-                        class="bg-transparent color-[inherit] border-[2px] border-solid border-transparent focus:border-[2px] focus:border-base-200 focus:outline-none rounded-xl w-full px-3 py-2 ps-10">
-                </form>
-            </div>
-            <div
-                class="pointer-events-none absolute end-10 top-2.5 gap-1 opacity-50 rtl:flex-row-reverse hidden lg:flex">
-                <kbd class="kbd kbd-sm">ctrl</kbd>
-                <kbd class="kbd kbd-sm">K</kbd>
-            </div>
-        </label>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-
-const props = defineProps(['modelValue']);
-
-const searchInput = ref<HTMLInputElement | null>(null);
-
-const emit = defineEmits(['update:modelValue']);
-
-const handleKeyPress = (event: KeyboardEvent) => {
-  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
-    event.preventDefault();
-    if (searchInput.value) {
-      searchInput.value.focus(); 
-    }
-  }
-};
-
-
-onMounted(() => {
-    document.addEventListener('keydown', handleKeyPress);
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeyPress);
-});
-
-</script>
+<template>
+	<div class="hidden w-full max-w-sm lg:flex">
+		<label class="relative mx-3 w-full">
+			<svg
+				class="pointer-events-none absolute z-10 my-3.5 ms-4 text-base-content opacity-60"
+				aria-hidden="true"
+				width="16"
+				height="16"
+				viewBox="0.48 0.48 23.04 23.04"
+				fill="currentColor"
+			>
+				<path fill="none" d="M0 0h24v24H0z"></path>
+				<path
+					d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+				></path>
+			</svg>
+			<div class="relative w-full max-w-full">
+				<form>
+					<input
+						ref="searchInput"
+						type="search"
+						placeholder="Zoeken..."
+						:value="props.modelValue"
+						@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+						class="color-[inherit] w-full rounded-xl border-[2px] border-solid border-transparent bg-transparent px-3 py-2 ps-10 focus:border-[2px] focus:border-base-200 focus:outline-none"
+					/>
+				</form>
+			</div>
+			<div class="pointer-events-none absolute end-10 top-2.5 hidden gap-1 opacity-50 lg:flex rtl:flex-row-reverse">
+				<kbd class="kbd kbd-sm">ctrl</kbd>
+				<kbd class="kbd kbd-sm">K</kbd>
+			</div>
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps(['modelValue']);
+
+const searchInput = ref<HTMLInputElement | null>(null);
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleKeyPress = (event: KeyboardEvent) => {
+	if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
+		event.preventDefault();
+		if (searchInput.value) {
+			searchInput.value.focus();
+		}
+	}
+};
+
+onMounted(() => {
+	document.addEventListener('keydown', handleKeyPress);
+});
+
+onUnmounted(() => {
+	document.removeEventListener('keydown', handleKeyPress);
+});
+</script>

package/src/components/search/index.ts

@@ -1 +1 @@
-export { default as SearchBar } from './SearchBar.vue';
+export { default as SearchBar } from './SearchBar.vue';

package/src/components/stepper/Step.vue

@@ -1,35 +1,37 @@
-<template>
-  <li class="step" :class="activeClass">
-    <slot></slot>
-  </li>
-</template>
-
-<script setup lang="ts">
-import { inject, onMounted, ref, watch, type Ref } from 'vue';
-import { StepperProps } from './interface';
-
-const props = defineProps<StepperProps>()
-
-const stepper = inject<{
-  value: Ref<string>
-  updateValue: (value: string) => void
-}>("stepper");
-
-const activeClass = ref('');
-
-watch(() => stepper?.value.value, (value) => {
-  if (value && props.value) {
-    activeClass.value = Number(value) >= Number(props.value) ? 'step-primary' : '';
-  }
-})
-
-onMounted(() => {
-  if (stepper) {
-    activeClass.value = stepper.value.value === props.value ? 'step-primary' : '';
-    if (Number(stepper.value.value) >= Number(props.value)) {
-      activeClass.value = 'step-primary';
-    }
-  }
-})
-
-</script>
+<template>
+	<li class="step" :class="activeClass">
+		<slot></slot>
+	</li>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, ref, watch, type Ref } from 'vue';
+import { StepperProps } from './interface';
+
+const props = defineProps<StepperProps>();
+
+const stepper = inject<{
+	value: Ref<string>;
+	updateValue: (value: string) => void;
+}>('stepper');
+
+const activeClass = ref('');
+
+watch(
+	() => stepper?.value.value,
+	(value) => {
+		if (value && props.value) {
+			activeClass.value = Number(value) >= Number(props.value) ? 'step-primary' : '';
+		}
+	},
+);
+
+onMounted(() => {
+	if (stepper) {
+		activeClass.value = stepper.value.value === props.value ? 'step-primary' : '';
+		if (Number(stepper.value.value) >= Number(props.value)) {
+			activeClass.value = 'step-primary';
+		}
+	}
+});
+</script>

package/src/components/stepper/StepList.vue

@@ -1,8 +1,7 @@
-<template>
-  <ul class="steps">
-    <slot></slot>
-  </ul>
-</template>
-
-<script setup lang="ts">
-</script>
+<template>
+	<ul class="steps">
+		<slot></slot>
+	</ul>
+</template>
+
+<script setup lang="ts"></script>