exsdk-ui5 0.1.2 → 0.1.5

package/copy-exsdk.cjs

@@ -0,0 +1,36 @@
+const fs   = require("fs");
+const path = require("path");
+
+const root    = process.cwd();
+const src     = path.join(root, "node_modules", "exsdk-ui5", "src", "controls");
+const dest    = path.join(root, "webapp", "control");
+const css     = path.join(root, "node_modules", "exsdk-ui5", "dist", "exsdk.ui5.css");
+const cssDest = path.join(root, "webapp", "css", "exsdk.ui5.css");
+
+try {
+    if (!fs.existsSync(src)) {
+        console.log("[ExSDK] src/controls not found, skipping.");
+        process.exit(0);
+    }
+
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+
+    let copied = 0;
+    fs.readdirSync(src).forEach(file => {
+        if (!file.endsWith(".js")) return;
+        fs.copyFileSync(path.join(src, file), path.join(dest, file));
+        copied++;
+    });
+
+    if (fs.existsSync(css)) {
+        if (!fs.existsSync(path.dirname(cssDest))) {
+            fs.mkdirSync(path.dirname(cssDest), { recursive: true });
+        }
+        fs.copyFileSync(css, cssDest);
+        console.log("[ExSDK] CSS copied to webapp/css/exsdk.ui5.css");
+    }
+
+    console.log(`[ExSDK] ${copied} control(s) copied to webapp/control/`);
+} catch (e) {
+    console.warn("[ExSDK] postinstall warning:", e.message);
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "exsdk-ui5",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
-  "description": "Modern UI component SDK for SAP Fiori & UI5 — beautiful, fast, framework-independent",
+  "description": "Modern UI component SDK for SAP Fiori & UI5",
   "author": "ExSDK",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/exsdk.ui5.cjs.js",
@@ -19,14 +19,13 @@
   "files": [
     "dist",
     "src/controls",
-    "ui5-wrapper",
-    "README.md",
-    "LICENSE.md"
+    "copy-exsdk.cjs",
+    "README.md"
   ],
   "scripts": {
-    "build":   "rollup -c",
-    "watch":   "rollup -c --watch",
-    "version": "node scripts/version.js"
+    "build":      "rollup -c",
+    "watch":      "rollup -c --watch",
+    "postinstall": "node copy-exsdk.cjs"
   },
   "devDependencies": {
     "rollup": "^4.0.0",
@@ -34,12 +33,9 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "postcss": "^8.4.0"
   },
-  "keywords": [
-    "sap", "ui5", "fiori", "sdk", "components",
-    "table", "form", "kanban", "button"
-  ],
+  "keywords": ["sap", "ui5", "fiori", "sdk", "components"],
   "repository": {
     "type": "git",
-    "url": "https://github.com/exsdk/ui5"
+    "url": "https://github.com/exsdk/ui5.git"
   }
 }

package/src/controls/ExButton.js

