huibo-ui 0.3.0

package/dist/components/hb-image.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const imageCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:inline-block}.hb-image{background:var(--hb-color-fill-quaternary);display:inline-flex;overflow:hidden;position:relative}.hb-image__inner{height:100%;opacity:0;transition:opacity .3s;width:100%}.hb-image__inner--loaded{opacity:1}.hb-image__error{color:var(--hb-color-text-secondary);font-size:var(--hb-font-size-sm);height:100%;width:100%}.hb-image__error,.hb-image__preview{align-items:center;display:flex;justify-content:center}.hb-image__preview{background:#000c;cursor:zoom-out;inset:0;position:fixed;z-index:2000}.hb-image__preview-img{max-height:90%;max-width:90%;object-fit:contain}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbImageStyle0 = imageCss;
+
+const Image = /*@__PURE__*/ proxyCustomElement(class Image extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    src = '';
+    alt = '';
+    width;
+    height;
+    fit = 'fill';
+    lazy = false;
+    preview = false;
+    radius;
+    loaded = false;
+    error = false;
+    previewVisible = false;
+    handleLoad = () => { this.loaded = true; };
+    handleError = () => { this.error = true; };
+    render() {
+        return (h("div", { key: 'c6ededfba4d6a1d4b9356c1b18dc7b19aa8c8631', class: "hb-image", style: { width: this.width, height: this.height, borderRadius: this.radius } }, !this.error ? (h("img", { src: this.src, alt: this.alt, class: { 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }, style: { objectFit: this.fit }, loading: this.lazy ? 'lazy' : undefined, onLoad: this.handleLoad, onError: this.handleError, onClick: () => this.preview && (this.previewVisible = true) })) : (h("div", { class: "hb-image__error" }, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")), this.previewVisible && (h("div", { key: 'b32748bc6a54360e9cfab47ee06671f4568bae8c', class: "hb-image__preview", onClick: () => { this.previewVisible = false; } }, h("img", { key: '7bcc5a1f9b34756827fb8566a953296f808febea', src: this.src, alt: this.alt, class: "hb-image__preview-img" })))));
+    }
+    static get style() { return HbImageStyle0; }
+}, [1, "hb-image", {
+        "src": [1],
+        "alt": [1],
+        "width": [1],
+        "height": [1],
+        "fit": [1],
+        "lazy": [4],
+        "preview": [4],
+        "radius": [1],
+        "loaded": [32],
+        "error": [32],
+        "previewVisible": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-image"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-image":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Image);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbImage = Image;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbImage, defineCustomElement };
+
+//# sourceMappingURL=hb-image.js.map

package/dist/components/hb-image.js.map

@@ -0,0 +1 @@
+{"file":"hb-image.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,usMAAusM,CAAC;AACztM,sBAAe,QAAQ;;MCEV,KAAK;;;;;;IACR,GAAG,GAAW,EAAE,CAAC;IACjB,GAAG,GAAW,EAAE,CAAC;IACjB,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,GAAG,GAAyD,MAAM,CAAC;IACnE,IAAI,GAAY,KAAK,CAAC;IACtB,OAAO,GAAY,KAAK,CAAC;IACzB,MAAM,CAAU;IAEf,MAAM,GAAY,KAAK,CAAC;IACxB,KAAK,GAAY,KAAK,CAAC;IACvB,cAAc,GAAY,KAAK,CAAC;IAEjC,UAAU,GAAG,QAAQ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3C,WAAW,GAAG,QAAQ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,IAC/F,CAAC,IAAI,CAAC,KAAK,IACV,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAC5B,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAC1E,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS,EACvC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAC3D,KAEF,WAAK,KAAK,EAAC,iBAAiB,2CAAa,CAC1C,EACA,IAAI,CAAC,cAAc,KAClB,4DAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,QAAQ,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,IAC5E,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,uBAAuB,GAAG,CAC/D,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Image/image.css?tag=hb-image&encapsulation=shadow","src/components/Image/Image.tsx"],"sourcesContent":[":host { display: inline-block; }\n.hb-image { position: relative; display: inline-flex; overflow: hidden; background: var(--hb-color-fill-quaternary); }\n.hb-image__inner { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }\n.hb-image__inner--loaded { opacity: 1; }\n.hb-image__error { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); }\n.hb-image__preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }\n.hb-image__preview-img { max-width: 90%; max-height: 90%; object-fit: contain; }\n","import { Component, h, Prop, State } from '@stencil/core';\n\n@Component({ tag: 'hb-image', styleUrl: 'image.css', shadow: true })\nexport class Image {\n  @Prop() src: string = '';\n  @Prop() alt: string = '';\n  @Prop() width?: string;\n  @Prop() height?: string;\n  @Prop() fit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' = 'fill';\n  @Prop() lazy: boolean = false;\n  @Prop() preview: boolean = false;\n  @Prop() radius?: string;\n\n  @State() loaded: boolean = false;\n  @State() error: boolean = false;\n  @State() previewVisible: boolean = false;\n\n  private handleLoad = () => { this.loaded = true; };\n  private handleError = () => { this.error = true; };\n\n  render() {\n    return (\n      <div class=\"hb-image\" style={{ width: this.width, height: this.height, borderRadius: this.radius }}>\n        {!this.error ? (\n          <img\n            src={this.src} alt={this.alt}\n            class={{ 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }}\n            style={{ objectFit: this.fit }}\n            loading={this.lazy ? 'lazy' : undefined}\n            onLoad={this.handleLoad}\n            onError={this.handleError}\n            onClick={() => this.preview && (this.previewVisible = true)}\n          />\n        ) : (\n          <div class=\"hb-image__error\">图片加载失败</div>\n        )}\n        {this.previewVisible && (\n          <div class=\"hb-image__preview\" onClick={() => { this.previewVisible = false; }}>\n            <img src={this.src} alt={this.alt} class=\"hb-image__preview-img\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-input-number.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbInputNumber extends Components.HbInputNumber, HTMLElement {}
+export const HbInputNumber: {
+    prototype: HbInputNumber;
+    new (): HbInputNumber;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-input-number.js

@@ -0,0 +1,202 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const inputNumberCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-input-number-font-size:14px;--hb-input-number-height:32px;--hb-input-number-border-color:var(--hb-border-color,#dcdfe6);--hb-input-number-border-color-hover:var(--hb-color-primary);--hb-input-number-bg-color:var(--hb-color-white,#fff);display:inline-block;position:relative}.hb-input-number{display:inline-block;position:relative;width:180px}.hb-input-number,.hb-input-number__inner{line-height:var(--hb-input-number-height)}.hb-input-number__inner{-webkit-appearance:none;background-color:var(--hb-input-number-bg-color);border:1px solid var(--hb-input-number-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-color-text-regular,#606266);display:block;font-size:inherit;height:var(--hb-input-number-height);outline:none;padding:0 50px 0 15px;text-align:left;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.hb-input-number--without-controls .hb-input-number__inner{padding:0 15px}.hb-input-number--controls-right .hb-input-number__inner{padding:0 15px 0 50px}.hb-input-number__inner:focus,.hb-input-number__inner:hover:not(:disabled){border-color:var(--hb-input-number-border-color-hover)}.hb-input-number__inner:disabled{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-input-number-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-input-number__decrease,.hb-input-number__increase{align-items:center;background:var(--hb-fill-color-light,#f5f7fa);color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;height:calc(100% - 2px);justify-content:center;position:absolute;text-align:center;top:1px;transition:all .2s;-webkit-user-select:none;user-select:none;width:35px;z-index:1}.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled),.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled){color:var(--hb-color-primary)}.hb-input-number__decrease--disabled,.hb-input-number__increase--disabled{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-input-number__increase{border-radius:0 4px 4px 0;right:1px}.hb-input-number__decrease,.hb-input-number__increase{border-left:1px solid var(--hb-input-number-border-color)}.hb-input-number__decrease{border-radius:0;right:36px}.hb-input-number--controls-right .hb-input-number__increase{border-radius:0 4px 4px 0;right:1px}.hb-input-number--controls-right .hb-input-number__decrease{border-radius:0;right:36px}.hb-input-number__controls{background:var(--hb-fill-color-light,#f5f7fa);border-left:1px solid var(--hb-input-number-border-color);border-radius:0 4px 4px 0;height:calc(100% - 2px);position:absolute;right:1px;top:1px;width:35px}.hb-input-number--controls-right .hb-input-number__controls{border-left:none;border-radius:4px 0 0 4px;border-right:1px solid var(--hb-input-number-border-color);left:1px;right:auto}.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase{border:none;border-bottom:1px solid var(--hb-input-number-border-color);border-radius:0;position:static}.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease{border:none;border-radius:0 0 0 4px;position:static}.hb-input-number--small{width:150px}.hb-input-number--small .hb-input-number__inner{font-size:12px;height:24px;line-height:24px;padding:0 40px 0 12px}.hb-input-number--large{width:200px}.hb-input-number--large .hb-input-number__inner{font-size:16px;height:40px;line-height:40px;padding:0 55px 0 18px}.hb-input-number--disabled{cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbInputNumberStyle0 = inputNumberCss;
+
+const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbInput = createEvent(this, "hbInput", 7);
+    }
+    /**
+     * 绑定值
+     */
+    modelValue = 0;
+    /**
+     * 计数器尺寸
+     */
+    size = 'default';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否只读
+     * @default false
+     */
+    readonly = false;
+    /**
+     * 最小值
+     * @default -Infinity
+     */
+    min = -Infinity;
+    /**
+     * 最大值
+     * @default Infinity
+     */
+    max = Infinity;
+    /**
+     * 计数器步长
+     * @default 1
+     */
+    step = 1;
+    /**
+     * 精度
+     */
+    precision;
+    /**
+     * 是否只能输入 step 的倍数
+     * @default false
+     */
+    stepStrictly = false;
+    /**
+     * 是否使用控制按钮
+     * @default true
+     */
+    controls = true;
+    /**
+     * 控制按钮位置
+     */
+    controlsPosition = '';
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    inputId;
+    /**
+     * 原生 placeholder 属性
+     */
+    placeholder;
+    currentValue = 0;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 输入事件
+     */
+    hbInput;
+    componentDidLoad() {
+        this.currentValue = this.modelValue;
+    }
+    /** 受控模式：外部修改 modelValue 时同步内部 currentValue，保证 UI 与值一致 */
+    handleModelValueChange() {
+        this.currentValue = this.modelValue;
+    }
+    formatValue(value) {
+        if (this.precision !== undefined) {
+            return Number(value.toFixed(this.precision));
+        }
+        return value;
+    }
+    clampValue(value) {
+        let clamped = Math.max(this.min, Math.min(this.max, value));
+        if (this.stepStrictly) {
+            const step = this.step;
+            clamped = Math.round(clamped / step) * step;
+        }
+        return this.formatValue(clamped);
+    }
+    handleInput = (e) => {
+        const target = e.target;
+        const value = parseFloat(target.value);
+        if (isNaN(value)) {
+            this.currentValue = this.min;
+        }
+        else {
+            this.currentValue = this.clampValue(value);
+        }
+        this.modelValue = this.currentValue;
+        this.hbInput.emit(this.currentValue);
+    };
+    handleChange = () => {
+        this.hbChange.emit(this.currentValue);
+    };
+    increase = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const newValue = this.clampValue(this.currentValue + this.step);
+        this.currentValue = newValue;
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+    };
+    decrease = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const newValue = this.clampValue(this.currentValue - this.step);
+        this.currentValue = newValue;
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+    };
+    render() {
+        return (h("div", { key: '490fe763a00f34486cbbe6502204433071a863eb', class: {
+                'hb-input-number': true,
+                [`hb-input-number--${this.size}`]: true,
+                'hb-input-number--disabled': this.disabled,
+                'hb-input-number--controls-right': this.controlsPosition === 'right',
+                'hb-input-number--without-controls': !this.controls,
+            } }, this.controls && this.controlsPosition !== 'right' && (h("span", { key: 'a43a038a8914dbff0c8b9759c04c74fa791f2e6c', class: {
+                'hb-input-number__decrease': true,
+                'hb-input-number__decrease--disabled': this.currentValue <= this.min,
+            }, onClick: this.decrease }, "\u2212")), h("input", { key: '83a7bb1d73a709e92f31044396fdb73daed77ea9', type: "number", id: this.inputId, name: this.name, class: "hb-input-number__inner", value: this.currentValue, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, onInput: this.handleInput, onChange: this.handleChange }), this.controls && this.controlsPosition === 'right' && (h("span", { key: 'e202c7b06c991550eb9a5cae441ead7d82231b0f', class: "hb-input-number__controls" }, h("span", { key: '876db137bb4539e93a1f7ccb08a2fb754722a7bf', class: {
+                'hb-input-number__increase': true,
+                'hb-input-number__increase--disabled': this.currentValue >= this.max,
+            }, onClick: this.increase }, "+"), h("span", { key: '98acd918f10a7f8d3c399aa60677eac231be503b', class: {
+                'hb-input-number__decrease': true,
+                'hb-input-number__decrease--disabled': this.currentValue <= this.min,
+            }, onClick: this.decrease }, "\u2212"))), this.controls && this.controlsPosition !== 'right' && (h("span", { key: '4befdfc2a0d7ac3af63027f0947f27d866fbe158', class: {
+                'hb-input-number__increase': true,
+                'hb-input-number__increase--disabled': this.currentValue >= this.max,
+            }, onClick: this.increase }, "+"))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleModelValueChange"]
+    }; }
+    static get style() { return HbInputNumberStyle0; }
+}, [1, "hb-input-number", {
+        "modelValue": [1026, "model-value"],
+        "size": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "precision": [2],
+        "stepStrictly": [4, "step-strictly"],
+        "controls": [4],
+        "controlsPosition": [1, "controls-position"],
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "placeholder": [1],
+        "currentValue": [32]
+    }, undefined, {
+        "modelValue": ["handleModelValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-input-number"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-input-number":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputNumber);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbInputNumber = InputNumber;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbInputNumber, defineCustomElement };
+
+//# sourceMappingURL=hb-input-number.js.map

package/dist/components/hb-input-number.js.map

@@ -0,0 +1 @@
+{"file":"hb-input-number.js","mappings":"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","names":[],"sources":["src/components/InputNumber/input-number.css?tag=hb-input-number&encapsulation=shadow","src/components/InputNumber/InputNumber.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --hb-input-number-font-size: 14px;\n  --hb-input-number-height: 32px;\n  --hb-input-number-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-number-border-color-hover: var(--hb-color-primary);\n  --hb-input-number-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-input-number {\n  position: relative;\n  display: inline-block;\n  width: 180px;\n  line-height: var(--hb-input-number-height);\n}\n\n.hb-input-number__inner {\n  -webkit-appearance: none;\n  background-color: var(--hb-input-number-bg-color);\n  border: 1px solid var(--hb-input-number-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  color: var(--hb-color-text-regular, #606266);\n  display: block;\n  font-size: inherit;\n  height: var(--hb-input-number-height);\n  line-height: var(--hb-input-number-height);\n  outline: none;\n  padding: 0 50px 0 15px;\n  text-align: left;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n}\n\n.hb-input-number--without-controls .hb-input-number__inner {\n  padding: 0 15px;\n}\n\n.hb-input-number--controls-right .hb-input-number__inner {\n  padding: 0 15px 0 50px;\n}\n\n.hb-input-number__inner:hover:not(:disabled) {\n  border-color: var(--hb-input-number-border-color-hover);\n}\n\n.hb-input-number__inner:focus {\n  border-color: var(--hb-input-number-border-color-hover);\n}\n\n.hb-input-number__inner:disabled {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  border-color: var(--hb-input-number-border-color);\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-input-number__increase,\n.hb-input-number__decrease {\n  position: absolute;\n  z-index: 1;\n  top: 1px;\n  width: 35px;\n  height: calc(100% - 2px);\n  text-align: center;\n  background: var(--hb-fill-color-light, #f5f7fa);\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  font-size: 13px;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n\n.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled),\n.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled) {\n  color: var(--hb-color-primary);\n}\n\n.hb-input-number__increase--disabled,\n.hb-input-number__decrease--disabled {\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-input-number__increase {\n  right: 1px;\n  border-radius: 0 4px 4px 0;\n  border-left: 1px solid var(--hb-input-number-border-color);\n}\n\n.hb-input-number__decrease {\n  right: 36px;\n  border-radius: 0;\n  border-left: 1px solid var(--hb-input-number-border-color);\n}\n\n.hb-input-number--controls-right .hb-input-number__increase {\n  right: 1px;\n  border-radius: 0 4px 4px 0;\n}\n\n.hb-input-number--controls-right .hb-input-number__decrease {\n  right: 36px;\n  border-radius: 0;\n}\n\n.hb-input-number__controls {\n  position: absolute;\n  right: 1px;\n  top: 1px;\n  width: 35px;\n  height: calc(100% - 2px);\n  border-left: 1px solid var(--hb-input-number-border-color);\n  border-radius: 0 4px 4px 0;\n  background: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-input-number--controls-right .hb-input-number__controls {\n  left: 1px;\n  right: auto;\n  border-left: none;\n  border-right: 1px solid var(--hb-input-number-border-color);\n  border-radius: 4px 0 0 4px;\n}\n\n.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase {\n  position: static;\n  border: none;\n  border-bottom: 1px solid var(--hb-input-number-border-color);\n  border-radius: 0;\n}\n\n.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease {\n  position: static;\n  border: none;\n  border-radius: 0 0 0 4px;\n}\n\n.hb-input-number--small {\n  width: 150px;\n}\n\n.hb-input-number--small .hb-input-number__inner {\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  padding: 0 40px 0 12px;\n}\n\n.hb-input-number--large {\n  width: 200px;\n}\n\n.hb-input-number--large .hb-input-number__inner {\n  height: 40px;\n  line-height: 40px;\n  font-size: 16px;\n  padding: 0 55px 0 18px;\n}\n\n.hb-input-number--disabled {\n  cursor: not-allowed;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * InputNumber 数字输入框组件\n * 仅允许输入标准的数字值，可定义范围\n */\n@Component({\n  tag: 'hb-input-number',\n  styleUrl: 'input-number.css',\n  shadow: true,\n})\nexport class InputNumber {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number = 0;\n\n  /**\n   * 计数器尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 最小值\n   * @default -Infinity\n   */\n  @Prop() min: number = -Infinity;\n\n  /**\n   * 最大值\n   * @default Infinity\n   */\n  @Prop() max: number = Infinity;\n\n  /**\n   * 计数器步长\n   * @default 1\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * 精度\n   */\n  @Prop() precision?: number;\n\n  /**\n   * 是否只能输入 step 的倍数\n   * @default false\n   */\n  @Prop() stepStrictly: boolean = false;\n\n  /**\n   * 是否使用控制按钮\n   * @default true\n   */\n  @Prop() controls: boolean = true;\n\n  /**\n   * 控制按钮位置\n   */\n  @Prop() controlsPosition: '' | 'right' = '';\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 placeholder 属性\n   */\n  @Prop() placeholder?: string;\n\n  @State() currentValue: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<number>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n  }\n\n  /** 受控模式：外部修改 modelValue 时同步内部 currentValue，保证 UI 与值一致 */\n  @Watch('modelValue')\n  handleModelValueChange() {\n    this.currentValue = this.modelValue;\n  }\n\n  private formatValue(value: number): number {\n    if (this.precision !== undefined) {\n      return Number(value.toFixed(this.precision));\n    }\n    return value;\n  }\n\n  private clampValue(value: number): number {\n    let clamped = Math.max(this.min, Math.min(this.max, value));\n    \n    if (this.stepStrictly) {\n      const step = this.step;\n      clamped = Math.round(clamped / step) * step;\n    }\n    \n    return this.formatValue(clamped);\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n    \n    if (isNaN(value)) {\n      this.currentValue = this.min;\n    } else {\n      this.currentValue = this.clampValue(value);\n    }\n    \n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  };\n\n  private handleChange = () => {\n    this.hbChange.emit(this.currentValue);\n  };\n\n  private increase = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue + this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  private decrease = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue - this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-input-number': true,\n          [`hb-input-number--${this.size}`]: true,\n          'hb-input-number--disabled': this.disabled,\n          'hb-input-number--controls-right': this.controlsPosition === 'right',\n          'hb-input-number--without-controls': !this.controls,\n        }}\n      >\n        {this.controls && this.controlsPosition !== 'right' && (\n          <span\n            class={{\n              'hb-input-number__decrease': true,\n              'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n            }}\n            onClick={this.decrease}\n          >\n            −\n          </span>\n        )}\n        <input\n          type=\"number\"\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input-number__inner\"\n          value={this.currentValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          placeholder={this.placeholder}\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n        {this.controls && this.controlsPosition === 'right' && (\n          <span class=\"hb-input-number__controls\">\n            <span\n              class={{\n                'hb-input-number__increase': true,\n                'hb-input-number__increase--disabled': this.currentValue >= this.max,\n              }}\n              onClick={this.increase}\n            >\n              +\n            </span>\n            <span\n              class={{\n                'hb-input-number__decrease': true,\n                'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n              }}\n              onClick={this.decrease}\n            >\n              −\n            </span>\n          </span>\n        )}\n        {this.controls && this.controlsPosition !== 'right' && (\n          <span\n            class={{\n              'hb-input-number__increase': true,\n              'hb-input-number__increase--disabled': this.currentValue >= this.max,\n            }}\n            onClick={this.increase}\n          >\n            +\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-input-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbInputTag extends Components.HbInputTag, HTMLElement {}
+export const HbInputTag: {
+    prototype: HbInputTag;
+    new (): HbInputTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-input-tag.js

@@ -0,0 +1,174 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const inputTagCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-input-tag-font-size:14px;--hb-input-tag-height:32px;--hb-input-tag-border-color:var(--hb-border-color,#dcdfe6);--hb-input-tag-border-color-hover:var(--hb-color-primary);--hb-input-tag-bg-color:var(--hb-color-white,#fff);display:inline-block}.hb-input-tag{align-items:center;background-color:var(--hb-input-tag-bg-color);border:1px solid var(--hb-input-tag-border-color);border-radius:4px;box-sizing:border-box;display:inline-flex;flex-wrap:wrap;min-height:var(--hb-input-tag-height);padding:0 8px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.hb-input-tag--focused,.hb-input-tag:hover:not(.hb-input-tag--disabled){border-color:var(--hb-input-tag-border-color-hover)}.hb-input-tag__tag{align-items:center;background-color:var(--hb-fill-color-light,#f0f2f5);border:1px solid var(--hb-border-color-lighter,#e4e7ed);border-radius:4px;color:var(--hb-color-text-regular,#606266);display:inline-flex;font-size:12px;height:24px;margin:2px 4px 2px 0;padding:0 8px}.hb-input-tag__tag--success{background-color:var(--hb-color-success-light-9,#f0f9ff);border-color:var(--hb-color-success-light-7,#b3e19d);color:var(--hb-color-success,#67c23a)}.hb-input-tag__tag--info{background-color:var(--hb-color-info-light-9,#f4f4f5);border-color:var(--hb-color-info-light-7,#c8c9cc);color:var(--hb-color-info,#909399)}.hb-input-tag__tag--warning{background-color:var(--hb-color-warning-light-9,#fdf6ec);border-color:var(--hb-color-warning-light-7,#f5dab1);color:var(--hb-color-warning,#e6a23c)}.hb-input-tag__tag--danger{background-color:var(--hb-color-danger-light-9,#fef0f0);border-color:var(--hb-color-danger-light-7,#fbc4c4);color:var(--hb-color-danger,#f56c6c)}.hb-input-tag__tag-text{margin-right:4px}.hb-input-tag__tag-close{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;font-size:14px;transition:color .2s}.hb-input-tag__tag-close:hover{color:var(--hb-color-text-regular,#606266)}.hb-input-tag__clear{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;font-size:14px;margin-left:4px;padding:0 2px;transition:color .2s}.hb-input-tag__clear:hover,.hb-input-tag__input{color:var(--hb-color-text-regular,#606266)}.hb-input-tag__input{background:0 0;border:none;flex:1;font-size:var(--hb-input-tag-font-size);height:24px;line-height:24px;margin:2px 0;min-width:60px;outline:none;padding:0}.hb-input-tag__input::placeholder{color:var(--hb-color-text-placeholder,#c0c4cc)}.hb-input-tag--small{min-height:24px;padding:0 6px}.hb-input-tag--small .hb-input-tag__tag{font-size:11px;height:20px;padding:0 6px}.hb-input-tag--small .hb-input-tag__input{font-size:12px;height:20px;line-height:20px}.hb-input-tag--large{min-height:40px;padding:0 10px}.hb-input-tag--large .hb-input-tag__tag{font-size:13px;height:28px;padding:0 10px}.hb-input-tag--large .hb-input-tag__input{font-size:16px;height:28px;line-height:28px}.hb-input-tag--disabled{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-input-tag-border-color);cursor:not-allowed}.hb-input-tag--disabled .hb-input-tag__input{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}";
+const HbInputTagStyle0 = inputTagCss;
+
+const InputTag = /*@__PURE__*/ proxyCustomElement(class InputTag extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbRemove = createEvent(this, "hbRemove", 7);
+        this.hbInput = createEvent(this, "hbInput", 7);
+    }
+    get el() { return this; }
+    /**
+     * 绑定值
+     */
+    modelValue = [];
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 输入框占位文本
+     */
+    placeholder;
+    /**
+     * 输入框最大长度
+     */
+    maxlength;
+    /**
+     * 最大标签数量
+     */
+    max;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 输入框宽度
+     */
+    width;
+    /**
+     * 标签类型
+     */
+    type;
+    /**
+     * 是否可关闭
+     * @default true
+     */
+    closable = true;
+    /**
+     * 输入框是否可见
+     * @default true
+     */
+    inputVisible = true;
+    inputValue = '';
+    isFocused = false;
+    inputRef;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 移除标签时触发
+     */
+    hbRemove;
+    /**
+     * 输入事件
+     */
+    hbInput;
+    handleInput = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.hbInput.emit(target.value);
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' && this.inputValue.trim()) {
+            e.preventDefault();
+            this.addTag(this.inputValue.trim());
+        }
+        else if (e.key === 'Backspace' && !this.inputValue && this.modelValue.length > 0) {
+            this.removeTag(this.modelValue[this.modelValue.length - 1]);
+        }
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        if (this.inputValue.trim()) {
+            this.addTag(this.inputValue.trim());
+        }
+    };
+    addTag(tag) {
+        if (this.max && this.modelValue.length >= this.max) {
+            return;
+        }
+        if (!this.modelValue.includes(tag)) {
+            const newValue = [...this.modelValue, tag];
+            this.modelValue = newValue;
+            this.inputValue = '';
+            this.hbChange.emit(newValue);
+            if (this.inputRef) {
+                this.inputRef.value = '';
+            }
+        }
+    }
+    removeTag(tag) {
+        const newValue = this.modelValue.filter(t => t !== tag);
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+        this.hbRemove.emit(tag);
+    }
+    handleClearAll = (e) => {
+        e.stopPropagation();
+        this.modelValue = [];
+        this.hbChange.emit([]);
+    };
+    render() {
+        return (h("div", { key: '8623f46b1c4b3a6fbc2f3e1238695d34f08eac16', class: {
+                'hb-input-tag': true,
+                [`hb-input-tag--${this.size}`]: true,
+                'hb-input-tag--disabled': this.disabled,
+                'hb-input-tag--focused': this.isFocused,
+            }, style: this.width ? { width: this.width } : undefined }, this.modelValue.map((tag) => (h("span", { class: {
+                'hb-input-tag__tag': true,
+                [`hb-input-tag__tag--${this.type}`]: !!this.type,
+            } }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '16c0936153b04ffb0ad4949f66c7994470b7fb91', ref: (el) => (this.inputRef = el), type: "text", class: "hb-input-tag__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxlength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.clearable && this.modelValue.length > 0 && !this.disabled && (h("span", { key: '9995f3650302013f402f8bd3878c5ce974dfbc00', class: "hb-input-tag__clear", onClick: this.handleClearAll }, "\u00D7"))));
+    }
+    static get style() { return HbInputTagStyle0; }
+}, [1, "hb-input-tag", {
+        "modelValue": [1040],
+        "size": [1],
+        "disabled": [4],
+        "placeholder": [1],
+        "maxlength": [2],
+        "max": [2],
+        "clearable": [4],
+        "width": [1],
+        "type": [1],
+        "closable": [4],
+        "inputVisible": [4, "input-visible"],
+        "inputValue": [32],
+        "isFocused": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-input-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-input-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputTag);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbInputTag = InputTag;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbInputTag, defineCustomElement };
+
+//# sourceMappingURL=hb-input-tag.js.map

package/dist/components/hb-input-tag.js.map

@@ -0,0 +1 @@
+{"file":"hb-input-tag.js","mappings":"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","names":[],"sources":["src/components/InputTag/input-tag.css?tag=hb-input-tag&encapsulation=shadow","src/components/InputTag/InputTag.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --hb-input-tag-font-size: 14px;\n  --hb-input-tag-height: 32px;\n  --hb-input-tag-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-tag-border-color-hover: var(--hb-color-primary);\n  --hb-input-tag-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-input-tag {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 0 8px;\n  min-height: var(--hb-input-tag-height);\n  border: 1px solid var(--hb-input-tag-border-color);\n  border-radius: 4px;\n  background-color: var(--hb-input-tag-bg-color);\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.hb-input-tag:hover:not(.hb-input-tag--disabled) {\n  border-color: var(--hb-input-tag-border-color-hover);\n}\n\n.hb-input-tag--focused {\n  border-color: var(--hb-input-tag-border-color-hover);\n}\n\n.hb-input-tag__tag {\n  display: inline-flex;\n  align-items: center;\n  height: 24px;\n  padding: 0 8px;\n  margin: 2px 4px 2px 0;\n  background-color: var(--hb-fill-color-light, #f0f2f5);\n  border: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-input-tag__tag--success {\n  background-color: var(--hb-color-success-light-9, #f0f9ff);\n  border-color: var(--hb-color-success-light-7, #b3e19d);\n  color: var(--hb-color-success, #67c23a);\n}\n\n.hb-input-tag__tag--info {\n  background-color: var(--hb-color-info-light-9, #f4f4f5);\n  border-color: var(--hb-color-info-light-7, #c8c9cc);\n  color: var(--hb-color-info, #909399);\n}\n\n.hb-input-tag__tag--warning {\n  background-color: var(--hb-color-warning-light-9, #fdf6ec);\n  border-color: var(--hb-color-warning-light-7, #f5dab1);\n  color: var(--hb-color-warning, #e6a23c);\n}\n\n.hb-input-tag__tag--danger {\n  background-color: var(--hb-color-danger-light-9, #fef0f0);\n  border-color: var(--hb-color-danger-light-7, #fbc4c4);\n  color: var(--hb-color-danger, #f56c6c);\n}\n\n.hb-input-tag__tag-text {\n  margin-right: 4px;\n}\n\n.hb-input-tag__tag-close {\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  transition: color 0.2s;\n}\n\n.hb-input-tag__tag-close:hover {\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-input-tag__clear {\n  cursor: pointer;\n  margin-left: 4px;\n  padding: 0 2px;\n  font-size: 14px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  transition: color 0.2s;\n}\n\n.hb-input-tag__clear:hover {\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-input-tag__input {\n  flex: 1;\n  min-width: 60px;\n  height: 24px;\n  line-height: 24px;\n  padding: 0;\n  margin: 2px 0;\n  border: none;\n  outline: none;\n  font-size: var(--hb-input-tag-font-size);\n  color: var(--hb-color-text-regular, #606266);\n  background: transparent;\n}\n\n.hb-input-tag__input::placeholder {\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-input-tag--small {\n  min-height: 24px;\n  padding: 0 6px;\n}\n\n.hb-input-tag--small .hb-input-tag__tag {\n  height: 20px;\n  font-size: 11px;\n  padding: 0 6px;\n}\n\n.hb-input-tag--small .hb-input-tag__input {\n  height: 20px;\n  line-height: 20px;\n  font-size: 12px;\n}\n\n.hb-input-tag--large {\n  min-height: 40px;\n  padding: 0 10px;\n}\n\n.hb-input-tag--large .hb-input-tag__tag {\n  height: 28px;\n  font-size: 13px;\n  padding: 0 10px;\n}\n\n.hb-input-tag--large .hb-input-tag__input {\n  height: 28px;\n  line-height: 28px;\n  font-size: 16px;\n}\n\n.hb-input-tag--disabled {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  border-color: var(--hb-input-tag-border-color);\n  cursor: not-allowed;\n}\n\n.hb-input-tag--disabled .hb-input-tag__input {\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Element } from '@stencil/core';\n\n/**\n * InputTag 标签输入框组件\n * 通过回车或者标签关闭按钮添加/删除标签\n */\n@Component({\n  tag: 'hb-input-tag',\n  styleUrl: 'input-tag.css',\n  shadow: true,\n})\nexport class InputTag {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string[] = [];\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 输入框最大长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最大标签数量\n   */\n  @Prop() max?: number;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 输入框宽度\n   */\n  @Prop() width?: string;\n\n  /**\n   * 标签类型\n   */\n  @Prop() type?: 'success' | 'info' | 'warning' | 'danger';\n\n  /**\n   * 是否可关闭\n   * @default true\n   */\n  @Prop() closable: boolean = true;\n\n  /**\n   * 输入框是否可见\n   * @default true\n   */\n  @Prop() inputVisible: boolean = true;\n\n  @State() inputValue: string = '';\n  @State() isFocused: boolean = false;\n\n  private inputRef?: HTMLInputElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string[]>;\n\n  /**\n   * 移除标签时触发\n   */\n  @Event() hbRemove: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.inputValue = target.value;\n    this.hbInput.emit(target.value);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' && this.inputValue.trim()) {\n      e.preventDefault();\n      this.addTag(this.inputValue.trim());\n    } else if (e.key === 'Backspace' && !this.inputValue && this.modelValue.length > 0) {\n      this.removeTag(this.modelValue[this.modelValue.length - 1]);\n    }\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    if (this.inputValue.trim()) {\n      this.addTag(this.inputValue.trim());\n    }\n  };\n\n  private addTag(tag: string) {\n    if (this.max && this.modelValue.length >= this.max) {\n      return;\n    }\n    \n    if (!this.modelValue.includes(tag)) {\n      const newValue = [...this.modelValue, tag];\n      this.modelValue = newValue;\n      this.inputValue = '';\n      this.hbChange.emit(newValue);\n      if (this.inputRef) {\n        this.inputRef.value = '';\n      }\n    }\n  }\n\n  private removeTag(tag: string) {\n    const newValue = this.modelValue.filter(t => t !== tag);\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n    this.hbRemove.emit(tag);\n  }\n\n  private handleClearAll = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = [];\n    this.hbChange.emit([]);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-input-tag': true,\n          [`hb-input-tag--${this.size}`]: true,\n          'hb-input-tag--disabled': this.disabled,\n          'hb-input-tag--focused': this.isFocused,\n        }}\n        style={this.width ? { width: this.width } : undefined}\n      >\n        {this.modelValue.map((tag) => (\n          <span\n            class={{\n              'hb-input-tag__tag': true,\n              [`hb-input-tag__tag--${this.type}`]: !!this.type,\n            }}\n          >\n            <span class=\"hb-input-tag__tag-text\">{tag}</span>\n            {this.closable && (\n              <span\n                class=\"hb-input-tag__tag-close\"\n                onClick={() => this.removeTag(tag)}\n              >\n                ×\n              </span>\n            )}\n          </span>\n        ))}\n        {this.inputVisible && (!this.max || this.modelValue.length < this.max) && (\n          <input\n            ref={(el) => (this.inputRef = el)}\n            type=\"text\"\n            class=\"hb-input-tag__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            onInput={this.handleInput}\n            onKeyDown={this.handleKeyDown}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        )}\n        {this.clearable && this.modelValue.length > 0 && !this.disabled && (\n          <span class=\"hb-input-tag__clear\" onClick={this.handleClearAll}>×</span>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbInput extends Components.HbInput, HTMLElement {}
+export const HbInput: {
+    prototype: HbInput;
+    new (): HbInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;