@iftc/yete 0.0.1-alpha.3 → 0.0.1-alpha.4

package/index.js

@@ -67,6 +67,8 @@ let isStarted = false;
 let custom404Page = null;
 let custom502Page = null;
 
+let searchParams = new URLSearchParams("");
+
 /**
  * 导出的对象
  */
@@ -230,7 +232,7 @@ const obj = {
             }
             document.body.innerHTML = "<center><h1>404 Not Found</h1><p>Power By Yete</p></center>";
             obj.emit('page-change', new obj.YeteEvent("page-change", { path, isNotFound: true }));
-            throw new YeteError("The page not found.");
+            console.error(new YeteError("The page not found."));
         }
     },
     /**
@@ -365,8 +367,294 @@ const obj = {
             throw new YeteError("The page not found.");
         }
     },
+    /**
+     * HTTP 请求
+     * @description HTTP 请求封装，提供更便捷的方式进行 HTTP 请求
+     * @example 
+     * const res = await HTTP.GET("https://example.com");
+     * const data = await res.json();
+     */
+    HTTP: class {
+        constructor() { }
+        /**
+         * GET 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.GET("https://example.com");
+         * const data = await res.json();
+         */
+        static async GET(url, headers = {}) {
+            return await fetch(url, { headers });
+        }
+        /**
+         * POST 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.POST("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async POST(url, body, headers = {}) {
+            return await fetch(url, { method: "POST", body, headers });
+        }
+        /**
+         * PUT 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.PUT("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async PUT(url, body, headers = {}) {
+            return await fetch(url, { method: "PUT", body, headers });
+        }
+        /**
+         * DELETE 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.DELETE("https://example.com");
+         * const data = await res.json();
+         */
+        static async DELETE(url, headers = {}) {
+            return await fetch(url, { method: "DELETE", headers });
+        }
+        /**
+         * PATCH 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.PATCH("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async PATCH(url, body, headers = {}) {
+            return await fetch(url, { method: "PATCH", body, headers });
+        }
+        /**
+         * HEAD 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.HEAD("https://example.com");
+         * const data = await res.json();
+         */
+        static async HEAD(url, headers = {}) {
+            return await fetch(url, { method: "HEAD", headers });
+        }
+        /**
+         * OPTIONS 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.OPTIONS("https://example.com");
+         * const data = await res.json();
+         */
+        static async OPTIONS(url, headers = {}) {
+            return await fetch(url, { method: "OPTIONS", headers });
+        }
+        /**
+         * TRACE 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.TRACE("https://example.com");
+         * const data = await res.json();
+         */
+        static async TRACE(url, headers = {}) {
+            return await fetch(url, { method: "TRACE", headers });
+        }
+        /**
+         * CONNECT 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.CONNECT("https://example.com");
+         * const data = await res.json();
+         */
+        static async CONNECT(url, headers = {}) {
+            return await fetch(url, { method: "CONNECT", headers });
+        }
+        /**
+         * 读取流
+         * @param {Response} response 
+         * @param {Function} callback 
+         * @returns {Promise<void>}
+         * @example
+         * await HTTP.readStream(res, ({ chunk, done }) => { console.log(done, chunk); });
+         */
+        static async readStream(response, callback = ({ chunk, done }) => { console.log(done, chunk); }) {
+            if (!response.ok) {
+                throw new YeteError("Response is not ok.");
+            }
+            if (!response.body) {
+                throw new YeteError("Response body is not available.");
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder('utf-8');
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        const finalChunk = decoder.decode();
+                        callback({ chunk: finalChunk || null, done: true });
+                        break;
+                    }
+                    const chunk = decoder.decode(value, { stream: true });
+                    callback({ chunk, done: false });
+                }
+            } catch (error) {
+                throw new YeteError(`Stream reading failed: ${error.message}`);
+            } finally {
+                reader.releaseLock();
+            }
+        }
+        /**
+         * 读取响应体
+         * @param {Response} response 
+         * @param {String} type 
+         * @returns {Promise<any>}
+         * @example
+         * const data = await HTTP.readBody(res);
+         */
+        static async readBody(response, type = "text") {
+            if (!response.ok) {
+                throw new YeteError("Response is not ok.");
+            }
+            if (!response.body) {
+                throw new YeteError("Response body is not available.");
+            }
+            switch (type) {
+                case "text":
+                    return await response.text();
+                case "json":
+                    return await response.json();
+                case "blob":
+                    return await response.blob();
+                case "arrayBuffer":
+                    return await response.arrayBuffer();
+                case "formData":
+                    return await response.formData();
+                default:
+                    throw new YeteError("Invalid type.");
+            }
+        }
+        /**
+         * 读取响应头
+         * @param {Response} response 
+         * @returns {Promise<Headers>}
+         * @example
+         * const headers = await HTTP.readHeaders(res);
+         */
+        static async readHeaders(response) {
+            return response.headers;
+        }
+    },
+    /**
+     * 获取 URL 参数
+     * @example
+     * const params = searchParams;
+     */
+    searchParams: function () {
+        return searchParams;
+    },
+    /**
+     * 加载 UI
+     * @description 可通过 URL 或 XML 字符串加载 UI
+     * @param {String} str 
+     * @returns {Promise<HTMLElement>}
+     * @example
+     * await loadUI("https://example.com/ui.xml");
+     * await loadUI(`<Yete><Text>Hello World</Text></Yete>`);
+     */
+    loadUI: async function (str) {
+        let isURL = false;
+        try {
+            new URL(str);
+            isURL = true;
+        } catch { }
+        if (isURL) {
+            const res = await fetch(str);
+            const text = await res.text();
+            return loadUI(text);
+        } else {
+            return loadUI(str);
+        }
+    }
 };
 
