diff --git a/package.json b/package.json index f469bfa7..3445e983 100644 --- a/package.json +++ b/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": { diff --git a/skeleton.md b/skeleton.md index 4118e83b..f0cc4e64 100644 --- a/skeleton.md +++ b/skeleton.md @@ -77,7 +77,6 @@ - DialogHeader - FormCheckboxGroup - FormFieldset -- FormGroup - GoogleMapAutocomplete - Tab - TabHeader diff --git a/src/app.d.ts b/src/app.d.ts index 7f184808..0d4e2c9e 100644 --- a/src/app.d.ts +++ b/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 diff --git a/src/components/Base/El.types.ts b/src/components/Base/El.types.ts index 3f25423f..df433874 100644 --- a/src/components/Base/El.types.ts +++ b/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'] diff --git a/src/components/Divider/Divider.svelte b/src/components/Divider/Divider.svelte index 8181b7ca..763c9bff 100644 --- a/src/components/Divider/Divider.svelte +++ b/src/components/Divider/Divider.svelte @@ -1,6 +1,5 @@ + + + + diff --git a/src/components/Fieldset/Fieldset.types.ts b/src/components/Fieldset/Fieldset.types.ts new file mode 100644 index 00000000..a0131962 --- /dev/null +++ b/src/components/Fieldset/Fieldset.types.ts @@ -0,0 +1,3 @@ +import type { ElProps } from '$lib/components' + +export interface FieldsetProps extends Partial {} diff --git a/src/components/Fieldset/index.ts b/src/components/Fieldset/index.ts new file mode 100644 index 00000000..aef1afe2 --- /dev/null +++ b/src/components/Fieldset/index.ts @@ -0,0 +1,2 @@ +export { default as Fieldset } from './Fieldset.svelte' +export * from './Fieldset.types' diff --git a/src/components/Form/Form.types.ts b/src/components/Form/Form.types.ts index 15d15cd1..b73c74de 100644 --- a/src/components/Form/Form.types.ts +++ b/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, Partial, Partial {} export interface FormRangeSliderProps extends Partial, Partial {} + +export interface FormFieldsetProps extends Partial, Partial {} + diff --git a/src/components/Form/FormFieldset.svelte b/src/components/Form/FormFieldset.svelte index 9948dd49..efc2f3e0 100644 --- a/src/components/Form/FormFieldset.svelte +++ b/src/components/Form/FormFieldset.svelte @@ -1,32 +1,14 @@ -
- {#if label} - - {/if} -
+ + +
-
-
+ + + diff --git a/src/components/Form/FormFileUploader.svelte b/src/components/Form/FormFileUploader.svelte index a522594c..36cb8c5b 100644 --- a/src/components/Form/FormFileUploader.svelte +++ b/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) - + {#if label} diff --git a/src/components/Form/FormGroup.svelte b/src/components/Form/FormGroup.svelte deleted file mode 100644 index 4bc42758..00000000 --- a/src/components/Form/FormGroup.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - - -
- -
- -
- -
- -
- -
-
- -
- -
- -
-
- diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts index 6264aabb..00750cba 100644 --- a/src/components/Form/index.ts +++ b/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' diff --git a/src/components/index.ts b/src/components/index.ts index 35428363..a43ef2c6 100644 --- a/src/components/index.ts +++ b/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' diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6b00e83c..a53b22d7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -637,18 +637,3 @@ - - diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 2ecaeb08..3957deb8 100644 --- a/src/routes/docs/+layout.svelte +++ b/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; + } diff --git a/src/routes/docs/components/alert/+page.svelte b/src/routes/docs/components/alert/+page.svelte index 370d492e..1edd9798 100644 --- a/src/routes/docs/components/alert/+page.svelte +++ b/src/routes/docs/components/alert/+page.svelte @@ -68,7 +68,7 @@ -If you want show or hide your alert you can do it with if property. +If you want show or hide your alert you can do it with if property. diff --git a/src/routes/docs/components/alert/AlertColor.svelte b/src/routes/docs/components/alert/AlertColor.svelte index 90e9c005..b65704a2 100644 --- a/src/routes/docs/components/alert/AlertColor.svelte +++ b/src/routes/docs/components/alert/AlertColor.svelte @@ -1,16 +1,16 @@ -
Your account has been saved!
+ Your account has been saved! -
Here is something that you might like to know.
+ Here is something that you might like to know. -
Sorry! There was a problem with your request.
+ Sorry! There was a problem with your request. -
Your account has been deleted and can't be restored.
+ Your account has been deleted and can't be restored. diff --git a/src/routes/docs/components/alert/AlertDismissible.svelte b/src/routes/docs/components/alert/AlertDismissible.svelte index 01f0e5cb..b57ec9f6 100644 --- a/src/routes/docs/components/alert/AlertDismissible.svelte +++ b/src/routes/docs/components/alert/AlertDismissible.svelte @@ -1,16 +1,16 @@ -
Your account has been saved!
+ Your account has been saved! -
Here is something that you might like to know.
+ Here is something that you might like to know. -
Sorry! There was a problem with your request.
+ Sorry! There was a problem with your request. -
Your account has been deleted and can't be restored.
+ Your account has been deleted and can't be restored. diff --git a/src/routes/docs/components/alert/AlertIcon.svelte b/src/routes/docs/components/alert/AlertIcon.svelte index d716d9bb..f78a2858 100644 --- a/src/routes/docs/components/alert/AlertIcon.svelte +++ b/src/routes/docs/components/alert/AlertIcon.svelte @@ -1,16 +1,16 @@ -
Your account has been saved!
+ Your account has been saved! -
Here is something that you might like to know.
+ Here is something that you might like to know. -
Sorry! There was a problem with your request.
+ Sorry! There was a problem with your request. -
Your account has been deleted and can't be restored.
+ Your account has been deleted and can't be restored. diff --git a/src/routes/docs/components/alert/AlertLink.svelte b/src/routes/docs/components/alert/AlertLink.svelte index a097238c..e6675a13 100644 --- a/src/routes/docs/components/alert/AlertLink.svelte +++ b/src/routes/docs/components/alert/AlertLink.svelte @@ -1,20 +1,22 @@ This is a info alert — check it out! - This is a info alert — check it out! -
Here is something that you might like to know.
+ + This is a info alert — check it out! + + Here is something that you might like to know. This is a info alert — check it out! - This is a info alert — check it out! -
Your account has been deleted and can't be restored.
+ + This is a info alert — check it out! + + Your account has been deleted and can't be restored. diff --git a/src/routes/docs/components/alert/AlertShow.svelte b/src/routes/docs/components/alert/AlertShow.svelte index 772e7681..a10987fc 100644 --- a/src/routes/docs/components/alert/AlertShow.svelte +++ b/src/routes/docs/components/alert/AlertShow.svelte @@ -7,15 +7,7 @@ let value = false - - - -
Your account has been saved!
- - - - - - - - + + Your account has been saved! + + diff --git a/src/routes/docs/components/fieldsets/+page.svelte b/src/routes/docs/components/fieldsets/+page.svelte new file mode 100644 index 00000000..24ad2d33 --- /dev/null +++ b/src/routes/docs/components/fieldsets/+page.svelte @@ -0,0 +1,14 @@ + + +

