@aoao-y33/ui 0.0.3 → 0.0.5

package/src/layout/components/fields/basic/basic.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="w-full h-full flex flex-col overflow-hidden">
-    <header class="w-full">
-      <slot name="header"></slot>
-    </header>
-    <main class="flex flex-1 overflow-hidden h-full">
-      <aside class="h-full overflow-hidden">
-        <slot name="aside"></slot>
-      </aside>
-      <main class="flex-1 flex overflow-hidden h-full">
-        <slot name="main"></slot>
-      </main>
-    </main>
-    <footer class="w-full">
-      <slot name="footer"></slot>
-    </footer>
-  </div>
-</template>

package/src/layout/components/fields/index.ts

@@ -1,10 +0,0 @@
-import basic from './basic/basic.vue';
-import side from './side/side.vue';
-import top from './top/top.vue';
-import {addLayoutField} from "@/layout";
-
-export const initLayoutFields = () => {
-    addLayoutField('basic', basic);
-    addLayoutField('side', side);
-    addLayoutField('top', top);
-}

package/src/layout/components/fields/side/side.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="w-full h-full flex overflow-hidden">
-    <aside class="h-full overflow-hidden">
-      <slot name="aside"></slot>
-    </aside>
-    <main class="h-full flex-1 flex flex-col overflow-hidden">
-      <header class="w-full">
-        <slot name="header"></slot>
-      </header>
-      <main class="flex-1 w-full overflow-hidden">
-        <slot name="main"></slot>
-      </main>
-      <footer class="w-full">
-        <slot name="footer"></slot>
-      </footer>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>

package/src/layout/components/fields/top/top.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="flex flex-col w-full h-full">
-    <header class="w-full">
-      <slot name="header"></slot>
-    </header>
-    <main class="flex-1 w-full flex overflow-hidden">
-      <slot name="main"></slot>
-    </main>
-    <footer class="w-full">
-      <slot name="footer"></slot>
-    </footer>
-  </div>
-</template>

package/src/layout/components/layout/index.ts

@@ -1,6 +0,0 @@
-import layout from './layout.vue';
-
-export * from './props';
-export const AxLayout = layout;
-export type AxLayoutInstance = InstanceType<typeof layout>;
-export default AxLayout;

package/src/layout/components/layout/layout.vue

@@ -1,19 +0,0 @@
-<template>
-  <Layout>
-    <template v-for="slot in Object.keys(slots)" #[slot]>
-      <slot :name="slot"></slot>
-    </template>
-  </Layout>
-</template>
-
-<script setup lang="ts">
-import {type AxLayoutProps} from "./props";
-import {computed, useSlots} from "vue";
-import {layoutFields} from "@/layout";
-
-const {type = 'basic'} = defineProps<AxLayoutProps>();
-const slots = useSlots();
-const Layout = computed(()=>{
-  return layoutFields[type]
-})
-</script>

package/src/layout/components/layout/props.ts

@@ -1,3 +0,0 @@
-export interface AxLayoutProps {
-    type?: string;
-}

package/src/layout/hoc/index.ts

@@ -1 +0,0 @@
-export * from './useLayout';

package/src/layout/hoc/useLayout.ts

@@ -1,32 +0,0 @@
-import {type Component, defineComponent, h, shallowRef} from "vue";
-import {AxLayout} from "@/layout";
-import {mergeDeep} from "@aoao-y33/utils";
-
-export interface AxLayoutOptions {
-    type?: string;
-    header?:Component;
-    footer?:Component ;
-    main?:Component ;
-    aside?:Component ;
-}
-export function useLayout(options:AxLayoutOptions={}){
-    const props = shallowRef(options);
-    const setLayout=(options:AxLayoutOptions)=>{
-        props.value = mergeDeep(props.value,options);
-    }
-    const Layout = defineComponent({
-        setup(){
-            const slots:Record<string, Component> = {};
-            const keys = ['header','footer','main','aside'];
-
-            keys.forEach(key=>{
-                if(props.value?.[key as keyof typeof props.value]){
-                    slots[key] = ()=>h(props.value[key as keyof typeof props.value] as Component)
-                }
-            })
-            return ()=>h(AxLayout as any,{type:props.value?.type},slots);
-        }
-    })
-
-    return [Layout,setLayout] as const;
-}

