Working first pass on dropdown

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

Hide file tree

Showing 17 changed files with 1,883 additions and 1,207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/element-vir-mono-repo",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "author": {

diff --git a/packages/element-book-example/package.json b/packages/element-book-example/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/element-book-example",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "scripts": {

diff --git a/packages/element-book/package.json b/packages/element-book/package.json
@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "keywords": [
         "book",
         "design system",
@@ -49,7 +49,7 @@
         "object-shape-tester": "^2.3.1",
         "spa-router-vir": "^3.0.3",
         "typed-event-target": "^3.0.1",
-        "vira": "20.0.9"
+        "vira": "20.1.0"
     },
     "devDependencies": {
         "@augment-vir/browser-testing": "^23.3.4",

diff --git a/packages/element-vir-example/package.json b/packages/element-vir-example/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/element-vir-example",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "author": {

diff --git a/packages/element-vir/bash.exe.stackdump b/packages/element-vir/bash.exe.stackdump
@@ -0,0 +1,9 @@
+Stack trace:
+Frame        Function    Args
+000FFFFC108  00180063F7E (0018028EB18, 0018026DFBE, 00000000000, 000FFFFB010)
+000FFFFC108  0018004973A (00000000000, 00000000000, 00000000000, 0018028EBD0)
+000FFFFC108  00180049772 (0018028EC18, 000FFFFBFC8, 00000000000, 00000000000)
+000FFFFC108  001800CAA22 (00000000000, 00000000000, 00000000000, 00000000000)
+000FFFFC108  001800CABC0 (000FFFFC150, 00000000000, 00000000000, 00000000000)
+000FFFFC400  001800CC3D5 (000FFFFC150, 00000000000, 00000000000, 00000000000)
+End of stack trace
diff --git a/packages/element-vir/package.json b/packages/element-vir/package.json
@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "keywords": [
         "custom",
         "web",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/scripts",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "author": {

diff --git a/packages/vira-book/package.json b/packages/vira-book/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/vira-book",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "author": {

diff --git a/packages/vira-book/src/element-book/all-element-book-entries.ts b/packages/vira-book/src/element-book/all-element-book-entries.ts
@@ -2,6 +2,7 @@ import {elementsBookPage} from './elements.book';
 import {iconsBookPage} from './entries/icons.book';
 import {viraButtonBookPage} from './entries/vira-button.element.book';
 import {viraCollapsibleBookPage} from './entries/vira-collapsible-wrapper.element.book';
+import {viraDropdownPage} from './entries/vira-dropdown.element.book';
 import {viraIconBookPage} from './entries/vira-icon.element.book';
 import {viraImageBookPage} from './entries/vira-image.element.book';
 import {viraInputBookPage} from './entries/vira-input.element.book';
@@ -17,4 +18,5 @@ export const allElementBookEntries = [
     viraImageBookPage,
     viraInputBookPage,
     viraLinkBookPage,
+    viraDropdownPage,
 ];
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
@@ -0,0 +1,144 @@
+import {getEnumTypedKeys} from '@augment-vir/common';
+import {BookPageControlTypeEnum, defineBookPage, definePageControl} from 'element-book';
+import {CSSResult, css, html, listen} from 'element-vir';
+import {ViraDropdown, ViraDropdownDirectionEnum, ViraDropdownOption} from 'vira';
+import {elementsBookPage} from '../elements.book';
+import {Element24Icon} from './../../../../vira/src/icons/icon-svgs/element-24.icon';
+
+const exampleDropdownOptions = [
+    {
+        label: 'Option 1',
+        value: 1,
+    },
+    {
+        label: 'Option 2',
+        value: 2,
+    },
+    {
+        label: 'Option 3',
+        value: 3,
+    },
+    {
+        label: 'Really really super duper long option',
+        value: 4,
+    },
+] as const satisfies ReadonlyArray<ViraDropdownOption>;
+
+const exampleVariations: ReadonlyArray<{
+    title: string;
+    inputs?: Partial<typeof ViraDropdown.inputsType>;
+    customStyle?: CSSResult;
+}> = [
+    {
+        title: 'default',
+    },
+    {
+        title: 'multi select',
+        inputs: {
+            isMultiSelect: true,
+        },
+    },
+    {
+        title: 'disabled',
+        inputs: {
+            disabled: true,
+        },
+    },
+];
+
+const innerVariations: ReadonlyArray<{
+    customStyle?: CSSResult;
+    inputs?: Partial<typeof ViraDropdown.inputsType>;
+}> = [
+    {},
+    {
+        customStyle: css`
+            width: 500px;
+            height: 100px;
+        `,
+    },
+    {
+        customStyle: css`
+            max-height: 30px;
+            min-height: 30px;
+        `,
+    },
+];
+
+export const viraDropdownPage = defineBookPage({
+    title: ViraDropdown.tagName,
+    parent: elementsBookPage,
+    controls: {
+        Selected: definePageControl({
+            controlType: BookPageControlTypeEnum.Dropdown,
+            initValue: exampleDropdownOptions[0].label,
+            options: exampleDropdownOptions.map((option) => option.label),
+        }),
+        Direction: definePageControl({
+            controlType: BookPageControlTypeEnum.Dropdown,
+            initValue: 'Down',
+            options: getEnumTypedKeys(ViraDropdownDirectionEnum),
+        }),
+        Prefix: definePageControl({
+            controlType: BookPageControlTypeEnum.Text,
+            initValue: 'Sort by: ',
+        }),
+        'Force open': definePageControl({
+            controlType: BookPageControlTypeEnum.Checkbox,
+            initValue: false,
+        }),
+    },
+    elementExamplesCallback({defineExample}) {
+        exampleVariations.forEach((exampleVariation) => {
+            defineExample({
+                title: exampleVariation.title,
+                stateInitStatic: {
+                    selected: innerVariations.map((innerVariation) => innerVariation.inputs?.value),
+                },
+                styles: css`
+                    :host {
+                        display: flex;
+                        gap: 16px;
+                        flex-wrap: wrap;
+                        align-items: center;
+                    }
+                `,
+                renderCallback({state, updateState, controls}) {
+                    return innerVariations.map((innerVariation, variationIndex) => {
+                        const styles = css`
+                            ${exampleVariation.customStyle ?? css``};
+                            ${innerVariation.customStyle ?? css``};
+                        `;
+
+                        return html`
+                            <${ViraDropdown.assign({
+                                ...exampleVariation.inputs,
+                                ...innerVariation.inputs,
+                                options: exampleDropdownOptions,
+                                value: state.selected[variationIndex] ?? [
+                                    exampleDropdownOptions.find(
+                                        (option) => option.label === controls.Selected,
+                                    ) ?? exampleDropdownOptions[0],
+                                ],
+                                icon: Element24Icon,
+                                selectedLabelPrefix: controls.Prefix,
+                                direction:
+                                    ViraDropdownDirectionEnum[
+                                        controls.Direction as keyof typeof ViraDropdownDirectionEnum
+                                    ],
+                                _forceOpenState: controls['Force open'] || undefined,
+                            })}
+                                style=${styles}
+                                ${listen(ViraDropdown.events.selectChange, (event) => {
+                                    const newSelected = [...state.selected];
+                                    newSelected[variationIndex] = event.detail;
+                                    updateState({selected: newSelected});
+                                })}
+                            ></${ViraDropdown}>
+                        `;
+                    });
+                },
+            });
+        });
+    },
+});
diff --git a/packages/vira/package.json b/packages/vira/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "20.0.9",
+    "version": "20.1.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",

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.element';
 export * from './vira-icon.element';
 export * from './vira-image.element';
 export * from './vira-input.element';

diff --git a/packages/vira/src/elements/vira-dropdown-item.ts b/packages/vira/src/elements/vira-dropdown-item.ts
@@ -0,0 +1,43 @@
+import {html} from 'element-vir';
+import {defineViraElement} from './define-vira-element';
+
+export const ViraDropdownItem = defineViraElement<{
+    value: string;
+    label: string;
+}>()({
+    tagName: 'vira-dropdown-item',
+    renderCallback({dispatch, events, state, inputs, updateState}) {
+        return html`
+            <span
+                class="option ${selectedOptions
+                    .map((selectedItem) => selectedItem?.value)
+                    .includes(item.value)
+                    ? 'selected'
+                    : ''}"
+                @click=${(event: Event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!inputs.isMultiSelect) {
+                        updateState({dropdownOpen: false});
+                        dispatch(new events.openChange(false));
+                    }
+                    dispatch(
+                        new events.selectChange(
+                            inputs.isMultiSelect
+                                ? inputs.value.includes(item.value)
+                                    ? inputs.value.filter((value) => value !== item.value)
+                                    : [
+                                          ...inputs.value,
+                                          item.value,
+                                      ]
+                                : [item.value],
+                        ),
+                    );
+                }}
+                role="option"
+            >
+                ${item.label}
+            </span>
+        `;
+    },
+});