Fieldset

+

+ Group parts of your form to make it well-structured and clearer for users, using the fieldset element. +

+ + + + + diff --git a/src/routes/docs/components/fieldsets/FieldsetDefault.svelte b/src/routes/docs/components/fieldsets/FieldsetDefault.svelte new file mode 100644 index 00000000..ff1dc3cf --- /dev/null +++ b/src/routes/docs/components/fieldsets/FieldsetDefault.svelte @@ -0,0 +1,11 @@ + + +
+ + + + + I agree to the terms and conditions +
diff --git a/src/routes/docs/components/icons/+page.svelte b/src/routes/docs/components/icons/+page.svelte deleted file mode 100644 index 040096f5..00000000 --- a/src/routes/docs/components/icons/+page.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - -

Icons

- - - - - - - - - - - - - - - - - - - - diff --git a/src/routes/docs/components/el/+page.svelte b/src/routes/docs/core/+page.svelte similarity index 100% rename from src/routes/docs/components/el/+page.svelte rename to src/routes/docs/core/+page.svelte diff --git a/src/routes/docs/components/el/BackgroundColor.svelte b/src/routes/docs/core/BackgroundColor.svelte similarity index 100% rename from src/routes/docs/components/el/BackgroundColor.svelte rename to src/routes/docs/core/BackgroundColor.svelte diff --git a/src/routes/docs/components/el/BackgroundGradient.svelte b/src/routes/docs/core/BackgroundGradient.svelte similarity index 100% rename from src/routes/docs/components/el/BackgroundGradient.svelte rename to src/routes/docs/core/BackgroundGradient.svelte diff --git a/src/routes/docs/components/el/BackgroundOpacity.svelte b/src/routes/docs/core/BackgroundOpacity.svelte similarity index 100% rename from src/routes/docs/components/el/BackgroundOpacity.svelte rename to src/routes/docs/core/BackgroundOpacity.svelte diff --git a/src/routes/docs/components/el/BorderAdditive.svelte b/src/routes/docs/core/BorderAdditive.svelte similarity index 100% rename from src/routes/docs/components/el/BorderAdditive.svelte rename to src/routes/docs/core/BorderAdditive.svelte diff --git a/src/routes/docs/components/el/BorderColor.svelte b/src/routes/docs/core/BorderColor.svelte similarity index 100% rename from src/routes/docs/components/el/BorderColor.svelte rename to src/routes/docs/core/BorderColor.svelte diff --git a/src/routes/docs/components/el/BorderRadius.svelte b/src/routes/docs/core/BorderRadius.svelte similarity index 100% rename from src/routes/docs/components/el/BorderRadius.svelte rename to src/routes/docs/core/BorderRadius.svelte diff --git a/src/routes/docs/components/el/BorderRadiusSize.svelte b/src/routes/docs/core/BorderRadiusSize.svelte similarity index 100% rename from src/routes/docs/components/el/BorderRadiusSize.svelte rename to src/routes/docs/core/BorderRadiusSize.svelte diff --git a/src/routes/docs/components/el/BorderSubtractive.svelte b/src/routes/docs/core/BorderSubtractive.svelte similarity index 100% rename from src/routes/docs/components/el/BorderSubtractive.svelte rename to src/routes/docs/core/BorderSubtractive.svelte diff --git a/src/routes/docs/components/el/BorderWidth.svelte b/src/routes/docs/core/BorderWidth.svelte similarity index 100% rename from src/routes/docs/components/el/BorderWidth.svelte rename to src/routes/docs/core/BorderWidth.svelte diff --git a/src/routes/docs/core/contents/colors/+page.svelte b/src/routes/docs/core/contents/colors/+page.svelte new file mode 100644 index 00000000..6c67f9e0 --- /dev/null +++ b/src/routes/docs/core/contents/colors/+page.svelte @@ -0,0 +1,37 @@ + + +