+/**
+ * 加载 UI
+ * @param {String} xmlstring 
+ * @returns {HTMLElement}
+ */
+function loadUI(xmlstring) {
+    const parser = new DOMParser();
+    try {
+        const xmlDoc = parser.parseFromString(xmlstring, "text/xml");
+        const root = xmlDoc.documentElement;
+        if (root.tagName === "Yete") {
+            let html = "<div yete-root>";
+            const rootNodes = root.childNodes;
+            for (let i = 0; i < rootNodes.length; i++) {
+                const node = rootNodes[i];
+                html += parseNode(node);
+            }
+            html += "</div>";
+            return new DOMParser().parseFromString(html, "text/html").body.firstElementChild;
+        } else {
+            throw new YeteError("Invalid XML string.");
+        }
+    } catch (error) {
+        throw new YeteError(`Failed to LoadUI : ${error.message}`);
+    }
+    function parseNode(node) {
+        const tagName = node.tagName;
+        if (node.nodeName === "#text") {
+            return node.textContent;
+        }
+        if (node instanceof NodeList) {
+            let html = "";
+            for (let i = 0; i < node.length; i++) {
+                html += parseNode(node[i]);
+            }
+            return html;
+        }
+        if (UIElements[tagName]) {
+            const htmlTagName = UIElements[tagName].html;
+            let attrs = "";
+            for (const i in UIElements[tagName].attr) {
+                const attr = UIElements[tagName].attr[i];
+                console.log(node.hasAttribute(attr), attr);
+                if (node.hasAttribute(attr)) {
+                    const value = node.getAttribute(attr);
+                    console.log(attr, value);
+                    if (value == "true") {
+                        attrs += ` ${attr == "id" ? `${"yete-id"}` : attr}`;
+                    } else {
+                        attrs += ` ${attr == "id" ? `${"yete-id"}` : attr}="${value}"`;
+                    }
+                }
+            }
+            return `<${htmlTagName} ${attrs} style="${UIElements[tagName].style || ""}">${parseNode(node.childNodes)}</${htmlTagName}>`;
+        } else {
+            throw new YeteError(`Invalid tag name: ${tagName}`);
+        }
+    }
+}
+
 /**
  * 添加事件监听器
  * @param {String} type 
@@ -392,6 +680,7 @@ obj.off = obj.removeEventListener;
  */
 obj.emit = obj.dispatchEvent;
 
