plain-design 1.0.0-beta.8 → 1.0.0-beta.80

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,26 +1,22 @@
-import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
-import {iThemeConfiguration} from "../theme/theme";
-import {ThemeShape, ThemeSize} from "../../../uses/useStyle";
-
-export interface iApplicationConfiguration {
-  theme: iThemeConfiguration;
-  default: {
-    size: typeof ThemeSize.TYPE,
-    shape: typeof ThemeShape.TYPE,
-    inputMode: 'flat' | 'stroke',
-  },
-}
-
-export const ApplicationConfigurationProvider = (() => {
-  const PLAIN_ROOT_CONFIGURATION = '@@PLAIN_ROOT_CONFIGURATION';
-  return {
-    provide: (val: ComputedRef<iApplicationConfiguration>) => provide(PLAIN_ROOT_CONFIGURATION, val),
-    inject: (): ComputedRef<iApplicationConfiguration> => inject<ComputedRef<iApplicationConfiguration>>(PLAIN_ROOT_CONFIGURATION)!,
-  };
-})();
-
-export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
-
-export const ApplicationHooks = {
-  onRender: createRenderHook(),
-};
+import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
+import {iThemeConfiguration} from "../theme/theme";
+import {UseStyleProvideData} from "../../../uses/useStyle";
+
+export interface iApplicationConfiguration {
+  theme: iThemeConfiguration;
+  default: UseStyleProvideData['default'];
+}
+
+export const ApplicationConfigurationProvider = (() => {
+  const PLAIN_ROOT_CONFIGURATION = '@@PLAIN_ROOT_CONFIGURATION';
+  return {
+    provide: (val: ComputedRef<iApplicationConfiguration>) => provide(PLAIN_ROOT_CONFIGURATION, val),
+    inject: (): ComputedRef<iApplicationConfiguration> => inject<ComputedRef<iApplicationConfiguration>>(PLAIN_ROOT_CONFIGURATION)!,
+  };
+})();
+
+export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
+
+export const ApplicationHooks = {
+  onRender: createRenderHook(),
+};

package/src/packages/components/Application/utils/createServiceReadyObserver.ts

@@ -1,18 +1,18 @@
-import {createHooks, toRaw} from "plain-design-composition";
-
-export function createServiceReadyObserver<Option>() {
-  const hook = createHooks<(data: { option: Option, ins: any }) => void>();
-  const onReady = (data: { option: Option, ins: any }) => {hook.exec(data);};
-  const getNewIns = (options: Option | Option[]) => {
-    const option: Option = Array.isArray(options) ? options[options.length - 1] : options;
-    return new Promise<any>(resolve => {
-      const eject = hook.use(val => {
-        if (val.option === option || toRaw(val.option) === option) {
-          eject();
-          resolve(val.ins);
-        }
-      });
-    });
-  };
-  return { onReady, getNewIns };
-}
+import {createHooks, toRaw} from "plain-design-composition";
+
+export function createServiceReadyObserver<Option>() {
+  const hook = createHooks<(data: { option: Option, ins: any }) => void>();
+  const onReady = (data: { option: Option, ins: any }) => {hook.exec(data);};
+  const getNewIns = (options: Option | Option[]) => {
+    const option: Option = Array.isArray(options) ? options[options.length - 1] : options;
+    return new Promise<any>(resolve => {
+      const eject = hook.use(val => {
+        if (val.option === option || toRaw(val.option) === option) {
+          eject();
+          resolve(val.ins);
+        }
+      });
+    });
+  };
+  return { onReady, getNewIns };
+}

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

@@ -1,5 +1,5 @@
-import {ApplicationConfigurationProvider} from "../Application/utils/application.utils";
-
-export default ApplicationConfigurationProvider;
-
-export {ApplicationConfigurationProvider};
+import {ApplicationConfigurationProvider} from "../Application/utils/application.utils";
+
+export default ApplicationConfigurationProvider;
+
+export {ApplicationConfigurationProvider};

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

