lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/input.scss

@@ -0,0 +1,249 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+@use './mixins/function' as *;
+
+@keyframes lm-input-autofill {
+    from {
+    }
+    to {
+    }
+}
+
+@include b(input) {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    font-size: $font-size-base;
+    line-height: 1.5;
+
+    @include m(small) {
+        font-size: $font-size-small;
+        
+        .#{$namespace}-input__inner {
+            height: 24px;
+            padding: 0 11px;
+            line-height: 24px;
+        }
+
+        .#{$namespace}-input__clear {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    @include m(medium) {
+        .#{$namespace}-input__inner {
+            height: 32px;
+            padding: 0 11px;
+            line-height: 32px;
+        }
+
+        .#{$namespace}-input__clear {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    @include m(large) {
+        font-size: $font-size-large;
+        
+        .#{$namespace}-input__inner {
+            height: 40px;
+            padding: 0 11px;
+            line-height: 40px;
+        }
+
+        .#{$namespace}-input__clear {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    @include when(disabled) {
+        cursor: not-allowed;
+        
+        .#{$namespace}-input__inner {
+            background-color: #f5f7fa;
+            color: #a8abb2;
+            cursor: not-allowed;
+            border-color: $border-color-lighter;
+            
+            &:hover,
+            &:focus {
+                border-color: $border-color-lighter;
+            }
+        }
+    }
+
+    @include when(focused) {
+        .#{$namespace}-input__inner {
+            border-color: $color-primary;
+        }
+    }
+
+    &.has-prefix {
+        .#{$namespace}-input__inner {
+            padding-left: 36px;
+        }
+    }
+
+    &.has-suffix {
+        .#{$namespace}-input__inner {
+            padding-right: 36px;
+        }
+    }
+
+    &.has-suffix-2 {
+        .#{$namespace}-input__inner {
+            padding-right: 60px;
+        }
+    }
+
+    &.has-suffix-3 {
+        .#{$namespace}-input__inner {
+            padding-right: 84px;
+        }
+    }
+
+    @include e(inner) {
+        width: 100%;
+        height: 40px;
+        padding: 0 11px;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-medium;
+        background-color: $bg-color;
+        color: $color-text-primary;
+        outline: none;
+        transition: border-color 0.2s;
+        box-sizing: border-box;
+
+        &::placeholder {
+            color: $color-text-placeholder;
+        }
+
+        &:hover:not(:disabled):not(:focus) {
+            border-color: #c0c4cc;
+        }
+
+        &:focus {
+            border-color: $color-primary;
+            outline: none;
+        }
+
+        // Chrome/Safari: 通过 animationstart 事件探测 autofill（避免 JS 轮询）
+        &:-webkit-autofill {
+            animation-name: lm-input-autofill;
+            animation-duration: 0.01s;
+            animation-iteration-count: 1;
+        }
+    }
+
+    @include e(prefix) {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        color: $color-text-secondary;
+    }
+
+    @include e(suffix) {
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: $color-text-secondary;
+    }
+
+    @include e(clear) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: transparent;
+        color: $color-text-secondary;
+        cursor: pointer;
+        padding: 0;
+        transition: color 0.2s;
+
+        &:hover {
+            color: $color-text-primary;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    @include e(password) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: transparent;
+        color: $color-text-secondary;
+        cursor: pointer;
+        padding: 0;
+        transition: color 0.2s;
+
+        &:hover {
+            color: $color-text-primary;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-input {
+        .#{$namespace}-input__inner {
+            background-color: $bg-color-dark-light;
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 70%, $color-text-dark-secondary);
+            color: $color-text-dark;
+
+            &::placeholder {
+                color: $color-text-dark-secondary;
+            }
+
+            &:hover:not(:disabled):not(:focus) {
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 55%, $color-text-dark-secondary);
+            }
+
+            &:focus {
+                border-color: $color-primary;
+            }
+        }
+
+        &.is-focused {
+            .#{$namespace}-input__inner {
+                border-color: $color-primary;
+            }
+        }
+
+        &.is-disabled {
+            .#{$namespace}-input__inner {
+                background-color: $bg-color-dark-lighter;
+                color: $color-text-dark-secondary;
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 75%, $color-text-dark-secondary);
+            }
+        }
+
+        .#{$namespace}-input__prefix,
+        .#{$namespace}-input__suffix,
+        .#{$namespace}-input__clear {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-input__clear:hover {
+            color: $color-text-dark;
+        }
+    }
+}

package/dist/theme-chalk/link.scss

@@ -0,0 +1,28 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('link') {
+    color: $color-text-regular;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.15s ease;
+
+    &:hover { opacity: 0.9; }
+
+    @include when('underline') { text-decoration: underline; }
+    @include when('disabled') { color: $color-text-placeholder; cursor: not-allowed; opacity: 0.7; }
+
+    @include m('default') { color: $color-text-regular; }
+    @include m('primary') { color: $color-primary; }
+    @include m('success') { color: $color-success; }
+    @include m('warning') { color: $color-warning; }
+    @include m('danger') { color: $color-danger; }
+    @include m('info') { color: $color-info; }
+}
+
+.dark {
+    .#{$namespace}-link {
+        @include m('default') { color: $color-text-dark; }
+        @include when('disabled') { color: $color-text-dark-secondary; }
+    }
+}

