vft 0.0.48 → 0.0.50

package/theme-style/src/select-dropdown-v2.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(select-dropdown) {
+  z-index: calc(#{getCssVar('index-top')} + 1);
+  border-radius: getCssVar('border-radius-base');
+  box-sizing: border-box;
+
+  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
+    padding: 0;
+  }
+
+  @include e(option-item) {
+    @include when(selected) {
+      &:not(.is-multiple) {
+        @include when(disabled) {
+          color: getCssVar('text-disabled-color');
+          &::after {
+            background-color: getCssVar('text-disabled-color');
+          }
+        }
+      }
+    }
+
+    &:hover {
+      &:not(.hover) {
+        background-color: transparent;
+      }
+    }
+  }
+
+  @include when(multiple) {
+    .#{$namespace}-select-dropdown__option-item {
+      @include when(disabled) {
+        @include when(selected) {
+          color: getCssVar('text-disabled-color');
+        }
+      }
+    }
+  }
+}
+
+@include b(select-dropdown__empty) {
+  padding: map.get($select-dropdown, 'empty-padding');
+  margin: 0;
+  text-align: center;
+  color: map.get($select-dropdown, 'empty-color');
+  font-size: getCssVar('select-font-size');
+}
+
+@include b(select-dropdown__wrap) {
+  max-height: map.get($select-dropdown, 'max-height');
+}
+
+@include b(select-dropdown__list) {
+  list-style: none;
+  margin: map.get($select-dropdown, 'padding') !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+}

package/theme-style/src/select-dropdown.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+
+@mixin checked-icon {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: map.get($select-option, 'selected-text-color');
+  mask: url('#{$checked-icon}') no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url('#{$checked-icon}') no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+}
+
+@include b(select-dropdown) {
+  z-index: calc(#{getCssVar('index-top')} + 1);
+  border-radius: getCssVar('border-radius-base');
+  box-sizing: border-box;
+
+  @include when(multiple) {
+    & .#{$namespace}-select-dropdown__item.selected {
+      color: map.get($select-option, 'selected-text-color');
+      background-color: map.get($select-dropdown, 'bg-color');
+
+      &.hover {
+        background-color: map.get($select-option, 'hover-background');
+      }
+
+      &::after {
+        @include checked-icon;
+      }
+
+      &.is-disabled {
+        &::after {
+          background-color: getCssVar('text-color-disabled');
+        }
+      }
+    }
+  }
+
+  & .#{$namespace}-select-dropdown__option-item.is-selected {
+    &::after {
+      @include checked-icon;
+    }
+  }
+
+  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
+    padding: 0;
+  }
+
+  .#{$namespace}-select-dropdown__item.is-disabled {
+    &:hover {
+      background-color: unset;
+    }
+
+    &.selected {
+      color: getCssVar('text-color-disabled');
+    }
+  }
+}
+
+@include b(select-dropdown__empty) {
+  padding: map.get($select-dropdown, 'empty-padding');
+  margin: 0;
+  text-align: center;
+  color: map.get($select-dropdown, 'empty-color');
+  font-size: getCssVar('select-font-size');
+}
+
+@include b(select-dropdown__wrap) {
+  max-height: map.get($select-dropdown, 'max-height');
+}
+
+@include b(select-dropdown__list) {
+  list-style: none;
+  padding: map.get($select-dropdown, 'padding');
+  margin: 0;
+  box-sizing: border-box;
+}

package/theme-style/src/select-v2.scss

