gi-component 0.0.10 → 0.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/drawer/index.ts

@@ -0,0 +1,6 @@
+import Drawer from './src/drawer.vue'
+
+export type DrawerInstance = InstanceType<typeof Drawer>
+export * from './src/drawer'
+export * from './src/type'
+export default Drawer

package/packages/components/drawer/src/drawer.ts

@@ -0,0 +1,84 @@
+import type { DrawerInstance } from '../index'
+import ElementPlus from 'element-plus'
+import { createApp, h, ref } from 'vue'
+import GiDrawer from './drawer.vue'
+
+export type DrawerOptions = Partial<DrawerInstance['$props']>
+
+export interface DrawerReturnObject {
+  close: () => void
+  update: (newProps?: Record<string, any>) => void
+}
+
+const DEF_OPTIONS: DrawerOptions = {
+
+}
+
+export function createDrawer() {
+  const Drawer = {
+    _context: {},
+    // 核心创建方法
+    create(options: DrawerOptions): DrawerReturnObject {
+      const mergedOptions = { ...DEF_OPTIONS, ...options }
+      // 创建容器
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+
+      // 状态管理
+      const visible = ref(true)
+      const dialogOptions = ref(mergedOptions || {})
+
+      // 创建弹窗应用
+      const drawerApp = createApp({
+        setup() {
+          // 关闭处理
+          const closed = () => {
+            drawerApp.unmount()
+            container.remove()
+          }
+
+          return () =>
+            h(GiDrawer, {
+              ...dialogOptions.value,
+              'modelValue': visible.value,
+              'onUpdate:modelValue': (val: boolean) => (visible.value = val),
+              'onClosed': () => closed()
+            })
+        }
+      })
+
+      drawerApp.use(ElementPlus)
+
+      // 继承主应用的上下文
+      Object.assign(drawerApp._context, Drawer._context)
+
+      // 挂载
+      drawerApp.mount(container)
+
+      return {
+        /** 关闭抽屉 */
+        close: () => {
+          visible.value = false
+          setTimeout(() => {
+            drawerApp.unmount()
+            container.remove()
+          }, 300)
+        },
+        /** 更新抽屉 */
+        update: (newProps?: Record<string, any>) => {
+          dialogOptions.value = { ...dialogOptions.value, ...newProps }
+        }
+      }
+    },
+
+    /** 抽屉-打开 */
+    open(options: DrawerOptions) {
+      return this.create(options)
+    }
+  }
+
+  return Drawer
+}
+
+// 默认导出实例
+export const Drawer = createDrawer()

package/packages/components/drawer/src/drawer.vue