@@ -1,210 +1,210 @@
-sap.ui.define([
-    "sap/ui/core/Control"
-], function (Control) {
-    "use strict";
-
-    return Control.extend("project1.control.ExButton", {
-
-        metadata: {
-            properties: {
-                text:     { type: "string",  defaultValue: "Button" },
-                // primary | secondary | ghost | danger | pill | gradient | glass | text-btn
-                type:     { type: "string",  defaultValue: "primary" },
-                // sm | md | lg
-                size:     { type: "string",  defaultValue: "md" },
-                icon:     { type: "string",  defaultValue: "" },
-                iconPos:  { type: "string",  defaultValue: "left" }, // left | right
-                iconOnly: { type: "boolean", defaultValue: false },
-                loading:  { type: "boolean", defaultValue: false },
-                enabled:  { type: "boolean", defaultValue: true },
-                // success | error | idle
-                state:    { type: "string",  defaultValue: "idle" },
-                width:    { type: "string",  defaultValue: "" }   // "full" veya px değeri
-            },
-            events: {
-                press: {}
-            }
-        },
-
-        renderer: function (oRM, oControl) {
-            oRM.openStart("div", oControl);
-            oRM.class("ex-btn-wrapper");
-            oRM.openEnd();
-            oRM.close("div");
-        },
-
-        onAfterRendering: function () {
-            this._render();
-        },
-
-        // =============================
-        // RENDER
-        // =============================
-        _render: function () {
-            const oWrapper = this.getDomRef();
-            if (!oWrapper) return;
-
-            const type     = this.getType();
-            const size     = this.getSize();
-            const text     = this.getText();
-            const icon     = this.getIcon();
-            const iconPos  = this.getIconPos();
-            const iconOnly = this.getIconOnly();
-            const loading  = this.getLoading();
-            const enabled  = this.getEnabled();
-            const state    = this.getState();
-            const width    = this.getWidth();
-
-            const isDisabled = !enabled || loading;
-
-            // State'e göre icon & metin
-            let displayText = text;
-            let displayIcon = icon;
-
-            if (state === "success") {
-                displayText = "Başarılı";
-                displayIcon = "✓";
-            } else if (state === "error") {
-                displayText = "Hata";
-                displayIcon = "✕";
-            } else if (loading) {
-                displayText = "Yükleniyor...";
-            }
-
-            const spinnerHTML = `
-                <span class="ex-btn-icon ex-btn-spinner-icon">
-                    <svg viewBox="0 0 20 20" fill="none">
-                        <circle cx="10" cy="10" r="7"
-                            stroke="currentColor"
-                            stroke-width="2.5"
-                            stroke-linecap="round"
-                            stroke-dasharray="38"
-                            stroke-dashoffset="28"/>
-                    </svg>
-                </span>`;
-
-            const iconHTML = displayIcon
-                ? `<span class="ex-btn-icon">${displayIcon}</span>`
-                : "";
-
-            const textHTML = (!iconOnly || loading || state !== "idle")
-                ? `<span class="ex-btn-text">${displayText}</span>`
-                : "";
-
-            const leftContent  = (iconPos === "left"  && !loading) ? iconHTML : "";
-            const rightContent = (iconPos === "right" && !loading) ? iconHTML : "";
-            const loaderHTML   = loading ? spinnerHTML : "";
-
-            const widthStyle = width === "full"
-                ? "width:100%;"
-                : width ? `width:${width};` : "";
-
-            const stateClass = state !== "idle" ? `ex-btn--${state}` : "";
-
-            oWrapper.innerHTML = `
-                <button
-                    class="ex-btn ex-btn--${type} ex-btn--${size} ${stateClass} ${iconOnly && state === "idle" && !loading ? "ex-btn--icon-only" : ""} ${loading ? "ex-btn--loading" : ""}"
-                    style="${widthStyle}"
-                    ${isDisabled ? "disabled" : ""}
-                    aria-busy="${loading}"
-                    aria-label="${text}">
-                    <span class="ex-btn-ripple-container"></span>
-                    ${loaderHTML}
-                    ${leftContent}
-                    ${textHTML}
-                    ${rightContent}
-                </button>
-            `;
-
-            this._attachEvents(oWrapper);
-        },
-
-        // =============================
-        // EVENTS
-        // =============================
-        _attachEvents: function (oWrapper) {
-            const btn = oWrapper.querySelector("button");
-            if (!btn) return;
-
-            btn.addEventListener("click", (e) => {
-                if (btn.disabled) return;
-                this._ripple(btn, e);
-                this.firePress();
-            });
-
-            btn.addEventListener("keydown", (e) => {
-                if ((e.key === "Enter" || e.key === " ") && !btn.disabled) {
-                    e.preventDefault();
-                    this._ripple(btn, null);
-                    this.firePress();
-                }
-            });
-        },
-
-        // =============================
-        // RIPPLE
-        // =============================
-        _ripple: function (btn, e) {
-            const container = btn.querySelector(".ex-btn-ripple-container");
-            if (!container) return;
-
-            const circle = document.createElement("span");
-            circle.className = "ex-btn-ripple";
-
-            const rect = btn.getBoundingClientRect();
-            const size = Math.max(rect.width, rect.height) * 2;
-            const x    = e ? e.clientX - rect.left - size / 2 : rect.width / 2 - size / 2;
-            const y    = e ? e.clientY - rect.top  - size / 2 : rect.height / 2 - size / 2;
-
-            circle.style.cssText = `width:${size}px; height:${size}px; left:${x}px; top:${y}px;`;
-            container.appendChild(circle);
-            circle.addEventListener("animationend", () => circle.remove());
-        },
-
-        // =============================
-        // PUBLIC SETTERS
-        // =============================
-        setText: function (s) {
-            this.setProperty("text", s, true);
-            const el = this._getEl(".ex-btn-text");
-            if (el) el.textContent = s;
-        },
-
-        setLoading: function (b) {
-            this.setProperty("loading", b, true);
-            this._render();
-        },
-
-        setEnabled: function (b) {
-            this.setProperty("enabled", b, true);
-            const btn = this._getEl("button");
-            if (btn) btn.disabled = !b || this.getLoading();
-        },
-
-        setType: function (s) {
-            this.setProperty("type", s, true);
-            this._render();
-        },
-
-        setState: function (s) {
-            this.setProperty("state", s, true);
-            this._render();
-
-            // success / error sonrası otomatik idle'a dön
-            if (s === "success" || s === "error") {
-                setTimeout(() => {
-                    this.setProperty("state", "idle", true);
-                    this._render();
-                }, 2000);
-            }
-        },
-
-        // =============================
-        // UTILS
-        // =============================
-        _getEl: function (sel) {
-            const w = this.getDomRef();
-            return w ? w.querySelector(sel) : null;
-        }
-    });
-});
+sap.ui.define([
+    "sap/ui/core/Control"
+], function (Control) {
+    "use strict";
+
+    return Control.extend("project1.control.ExButton", {
+
+        metadata: {
+            properties: {
+                text:     { type: "string",  defaultValue: "Button" },
+                // primary | secondary | ghost | danger | pill | gradient | glass | text-btn
+                type:     { type: "string",  defaultValue: "primary" },
+                // sm | md | lg
+                size:     { type: "string",  defaultValue: "md" },
+                icon:     { type: "string",  defaultValue: "" },
+                iconPos:  { type: "string",  defaultValue: "left" }, // left | right
+                iconOnly: { type: "boolean", defaultValue: false },
+                loading:  { type: "boolean", defaultValue: false },
+                enabled:  { type: "boolean", defaultValue: true },
+                // success | error | idle
+                state:    { type: "string",  defaultValue: "idle" },
+                width:    { type: "string",  defaultValue: "" }   // "full" veya px değeri
+            },
+            events: {
+                press: {}
+            }
+        },
+
+        renderer: function (oRM, oControl) {
+            oRM.openStart("div", oControl);
+            oRM.class("ex-btn-wrapper");
+            oRM.openEnd();
+            oRM.close("div");
+        },
+
+        onAfterRendering: function () {
+            this._render();
+        },
+
+        // =============================
+        // RENDER
+        // =============================
+        _render: function () {
+            const oWrapper = this.getDomRef();
+            if (!oWrapper) return;
+
+            const type     = this.getType();
+            const size     = this.getSize();
+            const text     = this.getText();
+            const icon     = this.getIcon();
+            const iconPos  = this.getIconPos();
+            const iconOnly = this.getIconOnly();
+            const loading  = this.getLoading();
+            const enabled  = this.getEnabled();
+            const state    = this.getState();
+            const width    = this.getWidth();
+
+            const isDisabled = !enabled || loading;
+
+            // State'e göre icon & metin
+            let displayText = text;
+            let displayIcon = icon;
+
+            if (state === "success") {
+                displayText = "Başarılı";
+                displayIcon = "✓";
+            } else if (state === "error") {
+                displayText = "Hata";
+                displayIcon = "✕";
+            } else if (loading) {
+                displayText = "Yükleniyor...";
+            }
+
+            const spinnerHTML = `
+                <span class="ex-btn-icon ex-btn-spinner-icon">
+                    <svg viewBox="0 0 20 20" fill="none">
+                        <circle cx="10" cy="10" r="7"
+                            stroke="currentColor"
+                            stroke-width="2.5"
+                            stroke-linecap="round"
+                            stroke-dasharray="38"
+                            stroke-dashoffset="28"/>
+                    </svg>
+                </span>`;
+
+            const iconHTML = displayIcon
+                ? `<span class="ex-btn-icon">${displayIcon}</span>`
+                : "";
+
+            const textHTML = (!iconOnly || loading || state !== "idle")
+                ? `<span class="ex-btn-text">${displayText}</span>`
+                : "";
+
+            const leftContent  = (iconPos === "left"  && !loading) ? iconHTML : "";
+            const rightContent = (iconPos === "right" && !loading) ? iconHTML : "";
+            const loaderHTML   = loading ? spinnerHTML : "";
+
+            const widthStyle = width === "full"
+                ? "width:100%;"
+                : width ? `width:${width};` : "";
+
+            const stateClass = state !== "idle" ? `ex-btn--${state}` : "";
+
+            oWrapper.innerHTML = `
+                <button
+                    class="ex-btn ex-btn--${type} ex-btn--${size} ${stateClass} ${iconOnly && state === "idle" && !loading ? "ex-btn--icon-only" : ""} ${loading ? "ex-btn--loading" : ""}"
+                    style="${widthStyle}"
+                    ${isDisabled ? "disabled" : ""}
+                    aria-busy="${loading}"
+                    aria-label="${text}">
+                    <span class="ex-btn-ripple-container"></span>
+                    ${loaderHTML}
+                    ${leftContent}
+                    ${textHTML}
+                    ${rightContent}
+                </button>
+            `;
+
+            this._attachEvents(oWrapper);
+        },
+
+        // =============================
+        // EVENTS
+        // =============================
+        _attachEvents: function (oWrapper) {
+            const btn = oWrapper.querySelector("button");
+            if (!btn) return;
+
+            btn.addEventListener("click", (e) => {
+                if (btn.disabled) return;
+                this._ripple(btn, e);
+                this.firePress();
+            });
+
+            btn.addEventListener("keydown", (e) => {
+                if ((e.key === "Enter" || e.key === " ") && !btn.disabled) {
+                    e.preventDefault();
+                    this._ripple(btn, null);
+                    this.firePress();
+                }
+            });
+        },
+
+        // =============================
+        // RIPPLE
+        // =============================
+        _ripple: function (btn, e) {
+            const container = btn.querySelector(".ex-btn-ripple-container");
+            if (!container) return;
+
+            const circle = document.createElement("span");
+            circle.className = "ex-btn-ripple";
+
+            const rect = btn.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height) * 2;
+            const x    = e ? e.clientX - rect.left - size / 2 : rect.width / 2 - size / 2;
+            const y    = e ? e.clientY - rect.top  - size / 2 : rect.height / 2 - size / 2;
+
+            circle.style.cssText = `width:${size}px; height:${size}px; left:${x}px; top:${y}px;`;
+            container.appendChild(circle);
+            circle.addEventListener("animationend", () => circle.remove());
+        },
+
+        // =============================
+        // PUBLIC SETTERS
+        // =============================
+        setText: function (s) {
+            this.setProperty("text", s, true);
+            const el = this._getEl(".ex-btn-text");
+            if (el) el.textContent = s;
+        },
+
+        setLoading: function (b) {
+            this.setProperty("loading", b, true);
+            this._render();
+        },
+
+        setEnabled: function (b) {
+            this.setProperty("enabled", b, true);
+            const btn = this._getEl("button");
+            if (btn) btn.disabled = !b || this.getLoading();
+        },
+
+        setType: function (s) {
+            this.setProperty("type", s, true);
+            this._render();
+        },
+
+        setState: function (s) {
+            this.setProperty("state", s, true);
+            this._render();
+
+            // success / error sonrası otomatik idle'a dön
+            if (s === "success" || s === "error") {
+                setTimeout(() => {
+                    this.setProperty("state", "idle", true);
+                    this._render();
+                }, 2000);
+            }
+        },
+
+        // =============================
+        // UTILS
+        // =============================
+        _getEl: function (sel) {
+            const w = this.getDomRef();
+            return w ? w.querySelector(sel) : null;
+        }
+    });
+});