@iyulab/chat-components 0.4.0 → 0.5.0

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.
Files changed (237) hide show
  1. package/CHANGELOG.md +124 -21
  2. package/README.md +133 -16
  3. package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js +9 -0
  4. package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js +6 -0
  5. package/dist/_virtual/_glob-assets_raw/intent-prompt.md.1907474e.js +4 -0
  6. package/dist/_virtual/_glob-assets_raw/view-prompt.md.e0dbcffe.js +4 -0
  7. package/dist/components/blocks/UCodeBlock.d.ts +24 -2
  8. package/dist/components/blocks/UCodeBlock.js +65 -2
  9. package/dist/components/blocks/UCodeBlock.styles.js +4 -4
  10. package/dist/components/blocks/UFileBlock.d.ts +33 -0
  11. package/dist/components/blocks/UFileBlock.js +154 -0
  12. package/dist/components/blocks/{UFilesBlock.styles.js → UFileBlock.styles.js} +12 -90
  13. package/dist/components/blocks/UJsonBlock.d.ts +44 -2
  14. package/dist/components/blocks/UJsonBlock.js +128 -3
  15. package/dist/components/blocks/UJsonBlock.styles.js +4 -4
  16. package/dist/components/blocks/UMarkedBlock.d.ts +44 -2
  17. package/dist/components/blocks/UMarkedBlock.js +154 -4
  18. package/dist/components/blocks/UMarkedBlock.styles.js +4 -4
  19. package/dist/components/blocks/URefBlock.d.ts +16 -2
  20. package/dist/components/blocks/URefBlock.js +58 -3
  21. package/dist/components/blocks/URefBlock.styles.js +4 -4
  22. package/dist/components/blocks/UTableBlock.d.ts +47 -2
  23. package/dist/components/blocks/UTableBlock.js +197 -4
  24. package/dist/components/blocks/UTableBlock.styles.js +4 -5
  25. package/dist/components/blocks/UTextBlock.d.ts +36 -2
  26. package/dist/components/blocks/UTextBlock.js +94 -4
  27. package/dist/components/blocks/UTextBlock.styles.js +4 -4
  28. package/dist/components/blocks/UThinkBlock.d.ts +30 -2
  29. package/dist/components/blocks/UThinkBlock.js +86 -4
  30. package/dist/components/blocks/UThinkBlock.styles.js +4 -4
  31. package/dist/components/blocks/UToolBlock.d.ts +19 -2
  32. package/dist/components/blocks/UToolBlock.js +68 -3
  33. package/dist/components/blocks/UToolBlock.styles.js +4 -4
  34. package/dist/components/buttons/UAttachButton.d.ts +21 -2
  35. package/dist/components/buttons/UAttachButton.js +61 -3
  36. package/dist/components/buttons/UAttachButton.styles.js +4 -4
  37. package/dist/components/buttons/UCopyButton.d.ts +19 -2
  38. package/dist/components/buttons/UCopyButton.js +57 -3
  39. package/dist/components/buttons/UCopyButton.styles.js +4 -4
  40. package/dist/components/buttons/UVoteButton.d.ts +14 -3
  41. package/dist/components/buttons/UVoteButton.js +62 -3
  42. package/dist/components/buttons/UVoteButton.styles.js +4 -4
  43. package/dist/components/{actions/UQuestionAction.component.d.ts → intents/UQuestionIntent.d.ts} +6 -2
  44. package/dist/components/intents/UQuestionIntent.js +41 -0
  45. package/dist/components/{actions/UQuestionAction.styles.js → intents/UQuestionIntent.styles.js} +4 -6
  46. package/dist/components/message/UMessage.d.ts +18 -2
  47. package/dist/components/message/UMessage.js +47 -2
  48. package/dist/components/message/UMessage.styles.js +4 -4
  49. package/dist/components/prompt/UPrompt.d.ts +32 -2
  50. package/dist/components/prompt/UPrompt.js +118 -2
  51. package/dist/components/prompt/UPrompt.styles.js +15 -5
  52. package/dist/components/references/URefCard.d.ts +30 -2
  53. package/dist/components/references/URefCard.js +97 -2
  54. package/dist/components/references/URefCard.styles.js +4 -4
  55. package/dist/components/references/URefCardGroup.d.ts +25 -2
  56. package/dist/components/references/URefCardGroup.js +69 -4
  57. package/dist/components/references/URefCardGroup.styles.js +4 -4
  58. package/dist/components/references/URefTag.d.ts +12 -2
  59. package/dist/components/references/URefTag.js +37 -2
  60. package/dist/components/references/URefTag.styles.js +4 -4
  61. package/dist/components/{widgets/UChartWidget.component.d.ts → views/UChartView.d.ts} +7 -4
  62. package/dist/components/views/UChartView.js +167 -0
  63. package/dist/components/{widgets/UChartWidget.styles.js → views/UChartView.styles.js} +4 -4
  64. package/dist/components/{widgets/UImagesWidget.component.d.ts → views/UImagesView.d.ts} +7 -4
  65. package/dist/components/views/UImagesView.js +144 -0
  66. package/dist/components/{widgets/UImagesWidget.styles.js → views/UImagesView.styles.js} +6 -5
  67. package/dist/components/{widgets/UMapWidget.component.d.ts → views/UMapView.d.ts} +7 -3
  68. package/dist/components/views/UMapView.js +45 -0
  69. package/dist/components/{widgets/UMapWidget.styles.js → views/UMapView.styles.js} +4 -4
  70. package/dist/components/{widgets/UVideoWidget.component.d.ts → views/UVideoView.d.ts} +7 -3
  71. package/dist/components/views/UVideoView.js +81 -0
  72. package/dist/components/{widgets/UVideoWidget.styles.js → views/UVideoView.styles.js} +4 -4
  73. package/dist/components/{widgets/UWidget.component.d.ts → views/UView.d.ts} +8 -5
  74. package/dist/components/views/UView.js +113 -0
  75. package/dist/components/{widgets/UWidget.styles.js → views/UView.styles.js} +4 -4
  76. package/dist/events/AttachEvent.d.ts +9 -0
  77. package/dist/events/ChoiceEvent.d.ts +9 -0
  78. package/dist/events/SendEvent.d.ts +7 -0
  79. package/dist/events/StopEvent.d.ts +7 -0
  80. package/dist/index.d.ts +13 -16
  81. package/dist/index.js +28 -56
  82. package/dist/react/UAttachButton.d.ts +11 -0
  83. package/dist/react/UAttachButton.js +12 -0
  84. package/dist/react/UChartView.d.ts +9 -0
  85. package/dist/react/UChartView.js +10 -0
  86. package/dist/react/UCodeBlock.d.ts +9 -0
  87. package/dist/react/UCodeBlock.js +10 -0
  88. package/dist/react/UCopyButton.d.ts +9 -0
  89. package/dist/react/UCopyButton.js +10 -0
  90. package/dist/react/UFileBlock.d.ts +11 -0
  91. package/dist/react/UFileBlock.js +12 -0
  92. package/dist/react/UImagesView.d.ts +9 -0
  93. package/dist/react/UImagesView.js +10 -0
  94. package/dist/react/UJsonBlock.d.ts +9 -0
  95. package/dist/react/UJsonBlock.js +10 -0
  96. package/dist/react/UMapView.d.ts +9 -0
  97. package/dist/react/UMapView.js +10 -0
  98. package/dist/react/UMarkedBlock.d.ts +9 -0
  99. package/dist/react/UMarkedBlock.js +10 -0
  100. package/dist/react/UMessage.d.ts +9 -0
  101. package/dist/react/UMessage.js +10 -0
  102. package/dist/react/UPrompt.d.ts +13 -0
  103. package/dist/react/UPrompt.js +13 -0
  104. package/dist/react/UQuestionIntent.d.ts +11 -0
  105. package/dist/react/UQuestionIntent.js +12 -0
  106. package/dist/react/URefBlock.d.ts +9 -0
  107. package/dist/react/URefBlock.js +10 -0
  108. package/dist/react/URefCard.d.ts +9 -0
  109. package/dist/react/URefCard.js +10 -0
  110. package/dist/react/URefCardGroup.d.ts +9 -0
  111. package/dist/react/URefCardGroup.js +10 -0
  112. package/dist/react/URefTag.d.ts +9 -0
  113. package/dist/react/URefTag.js +10 -0
  114. package/dist/react/UTableBlock.d.ts +9 -0
  115. package/dist/react/UTableBlock.js +10 -0
  116. package/dist/react/UTextBlock.d.ts +9 -0
  117. package/dist/react/UTextBlock.js +10 -0
  118. package/dist/react/UThinkBlock.d.ts +9 -0
  119. package/dist/react/UThinkBlock.js +10 -0
  120. package/dist/react/UToolBlock.d.ts +9 -0
  121. package/dist/react/UToolBlock.js +10 -0
  122. package/dist/react/UVideoView.d.ts +9 -0
  123. package/dist/react/UVideoView.js +10 -0
  124. package/dist/react/UView.d.ts +9 -0
  125. package/dist/react/UView.js +10 -0
  126. package/dist/react/UVoteButton.d.ts +9 -0
  127. package/dist/react/UVoteButton.js +10 -0
  128. package/dist/react/index.d.ts +23 -0
  129. package/dist/react/index.js +23 -0
  130. package/dist/types/BlockItem.d.ts +21 -32
  131. package/dist/types/Intents.d.ts +26 -0
  132. package/dist/types/Intents.js +30 -0
  133. package/dist/types/{Widgets.d.ts → Views.d.ts} +8 -8
  134. package/dist/types/Views.js +150 -0
  135. package/dist/utilities/IntentPromptBuilder.d.ts +40 -0
  136. package/dist/utilities/IntentPromptBuilder.js +95 -0
  137. package/dist/utilities/ViewPromptBuilder.d.ts +28 -0
  138. package/dist/utilities/ViewPromptBuilder.js +76 -0
  139. package/dist/utilities/dom-agent/DOMAgent.d.ts +74 -0
  140. package/dist/utilities/dom-agent/DOMController.d.ts +78 -0
  141. package/dist/utilities/dom-agent/DOMPromptBuilder.d.ts +54 -0
  142. package/dist/utilities/dom-agent/DOMScanner.d.ts +83 -0
  143. package/dist/utilities/dom-agent/index.d.ts +9 -0
  144. package/dist/utilities/dom-agent/types.d.ts +209 -0
  145. package/package.json +32 -16
  146. package/dist/assets/action-prompt.md.js +0 -3
  147. package/dist/assets/widget-prompt.md.js +0 -3
  148. package/dist/components/actions/UQuestionAction.component.js +0 -58
  149. package/dist/components/actions/UQuestionAction.d.ts +0 -7
  150. package/dist/components/actions/UQuestionAction.js +0 -5
  151. package/dist/components/blocks/UCodeBlock.component.d.ts +0 -25
  152. package/dist/components/blocks/UCodeBlock.component.js +0 -88
  153. package/dist/components/blocks/UFilesBlock.component.d.ts +0 -22
  154. package/dist/components/blocks/UFilesBlock.component.js +0 -192
  155. package/dist/components/blocks/UFilesBlock.d.ts +0 -7
  156. package/dist/components/blocks/UFilesBlock.js +0 -5
  157. package/dist/components/blocks/UJsonBlock.component.d.ts +0 -45
  158. package/dist/components/blocks/UJsonBlock.component.js +0 -140
  159. package/dist/components/blocks/UMarkedBlock.component.d.ts +0 -40
  160. package/dist/components/blocks/UMarkedBlock.component.js +0 -159
  161. package/dist/components/blocks/URefBlock.component.d.ts +0 -17
  162. package/dist/components/blocks/URefBlock.component.js +0 -73
  163. package/dist/components/blocks/UTableBlock.component.d.ts +0 -49
  164. package/dist/components/blocks/UTableBlock.component.js +0 -228
  165. package/dist/components/blocks/UTextBlock.component.d.ts +0 -37
  166. package/dist/components/blocks/UTextBlock.component.js +0 -123
  167. package/dist/components/blocks/UThinkBlock.component.d.ts +0 -23
  168. package/dist/components/blocks/UThinkBlock.component.js +0 -90
  169. package/dist/components/blocks/UToolBlock.component.d.ts +0 -20
  170. package/dist/components/blocks/UToolBlock.component.js +0 -80
  171. package/dist/components/buttons/UAttachButton.component.d.ts +0 -22
  172. package/dist/components/buttons/UAttachButton.component.js +0 -89
  173. package/dist/components/buttons/UCopyButton.component.d.ts +0 -20
  174. package/dist/components/buttons/UCopyButton.component.js +0 -81
  175. package/dist/components/buttons/UReportButton.component.d.ts +0 -9
  176. package/dist/components/buttons/UReportButton.component.js +0 -36
  177. package/dist/components/buttons/UReportButton.d.ts +0 -7
  178. package/dist/components/buttons/UReportButton.js +0 -5
  179. package/dist/components/buttons/UReportButton.styles.js +0 -14
  180. package/dist/components/buttons/URetryButton.component.d.ts +0 -11
  181. package/dist/components/buttons/URetryButton.component.js +0 -53
  182. package/dist/components/buttons/URetryButton.d.ts +0 -7
  183. package/dist/components/buttons/URetryButton.js +0 -5
  184. package/dist/components/buttons/URetryButton.styles.js +0 -26
  185. package/dist/components/buttons/UShareButton.component.d.ts +0 -9
  186. package/dist/components/buttons/UShareButton.component.js +0 -36
  187. package/dist/components/buttons/UShareButton.d.ts +0 -7
  188. package/dist/components/buttons/UShareButton.js +0 -5
  189. package/dist/components/buttons/UShareButton.styles.js +0 -14
  190. package/dist/components/buttons/UVoteButton.component.d.ts +0 -15
  191. package/dist/components/buttons/UVoteButton.component.js +0 -73
  192. package/dist/components/message/UMessage.component.d.ts +0 -19
  193. package/dist/components/message/UMessage.component.js +0 -56
  194. package/dist/components/prompt/UPrompt.component.d.ts +0 -25
  195. package/dist/components/prompt/UPrompt.component.js +0 -113
  196. package/dist/components/references/URefCard.component.d.ts +0 -27
  197. package/dist/components/references/URefCard.component.js +0 -109
  198. package/dist/components/references/URefCardGroup.component.d.ts +0 -26
  199. package/dist/components/references/URefCardGroup.component.js +0 -88
  200. package/dist/components/references/URefTag.component.d.ts +0 -13
  201. package/dist/components/references/URefTag.component.js +0 -54
  202. package/dist/components/widgets/UChartWidget.component.js +0 -180
  203. package/dist/components/widgets/UChartWidget.d.ts +0 -7
  204. package/dist/components/widgets/UChartWidget.js +0 -5
  205. package/dist/components/widgets/UImagesWidget.component.js +0 -164
  206. package/dist/components/widgets/UImagesWidget.d.ts +0 -7
  207. package/dist/components/widgets/UImagesWidget.js +0 -5
  208. package/dist/components/widgets/UMapWidget.component.js +0 -65
  209. package/dist/components/widgets/UMapWidget.d.ts +0 -7
  210. package/dist/components/widgets/UMapWidget.js +0 -5
  211. package/dist/components/widgets/UMapWidget.styles.d.ts +0 -1
  212. package/dist/components/widgets/UVideoWidget.component.js +0 -106
  213. package/dist/components/widgets/UVideoWidget.d.ts +0 -7
  214. package/dist/components/widgets/UVideoWidget.js +0 -5
  215. package/dist/components/widgets/UVideoWidget.styles.d.ts +0 -1
  216. package/dist/components/widgets/UWidget.component.js +0 -140
  217. package/dist/components/widgets/UWidget.d.ts +0 -7
  218. package/dist/components/widgets/UWidget.js +0 -5
  219. package/dist/components/widgets/UWidget.styles.d.ts +0 -1
  220. package/dist/events/UCancelEvent.d.ts +0 -6
  221. package/dist/events/USubmitEvent.d.ts +0 -6
  222. package/dist/types/Actions.d.ts +0 -24
  223. package/dist/types/Actions.js +0 -34
  224. package/dist/types/Widgets.js +0 -115
  225. package/dist/utilities/ActionPromptBuilder.d.ts +0 -40
  226. package/dist/utilities/ActionPromptBuilder.js +0 -93
  227. package/dist/utilities/WidgetPromptBuilder.d.ts +0 -28
  228. package/dist/utilities/WidgetPromptBuilder.js +0 -87
  229. package/dist/utilities/converters.d.ts +0 -9
  230. package/dist/utilities/converters.js +0 -19
  231. /package/dist/components/{actions/UQuestionAction.styles.d.ts → blocks/UFileBlock.styles.d.ts} +0 -0
  232. /package/dist/components/{blocks/UFilesBlock.styles.d.ts → intents/UQuestionIntent.styles.d.ts} +0 -0
  233. /package/dist/components/{buttons/UReportButton.styles.d.ts → views/UChartView.styles.d.ts} +0 -0
  234. /package/dist/components/{buttons/URetryButton.styles.d.ts → views/UImagesView.styles.d.ts} +0 -0
  235. /package/dist/components/{buttons/UShareButton.styles.d.ts → views/UMapView.styles.d.ts} +0 -0
  236. /package/dist/components/{widgets/UChartWidget.styles.d.ts → views/UVideoView.styles.d.ts} +0 -0
  237. /package/dist/components/{widgets/UImagesWidget.styles.d.ts → views/UView.styles.d.ts} +0 -0
