y-admin-pro 0.0.1

package/packages/ele-card/index.vue

@@ -0,0 +1,109 @@
+<!-- 卡片 -->
+<template>
+  <div
+    :class="[
+      'ele-card',
+      { 'is-border': bordered },
+      { 'is-shadow': shadow === 'always' },
+      { 'is-hover-shadow': shadow === 'hover' },
+      { 'is-collapse': isCollapse },
+      { 'is-flex-table': flexTable }
+    ]"
+  >
+    <div
+      v-if="header || $slots.header || $slots.extra"
+      :class="['ele-card-header', headerClass]"
+      :style="headerStyle"
+      @click="handleHeaderClick"
+    >
+      <div class="ele-card-title" :style="titleStyle">
+        <slot name="header">{{ header }}</slot>
+      </div>
+      <slot v-if="$slots.extra" name="extra"></slot>
+      <div
+        v-if="collapsable"
+        :style="collapseIconStyle"
+        class="ele-card-collapse-icon"
+        @click.stop="handleCollapseClick"
+      >
+        <slot name="collapseIcon" :collapse="isCollapse">
+          <ElIcon>
+            <ArrowUp />
+          </ElIcon>
+        </slot>
+      </div>
+    </div>
+    <Transition
+      name="ele-card-slide"
+      @before-leave="handleBeforeLeave"
+      @leave="handleLeave"
+      @after-leave="handleAfterLeave"
+      @before-enter="handleBeforeEnter"
+      @enter="handleEnter"
+      @after-enter="handleAfterEnter"
+    >
+      <div
+        v-show="!isCollapse"
+        :class="['ele-card-body', bodyClass]"
+        :style="bodyStyle"
+      >
+        <slot></slot>
+      </div>
+    </Transition>
+    <div
+      v-if="footer || $slots.footer"
+      :class="['ele-card-footer', footerClass]"
+      :style="footerStyle"
+    >
+      <slot name="footer">{{ footer }}</slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { ArrowUp } from '../icons/index';
+  import { useCollapseAnim } from '../utils/hook';
+  import { cardProps, cardEmits } from './props';
+
+  defineOptions({ name: 'EleCard' });
+
+  const props = defineProps(cardProps);
+
+  const emit = defineEmits(cardEmits);
+
+  const {
+    handleBeforeEnter,
+    handleEnter,
+    handleAfterEnter,
+    handleBeforeLeave,
+    handleLeave,
+    handleAfterLeave
+  } = useCollapseAnim();
+
+  /** 是否折叠 */
+  const isCollapse = ref<boolean>(!!props.collapse);
+
+  /** 折叠按钮点击 */
+  const handleCollapseClick = () => {
+    isCollapse.value = !isCollapse.value;
+    emit('collapseChange', isCollapse.value);
+  };
+
+  /** 顶栏点击 */
+  const handleHeaderClick = () => {
+    if (props.collapsable === 'header') {
+      handleCollapseClick();
+    }
+  };
+
+  watch(
+    () => props.collapse,
+    (collapse) => {
+      if (isCollapse.value !== !!collapse) {
+        isCollapse.value = !!collapse;
+      }
+    }
+  );
+</script>

package/packages/ele-card/props.ts

@@ -0,0 +1,49 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElCardProps } from '../ele-app/el';
+
+/**
+ * 属性
+ */
+export const cardProps = {
+  /** 标题 */
+  header: String,
+  /** 标题类名 */
+  headerClass: String,
+  /** 页脚 */
+  footer: String,
+  /** 页脚类名 */
+  footerClass: String,
+  /** 主体样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 主体类名 */
+  bodyClass: String,
+  /** 阴影 */
+  shadow: String as PropType<ElCardProps['shadow']>,
+  /** 边框 */
+  bordered: Boolean,
+  /** 标题栏样式 */
+  headerStyle: Object as PropType<StyleValue>,
+  /** 标题样式 */
+  titleStyle: Object as PropType<StyleValue>,
+  /** 页脚样式 */
+  footerStyle: Object as PropType<StyleValue>,
+  /** 是否可折叠 */
+  collapsable: [Boolean, String] as PropType<boolean | 'header'>,
+  /** 是否折叠 */
+  collapse: Boolean,
+  /** 折叠按钮样式 */
+  collapseIconStyle: Object as PropType<StyleValue>,
+  /** 内部表格是否弹性布局 */
+  flexTable: Boolean
+};
+
+export type CardProps = ExtractPropTypes<typeof cardProps>;
+
+/**
+ * 事件
+ */
+export const cardEmits = {
+  /** 折叠展开事件 */
+  collapseChange: (_collapse: boolean) => true
+};

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 卡片主题变量 */
+@mixin set-card-var($var) {
+  .ele-card {
+    @include set-ele-var('card', $var);
+  }
+}

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

