gi-component 0.0.6 → 0.0.8

package/packages/components/grid/src/hook/use-responsive-state.ts

@@ -1,16 +1,16 @@
-import type { Ref } from 'vue';
-import type { ResponsiveValue } from '../interface';
-import type { ScreenMap } from '../utils/responsive-observe';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { isObject } from '../utils/is';
+import type { Ref } from 'vue'
+import type { ResponsiveValue } from '../interface'
+import type { ScreenMap } from '../utils/responsive-observe'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { isObject } from '../utils/is'
 import ResponsiveObserve, {
   responsiveArray
-} from '../utils/responsive-observe';
+} from '../utils/responsive-observe'
 
 function isResponsiveValue(
   val: number | ResponsiveValue
 ): val is ResponsiveValue {
-  return isObject(val);
+  return isObject(val)
 }
 
 export function useResponsiveState(
@@ -25,42 +25,42 @@ export function useResponsiveState(
     lg: true,
     xl: true,
     xxl: true
-  });
+  })
   const result = computed(() => {
-    let res = defaultVal;
+    let res = defaultVal
     if (isResponsiveValue(val.value)) {
       for (let i = 0; i < responsiveArray.length; i++) {
-        const breakpoint = responsiveArray[i];
+        const breakpoint = responsiveArray[i]
         if (
-          (screens.value[breakpoint] ||
-            (breakpoint === 'xs' && fallbackToXs)) &&
-          val.value[breakpoint] !== undefined
+          (screens.value[breakpoint]
+            || (breakpoint === 'xs' && fallbackToXs))
+          && val.value[breakpoint] !== undefined
         ) {
-          res = val.value[breakpoint] as number;
-          break;
+          res = val.value[breakpoint] as number
+          break
         }
       }
     } else {
-      res = val.value;
+      res = val.value
     }
-    return res;
-  });
+    return res
+  })
 
-  let subscribeToken = '';
+  let subscribeToken = ''
 
   onMounted(() => {
-    subscribeToken = ResponsiveObserve.subscribe(screensVal => {
+    subscribeToken = ResponsiveObserve.subscribe((screensVal) => {
       if (isResponsiveValue(val.value)) {
-        screens.value = screensVal;
+        screens.value = screensVal
       }
-    });
-  });
+    })
+  })
 
   onUnmounted(() => {
     if (subscribeToken) {
-      ResponsiveObserve.unsubscribe(subscribeToken);
+      ResponsiveObserve.unsubscribe(subscribeToken)
     }
-  });
+  })
 
-  return result;
+  return result
 }

package/packages/components/grid/src/hook/use-responsive-value.ts

@@ -1,36 +1,36 @@
-import type { Ref } from 'vue';
-import type { ResponsiveValue } from '../interface';
-import { computed } from 'vue';
-import { isNumber, isObject } from '../utils/is';
-import { responsiveArray } from '../utils/responsive-observe';
+import type { Ref } from 'vue'
+import type { ResponsiveValue } from '../interface'
+import { computed } from 'vue'
+import { isNumber, isObject } from '../utils/is'
+import { responsiveArray } from '../utils/responsive-observe'
 
 export function useResponsiveValue(
   props: Ref<{
-    val: number;
-    key: string;
-    xs?: number | { [key: string]: any };
-    sm?: number | { [key: string]: any };
-    md?: number | { [key: string]: any };
-    lg?: number | { [key: string]: any };
-    xl?: number | { [key: string]: any };
-    xxl?: number | { [key: string]: any };
+    val: number
+    key: string
+    xs?: number | { [key: string]: any }
+    sm?: number | { [key: string]: any }
+    md?: number | { [key: string]: any }
+    lg?: number | { [key: string]: any }
+    xl?: number | { [key: string]: any }
+    xxl?: number | { [key: string]: any }
   }>
 ) {
   const value = computed(() => {
-    const { val, key, xs, sm, md, lg, xl, xxl } = props.value;
+    const { val, key, xs, sm, md, lg, xl, xxl } = props.value
     if (!xs && !sm && !md && !lg && !xl && !xxl) {
-      return val;
+      return val
     }
-    const result: ResponsiveValue = {};
-    responsiveArray.forEach(breakpoint => {
-      const config = props.value[breakpoint];
+    const result: ResponsiveValue = {}
+    responsiveArray.forEach((breakpoint) => {
+      const config = props.value[breakpoint]
       if (isNumber(config)) {
-        result[breakpoint] = config;
+        result[breakpoint] = config
       } else if (isObject(config) && isNumber(config[key])) {
-        result[breakpoint] = config[key];
+        result[breakpoint] = config[key]
       }
-    });
-    return result;
-  });
-  return value;
+    })
+    return result
+  })
+  return value
 }

