diff --git a/src/Components/Flex.svelte b/src/Components/Flex.svelte new file mode 100644 index 0000000..b1e9126 --- /dev/null +++ b/src/Components/Flex.svelte @@ -0,0 +1,94 @@ + + +
+ +
diff --git a/src/Components/Grid.svelte b/src/Components/Grid.svelte new file mode 100644 index 0000000..89bfc90 --- /dev/null +++ b/src/Components/Grid.svelte @@ -0,0 +1,101 @@ + + +
+ +
diff --git a/src/Components/Page/Page.svelte b/src/Components/Page/Page.svelte index 89fc83e..b0be58c 100644 --- a/src/Components/Page/Page.svelte +++ b/src/Components/Page/Page.svelte @@ -18,88 +18,90 @@ import TextField from '../TextField/TextField.svelte'; import Tooltip from '../Tooltip/Tooltip.svelte'; import Table from './Table.svelte'; + import Flex from '../Flex.svelte'; + import Grid from '../Grid.svelte'; let select: Select; let petType: string; -
+
+ strokeWidth={$headerStyles.icon.stroke} + />
Pet Finder
Account
-
-
-
- - - - - + + + + + + + + -
- - -
I'm a tooltip!!!
- -
-
-
Found Dogs:
- - - - + + +
I'm a tooltip!!!
+ + + +
Found Dogs:
+
+
Dog Profile
- -
+ Doge -
-
Name: Doge
-
Gender: Female
-
DOB: Nov, 2 2005
-
+ + Name: Doge + Gender: Female + DOB: Nov, 2 2005 + Bio:

An Internet meme that became popular in 2013. The meme typically consists of a picture of a Shiba Inu dog accompanied by multicolored text in Comic Sans font in the foreground.

