fluid-ui-svelte 0.0.4 → 0.0.6

package/README.md

@@ -1,3 +1,105 @@
 # Fluid UI for Svelte/SvelteKit
 
-Under development
+Fluid UI is a UI library with minimal styling and layout. All of the primitives are basic abstractions of html elements and components are just building blocks for the actual component. You will need to build components yourself using those building blocks.
+
+# Getting Started
+
+Install the library.
+```
+npm i fluid-ui-svelte
+```
+
+Import a component to your UI.
+```
+<script lang="ts">
+	import '../app.css';
+	import {Button} from '$lib/index.js';
+</script>
+
+<Button></Button>
+```
+Success :)
+
+# Tailwind "app.css" Template.
+```
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.fluid-audio {
+    @apply m-2 p-2
+}
+
+.fluid-button {
+    @apply m-2 p-2 disabled:bg-opacity-25
+}
+
+.fluid-container {
+    @apply m-2 p-2
+}
+
+.fluid-form {
+    @apply m-2 p-2
+}
+
+.fluid-image {
+    @apply m-2 p-2
+}
+
+.fluid-color-input {
+    @apply m-2 p-2
+}
+
+.fluid-date-time-input {
+    @apply m-2 p-2
+}
+
+.fluid-file-input {
+    @apply m-2 p-2
+}
+
+.fluid-color-input {
+    @apply m-2 p-2
+}
+
+.fluid-color-input {
+    @apply m-2 p-2
+}
+
+.fluid-label {
+    @apply m-2 p-2
+}
+
+.fluid-link {
+    @apply m-2 p-2
+}
+
+.fluid-select {
+    @apply m-2 p-2
+}
+
+.fluid-option {
+    @apply m-2 p-2
+}
+
+.fluid-table {
+    @apply m-2 p-2
+}
+
+.fluid-text {
+    @apply m-2 p-2
+}
+
+.fluid-video {
+    @apply m-2 p-2
+}
+
+.fluid-avatar {
+    @apply m-2 p-2 rounded-full w-full h-full aspect-square
+}
+
+.fluid-toggle {
+    @apply bg-gray after:bg-graylight after:border-graylight w-11 h-6 rounded-full after:absolute after:top-[2px] after:left-[2px] after:border after:rounded-full after:h-5 after:w-5 after:transition-all
+}
+```

package/dist/components/Avatar/Avatar.svelte

@@ -1,5 +1,5 @@
 <script>import Image from "../../primitives/Image/Image.svelte";
-export let avatarClass = "rounded-full w-full h-full aspect-square";
+export let avatarClass = "";
 export let defaultClass = "fluid-avatar";
 export let overrideClass = false;
 export let avatarUrl;

package/dist/components/Modal/ModalContainer.svelte

@@ -1,12 +1,25 @@
 <script>import Container from "../../primitives/Container/Container.svelte";
 export let modalClass = "absolute w-screen h-screen left-0 bottom-0 bg-gray flex flex-col bg-opacity-50 justify-center items-center z-0";
 export let isVisible = true;
+const closeOnEscape = (event) => {
+  if (event.key == "Escape") {
+    isVisible = false;
+  }
+};
 </script>
 
-<Container
-	containerType="div"
-	overrideClass={true}
-	containerClass={(isVisible ? 'visible ' : 'hidden ') + modalClass}
->
-	<slot />
-</Container>
+{#if isVisible}
+	<Container
+		containerType="div"
+		overrideClass={true}
+		containerClass={modalClass}
+		registerMount={() => {
+			document.addEventListener('keydown', closeOnEscape);
+		}}
+		registerDestroy={() => {
+			document.removeEventListener('keydown', closeOnEscape);
+		}}
+	>
+		<slot />
+	</Container>
+{/if}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as ColorInput } from "./primitives/Input/ColorInput.svelte";
 export { default as DateTimeInput } from "./primitives/Input/DateTimeInput.svelte";
 export { default as FileInput } from "./primitives/Input/FileInput.svelte";
 export { default as TextInput } from "./primitives/Input/TextInput.svelte";
