@ebiz/designer-components 0.0.18-tj.1

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/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> 

package/src/components/TdesignFormItem.vue

@@ -0,0 +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>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignIcon.vue

@@ -0,0 +1,68 @@
+<template>
+  <t-icon
+    :name="name"
+    :size="size"
+    :url="url"
+    :style="customStyle"
+    @click="handleClick"
+  />
+</template>
+
+<script>
+export default {
+  name: "EbizTdesignIcon"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 图标名称
+  name: {
+    type: String,
+    required: true
+  },
+  // 图标尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
+  },
+  // 图标颜色
+  color: {
+    type: String,
+    default: ''
+  },
+  // 图标地址
+  url: {
+    type: [String, Array],
+    default: undefined
+  },
+  // 是否加载组件库内置图标
+  loadDefaultIcons: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['click']);
+
+// 处理点击事件
+const handleClick = (e) => {
+  emit('click', { e });
+};
+
+// 计算样式
+const customStyle = computed(() => {
+  if (props.color) {
+    return { color: props.color };
+  }
+  return {};
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignImage.vue

@@ -0,0 +1,163 @@
+<template>
+    <t-image 
+        :alt="alt"
+        :error="error"
+        :fit="fit"
+        :gallery="gallery"
+        :lazy="lazy"
+        :loading="loading"
+        :overlay-content="overlayContent"
+        :overlay-trigger="overlayTrigger"
+        :placeholder="placeholder"
+        :position="position"
+        :referrer-policy="referrerPolicy"
+        :shape="shape"
+        :src="src"
+        :style="customStyle"
+        @error="handleError"
+        @load="handleLoad"
+        @click="handleClick"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 加载中占位内容插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 加载失败占位内容插槽 -->
+        <template v-if="$slots.error" #error>
+            <slot name="error"></slot>
+        </template>
+        
+        <!-- 自定义悬浮内容插槽 -->
+        <template v-if="$slots.overlayContent" #overlay-content>
+            <slot name="overlayContent"></slot>
+        </template>
+        
+        <!-- 自定义占位符插槽 -->
+        <template v-if="$slots.placeholder" #placeholder>
+            <slot name="placeholder"></slot>
+        </template>
+    </t-image>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Image as TImage } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 图片描述
+    alt: {
+        type: String,
+        default: ''
+    },
+    // 图片加载失败时显示的内容，默认为空
+    error: {
+        type: [String, Function],
+        default: ''
+    },
+    // 图片填充模式
+    fit: {
+        type: String,
+        default: 'fill',
+        validator: (val) => ['contain', 'cover', 'fill', 'none', 'scale-down'].includes(val)
+    },
+    // 是否展示为图集模式
+    gallery: {
+        type: Boolean,
+        default: false
+    },
+    // 是否开启图片懒加载
+    lazy: {
+        type: Boolean,
+        default: false
+    },
+    // 图片加载中时显示的内容，默认为空
+    loading: {
+        type: [String, Function],
+        default: ''
+    },
+    // 自定义图片的宽度
+    width: {
+        type: [String, Number],
+        default: ''
+    },
+    // 自定义图片的高度
+    height: {
+        type: [String, Number],
+        default: ''
+    },
+    // 悬浮显示的内容
+    overlayContent: {
+        type: [String, Function],
+        default: ''
+    },
+    // 悬浮内容出现的时机
+    overlayTrigger: {
+        type: String,
+        default: 'hover',
+        validator: (val) => ['hover', 'always'].includes(val)
+    },
+    // 占位符
+    placeholder: {
+        type: [String, Function],
+        default: ''
+    },
+    // 等同于原生的 object-position
+    position: {
+        type: String,
+        default: 'center'
+    },
+    // 等同于原生的 referrerPolicy
+    referrerPolicy: {
+        type: String,
+        default: ''
+    },
+    // 图片圆角类型
+    shape: {
+        type: String,
+        default: 'square',
+        validator: (val) => ['circle', 'round', 'square'].includes(val)
+    },
+    // 图片链接
+    src: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['error', 'load', 'click']);
+
+// 处理加载失败事件
+const handleError = (context) => {
+    emit('error', context);
+};
+
+// 处理加载成功事件
+const handleLoad = (context) => {
+    emit('load', context);
+};
+
+// 处理点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+
+// 计算样式
+const customStyle = computed(() => {
+    const style = {};
+    if (props.width) {
+        style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
+    }
+    if (props.height) {
+        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+    }
+    return style;
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>