ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,13 @@
+import type { Component } from 'vue';
+/**
+ * 文本类型
+ */
+export type TextType = 'default' | 'heading' | 'secondary' | 'placeholder' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | null;
+/**
+ * 文本大小
+ */
+export type TextSize = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'base' | 'sm' | 'xs' | null;
+/**
+ * 图标
+ */
+export type TextIcon = string | Component;

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

@@ -0,0 +1,27 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    title: StringConstructor;
+    placement: {
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+}, {
+    visible: import("vue").Ref<boolean>;
+    updateVisible: (value: boolean) => void;
+    onClick: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (_e: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    placement: {
+        type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+}>> & {
+    onClick?: ((_e: MouseEvent) => any) | undefined;
+}, {
+    disabled: boolean;
+    placement: import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>;
+}, {}>;
+export default _sfc_main;

package/es/ele-tool/index.js

@@ -0,0 +1,68 @@
+import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, renderSlot } from "vue";
+import { ElTooltip } from "element-plus";
+import { toolProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTool",
+  components: { ElTooltip },
+  props: toolProps,
+  emits: {
+    click: (_e) => true
+  },
+  setup(props, { emit }) {
+    const visible = ref(false);
+    const updateVisible = (value) => {
+      if (value && (!props.title || props.disabled)) {
+        visible.value = false;
+        return;
+      }
+      visible.value = value;
+    };
+    const onClick = (e) => {
+      visible.value = false;
+      emit("click", e);
+    };
+    watch([() => props.disabled, () => props.title], () => {
+      if (!props.title || props.disabled) {
+        visible.value = false;
+      }
+    });
+    return {
+      visible,
+      updateVisible,
+      onClick
+    };
+  }
+});
+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-tool-body" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTooltip = resolveComponent("ElTooltip");
+  return openBlock(), createElementBlock("div", {
+    class: "ele-tool",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+  }, [
+    createVNode(_component_ElTooltip, {
+      content: _ctx.title,
+      visible: _ctx.visible,
+      placement: _ctx.placement,
+      "onUpdate:visible": _ctx.updateVisible
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["content", "visible", "placement", "onUpdate:visible"])
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,13 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+/**
+ * 属性
+ */
+export declare const toolProps: {
+    title: StringConstructor;
+    placement: {
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+};
+export type ToolProps = ExtractPropTypes<typeof toolProps>;

package/es/ele-tool/props.js

@@ -0,0 +1,14 @@
+const toolProps = {
+  // 提示文字
+  title: String,
+  // 提示方向
+  placement: {
+    type: String,
+    default: "top"
+  },
+  // 是否禁用提示
+  disabled: Boolean
+};
+export {
+  toolProps
+};

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

@@ -0,0 +1,11 @@
+@use '../../style/themes/default.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/es/ele-tool/style/index.js

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

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

@@ -0,0 +1,70 @@
+@use '../../style/themes/default.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 0.2s, background-color 0.2s;
+  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/es/ele-toolbar/index.d.ts

@@ -0,0 +1,14 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    title: StringConstructor;
+    subtitle: StringConstructor;
+    theme: import("vue").PropType<import("./types").ToolbarTheme>;
+    form: BooleanConstructor;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    subtitle: StringConstructor;
+    theme: import("vue").PropType<import("./types").ToolbarTheme>;
+    form: BooleanConstructor;
+}>>, {
+    form: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-toolbar/index.js

@@ -0,0 +1,62 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, renderSlot } from "vue";
+import EleText from "../ele-text/index";
+import { toolbarProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleToolbar",
+  components: { EleText },
+  props: toolbarProps
+});
+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-toolbar-title"
+};
+const _hoisted_2 = { class: "ele-toolbar-body" };
+const _hoisted_3 = { class: "ele-toolbar-tools" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleText = resolveComponent("EleText");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-toolbar",
+      { "is-plain": "plain" === _ctx.theme },
+      { "is-form": _ctx.form }
+    ])
+  }, [
+    _ctx.title || _ctx.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      _ctx.title ? (openBlock(), createBlock(_component_EleText, {
+        key: 0,
+        type: "heading"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.title), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.subtitle ? (openBlock(), createBlock(_component_EleText, {
+        key: 1,
+        size: "xs"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.subtitle), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true)
+    ])) : createCommentVNode("", true),
+    createElementVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("div", _hoisted_3, [
+      renderSlot(_ctx.$slots, "tools")
+    ])
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,12 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { ToolbarTheme } from './types';
+/**
+ * 属性
+ */
+export declare const toolbarProps: {
+    title: StringConstructor;
+    subtitle: StringConstructor;
+    theme: PropType<ToolbarTheme>;
+    form: BooleanConstructor;
+};
+export type ToolbarProps = ExtractPropTypes<typeof toolbarProps>;

package/es/ele-toolbar/props.js

@@ -0,0 +1,13 @@
+const toolbarProps = {
+  // 标题
+  title: String,
+  // 二级标题
+  subtitle: String,
+  // 主题风格
+  theme: String,
+  // 是否是表单
+  form: Boolean
+};
+export {
+  toolbarProps
+};

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

@@ -0,0 +1,11 @@
+@use '../../style/themes/default.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/es/ele-toolbar/style/index.js

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

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

@@ -0,0 +1,70 @@
+@use '../../style/themes/default.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-shrink: 0;
+    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;
+  }
+
+  // 朴素风格
+  &.is-plain {
+    padding: 0;
+    border: none;
+    background: none;
+    margin: eleVar('toolbar-plain', 'margin');
+  }
+
+  // 表单
+  &.is-form {
+    .ele-toolbar-body {
+      margin: 0;
+    }
+
+    .el-row > .el-col {
+      margin-top: eleVar('toolbar', 'space');
+      margin-bottom: eleVar('toolbar', 'space');
+    }
+
+    .el-form-item {
+      margin-bottom: 0;
+    }
+  }
+
+  // 修复上传列表占位
+  .el-upload-list {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,4 @@
+/**
+ * 工具栏主题
+ */
+export type ToolbarTheme = 'default' | 'plain';