+export { default as PasswordInput } from "./primitives/Input/PasswordInput.svelte";
 export { default as ToggleInput } from "./primitives/Input/ToggleInput.svelte";
 export { default as Label } from "./primitives/Label/Label.svelte";
 export { default as Link } from "./primitives/Link/Link.svelte";

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as ColorInput } from './primitives/Input/ColorInput.svelte';
 export { default as DateTimeInput } from './primitives/Input/DateTimeInput.svelte';
 export { default as FileInput } from './primitives/Input/FileInput.svelte';
 export { default as TextInput } from './primitives/Input/TextInput.svelte';
+export { default as PasswordInput } from './primitives/Input/PasswordInput.svelte';
 export { default as ToggleInput } from './primitives/Input/ToggleInput.svelte';
 export { default as Label } from './primitives/Label/Label.svelte';
 export { default as Link } from "./primitives/Link/Link.svelte";

package/dist/primitives/Button/Button.svelte

@@ -5,9 +5,22 @@ export let buttonType = "button";
 export let isDisabled = false;
 export let buttonName = "";
 export let buttonValue = "";
+export let registerMount = () => {
+};
+export let registerDestroy = () => {
+};
+function registerAction(node) {
+  registerMount(node);
+  return {
+    destroy() {
+      registerDestroy(node);
+    }
+  };
+}
 </script>
 
 <button
+	use:registerAction
 	on:click
 	type={buttonType}
 	class={overrideClass ? buttonClass : defaultClass + ' ' + buttonClass}

package/dist/primitives/Button/Button.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         isDisabled?: boolean | undefined;
         buttonName?: string | undefined;
         buttonValue?: string | undefined;
+        registerMount?: ((node: Node) => void) | undefined;
+        registerDestroy?: ((node: Node) => void) | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/primitives/Container/Container.svelte

@@ -2,10 +2,23 @@
 export let defaultClass = "fluid-container";
 export let overrideClass = false;
 export let containerType = "div";
