ele-admin-plus 1.0.0-beta.1

package/es/ele-dot/index.js

@@ -0,0 +1,44 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode } from "vue";
+import { dotProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleDot",
+  props: dotProps
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-dot-text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", {
+    class: normalizeClass([
+      "ele-dot",
+      { "is-success": "success" === _ctx.type },
+      { "is-warning": "warning" === _ctx.type },
+      { "is-danger": "danger" === _ctx.type },
+      { "is-info": "info" === _ctx.type },
+      { "is-ripple": _ctx.ripple }
+    ])
+  }, [
+    createElementVNode("span", {
+      class: "ele-dot-status",
+      style: normalizeStyle({ width: _ctx.size, height: _ctx.size, background: _ctx.color })
+    }, [
+      createElementVNode("span", {
+        class: "ele-dot-ripple",
+        style: normalizeStyle({ width: _ctx.size, height: _ctx.size, background: _ctx.color })
+      }, null, 4)
+    ], 4),
+    _ctx.text ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-dot/props.d.ts

@@ -0,0 +1,19 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { DotType } from './types';
+/**
+ * 属性
+ */
+export declare const dotProps: {
+    type: PropType<DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+};
+export type DotProps = ExtractPropTypes<typeof dotProps>;

package/es/ele-dot/props.js

@@ -0,0 +1,21 @@
+const dotProps = {
+  // 类型
+  type: String,
+  // 自定义颜色
+  color: String,
+  // 是否显示水波动画
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  // 文本
+  text: String,
+  // 尺寸
+  size: {
+    type: [String, Number],
+    default: "6px"
+  }
+};
+export {
+  dotProps
+};

package/es/ele-dot/style/index.js

@@ -0,0 +1 @@
+import './index.scss';

package/es/ele-dot/style/index.scss

@@ -0,0 +1,67 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-dot {
+  display: inline-flex;
+  align-items: center;
+
+  .ele-dot-text {
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  .ele-dot-status {
+    flex-shrink: 0;
+    background: elVar('color-primary');
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .ele-dot-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: elVar('color-primary');
+    animation: eleAnimDot 1.2s ease-in-out infinite;
+    transform-origin: center;
+    border-radius: 50%;
+    display: none;
+  }
+
+  &.is-ripple .ele-dot-ripple {
+    display: block;
+  }
+
+  &.is-success .ele-dot-status,
+  &.is-success .ele-dot-ripple {
+    background: elVar('color-success');
+  }
+
+  &.is-warning .ele-dot-status,
+  &.is-warning .ele-dot-ripple {
+    background: elVar('color-warning');
+  }
+
+  &.is-danger .ele-dot-status,
+  &.is-danger .ele-dot-ripple {
+    background: elVar('color-danger');
+  }
+
+  &.is-info .ele-dot-status,
+  &.is-info .ele-dot-ripple {
+    background: elVar('color-info');
+  }
+}
+
+@keyframes eleAnimDot {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  to {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}

package/es/ele-dot/types/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 类型
+ */
+export type DotType = 'primary' | 'success' | 'warning' | 'danger' | 'info';