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

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

@@ -0,0 +1,748 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+// ─── Mixins ──────────────────────────────────────────────────────────────────
+
+@mixin input-shell($radius: var(--er-shape-corner-100)) {
+  border: 1px solid var(--er-border-default);
+  border-radius: $radius;
+  background-color: var(--er-surface-container);
+  box-shadow: none !important;
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--er-action-primary-hover);
+  }
+  &.is-focus,
+  &:focus-within {
+    border-color: var(--er-action-primary-default);
+  }
+}
+
+@mixin input-danger {
+  &.is-danger,
+  &.danger {
+    .el-input__wrapper {
+      border-color: var(--er-border-danger);
+      &:hover {
+        border-color: var(--er-border-danger);
+      }
+      &.is-focus {
+        border-color: var(--er-action-primary-default);
+      }
+    }
+  }
+}
+
+@mixin icon-size($size) {
+  .el-icon {
+    width: $size;
+    height: $size;
+  }
+}
+
+.custom-date-time-picker.el-date-editor.el-input,
+.custom-date-picker.el-date-editor.el-input {
+  .el-input__wrapper {
+    @include input-shell;
+    height: var(--er-control-height-md);
+    padding: 0 var(--er-shape-spacing-100);
+    gap: var(--er-shape-spacing-50);
+  }
+
+  .el-input__inner {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  .el-input__prefix,
+  .el-input__suffix {
+    display: flex;
+    align-items: center;
+    @include icon-size(var(--er-control-height-xxs));
+    .el-icon {
+      margin-right: 0;
+      color: var(--er-icon-secondary);
+
+      &.clear-icon {
+        width: 12px;
+        height: 12px;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.sm {
+    height: var(--er-control-height-sm);
+
+    .el-input__wrapper {
+      height: var(--er-control-height-sm);
+      padding: 0 var(--er-shape-spacing-75);
+      gap: var(--er-shape-spacing-50);
+      border-radius: var(--er-shape-corner-75);
+    }
+    .el-input__inner {
+      @include typo.body-sm;
+      color: var(--er-text-primary);
+      height: var(--er-control-height-sm);
+      &::placeholder {
+        @include typo.body-sm;
+        color: var(--er-text-muted);
+      }
+    }
+    .el-input__prefix,
+    .el-input__suffix {
+      @include icon-size(12px);
+      .el-icon.clear-icon {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &.lg {
+    height: var(--er-control-height-lg);
+
+    .el-input__wrapper {
+      height: var(--er-control-height-lg);
+      padding: 0 var(--er-shape-spacing-150);
+      gap: var(--er-shape-spacing-75);
+      border-radius: var(--er-shape-corner-150);
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      @include icon-size(var(--er-control-height-xxs));
+    }
+  }
+
+  &.xl {
+    height: var(--er-control-height-xl);
+
+    .el-input__wrapper {
+      height: var(--er-control-height-xl);
+      padding: 0 var(--er-shape-spacing-200);
+      gap: var(--er-shape-spacing-100);
+      border-radius: var(--er-shape-corner-150);
+    }
+
+    .el-input__inner {
+      @include typo.body-lg;
+      color: var(--er-text-primary);
+      height: var(--er-control-height-xl);
+      &::placeholder {
+        @include typo.body-lg;
+        color: var(--er-text-muted);
+      }
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      @include icon-size(var(--er-control-height-xs));
+      .el-icon.clear-icon {
+        width: var(--er-control-height-xxs);
+        height: var(--er-control-height-xxs);
+      }
+    }
+  }
+
+  @include input-danger;
+
+  &.is-disabled .el-input__wrapper {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.no-icon .el-input__prefix {
+    display: none;
+  }
+}
+
+.custom-date-time-picker.el-date-editor.el-range-editor,
+.custom-date-picker.el-date-editor.el-range-editor {
+  @include input-shell;
+  height: var(--er-control-height-md);
+  width: 100%;
+  padding: 0 var(--er-shape-spacing-100);
+  border-radius: var(--er-shape-corner-100) !important;
+
+  .el-icon {
+    width: var(--er-control-height-xs);
+    height: var(--er-control-height-xs);
+    color: var(--er-icon-secondary);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.el-range__close-icon {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+  }
+
+  .el-range-input {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+    background: transparent;
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  &.sm {
+    max-height: var(--er-control-height-sm) !important;
+    padding: 0 var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-50);
+    .el-range-input,
+    .el-range-separator {
+      @include typo.body-sm;
+    }
+    .el-input__suffix {
+      @include icon-size(var(--er-control-height-xxs));
+    }
+    .el-icon.el-range__close-icon {
+      width: 12px;
+      height: 12px;
+    }
+    .el-range__icon {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+    .el-input__wrapper {
+      border-radius: var(--er-shape-corner-50);
+    }
+
+    .el-icon {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.md {
+    max-height: var(--er-control-height-md) !important;
+    min-height: var(--er-control-height-md) !important;
+    padding: 0 var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-100);
+    .el-range-input,
+    .el-range-separator {
+      @include typo.body-md;
+    }
+    .el-input__suffix,
+    .el-range__icon,
+    .el-range__close-icon {
+      @include icon-size(var(--er-control-height-xs));
+    }
+  }
+
+  &.lg {
+    height: var(--er-control-height-lg) !important;
+    padding: 0 var(--er-shape-spacing-150);
+    .el-input__suffix,
+    .el-range__icon,
+    .el-range__close-icon {
+      @include icon-size(var(--er-control-height-xs));
+    }
+  }
+
+  @include input-danger;
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// ─── Popper ───────────────────────────────────────────────────────────
+
+.custom-date-time-picker__popper.el-popper,
+.custom-date-picker__popper.el-popper {
+  border-radius: var(--er-shape-corner-150) !important;
+  border: none !important;
+
+  .el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
+  .el-picker-panel__sidebar + .el-picker-panel__body {
+    margin-left: 130px !important;
+  }
+
+  .el-date-picker .el-picker-panel__content {
+    width: 248px;
+    margin: 0;
+    padding: 0 var(--er-shape-spacing-150);
+  }
+
+  .el-picker-panel__body::after,
+  .el-picker-panel__body-wrapper::after {
+    display: none;
+  }
+
+  .el-picker-panel {
+    width: 250px;
+    line-height: unset;
+
+    &.el-date-range-picker {
+      width: 496px;
+
+      &.has-sidebar {
+        width: fit-content;
+        max-width: none;
+      }
+    }
+
+    &.el-date-picker {
+      .el-date-picker__header-label {
+        position: relative;
+        top: 3px;
+      }
+    }
+  }
+
+  .el-picker-panel__sidebar {
+    width: 130px;
+    padding: var(--er-shape-spacing-100);
+    border-right: 1px solid var(--er-border-default);
+
+    .el-picker-panel__shortcut {
+      min-height: var(--er-control-height-md);
+      padding: 0 var(--er-shape-spacing-100);
+      color: var(--er-text-secondary);
+      border-radius: var(--er-shape-corner-100);
+      @include typo.body-md;
+
+      &:hover {
+        background-color: var(--er-action-neutral-subtle-hover);
+      }
+    }
+  }
+
+  // ─── Date / Range panel ─────────────────────────────────────────────────────
+
+  .el-date-picker,
+  .el-date-range-picker {
+    background: var(--er-surface-container);
+    border: 1px solid var(--er-border-default);
+    border-radius: var(--er-shape-corner-150);
+    @include elevation.elevation-level-2;
+
+    // ─── Header (shared icon-btn style) ─────────────────────────────────────
+    .el-date-range-picker__header {
+      @apply flex;
+      height: var(--er-control-height-sm);
+      > button:nth-child(-n + 2) {
+        order: 1;
+      }
+      > button:nth-child(n + 3) {
+        order: 4;
+      }
+      > button:nth-child(n + 4) {
+        order: 3;
+      }
+      > div {
+        @apply order-2 mx-auto;
+      }
+    }
+
+    .el-date-picker__header,
+    .el-date-range-picker__header {
+      &.el-date-picker__header--bordered,
+      &.el-date-range-picker__header--bordered {
+        border-color: var(--er-border-subtle) !important;
+      }
+
+      .el-picker-panel__icon-btn .el-icon {
+        width: var(--er-control-height-sm);
+        height: var(--er-control-height-sm);
+        border: 1px solid var(--er-border-default);
+        border-radius: var(--er-shape-corner-50);
+        background-color: var(--er-action-neutral-subtle-default);
+        color: var(--er-action-neutral-default);
+        &:hover {
+          background-color: var(--er-action-neutral-subtle-hover);
+        }
+      }
+    }
+
+    .el-date-picker__header,
+    .el-date-range-picker__header {
+      .el-date-picker__header-label,
+      .el-date-range-picker__header-label {
+        &:first-child {
+          margin-right: var(--er-shape-spacing-50);
+        }
+        color: var(--er-action-neutral-default);
+        padding: 0;
+        @include typo.label-lg;
+
+        &:hover {
+          color: var(--er-action-primary-default);
+        }
+      }
+    }
+
+    .el-date-range-picker__content.is-left {
+      border-color: var(--er-border-subtle) !important;
+    }
+
+    // ─── Weekday row ─────────────────────────────────────────────────────────
+
+    .el-date-table {
+      border-spacing: 0 2px;
+      border-collapse: separate;
+      th {
+        color: var(--er-text-muted);
+        width: var(--er-control-height-md);
+        padding: 0;
+        width: var(--er-control-height-md);
+        border-bottom: unset;
+        @include typo.body-sm;
+      }
+
+      td {
+        padding: 0;
+        border-radius: var(--er-shape-corner-50);
+
+        .el-date-table-cell {
+          padding: 0;
+          width: var(--er-control-height-md);
+          height: var(--er-control-height-md);
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+        }
+
+        .el-date-table-cell__text {
+          @include typo.body-sm;
+          @apply text-center;
+          color: var(--er-text-secondary);
+          width: var(--er-control-height-sm);
+          height: var(--er-control-height-sm);
+          line-height: var(--er-control-height-sm);
+        }
+
+        &.next-month .el-date-table-cell__text,
+        &.prev-month .el-date-table-cell__text {
+          color: var(--er-text-muted);
+        }
+
+        &.available:hover {
+          background-color: var(--er-action-primary-subtle);
+          color: var(--er-action-primary-default);
+        }
+
+        &.today .el-date-table-cell__text {
+          &::after {
+            content: '';
+            display: block;
+            width: var(--er-shape-spacing-50);
+            height: var(--er-shape-spacing-50);
+            background-color: var(--er-icon-danger);
+            border-radius: 50%;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 0;
+          }
+        }
+
+        &.current:not(.disabled) {
+          background-color: var(--er-action-primary-default);
+          .el-date-table-cell__text {
+            background-color: transparent;
+            color: var(--er-text-on-action);
+          }
+        }
+
+        &.in-range .el-date-table-cell {
+          background-color: var(--er-action-primary-subtle);
+        }
+
+        &.start-date .el-date-table-cell__text,
+        &.end-date .el-date-table-cell__text {
+          background-color: var(--er-action-primary-default);
+          color: var(--er-text-on-action);
+        }
+
+        &.available.in-range.start-date .el-date-table-cell {
+          background-color: var(--er-action-primary-default);
+          border-top-left-radius: var(--er-shape-spacing-50);
+          border-bottom-left-radius: var(--er-shape-spacing-50);
+          margin: 0;
+        }
+
+        &.available.in-range.end-date .el-date-table-cell {
+          background-color: var(--er-action-primary-default);
+          border-top-right-radius: var(--er-shape-spacing-50);
+          border-bottom-right-radius: var(--er-shape-spacing-50);
+          margin: 0;
+        }
+
+        &.disabled .el-date-table-cell__text {
+          color: var(--er-text-muted);
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    // ─── Year / Month cells ──────────────────────────────────────────────────
+
+    .el-year-table td,
+    .el-month-table td {
+      padding: var(--er-shape-spacing-100) 0;
+
+      .el-date-table-cell {
+        height: var(--er-control-height-md);
+        padding: var(--er-shape-spacing-100) 0;
+      }
+
+      .el-date-table-cell__text {
+        @include typo.body-sm;
+        color: var(--er-text-secondary);
+        border-radius: var(--er-shape-corner-100);
+        height: var(--er-control-height-md);
+      }
+
+      &:not(.disabled):hover .el-date-table-cell__text {
+        background-color: var(--er-action-primary-subtle);
+        color: var(--er-action-primary-default);
+      }
+
+      &.current:not(.disabled) .el-date-table-cell__text {
+        background-color: var(--er-action-primary-default);
+        color: var(--er-text-on-action);
+      }
+
+      &.disabled .el-date-table-cell__text {
+        color: var(--er-text-muted);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-year-table,
+    .el-month-table {
+      border-spacing: var(--er-shape-spacing-50);
+      border-collapse: separate;
+
+      td {
+        padding: 0;
+
+        .el-date-table-cell {
+          padding: 0;
+
+          .el-date-table-cell__text {
+            @include typo.label-lg;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 53px;
+          }
+        }
+      }
+    }
+
+    // ─── Time header (date + time inputs) ────────────────────────────────────
+
+    .el-date-picker__time-header,
+    .el-date-range-picker__time-header {
+      border: none !important;
+      display: flex;
+      gap: var(--er-shape-spacing-100) !important;
+
+      .el-date-picker__editor-wrap,
+      .el-date-range-picker__time-picker-wrap {
+        padding: 0;
+      }
+
+      .el-input__wrapper {
+        @include input-shell;
+        padding: 0 var(--er-shape-spacing-100);
+        height: var(--er-control-height-md);
+      }
+
+      .el-input__inner {
+        @include typo.body-md;
+        color: var(--er-text-primary);
+        &::placeholder {
+          color: var(--er-text-muted);
+        }
+      }
+
+      .el-date-range-picker__editors-wrap > .el-date-range-picker__time-picker-wrap:first-child {
+        .el-input__wrapper {
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .el-date-range-picker__time-header {
+      padding: var(--er-shape-spacing-150);
+      > span:nth-child(2) {
+        display: none;
+      }
+
+      .el-date-range-picker__editors-wrap {
+        &.is-right {
+          text-align: left;
+        }
+      }
+    }
+
+    table {
+      width: unset;
+    }
+
+    &.single-panel {
+      width: 250px;
+      max-width: 250px;
+      .el-picker-panel__body {
+        min-width: 248px;
+        max-width: 248px;
+      }
+
+      .el-date-range-picker__time-header {
+        display: flex;
+        flex-direction: column;
+
+        .el-date-range-picker__editors-wrap {
+          &::before {
+            content: 'Start';
+            @include typo.label-lg;
+            color: var(--er-text-primary);
+          }
+
+          &.is-right {
+            &::before {
+              content: 'End';
+            }
+          }
+        }
+      }
+    }
+
+    // ─── Footer ──────────────────────────────────────────────────────────────
+
+    .el-picker-panel__footer {
+      display: none;
+    }
+
+    // ─── Embedded time panel ─────────────────────────────────────────────────
+
+    .el-time-panel {
+      background: var(--er-surface-container);
+      border: 1px solid var(--er-border-default);
+      border-radius: var(--er-shape-corner-150);
+
+      .el-time-spinner__item {
+        @include typo.body-md;
+        color: var(--er-text-primary);
+        height: var(--er-control-height-md);
+        line-height: var(--er-control-height-md);
+
+        &:hover:not(.is-disabled):not(.is-active) {
+          background-color: var(--er-surface-brand-subtle);
+        }
+        &.is-active {
+          color: var(--er-action-primary-default);
+        }
+        &.is-disabled {
+          color: var(--er-text-muted);
+        }
+      }
+
+      .el-time-panel__footer {
+        border-top: 1px solid var(--er-border-subtle);
+        padding: var(--er-shape-spacing-50) var(--er-shape-spacing-150);
+
+        .el-time-panel__btn {
+          @include typo.body-sm;
+          color: var(--er-text-secondary);
+          &.confirm {
+            color: var(--er-action-primary-default);
+          }
+        }
+      }
+    }
+  }
+
+  // ─── Misc ───────────────────────────────────────────────────────────────────
+
+  .el-date-picker .el-picker-panel__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--er-shape-spacing-100);
+
+    .el-date-picker__time-header {
+      border-top: 1px solid var(--er-border-default) !important;
+      border-bottom: none !important;
+      padding: var(--er-shape-spacing-150);
+      order: 3;
+    }
+  }
+
+  .el-date-range-picker .el-picker-panel__body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-width: 496px;
+    max-width: 496px;
+
+    .el-date-range-picker__content {
+      flex: 1;
+      padding: var(--er-shape-spacing-150);
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--er-shape-spacing-100);
+    }
+
+    .el-date-range-picker__time-header {
+      flex: 0 0 100%;
+      border-top: 1px solid var(--er-border-default) !important;
+      border-bottom: none !important;
+      order: 3;
+    }
+  }
+
+  .el-picker-panel__icon-btn {
+    margin-top: 0;
+    padding: 0;
+    &.arrow-right {
+      margin-right: var(--er-shape-spacing-50);
+    }
+    &.arrow-left {
+      margin-left: var(--er-shape-spacing-50);
+    }
+  }
+
+  .el-popper__arrow::before {
+    background: var(--er-surface-elevated) !important;
+    border: 1px solid var(--er-border-subtle) !important;
+  }
+
+  .el-picker-panel:not(.el-date-range-picker) .el-picker-panel__footer {
+    display: none !important;
+  }
+
+  .el-time-panel__content::before {
+    border-color: var(--er-border-default);
+  }
+}
+
+.custom-date-picker__popper.el-popper {
+  .el-date-picker .el-picker-panel__content {
+    padding-bottom: var(--er-shape-spacing-150);
+  }
+}