vira 0.5.1 → 0.6.0

package/dist/element-book/all-element-book-entries.d.ts

@@ -1 +1 @@
-export declare const allElementBookEntries: (import("element-book").BookPage<undefined, {}> | import("element-book").BookPage<import("element-book").BookPage<undefined, {}>, {}> | import("element-book").BookPage<import("element-book").BookPage<import("element-book").BookPage<undefined, {}>, {}>, {}>)[];
+export declare const allElementBookEntries: (import("element-book").BookPage<undefined, {}> | import("element-book").BookPage<import("element-book").BookPage<undefined, {}>, {}>)[];

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

@@ -1,14 +1,16 @@
-import { elementsBookChapter } from '../elements/elements.book';
-import { viraButtonBookEntries } from '../elements/vira-button/vira-button.element.book';
-import { viraCollapsibleBookEntries } from '../elements/vira-collapsible/vira-collapsible-wrapper.element.book';
-import { viraIconBookEntries } from '../elements/vira-icon/vira-icon.element.book';
-import { viraInputBookEntries } from '../elements/vira-input/vira-input.element.book';
-import { iconBookEntries } from '../icons/icons.book';
+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 { 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';
 export const allElementBookEntries = [
-    elementsBookChapter,
-    ...iconBookEntries,
-    ...viraButtonBookEntries,
-    ...viraCollapsibleBookEntries,
-    ...viraIconBookEntries,
-    ...viraInputBookEntries,
+    elementsBookPage,
+    iconsBookPage,
+    viraButtonBookPage,
+    viraCollapsibleBookPage,
+    viraIconBookPage,
+    viraInputBookPage,
+    viraLinkBookPage,
 ];

package/dist/elements/index.d.ts

@@ -4,3 +4,4 @@ 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-input/vira-input.element';
+export * from './vira-link/vira-link.element';

package/dist/elements/index.js

@@ -4,3 +4,4 @@ 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-input/vira-input.element';
+export * from './vira-link/vira-link.element';

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

@@ -0,0 +1,15 @@
+import { FullRoute, SpaRouter } from 'spa-router-vir';
+import { RequireExactlyOne } from 'type-fest';
+export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", RequireExactlyOne<{
+    link: {
+        url: string;
+        newTab: boolean;
+    };
+    route: {
+        route: FullRoute;
+        router: Pick<SpaRouter, 'createRoutesUrl'>;
+        scrollToTop?: boolean;
+    };
+}>, {}, {
+    routeChange: import("element-vir").DefinedTypedEventNameDefinition<FullRoute>;
+}, `vira-link-${string}`, "vira-link-hover-color", import("lit-html").HTMLTemplateResult>;

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

@@ -0,0 +1,68 @@
+import { css, defineElementEvent, html, listen } from 'element-vir';
+import { shouldMouseEventTriggerRoutes } from 'spa-router-vir';
+import { defineViraElement } from '../define-vira-element';
+export const ViraLink = defineViraElement()({
+    tagName: 'vira-link',
+    cssVars: {
+        'vira-link-hover-color': 'currentColor',
+    },
+    styles: ({ cssVars }) => css `
+        :host {
+            display: inline;
+            text-decoration: underline;
+        }
+
+        a,
+        a:visited,
+        a:active,
+        a:link,
+        a:hover {
+            color: inherit;
+            text-decoration: inherit;
+            white-space: inherit;
+        }
+
+        :host(:hover) a,
+        a:hover,
+        :host(:active) a,
+        a:active {
+            color: ${cssVars['vira-link-hover-color'].value};
+        }
+    `,
+    events: {
+        routeChange: defineElementEvent(),
+    },
+    renderCallback({ inputs, dispatch, events }) {
+        function clickCallback(clickEvent) {
+            if (!inputs.route) {
+                return;
+            }
+            if (shouldMouseEventTriggerRoutes(clickEvent)) {
+                clickEvent.preventDefault();
+                if (inputs.route.scrollToTop) {
+                    window.scrollTo(0, 0);
+                }
+                dispatch(new events.routeChange(inputs.route.route));
+            }
+        }
+        if (inputs.link?.newTab) {
+            /** Noopener and noreferrer are needed for security reasons, do not remove! */
+            return html `
+                <a href=${inputs.link.url} target="_blank" rel="noopener noreferrer">
+                    <slot></slot>
+                </a>
+            `;
+        }
+        else {
+            const linkUrl = inputs.link
+                ? inputs.link.url
+                : inputs.route?.router.createRoutesUrl(inputs.route.route);
+            /** Noopener and noreferrer are needed for security reasons, do not remove! */
+            return html `
+                <a href=${linkUrl} rel="noopener noreferrer" ${listen('click', clickCallback)}>
+                    <slot></slot>
+                </a>
+            `;
+        }
+    },
+});

package/dist/util/index.d.ts

@@ -1 +1,2 @@
+export * from './native-styles';
 export * from './number';

package/dist/util/index.js

@@ -1 +1,2 @@
+export * from './native-styles';
 export * from './number';

package/dist/util/native-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const noNativeSpacing: import("element-vir").CSSResult;
+export declare const noNativeFormStyles: import("element-vir").CSSResult;

package/dist/util/native-styles.js

@@ -0,0 +1,16 @@
+import { css } from 'element-vir';
+export const noNativeSpacing = css `
+    padding: 0;
+    margin: 0;
+`;
+export const noNativeFormStyles = css `
+    ${noNativeSpacing}
+    background: none;
+    border: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    text-transform: inherit;
+    text-decoration: inherit;
+    -webkit-tap-highlight-color: transparent;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "0.5.1",
+    "version": "0.6.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -39,11 +39,13 @@
     },
     "dependencies": {
         "element-vir": "^14.0.3",
-        "lit-css-vars": "^2.0.3"
+        "lit-css-vars": "^2.0.3",
+        "spa-router-vir": "^2.1.1",
+        "type-fest": "^3.12.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.2.1",
-        "@augment-vir/node-js": "^15.2.1",
+        "@augment-vir/browser-testing": "^15.3.0",
+        "@augment-vir/node-js": "^15.3.0",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",
@@ -52,10 +54,10 @@
         "@web/test-runner-commands": "^0.7.0",
         "@web/test-runner-playwright": "^0.10.1",
         "@web/test-runner-visual-regression": "^0.8.0",
-        "esbuild": "^0.18.7",
+        "esbuild": "^0.18.11",
         "istanbul-smart-text-reporter": "^1.1.2",
         "npm-check-updates": "^16.10.13",
-        "typescript": "^5.1.3",
+        "typescript": "^5.1.6",
         "vite": "^4.3.9",
         "vite-tsconfig-paths": "^4.2.0"
     }