@vue-ui-kit/ant 2.5.0 → 2.5.2

package/dist/style.scss

@@ -1,461 +1,464 @@
-.p-pane {
-  background-color: var(--p-theme-bg, #fff);
-  padding: 16px;
-  border-radius: 4px;
-}
-.text-slate-5 {
-  color: #64748b;
-}
-/* #region patch for env without unocss/tailwind/windicss */
-.w-full {
-  width: 100%;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.py-4x {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.px-2x {
-  padding-left: 2px;
-  padding-right: 2px;
-}
-.pl-4x {
-  padding-left: 1em;
-}
-.pl-8 {
-  padding-left: 2em;
-}
-
-.h-0 {
-  height: 0;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.gap-4px {
-  gap: 4px;
-}
-
-.gap-8px {
-  gap: 8px;
-}
-
-.gap-12px {
-  gap: 12px;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-.min-w-0 {
-  min-width: 0;
-}
-
-.min-h-0 {
-  min-height: 0;
-}
-
-.pt-8px {
-  padding-top: 8px;
-}
-
-.px-16px {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.mt-4px {
-  margin-top: 4px;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-/* #endregion */
-
-/* #region P family styles */
-.p-theme-bg {
-  background-color: var(--p-theme-bg, #fff);
-}
-
-.p-wrapper {
-  .p-form-wrapper {
-    z-index: 4;
-  }
-  .p-canvas-pagination.ant-pagination {
-    padding: 16px 0;
-  }
-  .p-error-hang-out {
-    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
-        .ant-input-affix-wrapper-borderless
-      ).ant-input-affix-wrapper {
-      border-color: var(--p-border-color, #d9d9d9) !important;
-
-      &:focus {
-        border-color: var(--p-primary-color, #4096ff) !important;
-      }
-    }
-    .ant-form-item-explain-error {
-      opacity: 0 !important;
-      transform: translateY(-10px) !important;
-      max-height: 0 !important;
-      overflow: hidden !important;
-      transition: none !important;
-    }
-  }
-  .ant-form-item-explain-error {
-    opacity: 0;
-    transform: translateY(-10px);
-    max-height: 0;
-    overflow: hidden;
-    transition:
-      opacity 0.3s ease-out 0.3s,
-      transform 0.3s ease-out 0.3s,
-      max-height 0.3s ease-out 0.3s;
-  }
-  .ant-form-item-has-error .ant-form-item-explain-error {
-    opacity: 1;
-    transform: translateY(0);
-    max-height: 100px;
-  }
-  .p-toolbar-wrapper {
-    box-shadow: 0 8px var(--p-bg-color, #fff);
-    border-radius: 0.5em 0.5em 0 0;
-    margin-bottom: -0.5em;
-  }
-  .p-canvas-toolbar-wrapper {
-    box-shadow: 0 8px var(--p-bg-color, #fff);
-    border-radius: 0.5em 0.5em 0 0;
-  }
-
-  .ant-form {
-    .ant-form-item {
-      margin-bottom: 0;
-
-      &.p-required {
-        .ant-form-item-label > label:before {
-          display: inline-block;
-          margin-inline-end: 4px;
-          color: var(--p-danger-color, #ff4d4f);
-          font-size: 14px;
-          font-family: SimSun, sans-serif;
-          line-height: 1;
-          content: '*';
-        }
-      }
-
-      .ant-form-item-label {
-        display: flex;
-        align-items: start;
-        justify-content: flex-end;
-
-        & > label {
-          white-space: break-spaces;
-          align-items: flex-start;
-          height: fit-content;
-          padding-top: 0.36em;
-
-          &:after {
-            padding-left: 4px;
-            margin-inline-start: unset;
-          }
-        }
-      }
-    }
-
-    &.ant-form-vertical {
-      .ant-form-item {
-        .ant-form-item-label {
-          justify-content: flex-start;
-          font-weight: 600;
-        }
-      }
-    }
-  }
-  .ant-table-wrapper .ant-table {
-    background-color: var(--p-table-row-bg-color, #fff);
-    td.ant-table-cell {
-      background-color: var(--p-table-row-bg-color, #fff);
-    }
-  }
-  .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
-    background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
-  }
-  .ant-table-wrapper .ant-table-pagination.ant-pagination {
-    margin: unset;
-    padding: 16px 0;
-  }
-  .ant-table-wrapper tr.p-grid-row-striped {
-    background-color: var(--p-striped-bg-color, #f2f3f6);
-    > td.ant-table-cell {
-      background-color: var(--p-striped-bg-color, #e6e7ea);
-      &.ant-table-cell-row-hover {
-        background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
-      }
-    }
-  }
-  .ant-table-wrapper .ant-table-thead > tr > th {
-    background-color: var(--p-table-thead-bg-color, #f2f3f6);
-  }
-  .ant-table-sticky-scroll {
-    visibility: hidden;
-  }
-
-  .ant-table-header.ant-table-sticky-holder {
-    //overflow: unset !important;
-
-    &:before {
-      content: '';
-      width: 100%;
-      position: absolute;
-      height: 22px;
-      display: block;
-      backdrop-filter: blur(2px);
-      top: -16px;
-    }
-  }
-  .ant-table-wrapper .ant-pagination {
-    gap: 8px;
-
-    .ant-pagination-prev,
-    .ant-pagination-next {
-      border: 1px solid var(--p-pagination-border-color, #bbbdbf);
-    }
-    .ant-pagination-total-text {
-      margin-inline-end: 0;
-      padding-inline-end: 8px;
-    }
-    .ant-pagination-item {
-      border: 1px solid var(--p-pagination-border-color, transparent);
-      &:not(.ant-pagination-item-active) {
-        background-color: var(--p-pagination-bg-color, #fff);
-        & > a {
-          color: var(--p-pagination-color, #323335);
-        }
-        &:hover {
-          background-color: var(--p-pagination-hover-bg-color, #0000000f);
-          & > a {
-            color: var(--p-pagination-active-color, #000000e0);
-          }
-        }
-      }
-      &.ant-pagination-item-active {
-        background-color: var(--p-pagination-active-bg-color, #fff);
-        border-color: var(--p-pagination-active-border-color, var(--p-primary-color, #4096ff));
-        & > a {
-          color: var(--p-pagination-active-color, var(--p-primary-color, #4096ff));
-        }
-      }
-    }
-  }
-
-  .h-lack {
-    .ant-table-wrapper .ant-table-pagination.ant-pagination {
-      padding: unset;
-      margin-top: 8px;
-    }
-  }
-  .p-inner-scroll {
-    & > .ant-table-wrapper,
-    & > .p-grid-table-body > .ant-table-wrapper {
-      height: 100%;
-
-      & > .ant-spin-nested-loading {
-        height: 100%;
-
-        & > .ant-spin-container {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-
-          & > .ant-table {
-            flex: 1;
-            height: 0;
-            overflow-y: hidden;
-            /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
-            border-radius: unset;
-
-            & > .ant-table-container > .ant-table-body {
-              position: relative;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .ant-pagination-options {
-    .ant-select {
-      width: 100px;
-    }
-  }
-  .ant-table-cell:not(.normal-break) {
-    word-break: break-all;
-  }
-}
-.p-error-group-tab {
-  position: relative;
-  overflow: visible;
-  color: var(--p-danger-color, #f5222d) !important;
-  &:after {
-    content: '🏷️';
-    position: absolute;
-    top: -1em;
-    right: 0;
-    width: 1em;
-    height: 1em;
-    font-size: 0.8em;
-    animation: heartbeat 2s infinite;
-  }
-}
-.ant-picker-dropdown {
-  .ant-picker-footer {
-    padding-left: 4px;
-  }
-}
-.p-error-hang-out {
-  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
-      .ant-input-affix-wrapper-borderless
-    ).ant-input-affix-wrapper {
-    border-color: var(--p-border-color, #d9d9d9) !important;
-
-    &:focus {
-      border-color: var(--p-primary-color, #4096ff) !important;
-    }
-  }
-  .ant-form-item-explain-error {
-    display: none;
-  }
-}
-
-.no-error-border {
-  border-color: var(--p-border-color, #d9d9d9) !important;
-
-  &:focus {
-    border-color: var(--p-primary-color, #4096ff) !important;
-  }
-}
-@media (max-width: 575px) {
-  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
-    justify-content: flex-start;
-  }
-}
-
-.collapsible-card {
-  background-color: var(--p-bg-color, #fff);
-  border-color: var(--p-border-light-color, #f0f0f0);
-  .ant-collapse-header {
-    padding: 0 12px;
-    min-height: 38px;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-  }
-  .ant-collapse-content {
-    border-color: var(--p-border-light-color, #f0f0f0);
-    .ant-collapse-content-box {
-      padding: var(--collapsible-card-body-padding, 12px);
-    }
-  }
-  .ant-collapse-item {
-    border-color: var(--p-border-light-color, #f0f0f0);
-  }
-}
-/* #endregion */
-
-/* #region EVirtTable */
-.canvas-cell {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  padding: 0 8px;
-}
-/* #endregion */
-
-@each $align in right center {
-  /**/
-  .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
-    display: flex;
-    @if $align == right {
-      justify-content: flex-end;
-    } @else {
-      justify-content: center;
-    }
-    align-items: center;
-    text-align: #{$align};
-  }
-}
-
-@keyframes heartbeat {
-  0% {
-    transform: scale(1);
-  }
-  6% {
-    transform: scale(1.22);
-  }
-  12% {
-    transform: scale(1);
-  }
-  18% {
-    transform: scale(1.18);
-  }
-  24% {
-    transform: scale(1);
-  }
-  48% {
-    transform: scale(1);
-  } // 长停顿
-  54% {
-    transform: scale(1.22);
-  }
-  60% {
-    transform: scale(1);
-  }
-  66% {
-    transform: scale(1.18);
-  }
-  72% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(1);
-  } // 长停顿
-}
+.p-pane {
+  background-color: var(--p-theme-bg, #fff);
+  padding: 16px;
+  border-radius: 4px;
+}
+.text-slate-5 {
+  color: #64748b;
+}
+/* #region patch for env without unocss/tailwind/windicss */
+.w-full {
+  width: 100%;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.py-4x {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.px-2x {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.pl-4x {
+  padding-left: 1em;
+}
+.pl-8 {
+  padding-left: 2em;
+}
+
+.h-0 {
+  height: 0;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-4px {
+  gap: 4px;
+}
+
+.gap-8px {
+  gap: 8px;
+}
+
+.gap-12px {
+  gap: 12px;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.min-w-0 {
+  min-width: 0;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.pt-8px {
+  padding-top: 8px;
+}
+
+.px-16px {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.mt-4px {
+  margin-top: 4px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+/* #endregion */
+
+/* #region P family styles */
+.p-theme-bg {
+  background-color: var(--p-theme-bg, #fff);
+}
+
+.p-wrapper {
+  .p-form-wrapper {
+    z-index: 4;
+  }
+  .p-canvas-pagination.ant-pagination {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 16px 0;
+  }
+  .p-error-hang-out {
+    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
+        .ant-input-affix-wrapper-borderless
+      ).ant-input-affix-wrapper {
+      border-color: var(--p-border-color, #d9d9d9) !important;
+
+      &:focus {
+        border-color: var(--p-primary-color, #4096ff) !important;
+      }
+    }
+    .ant-form-item-explain-error {
+      opacity: 0 !important;
+      transform: translateY(-10px) !important;
+      max-height: 0 !important;
+      overflow: hidden !important;
+      transition: none !important;
+    }
+  }
+  .ant-form-item-explain-error {
+    opacity: 0;
+    transform: translateY(-10px);
+    max-height: 0;
+    overflow: hidden;
+    transition:
+      opacity 0.3s ease-out 0.3s,
+      transform 0.3s ease-out 0.3s,
+      max-height 0.3s ease-out 0.3s;
+  }
+  .ant-form-item-has-error .ant-form-item-explain-error {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 100px;
+  }
+  .p-toolbar-wrapper {
+    box-shadow: 0 8px var(--p-bg-color, #fff);
+    border-radius: 0.5em 0.5em 0 0;
+    margin-bottom: -0.5em;
+  }
+  .p-canvas-toolbar-wrapper {
+    box-shadow: 0 8px var(--p-theme-bg, #fff);
+    border-radius: 0.5em 0.5em 0 0;
+  }
+
+  .ant-form {
+    .ant-form-item {
+      margin-bottom: 0;
+
+      &.p-required {
+        .ant-form-item-label > label:before {
+          display: inline-block;
+          margin-inline-end: 4px;
+          color: var(--p-danger-color, #ff4d4f);
+          font-size: 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+          content: '*';
+        }
+      }
+
+      .ant-form-item-label {
+        display: flex;
+        align-items: start;
+        justify-content: flex-end;
+
+        & > label {
+          white-space: break-spaces;
+          align-items: flex-start;
+          height: fit-content;
+          padding-top: 0.36em;
+
+          &:after {
+            padding-left: 4px;
+            margin-inline-start: unset;
+          }
+        }
+      }
+    }
+
+    &.ant-form-vertical {
+      .ant-form-item {
+        .ant-form-item-label {
+          justify-content: flex-start;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+  .ant-table-wrapper .ant-table {
+    background-color: var(--p-table-row-bg-color, #fff);
+    td.ant-table-cell {
+      background-color: var(--p-table-row-bg-color, #fff);
+    }
+  }
+  .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  }
+  .ant-table-wrapper .ant-table-pagination.ant-pagination {
+    margin: unset;
+    padding: 16px 0;
+  }
+  .ant-table-wrapper tr.p-grid-row-striped {
+    background-color: var(--p-striped-bg-color, #f2f3f6);
+    > td.ant-table-cell {
+      background-color: var(--p-striped-bg-color, #e6e7ea);
+      &.ant-table-cell-row-hover {
+        background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+      }
+    }
+  }
+  .ant-table-wrapper .ant-table-thead > tr > th {
+    background-color: var(--p-table-thead-bg-color, #f2f3f6);
+  }
+  .ant-table-sticky-scroll {
+    visibility: hidden;
+  }
+
+  .ant-table-header.ant-table-sticky-holder {
+    //overflow: unset !important;
+
+    &:before {
+      content: '';
+      width: 100%;
+      position: absolute;
+      height: 22px;
+      display: block;
+      backdrop-filter: blur(2px);
+      top: -16px;
+    }
+  }
+  .ant-table-wrapper .ant-pagination {
+    gap: 8px;
+
+    .ant-pagination-prev,
+    .ant-pagination-next {
+      border: 1px solid var(--p-pagination-border-color, #bbbdbf);
+    }
+    .ant-pagination-total-text {
+      margin-inline-end: 0;
+      padding-inline-end: 8px;
+    }
+    .ant-pagination-item {
+      border: 1px solid var(--p-pagination-border-color, transparent);
+      &:not(.ant-pagination-item-active) {
+        background-color: var(--p-pagination-bg-color, #fff);
+        & > a {
+          color: var(--p-pagination-color, #323335);
+        }
+        &:hover {
+          background-color: var(--p-pagination-hover-bg-color, #0000000f);
+          & > a {
+            color: var(--p-pagination-active-color, #000000e0);
+          }
+        }
+      }
+      &.ant-pagination-item-active {
+        background-color: var(--p-pagination-active-bg-color, #fff);
+        border-color: var(--p-pagination-active-border-color, var(--p-primary-color, #4096ff));
+        & > a {
+          color: var(--p-pagination-active-color, var(--p-primary-color, #4096ff));
+        }
+      }
+    }
+  }
+
+  .h-lack {
+    .ant-table-wrapper .ant-table-pagination.ant-pagination {
+      padding: unset;
+      margin-top: 8px;
+    }
+  }
+  .p-inner-scroll {
+    & > .ant-table-wrapper,
+    & > .p-grid-table-body > .ant-table-wrapper {
+      height: 100%;
+
+      & > .ant-spin-nested-loading {
+        height: 100%;
+
+        & > .ant-spin-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+
+          & > .ant-table {
+            flex: 1;
+            height: 0;
+            overflow-y: hidden;
+            /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
+            border-radius: unset;
+
+            & > .ant-table-container > .ant-table-body {
+              position: relative;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-pagination-options {
+    .ant-select {
+      width: 100px;
+    }
+  }
+  .ant-table-cell:not(.normal-break) {
+    word-break: break-all;
+  }
+}
+.p-error-group-tab {
+  position: relative;
+  overflow: visible;
+  color: var(--p-danger-color, #f5222d) !important;
+  &:after {
+    content: '🏷️';
+    position: absolute;
+    top: -1em;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    font-size: 0.8em;
+    animation: heartbeat 2s infinite;
+  }
+}
+.ant-picker-dropdown {
+  .ant-picker-footer {
+    padding-left: 4px;
+  }
+}
+.p-error-hang-out {
+  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
+      .ant-input-affix-wrapper-borderless
+    ).ant-input-affix-wrapper {
+    border-color: var(--p-border-color, #d9d9d9) !important;
+
+    &:focus {
+      border-color: var(--p-primary-color, #4096ff) !important;
+    }
+  }
+  .ant-form-item-explain-error {
+    display: none;
+  }
+}
+
+.no-error-border {
+  border-color: var(--p-border-color, #d9d9d9) !important;
+
+  &:focus {
+    border-color: var(--p-primary-color, #4096ff) !important;
+  }
+}
+@media (max-width: 575px) {
+  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
+    justify-content: flex-start;
+  }
+}
+
+.collapsible-card {
+  background-color: var(--p-bg-color, #fff);
+  border-color: var(--p-border-light-color, #f0f0f0);
+  .ant-collapse-header {
+    padding: 0 12px;
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+  .ant-collapse-content {
+    border-color: var(--p-border-light-color, #f0f0f0);
+    .ant-collapse-content-box {
+      padding: var(--collapsible-card-body-padding, 12px);
+    }
+  }
+  .ant-collapse-item {
+    border-color: var(--p-border-light-color, #f0f0f0);
+  }
+}
+/* #endregion */
+
+/* #region EVirtTable */
+.canvas-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  padding: 0 8px;
+}
+/* #endregion */
+
+@each $align in right center {
+  /**/
+  .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
+    display: flex;
+    @if $align == right {
+      justify-content: flex-end;
+    } @else {
+      justify-content: center;
+    }
+    align-items: center;
+    text-align: #{$align};
+  }
+}
+
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  6% {
+    transform: scale(1.22);
+  }
+  12% {
+    transform: scale(1);
+  }
+  18% {
+    transform: scale(1.18);
+  }
+  24% {
+    transform: scale(1);
+  }
+  48% {
+    transform: scale(1);
+  } // 长停顿
+  54% {
+    transform: scale(1.22);
+  }
+  60% {
+    transform: scale(1);
+  }
+  66% {
+    transform: scale(1.18);
+  }
+  72% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  } // 长停顿
+}