@liwe3/webcomponents 1.1.0 → 1.1.10

package/src/SmartSelect.ts

@@ -6,6 +6,7 @@
 export type SelectOption = {
   value: string;
   label: string;
+  image?: string;
 };
 
 export class SmartSelectElement extends HTMLElement {
@@ -699,6 +700,42 @@ export class SmartSelectElement extends HTMLElement {
           color: var(--option-selected-color, #1976d2);
         }
 
+        .option-content {
+          display: flex;
+          align-items: center;
+        }
+
+        .option-image {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          object-fit: cover;
+          margin-right: 8px;
+          flex-shrink: 0;
+        }
+
+        .tag-image {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          object-fit: cover;
+          margin-right: 4px;
+          flex-shrink: 0;
+        }
+
+        .single-value {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .single-value-image {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          object-fit: cover;
+        }
+
         .no-options {
           padding: 8px 12px;
           color: var(--no-options-color, #6c757d);
@@ -712,11 +749,17 @@ export class SmartSelectElement extends HTMLElement {
             ${ this.multiple && this.selectedOptions.length > 0
         ? this.selectedOptions.map( option => `
                   <span class="tag">
+                    ${ option.image ? `<img src="${ option.image }" class="tag-image" alt="">` : '' }
                     ${ option.label }
                     <span class="remove-tag" data-value="${ option.value }">×</span>
                   </span>
                 `).join( '' )
-        : `<span>${ displayText }</span>`
+        : this.selectedOptions.length > 0
+          ? `<div class="single-value">
+               ${ this.selectedOptions[ 0 ].image ? `<img src="${ this.selectedOptions[ 0 ].image }" class="single-value-image" alt="">` : '' }
+               <span>${ this.selectedOptions[ 0 ].label }</span>
+             </div>`
+          : `<span>${ displayText }</span>`
       }
           </div>
           <div class="arrow ${ this.isOpen ? 'open' : '' }"></div>
@@ -739,7 +782,10 @@ export class SmartSelectElement extends HTMLElement {
                     class="option ${ this.selectedOptions.find( selected => selected.value === option.value ) ? 'selected' : '' } ${ index === this.focusedIndex ? 'focused' : '' }"
                     data-value="${ option.value }"
                   >
-                    ${ option.label }
+                    <div class="option-content">
+                      ${ option.image ? `<img src="${ option.image }" class="option-image" alt="">` : '' }
+                      <span>${ option.label }</span>
+                    </div>
                   </div>
                 `).join( '' )
           : '<div class="no-options">No options available</div>'

package/src/index.ts

@@ -5,65 +5,74 @@
 
 // Export SmartSelect
 export {
-  SmartSelectElement,
-  defineSmartSelect,
-  type SelectOption
+	SmartSelectElement,
+	defineSmartSelect,
+	type SelectOption,
 } from './SmartSelect';
 
 // Export AITextEditor
 export {
-  AITextEditorElement,
-  defineAITextEditor,
-  type AITextEditorConfig
+	AITextEditorElement,
+	defineAITextEditor,
+	type AITextEditorConfig,
 } from './AITextEditor';
 
 // Export Toast
 export {
-  ToastElement,
-  defineToast,
-  toastAdd,
-  type ToastType,
-  type ToastButton,
-  type ToastConfig
+	ToastElement,
+	defineToast,
+	toastAdd,
+	type ToastType,
+	type ToastButton,
+	type ToastConfig,
 } from './Toast';
 
+// Export Dialog
+export {
+	DialogElement,
+	defineDialog,
+	dialogAdd,
+	type DialogButton,
+	type DialogConfig,
+} from './Dialog';
+
 // Export PopoverMenu
 export {
-  PopoverMenuElement,
-  definePopoverMenu,
-  type PopoverMenuItem,
-  type PopoverMenuConfig
+	PopoverMenuElement,
+	definePopoverMenu,
+	type PopoverMenuItem,
+	type PopoverMenuConfig,
 } from './PopoverMenu';
 
 // Export DateSelector
 export {
-  DateSelectorElement,
-  defineDateSelector,
-  type DateRange
+	DateSelectorElement,
+	defineDateSelector,
+	type DateRange,
 } from './DateSelector';
 
 // Export TreeView
 export {
-  TreeViewElement,
-  defineTreeView,
-  type TreeNode
+	TreeViewElement,
+	defineTreeView,
+	type TreeNode,
 } from './TreeView';
 
 // Export ContainerBox
 export {
-  ContainerBoxElement,
-  defineContainerBox,
-  type MenuPosition,
-  type ContainerBoxConfig
+	ContainerBoxElement,
+	defineContainerBox,
+	type MenuPosition,
+	type ContainerBoxConfig,
 } from './ContainerBox';
 
 // Export Drawer
 export {
-  DrawerElement,
-  defineDrawer,
-  type DrawerDirection,
-  type DrawerState,
-  type DrawerConfig
+	DrawerElement,
+	defineDrawer,
+	type DrawerDirection,
+	type DrawerState,
+	type DrawerConfig,
 } from './Drawer';
 
 // Export ImageView
@@ -71,23 +80,77 @@ export * from './ImageView';
 
 // Export ChunkUploader
 export {
-  ChunkUploaderElement,
-  defineChunkUploader,
-  type UploadedFile,
-  type ChunkUploaderConfig
+	ChunkUploaderElement,
+	defineChunkUploader,
+	type UploadedFile,
+	type ChunkUploaderConfig,
 } from './ChunkUploader';
 
+// Export CheckList
+export {
+	CheckListElement,
+	defineCheckList,
+	type CheckListItem,
+} from './CheckList';
+
+// Export ButtonToolbar
+export {
+	ButtonToolbarElement,
+	defineButtonToolbar,
+	type ButtonToolbarItem,
+	type ButtonToolbarGroup,
+} from './ButtonToolbar';
+
+// Export AIMarkdownEditor
+export {
+	AIMarkdownEditorElement,
+	defineAIMarkdownEditor,
+} from './AIMarkdownEditor';
+
+// Export MarkdownPreview
+export {
+	MarkdownPreviewElement,
+	defineMarkdownPreview,
+} from './MarkdownPreview';
+
+// Export ResizableCropper
+export {
+	ResizableCropperElement,
+	defineResizableCropper,
+	type ResizableCropperState,
+	type ResizableCropEventDetail,
+	type ResizableCropperValues,
+	type ResizableCropperComponentState,
+} from './ResizableCropper';
+
+// Export ComicBalloon
+export {
+	ComicBalloonElement,
+	defineComicBalloon,
+	BalloonType,
+	type HandlerPosition,
+	type ContentChangeEvent,
+	type HandlerMoveEvent,
+} from './ComicBalloon';
+
 // Convenience function to register all components at once
-export const defineAllComponents = (): void => {
-  if ( typeof window !== 'undefined' ) {
-    import( './SmartSelect' ).then( ( { defineSmartSelect } ) => defineSmartSelect() );
-    import( './AITextEditor' ).then( ( { defineAITextEditor } ) => defineAITextEditor() );
-    import( './Toast' ).then( ( { defineToast } ) => defineToast() );
-    import( './PopoverMenu' ).then( ( { definePopoverMenu } ) => definePopoverMenu() );
-    import( './DateSelector' ).then( ( { defineDateSelector } ) => defineDateSelector() );
-    import( './TreeView' ).then( ( { defineTreeView } ) => defineTreeView() );
-    import( './ContainerBox' ).then( ( { defineContainerBox } ) => defineContainerBox() );
-    import( './Drawer' ).then( ( { defineDrawer } ) => defineDrawer() );
-    import( './ChunkUploader' ).then( ( { defineChunkUploader } ) => defineChunkUploader() );
-  }
+export const defineAllComponents = () : void => {
+	if ( typeof window !== 'undefined' ) {
+		import( './SmartSelect' ).then( ( { defineSmartSelect } ) => defineSmartSelect() );
+		import( './AITextEditor' ).then( ( { defineAITextEditor } ) => defineAITextEditor() );
+		import( './AIMarkdownEditor' ).then( ( { defineAIMarkdownEditor } ) => defineAIMarkdownEditor() );
+		import( './MarkdownPreview' ).then( ( { defineMarkdownPreview } ) => defineMarkdownPreview() );
+		import( './Toast' ).then( ( { defineToast } ) => defineToast() );
+		import( './Dialog' ).then( ( { defineDialog } ) => defineDialog() );
+		import( './PopoverMenu' ).then( ( { definePopoverMenu } ) => definePopoverMenu() );
+		import( './DateSelector' ).then( ( { defineDateSelector } ) => defineDateSelector() );
+		import( './TreeView' ).then( ( { defineTreeView } ) => defineTreeView() );
+		import( './ContainerBox' ).then( ( { defineContainerBox } ) => defineContainerBox() );
+		import( './Drawer' ).then( ( { defineDrawer } ) => defineDrawer() );
+		import( './ChunkUploader' ).then( ( { defineChunkUploader } ) => defineChunkUploader() );
+		import( './CheckList' ).then( ( { defineCheckList } ) => defineCheckList() );
+		import( './ButtonToolbar' ).then( ( { defineButtonToolbar } ) => defineButtonToolbar() );
+		import( './ResizableCropper' ).then( ( { defineResizableCropper } ) => defineResizableCropper() );
+		import( './ComicBalloon' ).then( ( { defineComicBalloon } ) => defineComicBalloon() );
+	}
 };