lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/upload.scss

@@ -0,0 +1,457 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('upload') {
+    @include when('disabled') {
+        .#{$namespace}-upload__trigger {
+            cursor: not-allowed;
+        }
+
+        .#{$namespace}-upload__button {
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+
+        .#{$namespace}-upload__card.is-trigger {
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+    }
+
+    @include e('trigger') {
+        display: inline-block;
+
+        &.is-drag {
+            display: block;
+            width: 100%;
+            padding: 40px 20px;
+            border: 2px dashed $border-color-base;
+            border-radius: $border-radius-base;
+            text-align: center;
+            cursor: pointer;
+            transition: border-color $transition-duration-fast;
+
+            &:hover {
+                border-color: $color-primary;
+            }
+        }
+
+        &.is-dragover {
+            border-color: $color-primary;
+            background: rgba($color-primary, 0.05);
+        }
+    }
+
+    @include e('drag-content') {
+        color: $color-text-secondary;
+
+        p {
+            margin: 12px 0 0;
+            font-size: $font-size-base;
+        }
+
+        em {
+            color: $color-primary;
+            font-style: normal;
+        }
+    }
+
+    @include e('button') {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 16px;
+        border: none;
+        border-radius: $border-radius-base;
+        background: $color-primary;
+        color: #fff;
+        font-size: $font-size-base;
+        cursor: pointer;
+        transition: background $transition-duration-fast;
+
+        &:hover:not(:disabled) {
+            background: $color-primary-light;
+        }
+    }
+
+    @include e('input') {
+        display: none;
+    }
+
+    @include e('tip') {
+        margin-top: 8px;
+        font-size: $font-size-small;
+        color: $color-text-secondary;
+    }
+
+    @include e('list') {
+        list-style: none;
+        margin: 12px 0 0;
+        padding: 0;
+    }
+
+    @include e('item') {
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        margin-bottom: 4px;
+        border-radius: $border-radius-base;
+        transition: background $transition-duration-fast;
+        cursor: pointer;
+
+        &:hover {
+            .#{$namespace}-upload__item-remove {
+                opacity: 1;
+            }
+        }
+
+        &.is-success {
+            .#{$namespace}-upload__item-status {
+                color: $color-success;
+            }
+        }
+
+        &.is-fail {
+            .#{$namespace}-upload__item-status {
+                color: $color-danger;
+            }
+        }
+
+        &.is-uploading {
+            .#{$namespace}-upload__item-name {
+                color: $color-text-secondary;
+            }
+        }
+    }
+
+    @include e('item-icon') {
+        color: $color-text-secondary;
+        margin-right: 8px;
+        flex-shrink: 0;
+    }
+
+    @include e('item-thumbnail') {
+        width: 48px;
+        height: 48px;
+        margin-right: 12px;
+        border-radius: $border-radius-base;
+        overflow: hidden;
+        background: $border-color-lighter;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        color: $color-text-secondary;
+    }
+
+    @include e('item-name') {
+        flex: 1;
+        font-size: $font-size-base;
+        color: $color-text-regular;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    @include e('item-progress') {
+        flex: 1;
+        height: 4px;
+        background: $border-color-lighter;
+        border-radius: 2px;
+        overflow: hidden;
+        margin: 0 12px;
+    }
+
+    @include e('item-progress-bar') {
+        height: 100%;
+        background: $color-primary;
+        border-radius: 2px;
+        transition: width 0.3s ease;
+    }
+
+    @include e('item-status') {
+        margin-left: 8px;
+        flex-shrink: 0;
+    }
+
+    @include e('item-remove') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 8px;
+        padding: 2px;
+        border: none;
+        border-radius: $border-radius-small;
+        background-color: transparent;
+        color: $color-text-secondary;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity $transition-duration-fast, color $transition-duration-fast, background-color $transition-duration-fast;
+        flex-shrink: 0;
+
+        &:hover {
+            color: $color-danger;
+            background-color: rgba($color-danger, 0.1);
+        }
+    }
+
+    // Picture 模式
+    @include m('picture') {
+        .#{$namespace}-upload__item {
+            padding: 8px;
+            border: 1px solid $border-color-light;
+            background: #fff;
+
+            &:hover {
+                background: #fff;
+                border-color: $color-primary;
+            }
+
+            &.is-fail {
+                border-color: $color-danger;
+            }
+        }
+    }
+
+    // Text 模式
+    @include m('text') {
+        .#{$namespace}-upload__item {
+            background: $bg-color-page;
+
+            &:hover {
+                background: $border-color-lighter;
+            }
+        }
+    }
+
+    // Picture Card 模式
+    @include m('picture-card') {
+        .#{$namespace}-upload__list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin: 0;
+        }
+
+        .#{$namespace}-upload__tip {
+            width: 100%;
+        }
+    }
+
+    @include e('card') {
+        width: 104px;
+        height: 104px;
+        border: 1px dashed $border-color-base;
+        border-radius: $border-radius-base;
+        overflow: hidden;
+        position: relative;
+
+        &.is-trigger {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: border-color $transition-duration-fast;
+
+            &:hover {
+                border-color: $color-primary;
+            }
+
+            &.is-dragover {
+                border-color: $color-primary;
+                background: rgba($color-primary, 0.05);
+            }
+        }
+
+        &.is-success {
+            border-style: solid;
+            border-color: $border-color-light;
+        }
+
+        &.is-fail {
+            border-style: solid;
+            border-color: $color-danger;
+        }
+
+        &.is-uploading {
+            border-style: solid;
+        }
+    }
+
+    @include e('card-inner') {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    @include e('card-image') {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    @include e('card-file') {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: $color-text-secondary;
+    }
+
+    @include e('card-progress') {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    @include e('card-progress-bar') {
+        height: 100%;
+        background: $color-primary;
+        transition: width 0.3s ease;
+    }
+
+    @include e('card-actions') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        opacity: 0;
+        transition: opacity $transition-duration-fast;
+
+        .#{$namespace}-upload__card:hover & {
+            opacity: 1;
+        }
+    }
+
+    @include e('card-action') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: #fff;
+        cursor: pointer;
+        transition: background $transition-duration-fast;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    @include e('card-status') {
+        position: absolute;
+        right: -15px;
+        top: -6px;
+        width: 40px;
+        height: 24px;
+        background: $color-success;
+        transform: rotate(45deg);
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 1px;
+
+        &.is-success {
+            background: $color-success;
+        }
+
+        &.is-fail {
+            background: $color-danger;
+        }
+
+        color: #fff;
+
+        .#{$namespace}-icon {
+            transform: rotate(-45deg);
+        }
+    }
+
+    @include e('card-add') {
+        color: $border-color-base;
+        transition: color $transition-duration-fast;
+
+        .#{$namespace}-upload__card.is-trigger:hover & {
+            color: $color-primary;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-upload {
+        .#{$namespace}-upload__trigger.is-drag {
+            border-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-upload__drag-content {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-upload__tip {
+            color: $color-text-dark-secondary;
+        }
+
+        &.#{$namespace}-upload--text {
+            .#{$namespace}-upload__item {
+                background: $bg-color-dark-light;
+
+                &:hover {
+                    background: color-mix(in oklab, $bg-color-dark-lighter 70%, $color-text-dark);
+                }
+            }
+        }
+
+        .#{$namespace}-upload__item-thumbnail {
+            background: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-upload__item-name {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-upload__item-icon {
+            color: $color-text-dark-secondary;
+        }
+
+        .#{$namespace}-upload__item-progress {
+            background: $bg-color-dark-lighter;
+        }
+
+        &.#{$namespace}-upload--picture {
+            .#{$namespace}-upload__item {
+                background: $bg-color-dark-light;
+                border-color: $bg-color-dark-lighter;
+
+                &:hover {
+                    background: $bg-color-dark-light;
+                }
+            }
+        }
+
+        .#{$namespace}-upload__card {
+            border-color: $bg-color-dark-lighter;
+
+            &.is-success {
+                border-color: $bg-color-dark-lighter;
+            }
+        }
+    }
+}

