@nuralyui/tag 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/tag.component.d.ts +0 -2
- package/tag.component.js +0 -2
- package/tag.component.js.map +1 -1
package/package.json
CHANGED
package/tag.component.d.ts
CHANGED
|
@@ -8,8 +8,6 @@ import { TagSize } from './tag.types.js';
|
|
|
8
8
|
declare const NrTagElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* Tag component
|
|
11
|
-
* Inspired by Ant Design Tag: https://ant.design/components/tag
|
|
12
|
-
*
|
|
13
11
|
* Features:
|
|
14
12
|
* - Preset colors and custom color support
|
|
15
13
|
* - Closable tags with onClose event
|
package/tag.component.js
CHANGED
|
@@ -17,8 +17,6 @@ import { styles } from './tag.style.js';
|
|
|
17
17
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
18
18
|
/**
|
|
19
19
|
* Tag component
|
|
20
|
-
* Inspired by Ant Design Tag: https://ant.design/components/tag
|
|
21
|
-
*
|
|
22
20
|
* Features:
|
|
23
21
|
* - Preset colors and custom color support
|
|
24
22
|
* - Closable tags with onClose event
|
package/tag.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.component.js","sourceRoot":"","sources":["../../../src/components/tag/tag.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2025 Nuraly\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './tag.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { TagSize, type TagCheckedChangeDetail } from './tag.types.js';\n\n/**\n * Tag component\n * Inspired by Ant Design Tag: https://ant.design/components/tag\n *\n * Features:\n * - Preset colors and custom color support\n * - Closable tags with onClose event\n * - Checkable tags with checked state and change event\n * - Small size variant\n * - Disabled state\n * - Theme-aware through CSS variables\n *\n * @slot - Tag content\n * @slot icon - Optional leading icon\n * @fires nr-tag-close - when the close icon is clicked\n * @fires nr-tag-checked-change - when a checkable tag toggles\n */\n@customElement('nr-tag')\nexport class NrTagElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Tag color preset or custom color string (hex/rgb) */\n @property({ type: String })\n color?: string;\n\n /** Bordered style */\n @property({ type: Boolean, reflect: true })\n bordered = true;\n\n /** Small size */\n @property({ type: String })\n size: TagSize = TagSize.Default;\n\n /** Closable */\n @property({ type: Boolean })\n closable = false;\n\n /** Checkable */\n @property({ type: Boolean })\n checkable = false;\n\n /** Checked (for checkable) */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /** Disabled */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Internal closing anim state */\n @state() private closing = false;\n\n /** Track if an icon is actually provided via slot */\n private lightDomObserver?: MutationObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Observe light DOM children to detect when an icon slot is added/removed dynamically\n this.lightDomObserver = new MutationObserver(() => {\n // Trigger re-render so we can recompute hasIcon in render()\n this.requestUpdate();\n });\n this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });\n }\n\n override disconnectedCallback(): void {\n this.lightDomObserver?.disconnect();\n this.lightDomObserver = undefined;\n super.disconnectedCallback();\n }\n\n private onCloseClick(e: Event) {\n e.stopPropagation();\n if (!this.closable || this.disabled) return;\n this.closing = true;\n // match CSS animation duration ~200ms\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));\n // Consumers can remove the element on event; keep visible otherwise\n this.closing = false;\n }, 200);\n }\n\n private onToggleChecked() {\n if (!this.checkable || this.disabled) return;\n this.checked = !this.checked;\n this.dispatchEvent(new CustomEvent<TagCheckedChangeDetail>('nr-tag-checked-change', {\n detail: { checked: this.checked },\n bubbles: true,\n composed: true,\n }));\n }\n\n private isPreset(color?: string): boolean {\n if (!color) return false;\n return PRESET_COLOR_SET.has(color as string);\n }\n\n override render() {\n const hasIcon = !!this.querySelector('[slot=\"icon\"]');\n const isCustom = !!this.color && !this.isPreset(this.color as string);\n\n const classes = {\n tag: true,\n 'tag--small': this.size === TagSize.Small,\n 'tag--borderless': !this.bordered,\n 'tag--closable': this.closable,\n 'tag--checkable': this.checkable,\n 'tag--checked': this.checkable && this.checked,\n 'tag--disabled': this.disabled,\n 'tag--closing': this.closing,\n // preset color class e.g., tag--red\n ...(this.color && this.isPreset(this.color as string) ? { [`tag--${this.color}`]: true } : {}),\n // custom color modifier\n 'tag--custom': isCustom,\n };\n\n const styleMap: Record<string, string> = {};\n if (isCustom && this.color) {\n styleMap['--nr-tag-custom-bg'] = this.color as string;\n }\n\n const role = this.checkable ? 'switch' : 'button';\n const ariaPressed: 'true' | 'false' | undefined = this.checkable ? (this.checked ? 'true' : 'false') : undefined;\n\n return html`\n <span\n class=${classMap(classes)}\n style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}\n role=${role}\n aria-pressed=${ifDefined(ariaPressed)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n @click=${this.checkable ? this.onToggleChecked : undefined}\n >\n ${hasIcon ? html`<span class=\"tag__icon\"><slot name=\"icon\"></slot></span>` : nothing}\n <span class=\"tag__content\"><slot></slot></span>\n ${this.closable ? html`\n <button class=\"tag__close\" part=\"close\" aria-label=\"close\" ?disabled=${this.disabled} @click=${this.onCloseClick}>\n ×\n </button>\n ` : nothing}\n </span>\n `;\n }\n}\n\nconst PRESET_COLOR_SET: Set<string> = new Set([\n 'magenta','red','volcano','orange','gold','lime','green','cyan','blue','geekblue','purple'\n]);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-tag': NrTagElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tag.component.js","sourceRoot":"","sources":["../../../src/components/tag/tag.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2025 Nuraly\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './tag.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { TagSize, type TagCheckedChangeDetail } from './tag.types.js';\n\n/**\n * Tag component\n * Features:\n * - Preset colors and custom color support\n * - Closable tags with onClose event\n * - Checkable tags with checked state and change event\n * - Small size variant\n * - Disabled state\n * - Theme-aware through CSS variables\n *\n * @slot - Tag content\n * @slot icon - Optional leading icon\n * @fires nr-tag-close - when the close icon is clicked\n * @fires nr-tag-checked-change - when a checkable tag toggles\n */\n@customElement('nr-tag')\nexport class NrTagElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Tag color preset or custom color string (hex/rgb) */\n @property({ type: String })\n color?: string;\n\n /** Bordered style */\n @property({ type: Boolean, reflect: true })\n bordered = true;\n\n /** Small size */\n @property({ type: String })\n size: TagSize = TagSize.Default;\n\n /** Closable */\n @property({ type: Boolean })\n closable = false;\n\n /** Checkable */\n @property({ type: Boolean })\n checkable = false;\n\n /** Checked (for checkable) */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /** Disabled */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Internal closing anim state */\n @state() private closing = false;\n\n /** Track if an icon is actually provided via slot */\n private lightDomObserver?: MutationObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Observe light DOM children to detect when an icon slot is added/removed dynamically\n this.lightDomObserver = new MutationObserver(() => {\n // Trigger re-render so we can recompute hasIcon in render()\n this.requestUpdate();\n });\n this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });\n }\n\n override disconnectedCallback(): void {\n this.lightDomObserver?.disconnect();\n this.lightDomObserver = undefined;\n super.disconnectedCallback();\n }\n\n private onCloseClick(e: Event) {\n e.stopPropagation();\n if (!this.closable || this.disabled) return;\n this.closing = true;\n // match CSS animation duration ~200ms\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));\n // Consumers can remove the element on event; keep visible otherwise\n this.closing = false;\n }, 200);\n }\n\n private onToggleChecked() {\n if (!this.checkable || this.disabled) return;\n this.checked = !this.checked;\n this.dispatchEvent(new CustomEvent<TagCheckedChangeDetail>('nr-tag-checked-change', {\n detail: { checked: this.checked },\n bubbles: true,\n composed: true,\n }));\n }\n\n private isPreset(color?: string): boolean {\n if (!color) return false;\n return PRESET_COLOR_SET.has(color as string);\n }\n\n override render() {\n const hasIcon = !!this.querySelector('[slot=\"icon\"]');\n const isCustom = !!this.color && !this.isPreset(this.color as string);\n\n const classes = {\n tag: true,\n 'tag--small': this.size === TagSize.Small,\n 'tag--borderless': !this.bordered,\n 'tag--closable': this.closable,\n 'tag--checkable': this.checkable,\n 'tag--checked': this.checkable && this.checked,\n 'tag--disabled': this.disabled,\n 'tag--closing': this.closing,\n // preset color class e.g., tag--red\n ...(this.color && this.isPreset(this.color as string) ? { [`tag--${this.color}`]: true } : {}),\n // custom color modifier\n 'tag--custom': isCustom,\n };\n\n const styleMap: Record<string, string> = {};\n if (isCustom && this.color) {\n styleMap['--nr-tag-custom-bg'] = this.color as string;\n }\n\n const role = this.checkable ? 'switch' : 'button';\n const ariaPressed: 'true' | 'false' | undefined = this.checkable ? (this.checked ? 'true' : 'false') : undefined;\n\n return html`\n <span\n class=${classMap(classes)}\n style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}\n role=${role}\n aria-pressed=${ifDefined(ariaPressed)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n @click=${this.checkable ? this.onToggleChecked : undefined}\n >\n ${hasIcon ? html`<span class=\"tag__icon\"><slot name=\"icon\"></slot></span>` : nothing}\n <span class=\"tag__content\"><slot></slot></span>\n ${this.closable ? html`\n <button class=\"tag__close\" part=\"close\" aria-label=\"close\" ?disabled=${this.disabled} @click=${this.onCloseClick}>\n ×\n </button>\n ` : nothing}\n </span>\n `;\n }\n}\n\nconst PRESET_COLOR_SET: Set<string> = new Set([\n 'magenta','red','volcano','orange','gold','lime','green','cyan','blue','geekblue','purple'\n]);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-tag': NrTagElement;\n }\n}\n"]}
|