-
-
-
+ + +
-
+ -
+
- + diff --git a/src/Components/Page/Table.svelte b/src/Components/Page/Table.svelte index 4050402..ed015d5 100644 --- a/src/Components/Page/Table.svelte +++ b/src/Components/Page/Table.svelte @@ -1,56 +1,54 @@ -
-
+ +
-
Name
-
Type
-
Breed
-
Distance
-
-
+ class={`${$checkboxStyles.size.height || ''} ${ + $checkboxStyles.size.width || '' + }`} + /> + Name + Type + Breed + Distance + + -
Fido
-
Dog
-
Hound
-
10km
-
-
+ Fido + Dog + Hound + 10km + + -
Doge
-
Dog
-
Shiba Inu
-
1km
-
-
+ Doge + Dog + Shiba Inu + 1km + + -
Fifi
-
Dog
-
Poodle
-
7km
-
-
+ Fifi + Dog + Poodle + 7km + + -
Gaston
-
Dog
-
French Bulldog
-
5km
-
-
+ Gaston + Dog + French Bulldog + 5km + + -
Floyd
-
Dog
-
Pug
-
3km
-
-
+ Floyd + Dog + Pug + 3km + + diff --git a/src/Models/Align.ts b/src/Models/Align.ts new file mode 100644 index 0000000..48731ca --- /dev/null +++ b/src/Models/Align.ts @@ -0,0 +1,35 @@ +import type { Breakpoint } from './Breakpoint'; +type AlignContent = + | 'start' + | 'end' + | 'center' + | 'between' + | 'around' + | 'evenly'; + +type AlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch'; +type AlignSelf = 'start' | 'end' | 'center' | 'stretch' | 'auto'; + +const alignContentToStyle = (align?: AlignContent, bp?: Breakpoint): string => { + if (align) { + return align ? `${bp || ''}content-${align}` : ''; + } + return ''; +}; + +const alignItemsToStyle = (align?: AlignItems, bp?: Breakpoint): string => { + if (align) { + return align ? `${bp || ''}items-${align}` : ''; + } + return ''; +}; + +const alignSelfToStyle = (align?: AlignSelf, bp?: Breakpoint): string => { + if (align) { + return align ? `${bp || ''}self-${align}` : ''; + } + return ''; +}; + +export type { AlignContent, AlignItems, AlignSelf }; +export { alignContentToStyle, alignItemsToStyle, alignSelfToStyle }; diff --git a/src/Models/Breakpoint.ts b/src/Models/Breakpoint.ts new file mode 100644 index 0000000..3a82cfa --- /dev/null +++ b/src/Models/Breakpoint.ts @@ -0,0 +1,8 @@ +export enum Breakpoint { + None = '', + Sm = 'sm:', + Md = 'md:', + Lg = 'lg:', + Xl = 'xl:', + Xxl = '2xl:', +} diff --git a/src/Models/Flex.ts b/src/Models/Flex.ts new file mode 100644 index 0000000..216d9c6 --- /dev/null +++ b/src/Models/Flex.ts @@ -0,0 +1,154 @@ +import type { Breakpoint } from './Breakpoint'; +import { + AlignContent, + alignContentToStyle, + AlignItems, + alignItemsToStyle, + AlignSelf, + alignSelfToStyle, +} from './Align'; +import type { GapType, IGap, Gap } from './Gap'; +import { gapToStyle } from './Gap'; +import { + JustifyContent, + justifyContentToStyle, + JustifyItems, + JustifySelf, + justifySelfToStyle, +} from './Justify'; +import { Order, orderToStyle } from './Order'; +import { + PlaceContent, + placeContentToStyle, + PlaceItems, + placeItemsToStyle, + PlaceSelf, + placeSelfToStyle, +} from './Place'; +import { getStyles } from '../utils'; +import { + ColumnSpan, + ColumnStartEnd, + RowSpan, + RowStartEnd, + spanToStyle, + startEndToStyle, +} from './Grid'; + +type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse'; + +type FlexWrap = 'wrap' | 'wrap-reverse' | 'no-wrap'; + +type FlexSize = 'initial' | '1' | 'auto' | 'none'; + +type FlexGrow = 'grow' | 'grow-0'; + +type FlexShrink = 'shrink' | 'shrink-0'; + +const toStyle = (flex?: any, bp?: Breakpoint): string => { + if (flex) { + return flex ? `${bp || ''}flex-${flex}` : ''; + } + return ''; +}; + +const directionToStyle = (flex?: FlexDirection, bp?: Breakpoint): string => { + return toStyle(flex, bp); +}; + +const sizeToStyle = (flex?: FlexSize, bp?: Breakpoint): string => { + return toStyle(flex, bp); +}; + +const wrapToStyle = (flex?: FlexWrap, bp?: Breakpoint): string => { + return toStyle(flex, bp); +}; + +const growToStyle = (flex?: FlexGrow, bp?: Breakpoint): string => { + return toStyle(flex, bp); +}; + +const shrinkToStyle = (flex?: FlexShrink, bp?: Breakpoint): string => { + return toStyle(flex, bp); +}; + +interface IFlexLayout { + dir?: FlexDirection; + grow?: FlexGrow; + wrap?: FlexWrap; + size?: FlexSize; + shrink?: FlexShrink; + gap?: GapType; + justify?: JustifyContent; + alignContent?: AlignContent; + align?: AlignItems; + placeContent?: PlaceContent; + placeItems?: PlaceItems; + order?: Order; + colSpan?: ColumnSpan; + colStart?: ColumnStartEnd; + colEnd?: ColumnStartEnd; + rowSpan?: RowSpan; + rowStart?: RowStartEnd; + rowEnd?: RowStartEnd; + justifySelf?: JustifySelf; + alignSelf?: AlignSelf; + placeSelf?: PlaceSelf; +} + +const flexToStyle = (props?: IFlexLayout, bp?: Breakpoint) => { + if (props) { + return getStyles([ + props.dir || props.wrap ? `${bp || ''}flex` : '', + directionToStyle(props.dir, bp), + sizeToStyle(props.size, bp), + wrapToStyle(props.wrap, bp), + growToStyle(props.grow, bp), + shrinkToStyle(props.shrink, bp), + gapToStyle(props.gap, bp), + justifyContentToStyle(props.justify, bp), + alignContentToStyle(props.alignContent, bp), + alignItemsToStyle(props.align, bp), + placeContentToStyle(props.placeContent, bp), + placeItemsToStyle(props.placeItems, bp), + orderToStyle(props.order, bp), + spanToStyle('col', props.colSpan, bp), + startEndToStyle('col', 'start', props.colStart, bp), + startEndToStyle('col', 'end', props.colEnd), + spanToStyle('row', props.rowSpan, bp), + startEndToStyle('row', 'start', props.rowStart, bp), + startEndToStyle('row', 'end', props.rowEnd), + justifySelfToStyle(props.justifySelf, bp), + placeSelfToStyle(props.placeSelf, bp), + alignSelfToStyle(props.alignSelf, bp), + ]); + } + return ''; +}; + +export type { + IFlexLayout, + FlexDirection, + FlexGrow, + FlexWrap, + FlexSize, + FlexShrink, + GapType, + IGap, + Gap, + Order, + JustifyContent, + JustifyItems, + AlignContent, + AlignItems, + PlaceContent, + PlaceItems, +}; +export { + directionToStyle, + sizeToStyle, + wrapToStyle, + growToStyle, + shrinkToStyle, + flexToStyle, +}; diff --git a/src/Models/Gap.ts b/src/Models/Gap.ts new file mode 100644 index 0000000..a83a630 --- /dev/null +++ b/src/Models/Gap.ts @@ -0,0 +1,60 @@ +import type { Breakpoint } from './Breakpoint'; + +type Gap = + | 0 + | 0.5 + | 1 + | 1.5 + | 2 + | 2.5 + | 3 + | 3.5 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | 14 + | 16 + | 20 + | 24 + | 28 + | 32 + | 36 + | 40 + | 48 + | 52 + | 56 + | 60 + | 64 + | 72 + | 80 + | 96 + | 'px'; + +interface IGap { + x?: Gap; + y?: Gap; +} + +type GapType = IGap | Gap; + +const gapToStyle = (gap?: GapType, bp?: Breakpoint) => { + if (gap) { + if (typeof gap === 'object') { + return `${gap.x ? `${bp || ''}gap-x-${gap.x}` : ''} ${ + gap.y ? `${bp || ''}gap-y-${gap.y}` : '' + }`.trim(); + } else { + return `${bp || ''}gap-${gap}`; + } + } + return ''; +}; + +export type { IGap, Gap, GapType }; +export { gapToStyle }; diff --git a/src/Models/Grid.ts b/src/Models/Grid.ts new file mode 100644 index 0000000..467893d --- /dev/null +++ b/src/Models/Grid.ts @@ -0,0 +1,190 @@ +import { getStyles } from '../utils'; +import { + AlignContent, + alignContentToStyle, + AlignItems, + alignItemsToStyle, + AlignSelf, + alignSelfToStyle, +} from './Align'; +import type { Breakpoint } from './Breakpoint'; +import { + FlexGrow, + FlexShrink, + FlexSize, + growToStyle, + shrinkToStyle, + sizeToStyle, +} from './Flex'; +import type { GapType, IGap, Gap } from './Gap'; +import { gapToStyle } from './Gap'; +import { + JustifyContent, + justifyContentToStyle, + JustifyItems, + justifyItemsToStyle, + JustifySelf, + justifySelfToStyle, +} from './Justify'; +import { Order, orderToStyle } from './Order'; +import { + PlaceContent, + placeContentToStyle, + PlaceItems, + placeItemsToStyle, + PlaceSelf, + placeSelfToStyle, +} from './Place'; + +type Row = 1 | 2 | 3 | 4 | 5 | 6 | 'none'; +type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none'; +type ColumnSpan = + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | 'full' + | 'auto'; +type ColumnStartEnd = + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | 13 + | 'auto'; +type RowSpan = 1 | 2 | 3 | 4 | 5 | 6 | 'full' | 'auto'; +type RowStartEnd = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'auto'; +type Flow = 'row' | 'col' | 'row-dense' | 'col-dense'; +type Auto = 'auto' | 'min' | 'max' | 'fr'; +type StartOrEnd = 'start' | 'end'; +type ColOrRow = 'col' | 'row'; + +interface IGrid { + rows?: Row; + cols?: Column; + flow?: Flow; + rowAuto?: Auto; + colAuto?: Auto; + gap?: GapType; + justify?: JustifyContent; + justifyItems?: JustifyItems; + alignContent?: AlignContent; + align?: AlignItems; + placeContent?: PlaceContent; + placeItems?: PlaceItems; + order?: Order; + flexSize?: FlexSize; + flexShrink?: FlexShrink; + flexGrow?: FlexGrow; + colSpan?: ColumnSpan; + colStart?: ColumnStartEnd; + colEnd?: ColumnStartEnd; + rowSpan?: ColumnSpan; + rowStart?: ColumnStartEnd; + rowEnd?: ColumnStartEnd; + justifySelf?: JustifySelf; + alignSelf?: AlignSelf; + placeSelf?: PlaceSelf; +} + +const spanToStyle = ( + colOrRow: ColOrRow, + grid?: ColumnSpan, + bp?: Breakpoint +): string => { + if (grid) { + return grid + ? `${bp || ''}${colOrRow}-${ + Number.isInteger(grid) || grid === 'full' ? `span-${grid}` : grid + }` + : ''; + } + return ''; +}; + +const startEndToStyle = ( + colOrRow: ColOrRow, + startOrEnd: StartOrEnd, + grid?: ColumnStartEnd, + bp?: Breakpoint +): string => { + if (grid) { + return grid ? `${bp || ''}${colOrRow}-${startOrEnd}-${grid}` : ''; + } + return ''; +}; + +const gridToStyle = (props?: IGrid, bp?: Breakpoint) => { + if (props) { + return getStyles([ + props.rows || props.cols || props.flow ? `${bp || ''}grid` : '', + props.rows ? `${bp || ''}grid-rows-${props.rows}` : '', + props.cols ? `${bp || ''}grid-cols-${props.cols}` : '', + gapToStyle(props.gap, bp), + props.flow ? `${bp || ''}grid-flow-${props.flow}` : '', + props.rowAuto ? `${bp || ''}auto-rows-${props.rowAuto}` : '', + props.colAuto ? `${bp || ''}auto-cols-${props.colAuto}` : '', + justifyContentToStyle(props.justify, bp), + justifyItemsToStyle(props.justifyItems, bp), + alignContentToStyle(props.alignContent, bp), + alignItemsToStyle(props.align, bp), + placeContentToStyle(props.placeContent, bp), + placeItemsToStyle(props.placeItems, bp), + orderToStyle(props.order, bp), + sizeToStyle(props.flexSize, bp), + shrinkToStyle(props.flexShrink, bp), + growToStyle(props.flexGrow, bp), + spanToStyle('col', props.colSpan, bp), + startEndToStyle('col', 'start', props.colStart, bp), + startEndToStyle('col', 'end', props.colEnd), + spanToStyle('row', props.rowSpan, bp), + startEndToStyle('row', 'start', props.rowStart, bp), + startEndToStyle('row', 'end', props.rowEnd), + justifySelfToStyle(props.justifySelf, bp), + placeSelfToStyle(props.placeSelf, bp), + alignSelfToStyle(props.alignSelf, bp), + ]); + } + return ''; +}; + +export type { + IGrid, + Row, + Column, + ColumnSpan, + ColumnStartEnd, + RowSpan, + RowStartEnd, + Flow, + GapType, + IGap, + Gap, + Order, + JustifyContent, + JustifyItems, + AlignContent, + AlignItems, + PlaceContent, + PlaceItems, + StartOrEnd, + ColOrRow, +}; + +export { gridToStyle, spanToStyle, startEndToStyle }; diff --git a/src/Models/Justify.ts b/src/Models/Justify.ts new file mode 100644 index 0000000..e6b36fb --- /dev/null +++ b/src/Models/Justify.ts @@ -0,0 +1,43 @@ +import type { Breakpoint } from './Breakpoint'; + +type JustifyContent = + | 'start' + | 'end' + | 'center' + | 'between' + | 'around' + | 'evenly'; + +type JustifyItems = 'start' | 'end' | 'center' | 'stretch' | 'auto'; + +type JustifySelf = 'start' | 'end' | 'center' | 'stretch' | 'auto'; + +const justifyContentToStyle = ( + justify?: JustifyContent, + bp?: Breakpoint +): string => { + if (justify) { + return justify ? `${bp || ''}justify-${justify}` : ''; + } + return ''; +}; + +const justifyItemsToStyle = ( + justify?: JustifyItems, + bp?: Breakpoint +): string => { + if (justify) { + return justify ? `${bp || ''}justify-items-${justify}` : ''; + } + return ''; +}; + +const justifySelfToStyle = (justify?: JustifySelf, bp?: Breakpoint): string => { + if (justify) { + return justify ? `${bp || ''}justify-self-${justify}` : ''; + } + return ''; +}; + +export type { JustifyContent, JustifyItems, JustifySelf }; +export { justifyContentToStyle, justifyItemsToStyle, justifySelfToStyle }; diff --git a/src/Models/Order.ts b/src/Models/Order.ts new file mode 100644 index 0000000..bd5d148 --- /dev/null +++ b/src/Models/Order.ts @@ -0,0 +1,24 @@ +import type { Breakpoint } from './Breakpoint'; + +export type Order = + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | 'first' + | 'last'; + +export const orderToStyle = (order?: Order, bp?: Breakpoint): string => { + if (order) { + return order ? `${bp || ''}order-${order}` : ''; + } + return ''; +}; diff --git a/src/Models/Place.ts b/src/Models/Place.ts new file mode 100644 index 0000000..58049fd --- /dev/null +++ b/src/Models/Place.ts @@ -0,0 +1,37 @@ +import type { Breakpoint } from './Breakpoint'; + +type PlaceContent = + | 'start' + | 'end' + | 'center' + | 'between' + | 'around' + | 'evenly' + | 'stretch'; + +type PlaceItems = 'start' | 'end' | 'center' | 'auto' | 'stretch'; +type PlaceSelf = 'start' | 'end' | 'center' | 'stretch' | 'auto'; + +const placeContentToStyle = (place?: PlaceContent, bp?: Breakpoint): string => { + if (place) { + return place ? `${bp || ''}place-content-${place}` : ''; + } + return ''; +}; + +const placeItemsToStyle = (place?: PlaceItems, bp?: Breakpoint): string => { + if (place) { + return place ? `${bp || ''}place-items-${place}` : ''; + } + return ''; +}; + +const placeSelfToStyle = (place?: PlaceSelf, bp?: Breakpoint): string => { + if (place) { + return place ? `${bp || ''}place-self-${place}` : ''; + } + return ''; +}; + +export type { PlaceContent, PlaceItems, PlaceSelf }; +export { placeContentToStyle, placeItemsToStyle, placeSelfToStyle };