g-ui-core 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +4 -4
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/{my-button/my-button.js → g-button/g-button.js} +10 -10
- package/dist/collection/index.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/g-ui/index.esm.js +1 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/index.d.ts +2 -2
- package/package.json +1 -1
- package/vue/index.d.ts +2 -2
- package/vue/main.d.ts +2 -2
- /package/dist/collection/components/{my-button/my-button.css → g-button/g-button.css} +0 -0
- /package/dist/types/components/{my-button/my-button.d.ts → g-button/g-button.d.ts} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DOlVX1hU.js');
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const gButtonCss = () => `: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)}`;
|
|
6
6
|
|
|
7
7
|
const MyButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -77,8 +77,8 @@ const MyButton = class {
|
|
|
77
77
|
render() {
|
|
78
78
|
const { loading, disabled, autofocus, nativeType, icon, label, tag: Tag, loadingIcon, shouldAddSpace, } = this;
|
|
79
79
|
const displayLabel = shouldAddSpace ? label.split('').join('\u2009') : label;
|
|
80
|
-
const content = (index.h(index.h.Fragment, null, loading && index.h("span", { key: '
|
|
81
|
-
return (index.h(Tag, { key: '
|
|
80
|
+
const content = (index.h(index.h.Fragment, null, loading && index.h("span", { key: 'aa408565cb2ddd5678501ca19614291c4140de2b', class: "btn__loading-icon" }, loadingIcon), !loading && icon && index.h("span", { key: '670c1c88c7112a94fab8cb49b68ffd82d67330fd', class: "btn__icon" }, icon), displayLabel && index.h("span", { key: '08efe99ac9272251df7a8bff990a1b176482b6a9', class: "btn__label" }, displayLabel), index.h("slot", { key: '8a8d95e495ab0fcbf09d6f61df0d8fcb67cc2b63' })));
|
|
81
|
+
return (index.h(Tag, { key: 'b767af5753b44f795b2ae1f8c92d14c810c35678', 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));
|
|
82
82
|
}
|
|
83
83
|
static get watchers() { return {
|
|
84
84
|
"label": [{
|
|
@@ -89,6 +89,6 @@ const MyButton = class {
|
|
|
89
89
|
}]
|
|
90
90
|
}; }
|
|
91
91
|
};
|
|
92
|
-
MyButton.style =
|
|
92
|
+
MyButton.style = gButtonCss();
|
|
93
93
|
|
|
94
94
|
exports.MyButton = MyButton;
|
|
@@ -71,19 +71,19 @@ export class MyButton {
|
|
|
71
71
|
render() {
|
|
72
72
|
const { loading, disabled, autofocus, nativeType, icon, label, tag: Tag, loadingIcon, shouldAddSpace, } = this;
|
|
73
73
|
const displayLabel = shouldAddSpace ? label.split('').join('\u2009') : label;
|
|
74
|
-
const content = (h(h.Fragment, null, loading && h("span", { key: '
|
|
75
|
-
return (h(Tag, { key: '
|
|
74
|
+
const content = (h(h.Fragment, null, loading && h("span", { key: 'aa408565cb2ddd5678501ca19614291c4140de2b', class: "btn__loading-icon" }, loadingIcon), !loading && icon && h("span", { key: '670c1c88c7112a94fab8cb49b68ffd82d67330fd', class: "btn__icon" }, icon), displayLabel && h("span", { key: '08efe99ac9272251df7a8bff990a1b176482b6a9', class: "btn__label" }, displayLabel), h("slot", { key: '8a8d95e495ab0fcbf09d6f61df0d8fcb67cc2b63' })));
|
|
75
|
+
return (h(Tag, { key: 'b767af5753b44f795b2ae1f8c92d14c810c35678', 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));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "g-button"; }
|
|
78
78
|
static get encapsulation() { return "shadow"; }
|
|
79
79
|
static get originalStyleUrls() {
|
|
80
80
|
return {
|
|
81
|
-
"$": ["
|
|
81
|
+
"$": ["g-button.css"]
|
|
82
82
|
};
|
|
83
83
|
}
|
|
84
84
|
static get styleUrls() {
|
|
85
85
|
return {
|
|
86
|
-
"$": ["
|
|
86
|
+
"$": ["g-button.css"]
|
|
87
87
|
};
|
|
88
88
|
}
|
|
89
89
|
static get properties() {
|
|
@@ -97,8 +97,8 @@ export class MyButton {
|
|
|
97
97
|
"references": {
|
|
98
98
|
"ButtonType": {
|
|
99
99
|
"location": "local",
|
|
100
|
-
"path": "C:/Users/g/Desktop/app-demo/g-ui/packages/ui/src/components/
|
|
101
|
-
"id": "src/components/
|
|
100
|
+
"path": "C:/Users/g/Desktop/app-demo/g-ui/packages/ui/src/components/g-button/g-button.tsx",
|
|
101
|
+
"id": "src/components/g-button/g-button.tsx::ButtonType"
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
},
|
|
@@ -123,8 +123,8 @@ export class MyButton {
|
|
|
123
123
|
"references": {
|
|
124
124
|
"ButtonSize": {
|
|
125
125
|
"location": "local",
|
|
126
|
-
"path": "C:/Users/g/Desktop/app-demo/g-ui/packages/ui/src/components/
|
|
127
|
-
"id": "src/components/
|
|
126
|
+
"path": "C:/Users/g/Desktop/app-demo/g-ui/packages/ui/src/components/g-button/g-button.tsx",
|
|
127
|
+
"id": "src/components/g-button/g-button.tsx::ButtonSize"
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
},
|
|
@@ -388,8 +388,8 @@ export class MyButton {
|
|
|
388
388
|
"references": {
|
|
389
389
|
"NativeButtonType": {
|
|
390
390
|
"location": "local",
|
|
391
|
-
"path": "C:/Users/g/Desktop/app-demo/g-ui/packages/ui/src/components/
|
|
392
|
-
"id": "src/components/
|
|
391
|
+
"path": "C:/Users/g/Desktop/app-demo/g-ui/packages/ui/src/components/g-button/g-button.tsx",
|
|
392
|
+
"id": "src/components/g-button/g-button.tsx::NativeButtonType"
|
|
393
393
|
}
|
|
394
394
|
}
|
|
395
395
|
},
|
package/dist/collection/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { MyButton } from './components/
|
|
1
|
+
export { MyButton } from './components/g-button/g-button';
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{transformTag as t,proxyCustomElement as o,HTMLElement as n,h as r}from"@stencil/core/internal/client";export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";const e=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.type="primary",this.size="md",this.plain=!1,this.text=!1,this.bg=!1,this.link=!1,this.round=!1,this.circle=!1,this.dashed=!1,this.loading=!1,this.loadingIcon="●",this.disabled=!1,this.autofocus=!1,this.nativeType="button",this.autoInsertSpace=!1,this.dark=!1,this.tag="button",this.shouldAddSpace=!1,this.handleClick=t=>{(this.loading||this.disabled)&&(t.preventDefault(),t.stopPropagation())}}checkAutoSpace(){this.shouldAddSpace=!(!this.autoInsertSpace||!this.label)&&2===this.label.length&&/^[\u4e00-\u9fa5]+$/.test(this.label)}componentWillLoad(){this.checkAutoSpace()}get computedClass(){const{type:t,size:o,plain:n,text:r,bg:e,link:a,round:c,circle:l,dashed:b,loading:i,disabled:s,dark:d}=this,g=["btn","btn--"+t,"btn--"+o];return n&&g.push("btn--plain"),r&&g.push("btn--text"),e&&g.push("btn--bg"),a&&g.push("btn--link"),c&&g.push("btn--round"),l&&g.push("btn--circle"),b&&g.push("btn--dashed"),i&&g.push("btn--loading"),s&&g.push("btn--disabled"),d&&g.push("btn--dark"),g.join(" ")}get customStyle(){return this.color?{"--g-btn-color":this.color}:{}}render(){const{loading:t,disabled:o,autofocus:n,nativeType:e,icon:a,label:c,tag:l,loadingIcon:b,shouldAddSpace:i}=this,s=i?c.split("").join(" "):c,d=r(r.Fragment,null,t&&r("span",{key:"
|
|
1
|
+
import{transformTag as t,proxyCustomElement as o,HTMLElement as n,h as r}from"@stencil/core/internal/client";export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";const e=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.type="primary",this.size="md",this.plain=!1,this.text=!1,this.bg=!1,this.link=!1,this.round=!1,this.circle=!1,this.dashed=!1,this.loading=!1,this.loadingIcon="●",this.disabled=!1,this.autofocus=!1,this.nativeType="button",this.autoInsertSpace=!1,this.dark=!1,this.tag="button",this.shouldAddSpace=!1,this.handleClick=t=>{(this.loading||this.disabled)&&(t.preventDefault(),t.stopPropagation())}}checkAutoSpace(){this.shouldAddSpace=!(!this.autoInsertSpace||!this.label)&&2===this.label.length&&/^[\u4e00-\u9fa5]+$/.test(this.label)}componentWillLoad(){this.checkAutoSpace()}get computedClass(){const{type:t,size:o,plain:n,text:r,bg:e,link:a,round:c,circle:l,dashed:b,loading:i,disabled:s,dark:d}=this,g=["btn","btn--"+t,"btn--"+o];return n&&g.push("btn--plain"),r&&g.push("btn--text"),e&&g.push("btn--bg"),a&&g.push("btn--link"),c&&g.push("btn--round"),l&&g.push("btn--circle"),b&&g.push("btn--dashed"),i&&g.push("btn--loading"),s&&g.push("btn--disabled"),d&&g.push("btn--dark"),g.join(" ")}get customStyle(){return this.color?{"--g-btn-color":this.color}:{}}render(){const{loading:t,disabled:o,autofocus:n,nativeType:e,icon:a,label:c,tag:l,loadingIcon:b,shouldAddSpace:i}=this,s=i?c.split("").join(" "):c,d=r(r.Fragment,null,t&&r("span",{key:"aa408565cb2ddd5678501ca19614291c4140de2b",class:"btn__loading-icon"},b),!t&&a&&r("span",{key:"670c1c88c7112a94fab8cb49b68ffd82d67330fd",class:"btn__icon"},a),s&&r("span",{key:"08efe99ac9272251df7a8bff990a1b176482b6a9",class:"btn__label"},s),r("slot",{key:"8a8d95e495ab0fcbf09d6f61df0d8fcb67cc2b63"}));return r(l,{key:"b767af5753b44f795b2ae1f8c92d14c810c35678",class:this.computedClass,disabled:"button"===l?o||t:void 0,type:"button"===l?e:void 0,autofocus:"button"===l?n:void 0,style:this.customStyle,onClick:this.handleClick},d)}static get watchers(){return{label:[{checkAutoSpace:0}],autoInsertSpace:[{checkAutoSpace:0}]}}static get style(){return":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)}"}},[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]},void 0,{label:[{checkAutoSpace:0}],autoInsertSpace:[{checkAutoSpace:0}]}]);function a(){"undefined"!=typeof customElements&&["g-button"].forEach((o=>{"g-button"===o&&(customElements.get(t(o))||customElements.define(t(o),e))}))}a();export{e as MyButton,a as d}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-BVAZCj8P.js';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const gButtonCss = () => `: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)}`;
|
|
4
4
|
|
|
5
5
|
const MyButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -75,8 +75,8 @@ const MyButton = class {
|
|
|
75
75
|
render() {
|
|
76
76
|
const { loading, disabled, autofocus, nativeType, icon, label, tag: Tag, loadingIcon, shouldAddSpace, } = this;
|
|
77
77
|
const displayLabel = shouldAddSpace ? label.split('').join('\u2009') : label;
|
|
78
|
-
const content = (h(h.Fragment, null, loading && h("span", { key: '
|
|
79
|
-
return (h(Tag, { key: '
|
|
78
|
+
const content = (h(h.Fragment, null, loading && h("span", { key: 'aa408565cb2ddd5678501ca19614291c4140de2b', class: "btn__loading-icon" }, loadingIcon), !loading && icon && h("span", { key: '670c1c88c7112a94fab8cb49b68ffd82d67330fd', class: "btn__icon" }, icon), displayLabel && h("span", { key: '08efe99ac9272251df7a8bff990a1b176482b6a9', class: "btn__label" }, displayLabel), h("slot", { key: '8a8d95e495ab0fcbf09d6f61df0d8fcb67cc2b63' })));
|
|
79
|
+
return (h(Tag, { key: 'b767af5753b44f795b2ae1f8c92d14c810c35678', 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));
|
|
80
80
|
}
|
|
81
81
|
static get watchers() { return {
|
|
82
82
|
"label": [{
|
|
@@ -87,6 +87,6 @@ const MyButton = class {
|
|
|
87
87
|
}]
|
|
88
88
|
}; }
|
|
89
89
|
};
|
|
90
|
-
MyButton.style =
|
|
90
|
+
MyButton.style = gButtonCss();
|
|
91
91
|
|
|
92
92
|
export { MyButton };
|
package/dist/g-ui/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as o}from"./p-BVAZCj8P.js";const r=class{constructor(o){t(this,o),this.type="primary",this.size="md",this.plain=!1,this.text=!1,this.bg=!1,this.link=!1,this.round=!1,this.circle=!1,this.dashed=!1,this.loading=!1,this.loadingIcon="●",this.disabled=!1,this.autofocus=!1,this.nativeType="button",this.autoInsertSpace=!1,this.dark=!1,this.tag="button",this.shouldAddSpace=!1,this.handleClick=t=>{(this.loading||this.disabled)&&(t.preventDefault(),t.stopPropagation())}}checkAutoSpace(){this.shouldAddSpace=!(!this.autoInsertSpace||!this.label)&&2===this.label.length&&/^[\u4e00-\u9fa5]+$/.test(this.label)}componentWillLoad(){this.checkAutoSpace()}get computedClass(){const{type:t,size:o,plain:r,text:n,bg:e,link:a,round:c,circle:b,dashed:l,loading:i,disabled:s,dark:d}=this,g=["btn",`btn--${t}`,`btn--${o}`];return r&&g.push("btn--plain"),n&&g.push("btn--text"),e&&g.push("btn--bg"),a&&g.push("btn--link"),c&&g.push("btn--round"),b&&g.push("btn--circle"),l&&g.push("btn--dashed"),i&&g.push("btn--loading"),s&&g.push("btn--disabled"),d&&g.push("btn--dark"),g.join(" ")}get customStyle(){return this.color?{"--g-btn-color":this.color}:{}}render(){const{loading:t,disabled:r,autofocus:n,nativeType:e,icon:a,label:c,tag:b,loadingIcon:l,shouldAddSpace:i}=this,s=i?c.split("").join(" "):c,d=o(o.Fragment,null,t&&o("span",{key:"
|
|
1
|
+
import{r as t,h as o}from"./p-BVAZCj8P.js";const r=class{constructor(o){t(this,o),this.type="primary",this.size="md",this.plain=!1,this.text=!1,this.bg=!1,this.link=!1,this.round=!1,this.circle=!1,this.dashed=!1,this.loading=!1,this.loadingIcon="●",this.disabled=!1,this.autofocus=!1,this.nativeType="button",this.autoInsertSpace=!1,this.dark=!1,this.tag="button",this.shouldAddSpace=!1,this.handleClick=t=>{(this.loading||this.disabled)&&(t.preventDefault(),t.stopPropagation())}}checkAutoSpace(){this.shouldAddSpace=!(!this.autoInsertSpace||!this.label)&&2===this.label.length&&/^[\u4e00-\u9fa5]+$/.test(this.label)}componentWillLoad(){this.checkAutoSpace()}get computedClass(){const{type:t,size:o,plain:r,text:n,bg:e,link:a,round:c,circle:b,dashed:l,loading:i,disabled:s,dark:d}=this,g=["btn",`btn--${t}`,`btn--${o}`];return r&&g.push("btn--plain"),n&&g.push("btn--text"),e&&g.push("btn--bg"),a&&g.push("btn--link"),c&&g.push("btn--round"),b&&g.push("btn--circle"),l&&g.push("btn--dashed"),i&&g.push("btn--loading"),s&&g.push("btn--disabled"),d&&g.push("btn--dark"),g.join(" ")}get customStyle(){return this.color?{"--g-btn-color":this.color}:{}}render(){const{loading:t,disabled:r,autofocus:n,nativeType:e,icon:a,label:c,tag:b,loadingIcon:l,shouldAddSpace:i}=this,s=i?c.split("").join(" "):c,d=o(o.Fragment,null,t&&o("span",{key:"aa408565cb2ddd5678501ca19614291c4140de2b",class:"btn__loading-icon"},l),!t&&a&&o("span",{key:"670c1c88c7112a94fab8cb49b68ffd82d67330fd",class:"btn__icon"},a),s&&o("span",{key:"08efe99ac9272251df7a8bff990a1b176482b6a9",class:"btn__label"},s),o("slot",{key:"8a8d95e495ab0fcbf09d6f61df0d8fcb67cc2b63"}));return o(b,{key:"b767af5753b44f795b2ae1f8c92d14c810c35678",class:this.computedClass,disabled:"button"===b?r||t:void 0,type:"button"===b?e:void 0,autofocus:"button"===b?n:void 0,style:this.customStyle,onClick:this.handleClick},d)}static get watchers(){return{label:[{checkAutoSpace:0}],autoInsertSpace:[{checkAutoSpace:0}]}}};r.style=":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)}";export{r as MyButton}
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* It contains typing information for all components that exist in this project.
|
|
6
6
|
*/
|
|
7
7
|
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
8
|
-
import { ButtonSize, ButtonType, NativeButtonType } from "./components/
|
|
9
|
-
export { ButtonSize, ButtonType, NativeButtonType } from "./components/
|
|
8
|
+
import { ButtonSize, ButtonType, NativeButtonType } from "./components/g-button/g-button";
|
|
9
|
+
export { ButtonSize, ButtonType, NativeButtonType } from "./components/g-button/g-button";
|
|
10
10
|
export namespace Components {
|
|
11
11
|
interface GButton {
|
|
12
12
|
/**
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { MyButton } from './components/
|
|
2
|
-
export type { ButtonType, ButtonSize, NativeButtonType } from './components/
|
|
1
|
+
export { MyButton } from './components/g-button/g-button';
|
|
2
|
+
export type { ButtonType, ButtonSize, NativeButtonType } from './components/g-button/g-button';
|
package/package.json
CHANGED
package/vue/index.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ export default plugin
|
|
|
15
15
|
// 增强 Vue 全局组件类型（Volar 智能提示）
|
|
16
16
|
declare module '@vue/runtime-core' {
|
|
17
17
|
export interface GlobalComponents {
|
|
18
|
-
GButton:
|
|
19
|
-
MyButton:
|
|
18
|
+
GButton: Components.GButton
|
|
19
|
+
MyButton: Components.GButton
|
|
20
20
|
}
|
|
21
21
|
}
|
package/vue/main.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// 增强 Vue 全局组件类型（Volar 智能提示）
|
|
2
|
-
//
|
|
2
|
+
// 直接引用 Stencil 自动生成的组件类型
|
|
3
3
|
declare module '@vue/runtime-core' {
|
|
4
4
|
export interface GlobalComponents {
|
|
5
|
-
GButton:
|
|
5
|
+
GButton: import('../dist/types/components').Components.GButton
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
|
|
File without changes
|
|
File without changes
|