@mekari/pixel-avatar - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/mekari-pixel-avatar.cjs.dev.js

@@ -7,2 +7,3 @@ 'use strict';
 var pixelBox = require('@mekari/pixel-box');
+var pixelFlex = require('@mekari/pixel-flex');
 
@@ -325,3 +326,136 @@ const avatarSizes = {
 
+const MpMoreAvatarLabel = {
+  name: 'MpMoreAvatarLabel',
+  functional: true,
+  inject: ['$pixelColorMode', '$pixelTheme'],
+  props: {
+    size: [String, Array],
+    label: String,
+    ...pixelFlex.flexProps
+  },
+
+  render(h, {
+    injections,
+    props,
+    data,
+    ...rest
+  }) {
+    const {
+      size,
+      label,
+      ...avatarProps
+    } = props;
+    const colorMode = injections.$pixelColorMode();
+    const theme = injections.$pixelTheme();
+    const borderColor = {
+      light: '#fff',
+      dark: 'gray.800'
+    };
+    const bg = {
+      light: 'gray.200',
+      dark: 'whiteAlpha.400'
+    };
+    const sizeKey = avatarSizes[size];
+    const _size = theme.sizes[sizeKey];
+    const fontSize = `calc(${_size} / 2.75)`;
+    return h(pixelFlex.MpFlex, { ...rest,
+      props: pixelUtils.forwardProps(avatarProps),
+      attrs: {
+        align: 'center',
+        justify: 'center',
+        h: avatarSizes[size],
+        w: avatarSizes[size],
+        bg: bg[colorMode],
+        color: 'inherit',
+        rounded: 'full',
+        border: '2px',
+        borderColor: borderColor[colorMode],
+        fontSize,
+        ...data.attrs,
+        'data-pixel-component': 'MpMoreAvatarLabel'
+      }
+    }, label);
+  }
+
+};
+const MpAvatarGroup = {
+  name: 'MpAvatarGroup',
+  functional: true,
+  props: {
+    groupSize: {
+      type: [Number, String, Array],
+      default: 'md'
+    },
+    borderColor: [String, Array],
+    max: [Number, String, Array],
+    spacing: {
+      type: [Number, String, Array],
+      default: -2
+    },
+    ...pixelFlex.flexProps
+  },
+
+  render(h, {
+    slots,
+    props,
+    data,
+    ...rest
+  }) {
+    // Get the number of slot nodes inside AvatarGroup
+    const children = slots().default.filter(e => e.tag);
+    const count = children.length;
+    const max = parseInt(props.max, 10); // Apply styles to slot VNodes.
+
+    const clones = children.map((node, index) => {
+      const isFirstAvatar = index === 0;
+
+      if (!props.max || max && index < max) {
+        // Change VNode component options
+        const {
+          attrs
+        } = node.data;
+        attrs.ml = isFirstAvatar ? 0 : props.spacing;
+        attrs.borderColor = props.borderColor || attrs.borderColor;
+        attrs.zIndex = count - index;
+        const propsData = node.componentOptions;
+        propsData.size = props.groupSize;
+        propsData.showBorder = true;
+        node.componentOptions.propsData = { ...node.componentOptions.propsData,
+          ...propsData
+        };
+        node.data.attrs = { ...node.data.attrs,
+          ...attrs
+        };
+        return node;
+      }
+
+      if (max && index === max) {
+        return h(MpMoreAvatarLabel, {
+          props: {
+            size: props.groupSize,
+            label: `+${count - max}`
+          },
+          attrs: {
+            ml: props.spacing
+          }
+        });
+      }
+    });
+    return h(pixelFlex.MpFlex, { ...rest,
+      props: {
+        alignItems: 'center',
+        ...pixelUtils.forwardProps(props)
+      },
+      attrs: {
+        zIndex: 0,
+        ...data.attrs,
+        'data-pixel-component': 'MpAvatarGroup'
+      }
+    }, clones);
+  }
+
+};
+
 exports.MpAvatar = MpAvatar;
 exports.MpAvatarBadge = MpAvatarBadge;
+exports.MpAvatarGroup = MpAvatarGroup;

dist/mekari-pixel-avatar.cjs.prod.js

@@ -7,2 +7,3 @@ 'use strict';
 var pixelBox = require('@mekari/pixel-box');
+var pixelFlex = require('@mekari/pixel-flex');
 
@@ -325,3 +326,136 @@ const avatarSizes = {
 
+const MpMoreAvatarLabel = {
+  name: 'MpMoreAvatarLabel',
+  functional: true,
+  inject: ['$pixelColorMode', '$pixelTheme'],
+  props: {
+    size: [String, Array],
+    label: String,
+    ...pixelFlex.flexProps
+  },
+
+  render(h, {
+    injections,
+    props,
+    data,
+    ...rest
+  }) {
+    const {
+      size,
+      label,
+      ...avatarProps
+    } = props;
+    const colorMode = injections.$pixelColorMode();
+    const theme = injections.$pixelTheme();
+    const borderColor = {
+      light: '#fff',
+      dark: 'gray.800'
+    };
+    const bg = {
+      light: 'gray.200',
+      dark: 'whiteAlpha.400'
+    };
+    const sizeKey = avatarSizes[size];
+    const _size = theme.sizes[sizeKey];
+    const fontSize = `calc(${_size} / 2.75)`;
+    return h(pixelFlex.MpFlex, { ...rest,
+      props: pixelUtils.forwardProps(avatarProps),
+      attrs: {
+        align: 'center',
+        justify: 'center',
+        h: avatarSizes[size],
+        w: avatarSizes[size],
+        bg: bg[colorMode],
+        color: 'inherit',
+        rounded: 'full',
+        border: '2px',
+        borderColor: borderColor[colorMode],
+        fontSize,
+        ...data.attrs,
+        'data-pixel-component': 'MpMoreAvatarLabel'
+      }
+    }, label);
+  }
+
+};
+const MpAvatarGroup = {
+  name: 'MpAvatarGroup',
+  functional: true,
+  props: {
+    groupSize: {
+      type: [Number, String, Array],
+      default: 'md'
+    },
+    borderColor: [String, Array],
+    max: [Number, String, Array],
+    spacing: {
+      type: [Number, String, Array],
+      default: -2
+    },
+    ...pixelFlex.flexProps
+  },
+
+  render(h, {
+    slots,
+    props,
+    data,
+    ...rest
+  }) {
+    // Get the number of slot nodes inside AvatarGroup
+    const children = slots().default.filter(e => e.tag);
+    const count = children.length;
+    const max = parseInt(props.max, 10); // Apply styles to slot VNodes.
+
+    const clones = children.map((node, index) => {
+      const isFirstAvatar = index === 0;
+
+      if (!props.max || max && index < max) {
+        // Change VNode component options
+        const {
+          attrs
+        } = node.data;
+        attrs.ml = isFirstAvatar ? 0 : props.spacing;
+        attrs.borderColor = props.borderColor || attrs.borderColor;
+        attrs.zIndex = count - index;
+        const propsData = node.componentOptions;
+        propsData.size = props.groupSize;
+        propsData.showBorder = true;
+        node.componentOptions.propsData = { ...node.componentOptions.propsData,
+          ...propsData
+        };
+        node.data.attrs = { ...node.data.attrs,
+          ...attrs
+        };
+        return node;
+      }
+
+      if (max && index === max) {
+        return h(MpMoreAvatarLabel, {
+          props: {
+            size: props.groupSize,
+            label: `+${count - max}`
+          },
+          attrs: {
+            ml: props.spacing
+          }
+        });
+      }
+    });
+    return h(pixelFlex.MpFlex, { ...rest,
+      props: {
+        alignItems: 'center',
+        ...pixelUtils.forwardProps(props)
+      },
+      attrs: {
+        zIndex: 0,
+        ...data.attrs,
+        'data-pixel-component': 'MpAvatarGroup'
+      }
+    }, clones);
+  }
+
+};
+
 exports.MpAvatar = MpAvatar;
 exports.MpAvatarBadge = MpAvatarBadge;
+exports.MpAvatarGroup = MpAvatarGroup;

dist/mekari-pixel-avatar.esm.js

@@ -1,3 +0,4 @@
-import { isDarkColor, __get, createStyledAttrsMixin, canUseDOM } from '@mekari/pixel-utils';
+import { isDarkColor, __get, createStyledAttrsMixin, canUseDOM, forwardProps } from '@mekari/pixel-utils';
 import { MpBox } from '@mekari/pixel-box';
+import { flexProps, MpFlex } from '@mekari/pixel-flex';
 
@@ -320,2 +321,134 @@ const avatarSizes = {
 
-export { MpAvatar, MpAvatarBadge };
+const MpMoreAvatarLabel = {
+  name: 'MpMoreAvatarLabel',
+  functional: true,
+  inject: ['$pixelColorMode', '$pixelTheme'],
+  props: {
+    size: [String, Array],
+    label: String,
+    ...flexProps
+  },
+
+  render(h, {
+    injections,
+    props,
+    data,
+    ...rest
+  }) {
+    const {
+      size,
+      label,
+      ...avatarProps
+    } = props;
+    const colorMode = injections.$pixelColorMode();
+    const theme = injections.$pixelTheme();
+    const borderColor = {
+      light: '#fff',
+      dark: 'gray.800'
+    };
+    const bg = {
+      light: 'gray.200',
+      dark: 'whiteAlpha.400'
+    };
+    const sizeKey = avatarSizes[size];
+    const _size = theme.sizes[sizeKey];
+    const fontSize = `calc(${_size} / 2.75)`;
+    return h(MpFlex, { ...rest,
+      props: forwardProps(avatarProps),
+      attrs: {
+        align: 'center',
+        justify: 'center',
+        h: avatarSizes[size],
+        w: avatarSizes[size],
+        bg: bg[colorMode],
+        color: 'inherit',
+        rounded: 'full',
+        border: '2px',
+        borderColor: borderColor[colorMode],
+        fontSize,
+        ...data.attrs,
+        'data-pixel-component': 'MpMoreAvatarLabel'
+      }
+    }, label);
+  }
+
+};
+const MpAvatarGroup = {
+  name: 'MpAvatarGroup',
+  functional: true,
+  props: {
+    groupSize: {
+      type: [Number, String, Array],
+      default: 'md'
+    },
+    borderColor: [String, Array],
+    max: [Number, String, Array],
+    spacing: {
+      type: [Number, String, Array],
+      default: -2
+    },
+    ...flexProps
+  },
+
+  render(h, {
+    slots,
+    props,
+    data,
+    ...rest
+  }) {
+    // Get the number of slot nodes inside AvatarGroup
+    const children = slots().default.filter(e => e.tag);
+    const count = children.length;
+    const max = parseInt(props.max, 10); // Apply styles to slot VNodes.
+
+    const clones = children.map((node, index) => {
+      const isFirstAvatar = index === 0;
+
+      if (!props.max || max && index < max) {
+        // Change VNode component options
+        const {
+          attrs
+        } = node.data;
+        attrs.ml = isFirstAvatar ? 0 : props.spacing;
+        attrs.borderColor = props.borderColor || attrs.borderColor;
+        attrs.zIndex = count - index;
+        const propsData = node.componentOptions;
+        propsData.size = props.groupSize;
+        propsData.showBorder = true;
+        node.componentOptions.propsData = { ...node.componentOptions.propsData,
+          ...propsData
+        };
+        node.data.attrs = { ...node.data.attrs,
+          ...attrs
+        };
+        return node;
+      }
+
+      if (max && index === max) {
+        return h(MpMoreAvatarLabel, {
+          props: {
+            size: props.groupSize,
+            label: `+${count - max}`
+          },
+          attrs: {
+            ml: props.spacing
+          }
+        });
+      }
+    });
+    return h(MpFlex, { ...rest,
+      props: {
+        alignItems: 'center',
+        ...forwardProps(props)
+      },
+      attrs: {
+        zIndex: 0,
+        ...data.attrs,
+        'data-pixel-component': 'MpAvatarGroup'
+      }
+    }, clones);
+  }
+
+};
+
+export { MpAvatar, MpAvatarBadge, MpAvatarGroup };

package.json

 {
   "name": "@mekari/pixel-avatar",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Mekari Pixel | Avatar component",
@@ -5,0 +5,0 @@ "homepage": "https://mekari.design/",

src/avatar-group.js

@@ -58,3 +58,3 @@
       type: [Number, String, Array],
-      default: -3
+      default: -2
     },
@@ -61,0 +61,0 @@ ...flexProps

src/index.js

 export * from './avatar'
+export * from './avatar-group'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41772

increased by29.95%

Lines of code

1637

increased by30.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes