gi-component 0.0.10 → 0.0.11

package/package.json

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

package/packages/components/drawer/index.ts

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

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,27 @@ 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__footer {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    border-top: 1px solid var(--el-border-color);
+  }
 }