@ebiz/designer-components 0.0.18 → 0.0.19-beta.2

package/src/components/TdesignCollapse.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="tdesign-collapse-wrapper">
+    <t-collapse
+      v-model="innerValue"
+      :default-value="defaultValue"
+      :borderless="borderless"
+      :default-expand-all="defaultExpandAll"
+      :disabled="disabled"
+      :expand-icon="expandIcon"
+      :expand-icon-placement="expandIconPlacement"
+      :expand-mutex="expandMutex"
+      :expand-on-row-click="expandOnRowClick"
+      @change="handleChange"
+    >
+      <slot></slot>
+    </t-collapse>
+  </div>
+</template>
+
+<script>
+import { Collapse as TCollapse } from 'tdesign-vue-next';
+import { defineComponent, toRefs, computed, watch } from 'vue';
+
+export default defineComponent({
+  name: 'TdesignCollapse',
+  components: {
+    't-collapse': TCollapse,
+  },
+  props: {
+    /**
+     * 是否为无边框模式
+     */
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 默认是否展开全部
+     */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否禁用面板展开/收起操作
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
+     */
+    expandIcon: {
+      type: [Boolean, Function],
+      default: true,
+    },
+    /**
+     * 展开图标的位置，左侧或右侧
+     */
+    expandIconPlacement: {
+      type: String,
+      default: 'left',
+      validator(val) {
+        return ['left', 'right'].includes(val);
+      },
+    },
+    /**
+     * 每个面板互斥展开，每次只展开一个面板
+     */
+    expandMutex: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否允许点击整行标题展开面板
+     */
+    expandOnRowClick: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 展开的面板集合
+     */
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 展开的面板集合，用于v-model双向绑定
+     */
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 展开的面板集合，非受控属性
+     */
+    defaultValue: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['change', 'update:value', 'update:modelValue'],
+  setup(props, { emit }) {
+    const { value, modelValue } = toRefs(props);
+
+    // 处理v-model和传统value的计算属性
+    const innerValue = computed({
+      get() {
+        // 优先使用v-model绑定的值
+        return modelValue.value.length > 0 ? modelValue.value : value.value;
+      },
+      set(val) {
+        emit('update:value', val);
+        emit('update:modelValue', val);
+      },
+    });
+
+    // 监听外部值变化，同步到内部状态
+    watch([value, modelValue], () => {
+      // 这里不需要额外处理，因为计算属性会自动更新
+    });
+
+    // 切换面板时触发，返回变化的值
+    const handleChange = (val) => {
+      innerValue.value = val;
+      emit('change', val);
+    };
+
+    return {
+      innerValue,
+      handleChange,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.tdesign-collapse-wrapper {
+  width: 100%;
+}
+</style> 

package/src/components/TdesignCollapsePanel.vue

@@ -0,0 +1,80 @@
+<template>
+  <t-collapse-panel
+    :value="value"
+    :header="header"
+    :content="content"
+    :disabled="disabled"
+    :destroy-on-collapse="destroyOnCollapse"
+    :expand-icon="expandIcon"
+  >
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+    <template v-if="$slots.rightContent" #right-content>
+      <slot name="rightContent"></slot>
+    </template>
+  </t-collapse-panel>
+</template>
+
+<script>
+import { CollapsePanel as TCollapsePanel } from 'tdesign-vue-next';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'TdesignCollapsePanel',
+  components: {
+    't-collapse-panel': TCollapsePanel,
+  },
+  props: {
+    /**
+     * 面板唯一标识
+     */
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    /**
+     * 面板头内容
+     */
+    header: {
+      type: [String, Function],
+      default: '',
+    },
+    /**
+     * 面板内容
+     */
+    content: {
+      type: [String, Function],
+      default: '',
+    },
+    /**
+     * 是否禁用面板展开/收起操作
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 折叠时是否销毁面板内容
+     */
+    destroyOnCollapse: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标
+     */
+    expandIcon: {
+      type: [Boolean, Function],
+      default: undefined,
+    },
+  },
+});
+</script>
+
+<style scoped>
+/* 可根据需要添加自定义样式，使panel更美观 */
+</style> 

package/src/components/TdesignDatePicker.vue

@@ -0,0 +1,125 @@
+<template>
+    <t-date-picker
+        :allowInput="allowInput"
+        :clearable="clearable"
+        :disabled="disabled"
+        :enableTimePicker="enableTimePicker"
+        :format="format"
+        :mode="mode"
+        :placeholder="placeholder"
+        :presetsPlacement="presetsPlacement"
+        :presets="presets"
+        :size="size"
+        :status="status"
+        :valueType="valueType"
+        :value="modelValue"
+        @change="handleChange"
+    >
+        <template v-if="$slots.prefixIcon" #prefixIcon>
+            <slot name="prefixIcon"></slot>
+        </template>
+        
+        <template v-if="$slots.suffixIcon" #suffixIcon>
+            <slot name="suffixIcon"></slot>
+        </template>
+        
+        <template v-if="$slots.panel" #panel>
+            <slot name="panel"></slot>
+        </template>
+    </t-date-picker>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignDatePicker"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { DatePicker as TDatePicker } from 'tdesign-vue-next';
+
+defineProps({
+    // 是否允许直接输入日期
+    allowInput: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示清除按钮
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否启用时间选择
+    enableTimePicker: {
+        type: Boolean,
+        default: false
+    },
+    // 日期格式
+    format: {
+        type: String,
+        default: 'YYYY-MM-DD'
+    },
+    // 选择器模式
+    mode: {
+        type: String,
+        default: 'date',
+        validator: (val) => ['date', 'month', 'year', 'week', 'quarter'].includes(val)
+    },
+    // 输入框占位符
+    placeholder: {
+        type: String,
+        default: '请选择日期'
+    },
+    // 预设快捷日期显示位置
+    presetsPlacement: {
+        type: String,
+        default: 'bottom',
+        validator: (val) => ['left', 'top', 'right', 'bottom'].includes(val)
+    },
+    // 预设快捷日期选择
+    presets: {
+        type: Object,
+        default: () => ({})
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 输入框状态
+    status: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 用于格式化日期的值
+    valueType: {
+        type: String,
+        default: '',
+        validator: (val) => ['', 'time-stamp', 'Date', 'YYYY', 'YYYY-MM', 'YYYY-MM-DD'].includes(val)
+    },
+    // 日期选择器的值
+    modelValue: {
+        type: [String, Number, Date, Array],
+        default: ''
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const handleChange = (value, context) => {
+    emit('change', value, context);
+    emit('update:modelValue', value);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignDialog.vue

@@ -0,0 +1,226 @@
+<template>
+    <t-dialog v-model:visible="isVisible" :attach="attach" :body="body" :cancel-btn="cancelBtn" :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown" :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn" :default-visible="defaultVisible" :destroy-on-close="destroyOnClose"
+        :draggable="draggable" :footer="footer" :header="header" :mode="mode" :placement="placement"
+        :show-overlay="showOverlay" :width="width" :z-index="zIndex" @cancel="handleCancel" @close="handleClose"
+        @close-btn-click="handleCloseBtnClick" @confirm="handleConfirm" @esc-keydown="handleEscKeydown"
+        @overlay-click="handleOverlayClick" @opened="handleOpened" @closed="handleClosed"
+        @update:visible="handleUpdateVisible">
+        <!-- 头部插槽 -->
+        <template v-if="$slots.header" #header>
+            <slot name="header"></slot>
+        </template>
+
+        <!-- 内容插槽 -->
+        <template v-if="$slots.body" #body>
+            <slot name="body"></slot>
+        </template>
+
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+
+        <!-- 取消按钮插槽 -->
+        <template v-if="$slots.cancelBtn" #cancel-btn>
+            <slot name="cancelBtn"></slot>
+        </template>
+
+        <!-- 确认按钮插槽 -->
+        <template v-if="$slots.confirmBtn" #confirm-btn>
+            <slot name="confirmBtn"></slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容
+    body: {
+        type: [String, Function],
+        default: ''
+    },
+    // 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    cancelBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 关闭按钮，值为 true 显示默认关闭按钮；值为 false 则不显示关闭按钮；值类型为 string 则直接显示值；值类型为 TNode，则显示自定义按钮
+    closeBtn: {
+        type: [Boolean, String, Function],
+        default: true
+    },
+    // 按下 ESC 时是否触发对话框关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: undefined
+    },
+    // 点击蒙层时是否触发关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: undefined
+    },
+    // 确认按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+    confirmBtn: {
+        type: [String, Object, null],
+        default: ''
+    },
+    // 对话框默认是否显示
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否在关闭弹框的时候销毁子元素
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框是否可以拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部操作栏，默认会有"确认"和"取消"两个按钮
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [String, Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置，类似 CSS 中的 position
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 控制对话框显示与隐藏
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: undefined
+    }
+});
+
+// 显示状态
+const isVisible = ref(props.visible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    isVisible.value = newValue;
+});
+
+// 定义事件
+const emit = defineEmits([
+    'cancel',
+    'close',
+    'close-btn-click',
+    'confirm',
+    'esc-keydown',
+    'overlay-click',
+    'opened',
+    'closed',
+    'update:visible'
+]);
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', { e });
+    emit('close', { trigger: 'cancel', e });
+    emit('update:visible', false);
+};
+
+// 关闭事件
+const handleClose = (context) => {
+    emit('close', context);
+    emit('update:visible', false);
+};
+
+// 关闭按钮点击事件
+const handleCloseBtnClick = (e) => {
+    emit('close-btn-click', { e });
+    emit('close', { trigger: 'close-btn', e });
+    emit('update:visible', false);
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', { e });
+    emit('update:visible', false);
+};
+
+// ESC 按键按下事件
+const handleEscKeydown = (e) => {
+    emit('esc-keydown', { e });
+    emit('close', { trigger: 'esc', e });
+    emit('update:visible', false);
+};
+
+// 遮罩层点击事件
+const handleOverlayClick = (e) => {
+    emit('overlay-click', { e });
+    emit('close', { trigger: 'overlay', e });
+    emit('update:visible', false);
+};
+
+// 对话框打开完成事件
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 对话框关闭完成事件
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 更新可见状态
+const handleUpdateVisible = (visible) => {
+    isVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/components/TdesignForm.vue

@@ -0,0 +1,134 @@
+<template>
+    <t-form 
+        :class="customClass"
+        :data="data"
+        :colon="colon"
+        :disabled="disabled"
+        :form-controlled="formControlled"
+        :label-align="labelAlign"
+        :label-width="labelWidth"
+        :layout="layout"
+        :prevent-submit-default="preventSubmitDefault"
+        :reset-type="resetType"
+        :required-mark="requiredMark"
+        :rules="rules"
+        :show-error-message="showErrorMessage"
+        :status-icon="statusIcon"
+        :submit-with-warning-message="submitWithWarningMessage"
+        @reset="handleReset"
+        @submit="handleSubmit"
+        @validate="handleValidate"
+    >
+        <slot></slot>
+    </t-form>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignForm"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Form as TForm } from 'tdesign-vue-next';
+
+defineProps({
+    // 自定义类名
+    customClass: {
+        type: String,
+        default: ''
+    },
+    // 数据对象
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否在表单标签后面添加冒号
+    colon: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用所有表单项
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 表单控件是否为受控模式
+    formControlled: {
+        type: Boolean,
+        default: false
+    },
+    // 标签对齐方式
+    labelAlign: {
+        type: String,
+        default: 'right',
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    // 标签宽度
+    labelWidth: {
+        type: [String, Number],
+        default: '100px'
+    },
+    // 表单布局
+    layout: {
+        type: String,
+        default: 'vertical',
+        validator: (val) => ['vertical', 'inline'].includes(val)
+    },
+    // 是否阻止表单提交默认行为
+    preventSubmitDefault: {
+        type: Boolean,
+        default: true
+    },
+    // 重置表单的方式
+    resetType: {
+        type: String,
+        default: 'empty',
+        validator: (val) => ['empty', 'initial'].includes(val)
+    },
+    // 是否显示必填标记
+    requiredMark: {
+        type: Boolean,
+        default: true
+    },
+    // 表单字段验证规则
+    rules: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示校验错误信息
+    showErrorMessage: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示校验状态图标
+    statusIcon: {
+        type: [Boolean, Function],
+        default: false
+    },
+    // 是否在提交表单且校验不通过时，显示错误信息
+    submitWithWarningMessage: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['reset', 'submit', 'validate']);
+
+const handleReset = (e) => {
+    emit('reset', e);
+};
+
+const handleSubmit = (e) => {
+    emit('submit', e);
+};
+
+const handleValidate = (params) => {
+    emit('validate', params);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>