Progress toward splitting out dropdowns

electrovir · Apr 4, 2024 · 0049531 · 0049531
1 parent 6ebba7d
commit 0049531
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 44 deletions.
diff --git a/packages/vira-book/src/element-book/entries/vira-dropdown.element.book.ts b/packages/vira-book/src/element-book/entries/vira-dropdown.element.book.ts
@@ -134,7 +134,17 @@ export const viraDropdownPage = defineBookPage({
                                     newSelected[variationIndex] = event.detail;
                                     updateState({selected: newSelected});
                                 })}
-                            ></${ViraDropdown}>
+                            >
+                                ${exampleDropdownOptions.map((option) => {
+                                    return html`
+                                        ${ViraDropdownItem.assign({
+                                            value: option.value,
+                                            label: option.label,
+                                            selected: state.selected[variationIndex] === option,
+                                        })}
+                                    `;
+                                })}
+                            </${ViraDropdown}>
                         `;
                     });
                 },

diff --git a/packages/vira/src/elements/index.ts b/packages/vira/src/elements/index.ts
@@ -3,6 +3,7 @@
 export * from './define-vira-element';
 export * from './vira-button.element';
 export * from './vira-collapsible-wrapper.element';
+export * from './vira-dropdown-item.element';
 export * from './vira-dropdown.element';
 export * from './vira-icon.element';
 export * from './vira-image.element';

diff --git a/packages/vira/src/elements/vira-dropdown-item.element.ts b/packages/vira/src/elements/vira-dropdown-item.element.ts
@@ -0,0 +1,31 @@
+import {defineElementEvent, html} from 'element-vir';
+import {defineViraElement} from './define-vira-element';
+import {ViraDropdownOption} from './vira-dropdown.element';
+
+export const ViraDropdownItem = defineViraElement<{
+    value: string;
+    label: string;
+    selected: boolean;
+}>()({
+    tagName: 'vira-dropdown-item',
+    events: {
+        onSelect: defineElementEvent<ViraDropdownOption>(),
+    },
+
+    renderCallback({dispatch, events, state, inputs, updateState}) {
+        return html`
+            <span
+                class="option ${inputs.selected ? 'selected' : ''}"
+                @click=${(event: Event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    dispatch(new events.onSelect({value: inputs.value, label: inputs.label}));
+                }}
+                role="option"
+            >
+                ${inputs.label}
+            </span>
+        `;
+    },
+});
diff --git a/packages/vira/src/elements/vira-dropdown-item.ts b/packages/vira/src/elements/vira-dropdown-item.ts
diff --git a/packages/vira/src/elements/vira-dropdown.element.ts b/packages/vira/src/elements/vira-dropdown.element.ts
@@ -265,6 +265,9 @@ export const ViraDropdown = defineViraElement<{
                         ></${ViraIcon}>
                     </span>
                 </div>
+                <div class="select-options">
+                    <slot></slot>
+                </div>
                 <div class="select-options">
                     ${inputs.options.map(
                         (item) => html`