tiddy 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# tiddy
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+pnpm test:unit
+```
+
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
+
+```sh
+# Install browsers for the first run
+npx playwright install
+
+# When testing on CI, must build the project first
+pnpm build
+
+# Runs the end-to-end tests
+pnpm test:e2e
+# Runs the tests only on Chromium
+pnpm test:e2e --project=chromium
+# Runs the tests of a specific file
+pnpm test:e2e tests/example.spec.ts
+# Runs the tests in debug mode
+pnpm test:e2e --debug
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "tiddy",
+  "version": "0.0.1",
+  "type": "module",
+  "typings": "./src/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "playwright test",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix",
+    "lint": "run-s lint:*",
+    "format": "biome format --write src/"
+  },
+  "exports": {
+    "./*": "./src/components/*"
+  },
+  "dependencies": {
+    "@vueuse/core": "^12.0.0",
+    "async-validator": "^4.2.5",
+    "vue": "^3.5.13",
+    "yatter": "^1.8.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.49.1",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.10.2",
+    "@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",
+    "@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",
+    "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"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.9.0"
+  },
+  "files": ["src/components", "src/index.d.ts"]
+}

package/src/components/dialog/dialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <ElDialog v-bind="props" ref="dialog" v-model="visible" @close="close">
+    <template v-for="(Slot, name) in $slots" :key="name" #[name]="scope">
+      <slot :name="name" v-bind="scope" :ok="confirm" :close="close" :form="form" />
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { dialogProps, ElDialog, type FormInstance } from 'element-plus';
+import { ref, useTemplateRef } from 'vue';
+
+defineOptions({
+  name: 'SeDialog',
+});
+
+const props = defineProps(dialogProps);
+
+const visible = ref(false);
+
+const waiting: Partial<PromiseWithResolvers<any>> = {};
+const dialogRef = useTemplateRef('dialog');
+
+async function waitPreStep(preStep?: any, data?: any) {
+  let res = data;
+  if (typeof preStep === 'function') {
+    res = await preStep(data);
+  }
+  return res;
+}
+
+function open<T = any>(): Promise<T> {
+  visible.value = true;
+  Object.assign(waiting, Promise.withResolvers());
+  return waiting.promise!;
+}
+
+function close() {
+  visible.value = false;
+  waiting.reject?.();
+}
+
+async function confirm(preStep?: any, data?: any) {
+  const res = await waitPreStep(preStep, data);
+  visible.value = false;
+  waiting.resolve?.(res);
+}
+
+async function form(instance?: FormInstance, preStep?: any) {
+  await instance?.validate?.();
+  await confirm(preStep, instance?.model);
+}
+
+defineExpose(
+  new Proxy(
+    {
+      open,
+      close,
+    },
+    {
+      get(target, key) {
+        // @ts-expect-error 外部传值
+        return target[key] || dialogRef.value?.[key];
+      },
+      has(target, key) {
+        return Object.hasOwn(target, key) || Reflect.has(dialogRef.value!, key);
+      },
+    },
+  ),
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/dialog/index.ts

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

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

@@ -0,0 +1,157 @@
+<template>
+  <FormItem v-bind="labelProps" class="array-item" name-space="layout-form-item">
+    <component
+      v-if="EmptySlot && !values.length"
+      :is="EmptySlot.component"
+      :add="lineAction.add.bind(null, -1)"
+      :empty="true"
+    />
+    <!-- TODO: 添加原始字符串的key支持 -->
+    <div v-for="(v, vi) in values" :key="getKey(v)" class="list-row" :style="lineStyle">
+      <div class="row-item">
+        <FormField
+          name-space="layout-form-item"
+          v-bind="fieldProps"
+          :label="indexProp(label, vi)"
+          :label-width="indexProp(labelWidth, vi)"
+          :label-position="indexProp(labelPosition, vi)"
+          :type="undefined"
+          :full-prop="`${fullProp}[${vi}]`"
+          :prop="String(vi)"
+        />
+      </div>
+      <div class="row-action">
+        <component
+          v-if="RowSlot"
+          :is="RowSlot.component"
+          :up="lineAction.up.bind(null, vi)"
+          :down="lineAction.down.bind(null, vi)"
+          :add="lineAction.add.bind(null, vi)"
+          :remove="lineAction.remove.bind(null, vi)"
+          :index="vi"
+          :first="!vi"
+          :last="vi === values.length - 1"
+          :empty="false"
+          :single="values.length === 1"
+        />
+      </div>
+    </div>
+  </FormItem>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, readonly, useAttrs } from 'vue';
+import FormItem from './form-item.vue';
+import type { ArrayFieldProps, FormContext } from './interface';
+import { cut, getDeepValue, isFunction, isNullOrUndef, pick, setDeepValue } from 'yatter';
+import { formCtxKey } from './util';
+import { getKey } from '../utils';
+import FormField from './form-field.vue';
+
+type Writeable<T> = {
+  -readonly [K in keyof T]: T[K];
+};
+
+const props = defineProps<ArrayFieldProps>();
+const attrs = useAttrs();
+
+const fieldProps = computed(() => {
+  return {
+    ...cut(props, [k => k.endsWith('Action') || ['lineStyle'].includes(k)]),
+    ...attrs,
+  };
+});
+
+function indexProp(v: OrFunction<any>, index: number, value?: any) {
+  if (isFunction(v)) {
+    return v(index);
+  }
+  if (isNullOrUndef(value)) {
+    return v;
+  }
+  return value;
+}
+
+const formCtx = inject<FormContext>(formCtxKey)!;
+
+const values = computed(() => {
+  return getDeepValue<unknown[]>(formCtx.model, props.fullProp!, {
+    fallback: [],
+  });
+});
+
+const labelProps = computed<any>(() => {
+  const p = pick(props, [/^label/]) as Writeable<typeof props>;
+  if (isFunction(p.hideLabel)) {
+    p.label = '';
+    p.labelWidth = '0';
+  }
+  p.label = indexProp(p.label, -1, '');
+  p.labelWidth = indexProp(p.labelWidth, -1, '0');
+  p.labelPosition = indexProp(p.labelPosition, -1);
+  return p;
+});
+const EmptySlot = formCtx.getParentSlots([props.emptyAction || 'empty_action'])[0];
+const RowSlot = formCtx.getParentSlots([props.rowAction || 'row_action'])[0];
+
+const lineAction = {
+  up(index: number) {
+    if (!index) {
+      return;
+    }
+    const temp = values.value.slice();
+    const [current] = temp.splice(index, 1);
+    temp.splice(index - 1, 0, current);
+    updateValue(temp);
+  },
+  down(index: number) {
+    const temp = values.value.slice();
+    if (index >= temp.length) {
+      return;
+    }
+    const [current] = temp.splice(index, 1);
+    temp.splice(index + 1, 0, current);
+    updateValue(temp);
+  },
+  add(index: number) {
+    const temp = values.value.slice();
+    const rawValue = props.rawValue?.() || {};
+    temp.splice(index + 1, 0, rawValue);
+    updateValue(temp);
+  },
+  remove(index: number) {
+    const temp = values.value.slice();
+    temp.splice(index, 1);
+    updateValue(temp);
+  },
+};
+
+function updateValue(newValue: any) {
+  setDeepValue(formCtx.model, props.fullProp!, newValue);
+}
+
+onMounted(() => {
+  if (props.mandatory && !values.value?.length) {
+    lineAction.add(-1);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.list-row {
+  display: flex;
+
+  .row-item {
+    flex: 1;
+    :deep(> .el-layout-form-item > .el-layout-form-item__content) {
+      flex: 1;
+    }
+  }
+  .row-action {
+  }
+}
+
+.array-item > :deep(.el-layout-form-item__content) {
+  flex: 1;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+  <Fragment v-if="isHiddenField"></Fragment>
+  <LayoutField v-else-if="isLayoutField" v-bind="fieldAttrs" />
+  <ArrayField v-else-if="isArrayField" v-bind="fieldAttrs" />
+  <ObjectField v-else-if="isObjectField" v-bind="fieldAttrs" />
+  <WidgetField v-else-if="isWidgetField" v-bind="fieldAttrs" />
+</template>
+
+<script setup lang="ts">
+import { computed, Fragment, useAttrs } from 'vue';
+import WidgetField from './widget-field.vue';
+import ObjectField from './object-field.vue';
+import ArrayField from './array-field.vue';
+import LayoutField from './layout-field.vue';
+import { isNullOrUndef } from 'yatter';
+
+const attrs = useAttrs();
+const fieldAttrs = computed<any>(() => {
+  return {
+    ...attrs,
+    fullProp: attrs.fullProp || attrs.prop,
+  };
+});
+
+const isHiddenField = computed(() => !!attrs.hide);
+
+const isLayoutField = computed(() => attrs.type === 'layout');
+
+const isArrayField = computed(() => attrs.type === 'array');
+
+const isObjectField = computed(() => {
+  if (attrs.type === 'object') {
+    return true;
+  }
+  if (!isNullOrUndef(attrs.type)) {
+    return false;
+  }
+  return !!attrs.fields;
+});
+
+const isWidgetField = computed(() => {
+  if (attrs.type === 'widget') {
+    return true;
+  }
+  if (!isNullOrUndef(attrs.type)) {
+    return false;
+  }
+  return !!attrs.component;
+});
+</script>
+
+<style lang="scss" scoped>
+.el-layout-form-item {
+  display: flex;
+  --font-size: 14px;
+
+  :deep(.el-layout-form-item__label) {
+    align-items: flex-start;
+    box-sizing: border-box;
+    color: var(--el-text-color-regular);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--el-form-label-font-size);
+    height: 32px;
+    justify-content: flex-end;
+    line-height: 32px;
+    padding: 0 12px 0 0;
+  }
+}
+
+.el-layout-form-item--label-left {
+  :deep(.el-layout-form-item__label) {
+    justify-content: flex-start;
+  }
+}
+
+.el-layout-form-item--label-top {
+  display: block;
+
+  :deep(.el-layout-form-item__label) {
+    display: inline-block;
+    height: auto;
+    line-height: 22px;
+    margin-bottom: 8px;
+    text-align: left;
+    vertical-align: middle;
+  }
+}
+</style>