@maxax/ui 1.1.53 → 1.1.54

package/dist/theme-chalk/components/common.scss

@@ -0,0 +1,63 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@-webkit-keyframes imax-animation-spin {
+  0% {
+    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
+    transform: rotate(0) translateZ(0);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
+    transform: rotate(360deg) translateZ(0);
+  }
+}
+
+@keyframes imax-animation-spin {
+  0% {
+    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
+    transform: rotate(0) translateZ(0);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
+    transform: rotate(360deg) translateZ(0);
+  }
+}
+
+@-webkit-keyframes imax-animation-svg-circle-spin {
+  0% {
+    stroke-dasharray: 1 130;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90 130;
+    stroke-dashoffset: -30;
+  }
+
+  to {
+    stroke-dasharray: 90 130;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes imax-animation-svg-circle-spin {
+  0% {
+    stroke-dasharray: 1 130;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90 130;
+    stroke-dashoffset: -30;
+  }
+
+  to {
+    stroke-dasharray: 90 130;
+    stroke-dashoffset: -124;
+  }
+}

package/dist/theme-chalk/components/components.scss

@@ -0,0 +1,56 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/transition' as *;
+@use 'common' as *;
+@use 'appCommon' as *;
+@use 'basicArrow' as *;
+@use 'basicSvgIcon' as *;
+@use 'basicTag' as *;
+@use 'basicText' as *;
+@use 'basicHelp' as *;
+@use 'basicTitle' as *;
+@use 'basicGradientTitle' as *;
+@use 'basicDrawer' as *;
+@use 'basicModal' as *;
+@use 'basicPage' as *;
+@use 'basicRadioGroup' as *;
+@use 'basicRadio' as *;
+@use 'basicCheckboxGroup' as *;
+@use 'basicCheckbox' as *;
+@use 'basicForm' as *;
+@use 'basicTable' as *;
+@use 'basicViewBar' as *;
+@use 'basicButtonGroup' as *;
+@use 'basicOverlay' as *;
+@use 'basicMessageBox' as *;
+@use 'basicNotification' as *;
+@use 'basicUpload' as *;
+@use 'basicUploadDragger' as *;
+@use 'basicUploadList' as *;
+@use 'basicUploadListItem' as *;
+@use 'basicPanel' as *;
+@use 'basicSubPanel' as *;
+@use 'basicCol' as *;
+@use 'basicRow' as *;
+@use 'basicScrollText' as *;
+@use 'tree' as *;
+@use 'treeNode' as *;
+@use 'treeSearch' as *;
+@use 'treeDrop' as *;
+@use 'basicLoading' as *;
+@use 'basicDragVerify' as *;
+@use 'basicSelect' as *;
+@use 'basicEditBatch' as *;
+@use 'basicIconPicker' as *;
+@use 'basicListPage' as *;
+@use 'basicDrawerFooter' as *;
+@use 'basicActionFooter' as *;
+@use 'basicMasterTrigger' as *;
+@use 'basicPanelPage' as *;
+@use 'basicRegion' as *;
+@use 'basicRegionSelect' as *;
+@use 'basicJsonViewer' as *;
+@use 'basicButtonImportMax' as *;
+@use 'basicButtonExportMax' as *;
+@use 'basicTree' as *;

package/dist/theme-chalk/components/tree.scss

@@ -0,0 +1,115 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('tree') {
+  --tree-name: 'tree';
+
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  &__scroll-area {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+    display: flex;
+  }
+
+  &__block-area {
+    flex: 1;
+  }
+
+  &__empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &__empty-text_default {
+    width: 100%;
+    text-align: center;
+  }
+
+  &__loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: getCssVar('fill-color', 'base');
+    opacity: 0.38;
+  }
+
+  &__loading-wrapper {
+    width: 100%;
+    text-align: center;
+  }
+
+  &__loading-icon {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    animation: imax-animation-spin 2s linear infinite;
+  }
+
+  &__loading-icon .imax-loading-icon__circle {
+    stroke: rgb(var(--primary-color, 100, 108, 255));
+    stroke-linecap: round;
+    animation: imax-animation-svg-circle-spin 1.5s ease-in-out infinite;
+  }
+
+  &__iframe {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    border: none;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1000;
+    pointer-events: none;
+  }
+
+  &-transition-wrapper {
+    display: grid;
+  }
+
+  &-transition-wrapper-inner {
+    overflow: hidden;
+  }
+
+  .imax-expand-animation-enter-from,
+  .imax-expand-animation-leave-to {
+    opacity: 0;
+    grid-template-rows: 0fr;
+  }
+
+  .imax-expand-animation-enter-to,
+  .imax-expand-animation-leave-from {
+    opacity: 1;
+    grid-template-rows: 1fr;
+  }
+
+  .imax-expand-animation-enter-active,
+  .imax-expand-animation-leave-active {
+    transition:
+      opacity 0.2s,
+      grid-template-rows 0.2s;
+  }
+}

package/dist/theme-chalk/components/treeDrop.scss

@@ -0,0 +1,138 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('tree-drop') {
+  --tree-drop-name: 'tree-drop';
+
+  &__wrapper {
+    position: relative;
+  }
+
+  &__reference {
+    cursor: pointer;
+  }
+
+  &__display-input {
+    position: relative;
+    user-select: none;
+    padding-right: 20px;
+  }
+
+  &__display-input-text {
+    display: block;
+    height: 100%;
+    line-height: 22px;
+  }
+
+  &__display-input-placeholder {
+    color: getCssVar('text-color', 'base');
+  }
+
+  &__display-input_focus {
+    border-color: rgb(var(--primary-color, 100, 108, 255));
+    box-shadow: 0 0 0 2px rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__display-icon-drop {
+    position: absolute;
+    top: 8px;
+    right: 3px;
+    width: 14px;
+    height: 14px;
+    box-sizing: border-box;
+    border: 3px solid getCssVar('text-color', 'base');
+    border-top: none;
+    border-left: none;
+    transform: rotate(45deg) scale(0.5) translate(-3.5px) translateY(-3.5px);
+    transition: -webkit-transform 0.2s ease-in-out;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  &__display-icon-drop_active {
+    transform: rotate(225deg) scale(0.5) translate(-3.5px) translateY(-3.5px);
+  }
+
+  &__display-icon-clear {
+    position: absolute;
+    top: 8px;
+    right: 3px;
+    width: 14px;
+    height: 14px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background-color: getCssVar('fill-color', 'base');
+    overflow: hidden;
+    -webkit-transform: scale(0.9) rotate(45deg);
+    transform: scale(0.9) rotate(45deg);
+    display: none;
+  }
+
+  &__display-icon-clear:before {
+    content: '';
+    width: 1px;
+    height: 7px;
+    display: block;
+    background-color: getCssVar('fill-color', 'base');
+    position: absolute;
+    top: 3.5px;
+    left: 6.5px;
+  }
+
+  &__display-icon-clear:after {
+    content: '';
+    width: 1px;
+    height: 7px;
+    display: block;
+    background-color: getCssVar('fill-color', 'base');
+    position: absolute;
+    top: 3.5px;
+    left: 6.5px;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+
+  @media (any-hover: hover) {
+    &__display-input:hover &__display-icon-clear {
+      display: block;
+    }
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: -999px;
+    left: -999px;
+    box-shadow: 0 1px 6px #0003;
+    border-radius: 4px;
+    margin: 5px 0;
+    padding: 5px 0;
+    transform-origin: center top 0px;
+    background-color: getCssVar('fill-color', 'base');
+    z-index: 9999;
+  }
+
+  &__dropdown .#{namespace}-tree-search__search {
+    border-bottom: 1px solid getCssVar('border-color', 'base');
+    padding-bottom: 5px;
+    height: 38px;
+  }
+
+  &__dropdown .#{namespace}-tree-search__tree-wrapper {
+    padding-top: 5px;
+  }
+
+  .imax-dropdown-enter-from,
+  .imax-dropdown-leave-to {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+    transform: scaleY(0.8);
+  }
+
+  .imax-dropdown-enter-active,
+  .imax-dropdown-leave-active {
+    transition:
+      opacity 0.3s,
+      transform 0.3s;
+  }
+}

package/dist/theme-chalk/components/treeNode.scss

@@ -0,0 +1,209 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('tree-node') {
+  --tree-node-name: 'tree-node';
+
+  &__indent-wrapper {
+    display: flex;
+  }
+
+  &__wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__drop {
+    width: 100%;
+    height: 2px;
+  }
+
+  &__drop_active {
+    background-color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__node-body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &__square {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &__expand i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    transition: -webkit-transform 0.2s linear;
+    transition: transform 0.2s linear;
+    transition:
+      transform 0.2s linear,
+      -webkit-transform 0.2s linear;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__expand_active .left-arrow {
+    transform: rotate(90deg);
+  }
+
+  &__expand_active .right-arrow {
+    transform: rotate(180deg);
+  }
+
+  &__loading-icon {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    animation: imax-animation-spin 2s linear infinite;
+  }
+
+  &__loading-icon .imax-loading-icon__circle {
+    stroke: #515a6e;
+    stroke-linecap: round;
+    animation: imax-animation-svg-circle-spin 1.5s ease-in-out infinite;
+  }
+
+  &__checkbox {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    border: 1px solid;
+    border-color: getCssVar('border-color', 'base');
+    border-radius: 2px;
+    background-color: getCssVar('fill-color', 'base');
+    transition:
+      border-color 0.2s ease-in-out,
+      background-color 0.2s ease-in-out,
+      box-shadow 0.2s ease-in-out;
+  }
+
+  &__checkbox:after {
+    content: '';
+    display: table;
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px solid getCssVar('fill-color', 'base');
+    border-top: 0;
+    border-left: 0;
+    width: 4px;
+    height: 8px;
+    top: 1px;
+    left: 4px;
+    -webkit-transform: rotate(45deg) scale(0);
+    transform: rotate(45deg) scale(0);
+    -webkit-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+  }
+
+  &__checkbox:hover {
+    border-color: rgb(var(--primary-color, 100, 108, 255) / 0.2);
+  }
+
+  &__checkbox:focus {
+    box-shadow: 0 0 0 2px rgb(var(--primary-color, 100, 108, 255) / 0.2);
+  }
+
+  &__checkbox_checked {
+    border-color: rgb(var(--primary-color, 100, 108, 255));
+    background-color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__checkbox_checked:after {
+    width: 4px;
+    height: 8px;
+    top: 1px;
+    left: 4px;
+    transform: rotate(45deg) scale(1);
+  }
+
+  &__checkbox_checked:hover {
+    border-color: rgb(var(--primary-color, 100, 108, 255));
+    background-color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__checkbox_indeterminate {
+    border-color: rgb(var(--primary-color, 100, 108, 255));
+    background-color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__checkbox_indeterminate:after {
+    width: 8px;
+    height: 1px;
+    top: 5px;
+    left: 2px;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  &__checkbox_indeterminate:hover {
+    border-color: rgb(var(--primary-color, 100, 108, 255) / 0.2);
+    background-color: rgb(var(--primary-color, 100, 108, 255) / 0.2);
+  }
+
+  &__checkbox_disabled {
+    cursor: not-allowed;
+    border-color: getCssVar('border-color', 'base');
+    background-color: getCssVar('fill-color', 'base');
+  }
+
+  &__checkbox_disabled:hover {
+    border-color: getCssVar('border-color', 'base');
+    background-color: getCssVar('fill-color', 'base');
+  }
+
+  &__checkbox_disabled:after {
+    border-color: getCssVar('border-color', 'base');
+  }
+
+  &__title {
+    cursor: pointer;
+    user-select: none;
+    flex: 1;
+    height: 30px;
+    line-height: 30px;
+    background-color: transparent;
+    word-break: keep-all;
+    white-space: nowrap;
+    word-wrap: none;
+    width: calc(100% - 20px);
+  }
+
+  &__title:hover {
+    background-color: rgb(var(--primary-100-color, 100, 108, 255) / 0.4);
+  }
+
+  &__title_selected {
+    background-color: rgb(var(--primary-100-color, 100, 108, 255) / 0.4);
+  }
+
+  &__title_selected:hover {
+    background-color: rgb(var(--primary-100-color, 100, 108, 255) / 0.2);
+  }
+
+  &__title_disabled {
+    cursor: not-allowed;
+    color: getCssVar('text-color', 'base');
+  }
+}

package/dist/theme-chalk/components/treeSearch.scss

@@ -0,0 +1,128 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('tree-search') {
+  --tree-search-name: 'tree-search';
+
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+
+  &__search {
+    margin-bottom: 6px;
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  &__check-all-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+  }
+
+  &__check-all {
+    margin-left: 23px;
+    margin-right: 5px;
+  }
+
+  &__input-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+  }
+
+  &__input {
+    color: getCssVar('text-color', 'base');
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
+    border: 1px solid getCssVar('border-color', 'base');
+    border-radius: 4px;
+    padding: 4px 7px;
+    outline: none;
+    transition:
+      border 0.2s ease-in-out,
+      box-shadow 0.2s ease-in-out;
+  }
+
+  &__input::-webkit-input-placeholder {
+    color: getCssVar('text-color', 'base');
+  }
+
+  &__input::-moz-placeholder {
+    color: getCssVar('text-color', 'base');
+  }
+
+  &__input:-ms-input-placeholder {
+    color: getCssVar('text-color', 'base');
+  }
+
+  &__input::-ms-input-placeholder {
+    color: getCssVar('text-color', 'base');
+  }
+
+  &__input::placeholder {
+    color: getCssVar('text-color', 'base');
+  }
+
+  &__input:hover {
+    border-color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__input:focus {
+    border-color: rgb(var(--primary-color, 100, 108, 255));
+    box-shadow: 0 0 0 2px rgb(var(--primary-color, 100, 108, 255) / 0.2);
+  }
+
+  &__input_disabled {
+    cursor: not-allowed;
+    color: getCssVar('text-color', 'base');
+    background-color: getCssVar('fill-color', 'base');
+  }
+
+  &__input_disabled:hover {
+    border-color: getCssVar('border-color', 'base');
+  }
+
+  &__action-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__checked-button {
+    cursor: pointer;
+    margin: 0 10px;
+  }
+
+  &__checked-button:hover {
+    color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__checked-button_active {
+    color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  &__tree-wrapper {
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__footer {
+    padding: 5px;
+  }
+}

package/dist/theme-chalk/index.scss

@@ -0,0 +1,2 @@
+@use './theme/light.scss' as *;
+@use './theme/dark.scss' as *;