@@ -1,73 +1,73 @@
-import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "plain-design-composition";
-import Triangle from "../Triangle";
-import {ArrowStepCollector} from "../ArrowStepGroup";
-import {StepStatus, StepUtils} from "../StepGroup/step.utils";
-
-export const ArrowStep = designComponent({
-  name: 'arrow-step',
-  props: {
-    status: { type: String },
-    title: { type: String },
-    val: { type: String },
-    hideIndex: { type: Boolean },
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['default'],
-  setup({ props, slots }) {
-    const ctx = getCurrentDesignInstance()!;
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const stepGroup = ArrowStepCollector.child({ sort: () => refs.el! });
-    /*---------------------------------------computer-------------------------------------------*/
-
-    const index = computed(() => {
-      return stepGroup.items.indexOf(ctx.proxy);
-    }) as { value: number };
-
-    const isLast = computed(() => {
-      return index.value === stepGroup.items.length - 1;
-    });
-
-    const isFirst = computed(() => {
-      return index.value === 0;
-    });
-
-    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: index as any
-      });
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('arrow-step'),
-      `arrow-step-status-${currentStatus.value}`,
-    ]);
-
-    return {
-      refer: {
-        refs,
-        props,
-      },
-      render: () => (
-        index.value != null ? (
-          <div className={classes.value} ref={onRef.el}>
-            <div className="arrow-step-content">
-              {!props.hideIndex && <span className="arrow-step-sequence">{index.value + 1}. &nbsp;</span>}
-              <span>{slots.default() || props.title}</span>
-            </div>
-            {!isLast.value && <Triangle direction="right" size={null}/>}
-            {!isFirst.value && <>
-              <Triangle direction="bottom" half="start" size={null}/>
-              <Triangle direction="top" half="start" size={null}/>
-            </>}
-          </div>
-        ) : <div/>
-      )
-    };
-  },
-});
-
-export default ArrowStep;
+import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "plain-design-composition";
+import Triangle from "../Triangle";
+import {ArrowStepCollector} from "../ArrowStepGroup";
+import {StepStatus, StepUtils} from "../StepGroup/step.utils";
+
+export const ArrowStep = designComponent({
+  name: 'arrow-step',
+  props: {
+    status: { type: String },
+    title: { type: String },
+    val: { type: String },
+    hideIndex: { type: Boolean },
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  setup({ props, slots }) {
+    const ctx = getCurrentDesignInstance()!;
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const stepGroup = ArrowStepCollector.child({ sort: () => refs.el! });
+    /*---------------------------------------computer-------------------------------------------*/
+
+    const index = computed(() => {
+      return stepGroup.items.indexOf(ctx.proxy);
+    }) as { value: number };
+
+    const isLast = computed(() => {
+      return index.value === stepGroup.items.length - 1;
+    });
+
+    const isFirst = computed(() => {
+      return index.value === 0;
+    });
+
+    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: index as any
+      });
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('arrow-step'),
+      `arrow-step-status-${currentStatus.value}`,
+    ]);
+
+    return {
+      refer: {
+        refs,
+        props,
+      },
+      render: () => (
+        index.value != null ? (
+          <div className={classes.value} ref={onRef.el}>
+            <div className="arrow-step-content">
+              {!props.hideIndex && <span className="arrow-step-sequence">{index.value + 1}. &nbsp;</span>}
+              <span>{slots.default() || props.title}</span>
+            </div>
+            {!isLast.value && <Triangle direction="right" size={null}/>}
+            {!isFirst.value && <>
+              <Triangle direction="bottom" half="start" size={null}/>
+              <Triangle direction="top" half="start" size={null}/>
+            </>}
+          </div>
+        ) : <div/>
+      )
+    };
+  },
+});
+
+export default ArrowStep;

package/src/packages/components/ArrowStepGroup/arrow-step.scss

