@nuralyui/divider 0.0.4 → 0.0.6
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/divider.component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement } from "lit";
|
|
2
2
|
import { DividerType, DividerOrientation, DividerVariant, DividerSize } from "./divider.types.js";
|
|
3
|
-
declare const NrDividerElement_base: (new (...args: any[]) => import("
|
|
3
|
+
declare const NrDividerElement_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;
|
|
4
4
|
/**
|
|
5
5
|
* @element nr-divider
|
|
6
6
|
*
|
package/divider.component.js
CHANGED
|
@@ -8,7 +8,7 @@ import { html, LitElement } from "lit";
|
|
|
8
8
|
import { customElement, property } from "lit/decorators.js";
|
|
9
9
|
import { classMap } from "lit/directives/class-map.js";
|
|
10
10
|
import { styleMap } from "lit/directives/style-map.js";
|
|
11
|
-
import { NuralyUIBaseMixin } from
|
|
11
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
12
12
|
import styles from "./divider.style.js";
|
|
13
13
|
/**
|
|
14
14
|
* @element nr-divider
|
package/divider.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.component.js","sourceRoot":"","sources":["../../../src/components/divider/divider.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"divider.component.js","sourceRoot":"","sources":["../../../src/components/divider/divider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } 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 { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from \"./divider.style.js\";\nimport {\n DividerType,\n DividerOrientation,\n DividerVariant,\n DividerSize\n} from \"./divider.types.js\";\n\n/**\n * @element nr-divider\n * \n * @summary A divider line separates different content.\n * \n * @description\n * The Divider component is used to divide sections of content or inline text.\n * Based on Ant Design Divider component.\n * \n * @prop {DividerType} type - The direction type of divider (horizontal or vertical)\n * @prop {boolean} dashed - Whether line is dashed (deprecated, use variant instead)\n * @prop {DividerVariant} variant - Line style variant (solid, dashed, dotted)\n * @prop {DividerOrientation} orientation - Position of title inside divider (start, center, end)\n * @prop {string | number} orientationMargin - Margin between title and closest border\n * @prop {boolean} plain - Divider text show as plain style\n * @prop {DividerSize} size - Size of divider (only for horizontal: small, middle, large)\n * \n * @slot - The title/text content to display in the divider\n * \n * @cssprop --nuraly-divider-color - Border color\n * @cssprop --nuraly-divider-text-color - Text color\n * @cssprop --nuraly-divider-font-size - Font size for title\n * @cssprop --nuraly-divider-margin - Vertical margin for horizontal divider\n * @cssprop --nuraly-divider-orientation-margin - Margin between text and edge\n * \n * @example\n * ```html\n * <!-- Basic horizontal divider -->\n * <nr-divider></nr-divider>\n * \n * <!-- Divider with text -->\n * <nr-divider>Text</nr-divider>\n * \n * <!-- Vertical divider -->\n * <nr-divider type=\"vertical\"></nr-divider>\n * \n * <!-- Dashed divider with text -->\n * <nr-divider variant=\"dashed\" orientation=\"start\">Left Text</nr-divider>\n * ```\n */\n@customElement('nr-divider')\nexport class NrDividerElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * The direction type of divider\n * @type {DividerType}\n */\n @property({ type: String })\n type: DividerType = DividerType.Horizontal;\n\n /**\n * Whether line is dashed (deprecated, use variant instead)\n * @deprecated Use variant=\"dashed\" instead\n * @type {boolean}\n */\n @property({ type: Boolean })\n dashed = false;\n\n /**\n * Line style variant\n * @type {DividerVariant}\n */\n @property({ type: String })\n variant: DividerVariant = DividerVariant.Solid;\n\n /**\n * Position of title inside divider\n * @type {DividerOrientation}\n */\n @property({ type: String })\n orientation: DividerOrientation = DividerOrientation.Center;\n\n /**\n * Margin between title and closest border\n * Accepts string with units or number (defaults to px)\n * @type {string | number}\n */\n @property({ type: String, attribute: 'orientation-margin' })\n orientationMargin?: string | number;\n\n /**\n * Divider text show as plain style\n * @type {boolean}\n */\n @property({ type: Boolean })\n plain = true;\n\n /**\n * Size of divider (only for horizontal)\n * @type {DividerSize}\n */\n @property({ type: String })\n size?: DividerSize;\n\n /**\n * Check if divider has text content\n */\n private get hasText(): boolean {\n const slot = this.shadowRoot?.querySelector('slot');\n const nodes = slot?.assignedNodes({ flatten: true }) || [];\n return nodes.some(node => \n node.nodeType === Node.TEXT_NODE && node.textContent?.trim() ||\n node.nodeType === Node.ELEMENT_NODE\n );\n }\n\n override render() {\n // Support deprecated dashed prop\n const effectiveVariant = this.dashed ? DividerVariant.Dashed : this.variant;\n \n const isHorizontal = this.type === DividerType.Horizontal;\n const isVertical = this.type === DividerType.Vertical;\n\n const classes = {\n 'divider': true,\n 'divider--horizontal': isHorizontal,\n 'divider--vertical': isVertical,\n 'divider--with-text': isHorizontal && this.hasText,\n 'divider--plain': this.plain,\n [`divider--${effectiveVariant}`]: true,\n [`divider--${this.orientation}`]: isHorizontal && this.hasText,\n [`divider--${this.size}`]: isHorizontal && !!this.size\n };\n\n // Calculate orientation margin style\n const orientationMarginStyle: Record<string, string> = {};\n if (this.orientationMargin !== undefined && isHorizontal && this.hasText) {\n const marginValue = typeof this.orientationMargin === 'number' \n ? `${this.orientationMargin}px` \n : this.orientationMargin;\n \n if (this.orientation === DividerOrientation.Start) {\n orientationMarginStyle['--nuraly-divider-orientation-margin-left'] = marginValue;\n } else if (this.orientation === DividerOrientation.End) {\n orientationMarginStyle['--nuraly-divider-orientation-margin-right'] = marginValue;\n }\n }\n\n // Vertical divider (no text support)\n if (isVertical) {\n return html`<div class=${classMap(classes)}></div>`;\n }\n\n // Horizontal divider without text\n if (!this.hasText) {\n return html`<div class=${classMap(classes)}></div>`;\n }\n\n // Horizontal divider with text\n return html`\n <div class=${classMap(classes)} style=${styleMap(orientationMarginStyle)}>\n <span class=\"divider__text\">\n <slot></slot>\n </span>\n </div>\n `;\n }\n}"]}
|