hs-admin-ui 1.0.0

package/src/components/base/hsAutocomplete/src/hsAutocomplete.vue

@@ -0,0 +1,36 @@
+<template>
+	<el-autocomplete v-model="innerValue" ref="autocompleteRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-autocomplete>
+</template>
+
+<script setup lang="ts" name="hsAutocomplete">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string>(
+	() => props.value,
+	(val: string) => emit('update:value', val)
+);
+// 获取ref
+const autocompleteRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(autocompleteRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsButton/src/hsButton.vue

@@ -0,0 +1,26 @@
+<template>
+	<el-button @click="handleClick" ref="elButtonRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-button>
+</template>
+<script setup lang="ts" name="hsButton">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useButtonEvents } from '../useButtonEvents';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// emit 事件
+const emit = defineEmits(['click']);
+// 定义解构出来的方法
+const { handleClick } = useButtonEvents(emit);
+// 获取ref
+const elButtonRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(elButtonRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsButton/src/hsButtonGroup.vue

@@ -0,0 +1,8 @@
+<template>
+	<el-button-group>
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-button-group>
+</template>
+<script setup lang="ts" name="hsButtonGroup"></script>

package/src/components/base/hsButton/useButtonEvents.ts

@@ -0,0 +1,19 @@
+/**
+ * 
+ * @param emit 
+ * @returns 
+ * 1. 向外暴露一个函数（useButtonEvents），函数接收一个emit函数
+ */
+export function useButtonEvents(emit: (event: 'click', data: unknown) => void) {
+  /**
+   * 
+   * @param event 
+   * 1. Define the event click
+   */
+  const handleClick = (event: 'click') => {
+    emit('click', event);
+  };
+  return {
+    handleClick,
+  };
+}

package/src/components/base/hsCalendar/src/hsCalendar.vue

@@ -0,0 +1,36 @@
+<template>
+	<el-calendar v-model="innerValue" ref="calendarRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-calendar>
+</template>
+
+<script setup lang="ts" name="hsCalendar">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Date],
+		default: () => new Date(),
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<Date>(
+	() => props.value,
+	(val: Date) => emit('update:value', val)
+);
+// 获取ref
+const calendarRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(calendarRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsCarousel/src/hsCarousel.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-carousel ref="carouselRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-carousel>
+</template>
+
+<script setup lang="ts" name="hsCarousel">
+import { ref } from 'vue';
+// 获取ref
+const hsCarousel = ref(null);
+// 暴露给外部的 ref
+defineExpose({ hsCarousel });
+</script>

package/src/components/base/hsCarousel/src/hsCarouselItem.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-carousel-item ref="carouselItemRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-carousel-item>
+</template>
+
+<script setup lang="ts" name="hsCarouselItem">
+import { ref } from 'vue';
+// 获取ref
+const carouselItemRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ carouselItemRef });
+</script>

package/src/components/base/hsCascader/src/hsCascader.vue

@@ -0,0 +1,36 @@
+<template>
+	<el-cascader v-model="innerValue" ref="cascaderRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-cascader>
+</template>
+
+<script setup lang="ts" name="hsCascader">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Object, Array],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | object | []>(
+	() => props.value,
+	(val: string | number | object | []) => emit('update:value', val)
+);
+// 获取ref
+const cascaderRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(cascaderRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsCascader/src/hsCascaderPanel.vue

@@ -0,0 +1,29 @@
+<template>
+	<el-cascader-panel v-model="innerValue" ref="cascaderPanelRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-cascader-panel>
+</template>
+
+<script setup lang="ts" name="hsCascaderPanel">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Object, Array],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | object | []>(
+	() => props.value,
+	(val: string | number | object | []) => emit('update:value', val)
+);
+// 获取ref
+const cascaderPanelRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ cascaderPanelRef });
+</script>

package/src/components/base/hsCheckbox/src/hsCheckbox.vue

