vira 32.0.0-beta.0 → 32.0.0

package/dist/elements/vira-dropdown.element.js

@@ -0,0 +1,247 @@
+import { check } from '@augment-vir/assert';
+import { filterMap, randomString } from '@augment-vir/common';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { ChevronUp16Icon } from '../icons/index.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
+import { ViraMenu, ViraMenuPopUpDirection } from './pop-up/vira-menu.element.js';
+import { HorizontalAnchor, ViraPopUpTrigger, } from './pop-up/vira-pop-up-trigger.element.js';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * A dropdown element that uses pop-up menus.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/dropdown/vira-dropdown
+ */
+export const ViraDropdown = defineViraElement()({
+    tagName: 'vira-dropdown',
+    testIds: [
+        'leadingIcon',
+        'prefixText',
+        'trigger',
+    ],
+    styles: css `
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            width: 256px;
+            position: relative;
+            max-width: 100%;
+        }
+
+        ${ViraPopUpTrigger} {
+            width: 100%;
+        }
+
+        .selection-display {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .trigger-icon {
+            width: 24px;
+            aspect-ratio: 1;
+            align-self: flex-start;
+            will-change: transform;
+            transform: rotate(180deg);
+            transition: transform
+                ${viraAnimationDurations['vira-interaction-animation-duration'].value} linear;
+        }
+
+        .trigger-icon-wrapper {
+            flex-grow: 1;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .open {
+            & .trigger-icon {
+                transform: rotate(0);
+            }
+
+            &:not(.open-upwards).dropdown-trigger {
+                border-bottom-left-radius: 0;
+            }
+
+            &.open-upwards.dropdown-trigger {
+                border-top-left-radius: 0;
+            }
+        }
+
+        .dropdown-trigger {
+            ${noUserSelect};
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+            display: flex;
+            gap: 8px;
+            text-align: left;
+            align-items: center;
+            padding: 3px;
+            padding-left: 10px;
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        }
+
+        .using-placeholder {
+            opacity: 0.4;
+        }
+
+        label {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 2px;
+            width: 100%;
+            max-width: 100%;
+
+            & .dropdown-label {
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: left;
+                flex-shrink: 0;
+                flex-wrap: wrap;
+            }
+        }
+    `,
+    events: {
+        /** Emits all currently selected values. */
+        selectedValuesChange: defineElementEvent(),
+        openChange: defineElementEvent(),
+    },
+    state() {
+        return {
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
+            /**
+             * Used to couple the label and trigger together. This is not applied if no label is
+             * provided.
+             */
+            randomId: randomString(32),
+        };
+    },
+    render({ state, inputs, dispatch, events, updateState, testIds }) {
+        const selectedOptions = filterMap(inputs.selected, (selectedValue) => inputs.options.find((option) => option.value === selectedValue), check.isTruthy);
+        const leadingIconTemplate = inputs.icon
+            ? html `
+                  <${ViraIcon.assign({
+                icon: inputs.icon,
+            })}
+                      ${testId(testIds.leadingIcon)}
+                  ></${ViraIcon}>
+              `
+            : nothing;
+        const shouldUsePlaceholder = !selectedOptions.length;
+        const prefixTemplate = inputs.selectionPrefix && !shouldUsePlaceholder
+            ? html `
+                      <span class="selected-label-prefix" ${testId(testIds.prefixText)}>
+                          ${inputs.selectionPrefix}
+                      </span>
+                  `
+            : nothing;
+        const selectionDisplay = shouldUsePlaceholder
+            ? inputs.placeholder || ''
+            : inputs.isMultiSelect && selectedOptions.length > 1
+                ? `${selectedOptions.length} Selected`
+                : selectedOptions[0]?.label || '';
+        const menuTemplate = html `
+            <${ViraMenu.assign({
+            direction: state.showPopUpResult?.popDown
+                ? ViraMenuPopUpDirection.Downwards
+                : ViraMenuPopUpDirection.Upwards,
+        })}
+                slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+            >
+                ${renderMenuItemEntries(inputs.options.map((option) => {
+            return {
+                content: option.label,
+                onClick() {
+                    const newSelectedValues = inputs.isMultiSelect
+                        ? selectedOptions.includes(option)
+                            ? filterMap(selectedOptions, (selectedOption) => selectedOption.value, (value, selectedOption) => selectedOption !== option)
+                            : [
+                                ...selectedOptions.map((selectedOption) => selectedOption.value),
+                                option.value,
+                            ]
+                        : [option.value];
+                    dispatch(new events.selectedValuesChange({
+                        detail: newSelectedValues,
+                    }));
+                },
+                disabled: option.disabled,
+                selected: selectedOptions.includes(option),
+            };
+        }))}
+            </${ViraMenu}>
+        `;
+        const triggerTemplate = html `
+            <${ViraPopUpTrigger.assign({
+            ...inputs,
+            keepOpenAfterInteraction: inputs.isMultiSelect,
+            focusOnClose: true,
+            popUpOffset: {
+                vertical: -1,
+                right: 24,
+            },
+            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
+        })}
+                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
+            if (!!state.showPopUpResult !== !!event.detail) {
+                dispatch(new events.openChange({
+                    detail: event.detail,
+                }));
+            }
+            updateState({
+                showPopUpResult: event.detail,
+            });
+        })}
+            >
+                <div
+                    class="dropdown-trigger ${classMap({
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
+        })}"
+                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
+                    aria-label=${ifDefined(inputs.label || undefined)}
+                    ${testId(testIds.trigger)}
+                >
+                    ${leadingIconTemplate}
+                    <span
+                        class="selection-display ${classMap({
+            'using-placeholder': shouldUsePlaceholder,
+        })}"
+                        title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
+                    >
+                        ${prefixTemplate} ${selectionDisplay}
+                    </span>
+
+                    <span class="trigger-icon-wrapper">
+                        <${ViraIcon.assign({
+            icon: ChevronUp16Icon,
+        })}
+                            class="trigger-icon"
+                        ></${ViraIcon}>
+                    </span>
+                </div>
+                ${state.showPopUpResult ? menuTemplate : nothing}
+            </${ViraPopUpTrigger}>
+        `;
+        if (inputs.label) {
+            return html `
+                <label for=${state.randomId}>
+                    <span class="dropdown-label">${inputs.label}</span>
+                    ${triggerTemplate}
+                </label>
+            `;
+        }
+        else {
+            return triggerTemplate;
+        }
+    },
+});

