hs-admin-ui 1.0.0

package/src/components/config/checkboxAttrConfig/config.ts

@@ -0,0 +1,301 @@
+export const checkboxAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'checkboxAttrs',
+		tooltip: 'checkboxAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: '选中状态的值',
+				tooltip: '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）',
+				type: 'string / number / boolean / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'true-label',
+				label: '选中时的值',
+				tooltip: '选中时的值',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'false-label',
+				label: '没有选中时的值',
+				tooltip: '没有选中时的值',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'border',
+				label: '是否显示边框',
+				tooltip: '是否显示边框',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'size',
+				label: '尺寸',
+				tooltip: 'Checkbox 的尺寸',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'name',
+				label: '原生 name 属性',
+				tooltip: '原生 name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'checked',
+				label: '当前是否勾选',
+				tooltip: '当前是否勾选',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'indeterminate',
+				label: '设置不确定状态',
+				tooltip: '设置不确定状态，仅负责样式控制',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'validate-event',
+				label: '表单的校验',
+				tooltip: '输入时是否触发表单的校验',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'tabindex',
+				label: 'tabindex',
+				tooltip: '输入框的 tabindex',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'id',
+				label: 'id',
+				tooltip: 'input id',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'controls',
+				label: 'controls',
+				tooltip: '与 aria-control一致, 当 indeterminate为 true时生效',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		prop: 'groupAttrs',
+		label: 'checkboxGroupAttrs',
+		tooltip: 'checkboxGroupAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'isGroupEnabled',
+				label: '是否启用分组',
+				tooltip: '是否启用分组',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'size',
+				label: '多选框组尺寸',
+				tooltip: '多选框组尺寸',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'min',
+				label: '最小数量',
+				tooltip: '最小数量',
+				type: 'string',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'max',
+				label: '最大数量',
+				tooltip: '最大数量',
+				type: 'string',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'label',
+				label: '标签',
+				tooltip: '为屏幕阅读器准备的标签',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'text-color',
+				label: '字体颜色',
+				tooltip: '当按钮为活跃状态时的字体颜色',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'fill',
+				label: '边框和背景颜色',
+				tooltip: '当按钮为活跃状态时的边框和背景颜色',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'tag',
+				label: '复选框组元素标签',
+				tooltip: '复选框组元素标签',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'validate-event',
+				label: '是否触发表单验证',
+				tooltip: '是否触发表单验证',
+				type: 'string',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		prop: 'buttonAttrs',
+		label: 'checkboxButtonAttrs',
+		tooltip: 'checkboxButtonAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'label',
+				label: '选中状态的值',
+				tooltip: '选中状态的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'true-label',
+				label: '选中时的值',
+				tooltip: '选中时的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'false-label',
+				label: '没有选中时的值',
+				tooltip: '没有选中时的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用选项',
+				tooltip: '是否禁用该选项',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'name',
+				label: 'name',
+				tooltip: 'name',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'checked',
+				label: '当前是否勾选',
+				tooltip: '当前是否勾选',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		prop: 'rules',
+		label: 'rules',
+		tooltip: 'rules',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'required',
+				label: '是否必填',
+				tooltip: '是否必填',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			// 必填项规则
+			{
+				prop: 'rules',
+				label: '必填项规则',
+				tooltip: '必填项规则',
+				type: 'array',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+		],
+	},
+];
+export const checkboxAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		disabled: false, // 是否禁用
+		border: false, // 是否显示边框
+		checked: false, // 当前是否勾选
+		indeterminate: false, // 设置不确定状态，仅负责样式控制
+		'validate-event': true, // 输入时是否触发表单的校验
+	},
+	groupAttrs: {
+		disabled: false, // 是否禁用
+		'text-color': '#ffffff', // 当按钮为活跃状态时的字体颜色
+		fill: '#409EFF', // 当按钮为活跃状态时的边框和背景颜色
+		tag: 'div', // 复选框组元素标签
+		'validate-event': true, // 是否触发表单验证
+	},
+	buttonAttrs: {
+		disabled: false, // 是否禁用选项
+		checked: false, // 当前是否勾选
+	},
+	rules: {},
+};

package/src/components/config/datePickerAttrConfig/config.ts

