tiddy 0.0.2 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiddy",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "type": "module",
   "typings": "./src/index.d.ts",
   "scripts": {
@@ -20,42 +20,41 @@
     "./*": "./src/components/*"
   },
   "dependencies": {
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.5.0",
     "async-validator": "^4.2.5",
     "vue": "^3.5.13",
-    "yatter": "^1.8.0"
+    "yatter": "^2.2.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.50.0",
     "@tsconfig/node22": "^22.0.0",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.10",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vitest/eslint-plugin": "1.1.10",
-    "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vitest/eslint-plugin": "^1.1.25",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "element-plus": "^2.9.0",
-    "eslint": "^9.16.0",
-    "eslint-plugin-oxlint": "^0.11.1",
-    "eslint-plugin-playwright": "^2.1.0",
+    "element-plus": "^2.9.3",
+    "eslint": "^9.19.0",
+    "eslint-plugin-oxlint": "^0.15.8",
+    "eslint-plugin-playwright": "^2.2.0",
     "eslint-plugin-vue": "^9.32.0",
-    "jsdom": "^25.0.1",
-    "npm-run-all2": "^7.0.1",
-    "oxlint": "^0.11.1",
-    "prettier": "^3.4.2",
-    "sass-embedded": "^1.83.0",
-    "typescript": "~5.6.3",
-    "vite": "^6.0.3",
-    "vite-plugin-vue-devtools": "^7.6.8",
-    "vitest": "^2.1.8",
-    "vue-tsc": "^2.1.10"
+    "jsdom": "^26.0.0",
+    "npm-run-all2": "^7.0.2",
+    "oxlint": "^0.15.8",
+    "sass-embedded": "^1.83.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.1",
+    "vitest": "^3.0.4",
+    "vue-tsc": "^2.2.0"
   },
+  "files": ["src/components", "src/index.d.ts"],
   "peerDependencies": {
-    "element-plus": "^2.9.0"
-  },
-  "files": ["src/components", "src/index.d.ts"]
+    "element-plus": "^2.9.3"
+  }
 }

package/src/components/dialog/dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <ElDialog v-bind="props" ref="dialog" v-model="visible" @close="close">
-    <template v-for="(Slot, name) in $slots" :key="name" #[name]="scope">
+    <template v-for="name in slotNames" :key="name" #[name]="scope">
       <slot :name="name" v-bind="scope" :ok="confirm" :close="close" :form="form" />
     </template>
   </ElDialog>
@@ -8,10 +8,10 @@
 
 <script setup lang="ts">
 import { dialogProps, ElDialog, type FormInstance } from 'element-plus';
-import { ref, useTemplateRef } from 'vue';
+import { computed, ref, useSlots, useTemplateRef, type Slots } from 'vue';
 
 defineOptions({
-  name: 'SeDialog',
+  name: 'TdDialog',
 });
 
 const props = defineProps(dialogProps);
@@ -20,6 +20,9 @@ const visible = ref(false);
 
 const waiting: Partial<PromiseWithResolvers<any>> = {};
 const dialogRef = useTemplateRef('dialog');
+const slots: Slots = useSlots();
+
+const slotNames = computed(() => Object.keys(slots));
 
 async function waitPreStep(preStep?: any, data?: any) {
   let res = data;

package/src/components/form/array-field.vue

@@ -33,6 +33,8 @@
           :last="vi === values.length - 1"
           :empty="false"
           :single="values.length === 1"
+          :full-prop="fullProp"
+          :row="v"
         />
       </div>
     </div>
@@ -40,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, readonly, useAttrs } from 'vue';
+import { computed, inject, onMounted, useAttrs } from 'vue';
 import FormItem from './form-item.vue';
 import type { ArrayFieldProps, FormContext } from './interface';
 import { cut, getDeepValue, isFunction, isNullOrUndef, pick, setDeepValue } from 'yatter';
@@ -113,9 +115,9 @@ const lineAction = {
     temp.splice(index + 1, 0, current);
     updateValue(temp);
   },
