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

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

@@ -0,0 +1,705 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+// ─────────────────────────────────────────────────────────────────────────
+// CASCADER INPUT (wrapper around el-input)
+// ─────────────────────────────────────────────────────────────────────────
+
+@mixin cascader-size($height, $padding-x, $gap, $radius) {
+  .el-input {
+    height: auto;
+
+    .el-input__wrapper {
+      height: $height !important;
+      min-height: $height !important;
+      padding: 0 $padding-x;
+      border-radius: $radius;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+    }
+  }
+}
+
+@mixin cascader-tag-base {
+  @include typo.label-md;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--er-shape-spacing-50);
+  padding: 0 var(--er-shape-spacing-100);
+  border: none;
+  color: var(--er-text-secondary);
+
+  .el-tag__close {
+    color: var(--er-icon-secondary);
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.custom-cascader.el-cascader {
+  // Remove El-Plus default fixed width
+  width: auto;
+  user-select: none;
+
+  // ─────────────────────────────────────────────────────────────────────
+  // INPUT WRAPPER — Base styles (no default size)
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-input__wrapper {
+    border: 1px solid var(--er-border-default);
+    background-color: var(--er-surface-container);
+    box-shadow: none !important;
+
+    // Hover (non-disabled, non-focused)
+    &:hover {
+      border-color: var(--er-action-primary-hover);
+    }
+
+    // Focus
+    &.is-focus,
+    &:focus-within {
+      border-color: var(--er-action-primary-default);
+    }
+
+    // Disabled — Figma: opacity-0.5, border stays default, bg stays
+    &.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      border-color: var(--er-border-default) !important;
+      background-color: var(--er-surface-container) !important;
+    }
+  }
+
+  // Override Element Plus disabled style (class on .el-input, not .el-input__wrapper)
+  .el-input.is-disabled .el-input__wrapper {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border-color: var(--er-border-default) !important;
+    background-color: var(--er-surface-container) !important;
+    box-shadow: none !important;
+  }
+
+  // Input text
+  .el-input__inner {
+    color: var(--er-text-primary);
+    font-variant-numeric: lining-nums tabular-nums;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &::placeholder {
+      color: var(--er-text-muted);
+      font-variant-numeric: lining-nums tabular-nums;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  // Disabled text colors — keep same as default, only wrapper opacity changes
+  .el-input.is-disabled .el-input__inner {
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  // Icons
+  .el-input__suffix,
+  .el-input__prefix {
+    display: flex;
+    align-items: center;
+
+    .el-icon {
+      color: var(--er-icon-secondary);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // SM SIZE — Figma: h-24px, px-4px, gap-4px, corner-xs, body-sm
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.sm {
+    @include cascader-size(
+      var(--er-control-height-sm),
+      var(--er-shape-spacing-50),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-50)
+    );
+
+    .el-input__inner,
+    .el-input__inner::placeholder {
+      @include typo.body-sm;
+    }
+
+    .el-input__suffix .el-icon,
+    .el-input__prefix .el-icon {
+      width: var(--er-control-height-xxs) !important;
+      height: var(--er-control-height-xxs) !important;
+
+      &.icon-circle-close {
+        width: 12px !important;
+        height: 12px !important;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // MD SIZE — Figma: h-32px, px-8px, gap-8px, corner-sm, body-md
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.md {
+    @include cascader-size(
+      var(--er-control-height-md),
+      var(--er-shape-spacing-100),
+      var(--er-shape-spacing-100),
+      var(--er-shape-corner-100)
+    );
+
+    .el-input__inner,
+    .el-input__inner::placeholder {
+      @include typo.body-md;
+    }
+
+    .el-input__suffix .el-icon,
+    .el-input__prefix .el-icon {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+
+      &.icon-circle-close {
+        width: var(--er-control-height-xxs) !important;
+        height: var(--er-control-height-xxs) !important;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // LG SIZE — Figma: h-40px, px-12px, gap-8px, corner-sm, body-md
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.lg {
+    @include cascader-size(
+      var(--er-control-height-lg),
+      var(--er-shape-spacing-150),
+      var(--er-shape-spacing-100),
+      var(--er-shape-corner-100)
+    );
+
+    .el-input__inner,
+    .el-input__inner::placeholder {
+      @include typo.body-md;
+    }
+
+    .el-input__suffix .el-icon,
+    .el-input__prefix .el-icon {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+
+      &.icon-circle-close {
+        width: var(--er-control-height-xxs) !important;
+        height: var(--er-control-height-xxs) !important;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // ERROR STATE
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.is-error .el-input__wrapper,
+  &.error .el-input__wrapper {
+    border-color: var(--er-border-danger);
+
+    &:hover {
+      border-color: var(--er-border-danger);
+    }
+
+    &.is-focus,
+    &:focus-within {
+      border-color: var(--er-action-primary-default);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // TAGS (for multiple selection)
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-tag {
+    @include cascader-tag-base;
+    background-color: var(--er-surface-muted);
+    border-radius: var(--er-shape-corner-50);
+  }
+
+  &.sm {
+    .el-tag,
+    .el-cascader__collapse-tag .el-tag {
+      height: var(--er-control-height-xs);
+      width: fit-content;
+    }
+  }
+
+  &.md,
+  &.lg {
+    .el-tag,
+    .el-cascader__collapse-tag .el-tag {
+      height: var(--er-control-height-sm);
+      border-radius: var(--er-shape-corner-50);
+    }
+  }
+
+  // Disabled state
+  &.is-disabled {
+    .el-tag,
+    .el-cascader__collapse-tag .el-tag {
+      opacity: 0.5;
+    }
+  }
+
+  .el-tag--light {
+    border-color: transparent;
+    background-color: var(--er-surface-muted);
+    color: var(--er-text-secondary);
+  }
+
+  .el-tag--plain {
+    background-color: transparent;
+    border-color: var(--er-border-default) !important;
+    border-style: solid;
+    border-width: 1px;
+    color: var(--er-text-secondary);
+  }
+
+  .el-tag--light,
+  .el-tag--plain {
+    .el-tag__close {
+      color: inherit;
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// CASCADER PANEL (teleported via popper-class="custom-cascader__popper")
+// Figma (40538:34675): Multi-level menus
+// ─────────────────────────────────────────────────────────────────────────
+.custom-cascader__popper.el-popper {
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  border-radius: var(--er-shape-corner-150);
+  overflow: hidden;
+
+  // Arrow
+  .el-popper__arrow::before {
+    border-color: var(--er-border-subtle);
+    background: var(--er-surface-elevated);
+  }
+
+  .el-cascader__collapse-tag .el-tag {
+    @include cascader-tag-base;
+    background-color: var(--er-surface-muted);
+    border-radius: var(--er-shape-corner-50);
+
+    &.el-tag--plain {
+      background-color: transparent;
+      border-color: var(--er-border-default) !important;
+      border-style: solid;
+      border-width: 1px;
+      color: var(--er-text-secondary);
+    }
+  }
+
+  .el-cascader-node {
+    // Gap between checkbox and text
+    gap: var(--er-shape-spacing-50);
+
+    .el-cascader-node__label {
+      padding: 0 !important;
+    }
+
+    // ─────────────────────────────────────────────────────────────
+    // CHECKBOX
+    // ─────────────────────────────────────────────────────────────
+
+    .el-checkbox {
+      margin-right: 0;
+      height: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 16px;
+    }
+
+    .el-checkbox__input {
+      width: 16px;
+      height: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 16px;
+    }
+
+    .el-checkbox__inner {
+      box-sizing: border-box;
+      width: 16px;
+      height: 16px;
+      border-radius: var(--er-shape-corner-50);
+      border: 1.5px solid var(--er-border-strong);
+    }
+
+    // Hover checkbox: keep same border, no weird default blue/green border
+    .el-checkbox:hover .el-checkbox__inner,
+    .el-checkbox__input:not(.is-checked):not(.is-indeterminate):hover .el-checkbox__inner {
+      border-radius: var(--er-shape-corner-50);
+      border: 1.5px solid var(--er-border-strong);
+    }
+
+    // Checked / indeterminate checkbox
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: var(--er-action-primary-default);
+      border-color: var(--er-action-primary-default);
+    }
+
+    // Checked tick alignment
+    .el-checkbox__input.is-checked .el-checkbox__inner::after {
+      box-sizing: content-box;
+      width: 4px;
+      height: 8px;
+      left: 4.25px;
+      top: 0.25px;
+      border: 2.5px solid var(--er-text-on-action);
+      border-left: 0;
+      border-top: 0;
+
+      transform: rotate(45deg) scaleY(1);
+      transform-origin: center;
+    }
+
+    // Indeterminate minus alignment
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+      width: 8px;
+      height: 2px;
+      left: 50%;
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      background-color: var(--er-text-on-action);
+      transform: translate(-50%, -50%);
+    }
+
+    // ─────────────────────────────────────────────────────────────
+    // POSTFIX ARROW ICON
+    // ─────────────────────────────────────────────────────────────
+
+    // Default: secondary
+    .el-cascader-node__postfix {
+      position: static !important;
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
+      color: var(--er-icon-secondary);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+
+    .el-cascader-node__postfix svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .el-cascader-node__postfix path {
+      fill: currentColor !important;
+    }
+
+    // Hover: icon does NOT change color
+    &:hover {
+      .el-cascader-node__postfix {
+        color: var(--er-icon-secondary) !important;
+      }
+    }
+
+    // Click/open path but not selected: still secondary
+    &.in-active-path,
+    &.is-active,
+    &.in-checked-path {
+      .el-cascader-node__postfix {
+        color: var(--er-icon-secondary) !important;
+      }
+    }
+
+    // Only checked / indeterminate: icon becomes brand
+    &:has(.el-checkbox__input.is-checked),
+    &:has(.el-checkbox__input.is-indeterminate) {
+      .el-cascader-node__postfix {
+        color: var(--er-icon-brand) !important;
+      }
+    }
+  }
+}
+
+.custom-cascader__popper.el-popper.el-cascader__dropdown {
+  background: transparent;
+  padding: 0;
+  border-radius: var(--er-shape-corner-150);
+  overflow: hidden;
+
+  // ─────────────────────────────────────────────────────────────────────
+  // CASCADER PANEL CONTAINER (outer wrapper only)
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-cascader-panel {
+    border-radius: var(--er-shape-corner-150);
+    border: 1px solid var(--er-border-subtle) !important;
+    background: var(--er-surface-elevated);
+    @include elevation.elevation-level-2;
+    overflow: hidden;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // CASCADER MENU (each level panel)
+  // Figma: border-left border-subtle between panels, py-8px
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-cascader-menu {
+    background: var(--er-surface-elevated);
+    padding: var(--er-shape-spacing-100) 0;
+    border: none !important;
+    border-left: 1px solid var(--er-border-subtle) !important;
+    border-radius: 0;
+
+    &:first-child {
+      border-left: none !important;
+    }
+  }
+
+  // Wrap panels
+  .el-cascader-panel .el-cascader-menu__wrap {
+    height: 208px;
+    .el-cascader-menu__list {
+      padding: 0;
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // MENU ITEMS — Figma: h-32px, px-8px, corner-sm, body-md
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-cascader-node {
+    display: flex;
+    height: var(--er-control-height-md);
+    padding: 0 var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-100);
+    margin: 0 var(--er-shape-spacing-100);
+    align-items: center;
+    gap: var(--er-shape-spacing-50);
+    color: var(--er-text-primary);
+    user-select: none;
+
+    // Label text
+    .el-cascader-node__label {
+      @include typo.body-md;
+      color: var(--er-text-primary);
+      padding: 0;
+      flex: 1;
+    }
+
+    // Expand icon (chevron-right) — Figma: 16px
+    .el-cascader-node__postfix {
+      position: static !important;
+      .el-icon {
+        width: 16px;
+        height: 16px;
+        color: var(--er-icon-secondary);
+      }
+    }
+
+    // Single selection tick icon (prefix that is NOT a checkbox)
+    // Element Plus puts it in __prefix but we move it to the end via flex order
+    // Single selection tick icon
+    .el-cascader-node__prefix:not(.el-checkbox) {
+      display: none;
+    }
+
+    .el-cascader-node__prefix:not(.el-checkbox) svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .el-cascader-node__prefix:not(.el-checkbox) path {
+      fill: currentColor;
+    }
+
+    // Only show tick icon when selected
+    &:not(.is-active) .el-cascader-node__prefix:not(.el-checkbox) {
+      display: none;
+    }
+
+    // Checkbox (multiple mode)
+    // NOTE: .el-cascader-node__prefix IS .el-checkbox (same element in Element Plus DOM)
+    .el-cascader-node__prefix.el-checkbox {
+      margin-right: 0;
+
+      .el-checkbox__inner {
+        width: 16px;
+        height: 16px;
+        border-radius: var(--er-shape-corner-50);
+        border: 1.5px solid var(--er-border-strong);
+      }
+    }
+
+    // Checked / indeterminate — override Element Plus defaults
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: var(--er-action-primary-default) !important;
+      border-color: var(--er-action-primary-default) !important;
+
+      &::after {
+        border-color: var(--er-text-on-action);
+        border-width: 2.5px;
+      }
+    }
+
+    // ── States ──────────────────────────────────────────────────────
+
+    // Hover — Figma: bg-action-neutral-subtle-hover
+    &:not(.is-disabled):hover {
+      background-color: var(--er-action-neutral-subtle-hover);
+    }
+
+    // Active/pressed
+    &:not(.is-disabled):active {
+      background-color: var(--er-action-neutral-subtle);
+    }
+
+    // Selected — Figma: text-brand only, no bg change
+    &.is-active {
+      background-color: transparent;
+
+      .el-cascader-node__label {
+        color: var(--er-action-primary-default) !important;
+      }
+
+      .el-cascader-node__postfix .el-icon {
+        color: var(--er-icon-brand) !important;
+      }
+    }
+
+    // Parent nodes in active path — NEVER show brand icon
+    // (overrides &.is-active when Element Plus adds both classes)
+    &.is-active.in-active-path {
+      .el-cascader-node__postfix .el-icon {
+        color: var(--er-icon-secondary) !important;
+      }
+    }
+
+    // Disabled — Figma: opacity-0.5
+    &.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      .el-cascader-node__label {
+        color: var(--er-text-primary) !important;
+      }
+    }
+
+    // In checked path (parent of selected item) — reset to default, NOT brand
+    &.in-active-path {
+      .el-cascader-node__label {
+        color: var(--er-text-primary);
+      }
+
+      .el-cascader-node__postfix .el-icon {
+        color: var(--er-icon-secondary) !important;
+      }
+    }
+
+    // Default / not selected — ensure icon is secondary
+    &:not(.is-active):not(.in-active-path) {
+      .el-cascader-node__postfix .el-icon {
+        color: var(--er-icon-secondary) !important;
+      }
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // EMPTY STATE
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-cascader-menu__empty-text {
+    @include typo.body-sm;
+    color: var(--er-text-muted);
+    padding: var(--er-shape-spacing-150);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // SEARCH PANEL (when filterable)
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-cascader__search-input {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  .el-cascader__suggestion-panel {
+    .el-cascader__suggestion-item {
+      @include typo.body-md;
+      height: var(--er-control-height-md);
+      padding: 0 var(--er-shape-spacing-100);
+      color: var(--er-text-primary);
+      align-items: flex-start;
+
+      &:hover {
+        background-color: var(--er-action-neutral-subtle-hover);
+      }
+
+      &.is-checked {
+        background-color: transparent;
+        color: var(--er-text-brand);
+      }
+    }
+  }
+}
+
+.custom-cascader__popper.el-tooltip.el-popper {
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+
+  .el-popper__arrow {
+    display: none !important;
+  }
+}