Appearance
@obewds/vue-component-helpers
Welcome to the docs page for OBE:WDS's vue-component-helpers functions for Vue.js!
Installation
bash
npm install @obewds/vue-component-helpers --save-dev
1
extractValidPalettes()
Parameters
➡️ Requires a single Object (<ObewdsTwConfig> type) argument
➡️ Requires a single String (<ObewdsTwConfigGroups> type or a Top-Level Config Key) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| tw | Object | Yes | Expects a <ObewdsTwConfig> type object |
| key | String | Yes | Expects a <ObewdsTwConfigGroups> type or a Top-Level Config Key (string) |
Returns
⬅️ Returns an array with String values
Example
html
<script setup lang="ts">
// import the default config object and helper
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import { extractValidPalettes } from '@obewds/vue-component-helpers'
const bgPaletteNames = extractValidPalettes(ObewdsTwConfig, 'bg')
// returns an array of strings
// where each is a default bg palette name
// from the default ObewdsTwConfig object
console.log(bgPaletteNames)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
getBgPaletteColor()
Parameters
➡️ Requires a single Object (<ObewdsTwConfig> type) argument
➡️ Requires a single String (Background Palette Prop Value) argument
➡️ Requires a single String (Background Palette Color Prop Value) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| config | Object | Yes | Expects a <ObewdsTwConfig> type object |
| palette | String | Yes | Expects a Background Palette Prop Value |
| color | String | Yes | Expects a Background Palette Color Prop Value |
Returns
⬅️ Returns a String value
Example
html
<script setup lang="ts">
// import the default config object
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import { getBgPaletteColor } from '@obewds/vue-component-helpers'
const bgPrimaryColor = getBgPaletteColor(ObewdsTwConfig, 'default', 'primary')
console.log(bgPrimaryColor) // returns a string of primary background CSS classes
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
getBorderPaletteColor()
Parameters
➡️ Requires a single Object (<ObewdsTwConfig> type) argument
➡️ Requires a single String (Border Palette Prop Value) argument
➡️ Requires a single String (Border Palette Color Prop Value) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| config | Object | Yes | Expects a <ObewdsTwConfig> type object |
| palette | String | Yes | Expects a Border Palette Prop Value |
| color | String | Yes | Expects a Border Palette Color Prop Value |
Returns
⬅️ Returns a String value
Example
html
<script setup lang="ts">
// import the default config object
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import { getBorderPaletteColor } from '@obewds/vue-component-helpers'
const borderPrimaryColor = getBorderPaletteColor(ObewdsTwConfig, 'default', 'primary')
console.log(borderPrimaryColor) // returns a string of primary background CSS classes
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
getTextPaletteColor()
Parameters
➡️ Requires a single Object (<ObewdsTwConfig> type) argument
➡️ Requires a single String (Text Palette Prop Value) argument
➡️ Requires a single String (Text Palette Color Prop Value) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| config | Object | Yes | Expects a <ObewdsTwConfig> type object |
| palette | String | Yes | Expects a Text Palette Prop Value |
| color | String | Yes | Expects a Text Palette Color Prop Value |
Returns
⬅️ Returns a String value
Example
html
<script setup lang="ts">
// import the default config object
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import { getTextPaletteColor } from '@obewds/vue-component-helpers'
const textPrimaryColor = getTextPaletteColor(ObewdsTwConfig, 'default', 'primary')
console.log(textPrimaryColor) // returns a string of primary background CSS classes
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
isEmptyElement()
Parameters
➡️ Requires a single String (HTML tag name) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| tag | String | Yes | Expects a single HTML tag name |
Returns
⬅️ Returns a Boolean value
Example
html
<script setup lang="ts">
import { isEmptyElement } from '@obewds/vue-component-helpers'
const isBrEmpty = isEmptyElement('br')
console.log(isBrEmpty) // returns true
const isDivEmpty = isEmptyElement('div')
console.log(isBrEmpty) // returns false
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
isEmptyOrUnsupportedElement()
Parameters
➡️ Requires a single String (HTML tag name) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| tag | String | Yes | Expects a single HTML tag name |
Returns
⬅️ Returns a Boolean value
Example
html
<script setup lang="ts">
import { isEmptyOrUnsupportedElement } from '@obewds/vue-component-helpers'
const isBrEmpty = isEmptyOrUnsupportedElement('br')
console.log(isBrEmpty) // returns true
const isBodyUnsupported = isEmptyOrUnsupportedElement('body')
console.log(isBodyUnsupported) // returns true
const isDivEmpty = isEmptyOrUnsupportedElement('div')
console.log(isBrEmpty) // returns false
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
isUnsupportedElement()
Parameters
➡️ Requires a single String (HTML tag name) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| tag | String | Yes | Expects a single HTML tag name |
Returns
⬅️ Returns a Boolean value
Example
html
<script setup lang="ts">
import { isUnsupportedElement } from '@obewds/vue-component-helpers'
const isBodyUnsupported = isUnsupportedElement('body')
console.log(isBodyUnsupported) // returns true
const isDivUnsupported = isUnsupportedElement('div')
console.log(isDivUnsupported) // returns false
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
mergeAppConfigWithDefaults()
Parameters
➡️ Requires a single Object (<ObewdsTwConfig> type) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| appTwConfig | Object | Yes | Expects a <ObewdsTwConfig> type object |
Returns
⬅️ Returns an Object (typeof ObewdsTwConfig) value
Examples
Using a manually defined app OBE:WDS Tailwind config object:
html
<script setup lang="ts">
import { mergeAppConfigWithDefaults } from '@obewds/vue-component-helpers'
const myObewdsTwConfig = {
bg: {
palettes: {
"default": {
colors: {
primary: "text-indigo-500 dark:text-indigo-200"
}
}
}
}
}
const tw = mergeAppConfigWithDefaults(myObewdsTwConfig)
// returns an object with default @obewds/obewds-tw-config data
// merged into the data provided in myObewdsTwConfig
console.log(tw)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Using a @obewds/vue-component-helpers JSON config file:
html
<script setup lang="ts">
import { mergeAppConfigWithDefaults } from '@obewds/vue-component-helpers'
// import your customized app config version of an OBE:WDS Tailwind config object
// (generated from scripts in the @obewds/obewds-tw-config package)
import appTwConfig from '../obewds.tw.config.json'
const tw = mergeAppConfigWithDefaults(appTwConfig)
// returns an object with default @obewds/obewds-tw-config data
// merged into the data provided in appTwConfig
console.log(tw)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
validPaletteProps()
Parameters
➡️ Requires a single Object (<ObewdsTwConfig> type) argument
➡️ Requires a single String (<ObewdsTwConfigGroups> type or a Top-Level Config Key) argument
| Paramater | Type | Required | Description |
|---|---|---|---|
| key | String | Yes | Expects a <ObewdsTwConfigGroups> type or a Top-Level Config Key (string) |
| twConfig | Object | Yes | Expects a <ObewdsTwConfig> type object |
Returns
⬅️ Returns an array with String values
Example
html
<script setup lang="ts">
// import the default config object and helper
import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
import { validPaletteProps } from '@obewds/vue-component-helpers'
const bgPaletteNames = validPaletteProps('bg', ObewdsTwConfig)
// returns an array of strings
// where each is a default bg palette name
// from the default ObewdsTwConfig object
console.log(bgPaletteNames)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Uninstall
bash
npm uninstall @obewds/vue-component-helpers
1