Process CSS-related properties in Props so that they can generate the element style.
npm i @prop-styles/vue
App.vue
<script setup lang="ts">
import { usePropStyles, f, type VueBaseProps } from '@prop-styles/vue'
interface Props extends VueBaseProps {
customProp?: unknown
}
const props = defineProps<Props>()
const { style } = usePropStyles(props, {
// Custom prop mapping handler
customProp: (v: Props['customProp']) => f('custom-prop', v, 'default value used when v is null/false')
})
</script>
<template>
<div :style="{style}"></div>
</template>
<App width="100" radius="12 12 0 12" marginTop="20" />
// <div style="width:100px;border-radius:12px 12px 0 12px;margin-top:20px;"></div>
Create Styles Object
Example
import { createPropStyles, f } from '@prop-styles/core'
const props = { width: 100, color: '#fff' }
createPropStyles(props) // { width: '100px', color, '#fff' }
// Use custom Mapping handler
createPropStyles(props, {
// custom mapping handler
color: (v) => ['--color', v]
}) // { width: '100px', '--color', '#fff' }
// Use f function to remove null/undefined props
createPropStyles(props, {
color: (v) => f('--color', v)
}) // { width: '100px', '--color', '#fff' }
Param | Types | Required | Description |
---|---|---|---|
props | T |
yes | BaseProps |
mappings | PropMappings<T> |
no | PropMappings |
-
@generic
T extends BaseProps
-
@returns
Record<string, string>
Alias and abbreviation of formatReturn.
Param | Types | Required | Description |
---|---|---|---|
key | K |
yes | The PropMappingHandlerReturn key or customize key
|
value | V |
yes | The props[prop]'s value
|
strValue | string |
no | Customize the value of PropMappingHandlerReturn |
-
@generic
K extends string, V
-
@returns
[key: string, val: string] | null
see PropMappingHandlerReturn
Used for PropMappingHandler processing. When value
is null/undefined/''/false
, return null, otherwise return the specified value.
Example
f('width', 100) // ['width', '100']
f('width', '100px') // ['width', '100px']
f('width', 100, '100%') // ['width', '100%']
f('key', false) // null
f('key', '') // null
f('key', undefined) // null
f('key', null) // null
f('key', null, 'stringValue') // null
f('key', true, 'stringValue') // ['key', 'stringValue']
Param | Types | Required | Description |
---|---|---|---|
key | K |
yes | The PropMappingHandlerReturn key or customize key
|
value | V |
yes | The props[prop]'s value
|
strValue | string |
no | Customize the value of PropMappingHandlerReturn |
-
@generic
K extends string, V
-
@returns
[key: string, val: string] | null
see PropMappingHandlerReturn
Convert component properties to Style key-value pair objects
Param | Types | Required | Description |
---|---|---|---|
props | T |
yes | Component properties |
mappings | PropMappings<T> |
no | PropMappings |
-
@generic
T extends BaseProps
-
@returns
UsePropStylesReturn
Commonly used CSS properties for components.
csstype Property
Prop | Types | Required | Description |
---|---|---|---|
style | any |
no | style |
width |
number /string
|
no | width |
minWidth |
number /string
|
no | min-width |
maxWidth |
number /string
|
no | max-width |
height |
number /string
|
no | height |
minHeight |
number /string
|
no | min-height |
maxHeight |
number /string
|
no | max-height |
flex | boolean |
no | display flex |
grid | boolean |
no | display grid |
inlineFlex | boolean |
no | - |
inlineBlock | boolean |
no | - |
inline | boolean |
no | - |
gap |
number /string
|
no | flex/grid's gap |
column | boolean |
no | flex-direction |
align | Property.AlignItems |
no | align-items |
alignItems | Property.AlignItems |
no | align-items |
ai | Property.AlignItems |
no | align-items |
alignContent | Property.AlignContent |
no | align-content |
ac | Property.AlignContent |
no | align-content |
justify | Property.JustifyContent |
no | justify-content |
justifyContent | Property.JustifyContent |
no | justify-content |
jc | Property.JustifyContent |
no | justify-content |
justifyItems | Property.JustifyItems |
no | justify-items |
ji | Property.JustifyItems |
no | justify-items |
wrap |
boolean /Property.FlexWrap
|
no | flex-wrap |
nowrap | boolean |
no | white-space: nowrap |
whiteSpace | Property.WhiteSpace |
no | white-space |
padding |
number /string
|
no | padding |
p |
number /string
|
no | padding |
paddingTop |
number /string
|
no | padding-top |
pt |
number /string
|
no | padding-top |
paddingBottom |
number /string
|
no | - |
pb |
number /string
|
no | padding-bottom |
paddingLeft |
number /string
|
no | - |
pl |
number /string
|
no | padding-left |
paddingRight |
number /string
|
no | - |
pr |
number /string
|
no | padding-right |
paddingInline |
number /string
|
no | - |
px |
number /string
|
no | padding-inline |
paddingBlock |
number /string
|
no | - |
py |
number /string
|
no | padding-block |
margin |
number /string
|
no | margin |
m |
number /string
|
no | margin |
marginTop |
number /string
|
no | - |
mt |
number /string
|
no | margin-top |
marginBottom |
number /string
|
no | - |
mb |
number /string
|
no | margin-bottom |
marginLeft |
number /string
|
no | - |
ml |
number /string
|
no | margin-left |
marginRight |
number /string
|
no | - |
mr |
number /string
|
no | margin-right |
marginInline |
number /string
|
no | - |
mx |
number /string
|
no | margin-inline |
marginBlock |
number /string
|
no | - |
my |
number /string
|
no | margin-block |
radius |
string /number
|
no | border-radius |
fontSize |
string /number
|
no | font-size |
fs |
string /number
|
no | font-size |
lineHeight |
string /number
|
no | - |
lh |
string /number
|
no | line-height |
color | string |
no | color |
background | Property.Background |
no | - |
bg | Property.Background |
no | background |
scroll |
boolean /'x' /'y'
|
no | scroll direction |
breakWord | boolean |
no | text |
bold | boolean |
no | font-weight: bold |
thin | boolean |
no | font-weight: 500 |
fontWeight | Property.FontWeight |
no | - |
fw | Property.FontWeight |
no | fontWeight |
border |
string /number
|
no | border, border-width, border-color |
tempColumns | string |
no | grid-template-columns |
gtc | string |
no | grid-template-columns |
tempRows | string |
no | grid-template-rows |
gtr | string |
no | grid-template-rows |
textAlign | Property.TextAlign |
no | text-align |
ta | Property.TextAlign |
no | text-align |
position | Property.Position |
no | position |
top |
string /number
|
no | - |
t |
string /number
|
no | top |
right |
string /number
|
no | - |
r |
string /number
|
no | right |
bottom |
string /number
|
no | - |
b |
string /number
|
no | bottom |
left |
string /number
|
no | - |
l |
string /number
|
no | left |
zIndex | Property.ZIndex |
no | z-index |
z | Property.ZIndex |
no | z-index |
inset |
string /number
|
no | inset |
transform | Property.Transform |
no | transform |
tf | Property.Transform |
no | transform |
Source Code
interface BaseProps {
// style
style?: any
// width
width?: number | string
// min-width
minWidth?: number | string
// max-width
maxWidth?: number | string
// height
height?: number | string
// min-height
minHeight?: number | string
// max-height
maxHeight?: number | string
// display flex
flex?: boolean
// display grid
grid?: boolean
inlineFlex?: boolean
inlineBlock?: boolean
inline?: boolean
// flex/grid's gap
gap?: number | string
// flex-direction
column?: boolean
// align-items
align?: Property.AlignItems
// align-items
alignItems?: Property.AlignItems
// align-items
ai?: Property.AlignItems
// align-content
alignContent?: Property.AlignContent
// align-content
ac?: Property.AlignContent
// justify-content
justify?: Property.JustifyContent
// justify-content
justifyContent?: Property.JustifyContent
// justify-content
jc?: Property.JustifyContent
// justify-items
justifyItems?: Property.JustifyItems
// justify-items
ji?: Property.JustifyItems
// flex-wrap
wrap?: boolean | Property.FlexWrap
// white-space: nowrap
nowrap?: boolean
// white-space
whiteSpace?: Property.WhiteSpace
// padding
padding?: number | string
// padding
p?: number | string
// padding-top
paddingTop?: number | string
// padding-top
pt?: number | string
paddingBottom?: number | string
// padding-bottom
pb?: number | string
paddingLeft?: number | string
// padding-left
pl?: number | string
paddingRight?: number | string
// padding-right
pr?: number | string
paddingInline?: number | string
// padding-inline
px?: number | string
paddingBlock?: number | string
// padding-block
py?: number | string
// margin
margin?: number | string
// margin
m?: number | string
marginTop?: number | string
// margin-top
mt?: number | string
marginBottom?: number | string
// margin-bottom
mb?: number | string
marginLeft?: number | string
// margin-left
ml?: number | string
marginRight?: number | string
// margin-right
mr?: number | string
marginInline?: number | string
// margin-inline
mx?: number | string
marginBlock?: number | string
// margin-block
my?: number | string
// border-radius
radius?: string | number
// font-size
fontSize?: string | number
// font-size
fs?: string | number
lineHeight?: string | number
// line-height
lh?: string | number
// color
color?: string
background?: Property.Background
// background
bg?: Property.Background
// scroll direction
scroll?: boolean | 'x' | 'y'
// text
breakWord?: boolean
// font-weight: bold
bold?: boolean
// font-weight: 500
thin?: boolean
fontWeight?: Property.FontWeight
// fontWeight
fw?: Property.FontWeight
// border, border-width, border-color
border?: string | number
// grid-template-columns
tempColumns?: string
// grid-template-columns
gtc?: string
// grid-template-rows
tempRows?: string
// grid-template-rows
gtr?: string
// text-align
textAlign?: Property.TextAlign
// text-align
ta?: Property.TextAlign
// position
position?: Property.Position
top?: string | number
// top
t?: string | number
right?: string | number
// right
r?: string | number
bottom?: string | number
// bottom
b?: string | number
left?: string | number
// left
l?: string | number
// z-index
zIndex?: Property.ZIndex
// z-index
z?: Property.ZIndex
// inset
inset?: string | number
// transform
transform?: Property.Transform
// transform
tf?: Property.Transform
}
PropMappings processing function, returns [key: string, val: string] | null
Prop | Types | Required | Description |
---|---|---|---|
value | T[keyof T], |
yes | - |
props | T |
yes | - |
Source Code
type PropMappingHandler<T extends BaseProps> = (
value: T[keyof T],
props: T
) => PropMappingHandlerReturn
PropMappingHandler's returns
Source Code
type PropMappingHandlerReturn = [key: string, val: string] | null
Prop | Types | Required | Description |
---|---|---|---|
[key: keyof T] | PropMappingHandler<T> |
yes | - |
Source Code
type PropMappings<T extends BaseProps> = {
[key: keyof T]: PropMappingHandler<T>
}
Prop | Types | Required | Description |
---|---|---|---|
style | ComputedRef<StyleValue[]> |
yes | - |
Source Code
interface UsePropStylesReturn {
style: ComputedRef<StyleValue[]>
}
Prop | Types | Required | Description |
---|---|---|---|
style | any |
no | style |
width |
number /string
|
no | width |
minWidth |
number /string
|
no | min-width |
maxWidth |
number /string
|
no | max-width |
height |
number /string
|
no | height |
minHeight |
number /string
|
no | min-height |
maxHeight |
number /string
|
no | max-height |
flex | boolean |
no | display flex |
grid | boolean |
no | display grid |
inlineFlex | boolean |
no | - |
inlineBlock | boolean |
no | - |
inline | boolean |
no | - |
gap |
number /string
|
no | flex/grid's gap |
column | boolean |
no | flex-direction |
align | Property.AlignItems |
no | align-items |
alignItems | Property.AlignItems |
no | align-items |
ai | Property.AlignItems |
no | align-items |
alignContent | Property.AlignContent |
no | align-content |
ac | Property.AlignContent |
no | align-content |
justify | Property.JustifyContent |
no | justify-content |
justifyContent | Property.JustifyContent |
no | justify-content |
jc | Property.JustifyContent |
no | justify-content |
justifyItems | Property.JustifyItems |
no | justify-items |
ji | Property.JustifyItems |
no | justify-items |
wrap |
boolean /Property.FlexWrap
|
no | flex-wrap |
nowrap | boolean |
no | white-space: nowrap |
whiteSpace | Property.WhiteSpace |
no | white-space |
padding |
number /string
|
no | padding |
p |
number /string
|
no | padding |
paddingTop |
number /string
|
no | padding-top |
pt |
number /string
|
no | padding-top |
paddingBottom |
number /string
|
no | - |
pb |
number /string
|
no | padding-bottom |
paddingLeft |
number /string
|
no | - |
pl |
number /string
|
no | padding-left |
paddingRight |
number /string
|
no | - |
pr |
number /string
|
no | padding-right |
paddingInline |
number /string
|
no | - |
px |
number /string
|
no | padding-inline |
paddingBlock |
number /string
|
no | - |
py |
number /string
|
no | padding-block |
margin |
number /string
|
no | margin |
m |
number /string
|
no | margin |
marginTop |
number /string
|
no | - |
mt |
number /string
|
no | margin-top |
marginBottom |
number /string
|
no | - |
mb |
number /string
|
no | margin-bottom |
marginLeft |
number /string
|
no | - |
ml |
number /string
|
no | margin-left |
marginRight |
number /string
|
no | - |
mr |
number /string
|
no | margin-right |
marginInline |
number /string
|
no | - |
mx |
number /string
|
no | margin-inline |
marginBlock |
number /string
|
no | - |
my |
number /string
|
no | margin-block |
radius |
string /number
|
no | border-radius |
fontSize |
string /number
|
no | font-size |
fs |
string /number
|
no | font-size |
lineHeight |
string /number
|
no | - |
lh |
string /number
|
no | line-height |
color | string |
no | color |
background | Property.Background |
no | - |
bg | Property.Background |
no | background |
scroll |
boolean /'x' /'y'
|
no | scroll direction |
breakWord | boolean |
no | text |
bold | boolean |
no | font-weight: bold |
thin | boolean |
no | font-weight: 500 |
fontWeight | Property.FontWeight |
no | - |
fw | Property.FontWeight |
no | fontWeight |
border |
string /number
|
no | border, border-width, border-color |
tempColumns | string |
no | grid-template-columns |
gtc | string |
no | grid-template-columns |
tempRows | string |
no | grid-template-rows |
gtr | string |
no | grid-template-rows |
textAlign | Property.TextAlign |
no | text-align |
ta | Property.TextAlign |
no | text-align |
position | Property.Position |
no | position |
top |
string /number
|
no | - |
t |
string /number
|
no | top |
right |
string /number
|
no | - |
r |
string /number
|
no | right |
bottom |
string /number
|
no | - |
b |
string /number
|
no | bottom |
left |
string /number
|
no | - |
l |
string /number
|
no | left |
zIndex | Property.ZIndex |
no | z-index |
z | Property.ZIndex |
no | z-index |
inset |
string /number
|
no | inset |
transform | Property.Transform |
no | transform |
tf | Property.Transform |
no | transform |
class | any |
no | - |
Source Code
interface VueBaseProps extends BaseProps {
class?: any
}
MIT License © 2024-Present Capricorncd.