Merge branch 'next' into 669-develope-rangeinput-range-selector-compo…

…nent

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ubeac/svelte",
-	"version": "0.0.3-next.164",
+	"version": "0.0.3-next.169",
 	"type": "module",
 	"svelte": "index.js",
 	"publishConfig": {

skeleton.md

@@ -77,7 +77,6 @@
 - DialogHeader
 - FormCheckboxGroup
 - FormFieldset
-- FormGroup
 - GoogleMapAutocomplete
 - Tab
 - TabHeader

src/app.d.ts

@@ -41,9 +41,6 @@ declare type NamedColors =
 	| 'green'
 	| 'teal'
 	| 'cyan'
-	| 'black'
-	| 'white'
-	| 'transparent'
 	| undefined
 
 declare type SocialMediaColors =
@@ -60,13 +57,15 @@ declare type SocialMediaColors =
 	| 'rss'
 	| 'flickr'
 	| 'bitbucket'
+	| 'linkedin'
+	| 'tabler'
 	| undefined
 
 declare type Colors = ThemeColors | NamedColors | SocialMediaColors
 
 declare type TextColors = Colors
 
-declare type BackgroundColors = ThemeColors | NamedColors | 'body'
+declare type BackgroundColors = ThemeColors | NamedColors | SocialMediaColors | 'body'
 
 declare type Opacities = '10' | '25' | '50' | '75' | undefined
 declare type TextOpacities = '25' | '50' | '75' | undefined

src/components/Base/El.types.ts

@@ -183,9 +183,6 @@ export const NAMED_COLOR_TYPES: NamedColors[] = [
 	'green',
 	'teal',
 	'cyan',
-	'black',
-	'white',
-	'transparent',
 ]
 
 export const BACKGROUND_COLOR_TYPES: BackgroundColors[] = [...THEME_COLOR_TYPES, ...NAMED_COLOR_TYPES, 'body']

src/components/Divider/Divider.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { El } from '$lib/components'
-	import type { DividerProps } from '$lib/components'
+	import { type DividerProps, El } from '$lib/components'
 
 	type $$Props = DividerProps
 

src/components/Fieldset/Fieldset.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { El, type FieldsetProps } from '$lib/components'
+
+	type $$Props = FieldsetProps
+
+	/**
+	 * Set Css Prefix for the Fieldset
+	 */
+	export let cssPrefix: $$Props['cssPrefix'] = 'fieldset'
+</script>
+
+<El {...$$restProps} {cssPrefix}>
+	<slot />
+</El>

src/components/Fieldset/Fieldset.types.ts

@@ -0,0 +1,3 @@
+import type { ElProps } from '$lib/components'
+
+export interface FieldsetProps extends Partial<ElProps> {}

src/components/Fieldset/index.ts

@@ -0,0 +1,2 @@
+export { default as Fieldset } from './Fieldset.svelte'
+export * from './Fieldset.types'

src/components/Form/Form.types.ts

@@ -2,10 +2,11 @@ import type {
 	CheckboxGroupProps,
 	CheckboxProps,
 	ElProps,
+	RangeSliderProps,
+	FieldsetProps,
 	InputProps,
 	InputStates,
 	RadioGroupProps,
-	RangeSliderProps,
 	SelectProps,
 } from '$lib/components'
 
@@ -30,3 +31,6 @@ export interface FormRadioGroupProps extends Partial<FormFieldProps>, Partial<Ra
 export interface FormSelectProps extends Partial<FormFieldProps>, Partial<SelectProps> {}
 
 export interface FormRangeSliderProps extends Partial<FormFieldProps>, Partial<RangeSliderProps> {}
+
+export interface FormFieldsetProps extends Partial<FormFieldProps>, Partial<FieldsetProps> {}
+

src/components/Form/FormFieldset.svelte

@@ -1,32 +1,14 @@
 <script lang="ts">
-	import { get_current_component } from 'svelte/internal'
+	import { Fieldset, FormField, type FormFieldsetProps } from '$lib/components'
 
-	import { nanoid } from 'nanoid'
-
-	import { Label } from '$lib/components'
-	import { forwardEventsBuilder } from '$lib/directives'
-	import { classname } from '$lib/utils'
-
-	/**
-	 * Set id for HTML element
-	 */
-	export let id: string = nanoid(10)
-
-	/**
-	 * Set label for filedset
-	 */
-	export let label: string | undefined = undefined
-
-	const forwardEvents = forwardEventsBuilder(get_current_component())
-
-	$: classes = classname('form-fieldset', undefined, $$props.class)
+	type $$Props = FormFieldsetProps
+	export let cssPrefix: $$Props['cssPrefix'] = 'form-fieldset'
 </script>
 
-<div use:forwardEvents {...$$restProps} class={classes}>
-	{#if label}
-		<Label for={id}>{label}</Label>
-	{/if}
-	<fieldset>
+<FormField {...$$restProps} {cssPrefix}>
+	<slot name="label" />
+	<Fieldset>
 		<slot />
-	</fieldset>
-</div>
+	</Fieldset>
+	<slot name="hint" />
+</FormField>

src/components/Form/FormFileUploader.svelte

@@ -3,17 +3,11 @@
 
 	import { nanoid } from 'nanoid'
 
-	import { FormGroup, Icon, FileUploader, Label, Spinner } from '$lib/components'
+	import { FileUploader, FormField, Icon, Label, Spinner } from '$lib/components'
 	import { forwardEventsBuilder } from '$lib/directives'
 	import { classname } from '$lib/utils'
 
 	import { FormHint } from '.'
-	import FormField from './FormField.svelte'
-
-	/**
-	 * Set Column width
-	 */
-	export let cols: string | number | boolean = '12'
 
 	/**
 	 * Sets an icon inside component
@@ -60,7 +54,7 @@
 	$: classes = classname('form-file-uploader', undefined, $$props.class)
 </script>
 
-<FormField {cols} class={classes}>
+<FormField class={classes}>
 	<slot name="label">
 		{#if label}
 			<Label for="form-file-uploader-{id}" {required}>{label}</Label>

src/components/Form/index.ts

@@ -4,7 +4,6 @@ export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte'
 export { default as FormDatePicker } from './FormDatePicker.svelte'
 export { default as FormFieldset } from './FormFieldset.svelte'
 export { default as FormFileUploader } from './FormFileUploader.svelte'
-export { default as FormGroup } from './FormGroup.svelte'
 export { default as FormHint } from './FormHint.svelte'
 export { default as FormInput } from './FormInput.svelte'
 export { default as FormRadioGroup } from './FormRadioGroup.svelte'

src/components/index.ts

@@ -16,6 +16,7 @@ export * from './Dialog'
 export * from './Divider'
 export * from './Doc'
 export * from './Dot'
+export * from './Fieldset'
 export * from './FileUploader'
 export * from './Form'
 export * from './Footer'

src/routes/+layout.svelte

@@ -637,18 +637,3 @@
 		</El>
 	</AppFooter>
 </App>
-
-<style global>
-	.u-preview-body > * {
-		margin: 0 0.2rem 0.8rem 0.2rem;
-		vertical-align: top;
-	}
-
-	.u-card-body > h2 {
-		margin-top: 1.75rem !important;
-	}
-	.u-preview-body > :last-child {
-		margin: 0 0.2rem 0 0.2rem !important;
-		vertical-align: top !important;
-	}
-</style>

src/routes/docs/+layout.svelte

@@ -71,4 +71,12 @@
 		margin: 0 0.2rem 0 0.2rem !important;
 		vertical-align: top !important;
 	}
+
+	.u-card-body > h2 {
+		margin-top: 1.75rem !important;
+	}
+	.u-preview-body > :last-child {
+		margin: 0 0.2rem 0 0.2rem !important;
+		vertical-align: top !important;
+	}
 </style>

src/routes/docs/components/alert/+page.svelte

@@ -68,7 +68,7 @@
 	<AlertImportant />
 </Preview>
 
-<Doc title="Alret Show/Hide">If you want show or hide your alert you can do it with if property.</Doc>
+<Doc title="Alert Show/Hide">If you want show or hide your alert you can do it with if property.</Doc>
 <Preview src="./AlertShow.svelte">
 	<AlertShow />
 </Preview>

src/routes/docs/components/alert/AlertColor.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Alert, COLORS } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert title="Wow! Everything worked!" color="success">
-	<div class="text-muted">Your account has been saved!</div>
+	<El textMuted>Your account has been saved!</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="info">
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="warning">
-	<div class="text-muted">Sorry! There was a problem with your request.</div>
+	<El textMuted>Sorry! There was a problem with your request.</El>
 </Alert>
 <Alert title="I'm so sorry…" color="danger">
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>

src/routes/docs/components/alert/AlertDismissible.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Alert, COLORS } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert dismissible title="Wow! Everything worked!" color="success">
-	<div class="text-muted">Your account has been saved!</div>
+	<El textMuted>Your account has been saved!</El>
 </Alert>
 <Alert dismissible title="Wow! Everything worked!" color="info">
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert dismissible title="Wow! Everything worked!" color="warning">
-	<div class="text-muted">Sorry! There was a problem with your request.</div>
+	<El textMuted>Sorry! There was a problem with your request.</El>
 </Alert>
 <Alert dismissible title="I'm so sorry…" color="danger">
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>

src/routes/docs/components/alert/AlertIcon.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Alert } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert title="Wow! Everything worked!" color="success" icon="check">
-	<div class="text-muted">Your account has been saved!</div>
+	<El textMuted>Your account has been saved!</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="info" icon="info-circle">
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="warning" icon="alert-triangle">
-	<div class="text-muted">Sorry! There was a problem with your request.</div>
+	<El textMuted>Sorry! There was a problem with your request.</El>
 </Alert>
 <Alert title="I'm so sorry…" color="danger" icon="alert-circle">
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>

src/routes/docs/components/alert/AlertLink.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
-	import { Alert } from '@ubeac/svelte'
+	import { Alert, El } from '@ubeac/svelte'
 </script>
 
 <Alert title="Wow! Everything worked!" color="success">
 	This is a info alert — <a class="alert-link" href="/"> check it out!</a>
 </Alert>
 <Alert title="Wow! Everything worked!" color="info">
-	<svelte:fragment slot="title"
-		>This is a info alert — <a class="alert-link" href="/"> check it out!</a></svelte:fragment>
-	<div class="text-muted">Here is something that you might like to know.</div>
+	<svelte:fragment slot="title">
+		This is a info alert — <a class="alert-link" href="/"> check it out!</a>
+	</svelte:fragment>
+	<El textMuted>Here is something that you might like to know.</El>
 </Alert>
 <Alert title="Wow! Everything worked!" color="warning">
 	This is a info alert — <a class="alert-link" href="/"> check it out!</a>
 </Alert>
 <Alert title="I'm so sorry…" color="danger">
-	<svelte:fragment slot="title"
-		>This is a info alert — <a class="alert-link" href="/"> check it out!</a></svelte:fragment>
-	<div class="text-muted">Your account has been deleted and can't be restored.</div>
+	<svelte:fragment slot="title">
+		This is a info alert — <a class="alert-link" href="/"> check it out!</a>
+	</svelte:fragment>
+	<El textMuted>Your account has been deleted and can't be restored.</El>
 </Alert>

src/routes/docs/components/alert/AlertShow.svelte

@@ -7,15 +7,7 @@
 	let value = false
 </script>
 
-<El row>
-	<El col mb="4">
-		<Alert dismissible bind:value title="Wow! Everything worked!" color="success">
-			<div class="text-muted">Your account has been saved!</div>
-		</Alert>
-	</El>
-</El>
-<El row>
-	<El col>
-		<Button on:click={toggle}>Toggle</Button>
-	</El>
-</El>
+<Alert dismissible bind:value title="Wow! Everything worked!" color="success">
+	<El textMuted>Your account has been saved!</El>
+</Alert>
+<Button on:click={toggle}>Toggle Alert</Button>

src/routes/docs/components/fieldsets/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { Doc, Preview } from '$lib/components'
+	import FieldsetDefault from './FieldsetDefault.svelte'
+</script>
+
+<h1>Fieldset</h1>
+<p>
+	Group parts of your form to make it well-structured and clearer for users, using the <code>fieldset</code> element.
+</p>
+
+<Doc title="Defaults" />
+<Preview src="./FieldsetDefault.svelte">
+	<FieldsetDefault />
+</Preview>