@scorpioz/suna-components 0.0.2

package/drawer-form/src/DrawerForm.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import SDrawer from "../../drawer/src/Drawer.vue";
+import SForm from "../../form/src/Form.vue";
+import SunaButton from "../../button/src/Button.vue";
+import SunaDebounceButton from "../../debounce-button/src/DebounceButton.vue";
+import { drawerFormProps } from "./props";
+
+defineOptions({ name: "SunaDrawerForm" });
+
+// ---- v-model：visible（抽屉显隐） + 数据（表单默认值 / 确认后同步） ----
+const visible = defineModel<boolean>("visible", { default: false });
+const formData = defineModel<Record<string, any>>({ default: () => ({}) });
+
+// ---- 其余 props ----
+const props = defineProps(drawerFormProps);
+const emit = defineEmits<{
+  /** 提交且校验通过时触发 */
+  confirm: [data: Record<string, any>];
+  cancel: [];
+  open: [];
+  opened: [];
+  close: [];
+  closed: [];
+}>();
+
+// ---- 内部表单数据（支持「取消即撤销」） ----
+const internalData = ref<Record<string, any>>({});
+
+watch(visible, (opening) => {
+  if (opening) {
+    if (props.cloneOnOpen) {
+      // 深层克隆：cancel 不会污染外部数据
+      internalData.value = JSON.parse(JSON.stringify(formData.value));
+    } else {
+      internalData.value = formData.value;
+    }
+    emit("open");
+  } else {
+    emit("close");
+  }
+});
+
+function onOpened() {
+  emit("opened");
+}
+function onClosed() {
+  emit("closed");
+}
+
+// ---- 表单 ref ----
+const formRef = ref<InstanceType<typeof SForm> | null>(null);
+
+function onReset() {
+  formRef.value?.resetFields();
+}
+
+function onCancel() {
+  visible.value = false;
+  emit("cancel");
+}
+
+async function onSubmit() {
+  try {
+    await formRef.value?.validate();
+    // 确认时同步数据到父组件
+    if (props.cloneOnOpen) {
+      formData.value = JSON.parse(JSON.stringify(internalData.value));
+    }
+    visible.value = false;
+    emit("confirm", formData.value);
+    emit("closed");
+  } catch {
+    /* 校验未通过，el-form 会显示错误，无需额外处理 */
+  }
+}
+
+defineExpose({
+  formRef,
+  validate: () => formRef.value?.validate(),
+  resetFields: () => formRef.value?.resetFields(),
+  open: () => { visible.value = true; },
+  close: () => { visible.value = false; },
+});
+</script>
+
+<template>
+  <SDrawer
+    :model-value="visible"
+    :title="title"
+    :direction="direction"
+    :size="size"
+    :with-footer="false"
+    v-bind="drawerConfig"
+    @update:model-value="visible = $event"
+    @opened="onOpened"
+    @closed="onClosed"
+  >
+    <SForm
+      ref="formRef"
+      v-model="internalData"
+      :form-items="formItems"
+      :label-width="labelWidth"
+      :label-position="labelPosition"
+      :gutter="gutter"
+      :default-span="defaultSpan"
+      :show-type="showType"
+      :with-actions="false"
+      v-bind="formConfig"
+    >
+      <template v-for="(_, name) in $slots" #[name]="scope">
+        <slot :name="name" v-bind="scope" />
+      </template>
+    </SForm>
+
+    <!-- 内置底部操作栏（位于 Drawer footer 区域） -->
+    <template #footer>
+      <slot name="footer">
+        <div
+          v-if="withActions"
+          class="suna-drawer-form__actions"
+          :class="`is-${actionAlign}`"
+        >
+          <SunaButton
+            v-if="showReset"
+            :type="resetButtonType"
+            @click="onReset"
+          >{{ resetText }}</SunaButton>
+          <SunaButton
+            v-if="showCancel"
+            :type="cancelButtonType"
+            @click="onCancel"
+          >{{ cancelText }}</SunaButton>
+          <SunaDebounceButton
+            v-if="showSubmit"
+            :type="submitButtonType"
+            :loading="submitLoading"
+            :wait="submitWait"
+            :leading="submitLeading"
+            @click="onSubmit"
+          >{{ submitText }}</SunaDebounceButton>
+        </div>
+      </slot>
+    </template>
+  </SDrawer>
+</template>
+
+<style scoped>
+.suna-drawer-form__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+.suna-drawer-form__actions.is-left {
+  justify-content: flex-start;
+}
+.suna-drawer-form__actions.is-center {
+  justify-content: center;
+}
+.suna-drawer-form__actions.is-right {
+  justify-content: flex-end;
+}
+</style>