Colors

+ + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + diff --git a/src/routes/docs/core/contents/colors/ColorsNamed.svelte b/src/routes/docs/core/contents/colors/ColorsNamed.svelte new file mode 100644 index 00000000..820be054 --- /dev/null +++ b/src/routes/docs/core/contents/colors/ColorsNamed.svelte @@ -0,0 +1,16 @@ + + +Blue +Azure +Indigo +Purple +Pink +Red +Orange +Yellow +Lime +Green +Teal +Cyan diff --git a/src/routes/docs/core/contents/colors/ColorsSocial.svelte b/src/routes/docs/core/contents/colors/ColorsSocial.svelte new file mode 100644 index 00000000..316dd2c7 --- /dev/null +++ b/src/routes/docs/core/contents/colors/ColorsSocial.svelte @@ -0,0 +1,19 @@ + + +facebook +twitter +google +youtube +vimeo +linkedin +dribbble +github +instagram +pinterest +vk +rss +flickr +bitbucket +tabler diff --git a/src/routes/docs/core/contents/colors/ColorsTheme.svelte b/src/routes/docs/core/contents/colors/ColorsTheme.svelte new file mode 100644 index 00000000..708aa2f3 --- /dev/null +++ b/src/routes/docs/core/contents/colors/ColorsTheme.svelte @@ -0,0 +1,12 @@ + + +Primary +Secondary +Success +Warning +Danger +Info +Light +Dark diff --git a/src/routes/docs/core/contents/icons/+page.svelte b/src/routes/docs/core/contents/icons/+page.svelte new file mode 100644 index 00000000..2bd3c073 --- /dev/null +++ b/src/routes/docs/core/contents/icons/+page.svelte @@ -0,0 +1,57 @@ + + +