@@ -1,106 +1,119 @@
-@include prefix(arrow-step-group) {
-  display: flex;
-  align-items: center;
-  height: 40px;
-
-  &.disabled-arrow-item-transition {
-    @include comp(arrow-step) {
-      .arrow-step-content, .#{componentName(triangle)} {
-        transition: none !important;
-      }
-    }
-  }
-
-  @include prefix(arrow-step) {
-    flex: 1;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .arrow-step-sequence {
-      font-style: italic;
-      font-size: 1.2em;
-    }
-
-    .arrow-step-content {
-      flex: 1;
-      overflow: hidden;
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 16px;
-      color: white;
-    }
-
-    .#{componentName(triangle)} {
-
-      &.triangle-direction-top, &.triangle-direction-bottom {
-        position: absolute;
-        right: 100%;
-
-        &.triangle-direction-top {
-          bottom: 0;
-        }
-
-        &.triangle-direction-bottom {
-          top: 0;
-        }
-      }
-    }
-
-    .arrow-step-content, .#{componentName(triangle)} {
-      transition: all ease 300ms;
-    }
-
-    &:not(:first-child) {
-      margin-left: 4px;
-    }
-
-    &.arrow-step-status-wait {
-      .arrow-step-content {
-        background-color: plv(secondary-light-2);
-        color: plv(text-3);
-      }
-
-      .#{componentName(triangle)} {
-        color: plv(secondary-light-2);
-      }
-    }
-
-    &.arrow-step-status-process, &.arrow-step-status-finish {
-      .arrow-step-content {
-        background-color: plv(primary-6);
-        color: white;
-      }
-
-      .#{componentName(triangle)} {
-        color: plv(primary-6);
-      }
-    }
-
-    &.arrow-step-status-success {
-      .arrow-step-content {
-        background-color: plv(success-6);
-        color: white;
-      }
-
-      .#{componentName(triangle)} {
-        color: plv(success-6);
-      }
-    }
-
-    &.arrow-step-status-error {
-      .arrow-step-content {
-        background-color: plv(error-6);
-        color: white;
-      }
-
-      .#{componentName(triangle)} {
-        color: plv(error-6);
-      }
-    }
-  }
-}
+@include prefix(arrow-step-group) {
+  display: flex;
+  align-items: center;
+  height: 40px;
+
+  &.disabled-arrow-item-transition {
+    @include comp(arrow-step) {
+      .arrow-step-content, .#{componentName(triangle)} {
+        transition: none !important;
+      }
+    }
+  }
+
+  @include prefix(arrow-step) {
+    flex: 1;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .arrow-step-sequence {
+      font-style: italic;
+      font-size: 1.2em;
+    }
+
+    .arrow-step-content {
+      flex: 1;
+      overflow: hidden;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 16px;
+      color: plv(pbfc);
+    }
+
+    .#{componentName(triangle)} {
+
+      &.triangle-direction-top, &.triangle-direction-bottom {
+        position: absolute;
+        right: 100%;
+
+        &.triangle-direction-top {
+          bottom: 0;
+        }
+
+        &.triangle-direction-bottom {
+          top: 0;
+        }
+      }
+    }
+
+    .arrow-step-content, .#{componentName(triangle)} {
+      transition: all ease 300ms;
+    }
+
+    &:not(:first-child) {
+      margin-left: 4px;
+    }
+
+    &.arrow-step-status-wait {
+      .arrow-step-content {
+        background-color: plv(secondary-light-2);
+        color: plv(text-3);
+      }
+
+      .#{componentName(triangle)} {
+        color: plv(secondary-light-2);
+      }
+    }
+
+    &.arrow-step-status-process, &.arrow-step-status-finish {
+      .arrow-step-content {
+        background-color: plv(primary-6);
+        color: plv(pbfc);
+      }
+
+      .#{componentName(triangle)} {
+        color: plv(primary-6);
+      }
+    }
+
+    &.arrow-step-status-success {
+      .arrow-step-content {
+        background-color: plv(success-6);
+        color: plv(pbfc);
+      }
+
+      .#{componentName(triangle)} {
+        color: plv(success-6);
+      }
+    }
+
+    &.arrow-step-status-error {
+      .arrow-step-content {
+        background-color: plv(error-6);
+        color: plv(pbfc);
+      }
+
+      .#{componentName(triangle)} {
+        color: plv(error-6);
+      }
+    }
+
+    &:first-child {
+      .arrow-step-content {
+        border-top-left-radius: plv(box-size-normal-border-radius);
+        border-bottom-left-radius: plv(box-size-normal-border-radius);
+      }
+    }
+    &:last-child {
+      .arrow-step-content {
+        border-top-right-radius: plv(box-size-normal-border-radius);
+        border-bottom-right-radius: plv(box-size-normal-border-radius);
+      }
+    }
+  }
+}

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

