exsdk-ui5 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "exsdk-ui5",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "type": "module",
   "description": "Modern UI component SDK for SAP Fiori & UI5 — beautiful, fast, framework-independent",
   "author": "ExSDK",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -17,6 +18,7 @@
   },
   "files": [
     "dist",
+    "src/controls",
     "ui5-wrapper",
     "README.md",
     "LICENSE.md"

package/src/controls/ExButton.js

@@ -0,0 +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;
+        }
+    });
+});

package/src/controls/ExTable.js

@@ -0,0 +1,209 @@
+sap.ui.define([
+    "sap/ui/core/Control"
+], function (Control) {
+    "use strict";
+
+    return Control.extend("project1.control.ExTable", {
+
+        metadata: {
+            properties: {
+                columns: { type: "object", defaultValue: [] },
+                rows:    { type: "object", defaultValue: [] },
+                title:   { type: "string", defaultValue: "Tablo" },
+                total:   { type: "int",    defaultValue: 0 }
+            },
+            events: {
+                loadMore: {}
+            }
+        },
+
+        renderer: function (oRM, oControl) {
+            oRM.openStart("div", oControl);
+            oRM.class("ex-table-wrapper");
+            oRM.openEnd();
+            oRM.close("div");
+        },
+
+        onAfterRendering: function () {
+            const oWrapper = this.getDomRef();
+            oWrapper.innerHTML = this._buildBaseHTML();
+
+            this._body    = oWrapper.querySelector(".ex-table-body");
+            this._tbody   = oWrapper.querySelector(".ex-table-tbody");
+            this._thead   = oWrapper.querySelector(".ex-table-thead");
+            this._colgroup = oWrapper.querySelector(".ex-table-colgroup");
+            this._totalEl = oWrapper.querySelector(".ex-table-total");
+
+            this._rowHeight    = 44;
+            this._visibleCount = 20;
+            this._buffer       = 5;
+
+            this._fullData  = this.getRows() || [];
+            this._columns   = this.getColumns();
+            this._sortState = {};
+
+            this._attachEvents();
+            this._renderColgroup();
+            this._renderHeader();
+            this._updateVisibleRows(0);
+        },
+
+        _buildBaseHTML: function () {
+            return `
+                <div class="ex-table">
+                    <div class="ex-table-header">
+                        <span class="ex-table-title">${this.getTitle()}</span>
+                        <span class="ex-table-total">(${this.getTotal()} Ürün)</span>
+                    </div>
+                    <div class="ex-table-body">
+                        <table class="ex-table-inner">
+                            <colgroup class="ex-table-colgroup"></colgroup>
+                            <thead class="ex-table-thead"></thead>
+                            <tbody class="ex-table-tbody"></tbody>
+                        </table>
+                    </div>
+                </div>
+            `;
+        },
+
+        // colgroup — her kolon için eşit genişlik tanımla
+        // th ve td artık aynı col'u paylaşır, hizalama garantili
+        _renderColgroup: function () {
+            const colWidth = Math.floor(100 / this._columns.length);
+            this._colgroup.innerHTML = this._columns.map(() =>
+                `<col style="width:${colWidth}%;">`
+            ).join("");
+        },
+
+        _attachEvents: function () {
+            this._body.addEventListener("scroll", this._onScroll.bind(this));
+        },
+
+        _onScroll: function () {
+            const scrollTop  = this._body.scrollTop;
+            const startIndex = Math.floor(scrollTop / this._rowHeight);
+            this._updateVisibleRows(startIndex);
+
+            if (scrollTop + this._body.clientHeight >= this._body.scrollHeight - 100) {
+                this.fireLoadMore();
+            }
+        },
+
+        _renderHeader: function () {
+            this._thead.innerHTML = `<tr>
+                ${this._columns.map(col => `
+                    <th data-key="${col.key}">
+                        <div class="ex-th-inner">
+                            <span class="ex-th-label">${col.label}</span>
+                            <span class="ex-th-sort" data-key="${col.key}">↕</span>
+                            <span class="resize-handle"></span>
+                        </div>
+                    </th>
+                `).join("")}
+            </tr>`;
+
+            this._attachHeaderEvents();
+        },
+
+        _attachHeaderEvents: function () {
+            this._thead.querySelectorAll("th").forEach(th => {
+                th.addEventListener("click", (e) => {
+                    if (e.target.classList.contains("resize-handle")) return;
+                    this._sort(th.dataset.key);
+                });
+
+                const handle = th.querySelector(".resize-handle");
+                let startX, startWidth, colIndex;
+
+                handle.addEventListener("mousedown", (e) => {
+                    e.stopPropagation();
+                    startX     = e.pageX;
+                    startWidth = th.offsetWidth;
+                    colIndex   = Array.from(th.parentNode.children).indexOf(th);
+
+                    const onMove = (e) => {
+                        const newWidth = Math.max(60, startWidth + (e.pageX - startX));
+                        // colgroup'taki ilgili col'u güncelle — hem th hem td hizalanır
+                        const cols = this._colgroup.querySelectorAll("col");
+                        if (cols[colIndex]) {
+                            cols[colIndex].style.width    = newWidth + "px";
+                            cols[colIndex].style.minWidth = newWidth + "px";
+                        }
+                    };
+                    const onUp = () => {
+                        document.removeEventListener("mousemove", onMove);
+                        document.removeEventListener("mouseup",   onUp);
+                    };
+
+                    document.addEventListener("mousemove", onMove);
+                    document.addEventListener("mouseup",   onUp);
+                });
+            });
+        },
+
+        _sort: function (key) {
+            const next = (this._sortState[key] || "asc") === "asc" ? "desc" : "asc";
+            this._sortState = { [key]: next };
+
+            this._thead.querySelectorAll(".ex-th-sort").forEach(el => {
+                el.textContent = el.dataset.key === key
+                    ? (next === "asc" ? "↑" : "↓")
+                    : "↕";
+            });
+
+            this._fullData.sort((a, b) => {
+                if (a[key] < b[key]) return next === "asc" ? -1 : 1;
+                if (a[key] > b[key]) return next === "asc" ?  1 : -1;
+                return 0;
+            });
+
+            this._body.scrollTop = 0;
+            this._updateVisibleRows(0);
+        },
+
+        _updateVisibleRows: function (startIndex) {
+            const total = this._fullData.length;
+            const start = Math.max(0, startIndex - this._buffer);
+            const end   = Math.min(total, startIndex + this._visibleCount + this._buffer);
+
+            const paddingTop    = start * this._rowHeight;
+            const paddingBottom = Math.max(0, (total - end) * this._rowHeight);
+
+            this._renderRows(this._fullData.slice(start, end), paddingTop, paddingBottom);
+        },
+
+        _renderRows: function (rows, paddingTop, paddingBottom) {
+            const colSpan = this._columns.length;
+
+            const topRow    = paddingTop    > 0 ? `<tr style="height:${paddingTop}px;">   <td colspan="${colSpan}"></td></tr>` : "";
+            const bottomRow = paddingBottom > 0 ? `<tr style="height:${paddingBottom}px;"><td colspan="${colSpan}"></td></tr>` : "";
+
+            const dataRows = rows.length > 0
+                ? rows.map(row => `
+                    <tr class="ex-table-row">
+                        ${this._columns.map(col =>
+                            `<td class="ex-td">${row[col.key] ?? ""}</td>`
+                        ).join("")}
+                    </tr>`).join("")
+                : `<tr><td colspan="${colSpan}" class="ex-td-empty">Veri yok</td></tr>`;
+
+            this._tbody.innerHTML = topRow + dataRows + bottomRow;
+        },
+
+        setRows: function (aRows) {
+            this.setProperty("rows", aRows, true);
+            this._fullData = aRows;
+            if (this._body) {
+                this._body.scrollTop = 0;
+                this._updateVisibleRows(0);
+            }
+        },
+
+        setTotal: function (iTotal) {
+            this.setProperty("total", iTotal, true);
+            if (this._totalEl) {
+                this._totalEl.textContent = "(" + iTotal + " Ürün)";
+            }
+        }
+    });
+});