[minor] add vira-dropdown to vira (#39)

electrovir · May 8, 2024 · 27b4d54 · 27b4d54
1 parent 6816f6c
commit 27b4d54
Show file tree

Hide file tree

Showing 20 changed files with 1,348 additions and 7 deletions.
diff --git a/cspell.config.cjs b/cspell.config.cjs
@@ -8,5 +8,6 @@ module.exports = {
     words: [
         ...baseConfig.words,
         'observavir',
+        'listbox',
     ],
 };
diff --git a/package.json b/package.json
@@ -17,8 +17,7 @@
         "format": "virmator format",
         "publish": "virmator publish \"npm run compile && npm run --workspace @electrovir/scripts update:deps && npm i && npm run test:all\"",
         "test": "mono-vir for-each npm test",
-        "test:all": "npm run compile && concurrently -c auto -m 90% --kill-others-on-fail --colors --names tests,spelling,format,docs,build \"npm run test:coverage\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\" \"npm run build:pages\"",
-        "test:coverage": "npm run test coverage",
+        "test:all": "npm run compile && concurrently -c auto -m 90% --kill-others-on-fail --colors --names tests,spelling,format,docs,build \"npm run test\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\" \"npm run build:pages\"",
         "test:deps": "virmator deps check",
         "test:docs": "mono-vir for-each-async npm run --if-present test:docs",
         "test:format": "virmator format check",

diff --git a/packages/element-book/package.json b/packages/element-book/package.json
@@ -36,7 +36,6 @@
         "docs": "virmator docs",
         "start": "cd ../element-book-example && npm start",
         "test": "virmator test-web",
-        "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check",
         "test:types": "npm run compile",
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"

diff --git a/packages/element-vir/package.json b/packages/element-vir/package.json
@@ -33,7 +33,6 @@
         "docs": "virmator docs",
         "start": "cd ../element-vir-example && npm start",
         "test": "virmator test-web",
-        "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check",
         "test:types": "tsc --pretty --noEmit"
     },

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
@@ -1,4 +1,7 @@
 import {elementsBookPage} from './elements.book';
+import {ViraDropdownItemPage} from './entries/dropdown/vira-dropdown-item.element.book';
+import {dropdownPage} from './entries/dropdown/vira-dropdown.book';
+import {viraDropdownPage} from './entries/dropdown/vira-dropdown.element.book';
 import {iconsBookPage} from './entries/icons.book';
 import {viraButtonBookPage} from './entries/vira-button.element.book';
 import {viraCollapsibleBookPage} from './entries/vira-collapsible-wrapper.element.book';
@@ -9,12 +12,15 @@ import {viraLinkBookPage} from './entries/vira-link.element.book';
 
 export const allElementBookEntries = [
     elementsBookPage,
-
     iconsBookPage,
+    dropdownPage,
+
     viraButtonBookPage,
     viraCollapsibleBookPage,
+    ViraDropdownItemPage,
+    viraDropdownPage,
     viraIconBookPage,
     viraImageBookPage,
     viraInputBookPage,
     viraLinkBookPage,
-];
+].sort((a, b) => a.title.localeCompare(b.title));
diff --git a/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown-item.element.book.ts b/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown-item.element.book.ts
@@ -0,0 +1,111 @@
+import {BookPageControlTypeEnum, defineBookPage, definePageControl} from 'element-book';
+import {CSSResult, HTMLTemplateResult, css, html} from 'element-vir';
+import {ViraDropdownItem} from 'vira';
+import {dropdownPage} from './vira-dropdown.book';
+
+const examples: ReadonlyArray<{
+    title: string;
+    inputs: typeof ViraDropdownItem.inputsType;
+    customStyle?: CSSResult;
+    customTemplate?: HTMLTemplateResult;
+}> = [
+    {
+        title: 'unselected',
+        inputs: {
+            label: 'my label',
+            selected: false,
+        },
+    },
+    {
+        title: 'selected',
+        inputs: {
+            label: 'my label',
+            selected: true,
+        },
+    },
+    {
+        title: 'with custom child',
+        inputs: {
+            label: 'custom child',
+            selected: true,
+        },
+        customTemplate: html`
+            <b>This is custom</b>
+        `,
+    },
+    {
+        title: 'constrained width',
+        customStyle: css`
+            :host {
+                max-width: 100px;
+            }
+        `,
+        inputs: {
+            label: 'has more text than is possible to fit',
+            selected: true,
+        },
+    },
+    {
+        title: 'stretched width',
+        customStyle: css`
+            ${ViraDropdownItem} {
+                width: 400px;
+            }
+        `,
+        inputs: {
+            label: 'wide',
+            selected: true,
+        },
+    },
+];
+
+export const ViraDropdownItemPage = defineBookPage({
+    title: ViraDropdownItem.tagName,
+    parent: dropdownPage,
+    controls: {
+        Selected: definePageControl({
+            controlType: BookPageControlTypeEnum.Dropdown,
+            initValue: '',
+            options: [
+                '',
+                'all',
+                'none',
+            ],
+        }),
+        Label: definePageControl({
+            controlType: BookPageControlTypeEnum.Text,
+            initValue: '',
+        }),
+    },
+    elementExamplesCallback({defineExample}) {
+        examples.forEach((example) => {
+            defineExample({
+                title: example.title,
+                stateInitStatic: {
+                    selected: example.inputs?.selected || [],
+                },
+                styles: example.customStyle,
+                renderCallback({controls}) {
+                    const finalInputs: typeof ViraDropdownItem.inputsType = {
+                        label: controls.Label || example.inputs.label,
+                        selected: controls.Selected
+                            ? controls.Selected === 'all'
+                            : example.inputs.selected,
+                    };
+
+                    if (example.customTemplate) {
+                        return html`
+                            <${ViraDropdownItem.assign(finalInputs)}>
+                                ${example.customTemplate}
+                            </${ViraDropdownItem}>
+                        `;
+                    } else {
+                        return html`
+                            <${ViraDropdownItem.assign(finalInputs)}></${ViraDropdownItem}>
+                        `;
+                    }
+                },
+            });
+        });
+    },
+});
diff --git a/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown.book.ts b/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown.book.ts
@@ -0,0 +1,7 @@
+import {defineBookPage} from 'element-book';
+import {elementsBookPage} from '../../elements.book';
+
+export const dropdownPage = defineBookPage({
+    parent: elementsBookPage,
+    title: 'Dropdown',
+});