gi-component 0.0.6 → 0.0.8

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

@@ -36,10 +36,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { PageLayoutProps } from './type';
-import { computed, ref, useSlots } from 'vue';
-import { useBemClass } from '../../../hooks';
-import SplitButton from './split-button.vue';
+import type { PageLayoutProps } from './type'
+import { computed, ref, useSlots } from 'vue'
+import { useBemClass } from '../../../hooks'
+import SplitButton from './split-button.vue'
 
 const props = withDefaults(defineProps<PageLayoutProps>(), {
   size: 270,
@@ -49,43 +49,43 @@ const props = withDefaults(defineProps<PageLayoutProps>(), {
   headerStyle: () => ({}),
   toolStyle: () => ({}),
   bodyStyle: () => ({})
-});
+})
 
 defineSlots<{
-  header: () => void;
-  left: () => void;
-  tool: () => void;
-  default: () => void;
-}>();
+  header: () => void
+  left: () => void
+  tool: () => void
+  default: () => void
+}>()
 
-const slots = useSlots();
-const { b } = useBemClass();
-const size = ref(props.size);
-const collapsing = ref(false);
+const slots = useSlots()
+const { b } = useBemClass()
+const size = ref(props.size)
+const collapsing = ref(false)
 
 const getClass = computed(() => {
-  const arr: string[] = [b('page-layout')];
+  const arr: string[] = [b('page-layout')]
   if (props.bordered) {
-    arr.push(b('page-layout--bordered'));
+    arr.push(b('page-layout--bordered'))
   }
   if (slots.header) {
-    arr.push(b('page-layout--has-header'));
+    arr.push(b('page-layout--has-header'))
   }
   if (slots.tool) {
-    arr.push(b('page-layout--has-tool'));
+    arr.push(b('page-layout--has-tool'))
   }
   if (collapsing.value) {
-    arr.push(b('page-layout--collapsing'));
+    arr.push(b('page-layout--collapsing'))
   }
-  return arr.join(' ');
-});
+  return arr.join(' ')
+})
 
 function handleClick() {
-  collapsing.value = true;
+  collapsing.value = true
   setTimeout(() => {
-    collapsing.value = false;
-  }, 300);
-  size.value = Number(size.value) > 30 ? 0 : props.size;
+    collapsing.value = false
+  }, 300)
+  size.value = Number(size.value) > 30 ? 0 : props.size
 }
 </script>
 

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

@@ -8,29 +8,29 @@
 </template>
 
 <script setup lang="ts">
-import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
-import { computed } from 'vue';
-import { useBemClass } from '../../../hooks';
+import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { useBemClass } from '../../../hooks'
 
 /** 按钮类型 */
-type ButtonType = 'default' | 'circle';
+type ButtonType = 'default' | 'circle'
 
 /** 组件属性定义 */
 interface Props {
   /** 是否折叠状态 */
-  collapsed?: boolean;
+  collapsed?: boolean
   /** 按钮类型 */
-  type?: ButtonType;
+  type?: ButtonType
   /** 图标大小 */
-  iconSize?: number;
+  iconSize?: number
   /** 是否禁用 */
-  disabled?: boolean;
+  disabled?: boolean
 }
 
 /** 组件事件定义 */
 interface Emits {
-  (e: 'click'): void;
-  (e: 'update:collapsed', value: boolean): void;
+  (e: 'click'): void
+  (e: 'update:collapsed', value: boolean): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -38,29 +38,29 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'circle',
   iconSize: 10,
   disabled: false
-});
+})
 
-const emit = defineEmits<Emits>();
-const { b } = useBemClass();
+const emit = defineEmits<Emits>()
+const { b } = useBemClass()
 
 /** 计算按钮类名 */
 const getClass = computed(() => {
-  const arr: string[] = [b('split-button'), b(`split-button--${props.type}`)];
+  const arr: string[] = [b('split-button'), b(`split-button--${props.type}`)]
   if (props.collapsed) {
-    arr.push(b('split-button--collapsed'));
+    arr.push(b('split-button--collapsed'))
   }
   if (props.disabled) {
-    arr.push(b('split-button--disabled'));
+    arr.push(b('split-button--disabled'))
   }
-  return arr.join(' ');
-});
+  return arr.join(' ')
+})
 
 /** 处理点击事件 */
 const handleClick = () => {
-  if (props.disabled) return;
-  emit('click');
-  emit('update:collapsed', !props.collapsed);
-};
+  if (props.disabled) return
+  emit('click')
+  emit('update:collapsed', !props.collapsed)
+}
 </script>
 
 <style lang="scss" scoped>

