🚀 [avatar] avatar use core hook

Author: higuaifan

core/components/base/avatar/api.ts

@@ -7,7 +7,7 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { MCOPO, MPropType } from '../../types/props';
-import { AvatarProps } from './index';
+import { AvatarProps } from './props';
 
 export const props: MCOPO<AvatarProps> = {
   variant: { type: String as MPropType<'circle' | 'square'>, default: 'circle' },

core/components/base/avatar/avatar.css

@@ -23,12 +23,6 @@
   width: var(--m-avatar-w);
   height: var(--m-avatar-size);
 
-  & .m-avatar-mask {
-    grid-area: avatar;
-    width: var(--m-avatar-w);
-    height: var(--m-avatar-size);
-  }
-
   --m-image-m-t: 0;
   --m-image-m-l: 0;
 

core/components/base/avatar/index.ts

@@ -7,8 +7,10 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { props } from './api.ts';
+import useAvatar from './useAvatar.tsx';
 
 
 export const AvatarCore = {
-  props
+  props,
+  useAvatar
 }

core/components/base/avatar/useAvatar.tsx

@@ -0,0 +1,28 @@
+/**
+ * @description avatar component core hook
+ * @author 阿怪
+ * @date 2025/1/14 09:35
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { AvatarProps } from './props';
+
+export default function useAvatar(_props: AvatarProps) {
+  const props = _props as Required<AvatarProps>;
+
+  const renderInit = () => {
+    const avatarClass = ['m-avatar', `m-avatar-${_props.variant}`, `m-avatar-${_props.size}`];
+    const img = <img src={props.img} alt=""/>;
+
+    return {
+      avatarClass,
+      img,
+    };
+  };
+
+  return {
+    renderInit,
+    props,
+  };
+}

core/test/components/base/avatar.test.ts

@@ -0,0 +1,45 @@
+/**
+ * @description core avatar test
+ * @author 阿怪
+ * @date 2025/1/14 09:52
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+
+import { describe, expect, it } from 'vitest';
+import { AvatarCore } from '../../../components/base/avatar';
+import { getPropsDefault } from '../../test.tools.ts';
+
+
+const { props, useAvatar } = AvatarCore;
+const defaultProps = getPropsDefault(props);
+
+describe('avatar hook test', () => {
+
+  describe('expect current class', () => {
+
+    it('default', () => {
+      const { renderInit } = useAvatar(defaultProps);
+      expect(renderInit().avatarClass)
+        .toMatchObject(['m-avatar', 'm-avatar-circle', 'm-avatar-default',]);
+    });
+
+    it('square and small',()=>{
+      const { renderInit } = useAvatar({...defaultProps,variant:'square',size:'small'});
+      expect(renderInit().avatarClass)
+        .toMatchObject(['m-avatar', 'm-avatar-square', 'm-avatar-small',]);
+    })
+
+  });
+
+  describe('expect current img', () => {
+
+    it.skip('empty img',()=>{
+
+    })
+
+  })
+
+});

core/test/test.tools.ts

@@ -0,0 +1,17 @@
+/**
+ * @description test tools
+ * @author 阿怪
+ * @date 2025/1/14 09:56
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../components/types/props';
+
+export const getPropsDefault = (props: MCOPO<any>) => {
+  const defaultProps: Record<keyof typeof props, any> = {};
+  for (const key in props) {
+    defaultProps[key] = props[key].default;
+  }
+  return defaultProps;
+};

core/vitest.config.ts

@@ -0,0 +1,25 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2023/4/28 11:46
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineConfig } from 'vitest/config';
+import Vue from '@vitejs/plugin-vue';
+import Jsx from '@vitejs/plugin-vue-jsx';
+
+export default defineConfig({
+  plugins: [Vue(), Jsx()],
+  test: {
+    environment: 'happy-dom',
+    clearMocks: true,
+    coverage: {
+      provider: 'v8',
+      all: true,
+      include: ['components/**', 'compositions/**'],
+    },
+  },
+});

headless/components/base/avatar/MAvatar.tsx

@@ -11,13 +11,14 @@ import { type AvatarProps } from '@shuimo-design/ui-core/types/index';
 import { AvatarCore } from '@shuimo-design/ui-core';
 import './avatar.css';
 
-const props = AvatarCore.props;
+const { props, useAvatar } = AvatarCore;
 
 export default defineComponent((_props: AvatarProps) => {
-  const props = _props as Required<AvatarProps>;
+  const { renderInit } = useAvatar(_props);
   return () => {
-    return <div class={['m-avatar', `m-avatar-${props.variant}`, `m-avatar-${props.size}`]}>
-      <img src={props.img} alt=""/>
+    const { avatarClass, img } = renderInit();
+    return <div class={avatarClass}>
+      {img}
     </div>;
   };
 }, {

lib/components/base/avatar/MAvatar.tsx

@@ -7,16 +7,19 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { defineComponent } from 'vue';
-import { props } from './api.ts';
-import './avatar.css';
+import { type AvatarProps } from '@shuimo-design/ui-core/types/index';
+import { AvatarCore } from '@shuimo-design/ui-core';
 import MAvatarSvg from './MAvatarSvg.tsx';
-import { AvatarProps } from './index';
+import './avatar.css';
+
+const { props, useAvatar } = AvatarCore;
 
 export default defineComponent((_props: AvatarProps) => {
-  const props = _props as Required<AvatarProps>;
+  const { renderInit, props } = useAvatar(_props);
   return () => {
-    return <div class={['m-avatar', `m-avatar-${props.variant}`, `m-avatar-${props.size}`]}>
-      <img src={props.img} alt=""/>
+    const { avatarClass, img } = renderInit();
+    return <div class={avatarClass}>
+      {img}
       <MAvatarSvg variant={props.variant}/>
     </div>;
   };

lib/components/base/avatar/MAvatarSvg.tsx

@@ -7,17 +7,19 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { computed, defineComponent } from 'vue';
-import { AVATAR_CIRCLE_ID, AVATAR_SQUARE_ID } from '../../other/svg/MSvgSymbol.tsx';
-import { AvatarProps } from './index';
-import { props } from './api.ts';
+import { AvatarCore } from '@shuimo-design/ui-core';
+import { type AvatarProps } from '@shuimo-design/ui-core/types/index';
 import useSvgInject from '../../../compositions/common/useSvgInject.ts';
+import { AVATAR_CIRCLE_ID, AVATAR_SQUARE_ID } from '../../other/svg/MSvgSymbol.tsx';
 
 type SvgInfoType = { viewBox: string; id: string };
 const avatarSvgInfo: Record<keyof AvatarProps['variant'], SvgInfoType> = {
   circle: { viewBox: '0 0 837.14 743.36', id: AVATAR_CIRCLE_ID },
   square: { viewBox: '0 0 832.79 828.92', id: AVATAR_SQUARE_ID },
 };
 
+const { props } = AvatarCore;
+
 export default defineComponent((props: Pick<AvatarProps, 'variant'>) => {
   const {
     svgUrl,