hs-admin-ui 1.0.0

package/src/components/config/radioAttrConfig/config.ts

@@ -0,0 +1,212 @@
+export const radioAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'radioAttrs',
+		tooltip: 'radioAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: '单选框的值',
+				tooltip: '单选框的值',
+				type: 'string / number / boolean',
+				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: '单选框的尺寸',
+				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: 'groupAttrs',
+		label: 'radioGroupAttrs',
+		tooltip: 'radioGroupAttrs',
+		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: 'text-color',
+				label: '字体颜色',
+				tooltip: '当按钮为活跃状态时的字体颜色',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'fill',
+				label: '边框和背景颜色',
+				tooltip: '当按钮为活跃状态时的边框和背景颜色',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'validate-event',
+				label: '是否触发表单验证',
+				tooltip: '是否触发表单验证',
+				type: 'string',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'label',
+				label: '单选框的值',
+				tooltip: '单选框的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'name',
+				label: '原生 name 属性',
+				tooltip: '原生 name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'id	',
+				label: '原生 id	 属性',
+				tooltip: '原生 id	 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+		],
+	},
+	{
+		prop: 'buttonAttrs',
+		label: 'radioButtonAttrs',
+		tooltip: 'radioButtonAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'label',
+				label: '单选框的值',
+				tooltip: '单选框的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用单选框',
+				tooltip: '是否禁用单选框',
+				type: 'string',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'name',
+				label: '原生 name 属性',
+				tooltip: '原生 name 属性',
+				type: 'string',
+				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 radioAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		disabled: false, // 是否禁用单选框
+		border: false, // 是否显示边框
+	},
+	groupAttrs: {
+		size: 'small', // 单选框按钮大小
+		disabled: false, // 是否禁用
+		'text-color': '#ffffff', // 字体颜色
+		fill: '#409EFF', // 边框和背景颜色
+		'validate-event': true, // 是否触发表单验证
+	},
+	buttonAttrs: {
+		disabled: false, // 是否禁用单选框
+	},
+	rules: {},
+};

package/src/components/config/radioAttrConfig/radioAttrConfig.vue

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

package/src/components/config/selectAttrConfig/config.ts