@@ -0,0 +1,125 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-card-var($ele);
+
+.ele-card {
+  box-sizing: border-box;
+  background: eleVar('card', 'bg');
+  border-radius: eleVar('card', 'radius');
+  transition: (
+    border-color $transition-base,
+    background-color $transition-base,
+    box-shadow $transition-base
+  );
+
+  &.is-border {
+    border: eleVar('card', 'border');
+  }
+
+  &.is-shadow {
+    box-shadow: eleVar('card', 'shadow');
+  }
+
+  &.is-hover-shadow:hover {
+    box-shadow: eleVar('card', 'hover-shadow');
+  }
+}
+
+.ele-card-body {
+  padding: eleVar('card', 'padding');
+  transition: (
+    max-height $transition-base,
+    padding-top $transition-base,
+    padding-bottom $transition-base
+  );
+  box-sizing: border-box;
+}
+
+.ele-card-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: eleVar('card', 'header-color');
+  font-size: eleVar('card', 'header-font-size');
+  font-weight: eleVar('card', 'header-font-weight');
+  line-height: eleVar('card', 'header-line-height');
+  padding: eleVar('card', 'header-padding');
+  border-bottom: eleVar('card', 'header-border');
+  box-sizing: border-box;
+}
+
+.ele-card-title {
+  flex: 1;
+}
+
+.ele-card-footer {
+  flex-shrink: 0;
+  padding: eleVar('card', 'footer-padding');
+  border-top: eleVar('card', 'footer-border');
+  box-sizing: border-box;
+}
+
+/* 折叠按钮 */
+.ele-card-collapse-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('card', 'collapse-size');
+  height: eleVar('card', 'collapse-size');
+  color: eleVar('card', 'collapse-color');
+  font-size: eleVar('card', 'collapse-font-size');
+  border-radius: eleVar('card', 'collapse-radius');
+  margin: eleVar('card', 'collapse-margin');
+  transition: all $transition-base;
+  box-sizing: border-box;
+  user-select: none;
+  cursor: pointer;
+
+  svg.ele-arrow-up path {
+    transition: d $transition-base;
+  }
+
+  &:hover {
+    color: eleVar('card', 'collapse-hover-color');
+    background: eleVar('card', 'collapse-hover-bg');
+  }
+}
+
+/* 折叠状态 */
+.ele-card.is-collapse > .ele-card-header {
+  border-bottom: none;
+
+  & > .ele-card-collapse-icon svg.ele-arrow-up path {
+    #{'d'}: path('M10 17 24 31 38 17');
+  }
+}
+
+/* 内部表格高度铺满 */
+.ele-card.is-flex-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  & > .ele-card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    & > .ele-pro-table {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+
+      & > .ele-pro-table-view {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+  }
+}

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

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

package/packages/ele-cascader/index.vue