package/drawer-form/src/props.ts

@@ -0,0 +1,74 @@
+import type { PropType } from "vue";
+import type { ButtonType } from "../../button/src/types";
+import type { DrawerDirection, DrawerSize } from "../../drawer/src/types";
+import type { FormItem } from "../../form/src/types";
+
+/**
+ * DrawerForm 的运行时 props：汇集 SunaDrawer 和 SunaForm 最常用的属性，
+ * 其余高级配置通过 drawerConfig / formConfig 传入。
+ */
+export const drawerFormProps = {
+  // ---- 抽屉控制 ----
+  /** 抽屉标题 */
+  title: { type: String, default: "" },
+  /** 滑出方向 */
+  direction: { type: String as PropType<DrawerDirection>, default: "rtl" },
+  /** 抽屉尺寸 */
+  size: { type: [String, Number] as PropType<DrawerSize>, default: "30%" },
+  /** 其余 ElDrawer 属性透传（before-close / z-index / append-to 等） */
+  drawerConfig: { type: Object, default: () => ({}) },
+
+  // ---- 表单控制 ----
+  /** 字段配置数组 */
+  formItems: {
+    type: Array as PropType<FormItem[]>,
+    required: true as const,
+  },
+  /** 标签宽度 */
+  labelWidth: { type: [String, Number], default: "100px" },
+  /** 标签对齐方式 */
+  labelPosition: {
+    type: String as PropType<"left" | "right" | "top">,
+    default: "right",
+  },
+  /** 栅格间隔（px） */
+  gutter: { type: Number, default: 12 },
+  /** 未指定 span 时的默认栅格占比 */
+  defaultSpan: { type: Number, default: 12 },
+  /** 渲染模式：normal（可编辑）/ text（只读） */
+  showType: {
+    type: String as PropType<"normal" | "text">,
+    default: "normal",
+  },
+  /** 其余 ElForm 属性透传（inline / disabled 等） */
+  formConfig: { type: Object, default: () => ({}) },
+
+  // ---- 底部操作栏 ----
+  /** 是否显示操作栏 */
+  withActions: { type: Boolean, default: true },
+  /** 按钮对齐方式 */
+  actionAlign: {
+    type: String as PropType<"left" | "center" | "right">,
+    default: "right",
+  },
+  showSubmit: { type: Boolean, default: true },
+  showReset: { type: Boolean, default: true },
+  showCancel: { type: Boolean, default: true },
+  submitText: { type: String, default: "提交" },
+  resetText: { type: String, default: "重置" },
+  cancelText: { type: String, default: "取消" },
+  submitButtonType: { type: String as PropType<ButtonType>, default: "primary" },
+  resetButtonType: { type: String as PropType<ButtonType>, default: "default" },
+  cancelButtonType: { type: String as PropType<ButtonType>, default: "default" },
+  submitLoading: { type: Boolean, default: false },
+  submitWait: { type: Number, default: 300 },
+  submitLeading: { type: Boolean, default: true },
+
+  // ---- DrawerForm 特有 ----
+  /**
+   * 每次打开抽屉时是否深层克隆 v-model 数据。
+   * true（默认）→ 编辑在内部副本上进行，「取消」不会污染外部数据；
+   * false → 直接绑定外部数据，编辑实时同步。
+   */
+  cloneOnOpen: { type: Boolean, default: true },
+};

package/form/index.ts

@@ -0,0 +1,3 @@
+export { default as Form } from "./src/Form.vue";
+export { default } from "./src/Form.vue";
+export type * from "./src/types";

