@ebiz/designer-components 0.1.1 → 0.1.4

package/src/components/TdesignForm.vue

@@ -1,139 +1,139 @@
-<template>
-    <t-form 
-        ref="formRef"
-        :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, ref, defineExpose } 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);
-};
-const formRef = ref();
-defineExpose({
-    formRef
-})
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-form 
+        ref="formRef"
+        :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, ref, defineExpose } 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);
+};
+const formRef = ref();
+defineExpose({
+    formRef
+})
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignFormItem.vue

@@ -1,106 +1,106 @@
-<template>
-    <t-form-item
-        :for="htmlFor"
-        :help="help"
-        :label="label"
-        :label-align="labelAlign"
-        :label-width="labelWidth"
-        :name="name"
-        :required-mark="requiredMark"
-        :rules="rules"
-        :show-error-message="showErrorMessage"
-        :status="status"
-        :success-border="successBorder"
-        :status-icon="statusIcon"
-    >
-        <template v-if="$slots.label" #label>
-            <slot name="label"></slot>
-        </template>
-        
-        <template v-if="$slots.help" #help>
-            <slot name="help"></slot>
-        </template>
-        
-        <slot></slot>
-    </t-form-item>
-</template>
-
-<script>
-export default {
-    name: "EbizTdesignFormItem"
-}
-</script>
-
-<script setup>
-import { defineProps } from 'vue';
-import { FormItem as TFormItem } from 'tdesign-vue-next';
-
-defineProps({
-    // label原生属性
-    htmlFor: {
-        type: String,
-        default: ''
-    },
-    // 表单项说明内容
-    help: {
-        type: String,
-        default: ''
-    },
-    // 字段标签名称
-    label: {
-        type: String,
-        default: ''
-    },
-    // 表单字段标签对齐方式
-    labelAlign: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['left', 'right', 'top'].includes(val)
-    },
-    // 标签宽度
-    labelWidth: {
-        type: [String, Number],
-        default: undefined
-    },
-    // 表单字段名称
-    name: {
-        type: String,
-        default: ''
-    },
-    // 是否显示必填符号
-    requiredMark: {
-        type: Boolean,
-        default: false
-    },
-    // 表单字段校验规则
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    // 校验不通过时，是否显示错误提示信息
-    showErrorMessage: {
-        type: Boolean,
-        default: undefined
-    },
-    // 校验状态
-    status: {
-        type: String,
-        default: '',
-        validator: (val) => ['', 'success', 'warning', 'error', 'validating'].includes(val)
-    },
-    // 是否显示校验成功的边框
-    successBorder: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示校验状态图标
-    statusIcon: {
-        type: [Boolean, Function],
-        default: undefined
-    }
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-form-item
+        :for="htmlFor"
+        :help="help"
+        :label="label"
+        :label-align="labelAlign"
+        :label-width="labelWidth"
+        :name="name"
+        :required-mark="requiredMark"
+        :rules="rules"
+        :show-error-message="showErrorMessage"
+        :status="status"
+        :success-border="successBorder"
+        :status-icon="statusIcon"
+    >
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <template v-if="$slots.help" #help>
+            <slot name="help"></slot>
+        </template>
+        
+        <slot></slot>
+    </t-form-item>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignFormItem"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { FormItem as TFormItem } from 'tdesign-vue-next';
+
+defineProps({
+    // label原生属性
+    htmlFor: {
+        type: String,
+        default: ''
+    },
+    // 表单项说明内容
+    help: {
+        type: String,
+        default: ''
+    },
+    // 字段标签名称
+    label: {
+        type: String,
+        default: ''
+    },
+    // 表单字段标签对齐方式
+    labelAlign: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    // 标签宽度
+    labelWidth: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 表单字段名称
+    name: {
+        type: String,
+        default: ''
+    },
+    // 是否显示必填符号
+    requiredMark: {
+        type: Boolean,
+        default: false
+    },
+    // 表单字段校验规则
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    // 校验不通过时，是否显示错误提示信息
+    showErrorMessage: {
+        type: Boolean,
+        default: undefined
+    },
+    // 校验状态
+    status: {
+        type: String,
+        default: '',
+        validator: (val) => ['', 'success', 'warning', 'error', 'validating'].includes(val)
+    },
+    // 是否显示校验成功的边框
+    successBorder: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示校验状态图标
+    statusIcon: {
+        type: [Boolean, Function],
+        default: undefined
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/TdesignGrid.vue

@@ -1,56 +1,56 @@
-<template>
-    <t-row
-        :align="align"
-        :justify="justify"
-        :gutter="gutter"
-        :tag="tag"
-        :gap="gap"
-    >
-        <slot></slot>
-    </t-row>
-</template>
-
-<script>
-export default {
-    name: "EbizGrid"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Row as TRow } from 'tdesign-vue-next';
-
-defineProps({
-    // 垂直对齐方式
-    align: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['start', 'end', 'center', 'stretch', 'baseline'].includes(val)
-    },
-    // 水平排列方式
-    justify: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['start', 'end', 'center', 'space-around', 'space-between'].includes(val)
-    },
-    // 栅格间隔，示例：16、[16, 16]
-    gutter: {
-        type: [Number, Array, Object],
-        default: 0
-    },
-    // 自定义元素标签
-    tag: {
-        type: String,
-        default: 'div'
-    },
-    // 间隔，示例：'0'、'xs' 或 { xs: '4px', sm: '6px', md: '12px' }
-    gap: {
-        type: [String, Number, Object, Array],
-        default: undefined
-    }
-});
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-row
+        :align="align"
+        :justify="justify"
+        :gutter="gutter"
+        :tag="tag"
+        :gap="gap"
+    >
+        <slot></slot>
+    </t-row>
+</template>
+
+<script>
+export default {
+    name: "EbizGrid"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Row as TRow } from 'tdesign-vue-next';
+
+defineProps({
+    // 垂直对齐方式
+    align: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['start', 'end', 'center', 'stretch', 'baseline'].includes(val)
+    },
+    // 水平排列方式
+    justify: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['start', 'end', 'center', 'space-around', 'space-between'].includes(val)
+    },
+    // 栅格间隔，示例：16、[16, 16]
+    gutter: {
+        type: [Number, Array, Object],
+        default: 0
+    },
+    // 自定义元素标签
+    tag: {
+        type: String,
+        default: 'div'
+    },
+    // 间隔，示例：'0'、'xs' 或 { xs: '4px', sm: '6px', md: '12px' }
+    gap: {
+        type: [String, Number, Object, Array],
+        default: undefined
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>