@falcon-ui/falcon-ui 1.0.0

package/theme/src/radial-menu.scss

@@ -0,0 +1,346 @@
+@use './mixins/bem.scss' as bem;
+
+@mixin radial-menu-size($radius, $center-size, $item-size, $item-half-size) {
+  --fl-radial-menu-radius: #{$radius};
+  --fl-radial-menu-center-size: #{$center-size};
+  --fl-radial-menu-item-size: #{$item-size};
+  --fl-radial-menu-item-half-size: #{$item-half-size};
+}
+
+@keyframes fl-radial-menu-track-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fl-radial-menu-more-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@include bem.b(radial-menu) {
+  --fl-radial-menu-primary-color: var(--el-color-primary);
+  --fl-radial-menu-track-color: var(--el-border-color-lighter);
+  --fl-radial-menu-active-bg-color: var(--el-color-primary-light-9);
+  --fl-radial-menu-active-ring-color: var(--el-color-primary-light-5);
+  --fl-radial-menu-border-width: 2px;
+  --fl-radial-menu-duration: 180ms;
+  --fl-radial-menu-easing: cubic-bezier(0.2, 0, 0, 1);
+  --fl-radial-menu-more-enter-delay: 0ms;
+
+  @include bem.m(large) {
+    @include radial-menu-size(96px, 56px, 44px, 22px);
+  }
+
+  @include bem.m(medium) {
+    @include radial-menu-size(80px, 48px, 36px, 18px);
+  }
+
+  @include bem.m(small) {
+    @include radial-menu-size(64px, 40px, 32px, 16px);
+  }
+
+  position: relative;
+  z-index: var(--fl-radial-menu-z-index);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fl-radial-menu-center-size);
+  height: var(--fl-radial-menu-center-size);
+
+  @include bem.e(center) {
+    position: relative;
+    z-index: 3;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fl-radial-menu-center-size);
+    height: var(--fl-radial-menu-center-size);
+    border: var(--fl-radial-menu-border-width) solid var(--fl-radial-menu-primary-color);
+    border-radius: 50%;
+    background: var(--el-bg-color);
+    color: var(--fl-radial-menu-primary-color);
+    cursor: pointer;
+  }
+
+  @include bem.m(floating) {
+    position: fixed;
+    top: var(--fl-radial-menu-floating-y);
+    left: var(--fl-radial-menu-floating-x);
+    transform: translate(-50%, -50%);
+  }
+
+  @include bem.e(center-label) {
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  @include bem.e(panel) {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  @include bem.e(sector) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 280px;
+    height: 280px;
+    overflow: visible;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+  }
+
+  @include bem.e(track) {
+    fill: none;
+    stroke: var(--fl-radial-menu-track-color);
+    stroke-width: var(--fl-radial-menu-border-width);
+  }
+
+  @include bem.e(sector-path) {
+    fill: color-mix(in srgb, var(--fl-radial-menu-primary-color) 14%, transparent);
+  }
+
+  @include bem.e(track-active) {
+    fill: none;
+    stroke: var(--fl-radial-menu-primary-color);
+    stroke-linecap: butt;
+    stroke-width: var(--fl-radial-menu-border-width);
+  }
+
+  @include bem.e(item) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fl-radial-menu-item-size);
+    height: var(--fl-radial-menu-item-size);
+    border: var(--fl-radial-menu-border-width) solid var(--el-border-color-light);
+    border-radius: 12px;
+    background: var(--el-bg-color);
+    box-shadow: var(--el-box-shadow-light);
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+    pointer-events: auto;
+    transform: translate(
+        calc(-50% + var(--fl-radial-menu-item-x)),
+        calc(-50% + var(--fl-radial-menu-item-y))
+      )
+      scale(1);
+    transition:
+      transform var(--fl-radial-menu-duration) var(--fl-radial-menu-easing),
+      opacity var(--fl-radial-menu-duration) var(--fl-radial-menu-easing),
+      border-color var(--fl-radial-menu-duration) var(--fl-radial-menu-easing),
+      color var(--fl-radial-menu-duration) var(--fl-radial-menu-easing);
+    will-change: transform, opacity;
+
+    @include bem.when(active) {
+      border-color: var(--fl-radial-menu-primary-color);
+      background: var(--fl-radial-menu-active-bg-color);
+      color: var(--fl-radial-menu-primary-color);
+    }
+
+    @include bem.when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  @include bem.m(item-square) {
+    #{bem.selector('radial-menu', 'item')} {
+      border-radius: 12px;
+    }
+  }
+
+  @include bem.m(item-circle) {
+    #{bem.selector('radial-menu', 'item')} {
+      border-radius: 50%;
+    }
+  }
+
+  @include bem.e(item-label) {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: var(--el-fill-color-light);
+    box-sizing: border-box;
+    color: var(--el-text-color-primary);
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+
+    @include bem.m(tip-left) {
+      top: 50%;
+      right: calc(100% + 10px);
+      transform: translateY(-50%);
+    }
+
+    @include bem.m(tip-right) {
+      top: 50%;
+      left: calc(100% + 10px);
+      transform: translateY(-50%);
+    }
+
+    @include bem.m(tip-top) {
+      bottom: calc(100% + 10px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include bem.m(tip-bottom) {
+      top: calc(100% + 10px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include bem.m(hidden-by-more) {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  @include bem.e(more) {
+    position: absolute;
+    top: calc(50% + var(--fl-radial-menu-radius) + var(--fl-radial-menu-item-half-size) + 10px);
+    left: 50%;
+    z-index: 3;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--el-fill-color-light);
+    color: var(--el-text-color-primary);
+    cursor: pointer;
+    pointer-events: auto;
+    transform: translateX(-50%);
+    white-space: nowrap;
+  }
+
+  @include bem.e(more-dropdown) {
+    position: absolute;
+    top: calc(50% + var(--fl-radial-menu-radius) + var(--fl-radial-menu-item-half-size) + 46px);
+    left: 50%;
+    z-index: 4;
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 140px;
+    padding: 6px;
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 8px;
+    background: var(--el-bg-color-overlay);
+    box-shadow: var(--el-box-shadow-light);
+    pointer-events: auto;
+    transform: translateX(-50%);
+  }
+
+  @include bem.e(more-item) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 30px;
+    padding: 0 8px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+    gap: 12px;
+
+    &:hover,
+    &:focus-visible {
+      background: var(--fl-radial-menu-active-bg-color);
+      color: var(--fl-radial-menu-primary-color);
+    }
+
+    @include bem.when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  @include bem.e(more-content) {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    gap: 8px;
+  }
+
+  @include bem.e(more-icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 1em;
+    height: 1em;
+  }
+
+  @include bem.e(shortcut) {
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: var(--el-fill-color);
+    color: var(--el-text-color-secondary);
+    font-size: 11px;
+  }
+
+  @include bem.when(disabled) {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  @include bem.when(entering) {
+    #{bem.selector('radial-menu', 'track')} {
+      animation: fl-radial-menu-track-fade-in 120ms var(--fl-radial-menu-easing) both;
+    }
+
+    #{bem.selector('radial-menu', 'item')},
+    #{bem.selector('radial-menu', 'more')} {
+      pointer-events: none;
+    }
+
+    #{bem.selector('radial-menu', 'item')} {
+      opacity: 0;
+      transform: translate(calc(-50% - var(--fl-radial-menu-radius)), -50%) scale(0.86);
+    }
+
+    #{bem.selector('radial-menu', 'more')} {
+      opacity: 0;
+      animation: fl-radial-menu-more-fade-in var(--fl-radial-menu-duration)
+        var(--fl-radial-menu-easing) var(--fl-radial-menu-more-enter-delay) both;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    @include bem.e(item) {
+      animation: none;
+      transition: none;
+    }
+
+    @include bem.e(track) {
+      animation: none;
+    }
+
+    @include bem.e(more) {
+      animation: none;
+      transition: none;
+    }
+  }
+}

package/theme/src/select.scss

@@ -0,0 +1,44 @@
+@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/select.scss';
+
+// Keep EP select style as baseline, then place Falcon extension in this block.
+@include bem.b(select) {
+  @include ep-var-mixin.set-component-css-var('select', ep-var.$select);
+
+  &.el-select .el-select__wrapper {
+    border-radius: var(--fl-radius-sm);
+  }
+
+  &.is-error .el-select__wrapper,
+  &.is-error .el-select__wrapper:hover,
+  &.is-error .el-select__wrapper.is-focused {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  &.is-error .el-select__placeholder.is-transparent,
+  &.is-error .el-select__selected-item,
+  &.is-error .el-select__input {
+    color: var(--el-color-danger);
+  }
+
+  &.is-table .el-select__wrapper,
+  &.is-table .el-select__wrapper:hover,
+  &.is-table .el-select__wrapper.is-focused {
+    background-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.is-table .el-select__placeholder {
+    left: 0;
+  }
+
+  &.is-table.is-error .el-select__wrapper,
+  &.is-table.is-error .el-select__wrapper:hover,
+  &.is-table.is-error .el-select__wrapper.is-focused {
+    box-shadow: none;
+  }
+}

package/theme/src/table.scss

@@ -0,0 +1,143 @@
+@use './mixins/bem.scss' as bem;
+@use 'element-plus/theme-chalk/src/table.scss';
+
+@include bem.b(table) {
+  --el-table-header-bg-color: var(--el-fill-color-lighter);
+
+  @include bem.e(header-row) {
+    > th.el-table__cell {
+      background-color: var(--el-table-header-bg-color);
+    }
+
+    > th#{bem.selector('table', 'cross-column')}.el-table__cell {
+      background-color: var(--el-table-current-row-bg-color);
+    }
+  }
+
+  @include bem.e(row-drag-cell) {
+    position: relative;
+    cursor: grab;
+    transition: padding-left 0.2s ease;
+
+    &::before {
+      content: '\22EE\22EE';
+      position: absolute;
+      top: 50%;
+      left: 8px;
+      transform: translateY(-50%);
+      color: var(--el-text-color-secondary);
+      font-size: 12px;
+      letter-spacing: 1px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  .el-table__row:hover #{bem.selector('table', 'row-drag-cell')} {
+    padding-left: 10px;
+  }
+
+  .el-table__row:hover #{bem.selector('table', 'row-drag-cell')}::before {
+    opacity: 1;
+  }
+
+  .el-table__body tr > td#{bem.selector('table', 'cross-row')},
+  .el-table__body tr > td#{bem.selector('table', 'cross-column')} {
+    background-color: var(--el-table-current-row-bg-color);
+  }
+
+  &.el-table--enable-row-hover .el-table__body tr:hover > td#{bem.selector('table', 'cross-row')},
+  &.el-table--enable-row-hover
+    .el-table__body
+    tr:hover
+    > td#{bem.selector('table', 'cross-column')} {
+    background-color: var(--el-table-current-row-bg-color);
+  }
+
+  &.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped
+    > td#{bem.selector('table', 'cross-row')},
+  &.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped
+    > td#{bem.selector('table', 'cross-column')} {
+    background-color: var(--el-table-current-row-bg-color);
+  }
+
+  .el-table__body tr > td#{bem.selector('table', 'cross-active')} {
+    background-color: var(--el-table-tr-bg-color);
+    box-shadow: inset 0 0 0 1px var(--el-color-primary);
+  }
+
+  &.el-table--enable-row-hover
+    .el-table__body
+    tr:hover
+    > td#{bem.selector('table', 'cross-active')} {
+    background-color: var(--el-table-tr-bg-color);
+  }
+
+  .el-table__body tr.current-row > td#{bem.selector('table', 'cross-active')} {
+    background-color: var(--el-table-tr-bg-color);
+  }
+
+  &.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped
+    > td#{bem.selector('table', 'cross-active')} {
+    background-color: var(--el-fill-color-lighter);
+  }
+
+  &.el-table--enable-row-hover.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped:hover
+    > td#{bem.selector('table', 'cross-active')} {
+    background-color: var(--el-fill-color-lighter);
+  }
+
+  &.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped.current-row
+    > td#{bem.selector('table', 'cross-active')} {
+    background-color: var(--el-fill-color-lighter);
+  }
+
+  .el-table__body tr.current-row > td#{bem.selector('table', 'cross-control-cell')} {
+    background-color: var(--el-table-tr-bg-color);
+  }
+
+  &.el-table--enable-row-hover
+    .el-table__body
+    tr:hover
+    > td#{bem.selector('table', 'cross-control-cell')} {
+    background-color: var(--el-table-tr-bg-color);
+  }
+
+  &.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped.current-row
+    > td#{bem.selector('table', 'cross-control-cell')} {
+    background-color: var(--el-fill-color-lighter);
+  }
+
+  &.el-table--enable-row-hover.el-table--striped
+    .el-table__body
+    tr.el-table__row--striped:hover
+    > td#{bem.selector('table', 'cross-control-cell')} {
+    background-color: var(--el-fill-color-lighter);
+  }
+
+  @include bem.e(column-drag-indicator-left) {
+    box-shadow: inset 2px 0 0 var(--el-color-primary);
+  }
+
+  @include bem.e(column-drag-indicator-right) {
+    box-shadow: inset -2px 0 0 var(--el-color-primary);
+  }
+
+  .sortable-ghost > td {
+    opacity: 0.65;
+  }
+}