@@ -1,63 +1,63 @@
-import './arrow-step.scss';
-import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "plain-design-composition";
-import {Dialog} from "../Dialog";
-import {StepUtils} from "../StepGroup/step.utils";
-import ArrowStep from "../ArrowStep";
-import {delay} from "plain-utils/utils/delay";
-
-export const ArrowStepGroup = designComponent({
-  name: 'arrow-step-group',
-  props: {
-    current: {},
-    currentStatus: { type: String },
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['default'],
-  setup({ props, slots }) {
-    const { refs, onRef } = useRefs({
-      el: HTMLDivElement,
-    });
-    const disableTransition = (() => {
-      const flag = ref(true);
-      onMounted(() => {delay(300).then(() => flag.value = false);});
-      return flag;
-    })();
-    const classes = useClasses(() => [
-      getComponentCls('arrow-step-group'),
-      {
-        'disabled-arrow-item-transition': disableTransition.value
-      }
-    ]);
-    const dialog = Dialog.use.inject(null);
-    const state = reactive({
-      showContent: !dialog || dialog.model.value,
-    });
-    if (!!dialog) {
-      dialog.event.on.onOpen(() => {
-        state.showContent = true;
-      });
-    }
-    const items = ArrowStepCollector.parent() as any[];
-    const currentIndex = computed(() => StepUtils.getCurrentIndex(props.current, items)) as { value: number };
-    return {
-      refer: {
-        props,
-        currentIndex,
-        items,
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} ref={onRef.el}>
-          {state.showContent && slots.default()}
-        </div>
-      )
-    };
-  },
-});
-
-export default ArrowStepGroup;
-
-export const ArrowStepCollector = useCollect(() => ({
-  parent: ArrowStepGroup,
-  child: ArrowStep,
-}));
+import './arrow-step.scss';
+import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "plain-design-composition";
+import {Dialog} from "../Dialog";
+import {StepUtils} from "../StepGroup/step.utils";
+import ArrowStep from "../ArrowStep";
+import {delay} from "plain-utils/utils/delay";
+
+export const ArrowStepGroup = designComponent({
+  name: 'arrow-step-group',
+  props: {
+    current: {},
+    currentStatus: { type: String },
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  setup({ props, slots }) {
+    const { refs, onRef } = useRefs({
+      el: HTMLDivElement,
+    });
+    const disableTransition = (() => {
+      const flag = ref(true);
+      onMounted(() => {delay(300).then(() => flag.value = false);});
+      return flag;
+    })();
+    const classes = useClasses(() => [
+      getComponentCls('arrow-step-group'),
+      {
+        'disabled-arrow-item-transition': disableTransition.value
+      }
+    ]);
+    const dialog = Dialog.use.inject(null);
+    const state = reactive({
+      showContent: !dialog || dialog.model.value,
+    });
+    if (!!dialog) {
+      dialog.event.on.onOpen(() => {
+        state.showContent = true;
+      });
+    }
+    const items = ArrowStepCollector.parent() as any[];
+    const currentIndex = computed(() => StepUtils.getCurrentIndex(props.current, items)) as { value: number };
+    return {
+      refer: {
+        props,
+        currentIndex,
+        items,
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} ref={onRef.el}>
+          {state.showContent && slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default ArrowStepGroup;
+
+export const ArrowStepCollector = useCollect(() => ({
+  parent: ArrowStepGroup,
+  child: ArrowStep,
+}));

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

@@ -1 +1 @@
-export const AsyncFormatter: Record<string, undefined | ((...args: any[]) => Promise<string | number | null | undefined>)> = {};
+export const AsyncFormatter: Record<string, undefined | ((...args: any[]) => Promise<string | number | null | undefined>)> = {};