fluid-ui-svelte 0.0.1 → 0.0.3

package/README.md

@@ -1,58 +1,3 @@
-# create-svelte
+# Fluid UI for Svelte/SvelteKit
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+Under development

package/dist/components/Accordion/AccordionContent.svelte

@@ -0,0 +1,12 @@
+<script>import Container from "../../primitives/Container/Container.svelte";
+export let accordionContentClass = "m-2 p-2";
+export let isVisible;
+</script>
+
+<Container
+	containerType="div"
+	overrideClass={true}
+	containerClass={(isVisible ? 'visible ' : 'hidden ') + accordionContentClass}
+>
+	<slot />
+</Container>

package/dist/components/Accordion/AccordionContent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        accordionContentClass?: string | undefined;
+        isVisible: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordionContentProps = typeof __propDef.props;
+export type AccordionContentEvents = typeof __propDef.events;
+export type AccordionContentSlots = typeof __propDef.slots;
+export default class AccordionContent extends SvelteComponent<AccordionContentProps, AccordionContentEvents, AccordionContentSlots> {
+}
+export {};

package/dist/components/Accordion/AccordionHeader.svelte

@@ -0,0 +1,11 @@
+<script>import Container from "../../primitives/Container/Container.svelte";
+import Button from "../../primitives/Button/Button.svelte";
+export let accordionHeaderClass = "flex justify-between bg-blue m-2 p-2";
+export let accordionButtonClass = "w-full";
+</script>
+
+<Button on:click buttonType="button" buttonClass={accordionButtonClass} overrideClass={true}>
+	<Container containerType="div" overrideClass={true} containerClass={accordionHeaderClass}>
+		<slot />
+	</Container>
+</Button>

package/dist/components/Accordion/AccordionHeader.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        accordionHeaderClass?: string | undefined;
+        accordionButtonClass?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordionHeaderProps = typeof __propDef.props;
+export type AccordionHeaderEvents = typeof __propDef.events;
+export type AccordionHeaderSlots = typeof __propDef.slots;
+export default class AccordionHeader extends SvelteComponent<AccordionHeaderProps, AccordionHeaderEvents, AccordionHeaderSlots> {
+}
+export {};

package/dist/components/Accordion/AccordionWrapper.svelte

@@ -0,0 +1,7 @@
+<script>import Container from "../../primitives/Container/Container.svelte";
+export let accordionClass = "flex flex-col bg-green";
+</script>
+
+<Container containerType="div" overrideClass={true} containerClass={accordionClass}>
+	<slot />
+</Container>

package/dist/components/Accordion/AccordionWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        accordionClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordionWrapperProps = typeof __propDef.props;
+export type AccordionWrapperEvents = typeof __propDef.events;
+export type AccordionWrapperSlots = typeof __propDef.slots;
+export default class AccordionWrapper extends SvelteComponent<AccordionWrapperProps, AccordionWrapperEvents, AccordionWrapperSlots> {
+}
+export {};

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,12 @@
+<script>import Image from "../../primitives/Image/Image.svelte";
+export let avatarClass = "rounded-full w-full h-full aspect-square";
+export let defaultClass = "fluid-avatar";
+export let overrideClass = false;
+export let avatarUrl;
+</script>
+
+<Image
+	imageSource={avatarUrl}
+	overrideClass={true}
+	imageClass={overrideClass ? avatarClass : defaultClass + ' ' + avatarClass}
+/>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        avatarClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        avatarUrl: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/dist/components/FileDropzone/FileDrop.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FileDropProps */
+/** @typedef {typeof __propDef.events}  FileDropEvents */
+/** @typedef {typeof __propDef.slots}  FileDropSlots */
+export default class FileDrop extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FileDropProps = typeof __propDef.props;
+export type FileDropEvents = typeof __propDef.events;
+export type FileDropSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Modal/ModalContainer.svelte

@@ -0,0 +1,12 @@
+<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;
+</script>
+
+<Container
+	containerType="div"
+	overrideClass={true}
+	containerClass={(isVisible ? 'visible ' : 'hidden ') + modalClass}
+>
+	<slot />
+</Container>