Icons

+

+ Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful. + See the icons documentation from tabler-icons. +

+ + + To use an icon, set the name prop to the icon name. + + + + + + + Set the color prop to change your icons color. + + + + + + + To use a filled icon, set the filled prop to true. + + + + + + + To use a different icon size, set the size prop to sm, md or lg, + xl, + 1x, + 2x, + 3x, + 4x, + 5x, + 6x, + 7x, + 8x, + 9x. + + + + + +TODO + + + diff --git a/src/routes/docs/components/icons/IconAnimation.svelte b/src/routes/docs/core/contents/icons/IconAnimation.svelte similarity index 100% rename from src/routes/docs/components/icons/IconAnimation.svelte rename to src/routes/docs/core/contents/icons/IconAnimation.svelte diff --git a/src/routes/docs/components/icons/IconColors.svelte b/src/routes/docs/core/contents/icons/IconColors.svelte similarity index 100% rename from src/routes/docs/components/icons/IconColors.svelte rename to src/routes/docs/core/contents/icons/IconColors.svelte diff --git a/src/routes/docs/components/icons/IconDefault.svelte b/src/routes/docs/core/contents/icons/IconDefault.svelte similarity index 100% rename from src/routes/docs/components/icons/IconDefault.svelte rename to src/routes/docs/core/contents/icons/IconDefault.svelte diff --git a/src/routes/docs/components/icons/IconFilled.svelte b/src/routes/docs/core/contents/icons/IconFilled.svelte similarity index 100% rename from src/routes/docs/components/icons/IconFilled.svelte rename to src/routes/docs/core/contents/icons/IconFilled.svelte diff --git a/src/routes/docs/components/icons/IconSizes.svelte b/src/routes/docs/core/contents/icons/IconSizes.svelte similarity index 100% rename from src/routes/docs/components/icons/IconSizes.svelte rename to src/routes/docs/core/contents/icons/IconSizes.svelte diff --git a/src/routes/docs/core/contents/typography/+page.svelte b/src/routes/docs/core/contents/typography/+page.svelte new file mode 100644 index 00000000..623cc9ff --- /dev/null +++ b/src/routes/docs/core/contents/typography/+page.svelte @@ -0,0 +1,68 @@ + + +

Typography

+

+ El component has a tag string property. This property can be used to create any HTML + element. For example, to create a h1 element, you can use the following code: +

