dendelion-ui 0.0.11 → 0.0.13

package/src/components/stepper/StepPanel.vue

@@ -1,30 +1,29 @@
-<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>
+<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

@@ -1,17 +1,16 @@
-<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>
+<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>

package/src/components/stepper/Stepper.vue

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

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

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

package/src/components/table/Table.vue

@@ -1,104 +1,135 @@
-<template>
-    <table ref="table" :class="tableClasses">
-        <thead>
-            <tr>
-                <th v-for="column in props.columns" v-bind:key="column.title">
-                    {{ column.title }}
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-if="filteredDataSource.length === 0">
-                <td :colspan="props.columns.length">
-                    No data found
-                </td>
-            </tr>
-            <tr v-else v-for="row in filteredDataSource" v-bind:key="String(row)">
-                <td v-for="column in props.columns" v-bind:key="column.title">
-                    <template v-if="!column.render">
-                        {{ getValue(row, column.data) }}
-                    </template>
-                    <template v-if="typeof column.render === 'function'">
-                        <div v-if="typeof column.render(getValue(row, column.data), row as T) === 'string'"
-                            v-html="column.render(getValue(row, column.data), row as T)" />
-                        <component v-else :is="column.render(getValue(row, column.data), row as T)" />
-                    </template>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</template>
-
-<script setup lang="ts" generic="T">
-import { onMounted, ref, watch } from 'vue';
-import { TableProps } from './interface';
-import classNames from 'classnames';
-import { Size, TableSizeUtils } from '@/types';
-import createFuzzySearch from '@nozbe/microfuzz'
-
-const originalDataSource = ref<T[]>([]);
-const filteredDataSource = ref<T[]>([]);
-
-const table = ref<HTMLTableElement | null>(null)
-
-const props = withDefaults(defineProps<TableProps<T>>(), {
-    size: Size.MD,
-    zebra: false,
-    pinRows: false,
-    pinCols: false,
-});
-
-const tableClasses = ref(classNames('table', TableSizeUtils.toClassName(props.size), {
-    'table-zebra': props.zebra,
-    'table-pin-rows': props.pinRows,
-    'table-pin-cols	': props.pinCols,
-}));
-
-//I'll figure pagination later
-const getValue = (obj: any, keyPath: string): string => {
-    if (!obj || typeof obj !== 'object') return String(obj);
-    return String(
-        keyPath.split('.').reduce<unknown>((acc, key) => acc && (typeof acc === 'object' ? (acc as Record<string, any>)[key] : acc), obj)
-    );
-};
-
-onMounted(() => {
-    originalDataSource.value = props.dataSource;
-    filteredDataSource.value = props.dataSource;
-});
-
-watch(() => props.dataSource, (value) => {
-    originalDataSource.value = value;
-    filteredDataSource.value = value;
-}, { immediate: true });
-
-watch(() => props.searchValue, (value) => {
-    if (props.searchFunction) {
-        filteredDataSource.value = props.searchFunction(value ?? "");
-        return;
-    }
-    filteredDataSource.value = value ? doFuzzySearch(value) : originalDataSource.value;
-}, { immediate: true });
-
-const doFuzzySearch = (value: string): T[] => {
-    const foundRows: T[] = [];
-    if (originalDataSource.value.length > 0) {
-        const dataKeys = Object.keys(originalDataSource.value[0] as object);
-
-        dataKeys.forEach((key) => {
-            const list = originalDataSource.value.map((row) => getValue(row, key));
-            const fuzzySearch = createFuzzySearch(list);
-            const found = fuzzySearch(value);
-            for (const item of found) {
-                const matchingItems = originalDataSource.value.filter((i) => getValue(i, key) === item.item);
-                foundRows.push(...matchingItems as T[]);
-            }
-        });
-
-        return foundRows;
-    }
-
-    return [];
-}
-
-</script>
+<template>
+	<table ref="table" :class="tableClasses">
+		<thead>
+			<tr>
+				<th v-for="column in props.columns" v-bind:key="column.title">
+					{{ column.title }}
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-if="filteredDataSource.length === 0">
+				<td :colspan="props.columns.length">No data found</td>
+			</tr>
+			<tr v-else v-for="row in filteredDataSource" v-bind:key="String(row)">
+				<td v-for="column in props.columns" v-bind:key="column.title">
+					<template v-if="!column.render">
+						{{ getValue(row, column.data) }}
+					</template>
+					<template v-if="typeof column.render === 'function'">
+						<div
+							v-if="typeof column.render(getValue(row, column.data), row as T) === 'string'"
+							v-html="column.render(getValue(row, column.data), row as T)"
+						/>
+						<component
+							v-else
+							:is="getComponent((column.render(getValue(row, column.data), row as T) as ColumnComponent).component)"
+							v-bind="getProps(row, column)"
+						/>
+					</template>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script setup lang="ts" generic="T">
+import { Component, defineAsyncComponent, onMounted, ref, watch } from 'vue';
+import { Column, ColumnComponent, ComponentImport, ComponentOrImport, TableProps } from './interface';
+import classNames from 'classnames';
+import { Size, TableSizeUtils } from '@/types';
+import createFuzzySearch from '@nozbe/microfuzz';
+
+const originalDataSource = ref<T[]>([]);
+const filteredDataSource = ref<T[]>([]);
+
+const table = ref<HTMLTableElement | null>(null);
+
+const props = withDefaults(defineProps<TableProps<T>>(), {
+	size: Size.MD,
+	zebra: false,
+	pinRows: false,
+	pinCols: false,
+});
+
+const tableClasses = ref(
+	classNames('table', TableSizeUtils.toClassName(props.size), {
+		'table-zebra': props.zebra,
+		'table-pin-rows': props.pinRows,
+		'table-pin-cols	': props.pinCols,
+	}),
+);
+
+//I'll figure pagination later
+const getValue = (obj: any, keyPath: string): string => {
+	if (!obj || typeof obj !== 'object') return String(obj);
+	return String(
+		keyPath
+			.split('.')
+			.reduce<unknown>((acc, key) => acc && (typeof acc === 'object' ? (acc as Record<string, any>)[key] : acc), obj),
+	);
+};
+
+const getProps = (row: any, column: Column<T>) => {
+	if (column.render === undefined) return {};
+	const columnComponent = column.render(getValue(row, column.data), row as T) as ColumnComponent;
+	return columnComponent.props;
+};
+
+const getComponent = (component: ComponentOrImport) => {
+	if (component && typeof component === 'object' && 'then' in component) {
+		return defineAsyncComponent(() => component as ComponentImport);
+	}
+	if (typeof component === 'function') {
+		return defineAsyncComponent(component as () => ComponentImport);
+	}
+	return component as Component;
+};
+
+onMounted(() => {
+	originalDataSource.value = props.dataSource;
+	filteredDataSource.value = props.dataSource;
+});
+
+watch(
+	() => props.dataSource,
+	(value) => {
+		originalDataSource.value = value;
+		filteredDataSource.value = value;
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => props.searchValue,
+	(value) => {
+		if (props.searchFunction) {
+			filteredDataSource.value = props.searchFunction(value ?? '');
+			return;
+		}
+		filteredDataSource.value = value ? doFuzzySearch(value) : originalDataSource.value;
+	},
+	{ immediate: true },
+);
+
+const doFuzzySearch = (value: string): T[] => {
+	const foundRows: T[] = [];
+	if (originalDataSource.value.length > 0) {
+		const dataKeys = Object.keys(originalDataSource.value[0] as object);
+
+		dataKeys.forEach((key) => {
+			const list = originalDataSource.value.map((row) => getValue(row, key));
+			const fuzzySearch = createFuzzySearch(list);
+			const found = fuzzySearch(value);
+			for (const item of found) {
+				const matchingItems = originalDataSource.value.filter((i) => getValue(i, key) === item.item);
+				foundRows.push(...(matchingItems as T[]));
+			}
+		});
+
+		return foundRows;
+	}
+
+	return [];
+};
+</script>

package/src/components/table/index.ts

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

package/src/components/table/interface.ts

@@ -1,31 +1,39 @@
-import { Size } from "@/types";
-import { Component, VNode } from "vue";
-
-export type TableProps<T> = {
-    zebra?: boolean;
-    pinRows?: boolean;
-    pinCols?: boolean;
-    size?: Size
-    columns: Column<T>[];
-    dataSource: T[];
-    ajax?: (params: object) => Promise<object> | string;
-    searchValue?: string;
-    searchFunction?: (searchValue: string) => T[];
-}
-
-export type Column<T> = {
-    title: string;
-    data: string;
-    render?: (text: string, row: T) => string | Component | VNode;
-    extraClasses?: ExtraClasses;
-}
-
-export type ExtraClasses = {
-    header?: string[];
-    cell?: CellClasses;
-}
-
-export type CellClasses = {
-    index: number;
-    classes: string[];
-}
+import { Size } from '@/types';
+import { Component } from 'vue';
+
+export type TableProps<T> = {
+	zebra?: boolean;
+	pinRows?: boolean;
+	pinCols?: boolean;
+	size?: Size;
+	columns: Column<T>[];
+	dataSource: T[];
+	ajax?: (params: object) => Promise<object> | string;
+	searchValue?: string;
+	searchFunction?: (searchValue: string) => T[];
+};
+
+export type Column<T> = {
+	title: string;
+	data: string;
+	render?: (text: string, row: T) => string | ColumnComponent;
+	extraClasses?: ExtraClasses;
+};
+
+export type ExtraClasses = {
+	header?: string[];
+	cell?: CellClasses;
+};
+
+export type CellClasses = {
+	index: number;
+	classes: string[];
+};
+
+export type ComponentImport = Promise<{ default: Component }>;
+export type ComponentOrImport = Component | ComponentImport | (() => ComponentImport);
+
+export type ColumnComponent = {
+	component: ComponentOrImport;
+	props: any;
+};

package/src/components.ts

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