package/dist/components/Modal/ModalContainer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        modalClass?: string | undefined;
+        isVisible?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ModalContainerProps = typeof __propDef.props;
+export type ModalContainerEvents = typeof __propDef.events;
+export type ModalContainerSlots = typeof __propDef.slots;
+export default class ModalContainer extends SvelteComponent<ModalContainerProps, ModalContainerEvents, ModalContainerSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -1,5 +1,28 @@
-export { default as Button } from "./components/Button/Button.svelte";
-export { default as Accordion } from "./components/Accordion/Accordion.svelte";
-export { default as Container } from "./components/Container/Container.svelte";
-export { default as Input } from "./components/Input/Input.svelte";
-export { default as Text } from "./components/Text/Text.svelte";
+export { default as Audio } from "./primitives/Audio/Audio.svelte";
+export { default as Button } from "./primitives/Button/Button.svelte";
+export { default as Container } from "./primitives/Container/Container.svelte";
+export { default as Form } from "./primitives/Form/Form.svelte";
+export { default as Image } from "./primitives/Image/Image.svelte";
+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 ToggleInput } from "./primitives/Input/ToggleInput.svelte";
+export { default as Label } from "./primitives/Label/Label.svelte";
+export { default as Link } from "./primitives/Link/Link.svelte";
+export { default as Option } from "./primitives/Select/Option.svelte";
+export { default as Select } from "./primitives/Select/Select.svelte";
+export { default as Table } from "./primitives/Table/Table.svelte";
+export { default as TableBody } from "./primitives/Table/TableBody.svelte";
+export { default as TableDataCell } from "./primitives/Table/TableDataCell.svelte";
+export { default as TableFoot } from "./primitives/Table/TableFoot.svelte";
+export { default as TableHead } from "./primitives/Table/TableHead.svelte";
+export { default as TableHeader } from "./primitives/Table/TableHeader.svelte";
+export { default as TableRow } from "./primitives/Table/TableRow.svelte";
+export { default as Text } from "./primitives/Text/Text.svelte";
+export { default as Video } from "./primitives/Video/Video.svelte";
+export { default as AccordionWrapper } from "./components/Accordion/AccordionWrapper.svelte";
+export { default as AccordionContent } from "./components/Accordion/AccordionContent.svelte";
+export { default as AccordionHeader } from "./components/Accordion/AccordionHeader.svelte";
+export { default as Avatar } from "./components/Avatar/Avatar.svelte";
+export { default as ModalContainer } from "./components/Modal/ModalContainer.svelte";

package/dist/index.js

@@ -1,5 +1,33 @@
-export { default as Button } from './components/Button/Button.svelte';
-export { default as Accordion } from './components/Accordion/Accordion.svelte';
-export { default as Container } from './components/Container/Container.svelte';
-export { default as Input } from './components/Input/Input.svelte';
-export { default as Text } from "./components/Text/Text.svelte";
+//Primitives
+export { default as Audio } from './primitives/Audio/Audio.svelte';
+export { default as Button } from './primitives/Button/Button.svelte';
+export { default as Container } from './primitives/Container/Container.svelte';
+export { default as Form } from './primitives/Form/Form.svelte';
+export { default as Image } from "./primitives/Image/Image.svelte";
+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 ToggleInput } from './primitives/Input/ToggleInput.svelte';
+export { default as Label } from './primitives/Label/Label.svelte';
+export { default as Link } from "./primitives/Link/Link.svelte";
+export { default as Option } from "./primitives/Select/Option.svelte";
+export { default as Select } from "./primitives/Select/Select.svelte";
+export { default as Table } from "./primitives/Table/Table.svelte";
+export { default as TableBody } from "./primitives/Table/TableBody.svelte";
+export { default as TableDataCell } from "./primitives/Table/TableDataCell.svelte";
+export { default as TableFoot } from "./primitives/Table/TableFoot.svelte";
+export { default as TableHead } from "./primitives/Table/TableHead.svelte";
+export { default as TableHeader } from "./primitives/Table/TableHeader.svelte";
+export { default as TableRow } from "./primitives/Table/TableRow.svelte";
+export { default as Text } from "./primitives/Text/Text.svelte";
+export { default as Video } from "./primitives/Video/Video.svelte";
+
+//Components
+export { default as AccordionWrapper } from './components/Accordion/AccordionWrapper.svelte';
+export { default as AccordionContent } from './components/Accordion/AccordionContent.svelte';
+export { default as AccordionHeader } from './components/Accordion/AccordionHeader.svelte';
+export { default as Avatar } from './components/Avatar/Avatar.svelte';
+export { default as ModalContainer } from './components/Modal/ModalContainer.svelte';
+
+

package/dist/primitives/Audio/Audio.svelte

