plain-design 1.0.0-beta.3 → 1.0.0-beta.30

package/src/packages/components/Layout/layout.scss

@@ -0,0 +1,227 @@
+$resize-width: 12px;
+
+@include comp(layout) {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+
+  &.layout-vertical {
+    flex-direction: column;
+  }
+
+  & > .#{componentName(layout-section)} {
+    &.layout-section-position-center {
+      flex: 1;
+      position: relative;
+      z-index: 1;
+    }
+
+    &.layout-section-position-top, &.layout-section-position-bottom, &.layout-section-position-left, &.layout-section-position-right {
+      position: relative;
+      flex-shrink: 0;
+      flex-grow: 0;
+      z-index: 2;
+
+      & > .layout-section-inner {
+        overflow: hidden;
+      }
+
+      &.layout-section-fixed {
+        & > .layout-section-inner {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+
+
+      & > .layout-section-separator {
+        user-select: none;
+      }
+
+      & > .layout-section-collapse-btn {
+        opacity: 0;
+        transition: all ease 0.3s;
+        cursor: pointer;
+      }
+
+      &:hover {
+        & > .layout-section-collapse-btn {
+          opacity: 1;
+        }
+      }
+    }
+
+    /*---------------------------------------horizontal-------------------------------------------*/
+
+    &.layout-section-position-left, &.layout-section-position-right {
+
+      & > .layout-section-separator {
+        cursor: col-resize;
+      }
+
+      &.layout-section-collapse {
+        width: 0 !important;
+
+        & > .layout-section-collapse-btn {
+          opacity: 1;
+        }
+
+        &.layout-section-position-left {
+          & > .layout-section-collapse-btn {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            right: -$resize-width;
+          }
+        }
+
+        &.layout-section-position-right {
+          & > .layout-section-collapse-btn {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            left: -$resize-width;
+          }
+        }
+      }
+    }
+
+    &.layout-section-position-left {
+      & > .layout-section-separator {
+        position: absolute;
+        right: 0;
+        width: 4px;
+        top: 0;
+        bottom: 0;
+        border-right: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        right: calc(#{$resize-width} / 2 * -1);
+        top: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        height: calc(#{$resize-width} * 3);
+        width: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+
+    &.layout-section-position-right {
+      & > .layout-section-separator {
+        position: absolute;
+        left: 0;
+        width: 4px;
+        top: 0;
+        bottom: 0;
+        border-left: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        left: calc(#{$resize-width} / 2 * -1);
+        top: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        height: calc(#{$resize-width} * 3);
+        width: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+
+    /*---------------------------------------vertical-------------------------------------------*/
+
+    &.layout-section-position-top, &.layout-section-position-bottom {
+
+      & > .layout-section-separator {
+        cursor: row-resize;
+      }
+
+      &.layout-section-collapse {
+        height: 0 !important;
+
+        & > .layout-section-collapse-btn {
+          opacity: 1;
+        }
+
+        &.layout-section-position-top {
+          & > .layout-section-collapse-btn {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            bottom: -$resize-width;
+          }
+        }
+
+        &.layout-section-position-bottom {
+          & > .layout-section-collapse-btn {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            top: -$resize-width;
+          }
+        }
+      }
+    }
+
+    &.layout-section-position-top {
+      & > .layout-section-separator {
+        position: absolute;
+        bottom: 0;
+        height: 4px;
+        left: 0;
+        right: 0;
+        border-bottom: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        bottom: calc(#{$resize-width} / 2 * -1);
+        left: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        width: calc(#{$resize-width} * 3);
+        height: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+
+    &.layout-section-position-bottom {
+      & > .layout-section-separator {
+        position: absolute;
+        top: 0;
+        height: 4px;
+        left: 0;
+        right: 0;
+        border-top: solid 1px plv(border-color);
+      }
+
+      & > .layout-section-collapse-btn {
+        position: absolute;
+        top: calc(#{$resize-width} / 2 * -1);
+        left: calc(50% - #{$resize-width} * 3 / 2);
+        font-size: $resize-width;
+        width: calc(#{$resize-width} * 3);
+        height: $resize-width;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: plv(background-color);
+        border-radius: 100px;
+        box-shadow: 0 2px 5px plv(secondary-4);
+      }
+    }
+  }
+}

package/src/packages/components/Layout/layout.utils.ts

@@ -0,0 +1,3 @@
+import {createEnum} from "plain-utils/utils/createEnum";
+
+export const eLayoutSectionPosition = createEnum(['top', 'left', 'right', 'bottom', 'center'] as const);

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

@@ -0,0 +1,67 @@
+import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import Layout from "../Layout";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {useLayoutSectionResizer} from "./useLayoutSectionResizer";
+
+export const LayoutSection = designComponent({
+  name: 'layout-section',
+  props: {
+    position: { type: String as PropType<typeof eLayoutSectionPosition.TYPE>, default: eLayoutSectionPosition.center },
+    modelValue: { type: Number },
+    collapse: { type: Boolean }
+  },
+  emits: {
+    onUpdateModelValue: (val?: number) => true,
+    onUpdateCollapse: (val?: boolean) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event }) {
+
+    const layout = Layout.use.inject();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
+
+    const collapseModel = useModel(() => props.collapse, event.emit.onUpdateCollapse);
+
+    const classes = useClassCache(() => [
+      getComponentCls('layout-section'),
+      `layout-section-position-${props.position}`,
+      {
+        'layout-section-fixed': !!model.value,
+        'layout-section-collapse': collapseModel.value,
+      }
+    ]);
+
+    const styles = useStyleCache(style => {
+      if (!!model.value) {
+        if (layout.props.vertical) {
+          style.height = unit(model.value);
+        } else {
+          style.width = unit(model.value);
+        }
+      }
+    });
+
+    const resizer = useLayoutSectionResizer({ props, model, collapseModel });
+
+    onMounted(() => {
+      if (!props.modelValue && props.position !== eLayoutSectionPosition.center) {
+        model.value = (layout.props.vertical ? refs.el!.offsetHeight : refs.el!.offsetWidth) + 1;
+      }
+    });
+
+    return () => (
+      <div className={classes.value} ref={onRef.el} style={styles.value}>
+        <div className="layout-section-inner">
+          {slots.default()}
+        </div>
+        {resizer.render()}
+      </div>
+    );
+  },
+});
+
+export default LayoutSection;

package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx

@@ -0,0 +1,184 @@
+import Icon from "../Icon";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../../utils/ClientZoom";
+
+export function useLayoutSectionResizer(
+  {
+    model,
+    collapseModel,
+    props
+  }: {
+    model: { value?: number },
+    collapseModel: { value?: boolean },
+    props: { position: typeof eLayoutSectionPosition.TYPE }
+  }
+) {
+
+  const { refs, onRef } = useRefs({ sep: iHTMLDivElement });
+
+  const isVertical = computed(() => props.position === eLayoutSectionPosition.top || props.position === eLayoutSectionPosition.bottom);
+
+  const icon = cacheComputed(() => {
+    switch (props.position) {
+      case "center":
+        return null;
+      case "left":
+        return collapseModel.value ? 'pi-caret-right' : 'pi-caret-left';
+      case "right":
+        return collapseModel.value ? 'pi-caret-left' : 'pi-caret-right';
+      case "top":
+        return collapseModel.value ? 'pi-caret-down' : 'pi-caret-up';
+      case "bottom":
+        return collapseModel.value ? 'pi-caret-up' : 'pi-caret-down';
+    }
+    return null;
+  });
+
+  const draggier = computed(() => {
+    return isVertical.value ? (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startY: number,
+        moveY: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientY } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.height = '1px';
+          el.style.position = 'fixed';
+          el.style.left = `${rect.left}px`;
+          el.style.top = `${clientY}px`;
+          el.style.width = `${rect.width}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startY: clientY,
+          moveY: clientY,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durY = staticState!.moveY - staticState!.startY;
+          if (props.position === eLayoutSectionPosition.bottom) {
+            durY = -durY;
+          }
+          model.value = staticState.startValue + durY;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientY } = ClientZoom.getClientPosition(e);
+        staticState.moveY = clientY;
+        staticState.shadowEl.style.top = `${clientY}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })() : (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startX: number,
+        moveX: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientX } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.width = '1px';
+          el.style.position = 'fixed';
+          el.style.top = `${rect.top}px`;
+          el.style.left = `${clientX}px`;
+          el.style.height = `${rect.height}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startX: clientX,
+          moveX: clientX,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durX = staticState!.moveX - staticState!.startX;
+          if (props.position === eLayoutSectionPosition.right) {
+            durX = -durX;
+          }
+          model.value = staticState.startValue + durX;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState.moveX = clientX;
+        staticState.shadowEl.style.left = `${clientX}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })();
+  });
+
+  const toggleCollapse = () => collapseModel.value = !collapseModel.value;
+
+  const render = () => {
+    return (
+      !icon.value ? null :
+        <>
+          {!collapseModel.value && <div className="layout-section-separator" onMouseDown={draggier.value.onMousedown} ref={onRef.sep}/>}
+          <div className="layout-section-collapse-btn" onClick={toggleCollapse}>
+            <Icon icon={icon.value}/>
+          </div>
+        </>
+    );
+  };
+
+  return { render };
+}

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

@@ -53,7 +53,7 @@ export const LoadingMask = designComponent({
         if (props.fixedPosition) {
           return;
         }
-        await delay();
+        await delay(23);
         const el = refs.el;
         if (el) {
           let parentNode = el.parentNode as HTMLElement;

package/src/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx}

@@ -1,8 +1,8 @@
 import {computed, getComponentCls, reactive} from "plain-design-composition";
-import {iApplicationConfiguration} from "../../packages";
-import {DeepPartial} from "../../packages/utils/type";
-import {createCache} from "../../packages/utils/createCache";
-import {ThemeShape, ThemeSize} from "../../packages/uses/useStyle";
+import {createCache} from "../../utils/createCache";
+import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {DeepPartial} from "../../utils/type";
+import {iApplicationConfiguration} from "../Application/utils/application.utils";
 
 export const PageThemeUtils = (() => {
 
@@ -24,26 +24,62 @@ export const PageThemeUtils = (() => {
 
   const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
     const config: DeepPartial<iApplicationConfiguration> = {};
-    if (!config.theme) {
-      config.theme = {};
+    if (!config.theme) {config.theme = {};}
+    if (!config.theme.base) {config.theme.base = {};}
+    if (!config.theme.vars) {config.theme.vars = {};}
+
+    let { dark, primaryKey, size, shape, inputMode, zoom } = state;
+
+    config.theme.dark = !!dark;
+
+    if (!!primaryKey) {
+      if (dark && primaryKey === 'dark') {
+        primaryKey = 'white';
+      } else if (!dark && primaryKey === 'light') {
+        primaryKey = 'dark';
+      }
     }
-    if (!config.theme.base) {
-      config.theme.base = {};
+
+    config.theme.base.primary = !primaryKey ? undefined : ThemePrimaryColors[primaryKey]?.primary;
+
+    if (primaryKey === 'dark') {
+      Object.assign(config.theme.vars!, {
+        'primary-light-1': '#f2f3f5',
+        'primary-1': '#f2f3f5',
+        'primary-light-2': '#e1e2e7',
+        'primary-2': '#e1e2e7',
+        'primary-light-3': '#c9cdd4',
+        'primary-3': '#c9cdd4',
+        'primary-light-4': '#a9aeb8',
+        'primary-4': '#a9aeb8',
+        'primary-light-5': '#86909c',
+        'primary-5': '#86909c',
+        'primary-light-6': '#0c0e10',
+        'primary-6': '#0b0b0b',
+        'primary-light-7': '#464f5e',
+        'primary-7': '#464f5e',
+        'primary-light-8': '#272e3b',
+        'primary-8': '#272e3b',
+        'primary-light-9': '#1d2129',
+        'primary-9': '#111318',
+        'primary-light-10': '#0c0e10',
+        'primary-10': '#0b0b0b',
+      });
     }
-    config.theme.dark = !!state.dark;
-    config.theme.base.primary = !state.primaryKey ? undefined : ThemePrimaryColors[state.primaryKey]?.primary;
+
+
     if (!config.default) {
       config.default = {};
     }
-    if (!!state.size) {
-      config.default.size = state.size;
+    if (!!size) {
+      config.default.size = size;
     }
-    if (!!state.shape) {
-      config.default.shape = state.shape;
+    if (!!shape) {
+      config.default.shape = shape;
       if (!config.theme.vars) {
         config.theme.vars = {};
       }
-      if (state.shape === 'square') {
+      if (shape === 'square') {
         Object.assign(config.theme.vars, {
           'box-size-mini-border-radius': '2px',
           'box-size-small-border-radius': '2px',
@@ -51,7 +87,7 @@ export const PageThemeUtils = (() => {
           'box-size-large-border-radius': '4px',
         });
       }
-      if (state.shape === 'none') {
+      if (shape === 'none') {
         Object.assign(config.theme.vars, {
           'box-size-mini-border-radius': '0',
           'box-size-small-border-radius': '0',
@@ -60,8 +96,8 @@ export const PageThemeUtils = (() => {
         });
       }
     }
-    if (!!state.inputMode) {
-      config.default.inputMode = state.inputMode;
+    if (!!inputMode) {
+      config.default.inputMode = inputMode;
     }
     return config;
   });
@@ -122,4 +158,8 @@ export const ThemePrimaryColors: Record<string, { label: string, primary: string
   geek: { label: '极客蓝', primary: '#2f54eb', },
   purple: { label: '酱紫', primary: '#722ed1', },
   magenta: { label: '洋红', primary: '#eb2f96', },
+  light: { label: '极昼', primary: '#ffffff', },
+  dark: { label: '黑夜', primary: '#000000', },
 };
+
+export default PageThemeUtils;

package/src/packages/components/Pagination/pagination.scss

@@ -47,7 +47,7 @@
     &:active, &.pagination-pager-button-active {
       background-color: plv(primary-6);
       border-color: plv(primary-6);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -118,7 +118,7 @@
       &.pagination-pager-button-active {
         background-color: plv(gray-light-6);
         border-color: plv(gray-light-6);
-        color: white;
+        color: plv(pbfc);
       }
     }
   }