+export let registerMount = () => {
+};
+export let registerDestroy = () => {
+};
+function registerAction(node) {
+  registerMount(node);
+  return {
+    destroy() {
+      registerDestroy();
+    }
+  };
+}
 </script>
 
 {#if containerType == 'div'}
 	<div
+		use:registerAction
 		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
 		{...$$restProps}
 	>
@@ -13,6 +26,7 @@ export let containerType = "div";
 	</div>
 {:else if containerType == 'section'}
 	<section
+		use:registerAction
 		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
 		{...$$restProps}
 	>
@@ -20,6 +34,7 @@ export let containerType = "div";
 	</section>
 {:else if containerType == 'nav'}
 	<nav
+		use:registerAction
 		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
 		{...$$restProps}
 	>
@@ -27,6 +42,7 @@ export let containerType = "div";
 	</nav>
 {:else if containerType == 'footer'}
 	<nav
+		use:registerAction
 		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
 		{...$$restProps}
 	>

package/dist/primitives/Container/Container.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         defaultClass?: string | undefined;
         overrideClass?: boolean | undefined;
         containerType?: "div" | "section" | "nav" | "footer" | undefined;
+        registerMount?: Function | undefined;
+        registerDestroy?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/primitives/Input/ColorInput.svelte

@@ -1,9 +1,11 @@
 <script>export let inputClass = "input";
 export let defaultClass = "fluid-color-input";
 export let overrideClass = false;
+export let value = "";
 </script>
 
 <input
+	bind:value
 	type="color"
 	class={overrideClass ? inputClass : defaultClass + ' ' + inputClass}
 	{...$$restProps}

package/dist/primitives/Input/ColorInput.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         inputClass?: string | undefined;
         defaultClass?: string | undefined;
         overrideClass?: boolean | undefined;
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/primitives/Input/DateTimeInput.svelte

@@ -1,12 +1,12 @@
-<script>export let inputType = "date";
-export let inputClass = "";
+<script>export let inputClass = "";
 export let defaultClass = "fluid-date-time-input";
 export let overrideClass = false;
+export let value = "";
 </script>
 
 <input
-	type={inputType}
+	bind:value
+	type="date"
 	class={overrideClass ? inputClass : defaultClass + ' ' + inputClass}
-	{...$$restProps}
 />
 a

package/dist/primitives/Input/DateTimeInput.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        inputType?: "date" | "datetime-local" | "month" | "time" | "week" | undefined;
         inputClass?: string | undefined;
         defaultClass?: string | undefined;
         overrideClass?: boolean | undefined;
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/primitives/Input/FileInput.svelte

@@ -1,11 +1,6 @@
-<script>export let inputType = "file";
-export let inputClass = "";
+<script>export let inputClass = "";
 export let defaultClass = "fluid-file-input";
 export let overrideClass = false;
 </script>
 
-<input
-	type={inputType}
-	class={overrideClass ? inputClass : defaultClass + ' ' + inputClass}
-	{...$$restProps}
-/>
+<input type="file" class={overrideClass ? inputClass : defaultClass + ' ' + inputClass} />

package/dist/primitives/Input/FileInput.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        inputType?: "file" | "image" | undefined;
         inputClass?: string | undefined;
         defaultClass?: string | undefined;
         overrideClass?: boolean | undefined;

package/dist/primitives/Input/PasswordInput.svelte

@@ -0,0 +1,11 @@
+<script>export let inputClass = "";
+export let defaultClass = "fluid-text-input";
+export let overrideClass = false;
+export let value = "";
+</script>
+
+<input
+	bind:value
+	type="password"
+	class={overrideClass ? inputClass : defaultClass + ' ' + inputClass}
+/>

package/dist/primitives/Input/PasswordInput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        inputClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        value?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordInputProps = typeof __propDef.props;
+export type PasswordInputEvents = typeof __propDef.events;
+export type PasswordInputSlots = typeof __propDef.slots;
+export default class PasswordInput extends SvelteComponent<PasswordInputProps, PasswordInputEvents, PasswordInputSlots> {
+}
+export {};

package/dist/primitives/Input/TextInput.svelte

@@ -1,11 +1,11 @@
-<script>export let inputType = "text";
-export let inputClass = "";
+<script>export let inputClass = "";
 export let defaultClass = "fluid-text-input";
 export let overrideClass = false;
+export let value = "";
 </script>
 
 <input
-	type={inputType}
+	bind:value
+	type="text"
 	class={overrideClass ? inputClass : defaultClass + ' ' + inputClass}
-	{...$$restProps}
 />

package/dist/primitives/Input/TextInput.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        inputType?: "number" | "email" | "password" | "search" | "tel" | "text" | "url" | undefined;
         inputClass?: string | undefined;
         defaultClass?: string | undefined;
         overrideClass?: boolean | undefined;
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/primitives/Input/ToggleInput.svelte

@@ -1,11 +1,12 @@
-<script>export let inputType = "checkbox";
-export let inputClass = "input";
-export let defaultClass = "fluid-toggle-input";
-export let overrideClass = false;
+<script>export let defaultClass = "fluid-toggle";
+export let isChecked = false;
 </script>
 
-<input
-	type={inputType}
-	class={overrideClass ? inputClass : defaultClass + ' ' + inputClass}
-	{...$$restProps}
-/>
+<label class="relative inline-flex items-center cursor-pointer">
+	<input type="checkbox" bind:value={isChecked} class="sr-only peer" />
+	<div
+		class={defaultClass +
+			' ' +
+			"peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] peer-checked:bg-green"}
+	/>
+</label>

package/dist/primitives/Input/ToggleInput.svelte.d.ts

@@ -1,11 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        inputType?: "checkbox" | "radio" | undefined;
-        inputClass?: string | undefined;
         defaultClass?: string | undefined;
-        overrideClass?: boolean | undefined;
+        isChecked?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,7 +1,11 @@
 {
 	"name": "fluid-ui-svelte",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"description": "Unopinionated UI library for Svelte.",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ayazemre/fluid-ui-svelte.git"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",