hs-admin-ui 1.0.0

package/src/components/config/cascaderAttrConfig/config.ts

@@ -0,0 +1,287 @@
+export const cascaderAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'cascaderAttrs',
+		tooltip: 'cascaderAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean / object / array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'options',
+				label: '选项的数据源',
+				tooltip: '选项的数据源， value 和 label 可以通过 CascaderProps 自定义.（JSON）',
+				type: 'object',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+			{
+				prop: 'props',
+				label: '配置选项',
+				tooltip: '配置选项, 请参阅下面 CascaderProps 表。',
+				type: 'object',
+				el: 'title',
+				children: [
+					{
+						prop: 'expandTrigger',
+						label: '次级菜单展开方式',
+						tooltip: '次级菜单的展开方式',
+						type: 'enum',
+						el: 'hs-select',
+						op: [
+							{ label: 'click', value: 'click' },
+							{ label: 'hover', value: 'hover' },
+						],
+						cel: 'hs-option',
+					},
+					{
+						prop: 'multiple',
+						label: '是否多选',
+						tooltip: '是否多选',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'checkStrictly',
+						label: '父子节点不关联',
+						tooltip: '是否严格的遵守父子节点不互相关联',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'emitPath',
+						label: 'emitPath',
+						tooltip: '在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'lazy',
+						label: '动态加载子节点',
+						tooltip: '是否动态加载子节点，需与 lazyLoad 方法结合使用',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'lazyLoad',
+						label: '加载动态数据方法',
+						tooltip: '加载动态数据的方法，仅在 lazy 为 true 时有效',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'value',
+						label: 'value',
+						tooltip: '指定选项的值为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'label',
+						label: 'label',
+						tooltip: '指定选项标签为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'children',
+						label: 'children',
+						tooltip: '指定选项的子选项为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'disabled',
+						label: 'disabled',
+						tooltip: '指定选项的禁用为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'leaf',
+						label: 'leaf',
+						tooltip: '指定选项的叶子节点的标志位为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'hoverThreshold',
+						label: '菜单的灵敏度阈值',
+						tooltip: 'hover 时展开菜单的灵敏度阈值',
+						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: '占位符',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'clearable',
+				label: '是否支持清空选项',
+				tooltip: '是否支持清空选项',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'show-all-levels',
+				label: 'show-all-levels',
+				tooltip: '输入框中是否显示选中值的完整路径',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'collapse-tags',
+				label: '是否折叠Tag',
+				tooltip: '多选模式下是否折叠Tag',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'collapse-tags-tooltip',
+				label: '显示选中的标签',
+				tooltip: '当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'separator',
+				label: '分隔选项的字符',
+				tooltip: '用于分隔选项的字符',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'filterable',
+				label: '是否可以被搜索',
+				tooltip: '该选项是否可以被搜索',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'filter-method',
+				label: '自定义搜索逻辑',
+				tooltip: '自定义搜索逻辑，第一个参数是node，第二个参数是keyword，返回的布尔值表示是否保留该选项（Function）',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'debounce',
+				label: ' 防抖延迟，毫秒',
+				tooltip: '搜索关键词正在输入时的去抖延迟，单位为毫秒',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'before-filter',
+				label: '过滤函数前置钩子',
+				tooltip:
+					'过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'popper-class',
+				label: '自定义类名',
+				tooltip: '弹出内容的自定义类名',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'teleported',
+				label: '是否使用teleport',
+				tooltip: '弹层是否使用 teleport',
+				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: 'max-collapse-tags',
+				label: 'Tag的最大数量',
+				tooltip: '需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+		],
+	},
+];
+export const cascaderAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		props: {
+			// 配置选项
+			expandTrigger: 'click', // 次级菜单的展开方式
+			multiple: false, // 是否多选
+			checkStrictly: false, // 是否严格的遵守父子节点不互相关联
+			emitPath: true, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+			lazy: false, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
+			value: 'value', // 指定选项的值为选项对象的某个属性值
+			label: 'label', // 指定选项标签为选项对象的某个属性值
+			children: 'children', // 指定选项的子选项为选项对象的某个属性值
+			disabled: 'disabled', // 指定选项的禁用为选项对象的某个属性值
+			leaf: 'leaf', // 指定选项的叶子节点的标志位为选项对象的某个属性值
+			hoverThreshold: 500, // hover 时展开菜单的灵敏度阈值
+		},
+		'show-all-levels': false, // 输入框中是否显示选中值的完整路径
+		'collapse-tags-tooltip': false, // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
+		separator: '/', // 用于分隔选项的字符
+		debounce: 300, // 搜索关键词正在输入时的去抖延迟，单位为毫秒
+		teleported: true, // 弹层是否使用 teleport
+		'tag-type': 'info', // 标签类型
+		'validate-event': true, // 输入时是否触发表单的校验
+		'max-collapse-tags': 1, // 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
+	},
+};

package/src/components/config/cascaderPanelAttrConfig/cascaderPanelAttrConfig.vue

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

package/src/components/config/cascaderPanelAttrConfig/config.ts

