plain-design 1.0.0-beta.73 → 1.0.0-beta.74

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

@@ -1,188 +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;
+/*
+
+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

@@ -1,44 +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;
-      }
-    }
-  }
-}
+@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

@@ -1,98 +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;
+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;