@nuralyui/badge 0.0.1 → 0.0.2
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/badge.component.d.ts +1 -1
- package/badge.component.js +1 -1
- package/badge.component.js.map +1 -1
- package/badge.style.d.ts +0 -0
- package/badge.style.js +0 -0
- package/badge.style.js.map +0 -0
- package/badge.types.d.ts +0 -0
- package/badge.types.js +0 -0
- package/badge.types.js.map +0 -0
- package/index.d.ts +0 -0
- package/index.js +0 -0
- package/index.js.map +0 -0
- package/package.json +4 -4
- package/react.d.ts +0 -0
- package/react.js +0 -0
- package/react.js.map +0 -0
package/badge.component.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement, TemplateResult } from 'lit';
|
|
7
7
|
import { BadgeStatus, BadgeSize, BadgeColor, RibbonPlacement } from './badge.types.js';
|
|
8
|
-
declare const NrBadgeElement_base: (new (...args: any[]) => import("
|
|
8
|
+
declare const NrBadgeElement_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
|
* # Badge Component
|
|
11
11
|
*
|
package/badge.component.js
CHANGED
|
@@ -14,7 +14,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
14
14
|
import { classMap } from 'lit/directives/class-map.js';
|
|
15
15
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
16
16
|
import { styles } from './badge.style.js';
|
|
17
|
-
import { NuralyUIBaseMixin } from '
|
|
17
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
18
18
|
/**
|
|
19
19
|
* # Badge Component
|
|
20
20
|
*
|
package/badge.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './badge.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n BadgeStatus,\n BadgeSize,\n BadgeColor,\n RibbonPlacement\n} from './badge.types.js';\n\n/**\n * # Badge Component\n * \n * Small numerical value or status descriptor for UI elements.\n * Badge normally appears in proximity to notifications or user avatars with\n * eye-catching appeal, typically displaying unread messages count.\n * \n * ## Features\n * - Count badge with overflow support\n * - Dot badge for simple indicators\n * - Status badge with predefined states\n * - Ribbon badge for decorative labels\n * - Customizable colors (preset and custom)\n * - Offset positioning\n * - Show zero option\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic count badge -->\n * <nr-badge count=\"5\">\n * <button>Notifications</button>\n * </nr-badge>\n * \n * <!-- Dot badge -->\n * <nr-badge dot>\n * <nr-icon name=\"notification\"></nr-icon>\n * </nr-badge>\n * \n * <!-- Status badge -->\n * <nr-badge status=\"success\" text=\"Success\"></nr-badge>\n * \n * <!-- Ribbon badge -->\n * <nr-badge ribbon=\"Recommended\">\n * <div class=\"card\">Card content</div>\n * </nr-badge>\n * \n * <!-- Standalone badge -->\n * <nr-badge count=\"25\"></nr-badge>\n * ```\n * \n * @element nr-badge\n * \n * @slot - Content to wrap with badge (avatar, icon, etc.)\n * \n * @cssproperty --nuraly-badge-text-font-size - Font size of badge text\n * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text\n * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator\n * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge\n * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge\n * @cssproperty --nuraly-badge-dot-size - Size of dot badge\n * @cssproperty --nuraly-badge-status-size - Size of status indicator\n */\n@customElement('nr-badge')\nexport class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Number to show in badge\n */\n @property({ type: Number })\n count?: number;\n\n /**\n * Whether to display a dot instead of count\n */\n @property({ type: Boolean })\n dot = false;\n\n /**\n * Max count to show (shows count+ when exceeded)\n */\n @property({ type: Number, attribute: 'overflow-count' })\n overflowCount = 99;\n\n /**\n * Whether to show badge when count is zero\n */\n @property({ type: Boolean, attribute: 'show-zero' })\n showZero = false;\n\n /**\n * Set offset of the badge dot [x, y]\n */\n @property({ type: Array })\n offset?: [number, number];\n\n /**\n * Badge color (preset or custom hex/rgb)\n */\n @property({ type: String })\n color?: BadgeColor | string;\n\n /**\n * Badge size\n */\n @property({ type: String })\n size: BadgeSize = BadgeSize.Default;\n\n /**\n * Set Badge as a status dot\n */\n @property({ type: String })\n status?: BadgeStatus;\n\n /**\n * Status text to display\n */\n @property({ type: String })\n text?: string;\n\n /**\n * Title to show on hover\n */\n @property({ type: String })\n badgeTitle?: string;\n\n /**\n * Ribbon text (enables ribbon mode)\n */\n @property({ type: String })\n ribbon?: string;\n\n /**\n * Ribbon placement\n */\n @property({ type: String, attribute: 'ribbon-placement' })\n ribbonPlacement: RibbonPlacement = RibbonPlacement.End;\n\n /**\n * Get the display count text\n */\n private getDisplayCount(): string {\n if (this.count === undefined) return '';\n \n const count = Number(this.count);\n if (count > this.overflowCount) {\n return `${this.overflowCount}+`;\n }\n return String(count);\n }\n\n /**\n * Check if badge should be hidden\n */\n private shouldHideBadge(): boolean {\n if (this.dot) return false;\n if (this.count === undefined) return true;\n if (this.count === 0 && !this.showZero) return true;\n return false;\n }\n\n /**\n * Get custom color style\n */\n private getCustomColorStyle(): Record<string, string> {\n if (!this.color) return {};\n \n // Preset colors are handled via CSS classes\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isCustomColor = !presetColors.includes(this.color);\n \n if (isCustomColor) {\n return {\n backgroundColor: this.color,\n color: '#fff'\n };\n }\n \n return {};\n }\n\n /**\n * Get offset style\n */\n private getOffsetStyle(): Record<string, string> {\n if (!this.offset) return {};\n \n const [x, y] = this.offset;\n return {\n right: `calc(0px - ${x}px)`,\n top: `${y}px`,\n };\n }\n\n /**\n * Render status badge\n */\n private renderStatusBadge(): TemplateResult {\n return html`\n <span class=\"badge-status\">\n <span class=\"badge-status-dot ${this.status}\"></span>\n ${this.text ? html`<span class=\"badge-status-text\">${this.text}</span>` : nothing}\n </span>\n `;\n }\n\n /**\n * Render ribbon badge\n */\n private renderRibbonBadge(): TemplateResult {\n const ribbonClasses = {\n 'badge-ribbon': true,\n [this.ribbonPlacement]: true,\n [this.color || '']: !!this.color,\n };\n\n const ribbonStyle = this.getCustomColorStyle();\n\n return html`\n <div class=\"badge-ribbon-wrapper\">\n <slot></slot>\n <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>\n ${this.ribbon}\n </div>\n </div>\n `;\n }\n\n /**\n * Render count/dot badge\n */\n private renderCountBadge(): TemplateResult {\n const hasChildren = this.querySelector(':not([slot])') !== null;\n const isStandalone = !hasChildren;\n const isHidden = this.shouldHideBadge();\n\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isPresetColor = this.color && presetColors.includes(this.color);\n\n const indicatorClasses = {\n 'badge-indicator': true,\n 'badge-standalone': isStandalone,\n 'badge-hidden': isHidden,\n 'dot': this.dot,\n 'small': this.size === BadgeSize.Small,\n ...(this.color && isPresetColor ? { [this.color]: true } : {}),\n };\n\n const indicatorStyle = {\n ...this.getCustomColorStyle(),\n ...this.getOffsetStyle(),\n };\n\n const badgeContent = this.dot ? nothing : this.getDisplayCount();\n\n if (isStandalone) {\n return html`\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n `;\n }\n\n return html`\n <span class=\"badge-wrapper\">\n <slot></slot>\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n </span>\n `;\n }\n\n override render() {\n // Ribbon mode\n if (this.ribbon) {\n return this.renderRibbonBadge();\n }\n\n // Status mode\n if (this.status) {\n return this.renderStatusBadge();\n }\n\n // Count/Dot mode\n return this.renderCountBadge();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-badge': NrBadgeElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './badge.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n BadgeStatus,\n BadgeSize,\n BadgeColor,\n RibbonPlacement\n} from './badge.types.js';\n\n/**\n * # Badge Component\n * \n * Small numerical value or status descriptor for UI elements.\n * Badge normally appears in proximity to notifications or user avatars with\n * eye-catching appeal, typically displaying unread messages count.\n * \n * ## Features\n * - Count badge with overflow support\n * - Dot badge for simple indicators\n * - Status badge with predefined states\n * - Ribbon badge for decorative labels\n * - Customizable colors (preset and custom)\n * - Offset positioning\n * - Show zero option\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic count badge -->\n * <nr-badge count=\"5\">\n * <button>Notifications</button>\n * </nr-badge>\n * \n * <!-- Dot badge -->\n * <nr-badge dot>\n * <nr-icon name=\"notification\"></nr-icon>\n * </nr-badge>\n * \n * <!-- Status badge -->\n * <nr-badge status=\"success\" text=\"Success\"></nr-badge>\n * \n * <!-- Ribbon badge -->\n * <nr-badge ribbon=\"Recommended\">\n * <div class=\"card\">Card content</div>\n * </nr-badge>\n * \n * <!-- Standalone badge -->\n * <nr-badge count=\"25\"></nr-badge>\n * ```\n * \n * @element nr-badge\n * \n * @slot - Content to wrap with badge (avatar, icon, etc.)\n * \n * @cssproperty --nuraly-badge-text-font-size - Font size of badge text\n * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text\n * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator\n * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge\n * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge\n * @cssproperty --nuraly-badge-dot-size - Size of dot badge\n * @cssproperty --nuraly-badge-status-size - Size of status indicator\n */\n@customElement('nr-badge')\nexport class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Number to show in badge\n */\n @property({ type: Number })\n count?: number;\n\n /**\n * Whether to display a dot instead of count\n */\n @property({ type: Boolean })\n dot = false;\n\n /**\n * Max count to show (shows count+ when exceeded)\n */\n @property({ type: Number, attribute: 'overflow-count' })\n overflowCount = 99;\n\n /**\n * Whether to show badge when count is zero\n */\n @property({ type: Boolean, attribute: 'show-zero' })\n showZero = false;\n\n /**\n * Set offset of the badge dot [x, y]\n */\n @property({ type: Array })\n offset?: [number, number];\n\n /**\n * Badge color (preset or custom hex/rgb)\n */\n @property({ type: String })\n color?: BadgeColor | string;\n\n /**\n * Badge size\n */\n @property({ type: String })\n size: BadgeSize = BadgeSize.Default;\n\n /**\n * Set Badge as a status dot\n */\n @property({ type: String })\n status?: BadgeStatus;\n\n /**\n * Status text to display\n */\n @property({ type: String })\n text?: string;\n\n /**\n * Title to show on hover\n */\n @property({ type: String })\n badgeTitle?: string;\n\n /**\n * Ribbon text (enables ribbon mode)\n */\n @property({ type: String })\n ribbon?: string;\n\n /**\n * Ribbon placement\n */\n @property({ type: String, attribute: 'ribbon-placement' })\n ribbonPlacement: RibbonPlacement = RibbonPlacement.End;\n\n /**\n * Get the display count text\n */\n private getDisplayCount(): string {\n if (this.count === undefined) return '';\n \n const count = Number(this.count);\n if (count > this.overflowCount) {\n return `${this.overflowCount}+`;\n }\n return String(count);\n }\n\n /**\n * Check if badge should be hidden\n */\n private shouldHideBadge(): boolean {\n if (this.dot) return false;\n if (this.count === undefined) return true;\n if (this.count === 0 && !this.showZero) return true;\n return false;\n }\n\n /**\n * Get custom color style\n */\n private getCustomColorStyle(): Record<string, string> {\n if (!this.color) return {};\n \n // Preset colors are handled via CSS classes\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isCustomColor = !presetColors.includes(this.color);\n \n if (isCustomColor) {\n return {\n backgroundColor: this.color,\n color: '#fff'\n };\n }\n \n return {};\n }\n\n /**\n * Get offset style\n */\n private getOffsetStyle(): Record<string, string> {\n if (!this.offset) return {};\n \n const [x, y] = this.offset;\n return {\n right: `calc(0px - ${x}px)`,\n top: `${y}px`,\n };\n }\n\n /**\n * Render status badge\n */\n private renderStatusBadge(): TemplateResult {\n return html`\n <span class=\"badge-status\">\n <span class=\"badge-status-dot ${this.status}\"></span>\n ${this.text ? html`<span class=\"badge-status-text\">${this.text}</span>` : nothing}\n </span>\n `;\n }\n\n /**\n * Render ribbon badge\n */\n private renderRibbonBadge(): TemplateResult {\n const ribbonClasses = {\n 'badge-ribbon': true,\n [this.ribbonPlacement]: true,\n [this.color || '']: !!this.color,\n };\n\n const ribbonStyle = this.getCustomColorStyle();\n\n return html`\n <div class=\"badge-ribbon-wrapper\">\n <slot></slot>\n <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>\n ${this.ribbon}\n </div>\n </div>\n `;\n }\n\n /**\n * Render count/dot badge\n */\n private renderCountBadge(): TemplateResult {\n const hasChildren = this.querySelector(':not([slot])') !== null;\n const isStandalone = !hasChildren;\n const isHidden = this.shouldHideBadge();\n\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isPresetColor = this.color && presetColors.includes(this.color);\n\n const indicatorClasses = {\n 'badge-indicator': true,\n 'badge-standalone': isStandalone,\n 'badge-hidden': isHidden,\n 'dot': this.dot,\n 'small': this.size === BadgeSize.Small,\n ...(this.color && isPresetColor ? { [this.color]: true } : {}),\n };\n\n const indicatorStyle = {\n ...this.getCustomColorStyle(),\n ...this.getOffsetStyle(),\n };\n\n const badgeContent = this.dot ? nothing : this.getDisplayCount();\n\n if (isStandalone) {\n return html`\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n `;\n }\n\n return html`\n <span class=\"badge-wrapper\">\n <slot></slot>\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n </span>\n `;\n }\n\n override render() {\n // Ribbon mode\n if (this.ribbon) {\n return this.renderRibbonBadge();\n }\n\n // Status mode\n if (this.status) {\n return this.renderStatusBadge();\n }\n\n // Count/Dot mode\n return this.renderCountBadge();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-badge': NrBadgeElement;\n }\n}\n"]}
|
package/badge.style.d.ts
CHANGED
|
File without changes
|
package/badge.style.js
CHANGED
|
File without changes
|
package/badge.style.js.map
CHANGED
|
File without changes
|
package/badge.types.d.ts
CHANGED
|
File without changes
|
package/badge.types.js
CHANGED
|
File without changes
|
package/badge.types.js.map
CHANGED
|
File without changes
|
package/index.d.ts
CHANGED
|
File without changes
|
package/index.js
CHANGED
|
File without changes
|
package/index.js.map
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/badge",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Badge component for NuralyUI library",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"repository": {
|
|
26
26
|
"type": "git",
|
|
27
|
-
"url": "https://github.com/
|
|
27
|
+
"url": "https://github.com/Nuralyio/NuralyUI.git",
|
|
28
28
|
"directory": "src/components/badge"
|
|
29
29
|
},
|
|
30
30
|
"keywords": [
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"author": "Nuraly, Laabidi Aymen",
|
|
43
43
|
"license": "MIT",
|
|
44
44
|
"bugs": {
|
|
45
|
-
"url": "https://github.com/
|
|
45
|
+
"url": "https://github.com/Nuralyio/NuralyUI/issues"
|
|
46
46
|
},
|
|
47
|
-
"homepage": "https://github.com/
|
|
47
|
+
"homepage": "https://github.com/Nuralyio/NuralyUI#readme"
|
|
48
48
|
}
|
package/react.d.ts
CHANGED
|
File without changes
|
package/react.js
CHANGED
|
File without changes
|
package/react.js.map
CHANGED
|
File without changes
|