+
 window.addEventListener("error", function (event) {
     const { message, filename, lineno, colno, error } = event;
     if (custom502Page) {
@@ -409,13 +698,20 @@ window.addEventListener("error", function (event) {
         if (errorErrorEl) errorErrorEl.innerText = error;
         obj.emit('page-change', new obj.YeteEvent("page-change", { path, isError: true }));
     } else {
-        document.body.innerHTML = `<center><h1>Have an error: "${message}" in "${filename}" at ${lineno}:${colno}</h1><p>Powsered by Yete.</p></center>`;
+        document.body.innerHTML = `<center><h1>Have an error: "${message}" in "${filename}" at ${lineno}:${colno}</h1><p>Power by Yete.</p></center>`;
         obj.emit('page-change', new obj.YeteEvent("page-change", { path, isError: true }));
     }
 });
 
 window.addEventListener('hashchange', () => {
-    const path = location.hash.slice(1) || '/';
+    const fullpath = location.hash.slice(1) || '/';
+    console.log("[Yete]", "Full path", fullpath);
+    const SearchParams = fullpath.split("?").slice(1).join("?") || '';
+    const path = fullpath.split("?")[0];
+    const query = new URLSearchParams(SearchParams);
+    searchParams = query;
+    console.log("[Yete]", "Query", query);
+    console.log("[Yete]", "Navigate to", path);
     obj.toPage(path);
 });
 

package/libs/yete-ui/Button.js

@@ -0,0 +1,156 @@
+class Button extends HTMLElement {
+    static get observedAttributes() {
+        return ['variant', 'size', 'disabled', 'loading', 'icon', 'icon-position'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._rippleElement = null;
+    }
+
+    connectedCallback() {
+        this._render();
+        this._addEventListeners();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this._render();
+        }
+    }
+
+    _render() {
+        const variant = this.getAttribute('variant') || 'contained';
+        const size = this.getAttribute('size') || 'medium';
+        const disabled = this.hasAttribute('disabled');
+        const loading = this.hasAttribute('loading');
+        const icon = this.getAttribute('icon');
+        const iconPosition = this.getAttribute('icon-position') || 'start';
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          user-select: none;
+        }
+        .button {
+          font-family: Roboto, sans-serif;
+          font-size: 14px;
+          font-weight: 500;
+          letter-spacing: 0.089em;
+          border-radius: 20px; /* Android风格圆角 */
+          border: none;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* Android阴影 */
+          min-height: 36px;
+          padding: 8px 16px;
+        }
+        .button:hover {
+          box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+        }
+        .button:active {
+          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+          transform: translateY(1px);
+        }
+        }
+        .button:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+        /* 变体样式 */
+        .button.contained {
+          background: #1976d2; /* Android蓝色 */
+          color: white;
+        }
+        .button.contained:hover {
+          background: #1565c0;
+        }
+        .button.contained:active {
+          background: #0d47a1;
+        }
+        .button.outlined {
+          background: transparent;
+          color: #1976d2;
+          border: 1px solid #1976d2;
+        }
+        .button.outlined:hover {
+          background: rgba(25, 118, 210, 0.04);
+        }
+        .button.text {
+          background: transparent;
+          color: #1976d2;
+          box-shadow: none;
+        }
+        .button.text:hover {
+          background: rgba(25, 118, 210, 0.04);
+        }
+        /* 尺寸样式 */
+        .button.small { padding: 6px 12px; min-height: 32px; font-size: 12px; }
+        .button.medium { padding: 8px 16px; min-height: 36px; font-size: 14px; }
+        .button.large { padding: 10px 20px; min-height: 44px; font-size: 16px; }
+        /* 波纹效果 */
+        .ripple {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.5);
+          transform: scale(0);
+          animation: ripple-animation 0.6s linear;
+          pointer-events: none;
+        }
+        @keyframes ripple-animation {
+          to { transform: scale(4); opacity: 0; }
+        }
+        /* 加载状态 */
+        .spinner {
+          width: 18px;
+          height: 18px;
+          border: 2px solid currentColor;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      </style>
+      <button class="button ${variant} ${size}" ?disabled="${disabled}">
+        ${loading ? '<span class="spinner"></span>' : ''}
+        ${!loading && icon && iconPosition === 'start' ? `<span class="icon">${icon}</span>` : ''}
+        <slot></slot>
+        ${!loading && icon && iconPosition === 'end' ? `<span class="icon">${icon}</span>` : ''}
+      </button>
+    `;
+    }
+
+    _addEventListeners() {
+        const button = this.shadowRoot.querySelector('.button');
+        button?.addEventListener('click', (e) => this._handleRipple(e));
+    }
+
+    _handleRipple(event) {
+        if (this.hasAttribute('disabled')) return;
+
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+
+        this._rippleElement = document.createElement('span');
+        this._rippleElement.classList.add('ripple');
+        this._rippleElement.style.width = this._rippleElement.style.height = `${size}px`;
+        this._rippleElement.style.left = `${event.clientX - rect.left - size / 2}px`;
+        this._rippleElement.style.top = `${event.clientY - rect.top - size / 2}px`;
+
+        button.appendChild(this._rippleElement);
+        setTimeout(() => this._rippleElement?.remove(), 600);
+    }
+}
+
+customElements.define("yete-button", Button);

package/libs/yete-ui/Text.js

@@ -1,4 +1,21 @@
 class Text extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    color: var(--text-color, #757575);
+                    user-select: none;
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
 }
 
 customElements.define('yete-text', Text);

package/libs/yete-ui/yete.json

@@ -7,9 +7,15 @@
             "html": "yete-text",
             "style": null,
             "attr": ["id", "class"]
+        },
+        "Button": {
+            "html": "yete-button",
+            "style": null,
+            "attr": ["id", "class"]
         }
     },
     "files": [
-        "Text.js"
+        "Text.js",
+        "Button.js"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iftc/yete",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "description": "",
   "keywords": [
     "IFTC",