package/packages/components/grid/src/interface.ts

@@ -3,72 +3,72 @@ export interface ResponsiveValue {
    * @zh >= 1600px 响应式配置
    * @en >= 1600px responsive configuration
    */
-  xxl?: number;
+  xxl?: number
   /**
    * @zh >= 1200px 响应式配置
    * @en >= 1200px responsive configuration
    */
-  xl?: number;
+  xl?: number
   /**
    * @zh >= 992px 响应式配置
    * @en >= 992px responsive configuration
    */
-  lg?: number;
+  lg?: number
   /**
    * @zh >= 768px 响应式配置
    * @en >= 768px responsive configuration
    */
-  md?: number;
+  md?: number
   /**
    * @zh >= 576px 响应式配置
    * @en >= 576px responsive configuration
    */
-  sm?: number;
+  sm?: number
   /**
    * @zh < 576px 响应式配置
    * @en <576px responsive configuration
    */
-  xs?: number;
+  xs?: number
 }
 
-export type FlexType = number | string | 'initial' | 'auto' | 'none';
+export type FlexType = number | string | 'initial' | 'auto' | 'none'
 
 export interface RowProps {
-  gutter?: number | ResponsiveValue | ResponsiveValue[];
-  justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between';
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  div?: boolean;
-  wrap?: boolean;
+  gutter?: number | ResponsiveValue | ResponsiveValue[]
+  justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between'
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  div?: boolean
+  wrap?: boolean
 }
 
 export interface ColProps {
-  span?: number;
-  offset?: number | undefined;
-  order?: number | undefined;
-  xs?: number | { [key: string]: any } | undefined;
-  sm?: number | { [key: string]: any } | undefined;
-  md?: number | { [key: string]: any } | undefined;
-  lg?: number | { [key: string]: any } | undefined;
-  xl?: number | { [key: string]: any } | undefined;
-  xxl?: number | { [key: string]: any } | undefined;
-  flex?: number | string | 'initial' | 'auto' | 'none' | undefined;
+  span?: number
+  offset?: number | undefined
+  order?: number | undefined
+  xs?: number | { [key: string]: any } | undefined
+  sm?: number | { [key: string]: any } | undefined
+  md?: number | { [key: string]: any } | undefined
+  lg?: number | { [key: string]: any } | undefined
+  xl?: number | { [key: string]: any } | undefined
+  xxl?: number | { [key: string]: any } | undefined
+  flex?: number | string | 'initial' | 'auto' | 'none' | undefined
 }
 
 export interface GridProps {
-  cols?: number | ResponsiveValue;
-  rowGap?: number | ResponsiveValue;
-  colGap?: number | ResponsiveValue;
-  collapsed?: boolean;
-  collapsedRows?: number;
+  cols?: number | ResponsiveValue
+  rowGap?: number | ResponsiveValue
+  colGap?: number | ResponsiveValue
+  collapsed?: boolean
+  collapsedRows?: number
 }
 
 export interface GridItemProps {
-  span?: number | ResponsiveValue;
-  offset?: number | ResponsiveValue;
-  suffix?: boolean;
+  span?: number | ResponsiveValue
+  offset?: number | ResponsiveValue
+  suffix?: boolean
 }
 
 export interface GridItemData extends GridItemProps {
-  span: number;
-  offset: number;
+  span: number
+  offset: number
 }

package/packages/components/grid/src/utils/global-config.ts

