@nuralyui/skeleton 0.0.5 → 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/bundle.js +2 -2
- package/bundle.js.gz +0 -0
- package/index.d.ts.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.d.ts.map +1 -1
- package/react.js.map +1 -1
- package/skeleton.component.d.ts +1 -1
- package/skeleton.component.d.ts.map +1 -1
- package/skeleton.component.js.map +1 -1
- package/skeleton.style.d.ts.map +1 -1
- package/skeleton.style.js.map +1 -1
- package/skeleton.types.d.ts.map +1 -1
- package/skeleton.types.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -234,11 +234,11 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
|
|
|
234
234
|
style=${r(e)}></div>
|
|
235
235
|
`}renderParagraph(){const t="object"==typeof this.paragraph?this.paragraph:this.paragraphConfig,e=t.rows||3,a=t.width;return o`
|
|
236
236
|
<div class="skeleton-paragraph">
|
|
237
|
-
${Array.from({length:e},(
|
|
237
|
+
${Array.from({length:e},(t,n)=>o`
|
|
238
238
|
<div
|
|
239
239
|
class=${i({"skeleton-paragraph-line":!0,"skeleton-paragraph-line--round":this.round})}
|
|
240
240
|
style=${r((t=>{if(Array.isArray(a)){const e=a[t];return e?{width:"number"==typeof e?`${e}px`:e}:{}}return t===e-1?a?{width:"number"==typeof a?`${a}px`:a}:{width:"61%"}:{}})(n))}></div>
|
|
241
|
-
`)
|
|
241
|
+
`)}
|
|
242
242
|
</div>
|
|
243
243
|
`}renderButton(){const t=this.buttonConfig,e=t.shape||this.shape,a=t.size||this.size,n=void 0!==t.block?t.block:this.block;return o`
|
|
244
244
|
<div
|
package/bundle.js.gz
CHANGED
|
Binary file
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC"}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './skeleton.component.js';\nexport * from './skeleton.types.js';\n"]}
|
package/package.json
CHANGED
package/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,UAAU,oEAKrB,CAAC"}
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/skeleton/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrSkeletonElement } from './skeleton.component.js';\n\nexport const NrSkeleton = createComponent({\n tagName: 'nr-skeleton',\n elementClass: NrSkeletonElement,\n react: React,\n events: {},\n});\n"]}
|
package/skeleton.component.d.ts
CHANGED
|
@@ -154,7 +154,7 @@ export declare class NrSkeletonElement extends NrSkeletonElement_base {
|
|
|
154
154
|
* Render full skeleton
|
|
155
155
|
*/
|
|
156
156
|
private renderSkeleton;
|
|
157
|
-
render(): import("lit").TemplateResult<1>;
|
|
157
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
158
158
|
}
|
|
159
159
|
declare global {
|
|
160
160
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.component.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"skeleton.component.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EACH,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACtB,MAAM,qBAAqB,CAAC;;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,iBAAkB,SAAQ,sBAA6B;IAClE,OAAgB,MAAM,0BAAU;IAEhC;;OAEG;IAC0B,MAAM,UAAS;IAE5C;;OAEG;IAC0B,MAAM,UAAS;IAE5C;;OAEG;IACqD,YAAY,EAAE,oBAAoB,CAAM;IAEhG;;OAEG;IAC0B,OAAO,UAAQ;IAE5C;;OAEG;IAC0B,SAAS,UAAQ;IAE9C;;OAEG;IACwD,eAAe,EAAE,uBAAuB,CAAM;IAEzG;;OAEG;IAC0B,KAAK,UAAS;IAE3C;;OAEG;IACmD,SAAS,UAAQ;IAEvE;;OAEG;IACoD,WAAW,EAAE,mBAAmB,CAAM;IAE7F;;OAEG;IACyB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAE1D;;OAEG;IACqD,YAAY,EAAE,oBAAoB,CAAM;IAEhG;;OAEG;IACoD,WAAW,EAAE,mBAAmB,CAAM;IAE7F;;OAEG;IACoD,WAAW,EAAE,mBAAmB,CAAM;IAE7F;;OAEG;IAC0B,KAAK,UAAS;IAE3C;;OAEG;IACyB,KAAK,EAAE,aAAa,CAAyB;IAEzE;;OAEG;IACyB,IAAI,EAAE,YAAY,CAAwB;IAEtE;;OAEG;IACH,OAAO,CAAC,YAAY;IAmBpB;;OAEG;IACH,OAAO,CAAC,WAAW;IAenB;;OAEG;IACH,OAAO,CAAC,eAAe;IAoCvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAiBpB;;OAEG;IACH,OAAO,CAAC,WAAW;IAenB;;OAEG;IACH,OAAO,CAAC,WAAW;IAiBnB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAe/B;;OAEG;IACH,OAAO,CAAC,cAAc;IAiDb,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.component.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.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 } 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 './skeleton.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n SkeletonShape,\n SkeletonSize,\n SkeletonElementType,\n SkeletonAvatarConfig,\n SkeletonTitleConfig,\n SkeletonParagraphConfig,\n SkeletonButtonConfig,\n SkeletonInputConfig,\n SkeletonImageConfig,\n} from './skeleton.types.js';\n\n/**\n * # Skeleton Component\n *\n * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.\n * Improves perceived performance and user experience during data fetching.\n *\n * ## Features\n * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)\n * - Active animation effect\n * - Customizable shapes (circle, square, round)\n * - Configurable sizes (small, default, large)\n * - Loading state management\n * - Theme-aware styling\n * - Flexible configuration options\n *\n * ## Usage\n * ```html\n * <!-- Basic skeleton -->\n * <nr-skeleton></nr-skeleton>\n *\n * <!-- With active animation -->\n * <nr-skeleton active></nr-skeleton>\n *\n * <!-- Complex skeleton with avatar -->\n * <nr-skeleton avatar active></nr-skeleton>\n *\n * <!-- Loading state with content -->\n * <nr-skeleton loading>\n * <div slot=\"content\">\n * <h3>Article Title</h3>\n * <p>Article content goes here...</p>\n * </div>\n * </nr-skeleton>\n *\n * <!-- Skeleton button -->\n * <nr-skeleton element=\"button\" active></nr-skeleton>\n *\n * <!-- Skeleton input -->\n * <nr-skeleton element=\"input\" block></nr-skeleton>\n * ```\n *\n * @element nr-skeleton\n *\n * @slot content - Content to show when loading is false\n *\n * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements\n * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient\n * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient\n * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon\n */\n@customElement('nr-skeleton')\nexport class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Show animation effect\n */\n @property({ type: Boolean }) active = false;\n\n /**\n * Show avatar placeholder\n */\n @property({ type: Boolean }) avatar = false;\n\n /**\n * Avatar configuration\n */\n @property({ type: Object, attribute: 'avatar-config' }) avatarConfig: SkeletonAvatarConfig = {};\n\n /**\n * Display the skeleton when true\n */\n @property({ type: Boolean }) loading = true;\n\n /**\n * Show paragraph placeholder\n */\n @property({ type: Boolean }) paragraph = true;\n\n /**\n * Paragraph configuration\n */\n @property({ type: Object, attribute: 'paragraph-config' }) paragraphConfig: SkeletonParagraphConfig = {};\n\n /**\n * Show paragraph and title radius when true\n */\n @property({ type: Boolean }) round = false;\n\n /**\n * Show title placeholder\n */\n @property({ type: Boolean, attribute: 'show-title' }) showTitle = true;\n\n /**\n * Title configuration\n */\n @property({ type: Object, attribute: 'title-config' }) titleConfig: SkeletonTitleConfig = {};\n\n /**\n * Element type for standalone skeleton elements\n */\n @property({ type: String }) element?: SkeletonElementType;\n\n /**\n * Button configuration\n */\n @property({ type: Object, attribute: 'button-config' }) buttonConfig: SkeletonButtonConfig = {};\n\n /**\n * Input configuration\n */\n @property({ type: Object, attribute: 'input-config' }) inputConfig: SkeletonInputConfig = {};\n\n /**\n * Image configuration\n */\n @property({ type: Object, attribute: 'image-config' }) imageConfig: SkeletonImageConfig = {};\n\n /**\n * Block style for button/input\n */\n @property({ type: Boolean }) block = false;\n\n /**\n * Shape for standalone elements\n */\n @property({ type: String }) shape: SkeletonShape = SkeletonShape.Default;\n\n /**\n * Size for standalone elements\n */\n @property({ type: String }) size: SkeletonSize = SkeletonSize.Default;\n\n /**\n * Render avatar skeleton\n */\n private renderAvatar() {\n const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;\n const shape = config.shape || SkeletonShape.Circle;\n const size = config.size || SkeletonSize.Default;\n \n const sizeClass = typeof size === 'number' ? '' : size;\n const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};\n\n return html`\n <div\n class=${classMap({\n 'skeleton-avatar': true,\n [`skeleton-avatar--${shape}`]: true,\n [`skeleton-avatar--${sizeClass}`]: !!sizeClass,\n })}\n style=${styleMap(customSize)}></div>\n `;\n }\n\n /**\n * Render title skeleton\n */\n private renderTitle() {\n const config = typeof this.showTitle === 'object' ? this.showTitle as any : this.titleConfig;\n const width = config.width;\n const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };\n\n return html`\n <div\n class=${classMap({\n 'skeleton-title': true,\n 'skeleton-title--round': this.round,\n })}\n style=${styleMap(customWidth)}></div>\n `;\n }\n\n /**\n * Render paragraph skeleton\n */\n private renderParagraph() {\n const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;\n const rows = config.rows || 3;\n const widthConfig = config.width;\n\n const getLineWidth = (index: number): Record<string, string> => {\n if (Array.isArray(widthConfig)) {\n const width = widthConfig[index];\n return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};\n }\n \n // Last line uses custom width or 61%\n if (index === rows - 1) {\n if (widthConfig) {\n return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };\n }\n return { width: '61%' };\n }\n \n return {};\n };\n\n return html`\n <div class=\"skeleton-paragraph\">\n ${Array.from({ length: rows }, (_, i) => html`\n <div\n class=${classMap({\n 'skeleton-paragraph-line': true,\n 'skeleton-paragraph-line--round': this.round,\n })}\n style=${styleMap(getLineWidth(i))}></div>\n `)}\n </div>\n `;\n }\n\n /**\n * Render button skeleton\n */\n private renderButton() {\n const config = this.buttonConfig;\n const buttonShape = config.shape || this.shape;\n const buttonSize = config.size || this.size;\n const buttonBlock = config.block !== undefined ? config.block : this.block;\n\n return html`\n <div\n class=${classMap({\n 'skeleton-button': true,\n [`skeleton-button--${buttonShape}`]: true,\n [`skeleton-button--${buttonSize}`]: true,\n 'skeleton-button--block': buttonBlock,\n })}></div>\n `;\n }\n\n /**\n * Render input skeleton\n */\n private renderInput() {\n const config = this.inputConfig;\n const inputSize = config.size || this.size;\n const inputBlock = config.block !== undefined ? config.block : this.block;\n\n return html`\n <div\n class=${classMap({\n 'skeleton-input': true,\n [`skeleton-input--${inputSize}`]: true,\n 'skeleton-input--block': inputBlock,\n })}></div>\n `;\n }\n\n /**\n * Render image skeleton\n */\n private renderImage() {\n return html`\n <div class=\"skeleton-image\">\n <svg\n class=\"skeleton-image-icon\"\n viewBox=\"0 0 1024 1024\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\">\n <path\n d=\"M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z\"\n fill=\"currentColor\" />\n </svg>\n </div>\n `;\n }\n\n /**\n * Render standalone element\n */\n private renderStandaloneElement() {\n switch (this.element) {\n case SkeletonElementType.Button:\n return this.renderButton();\n case SkeletonElementType.Input:\n return this.renderInput();\n case SkeletonElementType.Image:\n return this.renderImage();\n case SkeletonElementType.Avatar:\n return this.renderAvatar();\n default:\n return html``;\n }\n }\n\n /**\n * Render full skeleton\n */\n private renderSkeleton() {\n // If element type is specified, render standalone element\n if (this.element) {\n return html`\n <div\n class=${classMap({\n 'skeleton': true,\n 'skeleton--active': this.active || (this.element === SkeletonElementType.Avatar && !!this.avatarConfig.active),\n })}>\n ${this.renderStandaloneElement()}\n </div>\n `;\n }\n\n // Render full skeleton layout\n return html`\n <div\n class=${classMap({\n 'skeleton': true,\n 'skeleton--active': this.active,\n })}>\n ${this.avatar || this.showTitle || this.paragraph\n ? html`\n ${this.avatar\n ? html`\n <div class=\"skeleton-header\">\n ${this.renderAvatar()}\n ${this.showTitle || this.paragraph\n ? html`\n <div class=\"skeleton-content\">\n ${this.showTitle ? this.renderTitle() : ''}\n ${this.paragraph ? this.renderParagraph() : ''}\n </div>\n `\n : ''}\n </div>\n `\n : html`\n <div class=\"skeleton-content\">\n ${this.showTitle ? this.renderTitle() : ''}\n ${this.paragraph ? this.renderParagraph() : ''}\n </div>\n `}\n `\n : ''}\n </div>\n `;\n }\n\n override render() {\n // If loading is false, show slotted content\n if (!this.loading) {\n return html`\n <div class=\"skeleton-wrapper\">\n <slot name=\"content\"><slot></slot></slot>\n </div>\n `;\n }\n\n // Show skeleton\n return this.renderSkeleton();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-skeleton': NrSkeletonElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"skeleton.component.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.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 } 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 './skeleton.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n SkeletonShape,\n SkeletonSize,\n SkeletonElementType,\n SkeletonAvatarConfig,\n SkeletonTitleConfig,\n SkeletonParagraphConfig,\n SkeletonButtonConfig,\n SkeletonInputConfig,\n SkeletonImageConfig,\n} from './skeleton.types.js';\n\n/**\n * # Skeleton Component\n *\n * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.\n * Improves perceived performance and user experience during data fetching.\n *\n * ## Features\n * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)\n * - Active animation effect\n * - Customizable shapes (circle, square, round)\n * - Configurable sizes (small, default, large)\n * - Loading state management\n * - Theme-aware styling\n * - Flexible configuration options\n *\n * ## Usage\n * ```html\n * <!-- Basic skeleton -->\n * <nr-skeleton></nr-skeleton>\n *\n * <!-- With active animation -->\n * <nr-skeleton active></nr-skeleton>\n *\n * <!-- Complex skeleton with avatar -->\n * <nr-skeleton avatar active></nr-skeleton>\n *\n * <!-- Loading state with content -->\n * <nr-skeleton loading>\n * <div slot=\"content\">\n * <h3>Article Title</h3>\n * <p>Article content goes here...</p>\n * </div>\n * </nr-skeleton>\n *\n * <!-- Skeleton button -->\n * <nr-skeleton element=\"button\" active></nr-skeleton>\n *\n * <!-- Skeleton input -->\n * <nr-skeleton element=\"input\" block></nr-skeleton>\n * ```\n *\n * @element nr-skeleton\n *\n * @slot content - Content to show when loading is false\n *\n * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements\n * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient\n * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient\n * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon\n */\n@customElement('nr-skeleton')\nexport class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Show animation effect\n */\n @property({ type: Boolean }) active = false;\n\n /**\n * Show avatar placeholder\n */\n @property({ type: Boolean }) avatar = false;\n\n /**\n * Avatar configuration\n */\n @property({ type: Object, attribute: 'avatar-config' }) avatarConfig: SkeletonAvatarConfig = {};\n\n /**\n * Display the skeleton when true\n */\n @property({ type: Boolean }) loading = true;\n\n /**\n * Show paragraph placeholder\n */\n @property({ type: Boolean }) paragraph = true;\n\n /**\n * Paragraph configuration\n */\n @property({ type: Object, attribute: 'paragraph-config' }) paragraphConfig: SkeletonParagraphConfig = {};\n\n /**\n * Show paragraph and title radius when true\n */\n @property({ type: Boolean }) round = false;\n\n /**\n * Show title placeholder\n */\n @property({ type: Boolean, attribute: 'show-title' }) showTitle = true;\n\n /**\n * Title configuration\n */\n @property({ type: Object, attribute: 'title-config' }) titleConfig: SkeletonTitleConfig = {};\n\n /**\n * Element type for standalone skeleton elements\n */\n @property({ type: String }) element?: SkeletonElementType;\n\n /**\n * Button configuration\n */\n @property({ type: Object, attribute: 'button-config' }) buttonConfig: SkeletonButtonConfig = {};\n\n /**\n * Input configuration\n */\n @property({ type: Object, attribute: 'input-config' }) inputConfig: SkeletonInputConfig = {};\n\n /**\n * Image configuration\n */\n @property({ type: Object, attribute: 'image-config' }) imageConfig: SkeletonImageConfig = {};\n\n /**\n * Block style for button/input\n */\n @property({ type: Boolean }) block = false;\n\n /**\n * Shape for standalone elements\n */\n @property({ type: String }) shape: SkeletonShape = SkeletonShape.Default;\n\n /**\n * Size for standalone elements\n */\n @property({ type: String }) size: SkeletonSize = SkeletonSize.Default;\n\n /**\n * Render avatar skeleton\n */\n private renderAvatar() {\n const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;\n const shape = config.shape || SkeletonShape.Circle;\n const size = config.size || SkeletonSize.Default;\n \n const sizeClass = typeof size === 'number' ? '' : size;\n const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};\n\n return html`\n <div\n class=${classMap({\n 'skeleton-avatar': true,\n [`skeleton-avatar--${shape}`]: true,\n [`skeleton-avatar--${sizeClass}`]: !!sizeClass,\n })}\n style=${styleMap(customSize)}></div>\n `;\n }\n\n /**\n * Render title skeleton\n */\n private renderTitle() {\n const config = typeof this.showTitle === 'object' ? this.showTitle as any : this.titleConfig;\n const width = config.width;\n const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };\n\n return html`\n <div\n class=${classMap({\n 'skeleton-title': true,\n 'skeleton-title--round': this.round,\n })}\n style=${styleMap(customWidth)}></div>\n `;\n }\n\n /**\n * Render paragraph skeleton\n */\n private renderParagraph() {\n const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;\n const rows = config.rows || 3;\n const widthConfig = config.width;\n\n const getLineWidth = (index: number): Record<string, string> => {\n if (Array.isArray(widthConfig)) {\n const width = widthConfig[index];\n return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};\n }\n \n // Last line uses custom width or 61%\n if (index === rows - 1) {\n if (widthConfig) {\n return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };\n }\n return { width: '61%' };\n }\n \n return {};\n };\n\n return html`\n <div class=\"skeleton-paragraph\">\n ${Array.from({ length: rows }, (_, i) => html`\n <div\n class=${classMap({\n 'skeleton-paragraph-line': true,\n 'skeleton-paragraph-line--round': this.round,\n })}\n style=${styleMap(getLineWidth(i))}></div>\n `)}\n </div>\n `;\n }\n\n /**\n * Render button skeleton\n */\n private renderButton() {\n const config = this.buttonConfig;\n const buttonShape = config.shape || this.shape;\n const buttonSize = config.size || this.size;\n const buttonBlock = config.block !== undefined ? config.block : this.block;\n\n return html`\n <div\n class=${classMap({\n 'skeleton-button': true,\n [`skeleton-button--${buttonShape}`]: true,\n [`skeleton-button--${buttonSize}`]: true,\n 'skeleton-button--block': buttonBlock,\n })}></div>\n `;\n }\n\n /**\n * Render input skeleton\n */\n private renderInput() {\n const config = this.inputConfig;\n const inputSize = config.size || this.size;\n const inputBlock = config.block !== undefined ? config.block : this.block;\n\n return html`\n <div\n class=${classMap({\n 'skeleton-input': true,\n [`skeleton-input--${inputSize}`]: true,\n 'skeleton-input--block': inputBlock,\n })}></div>\n `;\n }\n\n /**\n * Render image skeleton\n */\n private renderImage() {\n return html`\n <div class=\"skeleton-image\">\n <svg\n class=\"skeleton-image-icon\"\n viewBox=\"0 0 1024 1024\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\">\n <path\n d=\"M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z\"\n fill=\"currentColor\" />\n </svg>\n </div>\n `;\n }\n\n /**\n * Render standalone element\n */\n private renderStandaloneElement() {\n switch (this.element) {\n case SkeletonElementType.Button:\n return this.renderButton();\n case SkeletonElementType.Input:\n return this.renderInput();\n case SkeletonElementType.Image:\n return this.renderImage();\n case SkeletonElementType.Avatar:\n return this.renderAvatar();\n default:\n return html``;\n }\n }\n\n /**\n * Render full skeleton\n */\n private renderSkeleton() {\n // If element type is specified, render standalone element\n if (this.element) {\n return html`\n <div\n class=${classMap({\n 'skeleton': true,\n 'skeleton--active': this.active || (this.element === SkeletonElementType.Avatar && !!this.avatarConfig.active),\n })}>\n ${this.renderStandaloneElement()}\n </div>\n `;\n }\n\n // Render full skeleton layout\n return html`\n <div\n class=${classMap({\n 'skeleton': true,\n 'skeleton--active': this.active,\n })}>\n ${this.avatar || this.showTitle || this.paragraph\n ? html`\n ${this.avatar\n ? html`\n <div class=\"skeleton-header\">\n ${this.renderAvatar()}\n ${this.showTitle || this.paragraph\n ? html`\n <div class=\"skeleton-content\">\n ${this.showTitle ? this.renderTitle() : ''}\n ${this.paragraph ? this.renderParagraph() : ''}\n </div>\n `\n : ''}\n </div>\n `\n : html`\n <div class=\"skeleton-content\">\n ${this.showTitle ? this.renderTitle() : ''}\n ${this.paragraph ? this.renderParagraph() : ''}\n </div>\n `}\n `\n : ''}\n </div>\n `;\n }\n\n override render() {\n // If loading is false, show slotted content\n if (!this.loading) {\n return html`\n <div class=\"skeleton-wrapper\">\n <slot name=\"content\"><slot></slot></slot>\n </div>\n `;\n }\n\n // Show skeleton\n return this.renderSkeleton();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-skeleton': NrSkeletonElement;\n }\n}\n"]}
|
package/skeleton.style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.style.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"skeleton.style.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6NlB,CAAC"}
|
package/skeleton.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"skeleton.style.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n .skeleton {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .skeleton-header {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .skeleton-content {\n flex: 1;\n }\n\n /* Avatar */\n .skeleton-avatar {\n flex-shrink: 0;\n background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n border-radius: 4px;\n }\n\n .skeleton-avatar--circle {\n border-radius: 50%;\n }\n\n .skeleton-avatar--square {\n border-radius: 4px;\n }\n\n .skeleton-avatar--small {\n width: 32px;\n height: 32px;\n }\n\n .skeleton-avatar--default {\n width: 40px;\n height: 40px;\n }\n\n .skeleton-avatar--large {\n width: 48px;\n height: 48px;\n }\n\n /* Title */\n .skeleton-title {\n height: 16px;\n background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n border-radius: 4px;\n margin-bottom: 12px;\n }\n\n .skeleton-title--round {\n border-radius: 8px;\n }\n\n /* Paragraph */\n .skeleton-paragraph {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .skeleton-paragraph-line {\n height: 16px;\n background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n border-radius: 4px;\n }\n\n .skeleton-paragraph-line--round {\n border-radius: 8px;\n }\n\n /* Button */\n .skeleton-button {\n display: inline-block;\n background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n border-radius: 4px;\n }\n\n .skeleton-button--block {\n display: block;\n width: 100%;\n }\n\n .skeleton-button--circle {\n border-radius: 50%;\n }\n\n .skeleton-button--round {\n border-radius: 16px;\n }\n\n .skeleton-button--square {\n border-radius: 4px;\n }\n\n .skeleton-button--small {\n width: 64px;\n height: 24px;\n }\n\n .skeleton-button--default {\n width: 80px;\n height: 32px;\n }\n\n .skeleton-button--large {\n width: 96px;\n height: 40px;\n }\n\n /* Input */\n .skeleton-input {\n display: block;\n background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n border-radius: 4px;\n }\n\n .skeleton-input--small {\n height: 24px;\n }\n\n .skeleton-input--default {\n height: 32px;\n }\n\n .skeleton-input--large {\n height: 40px;\n }\n\n .skeleton-input--block {\n width: 100%;\n }\n\n /* Image */\n .skeleton-image {\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n border-radius: 4px;\n width: 100%;\n height: 200px;\n }\n\n .skeleton-image-icon {\n font-size: 48px;\n color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));\n }\n\n /* Active animation */\n @keyframes skeleton-loading {\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0 50%;\n }\n }\n\n .skeleton--active .skeleton-avatar,\n .skeleton--active .skeleton-title,\n .skeleton--active .skeleton-paragraph-line,\n .skeleton--active .skeleton-button,\n .skeleton--active .skeleton-input,\n .skeleton--active .skeleton-image {\n background: linear-gradient(\n 90deg,\n var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,\n var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,\n var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%\n );\n background-size: 400% 100%;\n animation: skeleton-loading 1.4s ease infinite;\n }\n\n /* Dark theme support */\n :host([theme='carbon-dark']) .skeleton-avatar,\n :host([theme='carbon-dark']) .skeleton-title,\n :host([theme='carbon-dark']) .skeleton-paragraph-line,\n :host([theme='carbon-dark']) .skeleton-button,\n :host([theme='carbon-dark']) .skeleton-input,\n :host([theme='carbon-dark']) .skeleton-image {\n background: rgba(255, 255, 255, 0.08);\n }\n\n :host([theme='carbon-dark']) .skeleton-image-icon {\n color: rgba(255, 255, 255, 0.15);\n }\n\n :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,\n :host([theme='carbon-dark']) .skeleton--active .skeleton-title,\n :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,\n :host([theme='carbon-dark']) .skeleton--active .skeleton-button,\n :host([theme='carbon-dark']) .skeleton--active .skeleton-input,\n :host([theme='carbon-dark']) .skeleton--active .skeleton-image {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.08) 25%,\n rgba(255, 255, 255, 0.15) 37%,\n rgba(255, 255, 255, 0.08) 63%\n );\n background-size: 400% 100%;\n }\n\n /* Content wrapper for loading state */\n .skeleton-wrapper {\n display: block;\n }\n\n .skeleton-wrapper--hidden {\n display: none;\n }\n`;\n"]}
|
package/skeleton.types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.types.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"skeleton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,0BAAkB,aAAa;IAC7B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED;;GAEG;AACH,0BAAkB,YAAY;IAC5B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,0BAAkB,mBAAmB;IACnC,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CAClD;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,uBAAuB,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CACvC"}
|
package/skeleton.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"skeleton.types.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Skeleton shape types\n */\nexport const enum SkeletonShape {\n Circle = 'circle',\n Square = 'square',\n Round = 'round',\n Default = 'default',\n}\n\n/**\n * Skeleton size types\n */\nexport const enum SkeletonSize {\n Small = 'small',\n Default = 'default',\n Large = 'large',\n}\n\n/**\n * Skeleton element type\n */\nexport const enum SkeletonElementType {\n Avatar = 'avatar',\n Button = 'button',\n Input = 'input',\n Image = 'image',\n}\n\n/**\n * Skeleton avatar configuration\n */\nexport interface SkeletonAvatarConfig {\n active?: boolean;\n shape?: SkeletonShape;\n size?: SkeletonSize | number;\n}\n\n/**\n * Skeleton title configuration\n */\nexport interface SkeletonTitleConfig {\n width?: number | string;\n}\n\n/**\n * Skeleton paragraph configuration\n */\nexport interface SkeletonParagraphConfig {\n rows?: number;\n width?: number | string | Array<number | string>;\n}\n\n/**\n * Skeleton button configuration\n */\nexport interface SkeletonButtonConfig {\n active?: boolean;\n block?: boolean;\n shape?: SkeletonShape;\n size?: SkeletonSize;\n}\n\n/**\n * Skeleton input configuration\n */\nexport interface SkeletonInputConfig {\n active?: boolean;\n size?: SkeletonSize;\n block?: boolean;\n}\n\n/**\n * Skeleton image configuration\n */\nexport interface SkeletonImageConfig {\n active?: boolean;\n}\n\n/**\n * Main skeleton configuration\n */\nexport interface SkeletonConfig {\n active?: boolean;\n avatar?: boolean | SkeletonAvatarConfig;\n loading?: boolean;\n paragraph?: boolean | SkeletonParagraphConfig;\n round?: boolean;\n title?: boolean | SkeletonTitleConfig;\n}\n"]}
|