-  add(index: number) {
+  add(index: number, newValue?: any) {
     const temp = values.value.slice();
-    const rawValue = props.rawValue?.() || {};
+    const rawValue = newValue instanceof Event || isNullOrUndef(newValue) ? props.rawValue?.() || {} : newValue;
     temp.splice(index + 1, 0, rawValue);
     updateValue(temp);
   },

package/src/components/form/form.vue

@@ -18,7 +18,7 @@ import {
   formProps,
 } from 'element-plus';
 import type { FieldProps } from './interface';
-import { computed, provide, useAttrs, useSlots, useTemplateRef } from 'vue';
+import { computed, provide, useSlots, useTemplateRef } from 'vue';
 import { cut } from 'yatter';
 import { getKey, getSlotsFactory } from '../utils';
 import { formCtxKey } from './util';
@@ -30,10 +30,10 @@ export interface FormProps extends Partial<ElFormProps> {
 }
 
 defineOptions({
-  name: 'SeForm',
+  name: 'TdForm',
 });
 
-type SeFormEmit = FormEmits & {
+type TdFormEmit = FormEmits & {
   submit: [data: any];
 };
 
@@ -48,7 +48,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const emit = defineEmits<SeFormEmit>();
+const emit = defineEmits<TdFormEmit>();
 const slots = useSlots();
 
 const subProps = computed(() => cut(props, ['fields']));

package/src/components/form/interface.d.ts

@@ -7,8 +7,6 @@ type IndexPropFunc<P, T> = P extends 'object' ? T : T | ((index: number) => T);
 export interface CommonFieldProps<T = 'object'> extends AllowedComponentProps {
   prop?: OrFunction<string>;
   fullProp?: string;
-  slots?: OneOrMore<string>;
-  rules?: OneOrMore<FormItemRule>;
   hide?: boolean | ComputedRef;
   hideLabel?: IndexProp<T, boolean>;
   label?: IndexProp<T, string>;
@@ -22,8 +20,11 @@ export interface WidgetFieldProps<T = 'object'> extends CommonFieldProps<T> {
   item?: FormItemProps;
   widget?: Record<string, any>;
   on?: Record<string, AnyFunction>;
-  prependSlots?: OneOrMore<string>;
-  appendSlots?: OneOrMore<string>;
+  rules?: OneOrMore<FormItemRule>;
+  slots?: OneOrMore<SlotDef>;
+  prependSlots?: OneOrMore<SlotDef>;
+  appendSlots?: OneOrMore<SlotDef>;
+  itemSlots?: OneOrMore<SlotDef>;
   default?: any;
 }
 
@@ -49,7 +50,7 @@ export interface ObjectFieldProps<P = 'object'> extends CommonFieldProps<P> {
 export interface LayoutFieldProps extends CommonFieldProps {
   type: 'layout';
   fields?: FieldProps[];
-  slots?: SlotDef[];
+  slots?: OneOrMore<SlotDef>;
 }
 
 export type FieldProps = ArrayFieldProps | ObjectFieldProps | LayoutFieldProps | WidgetFieldProps;

package/src/components/form/widget-field.vue

@@ -19,6 +19,10 @@
       :scope="{ value: widgetModel }"
       :ctx-key="formCtxKey"
     ></SlotNest>
+
+    <template v-for="isc in itemSlots" :key="isc.name" #[isc.name]="scope">
+      <SlotNest v-bind="isc" :scope="scope" :ctx-key="formCtxKey"></SlotNest>
+    </template>
   </FormItem>
 </template>
 
@@ -74,6 +78,7 @@ if (!isNullOrUndef(props.default)) {
 const widgetSlots = formCtx.getParentSlots(ensureArray(props.slots));
 const preSlots = formCtx.getParentSlots(ensureArray(props.prependSlots));
 const sufSlots = formCtx.getParentSlots(ensureArray(props.appendSlots));
+const itemSlots = formCtx.getParentSlots(ensureArray(props.itemSlots));
 </script>
 
 <style lang="scss" scoped>

package/src/components/table/table-col.vue

@@ -14,14 +14,14 @@
 
 <script setup lang="ts" name="TableCol">
 import { ElTableColumn } from 'element-plus';
-import type { SeTableColumnProps } from './table.vue';
+import type { TdTableColumnProps } from './table.vue';
 import { getDeepValue, ensureArray } from 'yatter';
 import { inject } from 'vue';
 import { tableCtxKey } from './util';
 import type { TableContext } from './interface';
 import SlotNest from '../slot-nest/slot-nest.vue';
 
-type TableCol = Pick<SeTableColumnProps, 'slots' | 'transform' | 'columns'>;
+type TableCol = Pick<TdTableColumnProps, 'slots' | 'transform' | 'columns'>;
 
 const props = withDefaults(defineProps<TableCol>(), {
   slots: () => [],

package/src/components/table/table.vue

@@ -1,39 +1,46 @@
 <template>
-  <slot name="prepend"></slot>
-  <ElTable ref="tableRef" :data="data" v-bind="$attrs">
+  <slot name="before"></slot>
+  <ElTable ref="tableRef" :data="data" v-bind="subProps">
     <TableCol v-for="col in columns" :key="col.label" v-bind="col" />
+    <template v-for="name in slotNames" :key="name" #[name]="scope">
+      <slot v-bind="scope" :name="name"></slot>
+    </template>
   </ElTable>
-  <slot name="append"></slot>
+  <slot name="after"></slot>
 </template>
 
 <script setup lang="ts">
-import { ElTable, type ElTableColumn, type TableInstance } from 'element-plus';
+import { ElTable, type TableColumnInstance, type TableInstance, type TableProps } from 'element-plus';
 import TableCol from './table-col.vue';
-import { provide, useSlots, useTemplateRef } from 'vue';
+import { computed, provide, useSlots, useTemplateRef, type Slots } from 'vue';
 import { getSlotsFactory } from '../utils';
 import { tableCtxKey } from './util';
+import { cut } from 'yatter';
 
 defineOptions({
-  name: 'SeTable',
+  name: 'TdTable',
 });
 
-type TableColumnProps = InstanceType<typeof ElTableColumn>['$props'];
+type TableColumnProps = TableColumnInstance['$props'];
 
-export interface SeTableColumnProps extends /* @vue-ignore */ TableColumnProps {
+export interface TdTableColumnProps extends /* @vue-ignore */ TableColumnProps {
   slots?: OneOrMore<SlotDef>;
-  columns?: SeTableColumnProps[];
+  columns?: TdTableColumnProps[];
   transform?: AnyFunction[];
 }
 
-export interface SeTableProps<T = unknown> {
-  data: T[];
-  columns: SeTableColumnProps[];
-}
-
-defineProps<SeTableProps>();
+const props = defineProps({
+  ...ElTable.props,
+  columns: {
+    type: Array<TdTableColumnProps>,
+    default: () => [],
+  },
+});
 
-const slots = useSlots();
+const slots: Slots = useSlots();
 const tableRef = useTemplateRef<TableInstance>('tableRef');
+const slotNames = computed<string[]>(() => Object.keys(slots));
+const subProps = computed(() => cut(props, ['columns']));
 
 provide(tableCtxKey, {
   getParentSlots: getSlotsFactory(slots),

package/src/components/utils/index.ts

@@ -1,4 +1,4 @@
-import { type Slots } from 'vue';
+import type { Slots } from 'vue';
 import { isNumber, isObject, isString, uid } from 'yatter';
 
 export function getSlotsFactory(slots: Slots) {

package/src/index.d.ts

@@ -24,5 +24,5 @@ declare global {
 
   type GetSlotsFunction = (names: SlotDef[]) => ComponentSlot[];
 
-  type SlotNestProps = SlotNest & ComponentSlot;
+  // type SlotNestProps = SlotNest & ComponentSlot;
 }