@@ -1,6 +1,6 @@
-import { useBemClass } from '../../../../hooks';
+import { useBemClass } from '../../../../hooks'
 
 export function getPrefixCls(name: string) {
-  const { b } = useBemClass();
-  return b(name);
+  const { b } = useBemClass()
+  return b(name)
 }

package/packages/components/grid/src/utils/index.ts

@@ -1,21 +1,21 @@
-import type { GridItemData } from '../interface';
+import type { GridItemData } from '../interface'
 
 export function resolveItemData(
   cols: number,
   props: GridItemData
 ): GridItemData {
-  const originSpan = props.span ?? 1;
-  const originOffset = props.offset ?? 0;
-  const offset = Math.min(originOffset, cols);
+  const originSpan = props.span ?? 1
+  const originOffset = props.offset ?? 0
+  const offset = Math.min(originOffset, cols)
   const span = Math.min(
     offset > 0 ? originSpan + originOffset : originSpan,
     cols
-  );
+  )
   return {
     span,
     offset,
     suffix: 'suffix' in props ? props.suffix !== false : false
-  };
+  }
 }
 
 export function setItemVisible({
@@ -24,50 +24,50 @@ export function setItemVisible({
   collapsedRows,
   itemDataList
 }: {
-  cols: number;
-  collapsed: boolean;
-  collapsedRows: number;
-  itemDataList: GridItemData[];
+  cols: number
+  collapsed: boolean
+  collapsedRows: number
+  itemDataList: GridItemData[]
 }) {
-  let overflow = false;
-  let displayIndexList: number[] = [];
+  let overflow = false
+  let displayIndexList: number[] = []
 
   function isOverflow(span: number) {
-    return Math.ceil(span / cols) > collapsedRows;
+    return Math.ceil(span / cols) > collapsedRows
   }
 
   if (collapsed) {
-    let spanSum = 0;
+    let spanSum = 0
     for (let i = 0; i < itemDataList.length; i++) {
       if (itemDataList[i].suffix) {
-        spanSum += itemDataList[i].span;
-        displayIndexList.push(i);
+        spanSum += itemDataList[i].span
+        displayIndexList.push(i)
       }
     }
     if (!isOverflow(spanSum)) {
-      let current = 0;
+      let current = 0
       while (current < itemDataList.length) {
-        const item = itemDataList[current];
+        const item = itemDataList[current]
         if (!item.suffix) {
-          spanSum += item.span;
+          spanSum += item.span
 
           if (isOverflow(spanSum)) {
-            break;
+            break
           }
-          displayIndexList.push(current);
+          displayIndexList.push(current)
         }
-        current++;
+        current++
       }
     }
     overflow = itemDataList.some(
       (item, index) => !item.suffix && !displayIndexList.includes(index)
-    );
+    )
   } else {
-    displayIndexList = itemDataList.map((_, index) => index);
+    displayIndexList = itemDataList.map((_, index) => index)
   }
 
   return {
     overflow,
     displayIndexList
-  };
+  }
 }

package/packages/components/grid/src/utils/is.ts

@@ -1,7 +1,7 @@
-const opt = Object.prototype.toString;
+const opt = Object.prototype.toString
 
 export function isObject(obj: unknown): obj is Record<string, any> {
-  return opt.call(obj) === '[object Object]';
+  return opt.call(obj) === '[object Object]'
 }
 
 export function isNumber(obj: any): obj is number {

package/packages/components/grid/src/utils/responsive-observe.ts

@@ -1,8 +1,8 @@
 // https://github.com/ant-design/ant-design/blob/master/components/_util/responsiveObserve.ts
 
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type BreakpointMap = Partial<Record<Breakpoint, string>>;
-export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
+export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+export type BreakpointMap = Partial<Record<Breakpoint, string>>
+export type ScreenMap = Partial<Record<Breakpoint, boolean>>
 
 export const responsiveArray: Breakpoint[] = [
   'xxl',
@@ -11,7 +11,7 @@ export const responsiveArray: Breakpoint[] = [
   'md',
   'sm',
   'xs'
-];
+]
 
 export const responsiveMap: BreakpointMap = {
   xs: '(max-width: 575px)',
@@ -20,91 +20,91 @@ export const responsiveMap: BreakpointMap = {
   lg: '(min-width: 992px)',
   xl: '(min-width: 1200px)',
   xxl: '(min-width: 1600px)'
-};
+}
 
 type SubscribeFunc = (
   screens: ScreenMap,
   breakpointChecked: Breakpoint
-) => void;
+) => void
 
 interface MediaQueryResult {
-  matches: boolean;
+  matches: boolean
 }
 