+ + + El component can be used to create headings. Headings are used to create a hierarchy of information on a page. + They are used to create a visual hierarchy of information on a page. + + + + + + + Organize longer pieces of text into paragraphs using El component by setting tag="p". + + + + + + + Use a variety of semantic text elements, depending of how you want to display particular fragments of content. + El component can be used to create semantic text elements. For example, to create a strong + element, you can use the following code: + + {`This text is important`} + + + +
+ +
+ + + + We have a Divider component to create horizontal rules. The default slot can be used to + create a label for the divider. For more information, see Divider component. + + + + + + + El component has a textTransform property. This property can be used to transform text into + uppercase, + lowercase, or capitalize. + + + + + + diff --git a/src/routes/docs/core/contents/typography/TypographyDivider.svelte b/src/routes/docs/core/contents/typography/TypographyDivider.svelte new file mode 100644 index 00000000..d004e455 --- /dev/null +++ b/src/routes/docs/core/contents/typography/TypographyDivider.svelte @@ -0,0 +1,23 @@ + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. + + + + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem + ipsum dolor sit amet. + +Rule text + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. + +Rule text + + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem + ipsum dolor sit amet. + diff --git a/src/routes/docs/core/contents/typography/TypographyHeadings.svelte b/src/routes/docs/core/contents/typography/TypographyHeadings.svelte new file mode 100644 index 00000000..46ee78da --- /dev/null +++ b/src/routes/docs/core/contents/typography/TypographyHeadings.svelte @@ -0,0 +1,10 @@ + + +H1 Heading +H2 Heading +H3 Heading +H4 Heading +H5 Heading +H6 Heading diff --git a/src/routes/docs/core/contents/typography/TypographyParagraph.svelte b/src/routes/docs/core/contents/typography/TypographyParagraph.svelte new file mode 100644 index 00000000..0934182d --- /dev/null +++ b/src/routes/docs/core/contents/typography/TypographyParagraph.svelte @@ -0,0 +1,10 @@ + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. + + +At vero eos et accusam et justo duo dolores et ea rebum. diff --git a/src/routes/docs/core/contents/typography/TypographySemantic.svelte b/src/routes/docs/core/contents/typography/TypographySemantic.svelte new file mode 100644 index 00000000..0217c271 --- /dev/null +++ b/src/routes/docs/core/contents/typography/TypographySemantic.svelte @@ -0,0 +1,21 @@ + + +I18N +Bold +Citation +Hello World! +Deleted +Emphasis +Italic +Inserted +Ctrl + S +Highlighted +Strikethrough +Sample +Text Subscripted +Text Superscripted +20:00 +Underline +x = y + 2 diff --git a/src/routes/docs/core/contents/typography/TypographyTextTransform.svelte b/src/routes/docs/core/contents/typography/TypographyTextTransform.svelte new file mode 100644 index 00000000..1edfd457 --- /dev/null +++ b/src/routes/docs/core/contents/typography/TypographyTextTransform.svelte @@ -0,0 +1,7 @@ + + +Lowercased text. +Uppercased text. +Capitalized text. diff --git a/src/routes/docs/form/form-fieldsets/+page.svelte b/src/routes/docs/form/form-fieldsets/+page.svelte new file mode 100644 index 00000000..ed6c4759 --- /dev/null +++ b/src/routes/docs/form/form-fieldsets/+page.svelte @@ -0,0 +1,14 @@ + + +

Form Fieldset

+

+ Group parts of your form to make it well-structured and clearer for users, using the fieldset element. +

+ + + + + diff --git a/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte new file mode 100644 index 00000000..4afa96a7 --- /dev/null +++ b/src/routes/docs/form/form-fieldsets/FormFieldsetDefault.svelte @@ -0,0 +1,11 @@ + + + + + + + + I agree to the terms and conditions + diff --git a/src/routes/docs/icons/+page.svelte b/src/routes/docs/icons/+page.svelte deleted file mode 100644 index 8cff8cb6..00000000 --- a/src/routes/docs/icons/+page.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -

Icons

-

- Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful. - See the icons documentation from tabler-icons. -

- -

Examples

- - - - -

Color

-

- Set the color prop to change your icons color. -

- - - - -

Size

-

- Set the size prop to change your icons size. -