package/theme/src/tokens.scss

@@ -0,0 +1,26 @@
+:root {
+  --fl-color-default: #ffffff;
+  --fl-color-primary: #1677ff;
+  --fl-color-success: #22a06b;
+  --fl-color-warning: #f79009;
+  --fl-color-danger: #f04438;
+  --fl-color-text-primary: #1f2937;
+  --fl-color-text-inverse: #ffffff;
+  --fl-color-border: #d0d5dd;
+  --fl-color-placeholder: #98a2b3;
+  --fl-color-focus: #1677ff;
+
+  --fl-radius-sm: 2px;
+  --fl-radius-md: 4px;
+  --fl-gap-sm: 10px;
+
+  --fl-font-size-sm: 12px;
+  --fl-font-size-md: 14px;
+  --fl-font-size-lg: 16px;
+
+  --fl-button-height-sm: 30px;
+  --fl-button-height-md: 36px;
+  --fl-button-height-lg: 42px;
+
+  --fl-input-height: 36px;
+}

package/theme/src/tree-select.scss

@@ -0,0 +1,45 @@
+@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/select.scss';
+@use 'element-plus/theme-chalk/src/tree.scss';
+@use 'element-plus/theme-chalk/src/tree-select.scss';
+
+@include bem.b(tree-select) {
+  @include ep-var-mixin.set-component-css-var('select', ep-var.$select);
+
+  &.el-select .el-select__wrapper {
+    border-radius: var(--fl-radius-sm);
+  }
+
+  &.is-error .el-select__wrapper,
+  &.is-error .el-select__wrapper:hover,
+  &.is-error .el-select__wrapper.is-focused {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  &.is-error .el-select__placeholder.is-transparent,
+  &.is-error .el-select__selected-item,
+  &.is-error .el-select__input {
+    color: var(--el-color-danger);
+  }
+
+  &.is-table .el-select__wrapper,
+  &.is-table .el-select__wrapper:hover,
+  &.is-table .el-select__wrapper.is-focused {
+    background-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.is-table .el-select__placeholder {
+    left: 0;
+  }
+
+  &.is-table.is-error .el-select__wrapper,
+  &.is-table.is-error .el-select__wrapper:hover,
+  &.is-table.is-error .el-select__wrapper.is-focused {
+    box-shadow: none;
+  }
+}