-type MediaQueryListener = (matches: MediaQueryResult) => void;
+type MediaQueryListener = (matches: MediaQueryResult) => void
 
 let subscribers: Array<{
-  token: string;
-  func: SubscribeFunc;
-}> = [];
-let subUid = -1;
-let screens = {};
+  token: string
+  func: SubscribeFunc
+}> = []
+let subUid = -1
+let screens = {}
 
 const responsiveObserve: {
   matchHandlers: {
     [key: string]: {
-      mql: MediaQueryList;
-      listener: MediaQueryListener;
-    };
-  };
-  dispatch: (pointMap: ScreenMap, breakpointChecked: Breakpoint) => boolean;
-  subscribe: (func: SubscribeFunc) => string;
-  unsubscribe: (token: string) => void;
-  unregister: () => void;
-  register: () => void;
+      mql: MediaQueryList
+      listener: MediaQueryListener
+    }
+  }
+  dispatch: (pointMap: ScreenMap, breakpointChecked: Breakpoint) => boolean
+  subscribe: (func: SubscribeFunc) => string
+  unsubscribe: (token: string) => void
+  unregister: () => void
+  register: () => void
 } = {
   matchHandlers: {},
   dispatch(pointMap: ScreenMap, breakpointChecked: Breakpoint) {
-    screens = pointMap;
+    screens = pointMap
     if (subscribers.length < 1) {
-      return false;
+      return false
     }
 
-    subscribers.forEach(item => {
-      item.func(screens, breakpointChecked);
-    });
+    subscribers.forEach((item) => {
+      item.func(screens, breakpointChecked)
+    })
 
-    return true;
+    return true
   },
   subscribe(func: SubscribeFunc) {
     if (subscribers.length === 0) {
-      this.register();
+      this.register()
     }
-    const token = (++subUid).toString();
+    const token = (++subUid).toString()
     subscribers.push({
       token,
       func
-    });
-    func(screens, null as unknown as Breakpoint);
-    return token;
+    })
+    func(screens, null as unknown as Breakpoint)
+    return token
   },
   unsubscribe(token: string) {
-    subscribers = subscribers.filter(item => item.token !== token);
+    subscribers = subscribers.filter((item) => item.token !== token)
     if (subscribers.length === 0) {
-      this.unregister();
+      this.unregister()
     }
   },
   unregister() {
     (Object.keys(responsiveMap) as Breakpoint[]).forEach(
       (screen: Breakpoint) => {
-        const matchMediaQuery = responsiveMap[screen];
-        if (!matchMediaQuery) return;
-        const handler = this.matchHandlers[matchMediaQuery];
+        const matchMediaQuery = responsiveMap[screen]
+        if (!matchMediaQuery) return
+        const handler = this.matchHandlers[matchMediaQuery]
         if (handler && handler.mql && handler.listener) {
           if (handler.mql.removeEventListener) {
-            handler.mql.removeEventListener('change', handler.listener);
+            handler.mql.removeEventListener('change', handler.listener)
           } else {
-            handler.mql.removeListener(handler.listener);
+            handler.mql.removeListener(handler.listener)
           }
         }
       }
-    );
+    )
   },
   register() {
     (Object.keys(responsiveMap) as Breakpoint[]).forEach(
       (screen: Breakpoint) => {
-        const matchMediaQuery = responsiveMap[screen];
-        if (!matchMediaQuery) return;
+        const matchMediaQuery = responsiveMap[screen]
+        if (!matchMediaQuery) return
         const listener = ({ matches }: MediaQueryResult) => {
           this.dispatch(
             {
@@ -112,24 +112,24 @@ const responsiveObserve: {
               [screen]: matches
             },
             screen
-          );
-        };
-        const mql = window.matchMedia(matchMediaQuery);
+          )
+        }
+        const mql = window.matchMedia(matchMediaQuery)
         if (mql.addEventListener) {
-          mql.addEventListener('change', listener);
+          mql.addEventListener('change', listener)
         } else {
-          mql.addListener(listener);
+          mql.addListener(listener)
         }
 
         this.matchHandlers[matchMediaQuery] = {
           mql,
           listener
-        };
+        }
 
-        listener(mql);
+        listener(mql)
       }
