plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/Application/theme/theme.ts

@@ -0,0 +1,260 @@
+import {ThemeColorNum, tThemeColorNum} from "./theme.utils";
+import {DeepPartial} from "../../../utils/type";
+import {darken, lighter} from "../../../utils/color.utils";
+import {clearFields} from "../../../utils/clearFields";
+
+/*默认的基础色*/
+export const BaseColors = {
+  gray: '',
+  secondary: '',
+  primary: '#452feb',
+  success: '#00b42a',
+  warn: '#ff7d00',
+  error: '#f53f3f',
+};
+
+/*基础的灰色*/
+export const BaseGrayColors = {
+  'gray-1': '#fbfbfc',
+  'gray-2': '#f2f3f5',
+  'gray-3': '#e1e2e7',
+  'gray-4': '#c9cdd4',
+  'gray-5': '#a9aeb8',
+  'gray-6': '#86909c',
+  'gray-7': '#6b7785',
+  'gray-8': '#464f5e',
+  'gray-9': '#272e3b',
+  'gray-10': '#1d2129',
+};
+
+/**
+ * 生成gray颜色
+ * @author  韦胜健
+ * @date    2022.5.14 13:08
+ * @param   dark  是否为黑色主题
+ * @param   light 是否为轻色
+ */
+const createGrayColors = (dark: boolean, light: boolean) => {
+  const colors: any = {};
+  if (!dark && !light) {return { ...BaseGrayColors };}
+  const getName = (index: number) => light ? `gray-light-${index}` : `gray-${index}`;
+
+  if (dark) {
+    ThemeColorNum.forEach(i => {
+      colors[getName(i)] = (BaseGrayColors as any)[`gray-${ThemeColorNum.length + 1 - i}`];
+    });
+  } else {
+    ThemeColorNum.forEach(i => {
+      colors[getName(i)] = (BaseGrayColors as any)[`gray-${i}`];
+    });
+  }
+  /*if (light) {
+    ThemeColorNum.forEach(i => {
+      if (i === ThemeColorNum.length) {
+        colors[getName(i)] = dark ? '#ffffff' : '#131313';
+      } else {
+        colors[getName(i)] = colors[getName(i + 1)];
+      }
+    });
+  }*/
+
+  return colors;
+};
+
+/*其他主题变量*/
+function createOtherVars(prefix: string | null, referenceVariable: (name: string) => string) {
+
+
+  return {
+    /*---------------------------------------base-------------------------------------------*/
+    'font-family': "Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif",
+    'scrollbar-size': '9px',
+    'border-color': "rgba(0, 0, 0, .06)",
+    'background-color': "#ffffff",
+    'background-lite': "#ffffff",
+    'background-hover': referenceVariable("gray-2"),
+    'scrollbar-color': referenceVariable("gray-3"),
+    'loading-mask-color': 'rgba(255,255,255,0.5)',
+
+    'font-size-mini': '12px',
+    'font-size-small': '12px',
+    'font-size-normal': '14px',
+    'font-size-large': '16px',
+
+    /*---------------------------------------text-------------------------------------------*/
+    'text-1': 'rgba(0,0,0,0.85)',
+    'text-2': 'rgba(0,0,0,0.65)',
+    'text-3': 'rgba(0,0,0,0.45)',
+    'text-4': 'rgba(0,0,0,0.25)',
+    'text-placeholder': 'rgba(0,0,0,0.35)',
+    /*---------------------------------------margin-------------------------------------------*/
+    /*height of sizes*/
+    'margin-mini': '12px',
+    'margin-small': '12px',
+    'margin-normal': '16px',
+    'margin-large': '16px',
+    /*---------------------------------------box-------------------------------------------*/
+    /*min-width of sizes*/
+    'box-size-mini-min-width': '',
+    'box-size-small-min-width': '',
+    'box-size-normal-min-width': '68px',
+    'box-size-large-min-width': '88px',
+    /*height of sizes*/
+    'box-size-mini-height': '24px',
+    'box-size-small-height': '28px',
+    'box-size-normal-height': '32px',
+    'box-size-large-height': '36px',
+    /*padding x of sizes*/
+    'box-size-mini-padding': '0 11px',
+    'box-size-small-padding': '0 15px',
+    'box-size-normal-padding': '0 15px',
+    'box-size-large-padding': '0 19px',
+    /*font size of sizes*/
+    'box-size-mini-font-size': referenceVariable('font-size-mini'),
+    'box-size-small-font-size': referenceVariable('font-size-small'),
+    'box-size-normal-font-size': referenceVariable('font-size-normal'),
+    'box-size-large-font-size': referenceVariable('font-size-normal'),
+    /*border radius of sizes*/
+    'box-size-mini-border-radius': '2px',
+    'box-size-small-border-radius': '2px',
+    'box-size-normal-border-radius': '2px',
+    'box-size-large-border-radius': '2px',
+    /*---------------------------------------input-------------------------------------------*/
+    'input-padding-x': '11px',
+    /*---------------------------------------dialog-------------------------------------------*/
+    'dialog-mask-color': 'rgba(0,0,0,0.3)',
+    'dialog-head-padding-x': '20px',
+    'dialog-body-padding': '16px 20px',
+    'dialog-foot-padding': '8px 16px',
+    'dialog-head-size': '48px',
+    /*---------------------------------------message-------------------------------------------*/
+    'message-padding': '12px 20px',
+    'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+    'message-font-size': referenceVariable('font-size-normal'),
+    /*---------------------------------------notice-------------------------------------------*/
+    'notice-padding': '20px 24px',
+    'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
+    'notice-width': '332px',
+    'notice-max-width': 'calc(100vw / 3)',
+    'notice-space': '16px',
+    'notice-title-font-size': referenceVariable('font-size-normal'),
+    'notice-title-padding': '8px 0',
+    'notice-content-font-size': referenceVariable('font-size-small'),
+    /*---------------------------------------popper-------------------------------------------*/
+    'popper-size-mini-padding-x': '10px',
+    'popper-size-mini-padding-y': '5px',
+    'popper-size-mini-font-size': referenceVariable('font-size-mini'),
+    'popper-size-small-padding-x': '10px',
+    'popper-size-small-padding-y': '5px',
+    'popper-size-small-font-size': referenceVariable('font-size-small'),
+    'popper-size-normal-padding-x': '12px',
+    'popper-size-normal-padding-y': '5px',
+    'popper-size-normal-font-size': referenceVariable('font-size-normal'),
+    'popper-size-large-padding-x': '12px',
+    'popper-size-large-padding-y': '5px',
+    'popper-size-large-font-size': referenceVariable('font-size-normal'),
+    /*---------------------------------------dropdown-------------------------------------------*/
+    'dropdown-size-mini-padding-x': '10px',
+    'dropdown-size-mini-padding-y': '4px',
+    'dropdown-size-small-padding-x': '10px',
+    'dropdown-size-small-padding-y': '6px',
+    'dropdown-size-normal-padding-x': '10px',
+    'dropdown-size-normal-padding-y': '6px',
+    'dropdown-size-large-padding-x': '10px',
+    'dropdown-size-large-padding-y': '6px',
+    /*---------------------------------------input-------------------------------------------*/
+    'input-clear-size-mini': '16px',
+    'input-clear-size-small': '16px',
+    'input-clear-size-normal': '20px',
+    'input-clear-size-large': '20px',
+    /*---------------------------------------tag-------------------------------------------*/
+    'tag-size-mini-height': '20px',
+    'tag-size-small-height': '22px',
+    'tag-size-normal-height': '24px',
+    'tag-size-large-height': '26px',
+    /*---------------------------------------table-------------------------------------------*/
+    'table-head-background': '#ffffff',
+    'table-summary-background': '#fafafa',
+    'table-head-background-hover': '#f0f0f0',
+    'table-border-color': '#f0f0f0',
+    'table-row-hover-color': '#fafafa',
+    'table-row-current-color': '#fafafa',
+  };
+}
+
+/*基础色*/
+type iThemeBaseColors = keyof typeof BaseColors
+/*其他主题变量*/
+type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
+/*基础色衍生的变量*/
+type tGenerateBaseColorList<color extends string> = tThemeColorNum extends number ? `${color}-${tThemeColorNum}` | `${color}-light-${tThemeColorNum}` : never
+
+/*主题配置对象类型，结果值，所有都会有值*/
+export interface iThemeConfiguration {
+  dark: boolean,
+  base: Record<iThemeBaseColors, string>,
+  vars: Record<tGenerateBaseColorList<iThemeBaseColors> | iThemeOtherVars, string>,
+}
+
+export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
+  const dark = config?.dark == undefined ? false : config.dark;
+  const base = { ...BaseColors, ...clearFields(config?.base) };
+  const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
+
+  const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
+    const colors = {} as any;
+    Object.keys(BaseColors).forEach((colorName) => {
+      const baseColor = (base as any)[colorName];
+      if (!baseColor) {return;}
+      ThemeColorNum.forEach(i => {
+        const colorIndex = i;
+        const fun = dark ? darken : lighter;
+        colors[`${colorName}-${i}`] = fun(baseColor, colorIndex);
+        colors[`${colorName}-light-${i}`] = fun(baseColor, colorIndex - 1);
+      });
+    });
+    return colors;
+  })();
+  const secondaryColorList = (() => {
+    const colors: any = {};
+    ThemeColorNum.forEach(i => {
+      colors[`secondary-${i}`] = referenceVariable(`gray-${i}`);
+      colors[`secondary-light-${i}`] = referenceVariable(`gray-light-${i}`);
+    });
+    return colors;
+  })();
+  return {
+    dark,
+    base,
+    vars: {
+      ...baseColorList,
+      ...createOtherVars(prefix, referenceVariable),
+      ...secondaryColorList,
+      ...createGrayColors(dark, false),
+      ...createGrayColors(dark, true),
+      ...dark ? {
+        'background-hover': '#3c3c4d',
+        'scrollbar-color': '#141414',
+
+        'border-color': "#333335",
+        "background-color": '#17171a',
+        "background-lite": '#171922',
+        'loading-mask-color': 'rgba(0,0,0,0.5)',
+        'text-1': 'rgba(255,255,255,0.85)',
+        'text-2': 'rgba(255,255,255,0.65)',
+        'text-3': 'rgba(255,255,255,0.45)',
+        'text-4': 'rgba(255,255,255,0.25)',
+        'text-placeholder': 'rgba(255,255,255,0.35)',
+        'dialog-mask-color': 'rgba(0,0,0,0.75)',
+        // 'table-head-background': '#252527',
+        'table-head-background': referenceVariable('background-color'),
+        'table-head-background-hover': '#29292c',
+        'table-summary-background': '#252527',
+        'table-border-color': '#29292c',
+        'table-row-hover-color': '#1c1f26',
+        'table-row-current-color': '#1c1f26',
+      } : {},
+      ...clearFields(config?.vars),
+    },
+  };
+}

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

