dendelion-ui 0.0.1

package/src/components/stepper/Stepper.vue

@@ -0,0 +1,33 @@
+<template>
+  <slot :updateValue="updateValue"></slot>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
+import { StepperProps } from './interface';
+
+
+const props = defineProps<StepperProps>()
+
+const stepperStep = ref(props.value);
+
+const emit = defineEmits(['update:value'])
+
+const updateValue = (value: string) => {
+  stepperStep.value = value;
+  emit('update:value', value)
+}
+
+provide('stepper', {
+  value: stepperStep,
+  updateValue
+});
+
+watch(() => props.value, (value) => {
+  stepperStep.value = value;
+})
+
+defineExpose({
+  updateValue
+})
+</script>

package/src/components/stepper/index.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/src/components/stepper/interface.ts

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

package/src/components/table/Table.vue

@@ -0,0 +1,27 @@
+<template>
+    <table ref="table" :class="tableClasses">
+        
+    </table>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TableProps } from './interface';
+import classNames from 'classnames';
+import { Size, SizeUtils } from '@/types';
+
+const table = ref<HTMLTableElement | null>(null)
+
+const props = withDefaults(defineProps<TableProps>(), {
+    size: Size.MD,
+    zebra: false,
+    pinRows: false,
+    pinCols: false,
+});
+
+const tableClasses = ref(classNames('table', `table-${SizeUtils.toClassName(props.size)}`, {
+    'table-zebra': props.zebra,
+    'table-pin-rows': props.pinRows,
+    'table-pin-cols	': props.pinCols,
+}));
+</script>

package/src/components/table/index.ts

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

package/src/components/table/interface.ts

@@ -0,0 +1,28 @@
+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/src/components.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/src/index.ts

@@ -0,0 +1,91 @@
+export * from './components'
+
+export * from './types/index'
+
+const dendelionSafeList = [
+    'bg-primary',
+    'bg-primary-content',
+    'bg-secondary',
+    'bg-secondary-content',
+    'bg-accent',
+    'bg-accent-content',
+    'bg-neutral',
+    'bg-neutral-content',
+    'bg-base-100',
+    'bg-base-200',
+    'bg-base-300',
+    'bg-base-content',
+    'bg-info',
+    'bg-info-content',
+    'bg-success',
+    'bg-success-content',
+    'bg-warning',
+    'bg-warning-content',
+    'bg-error',
+    'bg-error-content',
+    'btn-primary',
+    'btn-primary-content',
+    'btn-secondary',
+    'btn-secondary-content',
+    'btn-accent',
+    'btn-accent-content',
+    'btn-neutral',
+    'btn-neutral-content',
+    'btn-base-100',
+    'btn-base-200',
+    'btn-base-300',
+    'btn-base-content',
+    'btn-info',
+    'btn-info-content',
+    'btn-success',
+    'btn-success-content',
+    'btn-warning',
+    'btn-warning-content',
+    'btn-error',
+    'btn-error-content',
+    'text-primary',
+    'text-primary-content',
+    'text-secondary',
+    'text-secondary-content',
+    'text-accent',
+    'text-accent-content',
+    'text-neutral',
+    'text-neutral-content',
+    'text-base-100',
+    'text-base-200',
+    'text-base-300',
+    'text-base-content',
+    'text-info',
+    'text-info-content',
+    'text-success',
+    'text-success-content',
+    'text-warning',
+    'text-warning-content',
+    'text-error',
+    'text-error-content',
+    'text-transparent',
+    'step',
+    'steps',
+    'modal',
+    'modal-box',
+    'btn',
+    'btn-sm',
+    'btn-circle',
+    'btn-ghost',
+    'absolute',
+    'right-2',
+    'top-2',
+    'shadow-lg',
+    'w-full',
+    'rounded-xs',
+    'rounded-sm',
+    'rounded-md',
+    'rounded-lg',
+    'rounded-xl',
+    'rounded-2xl',
+    'rounded-3xl',
+    'hidden',
+    'block',
+  ];
+
+export { dendelionSafeList };

package/src/shims-vue.d.ts

@@ -0,0 +1,12 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+    import type { DefineComponent } from '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/color.ts

@@ -0,0 +1,72 @@
+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'
+      }
+    }
+  }
+  

package/src/types/index.ts

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

package/src/types/size.ts

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