y-admin-pro 0.0.1

package/packages/ele-config-provider/types.ts

@@ -0,0 +1,103 @@
+import type { ComputedRef } from 'vue';
+import type { EleProTableProps, EleMessageOptions } from '../ele-app/plus';
+import type { TableLocale } from '../ele-pro-table/types';
+import type { FileListLocale } from '../ele-file-list/types';
+import type { CropperLocale } from '../ele-cropper/types';
+import type { MapLocale } from '../ele-map-picker/types';
+import type { UploadLocale } from '../ele-upload-list/types';
+import type { TourLocale } from '../ele-tour/types';
+import type { CopyableLocale } from '../ele-copyable/types';
+import type { ProFormLocale } from '../ele-pro-form/types';
+import type { CrudLocale } from '../ele-crud/types';
+
+/**
+ * 国际化
+ */
+export interface EleLocale {
+  /** 图片裁剪 */
+  cropper: CropperLocale;
+  /** 文件列表 */
+  fileList: FileListLocale;
+  /** 地图选择 */
+  map: MapLocale;
+  /** 高级表格 */
+  table: TableLocale;
+  /** 漫游式引导 */
+  tour: TourLocale;
+  /** 文件上传 */
+  upload: UploadLocale;
+  /** 文本复制 */
+  copyable: CopyableLocale;
+  /** 高级表单 */
+  proForm: ProFormLocale;
+  /** 增删改查 */
+  crud: CrudLocale;
+}
+
+/**
+ * 全局配置
+ */
+export interface GlobalProvide {
+  /** 国际化 */
+  locale?: EleLocale;
+  /** 表格配置 */
+  table?: TableGlobalConfig;
+  /** 地图密钥 */
+  mapKey?: string;
+  /** 授权码 */
+  license?: string;
+}
+
+/**
+ * 表格全局配置
+ */
+export type TableGlobalConfig = Pick<
+  EleProTableProps,
+  | 'stripe'
+  | 'border'
+  | 'request'
+  | 'response'
+  | 'parseData'
+  | 'size'
+  | 'tools'
+  | 'maximizedIndex'
+  | 'pagination'
+  | 'emptyProps'
+  | 'toolbar'
+  | 'exportConfig'
+  | 'printConfig'
+>;
+
+/**
+ * 消息提示全局配置
+ */
+export type MessageGlobalConfig = Pick<
+  EleMessageOptions,
+  | 'plain'
+  | 'duration'
+  | 'showClose'
+  | 'offset'
+  | 'appendTo'
+  | 'grouping'
+  | 'original'
+  | 'mask'
+  | 'centered'
+  | 'inner'
+>;
+
+/**
+ * 获取国际化方法返回结果
+ */
+export interface UseLocaleResult<T> {
+  /** 语言 */
+  lang: ComputedRef<T>;
+  /** 全局配置 */
+  globalConfig: GlobalProvide;
+}
+
+/**
+ * 带国际化的组件属性
+ */
+export interface LocaleProps<T> extends Record<keyof any, any> {
+  locale?: Partial<T>;
+}

package/packages/ele-copyable/index.vue

@@ -0,0 +1,120 @@
+<!-- 文本复制 -->
+<template>
+  <div :class="['ele-copyable', { 'ele-copyable-done': copied }]">
+    <div ref="innerRef" class="ele-copyable-inner" :style="innerStyle">
+      <slot></slot>
+    </div>
+    <div
+      class="ele-copyable-icon"
+      :style="customStyle"
+      @mouseover="handleCopyHover"
+      @click="handleCopyClick"
+    >
+      <ElIcon v-if="copied" v-bind="copiedIconProps || {}">
+        <component
+          v-if="copiedIcon"
+          :is="copiedIcon"
+          :style="copiedIconStyle"
+        />
+        <CheckOutlined v-else :style="copiedIconStyle" />
+      </ElIcon>
+      <ElIcon v-else v-bind="iconProps || {}">
+        <component v-if="icon" :is="icon" :style="iconStyle" />
+        <CopyOutlined v-else :style="iconStyle" />
+      </ElIcon>
+    </div>
+    <EleTooltip
+      placement="top"
+      :offset="6"
+      v-bind="!tooltip || tooltip === true ? {} : tooltip"
+      :content="copied ? lang.copied : lang.copy"
+      :virtualRef="virtualRef"
+      :virtualTriggering="true"
+      ref="tooltipRef"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onDeactivated, onBeforeUnmount } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { CopyOutlined, CheckOutlined } from '../icons/index';
+  import { copyText } from '../utils/common';
+  import { useLocale } from '../ele-config-provider/receiver';
+  import type { EleTooltipInstance } from '../ele-app/plus';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import type { CopyableLocale } from './types';
+  import { copyableProps, copyableEmits } from './props';
+
+  defineOptions({ name: 'EleCopyable' });
+
+  const props = defineProps(copyableProps);
+
+  const emit = defineEmits(copyableEmits);
+
+  const { lang } = useLocale<CopyableLocale>('copyable', props);
+  const state: { timer: number | null } = { timer: null };
+
+  /** 文本组件 */
+  const innerRef = ref<HTMLElement | null>(null);
+
+  /** 提示组件 */
+  const tooltipRef = ref<EleTooltipInstance>(null);
+
+  /** 提示单例目标 */
+  const virtualRef = ref<HTMLElement>();
+
+  /** 是否拷贝完成 */
+  const copied = ref<boolean>(false);
+
+  /** 更新提示组件位置 */
+  const updateTooltip = () => {
+    tooltipRef.value && tooltipRef.value.updatePopper();
+  };
+
+  /** 获取复制内容 */
+  const getText = (): string => {
+    if (props.text) {
+      return props.text;
+    }
+    return innerRef.value?.innerText || '';
+  };
+
+  /** 复制 */
+  const handleCopyClick = () => {
+    copyText(getText())
+      .then(() => {
+        copied.value = true;
+        updateTooltip();
+        state.timer && clearTimeout(state.timer);
+        state.timer = setTimeout(() => {
+          copied.value = false;
+          updateTooltip();
+        }, props.resetAfter || 1000) as unknown as number;
+        emit('copy');
+      })
+      .catch((error) => {
+        copied.value = false;
+        updateTooltip();
+        emit('copy', error);
+      });
+  };
+
+  /** 打开提示 */
+  const handleCopyHover = (e: MouseEvent) => {
+    if (props.tooltip) {
+      virtualRef.value = e.currentTarget as HTMLElement;
+    }
+  };
+
+  onDeactivated(() => {
+    state.timer && clearTimeout(state.timer);
+    state.timer = null;
+    copied.value = false;
+  });
+
+  onBeforeUnmount(() => {
+    state.timer && clearTimeout(state.timer);
+    state.timer = null;
+  });
+</script>