@@ -0,0 +1,93 @@
+<!-- 级联选择 -->
+<template>
+  <ElCascader
+    v-bind="omit($props, ['props', 'options', 'multiple'])"
+    ref="cascaderRef"
+    :props="cascaderPropsOption"
+    :options="optionData"
+    @update:modelValue="emitMethods['update:modelValue']"
+    @change="emitMethods['change']"
+    @focus="emitMethods['focus']"
+    @blur="emitMethods['blur']"
+    @clear="emitMethods['clear']"
+    @visibleChange="emitMethods['visibleChange']"
+    @expandChange="emitMethods['expandChange']"
+    @removeTag="emitMethods['removeTag']"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </ElCascader>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { ElCascader } from 'element-plus';
+  import type { ElCascaderProps, ElCascaderInstance } from '../ele-app/el';
+  import { omit } from '../utils/common';
+  import { useComponentEvents, useProOptions } from '../utils/hook';
+  import type { CascaderOption } from './types';
+  import { cascaderProps, cascaderEmits } from './props';
+
+  defineOptions({ name: 'EleCascader' });
+
+  const props = defineProps(cascaderProps);
+
+  const emit = defineEmits(cascaderEmits);
+
+  const { emitMethods } = useComponentEvents(cascaderEmits, emit);
+  const { optionData, reloadOptions } = useProOptions<CascaderOption>(props);
+
+  /** 组件引用 */
+  const cascaderRef = ref<ElCascaderInstance>(null);
+
+  /** 级联面板配置 */
+  const cascaderPropsOption = reactive<ElCascaderProps>({
+    ...(props.props || {}),
+    multiple: !!(props.multiple || props.props?.multiple)
+  });
+
+  /** 同步级联面板配置 */
+  watch(
+    [() => props.multiple, () => props.props],
+    () => {
+      const cProps = props.props || {};
+      [
+        'expandTrigger',
+        'checkStrictly',
+        'emitPath',
+        'lazy',
+        'lazyLoad',
+        'value',
+        'label',
+        'children',
+        'disabled',
+        'leaf',
+        'hoverThreshold'
+      ].forEach((k) => {
+        if (cascaderPropsOption[k] == null && cProps[k] == null) {
+          return;
+        }
+        if (cascaderPropsOption[k] !== cProps[k]) {
+          cascaderPropsOption[k] = cProps[k];
+        }
+      });
+      if (props.multiple) {
+        if (!cascaderPropsOption.multiple) {
+          cascaderPropsOption.multiple = true;
+        }
+      } else if (!!cascaderPropsOption.multiple !== !!cProps.multiple) {
+        cascaderPropsOption.multiple = cProps.multiple;
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+
+  defineExpose({
+    reloadOptions,
+    cascaderRef
+  });
+</script>

package/packages/ele-cascader/props.ts

@@ -0,0 +1,19 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { cascaderProps as elCascaderProps } from 'element-plus';
+import type { CascaderOption, CascaderOptionFunction } from './types';
+export { cascaderEmits } from 'element-plus';
+
+/**
+ * 属性
+ */
+export const cascaderProps = {
+  ...elCascaderProps,
+  /** 选项数据 */
+  options: [Array, Function] as PropType<
+    CascaderOption[] | CascaderOptionFunction
+  >,
+  /** 是否多选 */
+  multiple: Boolean
+};
+
+export type CascaderProps = ExtractPropTypes<typeof cascaderProps>;

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

@@ -0,0 +1 @@
+import 'element-plus/es/components/cascader/style/index';

package/packages/ele-cascader/types.ts

@@ -0,0 +1,9 @@
+/**
+ * 选项数据
+ */
+export type CascaderOption = Record<string, any>;
+
+/**
+ * 选项数据请求函数
+ */
+export type CascaderOptionFunction = () => Promise<CascaderOption[]>;

package/packages/ele-check-card/components/card-item.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    :class="[
+      'ele-check-card',
+      { 'is-bordered': bordered },
+      { 'is-checked': checked },
+      { 'is-disabled': disabled }
+    ]"
+  >
+    <slot :item="item" :checked="checked" :disabled="disabled"></slot>
+    <div v-if="arrow" class="ele-check-card-arrow" :style="arrowStyle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { StyleValue } from '../../ele-app/types';
+  import type { CheckCardItem } from '../types';
+
+  defineOptions({ name: 'CardItem' });
+
+  defineProps({
+    /** 数据 */
+    item: Object as PropType<CheckCardItem>,
+    /** 是否选中 */
+    checked: Boolean,
+    /** 是否禁用 */
+    disabled: Boolean,
+    /** 是否显示边框 */
+    bordered: Boolean,
+    /** 是否需要选中箭头 */
+    arrow: Boolean,
+    /** 选中箭头样式 */
+    arrowStyle: Object as PropType<StyleValue>
+  });
+</script>

package/packages/ele-check-card/index.vue

@@ -0,0 +1,143 @@
+<!-- 可选卡片 -->
+<template>
+  <div class="ele-check-card-group">
+    <ElRow v-if="row" v-bind="row === true ? {} : row">
+      <ElCol
+        v-for="(item, index) in optionData"
+        :key="index + '-' + item.value"
+        v-bind="item.col || {}"
+      >
+        <CardItem
+          :item="item"
+          :checked="isChecked(item)"
+          :disabled="disabled || item.disabled"
+          :bordered="bordered || item.bordered"
+          :arrow="arrow"
+          :arrowStyle="arrowStyle"
+          :style="[itemStyle, item.style]"
+          :class="[itemClass, item.class]"
+          @click="handleItemClick(item)"
+        >
+          <template #default="slotProps">
+            <slot name="item" v-bind="slotProps || {}">
+              {{ item.label ?? item.value }}
+            </slot>
+          </template>
+        </CardItem>
+      </ElCol>
+    </ElRow>
+    <template v-else>
+      <CardItem
+        v-for="(item, index) in optionData"
+        :key="item.key ?? index + '-' + item.value"
+        :item="item"
+        :checked="isChecked(item)"
+        :disabled="disabled || item.disabled"
+        :bordered="bordered || item.bordered"
+        :arrow="arrow"
+        :arrowStyle="arrowStyle"
+        :style="[itemStyle, item.style]"
+        :class="[itemClass, item.class]"
+        @click="handleItemClick(item)"
+      >
+        <template #default="slotProps">
+          <slot name="item" v-bind="slotProps || {}">
+            {{ item.label ?? item.value }}
+          </slot>
+        </template>
+      </CardItem>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElRow, ElCol } from 'element-plus';
+  import { useProOptions } from '../utils/hook';
+  import {
+    valueIsChanged,
+    isEmptyValue,
+    useFormValidate
+  } from '../ele-basic-select/util';
+  import CardItem from './components/card-item.vue';
+  import type { CheckCardItem, CheckedValue, MultipleValue } from './types';
+  import { checkCardProps, checkCardEmits } from './props';
+
+  defineOptions({ name: 'EleCheckCard' });
+
+  const props = defineProps(checkCardProps);
+
+  const emit = defineEmits(checkCardEmits);
+
+  const { validateChange } = useFormValidate();
+  const { optionData, reloadOptions } = useProOptions<CheckCardItem>(
+    props,
+    'items'
+  );
+
+  /** 判断是否选中 */
+  const isChecked = (item: CheckCardItem) => {
+    if (props.modelValue == null || item.value == null) {
+      return false;
+    }
+    if (!props.multiple) {
+      return props.modelValue === item.value;
+    }
+    if (!Array.isArray(props.modelValue)) {
+      return false;
+    }
+    return props.modelValue.includes(item.value);
+  };
+
+  /** 更新选中值 */
+  const updateModelValue = (modelValue: CheckedValue) => {
+    if (valueIsChanged(modelValue, props.modelValue, props.multiple)) {
+      emit('update:modelValue', modelValue);
+      validateChange();
+      emit('change', modelValue);
+    }
+  };
+
+  /** item 点击事件 */
+  const handleItemClick = (item: CheckCardItem) => {
+    // 禁用
+    if (props.disabled || item.disabled) {
+      return;
+    }
+    // 单选
+    if (!props.multiple) {
+      if (
+        props.allowUncheck &&
+        !isEmptyValue(props.modelValue) &&
+        props.modelValue === item.value
+      ) {
+        updateModelValue(null);
+        return;
+      }
+      updateModelValue(item.value);
+      return;
+    }
+    // 多选选中
+    if (!isChecked(item)) {
+      if (props.modelValue == null || !Array.isArray(props.modelValue)) {
+        updateModelValue(item.value == null ? [] : [item.value]);
+        return;
+      }
+      const temp: MultipleValue = [...props.modelValue];
+      if (item.value != null) {
+        temp.push(item.value);
+      }
+      updateModelValue(temp);
+      return;
+    }
+    // 多选取消选中
+    if (props.modelValue == null || !Array.isArray(props.modelValue)) {
+      updateModelValue([]);
+      return;
+    }
+    updateModelValue(props.modelValue.filter((v) => v !== item.value));
+  };
+
+  defineExpose({
+    reloadOptions
+  });
+</script>

package/packages/ele-check-card/props.ts

@@ -0,0 +1,61 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElRowProps } from '../ele-app/el';
+import type {
+  CheckedValue,
+  CheckCardItem,
+  CheckCardItemsFunction
+} from './types';
+
+/**
+ * 属性
+ */
+export const checkCardProps = {
+  /** 选中值 */
+  modelValue: {
+    type: [Array, String, Number, Boolean] as PropType<CheckedValue>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 数据 */
+  items: [Array, Function] as PropType<
+    CheckCardItem[] | CheckCardItemsFunction
+  >,
+  /** 是否多选 */
+  multiple: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 是否显示边框 */
+  bordered: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否需要选中箭头 */
+  arrow: {
+    type: Boolean,
+    default: true
+  },
+  /** 选中箭头样式 */
+  arrowStyle: Object as PropType<StyleValue>,
+  /** 自定义卡片类名 */
+  itemClass: String,
+  /** 自定义卡片样式 */
+  itemStyle: Object as PropType<StyleValue>,
+  /** 是否使用栅格布局 */
+  row: [Boolean, Object] as PropType<boolean | ElRowProps>,
+  /** 单选时允许取消选中 */
+  allowUncheck: Boolean
+};
+
+export type CheckCardProps = ExtractPropTypes<typeof checkCardProps>;
+
+/**
+ * 事件
+ */
+export const checkCardEmits = {
+  /** 更新选中值 */
+  'update:modelValue': (_value: CheckedValue) => true,
+  /** 选中改变事件 */
+  change: (_value: CheckedValue) => true
+};

package/packages/ele-check-card/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 可选卡片主题变量 */
+@mixin set-check-card-var($var) {
+  .ele-check-card {
+    @include set-ele-var('check-card', $var);
+  }
+}