@thienvu18/designable-react-settings-form 2.0.0

package/esm/styles.less

@@ -0,0 +1,121 @@
+@ant-prefix: ant;
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate__slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+.animate__slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+.animate__animated {
+  animation-delay: 0ms;
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+}
+
+.animate__fadeInUp {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+.dn-settings-form-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+
+  .dn-node-path {
+    flex-grow: 0;
+  }
+
+  .dn-settings-form-content {
+    flex-grow: 1;
+    overflow: overlay;
+  }
+
+  .@{ant-prefix}-formily-item {
+    border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+    margin-top: 8px;
+
+    * {
+      font-size: 13px;
+    }
+
+    .@{ant-prefix}-formily-item-control-content-component {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &>.@{ant-prefix}-radio-group {
+        display: flex !important;
+        width: 100%;
+
+        .@{ant-prefix}-radio-button-wrapper {
+          display: flex;
+          justify-content: center;
+          padding: 0 6px !important;
+          align-items: center;
+          flex-grow: 2;
+        }
+      }
+
+      &>.@{ant-prefix}-slider {
+        flex-shrink: 0;
+        min-width: 0;
+        width: 100%;
+      }
+
+      &>.@{ant-prefix}-select {
+        max-width: 140px;
+      }
+    }
+  }
+}
+
+.dn-settings-form {
+  padding: 0 20px;
+
+  &-empty {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    color: #888;
+  }
+}

package/esm/types.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Form } from '@formily/core';
+export interface ISettingFormProps {
+    className?: string;
+    style?: React.CSSProperties;
+    uploadAction?: string;
+    components?: Record<string, React.FC<any>>;
+    effects?: (form: Form) => void;
+    scope?: any;
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};