y-admin-pro 0.0.1

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

@@ -0,0 +1,308 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-dropdown-var($ele);
+
+.ele-dropdown-trigger > .el-tooltip__trigger {
+  outline: none;
+}
+
+.ele-dropdown {
+  &.ele-popper.ele-popover {
+    min-width: auto;
+    width: max-content;
+  }
+}
+
+.ele-dropdown-menu {
+  padding: eleVar('dropdown', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  height: eleVar('dropdown', 'item-height');
+  line-height: eleVar('dropdown', 'item-height');
+  color: eleVar('dropdown', 'item-color');
+  font-size: eleVar('dropdown', 'item-font-size');
+  padding: eleVar('dropdown', 'item-padding');
+  border-radius: eleVar('dropdown', 'item-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  & + .ele-dropdown-menu-item {
+    margin-top: eleVar('dropdown', 'item-margin');
+  }
+
+  & > .el-icon {
+    font-size: eleVar('dropdown', 'icon-size');
+    margin: eleVar('dropdown', 'icon-margin');
+  }
+
+  & > .ele-dropdown-menu-item-arrow {
+    color: eleVar('dropdown', 'arrow-color');
+    font-size: eleVar('dropdown', 'arrow-size');
+    padding: eleVar('dropdown', 'arrow-padding');
+    margin: eleVar('dropdown', 'arrow-margin');
+  }
+
+  &:hover,
+  &:focus {
+    color: eleVar('dropdown', 'item-hover-color');
+    background: eleVar('dropdown', 'item-hover-bg');
+  }
+
+  &.is-active {
+    color: eleVar('dropdown', 'item-active-color');
+    background: eleVar('dropdown', 'item-active-bg');
+    font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+    &:hover,
+    &:focus {
+      background: eleVar('dropdown', 'item-active-hover-bg');
+    }
+  }
+
+  &.is-danger {
+    color: eleVar('dropdown', 'item-danger-color');
+
+    &.is-active {
+      background: eleVar('dropdown', 'item-danger-bg');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-danger-hover-bg');
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: eleVar('dropdown', 'item-disabled-color');
+    background: none;
+    cursor: not-allowed;
+
+    &.is-active,
+    &.is-active:hover,
+    &.is-active:focus {
+      background: eleVar('dropdown', 'item-disabled-bg');
+    }
+  }
+}
+
+.ele-dropdown-menu-divider {
+  border-top: eleVar('dropdown', 'divider');
+  margin: eleVar('dropdown', 'divider-margin');
+}
+
+.ele-dropdown-caret-button {
+  width: 32px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* 小尺寸 */
+.ele-dropdown-menu.is-small {
+  padding: eleVar('dropdown', 'sm-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'sm-item-height');
+    line-height: eleVar('dropdown', 'sm-item-height');
+    font-size: eleVar('dropdown', 'sm-item-font-size');
+    padding: eleVar('dropdown', 'sm-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'sm-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'sm-divider-margin');
+  }
+}
+
+/* 大尺寸 */
+.ele-dropdown-menu.is-large {
+  padding: eleVar('dropdown', 'lg-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'lg-item-height');
+    line-height: eleVar('dropdown', 'lg-item-height');
+    font-size: eleVar('dropdown', 'lg-item-font-size');
+    padding: eleVar('dropdown', 'lg-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'lg-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'lg-divider-margin');
+  }
+}
+
+/* 子菜单 */
+.ele-dropdown-wrapper.is-sub-menu {
+  width: max-content;
+  background: eleVar('popper', 'bg');
+  border: eleVar('popper', 'border');
+  box-shadow: eleVar('popper', 'shadow');
+  border-radius: eleVar('popper', 'radius');
+  position: absolute;
+  left: 100%;
+  top: 0;
+  transform-origin: top left;
+  transition: all $transition-slow;
+
+  &.is-right-end {
+    top: auto;
+    bottom: 0;
+    transform-origin: bottom left;
+  }
+
+  &.is-left-start {
+    left: auto;
+    right: 100%;
+    transform-origin: top right;
+  }
+
+  &.is-left-end {
+    top: auto;
+    bottom: 0;
+    left: auto;
+    right: 100%;
+    transform-origin: bottom right;
+  }
+}
+
+.ele-dropdown-menu-item:not(:hover) > .ele-dropdown-wrapper,
+.ele-dropdown-menu-item.is-disabled > .ele-dropdown-wrapper {
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/* ElDropdown */
+.ele-dropdown-trigger.el-dropdown {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.ele-dropdown {
+  .el-dropdown-menu {
+    background: none;
+    border-radius: 0;
+    padding: eleVar('dropdown', 'padding');
+    box-sizing: border-box;
+  }
+
+  .el-dropdown-menu__item {
+    height: eleVar('dropdown', 'item-height');
+    line-height: eleVar('dropdown', 'item-height');
+    color: eleVar('dropdown', 'item-color');
+    font-size: eleVar('dropdown', 'item-font-size');
+    padding: eleVar('dropdown', 'item-padding');
+    border-radius: eleVar('dropdown', 'item-radius');
+    transition: (color $transition-base, background-color $transition-base);
+
+    & + .el-dropdown-menu__item {
+      margin-top: eleVar('dropdown', 'item-margin');
+    }
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'icon-size');
+      margin: eleVar('dropdown', 'icon-margin');
+    }
+
+    &:not(.is-disabled):hover,
+    &:not(.is-disabled):focus {
+      color: eleVar('dropdown', 'item-hover-color');
+      background: eleVar('dropdown', 'item-hover-bg');
+    }
+
+    &:not(.is-disabled).is-active {
+      color: eleVar('dropdown', 'item-active-color');
+      background: eleVar('dropdown', 'item-active-bg');
+      font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-active-hover-bg');
+      }
+    }
+
+    &:not(.is-disabled).is-danger {
+      color: eleVar('dropdown', 'item-danger-color');
+
+      &.is-active {
+        background: eleVar('dropdown', 'item-danger-bg');
+
+        &:hover,
+        &:focus {
+          background: eleVar('dropdown', 'item-danger-hover-bg');
+        }
+      }
+    }
+
+    &.is-disabled {
+      color: eleVar('dropdown', 'item-disabled-color');
+      background: none;
+      cursor: not-allowed;
+
+      &.is-active,
+      &.is-active:hover,
+      &.is-active:focus {
+        background: eleVar('dropdown', 'item-disabled-bg');
+        font-weight: eleVar('dropdown', 'item-active-font-weight');
+      }
+    }
+  }
+
+  .el-dropdown-menu__item--divided {
+    border-top: eleVar('dropdown', 'divider');
+    margin: eleVar('dropdown', 'divider-margin');
+  }
+
+  .el-dropdown-menu--small {
+    padding: eleVar('dropdown', 'sm-padding');
+
+    .el-dropdown-menu__item {
+      height: eleVar('dropdown', 'sm-item-height');
+      line-height: eleVar('dropdown', 'sm-item-height');
+      font-size: eleVar('dropdown', 'sm-item-font-size');
+      padding: eleVar('dropdown', 'sm-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'sm-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'sm-divider-margin');
+    }
+  }
+
+  .el-dropdown-menu--large {
+    padding: eleVar('dropdown', 'lg-padding');
+
+    .el-dropdown-menu__item {
+      height: eleVar('dropdown', 'lg-item-height');
+      line-height: eleVar('dropdown', 'lg-item-height');
+      font-size: eleVar('dropdown', 'lg-item-font-size');
+      padding: eleVar('dropdown', 'lg-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'lg-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'lg-divider-margin');
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import 'element-plus/es/components/dropdown/style/index';
+import 'element-plus/es/components/dropdown-menu/style/index';
+import 'element-plus/es/components/dropdown-item/style/index';
+import 'element-plus/es/components/icon/style/index';
+import 'element-plus/es/components/scrollbar/style/index';
+import 'element-plus/es/components/button-group/style/index';
+import 'element-plus/es/components/button/style/index';
+import '../../ele-tooltip/style/index';
+import './index.scss';

package/packages/ele-dropdown/types.ts

@@ -0,0 +1,22 @@
+import type { StyleValue } from '../ele-app/types';
+import type { ElIconProps, ElDropdownItemProps } from '../ele-app/el';
+
+/**
+ * 下拉菜单数据
+ */
+export interface DropdownItem extends ElDropdownItemProps {
+  /** 循环的 key */
+  key?: string | number | symbol;
+  /** 标题 */
+  title?: string;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+  /** 插槽名称 */
+  slot?: Exclude<string, 'default'>;
+  /** 是否为危险样式 */
+  danger?: boolean;
+  /** 子菜单 */
+  children?: DropdownItem[];
+}

package/packages/ele-edit-tag/index.vue

@@ -0,0 +1,271 @@
+<!-- 标签输入 -->
+<template>
+  <div
+    :class="[
+      'ele-edit-tag',
+      { 'is-large': size === 'large' },
+      { 'is-small': size === 'small' },
+      { 'is-disabled': disabled },
+      { 'is-readonly': readonly }
+    ]"
+  >
+    <template v-if="modelValue">
+      <ElTag
+        v-for="(item, index) in modelValue"
+        :key="index + '-' + item"
+        :hit="hit"
+        :type="type"
+        :color="color"
+        :size="size"
+        :effect="effect"
+        :round="round"
+        :closable="readonly || disabled ? false : true"
+        :disableTransitions="true"
+        :style="itemStyle"
+        @close="handleTagClose(index, item)"
+        @click="handleTagClick(index, item)"
+      >
+        {{ item }}
+      </ElTag>
+    </template>
+    <ElTag
+      v-if="!readonly"
+      :hit="hit"
+      v-show="!isEdit"
+      type="info"
+      :size="size"
+      :round="round"
+      :disableTransitions="true"
+      class="ele-edit-tag-add"
+      :style="buttonStyle"
+      @click="handleAddClick"
+    >
+      <slot name="placeholder">
+        <span v-if="placeholder">{{ placeholder }}</span>
+        <ElIcon v-else class="ele-edit-tag-add-icon">
+          <PlusOutlined />
+        </ElIcon>
+      </slot>
+    </ElTag>
+    <ElTag
+      v-if="!readonly"
+      ref="inputTagRef"
+      v-show="isEdit"
+      :size="size"
+      :round="round"
+      :disableTransitions="true"
+      :class="['ele-edit-tag-input', { 'is-error': !!errorMessage }]"
+      :style="inputTagStyle"
+    >
+      <ElInput
+        ref="inputRef"
+        :disabled="loading"
+        v-model="inputValue"
+        :validateEvent="false"
+        :style="inputStyle"
+        @change="handleInputChange"
+        @blur="handleInputBlur"
+        @focus="handleInputFocus"
+      >
+        <template #suffix>
+          <ElIcon v-if="loading" class="is-loading">
+            <LoadingOutlined />
+          </ElIcon>
+        </template>
+      </ElInput>
+    </ElTag>
+    <EleTooltip
+      :offset="7"
+      :hideAfter="0"
+      trigger="click"
+      :triggerKeys="[]"
+      :disabled="!tooltipVisible"
+      v-bind="tooltipProps || {}"
+      :virtualTriggering="true"
+      :virtualRef="inputTagRef ? inputTagRef.$el : void 0"
+      :content="errorMessage"
+      :visible="tooltipVisible"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, onDeactivated, onActivated } from 'vue';
+  import { ElTag, ElInput, ElIcon } from 'element-plus';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import type { ElTagInstance, ElInputInstance } from '../ele-app/el';
+  import { PlusOutlined, LoadingOutlined } from '../icons/index';
+  import { useFormValidate } from '../ele-basic-select/util';
+  import { editTagProps, editTagEmits } from './props';
+
+  defineOptions({ name: 'EleEditTag' });
+
+  const props = defineProps(editTagProps);
+
+  const emit = defineEmits(editTagEmits);
+
+  const { validateChange } = useFormValidate();
+
+  /** 输入框外层标签 */
+  const inputTagRef = ref<ElTagInstance>(null);
+
+  /** 输入框 */
+  const inputRef = ref<ElInputInstance>(null);
+
+  /** 输入框是否显示 */
+  const isEdit = ref<boolean>(false);
+
+  /** 输入框的值 */
+  const inputValue = ref<string>('');
+
+  /** 提示信息 */
+  const errorMessage = ref<string>('');
+
+  /** 添加状态 */
+  const loading = ref<boolean>(false);
+
+  /** 气泡是否打开 */
+  const tooltipVisible = ref<boolean>(false);
+
+  /** 页面是否失活 */
+  const isDeactivated = ref<boolean>(false);
+
+  /** 更新选中值 */
+  const updateModelValue = (modelValue: string[]) => {
+    emit('update:modelValue', modelValue);
+    validateChange();
+    emit('change', modelValue);
+  };
+
+  /** 添加 */
+  const addTag = (value: string) => {
+    tooltipVisible.value = false;
+    isEdit.value = false;
+    updateInputValue('');
+    errorMessage.value = '';
+    loading.value = false;
+    if (value) {
+      const temp = props.modelValue ? [...props.modelValue] : [];
+      temp.push(value);
+      updateModelValue(temp);
+    }
+  };
+
+  /** 移除 */
+  const removeTag = (index: number) => {
+    if (!props.modelValue) {
+      return;
+    }
+    const temp = [...props.modelValue];
+    temp.splice(index, 1);
+    updateModelValue(temp);
+  };
+
+  /** 修改输入框值 */
+  const updateInputValue = (value: string) => {
+    inputValue.value = value;
+  };
+
+  /** 让输入框获取焦点 */
+  const focusInput = () => {
+    setTimeout(() => {
+      inputRef.value && inputRef.value.focus();
+    }, 0);
+  };
+
+  /** 添加按钮点击事件 */
+  const handleAddClick = () => {
+    if (props.disabled) {
+      return;
+    }
+    tooltipVisible.value = false;
+    errorMessage.value = '';
+    isEdit.value = true;
+    nextTick(() => {
+      focusInput();
+    });
+  };
+
+  /** 标签移除事件 */
+  const handleTagClose = (index: number, item: string) => {
+    if (typeof props.beforeRemove !== 'function') {
+      removeTag(index);
+      return;
+    }
+    props
+      .beforeRemove(index, item)
+      .then(() => {
+        removeTag(index);
+      })
+      .catch(() => {});
+  };
+
+  /** 标签点击事件 */
+  const handleTagClick = (index: number, item: string) => {
+    emit('itemClick', index, item);
+  };
+
+  /** 输入框改变事件 */
+  const handleInputChange = () => {
+    if (!inputValue.value) {
+      return;
+    }
+    if (typeof props.validator !== 'function') {
+      addTag(inputValue.value);
+      return;
+    }
+    loading.value = true;
+    props
+      .validator(inputValue.value)
+      .then(() => {
+        addTag(inputValue.value);
+      })
+      .catch((e: Error) => {
+        loading.value = false;
+        if (e && e.message != null && e.message !== '') {
+          errorMessage.value = e.message;
+          if (isEdit.value && !isDeactivated.value) {
+            tooltipVisible.value = true;
+          }
+        }
+        nextTick(() => {
+          focusInput();
+        });
+      });
+  };
+
+  /** 输入框失去焦点事件 */
+  const handleInputBlur = () => {
+    tooltipVisible.value = false;
+    if (!inputValue.value) {
+      isEdit.value = false;
+      errorMessage.value = '';
+    }
+  };
+
+  /** 输入框获取焦点事件 */
+  const handleInputFocus = () => {
+    if (
+      errorMessage.value &&
+      !tooltipVisible.value &&
+      isEdit.value &&
+      !isDeactivated.value
+    ) {
+      tooltipVisible.value = true;
+    }
+  };
+
+  onDeactivated(() => {
+    isDeactivated.value = true;
+    tooltipVisible.value = false;
+  });
+
+  onActivated(() => {
+    isDeactivated.value = false;
+  });
+
+  defineExpose({
+    inputTagRef,
+    inputRef
+  });
+</script>

package/packages/ele-edit-tag/props.ts

@@ -0,0 +1,59 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElTagProps } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+import type { Validator, BeforeRemove } from './types';
+
+/**
+ * 属性
+ */
+export const editTagProps = {
+  /** 标签数据 */
+  modelValue: Array as PropType<string[]>,
+  /** 类型 */
+  type: String as PropType<ElTagProps['type']>,
+  /** 是否有边框描边 */
+  hit: Boolean,
+  /** 颜色 */
+  color: String,
+  /** 尺寸 */
+  size: String as PropType<ElTagProps['size']>,
+  /** 主题 */
+  effect: String as PropType<ElTagProps['effect']>,
+  /** 是否为圆形 */
+  round: Boolean,
+  /** 提示文本 */
+  placeholder: String,
+  /** 输入框样式 */
+  inputStyle: Object as PropType<StyleValue>,
+  /** 输入框外层标签样式 */
+  inputTagStyle: Object as PropType<StyleValue>,
+  /** 添加按钮样式 */
+  buttonStyle: Object as PropType<StyleValue>,
+  /** 标签样式 */
+  itemStyle: Object as PropType<StyleValue>,
+  /** 添加校验方法 */
+  validator: Function as PropType<Validator>,
+  /** 移除校验方法 */
+  beforeRemove: Function as PropType<BeforeRemove>,
+  /** 提示属性 */
+  tooltipProps: Object as PropType<EleTooltipProps>,
+  /** 是否只读 */
+  readonly: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean
+};
+
+export type EditTagProps = ExtractPropTypes<typeof editTagProps>;
+
+/**
+ * 事件
+ */
+export const editTagEmits = {
+  /** 更新数据 */
+  'update:modelValue': (_value?: string[]) => true,
+  /** 数据改变事件 */
+  change: (_value?: string[]) => true,
+  /** 标签点击事件 */
+  itemClick: (_index: number, _value: string) => true
+};