tiddy 0.0.1

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="layout-item" v-bind="comProps">
+    <SlotNest v-if="slot" v-bind="slot" :ctx-key="formCtxKey" />
+    <FormField
+      v-for="field in fields"
+      :key="getKey(field)"
+      v-bind="field"
+      :fullProp="`${fullProp || ''}.${field.prop}`"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useAttrs } from 'vue';
+import { getKey } from '../utils';
+import FormField from './form-field.vue';
+import type { LayoutFieldProps, FormContext } from './interface.d';
+import { formCtxKey } from './util';
+import SlotNest from '../slot-nest/slot-nest.vue';
+import { cut, ensureArray } from 'yatter';
+
+const props = defineProps<LayoutFieldProps>();
+const formCtx = inject<FormContext>(formCtxKey)!;
+const attrs = useAttrs();
+
+const comProps = computed<Record<string, any>>(() => {
+  return Object.assign({}, attrs, cut(props, ['fields']));
+});
+
+const slot = formCtx.getParentSlots(ensureArray(props.slots))[0];
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,30 @@
+<template>
+  <FormItem v-bind="labelProps" name-space="layout-form-item">
+    <FormField v-for="field in subFields" :key="getKey(field)" v-bind="field" />
+  </FormItem>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { getKey } from '../utils';
+import type { FieldProps, ObjectFieldProps } from './interface';
+import FormField from './form-field.vue';
+import FormItem from './form-item.vue';
+import { pick } from 'yatter';
+
+const props = defineProps<ObjectFieldProps>();
+
+const labelProps = computed<any>(() => pick(props, [/^label/]));
+
+const subFields = computed(() => {
+  return props.fields.map(field => {
+    const fullProp = computed(() => [props.fullProp, field.prop].filter(Boolean).join('.'));
+    return {
+      ...field,
+      fullProp: fullProp.value,
+    };
+  });
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/form/util.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue';
+import type { FormContext } from './interface';
+
+export const formCtxKey: InjectionKey<FormContext> = Symbol('formCtxKey');

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

@@ -0,0 +1,88 @@
+<template>
+  <FormItem ref="item" :label="label" :prop="fullProp as any" :rules="rules" v-bind="itemAttrs" class="widget-item">
+    <SlotNest
+      v-for="psc in preSlots"
+      :key="psc.name"
+      v-bind="psc"
+      :scope="{ value: widgetModel }"
+      :ctx-key="formCtxKey"
+    ></SlotNest>
+    <Widget ref="widget" v-bind="widgetAttrs" v-on="on" v-model="widgetModel" class="widget-comp">
+      <template v-for="sc in widgetSlots" :key="sc.name" #[sc.name]="scope">
+        <SlotNest v-bind="sc" :scope="scope" :ctx-key="formCtxKey"></SlotNest>
+      </template>
+    </Widget>
+    <SlotNest
+      v-for="ssc in sufSlots"
+      :key="ssc.name"
+      v-bind="ssc"
+      :scope="{ value: widgetModel }"
+      :ctx-key="formCtxKey"
+    ></SlotNest>
+  </FormItem>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useAttrs, useTemplateRef, type ComputedRef } from 'vue';
+import FormItem from './form-item.vue';
+import type { FormContext, WidgetFieldProps } from './interface';
+import { formCtxKey } from './util';
+import { resolveWidget } from './widget';
+import SlotNest from '../slot-nest/slot-nest.vue';
+import { getDeepValue, pick, setDeepValue, toCamelCase, ensureArray, isNullOrUndef } from 'yatter';
+
+const props = withDefaults(defineProps<WidgetFieldProps>(), {
+  on: () => ({}),
+  slots: () => [],
+  prependSlots: () => [],
+  appendSlots: () => [],
+  default: null,
+});
+
+const attrs = useAttrs();
+const formCtx = inject<FormContext>(formCtxKey)!;
+
+const itemRef = useTemplateRef('item');
+const widgetRef = useTemplateRef('widget');
+
+const widgetAttrs = computed(() => {
+  const attr4Widget = pick(attrs, [{ from: /^widget/, to: k => toCamelCase(k.slice(6)) }]);
+  return { ...attr4Widget, ...props.widget };
+});
+
+const itemAttrs = computed(() => {
+  const attr4Item = pick(attrs, [{ from: /^item/, to: k => toCamelCase(k.slice(4)) }]);
+  const attr = { ...attr4Item, ...props.item, ...pick(props, ['rules', /^label/]) };
+  return attr;
+});
+
+const Widget = resolveWidget(props.component);
+
+const widgetModel = computed({
+  get() {
+    return getDeepValue(formCtx.model, props.fullProp!);
+  },
+  set(v) {
+    setDeepValue(formCtx.model, props.fullProp!, v);
+  },
+});
+
+if (!isNullOrUndef(props.default)) {
+  widgetModel.value = props.default;
+}
+
+const widgetSlots = formCtx.getParentSlots(ensureArray(props.slots));
+const preSlots = formCtx.getParentSlots(ensureArray(props.prependSlots));
+const sufSlots = formCtx.getParentSlots(ensureArray(props.appendSlots));
+</script>
+
+<style lang="scss" scoped>
+.widget-item {
+  :deep(.el-form-item__content) {
+    display: flex;
+    .widget-comp {
+      flex: 1;
+    }
+  }
+}
+</style>

package/src/components/form/widget.ts

@@ -0,0 +1,28 @@
+import { Fragment, type Component } from 'vue';
+import { isString } from 'yatter';
+
+const componens: { [k: string]: Component } = {};
+
+export function registerWidget(comp: Component): void;
+export function registerWidget(name: string, comp: Component): void;
+export function registerWidget(name: string | Component, comp?: Component) {
+  let key = '';
+  let component: OrUndef<Component>;
+  if (isString(name)) {
+    key = name;
+    component = comp!;
+  } else if (comp) {
+    key = comp.name!;
+    component = name;
+  }
+
+  if (!key || !component || componens[key]) {
+    return;
+  }
+
+  componens[key] = component;
+}
+
+export function resolveWidget(name: string | Component) {
+  return isString(name) ? (componens[name] ?? Fragment) : name;
+}

package/src/components/slot-nest/index.ts

@@ -0,0 +1 @@
+export * from './slot-nest.vue';

package/src/components/slot-nest/slot-nest.vue

@@ -0,0 +1,50 @@
+<template>
+  <component v-if="comp" :is="comp" v-bind="comProps">
+    <template v-for="sc in subSlots" :key="sc.name" #[sc.name]="scope">
+      <SlotNest v-bind="sc" :scope="scope" :ctx-key="ctxKey"></SlotNest>
+    </template>
+    <template v-if="text">{{ getText(scope) }}</template>
+  </component>
+  <template v-else-if="text">{{ getText(scope) }}</template>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, type InjectionKey, type Component, type Slot } from 'vue';
+import { ensureArray } from 'yatter';
+import type { FormContext } from '../form/interface.d';
+import type { TableContext } from '../table/interface.d';
+
+defineOptions({
+  name: 'SlotNest',
+});
+
+export interface SlotNestProps {
+  name: string;
+  component?: Component | Slot;
+  props?: (scope?: any) => Record<string, any>;
+  text?: OrFunction<string>;
+  slots?: SlotDef[] | string;
+  isSlot?: boolean;
+
+  ctxKey: InjectionKey<FormContext | TableContext>;
+  scope?: any;
+}
+
+const props = defineProps<SlotNestProps>();
+
+const getProps = computed(() => {
+  return props.props ?? ((p: any) => p || {});
+});
+
+const comProps = computed(() => getProps.value(props.scope));
+
+const parentCtx = inject<FormContext | TableContext>(props.ctxKey)!;
+
+const comp = props.component;
+
+const subSlots = parentCtx.getParentSlots(ensureArray(props.slots));
+
+const getText = typeof props.text === 'string' ? (...args: any) => props.text : props.text!;
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/table/index.ts

