@falcon-ui/falcon-ui 1.0.0

package/theme/src/date-picker.scss

@@ -0,0 +1,87 @@
+@use './mixins/bem.scss' as bem;
+@use './ep-vars.scss' as ep-var;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as ep-var-mixin;
+@use 'element-plus/theme-chalk/src/date-picker.scss';
+
+// Keep EP date-picker style as baseline, then place Falcon extension in this block.
+@include bem.b(date-picker) {
+  @include ep-var-mixin.set-component-css-var('input', ep-var.$input);
+  @include ep-var-mixin.set-component-css-var('input-disabled', ep-var.$input-disabled);
+
+  &.el-date-editor.el-input,
+  &.el-date-editor.el-input__wrapper {
+    width: 100%;
+  }
+
+  &.el-date-editor.el-input__wrapper {
+    box-sizing: border-box;
+  }
+
+  &.el-date-editor .el-input__wrapper,
+  &.el-date-editor.el-input__wrapper,
+  &.el-date-editor--daterange,
+  &.el-date-editor--datetimerange,
+  &.el-date-editor--monthrange,
+  &.el-date-editor--yearrange {
+    border-radius: var(--fl-radius-sm);
+  }
+
+  &.is-error {
+    --el-input-border-color: var(--el-color-danger);
+    --el-input-hover-border-color: var(--el-color-danger);
+    --el-input-focus-border-color: var(--el-color-danger);
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-error .el-input__wrapper,
+  &.is-error .el-input__wrapper:hover,
+  &.is-error .el-input__wrapper.is-focus,
+  &.is-error.el-input__wrapper,
+  &.is-error.el-input__wrapper:hover {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  &.is-error .el-input__inner::placeholder,
+  &.is-error .el-range-input::placeholder {
+    color: var(--el-color-danger);
+  }
+
+  &.is-table {
+    --el-input-bg-color: transparent;
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-padding-horizontal: 0;
+  }
+
+  &.is-table .el-input__wrapper,
+  &.is-table .el-input__wrapper:hover,
+  &.is-table .el-input__wrapper.is-focus,
+  &.is-table.el-input__wrapper,
+  &.is-table.el-input__wrapper:hover {
+    background-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.is-table .el-input__inner,
+  &.is-table .el-range-input {
+    background-color: transparent;
+  }
+
+  &.is-table.is-error {
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-table.is-error .el-input__wrapper,
+  &.is-table.is-error .el-input__wrapper:hover,
+  &.is-table.is-error .el-input__wrapper.is-focus,
+  &.is-table.is-error.el-input__wrapper,
+  &.is-table.is-error.el-input__wrapper:hover {
+    box-shadow: none;
+  }
+}

package/theme/src/dialog.scss

@@ -0,0 +1,146 @@
+@use './mixins/bem.scss' as bem;
+@use 'element-plus/theme-chalk/src/dialog.scss';
+
+@include bem.b(dialog) {
+  &.el-dialog {
+    border: 1px solid var(--el-color-primary-light-5);
+    padding: 0;
+
+    &.is-fullscreen {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  @include bem.e(header) {
+    background-color: var(--el-color-primary-light-9);
+    border-bottom: 1px solid var(--el-color-primary-light-5);
+    box-sizing: border-box;
+    padding: var(--fl-gap-sm);
+    flex-shrink: 0;
+  }
+
+  @include bem.e(body) {
+    box-sizing: border-box;
+    padding: var(--fl-gap-sm);
+
+    .el-dialog.is-fullscreen & {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+  }
+
+  @include bem.e(footer) {
+    border-top: 1px solid var(--el-border-color);
+    box-shadow: 0 -6px 6px -5px var(--el-border-color);
+    box-sizing: border-box;
+    padding: var(--fl-gap-sm);
+    flex-shrink: 0;
+  }
+
+  @include bem.e(header-content) {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+  }
+
+  @include bem.e(header-title) {
+    color: var(--el-color-primary);
+    font-size: var(--fl-font-size-md);
+    font-weight: 600;
+    line-height: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @include bem.e(header-actions) {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--fl-gap-sm);
+  }
+
+  @include bem.e(header-action-icon) {
+    align-items: center;
+    border-radius: var(--el-border-radius-base);
+    color: var(--el-color-primary);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 16px;
+    justify-content: center;
+    line-height: 1;
+    padding: 2px;
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--el-color-primary-light-5);
+      outline-offset: 2px;
+    }
+  }
+
+  @include bem.e(body-inner) {
+    box-sizing: border-box;
+    padding: 0;
+
+    .el-dialog.is-fullscreen & {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+    }
+  }
+
+  @include bem.e(footer-actions) {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--fl-gap-sm);
+    justify-content: flex-end;
+  }
+}
+
+@include bem.b(dialog-bounce-enter-active) {
+  animation: fl-dialog-bounce-in 0.24s ease-out;
+}
+
+@include bem.b(dialog-bounce-leave-active) {
+  animation: fl-dialog-bounce-out 0.18s ease-in forwards;
+}
+
+@keyframes fl-dialog-bounce-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.92) translateY(-6px);
+  }
+
+  65% {
+    opacity: 1;
+    transform: scale(1.01) translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fl-dialog-bounce-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+}

package/theme/src/ep-vars.scss

@@ -0,0 +1,11 @@
+// Bridge file for Element Plus theme variables.
+// Keep empty maps by default; override keys here when you need custom EP theme tokens.
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (),
+  $button: (),
+  $input: (),
+  $input-disabled: (),
+  $border-radius: (),
+  $font-size: (),
+  $common-component-size: ()
+);

package/theme/src/input-number.scss

@@ -0,0 +1,66 @@
+@use './mixins/bem.scss' as bem;
+@use './ep-vars.scss' as ep-var;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as ep-var-mixin;
+@use 'element-plus/theme-chalk/src/input.scss';
+
+// Keep EP input style as baseline, then place Falcon extension in this block.
+@include bem.b(input-number) {
+  @include ep-var-mixin.set-component-css-var('input', ep-var.$input);
+  @include ep-var-mixin.set-component-css-var('input-disabled', ep-var.$input-disabled);
+
+  &.el-input .el-input__wrapper {
+    border-radius: var(--fl-radius-sm);
+  }
+
+  &.is-error {
+    --el-input-border-color: var(--el-color-danger);
+    --el-input-hover-border-color: var(--el-color-danger);
+    --el-input-focus-border-color: var(--el-color-danger);
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-error .el-input__wrapper,
+  &.is-error .el-input__wrapper:hover,
+  &.is-error .el-input__wrapper.is-focus {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  &.is-error .el-input__inner::placeholder,
+  &.is-error .el-textarea__inner::placeholder {
+    color: var(--el-color-danger);
+  }
+
+  &.is-table {
+    --el-input-bg-color: transparent;
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-padding-horizontal: 0;
+  }
+
+  &.is-table .el-input__wrapper,
+  &.is-table .el-input__wrapper:hover,
+  &.is-table .el-input__wrapper.is-focus {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &.is-table .el-input__inner {
+    padding-left: 0;
+    padding-right: 0;
+    background-color: transparent;
+  }
+
+  &.is-table.is-error {
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-table.is-error .el-input__wrapper,
+  &.is-table.is-error .el-input__wrapper:hover,
+  &.is-table.is-error .el-input__wrapper.is-focus {
+    box-shadow: none;
+  }
+}

package/theme/src/input-search.scss

@@ -0,0 +1,78 @@
+@use './mixins/bem.scss' as bem;
+@use './ep-vars.scss' as ep-var;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as ep-var-mixin;
+@use 'element-plus/theme-chalk/src/input.scss';
+
+// Keep EP input style as baseline, then place Falcon extension in this block.
+@include bem.b(input-search) {
+  @include ep-var-mixin.set-component-css-var('input', ep-var.$input);
+  @include ep-var-mixin.set-component-css-var('input-disabled', ep-var.$input-disabled);
+
+  &.el-input .el-input__wrapper {
+    border-radius: var(--fl-radius-sm);
+  }
+
+  @include bem.e(trigger) {
+    display: inline-flex;
+    align-items: center;
+    color: var(--el-text-color-placeholder);
+    cursor: pointer;
+    line-height: 1;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &.is-error {
+    --el-input-border-color: var(--el-color-danger);
+    --el-input-hover-border-color: var(--el-color-danger);
+    --el-input-focus-border-color: var(--el-color-danger);
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-error .el-input__wrapper,
+  &.is-error .el-input__wrapper:hover,
+  &.is-error .el-input__wrapper.is-focus {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  &.is-error .el-input__inner::placeholder,
+  &.is-error .el-textarea__inner::placeholder {
+    color: var(--el-color-danger);
+  }
+
+  &.is-table {
+    --el-input-bg-color: transparent;
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-padding-horizontal: 0;
+  }
+
+  &.is-table .el-input__wrapper,
+  &.is-table .el-input__wrapper:hover,
+  &.is-table .el-input__wrapper.is-focus {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &.is-table .el-input__inner {
+    padding-left: 0;
+    padding-right: 0;
+    background-color: transparent;
+  }
+
+  &.is-table.is-error {
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-table.is-error .el-input__wrapper,
+  &.is-table.is-error .el-input__wrapper:hover,
+  &.is-table.is-error .el-input__wrapper.is-focus {
+    box-shadow: none;
+  }
+}

package/theme/src/input.scss

@@ -0,0 +1,66 @@
+@use './mixins/bem.scss' as bem;
+@use './ep-vars.scss' as ep-var;
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as ep-var-mixin;
+@use 'element-plus/theme-chalk/src/input.scss';
+
+// Keep EP input style as baseline, then place Falcon extension in this block.
+@include bem.b(input) {
+  @include ep-var-mixin.set-component-css-var('input', ep-var.$input);
+  @include ep-var-mixin.set-component-css-var('input-disabled', ep-var.$input-disabled);
+
+  &.el-input .el-input__wrapper {
+    border-radius: var(--fl-radius-sm);
+  }
+
+  &.is-error {
+    --el-input-border-color: var(--el-color-danger);
+    --el-input-hover-border-color: var(--el-color-danger);
+    --el-input-focus-border-color: var(--el-color-danger);
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-error .el-input__wrapper,
+  &.is-error .el-input__wrapper:hover,
+  &.is-error .el-input__wrapper.is-focus {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  &.is-error .el-input__inner::placeholder,
+  &.is-error .el-textarea__inner::placeholder {
+    color: var(--el-color-danger);
+  }
+
+  &.is-table {
+    --el-input-bg-color: transparent;
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-padding-horizontal: 0;
+  }
+
+  &.is-table .el-input__wrapper,
+  &.is-table .el-input__wrapper:hover,
+  &.is-table .el-input__wrapper.is-focus {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &.is-table .el-input__inner {
+    padding-left: 0;
+    padding-right: 0;
+    background-color: transparent;
+  }
+
+  &.is-table.is-error {
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+    --el-input-placeholder-color: var(--el-color-danger);
+  }
+
+  &.is-table.is-error .el-input__wrapper,
+  &.is-table.is-error .el-input__wrapper:hover,
+  &.is-table.is-error .el-input__wrapper.is-focus {
+    box-shadow: none;
+  }
+}

package/theme/src/mixins/bem.scss

@@ -0,0 +1,35 @@
+$namespace: 'fl';
+
+@function selector($block, $element: null) {
+  $value: '.#{$namespace}-#{$block}';
+
+  @if $element != null {
+    $value: '#{$value}__#{$element}';
+  }
+
+  @return $value;
+}
+
+@mixin b($block) {
+  #{selector($block)} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+
+@mixin m($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+
+@mixin when($state) {
+  &.is-#{$state} {
+    @content;
+  }
+}

package/theme/src/mixins/color.scss

@@ -0,0 +1,8 @@
+@use 'sass:color';
+
+@function get-nearby-color($base-color, $hue-offset: 30deg, $depth-ratio: 30%, $mix-ratio: 55%) {
+  $hue-shifted-color: color.adjust($base-color, $hue: $hue-offset);
+  $mixed-color: color.mix($base-color, $hue-shifted-color, $mix-ratio);
+
+  @return color.mix(#000000, $mixed-color, $depth-ratio);
+}

package/theme/src/qr-code.scss

@@ -0,0 +1,23 @@
+@use './mixins/bem.scss' as bem;
+
+@include bem.b(qr-code) {
+  box-sizing: border-box;
+  line-height: 0;
+  vertical-align: middle;
+
+  @include bem.e(render) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include bem.e(icon) {
+    box-sizing: border-box;
+  }
+
+  @include bem.e(icon-image) {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+}