@@ -0,0 +1,256 @@
+export const datePickerAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'datePickerAttrs',
+		tooltip: 'datePickerAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'number / string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'readonly',
+				label: '只读',
+				tooltip: '只读',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled',
+				label: '禁用',
+				tooltip: '禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'size',
+				label: '输入框尺寸',
+				tooltip: '输入框尺寸',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'editable',
+				label: '文本框可输入',
+				tooltip: '文本框可输入',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'clearable',
+				label: '清除按钮',
+				tooltip: '是否显示清除按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'placeholder',
+				label: '占位符',
+				tooltip: '非范围选择时的占位内容',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'start-placeholder',
+				label: '开始日期占位符',
+				tooltip: '范围选择时开始日期的占位内容',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'end-placeholder',
+				label: '结束日期占位符',
+				tooltip: '范围选择时结束日期的占位内容',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'type',
+				label: '显示类型',
+				tooltip: '显示类型',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'year', value: 'year' },
+					{ label: 'month', value: 'month' },
+					{ label: 'date', value: 'date' },
+					{ label: 'dates', value: 'dates' },
+					{ label: 'week', value: 'week' },
+					{ label: 'datetime', value: 'datetime' },
+					{ label: 'datetimerange', value: 'datetimerange' },
+					{ label: 'daterange', value: 'daterange' },
+					{ label: 'monthrange', value: 'monthrange' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'format',
+				label: '输入框中的格式',
+				tooltip: '显示在输入框中的格式',
+				type: '参见 date formats',
+				el: 'hs-input',
+			},
+			{
+				prop: 'popper-class',
+				label: '下拉框的类名',
+				tooltip: 'DatePicker 下拉框的类名',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'popper-options',
+				label: '自定义popper',
+				tooltip: '自定义 popper 选项，更多请参考 popper.js',
+				type: 'object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'range-separator',
+				label: '分隔符',
+				tooltip: '选择范围时的分隔符',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'default-time',
+				label: 'default-tim',
+				tooltip: '范围选择时选中日期所使用的当日内具体时刻',
+				type: 'object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'value-format',
+				label: '绑定值的格式',
+				tooltip: '可选，绑定值的格式。 不指定则绑定值为 Date 对象',
+				type: '参见 date formats',
+				el: 'hs-input',
+			},
+			{
+				prop: 'id',
+				label: 'id',
+				tooltip: '等价于原生 input id 属性',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'name',
+				label: 'name',
+				tooltip: '等价于原生 input name 属性',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'unlink-panels',
+				label: 'unlink-panels',
+				tooltip: '在范围选择器里取消两个日期面板之间的联动',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'prefix-icon',
+				label: '前缀图标',
+				tooltip: '自定义前缀图标 如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'clear-icon',
+				label: '清除图标',
+				tooltip: '清除图标',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'validate-event',
+				label: '是否表单验证',
+				tooltip: '是否触发表单验证',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled-date',
+				label: 'disabled-date',
+				tooltip: '一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'shortcuts',
+				label: '设置快捷选项',
+				tooltip: '设置快捷选项，需要传入数组对象',
+				type: 'object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'cell-class-name',
+				label: '设置类名',
+				tooltip: '设置自定义类名',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'teleported',
+				label: '是否插入至body',
+				tooltip: '是否将 date-picker 的下拉列表插入至 body 元素',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		prop: 'rules',
+		label: 'rules',
+		tooltip: 'rules',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'required',
+				label: '是否必填',
+				tooltip: '是否必填',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			// 必填项规则
+			{
+				prop: 'rules',
+				label: '必填项规则',
+				tooltip: '必填项规则',
+				type: 'array',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+		],
+	},
+];
+
+export const datePickerAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		readonly: false, // 是否只读
+		disabled: false, // 是否禁用
+		editable: true, // 文本框可输入
+		clearable: true, // 是否显示清除按钮
+		type: 'date', // 显示类型
+		'range-separator': '-', // 选择范围时的分隔符
+		'unlink-panels': false, // 在范围选择器里取消两个日期面板之间的联动
+		'clear-icon': '', // 清除图标
+		'validate-event': true, // 是否触发表单验证
+		teleported: true, // 是否将 date-picker 的下拉列表插入至 body 元素
+	},
+	rules: {},
+};

package/src/components/config/datePickerAttrConfig/datePickerAttrConfig.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="p-[10px] h-full">
+		<base-form v-model:data="data" :config="datePickerAttrConfig" :isVModel="isVModel"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="datePickerAttrConfig">
+import baseForm from '../baseForm.vue';
+import { ref } from 'vue';
+import { datePickerAttrConfig, datePickerAttrConfigMap } from './config';
+import _ from 'lodash';
+const props = defineProps({
+	data: {
+		type: Object,
+		default: () => {},
+	},
+	isVModel: {
+		type: Boolean,
+		default: false,
+	},
+});
+// lodash判断对象是否为空
+const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(datePickerAttrConfigMap)) : props.data);
+</script>
+
+<style scoped lang="scss"></style>