package/dist/theme-chalk/watermark.scss

@@ -0,0 +1,30 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('watermark') {
+    position: relative;
+    --lm-watermark-font-color: rgba(0, 0, 0, 0.15);
+    --lm-watermark-opacity: 1;
+
+    @include e('mark') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        background-repeat: repeat;
+        opacity: var(--lm-watermark-opacity);
+    }
+}
+
+.dark {
+    .#{$namespace}-watermark {
+        --lm-watermark-font-color: rgba(255, 255, 255, 0.22);
+        --lm-watermark-opacity: 0.75;
+
+        .#{$namespace}-watermark__mark {
+            opacity: var(--lm-watermark-opacity);
+        }
+    }
+}

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { createDropdownTransition, createCenteredDropdownTransition } from './transitions';

package/dist/utils/transitions.js

@@ -0,0 +1,31 @@
+import { cubicOut } from 'svelte/easing';
+export const createDropdownTransition = (reduceMotion) => {
+    return (_node, opts = {}) => {
+        const duration = reduceMotion ? 0 : (opts.duration ?? 160);
+        return {
+            duration,
+            easing: cubicOut,
+            css: (t) => {
+                const opacity = t;
+                const scale = 0.98 + t * 0.02;
+                const translateY = (1 - t) * -4;
+                return `transform-origin: top; transform: translateY(${translateY}px) scale(${scale}); opacity: ${opacity};`;
+            },
+        };
+    };
+};
+export const createCenteredDropdownTransition = (reduceMotion) => {
+    return (_node, opts = {}) => {
+        const duration = reduceMotion ? 0 : (opts.duration ?? 160);
+        return {
+            duration,
+            easing: cubicOut,
+            css: (t) => {
+                const opacity = t;
+                const scale = 0.98 + t * 0.02;
+                const translateY = (1 - t) * -4;
+                return `transform-origin: top; transform: translateX(-50%) translateY(${translateY}px) scale(${scale}); opacity: ${opacity};`;
+            },
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumen-plus",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Lumen Plus - Complete Svelte 5 UI Component Library",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -12,6 +12,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./theme-chalk": {
+      "import": "./dist/theme-chalk/_index.scss",
+      "default": "./dist/theme-chalk/_index.scss"
+    },
+    "./theme-chalk/*": "./dist/theme-chalk/*",
     "./package.json": "./package.json"
   },
   "files": [
@@ -24,7 +29,8 @@
     "dev": "rm -rf dist && svelte-package -i src -o dist -w"
   },
   "dependencies": {
-    "lucide": "^0.563.0"
+    "lucide": "^0.563.0",
+    "async-validator": "^4.2.5"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",