- - - diff --git a/src/routes/docs/icons/IconColor.svelte b/src/routes/docs/icons/IconColor.svelte deleted file mode 100644 index 95154210..00000000 --- a/src/routes/docs/icons/IconColor.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/src/routes/docs/icons/IconDefault.svelte b/src/routes/docs/icons/IconDefault.svelte deleted file mode 100644 index e1cc109c..00000000 --- a/src/routes/docs/icons/IconDefault.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/src/routes/docs/icons/IconSize.svelte b/src/routes/docs/icons/IconSize.svelte deleted file mode 100644 index 93f2abef..00000000 --- a/src/routes/docs/icons/IconSize.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/routes/docs/index.ts b/src/routes/docs/index.ts index 684a9188..52a770de 100644 --- a/src/routes/docs/index.ts +++ b/src/routes/docs/index.ts @@ -1,5 +1,6 @@ export const base_path: string = '/docs/' export const base_component_path: string = base_path + 'components/' +export const base_core_path: string = base_path + 'core/' export const base_common_path: string = base_path + 'common/' export const base_form_path: string = base_path + 'form/' @@ -12,7 +13,28 @@ export const navigations = [ { route: base_path + 'getting-started/installation', title: 'Installation', - icon: 'icons', + icon: 'star', + }, + ], + }, + { + title: 'Core Features', + id: 'core-features', + children: [ + { + route: base_core_path + 'contents/typography', + title: 'Typography', + icon: 'star', + }, + { + route: base_core_path + 'contents/colors', + title: 'Colors', + icon: 'star', + }, + { + route: base_core_path + 'contents/icons', + title: 'Icons', + icon: 'star', }, ], }, @@ -101,8 +123,8 @@ export const navigations = [ icon: 'star', }, { - route: base_component_path + 'el', - title: 'El', + route: base_component_path + 'fieldsets', + title: 'Fieldset', icon: 'star', }, { @@ -120,11 +142,6 @@ export const navigations = [ title: 'Grid', icon: 'star', }, - { - route: base_component_path + 'icons', - title: 'Icon', - icon: 'star', - }, { route: base_component_path + 'inputs', title: 'Input', @@ -272,6 +289,11 @@ export const navigations = [ title: 'FormDatePicker', icon: 'star', }, + { + route: base_form_path + 'form-fieldsets', + title: 'FormFieldset', + icon: 'star', + }, { route: base_form_path + 'form-input', title: 'Form Input', @@ -304,17 +326,6 @@ export const navigations = [ }, ], }, - { - title: 'Icons', - id: 'menu-icons', - children: [ - { - route: base_path + 'icons', - title: 'Icons', - icon: 'icons', - }, - ], - }, { title: 'Pages', id: 'menu-pages', diff --git a/src/scss/tabler/_variables.scss b/src/scss/tabler/_variables.scss index 538bdc70..d5fea724 100644 --- a/src/scss/tabler/_variables.scss +++ b/src/scss/tabler/_variables.scss @@ -20,6 +20,7 @@ $prefix-divider: $prefix + 'divider' !default; $prefix-dialog: $prefix + 'dialog' !default; $prefix-dialog-container: $prefix + 'dialog-container' !default; $prefix-dot: $prefix + 'dot' !default; +$prefix-fieldset: $prefix + 'fieldset' !default; $prefix-footer: $prefix + 'footer' !default; $prefix-icon: $prefix + 'icon' !default; $prefix-input: $prefix + 'input' !default; diff --git a/src/scss/tabler/components/_fieldset.scss b/src/scss/tabler/components/_fieldset.scss new file mode 100644 index 00000000..d20f5f85 --- /dev/null +++ b/src/scss/tabler/components/_fieldset.scss @@ -0,0 +1,7 @@ +// +// Fieldset +// + +.#{$prefix-fieldset} { + @extend .form-fieldset; +} \ No newline at end of file diff --git a/src/scss/tabler/components/el.scss b/src/scss/tabler/components/el.scss index a6a1f199..b119862c 100644 --- a/src/scss/tabler/components/el.scss +++ b/src/scss/tabler/components/el.scss @@ -203,7 +203,9 @@ $container-breakpoints: ( ); $props: ( - bg-gradient: '.bg-gradient', + bg:(color: generate_props($theme_colors, ('.bg-')), + gradient: '.bg-gradient', + ), border: '.border', max-width-100: '.mw-100', max-height-100: '.mh-100', @@ -212,10 +214,19 @@ $props: ( show: '.show', lead: '.lead', blockquote: '.blockquote', - container: (generate_props($container-breakpoints, ('.container-'))) + container: (generate_props($container-breakpoints, ('.container-'))), + text:(truncate: '.text-truncate', + muted: '.text-muted', + color: (generate_props($theme_colors, ('.text-'))), + opacity: (generate_props($text-opacities, ('.text-'))), + transform:(lowercase: '.text-lowercase', + uppercase: '.text-uppercase', + capitalize: '.text-capitalize', + )) ); .#{$prefix-el} { + @include apply-props($props); &-col { @extend .col; @@ -269,26 +280,11 @@ $props: ( @each $key, $value in $theme_colors { - &-bg-color-#{$key} { - @extend .bg-#{$key}; - } - &-border-color-#{$key} { @extend .border-#{$key}; } } - @each $key, - $value in $theme_colors { - &-text-color-#{$key} { - @extend .text-#{$key}; - } - } - - &-text-truncate { - @extend .text-truncate; - } - @each $key, $value in $opacities { &-bg-opacity-#{$key} { @@ -302,13 +298,6 @@ $props: ( } } - @each $key, - $value in $text-opacities { - &-text-opacity-#{$key} { - @extend .text-opacity-#{$key}; - } - } - @each $display in $displays { @each $size in $displays-sizes { &-display-#{$size}-#{$display} { @@ -490,5 +479,5 @@ $props: ( } - @include apply-props($props); + } \ No newline at end of file diff --git a/src/scss/tabler/components/form/form-group.scss b/src/scss/tabler/components/form/form-group.scss deleted file mode 100644 index 37dcdd50..00000000 --- a/src/scss/tabler/components/form/form-group.scss +++ /dev/null @@ -1,59 +0,0 @@ -.u-form-group { - .outer, - .middle, - .inner { - align-items: center; - display: flex; - flex-grow: 1; - flex-wrap: nowrap; - } - - .outer { - column-gap: 10px; - } - - .inner { - background-color: #ffffff; - border-radius: 4px; - column-gap: 8px; - position: relative; - - & > *:not(.input):first-child { - margin-left: 10px; - } - - & > *:not(.input):last-child { - margin-right: 10px; - } - } - - .input { - flex-grow: 1; - & > *:not(.u-form-group-focus), - & > *:not(.u-form-group-focus):focus { - box-shadow: none; - border-color: transparent; - } - - & > *:not(.u-form-group-focus):focus ~ .u-form-group-focus { - color: inherit; - border-color: #90b5e2; - outline: 0; - box-shadow: 0 0 0 0.25rem rgb(32 107 196 / 25%); - } - - &:not(:first-child) > *:not(.u-form-group-focus) { - padding-right: 0; - padding-left: 0; - } - } - - .u-form-group-focus { - position: absolute; - inset: 0; - border: 1px solid #d9dbde; - border-radius: 4px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - pointer-events: none; - } -} diff --git a/src/scss/tabler/components/form/index.scss b/src/scss/tabler/components/form/index.scss index 9e2cceec..53868504 100644 --- a/src/scss/tabler/components/form/index.scss +++ b/src/scss/tabler/components/form/index.scss @@ -1,5 +1,4 @@ @import './form-field'; @import './form-fieldset'; -@import './form-group'; @import './form-hint'; @import './form-switch'; \ No newline at end of file diff --git a/src/scss/tabler/components/index.scss b/src/scss/tabler/components/index.scss index 53d81ebd..f21449d6 100644 --- a/src/scss/tabler/components/index.scss +++ b/src/scss/tabler/components/index.scss @@ -16,6 +16,7 @@ @import './dialog'; @import './divider'; @import './dot'; +@import './fieldset'; @import './form'; @import './footer'; @import './google-map';