@@ -0,0 +1 @@
+export * from './table.vue';

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

@@ -0,0 +1,3 @@
+export interface TableContext {
+  getParentSlots: GetSlotsFunction;
+}

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

@@ -0,0 +1,42 @@
+<template>
+  <ElTableColumn v-bind="$attrs">
+    <template v-if="columns.length">
+      <TableCol v-for="col in columns" :key="col.label" v-bind="col" />
+    </template>
+    <template v-for="sc in columnSlots" :key="sc.name" #[sc.name]="scope">
+      <SlotNest v-bind="sc" :scope="scope" :ctx-key="tableCtxKey"></SlotNest>
+    </template>
+    <template v-if="transform.length" #default="scope">
+      {{ filtered(scope) }}
+    </template>
+  </ElTableColumn>
+</template>
+
+<script setup lang="ts" name="TableCol">
+import { ElTableColumn } from 'element-plus';
+import type { SeTableColumnProps } 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'>;
+
+const props = withDefaults(defineProps<TableCol>(), {
+  slots: () => [],
+  transform: () => [],
+  columns: () => [],
+});
+
+function filtered(scope: any) {
+  const { row, column } = scope;
+  return props.transform.reduce<any>((res, filter) => filter(res), getDeepValue(row, column.property));
+}
+
+const tableCtx = inject<TableContext>(tableCtxKey)!;
+
+const columnSlots = tableCtx.getParentSlots(ensureArray(props.slots));
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/table/table.vue