package/dist/theme-chalk/loading.scss

@@ -0,0 +1,68 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('loading') {
+    --#{$namespace}-loading-mask-bg: rgba(255, 255, 255, 0.9);
+    --#{$namespace}-loading-icon-color: #{$color-primary};
+    --#{$namespace}-loading-text-color: #{$color-primary};
+    --#{$namespace}-loading-z-index: #{$z-index-popper};
+
+    position: relative;
+
+    @include when('fullscreen') {
+        position: static;
+    }
+
+    @include e('mask') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: var(--#{$namespace}-loading-z-index);
+        background: var(--#{$namespace}-loading-mask-bg);
+        backdrop-filter: blur(0px);
+    }
+
+    @include when('fullscreen') {
+        @include e('mask') {
+            position: fixed;
+            inset: 0;
+        }
+    }
+
+    @include e('spinner') {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+    }
+
+    @include e('icon') {
+        color: var(--#{$namespace}-loading-icon-color);
+        animation: loading-rotate 2s linear infinite;
+    }
+
+    @include e('text') {
+        margin: 0;
+        font-size: $font-size-base;
+        color: var(--#{$namespace}-loading-text-color);
+    }
+}
+
+@keyframes loading-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.dark {
+    .#{$namespace}-loading {
+        --#{$namespace}-loading-mask-bg: rgba(0, 0, 0, 0.45);
+        --#{$namespace}-loading-icon-color: #{$color-primary};
+        --#{$namespace}-loading-text-color: #{$color-primary};
+    }
+}

package/dist/theme-chalk/menu.scss

@@ -0,0 +1,239 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+// Variables
+$menu-easing: cubic-bezier(0.4, 0, 0.2, 1);
+$menu-bg: #fff;
+$menu-bg-hover: #f5f7fa;
+$menu-bg-active: rgba($color-primary, 0.08);
+
+@include b('menu') {
+    --menu-bg: #{$menu-bg};
+    --menu-bg-hover: #{$menu-bg-hover};
+    --menu-bg-active: #{$menu-bg-active};
+    --menu-text: #{$color-text};
+    --menu-text-secondary: #{$color-text-secondary};
+    --menu-text-disabled: #{$color-text-disabled};
+    --menu-border: #{$border-color-light};
+
+    background-color: var(--menu-bg);
+    margin: 0;
+    box-sizing: border-box;
+
+    // 基础元素
+    @include e('list') { list-style: none; padding: 0; margin: 0; }
+
+    @include e('item') {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+
+        &.is-active > .#{$namespace}-menu__item-content { color: $color-primary; }
+        &.has-active-child > .#{$namespace}-menu__item-content { color: $color-primary; background-color: transparent; }
+        &.is-disabled > .#{$namespace}-menu__item-content {
+            color: var(--menu-text-disabled);
+            cursor: not-allowed;
+            opacity: 0.6;
+            &:hover { background-color: transparent; color: var(--menu-text-disabled); }
+        }
+    }
+
+    @include e('item-content') {
+        display: flex;
+        align-items: center;
+        color: var(--menu-text);
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        transition: background-color 0.2s, color 0.2s, padding 0.3s $menu-easing, opacity 0.15s;
+
+        &:hover { color: $color-primary; }
+        &:focus { outline: none; }
+    }
+
+    @include e('item-icon') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+        flex-shrink: 0;
+        color: inherit;
+        transition: margin 0.3s $menu-easing;
+    }
+
+    @include e('item-label') {
+        flex: 1;
+        font-size: 14px;
+        line-height: 1.5;
+        white-space: nowrap;
+        overflow: hidden;
+        transition: opacity 0.25s $menu-easing, width 0.3s $menu-easing;
+    }
+
+    @include e('item-arrow') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 6px;
+        color: inherit;
+        cursor: pointer;
+        padding: 0;
+        border: none;
+        background: transparent;
+        overflow: hidden;
+        transition: transform 0.2s, opacity 0.25s $menu-easing, width 0.3s $menu-easing;
+
+        &.is-open { transform: rotate(180deg); }
+    }
+
+    @include e('submenu') {
+        list-style: none;
+        padding: 4px 0 0 12px;
+        margin: 0;
+        transform-origin: top;
+
+        .#{$namespace}-menu__item { margin-bottom: 4px; &:last-child { margin-bottom: 0; } }
+        .#{$namespace}-menu__item-content { padding: 8px 16px; }
+    }
+
+    @include e('popup') {
+        position: absolute;
+        list-style: none;
+        padding: 6px;
+        margin: 0;
+        min-width: 160px;
+        background-color: var(--menu-bg);
+        border: 1px solid var(--menu-border);
+        border-radius: $border-radius-base;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+        z-index: 100;
+        transform-origin: top left;
+
+        .#{$namespace}-menu__item { margin-bottom: 4px; &:last-child { margin-bottom: 0; } }
+        .#{$namespace}-menu__item-content {
+            padding: 10px 16px;
+            border-radius: $border-radius-base;
+            &:hover { background-color: var(--menu-bg-hover); }
+        }
+        .#{$namespace}-menu__item.is-active > .#{$namespace}-menu__item-content {
+            color: $color-primary;
+            background-color: var(--menu-bg-active);
+        }
+        .#{$namespace}-menu__item-arrow { margin-left: auto; &.is-open { transform: none; } }
+
+        &--nested { top: 0; left: 100%; margin-left: 4px; transform-origin: left top; }
+    }
+
+    @include e('group') {
+        display: block;
+        padding: 8px 16px;
+        font-size: 12px;
+        color: var(--menu-text-secondary);
+        user-select: none;
+        cursor: default;
+        list-style: none;
+        white-space: nowrap;
+    }
+
+    // 垂直模式
+    &--vertical {
+        padding: 8px;
+        width: 220px;
+        transition: width 0.3s $menu-easing;
+
+        > .#{$namespace}-menu__list > .#{$namespace}-menu__group {
+            margin: 16px 0 4px;
+            max-height: 40px;
+            overflow: hidden;
+            opacity: 1;
+            transition: max-height 0.3s $menu-easing, opacity 0.2s $menu-easing, padding 0.3s $menu-easing, margin 0.3s $menu-easing;
+            &:first-child { margin-top: 8px; }
+        }
+
+        > .#{$namespace}-menu__list > .#{$namespace}-menu__item { margin-bottom: 4px; &:last-child { margin-bottom: 0; } }
+
+        .#{$namespace}-menu__item-content {
+            padding: 10px 16px;
+            border-radius: $border-radius-base;
+            &:hover { background-color: var(--menu-bg-hover); }
+        }
+
+        .#{$namespace}-menu__item.is-active > .#{$namespace}-menu__item-content { background-color: var(--menu-bg-active); }
+        .#{$namespace}-menu__item.has-active-child > .#{$namespace}-menu__item-content {
+            background-color: transparent;
+            &:hover { background-color: var(--menu-bg-hover); }
+        }
+        .#{$namespace}-menu__item-arrow.is-open { transform: rotate(90deg); }
+
+        // 折叠状态
+        &.is-collapsed {
+            width: 64px;
+
+            > .#{$namespace}-menu__list > .#{$namespace}-menu__item { margin-bottom: 4px; &:last-child, &.is-open { margin-bottom: 4px; } &:last-child { margin-bottom: 0; } }
+            > .#{$namespace}-menu__list > .#{$namespace}-menu__group { max-height: 0; opacity: 0; padding: 0; margin: 0; pointer-events: none; }
+
+            > .#{$namespace}-menu__list > .#{$namespace}-menu__item > .#{$namespace}-menu__item-content {
+                padding: 12px 8px;
+                > .#{$namespace}-menu__item-label, > .#{$namespace}-menu__item-arrow { opacity: 0; width: 0; flex: 0; }
+                > .#{$namespace}-menu__item-arrow { margin-left: 0; }
+                > .#{$namespace}-menu__item-icon { margin: 0 auto; }
+            }
+
+            .#{$namespace}-menu__popup {
+                top: 0;
+                left: 100%;
+                margin-left: 12px;
+                .#{$namespace}-menu__item-label { opacity: 1; width: auto; flex: 1; }
+                .#{$namespace}-menu__item-icon { margin-right: 8px; }
+            }
+        }
+    }
+
+    // 水平模式
+    &--horizontal {
+        border-bottom: 1px solid var(--menu-border);
+        width: 100%;
+        height: 60px;
+        display: flex;
+        align-items: center;
+
+        > .#{$namespace}-menu__list { display: flex; align-items: center; height: 100%; }
+
+        > .#{$namespace}-menu__list > .#{$namespace}-menu__item {
+            height: 100%;
+            display: flex;
+            align-items: center;
+
+            > .#{$namespace}-menu__item-content {
+                height: 100%;
+                padding: 0 20px;
+                border-bottom: 2px solid transparent;
+                display: flex;
+                align-items: center;
+                &:hover { background-color: transparent; border-bottom-color: $color-primary; }
+            }
+
+            &.is-active > .#{$namespace}-menu__item-content,
+            &.has-active-child > .#{$namespace}-menu__item-content {
+                border-bottom-color: $color-primary;
+                background-color: transparent;
+            }
+        }
+
+        .#{$namespace}-menu__popup { top: 100%; left: 0; &--nested { top: 0; left: 100%; margin-left: 4px; } }
+    }
+}
+
+// 暗色模式
+.dark .#{$namespace}-menu {
+    --menu-bg: #{$bg-color-dark-light};
+    --menu-bg-hover: #{$bg-color-dark-lighter};
+    --menu-bg-active: #{rgba($color-primary, 0.12)};
+    --menu-text: #{$color-text-dark};
+    --menu-text-secondary: #{$color-text-dark-secondary};
+    --menu-text-disabled: #{$color-text-dark-secondary};
+    --menu-border: #{$bg-color-dark-lighter};
+
+    .#{$namespace}-menu__popup { box-shadow: $box-shadow-dark; }
+}