@@ -0,0 +1,32 @@
+<template>
+	<el-checkbox v-model="innerValue" ref="checkboxRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-checkbox>
+</template>
+
+<script setup lang="ts" name="hsCheckbox">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Boolean],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | boolean>(
+	() => props.value,
+	(val: string | number | boolean) => emit('update:value', val)
+);
+// 获取ref
+const checkboxRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// 暴露给外部的 ref
+defineExpose({ checkboxRef });
+</script>

package/src/components/base/hsCheckbox/src/hsCheckboxButton.vue

@@ -0,0 +1,18 @@
+<template>
+	<el-checkbox-button ref="checkboxButtonRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-checkbox-button>
+</template>
+
+<script setup lang="ts" name="hsCheckboxButton">
+import { ref } from 'vue';
+// 获取ref
+const checkboxButtonRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// 暴露给外部的 ref
+defineExpose({ checkboxButtonRef });
+</script>

package/src/components/base/hsCheckbox/src/hsCheckboxGroup.vue

@@ -0,0 +1,32 @@
+<template>
+	<el-checkbox-group v-model="innerValue" ref="checkboxGroupRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-checkbox-group>
+</template>
+
+<script setup lang="ts" name="hsCheckboxGroup">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Array],
+		default: () => [],
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string[] | number[]>(
+	() => props.value,
+	(val: string[] | number[]) => emit('update:value', val)
+);
+// 获取ref
+const checkboxGroupRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// 暴露给外部的 ref
+defineExpose({ checkboxGroupRef });
+</script>

package/src/components/base/hsCol/src/hsCol.vue

@@ -0,0 +1,20 @@
+<template>
+	<el-col>
+		<slot></slot>
+	</el-col>
+</template>
+<script setup lang="ts" name="hsCol">
+// import { ref, onMounted, getCurrentInstance } from 'vue';
+// import { useExposeProperties } from '/@/hooks/useExpose';
+// import type { FormInstance } from 'element-plus';
+// // 1.获取表单的ref
+// const elFormItemRef = ref<FormInstance>();
+// // 2.获取实例方法
+// const instance = getCurrentInstance();
+// onMounted(() => {
+// 	// 3.对暴露在内部方法进行遍历赋值后 进行实例挂载
+// 	useExposeProperties(elFormItemRef, instance);
+// });
+// // 4.暴露给外部的内部方法
+// defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsCollapse/src/hsCollapse.vue

@@ -0,0 +1,36 @@
+<template>
+	<el-collapse v-model="innerValue" ref="collapseRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-collapse>
+</template>
+
+<script setup lang="ts" name="hsCollapse">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Array],
+		default: () => [],
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | []>(
+	() => props.value,
+	(val: string | []) => emit('update:value', val)
+);
+// 获取ref
+const collapseRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(collapseRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsCollapse/src/hsCollapseItem.vue

@@ -0,0 +1,22 @@
+<template>
+	<el-collapse-item ref="collapseItemRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-collapse-item>
+</template>
+
+<script setup lang="ts" name="hsCollapseItem">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// 获取ref
+const collapseItemRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(collapseItemRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsColorPicker/src/hsColorPicker.vue

@@ -0,0 +1,32 @@
+<template>
+	<el-color-picker v-model="innerValue" ref="colorPickerRef"> </el-color-picker>
+</template>
+
+<script setup lang="ts" name="hsColorPicker">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string>(
+	() => props.value,
+	(val: string) => emit('update:value', val)
+);
+// 获取ref
+const colorPickerRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(colorPickerRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsDatePicker/src/hsDatePicker.vue

@@ -0,0 +1,40 @@
+<template>
+	<div ref="focusRef" class="w-full">
+		<el-date-picker v-model="innerValue" v-bind="$attrs" ref="datePickerRef">
+			<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+				<slot :name="item" v-bind="data || {}"></slot>
+			</template>
+		</el-date-picker>
+	</div>
+</template>
+
+<script setup lang="ts" name="hsDatePicker">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties, useFocusElement } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Date, Array],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | Date | []>(
+	() => props.value,
+	(val: string | number | Date | []) => emit('update:value', val)
+);
+// 获取ref
+const datePickerRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+const { focusRef, activeElement } = useFocusElement();
+
+onMounted(() => {
+	useExposeProperties(datePickerRef, instance);
+});
+
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed, activeElement });
+</script>