@@ -0,0 +1,278 @@
+export const cascaderPanelAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'cascaderAttrs',
+		tooltip: 'cascaderAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean / object / array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'options',
+				label: '选项的数据源',
+				tooltip: '选项的数据源， value 和 label 可以通过 CascaderProps 自定义. （JSON）',
+				type: 'object',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+			{
+				prop: 'props',
+				label: '配置选项',
+				tooltip: '配置选项, 请参阅下面 CascaderProps 表。',
+				type: 'object',
+				el: 'title',
+				children: [
+					{
+						prop: 'expandTrigger',
+						label: '次级菜单展开方式',
+						tooltip: '次级菜单的展开方式',
+						type: 'enum',
+						el: 'hs-select',
+						op: [
+							{ label: 'click', value: 'click' },
+							{ label: 'hover', value: 'hover' },
+						],
+						cel: 'hs-option',
+					},
+					{
+						prop: 'multiple',
+						label: '是否多选',
+						tooltip: '是否多选',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'checkStrictly',
+						label: '父子节点不关联',
+						tooltip: '是否严格的遵守父子节点不互相关联',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'emitPath',
+						label: 'emitPath',
+						tooltip: '在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'lazy',
+						label: '动态加载子节点',
+						tooltip: '是否动态加载子节点，需与 lazyLoad 方法结合使用',
+						type: 'boolean',
+						el: 'hs-switch',
+					},
+					{
+						prop: 'lazyLoad',
+						label: '加载动态数据方法',
+						tooltip: '加载动态数据的方法，仅在 lazy 为 true 时有效',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'value',
+						label: 'value',
+						tooltip: '指定选项的值为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'label',
+						label: 'label',
+						tooltip: '指定选项标签为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'children',
+						label: 'children',
+						tooltip: '指定选项的子选项为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'disabled',
+						label: 'disabled',
+						tooltip: '指定选项的禁用为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'leaf',
+						label: 'leaf',
+						tooltip: '指定选项的叶子节点的标志位为选项对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'hoverThreshold',
+						label: '菜单的灵敏度阈值',
+						tooltip: 'hover 时展开菜单的灵敏度阈值',
+						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: '占位符',
+			//       type: 'string',
+			//       el: 'hs-input'
+			//     },
+			//     {
+			//       prop: 'disabled',
+			//       label: '是否禁用',
+			//       tooltip: '是否禁用',
+			//       type: 'boolean',
+			//       el: 'hs-switch'
+			//     },
+			//     {
+			//       prop: 'clearable',
+			//       label: '是否支持清空选项',
+			//       tooltip: '是否支持清空选项',
+			//       type: 'boolean',
+			//       el: 'hs-switch'
+			//     },
+			//     {
+			//       prop: 'show-all-levels',
+			//       label: 'show-all-levels',
+			//       tooltip: '输入框中是否显示选中值的完整路径',
+			//       type: 'boolean',
+			//       el: 'hs-switch',
+			//     },
+			//     {
+			//       prop: 'collapse-tags',
+			//       label: '是否折叠Tag',
+			//       tooltip: '多选模式下是否折叠Tag',
+			//       type: 'boolean',
+			//       el: 'hs-switch'
+			//     },
+			//     {
+			//       prop: 'collapse-tags-tooltip',
+			//       label: '显示选中的标签',
+			//       tooltip: '当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true',
+			//       type: 'boolean',
+			//       el: 'hs-switch',
+			//     },
+			//     {
+			//       prop: 'separator',
+			//       label: '分隔选项的字符',
+			//       tooltip: '用于分隔选项的字符',
+			//       type: 'string',
+			//       el: 'hs-input'
+			//     },
+			//     {
+			//       prop: 'filterable',
+			//       label: '是否可以被搜索',
+			//       tooltip: '该选项是否可以被搜索',
+			//       type: 'boolean',
+			//       el: 'hs-switch'
+			//     },
+			//     {
+			//       prop: 'filter-method',
+			//       label: '自定义搜索逻辑',
+			//       tooltip: '自定义搜索逻辑，第一个参数是node，第二个参数是keyword，返回的布尔值表示是否保留该选项（Function）',
+			//       type: 'Function',
+			//       el: 'hs-input',
+			//     },
+			//     {
+			//       prop: 'debounce',
+			//       label: ' 防抖延迟，毫秒',
+			//       tooltip: '搜索关键词正在输入时的去抖延迟，单位为毫秒',
+			//       type: 'number',
+			//       el: 'hs-input-number',
+			//     },
+			//     {
+			//       prop: 'before-filter',
+			//       label: '过滤函数前置钩子',
+			//       tooltip: '过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。',
+			//       type: 'Function',
+			//       el: 'hs-input',
+			//     },
+			//     {
+			//       prop: 'popper-class',
+			//       label: '自定义类名',
+			//       tooltip: '弹出内容的自定义类名',
+			//       type: 'string',
+			//       el: 'hs-input'
+			//     },
+			//     {
+			//       prop: 'teleported',
+			//       label: '是否使用teleport',
+			//       tooltip: '弹层是否使用 teleport',
+			//       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: 'max-collapse-tags',
+			//       label: 'Tag的最大数量',
+			//       tooltip: '需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。',
+			//       type: 'number',
+			//       el: 'hs-input-number',
+			//     }
+		],
+	},
+];
+export const cascaderPanelAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		props: {
+			// 配置选项
+			expandTrigger: 'click', // 次级菜单的展开方式
+			multiple: false, // 是否多选
+			checkStrictly: false, // 是否严格的遵守父子节点不互相关联
+			emitPath: true, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+			lazy: false, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
+			value: 'value', // 指定选项的值为选项对象的某个属性值
+			label: 'label', // 指定选项标签为选项对象的某个属性值
+			children: 'children', // 指定选项的子选项为选项对象的某个属性值
+			disabled: 'disabled', // 指定选项的禁用为选项对象的某个属性值
+			leaf: 'leaf', // 指定选项的叶子节点的标志位为选项对象的某个属性值
+			hoverThreshold: 500, // hover 时展开菜单的灵敏度阈值
+		},
+	},
+};

package/src/components/config/checkboxAttrConfig/checkboxAttrConfig.vue

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