ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,98 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-cropper {
+  .ele-cropper-main {
+    display: flex;
+  }
+
+  .ele-cropper-image {
+    flex: 1;
+    height: 320px;
+    position: relative;
+    box-sizing: border-box;
+
+    & > img {
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .ele-cropper-previews {
+    font-size: 0;
+    flex-shrink: 0;
+    text-align: right;
+  }
+
+  .ele-cropper-preview {
+    margin-top: 16px;
+    display: inline-block;
+    box-sizing: border-box;
+    border: 1px solid elVar('border-color', 'lighter');
+    vertical-align: top;
+    overflow: hidden;
+
+    &.is-circle {
+      border-radius: 50%;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .ele-cropper.is-responsive .ele-cropper-previews {
+    display: none;
+  }
+}
+
+/* 操作按钮 */
+.ele-cropper-tools {
+  margin-top: 6px;
+
+  .el-upload-list {
+    display: none;
+  }
+}
+
+.ele-cropper-tool-item {
+  margin: 10px 14px 0 0;
+  vertical-align: top;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.ele-cropper-tool {
+  padding: 0 10px;
+
+  &:not(.ele-cropper-ok) > i + span {
+    display: none;
+  }
+
+  & > .el-icon {
+    font-size: 16px;
+  }
+}
+
+.ele-cropper-ok {
+  padding-left: 10px;
+  padding-right: 10px;
+  border-left: none;
+  border-right: none;
+}
+
+.ele-cropper-upload {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-right: none;
+}
+
+@media screen and (max-width: 768px) {
+  .ele-cropper.is-responsive .ele-cropper-tool-item:not(:last-child) {
+    margin-right: 6px;
+  }
+}

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

@@ -0,0 +1,69 @@
+import type { Component } from 'vue';
+import type Cropper from 'cropperjs';
+/**
+ * 上传事件参数
+ */
+export interface UploadOption {
+    /** 文件数据 */
+    data?: string | ArrayBuffer | null;
+    /** 文件类型 */
+    type: string;
+}
+/**
+ * 操作按钮名称
+ */
+export type ToolName = 'zoomIn' | 'zoomOut' | 'moveLeft' | 'moveRight' | 'moveUp' | 'moveDown' | 'rotateLeft' | 'rotateRight' | 'flipX' | 'flipY' | 'reset' | 'upload' | 'ok';
+/**
+ * 操作按钮
+ */
+export interface ToolItem {
+    /** 标识 */
+    key: string;
+    /** 名称 */
+    name: ToolName;
+    /** 图标 */
+    icon?: Component;
+    /** 类名 */
+    className?: string;
+}
+/**
+ * 操作按钮组
+ */
+export interface ToolGroup {
+    /** 标识 */
+    key: string;
+    /** 操作按钮 */
+    items: ToolItem[];
+}
+/**
+ * 实例
+ */
+export interface CurrentValue {
+    /** 裁剪组件实例 */
+    instance?: Cropper | null;
+    /** 当前图片类型 */
+    imageType?: string;
+    /** 水平翻转值 */
+    scaleXValue: number;
+    /** 垂直翻转值 */
+    scaleYValue: number;
+}
+/**
+ * 国际化
+ */
+export interface CropperLocale {
+    zoomIn: string;
+    zoomOut: string;
+    rotateLeft: string;
+    rotateRight: string;
+    moveLeft: string;
+    moveRight: string;
+    moveUp: string;
+    moveDown: string;
+    flipX: string;
+    flipY: string;
+    reset: string;
+    upload: string;
+    ok: string;
+    title: string;
+}

package/es/ele-cropper-modal/index.d.ts

@@ -0,0 +1,99 @@
+import type { CropperLocale } from '../ele-cropper/types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    modelValue: BooleanConstructor;
+    modalProps: import("vue").PropType<Partial<Omit<import("../ele-modal/props").ModalProps, "modelValue">>>;
+    height: StringConstructor;
+    src: StringConstructor;
+    imageType: {
+        type: StringConstructor;
+        default: string;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    tools: {
+        type: StringConstructor;
+        default: string;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    toBlob: BooleanConstructor;
+    options: import("vue").PropType<Cropper.Options<HTMLImageElement>>;
+    croppedOptions: import("vue").PropType<Cropper.GetCroppedCanvasOptions>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    locale: import("vue").PropType<CropperLocale>;
+}, {
+    lang: import("vue").ComputedRef<CropperLocale>;
+    updateModelValue: (value: boolean) => void;
+    onDone: (result: Blob | string | null) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (_result: string | Blob | null) => boolean;
+    'update:modelValue': (_value: boolean) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: BooleanConstructor;
+    modalProps: import("vue").PropType<Partial<Omit<import("../ele-modal/props").ModalProps, "modelValue">>>;
+    height: StringConstructor;
+    src: StringConstructor;
+    imageType: {
+        type: StringConstructor;
+        default: string;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    tools: {
+        type: StringConstructor;
+        default: string;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    toBlob: BooleanConstructor;
+    options: import("vue").PropType<Cropper.Options<HTMLImageElement>>;
+    croppedOptions: import("vue").PropType<Cropper.GetCroppedCanvasOptions>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    locale: import("vue").PropType<CropperLocale>;
+}>> & {
+    onDone?: ((_result: string | Blob | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
+}, {
+    tooltip: boolean;
+    responsive: boolean;
+    modelValue: boolean;
+    imageType: string;
+    accept: string;
+    tools: string;
+    preview: boolean;
+    previewWidth: number;
+    toBlob: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-cropper-modal/index.js

@@ -0,0 +1,93 @@
+import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { useLocale } from "../ele-config-provider/use-receiver";
+import EleModal from "../ele-modal/index";
+import EleCropper from "../ele-cropper/index";
+import { cropperModalProps, cropperModalEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleCropperModal",
+  components: { EleModal, EleCropper },
+  props: cropperModalProps,
+  emits: cropperModalEmits,
+  setup(props, { emit }) {
+    const { lang } = useLocale("cropper", props);
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const onDone = (result) => {
+      emit("done", result);
+    };
+    return { lang, updateModelValue, onDone };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleCropper = resolveComponent("EleCropper");
+  const _component_EleModal = resolveComponent("EleModal");
+  return openBlock(), createBlock(_component_EleModal, mergeProps({
+    width: "660px",
+    title: _ctx.lang.title
+  }, _ctx.modalProps, {
+    modelValue: _ctx.modelValue,
+    "onUpdate:modelValue": _ctx.updateModelValue
+  }), createSlots({
+    default: withCtx(() => [
+      createVNode(_component_EleCropper, {
+        height: _ctx.height,
+        src: _ctx.src,
+        imageType: _ctx.imageType,
+        accept: _ctx.accept,
+        tools: _ctx.tools,
+        preview: _ctx.preview,
+        previewWidth: _ctx.previewWidth,
+        toBlob: _ctx.toBlob,
+        options: _ctx.options,
+        croppedOptions: _ctx.croppedOptions,
+        tooltip: _ctx.tooltip,
+        tooltipProps: _ctx.tooltipProps,
+        responsive: _ctx.responsive,
+        locale: _ctx.locale,
+        onDone: _ctx.onDone
+      }, null, 8, ["height", "src", "imageType", "accept", "tools", "preview", "previewWidth", "toBlob", "options", "croppedOptions", "tooltip", "tooltipProps", "responsive", "locale", "onDone"])
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.header ? {
+      name: "header",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.$slots.footer ? {
+      name: "footer",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "1"
+    } : void 0,
+    _ctx.$slots.maxIcon ? {
+      name: "maxIcon",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "maxIcon", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "2"
+    } : void 0,
+    _ctx.$slots.closeIcon ? {
+      name: "closeIcon",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "closeIcon", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "3"
+    } : void 0
+  ]), 1040, ["title", "modelValue", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-cropper-modal/props.d.ts

@@ -0,0 +1,52 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { ModalProps } from '../ele-modal/props';
+/**
+ * 属性
+ */
+export declare const cropperModalProps: {
+    modelValue: BooleanConstructor;
+    modalProps: PropType<Partial<Omit<ModalProps, "modelValue">>>;
+    height: StringConstructor;
+    src: StringConstructor;
+    imageType: {
+        type: StringConstructor;
+        default: string;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    tools: {
+        type: StringConstructor;
+        default: string;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    toBlob: BooleanConstructor;
+    options: PropType<Cropper.Options<HTMLImageElement>>;
+    croppedOptions: PropType<Cropper.GetCroppedCanvasOptions>;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipProps: PropType<Partial<import("element-plus").ElTooltipProps>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    locale: PropType<import("../ele-cropper/types").CropperLocale>;
+};
+export type CropperModalProps = ExtractPropTypes<typeof cropperModalProps>;
+/**
+ * 事件
+ */
+export declare const cropperModalEmits: {
+    done: (_result: Blob | string | null) => boolean;
+    'update:modelValue': (_value: boolean) => boolean;
+};

package/es/ele-cropper-modal/props.js

@@ -0,0 +1,18 @@
+import { cropperProps } from "../ele-cropper/props";
+const cropperModalProps = {
+  ...cropperProps,
+  // 弹窗是否显示
+  modelValue: Boolean,
+  // 弹窗参数
+  modalProps: Object
+};
+const cropperModalEmits = {
+  // 裁剪完成事件
+  done: (_result) => true,
+  // 更新弹窗显示状态
+  "update:modelValue": (_value) => true
+};
+export {
+  cropperModalEmits,
+  cropperModalProps
+};

package/es/ele-cropper-modal/style/index.js

@@ -0,0 +1,2 @@
+import '../../ele-modal/style/index';
+import '../../ele-cropper/style/index';

package/es/ele-dashboard/index.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    type: import("vue").PropType<import("./types").DashboardType>;
+    color: StringConstructor;
+    size: (StringConstructor | NumberConstructor)[];
+    space: (StringConstructor | NumberConstructor)[];
+}, {
+    authenticated: import("vue").Ref<boolean>;
+    rootStyle: import("vue").ComputedRef<CSSProperties>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: import("vue").PropType<import("./types").DashboardType>;
+    color: StringConstructor;
+    size: (StringConstructor | NumberConstructor)[];
+    space: (StringConstructor | NumberConstructor)[];
+}>>, {}, {}>;
+export default _sfc_main;

package/es/ele-dashboard/index.js

@@ -0,0 +1,70 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode } from "vue";
+import { useLicense } from "../utils/license-util";
+import { dashboardProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleDashboard",
+  props: dashboardProps,
+  setup(props) {
+    const { authenticated } = useLicense();
+    const rootStyle = computed(() => {
+      const style = {};
+      if (props.size != null) {
+        if (typeof props.size === "number") {
+          style.width = `${props.size}px`;
+          style.height = `${props.size}px`;
+        } else {
+          style.width = props.size;
+          style.height = props.size;
+        }
+      }
+      if (props.space != null) {
+        style["--ele-dashboard-space"] = typeof props.space === "number" ? `${props.space}px` : props.space;
+      }
+      if (props.color) {
+        style["--ele-dashboard-color"] = props.color;
+      }
+      return style;
+    });
+    return { authenticated, rootStyle };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-dashboard-inner" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-dashboard-outer"
+};
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "ele-dashboard-bg" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "ele-dashboard-bg" }, null, -1);
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "ele-dashboard-bg" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_3,
+  _hoisted_4,
+  _hoisted_5
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-dashboard",
+      { "is-success": _ctx.type === "success" },
+      { "is-warning": _ctx.type === "warning" },
+      { "is-danger": _ctx.type === "danger" }
+    ]),
+    style: normalizeStyle(_ctx.rootStyle)
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _ctx.authenticated ? (openBlock(), createElementBlock("div", _hoisted_2, _hoisted_6)) : createCommentVNode("", true)
+  ], 6);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,12 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { DashboardType } from './types';
+/**
+ * 属性
+ */
+export declare const dashboardProps: {
+    type: PropType<DashboardType>;
+    color: StringConstructor;
+    size: (StringConstructor | NumberConstructor)[];
+    space: (StringConstructor | NumberConstructor)[];
+};
+export type DashboardProps = ExtractPropTypes<typeof dashboardProps>;

package/es/ele-dashboard/props.js

@@ -0,0 +1,13 @@
+const dashboardProps = {
+  // 类型
+  type: String,
+  // 自定义颜色
+  color: String,
+  // 尺寸
+  size: [Number, String],
+  // 间距
+  space: [Number, String]
+};
+export {
+  dashboardProps
+};

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

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

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

@@ -0,0 +1,78 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-dashboard {
+  --ele-dashboard-space: 18px;
+  --ele-dashboard-color: #{elVar('color-primary')};
+  width: 170px;
+  height: 170px;
+  display: inline-block;
+  padding: var(--ele-dashboard-space);
+  box-sizing: border-box;
+  position: relative;
+
+  &.is-success {
+    --ele-dashboard-color: #{elVar('color-success')};
+  }
+
+  &.is-warning {
+    --ele-dashboard-color: #{elVar('color-warning')};
+  }
+
+  &.is-danger {
+    --ele-dashboard-color: #{elVar('color-danger')};
+  }
+}
+
+.ele-dashboard-inner {
+  width: 100%;
+  height: 100%;
+  color: var(--ele-dashboard-color);
+  background: elVar('bg-color', 'overlay');
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  position: relative;
+  z-index: 2;
+}
+
+.ele-dashboard-outer {
+  width: calc(100% - var(--ele-dashboard-space));
+  height: calc(100% - var(--ele-dashboard-space));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  & > .ele-dashboard-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--ele-dashboard-color);
+    animation: eleAnimDashboard 8s infinite linear;
+    border-radius: 46% 46% 42% 44%;
+    opacity: 0.3;
+
+    &:first-child {
+      animation: eleAnimDashboard 12s infinite linear;
+      border-radius: 56% 56% 52% 54%;
+      opacity: 0.8;
+    }
+
+    &:last-child {
+      animation: eleAnimDashboard 10s infinite linear;
+      border-radius: 44% 44% 42% 46%;
+      opacity: 0.5;
+    }
+  }
+}
+
+@keyframes eleAnimDashboard {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

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

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

@@ -0,0 +1,29 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    type: import("vue").PropType<import("./types").DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: import("vue").PropType<import("./types").DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>>, {
+    ripple: boolean;
+    size: string | number;
+}, {}>;
+export default _sfc_main;