@hyvor/design 0.0.66 → 0.0.68

package/dist/components/Callout/Callout.svelte

@@ -1,92 +1,94 @@
 <script>export let type = "soft";
+export let title = void 0;
 </script>
 
-
-<div class={"callout " + type} {...$$restProps}>
-
-    {#if $$slots.title}
-
-        <div class="title-wrap">
-
-            {#if $$slots.icon}
-                <span class="title-icon"><slot name="icon" /></span>
-            {/if}
-
-            <div class="title"><slot name="title" /></div>
-
-        </div>
-
-    {/if}
-
-    <div class="text-wrap">
-        {#if $$slots.icon && !$$slots.title}
-            <span class="icon"><slot name="icon" /></span>
-        {/if}
-
-        <div class="text">
-            {#if $$slots.default}
-                <slot />
-            {/if}
-            <slot name="text" />
-        </div>
-    </div>
-
+<div class={'callout ' + type} {...$$restProps}>
+	{#if $$slots.title}
+		<div class="title-wrap">
+			{#if $$slots.icon}
+				<span class="title-icon"><slot name="icon" /></span>
+			{/if}
+
+			<div class="title"><slot name="title" /></div>
+		</div>
+	{:else if title}
+		<div class="title-wrap">
+			{#if $$slots.icon}
+				<span
+					class="title-icon
+        "><slot name="icon" /></span
+				>
+			{/if}
+
+			<div class="title">{title}</div>
+		</div>
+	{/if}
+
+	<div class="text-wrap">
+		{#if $$slots.icon && !$$slots.title && !title}
+			<span class="icon"><slot name="icon" /></span>
+		{/if}
+
+		<div class="text">
+			{#if $$slots.default}
+				<slot />
+			{/if}
+			<slot name="text" />
+		</div>
+	</div>
 </div>
 
-
 <style>
-
-    .callout {
-        padding: 15px 25px;
-        border-radius: var(--box-radius);    
-        /* line-height: var(--line-height-content); */
-    }
-
-    .callout.soft {
-        background-color: var(--accent-light);
-    }
-
-    .callout.info {
-        background-color: var(--blue-light);
-        color: var(--blue-dark);
-    }
-
-    .callout.warning {
-        background-color: var(--orange-light);
-        color: var(--orange-dark)
-    }
-
-    .callout.danger {
-        background-color: var(--red-light);
-        color: var(--red-dark);
-    }
-
-    .callout.success {
-        background-color: var(--green-light);
-        color: var(--green-dark);
-    }
-
-    .title-wrap {
-        margin-bottom: 4px;
-        display: flex;
-        align-items: center;
-        font-weight: 600;
-        font-size: 18px;
-    }
-
-    .title-icon {
-        vertical-align: middle;
-        margin-right: 8px;
-    }
-
-    .text-wrap {
-        display: flex;
-        align-items: flex-start;
-    }
-
-    .icon {
-        margin-right: 8px;
-        font-size: 18px;
-    }
-
-</style>
+	.callout {
+		padding: 15px 25px;
+		border-radius: var(--box-radius);
+		/* line-height: var(--line-height-content); */
+	}
+
+	.callout.soft {
+		background-color: var(--accent-light);
+	}
+
+	.callout.info {
+		background-color: var(--blue-light);
+		color: var(--blue-dark);
+	}
+
+	.callout.warning {
+		background-color: var(--orange-light);
+		color: var(--orange-dark);
+	}
+
+	.callout.danger {
+		background-color: var(--red-light);
+		color: var(--red-dark);
+	}
+
+	.callout.success {
+		background-color: var(--green-light);
+		color: var(--green-dark);
+	}
+
+	.title-wrap {
+		margin-bottom: 4px;
+		display: flex;
+		align-items: center;
+		font-weight: 600;
+		font-size: 18px;
+	}
+
+	.title-icon {
+		vertical-align: middle;
+		margin-right: 8px;
+	}
+
+	.text-wrap {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.icon {
+		margin-right: 8px;
+		font-size: 18px;
+	}
+</style>

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         type?: "danger" | "success" | "warning" | "info" | "soft" | undefined;
+        title?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Checkbox/Checkbox.svelte

@@ -23,127 +23,119 @@ function handleChange() {
 }
 </script>
 
-<span 
-    class="checkbox-wrap"
->
-    <label>
-        <input
-            type="checkbox"
-            bind:checked
-            bind:this={input}
-            disabled={disabled}
-
-            on:keyup
-            on:keydown
-            on:keypress
-            on:focus
-            on:blur
-            on:click
-            on:mouseover
-            on:mouseenter
-            on:mouseleave
-            on:change
-
-            {...$$restProps}
-
-            on:change={handleChange}
-
-        />
-        <span class="placeholder" />
-        {#if $$slots.default}
-            <span class="label">
-                <slot />
-            </span>
-        {/if}
-    </label>
+<span class="checkbox-wrap">
+	<label>
+		<input
+			type="checkbox"
+			bind:checked
+			bind:this={input}
+			{disabled}
+			on:keyup
+			on:keydown
+			on:keypress
+			on:focus
+			on:blur
+			on:click
+			on:mouseover
+			on:mouseenter
+			on:mouseleave
+			on:change
+			{...$$restProps}
+			on:change={handleChange}
+		/>
+		<span class="placeholder" />
+		{#if $$slots.default}
+			<span class="label">
+				<slot />
+			</span>
+		{/if}
+	</label>
 </span>
 
 <style>
-
-    .label {
-        margin-left: 8px;
-    }
-
-    .checkbox-wrap {
-        position: relative;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
-    }
-
-    .checkbox-wrap label {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    input {
-        position: absolute;
-        opacity: 0;
-        width:0;
-        height:0;
-    }
-
-    span.placeholder {
-        display: inline-block;
-        width:16px; 
-        height:16px;
-        background-color: var(--input);
-        border-radius: 2px;
-        outline: 1px solid var(--accent);
-        position: relative;
-    }
-
-    span.placeholder:focus-visible {
-        box-shadow: 0 0 0 4px var(--accent-light);
-    }
-
-    /* the check icon */
-    span.placeholder:after {
-        content: "";
-        position: absolute;
-        display: none;
-        
-        /* check icon */
-        left: 4.5px;
-        top: 1px;
-        width: 4px;
-        height: 9px;
-        border: solid var(--accent-text);
-        border-width: 0 3px 3px 0;
-        transform: rotate(45deg);
-        transition: .2s box-shadow;
-    }
-    
-    .checkbox-wrap:hover span.placeholder {
-        box-shadow: 0 0 0 3px var(--accent-light);
-    }
-    
-    input:checked ~ span.placeholder {
-        background-color: var(--accent)!important;
-    }
-
-    input:focus ~ span.placeholder {
-        box-shadow: 0 0 0 4px var(--accent-light);
-    }
-
-    input:checked ~ span.placeholder:after {
-        display:block;
-    }
-
-     /* disabled styles */
-     input:disabled ~ span.placeholder {
-        background-color: var(--accent-light);
-        border: none !important;
-        opacity: 0.2;
-        cursor: not-allowed;
-        box-shadow: none !important;
-
-    }
-
-    input:disabled:checked ~ span.placeholder:after {
-        display: none;
-        pointer-events: none;
-    }
-</style>
+	.label {
+		margin-left: 8px;
+	}
+
+	.checkbox-wrap {
+		position: relative;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		vertical-align: middle;
+	}
+
+	.checkbox-wrap label {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	span.placeholder {
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		background-color: var(--input);
+		border-radius: 2px;
+		outline: 1px solid var(--accent);
+		position: relative;
+	}
+
+	span.placeholder:focus-visible {
+		box-shadow: 0 0 0 4px var(--accent-light);
+	}
+
+	/* the check icon */
+	span.placeholder:after {
+		content: '';
+		position: absolute;
+		display: none;
+
+		/* check icon */
+		left: 4.5px;
+		top: 1px;
+		width: 4px;
+		height: 9px;
+		border: solid var(--accent-text);
+		border-width: 0 3px 3px 0;
+		transform: rotate(45deg);
+		transition: 0.2s box-shadow;
+	}
+
+	.checkbox-wrap:hover span.placeholder {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
+
+	input:checked ~ span.placeholder {
+		background-color: var(--accent) !important;
+	}
+
+	input:focus ~ span.placeholder {
+		box-shadow: 0 0 0 4px var(--accent-light);
+	}
+
+	input:checked ~ span.placeholder:after {
+		display: block;
+	}
+
+	/* disabled styles */
+	input:disabled ~ span.placeholder {
+		background-color: var(--accent-light);
+		border: none !important;
+		opacity: 0.2;
+		cursor: not-allowed;
+		box-shadow: none !important;
+	}
+
+	input:disabled:checked ~ span.placeholder:after {
+		display: none;
+		pointer-events: none;
+	}
+</style>

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -12,26 +12,29 @@ import getCode, {} from "./getCode.js";
 <pre class="language-{languageCode} hljs"><code>{@html getCode(code, languageCode)}</code></pre>
 
 <style>
-    /*styles for CodeBlock component */
-    pre {
-        text-align: left;
-        white-space: pre;
-        word-spacing: normal;
-        word-break: normal;
-        word-wrap: normal;
-        overflow: auto;
-        border-radius: 20px;
-        padding: 20px;
-        line-height: 1.1;
-    }
-    pre code {
-        all: unset;
-        font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        tab-size: 4;
-        hyphens: none;
-    }
-
-
-</style>
+	/*styles for CodeBlock component */
+	pre {
+		text-align: left;
+		white-space: pre;
+		word-spacing: normal;
+		word-break: normal;
+		word-wrap: normal;
+		overflow: auto;
+		border-radius: 20px;
+		padding: 20px;
+		line-height: 1.1;
+	}
+	pre code {
+		all: unset;
+		font-family:
+			Consolas,
+			Monaco,
+			Andale Mono,
+			Ubuntu Mono,
+			monospace;
+		font-size: 14px;
+		line-height: 1.5;
+		tab-size: 4;
+		hyphens: none;
+	}
+</style>

package/dist/components/CodeBlock/getCode.js

@@ -14,24 +14,24 @@ hljs.registerLanguage('json', json);
 export default function getCode(code, language) {
     let ret = code;
     // remove the first empty line
-    ret = ret.replace(/^[^\S\r\n]*\n/, "");
+    ret = ret.replace(/^[^\S\r\n]*\n/, '');
     // remove the last empty line
-    ret = ret.replace(/\n[^\S\r\n]*$/, "");
-    let lines = ret.split("\n");
+    ret = ret.replace(/\n[^\S\r\n]*$/, '');
+    let lines = ret.split('\n');
     let indent = null; // number of spaces to remove from each line
-    lines = lines.map(line => {
+    lines = lines.map((line) => {
         if (indent === null) {
             // find the indent
             const match = line.match(/^(\s*)/);
             indent = match ? match[1].length : 0;
         }
-        if (line.substring(0, indent).trim() !== "") {
+        if (line.substring(0, indent).trim() !== '') {
             return line;
         }
         // remove the indent
         line = line.substring(indent);
         return line;
     });
-    ret = lines.join("\n");
+    ret = lines.join('\n');
     return hljs.highlight(ret, { language }).value;
 }