@k3000/ce 0.1.0 → 0.2.1

package/console/pages/demo-space.mjs

@@ -0,0 +1,51 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="间距展示区" description="展示 g-space 间距组件的用法"></common-header>
+
+    <div class="space-y-8">
+        <!-- 基础用法 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">基础用法 (默认水平)</h3>
+            <g-space>
+                <g-button>按钮 A</g-button>
+                <g-button>按钮 B</g-button>
+                <g-button>按钮 C</g-button>
+            </g-space>
+        </div>
+
+        <!-- 垂直方向 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">垂直方向 (direction="column")</h3>
+            <g-space direction="column">
+                <g-button>上方的按钮</g-button>
+                <g-button>中间的按钮</g-button>
+                <g-button>下方的按钮</g-button>
+            </g-space>
+        </div>
+
+        <!-- 自定义间距 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">自定义间距 (gap)</h3>
+            <p class="text-sm text-gray-500 mb-4">gap="24px"</p>
+            <g-space gap="24px" class="mb-6">
+                <g-button type="primary">很大间距</g-button>
+                <g-button type="primary">很大间距</g-button>
+                <g-button type="primary">很大间距</g-button>
+            </g-space>
+            
+            <p class="text-sm text-gray-500 mb-4">gap="4px"</p>
+            <g-space gap="4px">
+                <g-button type="warning">很小间距</g-button>
+                <g-button type="warning">很小间距</g-button>
+                <g-button type="warning">很小间距</g-button>
+            </g-space>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    ready() {
+        console.log('demo-space ready')
+    }
+}

package/console/pages/demo-toast.mjs

@@ -0,0 +1,66 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="轻提示 (Toast)" description="展示 g-toast 消息通知的各种状态和能力。包含普通文本、成功、错误、警告、加载状态等。"></common-header>
+
+    <div class="space-y-8 pb-10">
+        <!-- 基础用法 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">基础用法 (纯文本)</h3>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button onclick="window.$toast.show('这是一条普通的提示消息')">普通提示</g-button>
+                <g-button onclick="window.$toast.show('系统已升级到星际 Antigravity 版本！这是一条非常长的通知文本用来测试换行是否正常运作以及展示动态高度适应。')">长文本提示</g-button>
+            </div>
+        </div>
+
+        <!-- 状态类型 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">状态类型提示</h3>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button type="success" onclick="window.$toast.success('操作成功完成')">成功 (Success)</g-button>
+                <g-button type="danger" onclick="window.$toast.error('网络连接异常，请重试')">错误 (Error)</g-button>
+                <g-button type="warning" onclick="window.$toast.warning('您的磁盘空间已不足')">警告 (Warning)</g-button>
+            </div>
+        </div>
+
+        <!-- 加载提示 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">加载状态指示</h3>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button type="primary" onclick="{{startLoading}}">显示加载中 (3秒后自动关闭)</g-button>
+            </div>
+            <p class="text-gray-500 text-sm mt-4">当请求发生时可显示加载提示，等待回调结束后由程序负责关闭它。</p>
+        </div>
+        
+        <!-- 进阶管理 -->
+        <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">进阶管理</h3>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button type="primary" plain onclick="{{burst}}">连续快速触发</g-button>
+                <g-button type="danger" plain onclick="window.$toast.hide()">手动清除所有轻提示</g-button>
+            </div>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    ready() {
+        console.log('demo-toast ready')
+    }
+
+    startLoading() {
+        // duration=0 ensures it won't be closed automatically
+        const hide = window.$toast.loading('加载中，请稍候...', 0);
+        setTimeout(() => {
+            hide(); // close the specific loading toast
+            window.$toast.success('数据加载完成!');
+        }, 3000);
+    }
+
+    burst() {
+        window.$toast.show('这是第一条消息');
+        setTimeout(() => window.$toast.success('操作成功！这是第二条消息'), 200);
+        setTimeout(() => window.$toast.error('发生网络错误！这是第三条消息'), 400);
+        setTimeout(() => window.$toast.warning('请注意！这是第四条消息'), 600);
+    }
+}

package/index.mjs

@@ -178,7 +178,7 @@ let handleArray = (data, array) => {
  * 调用该方法完成可配置参数合方法的初始化
  * @param options
  * @example
- * import { config } from '../index.mjs'
+ * import { config } from '../ce.mjs'
  * config({
  *  dir: './app/comp',
  *  getVariables: () => {...}
@@ -915,6 +915,13 @@ export const useAttr = node => {
 
     for (const n of node.attributes) {
 
+        if (n.nodeName.includes('-')) {
+
+            result[n.nodeName.split('-')
+                .map((key, i) => key && i ? key[0].toUpperCase() + key.slice(1) : key)
+                .join('')] = n.nodeValue
+        }
+
         result[n.nodeName] = n.nodeValue
     }
 

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@k3000/ce",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "",
-  "main": "index.mjs"
+  "main": "index.mjs",
+  "scripts": {
+    "sync": "npm link"
+  },
+  "bin": {
+    "ce": "bin.mjs"
+  }
 }

package/test.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        .test:before {
+            content: attr(title);
+        }
+    </style>
+</head>
+<body>
+<div title="qwe" class="test" attr-qwe=""></div>
+</body>
+</html>

package/console/components/console-header.mjs

@@ -1,26 +0,0 @@
-import {useAttr} from "../../index.mjs";
-
-export const innerHTML = `
-<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-    <div>
-        <h1 class="text-2xl font-bold text-gray-800 dark:text-white tracking-tight">{{title}}</h1>
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{description}}</p>
-    </div>
-    <div class="flex items-center gap-3">
-        <slot></slot>
-    </div>
-</div>
-`
-
-export default class extends HTMLElement {
-    title = ''
-    description = ''
-
-    constructor() {
-        super()
-        const attr = useAttr(this)
-        this.title = attr.title
-        this.description = attr.description
-        // console.log([this])
-    }
-}