gi-component 0.0.19 → 0.0.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/button/src/button.vue

@@ -17,11 +17,9 @@ import {
   Upload
 } from '@element-plus/icons-vue'
 import { ElButton } from 'element-plus'
-import { computed, defineOptions, useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { useBemClass } from '../../../hooks'
 
-defineOptions({ components: { ElButton } })
-
 const props = withDefaults(defineProps<ButtonProps>(), {
   type: ''
 })

package/packages/components/dot/index.ts

@@ -0,0 +1,5 @@
+import Dot from './src/dot.vue'
+
+export type DotInstance = InstanceType<typeof Dot>
+export * from './src/type'
+export default Dot

package/packages/components/dot/src/dot.vue

@@ -0,0 +1,107 @@
+<template>
+  <span :class="getClass" :style="getStyle"></span>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { DotProps } from './type.ts'
+import { computed } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const props = withDefaults(defineProps<DotProps>(), {
+  type: 'circle',
+  size: 7,
+  color: 'primary'
+})
+
+const { b } = useBemClass()
+
+const getClass = computed(() => {
+  const arr = [b('dot'), b(`dot--${props.type}`)]
+  if (['primary', 'success', 'danger', 'warning', 'info'].includes(props.color)) {
+    arr.push(b(`dot--${props.color}`))
+  }
+  if (props.animation) {
+    arr.push(b('dot--animation'))
+  }
+  return arr.join(' ')
+})
+
+const getStyle = computed(() => {
+  const obj: CSSProperties = {}
+  if (props.color && !['primary', 'success', 'danger', 'warning', 'info'].includes(props.color)) {
+    obj.backgroundColor = props.color
+  }
+  if (props.size) {
+    obj.width = `${props.size}px`
+    obj.height = `${props.size}px`
+  }
+  return obj
+})
+</script>
+
+<style scoped lang="scss">
+@use '../../../styles/var.scss' as a;
+
+.#{a.$prefix}-dot {
+  display: inline-flex;
+  border-radius: 100px;
+  background-color: var(--el-color-info);
+}
+
+.#{a.$prefix}-dot--square {
+  border-radius: 0;
+}
+
+.#{a.$prefix}-dot--primary {
+  background-color: var(--el-color-primary);
+}
+
+.#{a.$prefix}-dot--success {
+  background-color: var(--el-color-success);
+}
+
+.#{a.$prefix}-dot--danger {
+  background-color: var(--el-color-danger);
+}
+
+.#{a.$prefix}-dot--warning {
+  background-color: var(--el-color-warning);
+}
+
+.#{a.$prefix}-dot--info {
+  background-color: var(--el-color-info);
+}
+
+.#{a.$prefix}-dot--animation {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: inherit;
+    border-radius: 50%;
+    animation: dot-animation 1.2s ease-in-out infinite;
+  }
+}
+
+@keyframes dot-animation {
+  0% {
+    opacity: 1;
+    transform: scale(0.5);
+  }
+
+  30% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.5);
+  }
+}
+</style>

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

@@ -0,0 +1,6 @@
+export interface DotProps {
+  type?: 'circle' | 'square'
+  size?: number
+  color?: string | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  animation?: boolean
+}

package/packages/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     GiCard: typeof import('./components/card/src/card.vue')['default']
     GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
     GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
+    GiDot: typeof import('./components/dot/src/dot.vue')['default']
     GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
     GiForm: typeof import('./components/form/src/form.vue')['default']
     GiGrid: typeof import('./components/grid/src/grid.vue')['default']

package/packages/index.ts

@@ -3,6 +3,7 @@ import type { App } from 'vue'
 import Button from './components/button'
 import Card from './components/card'
 import Dialog from './components/dialog'
+import Dot from './components/dot'
 import Drawer from './components/drawer'
 import EditTable from './components/edit-table'
 import Form from './components/form'
@@ -29,6 +30,7 @@ const components = {
   Button,
   Card,
   Drawer,
+  Dot,
   Tabs,
   InputGroup,
   InputSearch,
@@ -46,6 +48,7 @@ const components = {
 export const GiButton: typeof Button = Button
 export const GiCard: typeof Card = Card
 export const GiDrawer: typeof Drawer = Drawer
+export const GiDot: typeof Dot = Dot
 export const GiTabs: typeof Tabs = Tabs
 export const GiInputGroup: typeof InputGroup = InputGroup
 export const GiInputSearch: typeof InputSearch = InputSearch