@type-dom/ui 0.1.1 → 0.1.2

package/src/theme-chalk/icon.scss

@@ -0,0 +1,45 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+.#{$namespace}-icon-loading {
+  animation: rotating 2s linear infinite;
+}
+
+.#{$namespace}-icon--right {
+  margin-left: 5px;
+}
+.#{$namespace}-icon--left {
+  margin-right: 5px;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@include b(icon) {
+  --color: inherit;
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentColor;
+  color: var(--color);
+  font-size: inherit;
+
+  @include when(loading) {
+    animation: rotating 2s linear infinite;
+  }
+
+  svg {
+    height: 1em;
+    width: 1em;
+  }
+}

package/src/theme-chalk/image-viewer.scss

@@ -0,0 +1,155 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin op-icon() {
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: getCssVar('text-color', 'regular');
+  border-color: #fff;
+}
+
+@include b(image-viewer) {
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  @include e(btn) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: 0.8;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+
+    .#{$namespace}-icon {
+      cursor: pointer;
+    }
+  }
+
+  @include e(close) {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+  }
+
+  @include e(canvas) {
+    position: static;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+  }
+
+  @include e(actions) {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    height: 44px;
+    padding: 0 23px;
+    background-color: getCssVar('text-color', 'regular');
+    border-color: #fff;
+    border-radius: 22px;
+
+    @include e(actions__inner) {
+      width: 100%;
+      height: 100%;
+      cursor: default;
+      font-size: 23px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      gap: 22px;
+      padding: 0 6px;
+
+      @include e(actions__divider) {
+        margin: 0 -6px;
+      }
+    }
+  }
+
+  @include e(progress) {
+    left: 50%;
+    transform: translateX(-50%);
+    cursor: default;
+    color: #fff;
+    bottom: 90px;
+  }
+
+  @include e(prev) {
+    top: 50%;
+    transform: translateY(-50%);
+    left: 40px;
+    @include op-icon();
+  }
+
+  @include e(next) {
+    top: 50%;
+    transform: translateY(-50%);
+    right: 40px;
+    text-indent: 2px;
+    @include op-icon();
+  }
+
+  @include e(close) {
+    @include op-icon();
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+    background: #000;
+  }
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in getCssVar('transition-duration');
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out getCssVar('transition-duration');
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

package/src/theme-chalk/image.scss

@@ -0,0 +1,49 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+%size {
+  width: 100%;
+  height: 100%;
+}
+
+@include b(image) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  @include e(inner) {
+    @extend %size !optional;
+    vertical-align: top;
+    opacity: 1;
+    @include when(loading) {
+      opacity: 0;
+    }
+  }
+
+  @include e(wrapper) {
+    @extend %size !optional;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  @include e(placeholder) {
+    @extend %size !optional;
+    background: getCssVar('fill-color', 'light');
+  }
+
+  @include e(error) {
+    @extend %size !optional;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    background: getCssVar('fill-color', 'light');
+    color: getCssVar('text-color', 'placeholder');
+    vertical-align: middle;
+  }
+
+  @include e(preview) {
+    cursor: pointer;
+  }
+}

package/src/theme-chalk/index.scss

@@ -0,0 +1,111 @@
+@use 'base';
+// component styles
+@use 'affix';
+@use 'alert';
+@use 'aside';
+@use 'autocomplete';
+@use 'avatar';
+@use 'backtop';
+@use 'badge';
+@use 'breadcrumb-item';
+@use 'breadcrumb';
+@use 'button-group';
+@use 'button';
+@use 'calendar';
+@use 'card';
+@use 'carousel-item';
+@use 'carousel';
+@use 'cascader-panel';
+@use 'cascader';
+@use 'check-tag';
+@use 'checkbox-button';
+@use 'checkbox-group';
+@use 'checkbox';
+@use 'col';
+@use 'collapse-item';
+@use 'collapse';
+@use 'color-picker';
+@use 'config-provider';
+@use 'container';
+@use 'date-picker';
+@use 'descriptions';
+@use 'descriptions-item';
+@use 'dialog';
+@use 'divider';
+@use 'drawer';
+@use 'dropdown-item';
+@use 'dropdown-menu';
+@use 'dropdown';
+@use 'empty';
+@use 'footer';
+@use 'form-item';
+@use 'form';
+@use 'header';
+@use 'image-viewer';
+@use 'image';
+@use 'infinite-scroll';
+@use 'input';
+@use 'input-number';
+@use 'input-tag';
+@use 'link';
+@use 'loading';
+@use 'main';
+@use 'menu-item-group';
+@use 'menu-item';
+@use 'menu';
+@use 'message-box';
+@use 'message';
+@use 'notification';
+@use 'overlay';
+@use 'page-header';
+@use 'pagination';
+@use 'popconfirm';
+@use 'popover';
+@use 'progress';
+@use 'radio-button';
+@use 'radio-group';
+@use 'radio';
+@use 'rate';
+@use 'result';
+@use 'row';
+@use 'scrollbar';
+@use 'select-v2';
+@use 'select';
+@use 'skeleton-item';
+@use 'skeleton';
+@use 'slider';
+@use 'space';
+@use 'spinner';
+@use 'step';
+@use 'steps';
+@use 'sub-menu';
+@use 'switch';
+@use 'tab-pane';
+@use 'table-column';
+@use 'table';
+@use 'table-v2';
+@use 'tabs';
+@use 'tag';
+@use 'text';
+@use 'time-picker';
+@use 'time-select';
+@use 'timeline-item';
+@use 'timeline';
+@use 'tooltip';
+@use 'tooltip-v2';
+@use 'transfer';
+@use 'tree';
+@use 'tree-select';
+@use 'upload';
+@use 'virtual-list';
+@use 'popper';
+@use 'select-dropdown-v2';
+@use 'select-dropdown';
+@use 'option';
+@use 'option-group';
+@use 'statistic';
+@use 'tour';
+@use 'anchor';
+@use 'anchor-link';
+@use 'segmented';
+@use 'mention';

