dendelion-ui 0.0.1

package/dist/types/components/container/interface.d.ts

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

package/dist/types/components/modal/Modal.vue.d.ts

@@ -0,0 +1,31 @@
+import { ModalProps } from './interface';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        modal: HTMLDialogElement;
+    };
+    rootEl: HTMLDialogElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<ModalProps, {
+    showModal: () => void;
+    closeModal: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    closeButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    modal: HTMLDialogElement;
+}, HTMLDialogElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/modal/index.d.ts

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

package/dist/types/components/modal/interface.d.ts

@@ -0,0 +1,6 @@
+export type ModalProps = {
+    closeButton?: boolean;
+};
+export interface Modal {
+    showModal: () => void;
+}

package/dist/types/components/stepper/Step.vue.d.ts

@@ -0,0 +1,18 @@
+import { StepperProps } from './interface';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLIElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<StepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StepperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLLIElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/stepper/StepList.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLUListElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLUListElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/stepper/StepPanel.vue.d.ts

@@ -0,0 +1,22 @@
+import { StepperProps } from './interface';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            activateCallback: (index: number) => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<StepperProps, {
+    activateCallback: (index: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StepperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/stepper/StepPanels.vue.d.ts

@@ -0,0 +1,20 @@
+import { type Ref } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            currentStep: Ref<string, string>;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/stepper/Stepper.vue.d.ts

@@ -0,0 +1,26 @@
+import { StepperProps } from './interface';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            updateValue: (value: string) => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<StepperProps, {
+    updateValue: (value: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<StepperProps> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/stepper/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Stepper } from './Stepper.vue';
+export { default as Step } from './Step.vue';
+export { default as StepList } from './StepList.vue';
+export { default as StepPanels } from './StepPanels.vue';
+export { default as StepPanel } from './StepPanel.vue';
+export type { StepperProps } from './interface';

package/dist/types/components/stepper/interface.d.ts

@@ -0,0 +1,3 @@
+export type StepperProps = {
+    value: string;
+};

package/dist/types/components/table/Table.vue.d.ts

@@ -0,0 +1,11 @@
+import { TableProps } from './interface';
+import { Size } from '@/types';
+declare const _default: import("vue").DefineComponent<TableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    size: Size;
+    zebra: boolean;
+    pinRows: boolean;
+    pinCols: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    table: HTMLTableElement;
+}, HTMLTableElement>;
+export default _default;

package/dist/types/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './Table.vue';
+export type { TableProps } from './interface';

package/dist/types/components/table/interface.d.ts

@@ -0,0 +1,24 @@
+import { Size } from "@/types";
+export type TableProps = {
+    zebra?: boolean;
+    pinRows?: boolean;
+    pinCols?: boolean;
+    size: Size;
+    columns: Column[];
+    dataSource: Record<string, unknown>[];
+    ajax?: (params: object) => Promise<object>;
+};
+export type Column = {
+    title: string;
+    data: string;
+    render?: (text: string, record?: Record<string, unknown>) => string;
+    extraClasses?: ExtraClasses;
+};
+export type ExtraClasses = {
+    header?: string[];
+    cell?: CellClasses;
+};
+export type CellClasses = {
+    index: number;
+    classes: string[];
+};

package/dist/types/components.d.ts

@@ -0,0 +1,6 @@
+export * from './components/button';
+export * from './components/card';
+export * from './components/container';
+export * from './components/table';
+export * from './components/stepper';
+export * from './components/modal';

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './types/index';
+declare const dendelionSafeList: string[];
+export { dendelionSafeList };

package/dist/types/types/color.d.ts

@@ -0,0 +1,25 @@
+export declare enum Color {
+    Primary = 0,
+    PrimaryContent = 1,
+    Secondary = 2,
+    SecondaryContent = 3,
+    Accent = 4,
+    AccentContent = 5,
+    Neutral = 6,
+    NeutralContent = 7,
+    Base100 = 8,
+    Base200 = 9,
+    Base300 = 10,
+    BaseContent = 11,
+    Info = 12,
+    InfoContent = 13,
+    Success = 14,
+    SuccessContent = 15,
+    Warning = 16,
+    WarningContent = 17,
+    Error = 18,
+    ErrorContent = 19
+}
+export declare class ColorUtils {
+    static toClassName(color: Color): string;
+}

package/dist/types/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './size';

package/dist/types/types/size.d.ts

@@ -0,0 +1,12 @@
+export declare enum Size {
+    XS = 0,
+    SM = 1,
+    MD = 2,
+    LG = 3,
+    XL = 4,
+    TWOXL = 5,
+    THREEXL = 6
+}
+export declare class SizeUtils {
+    static toClassName(size: Size): string;
+}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "dendelion-ui",
+  "private": false,
+  "description": "Simpel component library using Tailwind css and DaisyUI",
+  "version": "0.0.1",
+  "author": "ThatzOkay",
+  "license": "MIT",
+  "homepage": "https://github.com/ThatzOkay/DendelionUI#readme",
+  "repository": {
+    "url": "git+https://github.com/ThatzOkay/DendelionUI.git",
+    "type": "git"
+  },
+  "bugs": {
+    "url": "https://github.com/ThatzOkay/DendelionUI/issues"
+  },
+  "keywords": [
+    "Tailwind",
+    "DaisyUI",
+    "Vue",
+    "Component",
+    "Library"
+  ],
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/apldendelion-uiayer.umd.js",
+  "module": "./dist/dendelion-ui.es.js",
+  "typings": "./dist/types/index.d.ts",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/dendelion-ui.es.js",
+      "require": "./dist/dendelion-ui.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "cross-env MODE=demo npm run vite",
+    "vite": "vite",
+    "clean": "rimraf dist",
+    "build": "npm run clean && npm run build:lib && npm run build:tsc",
+    "build:lib": "cross-env MODE=lib vite build",
+    "build:tsc": "vue-tsc --emitDeclarationOnly",
+    "build:demo": "cross-env MODE=demo vite build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "lint": "eslint ",
+    "lint:fix": "eslint --fix ",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "cross-env": "^7.0.3",
+    "daisyui": "^4.12.23",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "fluid-tailwind": "^1.0.4",
+    "rimraf": "^6.0.1",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.19.1",
+    "vite": "^6.0.5",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/src/components/button/Button.vue

@@ -0,0 +1,24 @@
+<template>
+  <button v-on:click="click" :class="classes" :type="type">
+    <span class="loading loading-spinner loading-md absolute hidden group-[.is-loading]:block"></span>
+    <span class="group-[.is-loading]:text-transparent"><slot  /></span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { Color, ColorUtils } from '@/types/color';
+import { ButtonProps } from './interface';
+import classNames from 'classnames';
+import { ref } from 'vue';
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: 'button',
+  color: Color.Neutral
+})
+
+const classes = ref(classNames('btn', 
+  'group',
+  `btn-${ColorUtils.toClassName(props.color)}`,
+  props.loading ? 'is-loading' : '',
+))
+</script>

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.vue';
+export type { ButtonProps, Type } from './interface';

