y-admin-pro 0.0.1

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

@@ -0,0 +1,288 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pagination-var($ele);
+
+.ele-pagination {
+  flex-wrap: wrap;
+  justify-content: center;
+
+  /* 圆角风格 */
+  &.is-circle {
+    /* 间距 */
+    & > * {
+      margin: eleVar('pagination', 'gap') !important;
+      margin-left: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
+    & > .is-last {
+      margin-right: 0 !important;
+    }
+
+    /* 操作按钮 */
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      height: eleVar('pagination', 'height');
+      line-height: eleVar('pagination', 'height');
+      min-width: eleVar('pagination', 'height');
+      padding: eleVar('pagination', 'padding');
+      border-radius: eleVar('pagination', 'radius');
+      color: eleVar('pagination', 'color');
+      font-size: eleVar('pagination', 'font-size');
+      background: eleVar('pagination', 'bg');
+      border: eleVar('pagination', 'border');
+      transition: (color $transition-base, background-color $transition-base);
+
+      &:hover {
+        color: eleVar('pagination', 'hover-color');
+        background: eleVar('pagination', 'hover-bg');
+        border: eleVar('pagination', 'hover-border');
+      }
+    }
+
+    .btn-prev:disabled,
+    .btn-next:disabled,
+    .el-pager li.is-disabled {
+      color: eleVar('pagination', 'disabled-color');
+      background: eleVar('pagination', 'disabled-bg');
+      border: eleVar('pagination', 'disabled-border');
+    }
+
+    .el-pager {
+      margin-left: eleVar('pagination', 'space') !important;
+      margin-right: eleVar('pagination', 'space') !important;
+
+      li {
+        margin: 0;
+
+        & + li {
+          margin-left: eleVar('pagination', 'space');
+        }
+
+        &.is-active {
+          color: eleVar('pagination', 'active-color');
+          background: eleVar('pagination', 'active-bg');
+          border: eleVar('pagination', 'active-border');
+          font-weight: eleVar('pagination', 'active-font-weight');
+
+          &.is-disabled {
+            color: eleVar('pagination', 'disabled-active-color');
+            background: eleVar('pagination', 'disabled-active-bg');
+            border: eleVar('pagination', 'disabled-active-border');
+          }
+        }
+      }
+    }
+
+    .btn-prev {
+      margin-right: 0 !important;
+    }
+
+    /* 图标 */
+    .btn-prev .el-icon,
+    .btn-next .el-icon {
+      font-size: initial;
+      transform: scale(1.02);
+    }
+
+    /* 输入框 */
+    .el-pagination__editor.el-input {
+      width: 50px;
+    }
+
+    .el-pagination__sizes {
+      .el-input,
+      .el-select {
+        width: 96px;
+
+        .el-select__caret {
+          margin-left: 0;
+        }
+      }
+
+      .el-input .el-input__wrapper,
+      .el-select .el-select__wrapper {
+        padding-left: 1px;
+        padding-right: 7px;
+      }
+
+      .el-select__selected-item {
+        text-align: center;
+      }
+    }
+
+    .el-input__inner,
+    .el-select__selected-item > span {
+      font-size: eleVar('pagination', 'sm-font-size');
+    }
+
+    /* 文本 */
+    .el-pagination__total,
+    .el-pagination__goto,
+    .el-pagination__classifier {
+      line-height: eleVar('pagination', 'height');
+    }
+
+    /* 小尺寸 */
+    &.el-pagination--small {
+      & > * {
+        margin: eleVar('pagination', 'sm-gap') !important;
+        margin-left: 0 !important;
+        margin-bottom: 0 !important;
+      }
+
+      & > .is-last {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        height: eleVar('pagination', 'sm-height');
+        line-height: eleVar('pagination', 'sm-height');
+        min-width: eleVar('pagination', 'sm-height');
+        padding: eleVar('pagination', 'sm-padding');
+        border-radius: eleVar('pagination', 'sm-radius');
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+
+      .el-pager {
+        margin-left: eleVar('pagination', 'sm-space') !important;
+        margin-right: eleVar('pagination', 'sm-space') !important;
+
+        li + li {
+          margin-left: eleVar('pagination', 'sm-space');
+        }
+      }
+
+      .btn-prev {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev .el-icon,
+      .btn-next .el-icon {
+        transform: scale(0.88);
+      }
+
+      .el-pagination__editor.el-input {
+        width: 44px;
+      }
+
+      .el-pagination__sizes {
+        .el-input,
+        .el-select {
+          width: 88px;
+
+          .el-select__caret {
+            font-size: 12px;
+          }
+        }
+
+        .el-input .el-input__wrapper,
+        .el-select .el-select__wrapper {
+          padding-right: 6px;
+        }
+      }
+
+      .el-input__inner,
+      .el-select__selected-item > span {
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+
+      .el-pagination__total,
+      .el-pagination__goto,
+      .el-pagination__classifier {
+        line-height: eleVar('pagination', 'sm-height');
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+    }
+
+    /* 大尺寸 */
+    &.el-pagination--large {
+      & > * {
+        margin: eleVar('pagination', 'lg-gap') !important;
+        margin-left: 0 !important;
+        margin-bottom: 0 !important;
+      }
+
+      & > .is-last {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        height: eleVar('pagination', 'lg-height');
+        line-height: eleVar('pagination', 'lg-height');
+        min-width: eleVar('pagination', 'lg-height');
+        padding: eleVar('pagination', 'lg-padding');
+        border-radius: eleVar('pagination', 'lg-radius');
+        font-size: eleVar('pagination', 'lg-font-size');
+      }
+
+      .el-pager {
+        margin-left: eleVar('pagination', 'lg-space') !important;
+        margin-right: eleVar('pagination', 'lg-space') !important;
+
+        li + li {
+          margin-left: eleVar('pagination', 'lg-space');
+        }
+      }
+
+      .btn-prev {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev .el-icon,
+      .btn-next .el-icon {
+        transform: scale(1.16);
+      }
+
+      .el-pagination__editor.el-input {
+        width: 56px;
+      }
+
+      .el-pagination__sizes {
+        .el-input,
+        .el-select {
+          width: 104px;
+        }
+
+        .el-input .el-input__wrapper,
+        .el-select .el-select__wrapper {
+          padding-right: 8px;
+        }
+      }
+
+      .el-input__inner,
+      .el-select__selected-item > span {
+        font-size: eleVar('pagination', 'lg-font-size');
+      }
+
+      .el-pagination__total,
+      .el-pagination__goto,
+      .el-pagination__classifier {
+        line-height: eleVar('pagination', 'lg-height');
+        font-size: eleVar('pagination', 'lg-font-size');
+      }
+    }
+  }
+
+  /* 无限页数 */
+  &.is-infinite {
+    .el-pager li:not(.is-active),
+    .el-pagination__total {
+      display: none;
+    }
+  }
+}
+
+/* 每页数量选择下拉框 */
+.ele-pagination-popper.el-popper {
+  &.is-fixed {
+    position: fixed !important;
+  }
+}

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

@@ -0,0 +1,2 @@
+import 'element-plus/es/components/pagination/style/index';
+import './index.scss';

package/packages/ele-pagination/types.ts

@@ -0,0 +1,9 @@
+/**
+ * 风格
+ */
+export type PaginationType = 'default' | 'circle';
+
+/**
+ * 总条目数
+ */
+export type PaginationTotal = number | '*';

package/packages/ele-popconfirm/index.vue

@@ -0,0 +1,194 @@
+<!-- 气泡确认 -->
+<template>
+  <EleTooltip
+    :tabindex="tabindex"
+    v-bind="tooltipProps"
+    ref="tooltipRef"
+    :isPopover="true"
+    @update:visible="handleUpdateVisible"
+    @before-show="handlePopBeforeEnter"
+    @before-hide="handlePopBeforeLeave"
+    @show="handlePopAfterEnter"
+    @hide="handlePopAfterLeave"
+  >
+    <template v-if="$slots.reference">
+      <slot name="reference"></slot>
+    </template>
+    <template #body>
+      <div :class="['ele-popover-body', bodyClass]" :style="bodyStyle">
+        <div class="ele-popconfirm-main">
+          <ElIcon v-if="!hideIcon" v-bind="iconOptions">
+            <component v-if="icon" :is="icon" :style="iconStyle" />
+            <QuestionCircleFilled v-else :style="iconStyle" />
+          </ElIcon>
+          <div class="ele-popconfirm-body">
+            <div
+              v-if="(content || $slots.content) && (title || $slots.title)"
+              class="ele-popconfirm-title"
+              :style="titleStyle"
+            >
+              <slot name="title">{{ title }}</slot>
+            </div>
+            <div class="ele-popconfirm-content" :style="contentStyle">
+              <slot name="content">{{ content || title }}</slot>
+            </div>
+          </div>
+        </div>
+        <div class="ele-popconfirm-action" :style="footerStyle">
+          <slot
+            name="actions"
+            :cancel="handleCancel"
+            :confirm="handleConfirm"
+            :cancelText="cancelText"
+            :confirmText="confirmText"
+          >
+            <slot
+              name="action"
+              :cancel="handleCancel"
+              :confirm="handleConfirm"
+              :cancelText="cancelText"
+              :confirmText="confirmText"
+            ></slot>
+            <ElButton
+              v-if="!hideCancelButton"
+              size="small"
+              :type="cancelButtonType === 'text' ? void 0 : cancelButtonType"
+              :text="cancelButtonType === 'text'"
+              v-bind="cancelButtonProps || {}"
+              @click="handleCancel"
+            >
+              {{ cancelText }}
+            </ElButton>
+            <ElButton
+              v-if="!hideConfirmButton"
+              size="small"
+              :type="confirmButtonType === 'text' ? void 0 : confirmButtonType"
+              :text="confirmButtonType === 'text'"
+              v-bind="confirmButtonProps || {}"
+              @click="handleConfirm"
+            >
+              {{ confirmText }}
+            </ElButton>
+          </slot>
+        </div>
+      </div>
+    </template>
+  </EleTooltip>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useLocale, ElIcon, ElButton } from 'element-plus';
+  import type { ElIconProps } from '../ele-app/el';
+  import type { ClassValues } from '../ele-app/types';
+  import type { EleTooltipInstance, EleTooltipProps } from '../ele-app/plus';
+  import { pick } from '../utils/common';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import { tooltipPropKeys } from '../ele-tooltip/props';
+  import { QuestionCircleFilled } from '../icons/index';
+  import { popconfirmProps, popconfirmEmits } from './props';
+
+  defineOptions({ name: 'ElePopconfirm' });
+
+  const props = defineProps(popconfirmProps);
+
+  const emit = defineEmits(popconfirmEmits);
+
+  const { t } = useLocale();
+
+  /** 文字提示实例 */
+  const tooltipRef = ref<EleTooltipInstance>(null);
+
+  /** 文字提示属性 */
+  const tooltipProps = computed<EleTooltipProps>(() => {
+    const keys: any = tooltipPropKeys.filter(
+      (k) => !['content', 'bodyStyle'].includes(k)
+    );
+    const options: EleTooltipProps = pick(props, keys) as EleTooltipProps;
+    options.ariaLabel = props.title;
+    options.gpuAcceleration = props.transition === 'el-fade-in-linear';
+    const classes: string[] = ['ele-popconfirm'];
+    if (typeof props.popperClass === 'string' && props.popperClass) {
+      classes.push(props.popperClass);
+    }
+    options.popperClass = classes.join(' ');
+    return options;
+  });
+
+  /** 图标属性 */
+  const iconOptions = computed<ElIconProps>(() => {
+    const options: ElIconProps = props.iconProps || {};
+    if (props.iconColor) {
+      options.style = Object.assign({ color: props.iconColor }, options.style);
+    }
+    const classes: ClassValues = ['ele-popconfirm-icon'];
+    if (options.class) {
+      if (Array.isArray(options.class)) {
+        options.class.forEach((c) => {
+          classes.push(c);
+        });
+      } else {
+        classes.push(options.class);
+      }
+    }
+    options.class = classes;
+    return options;
+  });
+
+  /** 确认按钮文字 */
+  const confirmText = computed(() => {
+    return props.confirmButtonText || t('el.popconfirm.confirmButtonText');
+  });
+
+  /** 取消按钮文字 */
+  const cancelText = computed(() => {
+    return props.cancelButtonText || t('el.popconfirm.cancelButtonText');
+  });
+
+  /** 关闭气泡 */
+  const hidePopper = () => {
+    tooltipRef.value && tooltipRef.value.hide();
+  };
+
+  /** 确认按钮点击事件 */
+  const handleConfirm = (e: MouseEvent) => {
+    hidePopper();
+    emit('confirm', e);
+  };
+
+  /** 取消按钮点击事件 */
+  const handleCancel = (e: MouseEvent) => {
+    hidePopper();
+    emit('cancel', e);
+  };
+
+  /** 更新打开状态 */
+  const handleUpdateVisible = (visible: boolean) => {
+    emit('update:visible', visible);
+  };
+
+  /** 开始打开事件 */
+  const handlePopBeforeEnter = () => {
+    emit('before-enter');
+  };
+
+  /** 开始关闭事件 */
+  const handlePopBeforeLeave = () => {
+    emit('before-leave');
+  };
+
+  /** 打开结束事件 */
+  const handlePopAfterEnter = () => {
+    emit('after-enter');
+  };
+
+  /** 关闭结束事件 */
+  const handlePopAfterLeave = () => {
+    emit('after-leave');
+  };
+
+  defineExpose({
+    tooltipRef,
+    hidePopper
+  });
+</script>

package/packages/ele-popconfirm/props.ts

@@ -0,0 +1,68 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type {
+  ElPopconfirmProps,
+  ElIconProps,
+  ElButtonProps
+} from '../ele-app/el';
+import type { ElePopoverProps } from '../ele-app/plus';
+import { popoverProps, popoverEmits } from '../ele-popover/props';
+
+/**
+ * 属性
+ */
+export const popconfirmProps = {
+  ...popoverProps,
+  trigger: {
+    type: String as PropType<ElePopoverProps['trigger']>,
+    default: 'click'
+  },
+  /** 确认按钮文字 */
+  confirmButtonText: String,
+  /** 取消按钮文字 */
+  cancelButtonText: String,
+  /** 确认按钮类型 */
+  confirmButtonType: {
+    type: String as PropType<ElPopconfirmProps['confirmButtonType']>,
+    default: 'primary'
+  },
+  /** 取消按钮类型 */
+  cancelButtonType: {
+    type: String as PropType<ElPopconfirmProps['cancelButtonType']>,
+    default: 'text'
+  },
+  /** 自定义图标 */
+  icon: [String, Object, Function] as PropType<ElPopconfirmProps['icon']>,
+  /** 图标颜色 */
+  iconColor: {
+    type: String,
+    default: '#f90'
+  },
+  /** 是否隐藏图标 */
+  hideIcon: Boolean,
+  /** 是否隐藏确认按钮 */
+  hideConfirmButton: Boolean,
+  /** 是否隐藏取消按钮 */
+  hideCancelButton: Boolean,
+  /** 图标样式 */
+  iconStyle: Object as PropType<StyleValue>,
+  /** 图标组件属性 */
+  iconProps: Object as PropType<ElIconProps>,
+  /** 确认按钮组件属性 */
+  confirmButtonProps: Object as PropType<ElButtonProps>,
+  /** 取消按钮组件属性 */
+  cancelButtonProps: Object as PropType<ElButtonProps>,
+  /** 底栏样式 */
+  footerStyle: Object as PropType<StyleValue>
+};
+
+export type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>;
+
+/**
+ * 事件
+ */
+export const popconfirmEmits = {
+  ...popoverEmits,
+  confirm: (_e: MouseEvent) => true,
+  cancel: (_e: MouseEvent) => true
+};

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 气泡确认框主题变量 */
+@mixin set-popconfirm-var($var) {
+  .ele-popconfirm {
+    @include set-ele-var('popconfirm', $var);
+  }
+}

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

@@ -0,0 +1,41 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-popconfirm-var($ele);
+
+.ele-popconfirm > .ele-popover-body {
+  padding: eleVar('popconfirm', 'padding');
+}
+
+.ele-popconfirm-main {
+  display: flex;
+}
+
+.ele-popconfirm-icon {
+  flex-shrink: 0;
+  font-size: eleVar('popconfirm', 'icon-font-size');
+  margin: eleVar('popconfirm', 'icon-margin');
+}
+
+.ele-popconfirm-body {
+  flex: 1;
+}
+
+.ele-popconfirm-title {
+  color: eleVar('popconfirm', 'title-color');
+  font-size: eleVar('popconfirm', 'title-font-size');
+  font-weight: eleVar('popconfirm', 'title-font-weight');
+  margin-bottom: eleVar('popconfirm', 'title-margin');
+}
+
+.ele-popconfirm-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: eleVar('popconfirm', 'action-margin');
+
+  .el-button + .el-button {
+    margin-left: eleVar('popconfirm', 'action-space');
+  }
+}

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

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/icon/style/index';
+import 'element-plus/es/components/button/style/index';
+import '../../ele-tooltip/style/index';
+import './index.scss';