huibo-ui 0.3.0

package/dist/esm/hb-input-tag.entry.js

@@ -0,0 +1,141 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-fdf7135e.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbRemove = createEvent(this, "hbRemove", 7);
+        this.hbInput = createEvent(this, "hbInput", 7);
+    }
+    get el() { return getElement(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"))));
+    }
+};
+InputTag.style = HbInputTagStyle0;
+
+export { InputTag as hb_input_tag };
+
+//# sourceMappingURL=hb-input-tag.entry.js.map

package/dist/esm/hb-input-tag.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-input-tag.entry.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/esm/hb-input.entry.js

@@ -0,0 +1,248 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-fdf7135e.js';
+
+/**
+ * 表单输入组件共享基础
+ * 统一 size / disabled / clearable / modelValue 这一组在 Input / Select / Cascader /
+ * DatePicker / InputNumber / TimePicker 等组件中重复出现的包装模式。
+ *
+ * 设计原则：纯函数 + 类型导出，不引入基类继承，避免 Stencil 装饰器在继承链上的隐式行为。
+ * 组件按需 import 对应工具，渲染时调用即可。
+ */
+/** 全部合法尺寸，用于运行期校验 */
+const COMPONENT_SIZES = ['large', 'default', 'small'];
+/**
+ * 生成尺寸 class 名：buildSizeClass('hb-input', 'large') -> 'hb-input--large'
+ * 用于替代各组件 render 中重复的 `[`hb-input--${this.size}`]: true` 模板字面量。
+ */
+function buildSizeClass(base, size) {
+    const normalized = size && COMPONENT_SIZES.includes(size) ? size : 'default';
+    return `${base}--${normalized}`;
+}
+/**
+ * 判定清空按钮是否应显示。
+ * 抽取自 Input/Select/Cascader 中重复的 `clearable && !disabled && !readonly && hasValue`。
+ */
+function isClearVisible(options) {
+    return Boolean(options.clearable && !options.disabled && !options.readonly && options.hasValue);
+}
+/**
+ * 判定一个值是否「非空」（用于清空按钮显隐）。
+ * 兼容字符串、数字、数组（多选）。
+ */
+function hasInputValue(value) {
+    if (value === null || value === undefined)
+        return false;
+    if (typeof value === 'string')
+        return value.length > 0;
+    if (typeof value === 'number')
+        return !Number.isNaN(value);
+    if (Array.isArray(value))
+        return value.length > 0;
+    return true;
+}
+/**
+ * 尺寸 class 集合生成器：返回包含 base 与 size class 的对象，可直接展开进 JSX class 绑定。
+ * 例：sizeClassMap('hb-input', 'large', this.size) -> { 'hb-input': true, 'hb-input--large': true }
+ */
+function sizeClassMap(base, size) {
+    return { [base]: true, [buildSizeClass(base, size)]: true };
+}
+
+const inputCss = "/*! 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{.resize{resize:both}.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-font-size:14px;--hb-input-font-size-large:16px;--hb-input-font-size-small:12px;--hb-input-height:32px;--hb-input-height-large:40px;--hb-input-height-small:24px;--hb-input-border-color:var(--hb-border-color,#dcdfe6);--hb-input-border-color-hover:var(--hb-color-primary);--hb-input-bg-color:var(--hb-color-white,#fff);--hb-input-text-color:var(--hb-color-text-regular,#606266);--hb-input-placeholder-color:var(--hb-color-text-placeholder,#c0c4cc);--hb-input-disabled-color:var(--hb-color-text-disabled,#c0c4cc);--hb-input-disabled-bg-color:var(--hb-fill-color-light,#f5f7fa);display:inline-block;position:relative}.hb-input{font-size:var(--hb-input-font-size);position:relative}.hb-input,.hb-input__inner{display:inline-block;width:100%}.hb-input__inner{-webkit-appearance:none;background-color:var(--hb-input-bg-color);background-image:none;border:1px solid var(--hb-input-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-input-text-color);font-size:inherit;height:var(--hb-input-height);line-height:var(--hb-input-height);outline:none;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.hb-input__inner::placeholder{color:var(--hb-input-placeholder-color)}.hb-input__inner:focus,.hb-input__inner:hover:not(:disabled){border-color:var(--hb-input-border-color-hover)}.hb-input__inner:disabled{background-color:var(--hb-input-disabled-bg-color);border-color:var(--hb-input-border-color);color:var(--hb-input-disabled-color);cursor:not-allowed}.hb-input__inner[readonly]{background-color:var(--hb-input-disabled-bg-color);cursor:default}.hb-input--small .hb-input__inner{font-size:var(--hb-input-font-size-small);height:var(--hb-input-height-small);line-height:var(--hb-input-height-small);padding:0 12px}.hb-input--large .hb-input__inner{font-size:var(--hb-input-font-size-large);height:var(--hb-input-height-large);line-height:var(--hb-input-height-large);padding:0 18px}.hb-input__prefix,.hb-input__suffix{align-items:center;color:var(--hb-input-placeholder-color);display:flex;height:100%;position:absolute;text-align:center;top:0;transition:all .3s}.hb-input__prefix{left:5px}.hb-input__suffix{right:5px}.hb-input__suffix-inner{align-items:center;cursor:pointer;display:flex;-webkit-user-select:none;user-select:none}.hb-input__clear{color:var(--hb-input-placeholder-color);font-size:16px;transition:color .2s}.hb-input__clear:hover{color:var(--hb-input-text-color)}.hb-input__password{cursor:pointer;font-size:16px}.hb-input__inner[type=textarea]{line-height:1.5;min-height:60px;padding:5px 15px;resize:vertical;vertical-align:bottom}.hb-input__count{bottom:5px;color:var(--hb-input-placeholder-color);font-size:12px;position:absolute;right:10px}.hb-input__count-inner{background-color:var(--hb-input-bg-color);padding:0 4px}@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 HbInputStyle0 = inputCss;
+
+const Input = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbInput = createEvent(this, "hbInput", 7);
+        this.hbFocus = createEvent(this, "hbFocus", 7);
+        this.hbBlur = createEvent(this, "hbBlur", 7);
+        this.hbClear = createEvent(this, "hbClear", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * 绑定值
+     */
+    modelValue = '';
+    /**
+     * 输入框类型
+     */
+    type = 'text';
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否只读
+     * @default false
+     */
+    readonly = false;
+    /**
+     * 输入框占位文本
+     */
+    placeholder;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 是否显示密码可见性切换
+     * @default false
+     */
+    showPassword = false;
+    /**
+     * 是否显示字数统计
+     * @default false
+     */
+    showWordLimit = false;
+    /**
+     * 最大输入长度
+     */
+    maxlength;
+    /**
+     * 最小输入长度
+     */
+    minlength;
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    inputId;
+    /**
+     * 原生 autocomplete 属性
+     */
+    autocomplete;
+    /**
+     * 原生 autofocus 属性
+     */
+    autofocus = false;
+    /**
+     * 输入框头部图标
+     */
+    prefixIcon;
+    /**
+     * 输入框尾部图标
+     */
+    suffixIcon;
+    /**
+     * 输入框行数，仅 type 为 'textarea' 时有效
+     */
+    rows = 2;
+    /**
+     * 是否自适应内容高度，仅 type 为 'textarea' 时有效
+     */
+    autosize = false;
+    /**
+     * 是否调整 textarea 大小
+     */
+    resize;
+    isFocused = false;
+    showClear = false;
+    passwordVisible = false;
+    inputValue = '';
+    inputRef;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 输入事件
+     */
+    hbInput;
+    /**
+     * 聚焦事件
+     */
+    hbFocus;
+    /**
+     * 失焦事件
+     */
+    hbBlur;
+    /**
+     * 清空事件
+     */
+    hbClear;
+    handleValueChange() {
+        this.inputValue = this.modelValue;
+        this.updateClearVisible();
+    }
+    componentDidLoad() {
+        this.inputValue = this.modelValue;
+        this.updateClearVisible();
+    }
+    updateClearVisible() {
+        this.showClear = isClearVisible({
+            clearable: this.clearable,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            hasValue: hasInputValue(this.inputValue),
+        });
+    }
+    handleInput = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.modelValue = target.value;
+        this.updateClearVisible();
+        this.hbInput.emit(target.value);
+    };
+    handleChange = (e) => {
+        const target = e.target;
+        this.hbChange.emit(target.value);
+    };
+    handleFocus = (e) => {
+        this.isFocused = true;
+        this.updateClearVisible();
+        this.hbFocus.emit(e);
+    };
+    handleBlur = (e) => {
+        this.isFocused = false;
+        this.updateClearVisible();
+        this.hbBlur.emit(e);
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.inputValue = '';
+        this.modelValue = '';
+        this.updateClearVisible();
+        this.hbClear.emit();
+        this.hbChange.emit('');
+        if (this.inputRef) {
+            this.inputRef.focus();
+        }
+    };
+    togglePasswordVisible = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
+    getInputType() {
+        if (this.type === 'password' && this.showPassword) {
+            return this.passwordVisible ? 'text' : 'password';
+        }
+        return this.type;
+    }
+    render() {
+        const isTextarea = this.type === 'textarea';
+        const InputTag = isTextarea ? 'textarea' : 'input';
+        return (h("div", { key: '22b51bd1c9e0c3086ed167eea57f3b5818685785', class: {
+                ...sizeClassMap('hb-input', this.size),
+                'hb-input--disabled': this.disabled,
+                'hb-input--focused': this.isFocused,
+            } }, this.prefixIcon && (h("span", { key: 'ef3b02d947c45ac282814a0e2e4909f8473469eb', class: "hb-input__prefix" }, h("i", { key: '88f95312bf9aa489d5d27a1f701b2eadc794d7cf', class: this.prefixIcon }))), h(InputTag, { key: 'fe5de1f3dcf5441aebb5bcc943c64d59221211d7', ref: (el) => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea && this.resize ? { resize: this.resize } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: 'db106e66989483c48171aad758cd5a443ef7670a', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '3fa676f9860aa3018247c9d61bad432afdea4345', class: "hb-input__suffix-inner hb-input__clear", onClick: this.handleClear }, "\u00D7")), this.type === 'password' && this.showPassword && (h("span", { key: '8911301b65aa3435f7f3b933b9b8de1b055c266e', class: "hb-input__suffix-inner hb-input__password", onClick: this.togglePasswordVisible }, this.passwordVisible ? '👁️' : '👁️‍🗨️')), this.suffixIcon && (h("span", { key: '14fa885ec429419525ea5cd550fc7d9cec9f3ee4', class: "hb-input__suffix-inner" }, h("i", { key: '36995c1f4e5d2c258170e7ad8a012e586d905e62', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: '383d7d25fbbb77dad3df3ebbbf4e0b1fc504a4b4', class: "hb-input__count" }, h("span", { key: '564d4a6ac0feae0be61378f52aae3b22872566fb', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+};
+Input.style = HbInputStyle0;
+
+export { Input as hb_input };
+
+//# sourceMappingURL=hb-input.entry.js.map

package/dist/esm/hb-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-input.entry.js","mappings":"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","names":[],"sources":["src/utils/form-input-base.ts","src/components/Input/input.css?tag=hb-input&encapsulation=shadow","src/components/Input/Input.tsx"],"sourcesContent":["/**\n * 表单输入组件共享基础\n * 统一 size / disabled / clearable / modelValue 这一组在 Input / Select / Cascader /\n * DatePicker / InputNumber / TimePicker 等组件中重复出现的包装模式。\n *\n * 设计原则：纯函数 + 类型导出，不引入基类继承，避免 Stencil 装饰器在继承链上的隐式行为。\n * 组件按需 import 对应工具，渲染时调用即可。\n */\n\n/** 组件尺寸（与 Ant Design 对齐，便于迁移） */\nexport type ComponentSize = 'large' | 'default' | 'small';\n\n/** 全部合法尺寸，用于运行期校验 */\nexport const COMPONENT_SIZES: readonly ComponentSize[] = ['large', 'default', 'small'] as const;\n\n/**\n * 表单输入组件共享的 prop 契约。\n * 跨框架消费方（React / Vue / 原生）可据此推断任一表单输入组件的通用能力，\n * 各组件在此基础上扩展自身特有 prop。\n */\nexport interface FormInputProps {\n  /** 绑定值（双向，配合 hbChange 事件） */\n  modelValue: unknown;\n  /** 尺寸 */\n  size?: ComponentSize;\n  /** 是否禁用 */\n  disabled?: boolean;\n  /** 是否只读 */\n  readonly?: boolean;\n  /** 是否可清空 */\n  clearable?: boolean;\n  /** 占位文本 */\n  placeholder?: string;\n}\n\n/**\n * 生成尺寸 class 名：buildSizeClass('hb-input', 'large') -> 'hb-input--large'\n * 用于替代各组件 render 中重复的 `[`hb-input--${this.size}`]: true` 模板字面量。\n */\nexport function buildSizeClass(base: string, size: ComponentSize | undefined): string {\n  const normalized = size && COMPONENT_SIZES.includes(size) ? size : 'default';\n  return `${base}--${normalized}`;\n}\n\n/** 清空按钮可见性判定参数 */\nexport interface ClearVisibleOptions {\n  /** 是否声明了 clearable */\n  clearable: boolean;\n  /** 是否禁用（禁用时不显示） */\n  disabled?: boolean;\n  /** 是否只读（只读时不显示） */\n  readonly?: boolean;\n  /** 当前是否有值（无值时不显示） */\n  hasValue: boolean;\n}\n\n/**\n * 判定清空按钮是否应显示。\n * 抽取自 Input/Select/Cascader 中重复的 `clearable && !disabled && !readonly && hasValue`。\n */\nexport function isClearVisible(options: ClearVisibleOptions): boolean {\n  return Boolean(options.clearable && !options.disabled && !options.readonly && options.hasValue);\n}\n\n/**\n * 判定一个值是否「非空」（用于清空按钮显隐）。\n * 兼容字符串、数字、数组（多选）。\n */\nexport function hasInputValue(value: unknown): boolean {\n  if (value === null || value === undefined) return false;\n  if (typeof value === 'string') return value.length > 0;\n  if (typeof value === 'number') return !Number.isNaN(value);\n  if (Array.isArray(value)) return value.length > 0;\n  return true;\n}\n\n/**\n * 尺寸 class 集合生成器：返回包含 base 与 size class 的对象，可直接展开进 JSX class 绑定。\n * 例：sizeClassMap('hb-input', 'large', this.size) -> { 'hb-input': true, 'hb-input--large': true }\n */\nexport function sizeClassMap(base: string, size: ComponentSize | undefined): Record<string, boolean> {\n  return { [base]: true, [buildSizeClass(base, size)]: true };\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  --hb-input-font-size: 14px;\n  --hb-input-font-size-large: 16px;\n  --hb-input-font-size-small: 12px;\n  --hb-input-height: 32px;\n  --hb-input-height-large: 40px;\n  --hb-input-height-small: 24px;\n  --hb-input-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-border-color-hover: var(--hb-color-primary);\n  --hb-input-bg-color: var(--hb-color-white, #ffffff);\n  --hb-input-text-color: var(--hb-color-text-regular, #606266);\n  --hb-input-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);\n  --hb-input-disabled-color: var(--hb-color-text-disabled, #c0c4cc);\n  --hb-input-disabled-bg-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-input {\n  position: relative;\n  font-size: var(--hb-input-font-size);\n  display: inline-block;\n  width: 100%;\n}\n\n.hb-input__inner {\n  -webkit-appearance: none;\n  background-color: var(--hb-input-bg-color);\n  background-image: none;\n  border-radius: 4px;\n  border: 1px solid var(--hb-input-border-color);\n  box-sizing: border-box;\n  color: var(--hb-input-text-color);\n  display: inline-block;\n  font-size: inherit;\n  height: var(--hb-input-height);\n  line-height: var(--hb-input-height);\n  outline: none;\n  padding: 0 15px;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n}\n\n.hb-input__inner::placeholder {\n  color: var(--hb-input-placeholder-color);\n}\n\n.hb-input__inner:hover:not(:disabled) {\n  border-color: var(--hb-input-border-color-hover);\n}\n\n.hb-input__inner:focus {\n  border-color: var(--hb-input-border-color-hover);\n}\n\n.hb-input__inner:disabled {\n  background-color: var(--hb-input-disabled-bg-color);\n  border-color: var(--hb-input-border-color);\n  color: var(--hb-input-disabled-color);\n  cursor: not-allowed;\n}\n\n.hb-input__inner[readonly] {\n  background-color: var(--hb-input-disabled-bg-color);\n  cursor: default;\n}\n\n.hb-input--small .hb-input__inner {\n  height: var(--hb-input-height-small);\n  line-height: var(--hb-input-height-small);\n  font-size: var(--hb-input-font-size-small);\n  padding: 0 12px;\n}\n\n.hb-input--large .hb-input__inner {\n  height: var(--hb-input-height-large);\n  line-height: var(--hb-input-height-large);\n  font-size: var(--hb-input-font-size-large);\n  padding: 0 18px;\n}\n\n.hb-input__prefix,\n.hb-input__suffix {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  text-align: center;\n  color: var(--hb-input-placeholder-color);\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n}\n\n.hb-input__prefix {\n  left: 5px;\n}\n\n.hb-input__suffix {\n  right: 5px;\n}\n\n.hb-input__suffix-inner {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n}\n\n.hb-input__clear {\n  font-size: 16px;\n  color: var(--hb-input-placeholder-color);\n  transition: color 0.2s;\n}\n\n.hb-input__clear:hover {\n  color: var(--hb-input-text-color);\n}\n\n.hb-input__password {\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.hb-input__inner[type=\"textarea\"] {\n  min-height: 60px;\n  padding: 5px 15px;\n  line-height: 1.5;\n  vertical-align: bottom;\n  resize: vertical;\n}\n\n.hb-input__count {\n  position: absolute;\n  bottom: 5px;\n  right: 10px;\n  font-size: 12px;\n  color: var(--hb-input-placeholder-color);\n}\n\n.hb-input__count-inner {\n  background-color: var(--hb-input-bg-color);\n  padding: 0 4px;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n  tag: 'hb-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class Input {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /**\n   * 输入框类型\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: ComponentSize = '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   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否显示密码可见性切换\n   * @default false\n   */\n  @Prop() showPassword: boolean = false;\n\n  /**\n   * 是否显示字数统计\n   * @default false\n   */\n  @Prop() showWordLimit: boolean = false;\n\n  /**\n   * 最大输入长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最小输入长度\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 autocomplete 属性\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * 原生 autofocus 属性\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * 输入框头部图标\n   */\n  @Prop() prefixIcon?: string;\n\n  /**\n   * 输入框尾部图标\n   */\n  @Prop() suffixIcon?: string;\n\n  /**\n   * 输入框行数，仅 type 为 'textarea' 时有效\n   */\n  @Prop() rows: number = 2;\n\n  /**\n   * 是否自适应内容高度，仅 type 为 'textarea' 时有效\n   */\n  @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n  /**\n   * 是否调整 textarea 大小\n   */\n  @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n  @State() isFocused: boolean = false;\n  @State() showClear: boolean = false;\n  @State() passwordVisible: boolean = false;\n  @State() inputValue: string = '';\n\n  private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  /**\n   * 聚焦事件\n   */\n  @Event() hbFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * 失焦事件\n   */\n  @Event() hbBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * 清空事件\n   */\n  @Event() hbClear: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  componentDidLoad() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  private updateClearVisible() {\n    this.showClear = isClearVisible({\n      clearable: this.clearable,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      hasValue: hasInputValue(this.inputValue),\n    });\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.modelValue = target.value;\n    this.updateClearVisible();\n    this.hbInput.emit(target.value);\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.hbChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.updateClearVisible();\n    this.hbFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.updateClearVisible();\n    this.hbBlur.emit(e);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.inputValue = '';\n    this.modelValue = '';\n    this.updateClearVisible();\n    this.hbClear.emit();\n    this.hbChange.emit('');\n    if (this.inputRef) {\n      this.inputRef.focus();\n    }\n  };\n\n  private togglePasswordVisible = () => {\n    this.passwordVisible = !this.passwordVisible;\n  };\n\n  private getInputType(): string {\n    if (this.type === 'password' && this.showPassword) {\n      return this.passwordVisible ? 'text' : 'password';\n    }\n    return this.type;\n  }\n\n  render() {\n    const isTextarea = this.type === 'textarea';\n    const InputTag = isTextarea ? 'textarea' : 'input';\n\n    return (\n      <div\n        class={{\n          ...sizeClassMap('hb-input', this.size),\n          'hb-input--disabled': this.disabled,\n          'hb-input--focused': this.isFocused,\n        }}\n      >\n        {this.prefixIcon && (\n          <span class=\"hb-input__prefix\">\n            <i class={this.prefixIcon}></i>\n          </span>\n        )}\n        <InputTag\n          ref={(el) => (this.inputRef = el)}\n          type={isTextarea ? undefined : this.getInputType()}\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input__inner\"\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          maxlength={this.maxlength}\n          minlength={this.minlength}\n          rows={isTextarea ? this.rows : undefined}\n          style={isTextarea && this.resize ? { resize: this.resize } : undefined}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n        {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n          <span class=\"hb-input__suffix\">\n            {this.showClear && (\n              <span class=\"hb-input__suffix-inner hb-input__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            {this.type === 'password' && this.showPassword && (\n              <span class=\"hb-input__suffix-inner hb-input__password\" onClick={this.togglePasswordVisible}>\n                {this.passwordVisible ? '👁️' : '👁️‍🗨️'}\n              </span>\n            )}\n            {this.suffixIcon && (\n              <span class=\"hb-input__suffix-inner\">\n                <i class={this.suffixIcon}></i>\n              </span>\n            )}\n          </span>\n        )}\n        {this.showWordLimit && this.maxlength && (\n          <span class=\"hb-input__count\">\n            <span class=\"hb-input__count-inner\">\n              {this.inputValue.length} / {this.maxlength}\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/esm/hb-layout.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, h } from './index-fdf7135e.js';
+
+const layoutCss = "/*! 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{.flex{display:flex}.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:block}.hb-col{box-sizing:border-box;position:relative;width:100%}.hb-col-1{width:4.16667%}.hb-col-2{width:8.33333%}.hb-col-3{width:12.5%}.hb-col-4{width:16.6667%}.hb-col-5{width:20.8333%}.hb-col-6{width:25%}.hb-col-7{width:29.1667%}.hb-col-8{width:33.3333%}.hb-col-9{width:37.5%}.hb-col-10{width:41.6667%}.hb-col-11{width:45.8333%}.hb-col-12{width:50%}.hb-col-13{width:54.1667%}.hb-col-14{width:58.3333%}.hb-col-15{width:62.5%}.hb-col-16{width:66.6667%}.hb-col-17{width:70.8333%}.hb-col-18{width:75%}.hb-col-19{width:79.1667%}.hb-col-20{width:83.3333%}.hb-col-21{width:87.5%}.hb-col-22{width:91.6667%}.hb-col-23{width:95.8333%}.hb-col-24{width:100%}.hb-col-offset-1{margin-left:4.16667%}.hb-col-offset-2{margin-left:8.33333%}.hb-col-offset-3{margin-left:12.5%}.hb-col-offset-4{margin-left:16.6667%}.hb-col-offset-5{margin-left:20.8333%}.hb-col-offset-6{margin-left:25%}.hb-col-offset-7{margin-left:29.1667%}.hb-col-offset-8{margin-left:33.3333%}.hb-col-offset-9{margin-left:37.5%}.hb-col-offset-10{margin-left:41.6667%}.hb-col-offset-11{margin-left:45.8333%}.hb-col-offset-12{margin-left:50%}.hb-col-offset-13{margin-left:54.1667%}.hb-col-offset-14{margin-left:58.3333%}.hb-col-offset-15{margin-left:62.5%}.hb-col-offset-16{margin-left:66.6667%}.hb-col-offset-17{margin-left:70.8333%}.hb-col-offset-18{margin-left:75%}.hb-col-offset-19{margin-left:79.1667%}.hb-col-offset-20{margin-left:83.3333%}.hb-col-offset-21{margin-left:87.5%}.hb-col-offset-22{margin-left:91.6667%}.hb-col-offset-23{margin-left:95.8333%}.hb-col-push-1{left:4.16667%}.hb-col-push-2{left:8.33333%}.hb-col-push-3{left:12.5%}.hb-col-push-4{left:16.6667%}.hb-col-push-5{left:20.8333%}.hb-col-push-6{left:25%}.hb-col-push-7{left:29.1667%}.hb-col-push-8{left:33.3333%}.hb-col-push-9{left:37.5%}.hb-col-push-10{left:41.6667%}.hb-col-push-11{left:45.8333%}.hb-col-push-12{left:50%}.hb-col-pull-1{right:4.16667%}.hb-col-pull-2{right:8.33333%}.hb-col-pull-3{right:12.5%}.hb-col-pull-4{right:16.6667%}.hb-col-pull-5{right:20.8333%}.hb-col-pull-6{right:25%}.hb-col-pull-7{right:29.1667%}.hb-col-pull-8{right:33.3333%}.hb-col-pull-9{right:37.5%}.hb-col-pull-10{right:41.6667%}.hb-col-pull-11{right:45.8333%}.hb-col-pull-12{right:50%}@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 HbLayoutStyle0 = layoutCss;
+
+const Layout = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * 栅格占据的列数
+     * @default 24
+     */
+    span = 24;
+    /**
+     * 栅格左侧的间隔格数
+     * @default 0
+     */
+    offset = 0;
+    /**
+     * 栅格向右移动格数
+     * @default 0
+     */
+    push = 0;
+    /**
+     * 栅格向左移动格数
+     * @default 0
+     */
+    pull = 0;
+    /**
+     * <768px 响应式栅格数或者栅格属性对象
+     */
+    xs;
+    /**
+     * ≥768px 响应式栅格数或者栅格属性对象
+     */
+    sm;
+    /**
+     * ≥992px 响应式栅格数或者栅格属性对象
+     */
+    md;
+    /**
+     * ≥1200px 响应式栅格数或者栅格属性对象
+     */
+    lg;
+    /**
+     * ≥1920px 响应式栅格数或者栅格属性对象
+     */
+    xl;
+    getColClass() {
+        const classes = ['hb-col'];
+        if (this.span) {
+            classes.push(`hb-col-${this.span}`);
+        }
+        if (this.offset) {
+            classes.push(`hb-col-offset-${this.offset}`);
+        }
+        if (this.push) {
+            classes.push(`hb-col-push-${this.push}`);
+        }
+        if (this.pull) {
+            classes.push(`hb-col-pull-${this.pull}`);
+        }
+        return classes.join(' ');
+    }
+    render() {
+        return (h("div", { key: 'fc06cef5bbbcb0c108907a16b5c96fe8dc9f4f77', class: this.getColClass() }, h("slot", { key: '9ca9f6e93df8c29dc901f84a39b3eed635b953bb' })));
+    }
+};
+Layout.style = HbLayoutStyle0;
+
+export { Layout as hb_layout };
+
+//# sourceMappingURL=hb-layout.entry.js.map

package/dist/esm/hb-layout.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-layout.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,8xPAA8xP,CAAC;AACjzP,uBAAe,SAAS;;MCUX,MAAM;;;;;;;;IAKT,IAAI,GAAW,EAAE,CAAC;;;;;IAMlB,MAAM,GAAW,CAAC,CAAC;;;;;IAMnB,IAAI,GAAW,CAAC,CAAC;;;;;IAMjB,IAAI,GAAW,CAAC,CAAC;;;;IAKjB,EAAE,CAAmB;;;;IAKrB,EAAE,CAAmB;;;;IAKrB,EAAE,CAAmB;;;;IAKrB,EAAE,CAAmB;;;;IAKrB,EAAE,CAAmB;IAErB,WAAW;QACjB,MAAM,OAAO,GAAa,CAAC,QAAQ,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACrC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC1C;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC1C;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,8DAAa,CACT,EACN;KACH;;;;;;","names":[],"sources":["src/components/Layout/layout.css?tag=hb-layout&encapsulation=shadow","src/components/Layout/Layout.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-col {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Generate col classes for span 1-24 */\n.hb-col-1 { width: 4.16666667%; }\n.hb-col-2 { width: 8.33333333%; }\n.hb-col-3 { width: 12.5%; }\n.hb-col-4 { width: 16.66666667%; }\n.hb-col-5 { width: 20.83333333%; }\n.hb-col-6 { width: 25%; }\n.hb-col-7 { width: 29.16666667%; }\n.hb-col-8 { width: 33.33333333%; }\n.hb-col-9 { width: 37.5%; }\n.hb-col-10 { width: 41.66666667%; }\n.hb-col-11 { width: 45.83333333%; }\n.hb-col-12 { width: 50%; }\n.hb-col-13 { width: 54.16666667%; }\n.hb-col-14 { width: 58.33333333%; }\n.hb-col-15 { width: 62.5%; }\n.hb-col-16 { width: 66.66666667%; }\n.hb-col-17 { width: 70.83333333%; }\n.hb-col-18 { width: 75%; }\n.hb-col-19 { width: 79.16666667%; }\n.hb-col-20 { width: 83.33333333%; }\n.hb-col-21 { width: 87.5%; }\n.hb-col-22 { width: 91.66666667%; }\n.hb-col-23 { width: 95.83333333%; }\n.hb-col-24 { width: 100%; }\n\n/* Offset classes */\n.hb-col-offset-1 { margin-left: 4.16666667%; }\n.hb-col-offset-2 { margin-left: 8.33333333%; }\n.hb-col-offset-3 { margin-left: 12.5%; }\n.hb-col-offset-4 { margin-left: 16.66666667%; }\n.hb-col-offset-5 { margin-left: 20.83333333%; }\n.hb-col-offset-6 { margin-left: 25%; }\n.hb-col-offset-7 { margin-left: 29.16666667%; }\n.hb-col-offset-8 { margin-left: 33.33333333%; }\n.hb-col-offset-9 { margin-left: 37.5%; }\n.hb-col-offset-10 { margin-left: 41.66666667%; }\n.hb-col-offset-11 { margin-left: 45.83333333%; }\n.hb-col-offset-12 { margin-left: 50%; }\n.hb-col-offset-13 { margin-left: 54.16666667%; }\n.hb-col-offset-14 { margin-left: 58.33333333%; }\n.hb-col-offset-15 { margin-left: 62.5%; }\n.hb-col-offset-16 { margin-left: 66.66666667%; }\n.hb-col-offset-17 { margin-left: 70.83333333%; }\n.hb-col-offset-18 { margin-left: 75%; }\n.hb-col-offset-19 { margin-left: 79.16666667%; }\n.hb-col-offset-20 { margin-left: 83.33333333%; }\n.hb-col-offset-21 { margin-left: 87.5%; }\n.hb-col-offset-22 { margin-left: 91.66666667%; }\n.hb-col-offset-23 { margin-left: 95.83333333%; }\n\n/* Push classes */\n.hb-col-push-1 { left: 4.16666667%; }\n.hb-col-push-2 { left: 8.33333333%; }\n.hb-col-push-3 { left: 12.5%; }\n.hb-col-push-4 { left: 16.66666667%; }\n.hb-col-push-5 { left: 20.83333333%; }\n.hb-col-push-6 { left: 25%; }\n.hb-col-push-7 { left: 29.16666667%; }\n.hb-col-push-8 { left: 33.33333333%; }\n.hb-col-push-9 { left: 37.5%; }\n.hb-col-push-10 { left: 41.66666667%; }\n.hb-col-push-11 { left: 45.83333333%; }\n.hb-col-push-12 { left: 50%; }\n\n/* Pull classes */\n.hb-col-pull-1 { right: 4.16666667%; }\n.hb-col-pull-2 { right: 8.33333333%; }\n.hb-col-pull-3 { right: 12.5%; }\n.hb-col-pull-4 { right: 16.66666667%; }\n.hb-col-pull-5 { right: 20.83333333%; }\n.hb-col-pull-6 { right: 25%; }\n.hb-col-pull-7 { right: 29.16666667%; }\n.hb-col-pull-8 { right: 33.33333333%; }\n.hb-col-pull-9 { right: 37.5%; }\n.hb-col-pull-10 { right: 41.66666667%; }\n.hb-col-pull-11 { right: 45.83333333%; }\n.hb-col-pull-12 { right: 50%; }\n\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Layout 布局组件\n * 通过基础的 24 分栏，迅速简便地创建布局\n */\n@Component({\n  tag: 'hb-layout',\n  styleUrl: 'layout.css',\n  shadow: true,\n})\nexport class Layout {\n  /**\n   * 栅格占据的列数\n   * @default 24\n   */\n  @Prop() span: number = 24;\n\n  /**\n   * 栅格左侧的间隔格数\n   * @default 0\n   */\n  @Prop() offset: number = 0;\n\n  /**\n   * 栅格向右移动格数\n   * @default 0\n   */\n  @Prop() push: number = 0;\n\n  /**\n   * 栅格向左移动格数\n   * @default 0\n   */\n  @Prop() pull: number = 0;\n\n  /**\n   * <768px 响应式栅格数或者栅格属性对象\n   */\n  @Prop() xs?: number | object;\n\n  /**\n   * ≥768px 响应式栅格数或者栅格属性对象\n   */\n  @Prop() sm?: number | object;\n\n  /**\n   * ≥992px 响应式栅格数或者栅格属性对象\n   */\n  @Prop() md?: number | object;\n\n  /**\n   * ≥1200px 响应式栅格数或者栅格属性对象\n   */\n  @Prop() lg?: number | object;\n\n  /**\n   * ≥1920px 响应式栅格数或者栅格属性对象\n   */\n  @Prop() xl?: number | object;\n\n  private getColClass() {\n    const classes: string[] = ['hb-col'];\n    \n    if (this.span) {\n      classes.push(`hb-col-${this.span}`);\n    }\n    if (this.offset) {\n      classes.push(`hb-col-offset-${this.offset}`);\n    }\n    if (this.push) {\n      classes.push(`hb-col-push-${this.push}`);\n    }\n    if (this.pull) {\n      classes.push(`hb-col-pull-${this.pull}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  render() {\n    return (\n      <div class={this.getColClass()}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n\n"],"version":3}