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

package/dist/design-system/components/_checkbox-list.scss

@@ -0,0 +1,18 @@
+// ============================================================================
+// CHECKBOX GROUP STYLES
+// ============================================================================
+// Source: Figma UI Kit Production - Checkbox Group (node-id=40091:3352)
+// Based on: EaeraCheckBoxList.vue component (wraps Element Plus ElCheckboxGroup)
+//
+// ELEMENT PLUS STRUCTURE:
+// .el-checkbox-group
+//   .el-checkbox (children)
+//
+// Figma: horizontal flex with gap 12px between items
+// ============================================================================
+
+.custom-checkbox-list.el-checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: var(--er-shape-spacing-150);
+}

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

@@ -0,0 +1,117 @@
+@use '../themes/aurora/typography/_typography-utils.scss' as typo;
+
+// ============================================================================
+// CHECKBOX COMPONENT STYLES
+// ============================================================================
+// Source: Figma UI Kit Production - Checkboxes (node-id=40091:2987)
+// Based on: EaeraCheckbox.vue component (wraps Element Plus ElCheckbox)
+// IMPORTANT: Colors use Layer 3 tokens only
+//
+// ELEMENT PLUS STRUCTURE:
+// .el-checkbox
+//   .el-checkbox__input           ← State classes here (.is-checked, .is-disabled, .is-indeterminate)
+//     .el-checkbox__inner         ← The checkbox box (visual)
+//       ::after                   ← The checkmark icon (border trick)
+//       ::before                  ← The indeterminate dash (border trick)
+//   .el-checkbox__label           ← Text label (sibling of __input)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────────
+// MIXIN — reusable checkbox visual styles
+// Used by: .custom-checkbox and .custom-tree (tree checkbox variant)
+// ─────────────────────────────────────────────────────────────────────────────
+@mixin checkbox-styles {
+  height: unset;
+  gap: var(--er-shape-spacing-50);
+
+  .el-checkbox__input {
+    height: var(--er-control-height-xs);
+    width: var(--er-control-height-xs);
+    min-width: var(--er-control-height-xs);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-checkbox__inner {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+      border-radius: var(--er-shape-corner-50);
+      border: 1.5px solid var(--er-border-strong);
+      background-color: transparent;
+    }
+
+    // Checked
+    &.is-checked .el-checkbox__inner {
+      background-color: var(--er-action-primary-default);
+      border-color: var(--er-action-primary-default);
+    }
+
+    // Indeterminate
+    &.is-indeterminate .el-checkbox__inner {
+      background-color: var(--er-action-primary-default);
+      border-color: var(--er-action-primary-default);
+
+      &::before {
+        border-color: var(--er-icon-on-action);
+        background-color: var(--er-icon-on-action);
+        height: 2px;
+        left: 2.5px;
+        right: 2.5px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    // Disabled
+    &.is-disabled {
+      opacity: 0.5;
+    }
+  }
+
+  // Hover
+  &:hover:not(.is-disabled) {
+    .el-checkbox__input:not(.is-checked) .el-checkbox__inner {
+      border-color: var(--er-border-action-hover);
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: var(--er-action-primary-hover);
+      border-color: var(--er-action-primary-hover);
+    }
+  }
+}
+
+.custom-checkbox.el-checkbox {
+  @include checkbox-styles;
+
+  // ───────────────────────────────────────────────────────────────────────
+  // LABEL STYLING — state-specific colors per Figma
+  // ───────────────────────────────────────────────────────────────────────
+
+  // Default (unchecked): text-secondary
+  .el-checkbox__label {
+    @include typo.label-lg;
+    color: var(--er-text-secondary);
+    padding-left: 0;
+  }
+
+  // Checked: action color (blue)
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: var(--er-action-primary-default) !important;
+  }
+
+  // Indeterminate: text-primary
+  .el-checkbox__input.is-indeterminate + .el-checkbox__label {
+    color: var(--er-text-primary) !important;
+  }
+
+  // Disabled (uncheck/indeterminate): text-disabled
+  .el-checkbox__input.is-disabled + .el-checkbox__label {
+    color: var(--er-text-muted) !important;
+  }
+
+  // Disabled + Checked: still blue but translucent (opacity-50)
+  .el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
+    color: var(--er-action-primary-default) !important;
+  }
+}

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

