vira 2.3.1 → 2.4.0

package/dist/element-book/all-element-book-entries.js

@@ -2,6 +2,7 @@ import { elementsBookPage } from '../elements/elements.book';
 import { viraButtonBookPage } from '../elements/vira-button/vira-button.element.book';
 import { viraCollapsibleBookPage } from '../elements/vira-collapsible/vira-collapsible-wrapper.element.book';
 import { viraIconBookPage } from '../elements/vira-icon/vira-icon.element.book';
+import { viraImageBookPage } from '../elements/vira-image/vira-image.element.book';
 import { viraInputBookPage } from '../elements/vira-input/vira-input.element.book';
 import { viraLinkBookPage } from '../elements/vira-link/vira-link.element.book';
 import { iconsBookPage } from '../icons/icons.book';
@@ -11,6 +12,7 @@ export const allElementBookEntries = [
     viraButtonBookPage,
     viraCollapsibleBookPage,
     viraIconBookPage,
+    viraImageBookPage,
     viraInputBookPage,
     viraLinkBookPage,
 ];

package/dist/elements/common/shared-text-input-logic.d.ts

@@ -19,7 +19,7 @@ export type SharedTextInputElementInputs = {
     /** Set this to true to make the whole element size to only fit the input text. */
     fitText?: boolean;
 };