@@ -0,0 +1,42 @@
+<template>
+  <slot name="prepend"></slot>
+  <ElTable :data="data" v-bind="$attrs">
+    <TableCol v-for="col in columns" :key="col.label" v-bind="col" />
+  </ElTable>
+  <slot name="append"></slot>
+</template>
+
+<script setup lang="ts">
+import { ElTable, type ElTableColumn } from 'element-plus';
+import TableCol from './table-col.vue';
+import { provide, useSlots } from 'vue';
+import { getSlotsFactory } from '../utils';
+import { tableCtxKey } from './util';
+
+defineOptions({
+  name: 'SeTable',
+});
+
+type TableColumnProps = InstanceType<typeof ElTableColumn>['$props'];
+
+export interface SeTableColumnProps extends /* @vue-ignore */ TableColumnProps {
+  slots?: OneOrMore<SlotDef>;
+  columns?: SeTableColumnProps[];
+  transform?: AnyFunction[];
+}
+
+export interface SeTableProps<T = unknown> {
+  data: T[];
+  columns: SeTableColumnProps[];
+}
+
+defineProps<SeTableProps>();
+
+const slots = useSlots();
+
+provide(tableCtxKey, {
+  getParentSlots: getSlotsFactory(slots),
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/table/util.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue';
+import type { TableContext } from './interface';
+
+export const tableCtxKey: InjectionKey<TableContext> = Symbol('tableCtxKey');

package/src/components/utils/index.ts

@@ -0,0 +1,50 @@
+import { type Slots } from 'vue';
+import { isNumber, isObject, isString, uid } from 'yatter';
+
+export function getSlotsFactory(slots: Slots) {
+  return (names: SlotDef[]) =>
+    names.flatMap(name => {
+      if (typeof name === 'string') {
+        const slot = slots[name];
+        if (slot) {
+          return [
+            {
+              name: name.replace(/\w+?_/, ''),
+              component: slot,
+              slot: true,
+            },
+          ];
+        }
+        return [];
+      }
+      return [name];
+    });
+}
+
+export function isStringNumber(input: unknown) {
+  if (!isString(input)) {
+    return false;
+  }
+  return !Number.isNaN(Number(input));
+}
+
+export function addUnit(value?: string | number, defaultUnit = 'px') {
+  if (!value) return '';
+  if (isNumber(value) || isStringNumber(value)) {
+    return `${value}${defaultUnit}`;
+  }
+  if (isString(value)) {
+    return value;
+  }
+}
+
+const keys = new WeakMap<WeakKey, string>();
+export function getKey(obj: any): string {
+  if (!isObject(obj)) {
+    return String(obj);
+  }
+  if (!keys.has(obj)) {
+    keys.set(obj, uid());
+  }
+  return keys.get(obj)!;
+}

package/src/index.d.ts

@@ -0,0 +1,28 @@
+import type { AllowedComponentProps, Component, Raw, Slot } from 'vue';
+
+declare global {
+  type OneOrMore<T> = T | T[];
+  type AnyFunction<T extends unknown[] = unknown[], R = unknown> = (...args: T) => R;
+
+  type OrNull<T> = T | null;
+  type OrUndef<T> = T | undefined;
+  type OrNone<T> = OrNull<T> | OrUndef<T>;
+  type OrFunction<T> = T | ((...args: any[]) => T);
+
+  type PropertyKey = string | number | symbol;
+  type TestFunction = (...args: unknown[]) => boolean;
+
+  interface ComponentSlot {
+    name: string;
+    component?: Component | Slot;
+    props?: (scope?: any) => Record<string, any>;
+    text?: OrFunction<string>;
+    slots?: SlotDef[] | string;
+    isSlot?: boolean;
+  }
+  type SlotDef = ComponentSlot | string;
+
+  type GetSlotsFunction = (names: SlotDef[]) => ComponentSlot[];
+
+  type SlotNestProps = SlotNest & ComponentSlot;
+}