@hyvor/design 0.0.46 → 0.0.48

package/dist/components/ActionList/ActionListItem.svelte

@@ -120,15 +120,13 @@ function handleClick() {
         color: var(--text-light);
     }
 
+     /*styles for disabled state*/
     div.action-list-item.disabled {
-        opacity: 0.5;
+        color: var(--text-light);
         cursor: not-allowed;
-        pointer-events: none;
     }
-
     div.action-list-item.disabled:hover {
         background-color: transparent;
-        pointer-events: none;
     }
 
 </style>

package/dist/components/Button/Button.svelte

@@ -364,15 +364,31 @@ export let button = {};
   background-color: transparent;
   color: var(--text);
   transition: 0.2s background-color;
+  /*styles for disabled state*/
 }
 .button.invisible:hover {
   background-color: var(--accent-light);
   box-shadow: none !important;
 }
+.button.invisible[disabled] {
+  background-color: transparent;
+  color: var(--text);
+  box-shadow: none !important;
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+.button.invisible[disabled]:hover {
+  background-color: transparent;
+  box-shadow: none !important;
+  color: var(--text);
+}
 
 /*Styles for button disabled state*/
 .button[disabled] {
   cursor: not-allowed;
   opacity: 0.2;
   box-shadow: none !important;
+}
+.button[disabled]:hover {
+  box-shadow: none !important;
 }</style>

package/dist/components/Callout/Callout.svelte

@@ -39,7 +39,7 @@
     .callout {
         padding: 15px 25px;
         border-radius: var(--box-radius);    
-        line-height: var(--line-height-content);
+        /* line-height: var(--line-height-content); */
     }
 
     .callout.soft {

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

@@ -3,7 +3,7 @@ import './hljs.scss';
 declare const __propDef: {
     props: {
         code: string;
-        language?: ("css" | "ts" | "html" | "js" | "svelte" | "jsx") | undefined;
+        language?: ("css" | "ts" | "yaml" | "html" | "js" | "svelte" | "jsx") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeBlock/getCode.js

@@ -3,10 +3,12 @@ import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
 import css from 'highlight.js/lib/languages/css';
 import ts from 'highlight.js/lib/languages/typescript';
+import yaml from 'highlight.js/lib/languages/yaml';
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml);
 hljs.registerLanguage('css', css);
 hljs.registerLanguage('ts', ts);
+hljs.registerLanguage('yaml', yaml);
 export default function getCode(code, language) {
     let ret = code;
     // remove the first empty line

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;
+export let modalImageProps = {};
+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}
+            {...modalImageProps}
+            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,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        src: string;
+        alt: string;
+        width?: undefined | number;
+        modalImageProps?: any;
+    };
+    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.48",
 	"license": "MIT",
 	"private": false,
 	"scripts": {