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

package/dist/design-system/components/_pl-calendar-widget.scss

@@ -0,0 +1,171 @@
+// ============================================================================
+// EaeraWidgetPLCalendar — P/L Calendar widget styles
+// Design source: Figma 7DD5x9AmpudFQRF9mjSclE node 2093-100492
+// Uses --er-* custom properties (host app must provide design tokens)
+// ============================================================================
+
+.pl-calendar-widget {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  background: var(--er-surface-container);
+  border: 1px solid var(--er-border-default);
+  border-radius: var(--er-shape-corner-200);
+  padding: var(--er-shape-spacing-200);
+  gap: var(--er-shape-spacing-200);
+
+  // ── Header ───────────────────────────────────────────────────────────────
+  &__header {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--er-shape-spacing-100) 0;
+  }
+
+  &__title {
+    color: var(--er-text-primary);
+    font-family: var(--er-typo-title-md-font);
+    font-size: var(--er-typo-title-md-sz);
+    line-height: var(--er-typo-title-md-line-hg);
+    font-weight: var(--er-typo-title-md-wg-em);
+    letter-spacing: var(--er-typo-title-md-tracking);
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--er-shape-spacing-100);
+  }
+
+  &__month-label {
+    color: var(--er-text-primary);
+    font-family: var(--er-typo-label-lg-font);
+    font-size: var(--er-typo-label-lg-sz);
+    line-height: var(--er-typo-label-lg-line-hg);
+    font-weight: var(--er-typo-label-lg-wg);
+    letter-spacing: var(--er-typo-label-lg-tracking);
+  }
+
+  &__nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: var(--er-shape-corner-100);
+    background: transparent;
+    cursor: pointer;
+    color: var(--er-text-secondary);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background: var(--er-surface-muted);
+      color: var(--er-text-primary);
+    }
+
+    &:active {
+      background: var(--er-border-subtle);
+    }
+  }
+
+  &__nav-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  // ── Body (calendar grid) ─────────────────────────────────────────────────
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    min-height: 452px;
+    padding: 0 var(--er-shape-spacing-300) var(--er-shape-spacing-200);
+  }
+
+  // ── Day headers row ──────────────────────────────────────────────────────
+  &__day-headers {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-self: stretch;
+  }
+
+  &__day-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--er-shape-spacing-150) 0;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--er-text-muted);
+  }
+
+  // ── Calendar grid (date cells) ───────────────────────────────────────────
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-auto-rows: 1fr;
+    flex: 1 1 0;
+    align-self: stretch;
+    gap: 1px;
+  }
+
+  &__cell {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: var(--er-shape-spacing-100);
+    border: 1px solid var(--er-border-subtle);
+
+    // States
+    &--profit {
+      background: var(--er-surface-success-subtle);
+    }
+
+    &--loss {
+      background: var(--er-surface-danger-subtle);
+    }
+
+    &--neutral {
+      background: var(--er-surface-container);
+    }
+
+    &--weekend {
+      background: var(--er-surface-subtle);
+    }
+  }
+
+  &__date {
+    color: var(--er-text-muted);
+    font-family: var(--er-typo-body-sm-font);
+    font-size: var(--er-typo-body-sm-sz);
+    line-height: var(--er-typo-body-sm-line-hg);
+    font-weight: var(--er-typo-body-sm-wg);
+    letter-spacing: var(--er-typo-body-sm-tracking);
+  }
+
+  &__spacer {
+    flex: 1 1 auto;
+  }
+
+  &__amount {
+    align-self: flex-end;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.2;
+
+    &--profit {
+      color: var(--er-text-success);
+    }
+
+    &--loss {
+      color: var(--er-text-danger);
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ============================================================================
+// POPCONFIRM — Design System Overrides
+// Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40239-2328
+// ============================================================================
+// Popup panel: bg white, border subtle, border-radius sm (8px), padding 8px,
+//   box-shadow soft, width 180px
+// Title row: icon 16px + 8px gap + text 12px/secondary
+// Action row: Cancel (bordered h-24 px-8 r-xs) + Confirm (primary h-24 px-8 r-xs)
+// ============================================================================
+
+// ── Popover panel that contains popconfirm content
+// El-Plus teleports the panel to <body> with class .el-popper.is-light
+// :has() targets the panel only when it contains popconfirm content
+.el-popper.custom-popper {
+  background: var(--er-surface-container);
+  border: 1px solid var(--er-border-subtle);
+  border-radius: var(--er-shape-corner-100);
+  padding: var(--er-shape-spacing-100);
+  @include typo.body-sm;
+
+  // Arrow inherits the panel border color
+  > .el-popper__arrow::before {
+    border-color: var(--er-border-subtle);
+    background: var(--er-surface-container);
+  }
+
+  // Action row
+  .el-popconfirm__action {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--er-shape-spacing-100);
+    margin-top: var(--er-shape-spacing-100);
+
+    .custom-button.el-button {
+      margin: 0;
+    }
+  }
+
+  .el-popconfirm__main {
+    color: var(--er-text-secondary);
+  }
+
+  .el-popconfirm__icon {
+    margin-right: var(--er-shape-spacing-100) !important;
+    width: var(--er-control-height-xxs) !important;
+    height: var(--er-control-height-xxs) !important;
+
+    svg {
+      width: var(--er-control-height-xxs) !important;
+      height: var(--er-control-height-xxs) !important;
+    }
+  }
+}

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

@@ -0,0 +1,267 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+@mixin dropdown-item($height, $padding-x, $radius, $padding-y, $icon-size) {
+  padding: $padding-y 0 !important;
+
+  .el-scrollbar__view,
+  .el-dropdown-menu {
+    padding: 0 $padding-y;
+
+    li,
+    .el-dropdown-menu__item {
+      height: $height;
+      min-height: $height;
+      padding: 0 $padding-x;
+      border-radius: $radius;
+
+      @content;
+
+      &.is-selected {
+        .custom-popper__option-text{
+          color: var(--er-text-brand);
+        }
+
+        .custom-popper__option-prefix {
+          color: var(--er-icon-brand);
+        }
+      }
+    }
+
+    .el-tree-node__content,
+    .el-tree-node .is-current > .el-tree-node__content {
+      height: $height;
+      min-height: $height;
+      padding: 0;
+      border-radius: $radius;
+      display: flex;
+      gap: var(--er-shape-corner-100);
+
+      @content;
+    }
+
+    .custom-popper__option-prefix svg,
+    .custom-popper__option-suffix svg {
+      width: $icon-size;
+      height: $icon-size;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.custom-popper.el-popper {
+  background: var(--er-surface-elevated) !important;
+  border: 1px solid var(--er-border-subtle) !important;
+  @include elevation.elevation-level-2;
+
+  .el-select__selection {
+    padding: 0 var(--er-shape-spacing-100);
+
+    .el-select__selected-item .el-tag {
+      gap: var(--er-shape-spacing-50);
+      border-radius: var(--er-shape-corner-50);
+      background-color: var(--er-surface-muted);
+      height: var(--er-control-height-xs);
+      padding: 0 var(--er-shape-spacing-100);
+
+      .el-tag__content {
+        @include typo.label-md;
+        color: var(--er-text-secondary);
+      }
+
+      .el-tag__close {
+        width: 12px;
+        height: 12px;
+        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);
+        }
+      }
+    }
+  }
+
+  .custom-popper__option-tick {
+    color: var(--er-icon-brand);
+    width: var(--er-control-height-xs);
+    height: var(--er-control-height-xs);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .custom-popper__option-checkbox {
+    pointer-events: none;
+  }
+
+  .el-select-dropdown__item {
+    justify-content: space-between;
+    &.is-selected:after {
+      display: none !important;
+    }
+  }
+
+  .el-popper__arrow,
+  .el-popper__arrow::before {
+    display: none !important;
+  }
+
+  .el-scrollbar {
+    &__wrap,
+    .el-dropdown__list {
+      max-height: 280px;
+      padding: 0 !important;
+    }
+
+    &__view {
+      margin: 0;
+    }
+  }
+
+  .el-dropdown-menu {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    overflow: hidden !important;
+    box-shadow: none !important;
+  }
+
+  .el-dropdown__list {
+    padding: 0;
+    margin: 0;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // MENU ITEM — base styles (shared between li and el-dropdown-menu__item)
+  // ─────────────────────────────────────────────────────────────────────
+  li {
+    display: flex;
+    height: var(--er-control-height-md);
+    min-height: var(--er-control-height-md);
+    padding: 0 var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-100);
+    gap: var(--er-shape-spacing-100);
+    align-items: center;
+    margin: 0;
+    border: none;
+    background-color: transparent;
+
+    @include typo.body-md;
+    color: var(--er-text-primary) !important;
+
+    > div {
+      display: flex;
+      align-items: center;
+      gap: var(--er-shape-spacing-100);
+      flex: 1 0 0;
+      align-self: stretch;
+    }
+
+    // — Hover
+    &:hover:not(.is-disabled),
+    &.highlighted:not(.is-disabled) {
+      background-color: var(--er-action-neutral-subtle-hover);
+    }
+
+    // — Pressed
+    &:active:not(.is-disabled) {
+      background-color: var(--er-action-neutral-subtle-pressed);
+    }
+
+    // — Disabled
+    &.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &.danger{
+    li.is-selected {
+      background-color: var(--er-action-danger-subtle-pressed,);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // SIZE VARIANTS
+  // ─────────────────────────────────────────────────────────────────────
+  &.sm {
+    border-radius: var(--er-shape-corner-100) !important;
+    @include dropdown-item(
+      var(--er-control-height-sm),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-75),
+      var(--er-shape-spacing-50),
+      var(--er-control-height-xxs)
+    ) {
+      @include typo.body-sm;
+
+      > div {
+        gap: var(--er-shape-spacing-50);
+      }
+    }
+
+    .custom-popper__option-tick {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+  }
+
+  &.md {
+    border-radius: var(--er-shape-corner-150) !important;
+    @include dropdown-item(
+      var(--er-control-height-md),
+      var(--er-shape-spacing-75),
+      var(--er-shape-corner-100),
+      var(--er-shape-spacing-75),
+      var(--er-control-height-xs)
+    ) {
+      > div {
+        gap: var(--er-shape-spacing-100);
+      }
+    }
+  }
+
+  &.lg {
+    border-radius: var(--er-shape-corner-200) !important;
+    @include dropdown-item(
+      var(--er-control-height-lg),
+      var(--er-shape-spacing-75),
+      var(--er-shape-corner-150),
+      var(--er-shape-spacing-75),
+      var(--er-control-height-xs)
+    ) {
+      > div {
+        gap: var(--er-shape-spacing-100);
+      }
+    }
+  }
+
+  &.xl {
+    border-radius: var(--er-shape-corner-200) !important;
+    @include dropdown-item(
+      var(--er-control-height-xl),
+      var(--er-shape-spacing-75),
+      var(--er-shape-corner-150),
+      var(--er-shape-spacing-75),
+      var(--er-control-height-xs)
+    ) {
+      > div {
+        gap: var(--er-shape-spacing-100);
+      }
+    }
+
+    .el-select-dropdown__item {
+      @include typo.body-lg;
+    }
+  }
+}

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

@@ -0,0 +1,153 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin progress-status($color) {
+  .el-progress-bar__inner,
+  .el-progress-circle__path {
+    background-color: $color;
+    stroke: $color;
+  }
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-progress.el-progress {
+  // ── Linear ──
+  &--line {
+    .el-progress-bar__outer {
+      background-color: var(--er-surface-muted);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+
+    .el-progress-bar__inner {
+      background-color: var(--er-border-brand);
+      border-radius: 2px;
+    }
+
+    .el-progress__text {
+      @include typo.label-md;
+      color: var(--er-text-secondary) !important;
+      font-size: var(--er-typo-label-md-sz) !important;
+
+      margin-left: 4px;
+    }
+  }
+
+  // ── Status ──
+  &.is-success {
+    @include progress-status(var(--er-border-success));
+  }
+
+  &.is-warning {
+    @include progress-status(var(--er-border-warning));
+  }
+
+  &.is-danger {
+    @include progress-status(var(--er-border-danger));
+  }
+
+  &.is-information {
+    @include progress-status(var(--er-border-information));
+  }
+
+  &.is-primary {
+    @include progress-status(var(--er-border-brand));
+  }
+
+  // ── Circle / Dashboard ──
+  &--circle,
+  &--dashboard {
+    .el-progress-circle__track {
+      stroke: var(--er-surface-muted);
+    }
+
+    .el-progress-circle__path {
+      stroke: var(--er-border-brand);
+      stroke-linecap: round;
+    }
+
+    .el-progress__text {
+      .progress-text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-self: stretch;
+
+        .progress-percentage {
+          color: var(--er-text-primary);
+          @include typo.title-md-em;
+        }
+
+        .progress-description {
+          color: var(--er-text-muted);
+          text-align: center;
+          @include typo.body-sm;
+          align-self: stretch;
+        }
+      }
+    }
+  }
+
+  // ── Dashboard ──
+  &--dashboard {
+    svg {
+      display: block;
+    }
+  }
+
+  // ── SM ──
+  &.sm {
+    &.el-progress--line {
+      .el-progress-bar__outer,
+      .el-progress-bar__inner {
+        height: 6px !important;
+      }
+    }
+
+    &.el-progress--circle,
+    &.el-progress--dashboard {
+      width: 100px;
+
+      .el-progress-circle {
+        width: 100px !important;
+        height: 100px !important;
+      }
+
+      svg {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+
+  // ── MD ──
+  &.md {
+    &.el-progress--line {
+      .el-progress-bar__outer,
+      .el-progress-bar__inner {
+        height: 8px !important;
+      }
+    }
+
+    &.el-progress--circle,
+    &.el-progress--dashboard {
+      width: 120px;
+
+      .el-progress-circle {
+        width: 120px !important;
+        height: 120px !important;
+      }
+
+      svg {
+        width: 120px;
+        height: 120px;
+      }
+
+      .el-progress__text {
+        .progress-percentage {
+          @include typo.title-lg-em;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+@use "../themes/aurora/typography/typography-utils" as typo;
+// ─── Base ─────────────────────────────────────────────────────────────────────
+.custom-radio.el-radio-group {
+  .el-radio {
+    gap: var(--er-shape-spacing-50);
+    height: var(--er-control-height-xs);
+  }
+
+  display: flex;
+  gap: var(--er-shape-spacing-150);
+
+  .el-radio__inner {
+    width: var(--er-control-height-xxs);
+    height: var(--er-control-height-xxs);
+    border-width: 1.5px;
+
+    &::after {
+      width: 6px;
+      height: 6px;
+    }
+  }
+
+  .el-radio__input .el-radio__inner {
+    border-color: var(--er-border-default);
+    background-color: transparent;
+    margin: 2px;
+  }
+
+  .el-radio__input.is-checked .el-radio__inner {
+    border-color: var(--er-action-primary-default);
+    background-color: var(--er-action-primary-default);
+
+    &::after {
+      background-color: var(--er-surface-fixed-white);
+    }
+  }
+
+  .el-radio__input.is-disabled {
+    opacity: 0.5;
+
+    &.is-checked .el-radio__inner {
+      border-color: var(--er-action-primary-default);
+      background-color: var(--er-action-primary-default);
+
+      &::after {
+        background-color: var(--er-surface-fixed-white);
+      }
+    }
+  }
+
+  .el-radio__label {
+    color: var(--er-text-secondary);
+    padding-left: 0;
+    @include typo.label-lg;
+  }
+
+  .el-radio__input.is-checked + .el-radio__label {
+    color: var(--er-action-primary-default) !important;
+  }
+
+  .el-radio__input.is-disabled + .el-radio__label {
+    opacity: 0.5;
+  }
+
+  .el-radio__input.is-disabled.is-checked + .el-radio__label {
+    color: var(--er-action-primary-default) !important;
+  }
+}