hs-admin-ui 1.0.0

package/src/components/config/selectAttrConfig/selectAttrConfig.vue

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

package/src/components/config/switchAttrConfig/config.ts

@@ -0,0 +1,195 @@
+export const switchAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'switchAttrs',
+		tooltip: 'switchAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'boolean / string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'loading',
+				label: '是否显示加载中',
+				tooltip: '是否显示加载中',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'size',
+				label: 'switch 的大小',
+				tooltip: 'switch 的大小',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'width',
+				label: 'switch 的宽度',
+				tooltip: 'switch 的宽度',
+				type: 'number / string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'inline-prompt',
+				label: '只呈现第一个字符',
+				tooltip: '无论图标或文本是否显示在点内，只会呈现文本的第一个字符',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'active-icon',
+				label: '激活时所显示图标',
+				tooltip: 'switch 状态为 on 时所显示图标，设置此项会忽略 active-text',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'inactive-icon',
+				label: '关闭时所显示图标',
+				tooltip: 'switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'active-action-icon',
+				label: '打开时图标组件',
+				tooltip: 'on状态下显示的图标组件',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'inactive-action-icon',
+				label: '关闭时图标组件',
+				tooltip: 'off状态下显示的图标组件',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'active-text',
+				label: '打开时的文字描述',
+				tooltip: 'switch 打开时的文字描述',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'inactive-text',
+				label: '关闭时的文字描述',
+				tooltip: 'switch 的状态为 off 时的文字描述',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'active-value',
+				label: '状态为打开时的值',
+				tooltip: 'switch 状态为 on 时的值',
+				type: 'boolean / string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'inactive-value',
+				label: '状态为关闭时的值',
+				tooltip: 'switch的状态为 off 时的值',
+				type: 'boolean / string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'name',
+				label: 'name',
+				tooltip: 'switch 对应的 name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'validate-event',
+				label: '是否触发表单验证',
+				tooltip: '是否触发表单验证',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'before-change',
+				label: '状态改变前的钩子',
+				tooltip: 'switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换',
+				type: 'boolean / Function',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'id',
+				label: 'id',
+				tooltip: 'id',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'tabindex',
+				label: 'tabindex',
+				tooltip: 'input 的 tabindex',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: 'aria-label',
+				tooltip: '等价于原生 input aria-label 属性',
+				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 switchAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		disabled: false, // 是否禁用
+		loading: false, // 是否显示加载中
+		'inline-prompt': false, // 只呈现第一个字符
+		'validate-event': true, // 是否触发表单验证
+	},
+	rules: {},
+};

package/src/components/config/switchAttrConfig/switchAttrConfig.vue

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