package/src/theme-chalk/input-number.scss

@@ -0,0 +1,186 @@
+@use 'sass:math';
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(input-number) {
+  position: relative;
+  display: inline-flex;
+  width: map.get($input-number-width, 'default');
+  line-height: #{map.get($input-height, 'default') - 2};
+  vertical-align: middle;
+
+  .#{$namespace}-input {
+    &__wrapper {
+      padding-left: #{map.get($input-height, 'default') + 10};
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
+
+    &__inner {
+      -webkit-appearance: none;
+      -moz-appearance: textfield;
+      text-align: center;
+      line-height: 1;
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
+      }
+    }
+  }
+
+  @include e((increase, decrease)) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+    bottom: 1px;
+
+    width: map.get($input-height, 'default');
+    background: getCssVar('fill-color', 'light');
+    color: getCssVar('text-color', 'regular');
+    cursor: pointer;
+    font-size: 13px;
+    user-select: none;
+
+    &:hover {
+      color: getCssVar('color-primary');
+
+      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
+        box-shadow: 0 0 0 1px
+          var(
+            #{getCssVarName('input', 'focus-border-color')},
+            map.get($input, 'focus-border-color')
+          )
+          inset;
+      }
+    }
+
+    &.is-disabled {
+      color: getCssVar('disabled-text-color');
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(increase) {
+    right: 1px;
+    border-radius: 0 getCssVar('border-radius-base')
+      getCssVar('border-radius-base') 0;
+    border-left: getCssVar('border');
+  }
+
+  @include e(decrease) {
+    left: 1px;
+    border-radius: getCssVar('border-radius-base') 0 0
+      getCssVar('border-radius-base');
+    border-right: getCssVar('border');
+  }
+
+  @include when(disabled) {
+    @include e((increase, decrease)) {
+      border-color: getCssVar('disabled-border-color');
+      color: getCssVar('disabled-border-color');
+
+      &:hover {
+        color: getCssVar('disabled-border-color');
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      width: map.get($input-number-width, $size);
+      line-height: #{map.get($input-height, $size) - 2};
+
+      @include e((increase, decrease)) {
+        width: map.get($input-height, $size);
+        font-size: map.get($input-font-size, $size);
+      }
+
+      @include when(controls-right) {
+        .#{$namespace}-input--#{$size} {
+          .#{$namespace}-input__wrapper {
+            padding-right: #{map.get($input-height, $size) + 7};
+          }
+        }
+      }
+
+      .#{$namespace}-input--#{$size} {
+        .#{$namespace}-input__wrapper {
+          padding-left: #{map.get($input-height, $size) + 7};
+          padding-right: #{map.get($input-height, $size) + 7};
+        }
+      }
+    }
+  }
+
+  @include m(small) {
+    @include e((increase, decrease)) {
+      [class*='#{$namespace}-icon'] {
+        transform: scale(0.9);
+      }
+    }
+  }
+
+  @include when(without-controls) {
+    .#{$namespace}-input__wrapper {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  @include when(controls-right) {
+    .#{$namespace}-input__wrapper {
+      padding-left: 15px;
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
+
+    @include e((increase, decrease)) {
+      @include set-css-var-value(
+        ('input', 'number-controls-height'),
+        math.div(map.get($input-height, 'default') - 2, 2)
+      );
+
+      height: getCssVar('input-number-controls-height');
+      line-height: getCssVar('input-number-controls-height');
+
+      [class*='#{$namespace}-icon'] {
+        transform: scale(0.8);
+      }
+    }
+
+    @include e(increase) {
+      bottom: auto;
+      left: auto;
+      border-radius: 0 getCssVar('border-radius-base') 0 0;
+      border-bottom: getCssVar('border');
+    }
+
+    @include e(decrease) {
+      right: 1px;
+      top: auto;
+      left: auto;
+      border-right: none;
+      border-left: getCssVar('border');
+      border-radius: 0 0 getCssVar('border-radius-base') 0;
+    }
+
+    @each $size in (large, small) {
+      &[class*='#{$size}'] {
+        [class*='increase'],
+        [class*='decrease'] {
+          @include set-css-var-value(
+            ('input', 'number-controls-height'),
+            math.div(map.get($input-height, $size) - 2, 2)
+          );
+        }
+      }
+    }
+  }
+}