@hyvor/design 0.0.46 → 0.0.47

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,4 +1,4 @@
-<script>import { clickOutside } from "../../directives/clickOutside.js";
+<script>import { clickOutside } from "../directives/clickOutside.js";
 import Box from "./../Box/Box.svelte";
 export let show = false;
 export let width = 225;

package/dist/components/Modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script>import ModalFooter from "./ModalFooter.svelte";
-import { clickOutside } from "../../directives/clickOutside.js";
+import { clickOutside } from "../directives/clickOutside.js";
 import { IconX } from "@hyvor/icons";
 import IconButton from "./../IconButton/IconButton.svelte";
 import { fade, scale } from "svelte/transition";

package/dist/components/index.d.ts

@@ -40,3 +40,4 @@ export { default as TextInput } from './TextInput/TextInput.svelte';
 export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
+export { clickOutside } from './directives/clickOutside.js';

package/dist/components/index.js

@@ -40,3 +40,5 @@ export { default as TextInput } from './TextInput/TextInput.svelte';
 export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
+// directives
+export { clickOutside } from './directives/clickOutside.js';

package/dist/marketing/Docs/Content/DocsImage.svelte

@@ -0,0 +1,78 @@
+<script>import { scale } from "svelte/transition";
+import { clickOutside } from "../../../components/index.js";
+export let src;
+export let alt;
+export let width = void 0;
+let open = false;
+</script>
+
+<div class="wrap">
+    <img 
+        {src} 
+        {alt} 
+        {...$$restProps} 
+        {width} 
+        on:click={() => open = true}
+        class="preview"
+    />
+</div>
+
+{#if open}
+    <div 
+        class="modal"
+    >
+        <img 
+            {src} 
+            {alt} 
+            {...$$restProps} 
+            {width} 
+            use:clickOutside={{
+                callback: () => open = false
+            }}
+            transition:scale={{ duration: 100, opacity: 0.5, start: 0.95 }}
+        />
+    </div>
+{/if}
+
+<style>
+    img.preview {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0 auto;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0,0,0,0.2);
+        cursor: pointer;
+        transition: .1s box-shadow;
+    }
+    img.preview:hover {
+        box-shadow: 0 0 15px rgba(0,0,0,0.3);
+    }
+
+    .modal {
+        position: fixed;
+        z-index: 1000000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        overflow: hidden;
+    }
+    .modal-content {
+        min-height: 0;
+    }
+    .modal img {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 5px;
+    }
+    .wrap {
+        padding: 25px 0;
+    }
+
+</style>

package/dist/marketing/Docs/Content/DocsImage.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        src: string;
+        alt: string;
+        width?: undefined | number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocsImageProps = typeof __propDef.props;
+export type DocsImageEvents = typeof __propDef.events;
+export type DocsImageSlots = typeof __propDef.slots;
+export default class DocsImage extends SvelteComponent<DocsImageProps, DocsImageEvents, DocsImageSlots> {
+}
+export {};

package/dist/marketing/index.d.ts

@@ -5,5 +5,6 @@ export { default as DocsNav } from './Docs/Nav/Nav.svelte';
 export { default as DocsNavItem } from './Docs/Nav/NavItem.svelte';
 export { default as DocsNavCategory } from './Docs/Nav/NavCategory.svelte';
 export { default as DocsContent } from './Docs/Content/Content.svelte';
+export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';

package/dist/marketing/index.js

@@ -5,5 +5,6 @@ export { default as DocsNav } from './Docs/Nav/Nav.svelte';
 export { default as DocsNavItem } from './Docs/Nav/NavItem.svelte';
 export { default as DocsNavCategory } from './Docs/Nav/NavCategory.svelte';
 export { default as DocsContent } from './Docs/Content/Content.svelte';
+export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';

package/package.json

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