DevCloudFE · kagol · Mar 11, 2022 · Mar 11, 2022
diff --git a/packages/devui-vue/devui/popover/index.ts b/packages/devui-vue/devui/popover/index.ts
@@ -1,17 +1,14 @@
-import type { App } from 'vue'
-import Popover from './src/popover'
+import type { App } from 'vue';
+import Popover from './src/popover';
+export * from './src/popover-types';
 
-Popover.install = function (app: App): void {
-  app.component(Popover.name, Popover)
-}
-
-export { Popover }
+export { Popover };
 
 export default {
   title: 'Popover 悬浮提示',
   category: '反馈',
   status: '100%',
   install(app: App): void {
-    app.use(Popover as any);
-  }
-}
+    app.component(Popover.name, Popover);
+  },
+};
diff --git a/packages/devui-vue/devui/popover/src/debounce.ts b/packages/devui-vue/devui/popover/src/debounce.ts
diff --git a/packages/devui-vue/devui/popover/src/popover-icon.scss b/packages/devui-vue/devui/popover/src/popover-icon.scss
@@ -0,0 +1,48 @@
+@import '../../styles-var/devui-var.scss';
+
+.devui-popover-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+
+  .devui-icon.devui-icon-success > g {
+    & > path {
+      fill: $devui-success;
+    }
+
+    & > circle,
+    & > polygon {
+      fill: $devui-light-text;
+    }
+  }
+
+  .devui-icon.devui-icon-warning > g {
+    & > path {
+      fill: $devui-warning;
+    }
+
+    & > polygon {
+      fill: $devui-light-text;
+    }
+  }
+
+  .devui-icon.devui-icon-info > g {
+    & > g {
+      fill: $devui-info;
+    }
+
+    & > circle {
+      fill: $devui-light-text;
+    }
+  }
+
+  .devui-icon.devui-icon-error > g {
+    & > path {
+      fill: $devui-danger;
+    }
+
+    & > circle {
+      fill: $devui-light-text;
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/popover/src/popover-icon.tsx b/packages/devui-vue/devui/popover/src/popover-icon.tsx
@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { PopType } from './popover-types';
+import { SuccessIcon, WarningIcon, InfoIcon, ErrorIcon } from './popover-icons';
+import './popover-icon.scss';
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String as PropType<PopType>,
+      default: 'default',
+    },
+  },
+  setup(props) {
+    return () =>
+      props.type &&
+      props.type !== 'default' && (
+        <span class='devui-popover-icon'>
+          {props.type === 'success' && <SuccessIcon />}
+          {props.type === 'warning' && <WarningIcon />}
+          {props.type === 'info' && <InfoIcon />}
+          {props.type === 'error' && <ErrorIcon />}
+        </span>
+      );
+  },
+});
diff --git a/packages/devui-vue/devui/popover/src/popover-icons.tsx b/packages/devui-vue/devui/popover/src/popover-icons.tsx
@@ -0,0 +1,57 @@
+export function SuccessIcon(): JSX.Element {
+  return (
+    <svg class='devui-icon devui-icon-success' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <circle cx='8' cy='8' r='7'></circle>
+        <path d='M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z' fill-rule='nonzero'></path>
+        <polygon
+          stroke-width='0.4'
+          fill-rule='nonzero'
+          points='8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28'></polygon>
+      </g>
+    </svg>
+  );
+}
+
+export function WarningIcon(): JSX.Element {
+  return (
+    <svg class='devui-icon devui-icon-warning' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <polygon points='7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313'></polygon>
+        <path d='M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z'></path>
+      </g>
+    </svg>
+  );
+}
+
+export function InfoIcon(): JSX.Element {
+  return (
+    <svg class='devui-icon devui-icon-info' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <circle cx='8' cy='8' r='7'></circle>
+        <g stroke-width='1'>
+          <path d='M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z'></path>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export function ErrorIcon(): JSX.Element {
+  return (
+    <svg
+      class='devui-icon devui-icon-error'
+      width='16px'
+      height='16px'
+      viewBox='0 0 16 16'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'>
+      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <circle cx='8' cy='8' r='7'></circle>
+        <path
+          d='M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z'
+          fill-rule='nonzero'></path>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/devui-vue/devui/popover/src/popover-types.ts b/packages/devui-vue/devui/popover/src/popover-types.ts
@@ -0,0 +1,64 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export type TriggerType = 'click' | 'hover' | 'manually';
+export type PopType = 'success' | 'error' | 'warning' | 'info' | 'default';
+export type Placement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-start'
+  | 'top-end'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end';
+export type Alignment = 'start' | 'end';
+export type OffsetOptions = { mainAxis?: number; crossAxis?: number };
+
+export const popoverProps = {
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: Array as PropType<Array<Placement>>,
+    default: ['bottom'],
+  },
+  align: {
+    type: String as PropType<Alignment> | null,
+    default: null,
+  },
+  offset: {
+    type: [Number, Object] as PropType<number | OffsetOptions>,
+    default: 8,
+  },
+  content: {
+    type: String,
+    default: '',
+  },
+  trigger: {
+    type: String as PropType<TriggerType>,
+    default: 'click',
+  },
+  popType: {
+    type: String as PropType<PopType>,
+    default: 'default',
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true,
+  },
+  mouseEnterDelay: {
+    type: Number,
+    default: 150,
+  },
+  mouseLeaveDelay: {
+    type: Number,
+    default: 100,
+  },
+};
+
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>;