g-ui-core 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-DOlVX1hU.js');
+
+const myButtonCss = () => `:host{display:inline-block}:host(:not(:first-child)){margin-left:12px}:host{--g-btn-color:#4f46e5;--g-btn-color-hover:#4338ca;--g-btn-color-active:#3730a3;--g-btn-text-color:#fff;--g-btn-plain-bg:#eef2ff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.25em;border:1px solid var(--g-btn-color);border-radius:6px;font-family:inherit;font-weight:600;line-height:1;cursor:pointer;user-select:none;transition:all 0.2s ease;background-color:var(--g-btn-color);color:var(--g-btn-text-color);vertical-align:middle;text-decoration:none;white-space:nowrap}.btn:hover{background-color:var(--g-btn-color-hover);border-color:var(--g-btn-color-hover)}.btn:active{background-color:var(--g-btn-color-active);border-color:var(--g-btn-color-active)}.btn:disabled,.btn--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.btn--sm{padding:0.375rem 0.75rem;font-size:0.875rem}.btn--md{padding:0.5rem 1rem;font-size:1rem}.btn--lg{padding:0.75rem 1.5rem;font-size:1.125rem}.btn--primary{--g-btn-color:#4f46e5;--g-btn-color-hover:#4338ca;--g-btn-color-active:#3730a3;--g-btn-plain-bg:#eef2ff}.btn--success{--g-btn-color:#10b981;--g-btn-color-hover:#059669;--g-btn-color-active:#047857;--g-btn-plain-bg:#d1fae5}.btn--warning{--g-btn-color:#f59e0b;--g-btn-color-hover:#d97706;--g-btn-color-active:#b45309;--g-btn-plain-bg:#fef3c7}.btn--danger{--g-btn-color:#ef4444;--g-btn-color-hover:#dc2626;--g-btn-color-active:#b91c1c;--g-btn-plain-bg:#fee2e2}.btn--info,.btn--secondary{--g-btn-color:#6b7280;--g-btn-color-hover:#4b5563;--g-btn-color-active:#374151;--g-btn-plain-bg:#f3f4f6}.btn--plain{background-color:transparent;color:var(--g-btn-color)}.btn--plain:hover{background-color:var(--g-btn-plain-bg);color:var(--g-btn-color-hover);border-color:var(--g-btn-color-hover)}.btn--plain:active{background-color:var(--g-btn-plain-bg);color:var(--g-btn-color-active);border-color:var(--g-btn-color-active)}.btn--text{border-color:transparent;background-color:transparent;color:var(--g-btn-color)}.btn--text:hover{background-color:transparent;color:var(--g-btn-color-hover);border-color:transparent}.btn--text:active{color:var(--g-btn-color-active)}.btn--text.btn--bg:hover{background-color:var(--g-btn-plain-bg)}.btn--link{border-color:transparent;background-color:transparent;color:var(--g-btn-color);padding:0;font-weight:400}.btn--link:hover{background-color:transparent;color:var(--g-btn-color-hover);border-color:transparent;text-decoration:underline}.btn--link:active{color:var(--g-btn-color-active)}.btn--round{border-radius:9999px}.btn--circle{border-radius:50%;padding:0.5rem;width:2.5rem;height:2.5rem}.btn--circle.btn--sm{width:2rem;height:2rem;padding:0.375rem}.btn--circle.btn--lg{width:3rem;height:3rem;padding:0.75rem}.btn--dashed{border-style:dashed;background-color:color-mix(in srgb, var(--g-btn-color) 10%, transparent)}.btn--dashed:hover{background-color:color-mix(in srgb, var(--g-btn-color) 20%, transparent)}.btn--loading{cursor:wait;opacity:0.8}.btn__loading-icon{display:inline-flex;animation:g-spin 1s linear infinite}@keyframes g-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.btn__icon{display:inline-flex;font-size:1.1em}.btn__label{display:inline-flex;align-items:center}.btn--dark{--g-btn-color:#818cf8;--g-btn-color-hover:#6366f1;--g-btn-color-active:#4f46e5;--g-btn-plain-bg:#1e1b4b;--g-btn-text-color:#0f0f0f}.btn--dark.btn--plain{background-color:transparent;color:var(--g-btn-color);border-color:var(--g-btn-color)}.btn--dark.btn--text,.btn--dark.btn--link{color:var(--g-btn-color)}:host([style*='--g-btn-color']) .btn{background-color:var(--g-btn-color);border-color:var(--g-btn-color);color:var(--g-btn-text-color, #fff)}:host([style*='--g-btn-color']) .btn.btn--plain{background-color:transparent;color:var(--g-btn-color)}:host([style*='--g-btn-color']) .btn.btn--text,:host([style*='--g-btn-color']) .btn.btn--link{background-color:transparent;border-color:transparent;color:var(--g-btn-color)}`;
+
+const MyButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.type = 'primary';
+        this.size = 'md';
+        this.plain = false;
+        this.text = false;
+        this.bg = false;
+        this.link = false;
+        this.round = false;
+        this.circle = false;
+        this.dashed = false;
+        this.loading = false;
+        this.loadingIcon = '●';
+        this.disabled = false;
+        this.autofocus = false;
+        this.nativeType = 'button';
+        this.autoInsertSpace = false;
+        this.dark = false;
+        this.tag = 'button';
+        this.shouldAddSpace = false;
+        this.handleClick = (e) => {
+            if (this.loading || this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    checkAutoSpace() {
+        if (!this.autoInsertSpace || !this.label) {
+            this.shouldAddSpace = false;
+            return;
+        }
+        this.shouldAddSpace =
+            this.label.length === 2 &&
+                /^[\u4e00-\u9fa5]+$/.test(this.label);
+    }
+    componentWillLoad() {
+        this.checkAutoSpace();
+    }
+    get computedClass() {
+        const { type, size, plain, text, bg, link, round, circle, dashed, loading, disabled, dark } = this;
+        const classes = ['btn', `btn--${type}`, `btn--${size}`];
+        if (plain)
+            classes.push('btn--plain');
+        if (text)
+            classes.push('btn--text');
+        if (bg)
+            classes.push('btn--bg');
+        if (link)
+            classes.push('btn--link');
+        if (round)
+            classes.push('btn--round');
+        if (circle)
+            classes.push('btn--circle');
+        if (dashed)
+            classes.push('btn--dashed');
+        if (loading)
+            classes.push('btn--loading');
+        if (disabled)
+            classes.push('btn--disabled');
+        if (dark)
+            classes.push('btn--dark');
+        return classes.join(' ');
+    }
+    get customStyle() {
+        if (!this.color)
+            return {};
+        return { '--g-btn-color': this.color };
+    }
+    render() {
+        const { loading, disabled, autofocus, nativeType, icon, label, tag: Tag, loadingIcon, shouldAddSpace, } = this;
+        const displayLabel = shouldAddSpace ? label.split('').join('\u2009') : label;
+        const content = (index.h(index.h.Fragment, null, loading && index.h("span", { key: '46a08c10ad7cadc4952dcb771c4dd1a244f7f156', class: "btn__loading-icon" }, loadingIcon), !loading && icon && index.h("span", { key: 'afc8df2cb5f8a21d6bdbe19cea1d809f388b64b1', class: "btn__icon" }, icon), displayLabel && index.h("span", { key: '8d52ddc448732cfbd94aaef3953a6c491ea8f173', class: "btn__label" }, displayLabel), index.h("slot", { key: 'c7e6e16593967cb08580c6c7fd7aa3728d6f921b' })));
+        return (index.h(Tag, { key: '734ed9490a23e332e0628809df532aed1035e2c5', class: this.computedClass, disabled: Tag === 'button' ? (disabled || loading) : undefined, type: Tag === 'button' ? nativeType : undefined, autofocus: Tag === 'button' ? autofocus : undefined, style: this.customStyle, onClick: this.handleClick }, content));
+    }
+    static get watchers() { return {
+        "label": [{
+                "checkAutoSpace": 0
+            }],
+        "autoInsertSpace": [{
+                "checkAutoSpace": 0
+            }]
+    }; }
+};
+MyButton.style = myButtonCss();
+
+exports.MyButton = MyButton;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-DOlVX1hU.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["g-button.cjs",[[257,"g-button",{"type":[1],"size":[1],"plain":[4],"text":[4],"bg":[4],"link":[4],"round":[4],"circle":[4],"dashed":[4],"loading":[4],"loadingIcon":[1,"loading-icon"],"disabled":[4],"icon":[1],"autofocus":[4],"nativeType":[1,"native-type"],"autoInsertSpace":[4,"auto-insert-space"],"color":[1],"dark":[4],"tag":[1],"label":[1],"shouldAddSpace":[32]},null,{"label":[{"checkAutoSpace":0}],"autoInsertSpace":[{"checkAutoSpace":0}]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/my-button/my-button.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.5",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/my-button/my-button.css

@@ -0,0 +1,300 @@
+/* ========================================
+   G-UI Button — 参照 Element Plus API
+   ======================================== */
+
+:host {
+  display: inline-block;
+}
+
+/* 相邻按钮间距（第一个除外） */
+:host(:not(:first-child)) {
+  margin-left: 12px;
+}
+
+/* ---------- color tokens ---------- */
+:host {
+  --g-btn-color: #4f46e5;
+  --g-btn-color-hover: #4338ca;
+  --g-btn-color-active: #3730a3;
+  --g-btn-text-color: #fff;
+  --g-btn-plain-bg: #eef2ff;
+}
+
+/* ---------- base ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  border: 1px solid var(--g-btn-color);
+  border-radius: 6px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  background-color: var(--g-btn-color);
+  color: var(--g-btn-text-color);
+  vertical-align: middle;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:hover {
+  background-color: var(--g-btn-color-hover);
+  border-color: var(--g-btn-color-hover);
+}
+
+.btn:active {
+  background-color: var(--g-btn-color-active);
+  border-color: var(--g-btn-color-active);
+}
+
+.btn:disabled,
+.btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---------- sizes ---------- */
+.btn--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn--md {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+.btn--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+/* ========================================
+   Type variants — color scheme
+   ======================================== */
+
+.btn--primary {
+  --g-btn-color: #4f46e5;
+  --g-btn-color-hover: #4338ca;
+  --g-btn-color-active: #3730a3;
+  --g-btn-plain-bg: #eef2ff;
+}
+
+.btn--success {
+  --g-btn-color: #10b981;
+  --g-btn-color-hover: #059669;
+  --g-btn-color-active: #047857;
+  --g-btn-plain-bg: #d1fae5;
+}
+
+.btn--warning {
+  --g-btn-color: #f59e0b;
+  --g-btn-color-hover: #d97706;
+  --g-btn-color-active: #b45309;
+  --g-btn-plain-bg: #fef3c7;
+}
+
+.btn--danger {
+  --g-btn-color: #ef4444;
+  --g-btn-color-hover: #dc2626;
+  --g-btn-color-active: #b91c1c;
+  --g-btn-plain-bg: #fee2e2;
+}
+
+.btn--info,
+.btn--secondary {
+  --g-btn-color: #6b7280;
+  --g-btn-color-hover: #4b5563;
+  --g-btn-color-active: #374151;
+  --g-btn-plain-bg: #f3f4f6;
+}
+
+/* ========================================
+   Plain — 朴素按钮
+   ======================================== */
+.btn--plain {
+  background-color: transparent;
+  color: var(--g-btn-color);
+}
+
+.btn--plain:hover {
+  background-color: var(--g-btn-plain-bg);
+  color: var(--g-btn-color-hover);
+  border-color: var(--g-btn-color-hover);
+}
+
+.btn--plain:active {
+  background-color: var(--g-btn-plain-bg);
+  color: var(--g-btn-color-active);
+  border-color: var(--g-btn-color-active);
+}
+
+/* ========================================
+   Text — 文字按钮
+   ======================================== */
+.btn--text {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--g-btn-color);
+}
+
+.btn--text:hover {
+  background-color: transparent;
+  color: var(--g-btn-color-hover);
+  border-color: transparent;
+}
+
+.btn--text:active {
+  color: var(--g-btn-color-active);
+}
+
+/* Text + bg — hover 时显示背景 */
+.btn--text.btn--bg:hover {
+  background-color: var(--g-btn-plain-bg);
+}
+
+/* ========================================
+   Link — 链接按钮
+   ======================================== */
+.btn--link {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--g-btn-color);
+  padding: 0;
+  font-weight: 400;
+}
+
+.btn--link:hover {
+  background-color: transparent;
+  color: var(--g-btn-color-hover);
+  border-color: transparent;
+  text-decoration: underline;
+}
+
+.btn--link:active {
+  color: var(--g-btn-color-active);
+}
+
+/* ========================================
+   Round / Circle — 形状修饰
+   ======================================== */
+.btn--round {
+  border-radius: 9999px;
+}
+
+.btn--circle {
+  border-radius: 50%;
+  padding: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.btn--circle.btn--sm {
+  width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+}
+
+.btn--circle.btn--lg {
+  width: 3rem;
+  height: 3rem;
+  padding: 0.75rem;
+}
+
+/* ========================================
+   Dashed — 虚线边框 + 淡色背景
+   ======================================== */
+.btn--dashed {
+  border-style: dashed;
+  background-color: color-mix(in srgb, var(--g-btn-color) 10%, transparent);
+}
+
+.btn--dashed:hover {
+  background-color: color-mix(in srgb, var(--g-btn-color) 20%, transparent);
+}
+
+/* ========================================
+   Loading — 加载中
+   ======================================== */
+.btn--loading {
+  cursor: wait;
+  opacity: 0.8;
+}
+
+.btn__loading-icon {
+  display: inline-flex;
+  animation: g-spin 1s linear infinite;
+}
+
+@keyframes g-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========================================
+   Icon
+   ======================================== */
+.btn__icon {
+  display: inline-flex;
+  font-size: 1.1em;
+}
+
+/* ========================================
+   Label
+   ======================================== */
+.btn__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ========================================
+   Dark mode
+   ======================================== */
+.btn--dark {
+  --g-btn-color: #818cf8;
+  --g-btn-color-hover: #6366f1;
+  --g-btn-color-active: #4f46e5;
+  --g-btn-plain-bg: #1e1b4b;
+  --g-btn-text-color: #0f0f0f;
+}
+
+.btn--dark.btn--plain {
+  background-color: transparent;
+  color: var(--g-btn-color);
+  border-color: var(--g-btn-color);
+}
+
+.btn--dark.btn--text,
+.btn--dark.btn--link {
+  color: var(--g-btn-color);
+}
+
+/* ========================================
+   Custom color via CSS variable
+   ======================================== */
+:host([style*='--g-btn-color']) .btn {
+  background-color: var(--g-btn-color);
+  border-color: var(--g-btn-color);
+  color: var(--g-btn-text-color, #fff);
+}
+
+:host([style*='--g-btn-color']) .btn.btn--plain {
+  background-color: transparent;
+  color: var(--g-btn-color);
+}
+
+:host([style*='--g-btn-color']) .btn.btn--text,
+:host([style*='--g-btn-color']) .btn.btn--link {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--g-btn-color);
+}