package/packages/components/page-layout/src/type.ts

@@ -1,12 +1,12 @@
-import type { SplitterPanelProps } from 'element-plus';
-import type { CSSProperties } from 'vue';
+import type { SplitterPanelProps } from 'element-plus'
+import type { CSSProperties } from 'vue'
 
 export interface PageLayoutProps {
-  size?: SplitterPanelProps['size'];
-  bordered?: boolean;
-  collapse?: boolean;
-  leftStyle?: CSSProperties;
-  headerStyle?: CSSProperties;
-  toolStyle?: CSSProperties;
-  bodyStyle?: CSSProperties;
+  size?: SplitterPanelProps['size']
+  bordered?: boolean
+  collapse?: boolean
+  leftStyle?: CSSProperties
+  headerStyle?: CSSProperties
+  toolStyle?: CSSProperties
+  bodyStyle?: CSSProperties
 }

package/packages/components/table/index.ts

@@ -1,5 +1,5 @@
-import Table from './src/table.vue';
+import Table from './src/table.vue'
 
-export type TableInstance = InstanceType<typeof Table>;
-export * from './src/type';
-export default Table;
+export type TableInstance = InstanceType<typeof Table>
+export * from './src/type'
+export default Table

package/packages/components/table/src/TableColumn.vue

@@ -1,9 +1,9 @@
 <template>
   <el-table-column v-bind="columnProps">
     <!-- 处理render函数 -->
-    <template v-if="column.render" v-slot="scope">
+    <template v-if="column.render" #default="scope">
       <template v-if="typeof column.render(scope) === 'string'">{{ column.render(scope) }}</template>
-      <component v-else :is="column.render(scope)" />
+      <component :is="column.render(scope)" v-else />
     </template>
 
     <!-- 处理插槽内容 -->
@@ -24,19 +24,19 @@
 </template>
 
 <script lang="ts" setup>
-import type { TableColumnItem } from './type';
-import { computed } from 'vue';
-import TableColumn from './TableColumn.vue';
+import type { TableColumnItem } from './type'
+import { computed } from 'vue'
+import TableColumn from './TableColumn.vue'
 
 const props = defineProps<{
-  column: TableColumnItem;
-}>();
+  column: TableColumnItem
+}>()
 
 // 计算el-table-column需要的属性
 const columnProps = computed(() => {
-  const { slotName, render, children, ...restProps } = props.column;
-  return restProps;
-});
+  const { slotName, render, children, ...restProps } = props.column
+  return restProps
+})
 </script>
 
 <style scoped></style>

package/packages/components/table/src/table.vue

@@ -18,19 +18,19 @@
 </template>
 
 <script lang="ts" setup>
-import type { TableProps } from './type';
-import { computed, useAttrs, useTemplateRef } from 'vue';
-import { useBemClass } from '../../../hooks';
-import TableColumn from './TableColumn.vue';
+import type { TableProps } from './type'
+import { computed, useAttrs, useTemplateRef } from 'vue'
+import { useBemClass } from '../../../hooks'
+import TableColumn from './TableColumn.vue'
 
 const props = withDefaults(defineProps<TableProps>(), {
   columns: () => [],
   pagination: () => ({})
-});
+})
 