package/form/src/Form.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref, computed, provide } from "vue";
+import type { FormInstance } from "element-plus";
+import { ElForm, ElRow, ElCol, ElFormItem } from "element-plus";
+import SunaButton from "../../button/src/Button.vue";
+import SunaDebounceButton from "../../debounce-button/src/DebounceButton.vue";
+import { formProps } from "./props";
+import { useFormItems } from "./useFormItems";
+import { getPath, setPath } from "./path";
+
+defineOptions({ name: "SunaForm" });
+
+// ---- v-model：整个表单数据对象（omit from formProps 以避免冲突） ----
+const model = defineModel<Record<string, any>>({ default: () => ({}) });
+
+// ---- 其余 props ----
+const props = defineProps(formProps);
+const emit = defineEmits(["update:modelValue", "submit", "reset", "cancel"]);
+
+// ---- 注入详情模式到后代字段组件 ----
+provide("suna:showType", computed(() => props.showType));
+
+// ---- 字段映射 / 校验 / 版式 ----
+const { getType, getRules, getSpan } = useFormItems(props.defaultSpan);
+
+// ---- el-form 暴露 ----
+const elFormRef = ref<FormInstance | null>(null);
+defineExpose({
+  validate: () => elFormRef.value?.validate(),
+  resetFields: () => elFormRef.value?.resetFields(),
+  clearValidate: () => elFormRef.value?.clearValidate(),
+  scrollToField: (prop: string) => elFormRef.value?.scrollToField(prop),
+  elForm: elFormRef,
+});
+
+// ---- 值读写辅助（支持嵌套 prop 路径） ----
+function getVal(prop: string | undefined): any {
+  return prop ? getPath(model.value, prop) : undefined;
+}
+function onFieldUpdate(item: any, val: any) {
+  if (item.prop) setPath(model.value, item.prop, val);
+}
+
+// ---- 操作栏事件 ----
+async function onSubmit() {
+  try {
+    await elFormRef.value?.validate();
+    emit("submit");
+  } catch {
+    /* 校验失败由 EP 显示错误 */
+  }
+}
+function onReset() {
+  elFormRef.value?.resetFields();
+  emit("reset");
+}
+function onCancel() {
+  emit("cancel");
+}
+</script>
+
+<template>
+  <el-form
+    ref="elFormRef"
+    class="suna-form"
+    :model="model"
+    :label-width="labelWidth"
+    :label-position="labelPosition"
+    :size="size"
+    v-bind="$attrs"
+  >
+    <el-row :gutter="gutter">
+      <template v-for="(item, i) in formItems" :key="(item as any).prop || (item as any).slot || i">
+        <el-col
+          v-if="(item as any).showItem !== false"
+          :span="getSpan(item)"
+          :offset="(item as any).offset || 0"
+        >
+          <!-- 纯插槽项：由调用方通过具名 slot 完全掌控渲染 -->
+          <slot
+            v-if="(item as any).slot"
+            :name="(item as any).slot"
+            :form="model"
+            :item="item"
+          />
+          <!-- 字段项 -->
+          <el-form-item
+            v-else
+            :prop="(item as any).prop"
+            :label="(item as any).label"
+            :label-width="(item as any).labelWidth"
+            :rules="getRules(item)"
+          >
+            <template #label>
+              <span>{{ (item as any).label }}</span>
+              <span
+                v-if="(item as any).tooltip"
+                class="suna-form__tooltip-icon"
+                :title="(item as any).tooltip"
+              >ⓘ</span>
+            </template>
+            <component
+              :is="getType((item as any).type)"
+              :model-value="getVal((item as any).prop)"
+              :item="item"
+              :form="model"
+              @update:model-value="(v: any) => onFieldUpdate(item, v)"
+            />
+          </el-form-item>
+        </el-col>
+      </template>
+    </el-row>
+
+    <!-- 内置操作栏（按钮对齐、显隐、文字、防抖等语义同 Drawer footer） -->
+    <div
+      v-if="withActions"
+      class="suna-form__actions"
+      :class="`is-${actionAlign}`"
+    >
+      <SunaButton
+        v-if="showReset"
+        :type="resetButtonType"
+        @click="onReset"
+      >{{ resetText }}</SunaButton>
+      <SunaButton
+        v-if="showCancel"
+        :type="cancelButtonType"
+        @click="onCancel"
+      >{{ cancelText }}</SunaButton>
+      <SunaDebounceButton
+        v-if="showSubmit"
+        :type="submitButtonType"
+        :loading="submitLoading"
+        :wait="submitWait"
+        :leading="submitLeading"
+        @click="onSubmit"
+      >{{ submitText }}</SunaDebounceButton>
+    </div>
+  </el-form>
+</template>
+
+<style scoped>
+/* 操作栏：flex 布局，对齐方式由 .is-* 控制 */
+.suna-form__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--el-border-color-light, #e5e7eb);
+}
+
+.suna-form__actions.is-left {
+  justify-content: flex-start;
+}
+
+.suna-form__actions.is-center {
+  justify-content: center;
+}
+
+.suna-form__actions.is-right {
+  justify-content: flex-end;
+}
+</style>
+
+<!-- 子组件（F*.vue）共用的文本 / 工具提示类 -->
+<style>
+.suna-form__text {
+  font-size: 14px;
+  color: var(--el-text-color-regular, #303133);
+  word-break: break-all;
+  line-height: 1.6;
+}
+
+.suna-form__tooltip-icon {
+  cursor: help;
+  font-size: 14px;
+  color: var(--el-text-color-secondary, #909399);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+</style>

package/form/src/form-items/FCascader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ElCascader } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElCascader
+    v-if="!showText"
+    :model-value="valueTmp"
+    :options="item.options"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+  />
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FCheckboxGroup.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ElCheckboxGroup, ElCheckbox } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElCheckboxGroup
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+  >
+    <ElCheckbox
+      v-for="opt in (item.options || [])"
+      :key="opt[item.optionProps?.value || 'value']"
+      :value="opt[item.optionProps?.value || 'value']"
+      :disabled="opt.disabled"
+    >
+      {{ opt[item.optionProps?.label || 'label'] }}
+    </ElCheckbox>
+  </ElCheckboxGroup>
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FDatePicker.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ElDatePicker } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElDatePicker
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+  />
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ElInput } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange, blur, focus } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElInput
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+    @blur="blur"
+    @focus="focus"
+  />
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FInputNumber.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ElInputNumber } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange, blur, focus } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElInputNumber
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+    @blur="blur"
+    @focus="focus"
+  />
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FRadioGroup.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ElRadioGroup, ElRadio } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElRadioGroup
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+  >
+    <ElRadio
+      v-for="opt in (item.options || [])"
+      :key="opt[item.optionProps?.value || 'value']"
+      :label="opt[item.optionProps?.value || 'value']"
+      :disabled="opt.disabled"
+    >
+      {{ opt[item.optionProps?.label || 'label'] }}
+    </ElRadio>
+  </ElRadioGroup>
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FRate.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ElRate } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElRate
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+  />
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FSelect.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ElSelect, ElOption } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange, blur, focus } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElSelect
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+    @blur="blur"
+    @focus="focus"
+  >
+    <ElOption
+      v-for="(opt, i) in (item.options || [])"
+      :key="opt[item.optionProps?.value || 'value'] ?? i"
+      :label="opt[item.optionProps?.label || 'label']"
+      :value="opt[item.optionProps?.value || 'value']"
+      :disabled="opt.disabled"
+    />
+  </ElSelect>
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>

package/form/src/form-items/FSwitch.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ElSwitch } from "element-plus";
+import { useFormField } from "../useFormField";
+
+const props = defineProps({
+  modelValue: { default: undefined },
+  item: { type: Object, default: () => ({}) },
+  form: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const { valueTmp, showText, formatTextVal, handleChange } =
+  useFormField(props, emit);
+</script>
+
+<template>
+  <ElSwitch
+    v-if="!showText"
+    :model-value="valueTmp"
+    v-bind="item.attrs"
+    @update:model-value="handleChange"
+  />
+  <span v-else class="suna-form__text">{{ formatTextVal }}</span>
+</template>