@k3000/ce 0.2.0 → 0.2.1

package/console/components/g-image.mjs

@@ -0,0 +1,127 @@
+import { useAttr, bind, useRef } from "../../ce.mjs";
+
+const htmlStr = `
+<div class="relative overflow-hidden inline-flex items-center justify-center {{wrapClass}} {{isLoading ? 'bg-white/20 dark:bg-gray-800/20 animate-pulse' : 'bg-white/10 dark:bg-gray-800/10'}} transition-colors" style="{{wrapStyle}}">
+    <!-- Image -->
+    <img ref="img" src="{{src}}" alt="{{alt}}" class="w-full h-full object-{{fit}} {{isLoaded ? 'opacity-100' : 'opacity-0'}} transition-opacity duration-300 {{imgClass}}" style="{{imgStyle}}" {{lazy ? 'loading="lazy"' : ''}} />
+    
+    <!-- Loading State -->
+    <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 dark:text-gray-500 {{isLoading ? '' : 'hidden'}} bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm">
+        <slot name="loading">
+            <svg class="w-6 h-6 animate-spin text-blue-500/70" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        </slot>
+    </div>
+
+    <!-- Error State -->
+    <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 dark:text-gray-500 {{isError ? '' : 'hidden'}} bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm">
+        <slot name="error">
+            <g-icon name="view" class="w-6 h-6 mb-1 opacity-50"></g-icon>
+            <span class="text-[10px] sm:text-xs">加载失败</span>
+        </slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    src = ''
+    alt = ''
+    fit = 'cover' // 'fill', 'contain', 'cover', 'none', 'scale-down'
+    position = '' // 'top', 'bottom', 'center', 'left', 'right', or string coords
+    lazy = false
+    wrapClass = ''
+    wrapStyle = ''
+    imgClass = ''
+    imgStyle = ''
+    width = ''
+    height = ''
+
+    isLoaded = false
+    isError = false
+    isLoading = true
+
+    constructor() {
+        super()
+        this.style.display = 'inline-block'
+        const attr = useAttr(this)
+
+        this.src = attr.src || ''
+        this.alt = attr.alt || ''
+        this.fit = attr.fit || 'cover'
+        this.position = attr.position || ''
+        this.lazy = attr.lazy !== undefined && attr.lazy !== 'false'
+        this.width = attr.width || ''
+        this.height = attr.height || ''
+
+        let baseClass = attr.class || ''
+
+        // If neither width/height nor explicit class dimensions are provided, default to a sensible size
+        if (!this.width && !this.height && !baseClass.includes('w-') && !baseClass.includes('h-')) {
+            baseClass += ' w-24 h-24 sm:w-32 sm:h-32'
+        }
+
+        if (this.width) this.wrapStyle += `width: ${this.width}; `
+        if (this.height) this.wrapStyle += `height: ${this.height}; `
+
+        if (this.position) this.imgStyle += `object-position: ${this.position}; `
+
+        // Handling shapes
+        if (attr.round === 'true') {
+            baseClass += ' rounded-full'
+        } else if (attr.radius) {
+            baseClass += ` rounded-[${attr.radius}]`
+        } else if (!baseClass.includes('rounded')) {
+            baseClass += ' rounded-2xl' // Default glass rounded corner
+        }
+
+        // Add glass border
+        this.wrapClass = baseClass + ' backdrop-blur-md border border-white/60 dark:border-white/10 shadow-[inner_0_1px_1px_rgba(255,255,255,0.8),0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-[inner_0_1px_1px_rgba(255,255,255,0.1),0_4px_12px_rgba(0,0,0,0.2)]'
+
+        // Pass some specific classes directly to img if needed based on shape constraints
+        if (baseClass.includes('rounded-full')) {
+            this.imgClass = 'rounded-full'
+        } else if (baseClass.includes('rounded-2xl')) {
+            this.imgClass = 'rounded-2xl'
+        } else if (attr.radius) {
+            this.imgClass = `rounded-[${attr.radius}]`
+        }
+
+        if (!this.src) {
+            this.isLoading = false
+            this.isError = true
+        }
+    }
+
+    ready() {
+        const nodes = bind(htmlStr).create(this)
+        this.appendChild(nodes)
+
+        const { img } = useRef(this)
+
+        if (this.src) {
+            // Check if image is already cached/loaded completely
+            if (img.complete && img.naturalHeight !== 0) {
+                this.setLoaded()
+            } else {
+                img.onload = () => this.setLoaded()
+                img.onerror = () => this.setError()
+            }
+        }
+    }
+
+    setLoaded() {
+        this.isLoading = false
+        this.isLoaded = true
+        this.isError = false
+        if (this.update) this.update()
+    }
+
+    setError() {
+        this.isLoading = false
+        this.isLoaded = false
+        this.isError = true
+        if (this.update) this.update()
+    }
+}

package/console/components/g-popup.mjs

@@ -0,0 +1,130 @@
+import { useAttr, bind } from "../../ce.mjs";
+import {useWatch} from "../../index.mjs";
+
+let zIndex = 2000
+
+export const innerHTML = `
+<div class="fixed inset-0 flex {{wrapClass}} transition-all duration-300 {{visible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}}" style="z-index: {{zIndex}};">
+    <!-- Overlay -->
+    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm {{overlay !== 'false' ? '' : 'hidden'}}" onclick="{{onOverlayClick}}"></div>
+    
+    <!-- Content pane -->
+    <div class="relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-2xl shadow-2xl transition-all duration-300 {{contentClass}} {{visible ? visibleClass : hiddenClass}}" onclick="event.stopPropagation()">
+        <slot></slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    visible = false
+    position = 'center'
+    overlay = 'true'
+    closeOnClickOverlay = 'true'
+    round = 'false'
+    zIndex = 2000
+
+    wrapClass = 'items-center justify-center p-4'
+    contentClass = 'rounded-2xl max-w-full max-h-full overflow-y-auto'
+    visibleClass = 'opacity-100 scale-100 translate-y-0 translate-x-0'
+    hiddenClass = 'opacity-0 scale-95'
+
+    constructor() {
+        super()
+        this.style.display = 'contents'
+        const attr = useAttr(this)
+
+        this.position = attr.position || 'center'
+        this.overlay = attr.overlay || 'true'
+        this.closeOnClickOverlay = attr['close-on-click-overlay'] || 'true'
+        this.round = attr.round || 'false'
+
+        this._initClasses()
+
+        const watch = useWatch(this)
+
+        watch({
+            status: (status, value) => {
+
+                if (status === value) return
+
+                if (status) {
+
+                    this.open()
+
+                } else {
+
+                    this.close()
+                }
+            }
+        })
+    }
+
+    ready() {
+    }
+
+    _initClasses() {
+        const isRound = this.round === 'true'
+        switch (this.position) {
+            case 'bottom':
+                this.wrapClass = 'items-end justify-center'
+                this.contentClass = `w-full max-h-[90vh] overflow-y-auto ${isRound ? 'rounded-t-3xl' : ''}`
+                this.visibleClass = 'translate-y-0 opacity-100'
+                this.hiddenClass = 'translate-y-full opacity-0'
+                break
+            case 'top':
+                this.wrapClass = 'items-start justify-center'
+                this.contentClass = `w-full max-h-[90vh] overflow-y-auto ${isRound ? 'rounded-b-3xl' : ''}`
+                this.visibleClass = 'translate-y-0 opacity-100'
+                this.hiddenClass = '-translate-y-full opacity-0'
+                break
+            case 'left':
+                this.wrapClass = 'items-center justify-start'
+                this.contentClass = `h-full max-w-[90vw] overflow-y-auto ${isRound ? 'rounded-r-3xl' : ''}`
+                this.visibleClass = 'translate-x-0 opacity-100'
+                this.hiddenClass = '-translate-x-full opacity-0'
+                break
+            case 'right':
+                this.wrapClass = 'items-center justify-end'
+                this.contentClass = `h-full max-w-[90vw] overflow-y-auto ${isRound ? 'rounded-l-3xl' : ''}`
+                this.visibleClass = 'translate-x-0 opacity-100'
+                this.hiddenClass = 'translate-x-full opacity-0'
+                break
+            case 'center':
+            default:
+                this.wrapClass = 'items-center justify-center p-4' // safe area
+                this.contentClass = `max-w-[90vw] max-h-[90vh] overflow-y-auto ${isRound ? 'rounded-3xl' : ''}`
+                this.visibleClass = 'opacity-100 scale-100'
+                this.hiddenClass = 'opacity-0 scale-95'
+                break
+        }
+    }
+
+    open() {
+        this.zIndex = zIndex++
+        this.visible = true
+        if (this.update) this.update()
+        if (this.onopen) this.onopen()
+
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden'
+    }
+
+    close() {
+        this.visible = false
+        if (this.update) this.update()
+        if (this.onclose) this.onclose()
+
+        setTimeout(() => {
+            const hasOpenPopups = Array.from(document.querySelectorAll('g-popup')).some(p => p.visible)
+            if (!hasOpenPopups) {
+                document.body.style.overflow = ''
+            }
+        }, 300)
+    }
+
+    onOverlayClick() {
+        if (this.closeOnClickOverlay === 'true') {
+            this.close()
+        }
+    }
+}

