plain-design 1.0.0-beta.70 → 1.0.0-beta.72

package/src/packages/components/StackCard/stack-card.scss

@@ -1,40 +1,40 @@
-@include comp(stack-card) {
-  display: block;
-  box-sizing: border-box;
-
-  &.stack-card-direction-vertical {
-    height: 100%;
-
-    .stack-card-container {
-      height: 100%
-    }
-
-    @include comp(stack-card-item) {
-      height: 100%
-    }
-  }
-
-  .stack-card-container {
-    position: relative;
-    @include comp(stack-card-item) {
-      transition: transform linear 100ms, opacity linear 300ms;
-
-      &:not(:first-child) {
-        position: absolute;
-        inset: 0;
-      }
-      &:first-child {
-        position: relative;
-      }
-
-      & > img {
-        width: 100%;
-      }
-    }
-  }
-
-  &:not(.stack-card-touching) {
-    @include comp(stack-card-item) {
-    }
-  }
-}
+@include comp(stack-card) {
+  display: block;
+  box-sizing: border-box;
+
+  &.stack-card-direction-vertical {
+    height: 100%;
+
+    .stack-card-container {
+      height: 100%
+    }
+
+    @include comp(stack-card-item) {
+      height: 100%
+    }
+  }
+
+  .stack-card-container {
+    position: relative;
+    @include comp(stack-card-item) {
+      transition: transform linear 100ms, opacity linear 300ms;
+
+      &:not(:first-child) {
+        position: absolute;
+        inset: 0;
+      }
+      &:first-child {
+        position: relative;
+      }
+
+      & > img {
+        width: 100%;
+      }
+    }
+  }
+
+  &:not(.stack-card-touching) {
+    @include comp(stack-card-item) {
+    }
+  }
+}

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

@@ -1,24 +1,24 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
-
-export const StackCardItem = designComponent({
-  name: 'stack-card-item',
-  props: {
-    val: { type: [String, Number] },
-    destroyContent: { type: Boolean }
-  },
-  slots: ['default'],
-  setup({ props, slots, event: { emit } }) {
-
-    const classes = useClasses(() => [
-      getComponentCls('stack-card-item')
-    ]);
-
-    return () => (
-      <div className={classes.value}>
-        {!props.destroyContent && slots.default()}
-      </div>
-    );
-  },
-});
-
-export default StackCardItem;
+import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+
+export const StackCardItem = designComponent({
+  name: 'stack-card-item',
+  props: {
+    val: { type: [String, Number] },
+    destroyContent: { type: Boolean }
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('stack-card-item')
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {!props.destroyContent && slots.default()}
+      </div>
+    );
+  },
+});
+
+export default StackCardItem;

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