package/src/layout/index.ts

@@ -1,4 +0,0 @@
-export * from './components/layout';
-export * from './components/fields';
-export * from './hoc';
-export * from './utils';

package/src/layout/utils/index.ts

@@ -1,31 +0,0 @@
-import type {Component} from "vue";
-
-/**
- * 布局组件注册表
- * 存储布局类型与对应 Vue 组件的映射关系
- * @example
- * // 注册自定义布局组件
- * addLayoutField('sidebar', SidebarLayoutComponent)
- */
-export const layoutFields:Record<string, Component> = {};
-
-/**
- * 注册新的布局类型组件
- * 将自定义布局组件添加到布局类型注册表中
- *
- * @param type - 布局类型标识符（唯一）
- * @param component - 对应的 Vue 组件
- *
- * @warning 如果类型已存在，会输出警告信息并阻止重复注册
- *
- * @example
- * import CustomLayout from './CustomLayout.vue'
- * addLayoutField('custom-layout', CustomLayout)
- */
-export const addLayoutField = (type: string, component: Component) => {
-    if (type in layoutFields) {
-        console.warn(`[AxLayout] Layout type ${type} already exists`)
-        return;
-    }
-    layoutFields[type] = component;
-}

package/src/modal/components/form-modal/form-modal.vue

@@ -1,158 +0,0 @@
-<template>
-  <Modal v-bind="{...modalProps,...attrs}" v-model="_open"
-         :header-class="'ax-form-modal-header'+' '+headerClass"
-         :footer-class="'ax-form-modal-footer'+' '+footerClass"
-         :body-class="'ax-form-modal-body'+' '+bodyClass"
-         :close-icon
-         :class="['ax-form-modal',className]"
-         ref="modalRef"
-         :show-close="false">
-    <template #header v-if="title||showClose">
-      <div class="flex justify-between items-center overflow-hidden gap-1">
-        <div :title="title" class="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">{{ title }}</div>
-        <ElIcon @click="close">
-          <Close/>
-        </ElIcon>
-      </div>
-    </template>
-    <template #default>
-      <AxForm v-loading="_loading" v-bind="{...modalProps,...attrs} as AxFormProps" :is-default="false" ref="formRef">
-        <slot></slot>
-      </AxForm>
-    </template>
-    <template #footer v-if="slots.button||isDefault">
-      <template v-if="isDefault">
-        <ax-button v-bind="_confirmButton" @click="onConfirm"></ax-button>
-        <ax-button v-bind="_cancelButton" @click="close"></ax-button>
-      </template>
-      <slot name="button"></slot>
-    </template>
-  </Modal>
-</template>
-
-<script setup lang="ts">
-import type {AxFormModalProps, AxFormModalEmits} from "./props";
-import {useDefineProps, useFetch} from "@aoao-y33/hooks";
-import {computed, type Ref, ref, useAttrs, useSlots} from "vue";
-import {type DrawerInstance, ElDialog, ElDrawer, ElIcon,vLoading} from "element-plus";
-import {AxButton, type AxButtonProps} from "@/button";
-import {Close} from "@element-plus/icons-vue";
-import {AxForm, type AxFormInstance, type AxFormProps, useFormExpose} from "@/form";
-
-const {
-  type = 'dialog',
-  showClose = true,
-  open = false,
-  title = '',
-  isDefault = true,
-  confirmButton = {},
-  cancelButton = {},
-  className = "md:w-[30%]! w-[100%]!",
-  api = null,
-  apiConfig = {},
-  loading=false,
-  ...props
-} = defineProps<AxFormModalProps>();
-
-const emits = defineEmits<AxFormModalEmits>();
-
-const _confirmButton = useDefineProps<AxButtonProps>(confirmButton, {
-  text: '确定',
-  icon: 'CircleCheckFilled',
-  componentProps: {
-    type: 'primary',
-  }
-})
-
-const _cancelButton = useDefineProps<AxButtonProps>(cancelButton, {
-  text: '取消',
-  icon: 'CircleCloseFilled',
-  componentProps: {
-    type: 'default',
-  }
-})
-
-const slots = useSlots();
-
-const attrs = useAttrs();
-
-const [,requestApi] = useFetch(api, apiConfig);
-
-const modalProps = useDefineProps(props);
-
-const _open = computed({
-  get() {
-    return open;
-  },
-  set(value) {
-    emits('update:open', value);
-  }
-})
-
-const _loading = computed(()=>{
-  return Boolean(loading||requestApi.getConfig().loading);
-})
-
-
-const modalRef = ref<DrawerInstance>();
-
-const formRef = ref<AxFormInstance>() as Ref<AxFormInstance>;
-
-const formApi = useFormExpose(formRef);
-
-const Modal = computed(() => {
-  return type === 'dialog' ? ElDialog : ElDrawer;
-})
-
-const close = () => {
-  modalRef.value?.handleClose();
-  emits("cancel");
-}
-
-const onConfirm = () => {
-  const data = formApi.getValues();
-  formApi.getElForm().validate((res) => {
-    if(res){
-      if(requestApi.getReady()){
-        requestApi.load(data);
-      }
-      emits("confirm",data);
-    }
-  })
-
-}
-
-const getModal = () => {
-  return modalRef.value;
-}
-
-defineExpose({
-  getModal,
-  close,
-  ...formApi,
-  ...requestApi,
-})
-</script>
-
-<style lang="scss">
-.ax-form-modal {
-  padding: 0 !important;
-}
-
-.ax-form-modal-header {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--el-border-color);
-}
-
-.ax-form-modal-body {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  padding: 8px 12px;
-}
-
-.ax-form-modal-footer {
-  padding: 8px 12px;
-  border-top: 1px solid var(--el-border-color);
-}
-</style>