package/console/components/g-row.mjs

@@ -0,0 +1,120 @@
+import { useAttr } from "../../ce.mjs";
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        this.style.display = 'flex'
+        this.style.flexWrap = 'wrap'
+        this.style.width = '100%'
+        this.style.boxSizing = 'border-box'
+
+        const attr = useAttr(this)
+
+        const justify = attr.justify || 'start'
+        const align = attr.align || 'top'
+        const gutter = attr.gutter || '0'
+        const classStr = attr.class || ''
+
+        // Map justify to flexbox
+        const justifyMap = {
+            'start': 'flex-start',
+            'end': 'flex-end',
+            'center': 'center',
+            'space-around': 'space-around',
+            'space-between': 'space-between'
+        }
+        this.style.justifyContent = justifyMap[justify] || 'flex-start'
+
+        // Map align to flexbox
+        const alignMap = {
+            'top': 'flex-start',
+            'middle': 'center',
+            'bottom': 'flex-end'
+        }
+        this.style.alignItems = alignMap[align] || 'flex-start'
+
+        // Handle gutter logic via context
+        // Gutter can be "20" or "[20, 30]"
+        let gutterX = 0
+        let gutterY = 0
+
+        if (gutter) {
+            if (gutter.startsWith('[')) {
+                try {
+                    const parsed = JSON.parse(gutter)
+                    if (Array.isArray(parsed) && parsed.length >= 2) {
+                        gutterX = Number(parsed[0])
+                        gutterY = Number(parsed[1])
+                    }
+                } catch (e) { }
+            } else {
+                gutterX = Number(gutter)
+            }
+        }
+
+        if (gutterX || gutterY) {
+            const mx = gutterX ? `-${gutterX / 2}px` : '0'
+            const my = gutterY ? `-${gutterY / 2}px` : '0'
+
+            // Apply negative margins to row host
+            this.style.marginLeft = mx
+            this.style.marginRight = mx
+            this.style.marginTop = my
+            this.style.marginBottom = my
+
+            // Create a mutation observer to pass gutter context to children <g-col> dynamically or initially
+            this.xPadding = gutterX ? `${gutterX / 2}px` : '0'
+            this.yPadding = gutterY ? `${gutterY / 2}px` : '0'
+        }
+
+        if (classStr) {
+            this.className = this.className ? this.className + ' ' + classStr : classStr
+        }
+
+        // Listen to children additions since standard Web Components don't easily do React-style context down effortlessly unless via MutationObserver or passing via DOM
+        this._setupObserver()
+    }
+
+    _setupObserver() {
+        this._observer = new MutationObserver((mutations) => {
+            if (!this.xPadding && !this.yPadding) return;
+
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(node => {
+                        this._applyGutterToChild(node)
+                    })
+                }
+            })
+        })
+    }
+
+    _applyGutterToChild(node) {
+        if (node.tagName === 'G-COL') {
+            if (this.xPadding) {
+                node.style.paddingLeft = this.xPadding
+                node.style.paddingRight = this.xPadding
+            }
+            if (this.yPadding) {
+                node.style.paddingTop = this.yPadding
+                node.style.paddingBottom = this.yPadding
+            }
+        }
+    }
+
+    connectedCallback() {
+        if (this._observer) {
+            this._observer.observe(this, { childList: true, subtree: false })
+        }
+        // Initially apply to existing children
+        if (this.xPadding || this.yPadding) {
+            Array.from(this.children).forEach(child => this._applyGutterToChild(child))
+        }
+    }
+
+    disconnectedCallback() {
+        if (this._observer) {
+            this._observer.disconnect()
+        }
+    }
+}

