@hsu-react/ui 0.0.1 → 0.0.2

package/lib/components/Select/index.module.less

@@ -30,11 +30,11 @@
     .antdSelect {
       cursor: not-allowed;
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         color: var(--cf-text-3);
       }
 
-      .ant-select-arrow {
+      :global(.ant-select-arrow) {
         cursor: not-allowed;
       }
     }
@@ -77,7 +77,7 @@
     margin-inline-start: 4px;
   }
 
-  &:has(> .ant-select-status-error) {
+  &:has(> :global(.ant-select-status-error)) {
     border: 1px solid #ff4d4f;
 
     .prefix,
@@ -113,20 +113,20 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> .ant-select-arrow),
-    &:has(> .ant-select-clear) {
-      .ant-select-selector {
+    &:has(> :global(.ant-select-arrow)),
+    &:has(> :global(.ant-select-clear)) {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
     &.legacyHasArrowOrClear {
-      .ant-select-selector {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
-    .ant-select-selector {
+    :global(.ant-select-selector) {
       width: 100%;
       height: 100%;
       padding: 0;
@@ -145,7 +145,7 @@
         content: none;
       }
 
-      .ant-select-selection-wrap {
+      :global(.ant-select-selection-wrap) {
         height: 100%;
 
         font-family: inherit;
@@ -154,7 +154,7 @@
         color: inherit;
       }
 
-      .ant-select-selection-search {
+      :global(.ant-select-selection-search) {
         inset-inline-start: 0px;
         inset-inline-end: 0px;
 
@@ -173,7 +173,7 @@
         }
       }
 
-      .ant-select-selection-placeholder {
+      :global(.ant-select-selection-placeholder) {
         display: inline-flex;
         align-items: center;
 
@@ -185,7 +185,7 @@
         font-weight: inherit;
       }
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         padding-inline-end: 0px;
 
         font-family: inherit;
@@ -194,8 +194,8 @@
         color: inherit;
       }
 
-      .ant-select-selection-overflow-item {
-        .ant-select-selection-item {
+      :global(.ant-select-selection-overflow-item) {
+        :global(.ant-select-selection-item) {
           line-height: normal;
 
           padding-inline-end: 4px;
@@ -203,34 +203,34 @@
       }
     }
 
-    &.ant-select-focused {
-      .ant-select-selector {
+    &:global(.ant-select-focused) {
+      :global(.ant-select-selector) {
         border: none !important;
 
         box-shadow: none !important;
       }
     }
 
-    &.ant-select-open {
-      .ant-select-arrow {
+    &:global(.ant-select-open) {
+      :global(.ant-select-arrow) {
         transform: rotate(-180deg) translateY(50%);
       }
 
       &.noArrowAnimation {
-        .ant-select-arrow {
+        :global(.ant-select-arrow) {
           transform: translateY(-50%);
           transition: none !important;
         }
       }
     }
 
-    &.ant-select-status-error {
-      .ant-select-selector {
+    &:global(.ant-select-status-error) {
+      :global(.ant-select-selector) {
         border: none !important;
       }
     }
 
-    .ant-select-arrow {
+    :global(.ant-select-arrow) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
@@ -244,7 +244,7 @@
       pointer-events: all;
     }
 
-    .ant-select-clear {
+    :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
@@ -256,17 +256,17 @@
       inset-inline-end: 0px;
     }
 
-    &.ant-select-multiple {
-      > .ant-select-selector {
-        > .ant-select-selection-overflow {
-          .ant-select-selection-search {
+    &:global(.ant-select-multiple) {
+      > :global(.ant-select-selector) {
+        > :global(.ant-select-selection-overflow) {
+          :global(.ant-select-selection-search) {
             width: 0px !important;
 
             margin-inline-start: 0px;
           }
         }
 
-        > .ant-select-selection-placeholder {
+        > :global(.ant-select-selection-placeholder) {
           inset-inline-start: 0px;
         }
       }
@@ -274,14 +274,14 @@
   }
 
   &.popupMatchContentWidth {
-    .ant-select-dropdown {
+    :global(.ant-select-dropdown) {
       [class="rc-virtual-list-holder-inner"] {
         position: relative !important;
       }
     }
   }
 
-  .ant-select-dropdown {
+  :global(.ant-select-dropdown) {
     position: fixed;
 
     font-family: inherit;
@@ -291,7 +291,7 @@
 
     border-radius: inherit;
 
-    .ant-select-item {
+    :global(.ant-select-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -300,9 +300,9 @@
       border-radius: inherit;
     }
 
-    .ant-select-item-empty,
-    .ant-empty,
-    .ant-empty-description {
+    :global(.ant-select-item-empty),
+    :global(.ant-empty),
+    :global(.ant-empty-description) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;

package/lib/components/Slider/index.module.less

@@ -6,14 +6,14 @@
   overflow-x: hidden;
   overflow-y: visible;
 
-  .ant-slider-step,
-  .ant-slider-track,
-  .ant-slider-rail {
+  :global(.ant-slider-step),
+  :global(.ant-slider-track),
+  :global(.ant-slider-rail) {
     top: 0px;
     height: 100% !important;
   }
 
-  .ant-slider-handle {
+  :global(.ant-slider-handle) {
     position: relative;
     top: 50%;
     transform: translate(calc(-50% - 4px), calc(-50% + 1px)) !important;

package/lib/components/Spreadsheet/index.module.less

@@ -4,8 +4,8 @@
 
   overflow: hidden;
 
-  .x-spreadsheet-toolbar,
-  .x-spreadsheet-bottombar {
+  :global(.x-spreadsheet-toolbar),
+  :global(.x-spreadsheet-bottombar) {
     width: 100% !important;
   }
 
@@ -13,14 +13,14 @@
     background-size: auto;
   }
 
-  .x-spreadsheet-menu {
+  :global(.x-spreadsheet-menu) {
     > li:first-child {
       display: none;
     }
   }
 
   &.showBottomTool {
-    .x-spreadsheet-menu {
+    :global(.x-spreadsheet-menu) {
       > li:first-child {
         display: list-item;
       }

package/lib/components/Table/_components/Pagination/index.module.less

@@ -4,11 +4,11 @@
   justify-content: flex-end;
   column-gap: 8px;
 
-  &.ant-pagination-start {
+  &:global(.ant-pagination-start) {
     justify-content: flex-start;
   }
 
-  &.ant-pagination-center {
+  &:global(.ant-pagination-center) {
     justify-content: center;
   }
 
@@ -25,10 +25,10 @@
       width: 100%;
       height: 100%;
 
-      .ant-pagination-item-container {
+      :global(.ant-pagination-item-container) {
         width: 100%;
 
-        .ant-pagination-item-ellipsis {
+        :global(.ant-pagination-item-ellipsis) {
           width: 100%;
         }
       }
@@ -40,17 +40,17 @@
       justify-content: center;
     }
 
-    &.ant-pagination-options {
-      .ant-pagination-options-size-changer,
-      .ant-pagination-options-quick-jumper {
+    &:global(.ant-pagination-options) {
+      :global(.ant-pagination-options-size-changer),
+      :global(.ant-pagination-options-quick-jumper) {
         height: 100% !important;
       }
 
-      .ant-pagination-options-size-changer {
-        .ant-select-selector {
+      :global(.ant-pagination-options-size-changer) {
+        :global(.ant-select-selector) {
           height: 100% !important;
 
-          .ant-select-selection-item {
+          :global(.ant-select-selection-item) {
             display: flex;
             align-items: center;
 
@@ -58,14 +58,14 @@
           }
         }
 
-        .ant-select-arrow {
+        :global(.ant-select-arrow) {
           margin-top: 0px;
 
           transform: translateY(-50%);
         }
       }
 
-      .ant-pagination-options-quick-jumper {
+      :global(.ant-pagination-options-quick-jumper) {
         display: inline-flex;
         align-items: center;
 
@@ -78,18 +78,18 @@
 
   &.bordered {
     > li {
-      &:not(.ant-pagination-options):not(.ant-pagination-total-text) {
+      &:not(:global(.ant-pagination-options)):not(:global(.ant-pagination-total-text)) {
         border: 1px solid var(--cf-border);
         border-radius: 4px;
       }
 
-      &.ant-pagination-item {
+      &:global(.ant-pagination-item) {
         margin: 0px 4px 0px 0px;
 
-        &:not(.ant-pagination-item-active):not(
-            .ant-pagination-item-disabled
+        &:not(:global(.ant-pagination-item-active)):not(
+            :global(.ant-pagination-item-disabled)
           ):hover,
-        &.ant-pagination-item-active {
+        &:global(.ant-pagination-item-active) {
           background-color: var(--primary-color, #1890ff);
           border-color: var(--primary-color, #1890ff);
 
@@ -98,11 +98,11 @@
           }
         }
 
-        &:not(.ant-pagination-item-active):not(.ant-pagination-item-disabled) {
+        &:not(:global(.ant-pagination-item-active)):not(:global(.ant-pagination-item-disabled)) {
           border-color: var(--cf-border);
         }
 
-        &:not(.ant-pagination-item-active).ant-pagination-item-disabled {
+        &:not(:global(.ant-pagination-item-active)):global(.ant-pagination-item-disabled) {
           cursor: not-allowed;
 
           &:hover {
@@ -117,16 +117,16 @@
         }
       }
 
-      &.ant-pagination-prev {
+      &:global(.ant-pagination-prev) {
         margin-right: 4px;
       }
 
-      &.ant-pagination-options {
+      &:global(.ant-pagination-options) {
         margin-left: 4px;
       }
 
-      &.ant-pagination-jump-next,
-      &.ant-pagination-jump-prev {
+      &:global(.ant-pagination-jump-next),
+      &:global(.ant-pagination-jump-prev) {
         margin-right: 4px;
       }
     }

package/lib/components/Table/index.module.less

@@ -15,16 +15,16 @@
     cursor: pointer;
   }
 
-  .ant-table-container {
+  :global(.ant-table-container) {
     border-left: none !important;
   }
 
-  .ant-table-thead {
+  :global(.ant-table-thead) {
     tr {
-      .ant-table-cell {
+      :global(.ant-table-cell) {
         padding: var(--th-padding);
 
-        &.ant-table-column-has-sorters {
+        &:global(.ant-table-column-has-sorters) {
           background: var(--cf-subtle);
 
           &:hover {
@@ -35,22 +35,22 @@
     }
   }
 
-  .ant-table-tbody {
-    .ant-table-placeholder {
+  :global(.ant-table-tbody) {
+    :global(.ant-table-placeholder) {
       height: 100%;
     }
 
-    .ant-table-expanded-row {
-      .ant-table-cell {
+    :global(.ant-table-expanded-row) {
+      :global(.ant-table-cell) {
         padding: var(--expanded-cell-padding);
       }
     }
 
-    .ant-table-row {
-      .ant-table-cell {
+    :global(.ant-table-row) {
+      :global(.ant-table-cell) {
         padding: var(--td-padding);
 
-        &:not(.ant-table-cell-ellipsis):not(.noWarp) {
+        &:not(:global(.ant-table-cell-ellipsis)):not(.noWarp) {
           white-space: pre-wrap;
           word-break: break-all;
         }
@@ -59,21 +59,21 @@
           white-space: nowrap;
         }
 
-        &.ant-table-column-sort {
+        &:global(.ant-table-column-sort) {
           background: transparent;
 
-          &.ant-table-cell-row-hover {
+          &:global(.ant-table-cell-row-hover) {
             background: var(--cf-subtle);
           }
         }
       }
 
-      &.ant-table-row-selected {
-        .ant-table-cell {
-          &.ant-table-column-sort {
+      &:global(.ant-table-row-selected) {
+        :global(.ant-table-cell) {
+          &:global(.ant-table-column-sort) {
             background: rgba(19, 194, 194, 0.12);
 
-            &.ant-table-cell-row-hover {
+            &:global(.ant-table-cell-row-hover) {
               background: rgba(19, 194, 194, 0.22);
             }
           }
@@ -82,15 +82,15 @@
     }
   }
 
-  .ant-table-summary {
+  :global(.ant-table-summary) {
     > tr {
-      .ant-table-cell {
+      :global(.ant-table-cell) {
         padding: var(--td-padding);
 
-        &.ant-table-column-sort {
+        &:global(.ant-table-column-sort) {
           background: transparent;
 
-          &.ant-table-cell-row-hover {
+          &:global(.ant-table-cell-row-hover) {
             background: var(--cf-subtle);
           }
         }
@@ -98,11 +98,11 @@
     }
   }
 
-  .ant-table-tbody-virtual-scrollbar {
+  :global(.ant-table-tbody-virtual-scrollbar) {
     display: none;
   }
 
-  .ant-table-cell {
+  :global(.ant-table-cell) {
     &.hidden {
       width: 0px !important;
       overflow: hidden !important;
@@ -115,7 +115,7 @@
       }
     }
 
-    .ant-table-row-expand-icon {
+    :global(.ant-table-row-expand-icon) {
       &::before {
         top: calc(50% - 0.5px);
       }
@@ -128,9 +128,9 @@
       content: none !important;
     }
 
-    .ant-checkbox {
-      &.ant-checkbox-checked {
-        .ant-checkbox-inner {
+    :global(.ant-checkbox) {
+      &:global(.ant-checkbox-checked) {
+        :global(.ant-checkbox-inner) {
           &::after {
             top: 45%;
             inset-inline-start: 25%;
@@ -147,10 +147,10 @@
   .antdTable {
     border-color: var(--cf-border-weak);
 
-    *:not(.ant-table-cell *) {
+    *:not(:global(.ant-table-cell) *) {
       border-color: inherit !important;
 
-      .ant-table-cell::after {
+      :global(.ant-table-cell)::after {
         border-color: inherit !important;
       }
     }
@@ -164,15 +164,15 @@
     }
 
     &.hideEmpty {
-      .ant-table-placeholder {
+      :global(.ant-table-placeholder) {
         display: none !important;
       }
     }
 
     &:not(.scroll) {
-      .ant-table-bordered {
-        .ant-table-container {
-          .ant-table-content {
+      :global(.ant-table-bordered) {
+        :global(.ant-table-container) {
+          :global(.ant-table-content) {
             > table {
               border-left: 1px solid var(--cf-border-weak);
             }
@@ -181,12 +181,12 @@
       }
     }
 
-    .ant-table {
+    :global(.ant-table) {
       line-height: normal;
     }
 
     &.isExpandedCellTable {
-      .ant-table-tbody {
+      :global(.ant-table-tbody) {
         tr {
           &:last-child {
             td {
@@ -196,9 +196,9 @@
         }
       }
 
-      .ant-table-bordered {
-        .ant-table-container {
-          > .ant-table-content {
+      :global(.ant-table-bordered) {
+        :global(.ant-table-container) {
+          > :global(.ant-table-content) {
             > table {
               border-radius: 0 !important;
               border-left: none !important;
@@ -212,7 +212,7 @@
                 }
               }
 
-              .ant-table-thead {
+              :global(.ant-table-thead) {
                 tr {
                   th {
                     &:first-child {
@@ -235,23 +235,23 @@
       width: 100%;
       min-height: 0px;
 
-      .ant-table-bordered {
-        .ant-table-container {
-          > .ant-table-header {
+      :global(.ant-table-bordered) {
+        :global(.ant-table-container) {
+          > :global(.ant-table-header) {
             > table {
               border-radius: 6px 6px 0 0;
               border-left: 1px solid var(--cf-border-weak);
             }
           }
 
-          > .ant-table-body {
+          > :global(.ant-table-body) {
             > table {
               border-radius: 0px !important;
               border-left: 1px solid var(--cf-border-weak);
             }
           }
 
-          > .ant-table-summary {
+          > :global(.ant-table-summary) {
             > table {
               border-radius: 0px !important;
               border-left: 1px solid var(--cf-border-weak);
@@ -262,23 +262,23 @@
       }
 
       &.isExpanded {
-        .ant-table-bordered {
-          .ant-table-container {
-            > .ant-table-header {
+        :global(.ant-table-bordered) {
+          :global(.ant-table-container) {
+            > :global(.ant-table-header) {
               > table {
                 border-radius: 0px !important;
                 border-left: none !important;
               }
             }
 
-            > .ant-table-body {
+            > :global(.ant-table-body) {
               > table {
                 border-radius: 0px !important;
                 border-left: none !important;
               }
             }
 
-            > .ant-table-summary {
+            > :global(.ant-table-summary) {
               > table {
                 border-radius: 0px !important;
                 border-left: none !important;
@@ -289,38 +289,38 @@
         }
       }
 
-      .ant-table-wrapper {
+      :global(.ant-table-wrapper) {
         width: 100%;
         height: 100%;
       }
 
-      .ant-spin-nested-loading {
+      :global(.ant-spin-nested-loading) {
         width: 100%;
         height: 100%;
 
-        .ant-spin-container {
+        :global(.ant-spin-container) {
           display: flex;
           flex-direction: column;
 
           width: 100%;
           height: 100%;
 
-          .ant-table {
+          :global(.ant-table) {
             width: 100%;
             height: 100%;
 
-            .ant-table-container {
+            :global(.ant-table-container) {
               display: flex;
               flex-direction: column;
 
               width: 100%;
               height: 100%;
 
-              > .ant-table-header {
+              > :global(.ant-table-header) {
                 min-height: max-content;
               }
 
-              > .ant-table-body {
+              > :global(.ant-table-body) {
                 position: relative;
 
                 flex: 1;
@@ -344,11 +344,11 @@
       }
 
       &.y-unScroll {
-        .ant-spin-nested-loading {
-          .ant-spin-container {
-            .ant-table {
-              .ant-table-container {
-                > .ant-table-body {
+        :global(.ant-spin-nested-loading) {
+          :global(.ant-spin-container) {
+            :global(.ant-table) {
+              :global(.ant-table-container) {
+                > :global(.ant-table-body) {
                   overflow-y: visible !important;
                 }
               }