dendelion-ui 0.0.7 → 0.0.10

package/dist/types/types/buttonSize.d.ts

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

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

@@ -1,2 +1,6 @@
-export * from './color';
-export * from './size';
+export * from './backgroundColor';
+export * from './buttonColor';
+export * from './textColor';
+export * from './buttonSize';
+export * from './roundedSize';
+export * from './tableSize';

package/dist/types/types/roundedSize.d.ts

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

package/dist/types/types/tableSize.d.ts

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

package/dist/types/types/{color.d.ts → textColor.d.ts}

@@ -1,4 +1,4 @@
-export declare enum Color {
+export declare enum TextColor {
     Primary = 0,
     PrimaryContent = 1,
     Secondary = 2,
@@ -20,6 +20,6 @@ export declare enum Color {
     Error = 18,
     ErrorContent = 19
 }
-export declare class ColorUtils {
-    static toClassName(color: Color): string;
+export declare class TextColorUtils {
+    static toClassName(color: TextColor): string;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "dendelion-ui",
   "private": false,
   "description": "Simpel component library using Tailwind css and DaisyUI",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "author": "ThatzOkay",
   "license": "MIT",
   "homepage": "https://github.com/ThatzOkay/DendelionUI#readme",

package/src/components/button/Button.vue

@@ -6,19 +6,19 @@
 </template>
 
 <script setup lang="ts">
-import { Color, ColorUtils } from '@/types/color';
+import { ButtonColor, ButtonColorUtils } from '@/types';
 import { ButtonProps } from './interface';
 import classNames from 'classnames';
 import { computed } from 'vue';
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   type: 'button',
-  color: Color.Neutral
+  color: ButtonColor.Neutral
 })
 
 const classes = computed(() => classNames('btn', 
   'group',
-  `btn-${ColorUtils.toClassName(props.color)}`,
+  ButtonColorUtils.toClassName(props.color),
   props.loading ? 'is-loading' : '',
   props.disabled ? 'disabled' : ''
 ))

package/src/components/button/interface.ts

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

package/src/components/card/Card.vue

@@ -8,18 +8,18 @@
 import classNames from 'classnames';
 import { ref } from 'vue';
 import { CardProps } from './interface';
-import { Color } from '@/types';
+import { BackgroundColor, BackgroundColorUtils, RoundedSizeUtils } from '@/types';
 
 const props = withDefaults(defineProps<CardProps>(), {
-    backgroundColor: Color.Primary,
+    backgroundColor: BackgroundColor.Primary,
     shadow: false,
     fullWidth: false,
 });
 
 const classes = ref(classNames('card',
-    `bg-${props.backgroundColor}`,
+    BackgroundColorUtils.toClassName(props.backgroundColor),
     props.shadow ? 'shadow-lg' : '',
     props.fullWidth ? 'w-full' : '',
-    props.rounded && !props.roundedSize ? 'rounded' : props.roundedSize ? `rounded-${props.roundedSize}` : '',
+    props.rounded && !props.roundedSize ? 'rounded' : props.roundedSize ? RoundedSizeUtils.toClassName(props.roundedSize) : '',
 ));
 </script>

package/src/components/card/interface.ts

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

package/src/components/modal/Modal.vue

@@ -1,11 +1,15 @@
 <template>
-    <dialog ref="modal" :class="classes" aria-modal="true" aria-hidden="true" role="dialog" @close="(e) => emit('close', e)" >
-        <div className="modal-box">
+    <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 className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                <button :class="closeButtonClasses">✕</button>
             </form>
             <slot></slot>
         </div>
+        <form method="dialog" class="modal-backdrop">
+            <button>close</button>
+        </form>
     </dialog>
 </template>
 
@@ -13,6 +17,7 @@
 import { ref } from 'vue';
 import { ModalProps } from './interface';
 import classNames from 'classnames';
+import { ButtonSize, ButtonSizeUtils } from '@/types';
 
 const modal = ref<HTMLDialogElement | null>(null);
 
@@ -20,13 +25,16 @@ const emit = defineEmits(['close']);
 
 const props = withDefaults(defineProps<ModalProps>(), {
     closeButton: true,
-    overflow: false
+    overflow: false,
+    closeButtonSize: ButtonSize.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();
 }

package/src/components/modal/interface.ts

@@ -1,7 +1,9 @@
+import { ButtonSize } from "@/types";
 
 export type ModalProps = {
     closeButton?: boolean;
     overflow?: boolean;
+    closeButtonSize?: ButtonSize;
 }
 
 export interface Modal {

package/src/components/table/Table.vue

@@ -33,7 +33,7 @@
 import { onMounted, ref, watch } from 'vue';
 import { TableProps } from './interface';
 import classNames from 'classnames';
-import { Size, SizeUtils } from '@/types';
+import { TableSize, TableSizeUtils } from '@/types';
 import createFuzzySearch from '@nozbe/microfuzz'
 
 const originalDataSource = ref<T[]>([]);
@@ -42,13 +42,13 @@ const filteredDataSource = ref<T[]>([]);
 const table = ref<HTMLTableElement | null>(null)
 
 const props = withDefaults(defineProps<TableProps<T>>(), {
-    size: Size.MD,
+    size: TableSize.MD,
     zebra: false,
     pinRows: false,
     pinCols: false,
 });
 
-const tableClasses = ref(classNames('table', `table-${SizeUtils.toClassName(props.size)}`, {
+const tableClasses = ref(classNames('table', TableSizeUtils.toClassName(props.size), {
     'table-zebra': props.zebra,
     'table-pin-rows': props.pinRows,
     'table-pin-cols	': props.pinCols,

package/src/components/table/interface.ts

@@ -1,11 +1,11 @@
-import { Size } from "@/types";
+import { TableSize } from "@/types";
 import { Component, VNode } from "vue";
 
 export type TableProps<T> = {
     zebra?: boolean;
     pinRows?: boolean;
     pinCols?: boolean;
-    size?: Size
+    size?: TableSize
     columns: Column<T>[];
     dataSource: T[];
     ajax?: (params: object) => Promise<object> | string;

package/src/shims-vue.d.ts

@@ -5,7 +5,6 @@ declare module '*.vue' {
     const component: DefineComponent<
       Record<string, unknown>,
       Record<string, unknown>,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       any
     >
     export default component

package/src/types/backgroundColor.ts

@@ -0,0 +1,71 @@
+export enum BackgroundColor {
+  Primary,
+  PrimaryContent,
+  Secondary,
+  SecondaryContent,
+  Accent,
+  AccentContent,
+  Neutral,
+  NeutralContent,
+  Base100,
+  Base200,
+  Base300,
+  BaseContent,
+  Info,
+  InfoContent,
+  Success,
+  SuccessContent,
+  Warning,
+  WarningContent,
+  Error,
+  ErrorContent,
+}
+
+export class BackgroundColorUtils {
+  public static toClassName(color: BackgroundColor): string {
+    switch (color) {
+      case BackgroundColor.Primary:
+        return "bg-primary";
+      case BackgroundColor.PrimaryContent:
+        return "bg-primary-content";
+      case BackgroundColor.Secondary:
+        return "bg-secondary";
+      case BackgroundColor.SecondaryContent:
+        return "bg-secondary-content";
+      case BackgroundColor.Accent:
+        return "bg-accent";
+      case BackgroundColor.AccentContent:
+        return "bg-accent-content";
+      case BackgroundColor.Neutral:
+        return "bg-neutral";
+      case BackgroundColor.NeutralContent:
+        return "bg-neutral-content";
+      case BackgroundColor.Base100:
+        return "base-100";
+      case BackgroundColor.Base200:
+        return "bg-base-200";
+      case BackgroundColor.Base300:
+        return "bg-base-300";
+      case BackgroundColor.BaseContent:
+        return "bg-base-content";
+      case BackgroundColor.Info:
+        return "bg-info";
+      case BackgroundColor.InfoContent:
+        return "bg-info-content";
+      case BackgroundColor.Success:
+        return "bg-success";
+      case BackgroundColor.SuccessContent:
+        return "bg-success-content";
+      case BackgroundColor.Warning:
+        return "bg-warning";
+      case BackgroundColor.WarningContent:
+        return "bg-warning-content";
+      case BackgroundColor.Error:
+        return "bg-error";
+      case BackgroundColor.ErrorContent:
+        return "bg-error-content";
+      default:
+        return "bg-base-content";
+    }
+  }
+}

package/src/types/buttonColor.ts

@@ -0,0 +1,73 @@
+export enum ButtonColor {
+    Primary,
+    PrimaryContent,
+    Secondary,
+    SecondaryContent,
+    Accent,
+    AccentContent,
+    Neutral,
+    NeutralContent,
+    Base100,
+    Base200,
+    Base300,
+    BaseContent,
+    Info,
+    InfoContent,
+    Success,
+    SuccessContent,
+    Warning,
+    WarningContent,
+    Error,
+    ErrorContent,
+  }
+  
+  export class ButtonColorUtils {
+    public static toClassName(color: ButtonColor): string {
+      switch (color) {
+        case ButtonColor.Primary:
+          return "btn-primary";
+        case ButtonColor.PrimaryContent:
+          return "btn-primary-content";
+        case ButtonColor.Secondary:
+          return "btn-secondary";
+        case ButtonColor.SecondaryContent:
+          return "btn-secondary-content";
+        case ButtonColor.Accent:
+          return "btn-accent";
+        case ButtonColor.AccentContent:
+          return "btn-accent-content";
+        case ButtonColor.Neutral:
+          return "btn-neutral";
+        case ButtonColor.NeutralContent:
+          return "btn-neutral-content";
+        case ButtonColor.Base100:
+          return "base-100";
+        case ButtonColor.Base200:
+          return "btn-base-200";
+        case ButtonColor.Base300:
+          return "btn-base-300";
+        case ButtonColor.BaseContent:
+          return "btn-base-content";
+        case ButtonColor.Info:
+          return "btn-info";
+        case ButtonColor.InfoContent:
+          return "btn-info-content";
+        case ButtonColor.Success:
+          return "btn-success";
+        case ButtonColor.SuccessContent:
+          return "btn-success-content";
+        case ButtonColor.Warning:
+          return "btn-warning";
+        case ButtonColor.WarningContent:
+          return "btn-warning-content";
+        case ButtonColor.Error:
+          return "btn-error";
+        case ButtonColor.ErrorContent:
+          return "btn-error-content";
+        default:
+          return "btn-base-content";
+      }
+    }
+  }
+  
+  

package/src/types/buttonSize.ts

@@ -0,0 +1,32 @@
+export enum ButtonSize {
+    XS,
+    SM,
+    MD,
+    LG,
+    XL,
+    TWOXL,
+    THREEXL
+}
+
+export class ButtonSizeUtils {
+    public static toClassName(size: ButtonSize): string {
+        switch (size) {
+            case ButtonSize.XS:
+                return 'btn-xs'
+            case ButtonSize.SM:
+                return 'btn-sm'
+            case ButtonSize.MD:
+                return 'btn-md'
+            case ButtonSize.LG:
+                return 'btn-lg'
+            case ButtonSize.XL:
+                return 'btn-xl'
+            case ButtonSize.TWOXL:
+                return 'btn-2xl'
+            case ButtonSize.THREEXL:
+                return 'btn-3xl'
+            default:
+                return 'btn-md'
+        }
+    }
+}

package/src/types/index.ts

@@ -1,2 +1,6 @@
-export * from './color'
-export * from './size'
+export * from './backgroundColor'
+export * from './buttonColor'
+export * from './textColor'
+export * from './buttonSize'
+export * from './roundedSize'
+export * from './tableSize'

package/src/types/roundedSize.ts

@@ -0,0 +1,32 @@
+export enum RoundedSize {
+    XS,
+    SM,
+    MD,
+    LG,
+    XL,
+    TWOXL,
+    THREEXL
+}
+
+export class RoundedSizeUtils {
+    public static toClassName(size: RoundedSize): string {
+        switch (size) {
+            case RoundedSize.XS:
+                return 'rounded-xs'
+            case RoundedSize.SM:
+                return 'rounded-sm'
+            case RoundedSize.MD:
+                return 'rounded-md'
+            case RoundedSize.LG:
+                return 'rounded-lg'
+            case RoundedSize.XL:
+                return 'rounded-xl'
+            case RoundedSize.TWOXL:
+                return 'rounded-2xl'
+            case RoundedSize.THREEXL:
+                return 'rounded-3xl'
+            default:
+                return 'rounded-md'
+        }
+    }
+}

package/src/types/tableSize.ts

@@ -0,0 +1,32 @@
+export enum TableSize {
+    XS,
+    SM,
+    MD,
+    LG,
+    XL,
+    TWOXL,
+    THREEXL
+}
+
+export class TableSizeUtils {
+    public static toClassName(size: TableSize): string {
+        switch (size) {
+            case TableSize.XS:
+                return 'table-xs'
+            case TableSize.SM:
+                return 'table-sm'
+            case TableSize.MD:
+                return 'table-md'
+            case TableSize.LG:
+                return 'table-lg'
+            case TableSize.XL:
+                return 'table-xl'
+            case TableSize.TWOXL:
+                return 'table-2xl'
+            case TableSize.THREEXL:
+                return 'table-3xl'
+            default:
+                return 'table-md'
+        }
+    }
+}

package/src/types/textColor.ts

@@ -0,0 +1,71 @@
+export enum TextColor {
+  Primary,
+  PrimaryContent,
+  Secondary,
+  SecondaryContent,
+  Accent,
+  AccentContent,
+  Neutral,
+  NeutralContent,
+  Base100,
+  Base200,
+  Base300,
+  BaseContent,
+  Info,
+  InfoContent,
+  Success,
+  SuccessContent,
+  Warning,
+  WarningContent,
+  Error,
+  ErrorContent,
+}
+
+export class TextColorUtils {
+  public static toClassName(color: TextColor): string {
+    switch (color) {
+      case TextColor.Primary:
+        return "text-primary";
+      case TextColor.PrimaryContent:
+        return "text-primary-content";
+      case TextColor.Secondary:
+        return "text-secondary";
+      case TextColor.SecondaryContent:
+        return "text-secondary-content";
+      case TextColor.Accent:
+        return "text-accent";
+      case TextColor.AccentContent:
+        return "text-accent-content";
+      case TextColor.Neutral:
+        return "text-neutral";
+      case TextColor.NeutralContent:
+        return "text-neutral-content";
+      case TextColor.Base100:
+        return "base-100";
+      case TextColor.Base200:
+        return "text-base-200";
+      case TextColor.Base300:
+        return "text-base-300";
+      case TextColor.BaseContent:
+        return "text-base-content";
+      case TextColor.Info:
+        return "text-info";
+      case TextColor.InfoContent:
+        return "text-info-content";
+      case TextColor.Success:
+        return "text-success";
+      case TextColor.SuccessContent:
+        return "text-success-content";
+      case TextColor.Warning:
+        return "text-warning";
+      case TextColor.WarningContent:
+        return "text-warning-content";
+      case TextColor.Error:
+        return "text-error";
+      case TextColor.ErrorContent:
+        return "text-error-content";
+      default:
+        return "text-base-content";
+    }
+  }
+}

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

@@ -1,12 +0,0 @@
-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/src/types/color.ts

@@ -1,72 +0,0 @@
-export enum Color {
-    Primary,
-    PrimaryContent,
-    Secondary,
-    SecondaryContent,
-    Accent,
-    AccentContent,
-    Neutral,
-    NeutralContent,
-    Base100,
-    Base200,
-    Base300,
-    BaseContent,
-    Info,
-    InfoContent,
-    Success,
-    SuccessContent,
-    Warning,
-    WarningContent,
-    Error,
-    ErrorContent,
-  }
-  
-  export class ColorUtils {
-    public static toClassName(color: Color): string {
-      switch (color) {
-        case Color.Primary:
-          return 'primary'
-        case Color.PrimaryContent:
-          return 'primary-content'
-        case Color.Secondary:
-          return 'secondary'
-        case Color.SecondaryContent:
-          return 'secondary-content'
-        case Color.Accent:
-          return 'accent'
-        case Color.AccentContent:
-          return 'accent-content'
-        case Color.Neutral:
-          return 'neutral'
-        case Color.NeutralContent:
-          return 'neutral-content'
-        case Color.Base100:
-          return 'base-100'
-        case Color.Base200:
-          return 'base-200'
-        case Color.Base300:
-          return 'base-300'
-        case Color.BaseContent:
-          return 'base-content'
-        case Color.Info:
-          return 'info'
-        case Color.InfoContent:
-          return 'info-content'
-        case Color.Success:
-          return 'success'
-        case Color.SuccessContent:
-          return 'success-content'
-        case Color.Warning:
-          return 'warning'
-        case Color.WarningContent:
-          return 'warning-content'
-        case Color.Error:
-          return 'error'
-        case Color.ErrorContent:
-          return 'error-content'
-        default:
-          return 'primary'
-      }
-    }
-  }
-