hs-admin-ui 1.0.0

package/src/components/config/inputAttrConfig/config.ts

@@ -0,0 +1,322 @@
+import { formConfigItemType } from '../type/formType';
+
+export const inputAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'inputAttrs',
+		tooltip: 'inputAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'type',
+				label: 'input类型',
+				tooltip: 'input类型',
+				type: 'string 等原生 input 类型',
+				el: 'hs-select',
+				op: [
+					{ label: 'text', value: 'text' },
+					{ label: 'textarea', value: 'textarea' },
+					{ label: 'number', value: 'number' },
+					{ label: 'password', value: 'password' },
+				],
+				cel: 'hs-option',
+				required: true,
+				clearable: false,
+				rules: [
+					{
+						required: true,
+						message: '请选择type',
+						trigger: 'blur',
+					},
+				],
+			},
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'placeholder',
+				label: '占位文本',
+				tooltip: '输入框占位文本',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'size',
+				label: '输入框尺寸',
+				tooltip: "输入框尺寸，只在 type 不为 'textarea' 时有效",
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'clearable',
+				label: '清除按钮',
+				tooltip: '是否显示清除按钮，只有当 type 不是 textarea时生效',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'readonly',
+				label: '是否只读',
+				tooltip: '原生 readonly 属性，是否只读',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'maxlength',
+				label: 'maxlength',
+				tooltip: '同原生 maxlength 属性',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'minlength',
+				label: 'minlength',
+				tooltip: '原生属性，最小输入长度',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'show-word-limit',
+				label: '统计字数',
+				tooltip: "是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效",
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'formatter',
+				label: '输入值格式',
+				tooltip: '指定输入值的格式。(只有当 type 是"text"时才能工作)',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'parser',
+				label: '格式化器',
+				tooltip: '指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'show-password',
+				label: '密码图标',
+				tooltip: '是否显示切换密码图标',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'prefix-icon',
+				label: '前缀图标',
+				tooltip: '自定义前缀图标',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'suffix-icon',
+				label: '后缀图标',
+				tooltip: '自定义后缀图标',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'rows',
+				label: '输入框行数',
+				tooltip: "输入框行数，仅 type 为 'textarea' 时有效",
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'autosize',
+				label: 'textarea 高度',
+				tooltip: "textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }",
+				type: 'boolean / object',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'autocomplete',
+				label: 'autocomplete',
+				tooltip: '原生 autocomplete 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'name',
+				label: 'input name',
+				tooltip: '等价于原生 input name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'max',
+				label: 'max',
+				tooltip: '原生 max 属性，设置最大值',
+				type: '—',
+				el: 'hs-input',
+			},
+			{
+				prop: 'min',
+				label: 'min',
+				tooltip: '原生属性，设置最小值',
+				type: '—',
+				el: 'hs-input',
+			},
+			{
+				prop: 'step',
+				label: 'step',
+				tooltip: '原生属性，设置输入字段的合法数字间隔',
+				type: '—',
+				el: 'hs-input',
+			},
+			{
+				prop: 'resize',
+				label: 'resize',
+				tooltip: '控制是否能被用户缩放',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'none', value: 'none' },
+					{ label: 'both', value: 'both' },
+					{ label: 'horizontal', value: 'horizontal' },
+					{ label: 'vertical', value: 'vertical' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'autofocus',
+				label: 'autofocus',
+				tooltip: '原生属性，自动获取焦点',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'form',
+				label: 'form',
+				tooltip: '原生属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label a11y',
+				label: 'label',
+				tooltip: '等价于原生 input aria-label 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'tabindex',
+				label: 'tabindex',
+				tooltip: '输入框的 tabindex',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'validate-event',
+				label: '表单的校验',
+				tooltip: '输入时是否触发表单的校验',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'input-style',
+				label: 'input-style',
+				tooltip: 'input 元素或 textarea 元素的 style',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+		],
+	},
+	{
+		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 inputEventConfig: formConfigItemType[] = [
+	{
+		prop: 'blur',
+		label: '聚焦时触发',
+		tooltip: '在 Input 失去焦点时触发',
+		el: 'hs-input',
+	},
+	{
+		prop: 'focus',
+		label: '失焦时触发',
+		tooltip: '在 Input 失去焦点时触发',
+		el: 'hs-input',
+	},
+	{
+		prop: 'change',
+		label: '改变时触发',
+		tooltip: '在 Input 失去焦点时触发',
+		el: 'hs-input',
+	},
+	{
+		prop: 'clear',
+		label: '清空时触发',
+		tooltip: '在 Input 失去焦点时触发',
+		el: 'hs-input',
+	},
+	{
+		prop: 'input',
+		label: '改变时触发',
+		tooltip: '在 Input 失去焦点时触发',
+		el: 'hs-input',
+	},
+];
+export const inputAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		type: 'text', // input类型
+		clearable: false, // 是否可清空
+		'show-password': false, // 是否显示切换密码图标
+		disabled: false, // 是否禁用
+		autosize: false, // textarea 高度是否自适应，仅 type 为 'textarea' 时生效
+		autocomplete: 'off', // 原生 autocomplete 属性
+		autofocus: false, // 原生属性，自动获取焦点
+		'validate-event': true, // 输入时是否触发表单的校验
+	},
+	rules: {
+		required: false,
+		rules: '',
+	},
+};