@@ -0,0 +1,84 @@
+@use "../themes/aurora/typography/typography-utils" as typo;
+
+.custom-collapse.el-collapse {
+  border-top: none;
+  border-bottom: none;
+  width: 100%;
+
+  // ─── Flatten selector: bỏ .custom-collapse-item.el-collapse-item ────────
+  .el-collapse-item {
+    border-bottom: none;
+    // ── Header
+    .el-collapse-item__header {
+      padding: 0;
+      gap: var(--er-shape-spacing-100);
+      background: transparent;
+      border-bottom: none;
+      min-height: 28px;
+      padding-bottom: var(--er-shape-spacing-150);
+      @include typo.title-lg-em;
+
+      .el-collapse-item__title {
+        color: var(--er-text-primary);
+      }
+    }
+
+    .el-collapse-item__arrow {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+
+    .el-collapse-item__wrap {
+      border-bottom: none;
+      background: transparent;
+    }
+
+    .el-collapse-item__content {
+      padding-bottom: var(--er-shape-spacing-150);
+      @include typo.body-md;
+      color: var(--er-text-secondary);
+    }
+
+    .el-icon {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+      color: var(--er-icon-secondary);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // ─── Title type: md ──────────────────────────────────────────────────────
+  &.md .el-collapse-item {
+    .el-collapse-item__header {
+      min-height: var(--er-control-height-sm);
+      .el-collapse-item__title {
+        @include typo.title-md-em;
+      }
+    }
+  }
+
+  // ─── No border variant ───────────────────────────────────────────────────
+  &.separated .el-collapse-item {
+    border-bottom: 1px solid var(--er-border-subtle);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  // ─── Padded variant ──────────────────────────────────────────────────────
+  &.inset-content .el-collapse-item {
+    .el-collapse-item__header {
+      padding: var(--er-shape-spacing-100);
+    }
+
+    .el-collapse-item__content {
+      padding-inline: var(--er-shape-spacing-150);
+      padding-bottom: var(--er-shape-spacing-150);
+    }
+  }
+}

package/dist/design-system/components/_color-picker.scss

@@ -0,0 +1,195 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+@use './button' as btn;
+
+@mixin btn-secondary-plain-sm {
+  @include typo.label-md;
+  @include btn.btn-plain(
+    var(--er-border-default),
+    var(--er-text-primary),
+    var(--er-action-neutral-subtle-hover),
+    var(--er-action-neutral-subtle-pressed)
+  );
+  height: var(--er-control-height-md);
+  padding: 0 var(--er-shape-spacing-150);
+  gap: var(--er-shape-spacing-100);
+  border-radius: var(--er-shape-corner-100);
+  border-width: 1px;
+  box-shadow: none !important;
+}
+
+@mixin btn-secondary-ghost-sm {
+  @include typo.label-lg;
+  @include btn.btn-ghost(
+    var(--er-text-primary),
+    var(--er-action-neutral-subtle-hover),
+    var(--er-action-neutral-subtle-pressed)
+  );
+  height: var(--er-control-height-md);
+  padding: 0 var(--er-shape-spacing-150);
+  gap: var(--er-shape-spacing-100);
+  border-radius: var(--er-shape-corner-100);
+  box-shadow: none !important;
+}
+
+.custom-color-picker.el-color-picker {
+  .el-color-picker__trigger {
+    border-radius: var(--er-shape-corner-full);
+    border: 1px solid var(--er-border-default);
+    padding: var(--er-shape-spacing-50);
+
+    // ── Inner color swatch: circular
+    .el-color-picker__color {
+      border-radius: var(--er-shape-corner-full);
+      border-color: var(--er-border-subtle);
+
+      &-inner {
+        border-radius: var(--er-shape-corner-full);
+
+        .el-icon {
+          width: var(--er-control-height-xs);
+          height: var(--er-control-height-xs);
+
+          svg {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  // ── Hover state: primary-subtle-hover border
+  &:hover:not(.is-disabled, .is-focused) .el-color-picker__trigger {
+    border-color: var(--er-action-primary-subtle-hover);
+  }
+
+  // ── Focus / open state: primary-subtle-pressed border
+  &.is-focused .el-color-picker__trigger,
+  &:focus-visible:not(.is-disabled) .el-color-picker__trigger {
+    border-color: var(--er-action-primary-subtle-pressed);
+    outline: none;
+  }
+
+  // ── Disabled: opacity 50% on whole element (Figma: opacity: 50%)
+  &.is-disabled .el-color-picker__trigger {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--er-surface-container);
+
+    .el-color-picker__mask {
+      display: none;
+    }
+  }
+
+  // ── Size: sm — 24×24px, padding 2px (Figma: size=sm)
+  &.sm {
+    .el-color-picker__trigger {
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+      padding: 2px;
+    }
+
+    .el-icon {
+      width: var(--er-control-height-xxs) !important;
+      height: var(--er-control-height-xxs) !important;
+    }
+  }
+
+  // ── Size: md — 32×32px (El-Plus default, confirm correctness)
+  &.md {
+    .el-color-picker__trigger {
+      width: var(--er-control-height-md);
+      height: var(--er-control-height-md);
+    }
+  }
+
+  // ── Size: lg — 40×40px (Figma: size=lg)
+  &.lg {
+    .el-color-picker__trigger {
+      width: var(--er-control-height-lg);
+      height: var(--er-control-height-lg);
+    }
+  }
+}
+
+.custom-popper-color-picker.el-popper {
+  background: var(--er-surface-container) !important;
+  border: 1px solid var(--er-border-default) !important;
+  border-radius: var(--er-shape-corner-150) !important; // Figma: shape/corner/md = 12px
+  padding: var(--er-shape-spacing-150) !important; // Figma: shape/spacing/md = 12px
+
+  // Figma: level 2 shadow (shadow/highlight-01 + shadow/ambient-02 + shadow/ambient-03)
+  @include elevation.elevation-level-2;
+
+  .el-color-picker-panel {
+    background: transparent !important;
+    padding: 0;
+    .el-color-alpha-slider__thumb {
+      width: 10px;
+      height: var(--er-control-height-xxs);
+      border-radius: var(--er-shape-corner-50);
+      top: -2px !important;
+      border: 1px solid var(--er-border-default);
+    }
+
+    .el-color-hue-slider__thumb {
+      width: var(--er-control-height-xxs);
+      height: 10px;
+      border-radius: var(--er-shape-corner-50);
+      border: 1px solid var(--er-border-default);
+      left: -2px !important;
+    }
+
+    .el-color-svpanel__cursor {
+      width: 8px;
+      height: 8px;
+      box-shadow:
+        0 0 0 4px #fff,
+        inset 0 0 1px 1px var(--er-border-default),
+        0 0 1px 2px var(--er-border-default);
+    }
+  }
+
+  .el-color-picker-panel__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--er-shape-spacing-100);
+    .el-button.is-text {
+      @include btn-secondary-ghost-sm;
+      margin-right: var(--er-shape-spacing-100);
+    }
+
+    .el-button.is-plain {
+      @include btn-secondary-plain-sm;
+    }
+
+    .el-input {
+      flex: 1 1 0;
+      min-width: 0;
+      width: unset;
+      height: var(--er-control-height-md);
+
+      &__wrapper {
+        background-color: var(--er-surface-container);
+        padding: 0 var(--er-shape-spacing-100);
+        border: 1px solid var(--er-border-default);
+        box-shadow: none;
+        border-radius: var(--er-shape-corner-100);
+
+        &:hover {
+          border: 1px solid var(--er-action-primary-hover);
+          box-shadow: none;
+        }
+
+        &.is-focus {
+          border: 1px solid var(--er-action-primary-default);
+        }
+
+        .el-input__inner {
+          color: var(--er-text-primary);
+        }
+      }
+    }
+  }
+}

package/dist/design-system/components/_country-flag.scss

@@ -0,0 +1,56 @@
+// ─────────────────────────────────────────────────────────────────────────
+// Country Flag (EaeraCountryFlag)
+// Component: eaera-widgets-vue3 → src/components/custom/EaeraCountryFlag.vue
+// SVG assets: eaera-widgets-vue3 → src/assets/icons/flags/*.svg (ISO 3166-1 alpha-2)
+// Variants: radius none | sm | md | full, optional border ring
+// ─────────────────────────────────────────────────────────────────────────
+
+.eaera-country-flag {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  vertical-align: middle;
+  background-color: transparent;
+  container-type: size;
+
+  // ── Radius variants ──
+  &--sm {
+    border-radius: var(--er-shape-corner-25);
+  }
+
+  &--md {
+    border-radius: var(--er-shape-corner-50);
+  }
+
+  &--full {
+    border-radius: var(--er-shape-corner-full);
+    background-color: var(--er-neutral-white);
+  }
+
+  // ── Subtle ring for flags with light edges (same border token as icons) ──
+  &--border {
+    box-shadow: inset 0 0 0 1px var(--er-border-default);
+  }
+
+  &__svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  // ── Fallback when no flag matches the given country code ──
+  &__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: var(--er-neutral-200);
+    color: var(--er-neutral-600);
+    font-size: 40cqh;
+    font-weight: 600;
+    line-height: 1;
+  }
+}

package/dist/design-system/components/_currency-icon.scss

@@ -0,0 +1,19 @@
+.eaera-currency-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.eaera-currency-icon__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--er-gray-200);
+  color: var(--er-gray-600);
+  text-transform: uppercase;
+  font-weight: 600;
+  line-height: 1;
+  overflow: hidden;
+}