feat: add avatar & mask

daief · Nov 18, 2021 · eef08a3 · eef08a3
1 parent 46c759f
commit eef08a3
Show file tree

Hide file tree

Showing 14 changed files with 599 additions and 5 deletions.
diff --git a/docs/src/pages/components/avatar.md b/docs/src/pages/components/avatar.md
@@ -0,0 +1,245 @@
+# Avatar
+
+## Examples
+
+avatar
+
+```html :::demo
+<div class="flex items-center space-x-8 flex-wrap">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="96px"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="lg"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="md"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="sm"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="xs"
+  />
+</div>
+```
+
+avatar with mask
+
+```html :::demo
+<div class="flex items-center space-x-8 flex-wrap">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    type="circle"
+    size="lg"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    type="squircle"
+    size="lg"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    type="hexagon"
+    size="lg"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    type="decagon"
+    size="lg"
+  />
+</div>
+```
+
+avatar with border(by css). Circle & square types only, but the others are not supported
+
+```html :::demo
+<div class="flex items-center space-x-8 flex-wrap mb-8">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="lg"
+    class="ring ring-pink-600 ring-offset-4"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="md"
+    class="ring ring-pink-600 ring-offset-4"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="sm"
+    class="ring ring-pink-600 ring-offset-4"
+  />
+</div>
+<div class="flex items-center space-x-8 flex-wrap">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="lg"
+    class="ring ring-pink-600 ring-offset-4"
+    type="square"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="md"
+    class="ring ring-pink-600 ring-offset-4"
+    type="square"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="sm"
+    class="ring ring-pink-600 ring-offset-4"
+    type="square"
+  />
+</div>
+```
+
+avatar-group, default gap(half size)
+
+```html :::demo
+<dv-avatar-group size="lg" class="mb-4">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar placeholder="+99" />
+</dv-avatar-group>
+<dv-avatar-group size="md" class="mb-4">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+</dv-avatar-group>
+<dv-avatar-group size="sm" class="mb-4">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+</dv-avatar-group>
+<dv-avatar-group size="xs" class="mb-4">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+</dv-avatar-group>
+```
+
+avatar-group, custom gap
+
+```html :::demo
+<dv-avatar-group size="80px" :gap="50">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+  />
+  <dv-avatar placeholder>
+    <span class="text-xl">+99</span>
+  </dv-avatar>
+</dv-avatar-group>
+```
+
+avatar with presense indicator
+
+```html :::demo
+<div class="flex items-center space-x-8 flex-wrap mb-4">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="lg"
+    status="online"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="md"
+    status="online"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="sm"
+    status="offline"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="xs"
+    status="offline"
+  />
+</div>
+
+<div class="flex items-center space-x-8 flex-wrap">
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="lg"
+    status="offline"
+    type="squircle"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="md"
+    status="offline"
+    type="squircle"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="sm"
+    status="online"
+    type="squircle"
+  />
+  <dv-avatar
+    src="http://daisyui.com/[email protected]"
+    size="xs"
+    status="online"
+    type="squircle"
+  />
+</div>
+```
+
+avatar placeholder
+
+```html :::demo
+<div class="flex items-center space-x-8 flex-wrap">
+  <dv-avatar size="lg" status="offline" type="squircle" placeholder>
+    <span class="text-2xl">+99</span>
+  </dv-avatar>
+  <dv-avatar size="md" status="offline" placeholder="JO" />
+  <dv-avatar size="sm" placeholder="MX" />
+  <dv-avatar size="xs" placeholder type="circle">
+    <span class="text-xs">AA</span>
+  </dv-avatar>
+</div>
+```
+
+## Avatar
+
+### Attributes
+
+## AvatarGroup
+
+### Attributes
diff --git a/docs/src/pages/components/mask.md b/docs/src/pages/components/mask.md
@@ -0,0 +1,53 @@
+# Mask
+
+## Examples
+
+mask
+
+```tsx :::run
+export default {
+  setup: () => {
+    const types = [
+      'squircle',
+      'heart',
+      'hexagon',
+      'hexagon-2',
+      'decagon',
+      'pentagon',
+      'diamond',
+      'square',
+      'circle',
+      'parallelogram',
+      'parallelogram-2',
+      'parallelogram-3',
+      'parallelogram-4',
+      'star',
+      'star-2',
+      'triangle',
+      'triangle-2',
+      'triangle-3',
+      'triangle-4',
+    ];
+    return () => (
+      <div>
+        {types.map((type) => (
+          <div key={type}>
+            <p class="my-2">mask-{type}</p>
+            <dv-mask type={type} class="mb-8">
+              <img src="https://picsum.photos/id/1005/200/200" />
+            </dv-mask>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+```
+
+## Mask
+
+### Attributes
+
+| name | description               | type                                                                                                                                                                                                          | default  |
+| ---- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| type | the shape type of content | squircle, heart, hexagon, hexagon-2, decagon, pentagon, diamond, square, circle, parallelogram, parallelogram-2, parallelogram-3, parallelogram-4, star, star-2, triangle, triangle-2, triangle-3, triangle-4 | squircle |
diff --git a/src/components/avatar/avatar-group.tsx b/src/components/avatar/avatar-group.tsx
@@ -0,0 +1,63 @@
+import { componentV2 } from '@/shared/styled';
+import { ExtractFromProps, ISize } from '@/shared/types/common';
+import {
+  cloneVNode,
+  computed,
+  HTMLAttributes,
+  PropType,
+  provide,
+  reactive,
+  toRef,
+} from 'vue';
+import { ctxAvatarGroupKey, IAvatarGroupCtx, sizeMap } from './state';
+import style from './style';
+
+const props = {
+  size: {
+    type: [Number, String] as PropType<ISize | string | number>,
+    default: 'md',
+  },
+  gap: {
+    type: [Number, String] as PropType<string | number>,
+    default: void 0,
+  },
+};
+
+export const AvatrGroup = componentV2<
+  ExtractFromProps<typeof props>,
+  HTMLAttributes
+>(
+  {
+    name: 'AvatarGroup',
+    props,
+    setup: (props, { slots }) => {
+      provide<IAvatarGroupCtx>(
+        ctxAvatarGroupKey,
+        reactive({
+          size: toRef(props, 'size'),
+        }),
+      );
+
+      const gapValue = computed(() => {
+        const res = props.gap || sizeMap[props.size] / 2 || 24;
+        return typeof res === 'number' ? `-${res}px` : '-' + res;
+      });
+
+      return () => (
+        <div class="dv-avatar-group avatar-group">
+          {(slots.default?.() || []).map((v, i) =>
+            cloneVNode(v, {
+              style:
+                i === 0
+                  ? {}
+                  : {
+                      marginLeft: gapValue.value,
+                    },
+            }),
+          )}
+        </div>
+      );
+    },
+  },
+  style,
+);