plain-design 1.0.0-beta.23 → 1.0.0-beta.24

package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts

@@ -1,12 +1,12 @@
-import {iMouseEvent, RenderNode} from "plain-design-composition";
-
-export interface iTreeNodeWithMenuOption {
-  label?: string,
-  disabled?: boolean,
-  readonly?: boolean,
-  icon?: string,
-  val?: any,
-  onClick?: (e: iMouseEvent) => void
-  renderDefault?: () => RenderNode,
-  renderContent?: () => RenderNode,
-}
+import {iMouseEvent, RenderNode} from "plain-design-composition";
+
+export interface iTreeNodeWithMenuOption {
+  label?: string,
+  disabled?: boolean,
+  readonly?: boolean,
+  icon?: string,
+  val?: any,
+  onClick?: (e: iMouseEvent) => void
+  renderDefault?: () => RenderNode,
+  renderContent?: () => RenderNode,
+}

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

@@ -1,88 +1,88 @@
-import './triangle.scss';
-import {designComponent, getComponentCls, onMounted, PropType, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-
-const DirectionMap = {
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left',
-};
-
-function uppercaseFirstLetter(name: string): string {
-  if (!name) return name;
-  return name.charAt(0).toUpperCase() + name.slice(1);
-}
-
-export const Triangle = designComponent({
-  name: '-triangle',
-  props: {
-    direction: { type: String, default: 'top' },
-    half: { type: String },
-    size: { type: Number as PropType<number | null>, default: 20 },
-  },
-  inheritPropsType: HTMLDivElement,
-  setup({ props }) {
-    const { refs, onRef } = useRefs({
-      el: HTMLElement,
-    });
-
-    const size = useModel(() => props.size, () => {});
-
-    const classes = useClasses(() => [
-      getComponentCls('triangle'),
-      `triangle-direction-${props.direction}`,
-      {
-        [`triangle-half-${props.half}`]: !!props.half
-      }
-    ]);
-
-    const styles = useStyles(style => {
-      if (!props.half) {
-        return style;
-      }
-      if (props.direction === 'top' || props.direction === 'bottom') {
-        style.width = unit(size.value);
-      } else {
-        style.height = unit(size.value);
-      }
-      return style;
-    });
-
-    const targetStyles = useStyles((style: any) => {
-
-      style.border = `solid transparent ${unit(size.value)}`;
-      style[`border${uppercaseFirstLetter(props.direction)}Width`] = '0';
-      style[`border${uppercaseFirstLetter((DirectionMap as any)[props.direction])}Color`] = 'currentColor';
-
-      if (!!props.half) {
-        if (props.direction === 'top' || props.direction === 'bottom') {
-          props.half === 'end' && (style.right = unit(size.value));
-        } else {
-          props.half === 'end' && (style.bottom = unit(size.value));
-        }
-      }
-
-      return style;
-    });
-
-    if (size.value == null) {
-      onMounted(() => {
-        size.value = (refs.el!.parentNode as HTMLDivElement).offsetHeight / 2;
-      });
-    }
-
-    return {
-      refer: { refs },
-      render: () => (
-        size.value == null ? <span ref={onRef.el} style={{ display: 'none' }}/> : (
-          <div className={classes.value} style={styles.value} ref={onRef.el}>
-            <div className="triangle-target" style={targetStyles.value}/>
-          </div>
-        )
-      )
-    };
-  },
-});
-
-export default Triangle;
+import './triangle.scss';
+import {designComponent, getComponentCls, onMounted, PropType, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+
+const DirectionMap = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+};
+
+function uppercaseFirstLetter(name: string): string {
+  if (!name) return name;
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+export const Triangle = designComponent({
+  name: '-triangle',
+  props: {
+    direction: { type: String, default: 'top' },
+    half: { type: String },
+    size: { type: Number as PropType<number | null>, default: 20 },
+  },
+  inheritPropsType: HTMLDivElement,
+  setup({ props }) {
+    const { refs, onRef } = useRefs({
+      el: HTMLElement,
+    });
+
+    const size = useModel(() => props.size, () => {});
+
+    const classes = useClasses(() => [
+      getComponentCls('triangle'),
+      `triangle-direction-${props.direction}`,
+      {
+        [`triangle-half-${props.half}`]: !!props.half
+      }
+    ]);
+
+    const styles = useStyles(style => {
+      if (!props.half) {
+        return style;
+      }
+      if (props.direction === 'top' || props.direction === 'bottom') {
+        style.width = unit(size.value);
+      } else {
+        style.height = unit(size.value);
+      }
+      return style;
+    });
+
+    const targetStyles = useStyles((style: any) => {
+
+      style.border = `solid transparent ${unit(size.value)}`;
+      style[`border${uppercaseFirstLetter(props.direction)}Width`] = '0';
+      style[`border${uppercaseFirstLetter((DirectionMap as any)[props.direction])}Color`] = 'currentColor';
+
+      if (!!props.half) {
+        if (props.direction === 'top' || props.direction === 'bottom') {
+          props.half === 'end' && (style.right = unit(size.value));
+        } else {
+          props.half === 'end' && (style.bottom = unit(size.value));
+        }
+      }
+
+      return style;
+    });
+
+    if (size.value == null) {
+      onMounted(() => {
+        size.value = (refs.el!.parentNode as HTMLDivElement).offsetHeight / 2;
+      });
+    }
+
+    return {
+      refer: { refs },
+      render: () => (
+        size.value == null ? <span ref={onRef.el} style={{ display: 'none' }}/> : (
+          <div className={classes.value} style={styles.value} ref={onRef.el}>
+            <div className="triangle-target" style={targetStyles.value}/>
+          </div>
+        )
+      )
+    };
+  },
+});
+
+export default Triangle;

package/src/packages/components/Triangle/triangle.scss

@@ -1,12 +1,12 @@
-@include prefix(triangle) {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  .triangle-target {
-    width: 0;
-    height: 0;
-    position: relative;
-  }
-}
+@include prefix(triangle) {
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .triangle-target {
+    width: 0;
+    height: 0;
+    position: relative;
+  }
+}