sveltacular 0.0.74 → 0.0.76

package/README.md

@@ -1,31 +1,31 @@
-![Sveltacular](https://raw.githubusercontent.com/jasonbyrne/sveltacular/main/static/sveltacular.png)
-
-Sveltacular is TypeScript and SASS based component library for Svelte, with no other dependencies.
-
-Why did I create it when there are other options? Well, mainly because the best options out there were based on Tailwind. And, no disrespect to those who love it, but I didn't want to use Tailwind. So since I didn't find what I was loooking for, I made my own.
-
-## Run Storybook
-
-I don't have great documentation for now, but you can browse all of the available components by running Storybook locally. Check out the repo and then run this command:
-
-```bash
-npm run storybook
-```
-
-## Usage
-
-Install it in your project
-
-```bash
-npm i sveltacular
-```
-
-Then use it like this:
-
-```svelte
-<script lang="ts">
-	import { Button } from 'sveltacular';
-</script>
-
-<Button>Hello World</Button>
-```
+![Sveltacular](https://raw.githubusercontent.com/jasonbyrne/sveltacular/main/static/sveltacular.png)
+
+Sveltacular is TypeScript and SASS based component library for Svelte, with no other dependencies.
+
+Why did I create it when there are other options? Well, mainly because the best options out there were based on Tailwind. And, no disrespect to those who love it, but I didn't want to use Tailwind. So since I didn't find what I was loooking for, I made my own.
+
+## Run Storybook
+
+I don't have great documentation for now, but you can browse all of the available components by running Storybook locally. Check out the repo and then run this command:
+
+```bash
+npm run storybook
+```
+
+## Usage
+
+Install it in your project
+
+```bash
+npm i sveltacular
+```
+
+Then use it like this:
+
+```svelte
+<script lang="ts">
+	import { Button } from 'sveltacular';
+</script>
+
+<Button>Hello World</Button>
+```

package/dist/forms/bool-box/bool-box.svelte

@@ -14,6 +14,6 @@ $:
     { value: "true", name: options[0] },
     { value: "false", name: options[1] }
   ];
-</script>
-
-<ListBox {items} bind:value={stringValue} {size} on:change={onChange}><slot /></ListBox>
+</script>
+
+<ListBox {items} bind:value={stringValue} {size} on:change={onChange}><slot /></ListBox>

package/dist/forms/button/button.svelte

@@ -28,12 +28,12 @@ const click = (e) => {
     navigateTo(href);
   }
 };