@@ -1,120 +1,120 @@
-import {computed, designComponent, getComponentCls, getCurrentDesignInstance, iMouseEvent, useClasses, useRefs} from "plain-design-composition";
-import {StepCollector} from "../StepGroup";
-import {StepStatus, StepUtils} from "../StepGroup/step.utils";
-import Icon from "../Icon";
-import Loading from "../Loading";
-
-export const Step = designComponent({
-  name: '-step',
-  props: {
-    icon: { type: String },
-    status: { type: String },
-    val: { type: String },
-    title: { type: String },
-    message: { type: String },
-  },
-  emits: {
-    onClick: (e: iMouseEvent) => true,
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['head', 'content', 'default'],
-  setup({ props, event: { emit }, slots }) {
-    const { refs, onRef } = useRefs({
-      el: HTMLDivElement
-    });
-    const stepGroup = StepCollector.child({ sort: () => refs.el! });
-    const ctx = getCurrentDesignInstance()!;
-
-    /*---------------------------------------computer-------------------------------------------*/
-
-    const index = computed(() => stepGroup.items.indexOf(ctx.proxy));
-
-    const icon = computed(() => {
-      if (!!props.icon) return props.icon;
-      return null;
-    });
-
-    const isLast = computed(() => {
-      return index.value === stepGroup.items.length - 1;
-    });
-
-    const currentStatus: { value: StepStatus | null } = computed(() => {
-      return StepUtils.getStepStatus({
-        currentIndex: stepGroup.currentIndex as any,
-        currentStatus: stepGroup.props.currentStatus as any
-      }, {
-        status: props.status as any,
-        index
-      });
-    });
-
-
-    const classes = useClasses(() => [
-      getComponentCls('step'),
-      `step-status-${currentStatus.value}`,
-      {
-        'step-has-icon': !!icon.value,
-        'step-last': isLast.value,
-      }
-    ]);
-
-    return {
-      refer: {
-        props,
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} onClick={emit.onClick} ref={onRef.el}>
-          <div className="step-head">
-            {!stepGroup.props.vertical && (stepGroup.isTitleAlignBottom.value || isLast.value) && <span className="step-divider step-divider-prev"/>}
-            <span className="step-icon">
-              {
-                !!icon.value ?
-                  (currentStatus.value !== 'process' ? <Icon icon={icon.value} strokeWidth={4}/> : <Loading type="delta"/>)
-                  :
-                  (
-                    !!stepGroup.props.dotIcon ?
-                      (<span className="step-dot"/>)
-                      :
-                      (
-                        <span className="step-number">
-                          {currentStatus.value === StepStatus.finish ?
-                            <Icon icon="pi-check" strokeWidth={4}/>
-                            :
-                            (currentStatus.value === StepStatus.error ?
-                                <Icon icon="pi-close" strokeWidth={4}/>
-                                :
-                                <span>{index.value + 1}</span>
-                            )
-                          }
-                        </span>
-                      )
-                  )
-              }
-            </span>
-            {!stepGroup.isTitleAlignBottom.value && (
-              <span className="step-title">
-                {slots.head(props.title)}
-              </span>
-            )}
-            {(stepGroup.isTitleAlignBottom.value || !isLast.value) && <span className="step-divider step-divider-next"/>}
-          </div>
-          <div className="step-body">
-            {!stepGroup.isTitleAlignBottom.value ?
-              <span className="step-icon"/>
-              :
-              <span className="step-title">
-                {slots.head(props.title)}
-              </span>
-            }
-            <span className="step-content">
-              {slots.content(props.message)}
-            </span>
-          </div>
-        </div>
-      )
-    };
-  },
-});
-
-export default Step;
+import {computed, designComponent, getComponentCls, getCurrentDesignInstance, iMouseEvent, useClasses, useRefs} from "plain-design-composition";
+import {StepCollector} from "../StepGroup";
+import {StepStatus, StepUtils} from "../StepGroup/step.utils";
+import Icon from "../Icon";
+import Loading from "../Loading";
+
+export const Step = designComponent({
+  name: '-step',
+  props: {
+    icon: { type: String },
+    status: { type: String },
+    val: { type: String },
+    title: { type: String },
+    message: { type: String },
+  },
+  emits: {
+    onClick: (e: iMouseEvent) => true,
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['head', 'content', 'default'],
+  setup({ props, event: { emit }, slots }) {
+    const { refs, onRef } = useRefs({
+      el: HTMLDivElement
+    });
+    const stepGroup = StepCollector.child({ sort: () => refs.el! });
+    const ctx = getCurrentDesignInstance()!;
+
+    /*---------------------------------------computer-------------------------------------------*/
+
+    const index = computed(() => stepGroup.items.indexOf(ctx.proxy));
+
+    const icon = computed(() => {
+      if (!!props.icon) return props.icon;
+      return null;
+    });
+
+    const isLast = computed(() => {
+      return index.value === stepGroup.items.length - 1;
+    });
+
+    const currentStatus: { value: StepStatus | null } = computed(() => {
+      return StepUtils.getStepStatus({
+        currentIndex: stepGroup.currentIndex as any,
+        currentStatus: stepGroup.props.currentStatus as any
+      }, {
+        status: props.status as any,
+        index
+      });
+    });
+
+
+    const classes = useClasses(() => [
+      getComponentCls('step'),
+      `step-status-${currentStatus.value}`,
+      {
+        'step-has-icon': !!icon.value,
+        'step-last': isLast.value,
+      }
+    ]);
+
+    return {
+      refer: {
+        props,
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} onClick={emit.onClick} ref={onRef.el}>
+          <div className="step-head">
+            {!stepGroup.props.vertical && (stepGroup.isTitleAlignBottom.value || isLast.value) && <span className="step-divider step-divider-prev"/>}
+            <span className="step-icon">
+              {
+                !!icon.value ?
+                  (currentStatus.value !== 'process' ? <Icon icon={icon.value} strokeWidth={4}/> : <Loading type="delta"/>)
+                  :
+                  (
+                    !!stepGroup.props.dotIcon ?
+                      (<span className="step-dot"/>)
+                      :
+                      (
+                        <span className="step-number">
+                          {currentStatus.value === StepStatus.finish ?
+                            <Icon icon="pi-check" strokeWidth={4}/>
+                            :
+                            (currentStatus.value === StepStatus.error ?
+                                <Icon icon="pi-close" strokeWidth={4}/>
+                                :
+                                <span>{index.value + 1}</span>
+                            )
+                          }
+                        </span>
+                      )
+                  )
+              }
+            </span>
+            {!stepGroup.isTitleAlignBottom.value && (
+              <span className="step-title">
+                {slots.head(props.title)}
+              </span>
+            )}
+            {(stepGroup.isTitleAlignBottom.value || !isLast.value) && <span className="step-divider step-divider-next"/>}
+          </div>
+          <div className="step-body">
+            {!stepGroup.isTitleAlignBottom.value ?
+              <span className="step-icon"/>
+              :
+              <span className="step-title">
+                {slots.head(props.title)}
+              </span>
+            }
+            <span className="step-content">
+              {slots.content(props.message)}
+            </span>
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+export default Step;

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

@@ -1,63 +1,63 @@
-import {computed, designComponent, getComponentCls, useClasses, useCollect, useRefs} from "plain-design-composition";
-import {StepUtils} from "./step.utils";
-import './step-group.scss';
-import Step from "../Step";
-
-export const StepGroup = designComponent({
-  name: 'step-group',
-  props: {
-    current: { type: [String, Number] },                              // 双向绑定，指定当前步骤条的步骤，在step组件中，可以通过 status 属性覆盖状态
-    currentStatus: { type: String },                                  // 当前激活节点的状态
-    type: { type: String, default: 'normal' },                        // 步骤条类型，normal、navigation
-    vertical: { type: Boolean },                                      // 步骤条是否为纵向
-    titleAlignBottom: { type: Boolean },                              // 默认情况下，标题会放在图标右侧，设置该属性可以改为放在图标下面
-    mini: { type: Boolean, default: true },                           // 迷你步骤条
-    dotIcon: { type: Boolean },                                       // 图标是否采用小圆点替代
-  },
-  slots: ['default'],
-  inheritPropsType: HTMLDivElement,
-  setup({ props, slots }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const items = StepCollector.parent() as any[];
-
-    /*---------------------------------------computer-------------------------------------------*/
-
-    const isTitleAlignBottom = computed(() => {
-      return props.titleAlignBottom || props.vertical;
-    });
-    const classes = useClasses(() => [
-      getComponentCls('step-group'),
-      `step-group-${props.vertical ? 'vertical' : 'horizontal'}`,
-      {
-        'step-group-title-align-bottom': isTitleAlignBottom.value,
-        'step-group-mini': props.mini,
-        'step-group-dot-icon': props.dotIcon,
-      },
-    ]);
-    const currentIndex = computed(() => StepUtils.getCurrentIndex(props.current, items)) as { value: number };
-
-    return {
-      refer: {
-        items,
-        currentIndex,
-        props,
-        isTitleAlignBottom,
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} ref={onRef.el}>
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-
-export const StepCollector = useCollect(() => ({
-  parent: StepGroup,
-  child: Step,
-}));
-
-export default StepGroup;
+import {computed, designComponent, getComponentCls, useClasses, useCollect, useRefs} from "plain-design-composition";
+import {StepUtils} from "./step.utils";
+import './step-group.scss';
+import Step from "../Step";
+
+export const StepGroup = designComponent({
+  name: 'step-group',
+  props: {
+    current: { type: [String, Number] },                              // 双向绑定，指定当前步骤条的步骤，在step组件中，可以通过 status 属性覆盖状态
+    currentStatus: { type: String },                                  // 当前激活节点的状态
+    type: { type: String, default: 'normal' },                        // 步骤条类型，normal、navigation
+    vertical: { type: Boolean },                                      // 步骤条是否为纵向
+    titleAlignBottom: { type: Boolean },                              // 默认情况下，标题会放在图标右侧，设置该属性可以改为放在图标下面
+    mini: { type: Boolean, default: true },                           // 迷你步骤条
+    dotIcon: { type: Boolean },                                       // 图标是否采用小圆点替代
+  },
+  slots: ['default'],
+  inheritPropsType: HTMLDivElement,
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const items = StepCollector.parent() as any[];
+
+    /*---------------------------------------computer-------------------------------------------*/
+
+    const isTitleAlignBottom = computed(() => {
+      return props.titleAlignBottom || props.vertical;
+    });
+    const classes = useClasses(() => [
+      getComponentCls('step-group'),
+      `step-group-${props.vertical ? 'vertical' : 'horizontal'}`,
+      {
+        'step-group-title-align-bottom': isTitleAlignBottom.value,
+        'step-group-mini': props.mini,
+        'step-group-dot-icon': props.dotIcon,
+      },
+    ]);
+    const currentIndex = computed(() => StepUtils.getCurrentIndex(props.current, items)) as { value: number };
+
+    return {
+      refer: {
+        items,
+        currentIndex,
+        props,
+        isTitleAlignBottom,
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+
+export const StepCollector = useCollect(() => ({
+  parent: StepGroup,
+  child: Step,
+}));
+
+export default StepGroup;