-const attrs = useAttrs();
-const { b } = useBemClass();
-const tableRef = useTemplateRef('tableRef');
+const attrs = useAttrs()
+const { b } = useBemClass()
+const tableRef = useTemplateRef('tableRef')
 
 const tableProps = computed(() => {
   return {
@@ -38,8 +38,8 @@ const tableProps = computed(() => {
     ...props,
     columns: undefined,
     pagination: undefined
-  };
-});
+  }
+})
 
 const paginationProps = computed(() => {
   return {
@@ -47,17 +47,17 @@ const paginationProps = computed(() => {
     layout: 'prev, pager, next, sizes, total',
     pageSizes: [10, 20, 50, 100],
     ...props.pagination
-  };
-});
+  }
+})
 
 function handleSizeChange(size: number) {
   // @ts-ignore
-  props.pagination.pageSize = size;
+  props.pagination.pageSize = size
 }
 
 function handleCurrentChange(page: number) {
   // @ts-ignore
-  props.pagination.currentPage = page;
+  props.pagination.currentPage = page
 }
 
 defineExpose({

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

@@ -1,22 +1,14 @@
-import type {
-  TableProps as ElTableProps,
-  PaginationProps,
-  TableColumnCtx,
-  TableColumnInstance,
-} from 'element-plus';
-import type { ExtractPropTypes, VNode } from 'vue';
+import type { TableProps as ElTableProps, PaginationProps, TableColumnInstance } from 'element-plus'
+import type { ExtractPropTypes, VNode } from 'vue'
 
 type DefaultRow = Record<PropertyKey, any>
 export interface TableColumnItem<T extends DefaultRow = DefaultRow> extends Omit<TableColumnInstance['$props'], never> {
-  slotName?: string;
-  children?: TableColumnItem[];
-  render?: (scope: { $index: number; cellIndex: number; column: TableColumnItem<T>; row: T }) => VNode | VNode[] | string;
+  slotName?: string
+  children?: TableColumnItem[]
+  render?: (scope: { $index: number, cellIndex: number, column: TableColumnItem<T>, row: T }) => VNode | VNode[] | string
 }
 
-export interface TableProps
-  extends ExtractPropTypes<
-    ElTableProps<Record<string | number | symbol, any>>
-  > {
-  columns?: TableColumnItem[];
-  pagination?: Partial<PaginationProps>;
+export interface TableProps extends ExtractPropTypes<ElTableProps<Record<string | number | symbol, any>>> {
+  columns?: TableColumnItem[]
+  pagination?: Partial<PaginationProps>
 }

package/packages/components/tabs/index.ts

@@ -1,5 +1,5 @@
-import Tabs from './src/tabs.vue';
+import Tabs from './src/tabs.vue'
 
-export type TabsInstance = InstanceType<typeof Tabs>;
-export * from './src/type';
-export default Tabs;
+export type TabsInstance = InstanceType<typeof Tabs>
+export * from './src/type'
+export default Tabs

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

@@ -2,19 +2,9 @@
   <div :class="getClass">
     <div :class="b('tabs__default')">
       <slot>
-        <el-tabs
-          v-model="model"
-          :type="props.type"
-          :stretch="props.stretch"
-          @tab-click="(p, e) => emits('tabClick', p, e)"
-          @tab-change="emits('tabChange', $event)"
-        >
-          <el-tab-pane
-            v-for="item in props.options"
-            :key="item.name"
-            :name="item.name"
-            :disabled="item?.disabled"
-          >
+        <el-tabs v-model="model" :type="props.type" :stretch="props.stretch"
+          @tab-click="(p, e) => emits('tabClick', p, e)" @tab-change="emits('tabChange', $event as any)">
+          <el-tab-pane v-for="item in props.options" :key="item.name" :name="item.name" :disabled="item?.disabled">
             <template #label>
               <slot name="label" :data="item">{{ item.label }}</slot>
             </template>
@@ -29,42 +19,42 @@
 </template>
 
 <script setup lang="ts">
-import type { TabsProps as ElTabsProps, TabsPaneContext } from 'element-plus';
-import type { TabsOptionItem, TabsProps } from './type.ts';
-import { computed, useSlots } from 'vue';
-import { useBemClass } from '../../../hooks';
+import type { TabsProps as ElTabsProps, TabsPaneContext } from 'element-plus'
+import type { TabsOptionItem, TabsProps } from './type.ts'
+import { computed, useSlots } from 'vue'
+import { useBemClass } from '../../../hooks'
 
-const model = defineModel<ElTabsProps['modelValue']>();
+const model = defineModel<ElTabsProps['modelValue']>()
 
 const props = withDefaults(defineProps<TabsProps>(), {
   type: '',
   options: () => [],
   size: 'medium',
   inner: false
-});
+})
 
 const emits = defineEmits<{
-  (e: 'tabClick', pane: TabsPaneContext, ev: Event): void;
-  (e: 'tabChange', value: string): void;
-}>();
+  (e: 'tabClick', pane: TabsPaneContext, ev: Event): void
+  (e: 'tabChange', value: string): void
+}>()
 
 defineSlots<{
-  default: () => void;
-  extra: () => void;
-  label: (e: { data: TabsOptionItem }) => void;
-}>();
+  default: () => void
+  extra: () => void
+  label: (e: { data: TabsOptionItem }) => void
+}>()
 