@@ -0,0 +1,345 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use './select-dropdown-v2.scss';
+@use './option-item.scss';
+@use './option-group.scss';
+@use './select/common.scss' as *;
+
+$input-inline-start: map.get($input-padding-horizontal, 'default') !default;
+
+@include b(select-v2) {
+  @include set-component-css-var('select', $select);
+}
+
+@include b(select-v2) {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  font-size: map.get($input-font-size, 'default');
+  $selector: &;
+  @include e(wrapper) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    box-sizing: border-box;
+    cursor: pointer;
+    padding: 1px 30px 1px 0;
+    border: 1px solid getCssVar('border-color');
+    border-radius: getCssVar('border-radius-base');
+    background-color: getCssVar('fill-color', 'blank');
+    transition: getCssVar('transition', 'duration');
+
+    &:hover {
+      border-color: getCssVar('text', 'placeholder-color');
+    }
+
+    @include when(filterable) {
+      cursor: text;
+    }
+
+    @include when(focused) {
+      border-color: getCssVar('primary-color');
+    }
+
+    @include when(hovering) {
+      &:not(.is-focused) {
+        border-color: getCssVar('border-color-hover');
+      }
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+
+      background-color: getCssVar('fill-color', 'light');
+      color: getCssVar('text', 'placeholder-color');
+      border-color: getCssVar('select-disabled-border');
+
+      &:hover {
+        border-color: getCssVar('select-disabled-border');
+      }
+
+      &.is-focus {
+        border-color: getCssVar('input-focus-border-color');
+      }
+
+      .is-transparent {
+        opacity: 1;
+        user-select: none;
+      }
+
+      #{$selector}__caret {
+        cursor: not-allowed;
+      }
+
+      #{$selector}__combobox-input {
+        cursor: not-allowed;
+      }
+    }
+
+    #{$selector}__input-wrapper {
+      box-sizing: border-box;
+      position: relative;
+      margin-inline-start: $input-inline-start;
+      max-width: 100%;
+      overflow: hidden;
+    }
+
+    &,
+    #{$selector}__input-wrapper {
+      line-height: map.get($input-height, 'default');
+    }
+
+    #{$selector}__input-wrapper input {
+      @include set-css-var-value(
+        'input-inner-height',
+        calc(
+          var(
+              #{getCssVarName('component-size')},
+              #{map.get($input-height, 'default')}
+            ) - 8px
+        )
+      );
+
+      height: getCssVar('input-inner-height');
+      line-height: getCssVar('input-inner-height');
+      min-width: 4px;
+      width: 100%;
+
+      background-color: transparent;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background: 0 0;
+      border: none;
+
+      margin: 2px 0;
+      outline: none;
+      padding: 0;
+    }
+  }
+
+  @include select-common(select-v2);
+
+  @include e(empty) {
+    padding: 10px 0;
+    margin: 0;
+    text-align: center;
+    color: getCssVar('text', 'secondary-color');
+    font-size: 14px;
+  }
+
+  @include e(popper) {
+    @include picker-popper(
+      map.get($select-dropdown, 'bg-color'),
+      map.get($select-dropdown, 'border'),
+      map.get($select-dropdown, 'shadow')
+    );
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(wrapper) {
+        #{$selector}__combobox-input {
+          height: map.get($input-height, $size) - 8px;
+        }
+      }
+      @include e(caret) {
+        height: map.get($input-height, $size);
+      }
+      @include e(suffix) {
+        height: map.get($input-height, $size);
+      }
+      @include e(placeholder) {
+        font-size: map.get($input-font-size, $size);
+        line-height: map.get($input-line-height, $size);
+      }
+    }
+  }
+
+  #{$selector}__selection > span {
+    display: inline-block;
+  }
+
+  &:hover {
+    #{$selector}__combobox-input {
+      border-color: getCssVar('select-border-color-hover');
+    }
+  }
+
+  .#{$namespace}-select__selection-text {
+    text-overflow: ellipsis;
+    display: inline-block;
+    overflow-x: hidden;
+    vertical-align: bottom;
+  }
+
+  #{$selector}__combobox-input {
+    padding-right: 35px;
+    display: block;
+    color: getCssVar('text', 'regular-color');
+
+    &:focus {
+      border-color: getCssVar('select-input-focus-border-color');
+    }
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: getCssVar('select-multiple-input-color');
+    font-size: getCssVar('select-font-size');
+    appearance: none;
+    height: 28px;
+
+    @include when(small) {
+      height: 14px;
+    }
+  }
+
+  @include e(close) {
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    z-index: getCssVar('index-top');
+    right: 25px;
+    color: getCssVar('select-input-color');
+    line-height: 18px;
+    font-size: getCssVar('select-input-font-size');
+
+    &:hover {
+      color: getCssVar('select-close-hover-color');
+    }
+  }
+
+  @include e(suffix) {
+    display: inline-flex;
+    position: absolute;
+    right: 12px;
+    height: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(
+      #{getCssVarName('input-icon-color')},
+      map.get($input, 'icon-color')
+    );
+
+    .#{$namespace}-input__icon {
+      height: inherit;
+
+      &:not(:first-child) {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  @include e(caret) {
+    color: getCssVar('select-input-color');
+    font-size: getCssVar('select-input-font-size');
+    transition: getCssVar('transition', 'duration');
+    transform: rotateZ(180deg);
+    cursor: pointer;
+
+    @include when(reverse) {
+      transform: rotateZ(0deg);
+    }
+
+    @include when(show-close) {
+      font-size: getCssVar('select-font-size');
+      text-align: center;
+      transform: rotateZ(180deg);
+      border-radius: getCssVar('border-radius-circle');
+      color: getCssVar('select-input-color');
+      transition: getCssVar('transition', 'color');
+
+      &:hover {
+        color: getCssVar('select', 'close-hover-color');
+      }
+    }
+
+    &.#{$namespace}-icon {
+      height: inherit;
+
+      svg {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  @include e(selection) {
+    white-space: normal;
+    z-index: getCssVar('index-normal');
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  @include e(input-calculator) {
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    white-space: pre;
+    z-index: 999;
+  }
+
+  @include e(selected-item) {
+    line-height: inherit;
+    height: inherit;
+    user-select: none;
+    // using this to keep the item centered in both vertically and horizontally
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @include e(placeholder) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-inline-start: $input-inline-start;
+    width: calc(100% - 52px);
+    @include line-clamp();
+    color: var(
+      #{getCssVarName('input-text-color')},
+      map.get($input, 'text-color')
+    );
+    @include when(transparent) {
+      color: getCssVar('text', 'placeholder-color');
+    }
+  }
+
+  .#{$namespace}-select-v2__selection .#{$namespace}-tag {
+    box-sizing: border-box;
+    border-color: transparent;
+    margin: 2px 0 2px 6px;
+    background-color: getCssVar('fill-color');
+
+    .#{$namespace}-icon-close {
+      background-color: getCssVar('text', 'placeholder-color');
+      right: -7px;
+      color: getCssVar('color-white');
+
+      &:hover {
+        background-color: getCssVar('text', 'secondary-color');
+      }
+
+      &::before {
+        display: block;
+        transform: translate(0, 0.5px);
+      }
+    }
+  }
+
+  &.#{$namespace}-select-v2--small {
+    .#{$namespace}-select-v2__selection .#{$namespace}-tag {
+      margin: 1px 0 1px 6px;
+      height: 18px;
+    }
+  }
+}

