@hyvor/design 0.0.55 → 0.0.57

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 HYVOR
+Copyright (c) 2024 HYVOR (hyvor.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

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,6 +6,12 @@ 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)) {
@@ -18,11 +24,7 @@ function getParamsForBackend() {
         };
         hasComponentParams = true;
       } else if (value.hasOwnProperty("element")) {
-        newValue = (chunks) => {
-          const children = typeof chunks === "string" ? chunks : chunks.join("");
-          const el = value.element;
-          return `<${el}>${children}</${el}>`;
-        };
+        newValue = getElementFunc(value.element);
       }
     } else {
       newValue = value;
@@ -36,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/Modal/Modal.svelte

@@ -8,9 +8,13 @@ import Loader from "../Loader/Loader.svelte";
 export let show = false;
 export let title = "";
 export let size = "medium";
+export let id = "modal";
+export let role = "alertdialog";
 export let closeOnOutsideClick = true;
 export let closeOnEscape = true;
 export let loading = false;
+const titleId = id + "-title";
+const descId = id + "-desc";
 export let footer = null;
 let wrapEl;
 let innerEl;
@@ -53,11 +57,19 @@ $:
             in:scale={{duration: 100, start: 0.9, opacity: 0.9}}
             out:scale={{duration: 100, start: 0.9, opacity: 0.9}}
             bind:this={innerEl}
+
+            role={role}
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={descId}
         >
 
             <div class="header">
 
-                <div class="title">
+                <div 
+                    class="title"
+                    id={titleId}
+                >
                     {#if $$slots.title}
                         <slot name="title" />
                     {:else}
@@ -76,7 +88,10 @@ $:
 
             </div>
 
-            <div class="content">
+            <div 
+                class="content"
+                id={descId}
+            >
                 <slot /> 
             </div>
 

package/dist/components/Modal/Modal.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         show?: boolean | undefined;
         title?: string | undefined;
         size?: "small" | "medium" | "large" | undefined;
+        id?: string | undefined;
+        role?: "dialog" | "alertdialog" | undefined;
         closeOnOutsideClick?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         loading?: string | boolean | undefined;

package/package.json

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