-    );
+    )
   }
-};
+}
 
-export default responsiveObserve;
+export default responsiveObserve

package/packages/components/input-group/index.ts

@@ -1,5 +1,5 @@
-import InputGroup from './src/input-group.vue';
+import InputGroup from './src/input-group.vue'
 
-export type InputGroupInstance = InstanceType<typeof InputGroup>;
-export * from './src/type';
-export default InputGroup;
+export type InputGroupInstance = InstanceType<typeof InputGroup>
+export * from './src/type'
+export default InputGroup

package/packages/components/input-group/src/input-group.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useBemClass } from '../../../hooks';
+import { useBemClass } from '../../../hooks'
 
-const { b } = useBemClass();
+const { b } = useBemClass()
 </script>
 
 <style lang="scss" scoped>

package/packages/components/input-search/index.ts

@@ -1,5 +1,5 @@
-import InputSearch from './src/input-search.vue';
+import InputSearch from './src/input-search.vue'
 
-export type InputSearchInstance = InstanceType<typeof InputSearch>;
-export * from './src/type';
-export default InputSearch;
+export type InputSearchInstance = InstanceType<typeof InputSearch>
+export * from './src/type'
+export default InputSearch

package/packages/components/input-search/src/input-search.vue

@@ -23,35 +23,35 @@
 </template>
 
 <script setup lang="ts">
-import type { InputSearchProps } from './type';
-import { Close, Search } from '@element-plus/icons-vue';
-import { computed } from 'vue';
-import { useBemClass } from '../../../hooks';
-import InputGroup from '../../input-group/src/input-group.vue';
+import type { InputSearchProps } from './type'
+import { Close, Search } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { useBemClass } from '../../../hooks'
+import InputGroup from '../../input-group/src/input-group.vue'
 
-const model = defineModel({ type: String });
+const model = defineModel({ type: String })
 
 const props = withDefaults(defineProps<InputSearchProps>(), {
   disabled: false,
   readonly: false,
   placeholder: '请选择',
   disabledHideButton: false
-});
+})
 
 const emit = defineEmits<{
-  (e: 'search'): void;
-  (e: 'clear'): void;
-}>();
+  (e: 'search'): void
+  (e: 'clear'): void
+}>()
 
-const { b } = useBemClass();
+const { b } = useBemClass()
 
 const showButton = computed(() => {
-  if (props.readonly) return false;
+  if (props.readonly) return false
   if (props.disabled) {
-    return !props.disabledHideButton;
+    return !props.disabledHideButton
   }
-  return true;
-});
+  return true
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/input-search/src/type.ts

@@ -1,6 +1,6 @@
 export interface InputSearchProps {
-  disabled?: boolean;
-  readonly?: boolean;
-  placeholder?: string;
-  disabledHideButton?: boolean; // 禁用的时候隐藏按钮
+  disabled?: boolean
+  readonly?: boolean
+  placeholder?: string
+  disabledHideButton?: boolean // 禁用的时候隐藏按钮
 }

package/packages/components/page-layout/index.ts

@@ -1,5 +1,5 @@
-import PageLayout from './src/page-layout.vue';
+import PageLayout from './src/page-layout.vue'
 
-export type PageLayoutInstance = InstanceType<typeof PageLayout>;
-export * from './src/type';
-export default PageLayout;
+export type PageLayoutInstance = InstanceType<typeof PageLayout>
+export * from './src/type'
+export default PageLayout