package/theme-style/src/select.scss

@@ -0,0 +1,221 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use './select-dropdown.scss';
+@use './select/common.scss' as *;
+
+@mixin select-tag-normal {
+  white-space: normal;
+  z-index: getCssVar('index-normal');
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  cursor: pointer;
+
+  .#{$namespace}-tag {
+    box-sizing: border-box;
+    border-color: transparent;
+    margin: 2px 6px 2px 0;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .#{$namespace}-icon-close {
+      background-color: getCssVar('text-color', 'placeholder');
+      right: -7px;
+      top: 0;
+      color: $color-white;
+
+      &:hover {
+        background-color: getCssVar('text-color', 'secondary');
+      }
+
+      &::before {
+        display: block;
+        transform: translate(0, 0.5px);
+      }
+    }
+  }
+  .#{$namespace}-tag--info {
+    background-color: getCssVar('fill-color');
+  }
+}
+
+@include b(select) {
+  @include set-component-css-var('select', $select);
+}
+
+@include b(select) {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  line-height: map.get($input-height, 'default');
+
+  @include e(popper) {
+    @include picker-popper(
+      map.get($select-dropdown, 'bg-color'),
+      map.get($select-dropdown, 'border'),
+      map.get($select-dropdown, 'shadow')
+    );
+  }
+
+  .#{$namespace}-select-tags-wrapper {
+    &.has-prefix {
+      margin-left: map.get($select-tags-prefix-padding, 'default');
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      line-height: map.get($input-height, $size);
+      .#{$namespace}-select-tags-wrapper {
+        &.has-prefix {
+          margin-left: map.get($select-tags-prefix-padding, $size);
+        }
+      }
+    }
+  }
+
+  .#{$namespace}-select__tags > span {
+    display: inline-block;
+  }
+
+  &:hover:not(.#{$namespace}-select--disabled) {
+    .#{$namespace}-input__wrapper {
+      box-shadow: 0 0 0 1px getCssVar('select-border-color-hover') inset;
+    }
+  }
+
+  @include select-common(select);
+
+  .#{$namespace}-input__wrapper {
+    cursor: pointer;
+
+    @include when(focus) {
+      @include inset-input-border(
+        getCssVar('select-input-focus-border-color'),
+        true
+      );
+    }
+  }
+
+  .#{$namespace}-input__inner {
+    cursor: pointer;
+  }
+
+  .#{$namespace}-input {
+    display: flex;
+
+    & .#{$namespace}-select__caret {
+      color: getCssVar('select-input-color');
+      font-size: getCssVar('select-input-font-size');
+      transition: transform getCssVar('transition-duration');
+      transform: rotateZ(0deg);
+      cursor: pointer;
+
+      @include when(reverse) {
+        transform: rotateZ(-180deg);
+      }
+
+      @include when(show-close) {
+        font-size: getCssVar('select-font-size');
+        text-align: center;
+        transform: rotateZ(0deg);
+        border-radius: getCssVar('border-radius-circle');
+        color: getCssVar('select-input-color');
+        transition: getCssVar('transition', 'color');
+
+        &:hover {
+          color: getCssVar('select-close-hover-color');
+        }
+      }
+
+      &.#{$namespace}-icon {
+        position: relative;
+        height: inherit;
+        z-index: 2;
+      }
+    }
+
+    &.is-disabled {
+      & .#{$namespace}-input__wrapper {
+        cursor: not-allowed;
+
+        &:hover {
+          @include inset-input-border(#{getCssVar('select-disabled-border')});
+        }
+      }
+      & .#{$namespace}-input__inner {
+        cursor: not-allowed;
+      }
+      & .#{$namespace}-select__caret {
+        cursor: not-allowed;
+      }
+    }
+
+    &.is-focus .#{$namespace}-input__wrapper {
+      @include inset-input-border(
+        getCssVar('select-input-focus-border-color'),
+        true
+      );
+    }
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: getCssVar('select-multiple-input-color');
+    font-size: getCssVar('select-font-size');
+    appearance: none;
+    height: 28px;
+    background-color: transparent;
+
+    &--iOS {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 6;
+    }
+
+    @include when(small) {
+      height: 14px;
+    }
+  }
+
+  @include e(close) {
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    z-index: getCssVar('index-top');
+    right: 25px;
+    color: getCssVar('select-input-color');
+    line-height: 18px;
+    font-size: getCssVar('select-input-font-size');
+
+    &:hover {
+      color: getCssVar('select-close-hover-color');
+    }
+  }
+
+  @include e(tags) {
+    position: absolute;
+    line-height: normal;
+    top: 50%;
+    transform: translateY(-50%);
+    @include select-tag-normal;
+  }
+
+  @include e(collapse-tags) {
+    @include select-tag-normal;
+  }
+
+  @include e(collapse-tag) {
+    line-height: inherit;
+    height: inherit;
+    display: flex;
+  }
+}