@@ -0,0 +1,17 @@
+import {ThemeStatus} from "../../../uses/useStyle";
+
+/**
+ * 基于基础色派生的颜色个数
+ * @author  韦胜健
+ * @date    2022.4.25 11:15
+ */
+export const ThemeColorNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+export type tThemeColorNum = (typeof ThemeColorNum)[number]
+
+export const ThemeStatusIcons: Record<typeof ThemeStatus.TYPE, string> = {
+  primary: 'pi-info-circle-fill',
+  secondary: 'pi-info-circle-fill',
+  success: 'pi-check-circle-fill',
+  warn: 'pi-exclamation-circle-fill',
+  error: 'pi-close-circle-fill',
+};

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

@@ -0,0 +1,26 @@
+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(),
+};

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+@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);
+      }
+    }
+  }
+}

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

@@ -0,0 +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,
+}));

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

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

package/src/packages/components/AutoTable/AutoTable.tsx

@@ -0,0 +1,56 @@
+import {designComponent, getComponentCls, onBeforeUnmount, PropType, useClasses, useRefs} from "plain-design-composition";
+import {AutoTableScopeSlotsOption, AutoTableSlotsOption, iAutoTableRefer} from "./utils/AutoTable.utils";
+import './auto-table.scss';
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {TableOptionSpace} from "./utils/TableOption.space";
+
+export const AutoTable = designComponent({
+  name: 'auto-table',
+  props: {
+    ...StyleProps,
+    option: { type: Object as PropType<TableOptionSpace.iTableOption>, required: true },
+  },
+  provideRefer: true,
+  slots: AutoTableSlotsOption,
+  scopeSlots: AutoTableScopeSlotsOption,
+  setup({ props, slots, scopeSlots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLElement });
+
+    const { styleComputed } = useStyle({ adjust: (ret) => {ret.size = props.option.config.size;} });
+
+    const classes = useClasses(() => props.option.hooks.onTableClass.exec([
+      getComponentCls('auto-table'),
+      `auto-table-size-${styleComputed.value.size}`
+    ]));
+
+    props.option.hooks.onTableSetup.exec(undefined);
+
+    onBeforeUnmount(() => {props.option.hooks.onTableDestroy.exec(undefined);});
+
+    const refer: iAutoTableRefer = { refs, props, slots, scopeSlots };
+
+    props.option.state.getAutoTable = () => refer;
+
+    onBeforeUnmount(() => {props.option.state.getAutoTable = () => null;});
+
+    const onRefEl = (() => {
+      let prev: HTMLDivElement | null = null;
+      return (el: HTMLDivElement | null) => {
+        if (el === prev) {return;}
+        prev = el;
+        props.option.hooks.onRefAutoTableEl.exec(el);
+        onRef.el(el);
+      };
+    })();
+
+    return {
+      refer,
+      render: () => (
+        <div className={classes.value} ref={onRefEl as any}>
+          {props.option.hooks.onTableRender.exec()}
+        </div>
+      ),
+    };
+  },
+});