@@ -1,5 +1,70 @@
1
- import { URefCardGroup } from './URefCardGroup.component.js';
2
-
3
- URefCardGroup.define("u-ref-card-group");
4
-
1
+ import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
2
+ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
3
+ import { URefCard } from "./URefCard.js";
4
+ import { styles } from "./URefCardGroup.styles.js";
5
+ import { html } from "lit";
6
+ import { customElement, state } from "lit/decorators.js";
7
+ import "@iyulab/components/dist/components/icon/UIcon.js";
8
+ import { UElement } from "@iyulab/components/dist/components/UElement.js";
9
+ //#region src/components/references/URefCardGroup.ts
10
+ var URefCardGroup = class URefCardGroup extends UElement {
11
+ constructor(..._args) {
12
+ super(..._args);
13
+ this.cards = [];
14
+ this.currentIndex = 0;
15
+ }
16
+ static {
17
+ this.styles = [super.styles, styles];
18
+ }
19
+ render() {
20
+ return html`
21
+ <div class="header" ?hidden=${this.cards.length <= 1}>
22
+ <button class="nav-button"
23
+ @click=${this.handlePreviousButtonClick}>
24
+ <u-icon lib="internal" name="chevron-left"></u-icon>
25
+ </button>
26
+
27
+ <span class="page-indicator">
28
+ ${this.currentIndex + 1} / ${this.cards.length}
29
+ </span>
30
+
31
+ <button class="nav-button"
32
+ @click=${this.handleNextButtonClick}>
33
+ <u-icon lib="internal" name="chevron-right"></u-icon>
34
+ </button>
35
+ </div>
36
+
37
+ <div class="viewport">
38
+ <div class="track" style=${`transform: translateX(-${this.currentIndex * 100}%);`}>
39
+ <slot @slotchange=${this.handleSlotChange}></slot>
40
+ </div>
41
+ </div>
42
+ `;
43
+ }
44
+ /**
45
+ * 해당하는 인덱스에 해당하는 카드로 변경합니다.
46
+ */
47
+ switch(index) {
48
+ const len = this.cards.length;
49
+ if (len === 0) return;
50
+ this.currentIndex = index < 0 ? len - 1 : index >= len ? 0 : index;
51
+ }
52
+ /** 이전 카드로 이동합니다. */
53
+ handlePreviousButtonClick() {
54
+ this.switch(this.currentIndex - 1);
55
+ }
56
+ /** 다음 카드로 이동합니다. */
57
+ handleNextButtonClick() {
58
+ this.switch(this.currentIndex + 1);
59
+ }
60
+ /** slot 내용이 변경될 때 호출됩니다. */
61
+ handleSlotChange(e) {
62
+ this.cards = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof URefCard);
63
+ this.switch(0);
64
+ }
65
+ };
66
+ __decorate([state(), __decorateMetadata("design:type", Array)], URefCardGroup.prototype, "cards", void 0);
67
+ __decorate([state(), __decorateMetadata("design:type", Number)], URefCardGroup.prototype, "currentIndex", void 0);
68
+ URefCardGroup = __decorate([customElement("u-ref-card-group")], URefCardGroup);
69
+ //#endregion
5
70
  export { URefCardGroup };