-type IsAllowedInputs = {
+export type IsAllowedInputs = {
     value: string;
     allowed: string | RegExp | undefined;
     blocked: string | RegExp | undefined;
@@ -35,4 +35,3 @@ export declare function textInputListener({ inputs, filteredValue, event, inputB
     inputBlockedCallback: (blockedInput: string) => void;
     newValueCallback: (newValue: string) => void;
 }): void;
-export {};

package/dist/elements/index.d.ts

@@ -3,5 +3,6 @@ export * from './define-vira-element';
 export * from './vira-button/vira-button.element';
 export * from './vira-collapsible/vira-collapsible-wrapper.element';
 export * from './vira-icon/vira-icon.element';
+export * from './vira-image/vira-image.element';
 export * from './vira-input/vira-input.element';
 export * from './vira-link/vira-link.element';

package/dist/elements/index.js

@@ -3,5 +3,6 @@ export * from './define-vira-element';
 export * from './vira-button/vira-button.element';
 export * from './vira-collapsible/vira-collapsible-wrapper.element';
 export * from './vira-icon/vira-icon.element';
+export * from './vira-image/vira-image.element';
 export * from './vira-input/vira-input.element';
 export * from './vira-link/vira-link.element';

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

@@ -79,7 +79,8 @@ export const ViraButton = defineViraElement()({
             background-color: ${cssVars['vira-button-internal-background-color'].value};
             color: ${cssVars['vira-button-internal-foreground-color'].value};
             padding: ${cssVars['vira-button-padding'].value};
-            transition: color ${viraAnimationDurations['vira-interaction-animation-duration'].value},
+            transition:
+                color ${viraAnimationDurations['vira-interaction-animation-duration'].value},
                 background-color
                     ${viraAnimationDurations['vira-interaction-animation-duration'].value},
                 border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};

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

@@ -0,0 +1,42 @@
+import { Duration, DurationUnit } from 'date-vir';
+import { Dimensions } from '../../util/dimensions';
+export declare enum ViraImageSlotNameEnum {
+    Loading = "loading",
+    Error = "error"
+}
+/**
+ * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
+ * indicators.
+ *
+ * Use CSS properties to constrain the image. In particular, set `min-height` and `min-width` on
+ * this to control the size of the loader and error slots.
+ */
+export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<"vira-image", {
+    /** The URL of the image to load. This is passed directly to the `<img>` element. */
+    imageUrl: string;
+    /**
+     * The dimension which should dominantly constrain the image size. Whichever dimension this is
+     * set to is the dimension that the image will grow to match. This is only relevant if you apply
+     * size constraints on ViraImage via CSS in its parent.
+     *
+     * @default 'width'
+     */
+    dominantDimension?: keyof Dimensions | undefined;
+    /** For debugging only: artificially set a delay for the image loading so you can see the loader. */
+    _debugLoadDelay?: Duration<DurationUnit.Milliseconds> | undefined;
+}, {
+    /**
+     * To avoid race conditions between `<img>` element events and potential input changing,
+     * save the loaded state of an URL's image by the image's URL.
+     */
+    loadedUrls: Readonly<{
+        [url: string]: true;
+    }>;
+    /**
+     * To avoid race conditions between `<img>` element events and potential input changing,
+     * save the errored state of an URL's image by the image's URL.
+     */
+    erroredUrls: Readonly<{
+        [url: string]: true;
+    }>;
+}, {}, "vira-image-height-constrained", `vira-image-${string}`, import("lit-html").HTMLTemplateResult>;

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

@@ -0,0 +1,133 @@
+import { wait } from '@augment-vir/common';
+import { classMap, css, html, listen, renderIf } from 'element-vir';
+import { LoaderAnimated24Icon, StatusFailure24Icon } from '../../icons';
+import { defineViraElement } from '../define-vira-element';
+import { ViraIcon } from '../vira-icon/vira-icon.element';
+export var ViraImageSlotNameEnum;
+(function (ViraImageSlotNameEnum) {
+    ViraImageSlotNameEnum["Loading"] = "loading";
+    ViraImageSlotNameEnum["Error"] = "error";
+})(ViraImageSlotNameEnum || (ViraImageSlotNameEnum = {}));
+/**
+ * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
+ * indicators.
+ *
+ * Use CSS properties to constrain the image. In particular, set `min-height` and `min-width` on
+ * this to control the size of the loader and error slots.
+ */
+export const ViraImage = defineViraElement()({
+    tagName: 'vira-image',
+    hostClasses: {
+        'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-flex;
+            overflow: hidden;
+            flex-direction: column;
+            justify-content: center;
+            position: relative;
+            border-radius: inherit;
+            min-height: 100px;
+            min-width: 100px;
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+            flex-shrink: 0;
+        }
+        ${hostClasses['vira-image-height-constrained'].selector} {
+            flex-direction: row;
+        }
+
+        ${hostClasses['vira-image-height-constrained'].selector} img {
+            width: auto;
+            height: 100%;
+        }
+
+        .status-wrapper {
+            overflow: hidden;
+            border-radius: inherit;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .error {
+            color: red;
+        }
+
+        .hidden {
+            display: none;
+        }
+    `,
+    stateInitStatic: {
+        /**
+         * To avoid race conditions between `<img>` element events and potential input changing,
+         * save the loaded state of an URL's image by the image's URL.
+         */
+        loadedUrls: {},
+        /**
+         * To avoid race conditions between `<img>` element events and potential input changing,
+         * save the errored state of an URL's image by the image's URL.
+         */
+        erroredUrls: {},
+    },
+    renderCallback({ inputs, state, updateState }) {
+        /**
+         * Saved off for use in the image listeners. This is used to eliminate race conditions
+         * between image events and the input URL changing.
+         */
+        const imageUrl = inputs.imageUrl;
+        const statusTemplate = state.erroredUrls[imageUrl]
+            ? html `
+                  <slot class="status-wrapper" name=${ViraImageSlotNameEnum.Error}>
+                      <${ViraIcon.assign({ icon: StatusFailure24Icon })} class="error"></${ViraIcon}>
+                  </slot>
+              `
+            : !state.loadedUrls[imageUrl]
+                ? html `
+                  <slot class="status-wrapper" name=${ViraImageSlotNameEnum.Loading}>
+                      <${ViraIcon.assign({ icon: LoaderAnimated24Icon })}></${ViraIcon}>
+                  </slot>
+              `
+                : undefined;
+        return html `
+            ${renderIf(!!statusTemplate, statusTemplate)}
+            <img
+                class=${classMap({
+            hidden: !!statusTemplate,
+        })}
+                ${listen('load', async () => {
+            if (inputs._debugLoadDelay) {
+                await wait(inputs._debugLoadDelay.milliseconds);
+            }
+            updateState({
+                loadedUrls: {
+                    ...state.loadedUrls,
+                    [imageUrl]: true,
+                },
+            });
+        })}
+                ${listen('error', async () => {
+            if (inputs._debugLoadDelay) {
+                await wait(inputs._debugLoadDelay.milliseconds);
+            }
+            updateState({
+                erroredUrls: {
+                    ...state.erroredUrls,
+                    [imageUrl]: true,
+                },
+            });
+        })}
+                src=${imageUrl}
+            />
+        `;
+    },
+});

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

@@ -1,5 +1,6 @@
 import { ViraIconSvg } from '../../icons';
 import { SharedTextInputElementInputs } from '../common/shared-text-input-logic';
+export * from '../common/shared-text-input-logic';
 export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", {
     icon?: undefined | Pick<ViraIconSvg, 'svgTemplate'>;
     /** A suffix that, if provided, is shown following the user input field. */

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

@@ -1,4 +1,4 @@
-import { css, defineElementEvent, html, listen, onResize, renderIf } from 'element-vir';
+import { css, defineElementEvent, html, listen, onResize, renderIf, } from 'element-vir';
 import { CloseX24Icon } from '../../icons/icon-svgs/close-x-24.icon';
 import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../../styles';
 import { createFocusStyles, viraFocusCssVars } from '../../styles/focus';
@@ -7,6 +7,7 @@ import { viraCssVars } from '../../styles/vira-css-vars';
 import { filterTextInputValue, textInputListener, } from '../common/shared-text-input-logic';
 import { defineViraElement } from '../define-vira-element';
 import { ViraIcon } from '../vira-icon/vira-icon.element';
+export * from '../common/shared-text-input-logic';
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     hostClasses: {

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './elements';
 export * from './icons';
 export * from './re-exports';
 export * from './styles';
+export * from './util';

package/dist/index.js

@@ -3,3 +3,4 @@ export * from './elements';
 export * from './icons';
 export * from './re-exports';
 export * from './styles';
+export * from './util';

package/dist/styles/focus.js

@@ -1,6 +1,5 @@
 import { addPx } from '@augment-vir/common';
-import { css } from 'element-vir';
-import { unsafeCSS } from 'lit';
+import { css, unsafeCSS } from 'element-vir';
 import { defineCssVars } from 'lit-css-vars';
 import { viraCssVars } from './vira-css-vars';
 export const viraFocusCssVars = defineCssVars({

package/dist/util/dimensions.d.ts

@@ -0,0 +1,4 @@
+export type Dimensions = {
+    width: number;
+    height: number;
+};

package/dist/util/dimensions.js

@@ -0,0 +1 @@
+export {};

package/dist/util/index.d.ts

@@ -0,0 +1 @@
+export * from './dimensions';

package/dist/util/index.js

@@ -0,0 +1 @@
+export * from './dimensions';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "2.3.1",
+    "version": "2.4.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -31,38 +31,45 @@
         "build": "npm run compile && virmator frontend build",
         "compile": "virmator compile && rm -rf ../../node_modules/element-book/node_modules/vira",
         "prepublishOnly": "cd ../scripts && npm run publish:pre",
-        "preview": "npm run compile && virmator frontend preview --outDir ./book-dist",
+        "preview": "npm run compile && virmator frontend preview --outDir ./dist-book",
         "postpublish": "cd ../scripts && npm run publish:post",
         "start": "npm run compile && virmator frontend",
         "test": "virmator test-web",
-        "test:all": "npm test",
+        "test:all": "concurrently --colors --kill-others-on-fail -c auto --names tests,docs \"npm run test\" \"npm run test:docs\"",
         "test:coverage": "npm run test",
-        "test:docs": "virmator code-in-markdown check"
+        "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/common": "^19.4.2",
+        "@augment-vir/browser": "^21.5.1",
+        "@augment-vir/common": "^21.5.1",
         "colorjs.io": "^0.4.5",
-        "element-vir": "^16.4.2",
-        "lit-css-vars": "^3.0.1",
+        "date-vir": "^3.0.0",
+        "element-vir": "^16.5.2",
+        "lit-css-vars": "^3.0.2",
         "spa-router-vir": "^3.0.2",
-        "type-fest": "^4.3.3"
+        "type-fest": "^4.6.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^19.4.2",
-        "@augment-vir/node-js": "^19.4.2",
-        "@open-wc/testing": "^3.2.0",
-        "@types/chai": "^4.3.6",
-        "@types/mocha": "^10.0.2",
-        "@web/dev-server-esbuild": "^0.4.1",
-        "@web/test-runner": "^0.17.1",
-        "@web/test-runner-commands": "^0.8.0",
-        "@web/test-runner-playwright": "^0.10.1",
-        "@web/test-runner-visual-regression": "^0.8.2",
-        "esbuild": "^0.19.4",
+        "@augment-vir/browser-testing": "^21.5.1",
+        "@augment-vir/node-js": "^21.5.1",
+        "@open-wc/testing": "^4.0.0",
+        "@types/chai": "^4.3.9",
+        "@types/mocha": "^10.0.4",
+        "@web/dev-server-esbuild": "^1.0.0",
+        "@web/test-runner": "^0.18.0",
+        "@web/test-runner-commands": "^0.9.0",
+        "@web/test-runner-playwright": "^0.11.0",
+        "@web/test-runner-visual-regression": "^0.9.0",
+        "dependency-cruiser": "^15.2.0",
+        "element-book": "^10.1.5",
+        "esbuild": "^0.19.5",
         "istanbul-smart-text-reporter": "^1.1.2",
-        "run-time-assertions": "^0.0.2",
+        "markdown-code-example-inserter": "^0.3.2",
+        "npm-check-updates": "~16.12.3",
+        "run-time-assertions": "^0.1.3",
+        "typedoc": "^0.25.3",
         "typescript": "^5.2.2",
-        "vite": "^4.4.11",
+        "vite": "^4.5.0",
         "vite-tsconfig-paths": "^4.2.1"
     }
 }