package/src/components/base/hsDialog/src/hsDialog.vue

@@ -0,0 +1,36 @@
+<template>
+	<el-dialog v-model="innerValue" ref="dialogRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="hsDialog">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Boolean],
+		default: false,
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<boolean>(
+	() => props.value,
+	(val: boolean) => emit('update:value', val)
+);
+// 获取ref
+const dialogRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(dialogRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsDrawer/src/hsDrawer.vue

@@ -0,0 +1,29 @@
+<template>
+	<el-drawer v-model="innerValue" ref="drawerRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-drawer>
+</template>
+
+<script setup lang="ts" name="hsDrawer">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Boolean],
+		default: false,
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<boolean>(
+	() => props.value,
+	(val: boolean) => emit('update:value', val)
+);
+// 获取ref
+const drawerRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ drawerRef });
+</script>

package/src/components/base/hsDropdown/src/hsDropdown.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-dropdown ref="dropdownRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-dropdown>
+</template>
+
+<script setup lang="ts" name="hsDropdown">
+import { ref } from 'vue';
+// 获取ref
+const dropdownRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ dropdownRef });
+</script>

package/src/components/base/hsDropdown/src/hsDropdownItem.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-dropdown-item ref="dropdownItemRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-dropdown-item>
+</template>
+
+<script setup lang="ts" name="hsDropdownItem">
+import { ref } from 'vue';
+// 获取ref
+const dropdownItemRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ dropdownItemRef });
+</script>

package/src/components/base/hsDropdown/src/hsDropdownMenu.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-dropdown-menu ref="dropdownMenuRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-dropdown-menu>
+</template>
+
+<script setup lang="ts" name="hsDropdownMenu">
+import { ref } from 'vue';
+// 获取ref
+const dropdownMenuRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ dropdownMenuRef });
+</script>

package/src/components/base/hsForm/src/hsForm.vue

@@ -0,0 +1,23 @@
+<template>
+	<el-form v-bind="$attrs" ref="elFormRef">
+		<template v-for="(value, name) in $slots" :key="name" #[name]="scopeData">
+			<slot :name="name" v-bind="scopeData || {}"></slot>
+		</template>
+	</el-form>
+</template>
+<script setup lang="ts" name="hsForm">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+import type { FormInstance } from 'element-plus';
+// 1.获取表单的ref
+const elFormRef = ref<FormInstance>();
+
+// 2.获取实例方法
+const instance = getCurrentInstance();
+onMounted(() => {
+	// 3.对暴露在内部方法进行遍历赋值后 进行实例挂载
+	useExposeProperties(elFormRef, instance);
+});
+// 4.暴露给外部的内部方法
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsForm/src/hsFormItem.vue

@@ -0,0 +1,22 @@
+<template>
+	<el-form-item v-bind="$attrs" ref="elFormItemRef">
+		<template v-for="(value, name) in $slots" :key="name" #[name]="scopeData">
+			<slot :name="name" v-bind="scopeData || {}"></slot>
+		</template>
+	</el-form-item>
+</template>
+<script setup lang="ts" name="hsForm">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+import type { FormInstance } from 'element-plus';
+// 1.获取表单的ref
+const elFormItemRef = ref<FormInstance>();
+// 2.获取实例方法
+const instance = getCurrentInstance();
+onMounted(() => {
+	// 3.对暴露在内部方法进行遍历赋值后 进行实例挂载
+	useExposeProperties(elFormItemRef, instance);
+});
+// 4.暴露给外部的内部方法
+defineExpose({ ...instance!.exposed });
+</script>