package/dist/elements/vira-error.element.d.ts

@@ -0,0 +1,7 @@
+/**
+ * An error wrapper that applies error coloring (red, by default).
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-error
+ */
+export declare const ViraError: import("element-vir").DeclarativeElementDefinition<"vira-error", {}, {}, {}, "vira-error-", "vira-error-font-weight", readonly [], readonly []>;

package/{src/elements/vira-error.element.ts → dist/elements/vira-error.element.js}

@@ -1,8 +1,7 @@
-import {css, html} from 'element-vir';
-import {viraFontCssVars} from '../styles/font.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-
+import { css, html } from 'element-vir';
+import { viraFontCssVars } from '../styles/font.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * An error wrapper that applies error coloring (red, by default).
  *
@@ -14,8 +13,8 @@ export const ViraError = defineViraElement()({
     cssVars: {
         'vira-error-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
     },
-    styles: ({cssVars}) => {
-        return css`
+    styles({ cssVars }) {
+        return css `
             :host {
                 color: ${viraFormCssVars['vira-form-error-color'].value};
                 font-weight: ${cssVars['vira-error-font-weight'].value};
@@ -23,7 +22,7 @@ export const ViraError = defineViraElement()({
         `;
     },
     render() {
-        return html`
+        return html `
             <slot></slot>
         `;
     },

package/dist/elements/vira-form.element.d.ts

@@ -0,0 +1,56 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraFormField, type ViraFormFields } from '../util/vira-form-fields.js';
+/**
+ * A form element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-form
+ */
+export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", {
+    fields: Readonly<ViraFormFields>;
+} & PartialWithUndefined<{
+    showClearButtons: boolean;
+    /**
+     * When `true`, all fields in this form are disabled. Note that this will not (and can not)
+     * disable any child elements you've inserted via <slot>.
+     *
+     * @default false
+     */
+    isDisabled: boolean;
+    /**
+     * If true, no `'*'` is appended to required form field labels.
+     *
+     * @default false
+     */
+    hideRequiredMarkers: boolean;
+    /**
+     * When `true`, all checkboxes in this form render horizontally.
+     *
+     * @default false
+     */
+    horizontalCheckboxes: boolean;
+    /**
+     * When `true`, all form field labels render to the left of their inputs instead of above
+     * them.
+     *
+     * @default false
+     */
+    useHorizontalLabels: boolean;
+    /**
+     * When `true`, all fields in this form are prevented from user edits. Inputs, selects, and
+     * text areas render their current value as plain text; checkboxes render disabled since
+     * they have no native readonly mode.
+     *
+     * @default false
+     */
+    isReadonly: boolean;
+}>, {
+    lastIsValid: boolean;
+}, {
+    valueChange: import("element-vir").DefineElementEvent<{
+        key: string;
+    } & ViraFormField>;
+    validChange: import("element-vir").DefineElementEvent<{
+        allFieldsAreValid: boolean;
+    }>;
+}, "vira-form-", "vira-form-", readonly [], readonly []>;