package/src/components/button/interface.ts

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

package/src/components/card/Card.vue

@@ -0,0 +1,25 @@
+<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 } from '@/types';
+
+const props = withDefaults(defineProps<CardProps>(), {
+    backgroundColor: Color.Primary,
+    shadow: false,
+    fullWidth: false,
+});
+
+const classes = ref(classNames('card',
+    `bg-${props.backgroundColor}`,
+    props.shadow ? 'shadow-lg' : '',
+    props.fullWidth ? 'w-full' : '',
+    props.rounded && !props.roundedSize ? 'rounded' : props.roundedSize ? `rounded-${props.roundedSize}` : '',
+));
+</script>

package/src/components/card/CardBody.vue

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

package/src/components/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +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';

package/src/components/card/interface.ts

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

package/src/components/container/Container.vue

@@ -0,0 +1,21 @@
+<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

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

package/src/components/container/interface.ts

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

package/src/components/modal/Modal.vue

@@ -0,0 +1,36 @@
+<template>
+    <dialog ref="modal" class="modal" aria-modal="true" aria-hidden="true" role="dialog" @close="(e) => emit('close', e)" >
+        <div className="modal-box">
+            <form v-if="closeButton" method="dialog">
+                <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+            <slot></slot>
+        </div>
+    </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ModalProps } from './interface';
+
+const modal = ref<HTMLDialogElement | null>(null);
+
+const emit = defineEmits(['close']);
+
+withDefaults(defineProps<ModalProps>(), {
+    closeButton: true,
+})
+
+const showModal = () => {
+    modal.value?.showModal();
+}
+
+const closeModal = () => {
+    modal.value?.close();
+}
+
+defineExpose({
+    showModal,
+    closeModal
+})
+</script>

package/src/components/modal/index.ts

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

package/src/components/modal/interface.ts

@@ -0,0 +1,8 @@
+
+export type ModalProps = {
+    closeButton?: boolean;
+}
+
+export interface Modal {
+    showModal: () => void;
+}

package/src/components/stepper/Step.vue

@@ -0,0 +1,35 @@
+<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

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

package/src/components/stepper/StepPanel.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-if="value === stepperValue">
+    <slot :activateCallback="activateCallback"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Ref } from 'vue';
+import { StepperProps } from './interface';
+
+defineProps<StepperProps>()
+
+const stepperValue = computed(() => stepper?.value.value)
+
+const stepper = inject<{
+  value: Ref<string>
+  updateValue: (value: string) => void
+}>("stepper");
+
+const activateCallback = (index: number) => {
+  if (stepper) {
+    stepper.updateValue(index.toString())
+  }
+}
+
+
+defineExpose({
+  activateCallback
+})
+</script>

package/src/components/stepper/StepPanels.vue

@@ -0,0 +1,17 @@
+<template>
+  <Transition name="fade" mode="out-in">
+    <div v-if="stepper?.value">
+      <slot :currentStep="stepper?.value"></slot>
+    </div>
+  </Transition>
+</template>
+
+
+<script setup lang="ts">
+import { inject, type Ref } from 'vue';
+
+const stepper = inject<{
+  value: Ref<string>;
+  updateValue: (value: string) => void;
+}>('stepper');
+</script>