@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.64

package/dist/design-system/components/_segmented.scss

@@ -0,0 +1,215 @@
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// MIXINS
+// ─────────────────────────────────────────────────────────────────────────
+
+// Box style: kích thước container + item
+@mixin box-size($h, $pad, $r-container, $r-item) {
+  height: $h;
+  padding: $pad;
+  border-radius: $r-container;
+
+  .el-segmented__item-selected {
+    border-radius: $r-item;
+  }
+
+  .el-segmented__item {
+    border-radius: $r-item;
+  }
+}
+
+// Pill style: kích thước item
+@mixin pill-item-size($h, $px, $min-w) {
+  .el-segmented__item {
+    height: $h;
+    padding: 0 $px;
+    min-width: $min-w;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// SEGMENTED
+// ─────────────────────────────────────────────────────────────────────────
+
+.custom-segmented.el-segmented {
+  background: var(--er-surface-track);
+  overflow: hidden;
+
+  .el-segmented__group {
+    gap: var(--er-shape-spacing-100);
+  }
+
+  // Equal-width items only apply to the box variant — pill items must hug
+  // their content so short labels ("All") and long ones ("Credit/Debit Card")
+  // keep their natural width instead of stretching to the widest sibling.
+  &:not(.pill) .el-segmented__group > * {
+    flex: 1 1 0 !important;
+  }
+
+  .el-segmented__item-selected {
+    background: var(--er-action-neutral-subtle-default);
+    @include elevation.elevation-level-1;
+  }
+
+  .el-segmented__item-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--er-shape-spacing-50); // 4px — space between prefix, text, badge, suffix
+    overflow: visible; // allow badge to render outside hidden bounds
+    white-space: normal; // reset EP default; text truncation is on .segmented-item__text
+  }
+
+  .segmented-item__prefix,
+  .segmented-item__suffix {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .segmented-item__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    @include typo.label-lg;
+  }
+
+  .segmented-item__badge {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--er-control-height-xxs); // 16px
+    height: var(--er-control-height-xxs); // 16px
+    padding: 0 var(--er-shape-spacing-50); // 0 4px
+  }
+
+  .el-segmented__item {
+    position: relative;
+    flex: none; // items size to content — no equal-width stretching
+
+    &.is-selected {
+      color: var(--er-text-primary);
+    }
+    &:not(.is-selected) {
+      color: var(--er-text-secondary);
+    }
+
+    &:not(.is-disabled):not(.is-selected) {
+      &:hover,
+      &:active {
+        background: transparent;
+      }
+      &:hover {
+        background: var(--er-action-neutral-subtle-hover);
+        color: var(--er-text-primary);
+      }
+    }
+  }
+
+  // Box sizes
+  &.xl {
+    @include box-size(
+      var(--er-control-height-xl),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-200),
+      var(--er-shape-corner-150)
+    );
+  }
+
+  &.lg {
+    @include box-size(
+      var(--er-control-height-lg),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-150),
+      var(--er-shape-corner-100)
+    );
+  }
+
+  &.md {
+    $r-item: calc(var(--er-shape-corner-100) - 2px);
+    @include box-size(var(--er-control-height-md), 2px, var(--er-shape-corner-100), #{$r-item});
+  }
+
+  &.xl .el-segmented__item {
+    padding: 0 var(--er-shape-spacing-150);
+  }
+  &.lg .el-segmented__item {
+    padding: 0 var(--er-shape-spacing-100);
+  }
+  &.md .el-segmented__item {
+    padding: 0 var(--er-shape-spacing-100);
+  }
+
+  .el-badge.segment-badge {
+    position: static;
+
+    .el-badge__content {
+      display: block;
+      position: static;
+      transform: none;
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // PILL STYLE
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.pill {
+    background: transparent;
+    padding: 0;
+
+    .el-segmented__group {
+      gap: var(--er-shape-spacing-50);
+    }
+
+    .el-segmented__item-selected {
+      background: var(--er-action-primary-default);
+      border-radius: var(--er-shape-corner-full);
+      box-shadow: none;
+    }
+
+    .el-segmented__item-selected {
+      transition: none !important;
+      display: none !important
+    }
+
+    .el-segmented__item {
+      border-radius: var(--er-shape-corner-full);
+      overflow: hidden;
+
+      &:not(.is-selected) {
+        background: var(--er-action-neutral-subtle-default);
+        border: 1px solid var(--er-border-default);
+
+        &:hover {
+          background: var(--er-action-neutral-subtle-hover);
+        }
+
+        & + .el-segmented__item::before {
+          display: none;
+        }
+      }
+
+      &.is-selected {
+        color: var(--er-text-on-action);
+        background: var(--er-action-primary-default);
+      }
+    }
+
+    // Pill sizes
+    &.xl {
+      @include pill-item-size(var(--er-control-height-xl), var(--er-shape-spacing-200), 64px);
+    }
+    &.lg {
+      @include pill-item-size(var(--er-control-height-lg), var(--er-shape-spacing-150), 56px);
+    }
+    &.md {
+      @include pill-item-size(var(--er-control-height-md), var(--er-shape-spacing-100), 48px);
+    }
+  }
+}

package/dist/design-system/components/_select-country.scss

@@ -0,0 +1,182 @@
+@use "sass:map";
+@use "../themes/aurora/typography/typography-utils" as typo;
+
+@mixin select-sizes($sizes) {
+  @each $size, $value in $sizes {
+    &.#{$size} {
+      --select-height: #{map.get($value, height)};
+      --flag-scale: #{map.get($value, flag)};
+    }
+  }
+}
+
+$base-sizes: (
+  xs: (
+    height: var(--er-control-height-xs),
+    flag: 0.55
+  ),
+  sm: (
+    height: var(--er-control-height-sm),
+    flag: 0.6
+  ),
+  md: (
+    height: var(--er-control-height-md),
+    flag: 0.65
+  ),
+  lg: (
+    height: var(--er-control-height-lg),
+    flag: 0.7
+  )
+) !default;
+
+.custom-select-country.el-select-v2, // deprecated
+.custom-select-country.el-select {
+  @include select-sizes($base-sizes);
+  --border-width: 1px;
+
+  border: none !important;
+  box-shadow: none !important;
+  width: 100%;
+  padding: 0 !important;
+
+  .el-select__placeholder {
+    position: absolute !important;
+    transform: translateY(-50%) !important;
+  }
+
+  .el-select-v2__wrapper, // deprecated
+  .el-select__wrapper,
+  .el-input__wrapper {
+    box-shadow: none !important;
+    @include typo.body-md;
+    padding: 0;
+    padding-right: var(--er-shape-spacing-50);
+    height: var(--select-height) !important;
+    border: var(--border-width) solid var(--er-border-default);
+    border-radius: var(--er-shape-corner-100);
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    line-height: calc(var(--select-height) - var(--border-width) * 2);
+    gap: 0px;
+
+    &.is-hovering {
+      border-color: var(--er-action-primary-hover) !important;
+    }
+
+    &.is-focused {
+      border-color: var(--er-action-primary-default) !important;
+    }
+
+    &.is-disabled {
+      border-color: var(--er-border-default) !important;
+      opacity: 0.5;
+    }
+
+    .custom-select-country__prefix {
+      min-width: var(--er-shape-spacing-150);
+      width: initial;
+      height: calc(var(--select-height) - var(--border-width) * 2);
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      // EaeraCountryFlag (SVG-based, replaced vue-country-flag-next emoji flags)
+      .eaera-country-flag {
+        margin: 0;
+        transform: scale(var(--flag-scale));
+        transform-origin: center center;
+      }
+    }
+
+    .el-select-v2__placeholder,
+    .el-input__placeholder {
+      @include typo.body-md;
+      height: calc(var(--select-height) - var(--border-width) * 2);
+      color: var(--er-text-muted);
+      top: 0;
+      transform: none;
+      line-height: calc(var(--select-height) - var(--border-width) * 2);
+    }
+  }
+
+  .prefix-country-placeholder {
+    height: 1rem;
+    width: 1rem;
+    border-radius: 100%;
+    display: none;
+  }
+}
+
+.custom-select-country__popper {
+  &.el-popper {
+    min-width: unset !important;
+    border-radius: var(--er-shape-spacing-150);
+  }
+
+  .el-select-dropdown {
+    width: 100% !important;
+    min-width: unset !important;
+  }
+
+  .el-select-dropdown__list {
+    min-width: unset !important;
+    min-width: 300px !important;
+    padding: var(--er-shape-spacing-50) 0;
+  }
+
+  .custom-select-country__default {
+    display: flex;
+    align-items: center;
+    gap: var(--er-shape-spacing-100);
+    height: 100%;
+    padding: 0 var(--er-shape-spacing-150);
+
+    .eaera-country-flag {
+      margin: 0;
+      flex-shrink: 0;
+    }
+
+    span:not(.eaera-country-flag) {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .el-select-dropdown__item {
+    padding: 0 !important;
+    &.is-selected::after {
+      display: none;
+    }
+  }
+}
+
+.el-form-item {
+  &.is-error {
+    .custom-select-country.el-select .el-select__wrapper {
+      border-color: var(--er-border-danger) !important;
+    }
+  }
+}
+
+.custom-input-phone {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  gap: var(--er-shape-spacing-100);
+
+  .custom-select-country {
+    flex: 1;
+  }
+
+  .custom-input.el-input {
+    flex: 2.5;
+  }
+
+  @media (max-width: 479px) {
+    flex-direction: column;
+  }
+}

package/dist/design-system/components/_select.scss

@@ -0,0 +1,235 @@
+@use "../themes/aurora/typography/typography-utils" as typo;
+@use "../themes/aurora/elevation/elevation-utils" as elevation;
+
+.custom-select.el-select {
+  .el-select__wrapper {
+    min-height: var(--er-control-height-md);
+    border-radius: var(--er-shape-corner-100);
+    gap: var(--er-shape-spacing-50);
+    background-color: var(--er-surface-container);
+    box-shadow: none !important;
+    border: 1px solid var(--er-border-default);
+    padding: 0 var(--er-shape-spacing-100);
+
+    &.is-hovering:not(.is-focused):not(.is-disabled) {
+      border-color: var(--er-action-primary-hover);
+    }
+
+    &.is-focused {
+      border-color: var(--er-action-primary-default);
+    }
+
+    &.is-disabled {
+      opacity: 0.5;
+    }
+
+    .el-select__selection.is-near {
+      margin-left: 0px;
+    }
+
+    &:not(.is-filterable.is-focused) {
+      .el-select__placeholder {
+        position: static;
+        transform: unset;
+      }
+    }
+  }
+
+  .el-select__placeholder {
+    @include typo.body-md;
+    color: var(--er-text-muted);
+  }
+
+  .el-select__selected-item {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+
+    &.el-select__placeholder {
+      &.is-transparent {
+        color: var(--er-text-muted);
+      }
+    }
+  }
+
+  .el-select__caret {
+    color: var(--er-icon-secondary);
+    font-size: var(--typo-body-md-sz);
+  }
+
+  .el-select__suffix i {
+    width: var(--er-control-height-xxs);
+    height: var(--er-control-height-xxs);
+  }
+
+  .el-icon {
+    width: var(--er-control-height-xxs);
+    height: var(--er-control-height-xxs);
+
+    &.el-select__clear {
+      width: 12px;
+      height: 12px;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.sm {
+    .el-select__selection,
+    .el-select__selected-item {
+      .el-tag {
+        @include typo.body-sm;
+        height: var(--er-shape-spacing-250);
+        line-height: var(--er-shape-spacing-250);
+      }
+    }
+
+    .el-select__placeholder,
+    .el-select__selected-item {
+      @include typo.body-sm; // Figma: typo/body-sm (12px)
+    }
+
+    .el-select__wrapper {
+      min-height: var(--er-control-height-sm);
+      border-radius: var(--er-shape-corner-75);
+      gap: var(--er-shape-spacing-50);
+      padding: 0 var(--er-shape-spacing-75);
+    }
+
+    .el-icon {
+      width: 12px;
+      height: 12px;
+
+      &.el-select__clear {
+        width: 12px !important;
+        height: 12px !important;
+      }
+    }
+
+    .el-select__prefix {
+      width: 12px;
+      height: 12px;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.md {
+    .el-select__prefix{
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.lg {
+    .el-select__wrapper {
+      min-height: var(--er-control-height-lg);
+      border-radius: var(--er-shape-corner-150);
+      gap: var(--er-shape-spacing-75);
+      padding: 0 var(--er-shape-spacing-150);
+    }
+
+    .el-select__prefix {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.xl {
+    .el-select__wrapper {
+      min-height: var(--er-control-height-xl);
+      border-radius: var(--er-shape-corner-150);
+      gap: var(--er-shape-spacing-100);
+      padding: 0 var(--er-shape-spacing-200);
+
+      .el-select__selected-item {
+        @include typo.body-lg;
+      }
+    }
+
+    .el-select__suffix i {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+
+    .el-select__prefix {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.is-danger .el-select__wrapper,
+  &.danger .el-select__wrapper {
+    border-color: var(--er-border-danger); // #EF4444
+
+    &:hover:not(.is-focused) {
+      border-color: var(--er-border-danger) !important;
+    }
+
+    &.is-focused {
+      border-color: var(--er-action-primary-default) !important;
+    }
+
+    .el-tag__close:hover {
+      background-color: var(--er-surface-hover);
+      color: var(--er-icon-secondary);
+    }
+  }
+
+  &.option-type-tag {
+    .el-select__selected-item {
+      display: flex;
+      align-items: center;
+
+      .custom-tag {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .el-tag:not(.custom-tag) {
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-50);
+    background-color: var(--er-surface-muted);
+    border: none;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .el-tag__content {
+      @include typo.label-md;
+      color: var(--er-text-secondary);
+    }
+
+    .el-tag__close {
+      color: var(--er-icon-secondary);
+      margin-left: var(--er-shape-spacing-50);
+      flex-shrink: 0;
+
+      &:hover {
+        background-color: var(--er-surface-hover);
+        color: var(--er-icon-primary);
+      }
+    }
+  }
+}