@@ -1,6 +1,6 @@
1
- import { css } from 'lit';
2
-
3
- const styles = css`
1
+ import { css } from "lit";
2
+ //#region src/components/references/URefCardGroup.styles.ts
3
+ var styles = css`
4
4
  :host {
5
5
  display: flex;
6
6
  flex-direction: column;
@@ -65,5 +65,5 @@ const styles = css`
65
65
  border: none;
66
66
  }
67
67
  `;
68
-
68
+ //#endregion
69
69
  export { styles };
@@ -1,7 +1,17 @@
1
- import { URefTag } from './URefTag.component.js';
1
+ import { UElement } from '@iyulab/components/dist/components/UElement.js';
2
+ /**
3
+ * 인용 태그 컴포넌트입니다.
4
+ */
5
+ export declare class URefTag extends UElement {
6
+ static styles: import('lit').CSSResultGroup[];
7
+ /** 인용 출처 소스 데이터 */
8
+ href?: string;
9
+ render(): import('lit-html').TemplateResult<1>;
10
+ /** 링크 클릭 핸들러 */
11
+ private handleAnchorClick;
12
+ }
2
13
  declare global {
3
14
  interface HTMLElementTagNameMap {
4
15
  'u-ref-tag': URefTag;
5
16
  }
6
17
  }
7
- export { URefTag };
@@ -1,5 +1,40 @@
1
- import { URefTag } from './URefTag.component.js';
1
+ import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
2
+ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
3
+ import { styles } from "./URefTag.styles.js";
4
+ import { html } from "lit";
5
+ import { customElement, property } from "lit/decorators.js";
6
+ import "@iyulab/components/dist/components/icon/UIcon.js";
7
+ import "@iyulab/components/dist/components/tooltip/UTooltip.js";
8
+ import { UElement } from "@iyulab/components/dist/components/UElement.js";
9
+ import { ifDefined } from "lit/directives/if-defined.js";
10
+ //#region src/components/references/URefTag.ts
11
+ var URefTag = class URefTag extends UElement {
12
+ static {
13
+ this.styles = [super.styles, styles];
14
+ }
15
+ render() {
16
+ return html`
17
+ <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
18
+ @click=${this.handleAnchorClick}>
19
+ <slot></slot>
20
+ </a>
2
21
 
3
- URefTag.define("u-ref-tag");
22
+ <u-icon lib="bootstrap" name="box-arrow-up-right"></u-icon>
4
23
 
24
+ <u-tooltip interactive placement="bottom" distance="4">
25
+ <slot name="tooltip"></slot>
26
+ </u-tooltip>
27
+ `;
28
+ }
29
+ /** 링크 클릭 핸들러 */
30
+ handleAnchorClick(e) {
31
+ if (!this.href) {
32
+ e.preventDefault();
33
+ e.stopPropagation();
34
+ }
35
+ }
36
+ };
37
+ __decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefTag.prototype, "href", void 0);
38
+ URefTag = __decorate([customElement("u-ref-tag")], URefTag);
39
+ //#endregion
5
40
  export { URefTag };
