plain-design 1.0.0-beta.88 → 1.0.0-beta.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.88",
+  "version": "1.0.0-beta.89",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Corner/corner.scss

@@ -0,0 +1,14 @@
+@include comp(corner) {
+  path {
+    fill: currentColor;
+  }
+  @include sizeMixin(corner, ()) {
+    height: $border-radius;
+    width: $border-radius;
+  }
+  @include statusMixin(corner) {
+    path {
+      fill: $color-6;
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+import {designComponent, getComponentCls, PropType, useClassCache, useStyleCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {unit} from "plain-utils/string/unit";
+import './corner.scss';
+import {createEnum} from "plain-utils/utils/createEnum";
+
+const eCornerType = createEnum([
+  'bottom-left',
+  'bottom-right',
+  'top-left',
+  'top-right',
+
+  'left-top',
+  'left-bottom',
+  'right-top',
+  'right-bottom',
+] as const);
+
+export const Corner = designComponent({
+  name: 'corner',
+  props: {
+    ...StyleProps,
+    customSize: { type: String },
+    type: { type: String as PropType<typeof eCornerType.TYPE>, required: true },
+    color: { type: String },
+  },
+  setup({ props }) {
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('corner'),
+      {
+        [`corner-status-${props.status}`]: !!props.status,
+        [`corner-size-${styleComputed.value.size}`]: !props.customSize,
+      },
+    ]);
+
+    const styles = useStyleCache((style) => {
+      if (!!props.customSize) {
+        style.height = unit(props.customSize);
+        style.width = unit(props.customSize);
+      }
+      if (!!props.color) {
+        style.color = props.color;
+      }
+    });
+
+    return () => {
+      return (
+        <svg viewBox="0 0 100 100" className={classes.value} style={styles.value}>
+          <path d={pathDValues[type2key[props.type]]}></path>
+        </svg>
+      );
+    };
+  },
+});
+
+const pathDValues = {
+  1: 'M 100 0 L 100 100 L 0 100 A 100 100 0 0 0 100 0 Z',
+  2: 'M 0 0 L 0 100 L 100 100 A 100 100 0 0 1 0 0 Z',
+  3: 'M 0 0 L 100 0 L 100 100 A 100 100 0 0 0 0 0',
+  4: 'M 100 0 L 0 0 L 0 100 A 100 100 0 0 1 100 0',
+};
+
+const type2key: Record<typeof eCornerType.TYPE, keyof typeof pathDValues> = {
+  [eCornerType["bottom-left"]]: 1 as const,
+  [eCornerType["right-top"]]: 1 as const,
+
+  [eCornerType["bottom-right"]]: 2 as const,
+  [eCornerType["left-top"]]: 2 as const,
+
+  [eCornerType["top-left"]]: 3 as const,
+  [eCornerType["right-bottom"]]: 3 as const,
+
+  [eCornerType["top-right"]]: 4 as const,
+  [eCornerType["left-bottom"]]: 4 as const,
+};
+
+export default Corner;

package/src/packages/entry.tsx

@@ -125,6 +125,7 @@ export {RollingNumber} from './components/RollingNumber';
 export {Paragraph} from './components/Paragraph';
 export {ParagraphItem} from './components/ParagraphItem';
 export {ImagePreviewer} from './components/ImagePreviewer/ImagePreviewer';
+export {Corner} from './components/Corner';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -277,7 +278,7 @@ export type{iRequestInterceptor} from './components/createRequestInterceptor';
 export {createVirtualDraggier} from './components/createVirtualDraggier';
 export {createWebDraggier} from './components/createWebDraggier';
 export {createScrollDraggier} from './components/createScrollDraggier';
-export {loadFile} from './components/loadFile'
+export {loadFile} from './components/loadFile';
 
 // @ts-ignore
 setComponentPrefix(globalComponentPrefix);