@@ -0,0 +1,478 @@
+export const selectAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'selectAttrs',
+		tooltip: 'selectAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean / object / array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'options',
+				label: 'option配置数据',
+				tooltip: 'option配置数据',
+				type: 'string',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+			{
+				prop: 'url',
+				label: 'url获取options',
+				tooltip: '通过url请求获取options配置项数据',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'paramKey',
+				label: '请求参数key',
+				tooltip: '请求参数key',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'paramValue',
+				label: '请求参数Value',
+				tooltip: '请求参数Value',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'multiple',
+				label: '是否多选',
+				tooltip: '是否多选',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'value-key',
+				label: 'value 唯一标识',
+				tooltip: '作为 value 唯一标识的键名，绑定值为对象类型时必填',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'placeholder',
+				label: '占位符',
+				tooltip: '占位符，默认为“Select”',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				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: 'clearable',
+				label: '是否可以清空',
+				tooltip: '是否可以清空选项',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'collapse-tags',
+				label: '值按文字展示',
+				tooltip: '多选时是否将选中值按文字的形式展示',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'collapse-tags-tooltip',
+				label: '是否显示所选',
+				tooltip: '当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'multiple-limit',
+				label: '最多可选数',
+				tooltip: 'multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'name',
+				label: '原生name属性',
+				tooltip: 'Select 输入框的原生 name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'effect',
+				label: 'tooltip 主题',
+				tooltip: 'tooltip 主题，内置了 dark / light 两种',
+				type: 'enum / string',
+				el: 'hs-select',
+				op: [
+					{ label: 'dark', value: 'dark' },
+					{ label: 'light', value: 'light' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'autocomplete',
+				label: 'autocomplete',
+				tooltip: 'Select 输入框的原生 autocomplete 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'filterable',
+				label: '是否可筛选',
+				tooltip: 'Select 组件是否可筛选',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'allow-create',
+				label: '允许创建条目',
+				tooltip: '是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'filter-method',
+				label: '筛选方法',
+				tooltip: '自定义筛选方法',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'remote',
+				label: '是否远程加载',
+				tooltip: '其中的选项是否从服务器远程加载',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'remote-method',
+				label: '远程搜索方法',
+				tooltip: '自定义远程搜索方法',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'remote-show-suffix',
+				label: '远程搜索图标',
+				tooltip: '远程搜索方法显示后缀图标',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'loading',
+				label: '是否正在获取',
+				tooltip: '是否正在从远程获取数据',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'loading-text',
+				label: '加载时文本',
+				tooltip: '从服务器加载数据时显示的文本，默认为“Loading”',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'no-match-text',
+				label: '无匹配时显示',
+				tooltip: "搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'”",
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'no-data-text',
+				label: '无选项时显示',
+				tooltip: '无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data”',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'popper-class',
+				label: '下拉菜单类名',
+				tooltip: '选择器下拉菜单的自定义类名',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'reserve-keyword',
+				label: '保留关键词',
+				tooltip: '当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'default-first-option',
+				label: '回车选择',
+				tooltip: '是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'teleported',
+				label: '是否插入至body',
+				tooltip: '是否将下拉列表插入至 body 元素',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'persistent',
+				label: '选择器未被激活',
+				tooltip: '当下拉选择器未被激活并且persistent设置为false，选择器会被删除。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'automatic-dropdown',
+				label: '自动弹出选项',
+				tooltip: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'clear-icon',
+				label: '清除图标',
+				tooltip: '自定义清除图标',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'fit-input-width',
+				label: '下拉框宽度',
+				tooltip: '下拉框的宽度是否与输入框相同',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'suffix-icon',
+				label: '后缀图标',
+				tooltip: '自定义后缀图标组件',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'suffix-transition deprecated',
+				label: '下拉图标动画',
+				tooltip: '下拉菜单显示/消失时后缀图标的动画',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'tag-type',
+				label: '标签类型',
+				tooltip: '标签类型',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'success', value: 'success' },
+					{ label: 'info', value: 'info' },
+					{ label: 'warning', value: 'warning' },
+					{ label: 'danger', value: 'danger' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'validate-event',
+				label: '表单验证',
+				tooltip: '是否触发表单验证',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'placement',
+				label: '下拉框出现位置',
+				tooltip: '下拉框出现的位置',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'top', value: 'top' },
+					{ label: 'top-start', value: 'top-start' },
+					{ label: 'top-end', value: 'top-end' },
+					{ label: 'bottom', value: 'bottom' },
+					{ label: 'bottom-start', value: 'bottom-start' },
+					{ label: 'bottom-end', value: 'bottom-end' },
+					{ label: 'left', value: 'left' },
+					{ label: 'left-start', value: 'left-start' },
+					{ label: 'left-end', value: 'left-end' },
+					{ label: 'right', value: 'right' },
+					{ label: 'right-start', value: 'right-start' },
+					{ label: 'right-end', value: 'right-end' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'max-collapse-tags',
+				label: 'Tag最大数量',
+				tooltip: '需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'popper-options',
+				label: 'popper参数',
+				tooltip: 'popper.js 参数',
+				type: 'objectrefer to popper.js doc',
+				el: 'hs-input',
+			},
+			{
+				prop: 'aria-label',
+				label: 'aria-label',
+				tooltip: '等价于原生 input aria-label 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+		],
+	},
+	{
+		prop: 'groupAttrs',
+		label: 'optionGroupAttrs',
+		tooltip: 'optionGroupAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'isGroupEnabled',
+				label: '是否启用分组',
+				tooltip: '是否启用分组',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'label',
+				label: '分组的名称',
+				tooltip: '分组的名称',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用分组',
+				tooltip: '是否将该分组下所有选项置为禁用',
+				type: 'string',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		prop: 'optionAttrs',
+		label: 'optionAttrs',
+		tooltip: 'optionAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'value',
+				label: '选项的值',
+				tooltip: '选项的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: '选项的标签',
+				tooltip: '选项的标签，若不设置则默认与value相同',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用选项',
+				tooltip: '是否禁用该选项',
+				type: 'string',
+				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 selectAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		multiple: false, // 是否多选
+		disabled: false, // 是否禁用
+		'value-key': 'value', // value 唯一标识
+		clearable: true, // 是否可以清空
+		'collapse-tags': false, // 值按文字展示
+		'collapse-tags-tooltip': false, // 是否显示所选
+		'multiple-limit': 0, // 最多可选数
+		effect: 'light', // tooltip 主题
+		autocomplete: 'off', // autocomplete
+		filterable: true, // 是否可筛选
+		'allow-create': false, // 允许创建条目
+		remote: false, // 是否远程加载
+		'remote-show-suffix': false, // 远程搜索图标
+		loading: false, // 是否正在获取
+		'reserve-keyword': true, // 保留关键词
+		'default-first-option': false, // 是否在输入框按下回车时，选择第一个匹配项
+		teleported: true, // 是否插入至body
+		persistent: true, // 选择器未被激活
+		'automatic-dropdown': true, // 自动弹出选项
+		'clear-icon': '', // 清除图标
+		'fit-input-width': false, // 下拉框宽度
+		'suffix-icon': '', // 后缀图标
+		'tag-type': 'info', // 标签类型
+		'validate-event': true, // 表单验证
+		placement: 'bottom-start', // 下拉框出现的位置
+		'max-collapse-tags': 1, // 需要显示的 Tag 的最大数量
+		options: 'string=', //
+	},
+	groupAttrs: {
+		disabled: false, // 是否禁用分组
+		isGroupEnabled: false, // 是否启用分组
+	},
+	optionAttrs: {
+		value: 'value',
+		label: 'label',
+		disabled: false, // 是否禁用该选项
+	},
+	rules: {},
+};