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

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

@@ -1,227 +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);
-      }
-    }
-  }
-}
+$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

@@ -1,3 +1,3 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-
-export const eLayoutSectionPosition = createEnum(['top', 'left', 'right', 'bottom', 'center'] as const);
+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

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