plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/Popup/popup.scss

@@ -0,0 +1,13 @@
+@include comp(popup) {
+  .popup-item-content {
+    padding: 0 !important;
+  }
+
+  @include sizeMixin(popup-item, ()) {
+    &:not(.popup-item-no-padding) {
+      .popup-content {
+        padding: plv(popper-size-#{$name}-padding-y) plv(popper-size-#{$name}-padding-x);
+      }
+    }
+  }
+}

package/src/packages/components/ProgressBar/index.tsx

@@ -0,0 +1,87 @@
+import './progress-bar.scss';
+import {computed, designComponent, getComponentCls, useRefs} from "plain-design-composition";
+import {PROGRESS_DEFAULT_PROPS, ProgressStatus, useProgressColor} from "./progress.utils";
+import Icon from "../Icon";
+
+export const ProgressBar = designComponent({
+  name: 'progress-bar',
+  props: {
+    ...PROGRESS_DEFAULT_PROPS,
+
+    width: { type: String, default: '300px' },
+    height: { type: String, default: '6px' },
+    inlineText: { type: Boolean },
+  },
+  inheritPropsType: HTMLDivElement,
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const { progressColors } = useProgressColor(props);
+
+    const iconColor = computed(() => {
+      switch (props.status) {
+        case ProgressStatus.success:
+          return progressColors.value.successColor;
+        case ProgressStatus.error:
+          return progressColors.value.errorColor;
+        default:
+          return null;
+      }
+    });
+
+    const outerStyles = computed(() => ({
+      height: !!props.inlineText ? '16px' : props.height,
+      width: props.width,
+      backgroundColor: progressColors.value.outerColor,
+      borderRadius: props.width,
+    }));
+
+    const innerStyles = computed(() => ({
+      width: `${props.modelValue}%`,
+      backgroundColor: iconColor.value || progressColors.value.innerColor,
+      borderRadius: props.width,
+    }));
+
+    return {
+      refer: { refs },
+      render: () => (
+        <div className={getComponentCls('progress-bar')} ref={onRef.el}>
+          <div className="progress-bar-outer" style={outerStyles.value}>
+            <div className="progress-bar-inner" style={innerStyles.value}>
+              {props.inlineText && props.modelValue > 20 && (
+                <div>
+                  <div className="progress-bar-content">
+                    {props.status === 'success' && <Icon icon="el-icon-check-bold" className="progress-bar-icon-success" style={{ color: 'white' }}/>}
+                    {props.status === 'error' && <Icon icon="el-icon-close-bold" className="progress-bar-icon-error" style={{ color: 'white' }}/>}
+                    {props.status !== 'success' && props.status !== 'error' && <span>{props.modelValue}%</span>}
+                  </div>
+                </div>
+              )}
+            </div>
+            {props.inlineText && props.modelValue < 20 && (
+              <div>
+                <div className="progress-bar-content">
+                  {props.status === 'success' && <Icon icon="el-icon-check-bold" className="progress-bar-icon-success" style={{ color: props.successColor }}/>}
+                  {props.status === 'error' && <Icon icon="el-icon-close-bold" className="progress-bar-icon-error" style={{ color: props.errorColor }}/>}
+                  {props.status !== 'success' && props.status !== 'error' && <span>{props.modelValue}%</span>}
+                </div>
+              </div>
+            )}
+          </div>
+          {
+            !props.inlineText && (
+              <div className="progress-bar-content">
+                {props.status === 'success' && <Icon icon="el-icon-success" className="progress-bar-icon-success" style={{ color: props.successColor }}/>}
+                {props.status === 'error' && <Icon icon="el-icon-error" className="progress-bar-icon-error" style={{ color: props.errorColor }}/>}
+                {props.status !== 'success' && props.status !== 'error' && <span>{props.modelValue}%</span>}
+              </div>
+            )
+          }
+        </div>
+      )
+    };
+  },
+});
+
+export default ProgressBar;

package/src/packages/components/ProgressBar/progress-bar.scss

