y-admin-pro 0.0.1

package/packages/ele-timeline/types.ts

@@ -0,0 +1,62 @@
+import type { CSSProperties } from 'vue';
+import type { ElIconProps } from '../ele-app/el';
+import type { UserComponent } from '../ele-app/types';
+
+/**
+ * 时间线项类型
+ */
+export type TimelineItemType = 'default' | 'primary' | 'danger';
+
+/**
+ * 时间线项数据
+ */
+export interface TimelineItem extends Record<string, any> {
+  /** 循环的 key */
+  key?: string | number | symbol;
+  /** 类型 */
+  type?: TimelineItemType;
+  /** 标题 */
+  title?: string;
+  /** 描述 */
+  description?: string;
+  /** 图标 */
+  icon?: UserComponent;
+  /** 自定义图标属性 */
+  iconProps?: ElIconProps;
+  /** 自定义图标样式 */
+  iconStyle?: CSSProperties;
+  /** 样式 */
+  style?: CSSProperties;
+  /** 类名 */
+  class?: string;
+}
+
+/**
+ * 时间线单元格数据
+ */
+export interface TimelineCell {
+  /** 循环的 key */
+  key: string | number | symbol;
+  /** 时间线项数据 */
+  data?: TimelineItem;
+  /** 时间线项数据索引 */
+  dataIndex?: number;
+  /** 下一个时间线项数据的类型 */
+  nextDataType?: TimelineItemType;
+  /** 是否是第一个时间线项数据 */
+  isFirst?: boolean;
+  /** 是否是最后一个时间线项数据 */
+  isLast?: boolean;
+}
+
+/**
+ * 时间线行数据
+ */
+export interface TimelineRow {
+  /** 循环的 key */
+  key: string | number | symbol;
+  /** 时间线单元格数据 */
+  items: TimelineCell[];
+  /** 是否是偶数行 */
+  isEvenRow?: boolean;
+}

package/packages/ele-tool/index.vue

@@ -0,0 +1,74 @@
+<!-- 表头工具栏按钮 -->
+<template>
+  <div class="ele-tool" @click="handleClick" @mouseover="handleMouseover">
+    <div class="ele-tool-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { watch, inject } from 'vue';
+  import type { EleTooltipProps } from '../ele-app/plus';
+  import { useTimer } from '../utils/hook';
+  import { TOOLBAR_KEY } from '../ele-toolbar/props';
+  import { toolProps, toolEmits } from './props';
+
+  defineOptions({ name: 'EleTool' });
+
+  const props = defineProps(toolProps);
+
+  const emit = defineEmits(toolEmits);
+
+  const toolbarProvide = inject(TOOLBAR_KEY, {});
+  const [startHideTipTimer, stopHideTipTimer] = useTimer(200);
+
+  /** 显示提示 */
+  const showTooltip = (
+    text?: string,
+    el?: HTMLElement,
+    options?: EleTooltipProps
+  ) => {
+    if (toolbarProvide.showTooltip) {
+      toolbarProvide.showTooltip(text, el, options);
+    }
+  };
+
+  /** 关闭提示 */
+  const hideTooltip = () => {
+    toolbarProvide.hideTooltip && toolbarProvide.hideTooltip();
+  };
+
+  /** 点击事件 */
+  const handleClick = (e: MouseEvent) => {
+    if (props.clickHideTooltip) {
+      startHideTipTimer(() => {
+        hideTooltip();
+      });
+    }
+    emit('click', e);
+  };
+
+  /** 鼠标移入事件 */
+  const handleMouseover = (e: MouseEvent) => {
+    if (props.title && !props.disabled) {
+      stopHideTipTimer();
+      showTooltip(props.title, e.currentTarget as HTMLElement, {
+        placement: props.placement,
+        offset: 10
+      });
+    }
+  };
+
+  /** 禁用提示文字 */
+  watch([() => props.disabled, () => props.title], () => {
+    if (!props.title || props.disabled) {
+      hideTooltip();
+    }
+  });
+
+  defineExpose({
+    showTooltip,
+    hideTooltip
+  });
+</script>

package/packages/ele-tool/props.ts

@@ -0,0 +1,29 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { EleTooltipProps } from '../ele-app/plus';
+
+/**
+ * 属性
+ */
+export const toolProps = {
+  /** 提示文字 */
+  title: String,
+  /** 提示方向 */
+  placement: {
+    type: String as PropType<EleTooltipProps['placement']>,
+    default: 'top'
+  },
+  /** 是否禁用提示 */
+  disabled: Boolean,
+  /** 是否点击时关闭提示 */
+  clickHideTooltip: Boolean
+};
+
+export type ToolProps = ExtractPropTypes<typeof toolProps>;
+
+/**
+ * 事件
+ */
+export const toolEmits = {
+  /** 点击事件 */
+  click: (_e: MouseEvent) => true
+};

