@aplus-frontend/ui 0.3.12 → 0.4.0

package/theme/ap-upload/picture.less

@@ -0,0 +1,132 @@
+@import '../mixins/mixins.less';
+
+.b(ap-upload-picture, {
+  .picture-context {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, 100px);
+    user-select: none;
+
+    .picture-upload {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100px;
+      overflow: hidden;
+      transition: all 0.2s;
+      border: 1px dashed #dee4ed;
+      border-radius: 4px;
+      background: #f2f6f9;
+      color: #abb7cc;
+      font-size: 16px;
+      cursor: pointer;
+      aspect-ratio: 1 / 1;
+
+      &>*+* {
+        margin-top: 8px;
+        font-size: 14px;
+      }
+
+      &:hover {
+        border: 1px dashed #0070ff;
+      }
+    }
+
+    .picture-item {
+      width: 100px;
+      padding: 8px;
+      overflow: hidden;
+      border: 1px solid #dee4ed;
+      border-radius: 4px;
+      background: #fff;
+      aspect-ratio: 1 / 1;
+
+      .picture-item-box {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: 2px;
+
+        &>img {
+          width: 100%;
+          height: 100%;
+          border-radius: 2px;
+          object-fit: cover;
+        }
+
+        &:hover>.picture-item-shadow {
+          display: block !important;
+        }
+
+        .picture-item-shadow {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 2px;
+          background: rgb(0 0 0 / 50%);
+          color: #fff;
+          font-size: 14px;
+
+          .picture-item-close {
+            display: flex;
+            position: absolute;
+            top: 0;
+            right: 0;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            overflow: hidden;
+            transform: translate(30%, -30%);
+            border: 1px solid #fff;
+            border-radius: 50%;
+            background: #ff4d4f;
+            color: #fff;
+            font-size: 10px;
+            cursor: pointer;
+            aspect-ratio: 1 / 1;
+          }
+
+          .picture-item-uploading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 84%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
+  .picture-title {
+    margin-top: 8px;
+    color: #8896b0;
+    font-size: 14px;
+  }
+});
+
+.b(ap-upload-picture-admin, {
+  .picture-context {
+    .picture-upload {
+      border: 1px dashed #d9d9d9;
+      background: #fafafa;
+      color: #bfbfbf;
+
+      &:hover {
+        border: 1px dashed #34b77c;
+      }
+    }
+
+    .picture-item {
+      border: 1px solid #d9d9d9;
+    }
+  }
+  
+  .picture-title {
+    color: #999;
+  }
+});

package/theme/ap-upload/single-file.css

@@ -0,0 +1,98 @@
+.aplus-ap-upload-single-file {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  transition: all 0.3s;
+  border: 1px dashed #dee4ed;
+  border-radius: 4px;
+  background: #f2f6f9;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.aplus-ap-upload-single-file > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aplus-ap-upload-single-file .state-un {
+  flex-direction: column;
+}
+.aplus-ap-upload-single-file .state-un .state-un-icon {
+  display: block;
+  width: 56px;
+}
+.aplus-ap-upload-single-file .state-un .state-un-title {
+  margin-top: 10px;
+  color: #182948;
+  font-size: 16px;
+  line-height: 22px;
+}
+.aplus-ap-upload-single-file .state-un .state-un-subtitle {
+  margin-top: 4px;
+  color: #abb7cc;
+  font-size: 12px;
+  line-height: 18px;
+}
+.aplus-ap-upload-single-file .state-ing {
+  display: flex;
+  align-items: center;
+  width: min(516px, 77.24%);
+  height: 96px;
+  padding: 0 24px;
+  border-radius: 4px;
+  background: #fff;
+}
+.aplus-ap-upload-single-file .state-ing .left {
+  flex-shrink: 0;
+  width: 48px;
+  margin-right: 16px;
+}
+.aplus-ap-upload-single-file .state-ing .left img {
+  display: block;
+  width: 100%;
+}
+.aplus-ap-upload-single-file .state-ing .center {
+  flex: 1;
+}
+.aplus-ap-upload-single-file .state-ing .center .center-title {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: start;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.aplus-ap-upload-single-file .state-ing .center .center-progress .ant-progress-line {
+  margin-right: 0;
+  margin-bottom: 0;
+}
+.aplus-ap-upload-single-file .state-ing .right {
+  flex-shrink: 0;
+  margin-left: 24px;
+  color: #ff4d4f;
+  font-size: 20px;
+  cursor: pointer !important;
+}
+.aplus-ap-upload-single-file-un {
+  cursor: pointer;
+}
+.aplus-ap-upload-single-file-un:hover {
+  border: 1px dashed #0070ff;
+  background: rgba(0, 112, 255, 0.1);
+}
+.aplus-ap-upload-single-file-admin {
+  border: 1px dashed #D9D9D9;
+}
+.aplus-ap-upload-single-file-admin .state-un .state-un-title {
+  color: #333;
+}
+.aplus-ap-upload-single-file-admin .state-un .state-un-subtitle {
+  color: #BFBFBF;
+}

package/theme/ap-upload/single-file.less

@@ -0,0 +1,119 @@
+@import '../mixins/mixins.less';
+
+.b(ap-upload-single-file, {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  transition: all 0.3s;
+  border: 1px dashed #dee4ed;
+  border-radius: 4px;
+  background: #f2f6f9;
+  user-select: none;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .state-un {
+    flex-direction: column;
+
+    .state-un-icon {
+      display: block;
+      width: 56px;
+    }
+
+    .state-un-title {
+      margin-top: 10px;
+      color: #182948;
+      font-size: 16px;
+      line-height: 22px;
+    }
+
+    .state-un-subtitle {
+      margin-top: 4px;
+      color: #abb7cc;
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+
+  .state-ing {
+    display: flex;
+    align-items: center;
+    width: min(516px, 77.24%);
+    height: 96px;
+    padding: 0 24px;
+    border-radius: 4px;
+    background: #fff;
+
+    .left {
+      flex-shrink: 0;
+      width: 48px;
+      margin-right: 16px;
+
+      img {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    .center {
+      flex: 1;
+
+      .center-title {
+        display: -webkit-box;
+        overflow: hidden;
+        font-size: 14px;
+        text-align: start;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        word-break: break-all;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      .center-progress {
+        .ant-progress-line {
+          margin-right: 0;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .right {
+      flex-shrink: 0;
+      margin-left: 24px;
+      color: #ff4d4f;
+      font-size: 20px;
+      cursor: pointer !important;
+    }
+  }
+});
+
+.b(ap-upload-single-file-un, {
+  cursor: pointer;
+
+  &:hover {
+    border: 1px dashed #0070ff;
+    background: rgb(0 112 255 / 10%);
+  }
+});
+
+.b(ap-upload-single-file-admin, {
+  border: 1px dashed #D9D9D9;
+
+  .state-un {
+    .state-un-title {
+      color: #333;
+    }
+
+    .state-un-subtitle {
+      color: #BFBFBF;
+    }
+  }
+});

package/theme/ap-upload/upload.css

@@ -0,0 +1,6 @@
+.aplus-ap-upload {
+  position: relative;
+}
+.aplus-ap-upload .ant-btn {
+  min-width: 0;
+}

package/theme/ap-upload/upload.less

@@ -0,0 +1,8 @@
+@import '../mixins/mixins.less';
+
+.b(ap-upload, {
+  position: relative;
+  .ant-btn{
+    min-width: 0;
+  }
+});

package/theme/ap-upload-single/index.css

@@ -0,0 +1,101 @@
+.aplus-ap-upload-single {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.aplus-ap-upload-single .ant-upload-drag {
+  background: #F2F6F9;
+  border: 1px dashed var(--ap-upload-single-color-border, #DEE4ED);
+  height: 200px;
+}
+.aplus-ap-upload-single .ant-upload-drag:not(.ant-upload-disabled):hover {
+  background: rgba(0, 112, 255, 0.1);
+  border-color: #0070ff;
+}
+.aplus-ap-upload-single .ant-upload-drag .ant-upload-btn {
+  padding: 0;
+}
+.aplus-ap-upload-single .ant-upload-drag .ant-upload-disabled {
+  cursor: default;
+}
+.aplus-ap-upload-single-affix-wrapper-status-error .ant-upload-drag:not(.ant-upload-disabled) {
+  border-color: #FF4D4F;
+}
+.aplus-ap-upload-single-affix-wrapper-status-error .ant-upload-drag:not(.ant-upload-disabled):hover {
+  border-color: #FF4D4F80;
+}
+.aplus-ap-upload-single__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.aplus-ap-upload-single__content-file {
+  width: min(516px, 77.24%);
+  height: 96px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+}
+.aplus-ap-upload-single__content-file-icon {
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+.aplus-ap-upload-single__content-file-icon svg {
+  width: 48px;
+}
+.aplus-ap-upload-single__content-file-name {
+  flex: 1;
+  text-align: start;
+}
+.aplus-ap-upload-single__content-file-name > .ant-typography {
+  color: var(--name-color);
+  margin-bottom: 0;
+  word-break: break-all;
+}
+.aplus-ap-upload-single__content-file-delete {
+  flex-shrink: 0;
+  margin-left: 24px;
+}
+.aplus-ap-upload-single__content-file-delete svg {
+  width: 20px;
+  color: #ff4d4f;
+  font-size: 20px;
+  cursor: pointer;
+}
+.aplus-ap-upload-single__content-ing-name {
+  --name-color: var(--ap-upload-single-color-main, #182948);
+}
+.aplus-ap-upload-single__content-ing-name .ant-progress-line {
+  margin-inline-end: 0;
+  margin-bottom: 0;
+}
+.aplus-ap-upload-single__content-error-name {
+  --name-color: #FF4D4F;
+}
+.aplus-ap-upload-single__content-done-name {
+  --name-color: #0070ff;
+}
+.aplus-ap-upload-single__content-empty {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.aplus-ap-upload-single__content-empty-icon svg {
+  width: 56px;
+}
+.aplus-ap-upload-single__content-empty-title {
+  margin-top: 10px;
+  color: var(--ap-upload-single-color-main, #182948);
+  font-size: 16px;
+  line-height: 22px;
+}
+.aplus-ap-upload-single__content-empty-sub-title {
+  margin-top: 4px;
+  color: var(--ap-upload-single-color-sub, #abb7cc);
+  font-size: 12px;
+  line-height: 18px;
+}

package/theme/ap-upload-single/index.less

@@ -0,0 +1,133 @@
+@import '../mixins/mixins.less';
+
+.b(ap-upload-single, {
+    user-select: none;
+    
+    .ant-upload-drag {
+      background: #F2F6F9;
+      border: 1px dashed var(--ap-upload-single-color-border,#DEE4ED);
+      height:200px;
+    
+      &:not(.ant-upload-disabled):hover {
+        background: rgba(0, 112, 255, 0.1);
+        border-color: #0070ff;
+      }
+
+      .ant-upload-btn {
+        padding: 0;
+      }
+
+      .ant-upload-disabled {
+        cursor: default;
+      }
+    }
+
+    &-affix-wrapper-status-error {
+      .ant-upload-drag:not(.ant-upload-disabled) {
+        border-color: #FF4D4F;
+        &:hover {
+          border-color: #FF4D4F80;
+        }
+      }
+    }
+
+    &__content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height:100%;
+    }
+
+    &__content-file {
+      width: min(516px, 77.24%);
+      height: 96px;
+      background: #FFFFFF;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 0 24px;
+
+      &-icon {
+        flex-shrink: 0;
+        margin-right: 16px;
+
+        svg {
+          width: 48px;
+        }
+      }
+
+      &-name {
+        flex: 1;
+        text-align: start;
+
+        &>.ant-typography {
+          color: var(--name-color);
+          margin-bottom: 0;
+          word-break: break-all;
+        }
+      }
+
+      &-delete {
+        flex-shrink: 0;
+        margin-left: 24px;
+
+        svg {
+          width: 20px;
+          color: #ff4d4f;
+          font-size: 20px;
+          cursor: pointer;
+        }
+      }
+    }
+
+    &__content-ing {
+      &-name {
+        --name-color: var(--ap-upload-single-color-main,#182948);
+        .ant-progress-line{
+          margin-inline-end: 0;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &__content-error {
+      &-name {
+        --name-color: #FF4D4F;
+      }
+    }
+
+    &__content-done {
+      &-name {
+        --name-color: #0070ff;
+      }
+    }
+    
+    &__content-empty {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &-icon {
+        svg {
+          width: 56px;
+        }
+      }
+
+      &-title {
+        margin-top: 10px;
+        color: var(--ap-upload-single-color-main,#182948);
+        font-size: 16px;
+        line-height: 22px;
+      }
+
+      &-sub-title {
+        margin-top: 4px;
+        color: var(--ap-upload-single-color-sub,#abb7cc);
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+
+);

package/theme/batch-input-group/index.css

@@ -0,0 +1,59 @@
+.aplus-field-checkbox--vertical {
+  display: inline-block;
+}
+.aplus-field-checkbox--vertical label.ant-checkbox-wrapper:not(:last-child) {
+  display: flex;
+  margin-block-end: 16px;
+}
+.aplus-field-number-label-left {
+  padding-right: 4px;
+}
+.aplus-field-number-label-right {
+  padding-left: 4px;
+}
+.aplus-field-radio--vertical label.ant-radio-wrapper:not(:last-child) {
+  display: flex;
+  margin-block-end: 16px;
+}
+.aplus-field-text-area {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+.aplus-batch-input-group-popover-input {
+  display: inline-flex;
+  align-items: center;
+}
+.aplus-batch-input-group-popover-input-trigger-icon {
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--batch-input-group-trigger-color, #526a90);
+  line-height: 0;
+}
+.aplus-batch-input-group-popover-input-trigger-icon:hover {
+  color: var(--basic-color-primary, #0070ff);
+}
+.aplus-batch-input-group-popover-input-trigger-icon--disabled {
+  cursor: not-allowed;
+  color: var(--batch-input-group-trigger-color-disabled, rgba(24, 41, 72, 0.25));
+}
+.aplus-batch-input-group-popover-input-trigger-icon--disabled:hover {
+  color: var(--batch-input-group-trigger-color-disabled, rgba(24, 41, 72, 0.25));
+}
+.aplus-batch-input-group-popover-input__popover {
+  width: 100%;
+  left: 0 !important;
+  min-width: 300px;
+}
+.aplus-batch-input-group-popover-input__popover .ant-popover-arrow {
+  display: none;
+}
+.aplus-batch-input-group-popover-input__popover .ant-popover-inner {
+  padding: 0;
+}
+.aplus-batch-input-group-popover-input__popover--content {
+  padding: 12px;
+}
+.aplus-batch-input-group-popover-input__popover--content textarea {
+  padding: 0;
+}

package/theme/batch-input-group/index.less

@@ -0,0 +1,6 @@
+@import '../mixins/mixins.less';
+@import '../ap-field/index.less';
+@import './popover-input.less';
+
+.b(batch-input-group, {
+});

package/theme/batch-input-group/popover-input.css

@@ -0,0 +1,37 @@
+.aplus-batch-input-group-popover-input {
+  display: inline-flex;
+  align-items: center;
+}
+.aplus-batch-input-group-popover-input-trigger-icon {
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--batch-input-group-trigger-color, #526a90);
+  line-height: 0;
+}
+.aplus-batch-input-group-popover-input-trigger-icon:hover {
+  color: var(--basic-color-primary, #0070ff);
+}
+.aplus-batch-input-group-popover-input-trigger-icon--disabled {
+  cursor: not-allowed;
+  color: var(--batch-input-group-trigger-color-disabled, rgba(24, 41, 72, 0.25));
+}
+.aplus-batch-input-group-popover-input-trigger-icon--disabled:hover {
+  color: var(--batch-input-group-trigger-color-disabled, rgba(24, 41, 72, 0.25));
+}
+.aplus-batch-input-group-popover-input__popover {
+  width: 100%;
+  left: 0 !important;
+  min-width: 300px;
+}
+.aplus-batch-input-group-popover-input__popover .ant-popover-arrow {
+  display: none;
+}
+.aplus-batch-input-group-popover-input__popover .ant-popover-inner {
+  padding: 0;
+}
+.aplus-batch-input-group-popover-input__popover--content {
+  padding: 12px;
+}
+.aplus-batch-input-group-popover-input__popover--content textarea {
+  padding: 0;
+}