package/src/modal/components/form-modal/index.ts

@@ -1,5 +0,0 @@
-import formModal from './form-modal.vue';
-export * from './props';
-export const AxFormModal = formModal;
-export default AxFormModal;
-export type AxFormModalInstance = InstanceType<typeof formModal>;

package/src/modal/components/form-modal/props.ts

@@ -1,61 +0,0 @@
-import type {AxModalProps} from "@/modal";
-import type {AxFormItemOptions, AxFormProps} from "@/form";
-import type {EmitsToEventProps} from "@aoao-y33/utils";
-import type {FieldsConfig} from "@aoao-y33/hooks";
-import type {AxButtonOptions} from "@/button";
-import type {EmitsToProps} from "vue";
-import type {DrawerEmits} from "element-plus";
-
-/**
- * AxFormModal 表单弹窗组件属性接口
- * 继承自 AxModalProps（弹窗属性）和 AxFormProps（表单属性），组合了弹窗和表单的双重功能
- * @template T - 表单数据类型，必须是对象类型
- */
-export interface AxFormModalProps<T extends Record<string, any> = any> extends AxModalProps, Omit<AxFormProps<T>, 'size'> {
-    // 继承了弹窗的所有属性和表单的大部分属性（排除了 size，避免与弹窗尺寸冲突）
-}
-
-/**
- * AxFormModal 表单弹窗组件事件发射接口
- * @template T - 表单数据类型
- */
-export interface AxFormModalEmits<T extends Record<string, any> = any> {
-    /**
-     * 弹窗显示状态变化事件（用于 v-model:open 双向绑定）
-     * @param data - 新的显示状态（true/false）
-     */
-    'update:open': [data: boolean]
-
-    /**
-     * 确认按钮点击事件，触发表单验证和提交
-     * @param data - 验证通过后的表单数据
-     */
-    'confirm': [data: T]
-
-    /** 取消按钮点击事件或关闭弹窗时触发 */
-    'cancel': []
-}
-
-/**
- * AxFormModal 表单弹窗配置选项接口
- * 整合了弹窗属性、表单属性、事件处理和字段配置
- * @template T - 表单数据类型
- */
-export interface AxFormModalOptions<T extends Record<string, any> = any>
-    extends Omit<AxFormModalProps<T>, 'open'>,  // 排除 open 属性（由内部状态管理）
-        EmitsToProps<DrawerEmits>,              // 合并 Element Plus Drawer 的事件属性
-        EmitsToEventProps<AxFormModalEmits<T>> { // 合并自定义事件处理函数
-    /**
-     * 按钮配置映射表，用于配置弹窗中的操作按钮（确认、取消等）
-     * @see FieldsConfig - 字段配置类型
-     * @see AxButtonOptions - 按钮选项类型
-     */
-    buttonConfig?: FieldsConfig<AxButtonOptions>
-
-    /**
-     * 表单项配置映射表，用于配置弹窗内表单的各个字段
-     * @see FieldsConfig - 字段配置类型
-     * @see AxFormItemOptions - 表单项选项类型
-     */
-    fieldConfig?: FieldsConfig<AxFormItemOptions>
-}