package/console/components/g-space.mjs

@@ -0,0 +1,21 @@
+import {useAttr} from "../../index.mjs";
+
+export const shadowRoot = `
+<style>
+div {
+    display: flex;
+    gap: {{gap || '8px'}};
+    flex-direction: {{direction}}
+}
+</style>
+<div>
+<slot></slot>
+</div>
+`
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        Object.assign(this, useAttr(this))
+    }
+}

package/console/components/g-toast.mjs

@@ -0,0 +1,116 @@
+import { useAttr } from "../../ce.mjs";
+
+let zIndex = 5000
+
+export const innerHTML = `
+  <div class="toast-container fixed top-[45%] left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-3 pointer-events-none" style="z-index: {{zIndex}};">
+      <slot></slot>
+  </div>
+`
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        // this.style.display = 'contents'
+        this.zIndex = zIndex;
+    }
+
+    ready() {
+        // Expose to window globally
+        window.$toast = {
+            show: (msg, type = 'text', duration = 2000) => this.show(msg, type, duration),
+            success: (msg, duration = 2000) => this.show(msg, 'success', duration),
+            error: (msg, duration = 2000) => this.show(msg, 'error', duration),
+            warning: (msg, duration = 2000) => this.show(msg, 'warning', duration),
+            loading: (msg, duration = 0) => this.show(msg, 'loading', duration),
+            hide: () => this.hideAll()
+        }
+    }
+
+    show(msg, type = 'text', duration = 2000) {
+        let container = this.querySelector('.toast-container') || this.firstElementChild;
+        if (!container) return;
+
+        const item = document.createElement('div');
+
+        let iconHtml = '';
+        if (type === 'success') {
+            iconHtml = '<svg class="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>';
+        } else if (type === 'error') {
+            iconHtml = '<svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>';
+        } else if (type === 'warning') {
+            iconHtml = '<svg class="w-5 h-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>';
+        } else if (type === 'loading') {
+            iconHtml = `<svg class="w-5 h-5 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`;
+        }
+
+        item.className = 'bg-gray-800/90 dark:bg-gray-200/90 text-white dark:text-gray-900 px-5 py-3 rounded-xl shadow-2xl backdrop-blur-md flex items-center gap-3 pointer-events-auto transition-all duration-300 transform scale-95 opacity-0 max-w-[80vw] !m-0 !mt-0 !mb-0 overflow-hidden';
+
+        // Starts with 0 height so the container shifts smoothly
+        item.style.maxHeight = '0px';
+        item.style.paddingTop = '0px';
+        item.style.paddingBottom = '0px';
+        item.style.opacity = '0';
+
+        item.innerHTML = `
+            ${iconHtml}
+            <span class="text-sm font-medium whitespace-pre-wrap break-words inline-block">${msg}</span>
+        `;
+
+        container.appendChild(item);
+
+        // Animate in
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                item.classList.remove('scale-95');
+                item.classList.add('scale-100');
+                item.style.maxHeight = '150px'; // sufficiently large value
+                item.style.paddingTop = '';
+                item.style.paddingBottom = '';
+                item.style.opacity = '1';
+            });
+        });
+
+        if (duration > 0) {
+            setTimeout(() => {
+                this._removeItem(item);
+            }, duration);
+        }
+
+        return () => this._removeItem(item);
+    }
+
+    _removeItem(item) {
+        if (!item.parentNode) return;
+        item.classList.remove('scale-100');
+        item.classList.add('scale-75');
+        item.style.opacity = '0';
+
+        setTimeout(() => {
+            if (!item.parentNode) return;
+
+            // 固定当前高度以便开始过渡动画
+            item.style.height = item.offsetHeight + 'px';
+            item.style.overflow = 'hidden';
+            item.offsetHeight; // 强制重绘
+
+            // 收缩高度和边距
+            item.style.height = '0px';
+            item.style.paddingTop = '0px';
+            item.style.paddingBottom = '0px';
+            item.style.marginTop = '0px';
+            item.style.marginBottom = '0px';
+
+            setTimeout(() => {
+                if (item.parentNode) item.parentNode.removeChild(item);
+            }, 300);
+        }, 150);
+    }
+
+    hideAll() {
+        const container = this.querySelector('.toast-container') || this.firstElementChild;
+        if (container) {
+            Array.from(container.children).forEach(item => this._removeItem(item));
+        }
+    }
+}