package/packages/ele-copyable/props.ts

@@ -0,0 +1,50 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElIconProps } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+import type { CopyableIcon, CopyableLocale } from './types';
+
+/**
+ * 属性
+ */
+export const copyableProps = {
+  /** 重新定义拷贝到剪切板里的文本 */
+  text: String,
+  /** 自定义内容样式 */
+  innerStyle: Object as PropType<StyleValue>,
+  /** 自定义拷贝按钮样式 */
+  customStyle: Object as PropType<StyleValue>,
+  /** 自定义拷贝图标 */
+  icon: [String, Object, Function] as PropType<CopyableIcon>,
+  /** 自定义拷贝图标属性 */
+  iconProps: Object as PropType<ElIconProps>,
+  /** 自定义拷贝图标样式 */
+  iconStyle: Object as PropType<StyleValue>,
+  /** 自定义拷贝后图标 */
+  copiedIcon: [String, Object, Function] as PropType<CopyableIcon>,
+  /** 自定义拷贝后图标属性 */
+  copiedIconProps: Object as PropType<ElIconProps>,
+  /** 自定义拷贝后图标样式 */
+  copiedIconStyle: Object as PropType<StyleValue>,
+  /** 文字提示属性 */
+  tooltip: {
+    type: [Boolean, Object] as PropType<boolean | EleTooltipProps>,
+    default: true
+  },
+  /** 拷贝成功状态重置时间 */
+  resetAfter: {
+    type: Number,
+    default: 1000
+  },
+  /** 国际化 */
+  locale: Object as PropType<Partial<CopyableLocale>>
+};
+
+export type CopyableProps = ExtractPropTypes<typeof copyableProps>;
+
+/**
+ * 事件
+ */
+export const copyableEmits = {
+  copy: (_error?: any) => true
+};

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