package/src/modal/components/modal/index.ts

@@ -1,6 +0,0 @@
-import modal from './modal.vue';
-
-export * from './props';
-export const AxModal = modal;
-export type AxModalInstance = InstanceType<typeof modal>;
-export default AxModal;

package/src/modal/components/modal/modal.vue

@@ -1,127 +0,0 @@
-<template>
-  <Modal v-bind="{...modalProps,...attrs}" v-model="_open"
-         :header-class="'ax-modal-header'+' '+headerClass"
-         :footer-class="'ax-modal-footer'+' '+footerClass"
-         :body-class="'ax-modal-body'+' '+bodyClass"
-         :close-icon
-         :class="['ax-modal',className]"
-         ref="modalRef"
-         :show-close="false" >
-    <template #header v-if="title||showClose">
-      <div class="flex justify-between items-center overflow-hidden gap-1">
-        <div :title="title" class="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">{{title}}</div>
-        <ElIcon @click="close">
-          <Close/>
-        </ElIcon>
-      </div>
-    </template>
-    <template #default>
-      <slot></slot>
-    </template>
-    <template #footer v-if="slots.button||isDefault">
-      <template v-if="isDefault">
-        <ax-button v-bind="_confirmButton" @click="onConfirm"></ax-button>
-        <ax-button v-bind="_cancelButton" @click="close"></ax-button>
-      </template>
-      <slot name="button"></slot>
-    </template>
-  </Modal>
-</template>
-
-<script setup lang="ts">
-import type {AxModalProps, AxModalEmits} from "./props";
-import {useDefineProps} from "@aoao-y33/hooks";
-import {computed, ref, useAttrs, useSlots} from "vue";
-import {type DrawerInstance, ElDialog, ElDrawer,ElIcon} from "element-plus";
-import {AxButton, type AxButtonProps} from "@/button";
-import {Close} from "@element-plus/icons-vue";
-
-const {
-  type = 'dialog',
-  showClose = true,
-  open = false,
-  title = '',
-  isDefault = true,
-  confirmButton = {},
-  cancelButton = {},
-  className = "md:w-[30%]! w-[100%]!",
-  ...props
-} = defineProps<AxModalProps>();
-
-const emits = defineEmits<AxModalEmits>();
-
-const _confirmButton = useDefineProps<AxButtonProps>(confirmButton, {
-  text: '确定',
-  icon: 'CircleCheckFilled',
-  componentProps: {
-    type: 'primary',
-  }
-})
-
-const _cancelButton = useDefineProps<AxButtonProps>(cancelButton, {
-  text: '取消',
-  icon: 'CircleCloseFilled',
-  componentProps: {
-    type: 'default',
-  }
-})
-
-const slots = useSlots();
-
-const attrs = useAttrs();
-
-const modalProps = useDefineProps(props);
-
-const _open = computed({
-  get() {
-    return open;
-  },
-  set(value) {
-    emits('update:open', value);
-  }
-})
-
-const modalRef = ref<DrawerInstance>();
-
-const Modal = computed(() => {
-  return type === 'dialog' ? ElDialog : ElDrawer;
-})
-
-const close = ()=>{
-  modalRef.value?.handleClose();
-  emits("cancel");
-}
-
-const onConfirm=()=>{
-  emits("confirm");
-}
-
-const getModal =()=>{
-  return modalRef.value;
-}
-
-defineExpose({
-  getModal,
-  close
-})
-</script>
-
-<style lang="scss">
-.ax-modal{
-  padding: 0 !important;
-}
-.ax-modal-header{
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--el-border-color);
-}
-.ax-modal-body{
-  flex:1;
-  width: 100%;
-  height: 100%;
-  padding: 8px 12px;
-}
-.ax-modal-footer{
-  padding: 8px 12px;
-  border-top: 1px solid var(--el-border-color);
-}
-</style>