@@ -1,6 +1,6 @@
1
- import { css } from 'lit';
2
-
3
- const styles = css`
1
+ import { css } from "lit";
2
+ //#region src/components/references/URefTag.styles.ts
3
+ var styles = css`
4
4
  :host {
5
5
  display: inline-flex;
6
6
  flex-direction: row;
@@ -47,5 +47,5 @@ const styles = css`
47
47
  opacity: 1;
48
48
  }
49
49
  `;
50
-
50
+ //#endregion
51
51
  export { styles };
@@ -2,12 +2,10 @@ import { nothing, PropertyValues } from 'lit';
2
2
  import { ChartType, ChartData, ChartOptions } from 'chart.js/auto';
3
3
  import { UElement } from '@iyulab/components/dist/components/UElement.js';
4
4
  /**
5
- * 차트 위젯 컴포넌트
6
- * Chart.js를 사용하여 다양한 차트를 렌더링
5
+ * Chart.js를 사용하여 다양한 차트를 렌더링하는 뷰 컴포넌트입니다.
7
6
  */
8
- export declare class UChartWidget extends UElement {
7
+ export declare class UChartView extends UElement {
9
8
  static styles: import('lit').CSSResultGroup[];
10
- static dependencies: Record<string, typeof UElement>;
11
9
  /** 차트 유형 (bar, line, pie 등) */
12
10
  type?: ChartType;
13
11
  /** 차트 데이터 */
@@ -34,3 +32,8 @@ export declare class UChartWidget extends UElement {
34
32
  private handleDownloadJSON;
35
33
  private handleFullscreen;
36
34
  }
35
+ declare global {
36
+ interface HTMLElementTagNameMap {
37
+ "u-chart-view": UChartView;
38
+ }
39
+ }
@@ -0,0 +1,167 @@
1
+ import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
2
+ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
3
+ import { styles } from "./UChartView.styles.js";
4
+ import { html, nothing } from "lit";
5
+ import { customElement, property, query, state } from "lit/decorators.js";
6
+ import "@iyulab/components/dist/components/icon/UIcon.js";
7
+ import "@iyulab/components/dist/components/button/UButton.js";
8
+ import { UElement } from "@iyulab/components/dist/components/UElement.js";
9
+ //#region src/components/views/UChartView.ts
10
+ var _ref, _ref2;
11
+ /** chart.js lazy load */
12
+ var ChartCtor;
13
+ async function loadChartJS() {
14
+ if (!ChartCtor) ChartCtor = (await import("chart.js/auto")).Chart;
15
+ return ChartCtor;
16
+ }
17
+ var UChartView = class UChartView extends UElement {
18
+ constructor(..._args) {
19
+ super(..._args);
20
+ this.error = null;
21
+ this.chartjs = null;
22
+ }
23
+ static {
24
+ this.styles = [super.styles, styles];
25
+ }
26
+ connectedCallback() {
27
+ super.connectedCallback();
28
+ this.observer = new MutationObserver(() => {
29
+ this.createChart();
30
+ });
31
+ this.observer.observe(document.documentElement, {
32
+ attributes: true,
33
+ attributeFilter: ["theme"]
34
+ });
35
+ }
36
+ disconnectedCallback() {
37
+ super.disconnectedCallback();
38
+ this.observer?.disconnect();
39
+ this.destroyChart();
40
+ }
41
+ updated(changedProperties) {
42
+ super.updated(changedProperties);
43
+ if ([
44
+ "data",
45
+ "type",
46
+ "options"
47
+ ].some((k) => changedProperties.has(k))) this.createChart();
48
+ }
49
+ render() {
50
+ if (!this.data) return nothing;
51
+ return html`
52
+ <div class="toolbar">
53
+ <div class="toolbar-left"></div>
54
+ <div class="toolbar-right">
55
+ <u-button title="PNG Download" @click=${this.handleDownloadPNG}>
56
+ PNG
57
+ <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
58
+ </u-button>
59
+ <u-button title="JSON Download" @click=${this.handleDownloadJSON}>
60
+ JSON
61
+ <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
62
+ </u-button>
63
+ <u-button title="Full Screen" @click=${this.handleFullscreen}>
64
+ <u-icon lib="bootstrap" name="box-arrow-up-right"></u-icon>
65
+ </u-button>
66
+ </div>
67
+ </div>
68
+ <div class="viewport">
69
+ <canvas></canvas>
70
+ <div class="error-overlay" ?hidden=${!this.error}>
71
+ <u-icon lib="bootstrap" name="exclamation-triangle-fill"></u-icon>
72
+ <span>${this.error}</span>
73
+ </div>
74
+ </div>
75
+ `;
76
+ }
77
+ /** Chart.js로 차트 생성 */
78
+ async createChart() {
79
+ if (!this.canvas) return;
80
+ if (!this.type || !this.data) return;
81
+ this.destroyChart();
82
+ this.error = null;
83
+ let Chart;
84
+ try {
85
+ Chart = await loadChartJS();
86
+ } catch {
87
+ this.error = "chart.js를 로드할 수 없습니다. chart.js 패키지가 설치되어 있는지 확인하세요.";
88
+ return;
89
+ }
90
+ const ctx = this.canvas.getContext("2d");
91
+ if (!ctx) {
92
+ this.error = "Canvas 2D context를 가져올 수 없습니다.";
93
+ return;
94
+ }
95
+ try {
96
+ this.applyTheme(Chart);
97
+ this.chartjs = new Chart(ctx, {
98
+ type: this.type,
99
+ data: this.data,
100
+ options: {
101
+ responsive: true,
102
+ maintainAspectRatio: true,
103
+ ...this.options
104
+ }
105
+ });
106
+ } catch (e) {
107
+ this.error = e instanceof Error ? e.message : String(e);
108
+ }
109
+ }
110
+ /** 기존 차트 인스턴스 제거 */
111
+ destroyChart() {
112
+ if (this.chartjs) {
113
+ this.chartjs.destroy();
114
+ this.chartjs = null;
115
+ }
116
+ }
117
+ /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
118
+ applyTheme(Chart) {
119
+ const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
120
+ const textColor = css("--u-txt-color");
121
+ const weakColor = css("--u-txt-color-weak");
122
+ const borderColor = css("--u-border-color");
123
+ const bgColor = css("--u-bg-color");
124
+ Chart.defaults.color = textColor;
125
+ Chart.defaults.borderColor = borderColor;
126
+ Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
127
+ Chart.defaults.plugins.tooltip.titleColor = textColor;
128
+ Chart.defaults.plugins.tooltip.bodyColor = weakColor;
129
+ Chart.defaults.plugins.tooltip.borderColor = borderColor;
130
+ Chart.defaults.plugins.tooltip.borderWidth = 1;
131
+ Chart.defaults.scale.ticks.color = weakColor;
132
+ Chart.defaults.scale.grid.color = borderColor;
133
+ }
134
+ handleDownloadPNG() {
135
+ if (!this.chartjs) return;
136
+ const url = this.chartjs.toBase64Image("image/png", 1);
137
+ const a = document.createElement("a");
138
+ a.href = url;
139
+ a.download = `chart-image-${Date.now()}.png`;
140
+ a.click();
141
+ }
142
+ handleDownloadJSON() {
143
+ if (!this.data) return;
144
+ const json = JSON.stringify(this.data, null, 2);
145
+ const blob = new Blob([json], { type: "application/json;charset=utf-8;" });
146
+ const url = URL.createObjectURL(blob);
147
+ const a = document.createElement("a");
148
+ a.href = url;
149
+ a.download = `chart-data-${Date.now()}.json`;
150
+ a.click();
151
+ URL.revokeObjectURL(url);
152
+ }
153
+ handleFullscreen() {
154
+ const target = this.viewport ?? this;
155
+ if (document.fullscreenElement) document.exitFullscreen();
156
+ else target.requestFullscreen?.();
157
+ }
158
+ };
159
+ __decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UChartView.prototype, "type", void 0);
160
+ __decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UChartView.prototype, "data", void 0);
161
+ __decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UChartView.prototype, "options", void 0);
162
+ __decorate([query("canvas"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLCanvasElement !== "undefined" && HTMLCanvasElement) === "function" ? _ref : Object)], UChartView.prototype, "canvas", void 0);
163
+ __decorate([query(".viewport"), __decorateMetadata("design:type", typeof (_ref2 = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref2 : Object)], UChartView.prototype, "viewport", void 0);
164
+ __decorate([state(), __decorateMetadata("design:type", Object)], UChartView.prototype, "error", void 0);
165
+ UChartView = __decorate([customElement("u-chart-view")], UChartView);
166
+ //#endregion
167
+ export { UChartView };
@@ -1,6 +1,6 @@
1
- import { css } from 'lit';
2
-
3
- const styles = css`
1
+ import { css } from "lit";
2
+ //#region src/components/views/UChartView.styles.ts
3
+ var styles = css`
4
4
  :host {
5
5
  margin: 0.75em auto;
6
6
  display: block;
@@ -82,5 +82,5 @@ const styles = css`
82
82
  flex-shrink: 0;
83
83
  }
84
84
  `;
85
-
85
+ //#endregion
86
86
  export { styles };
@@ -6,12 +6,10 @@ export interface ImageSlide {
6
6
  caption?: string;
7
7
  }
8
8
  /**
9
- * 이미지 갤러리 위젯 컴포넌트
10
- * u-carousel 기반 가로 슬라이드 + 슬라이딩 라이트박스
9
+ * u-carousel 기반 가로 슬라이드 + 슬라이딩 라이트박스 형태의 이미지 뷰어입니다.
11
10
  */
12
- export declare class UImagesWidget extends UElement {
11
+ export declare class UImagesView extends UElement {
13
12
  static styles: import('lit').CSSResultGroup[];
14
- static dependencies: Record<string, typeof UElement>;
15
13
  /** 이미지 슬라이드 배열 */
16
14
  items: ImageSlide[];
17
15
  /** 라이트박스에서 현재 열려있는 이미지 인덱스, null이면 라이트박스 닫힘 */
@@ -28,3 +26,8 @@ export declare class UImagesWidget extends UElement {
28
26
  private handleNextClick;
29
27
  private handleKeyDown;
30
28
  }
29
+ declare global {
30
+ interface HTMLElementTagNameMap {
31
+ "u-images-view": UImagesView;
32
+ }
33
+ }
@@ -0,0 +1,144 @@
1
+ import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
2
+ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
3
+ import { styles } from "./UImagesView.styles.js";
4
+ import { html, nothing } from "lit";
5
+ import { customElement, property, state } from "lit/decorators.js";
6
+ import "@iyulab/components/dist/components/icon/UIcon.js";
7
+ import { UElement } from "@iyulab/components/dist/components/UElement.js";
8
+ import { repeat } from "lit/directives/repeat.js";
9
+ import "@iyulab/components/dist/components/carousel/UCarousel.js";
10
+ //#region src/components/views/UImagesView.ts
11
+ var UImagesView = class UImagesView extends UElement {
12
+ constructor(..._args) {
13
+ super(..._args);
14
+ this.items = [];
15
+ this.index = null;
16
+ this.open = (i) => {
17
+ this.index = i;
18
+ };
19
+ this.close = () => {
20
+ this.index = null;
21
+ };
22
+ this.prev = () => {
23
+ if (this.index !== null && this.index > 0) this.index--;
24
+ };
25
+ this.next = () => {
26
+ if (this.index !== null && this.index < this.items.length - 1) this.index++;
27
+ };
28
+ this.handlePrevClick = (e) => {
29
+ e.stopPropagation();
30
+ this.prev();
31
+ };
32
+ this.handleNextClick = (e) => {
33
+ e.stopPropagation();
34
+ this.next();
35
+ };
36
+ this.handleKeyDown = (e) => {
37
+ if (this.index === null) return;
38
+ if (e.key === "Escape") this.close();
39
+ else if (e.key === "ArrowLeft") this.prev();
40
+ else if (e.key === "ArrowRight") this.next();
41
+ };
42
+ }
43
+ static {
44
+ this.styles = [super.styles, styles];
45
+ }
46
+ connectedCallback() {
47
+ super.connectedCallback();
48
+ document.addEventListener("keydown", this.handleKeyDown);
49
+ }
50
+ disconnectedCallback() {
51
+ document.removeEventListener("keydown", this.handleKeyDown);
52
+ super.disconnectedCallback();
53
+ }
54
+ render() {
55
+ if (!this.items?.length) return nothing;
56
+ const count = this.items.length;
57
+ return html`
58
+ <u-carousel
59
+ .loop=${false}
60
+ .navigation=${false}
61
+ .pagination=${true}
62
+ .draggable=${true}
63
+ .slidesPerView=${Math.min(count, 3)}
64
+ .gap=${8}
65
+ >
66
+ ${repeat(this.items, (item, i) => html`
67
+ <div class="slide"
68
+ @click=${() => this.open(i)}>
69
+ <img
70
+ src=${item.src}
71
+ alt=${item.alt || ""}
72
+ loading="lazy"
73
+ />
74
+ <div class="caption"
75
+ ?hidden=${!item.caption}>
76
+ ${item.caption}
77
+ </div>
78
+ </div>
79
+ `)}
80
+ </u-carousel>
81
+
82
+ ${this.renderLightbox()}
83
+ `;
84
+ }
85
+ renderLightbox() {
86
+ const idx = this.index;
87
+ if (idx === null) return nothing;
88
+ if (idx < 0 || idx >= this.items.length) return nothing;
89
+ const item = this.items[idx];
90
+ if (!item) return nothing;
91
+ const total = this.items.length;
92
+ const translateX = `calc(15vw - ${idx} * (70vw + 16px))`;
93
+ return html`
94
+ <div class="lb-overlay">
95
+
96
+ <!-- 상단: 카운터(중앙) + 닫기 버튼(우측) -->
97
+ <header class="lb-header">
98
+ <div class="lb-counter" ?hidden=${total <= 1}>
99
+ ${idx + 1} / ${total}
100
+ </div>
101
+ <button class="lb-close" @click=${this.close}>
102
+ <u-icon lib="internal" name="x-lg"></u-icon>
103
+ </button>
104
+ </header>
105
+
106
+ <!-- 중앙: 뷰포트 + 이전/다음 버튼(absolute 오버레이) -->
107
+ <div class="lb-body">
108
+ <div class="lb-viewport">
109
+ <div class="lb-track" style="transform:translateX(${translateX})">
110
+ ${repeat(this.items, (img, i) => html`
111
+ <div class="lb-slide" ?active=${i === idx}>
112
+ <img src=${img.src} alt=${img.alt || ""} />
113
+ </div>
114
+ `)}
115
+ </div>
116
+ </div>
117
+
118
+ <button class="lb-nav prev"
119
+ ?hidden=${idx <= 0}
120
+ @click=${this.handlePrevClick}>
121
+ <u-icon lib="internal" name="chevron-left"></u-icon>
122
+ </button>
123
+
124
+ <button class="lb-nav next"
125
+ ?hidden=${idx >= total - 1}
126
+ @click=${this.handleNextClick}>
127
+ <u-icon lib="internal" name="chevron-right"></u-icon>
128
+ </button>
129
+ </div>
130
+
131
+ <!-- 하단: 캡션 -->
132
+ <footer class="lb-footer" ?hidden=${!item.caption}>
133
+ <p class="lb-caption">${item.caption}</p>
134
+ </footer>
135
+
136
+ </div>
137
+ `;
138
+ }
139
+ };
140
+ __decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UImagesView.prototype, "items", void 0);
141
+ __decorate([state(), __decorateMetadata("design:type", Object)], UImagesView.prototype, "index", void 0);
142
+ UImagesView = __decorate([customElement("u-images-view")], UImagesView);
143
+ //#endregion
144
+ export { UImagesView };
@@ -1,6 +1,6 @@
1
- import { css } from 'lit';
2
-
3
- const styles = css`
1
+ import { css } from "lit";
2
+ //#region src/components/views/UImagesView.styles.ts
3
+ var styles = css`
4
4
  :host {
5
5
  display: block;
6
6
  width: 100%;
@@ -20,9 +20,10 @@ const styles = css`
20
20
  height: 100%;
21
21
  object-fit: cover;
22
22
  pointer-events: none;
23
- transition: filter 0.2s ease;
23
+ transition: transform 0.3s ease, filter 0.3s ease;
24
24
  }
25
25
  .slide:hover img {
26
+ transform: scale(1.05);
26
27
  filter: brightness(0.92);
27
28
  }
28
29
 
@@ -214,5 +215,5 @@ const styles = css`
214
215
  to { opacity: 1; }
215
216
  }
216
217
  `;
217
-
218
+ //#endregion
218
219
  export { styles };
@@ -1,11 +1,10 @@
1
1
  import { nothing } from 'lit';
2
2
  import { UElement } from '@iyulab/components/dist/components/UElement.js';
3
3
  /**
4
- * 지도 위젯 컴포넌트 (OpenStreetMap embed)
4
+ * 지도 뷰 컴포넌트 (OpenStreetMap embed)
5
5
  */
6
- export declare class UMapWidget extends UElement {
6
+ export declare class UMapView extends UElement {
7
7
  static styles: import('lit').CSSResultGroup[];
8
- static dependencies: Record<string, typeof UElement>;
9
8
  /** 위도 (latitude) */
10
9
  lat?: number;
11
10
  /** 경도 (longitude) */
@@ -18,3 +17,8 @@ export declare class UMapWidget extends UElement {
18
17
  description?: string;
19
18
  render(): import('lit-html').TemplateResult<1> | typeof nothing;
20
19
  }
20
+ declare global {
21
+ interface HTMLElementTagNameMap {
22
+ "u-map-view": UMapView;
23
+ }
24
+ }
@@ -0,0 +1,45 @@
1
+ import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
2
+ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
3
+ import { styles } from "./UMapView.styles.js";
4
+ import { html, nothing } from "lit";
5
+ import { customElement, property } from "lit/decorators.js";
6
+ import { UElement } from "@iyulab/components/dist/components/UElement.js";
7
+ //#region src/components/views/UMapView.ts
8
+ var UMapView = class UMapView extends UElement {
9
+ constructor(..._args) {
10
+ super(..._args);
11
+ this.zoom = 15;
12
+ }
13
+ static {
14
+ this.styles = [super.styles, styles];
15
+ }
16
+ render() {
17
+ if (this.lat == null || this.lng == null) return nothing;
18
+ const offset = 360 / Math.pow(2, this.zoom);
19
+ const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${`${this.lng - offset},${this.lat - offset},${this.lng + offset},${this.lat + offset}`}&layer=mapnik&marker=${this.lat},${this.lng}`;
20
+ const linkUrl = `https://www.openstreetmap.org/?mlat=${this.lat}&mlon=${this.lng}#map=${this.zoom}/${this.lat}/${this.lng}`;
21
+ return html`
22
+ <iframe
23
+ src="${embedUrl}"
24
+ loading="lazy"
25
+ ></iframe>
26
+ <a class="caption"
27
+ ?hidden=${!this.label && !this.description}
28
+ href="${linkUrl}"
29
+ target="_blank"
30
+ rel="noopener"
31
+ >
32
+ <strong>${this.label}</strong>
33
+ <span>${this.description}</span>
34
+ </a>
35
+ `;
36
+ }
37
+ };
38
+ __decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UMapView.prototype, "lat", void 0);
39
+ __decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UMapView.prototype, "lng", void 0);
40
+ __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UMapView.prototype, "zoom", void 0);
41
+ __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UMapView.prototype, "label", void 0);
42
+ __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UMapView.prototype, "description", void 0);
43
+ UMapView = __decorate([customElement("u-map-view")], UMapView);
44
+ //#endregion
45
+ export { UMapView };
@@ -1,6 +1,6 @@
1
- import { css } from 'lit';
2
-
3
- const styles = css`
1
+ import { css } from "lit";
2
+ //#region src/components/views/UMapView.styles.ts
3
+ var styles = css`
4
4
  :host {
5
5
  position: relative;
6
6
  display: block;
@@ -43,5 +43,5 @@ const styles = css`
43
43
  opacity: 0.8;
44
44
  }
45
45
  `;
46
-
46
+ //#endregion
47
47
  export { styles };