package/src/components/config/inputAttrConfig/inputAttrConfig.vue

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

package/src/components/config/inputAttrConfig/inputEventConfig.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="p-[10px] h-full overflow-y-auto">
+		<hs-button @click="handClick">父组件获取数据</hs-button>
+		<div v-for="(item, index) in inputEventConfig" :key="index">
+			<component :is="item['el']" v-model="formData[index][item.prop]" clearable placeholder="请输入" v-bind="item['attrs'] || {}"> </component>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="inputEventConfig">
+import baseForm from '../baseForm.vue';
+import { ref, reactive } from 'vue';
+import { inputEventConfig } from './config';
+import _ from 'lodash';
+const handClick = () => {
+	console.log(data);
+	// 将data转为数组 例如 {type: 'number', blur: '555'} [{type: 'number'}, {blur: '555'}]
+	// const dataArray = Object.entries(data.value).map(([key, value]) => ({ [key]: value }));
+
+	// console.log(dataArray);
+	console.log(formData);
+};
+const props = defineProps({
+	data: {
+		type: Object,
+		default: () => {},
+	},
+});
+// lodash判断对象是否为空
+const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, {}) : props.data);
+const formData = ref(inputEventConfig.map(() => ({})));
+console.log('formData', formData);
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/config/inputNumberAttrConfig/config.ts

@@ -0,0 +1,177 @@
+export const inputNumberAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'inputNumberAttrs',
+		tooltip: 'inputNumberAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'min',
+				label: '最小值',
+				tooltip: '设置计数器允许的最小值',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'max',
+				label: '最大值',
+				tooltip: '设置计数器允许的最大值',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'step',
+				label: '计数器步长',
+				tooltip: '计数器步长',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'step-strictly',
+				label: '只能输入step倍数',
+				tooltip: '是否只能输入 step 的倍数',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'precision',
+				label: '数值精度',
+				tooltip: '数值精度',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				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: 'placeholder',
+				label: '占位符',
+				tooltip: '等价于原生 input placeholder 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'readonly',
+				label: '是否只读',
+				tooltip: '原生 readonly 属性，是否只读',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用状态',
+				tooltip: '是否禁用状态',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'controls',
+				label: '是否使用控制按钮',
+				tooltip: '是否使用控制按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'controls-position',
+				label: '控制按钮位置',
+				tooltip: '控制按钮位置',
+				type: 'enum',
+				el: 'hs-select',
+				op: [{ label: 'right', value: 'right' }],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'name',
+				label: 'input name 属性',
+				tooltip: '等价于原生 input name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: 'input label 属性',
+				tooltip: '等价于原生 input label 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'id',
+				label: 'input id 属性',
+				tooltip: '等价于原生 input id 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'value-on-clear',
+				label: '被清空时显示的值',
+				tooltip: '当输入框被清空时显示的值',
+				type: 'number / null / enum',
+				el: 'hs-input',
+			},
+			{
+				prop: 'validate-event',
+				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 inputNumberAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		'step-strictly': false, // 是否只能输入 step 的倍数
+		size: 'small', // 计数器尺寸
+		readonly: false, // 是否只读
+		disabled: false, // 是否禁用状态
+		controls: true, // 是否使用控制按钮
+		'validate-event': true, // 是否触发表单验证
+	},
+	rules: {},
+};

package/src/components/config/inputNumberAttrConfig/inputNumberAttrConfig.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="p-[10px] h-full">
+		<base-form v-model:data="data" :config="inputNumberAttrConfig" :isVModel="isVModel"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="inputNumberAttrConfig">
+import baseForm from '../baseForm.vue';
+import { ref } from 'vue';
+import { inputNumberAttrConfig, inputNumberAttrConfigMap } 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(inputNumberAttrConfigMap)) : props.data);
+</script>
+
+<style scoped lang="scss"></style>