-const slots = useSlots();
-const { b } = useBemClass();
+const slots = useSlots()
+const { b } = useBemClass()
 
 const getClass = computed(() => {
-  const arr: string[] = [b('tabs')];
-  arr.push(b(`tabs--${props.size}`));
+  const arr: string[] = [b('tabs')]
+  arr.push(b(`tabs--${props.size}`))
   if (props.inner) {
-    arr.push(b('tabs--inner'));
+    arr.push(b('tabs--inner'))
   }
-  return arr.join(' ');
-});
+  return arr.join(' ')
+})
 </script>
 
 <style lang="scss" scoped>
@@ -113,7 +103,7 @@ const getClass = computed(() => {
 }
 
 :deep(.el-tabs--card) {
-  > .el-tabs__header {
+  >.el-tabs__header {
     border-bottom: none;
   }
 }
@@ -121,11 +111,11 @@ const getClass = computed(() => {
 :deep(.el-tabs--border-card) {
   border-bottom: none;
 
-  > .el-tabs__content {
+  >.el-tabs__content {
     display: none;
   }
 
-  > .el-tabs__header {
+  >.el-tabs__header {
     border-bottom: none;
   }
 }

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

@@ -1,15 +1,15 @@
-import type { TabsProps as ElTabsProps } from 'element-plus';
+import type { TabsProps as ElTabsProps } from 'element-plus'
 
 export type TabsOptionItem = {
-  label: string;
-  name: string;
-  disabled?: boolean;
-};
+  label: string
+  name: string
+  disabled?: boolean
+}
 
 export interface TabsProps
   extends Partial<Pick<ElTabsProps, 'type' | 'stretch'>> {
-  type?: ElTabsProps['type'];
-  options?: TabsOptionItem[];
-  size?: 'small' | 'medium';
-  inner?: boolean; // 内嵌模式
+  type?: ElTabsProps['type']
+  options?: TabsOptionItem[]
+  size?: 'small' | 'medium'
+  inner?: boolean // 内嵌模式
 }

package/packages/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './useBemClass';
-export * from './useTable';
+export * from './useBemClass'
+export * from './useTable'

package/packages/hooks/useBemClass.ts

@@ -1,11 +1,11 @@
-import { getCurrentInstance } from 'vue';
+import { getCurrentInstance } from 'vue'
 
 export function useBemClass() {
-  const instance = getCurrentInstance();
-  const configPrefix =
-    instance?.appContext.config.globalProperties.$config?.prefix || 'gi';
-  const prefix = configPrefix.toLowerCase();
-  const b = (name: string = '') => `${prefix}-${name ? `${name}` : ''}`;
+  const instance = getCurrentInstance()
+  const configPrefix
+    = instance?.appContext.config.globalProperties.$config?.prefix || 'gi'
+  const prefix = configPrefix.toLowerCase()
+  const b = (name: string = '') => `${prefix}-${name ? `${name}` : ''}`
 
-  return { b };
+  return { b }
 }

package/packages/hooks/useTable.ts

@@ -1,6 +1,5 @@
-
-import { ElMessageBox } from 'element-plus'
-import { reactive, ref, getCurrentInstance, type Ref } from 'vue'
+import type { Ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 interface Options<T, U> {
   onSuccess?: () => void
@@ -20,7 +19,7 @@ interface PageResult<T> {
   total: number
 }
 
-export interface UseTablePaginationParams { page: number; size: number; }
+export interface UseTablePaginationParams { page: number, size: number }
 
 export interface UseTableApi<T> {
   (params: UseTablePaginationParams): Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>
@@ -46,7 +45,7 @@ export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Optio
     onSizeChange: (size: number) => {
       pagination.pageSize = size
       getTableData()
-    },
+    }
   })
 
   function setTotal(total: number) {
@@ -93,6 +92,6 @@ export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Optio
     /** 搜索 */
     search,
     /** 刷新 */
-    refresh,
+    refresh
   }
-}
+}

package/packages/index.ts

@@ -1,26 +1,26 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 
-import Button from './components/button';
-import Card from './components/card';
-import Dialog from './components/dialog';
-import EditTable from './components/edit-table';
-import Form from './components/form';
-import GridItem from './components/grid/src/grid-item.vue';
-import Grid from './components/grid/src/grid.vue';
-import InputGroup from './components/input-group';
-import InputSearch from './components/input-search';
-import PageLayout from './components/page-layout';
-import Table from './components/table';
-import Tabs from './components/tabs';
-import './styles/index.scss';
+import Button from './components/button'
+import Card from './components/card'
+import Dialog from './components/dialog'
+import EditTable from './components/edit-table'
+import Form from './components/form'
+import GridItem from './components/grid/src/grid-item.vue'
+import Grid from './components/grid/src/grid.vue'
+import InputGroup from './components/input-group'
+import InputSearch from './components/input-search'
+import PageLayout from './components/page-layout'
+import Table from './components/table'
+import Tabs from './components/tabs'
+import './styles/index.scss'
 
-export * from './components/dialog';
-export * from './components/edit-table';
-export * from './components/form';
-export * from './components/table';
-export * from './components/tabs';
-export * from './hooks';
-export * from './utils';
+export * from './components/dialog'
+export * from './components/edit-table'
+export * from './components/form'
+export * from './components/table'
+export * from './components/tabs'
+export * from './hooks'
+export * from './utils'
 
 const components = {
   Button,
@@ -35,49 +35,49 @@ const components = {
   Dialog,
   EditTable,
   Table
-};
+}
 
 // 导出Gi前缀的组件并添加明确类型注解
-export const GiButton: typeof Button = Button;
-export const GiCard: typeof Card = Card;
-export const GiTabs: typeof Tabs = Tabs;
-export const GiInputGroup: typeof InputGroup = InputGroup;
-export const GiInputSearch: typeof InputSearch = InputSearch;
-export const GiGrid: typeof Grid = Grid;
-export const GiGridItem: typeof GridItem = GridItem;
-export const GiForm: typeof Form = Form;
-export const GiPageLayout: typeof PageLayout = PageLayout;
-export const GiDialog: typeof Dialog = Dialog;
-export const GiEditTable: typeof EditTable = EditTable;
-export const GiTable: typeof Table = Table;
+export const GiButton: typeof Button = Button
+export const GiCard: typeof Card = Card
+export const GiTabs: typeof Tabs = Tabs
+export const GiInputGroup: typeof InputGroup = InputGroup
+export const GiInputSearch: typeof InputSearch = InputSearch
+export const GiGrid: typeof Grid = Grid
+export const GiGridItem: typeof GridItem = GridItem
+export const GiForm: typeof Form = Form
+export const GiPageLayout: typeof PageLayout = PageLayout
+export const GiDialog: typeof Dialog = Dialog
+export const GiEditTable: typeof EditTable = EditTable
+export const GiTable: typeof Table = Table
 
 function capitalizeWord(word: string) {
   // 检查输入是否为字符串且不为空
   if (typeof word !== 'string' || word.length === 0) {
-    return word;
+    return word
   }
   // 首字母大写，其余字母小写
-  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
 }
 
 // 全局默认配置
 export interface Config {
-  prefix?: string; // 组件前缀
+  prefix?: string // 组件前缀
   /** 输入框是否可清除 */
-  clearable?: boolean;
+  clearable?: boolean
   /** 字典请求方法 */
-  dictRequest?: () => Promise<any>;
+  dictRequest?: () => Promise<any>
   /** 格式化响应数据, 用于useTable */
   // formatResponse?: (data: any) => any;
 }
 
 export default {
   install(app: App, options?: Config) {
-    const prefix = options?.prefix || 'Gi';
+    const prefix = options?.prefix || 'Gi'
     Object.entries(components).forEach(([name, component]) => {
-      app.component(`${capitalizeWord(prefix)}${name}`, component);
-    });
+      app.component(`${capitalizeWord(prefix)}${name}`, component)
+    })
     // 将配置保存到全局属性
-    app.config.globalProperties.$config = options;
+    app.config.globalProperties.$config = options
   }
-};
+}