@@ -0,0 +1,22 @@
+<script>export let audioClass = "";
+export let defaultClass = "fluid-audio";
+export let overrideClass = false;
+export let src = "";
+export let isAutoPlay = false;
+export let isControls = false;
+export let isLoop = false;
+export let isMuted = false;
+export let preload = "auto";
+</script>
+
+<audio
+	on:play
+	class={overrideClass ? audioClass : defaultClass + ' ' + audioClass}
+	{src}
+	autoplay={isAutoPlay}
+	controls={isControls}
+	loop={isLoop}
+	muted={isMuted}
+	{preload}
+	{...$$restProps}
+/>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        audioClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        src?: string | undefined;
+        isAutoPlay?: boolean | undefined;
+        isControls?: boolean | undefined;
+        isLoop?: boolean | undefined;
+        isMuted?: boolean | undefined;
+        preload?: "auto" | "metadata" | "none" | undefined;
+    };
+    events: {
+        play: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AudioProps = typeof __propDef.props;
+export type AudioEvents = typeof __propDef.events;
+export type AudioSlots = typeof __propDef.slots;
+export default class Audio extends SvelteComponent<AudioProps, AudioEvents, AudioSlots> {
+}
+export {};

package/dist/primitives/Button/Button.svelte

@@ -0,0 +1,20 @@
+<script>export let buttonClass = "";
+export let defaultClass = "fluid-button";
+export let overrideClass = false;
+export let buttonType = "button";
+export let isDisabled = false;
+export let buttonName = "";
+export let buttonValue = "";
+</script>
+
+<button
+	on:click
+	type={buttonType}
+	class={overrideClass ? buttonClass : defaultClass + ' ' + buttonClass}
+	disabled={isDisabled}
+	name={buttonName}
+	value={buttonValue}
+	{...$$restProps}
+>
+	<slot />
+</button>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        buttonClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        buttonType?: "reset" | "submit" | "button" | undefined;
+        isDisabled?: boolean | undefined;
+        buttonName?: string | undefined;
+        buttonValue?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/primitives/Container/Container.svelte

@@ -0,0 +1,37 @@
+<script>export let containerClass = "";
+export let defaultClass = "fluid-container";
+export let overrideClass = false;
+export let containerType = "div";
+</script>
+
+{#if containerType == 'div'}
+	<div
+		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
+		{...$$restProps}
+	>
+		<slot />
+	</div>
+{:else if containerType == 'section'}
+	<section
+		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
+		{...$$restProps}
+	>
+		<slot />
+	</section>
+{:else if containerType == 'nav'}
+	<nav
+		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
+		{...$$restProps}
+	>
+		<slot />
+	</nav>
+{:else if containerType == 'footer'}
+	<nav
+		class={overrideClass ? containerClass : defaultClass + ' ' + containerClass}
+		{...$$restProps}
+	>
+		<slot />
+	</nav>
+{:else}
+	<p class="text-red">Container format error.</p>
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        containerClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        containerType?: "div" | "section" | "nav" | "footer" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ContainerProps = typeof __propDef.props;
+export type ContainerEvents = typeof __propDef.events;
+export type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponent<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};

package/dist/primitives/Form/Form.svelte

@@ -0,0 +1,13 @@
+<script>export let formClass = "";
+export let defaultClass = "fluid-form";
+export let overrideClass = false;
+export let formMethod = "get";
+export let formAction = "";
+</script>
+
+<form
+	action={formAction}
+	method={formMethod}
+	class={overrideClass ? formClass : defaultClass + ' ' + formClass}
+	{...$$restProps}
+/>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        formClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        formMethod?: "post" | "get" | "dialog" | undefined;
+        formAction?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+}
+export {};

package/dist/primitives/Image/Image.svelte

@@ -0,0 +1,13 @@
+<script>export let imageClass = "";
+export let defaultClass = "fluid-image";
+export let overrideClass = false;
+export let imageSource = "";
+export let altText = "";
+</script>
+
+<img
+	src={imageSource}
+	alt={altText}
+	class={overrideClass ? imageClass : defaultClass + ' ' + imageClass}
+	{...$$restProps}
+/>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        imageClass?: string | undefined;
+        defaultClass?: string | undefined;
+        overrideClass?: boolean | undefined;
+        imageSource?: string | undefined;
+        altText?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
+}
+export {};

package/dist/primitives/Input/ColorInput.svelte

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

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

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

package/dist/primitives/Input/DateTimeInput.svelte

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

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

@@ -0,0 +1,20 @@
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateTimeInputProps = typeof __propDef.props;
+export type DateTimeInputEvents = typeof __propDef.events;
+export type DateTimeInputSlots = typeof __propDef.slots;
+export default class DateTimeInput extends SvelteComponent<DateTimeInputProps, DateTimeInputEvents, DateTimeInputSlots> {
+}
+export {};

package/dist/primitives/Input/FileInput.svelte

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