-</script>
-
-<button {type} on:click={click} class="{size} {style} {flex ? 'flex' : ''}" class:block class:noMargin class:collapse {disabled}>
-	<slot />
-</button>
-
+</script>
+
+<button {type} on:click={click} class="{size} {style} {flex ? 'flex' : ''}" class:block class:noMargin class:collapse {disabled}>
+	<slot />
+</button>
+
 <style>button {
   display: inline-block;
   min-width: 10rem;
@@ -164,4 +164,4 @@ button.link {
 }
 button.link:hover {
   color: var(--base-link-hover-fg, #1e88e5);
-}</style>
+}</style>

package/dist/forms/check-box/check-box-group.svelte

@@ -21,17 +21,17 @@ const onChecked = () => {
   dispatch("change", { selected: group });
 };
 onChecked();
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div>
-		{#each items as item}
-			<CheckBox {disabled} value={item.value} bind:isChecked={item.isChecked} on:change={onChecked}
-				>{item.name}</CheckBox
-			>
-		{/each}
-	</div>
-</FormField>
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div>
+		{#each items as item}
+			<CheckBox {disabled} value={item.value} bind:isChecked={item.isChecked} on:change={onChecked}
+				>{item.name}</CheckBox
+			>
+		{/each}
+	</div>
+</FormField>

package/dist/forms/check-box/check-box.svelte

@@ -12,28 +12,28 @@ const onChecked = (event) => {
   isChecked = target.checked;
   dispatch("change", { isChecked, value });
 };
-</script>
-
-<label>
-	<input
-		type="checkbox"
-		{id}
-		{disabled}
-		{name}
-		bind:value
-		bind:checked={isChecked}
-		on:change={onChecked}
-	/>
-	<span class="checkbox">
-		<span class="checkmark"><CheckIcon /></span>
-	</span>
-	{#if $$slots.default}
-		<div class="text">
-			<slot />
-		</div>
-	{/if}
-</label>
-
+</script>
+
+<label>
+	<input
+		type="checkbox"
+		{id}
+		{disabled}
+		{name}
+		bind:value
+		bind:checked={isChecked}
+		on:change={onChecked}
+	/>
+	<span class="checkbox">
+		<span class="checkmark"><CheckIcon /></span>
+	</span>
+	{#if $$slots.default}
+		<div class="text">
+			<slot />
+		</div>
+	{/if}
+</label>
+
 <style>label {
   display: flex;
   align-items: center;
@@ -81,4 +81,4 @@ label input:checked + .checkbox {
 label input:checked + .checkbox .checkmark {
   width: 100%;
   height: 100%;
-}</style>
+}</style>

package/dist/forms/combo/new-or-existing-combo.svelte

@@ -16,59 +16,59 @@ export let searchable = false;
 export let search = void 0;
 export let searchPlaceholder = "Search";
 export let newPlaceholder = "New";
-</script>
-
-<div class="group">
-	<FlexRow>
-		<div class="labels">
-			<FlexCol>
-				<div class="radio">
-					<RadioBox value="existing" bind:group={mode}>Existing:</RadioBox>
-				</div>
-				<div class="radio">
-					<RadioBox value="new" bind:group={mode}>New:</RadioBox>
-				</div>
-			</FlexCol>
-		</div>
-		<div class="inputs">
-			<FlexCol>
-				<div class="input">
-					<ListBox
-						bind:value={existingValue}
-						{searchable}
-						{search}
-						{required}
-						{items}
-						{size}
-						placeholder={searchPlaceholder}
-						disabled={disabled || mode == 'new'}
-					/>
-				</div>
-				<div class="input">
-					<TextBox
-						bind:value={newValue}
-						{size}
-						placeholder={newPlaceholder}
-						disabled={disabled || mode == 'existing'}
-					/>
-				</div>
-			</FlexCol>
-		</div>
-	</FlexRow>
-</div>
-
-<style>
-	.labels {
-		flex-shrink: 1;
-	}
-	.inputs {
-		flex-grow: 1;
-	}
-	.radio,
-	.input {
-		height: 2.5rem;
-	}
-	.radio {
-		padding-top: 0.1rem;
-	}
-</style>
+</script>
+
+<div class="group">
+	<FlexRow>
+		<div class="labels">
+			<FlexCol>
+				<div class="radio">
+					<RadioBox value="existing" bind:group={mode}>Existing:</RadioBox>
+				</div>
+				<div class="radio">
+					<RadioBox value="new" bind:group={mode}>New:</RadioBox>
+				</div>
+			</FlexCol>
+		</div>
+		<div class="inputs">
+			<FlexCol>
+				<div class="input">
+					<ListBox
+						bind:value={existingValue}
+						{searchable}
+						{search}
+						{required}
+						{items}
+						{size}
+						placeholder={searchPlaceholder}
+						disabled={disabled || mode == 'new'}
+					/>
+				</div>
+				<div class="input">
+					<TextBox
+						bind:value={newValue}
+						{size}
+						placeholder={newPlaceholder}
+						disabled={disabled || mode == 'existing'}
+					/>
+				</div>
+			</FlexCol>
+		</div>
+	</FlexRow>
+</div>
+
+<style>
+	.labels {
+		flex-shrink: 1;
+	}
+	.inputs {
+		flex-grow: 1;
+	}
+	.radio,
+	.input {
+		height: 2.5rem;
+	}
+	.radio {
+		padding-top: 0.1rem;
+	}
+</style>

package/dist/forms/date-box/date-box.svelte

@@ -47,31 +47,31 @@ if (!value) {
 }
 $:
   disabled = !enabled;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div class:nullable class:disabled>
-		<span class="input">
-			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} on:input={onInput} />
-		</span>
-		{#if nullable}
-			<span class="toggle">
-				<input type="checkbox" bind:checked={enabled} on:change={checkChanged} />
-			</span>
-		{/if}
-		{#if steps.length > 0}
-			<span class="steps">
-				{#each steps as step}
-					<Button noMargin={true} collapse={true} on:click={() => incrementValue(step)}>{step.label}</Button>
-				{/each}
-			</span>
-		{/if}
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div class:nullable class:disabled>
+		<span class="input">
+			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} on:input={onInput} />
+		</span>
+		{#if nullable}
+			<span class="toggle">
+				<input type="checkbox" bind:checked={enabled} on:change={checkChanged} />
+			</span>
+		{/if}
+		{#if steps.length > 0}
+			<span class="steps">
+				{#each steps as step}
+					<Button noMargin={true} collapse={true} on:click={() => incrementValue(step)}>{step.label}</Button>
+				{/each}
+			</span>
+		{/if}
+	</div>
+</FormField>
+
 <style>input {
   width: 100%;
   padding: 0.5rem 1rem;
@@ -114,4 +114,4 @@ div.disabled input {
   background-color: #f5f5f5;
   border-color: #e0e0e0;
   color: #a0a0a0;
-}</style>
+}</style>

package/dist/forms/file-area/file-area.svelte

@@ -56,36 +56,36 @@ $:
   draggingClass = isDragging ? "isDragging" : "";
 $:
   filesSelectedText = selectedFiles.length ? `${selectedFiles.length} file${selectedFiles.length > 1 ? "s" : ""} selected` : "";
-</script>
-
-<div
-	class="dropzone {filesClass} {enabledClass} {draggingClass}"
-	data-file-count={selectedFiles.length}
->
-	<label
-		on:drop={dropFiles}
-		on:dragenter={dragStart}
-		on:dragstart={dragStart}
-		on:dragover={dragStart}
-		on:dragend={dragStop}
-		on:dragleave={dragStop}
-		on:dragexit={dragStop}
-	>
-		<input type="file" id="upload-button" accept="image/*" on:change={selectFiles} {disabled} />
-		<div class="icon"><UploadIcon /></div>
-		<div class="text">
-			{#if $$slots.default}
-				<slot />
-			{:else}
-				<span>Drop file or click to select</span>
-			{/if}
-			{#if filesSelectedText}
-				<span class="file-count">{filesSelectedText}</span>
-			{/if}
-		</div>
-	</label>
-</div>
-
+</script>
+
+<div
+	class="dropzone {filesClass} {enabledClass} {draggingClass}"
+	data-file-count={selectedFiles.length}
+>
+	<label
+		on:drop={dropFiles}
+		on:dragenter={dragStart}
+		on:dragstart={dragStart}
+		on:dragover={dragStart}
+		on:dragend={dragStop}
+		on:dragleave={dragStop}
+		on:dragexit={dragStop}
+	>
+		<input type="file" id="upload-button" accept="image/*" on:change={selectFiles} {disabled} />
+		<div class="icon"><UploadIcon /></div>
+		<div class="text">
+			{#if $$slots.default}
+				<slot />
+			{:else}
+				<span>Drop file or click to select</span>
+			{/if}
+			{#if filesSelectedText}
+				<span class="file-count">{filesSelectedText}</span>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input[type=file] {
   display: none;
 }
@@ -135,4 +135,4 @@ $:
   display: block;
   font-size: 0.75rem;
   margin-top: 0.5rem;
-}</style>
+}</style>

package/dist/forms/file-box/file-box.svelte

@@ -11,28 +11,28 @@ export let readonly = false;
 export let multiple = false;
 export let mimeTypes = [];
 export let capture = void 0;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div>
-		<input
-			{id}
-			{placeholder}
-			{multiple}
-			bind:value
-			type="file"
-			{disabled}
-			{readonly}
-			{required}
-			accept={mimeTypes.join(',')}
-			{capture}
-		/>
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div>
+		<input
+			{id}
+			{placeholder}
+			{multiple}
+			bind:value
+			type="file"
+			{disabled}
+			{readonly}
+			{required}
+			accept={mimeTypes.join(',')}
+			{capture}
+		/>
+	</div>
+</FormField>
+
 <style>input {
   width: 100%;
   padding: 0.5rem 1rem;
@@ -50,4 +50,4 @@ export let capture = void 0;
 input::placeholder {
   color: var(--form-input-placeholder, #888);
   font-style: italic;
-}</style>
+}</style>

package/dist/forms/form-field.svelte

@@ -10,13 +10,13 @@ $:
   displayType = ["xl", "full"].includes(size) ? "block" : "inline-block";
 $:
   maxWidth = maxWidthMap[size];
-</script>
-
-<div style={`display: ${displayType}; width: 100%; min-width: 10rem; max-width: ${maxWidth}`}>
-	<slot />
-</div>
-
+</script>
+
+<div style={`display: ${displayType}; width: 100%; min-width: 10rem; max-width: ${maxWidth}`}>
+	<slot />
+</div>
+
 <style>div {
   margin-bottom: 1rem;
   margin-right: 1rem;
-}</style>
+}</style>

package/dist/forms/form-footer.svelte

@@ -1,15 +1,15 @@
-<script>
-	import FlexRow from '../layout/flex-row.svelte';
-</script>
-
-<div>
-	<FlexRow layout="stretch">
-		<slot />
-	</FlexRow>
-</div>
-
-<style>
-	div {
-		margin-top: 1.5rem;
-	}
-</style>
+<script>
+	import FlexRow from '../layout/flex-row.svelte';
+</script>
+
+<div>
+	<FlexRow layout="stretch">
+		<slot />
+	</FlexRow>
+</div>
+
+<style>
+	div {
+		margin-top: 1.5rem;
+	}
+</style>

package/dist/forms/form-header.svelte

@@ -1,18 +1,18 @@
 <script>import Headline from "../typography/headline.svelte";
 export let level = 4;
 export let underline = true;
-</script>
-
-<div class:underline>
-	<Headline {level}>
-		<slot />
-	</Headline>
-</div>
-
+</script>
+
+<div class:underline>
+	<Headline {level}>
+		<slot />
+	</Headline>
+</div>
+
 <style>div {
   margin-bottom: 1rem;
 }
 div.underline {
   padding-bottom: 0.5rem;
   border-bottom: solid 1px var(--divider-color, rgba(127, 127, 127, 0.5));
-}</style>
+}</style>

package/dist/forms/form-label.svelte

@@ -1,10 +1,10 @@
 <script>export let id = void 0;
 export let required = false;
 export let disabled = false;
-</script>
-
-<label for={id} class:required class:disabled><slot /></label>
-
+</script>
+
+<label for={id} class:required class:disabled><slot /></label>
+
 <style>label {
   display: block;
   margin-bottom: 0.5rem;
@@ -16,4 +16,4 @@ label.required::after {
 label.disabled {
   opacity: 0.5;
   cursor: not-allowed;
-}</style>
+}</style>

package/dist/forms/form-section.svelte

@@ -1,17 +1,17 @@
 <script>import FormHeader from "./form-header.svelte";
 export let title = void 0;
 export let level = 4;
-</script>
-
-<section>
-	{#if title}
-		<FormHeader {level}>{title}</FormHeader>
-	{/if}
-	<slot />
-</section>
-
-<style>
-	section {
-		margin-bottom: 1rem;
-	}
-</style>
+</script>
+
+<section>
+	{#if title}
+		<FormHeader {level}>{title}</FormHeader>
+	{/if}
+	<slot />
+</section>
+
+<style>
+	section {
+		margin-bottom: 1rem;
+	}
+</style>

package/dist/forms/form.svelte

@@ -9,10 +9,10 @@ const onSubmit = (e) => {
   e.preventDefault();
   dispatch("submit");
 };
-</script>
-
-<Section {title} {size}>
-	<form {method} {action} on:submit={onSubmit}>
-		<slot />
-	</form>
-</Section>
+</script>
+
+<Section {title} {size}>
+	<form {method} {action} on:submit={onSubmit}>
+		<slot />
+	</form>
+</Section>