package/src/modal/components/modal/props.ts

@@ -1,78 +0,0 @@
-import type {DrawerProps,DrawerEmits} from "element-plus";
-import type {AxButtonOptions, AxButtonProps} from "@/button";
-import type {EmitsToEventProps} from "@aoao-y33/utils";
-import type {Component, EmitsToProps} from "vue";
-import type {FieldsConfig} from "@aoao-y33/hooks";
-
-/**
- * AxModal 弹窗组件属性接口
- * 继承自 Element Plus DrawerProps，扩展了通用弹窗功能
- * 支持 Drawer（抽屉）和 Dialog（对话框）两种展示模式
- */
-export interface AxModalProps extends DrawerProps{
-    /**
-     * 弹窗类型，决定使用哪种展示形式
-     * - 'drawer': 抽屉式弹窗，从屏幕边缘滑出
-     * - 'dialog': 对话框式弹窗，居中显示
-     * @default 'drawer'
-     */
-    type?:'drawer'|'dialog',
-
-    /** 弹窗标题，显示在弹窗顶部 */
-    title?:string
-
-    /** 弹窗的显示/隐藏状态，用于外部控制 */
-    open?:boolean
-
-    /** 自定义 CSS 类名，用于样式定制 */
-    className?:string
-
-    /** 确认按钮的配置项，用于自定义确认按钮的外观和行为 */
-    confirmButton?:AxButtonProps
-
-    /** 取消按钮的配置项，用于自定义取消按钮的外观和行为 */
-    cancelButton?:AxButtonProps
-
-    /** 是否使用默认配置，启用后将自动应用预设的弹窗样式和按钮 */
-    isDefault?:boolean
-}
-
-/**
- * AxModal 弹窗组件事件发射接口
- */
-export interface AxModalEmits{
-    /**
-     * 弹窗显示状态变化事件（用于 v-model:open 双向绑定）
-     * @param data - 新的显示状态（true/false）
-     */
-    'update:open':[data:boolean],
-
-    /** 取消按钮点击或关闭弹窗时触发 */
-    'cancel':[]
-
-    /** 确认按钮点击时触发 */
-    'confirm':[]
-}
-
-/**
- * AxModal 弹窗配置选项接口
- * 整合了弹窗属性、事件处理和动态内容配置
- */
-export interface AxModalOptions
-    extends Omit<AxModalProps, 'open'>,      // 排除 open 属性（由内部状态管理）
-        EmitsToEventProps<AxModalEmits>,      // 合并自定义事件处理函数
-        EmitsToProps<DrawerEmits>{            // 合并 Element Plus Drawer 的事件属性
-    /**
-     * 动态渲染的组件，用于在弹窗内容区域显示自定义组件
-     * @example
-     * component: UserFormComponent
-     */
-    component?:Component,
-
-    /**
-     * 按钮配置映射表，用于配置弹窗中的各种操作按钮
-     * @see FieldsConfig - 字段配置类型
-     * @see AxButtonOptions - 按钮选项类型
-     */
-    buttonConfig?:FieldsConfig<AxButtonOptions>
-}

package/src/modal/hoc/index.ts

@@ -1,3 +0,0 @@
-export * from './useModal';
-export * from './useFormModal';
-export * from './useModalExpose';