package/packages/ele-tool/style/css-var.scss

@@ -0,0 +1,12 @@
+@use '../../style/util.scss' as *;
+
+/* 工具按钮主题变量 */
+@mixin set-tool-var($var) {
+  .ele-tool {
+    @include set-ele-var('tool', $var);
+  }
+
+  .ele-toolbar.is-plain .ele-tool {
+    @include set-ele-var('tool-plain', $var);
+  }
+}

package/packages/ele-tool/style/index.scss

@@ -0,0 +1,70 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tool-var($ele);
+
+.ele-tool {
+  line-height: 1;
+  padding: eleVar('tool', 'padding');
+  font-size: eleVar('tool', 'font-size');
+  border: eleVar('tool', 'border');
+  border-radius: eleVar('tool', 'radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    background: eleVar('tool', 'hover-bg');
+  }
+
+  .ele-tool-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .el-dropdown {
+    color: inherit;
+    cursor: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    position: static;
+  }
+
+  .el-tooltip__trigger {
+    position: static;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+
+.ele-toolbar .ele-tool {
+  flex-shrink: 0;
+  margin-top: calc(#{eleVar('toolbar', 'space')} / 2);
+  margin-bottom: calc(#{eleVar('toolbar', 'space')} / 2);
+  margin-left: eleVar('toolbar', 'space');
+  margin-right: 0;
+}
+
+/* 朴素风格 */
+.ele-toolbar.is-plain .ele-tool {
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  font-size: eleVar('tool-plain', 'font-size');
+  margin-left: calc(#{eleVar('toolbar', 'space')} * 2);
+
+  &:hover {
+    color: elVar('color-primary');
+    background: none;
+  }
+}

package/packages/ele-tool/style/index.ts

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

package/packages/ele-toolbar/index.vue

@@ -0,0 +1,90 @@
+<!-- 表头工具栏 -->
+<template>
+  <div
+    :class="[
+      'ele-toolbar',
+      { 'is-default': 'plain' !== theme },
+      { 'is-plain': 'plain' === theme }
+    ]"
+  >
+    <div v-if="title || subtitle" class="ele-toolbar-title" :style="titleStyle">
+      <EleText v-if="title" type="heading" v-bind="titleProps || {}">
+        {{ title }}
+      </EleText>
+      <EleText v-if="subtitle" size="xs" v-bind="subtitleProps || {}">
+        {{ subtitle }}
+      </EleText>
+    </div>
+    <div class="ele-toolbar-body" :style="bodyStyle">
+      <slot></slot>
+    </div>
+    <div class="ele-toolbar-tools" :style="toolsStyle">
+      <slot name="tools"></slot>
+    </div>
+    <EleTooltip
+      trigger="hover"
+      placement="top"
+      :persistent="false"
+      :content="tooltipContent"
+      v-bind="tooltipProps || {}"
+      :virtualTriggering="true"
+      :virtualRef="virtualRef"
+      ref="tooltipRef"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { Ref } from 'vue';
+  import { ref, provide, shallowReactive } from 'vue';
+  import type { EleTooltipInstance, EleTooltipProps } from '../ele-app/plus';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import EleText from '../ele-text/index.vue';
+  import type { ToolbarProvide } from './types';
+  import { toolbarProps, TOOLBAR_KEY } from './props';
+
+  defineOptions({ name: 'EleToolbar' });
+
+  defineProps(toolbarProps);
+
+  /** 提示组件 */
+  const tooltipRef = ref<EleTooltipInstance>(null);
+
+  /** 提示目标 */
+  const virtualRef = ref<any>();
+
+  /** 提示文本 */
+  const tooltipContent = ref<string>('');
+
+  /** 提示属性 */
+  const tooltipProps: Ref<EleTooltipProps> = ref<EleTooltipProps>({});
+
+  /** 显示提示 */
+  const showTooltip = (
+    text?: string,
+    el?: HTMLElement,
+    options?: EleTooltipProps
+  ) => {
+    virtualRef.value = el;
+    tooltipContent.value = text ?? '';
+    tooltipProps.value = options || {};
+  };
+
+  /** 关闭提示 */
+  const hideTooltip = () => {
+    tooltipRef.value && tooltipRef.value.hide();
+  };
+
+  /** 注入打开提示的方法 */
+  const toolbarProvide = shallowReactive<ToolbarProvide>({
+    showTooltip,
+    hideTooltip
+  });
+  provide<ToolbarProvide>(TOOLBAR_KEY, toolbarProvide);
+
+  defineExpose({
+    tooltipRef,
+    showTooltip,
+    hideTooltip
+  });
+</script>

package/packages/ele-toolbar/props.ts

@@ -0,0 +1,36 @@
+import type { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { EleTextProps } from '../ele-app/plus';
+import type { ToolbarTheme, ToolbarProvide } from './types';
+
+/**
+ * 属性
+ */
+export const toolbarProps = {
+  /** 标题 */
+  title: String,
+  /** 二级标题 */
+  subtitle: String,
+  /** 主题风格 */
+  theme: {
+    type: String as PropType<ToolbarTheme>,
+    default: 'plain'
+  },
+  /** 标题区样式 */
+  titleStyle: Object as PropType<StyleValue>,
+  /** 内容区样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 按钮区样式 */
+  toolsStyle: Object as PropType<StyleValue>,
+  /** 标题组件属性 */
+  titleProps: Object as PropType<EleTextProps>,
+  /** 二级标题组件属性 */
+  subtitleProps: Object as PropType<EleTextProps>
+};
+
+export type ToolbarProps = ExtractPropTypes<typeof toolbarProps>;
+
+/**
+ * 共享数据key
+ */
+export const TOOLBAR_KEY = Symbol('toolbar') as InjectionKey<ToolbarProvide>;

package/packages/ele-toolbar/style/css-var.scss

@@ -0,0 +1,12 @@
+@use '../../style/util.scss' as *;
+
+/* 工具栏主题变量 */
+@mixin set-toolbar-var($var) {
+  .ele-toolbar {
+    @include set-ele-var('toolbar', $var);
+  }
+
+  .ele-toolbar.is-plain {
+    @include set-ele-var('toolbar-plain', $var);
+  }
+}

package/packages/ele-toolbar/style/index.scss

@@ -0,0 +1,56 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-toolbar-var($ele);
+
+.ele-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('toolbar', 'padding');
+  background: eleVar('toolbar', 'bg');
+  border: eleVar('toolbar', 'border');
+  border-radius: eleVar('toolbar', 'radius');
+
+  .ele-toolbar-title {
+    flex-shrink: 0;
+    max-width: 100%;
+    margin-top: eleVar('toolbar', 'space');
+    margin-bottom: eleVar('toolbar', 'space');
+    margin-right: eleVar('toolbar', 'space');
+  }
+
+  .ele-toolbar-body {
+    flex: auto;
+    max-width: 100%;
+    margin: eleVar('toolbar', 'space') 0;
+  }
+
+  .ele-toolbar-tools {
+    flex-shrink: 0;
+    max-width: 100%;
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: calc(#{eleVar('toolbar', 'space')} / 2);
+    margin-bottom: calc(#{eleVar('toolbar', 'space')} / 2);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  /* 朴素风格 */
+  &.is-plain {
+    padding: 0;
+    border: none;
+    background: none;
+    margin: eleVar('toolbar-plain', 'margin');
+  }
+
+  /* 修复上传列表占位 */
+  .el-upload-list {
+    margin: 0;
+  }
+}

package/packages/ele-toolbar/style/index.ts

@@ -0,0 +1,3 @@
+import '../../ele-tooltip/style/index';
+import '../../ele-text/style/index';
+import './index.scss';

package/packages/ele-toolbar/types.ts

@@ -0,0 +1,19 @@
+import type { EleTooltipProps } from '../ele-app/plus';
+/**
+ * 工具栏主题
+ */
+export type ToolbarTheme = 'default' | 'plain';
+
+/**
+ * 共享数据
+ */
+export interface ToolbarProvide {
+  /** 显示提示 */
+  showTooltip?: (
+    text?: string,
+    el?: HTMLElement,
+    options?: EleTooltipProps
+  ) => void;
+  /** 关闭提示 */
+  hideTooltip?: () => void;
+}

package/packages/ele-tooltip/index.vue

@@ -0,0 +1,189 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <ElTooltip
+    v-bind="rootProps"
+    ref="tooltipRef"
+    @update:visible="handleUpdateVisible"
+    @before-show="handlePopBeforeShow"
+    @before-hide="handlePopBeforeHide"
+    @show="handlePopShow"
+    @hide="handlePopHide"
+    @open="handlePopOpen"
+    @close="handlePopClose"
+  >
+    <slot v-if="$slots.default"></slot>
+    <template #content>
+      <slot name="body">
+        <div
+          v-if="rawContent && content != null && content != ''"
+          v-html="content"
+          class="ele-tooltip-body"
+          :style="bodyStyle"
+        ></div>
+        <div v-else class="ele-tooltip-body" :style="bodyStyle">
+          <slot name="content">{{ content }}</slot>
+        </div>
+      </slot>
+    </template>
+  </ElTooltip>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { ElTooltip } from 'element-plus';
+  import { omit } from '../utils/common';
+  import type { StyleValue } from '../ele-app/types';
+  import type {
+    ElTooltipProps,
+    ElTooltipInstance,
+    ElPopperInstance,
+    ElTooltipContentInstance
+  } from '../ele-app/el';
+  import { tooltipProps, tooltipEmits } from './props';
+
+  defineOptions({ name: 'EleTooltip' });
+
+  const props = defineProps(tooltipProps);
+
+  const emit = defineEmits(tooltipEmits);
+
+  /** 根组件实例 */
+  const tooltipRef = ref<ElTooltipInstance>();
+
+  /** 根组件属性 */
+  const rootProps = computed<ElTooltipProps>(() => {
+    const options: ElTooltipProps = omit(props, [
+      'content',
+      'bodyStyle',
+      'bg',
+      'arrowBg',
+      'width',
+      'isPopover',
+      'onUpdate:visible',
+      'onBeforeShow',
+      'onBeforeHide',
+      'onBefore-show',
+      'onBefore-hide',
+      'onShow',
+      'onHide',
+      'onOpen',
+      'onClose'
+    ] as any);
+    const classes: string[] = ['ele-popper'];
+    if (props.isPopover && props.effect === 'light') {
+      classes.push('ele-popover');
+    } else {
+      classes.push('ele-tooltip');
+    }
+    if (typeof props.popperClass === 'string' && props.popperClass) {
+      classes.push(props.popperClass);
+    }
+    options.popperClass = classes.join(' ');
+
+    const style: StyleValue = {};
+    if (props.bg || props.arrowBg) {
+      options.effect = 'dark';
+      if (props.bg) {
+        style['--ele-tooltip-bg'] = props.bg;
+      }
+      if (props.arrowBg) {
+        style['--ele-tooltip-arrow-bg'] = props.arrowBg;
+      }
+    }
+    const { width, popperStyle } = props;
+    if (width != null) {
+      style.width = typeof width === 'string' ? width : `${width}px`;
+    }
+    if (!popperStyle) {
+      options.popperStyle = style;
+    } else if (Array.isArray(popperStyle)) {
+      options.popperStyle = [style, ...popperStyle];
+    } else {
+      options.popperStyle = [style, popperStyle];
+    }
+    return options;
+  });
+
+  /** 气泡实例 */
+  const popperRef = computed<ElPopperInstance | null>(
+    () => tooltipRef.value?.popperRef as ElPopperInstance
+  );
+
+  /** 内容实例 */
+  const contentRef = computed<ElTooltipContentInstance>(
+    () => tooltipRef.value?.contentRef
+  );
+
+  /** 验证当前焦点是否在气泡内 */
+  const isFocusInsideContent = () => {
+    tooltipRef.value && tooltipRef.value.isFocusInsideContent();
+  };
+
+  /** 更新气泡 */
+  const updatePopper = () => {
+    tooltipRef.value && tooltipRef.value.updatePopper();
+  };
+
+  /** 打开气泡 */
+  const handleOpen = (opt?: Event) => {
+    tooltipRef.value && tooltipRef.value.onOpen(opt);
+  };
+
+  /** 关闭气泡 */
+  const handleClose = (opt?: Event) => {
+    tooltipRef.value && tooltipRef.value.onClose(opt);
+  };
+
+  /** 关闭气泡 */
+  const hide = (opt?: Event) => {
+    tooltipRef.value && (tooltipRef.value as any).hide(opt);
+  };
+
+  /** 更新打开状态 */
+  const handleUpdateVisible = (visible: boolean) => {
+    emit('update:visible', visible);
+  };
+
+  /** 开始打开事件 */
+  const handlePopBeforeShow = (e: Event) => {
+    emit('before-show', e);
+  };
+
+  /** 开始关闭事件 */
+  const handlePopBeforeHide = (e: Event) => {
+    emit('before-hide', e);
+  };
+
+  /** 打开事件 */
+  const handlePopShow = (e: Event) => {
+    emit('show', e);
+  };
+
+  /** 关闭事件 */
+  const handlePopHide = (e: Event) => {
+    emit('hide', e);
+  };
+
+  /** 打开事件 */
+  const handlePopOpen = (e: any) => {
+    emit('open', e);
+  };
+
+  /** 关闭事件 */
+  const handlePopClose = (e: any) => {
+    emit('close', e);
+  };
+
+  defineExpose({
+    tooltipRef,
+    popperRef,
+    contentRef,
+    isFocusInsideContent,
+    updatePopper,
+    handleOpen,
+    handleClose,
+    onOpen: handleOpen,
+    onClose: handleClose,
+    hide
+  });
+</script>