@@ -0,0 +1,40 @@
+@include prefix(progress-bar) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+
+  .progress-bar-content {
+    display: inline-block;
+    width: 50px;
+    text-align: left;
+    font-size: 14px;
+    padding: 0 6px;
+
+    .icon {
+      vertical-align: -0.1em;
+    }
+  }
+
+  .progress-bar-outer {
+    display: inline-flex;
+    align-items: center;
+    overflow: hidden;
+
+    .progress-bar-inner {
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      transition: all ease 300ms;
+
+      .progress-bar-content {
+        text-align: right;
+
+        span {
+          color: white;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/ProgressBar/progress.utils.ts

@@ -0,0 +1,24 @@
+import {computed, getComponentCls, PropType} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+
+export const ProgressStatus = createEnum(['normal', 'success', 'error'] as const);
+
+export const PROGRESS_DEFAULT_PROPS = {
+  modelValue: { type: Number, default: 100 },                           // 进度百分比，双向绑定值
+  outerColor: { type: String, },                                        // 外层未激活颜色
+  innerColor: { type: String, },                                        // 内层已经激活颜色
+  speed: { type: Number, default: 3 },                                  // 动画速度
+  status: { type: String as PropType<typeof ProgressStatus.TYPE>, default: ProgressStatus.normal },// 状态:normal,success,error
+  successColor: { type: String, },                                      // 成功状态颜色
+  errorColor: { type: String, },                                        // 失败状态颜色
+};
+
+export function useProgressColor(props: { outerColor?: string, innerColor?: string, successColor?: string, errorColor?: string }) {
+  const progressColors = computed(() => ({
+    outerColor: props.outerColor || `var(--${getComponentCls('secondary-light-2')})`,
+    innerColor: props.innerColor || `var(--${getComponentCls('primary-6')})`,
+    successColor: props.successColor || `var(--${getComponentCls('success-6')})`,
+    errorColor: props.errorColor || `var(--${getComponentCls('error-6')})`,
+  }));
+  return { progressColors };
+}

package/src/packages/components/ProgressCircle/index.tsx

@@ -0,0 +1,188 @@
+/*
+
+SVG path 指令
+
+M x,y 在这里x和y是绝对坐标，分别代表水平坐标和垂直坐标
+m dx,dy 在这里dx和dy是相对于当前点的距离，分别是向右和向下的距离。
+A 绘制圆弧
+
+SVG提供了一个范围广泛stroke 属性
+
+- stroke: 定义一条线，文本或元素轮廓颜色
+- stroke-width: 定义了一条线，文本或元素轮廓厚度
+- stroke-linecap: 不同类型的开放路径的终结(开头和结尾是方形还是带圆角的)
+- stroke-dasharray: 虚线
+- stroke-dashoffset: dash模式到路径开始的距离,使用了一个 <百分比> 值， 那么这个值就代表了当前viewport的一个百分比，值可以取为负值
+
+SVG Path标签 A 参数
+
+A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+
+- rx：x轴半径
+- ry：y轴半径
+- x-axis-rotation：指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转的角度（一般都是0，不知道有什么用，如果希望旋转一定的夹角的话，可以用transform rotate实现）
+- large-arc-flag：1表示大角度弧线，0为小角度弧线（如果数值大于50%，则这个应该是1，否则是0）。
+- sweep-flag：1为顺时针方向，0为逆时针方向。
+- x：结束点x坐标
+- y：结束点y坐标
+
+*/
+import {computed, designComponent, getComponentCls, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
+import {createAnimate} from "../../utils/createAnimate";
+import {unit} from "plain-utils/string/unit";
+import {Icon} from "../Icon";
+import './progress-circle.scss';
+import {PROGRESS_DEFAULT_PROPS, ProgressStatus, useProgressColor} from "../ProgressBar/progress.utils";
+
+export const ProgressCircle = designComponent({
+  name: 'progress-circle',
+  props: {
+    ...PROGRESS_DEFAULT_PROPS,
+
+    size: { type: Number, default: 100 },                                                     // 大小尺寸
+    lineSize: { type: Number, default: 6 },                                                   // 线条尺寸
+    startAngle: { type: Number, default: 0 },                                                 // 起始角度
+
+    antiClockwise: { type: Boolean },                                                         // 逆时针
+    loading: { type: Boolean },                                                               // 加载动画
+  },
+  emits: {
+    onUpdateModelValue: (val?: number) => true,
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  setup({ props, slots, event }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const model = useModel(() => 0, event.emit.onUpdateModelValue, { autoWatch: false });
+
+    const { progressColors } = useProgressColor(props);
+
+    const animate = createAnimate({
+      time: props.loading ? 1500 : 900,
+      initValue: () => model.value != null ? model.value : (props.loading ? loading.min : 0),
+      action: val => model.value = val,
+    });
+
+    const loading = (() => {
+      return reactive({
+        isLoading: false,
+        max: 90,
+        min: 10,
+        start: () => {
+          const run = () => {
+            if (model.value == null) {
+              model.value = loading.min;
+            }
+            animate.start(model.value <= loading.min ? loading.max : loading.min, run);
+          };
+          animate.start(loading.max, run);
+          loading.isLoading = true;
+        },
+        end: () => {
+          animate.stop();
+          loading.isLoading = false;
+        },
+      });
+    })();
+
+    const styles = useStyles(style => {
+      style.width = unit(props.size);
+      style.height = unit(props.size);
+    });
+
+    const percent = computed(() => model.value == null ? 0 : model.value / 100);
+
+    const radius = computed(() => 50 - props.lineSize / 2);
+
+    const pathD = computed(() => {
+      let d = [`M 50 ${props.lineSize / 2}`] as (string | number)[];
+      const r = radius.value;
+      const p = percent.value; /*小于1的百分比数字*/
+
+      const degrees = Math.PI * 2 * p;
+
+      d.push(`A ${r} ${r} 0`);
+      d.push(p > 0.5 ? 1 : 0);
+      d.push(props.antiClockwise ? 0 : 1);
+      d.push(`${50 + r * Math.sin(degrees) * (props.antiClockwise ? -1 : 1)} ${50 - r * Math.cos(degrees)}`);
+
+      return d.join(' ');
+    });
+
+
+    const pathStroke = computed(() => {
+      switch (props.status) {
+        case ProgressStatus.success:
+          return progressColors.value.successColor;
+        case ProgressStatus.error:
+          return progressColors.value.errorColor;
+        default:
+          return progressColors.value.innerColor;
+      }
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('progress-circle'),
+      {
+        'progress-circle-loading': loading.isLoading
+      }
+    ]);
+
+    const circleStroke = computed(() => {
+      if (percent.value === 1) {
+        return pathStroke.value;
+      }
+      return progressColors.value.outerColor;
+    });
+
+    const pathStyles = useStyles(style => {
+      style.transform = `rotate(${props.startAngle}deg)`;
+    });
+
+    watch(() => props.loading, val => val ? loading.start() : loading.end(), { immediate: true });
+
+    watch(() => props.modelValue, val => !props.loading && animate.start(val), { immediate: true });
+
+    return {
+      refer: {
+        animate,
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          <svg viewBox="0 0 100 100">
+
+            <circle
+              cx="50"
+              cy="50"
+              r={radius.value}
+              stroke={circleStroke.value}
+              strokeWidth={props.lineSize}
+              fill="none"/>
+
+            {percent.value !== 1 && <path
+              d={pathD.value}
+              stroke={pathStroke.value}
+              strokeWidth={props.lineSize}
+              fill="none"
+              strokeLinecap="round"
+              style={pathStyles.value}
+            />}
+
+          </svg>
+
+          <div className="progress-circle-label">
+            {props.loading ? slots.default() : <>
+              {props.status === 'normal' && slots.default(`${model.value}%`)}
+              {props.status === 'success' && <Icon icon="pi-check" className="progress-bar-icon-success" style={{ color: progressColors.value.successColor }}/>}
+              {props.status === 'error' && <Icon icon="pi-close" className="progress-bar-icon-error" style={{ color: progressColors.value.errorColor }}/>}
+            </>}
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+export default ProgressCircle;

package/src/packages/components/ProgressCircle/progress-circle.scss

@@ -0,0 +1,44 @@
+@include prefix(progress-circle) {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 1000px;
+
+  & > svg > path {
+    transform-origin: center center;
+  }
+
+  .progress-circle-label {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include prefix(icon) {
+      font-size: 24px;
+    }
+  }
+
+  @keyframes path-animate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &.progress-circle-loading {
+    & > svg {
+      animation: path-animate 6000ms linear infinite;
+
+      & > path {
+        animation: path-animate 900ms linear infinite;
+      }
+    }
+  }
+}

package/src/packages/components/ProgressMini/index.tsx

@@ -0,0 +1,98 @@
+import './progress-mini.scss';
+import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
+import {createAnimate} from "../../utils/createAnimate";
+import {unit} from "plain-utils/string/unit";
+import {PROGRESS_DEFAULT_PROPS, ProgressStatus, useProgressColor} from "../ProgressBar/progress.utils";
+
+export const ProgressMini = designComponent({
+  name: 'progress-mini',
+  props: {
+    size: { default: 28 },
+    ...PROGRESS_DEFAULT_PROPS,
+    innerColor: { type: String, default: 'rgba(0,0,0,0.25)' },
+    round: { type: Boolean },
+  },
+  inheritPropsType: HTMLDivElement,
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const model = useModel(() => 0, () => undefined, { autoWatch: false });
+
+    const animate = createAnimate({
+      time: 300,
+      initValue: () => model.value || 0,
+      action: val => model.value = val,
+    });
+
+    const { progressColors } = useProgressColor(props);
+
+    const styles = useStyles(style => {
+      style.height = unit(props.size);
+      style.width = unit(props.size);
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('progress-mini'),
+      {
+        [`progress-mini-status-${props.status}`]: !!props.status,
+        [`progress-mini-round`]: props.round,
+      },
+    ]);
+
+    const percent = computed(() => 1 - (model.value == null ? 0 : model.value / 100));
+
+    const radius = computed(() => 50 - 2 / 2);
+
+    const pathD = computed(() => {
+      let d = [`M 50 1`] as (string | number)[];
+      const r = radius.value;
+      const p = percent.value; /*小于1的百分比数字*/
+
+      const degrees = Math.PI * 2 * p;
+
+      d.push(`A ${r} ${r} 0`);
+      d.push(p > 0.5 ? 1 : 0);
+      d.push(0);
+      d.push(`${50 - r * Math.sin(degrees)} ${50 - r * Math.cos(degrees)}`);
+
+      d.push(`L 50 50 L 50 1`);
+
+      return d.join(' ');
+    });
+
+
+    const pathStroke = computed(() => {
+      switch (props.status) {
+        case ProgressStatus.success:
+          return progressColors.value.successColor;
+        case ProgressStatus.error:
+          return progressColors.value.errorColor;
+        default:
+          return progressColors.value.innerColor;
+      }
+    });
+
+    watch(() => props.modelValue, val => animate.start(val), { immediate: true });
+
+    return {
+      refer: { refs },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          <svg viewBox="0 0 100 100">
+            {model.value == 0 ? (
+              <circle cx="50" cy="50" r={radius.value} fill={pathStroke.value}/>
+            ) : (
+              <path
+                d={pathD.value}
+                stroke="none"
+                fill={pathStroke.value}
+              />
+            )}
+          </svg>
+        </div>
+      )
+    };
+  },
+});
+
+export default ProgressMini;

package/src/packages/components/ProgressMini/progress-mini.scss

@@ -0,0 +1,17 @@
+@include prefix(progress-mini) {
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  svg {
+    flex-shrink: 0;
+    width: 200%;
+    height: 200%;
+  }
+
+  &.progress-mini-round {
+    border-radius: 1000px;
+  }
+}

package/src/packages/components/Radio/index.tsx

@@ -0,0 +1,137 @@
+import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {CheckboxStatus} from "../../utils/constant";
+import {unit} from "plain-utils/string/unit";
+import {getKey, KEY} from "../KeyboardService";
+import {useClickWave} from "../../directives/ClickWave";
+import {RadioInner} from "../RadioInner";
+import {RadioGroup} from "../RadioGroup";
+import './radio.scss';
+import Transition from "../Transition";
+
+export const Radio = designComponent({
+  name: 'radio',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+
+    modelValue: {},                                               // 双向绑定值
+    val: {},                                                      // 在group中的唯一标识
+    width: { type: [String, Number] },                            // 宽度
+    trueValue: { default: true as any },                          // 真值
+    falseValue: { default: false as any },                        // 假值
+    checkStatus: { type: String as PropType<'check' | 'uncheck'> }, // 自定义选中状态
+    label: { type: String },                                      // 单选框文本
+  },
+  slots: ['labelContent'],
+  scopeSlots: {
+    default: (scope: { checked: boolean, status: 'check' | 'uncheck', click: SimpleFunction }) => {},
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onUpdateModelValue: (val: any) => true,
+    onClick: (e?: iMouseEvent) => true,
+  },
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const group = RadioGroup.use.inject(null);
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const { editComputed } = useEdit();
+    const { styleComputed } = useStyle({ status: ThemeStatus.primary });
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+    const checkStatus = computed(() => {
+      if (!!props.checkStatus) {
+        return props.checkStatus;
+      }
+      if (!!group) {
+        return group.utils.getCheckStatus(props.val);
+      } else {
+        return model.value === props.trueValue ? CheckboxStatus.check : CheckboxStatus.uncheck;
+      }
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('radio'),
+      `radio-status-${styleComputed.value.status}`,
+      `radio-size-${styleComputed.value.size}`,
+      {
+        'radio-checked': checkStatus.value === CheckboxStatus.check,
+        'radio-disabled': editComputed.value.disabled,
+      },
+    ]);
+
+    const styles = useStyles(style => {
+      let width: number | null | string = null;
+      if (!!props.width) {
+        width = props.width as number;
+      }
+      if (!!group && !!group.props.itemWidth) {
+        width = group.props.itemWidth;
+      }
+      if (width != null) {
+        style.width = unit(width);
+      }
+    });
+
+    const handler = {
+      click: (e?: iMouseEvent) => {
+        /*if (!!e) {
+          e.stopPropagation();
+        }*/
+        emit.onClick(e);
+        if (!editComputed.value.editable || props.customReadonly) {
+          return;
+        }
+        if (!!group) {
+          group.handler.onClickRadio(props.val);
+        } else {
+          model.value = checkStatus.value === CheckboxStatus.check ? props.falseValue : props.trueValue;
+        }
+
+        /*if (!!e) {
+          e.stopPropagation();
+          e.preventDefault();
+        }*/
+      },
+      keydown: (e: iKeyboardEvent) => {
+        if (getKey(e) === KEY.space) {
+          e.preventDefault();
+          e.stopPropagation();
+          handler.click(e as any);
+        }
+      },
+    };
+
+    useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }) });
+
+    return {
+      refer: { refs },
+      render: () => {
+        return scopeSlots.default({
+          checked: checkStatus.value === CheckboxStatus.check,
+          status: checkStatus.value,
+          click: handler.click,
+        }, (
+          <div
+            ref={onRef.el}
+            className={classes.value}
+            style={styles.value}
+            tabIndex={0}
+            onClick={handler.click}
+            onKeyDown={handler.keydown}
+          >
+            <span className="plain-click-node">
+              <Transition switch name={getComponentCls('transition-fade')} mode="out-in">
+                <RadioInner checkStatus={checkStatus.value} key={checkStatus.value}/>
+              </Transition>
+            </span>
+            {(!!props.label || slots.labelContent.isExist()) && slots.labelContent(<span className="radio-label">{props.label}</span>)}
+          </div>
+        ));
+      }
+    };
+  },
+});
+
+export default Radio;