@@ -0,0 +1,28 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-copyable {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .ele-copyable-inner {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .ele-copyable-icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    color: elVar('color-primary');
+    font-size: 15px;
+    margin-left: 6px;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+.ele-copyable-done .ele-copyable-icon {
+  color: elVar('color-success');
+}

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

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

package/packages/ele-copyable/types.ts

@@ -0,0 +1,14 @@
+import type { UserComponent } from '../ele-app/types';
+
+/**
+ * 图标
+ */
+export type CopyableIcon = UserComponent;
+
+/**
+ * 国际化
+ */
+export interface CopyableLocale {
+  copy: string;
+  copied: string;
+}

package/packages/ele-count-up/index.vue

@@ -0,0 +1,122 @@
+<!-- 滚动数字 -->
+<template>
+  <span ref="rootRef"></span>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch, onMounted, onBeforeUnmount } from 'vue';
+  import { CountUp } from 'countup.js';
+  import { countUpProps, countUpEmits } from './props';
+
+  defineOptions({ name: 'EleCountUp' });
+
+  const props = defineProps(countUpProps);
+
+  const emit = defineEmits(countUpEmits);
+
+  const isFunction = (value: unknown) => typeof value === 'function';
+
+  /** 实例 */
+  let instance: CountUp | undefined | null;
+
+  /** 根节点 */
+  const rootRef = ref<HTMLDivElement | null>(null);
+
+  /** 创建 */
+  const create = () => {
+    const elem = unref(rootRef);
+    if (instance || !elem) {
+      return;
+    }
+    const ins = new CountUp(elem, props.endVal ?? 0, props.options);
+    if (ins.error) {
+      console.warn(ins);
+      return;
+    }
+    instance = ins;
+  };
+
+  /** 打印值 */
+  const printValue = (value: number) => {
+    if (instance && isFunction(instance.printValue)) {
+      return instance.printValue(value);
+    }
+  };
+
+  /** 开启动画 */
+  const start = (callback?: (args?: any) => any) => {
+    if (instance && isFunction(instance.start)) {
+      return instance.start(callback);
+    }
+  };
+
+  /** 暂停/恢复 */
+  const pauseResume = () => {
+    if (instance && isFunction(instance.pauseResume)) {
+      return instance.pauseResume();
+    }
+  };
+
+  /** 重置 */
+  const reset = () => {
+    if (instance && isFunction(instance.reset)) {
+      return instance.reset();
+    }
+  };
+
+  /** 更新结束值 */
+  const update = (newEndVal?: string | number) => {
+    if (instance && isFunction(instance.update)) {
+      return instance.update(newEndVal ?? 0);
+    }
+  };
+
+  /** 销毁 */
+  const destroy = () => {
+    reset();
+    instance = null;
+  };
+
+  watch(
+    () => props.endVal,
+    (value) => {
+      update(value);
+    }
+  );
+
+  watch(
+    () => props.options,
+    () => {
+      destroy();
+      create();
+      emit('ready', instance);
+    }
+  );
+
+  onMounted(() => {
+    create();
+    if (props.delay < 0) {
+      emit('ready', instance);
+      return;
+    }
+    setTimeout(() => {
+      if (instance && isFunction(instance.start)) {
+        instance.start(() => {
+          emit('ready', instance);
+        });
+      }
+    }, props.delay);
+  });
+
+  onBeforeUnmount(() => {
+    destroy();
+  });
+
+  defineExpose({
+    printValue,
+    start,
+    pauseResume,
+    reset,
+    update
+  });
+</script>

package/packages/ele-count-up/props.ts

@@ -0,0 +1,30 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { CountUpOptions, CountUp } from 'countup.js';
+
+/**
+ * 属性
+ */
+export const countUpProps = {
+  /** 首次动画延迟时间 */
+  delay: {
+    type: Number,
+    default: 300
+  },
+  /** 结束值 */
+  endVal: {
+    type: Number,
+    required: true
+  },
+  /** 参数配置 */
+  options: Object as PropType<CountUpOptions>
+};
+
+export type CountUpProps = ExtractPropTypes<typeof countUpProps>;
+
+/**
+ * 事件
+ */
+export const countUpEmits = {
+  /** 渲染完成事件 */
+  ready: (_instance?: CountUp | null) => true
+};

package/packages/ele-count-up/style/index.ts

@@ -0,0 +1 @@
+//

package/packages/ele-cropper/components/cropper-preview.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    ref="rootRef"
+    class="ele-cropper-previews"
+    :style="{ width: `${previewWidth + 14}px` }"
+  >
+    <div
+      class="ele-cropper-preview"
+      :style="{
+        width: `${previewWidth}px`,
+        height: `${previewWidth / (aspectRatio || 1)}px`,
+        marginTop: '0px'
+      }"
+    >
+    </div>
+    <div
+      v-if="aspectRatio === 1"
+      class="ele-cropper-preview is-circle"
+      :style="{
+        width: `${previewWidth}px`,
+        height: `${previewWidth / aspectRatio}px`
+      }"
+    >
+    </div>
+    <template v-else-if="aspectRatio">
+      <div
+        class="ele-cropper-preview"
+        :style="{
+          width: `${previewWidth}px`,
+          height: `${((previewWidth / 3) * 2 - 10) / aspectRatio}px`
+        }"
+      >
+      </div>
+      <div
+        class="ele-cropper-preview"
+        :style="{
+          width: `${previewWidth}px`,
+          height: `${previewWidth / 3 / aspectRatio}px`,
+          marginLeft: '10px'
+        }"
+      >
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  defineOptions({ name: 'CropperPreview' });
+
+  defineProps({
+    /** 组件宽度 */
+    previewWidth: {
+      type: Number,
+      required: true
+    },
+    /** 裁剪比例 */
+    aspectRatio: Number
+  });
+
+  /** 根节点 */
+  const rootRef = ref<HTMLDivElement | null>(null);
+
+  /** 获取所有预览节点 */
+  const getPreviews = (): NodeListOf<HTMLElement> | undefined => {
+    if (!rootRef.value) {
+      return;
+    }
+    return rootRef.value.querySelectorAll('.ele-cropper-preview');
+  };
+
+  defineExpose({
+    getPreviews
+  });
+</script>