@@ -0,0 +1,114 @@
+<template>
+  <ElDrawer v-bind="dialogProps" v-model="visible" :class="getClass" :title="props.title" :style="{ ...props.style }">
+    <slot>
+      <template v-if="typeof props.content === 'string'">
+        <p>{{ props.content }}</p>
+      </template>
+      <template v-if="typeof props.content === 'function'">
+        <component :is="props?.content?.()"></component>
+      </template>
+    </slot>
+    <template v-if="props.footer" #footer>
+      <slot name="footer">
+        <template v-if="typeof props.footer === 'boolean'">
+          <ElSpace :size="10">
+            <ElButton v-bind="props.cancelButtonProps" @click="handleCancel">
+              {{ props.cancelText }}
+            </ElButton>
+            <ElButton type="primary" v-bind="props.okButtonProps" :loading="okLoading" @click="handleOk">
+              {{ props.okText }}
+            </ElButton>
+          </ElSpace>
+        </template>
+        <template v-else>
+          <component :is="props.footer()"></component>
+        </template>
+      </slot>
+    </template>
+  </ElDrawer>
+</template>
+
+<script lang="ts" setup>
+import type { VNode } from 'vue'
+import type { DrawerProps } from './type'
+import { ElButton, ElDrawer, ElSpace } from 'element-plus'
+import { computed, defineProps, defineSlots, ref } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const visible = defineModel('modelValue', {
+  type: Boolean,
+  default: false
+})
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  title: '',
+  withHeader: true,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  lockScroll: true,
+  modal: true,
+  showClose: true,
+  footer: true,
+  okText: '确认',
+  cancelText: '取消',
+  size: '300px',
+  appendTo: 'body'
+})
+
+defineSlots<{
+  title: () => VNode
+  footer: () => VNode
+  default: () => VNode
+}>()
+
+const { b } = useBemClass()
+
+const getClass = computed(() => {
+  const arr: string[] = [b('drawer')]
+  return arr.join(' ')
+})
+
+const dialogProps = computed(() => {
+  return {
+    ...props,
+    content: undefined,
+    footer: undefined,
+    okText: undefined,
+    cancelText: undefined,
+    okButtonProps: undefined,
+    cancelButtonProps: undefined,
+    onOk: undefined,
+    onBeforeOk: undefined,
+    onCancel: undefined,
+    simple: undefined
+  }
+})
+
+const okLoading = ref(false)
+
+const handleCancel = () => {
+  props.onCancel?.()
+  visible.value = false
+}
+
+const handleOk = async () => {
+  if (props.onBeforeOk) {
+    try {
+      okLoading.value = true
+      const flag = await props.onBeforeOk()
+      okLoading.value = false
+      if (flag) {
+        visible.value = false
+      }
+    } catch (error) {
+      console.error('error', error)
+      okLoading.value = false
+    }
+  } else {
+    props.onOk?.()
+    visible.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/drawer/src/type.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps, DrawerProps as ElDrawerProps } from 'element-plus'
+import type { CSSProperties, VNode } from 'vue'
+
+export interface DrawerProps extends Partial<ElDrawerProps> {
+  content?: string | (() => VNode)
+  footer?: boolean | (() => VNode)
+  okText?: string
+  cancelText?: string
+  okButtonProps?: Partial<ButtonProps>
+  cancelButtonProps?: Partial<ButtonProps>
+  style?: CSSProperties
+  onOk?: () => void
+  onBeforeOk?: () => Promise<boolean>
+  onCancel?: () => void
+}

package/packages/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     GiButton: typeof import('./components/button/src/button.vue')['default']
     GiCard: typeof import('./components/card/src/card.vue')['default']
     GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
+    GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
     GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
     GiForm: typeof import('./components/form/src/form.vue')['default']
     GiGrid: typeof import('./components/grid/src/grid.vue')['default']

package/packages/index.ts

@@ -3,6 +3,7 @@ import type { App } from 'vue'
 import Button from './components/button'
 import Card from './components/card'
 import Dialog from './components/dialog'
+import Drawer from './components/drawer'
 import EditTable from './components/edit-table'
 import Form from './components/form'
 import GridItem from './components/grid/src/grid-item.vue'
@@ -16,6 +17,7 @@ import TreeTransfer from './components/tree-transfer'
 import './styles/index.scss'
 
 export * from './components/dialog'
+export * from './components/drawer'
 export * from './components/edit-table'
 export * from './components/form'
 export * from './components/table'
@@ -26,6 +28,7 @@ export * from './utils'
 const components = {
   Button,
   Card,
+  Drawer,
   Tabs,
   InputGroup,
   InputSearch,
@@ -42,6 +45,7 @@ const components = {
 // 导出Gi前缀的组件并添加明确类型注解
 export const GiButton: typeof Button = Button
 export const GiCard: typeof Card = Card
+export const GiDrawer: typeof Drawer = Drawer
 export const GiTabs: typeof Tabs = Tabs
 export const GiInputGroup: typeof InputGroup = InputGroup
 export const GiInputSearch: typeof InputSearch = InputSearch

package/packages/styles/index.scss

@@ -51,12 +51,6 @@ body {
   }
 }
 
-.el-dialog__headerbtn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .gi-w-full {
   width: 100%;
 }
@@ -203,4 +197,31 @@ body {
   .el-dialog__footer {
     border-top: none;
   }
+}
+
+.el-drawer[role=dialog] {
+  --el-drawer-padding-primary: 16px;
+}
+
+.el-drawer {
+  .el-drawer__header {
+    height: 48px;
+    margin-bottom: 0;
+    padding-top: 0;
+    border-bottom: 1px solid var(--el-border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .el-drawer__body {
+    font-size: 14px;
+  }
+
+  .el-drawer__footer {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    border-top: 1px solid var(--el-border-color);
+  }
 }