gi-component 0.0.33 → 0.0.35

package/dist/types/tool.d.ts

@@ -0,0 +1,6 @@
+type AllKeys<T> = T extends any ? keyof T : never;
+type UnionType<T, K extends PropertyKey> = T extends any ? K extends keyof T ? T[K] : never : never;
+export type MergeMultiple<T extends any[]> = {
+    [K in AllKeys<T[number]>]: UnionType<T[number], K>;
+};
+export {};

package/dist/utils/createSelectDialog.d.ts

@@ -0,0 +1,29 @@
+import { Component } from 'vue';
+import { DialogOptions } from '../index';
+interface CreateSelectDialogParams extends Omit<DialogOptions, 'content' | 'onOk' | 'onBeforeOk'> {
+    component: Component;
+    componentProps?: Record<string, any>;
+    tip?: string;
+}
+interface DefaultOption {
+    queryParams?: Record<string, any>;
+    componentProps?: Record<string, any>;
+}
+type DialogOption<T, Q extends DefaultOption = DefaultOption> = {
+    title?: string;
+    multiple?: boolean;
+    queryParams?: (Q extends {
+        queryParams: infer P;
+    } ? P : DefaultOption['queryParams']);
+    componentProps?: (Q extends {
+        componentProps: infer P;
+    } ? P : DefaultOption['componentProps']);
+    onOk?: (data: T) => void;
+    onBeforeOk?: (data: T) => Promise<boolean>;
+};
+/**
+ * 创建选择弹窗
+ * @description component组件必须暴露一个getSelectedData方法
+ */
+export declare const createSelectDialog: <T, Q extends DefaultOption = DefaultOption>(params: CreateSelectDialogParams) => (options: DialogOption<T, Q>) => void;
+export {};

package/dist/utils/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",
@@ -20,6 +20,15 @@
   "sideEffects": [
     "packages/components/dialog/src/dialog.ts"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/gi.css": "./dist/gi.css",
+    "./dist/components.d.ts": "./packages/components.d.ts"
+  },
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package/packages/components/card/src/card.vue

@@ -5,7 +5,9 @@
         <slot name="title">{{ props.title }}</slot>
       </div>
       <div :class="b('card-header__extra')">
-        <slot name="extra">{{ props.extra }}</slot>
+        <ElSpace>
+          <slot name="extra">{{ props.extra }}</slot>
+        </ElSpace>
       </div>
     </section>
     <section :class="b('card-body')" :style="props.bodyStyle">
@@ -19,6 +21,7 @@
 
 <script lang="ts" setup>
 import type { CardProps } from './type'
+import { ElSpace } from 'element-plus'
 import { computed, useSlots } from 'vue'
 import { useBemClass } from '../../../hooks'
 
@@ -73,10 +76,10 @@ const getHeaderClass = computed(() => {
   flex-direction: column;
   overflow: hidden;
   box-sizing: border-box;
-  --card-padding-x: var(--padding-x);
-  --card-padding-x-small: var(--padding-x-small);
-  --card-padding-y: var(--padding-y);
-  --card-padding-y-small: var(--padding-y-small);
+  --card-padding-x: var(--padding);
+  --card-padding-x-small: 10px;
+  --card-padding-y: var(--padding);
+  --card-padding-y-small: 10px;
 
   &--bordered {
     border: 1px solid var(--el-border-color);
@@ -137,6 +140,7 @@ const getHeaderClass = computed(() => {
 }
 
 .#{a.$prefix}-card--inner {
+
   .#{a.$prefix}-card-header,
   .#{a.$prefix}-card-body,
   .#{a.$prefix}-card-footer {

package/packages/components/dialog/src/dialog-content.vue

@@ -33,11 +33,6 @@ const { b } = useBemClass()
 @use '../../../styles/var.scss' as a;
 
 .#{a.$prefix}-dialog-content {
-  .el-message-box__status {
-    width: 24px;
-    height: 24px;
-  }
-
   .el-message-box__message {
     font-size: 15px;
   }

package/packages/components/page-layout/src/page-layout.vue

@@ -118,7 +118,7 @@ function handleClick() {
 }
 
 .#{a.$prefix}-page-layout__header {
-  padding: var(--padding-x);
+  padding: var(--padding);
   padding-bottom: 0;
   border-bottom: 1px solid var(--el-border-color);
   box-sizing: border-box;
@@ -126,7 +126,7 @@ function handleClick() {
 
 .#{a.$prefix}-page-layout__tool {
   width: 100%;
-  padding: var(--padding-x);
+  padding: var(--padding);
   padding-bottom: 0;
   display: flex;
   justify-content: end;
@@ -136,7 +136,7 @@ function handleClick() {
 
 .#{a.$prefix}-page-layout__body {
   flex: 1;
-  padding: var(--padding-x);
+  padding: var(--padding);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -144,25 +144,24 @@ function handleClick() {
   box-sizing: border-box;
 }
 
-.#{a.$prefix}-page-layout__split {
-  width: 0;
-  height: auto;
-  position: relative;
-}
-
 .#{a.$prefix}-page-layout--has-header {
   .#{a.$prefix}-page-layout__tool {
-    padding-top: var(--padding-y);
+    padding-top: 10px;
   }
 }
 
-.#{a.$prefix}-page-layout--has-header,
 .#{a.$prefix}-page-layout--has-tool {
   .#{a.$prefix}-page-layout__body {
-    padding-top: var(--padding-y);
+    padding-top: 10px;
   }
 }
 
+.#{a.$prefix}-page-layout__split {
+  width: 0;
+  height: auto;
+  position: relative;
+}
+
 .#{a.$prefix}-page-layout--collapsing {
   :deep(.el-splitter-panel) {
     transition: flex-basis 0.3s;

package/packages/components/tabs/src/tabs.vue

@@ -71,7 +71,7 @@ const getClass = computed(() => {
 
 .#{a.$prefix}-tabs {
   width: 100%;
-  padding: 0 var(--padding-x);
+  padding: 0 var(--padding);
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--el-border-color);
@@ -122,7 +122,7 @@ const getClass = computed(() => {
 }
 
 .#{a.$prefix}-tabs--small {
-  padding: 0 var(--padding-x-small);
+  padding: 0 10px;
 
   :deep(.el-tabs) {
     --el-tabs-header-height: 32px;

package/packages/styles/index.scss

@@ -5,11 +5,6 @@ body {
   // 主要作用于页面
   --padding: 14px;
   --margin: 14px;
-  // 主要作用于内置组件（不建议使用）
-  --padding-x: 14px;
-  --padding-x-small: 10px;
-  --padding-y: 12px;
-  --padding-y-small: 8px;
 }
 
 .gi-table .el-table {