@slopmachine/svelte 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "llms": "https://docs.slopmachine.dev/llms.txt",
   "llmsFull": "https://docs.slopmachine.dev/llms-full.txt",
   "description": "The official Svelte SDK for Slop Machine",
@@ -19,7 +19,7 @@
     "url": "git+https://github.com/slopmachine-dev/slopmachine-sdk.git"
   },
   "dependencies": {
-    "@slopmachine/core": "^0.1.24",
+    "@slopmachine/core": "^0.1.25",
     "@types/marked": "^5.0.2",
     "marked": "^17.0.4"
   },

package/src/SlopImage.svelte

@@ -15,7 +15,7 @@
   />
   ```
 
-  @version 0.1.24
+  @version 0.1.26
 -->
 <script lang="ts">
   import {
@@ -50,6 +50,7 @@
      * Additional CSS classes to apply directly to the `<img />` element.
      */
     imageClass?: string;
+    [key: string]: any;
   }
 
   let {
@@ -61,10 +62,13 @@
     variables = {},
     baseUrl = undefined,
     original = false,
+    attachments = undefined,
     class: className = "",
     objectFit = "cover",
     imageClass = "",
     loader,
+    onload,
+    onerror,
     ...restProps
   }: SlopImageProps = $props();
 
@@ -80,6 +84,7 @@
       baseUrl,
       quality,
       original,
+      attachments,
     }),
   );
   let src = $state("");
@@ -140,12 +145,14 @@
     }
   });
 
-  function handleLoad() {
+  function handleLoad(e: Event) {
     isLoading = false;
+    onload?.(e);
   }
 
-  function handleError() {
+  function handleError(e: Event) {
     isLoading = false;
+    onerror?.(e);
   }
 </script>
 
@@ -191,10 +198,10 @@
       {src}
       {alt}
       style="object-fit: {objectFit};"
-      onload={handleLoad}
-      onerror={handleError}
       class="slop-image {imageClass} {isLoading ? '' : 'loaded'}"
       {...restProps}
+      onload={handleLoad}
+      onerror={handleError}
     />
   </div>
 </div>

package/src/SlopText.svelte

@@ -23,7 +23,7 @@
    * </SlopText>
    * ```
    *
-   * @version 0.1.24
+   * @version 0.1.26
    */
   interface Props {
     // SlopTextOptions
@@ -33,6 +33,7 @@
     model?: string | undefined;
     variables?: Record<string, string | number | undefined | null> | undefined;
     baseUrl?: string | undefined;
+    attachments?: string[] | undefined;
     errorFallback?: import("svelte").Snippet<[any]>;
     fallback?: import("svelte").Snippet;
     class?: string;
@@ -47,6 +48,7 @@
     model = undefined,
     variables = undefined,
     baseUrl = undefined,
+    attachments = undefined,
     errorFallback,
     fallback,
     class: className = "",
@@ -72,6 +74,7 @@
           resultId,
           variables,
           baseUrl,
+          attachments,
         });
 
         const response = await fetch(url);

package/src/SlopVideo.svelte

@@ -18,7 +18,7 @@
   />
   ```
 
-  @version 0.1.24
+  @version 0.1.26
 -->
 <script lang="ts">
   import {
@@ -63,12 +63,15 @@
     duration,
     baseUrl = undefined,
     original = false,
+    attachments = undefined,
     class: className = "",
     loader,
     autoplay = true,
     loop = true,
     muted = true,
     playsinline = true,
+    onloadeddata,
+    onerror,
     ...restProps
   }: SlopVideoProps = $props();
 
@@ -85,6 +88,7 @@
       baseUrl,
       quality,
       original,
+      attachments,
     }),
   );
   let src = $state("");
@@ -144,12 +148,14 @@
     }
   });
 
-  function handleLoadedData() {
+  function handleLoadedData(e: Event) {
     isLoading = false;
+    onloadeddata?.(e);
   }
 
-  function handleError() {
+  function handleError(e: Event) {
     isLoading = false;
+    onerror?.(e);
   }
 </script>
 
@@ -198,10 +204,10 @@
       {loop}
       {muted}
       {playsinline}
-      onloadeddata={handleLoadedData}
-      onerror={handleError}
       class:loaded={!isLoading}
       {...restProps}
+      onloadeddata={handleLoadedData}
+      onerror={handleError}
     ></video>
   </div>
 </div>