@hyvor/design 0.0.54 → 0.0.56

package/dist/components/FormControl/Caption.svelte

@@ -1,7 +1,7 @@
 <script>export let bold = false;
 </script>
 
-<div class="caption" class:bold>
+<div class="caption" class:bold {...$$restProps}>
     <slot /> 
 </div>
 

package/dist/components/FormControl/Caption.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         bold?: boolean | undefined;
     };
     events: {

package/dist/components/FormControl/InputGroup.svelte

@@ -8,7 +8,7 @@ gap = typeof gap === "number" ? gap : gaps[gap];
 </script>
 
 
-<div class="checkbox-group" style:gap={gap + "px"}>
+<div class="checkbox-group" style:gap={gap + "px"} {...$$restProps}>
     <slot />
 </div>
 

package/dist/components/FormControl/InputGroup.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         gap?: number | "small" | "medium" | "large" | undefined;
     };
     events: {

package/dist/components/FormControl/Validation.svelte

@@ -1,8 +1,9 @@
 <script>import { IconCheckCircleFill, IconExclamationTriangleFill, IconInfoCircleFill } from "@hyvor/icons";
 export let state = "error";
+export let role = "alert";
 </script>
 
-<div class="validation {state}">
+<div class="validation {state}" {role} {...$$restProps}>
     <div class="icon">
 
         {#if state === 'error'}

package/dist/components/FormControl/Validation.svelte.d.ts

@@ -1,7 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { AriaRole } from "svelte/elements";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         state?: "error" | "success" | "warning" | undefined;
+        role?: AriaRole | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Internationalization/T.svelte

@@ -6,16 +6,26 @@ import { getMessage as getMessageBase } from "./t.js";
 export let key;
 export let params = {};
 let hasComponentParams = false;
+function getElementFunc(el) {
+  return (chunks) => {
+    const children = typeof chunks === "string" ? chunks : chunks.join("");
+    return `<${el}>${children}</${el}>`;
+  };
+}
 function getParamsForBackend() {
   let retParams = {};
   for (let [key2, value] of Object.entries(params)) {
     let newValue;
-    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
-      newValue = (chunks) => {
-        const children = typeof chunks === "string" ? chunks : chunks.join("");
-        return children;
-      };
-      hasComponentParams = true;
+    if (typeof value === "object" && value !== null) {
+      if (value.hasOwnProperty("component")) {
+        newValue = (chunks) => {
+          const children = typeof chunks === "string" ? chunks : chunks.join("");
+          return children;
+        };
+        hasComponentParams = true;
+      } else if (value.hasOwnProperty("element")) {
+        newValue = getElementFunc(value.element);
+      }
     } else {
       newValue = value;
     }
@@ -28,20 +38,24 @@ function getParamsForFrontend() {
   let retParams = {};
   for (let [key2, value] of Object.entries(params)) {
     let newValue;
-    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
-      const { component, props } = value;
-      newValue = (chunks) => {
-        const children = typeof chunks === "string" ? chunks : chunks.join("");
-        const id = key2 + "-" + Math.random().toString(36).substring(7) + "-" + Date.now().toString();
-        componentBindings.set(id, {
-          component,
-          props: {
-            ...props,
-            children
-          }
-        });
-        return '<span id="' + id + '">' + children + "</span>";
-      };
+    if (typeof value === "object" && value !== null) {
+      if (value.hasOwnProperty("component")) {
+        const { component, props } = value;
+        newValue = (chunks) => {
+          const children = typeof chunks === "string" ? chunks : chunks.join("");
+          const id = key2 + "-" + Math.random().toString(36).substring(7) + "-" + Date.now().toString();
+          componentBindings.set(id, {
+            component,
+            props: {
+              ...props,
+              children
+            }
+          });
+          return '<span id="' + id + '">' + children + "</span>";
+        };
+      } else if (value.hasOwnProperty("element")) {
+        newValue = getElementFunc(value.element);
+      }
     } else {
       newValue = value;
     }

package/dist/components/Internationalization/T.svelte.d.ts

@@ -5,7 +5,8 @@ declare const __propDef: {
     props: {
         key: string;
         params?: Record<string, PrimitiveType | {
-            component: ComponentType;
+            element?: string | undefined;
+            component?: ComponentType | undefined;
             props?: Record<string, any> | undefined;
         }> | undefined;
     };

package/dist/components/Internationalization/i18n.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import type { PrimitiveType } from "intl-messageformat";
 import { type Readable, type Writable } from "svelte/store";
 export type i18nLoaderType = () => Promise<any>;
 interface LanguageBase {
@@ -28,6 +29,7 @@ export declare class InternationalizationService {
     register(language: Language): void;
     found(code: string): boolean;
     languageByCode(code: string): LanguageWithLoader | undefined;
+    t(key: string, params?: Record<string, PrimitiveType>): string;
 }
 export declare function getStringByKey(messages: Record<string, any>, key: string): string | undefined;
 export {};

package/dist/components/Internationalization/i18n.js

@@ -1,5 +1,6 @@
 import { deepmerge } from "deepmerge-ts";
 import { writable, derived } from "svelte/store";
+import { t } from "./t.js";
 export class InternationalizationService {
     languages = [];
     locale;
@@ -58,6 +59,9 @@ export class InternationalizationService {
     languageByCode(code) {
         return this.languages.find(l => l.code === code);
     }
+    t(key, params = {}) {
+        return t(key, params, this);
+    }
 }
 export function getStringByKey(messages, key) {
     const keys = key.split('.');

package/dist/components/Internationalization/t.d.ts

@@ -3,5 +3,6 @@ import { type InternationalizationService } from "./i18n.js";
 type ParamValue = PrimitiveType | ((chunks: string | string[]) => string);
 type ParamsType = Record<string, ParamValue>;
 export declare function getMessage(key: string, params: ParamsType, $strings: Record<string, any>, $locale: string): string;
+export type TParams = Record<string, PrimitiveType>;
 export declare function t(key: string, params?: Record<string, PrimitiveType>, i18n?: InternationalizationService | null): string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.54",
+	"version": "0.0.56",
 	"license": "MIT",
 	"private": false,
 	"scripts": {