From fe52c591658c42f9c496fbc71cffc99b143a10f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 11:19:59 +0100 Subject: [PATCH 001/434] refactor(CButton): remove `attrs` because it's not necessary. --- packages/coreui-vue/src/components/button/CButton.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts index 67e888f3..9772d3ef 100644 --- a/packages/coreui-vue/src/components/button/CButton.ts +++ b/packages/coreui-vue/src/components/button/CButton.ts @@ -74,12 +74,11 @@ export const CButton = defineComponent({ }, }, }, - setup(props, { slots, attrs }) { + setup(props, { slots }) { return () => h( props.component, { - ...attrs, class: [ 'btn', props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`, From f41b6847f0e1225b9d9aeba28b834c80d42c7991 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 11:20:19 +0100 Subject: [PATCH 002/434] refactor(CCardImage): remove `attrs` because it's not necessary. --- packages/coreui-vue/src/components/card/CCardImage.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/components/card/CCardImage.ts b/packages/coreui-vue/src/components/card/CCardImage.ts index 484b3c87..31ea4fb8 100644 --- a/packages/coreui-vue/src/components/card/CCardImage.ts +++ b/packages/coreui-vue/src/components/card/CCardImage.ts @@ -25,12 +25,11 @@ const CCardImage = defineComponent({ }, }, }, - setup(props, { slots, attrs }) { + setup(props, { slots }) { return () => h( props.component, { - ...attrs, class: [props.orientation ? `card-img-${props.orientation}` : 'card-img'], }, slots.default && slots.default(), From bcfab289ea6b86f643bbcb8726916df0e6c2c3cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 11:20:34 +0100 Subject: [PATCH 003/434] refactor(CFormLabel): remove `attrs` because it's not necessary. --- packages/coreui-vue/src/components/form/CFormLabel.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormLabel.ts b/packages/coreui-vue/src/components/form/CFormLabel.ts index 758bf0a3..2b768616 100644 --- a/packages/coreui-vue/src/components/form/CFormLabel.ts +++ b/packages/coreui-vue/src/components/form/CFormLabel.ts @@ -12,12 +12,11 @@ const CFormLabel = defineComponent({ required: false, }, }, - setup(props, { attrs, slots }) { + setup(props, { slots }) { return () => h( 'label', { - ...attrs, class: props.customClassName ? props.customClassName : 'form-label', }, slots.default && slots.default(), From b3d932e7296f44191259c9ed18bf041effb99a96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 11:23:08 +0100 Subject: [PATCH 004/434] refactor: add `v-model` support. --- .../src/components/form/CFormCheck.ts | 46 ++++++++++++++++- .../src/components/form/CFormInput.ts | 39 ++++++++++++++- .../src/components/form/CFormRange.ts | 35 +++++++++++-- .../src/components/form/CFormSelect.ts | 35 ++++++++++++- .../src/components/form/CFormSwitch.ts | 50 +++++++++++++++++-- .../src/components/form/CFormTextarea.ts | 39 ++++++++++++++- 6 files changed, 229 insertions(+), 15 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index d9877c8d..d013b85c 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -1,4 +1,4 @@ -import { defineComponent, h } from 'vue' +import { defineComponent, h, onMounted, watch, ref } from 'vue' import { shape } from 'vue-types' import { Color, Shape } from '../props' @@ -6,6 +6,7 @@ import { CFormLabel } from './CFormLabel' const CFormCheck = defineComponent({ name: 'CFormCheck', + inheritAttrs: false, props: { /** * Create button-like checkboxes and radio buttons. @@ -78,6 +79,14 @@ const CFormCheck = defineComponent({ default: undefined, required: false, }, + /** + * The default name for a value passed using v-model. + */ + modelValue: { + type: [Boolean, String], + value: undefined, + required: false, + }, /** * Specifies the type of component. * @@ -96,10 +105,42 @@ const CFormCheck = defineComponent({ required: false, }, }, - setup(props, { slots, attrs }) { + emits: [ + /** + * Event occurs when the checked value has been changed. + */ + 'change', + /** + * Emit the new value whenever there’s a change event. + */ + 'update:modelValue', + ], + setup(props, { attrs, emit, slots }) { + const checked = ref(attrs.checked) + + onMounted(() => { + if (props.modelValue && typeof props.modelValue === 'boolean') { + console.log(props.modelValue) + } + }) + + watch( + () => props.modelValue, + () => { + if (typeof props.modelValue === 'boolean') checked.value = props.modelValue + }, + ) + + const handleChange = (event: InputEvent) => { + const target = event.target as HTMLInputElement + emit('change', target.checked) + emit('update:modelValue', target.checked) + } + const formControl = () => { return h('input', { ...attrs, + checked: checked.value, class: [ props.button ? 'btn-check' : 'form-check-input', { @@ -108,6 +149,7 @@ const CFormCheck = defineComponent({ }, ], id: props.id, + onChange: (event: InputEvent) => handleChange(event), type: props.type, }) } diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 55955d71..f96e00ee 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -17,6 +17,14 @@ const CFormInput = defineComponent({ type: Boolean, required: false, }, + /** + * The default name for a value passed using v-model. + */ + modelValue: { + type: String, + default: undefined, + require: false, + }, /** * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. */ @@ -62,7 +70,32 @@ const CFormInput = defineComponent({ required: false, }, }, - setup(props, { attrs, slots }) { + emits: [ + /** + * Event occurs when the element loses focus, after the content has been changed. + */ + 'change', + /** + * Event occurs immediately after the value of a component has changed. + */ + 'input', + /** + * Emit the new value whenever there’s an input or change event. + */ + 'update:modelValue', + ], + setup(props, { emit, slots }) { + const handleChange = (event: InputEvent) => { + const target = event.target as HTMLInputElement + emit('change', target.value) + emit('update:modelValue', target.value) + } + const handleInput = (event: InputEvent) => { + const target = event.target as HTMLInputElement + emit('input', target.value) + emit('update:modelValue', target.value) + } + return () => h( 'input', @@ -70,7 +103,6 @@ const CFormInput = defineComponent({ type: props.type, disabled: props.disabled, readonly: props.readonly, - ...attrs, class: [ props.plainText ? 'form-control-plaintext' : 'form-control', { @@ -80,6 +112,9 @@ const CFormInput = defineComponent({ 'is-valid': props.valid, }, ], + onChange: (event: InputEvent) => handleChange(event), + onInput: (event: InputEvent) => handleInput(event), + value: props.modelValue, }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/form/CFormRange.ts b/packages/coreui-vue/src/components/form/CFormRange.ts index 904c53d5..13813889 100644 --- a/packages/coreui-vue/src/components/form/CFormRange.ts +++ b/packages/coreui-vue/src/components/form/CFormRange.ts @@ -27,6 +27,14 @@ const CFormRange = defineComponent({ default: undefined, required: false, }, + /** + * The default name for a value passed using v-model. + */ + modelValue: { + type: String, + value: undefined, + required: false, + }, /** * Toggle the readonly state for the component. */ @@ -53,15 +61,36 @@ const CFormRange = defineComponent({ required: false, }, }, - setup(props, { attrs, slots }) { + emits: [ + /** + * Event occurs when the value has been changed. + */ + 'change', + /** + * Emit the new value whenever there’s a change event. + */ + 'update:modelValue', + ], + setup(props, { emit, slots }) { + const handleChange = (event: InputEvent) => { + const target = event.target as HTMLInputElement + emit('change', target.value) + emit('update:modelValue', target.value) + } + return () => h( 'input', { class: 'form-range', + disabled: props.disabled, + max: props.max, + min: props.min, + onChange: (event: InputEvent) => handleChange(event), + steps: props.steps, + readonly: props.readonly, type: 'range', - ...attrs, - ...props, + value: props.modelValue || props.value, }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index f2413ced..48f1e3a8 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -18,6 +18,14 @@ const CFormSelect = defineComponent({ type: Boolean, required: false, }, + /** + * The default name for a value passed using v-model. + */ + modelValue: { + type: String, + default: undefined, + require: false, + }, /** * Size the component small or large. * @@ -39,18 +47,41 @@ const CFormSelect = defineComponent({ required: false, }, }, - setup(props, { attrs, slots }) { + emits: [ + /** + * Event occurs when when a user changes the selected option of a "`; - -exports[`Loads and display CFormControl component renders correctly 1`] = `""`; From fe9ebba57b4f30dbe2944a18a44222766aa8b476 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 12:42:57 +0100 Subject: [PATCH 008/434] tests: update tests --- .../form/__tests__/__snapshots__/CFormCheck.spec.ts.snap | 4 ++-- .../form/__tests__/__snapshots__/CFormInput.spec.ts.snap | 4 ++-- .../form/__tests__/__snapshots__/CFormRange.spec.ts.snap | 2 +- .../form/__tests__/__snapshots__/CFormSwitch.spec.ts.snap | 4 ++-- .../form/__tests__/__snapshots__/CFormTextarea.spec.ts.snap | 2 +- .../src/components/toast/__tests__/CToastClose.spec.ts | 4 ++-- .../toast/__tests__/__snapshots__/CToastClose.spec.ts.snap | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap index 1c6b436b..74563730 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize with label - CFormCheck component renders correctly 1`] = `""`; +exports[`Customize with label - CFormCheck component renders correctly 1`] = `""`; -exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `""`; +exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `""`; exports[`Loads and display CFormCheck component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap index 857cebc8..87415666 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize (two) CFormInput component renders correctly 1`] = `""`; +exports[`Customize (two) CFormInput component renders correctly 1`] = `""`; -exports[`Customize CFormInput component renders correctly 1`] = `""`; +exports[`Customize CFormInput component renders correctly 1`] = `""`; exports[`Loads and display CFormInput component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap index 8952b7c7..7a1298f4 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CFormRange component renders correctly 1`] = `""`; +exports[`Customize CFormRange component renders correctly 1`] = `""`; exports[`Loads and display CFormRange component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.ts.snap index 43560bb7..99f2a03a 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.ts.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CFormSwitch component renders correctly 1`] = `"
"`; +exports[`Customize CFormSwitch component renders correctly 1`] = `"
"`; exports[`Loads and display CFormSwitch component renders correctly 1`] = ` -"
+"
" `; diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.ts.snap index 52e70d7d..ac5a04c2 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CFormTextarea component renders correctly 1`] = `""`; +exports[`Customize CFormTextarea component renders correctly 1`] = `""`; exports[`Loads and display CFormTextarea component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts b/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts index 7c115b44..eee1ba77 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts +++ b/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import { CToastClose as Component } from '../../../index' +import { CButton, CToastClose as Component } from '../../../index' const ComponentName = 'CToastClose' @@ -21,7 +21,7 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { - component: 'CButton', + component: CButton, }, slots: { default: 'Default slot', diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap index 242beca8..13701d5c 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap +++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CToastClose component renders correctly 1`] = `"Default slot"`; +exports[`Customize CToastClose component renders correctly 1`] = `""`; exports[`Loads and display CToastClose component renders correctly 1`] = `""`; From b69bffdb6cbd220eef722b20ac68ab2437190122 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 12:59:13 +0100 Subject: [PATCH 009/434] docs: update API documentation --- packages/docs/api/form/CFormCheck.api.md | 26 +++++++++++++------- packages/docs/api/form/CFormInput.api.md | 27 ++++++++++++++------- packages/docs/api/form/CFormRange.api.md | 24 ++++++++++++------ packages/docs/api/form/CFormSelect.api.md | 21 +++++++++++----- packages/docs/api/form/CFormSwitch.api.md | 24 ++++++++++++------ packages/docs/api/form/CFormTextarea.api.md | 23 ++++++++++++------ 6 files changed, 98 insertions(+), 47 deletions(-) diff --git a/packages/docs/api/form/CFormCheck.api.md b/packages/docs/api/form/CFormCheck.api.md index e4e10452..e09f7a29 100644 --- a/packages/docs/api/form/CFormCheck.api.md +++ b/packages/docs/api/form/CFormCheck.api.md @@ -8,12 +8,20 @@ import CFormCheck from '@coreui/vue/src/components/form/CFormCheck' #### Props -| Prop name | Description | Type | Values | Default | -| ----------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------- | -| **button** | Create button-like checkboxes and radio buttons. | string({
/**
_ Sets the color context of the component to one of CoreUI’s themed colors.
_
_ @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
_/
color: Color,
/**
_ Select the shape of the component.
_
_ @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
_/
shape: Shape,
/**
_ Size the component small or large.
_
_ @values 'sm' \| 'lg'
_/
size: {
type: String,
default: undefined,
required: false,
validator: (value: string) => {
return ['sm', 'lg'].includes(value)
},
},
/**
_ Set the button variant to an outlined button or a ghost button.
_/
variant: {
type: String,
default: undefined,
required: false,
validator: (value: string) => {
return ['outline', 'ghost'].includes(value)
},
},
}) | - | | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - | -| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | | -| **invalid** | Set component validation state to invalid. | boolean | - | | -| **label** | The element represents a caption for a component. | string | - | - | -| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | -| **valid** | Set component validation state to valid. | boolean | - | | +| Prop name | Description | Type | Values | Default | +| --------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------- | +| **button** | Create button-like checkboxes and radio buttons. | string({
/**
_ Sets the color context of the component to one of CoreUI’s themed colors.
_
_ @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
_/
color: Color,
/**
_ Select the shape of the component.
_
_ @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
_/
shape: Shape,
/**
_ Size the component small or large.
_
_ @values 'sm' \| 'lg'
_/
size: {
type: String,
default: undefined,
required: false,
validator: (value: string) => {
return ['sm', 'lg'].includes(value)
},
},
/**
_ Set the button variant to an outlined button or a ghost button.
_/
variant: {
type: String,
default: undefined,
required: false,
validator: (value: string) => {
return ['outline', 'ghost'].includes(value)
},
},
}) | - | | +| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - | +| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | | +| **invalid** | Set component validation state to invalid. | boolean | - | | +| **label** | The element represents a caption for a component. | string | - | - | +| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | | +| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | +| **valid** | Set component validation state to valid. | boolean | - | | + +#### Events + +| Event name | Description | Properties | +| ---------------------- | ----------------------------------------------------- | ---------- | +| **change** | Event occurs when the checked value has been changed. | +| **update-model-value** | Emit the new value whenever there’s a change event. | diff --git a/packages/docs/api/form/CFormInput.api.md b/packages/docs/api/form/CFormInput.api.md index 2ade2628..a6b78c37 100644 --- a/packages/docs/api/form/CFormInput.api.md +++ b/packages/docs/api/form/CFormInput.api.md @@ -8,12 +8,21 @@ import CFormInput from '@coreui/vue/src/components/form/CFormInput' #### Props -| Prop name | Description | Type | Values | Default | -| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------- | ------- | -| **disabled** | Toggle the disabled state for the component. | boolean | - | | -| **invalid** | Set component validation state to invalid. | boolean | - | | -| **plain-text** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | boolean | - | | -| **readonly** | Toggle the readonly state for the component. | boolean | - | | -| **size** | Size the component small or large. | string | `'sm' \| 'lg'` | - | -| **type** | Specifies the type of component. | string | `'color' \| 'file' \| 'text' \| string` | 'text' | -| **valid** | Set component validation state to valid. | boolean | - | | +| Prop name | Description | Type | Values | Default | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------- | ------- | +| **disabled** | Toggle the disabled state for the component. | boolean | - | | +| **invalid** | Set component validation state to invalid. | boolean | - | | +| **model-value** | The default name for a value passed using v-model. | string | - | - | +| **plain-text** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | boolean | - | | +| **readonly** | Toggle the readonly state for the component. | boolean | - | | +| **size** | Size the component small or large. | string | `'sm' \| 'lg'` | - | +| **type** | Specifies the type of component. | string | `'color' \| 'file' \| 'text' \| string` | 'text' | +| **valid** | Set component validation state to valid. | boolean | - | | + +#### Events + +| Event name | Description | Properties | +| ---------------------- | ------------------------------------------------------------------------------ | ---------- | +| **change** | Event occurs when the element loses focus, after the content has been changed. | +| **input** | Event occurs immediately after the value of a component has changed. | +| **update-model-value** | Emit the new value whenever there’s an input or change event. | diff --git a/packages/docs/api/form/CFormRange.api.md b/packages/docs/api/form/CFormRange.api.md index 892a59a3..6882fbd2 100644 --- a/packages/docs/api/form/CFormRange.api.md +++ b/packages/docs/api/form/CFormRange.api.md @@ -8,11 +8,19 @@ import CFormRange from '@coreui/vue/src/components/form/CFormRange' #### Props -| Prop name | Description | Type | Values | Default | -| ------------ | ---------------------------------------------------------------- | ------- | ------ | ------- | -| **disabled** | Toggle the disabled state for the component. | boolean | - | - | -| **max** | Specifies the maximum value for the component. | number | - | - | -| **min** | Specifies the minimum value for the component. | number | - | - | -| **readonly** | Toggle the readonly state for the component. | boolean | - | | -| **steps** | Specifies the interval between legal numbers in the component. | number | - | - | -| **value** | The `value` attribute of component.
`@controllable` onChange | number | - | - | +| Prop name | Description | Type | Values | Default | +| --------------- | ---------------------------------------------------------------- | ------- | ------ | ------- | +| **disabled** | Toggle the disabled state for the component. | boolean | - | - | +| **max** | Specifies the maximum value for the component. | number | - | - | +| **min** | Specifies the minimum value for the component. | number | - | - | +| **model-value** | The default name for a value passed using v-model. | string | - | | +| **readonly** | Toggle the readonly state for the component. | boolean | - | | +| **steps** | Specifies the interval between legal numbers in the component. | number | - | - | +| **value** | The `value` attribute of component.
`@controllable` onChange | number | - | - | + +#### Events + +| Event name | Description | Properties | +| ---------------------- | --------------------------------------------------- | ---------- | +| **change** | Event occurs when the value has been changed. | +| **update-model-value** | Emit the new value whenever there’s a change event. | diff --git a/packages/docs/api/form/CFormSelect.api.md b/packages/docs/api/form/CFormSelect.api.md index dafa1d83..53e460d4 100644 --- a/packages/docs/api/form/CFormSelect.api.md +++ b/packages/docs/api/form/CFormSelect.api.md @@ -8,9 +8,18 @@ import CFormSelect from '@coreui/vue/src/components/form/CFormSelect' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | ------------------------------------------------------------ | ------- | -------------- | ------- | -| **html-size** | Specifies the number of visible options in a drop-down list. | number | - | - | -| **invalid** | Set component validation state to invalid. | boolean | - | | -| **size** | Size the component small or large. | string | `'sm' \| 'lg'` | - | -| **valid** | Set component validation state to valid. | boolean | - | | +| Prop name | Description | Type | Values | Default | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------- | ------- | +| **html-size** | Specifies the number of visible options in a drop-down list. | number | - | - | +| **invalid** | Set component validation state to invalid. | boolean | - | | +| **model-value** | The default name for a value passed using v-model. | string | - | - | +| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`.
Examples:
- `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
- `:options="['js', 'html']"` | Option[] \| string[] | - | - | +| **size** | Size the component small or large. | string | `'sm' \| 'lg'` | - | +| **valid** | Set component validation state to valid. | boolean | - | | + +#### Events + +| Event name | Description | Properties | +| ---------------------- | ---------------------------------------------------------------------------------- | ---------- | +| **change** | Event occurs when when a user changes the selected option of a ` element. + * Event occurs when when a user changes the selected option of a ``s with custom ## Default ::: demo - - - - - - + ::: ```vue + + + +// You can also add options manually - + ``` From d3c064d35264c8d37adc952cb4b0ff732b914c34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 13:13:09 +0100 Subject: [PATCH 011/434] docs: update documentation --- packages/docs/getting-started/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md index 128f665d..9dcb931b 100644 --- a/packages/docs/getting-started/introduction.md +++ b/packages/docs/getting-started/introduction.md @@ -22,7 +22,7 @@ yarn add @coreui/vue ## Using components ```ts -import { Alert } from '@coreui/vue'; +import { CAlert } from '@coreui/vue'; ``` ## Stylesheets From dd34bd9481e649b047d0508d802c3d78b8835ed5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 13:53:04 +0100 Subject: [PATCH 012/434] fix(CCardImage): wrong class name --- packages/coreui-vue/src/components/card/CCardImage.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-vue/src/components/card/CCardImage.ts b/packages/coreui-vue/src/components/card/CCardImage.ts index 31ea4fb8..d09d5e81 100644 --- a/packages/coreui-vue/src/components/card/CCardImage.ts +++ b/packages/coreui-vue/src/components/card/CCardImage.ts @@ -30,7 +30,7 @@ const CCardImage = defineComponent({ h( props.component, { - class: [props.orientation ? `card-img-${props.orientation}` : 'card-img'], + class: `card-img${props.orientation ? `-${props.orientation}` : ''}`, }, slots.default && slots.default(), ) From feea303588448f692dbf689985231a40b31f589a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 13:55:16 +0100 Subject: [PATCH 013/434] docs: update documentation --- packages/docs/components/card.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/components/card.md b/packages/docs/components/card.md index 8dee1a08..a1b53471 100644 --- a/packages/docs/components/card.md +++ b/packages/docs/components/card.md @@ -702,7 +702,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in - + From a239c07411d6189e1b4ca4009ef70daef56ca3f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 5 Nov 2021 13:58:03 +0100 Subject: [PATCH 014/434] release: v4.0.2 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-vue/README.md | 2 +- packages/coreui-vue/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 7335fed9..c8eb9869 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.2.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/lerna.json b/lerna.json index f4da3583..f66844a0 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "packages/*" ], "useWorkspaces": true, - "version": "4.0.0" + "version": "4.0.2" } diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 7335fed9..c8eb9869 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.2.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 12fc6e0a..4b213f7f 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "4.0.1", + "version": "4.0.2", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/package.json b/packages/docs/package.json index 79080aec..83b363c4 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "4.0.0", + "version": "4.0.2", "config": { "version_short": "4.0" }, From c6034d8497812adc0d1497b129165a8ca3725fd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 7 Nov 2021 15:45:13 +0100 Subject: [PATCH 015/434] fix: emit proper events --- packages/coreui-vue/src/components/form/CFormCheck.ts | 2 +- packages/coreui-vue/src/components/form/CFormInput.ts | 4 ++-- packages/coreui-vue/src/components/form/CFormRange.ts | 2 +- packages/coreui-vue/src/components/form/CFormSelect.ts | 5 +---- packages/coreui-vue/src/components/form/CFormSwitch.ts | 2 +- packages/coreui-vue/src/components/form/CFormTextarea.ts | 4 ++-- 6 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index d013b85c..c5325992 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -133,7 +133,7 @@ const CFormCheck = defineComponent({ const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('change', target.checked) + emit('change', event) emit('update:modelValue', target.checked) } diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index f96e00ee..488c5990 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -87,12 +87,12 @@ const CFormInput = defineComponent({ setup(props, { emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('change', target.value) + emit('change', event) emit('update:modelValue', target.value) } const handleInput = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('input', target.value) + emit('input', event) emit('update:modelValue', target.value) } diff --git a/packages/coreui-vue/src/components/form/CFormRange.ts b/packages/coreui-vue/src/components/form/CFormRange.ts index 13813889..3fa77140 100644 --- a/packages/coreui-vue/src/components/form/CFormRange.ts +++ b/packages/coreui-vue/src/components/form/CFormRange.ts @@ -74,7 +74,7 @@ const CFormRange = defineComponent({ setup(props, { emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('change', target.value) + emit('change', event) emit('update:modelValue', target.value) } diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index 777f8c22..e42a5a2d 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -77,14 +77,11 @@ const CFormSelect = defineComponent({ setup(props, { emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLSelectElement - const selected = Array.from(target.options) .filter((option) => option.selected) .map((option) => option.value) - const value = target.multiple ? selected : selected[0] - - emit('change', value) + emit('change', event) emit('update:modelValue', value) } diff --git a/packages/coreui-vue/src/components/form/CFormSwitch.ts b/packages/coreui-vue/src/components/form/CFormSwitch.ts index bae4f499..9685015e 100644 --- a/packages/coreui-vue/src/components/form/CFormSwitch.ts +++ b/packages/coreui-vue/src/components/form/CFormSwitch.ts @@ -96,7 +96,7 @@ const CFormSwitch = defineComponent({ const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('change', target.checked) + emit('change', event) emit('update:modelValue', target.checked) } diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index 53a53000..81b3e6bb 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -64,12 +64,12 @@ const CFormTextarea = defineComponent({ setup(props, { emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('change', target.value) + emit('change', event) emit('update:modelValue', target.value) } const handleInput = (event: InputEvent) => { const target = event.target as HTMLInputElement - emit('input', target.value) + emit('input', event) emit('update:modelValue', target.value) } From ce98e76ee43a907e6433a82e08a2a12ae581df3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 7 Nov 2021 15:51:33 +0100 Subject: [PATCH 016/434] refactor(CFormCheck): update indeterminate state --- packages/coreui-vue/src/components/form/CFormCheck.ts | 5 +++++ packages/docs/forms/checks-radios.md | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index c5325992..dbd5f720 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -57,6 +57,10 @@ const CFormCheck = defineComponent({ default: undefined, required: false, }, + /** + * Input Checkbox indeterminate Property + */ + indeterminate: Boolean, /** * Group checkboxes or radios on the same horizontal row by adding. */ @@ -149,6 +153,7 @@ const CFormCheck = defineComponent({ }, ], id: props.id, + indeterminate: props.indeterminate, onChange: (event: InputEvent) => handleChange(event), type: props.type, }) diff --git a/packages/docs/forms/checks-radios.md b/packages/docs/forms/checks-radios.md index c495c144..12c76a53 100644 --- a/packages/docs/forms/checks-radios.md +++ b/packages/docs/forms/checks-radios.md @@ -22,14 +22,14 @@ Browser default checkboxes and radios are replaced with the help of ` + ::: ```vue - + ``` ### Disabled From 1fbf1bfa3ea9a06a87de50d9ea192749ef8cb6fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 7 Nov 2021 15:52:01 +0100 Subject: [PATCH 017/434] chore: update dependencies and devDependencies --- package.json | 10 +- packages/coreui-vue-chartjs/package.json | 7 +- packages/coreui-vue/package.json | 6 +- yarn.lock | 388 +++++++++++------------ 4 files changed, 206 insertions(+), 205 deletions(-) diff --git a/package.json b/package.json index 89a52b4a..ea715505 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,12 @@ }, "devDependencies": { "@types/jest": "^27.0.2", - "@typescript-eslint/eslint-plugin": "^5.2.0", - "@typescript-eslint/parser": "^5.2.0", - "@vue/compiler-sfc": "^3.2.20", + "@typescript-eslint/eslint-plugin": "^5.3.0", + "@typescript-eslint/parser": "^5.3.0", + "@vue/compiler-sfc": "^3.2.21", "@vue/eslint-config-prettier": "^6.0.0", - "@vue/eslint-config-typescript": "^9.0.0", - "eslint": "8.1.0", + "@vue/eslint-config-typescript": "^9.0.1", + "eslint": "8.2.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^8.0.3", "jest": "^27.3.1", diff --git a/packages/coreui-vue-chartjs/package.json b/packages/coreui-vue-chartjs/package.json index 6bbade84..beb06210 100644 --- a/packages/coreui-vue-chartjs/package.json +++ b/packages/coreui-vue-chartjs/package.json @@ -40,18 +40,19 @@ "@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-typescript": "^8.3.0", "@types/lodash": "^4.14.176", + "@vue/test-utils": "^2.0.0-0", "chart.js": "^3.6.0", "lodash": "^4.17.21", - "rollup": "^2.58.3", + "rollup": "^2.59.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-vue": "^6.0.0", "typescript": "^4.4.3", - "vue": "^3.2.20", + "vue": "^3.2.21", "vue-types": "^4.0.1" }, "peerDependencies": { "@coreui/chartjs": "^3.0.0", "chart.js": "^3.4.1", - "vue": "^3.2.20" + "vue": "^3.2.21" } } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 4b213f7f..ea8e93c5 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -42,15 +42,15 @@ "@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-typescript": "^8.3.0", "@vue/test-utils": "^2.0.0-0", - "rollup": "^2.58.3", + "rollup": "^2.59.0", "rollup-plugin-vue": "^6.0.0", "typescript": "^4.4.4", - "vue": "^3.2.20", + "vue": "^3.2.21", "vue-types": "^4.1.1" }, "peerDependencies": { "@coreui/coreui": "^4.0.5", - "vue": "^3.2.20" + "vue": "^3.2.21" }, "standard": { "ignore": [ diff --git a/yarn.lock b/yarn.lock index 45514a9f..7e63512e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -170,9 +170,9 @@ js-tokens "^4.0.0" "@babel/parser@^7.1.0", "@babel/parser@^7.13.12", "@babel/parser@^7.14.7", "@babel/parser@^7.15.0", "@babel/parser@^7.16.0", "@babel/parser@^7.6.0", "@babel/parser@^7.7.2", "@babel/parser@^7.9.6": - version "7.16.0" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.0.tgz#cf147d7ada0a3655e79bf4b08ee846f00a00a295" - integrity sha512-TEHWXf0xxpi9wKVyBCmRcSSDjbJ/cl6LUdlbYUHEaNQUJGhreJbZrXT6sR4+fZLxVUJqNRB4KyOvjuy/D9009A== + version "7.16.2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.2.tgz#3723cd5c8d8773eef96ce57ea1d9b7faaccd12ac" + integrity sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw== "@babel/plugin-syntax-async-generators@^7.8.4": version "7.8.4" @@ -340,10 +340,10 @@ resolved "https://registry.yarnpkg.com/@coreui/icons/-/icons-2.1.0.tgz#b21641d3d034fdef308c87dc347c8684c408a753" integrity sha512-3yY9J0088TSY403jwJeP5YERH3RLOvxdhOa4VIQsGOX4fuQZiyVUM+vwlzyCSpgAv9NwKPkCor+gc+JJaYf0TA== -"@eslint/eslintrc@^1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.3.tgz#41f08c597025605f672251dcc4e8be66b5ed7366" - integrity sha512-DHI1wDPoKCBPoLZA3qDR91+3te/wDSc1YhKg3jR8NxKKRJq2hwHwcWv31cSwSYvIBrmbENoYMWcenW8uproQqg== +"@eslint/eslintrc@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.4.tgz#dfe0ff7ba270848d10c5add0715e04964c034b31" + integrity sha512-h8Vx6MdxwWI2WM8/zREHMoqdgLNXEL4QX3MWSVMdyNJGvXVOs+6lp+m2hc3FnuMHDc4poxFNI20vCk0OmI4G0Q== dependencies: ajv "^6.12.4" debug "^4.3.2" @@ -351,7 +351,7 @@ globals "^13.9.0" ignore "^4.0.6" import-fresh "^3.2.1" - js-yaml "^3.13.1" + js-yaml "^4.1.0" minimatch "^3.0.4" strip-json-comments "^3.1.1" @@ -370,9 +370,9 @@ minimatch "^3.0.4" "@humanwhocodes/object-schema@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf" - integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w== + version "1.2.1" + resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" + integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== "@hutson/parse-repository-url@^3.0.0": version "3.0.2" @@ -1482,9 +1482,9 @@ type-detect "4.0.8" "@sinonjs/fake-timers@^8.0.1": - version "8.0.1" - resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.0.1.tgz#1c1c9a91419f804e59ae8df316a07dd1c3a76b94" - integrity sha512-AU7kwFxreVd6OAXcAFlKSmZquiRUU0FvYm44k1Y1QbK7Co4m0aqfGMhjykIeQp/H6rcl+nFmj0zfdUcGVs9Dew== + version "8.1.0" + resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7" + integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg== dependencies: "@sinonjs/commons" "^1.7.0" @@ -1789,13 +1789,13 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.2.0.tgz#2bdb247cc2e2afce7efbce09afb9a6f0a8a08434" - integrity sha512-qQwg7sqYkBF4CIQSyRQyqsYvP+g/J0To9ZPVNJpfxfekl5RmdvQnFFTVVwpRtaUDFNvjfe/34TgY/dpc3MgNTw== +"@typescript-eslint/eslint-plugin@^5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.3.0.tgz#a55ae72d28ffeb6badd817fe4566c9cced1f5e29" + integrity sha512-ARUEJHJrq85aaiCqez7SANeahDsJTD3AEua34EoQN9pHS6S5Bq9emcIaGGySt/4X2zSi+vF5hAH52sEen7IO7g== dependencies: - "@typescript-eslint/experimental-utils" "5.2.0" - "@typescript-eslint/scope-manager" "5.2.0" + "@typescript-eslint/experimental-utils" "5.3.0" + "@typescript-eslint/scope-manager" "5.3.0" debug "^4.3.2" functional-red-black-tree "^1.0.1" ignore "^5.1.8" @@ -1803,108 +1803,108 @@ semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/experimental-utils@5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.2.0.tgz#e3b2cb9cd0aff9b50f68d9a414c299fd26b067e6" - integrity sha512-fWyT3Agf7n7HuZZRpvUYdFYbPk3iDCq6fgu3ulia4c7yxmPnwVBovdSOX7RL+k8u6hLbrXcdAehlWUVpGh6IEw== +"@typescript-eslint/experimental-utils@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.3.0.tgz#ee56b4957547ed2b0fc7451205e41502e664f546" + integrity sha512-NFVxYTjKj69qB0FM+piah1x3G/63WB8vCBMnlnEHUsiLzXSTWb9FmFn36FD9Zb4APKBLY3xRArOGSMQkuzTF1w== dependencies: "@types/json-schema" "^7.0.9" - "@typescript-eslint/scope-manager" "5.2.0" - "@typescript-eslint/types" "5.2.0" - "@typescript-eslint/typescript-estree" "5.2.0" + "@typescript-eslint/scope-manager" "5.3.0" + "@typescript-eslint/types" "5.3.0" + "@typescript-eslint/typescript-estree" "5.3.0" eslint-scope "^5.1.1" eslint-utils "^3.0.0" -"@typescript-eslint/parser@^5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.2.0.tgz#dc081aa89de16b5676b10215519af3aa7b58fb72" - integrity sha512-Uyy4TjJBlh3NuA8/4yIQptyJb95Qz5PX//6p8n7zG0QnN4o3NF9Je3JHbVU7fxf5ncSXTmnvMtd/LDQWDk0YqA== +"@typescript-eslint/parser@^5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.3.0.tgz#7879f15e26d370ed3f653fb7dd06479531ed3ab9" + integrity sha512-rKu/yAReip7ovx8UwOAszJVO5MgBquo8WjIQcp1gx4pYQCwYzag+I5nVNHO4MqyMkAo0gWt2gWUi+36gWAVKcw== dependencies: - "@typescript-eslint/scope-manager" "5.2.0" - "@typescript-eslint/types" "5.2.0" - "@typescript-eslint/typescript-estree" "5.2.0" + "@typescript-eslint/scope-manager" "5.3.0" + "@typescript-eslint/types" "5.3.0" + "@typescript-eslint/typescript-estree" "5.3.0" debug "^4.3.2" -"@typescript-eslint/scope-manager@5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.2.0.tgz#7ce8e4ab2baaa0ad5282913ea8e13ce03ec6a12a" - integrity sha512-RW+wowZqPzQw8MUFltfKYZfKXqA2qgyi6oi/31J1zfXJRpOn6tCaZtd9b5u9ubnDG2n/EMvQLeZrsLNPpaUiFQ== +"@typescript-eslint/scope-manager@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.3.0.tgz#97d0ccc7c9158e89e202d5e24ce6ba49052d432e" + integrity sha512-22Uic9oRlTsPppy5Tcwfj+QET5RWEnZ5414Prby465XxQrQFZ6nnm5KnXgnsAJefG4hEgMnaxTB3kNEyjdjj6A== dependencies: - "@typescript-eslint/types" "5.2.0" - "@typescript-eslint/visitor-keys" "5.2.0" + "@typescript-eslint/types" "5.3.0" + "@typescript-eslint/visitor-keys" "5.3.0" -"@typescript-eslint/types@5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.2.0.tgz#7ad32d15abddb0ee968a330f0ea182ea544ef7cf" - integrity sha512-cTk6x08qqosps6sPyP2j7NxyFPlCNsJwSDasqPNjEQ8JMD5xxj2NHxcLin5AJQ8pAVwpQ8BMI3bTxR0zxmK9qQ== +"@typescript-eslint/types@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.3.0.tgz#af29fd53867c2df0028c57c36a655bd7e9e05416" + integrity sha512-fce5pG41/w8O6ahQEhXmMV+xuh4+GayzqEogN24EK+vECA3I6pUwKuLi5QbXO721EMitpQne5VKXofPonYlAQg== -"@typescript-eslint/typescript-estree@5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.2.0.tgz#c22e0ff6f8a4a3f78504a80ebd686fe2870a68ae" - integrity sha512-RsdXq2XmVgKbm9nLsE3mjNUM7BTr/K4DYR9WfFVMUuozHWtH5gMpiNZmtrMG8GR385EOSQ3kC9HiEMJWimxd/g== +"@typescript-eslint/typescript-estree@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.3.0.tgz#4f68ddd46dc2983182402d2ab21fb44ad94988cf" + integrity sha512-FJ0nqcaUOpn/6Z4Jwbtf+o0valjBLkqc3MWkMvrhA2TvzFXtcclIM8F4MBEmYa2kgcI8EZeSAzwoSrIC8JYkug== dependencies: - "@typescript-eslint/types" "5.2.0" - "@typescript-eslint/visitor-keys" "5.2.0" + "@typescript-eslint/types" "5.3.0" + "@typescript-eslint/visitor-keys" "5.3.0" debug "^4.3.2" globby "^11.0.4" is-glob "^4.0.3" semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/visitor-keys@5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.2.0.tgz#03522d35df98474f08e0357171a7d1b259a88f55" - integrity sha512-Nk7HizaXWWCUBfLA/rPNKMzXzWS8Wg9qHMuGtT+v2/YpPij4nVXrVJc24N/r5WrrmqK31jCrZxeHqIgqRzs0Xg== +"@typescript-eslint/visitor-keys@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.3.0.tgz#a6258790f3b7b2547f70ed8d4a1e0c3499994523" + integrity sha512-oVIAfIQuq0x2TFDNLVavUn548WL+7hdhxYn+9j3YdJJXB7mH9dAmZNJsPDa7Jc+B9WGqoiex7GUDbyMxV0a/aw== dependencies: - "@typescript-eslint/types" "5.2.0" + "@typescript-eslint/types" "5.3.0" eslint-visitor-keys "^3.0.0" -"@vue/compiler-core@3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.20.tgz#af5a3c5237818835b0d0be837eb5885a8d21c160" - integrity sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA== +"@vue/compiler-core@3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.21.tgz#26566c32b2ad838199d471ef5df620a83846f24e" + integrity sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ== dependencies: "@babel/parser" "^7.15.0" - "@vue/shared" "3.2.20" + "@vue/shared" "3.2.21" estree-walker "^2.0.2" source-map "^0.6.1" -"@vue/compiler-dom@3.2.20", "@vue/compiler-dom@^3.2.0": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz#8e0ef354449c0faf41519b00bfc2045eae01dcb5" - integrity sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg== +"@vue/compiler-dom@3.2.21", "@vue/compiler-dom@^3.2.0": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz#d6f6c85364ef8888f9c4e9122bfba11e78fb398c" + integrity sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA== dependencies: - "@vue/compiler-core" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/compiler-core" "3.2.21" + "@vue/shared" "3.2.21" -"@vue/compiler-sfc@3.2.20", "@vue/compiler-sfc@^3.2.0", "@vue/compiler-sfc@^3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz#2d7668e76f066c566dd7c09c15c9acce4e876e0a" - integrity sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ== +"@vue/compiler-sfc@3.2.21", "@vue/compiler-sfc@^3.2.0", "@vue/compiler-sfc@^3.2.20", "@vue/compiler-sfc@^3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz#42639ee49e725afb7d8f1d1940e75dc17a56002c" + integrity sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ== dependencies: "@babel/parser" "^7.15.0" - "@vue/compiler-core" "3.2.20" - "@vue/compiler-dom" "3.2.20" - "@vue/compiler-ssr" "3.2.20" - "@vue/ref-transform" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/compiler-core" "3.2.21" + "@vue/compiler-dom" "3.2.21" + "@vue/compiler-ssr" "3.2.21" + "@vue/ref-transform" "3.2.21" + "@vue/shared" "3.2.21" estree-walker "^2.0.2" magic-string "^0.25.7" postcss "^8.1.10" source-map "^0.6.1" -"@vue/compiler-ssr@3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz#9cceb6261d9932cb5568202610c1c28f86c5e521" - integrity sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w== +"@vue/compiler-ssr@3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz#37d124f89e8adef9fd56b85775de4b5310a0436e" + integrity sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g== dependencies: - "@vue/compiler-dom" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/compiler-dom" "3.2.21" + "@vue/shared" "3.2.21" "@vue/devtools-api@^6.0.0-beta.18": - version "6.0.0-beta.19" - resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf" - integrity sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw== + version "6.0.0-beta.20" + resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.tgz#b5405c9a84fb44687d05e7c4c7854b1639141106" + integrity sha512-21u2jFOk8jbAneeGpDwZQ0W66RJa0IBDUyVl6SgKnn2cRFjLWzKj+ukXjpLhYr1KASyCe5E5U4jXwChVo0YUAw== "@vue/eslint-config-prettier@^6.0.0": version "6.0.0" @@ -1913,60 +1913,60 @@ dependencies: eslint-config-prettier "^6.0.0" -"@vue/eslint-config-typescript@^9.0.0": - version "9.0.0" - resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-9.0.0.tgz#e6a46d4ffb2c82b639fe183ec734569f33b47605" - integrity sha512-X5inaB7c8ADWt2ygFshuT5GRw1obXWQKFR7GTvK0q+H9Cuz/BRDLXEHZTx7AxHiA5Qri1q1C1uMCPFiCBAg+6w== +"@vue/eslint-config-typescript@^9.0.1": + version "9.0.1" + resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-9.0.1.tgz#692fc007cf20012882ac7466b69c3967a0b9809b" + integrity sha512-LmhEEy7xYLpPQDQnFhRP3ZEd9zFFKsQX7/qF3AKcNxTrgc4E0aASWK0Ciinlnw17hXNtq8LZKd3mYgtMigwxVg== dependencies: vue-eslint-parser "^8.0.0" -"@vue/reactivity@3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.20.tgz#81fe1c368e7f20bc0ec1dec1045bbee253582de8" - integrity sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w== +"@vue/reactivity@3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.21.tgz#073ad144192ed78a07e151e95a3baa515e4099a2" + integrity sha512-7C57zFm/5E3SSTUhVuYj1InDwuJ+GIVQ/z+H43C9sST85gIThGXVhksl1yWTAadf8Yz4T5lSbqi5Ds8U/ueWcw== dependencies: - "@vue/shared" "3.2.20" + "@vue/shared" "3.2.21" -"@vue/ref-transform@3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.20.tgz#2a59ec90caf8e5c7336776a0900bff0a8b81c090" - integrity sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q== +"@vue/ref-transform@3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.21.tgz#b0c554c9f640c3f005f77e676066aa0faba90984" + integrity sha512-uiEWWBsrGeun9O7dQExYWzXO3rHm/YdtFNXDVqCSoPypzOVxWxdiL+8hHeWzxMB58fVuV2sT80aUtIVyaBVZgQ== dependencies: "@babel/parser" "^7.15.0" - "@vue/compiler-core" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/compiler-core" "3.2.21" + "@vue/shared" "3.2.21" estree-walker "^2.0.2" magic-string "^0.25.7" -"@vue/runtime-core@3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.20.tgz#8f63e956a3f88fb772541443c45a7701211012cb" - integrity sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ== +"@vue/runtime-core@3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.21.tgz#e12dac8c3893b7aebfc37e32066718d8aa686ac5" + integrity sha512-7oOxKaU0D2IunOAMOOHZgJVrHg63xwng8BZx3fbgmakqEIMwHhQcp+5GV1sOg/sWW7R4UhaRDIUCukO2GRVK2Q== dependencies: - "@vue/reactivity" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/reactivity" "3.2.21" + "@vue/shared" "3.2.21" -"@vue/runtime-dom@3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz#8aa56ae6c30f9cd4a71ca0e9ec3c4bdc67148d15" - integrity sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig== +"@vue/runtime-dom@3.2.21": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.21.tgz#33dd15bc85281e773177a30dc6931c294bd77aa1" + integrity sha512-apBdriD6QsI4ywbllY8kjr9/0scGuStDuvLbJULPQkFPtHzntd51bP5PQTQVAEIc9kwnTozmj6x6ZdX/cwo7xA== dependencies: - "@vue/runtime-core" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/runtime-core" "3.2.21" + "@vue/shared" "3.2.21" csstype "^2.6.8" -"@vue/server-renderer@3.2.20", "@vue/server-renderer@^3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.20.tgz#705e07ae9425132b2b6227d308a51a13f4d4ec81" - integrity sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg== +"@vue/server-renderer@3.2.21", "@vue/server-renderer@^3.2.20": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.21.tgz#887d0a44de76f72313cff2686a24c0315231d634" + integrity sha512-QBgYqVgI7XCSBCqGa4LduV9vpfQFdZBOodFmq5Txk5W/v1KrJ1LoOh2Q0RHiRgtoK/UR9uyvRVcYqOmwHkZNEg== dependencies: - "@vue/compiler-ssr" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/compiler-ssr" "3.2.21" + "@vue/shared" "3.2.21" -"@vue/shared@3.2.20", "@vue/shared@^3.2.20": - version "3.2.20" - resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.20.tgz#53746961f731a8ea666e3316271e944238dc31db" - integrity sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w== +"@vue/shared@3.2.21", "@vue/shared@^3.2.20": + version "3.2.21" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.21.tgz#4cd80c0e62cf65a7adab2449e86b6f0cb33a130b" + integrity sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA== "@vue/test-utils@^2.0.0-0": version "2.0.0-rc.16" @@ -2207,17 +2207,17 @@ upath "^2.0.1" "@vueuse/core@^6.7.3": - version "6.7.4" - resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.7.4.tgz#8e15524454388b11c9eb6ff59a6742602b976e2f" - integrity sha512-y39SD+pxDkv7/Fe369c02FQpr/148otQr64ScPDTpw4fGnspc8ONXCNU3gTrvDFRuiylirdPBpXgmt/GDQO7RA== + version "6.8.0" + resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.8.0.tgz#dc004bc30031e053e9ef5011203c4a80f00986ed" + integrity sha512-C6KMBus29L/mVtA5eK26WAqj6tyPlugrKaPLi2uLtbV//BHjbxe1uo3gVXCc5SwouDEdc7zswlGPw/l0/++NRg== dependencies: - "@vueuse/shared" "6.7.4" + "@vueuse/shared" "6.8.0" vue-demi "*" -"@vueuse/shared@6.7.4": - version "6.7.4" - resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.7.4.tgz#9aa2967d20863cf3253afd08a2e6e84a61d2c89b" - integrity sha512-Lkm8myEiOj0sIqSXck5EXDbu0W705Q10BxydGLMfiV6wAY4U1zu+YgEgR37Wy2/mT1545pwQqiJ7bd3kQQFCMw== +"@vueuse/shared@6.8.0": + version "6.8.0" + resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.8.0.tgz#50713b770941293e557a4eae9424cad2aad44a85" + integrity sha512-+YjehQ8Qe4Qgyq8iTToVOzp4sZBAZvScv3AGJSMi6HYbe54+nyjrRfS8DN4fA0eUahyftHKZ00WKgMe7TS5N0w== dependencies: vue-demi "*" @@ -2585,9 +2585,9 @@ asap@^2.0.0, asap@~2.0.3: integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= asn1@~0.2.3: - version "0.2.4" - resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136" - integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg== + version "0.2.6" + resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d" + integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ== dependencies: safer-buffer "~2.1.0" @@ -2827,12 +2827,12 @@ browser-process-hrtime@^1.0.0: integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.17.5: - version "4.17.5" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.5.tgz#c827bbe172a4c22b123f5e337533ceebadfdd559" - integrity sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA== + version "4.17.6" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.6.tgz#c76be33e7786b497f66cad25a73756c8b938985d" + integrity sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw== dependencies: - caniuse-lite "^1.0.30001271" - electron-to-chromium "^1.3.878" + caniuse-lite "^1.0.30001274" + electron-to-chromium "^1.3.886" escalade "^3.1.1" node-releases "^2.0.1" picocolors "^1.0.0" @@ -2968,10 +2968,10 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== -caniuse-lite@^1.0.30001271, caniuse-lite@^1.0.30001272: - version "1.0.30001274" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz#26ca36204d15b17601ba6fc35dbdad950a647cc7" - integrity sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew== +caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001274: + version "1.0.30001278" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001278.tgz#51cafc858df77d966b17f59b5839250b24417fff" + integrity sha512-mpF9KeH8u5cMoEmIic/cr7PNS+F5LWBk0t2ekGT60lFf0Wq+n9LspAj0g3P+o7DQhD3sUdlMln4YFAWhFYn9jg== caseless@~0.12.0: version "0.12.0" @@ -3419,9 +3419,9 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: which "^2.0.1" css-loader@^6.5.0: - version "6.5.0" - resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.5.0.tgz#9d1cf7766a9a8f0b3c6e1638309b964dbdab46d3" - integrity sha512-VmuSdQa3K+wJsl39i7X3qGBM5+ZHmtTnv65fqMGI+fzmHoYmszTVvTqC1XN8JwWDViCB1a8wgNim5SV4fb37xg== + version "6.5.1" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.5.1.tgz#0c43d4fbe0d97f699c91e9818cb585759091d1b1" + integrity sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ== dependencies: icss-utils "^5.1.0" postcss "^8.2.15" @@ -3833,10 +3833,10 @@ ee-first@1.1.1: resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= -electron-to-chromium@^1.3.878: - version "1.3.885" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.885.tgz#c8cec32fbc61364127849ae00f2395a1bae7c454" - integrity sha512-JXKFJcVWrdHa09n4CNZYfYaK6EW5aAew7/wr3L1OnsD1L+JHL+RCtd7QgIsxUbFPeTwPlvnpqNNTOLkoefmtXg== +electron-to-chromium@^1.3.886: + version "1.3.890" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.890.tgz#e7143b659f73dc4d0512d1ae4baeb0fb9e7bc835" + integrity sha512-VWlVXSkv0cA/OOehrEyqjUTHwV8YXCPTfPvbtoeU2aHR21vI4Ejh5aC4AxUwOmbLbBgb6Gd3URZahoCxtBqCYQ== emittery@^0.8.1: version "0.8.1" @@ -4167,12 +4167,12 @@ eslint-visitor-keys@^3.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz#e32e99c6cdc2eb063f204eda5db67bfe58bb4186" integrity sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q== -eslint@8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.1.0.tgz#00f1f7dbf4134f26588e6c9f2efe970760f64664" - integrity sha512-JZvNneArGSUsluHWJ8g8MMs3CfIEzwaLx9KyH4tZ2i+R2/rPWzL8c0zg3rHdwYVpN/1sB9gqnjHwz9HoeJpGHw== +eslint@8.2.0: + version "8.2.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.2.0.tgz#44d3fb506d0f866a506d97a0fc0e90ee6d06a815" + integrity sha512-erw7XmM+CLxTOickrimJ1SiF55jiNlVSp2qqm0NuBWPtHYQCegD5ZMaW0c3i5ytPqL+SSLaCxdvQXFPLJn+ABw== dependencies: - "@eslint/eslintrc" "^1.0.3" + "@eslint/eslintrc" "^1.0.4" "@humanwhocodes/config-array" "^0.6.0" ajv "^6.10.0" chalk "^4.0.0" @@ -4206,7 +4206,7 @@ eslint@8.1.0: progress "^2.0.0" regexpp "^3.2.0" semver "^7.2.1" - strip-ansi "^6.0.0" + strip-ansi "^6.0.1" strip-json-comments "^3.1.0" text-table "^0.2.0" v8-compile-cache "^2.0.3" @@ -4386,9 +4386,9 @@ extsprintf@1.3.0: integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU= extsprintf@^1.2.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" - integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= + version "1.4.1" + resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07" + integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA== fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" @@ -5130,9 +5130,9 @@ ignore@^4.0.6: integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8: - version "5.1.8" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" - integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== + version "5.1.9" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb" + integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ== import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" @@ -6291,9 +6291,9 @@ loader-runner@^4.2.0: integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw== loader-utils@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.1.tgz#3b8d4386f42378d6434d32d7bc08e7a52d39575e" - integrity sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ== + version "2.0.2" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129" + integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A== dependencies: big.js "^5.2.2" emojis-list "^3.0.0" @@ -6602,9 +6602,9 @@ min-indent@^1.0.0: integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== mini-css-extract-plugin@^2.4.3: - version "2.4.3" - resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.3.tgz#be742943c192b028645d4389084ef187615fff82" - integrity sha512-zekavl9mZuGyk7COjsfFY/f655AX61EKE0AthXPrmDk+oZyjZ9WzO4WPjXnnO9xl8obK2kmM6rAQrBEmk+WK1g== + version "2.4.4" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.4.tgz#c7e5d2d931dcf100ae50ae949ba757c506b54b0f" + integrity sha512-UJ+aNuFQaQaECu7AamlWOBLj2cJ6XSGU4zNiqXeZ7lZLe5VD0DoSPWFbWArXueo+6FZVbgHzpX9lUIaBIDLuYg== dependencies: schema-utils "^3.1.0" @@ -6822,9 +6822,9 @@ no-case@^3.0.4: tslib "^2.0.3" node-fetch@^2.6.1: - version "2.6.5" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd" - integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ== + version "2.6.6" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.6.tgz#1751a7c01834e8e1697758732e9efb6eeadfaf89" + integrity sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA== dependencies: whatwg-url "^5.0.0" @@ -8193,10 +8193,10 @@ rollup-pluginutils@^2.8.2: dependencies: estree-walker "^0.6.1" -rollup@^2.58.3: - version "2.58.3" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.58.3.tgz#71a08138d9515fb65043b6a18618b2ed9ac8d239" - integrity sha512-ei27MSw1KhRur4p87Q0/Va2NAYqMXOX++FNEumMBcdreIRLURKy+cE2wcDJKBn0nfmhP2ZGrJkP1XPO+G8FJQw== +rollup@^2.59.0: + version "2.59.0" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.59.0.tgz#108c61b0fa0a37ebc8d1f164f281622056f0db59" + integrity sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw== optionalDependencies: fsevents "~2.3.2" @@ -9146,9 +9146,9 @@ uc.micro@^1.0.1, uc.micro@^1.0.5: integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== uglify-js@^3.1.4: - version "3.14.2" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.2.tgz#d7dd6a46ca57214f54a2d0a43cad0f35db82ac99" - integrity sha512-rtPMlmcO4agTUfz10CbgJ1k6UAoXM2gWb3GoMPPZB/+/Ackf8lNWk11K4rYi2D0apgoFRLtQOZhb+/iGNJq26A== + version "3.14.3" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.3.tgz#c0f25dfea1e8e5323eccf59610be08b6043c15cf" + integrity sha512-mic3aOdiq01DuSVx0TseaEzMIVqebMZ0Z3vaeDhFEh9bsc24hV1TFvN74reA2vs08D0ZWfNjAcJ3UbVLaBss+g== uid-number@0.0.6: version "0.0.6" @@ -9305,9 +9305,9 @@ void-elements@^3.1.0: integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk= vue-demi@*: - version "0.12.0" - resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.0.tgz#b202a01cdfc635443e41faea697d624caac0fa73" - integrity sha512-eggsbQSQEJKlvQrtrJLx4J44MIVq5+Z7QetIEh1Na+ZWLgt5Fq0qskQ1QmckTTEoFcUdn36c4K23EjtXZhws7w== + version "0.12.1" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c" + integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw== vue-docgen-api@^4.41.2: version "4.41.2" @@ -9379,9 +9379,9 @@ vue-jest@^5.0.0-0: tsconfig "^7.0.0" vue-loader@^16.8.2: - version "16.8.2" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.2.tgz#78552d6558207a93f09e4fb68b068d44964eb740" - integrity sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q== + version "16.8.3" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087" + integrity sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA== dependencies: chalk "^4.1.0" hash-sum "^2.0.0" @@ -9401,16 +9401,16 @@ vue-types@^4.0.1, vue-types@^4.1.1: dependencies: is-plain-object "5.0.0" -vue@^3.2.20: - version "3.2.20" - resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.20.tgz#940f8aa8bf3e3be78243ca582bad41fcd45ae3e6" - integrity sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw== +vue@^3.2.20, vue@^3.2.21: + version "3.2.21" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.21.tgz#55f5665172d95cf97e806b9aad0a375180be23a1" + integrity sha512-jpy7ckXdyclfRzqLjL4mtq81AkzQleE54KjZsJg/9OorNVurAxdlU5XpD49GpjKdnftuffKUvx2C5jDOrgc/zg== dependencies: - "@vue/compiler-dom" "3.2.20" - "@vue/compiler-sfc" "3.2.20" - "@vue/runtime-dom" "3.2.20" - "@vue/server-renderer" "3.2.20" - "@vue/shared" "3.2.20" + "@vue/compiler-dom" "3.2.21" + "@vue/compiler-sfc" "3.2.21" + "@vue/runtime-dom" "3.2.21" + "@vue/server-renderer" "3.2.21" + "@vue/shared" "3.2.21" vuepress@^2.0.0-beta.27: version "2.0.0-beta.27" @@ -9552,9 +9552,9 @@ webpack-sources@^3.2.0: integrity sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA== webpack@^5.60.0: - version "5.61.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.61.0.tgz#fa827f0ee9bdfd141dd73c3e891e955ebd52fe7f" - integrity sha512-fPdTuaYZ/GMGFm4WrPi2KRCqS1vDp773kj9S0iI5Uc//5cszsFEDgHNaX4Rj1vobUiU1dFIV3mA9k1eHeluFpw== + version "5.62.1" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.62.1.tgz#06f09b56a7b1bb13ed5137ad4b118358a90c9505" + integrity sha512-jNLtnWChS2CMZ7vqWtztv0G6fYB5hz11Zsadp5tE7e4/66zVDj7/KUeQZOsOl8Hz5KrLJH1h2eIDl6AnlyE12Q== dependencies: "@types/eslint-scope" "^3.7.0" "@types/estree" "^0.0.50" From 0ebff6c858eadb725fa220dc69cdbc4546836b10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 8 Nov 2021 15:55:50 +0100 Subject: [PATCH 018/434] refactor: update events --- .../src/components/form/CFormCheck.ts | 21 +++---------------- .../src/components/form/CFormInput.ts | 18 ++++++++-------- .../src/components/form/CFormRange.ts | 2 +- .../src/components/form/CFormTextarea.ts | 6 ------ .../__snapshots__/CFormInput.spec.ts.snap | 6 +++--- 5 files changed, 16 insertions(+), 37 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index dbd5f720..8c75d320 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, onMounted, watch, ref } from 'vue' +import { defineComponent, h } from 'vue' import { shape } from 'vue-types' import { Color, Shape } from '../props' @@ -120,21 +120,6 @@ const CFormCheck = defineComponent({ 'update:modelValue', ], setup(props, { attrs, emit, slots }) { - const checked = ref(attrs.checked) - - onMounted(() => { - if (props.modelValue && typeof props.modelValue === 'boolean') { - console.log(props.modelValue) - } - }) - - watch( - () => props.modelValue, - () => { - if (typeof props.modelValue === 'boolean') checked.value = props.modelValue - }, - ) - const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('change', event) @@ -143,8 +128,7 @@ const CFormCheck = defineComponent({ const formControl = () => { return h('input', { - ...attrs, - checked: checked.value, + checked: props.modelValue, class: [ props.button ? 'btn-check' : 'form-check-input', { @@ -156,6 +140,7 @@ const CFormCheck = defineComponent({ indeterminate: props.indeterminate, onChange: (event: InputEvent) => handleChange(event), type: props.type, + ...attrs, }) } const formLabel = () => { diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 488c5990..6233b94f 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -85,11 +85,11 @@ const CFormInput = defineComponent({ 'update:modelValue', ], setup(props, { emit, slots }) { - const handleChange = (event: InputEvent) => { - const target = event.target as HTMLInputElement - emit('change', event) - emit('update:modelValue', target.value) - } + // const handleChange = (event: InputEvent) => { + // const target = event.target as HTMLInputElement + // emit('change', event) + // emit('update:modelValue', target.value) + // } const handleInput = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('input', event) @@ -100,9 +100,6 @@ const CFormInput = defineComponent({ h( 'input', { - type: props.type, - disabled: props.disabled, - readonly: props.readonly, class: [ props.plainText ? 'form-control-plaintext' : 'form-control', { @@ -112,8 +109,11 @@ const CFormInput = defineComponent({ 'is-valid': props.valid, }, ], - onChange: (event: InputEvent) => handleChange(event), + disabled: props.disabled, + // onChange: (event: InputEvent) => handleChange(event), onInput: (event: InputEvent) => handleInput(event), + readonly: props.readonly, + type: props.type, value: props.modelValue, }, slots.default && slots.default(), diff --git a/packages/coreui-vue/src/components/form/CFormRange.ts b/packages/coreui-vue/src/components/form/CFormRange.ts index 3fa77140..d5d1e1ae 100644 --- a/packages/coreui-vue/src/components/form/CFormRange.ts +++ b/packages/coreui-vue/src/components/form/CFormRange.ts @@ -90,7 +90,7 @@ const CFormRange = defineComponent({ steps: props.steps, readonly: props.readonly, type: 'range', - value: props.modelValue || props.value, + value: props.modelValue, }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index 81b3e6bb..f1e50cf5 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -62,11 +62,6 @@ const CFormTextarea = defineComponent({ 'update:modelValue', ], setup(props, { emit, slots }) { - const handleChange = (event: InputEvent) => { - const target = event.target as HTMLInputElement - emit('change', event) - emit('update:modelValue', target.value) - } const handleInput = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('input', event) @@ -86,7 +81,6 @@ const CFormTextarea = defineComponent({ 'is-valid': props.valid, }, ], - onChange: (event: InputEvent) => handleChange(event), onInput: (event: InputEvent) => handleInput(event), value: props.modelValue, }, diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap index 87415666..4440a94d 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize (two) CFormInput component renders correctly 1`] = `""`; +exports[`Customize (two) CFormInput component renders correctly 1`] = `""`; -exports[`Customize CFormInput component renders correctly 1`] = `""`; +exports[`Customize CFormInput component renders correctly 1`] = `""`; -exports[`Loads and display CFormInput component renders correctly 1`] = `""`; +exports[`Loads and display CFormInput component renders correctly 1`] = `""`; From 8c65225fbf8515cb11df004765bb5ab9981c0281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 8 Nov 2021 16:23:25 +0100 Subject: [PATCH 019/434] release: v4.0.3 --- .github/SUPPORT.md | 2 +- README.md | 3 +-- lerna.json | 2 +- packages/coreui-vue/README.md | 3 +-- packages/coreui-vue/package.json | 2 +- .../.vuepress/theme-coreui/src/client/components/Footer.vue | 3 --- .../.vuepress/theme-coreui/src/client/components/Header.vue | 3 --- packages/docs/package.json | 2 +- 8 files changed, 6 insertions(+), 14 deletions(-) diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md index 3d3cbbe5..74584c95 100644 --- a/.github/SUPPORT.md +++ b/.github/SUPPORT.md @@ -6,4 +6,4 @@ See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. For general troubleshooting or help getting started: -- Join [the official community](https://community.coreui.io/). +- Join [GitHub Discussions](https://github.com/coreui/coreui-vue/discussions). diff --git a/README.md b/README.md index c8eb9869..2d312f2c 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.3.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` @@ -128,7 +128,6 @@ Editor preferences are available in the [editor config](https://github.com/coreu Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. - Read and subscribe to [The Official CoreUI Blog](https://blog.coreui.io/). -- Join [the official Community](https://community.coreui.io/). You can also follow [@core_ui on Twitter](https://twitter.com/core_ui). diff --git a/lerna.json b/lerna.json index f66844a0..61061593 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "packages/*" ], "useWorkspaces": true, - "version": "4.0.2" + "version": "4.0.3" } diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index c8eb9869..2d312f2c 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.0.3.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` @@ -128,7 +128,6 @@ Editor preferences are available in the [editor config](https://github.com/coreu Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. - Read and subscribe to [The Official CoreUI Blog](https://blog.coreui.io/). -- Join [the official Community](https://community.coreui.io/). You can also follow [@core_ui on Twitter](https://twitter.com/core_ui). diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index ea8e93c5..0da82078 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "4.0.2", + "version": "4.0.3", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue index b214ccb5..99e1680c 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue @@ -8,9 +8,6 @@
  • Twitter
    • -
  • - Community -
  • CoreUI (Vanilla)
    • diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue index 92fc190e..6641dd21 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue @@ -11,9 +11,6 @@ - - - diff --git a/packages/docs/package.json b/packages/docs/package.json index 83b363c4..5d28981a 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "4.0.2", + "version": "4.0.3", "config": { "version_short": "4.0" }, From 8c27214384e91e45e0e4eed09b19f53742b9b685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 28 Nov 2021 16:44:21 +0100 Subject: [PATCH 020/434] feat(CPlaceholder): add new component and directive --- packages/coreui-vue/src/components/index.ts | 1 + .../components/placeholder/CPlaceholder.ts | 139 +++++++++++++ .../__tests__/CPlaceholder.spec.ts | 44 ++++ .../__snapshots__/CPlaceholder.spec.ts.snap | 15 ++ .../src/components/placeholder/index.ts | 10 + packages/coreui-vue/src/directives/index.ts | 5 +- .../src/directives/v-c-placeholder.ts | 32 +++ .../coreui-vue/src/directives/v-c-visible.ts | 33 +++ packages/coreui-vue/src/index.ts | 3 +- packages/docs/.vuepress/config.ts | 9 +- .../docs/api/placeholder/CPlaceholder.api.md | 22 ++ packages/docs/components/placeholder.md | 191 ++++++++++++++++++ 12 files changed, 494 insertions(+), 10 deletions(-) create mode 100644 packages/coreui-vue/src/components/placeholder/CPlaceholder.ts create mode 100644 packages/coreui-vue/src/components/placeholder/__tests__/CPlaceholder.spec.ts create mode 100644 packages/coreui-vue/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.ts.snap create mode 100644 packages/coreui-vue/src/components/placeholder/index.ts create mode 100644 packages/coreui-vue/src/directives/v-c-placeholder.ts create mode 100644 packages/coreui-vue/src/directives/v-c-visible.ts create mode 100644 packages/docs/api/placeholder/CPlaceholder.api.md create mode 100644 packages/docs/components/placeholder.md diff --git a/packages/coreui-vue/src/components/index.ts b/packages/coreui-vue/src/components/index.ts index db9dfee1..0d3dae9e 100644 --- a/packages/coreui-vue/src/components/index.ts +++ b/packages/coreui-vue/src/components/index.ts @@ -24,6 +24,7 @@ export * from './nav' export * from './navbar' export * from './offcanvas' export * from './pagination' +export * from './placeholder' export * from './progress' export * from './popover' export * from './sidebar' diff --git a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts new file mode 100644 index 00000000..07098013 --- /dev/null +++ b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts @@ -0,0 +1,139 @@ +import { defineComponent, h } from 'vue' + +import { Color } from '../props' + +const BREAKPOINTS = [ + 'xxl' as const, + 'xl' as const, + 'lg' as const, + 'md' as const, + 'sm' as const, + 'xs' as const, +] + +export const CPlaceholder = defineComponent({ + name: 'CPlaceholder', + props: { + /** + * Set animation type to better convey the perception of something being actively loaded. + * + * @values 'glow', 'wave' + */ + animation: { + type: String, + default: undefined, + require: false, + validator: (value: string) => { + return ['glow', 'wave'].includes(value) + }, + }, + /** + * Sets the color context of the component to one of CoreUI’s themed colors. + * + * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' + */ + color: Color, + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + component: { + type: String, + default: 'span', + required: false, + }, + /** + * Size the component extra small, small, or large. + * + * @values 'xs', 'sm', 'lg' + */ + size: { + type: String, + default: undefined, + required: false, + validator: (value: string) => { + return ['xs', 'sm', 'lg'].includes(value) + }, + }, + /** + * The number of columns on extra small devices (<576px). + */ + xs: { + type: Number, + default: undefined, + require: false, + }, + /** + * The number of columns on small devices (<768px). + */ + sm: { + type: Number, + default: undefined, + require: false, + }, + /** + * The number of columns on medium devices (<992px). + */ + md: { + type: Number, + default: undefined, + require: false, + }, + /** + * The number of columns on large devices (<1200px). + */ + lg: { + type: Number, + default: undefined, + require: false, + }, + /** + * The number of columns on X-Large devices (<1400px). + */ + xl: { + type: Number, + default: undefined, + require: false, + }, + /** + * The number of columns on XX-Large devices (≥1400px). + */ + xxl: { + type: Number, + default: undefined, + require: false, + }, + }, + setup(props, { slots }) { + const repsonsiveClassNames: string[] = [] + + BREAKPOINTS.forEach((bp) => { + const breakpoint = props[bp] + + const infix = bp === 'xs' ? '' : `-${bp}` + + if (typeof breakpoint === 'number') { + repsonsiveClassNames.push(`col${infix}-${breakpoint}`) + } + + if (typeof breakpoint === 'boolean') { + repsonsiveClassNames.push(`col${infix}`) + } + }) + + return () => + h( + props.component, + { + class: [ + props.animation ? `placeholder-${props.animation}` : 'placeholder', + { + [`bg-${props.color}`]: props.color, + [`placeholder-${props.size}`]: props.size, + }, + repsonsiveClassNames, + ], + }, + slots.default && slots.default(), + ) + }, +}) diff --git a/packages/coreui-vue/src/components/placeholder/__tests__/CPlaceholder.spec.ts b/packages/coreui-vue/src/components/placeholder/__tests__/CPlaceholder.spec.ts new file mode 100644 index 00000000..1c87b059 --- /dev/null +++ b/packages/coreui-vue/src/components/placeholder/__tests__/CPlaceholder.spec.ts @@ -0,0 +1,44 @@ +import { shallowMount } from '@vue/test-utils' +import { CPlaceholder as Component } from './../../' + +const ComponentName = 'CPlaceholder' +const wrapper = shallowMount(Component) +const customWrapper = shallowMount(Component, { + props: { + animation: 'glow', + color: 'secondary', + size: 'lg', + sm: 7, + }, + attrs: { + class: 'bazinga', + }, + slots: { + default: 'Hello World!', + }, +}) + +describe(`Loads and display ${ComponentName} component`, () => { + it('has a name', () => { + expect(Component.name).toMatch(ComponentName) + }) + it('renders correctly', () => { + expect(wrapper.element).toMatchSnapshot() + }) + it('renders correctly with slot', () => { + expect(customWrapper.element).toMatchSnapshot() + }) +}) + +describe(`Customize ${ComponentName} component`, () => { + it('has a prope class names', () => { + expect(customWrapper.find('span').classes('bazinga')).toBe(true) + expect(customWrapper.find('span').classes('bg-secondary')).toBe(true) + expect(customWrapper.find('span').classes('col-sm-7')).toBe(true) + expect(customWrapper.find('span').classes('placeholder-glow')).toBe(true) + expect(customWrapper.find('span').classes('placeholder-lg')).toBe(true) + }) + it('default slot contains text', () => { + expect(customWrapper.text()).toBe('Hello World!') + }) +}) diff --git a/packages/coreui-vue/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.ts.snap b/packages/coreui-vue/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.ts.snap new file mode 100644 index 00000000..3f43d58c --- /dev/null +++ b/packages/coreui-vue/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.ts.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Loads and display CPlaceholder component renders correctly 1`] = ` + +`; + +exports[`Loads and display CPlaceholder component renders correctly with slot 1`] = ` + + Hello World! + +`; diff --git a/packages/coreui-vue/src/components/placeholder/index.ts b/packages/coreui-vue/src/components/placeholder/index.ts new file mode 100644 index 00000000..39369fc1 --- /dev/null +++ b/packages/coreui-vue/src/components/placeholder/index.ts @@ -0,0 +1,10 @@ +import { App } from 'vue' +import { CPlaceholder } from './CPlaceholder' + +const CPlaceholderPlugin = { + install: (app: App): void => { + app.component(CPlaceholder.name, CPlaceholder) + }, +} + +export { CPlaceholderPlugin, CPlaceholder } diff --git a/packages/coreui-vue/src/directives/index.ts b/packages/coreui-vue/src/directives/index.ts index fee95425..f5354127 100644 --- a/packages/coreui-vue/src/directives/index.ts +++ b/packages/coreui-vue/src/directives/index.ts @@ -1,4 +1,5 @@ -import vctooltip from './v-c-tooltip' +import vcplaceholder from './v-c-placeholder' import vcpopover from './v-c-popover' +import vctooltip from './v-c-tooltip' -export { vctooltip, vcpopover } +export { vcplaceholder, vcpopover, vctooltip, } diff --git a/packages/coreui-vue/src/directives/v-c-placeholder.ts b/packages/coreui-vue/src/directives/v-c-placeholder.ts new file mode 100644 index 00000000..fcfe23b3 --- /dev/null +++ b/packages/coreui-vue/src/directives/v-c-placeholder.ts @@ -0,0 +1,32 @@ +import { DirectiveBinding } from 'vue' + +const BREAKPOINTS = [ + 'xxl' as const, + 'xl' as const, + 'lg' as const, + 'md' as const, + 'sm' as const, + 'xs' as const, +] + +export default { + name: 'c-placeholder', + mounted(el: HTMLElement, binding: DirectiveBinding): void { + const value = binding.value + el.classList.add(value.animation ? `placeholder-${value.animation}` : 'placeholder') + + BREAKPOINTS.forEach((bp) => { + const breakpoint = value[bp] + + const infix = bp === 'xs' ? '' : `-${bp}` + + if (typeof breakpoint === 'number') { + el.classList.add(`col${infix}-${breakpoint}`) + } + + if (typeof breakpoint === 'boolean') { + el.classList.add(`col${infix}`) + } + }) + }, +} diff --git a/packages/coreui-vue/src/directives/v-c-visible.ts b/packages/coreui-vue/src/directives/v-c-visible.ts new file mode 100644 index 00000000..3a82fa4a --- /dev/null +++ b/packages/coreui-vue/src/directives/v-c-visible.ts @@ -0,0 +1,33 @@ +import { ObjectDirective } from '@vue/runtime-core' + +interface VShowElement extends HTMLElement { + // _vod = vue original display + _vod: string +} + +export const vVisible: ObjectDirective = { + beforeMount(el, { value }, { transition }) { + el._vod = el.style.display === 'none' ? '' : el.style.display + if (transition && value) { + transition.beforeEnter(el) + } + }, + mounted(el, { value }, { transition }) { + if (transition && value) { + transition.enter(el) + } + }, + updated(el, { value, oldValue }, { transition }) { + if (!value === !oldValue) return + if (transition) { + if (value) { + transition.beforeEnter(el) + transition.enter(el) + } else { + transition.leave(el, () => { + // setDisplay(el, false) + }) + } + } + }, +} diff --git a/packages/coreui-vue/src/index.ts b/packages/coreui-vue/src/index.ts index fefbcbad..180ad452 100644 --- a/packages/coreui-vue/src/index.ts +++ b/packages/coreui-vue/src/index.ts @@ -1,7 +1,7 @@ //@ts-nocheck import { App } from 'vue' import * as Components from './components' -import { vcpopover, vctooltip } from './directives' +import { vcplaceholder, vcpopover, vctooltip } from './directives' const removeKeysFromObject = (object, keys) => { return Object.entries(object).reduce((obj, [key, value]) => { @@ -30,6 +30,7 @@ const CoreuiVue = { // app.directive(directive, Directives[directive]) // } + app.directive('c-placeholder', vcplaceholder) app.directive('c-popover', vcpopover) app.directive('c-tooltip', vctooltip) }, diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts index 8e7d9f9b..42e8d042 100644 --- a/packages/docs/.vuepress/config.ts +++ b/packages/docs/.vuepress/config.ts @@ -245,13 +245,8 @@ export default defineUserConfig({ link: `/components/pagination.html`, }, { - text: 'Placeholders', - link: `/components/placeholders.html`, - disabled: true, - badge: { - color: 'warning', - text: 'WIP v4.1', - } + text: 'Placeholder', + link: `/components/placeholder.html`, }, { text: 'Popover', diff --git a/packages/docs/api/placeholder/CPlaceholder.api.md b/packages/docs/api/placeholder/CPlaceholder.api.md new file mode 100644 index 00000000..9e1f884d --- /dev/null +++ b/packages/docs/api/placeholder/CPlaceholder.api.md @@ -0,0 +1,22 @@ +### CPlaceholder + +```jsx +import { CPlaceholder } from '@coreui/vue' +// or +import CPlaceholder from '@coreui/vue/src/components/placeholder/CPlaceholder' +``` + +#### Props + +| Prop name | Description | Type | Values | Default | +| ------------- | --------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------- | ------- | +| **animation** | Set animation type to better convey the perception of something being actively loaded. | string | `'glow'`, `'wave'` | - | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | +| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | +| **size** | Size the component extra small, small, or large. | string | `'xs'`, `'sm'`, `'lg'` | - | +| **xs** | The number of columns on extra small devices (<576px). | number | - | - | +| **sm** | The number of columns on small devices (<768px). | number | - | - | +| **md** | The number of columns on medium devices (<992px). | number | - | - | +| **lg** | The number of columns on large devices (<1200px). | number | - | - | +| **xl** | The number of columns on X-Large devices (<1400px). | number | - | - | +| **xxl** | The number of columns on XX-Large devices (≥1400px). | number | - | - | diff --git a/packages/docs/components/placeholder.md b/packages/docs/components/placeholder.md new file mode 100644 index 00000000..cc3b5e4b --- /dev/null +++ b/packages/docs/components/placeholder.md @@ -0,0 +1,191 @@ +--- +title: Vue Placeholder Component +description: Use loading vue placeholders for your components or pages to indicate something may still be loading. +--- + +## About + +Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes. + + +## Example + +In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two. + +In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two. + + +:::demo +
    + + + + Card title + + Some quick example text to build on the card title and make up the bulk of the card's + content. + + Go somewhere + + + + + Placeholder + + + + + + + + + + + + + + + +
    +::: +```vue + + + + Card title + + Some quick example text to build on the card title and make up the bulk of the card's + content. + + Go somewhere + + + + + Placeholder + + + + + + + + + + + + + + + +``` + +## How it works + +Create placeholders with the `` component and a grid column propx (e.g., `:xs="6"`) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component. + +We apply additional styling to `CButton`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a ` ` within the element to reflect the height when actual text is rendered in its place. + +:::demo + + +::: +```vue + + +``` + + + The use of aria-hidden="true" only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update. + + +### Width + +You can change the `width` through grid column classes, width utilities, or inline styles. + +:::demo + + + +::: +```vue + + + +``` + +### Color + +By default, the `` uses `currentColor`. This can be overridden with a custom color or utility class. + +:::demo + + + + + + + + + + +::: +```vue + + + + + + + + + + +``` + +### Sizing + +The size of ``s are based on the typographic style of the parent element. Customize them with `size` prop: `lg`, `sm`, or `xs`. + +:::demo + + + + +::: +```vue + + + + +``` + +### Animation + +Animate placeholders with `animation="glow"` or `animation="wave"` to better convey the perception of something being _actively_ loaded. + +:::demo + + + + + + +::: +```vue + + + + + + + +``` + +## API + +!!!include(./api/placeholder/CPlaceholder.api.md)!!! \ No newline at end of file From 683d618b0c2a8115efc85a17349f5a3d94a5055f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 28 Nov 2021 16:45:23 +0100 Subject: [PATCH 021/434] feat(CCollapse): add horizontal variant --- .../src/components/collapse/CCollapse.ts | 70 +++++++++++++------ .../__snapshots__/CCollapse.spec.ts.snap | 2 +- packages/docs/api/collapse/CCollapse.api.md | 7 +- packages/docs/components/collapse.md | 41 +++++++++++ 4 files changed, 95 insertions(+), 25 deletions(-) diff --git a/packages/coreui-vue/src/components/collapse/CCollapse.ts b/packages/coreui-vue/src/components/collapse/CCollapse.ts index 4b76805b..28da531e 100644 --- a/packages/coreui-vue/src/components/collapse/CCollapse.ts +++ b/packages/coreui-vue/src/components/collapse/CCollapse.ts @@ -1,8 +1,16 @@ -import { defineComponent, h, Transition, withDirectives, vShow, RendererElement } from 'vue' +import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue' +import { vVisible } from '../../directives/v-c-visible' const CCollapse = defineComponent({ name: 'CCollapse', props: { + /** + * Set horizontal collapsing to transition the width instead of height. + */ + horizontal: { + type: Boolean, + required: false, + }, /** * Toggle the visibility of component. */ @@ -22,46 +30,68 @@ const CCollapse = defineComponent({ 'show', ], setup(props, { slots, emit }) { - const handleBeforeEnter = (el: RendererElement) => { - el.classList.remove('collapse') - el.classList.add('collapsing') + const collapsing = ref(false) + const show = ref(props.visible) + + const handleBeforeEnter = () => { + collapsing.value = true } + const handleEnter = (el: RendererElement, done: () => void) => { emit('show') el.addEventListener('transitionend', () => { - el.classList.add('collapse', 'show') done() }) - el.style.height = `${el.scrollHeight}px` + setTimeout(() => { + if (props.horizontal) { + el.style.width = `${el.scrollWidth}px` + return + } + el.style.height = `${el.scrollHeight}px` + }, 1) } + const handleAfterEnter = (el: RendererElement) => { - el.classList.remove('collapsing') - el.style.removeProperty('height') + show.value = true + collapsing.value = false + props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height') } + const handleBeforeLeave = (el: RendererElement) => { - el.classList.add('show') + collapsing.value = true + show.value = false + if (props.horizontal) { + el.style.width = `${el.scrollWidth}px` + return + } el.style.height = `${el.scrollHeight}px` } + const handleLeave = (el: RendererElement, done: () => void) => { emit('hide') - el.classList.remove('collapse', 'show') - el.classList.add('collapsing') el.addEventListener('transitionend', () => { done() }) - el.style.height = '0px' + setTimeout(() => { + if (props.horizontal) { + el.style.width = '0px' + return + } + el.style.height = '0px' + }, 1) } + const handleAfterLeave = (el: RendererElement) => { - el.classList.remove('collapsing') - el.classList.add('collapse') + collapsing.value = false + props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height') } return () => h( Transition, { - name: 'fade', - onBeforeEnter: (el) => handleBeforeEnter(el), + css: false, + onBeforeEnter: () => handleBeforeEnter(), onEnter: (el, done) => handleEnter(el, done), onAfterEnter: (el) => handleAfterEnter(el), onBeforeLeave: (el) => handleBeforeLeave(el), @@ -74,15 +104,13 @@ const CCollapse = defineComponent({ 'div', { class: [ - 'collapse', - { - show: props.visible, - }, + collapsing.value ? 'collapsing' : 'collapse', + { 'collapse-horizontal': props.horizontal, show: show.value }, ], }, slots.default && slots.default(), ), - [[vShow, props.visible]], + [[vVisible, props.visible]], ), ) }, diff --git a/packages/coreui-vue/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap b/packages/coreui-vue/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap index 29e5ae3b..409494a9 100644 --- a/packages/coreui-vue/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap +++ b/packages/coreui-vue/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap @@ -2,7 +2,7 @@ exports[`Loads and display CCollapse component renders correctly 1`] = ` " -
    Default slot
    +
    Default slot
    " `; diff --git a/packages/docs/api/collapse/CCollapse.api.md b/packages/docs/api/collapse/CCollapse.api.md index 31a1f67a..ff5409bd 100644 --- a/packages/docs/api/collapse/CCollapse.api.md +++ b/packages/docs/api/collapse/CCollapse.api.md @@ -8,9 +8,10 @@ import CCollapse from '@coreui/vue/src/components/collapse/CCollapse' #### Props -| Prop name | Description | Type | Values | Default | -| ----------- | ----------------------------------- | ------- | ------ | ------- | -| **visible** | Toggle the visibility of component. | boolean | - | | +| Prop name | Description | Type | Values | Default | +| -------------- | -------------------------------------------------------------------- | ------- | ------ | ------- | +| **horizontal** | Set horizontal collapsing to transition the width instead of height. | boolean | - | | +| **visible** | Toggle the visibility of component. | boolean | - | | #### Events diff --git a/packages/docs/components/collapse.md b/packages/docs/components/collapse.md index 53a1361f..dee27fc0 100644 --- a/packages/docs/components/collapse.md +++ b/packages/docs/components/collapse.md @@ -52,6 +52,46 @@ You can use a link or a button component. ``` +## Horizontal + +The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element. + +:::demo +Button +
    + + + + This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. + + + +
    +::: +```vue + + +``` + ## Multiple targets A `` can show and hide multiple elements. @@ -144,6 +184,7 @@ A `` can show and hide multiple elements. data() { return { visible: false, + visibleHorizontal: false, visibleA: false, visibleB: false, } From c1782bbef4cb79d7c01a4b6a04c15953cd8c58cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 28 Nov 2021 16:45:55 +0100 Subject: [PATCH 022/434] refactor: change repsonsiveCLassNames to repsonsiveClassNames --- packages/coreui-vue/src/components/grid/CCol.ts | 16 ++++++++-------- .../coreui-vue/src/components/grid/CContainer.ts | 6 +++--- packages/coreui-vue/src/components/grid/CRow.ts | 12 ++++++------ 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/coreui-vue/src/components/grid/CCol.ts b/packages/coreui-vue/src/components/grid/CCol.ts index 50e4ee87..b6f48080 100644 --- a/packages/coreui-vue/src/components/grid/CCol.ts +++ b/packages/coreui-vue/src/components/grid/CCol.ts @@ -84,7 +84,7 @@ const CCol = defineComponent({ }, }, setup(props, { slots }) { - const repsonsiveCLassNames: string[] = [] + const repsonsiveClassNames: string[] = [] BREAKPOINTS.forEach((bp) => { const breakpoint = props[bp] @@ -93,29 +93,29 @@ const CCol = defineComponent({ if (breakpoint) { if (typeof breakpoint === 'number' || typeof breakpoint === 'string') { - repsonsiveCLassNames.push(`col${infix}-${breakpoint}`) + repsonsiveClassNames.push(`col${infix}-${breakpoint}`) } if (typeof breakpoint === 'boolean') { - repsonsiveCLassNames.push(`col${infix}`) + repsonsiveClassNames.push(`col${infix}`) } } if (breakpoint && typeof breakpoint === 'object') { if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') { - repsonsiveCLassNames.push(`col${infix}-${breakpoint.span}`) + repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`) } if (typeof breakpoint.span === 'boolean') { - repsonsiveCLassNames.push(`col${infix}`) + repsonsiveClassNames.push(`col${infix}`) } if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') { - repsonsiveCLassNames.push(`order${infix}-${breakpoint.order}`) + repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`) } if (typeof breakpoint.offset === 'number') { - repsonsiveCLassNames.push(`offset${infix}-${breakpoint.offset}`) + repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`) } } }) @@ -124,7 +124,7 @@ const CCol = defineComponent({ h( 'div', { - class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col'], + class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'col'], }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/grid/CContainer.ts b/packages/coreui-vue/src/components/grid/CContainer.ts index 07eeabfe..6ca6e876 100644 --- a/packages/coreui-vue/src/components/grid/CContainer.ts +++ b/packages/coreui-vue/src/components/grid/CContainer.ts @@ -56,18 +56,18 @@ const CContainer = defineComponent({ }, }, setup(props, { slots }) { - const repsonsiveCLassNames: string[] = [] + const repsonsiveClassNames: string[] = [] BREAKPOINTS.forEach((bp) => { const breakpoint = props[bp] - breakpoint && repsonsiveCLassNames.push(`container-${bp}`) + breakpoint && repsonsiveClassNames.push(`container-${bp}`) }) return () => h( 'div', { - class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container'], + class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'container'], }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/grid/CRow.ts b/packages/coreui-vue/src/components/grid/CRow.ts index 4809e7c4..e17a4cd0 100644 --- a/packages/coreui-vue/src/components/grid/CRow.ts +++ b/packages/coreui-vue/src/components/grid/CRow.ts @@ -81,7 +81,7 @@ const CRow = defineComponent({ }, }, setup(props, { slots }) { - const repsonsiveCLassNames: string[] = [] + const repsonsiveClassNames: string[] = [] BREAKPOINTS.forEach((bp) => { const breakpoint = props[bp] @@ -89,16 +89,16 @@ const CRow = defineComponent({ if (typeof breakpoint === 'object') { if (breakpoint.cols) { - repsonsiveCLassNames.push(`row-cols${infix}-${breakpoint.cols}`) + repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`) } if (typeof breakpoint.gutter === 'number') { - repsonsiveCLassNames.push(`g${infix}-${breakpoint.gutter}`) + repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`) } if (typeof breakpoint.gutterX === 'number') { - repsonsiveCLassNames.push(`gx${infix}-${breakpoint.gutterX}`) + repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`) } if (typeof breakpoint.gutterY === 'number') { - repsonsiveCLassNames.push(`gy${infix}-${breakpoint.gutterY}`) + repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`) } } }) @@ -107,7 +107,7 @@ const CRow = defineComponent({ h( 'div', { - class: ['row', repsonsiveCLassNames], + class: ['row', repsonsiveClassNames], }, slots.default && slots.default(), ) From 17afaa5769e29d57e0b605787c21ea4755d3a416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 28 Nov 2021 16:47:09 +0100 Subject: [PATCH 023/434] refactor(COffcanvas): update backdrop class, update transition. --- .../src/components/offcanvas/COffcanvas.ts | 35 ++++++++++--------- .../offcanvas/__tests__/COffcanvas.spec.ts | 2 +- .../__snapshots__/COffcanvas.spec.ts.snap | 4 +-- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts index e069331a..3249500b 100644 --- a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts +++ b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts @@ -1,5 +1,6 @@ -import { defineComponent, h, ref, RendererElement, Transition, watch } from 'vue' +import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue' import { CBackdrop } from '../backdrop' +import { vVisible } from '../../directives/v-c-visible' const COffcanvas = defineComponent({ name: 'COffcanvas', @@ -139,25 +140,27 @@ const COffcanvas = defineComponent({ onAfterLeave: (el) => handleAfterLeave(el), }, () => - visible.value && - h( - 'div', - { - class: [ - 'offcanvas', - { - [`offcanvas-${props.placement}`]: props.placement, - }, - ], - ref: offcanvasRef, - role: 'dialog', - }, - slots.default && slots.default(), + withDirectives( + h( + 'div', + { + class: [ + 'offcanvas', + { + [`offcanvas-${props.placement}`]: props.placement, + }, + ], + ref: offcanvasRef, + role: 'dialog', + }, + slots.default && slots.default(), + ), + [[vVisible, props.visible]], ), ), props.backdrop && h(CBackdrop, { - class: 'modal-backdrop', + class: 'offcanvas-backdrop', visible: visible.value, }), ] diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvas.spec.ts b/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvas.spec.ts index efac2de2..c7bb8e12 100644 --- a/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvas.spec.ts +++ b/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvas.spec.ts @@ -47,6 +47,6 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.text()).toContain('Default slot') expect(customWrapper.find('div').classes('offcanvas')).toBe(true) expect(customWrapper.find('div').classes('offcanvas-bottom')).toBe(true) - expect(customWrapper.find('.modal-backdrop').classes('modal-backdrop')).toBe(true) + expect(customWrapper.find('.offcanvas-backdrop').classes('offcanvas-backdrop')).toBe(true) }) }) diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap index ac1d05c6..b33c33ae 100644 --- a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap +++ b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap @@ -4,7 +4,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = ` "
    Default slot
     - +
    " `; @@ -13,7 +13,7 @@ exports[`Loads and display COffcanvas component renders correctly 1`] = ` "
    Default slot
     - +
    " `; From cb137c60ae7ee99d4e63cb596678a16a6d30e0eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 28 Nov 2021 16:47:34 +0100 Subject: [PATCH 024/434] docs(CFormCheck): update API documentation --- packages/docs/api/form/CFormCheck.api.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/docs/api/form/CFormCheck.api.md b/packages/docs/api/form/CFormCheck.api.md index e09f7a29..f2a0cd8e 100644 --- a/packages/docs/api/form/CFormCheck.api.md +++ b/packages/docs/api/form/CFormCheck.api.md @@ -8,16 +8,17 @@ import CFormCheck from '@coreui/vue/src/components/form/CFormCheck' #### Props -| Prop name | Description | Type | Values | Default | -| --------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------- | -| **button** | Create button-like checkboxes and radio buttons. | string({
    /**
    _ Sets the color context of the component to one of CoreUI’s themed colors.
    _
    _ @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
    _/
    color: Color,
    /**
    _ Select the shape of the component.
    _
    _ @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
    _/
    shape: Shape,
    /**
    _ Size the component small or large.
    _
    _ @values 'sm' \| 'lg'
    _/
    size: {
    type: String,
    default: undefined,
    required: false,
    validator: (value: string) => {
    return ['sm', 'lg'].includes(value)
    },
    },
    /**
    _ Set the button variant to an outlined button or a ghost button.
    _/
    variant: {
    type: String,
    default: undefined,
    required: false,
    validator: (value: string) => {
    return ['outline', 'ghost'].includes(value)
    },
    },
    }) | - | | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - | -| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | | -| **invalid** | Set component validation state to invalid. | boolean | - | | -| **label** | The element represents a caption for a component. | string | - | - | -| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | | -| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | -| **valid** | Set component validation state to valid. | boolean | - | | +| Prop name | Description | Type | Values | Default | +| ----------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------- | +| **button** | Create button-like checkboxes and radio buttons. | string({
    /**
    _ Sets the color context of the component to one of CoreUI’s themed colors.
    _
    _ @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
    _/
    color: Color,
    /**
    _ Select the shape of the component.
    _
    _ @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
    _/
    shape: Shape,
    /**
    _ Size the component small or large.
    _
    _ @values 'sm' \| 'lg'
    _/
    size: {
    type: String,
    default: undefined,
    required: false,
    validator: (value: string) => {
    return ['sm', 'lg'].includes(value)
    },
    },
    /**
    _ Set the button variant to an outlined button or a ghost button.
    _/
    variant: {
    type: String,
    default: undefined,
    required: false,
    validator: (value: string) => {
    return ['outline', 'ghost'].includes(value)
    },
    },
    }) | - | | +| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - | +| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | | +| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | | +| **invalid** | Set component validation state to invalid. | boolean | - | | +| **label** | The element represents a caption for a component. | string | - | - | +| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | | +| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | +| **valid** | Set component validation state to valid. | boolean | - | | #### Events From 87e445095ef7e937c43a4d73b82d6a0fabc90e0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 28 Nov 2021 16:48:01 +0100 Subject: [PATCH 025/434] docs(CNavbar): add external content, and offcanvas examples --- packages/docs/components/navbar.md | 163 ++++++++++++++++++++++++++++- 1 file changed, 162 insertions(+), 1 deletion(-) diff --git a/packages/docs/components/navbar.md b/packages/docs/components/navbar.md index 9aee23cf..1c6d324c 100644 --- a/packages/docs/components/navbar.md +++ b/packages/docs/components/navbar.md @@ -945,7 +945,7 @@ With a toggler on the left and brand name on the right: ::: -```vue {() => { +```vue @@ -975,11 +975,172 @@ With a toggler on the left and brand name on the right: ``` +### External content + +Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the ``. + +::: demo + +
    +
    Collapsed content
    + Toggleable via the navbar brand. +
    +     + + + + + +::: +```vue + + +``` + +### Offcanvas + +Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar. + +In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely. + +:::demo + + + + + + Offcanvas + + + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + + +::: + +To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property. + +:::demo + + + + + + Offcanvas + + + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + + +::: + ``` - - ### Static backdrop If you set `backdrop` property to `static`, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it. From 207514fe3ac393bf049c49acb3222dc257ed024d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 22 Jan 2022 16:33:44 +0100 Subject: [PATCH 043/434] tests: update snapshots --- .../__tests__/__snapshots__/CFormCheck.spec.ts.snap | 10 ++++++++-- .../__tests__/__snapshots__/CFormSelect.spec.ts.snap | 2 +- .../modal/__tests__/__snapshots__/CModal.spec.ts.snap | 3 +-- .../__tests__/__snapshots__/CSidebar.spec.ts.snap | 10 ++-------- 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap index 74563730..2bd37f6d 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap @@ -1,7 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize with label - CFormCheck component renders correctly 1`] = `""`; +exports[`Customize with label - CFormCheck component renders correctly 1`] = ` +" +" +`; -exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `""`; +exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = ` +" +" +`; exports[`Loads and display CFormCheck component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSelect.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSelect.spec.ts.snap index 9ce4ba13..3cda08c9 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSelect.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormSelect.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CFormSelect component renders correctly 1`] = `""`; +exports[`Customize CFormSelect component renders correctly 1`] = `""`; exports[`Loads and display CFormSelect component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap index 07c56543..86ca7e34 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap +++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap @@ -7,8 +7,7 @@ exports[`Customize CModal component renders correctly 1`] = `
    Default slot
    - -" +" `; exports[`Loads and display CModal component renders correctly 1`] = ` diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap index d4ca113f..1f78fb3e 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap @@ -1,11 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CSidebar component renders correctly 1`] = ` -"
    Default slot
    -" -`; +exports[`Customize CSidebar component renders correctly 1`] = `"
    Default slot
    "`; -exports[`Loads and display CSidebar component renders correctly 1`] = ` -"
    Default slot
    -" -`; +exports[`Loads and display CSidebar component renders correctly 1`] = `"
    Default slot
    "`; From 42d075c4d5601ba55ce34926fd4021ac4f3180f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 22 Jan 2022 16:33:58 +0100 Subject: [PATCH 044/434] build: update rollup configuration --- packages/coreui-vue/rollup.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/coreui-vue/rollup.config.js b/packages/coreui-vue/rollup.config.js index c3441357..c2431368 100644 --- a/packages/coreui-vue/rollup.config.js +++ b/packages/coreui-vue/rollup.config.js @@ -30,6 +30,11 @@ export default [ file: pkg.module, exports: 'named', sourcemap: true, + sourcemapPathTransform: (relativeSourcePath) => { + return relativeSourcePath + .replace('../../node_modules/', '../') + .replace('../packages/coreui-vue', '..') + }, }, external, plugins: [...plugins, vue()], @@ -42,6 +47,11 @@ export default [ file: pkg.main, exports: 'named', sourcemap: true, + sourcemapPathTransform: (relativeSourcePath) => { + return relativeSourcePath + .replace('../../node_modules/', '../') + .replace('../packages/coreui-vue', '..') + }, }, external, plugins: [...plugins, vue({ template: { optimizeSSR: true } })], From 3abca642cb143ecacb75bbeba41c2f002730ba4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 22 Jan 2022 16:34:13 +0100 Subject: [PATCH 045/434] docs: update theme --- .../src/client/clientAppEnhance.ts | 8 +---- .../client/components/global/OutboundLink.vue | 30 ------------------- 2 files changed, 1 insertion(+), 37 deletions(-) delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/components/global/OutboundLink.vue diff --git a/packages/docs/.vuepress/theme-coreui/src/client/clientAppEnhance.ts b/packages/docs/.vuepress/theme-coreui/src/client/clientAppEnhance.ts index 4e256a81..5e42ab07 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/clientAppEnhance.ts +++ b/packages/docs/.vuepress/theme-coreui/src/client/clientAppEnhance.ts @@ -2,7 +2,7 @@ import { h } from 'vue' import { defineClientAppEnhance } from '@vuepress/client' import CodeGroup from './components/global/CodeGroup' import CodeGroupItem from './components/global/CodeGroupItem.vue' -import OutboundLink from './components/global/OutboundLink.vue' +// import OutboundLink from './components/global/OutboundLink.vue' import { useScrollPromise } from './composables' import './styles/index.scss' @@ -11,12 +11,6 @@ export default defineClientAppEnhance(({ app, router }) => { app.component('CodeGroup', CodeGroup) app.component('CodeGroupItem', CodeGroupItem) - // unregister the built-in `` to avoid warning - delete app._context.components.OutboundLink - // override the built-in `` - app.component('OutboundLink', OutboundLink) - - // compat with @vuepress/plugin-docsearch and @vuepress/plugin-search app.component('NavbarSearch', () => { const SearchComponent = app.component('Docsearch') || app.component('SearchBox') if (SearchComponent) { diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/global/OutboundLink.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/global/OutboundLink.vue deleted file mode 100755 index 86309237..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/global/OutboundLink.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - From 9207da5d236352dc0c2b01ab96e106e2c6e7d907 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 22 Jan 2022 16:34:36 +0100 Subject: [PATCH 046/434] build: update eslint configuration --- .eslintrc.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9aed90aa..52772cf5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,11 +9,10 @@ module.exports = { }, }, extends: [ - 'plugin:vue/vue3-essential', 'eslint:recommended', - '@vue/typescript/recommended', - '@vue/prettier', - '@vue/prettier/@typescript-eslint', + 'plugin:vue/vue3-essential', + '@vue/eslint-config-typescript', + '@vue/eslint-config-prettier', ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', From cdef7aeb69cbba619b2085d7e2847770c32f377a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 22 Jan 2022 20:47:55 +0100 Subject: [PATCH 047/434] fix(CFormSelect): component does not respect initially selected value --- .../src/components/form/CFormSelect.ts | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index fc6e6705..63d09304 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -3,6 +3,7 @@ import { defineComponent, h, PropType } from 'vue' type Option = { disabled?: boolean label?: string + selected?: boolean value?: string } @@ -28,10 +29,14 @@ const CFormSelect = defineComponent({ * The default name for a value passed using v-model. */ modelValue: { - type: String, + type: [String, Array] as PropType, default: undefined, require: false, }, + multiple: { + type: Boolean, + required: false, + }, /** * Options list of the select component. Available keys: `label`, `value`, `disabled`. * Examples: @@ -80,9 +85,8 @@ const CFormSelect = defineComponent({ const selected = Array.from(target.options) .filter((option) => option.selected) .map((option) => option.value) - const value = target.multiple ? selected : selected[0] emit('change', event) - emit('update:modelValue', value) + emit('update:modelValue', target.multiple ? selected : selected[0]) } return () => @@ -97,17 +101,26 @@ const CFormSelect = defineComponent({ 'is-valid': props.valid, }, ], + multiple: props.multiple, onChange: (event: InputEvent) => handleChange(event), size: props.htmlSize, + ...(props.modelValue && !props.multiple && { value: props.modelValue }), }, props.options ? props.options.map((option: Option | string) => { return h( 'option', { - ...(typeof option === 'object' && - option.disabled && { disabled: option.disabled }), - ...(typeof option === 'object' && option.value && { value: option.value }), + ...(typeof option === 'object' && { + ...(option.disabled && { disabled: option.disabled }), + ...(option.selected && { selected: option.selected }), + ...(option.value && { + value: option.value, + ...(props.modelValue && + props.multiple && + props.modelValue.includes(option.value) && { selected: true }), + }), + }), }, typeof option === 'string' ? option : option.label, ) From 4bd98e4bff2cd17c9313d10cfd64b5abf7d01a4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 22 Jan 2022 21:34:30 +0100 Subject: [PATCH 048/434] Create stale.yml --- .github/workflows/stale.yml | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 .github/workflows/stale.yml diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 00000000..93e2ebb1 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,27 @@ +# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time. +# +# You can adjust the behavior by modifying this file. +# For more information, see: +# https://github.com/actions/stale +name: Mark stale issues and pull requests + +on: + schedule: + - cron: '17 14 * * *' + +jobs: + stale: + + runs-on: ubuntu-latest + permissions: + issues: write + pull-requests: write + + steps: + - uses: actions/stale@v3 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions' + stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions' + stale-issue-label: 'no-issue-activity' + stale-pr-label: 'no-pr-activity' From 3c1545f194f2d0fa71b127dc507f66c2ef19b4e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 Jan 2022 18:08:17 +0100 Subject: [PATCH 049/434] fix(CChart): chart is not reactive --- packages/coreui-vue-chartjs/src/CChart.ts | 30 +++++++++++++++++------ 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/coreui-vue-chartjs/src/CChart.ts b/packages/coreui-vue-chartjs/src/CChart.ts index 6205e094..2443f47f 100644 --- a/packages/coreui-vue-chartjs/src/CChart.ts +++ b/packages/coreui-vue-chartjs/src/CChart.ts @@ -1,4 +1,14 @@ -import { defineComponent, h, onMounted, onUnmounted, onUpdated, PropType, ref, Ref } from 'vue' +import { + computed, + defineComponent, + h, + onMounted, + onUnmounted, + onUpdated, + PropType, + ref, + Ref, +} from 'vue' import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto' import * as chartjs from 'chart.js' @@ -118,13 +128,19 @@ const CChart = defineComponent({ setup(props, { emit, slots }) { const canvasRef = ref() let chart: Chart | null - - const computedData = + const computedData = computed(() => typeof props.data === 'function' ? canvasRef.value ? props.data(canvasRef.value) : { datasets: [] } - : merge({}, props.data) + : merge({}, props.data), + ) + // const computedData = + // typeof props.data === 'function' + // ? canvasRef.value + // ? props.data(canvasRef.value) + // : { datasets: [] } + // : merge({}, props.data) const renderChart = () => { if (!canvasRef.value) return @@ -138,7 +154,7 @@ const CChart = defineComponent({ chart = new Chart(canvasRef.value, { type: props.type, - data: computedData, + data: computedData.value, options: props.options as ChartOptions, plugins: props.plugins, }) @@ -172,12 +188,12 @@ const CChart = defineComponent({ } if (!chart.config.data) { - chart.config.data = computedData + chart.config.data = computedData.value chart.update() return } - const { datasets: newDataSets = [], ...newChartData } = computedData + const { datasets: newDataSets = [], ...newChartData } = computedData.value const { datasets: currentDataSets = [] } = chart.config.data // copy values From 55f9c9be4248d578cfc6ea9dcc236284e17ed516 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 Jan 2022 18:15:29 +0100 Subject: [PATCH 050/434] release: @coreui/vue-chartjs@2.0.1 --- packages/coreui-vue-chartjs/package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/coreui-vue-chartjs/package.json b/packages/coreui-vue-chartjs/package.json index 7130bff4..c2fc182c 100644 --- a/packages/coreui-vue-chartjs/package.json +++ b/packages/coreui-vue-chartjs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-chartjs", - "version": "2.0.0", + "version": "2.0.1", "description": "Vue component wrapper for Chart.js", "keywords": [ "coreui", @@ -37,22 +37,22 @@ "devDependencies": { "@coreui/chartjs": "^3.0.0", "@rollup/plugin-commonjs": "^21.0.1", - "@rollup/plugin-node-resolve": "^13.0.6", + "@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-typescript": "^8.3.0", - "@types/lodash": "^4.14.177", + "@types/lodash": "^4.14.178", "@vue/test-utils": "^2.0.0-0", "chart.js": "^3.6.2", "lodash": "^4.17.21", - "rollup": "^2.60.2", + "rollup": "^2.66.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-vue": "^6.0.0", - "typescript": "^4.5.2", + "typescript": "^4.5.5", "vue": "^3.2.24", - "vue-types": "^4.0.1" + "vue-types": "^4.1.1" }, "peerDependencies": { "@coreui/chartjs": "^3.0.0", - "chart.js": "^3.4.1", + "chart.js": "^3.7.0", "vue": "^3.2.21" } } From 19988931ce0d5fed4fe316bc823bfb9bb706fc3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 Jan 2022 18:59:44 +0100 Subject: [PATCH 051/434] chore: update dependencies and devDependencies --- yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index bfaa499f..9b82289c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1429,7 +1429,7 @@ magic-string "^0.25.7" resolve "^1.17.0" -"@rollup/plugin-node-resolve@^13.0.6", "@rollup/plugin-node-resolve@^13.1.3": +"@rollup/plugin-node-resolve@^13.1.3": version "13.1.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.1.3.tgz#2ed277fb3ad98745424c1d2ba152484508a92d79" integrity sha512-BdxNk+LtmElRo5d06MGY4zoepyrXX1tkzX2hrnPEZ53k78GuOMWLqmJDGIIOPwVRIFZrLQOo+Yr6KtCuLIA0AQ== @@ -1591,7 +1591,7 @@ resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9" integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA== -"@types/lodash@^4.14.177": +"@types/lodash@^4.14.178": version "4.14.178" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8" integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw== @@ -6887,7 +6887,7 @@ rollup-pluginutils@^2.8.2: dependencies: estree-walker "^0.6.1" -rollup@^2.59.0, rollup@^2.60.2, rollup@^2.63.0, rollup@^2.66.0: +rollup@^2.59.0, rollup@^2.63.0, rollup@^2.66.0: version "2.66.0" resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.66.0.tgz#ee529ea15a20485d579039637fec3050bad03bbb" integrity sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g== @@ -7653,7 +7653,7 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.5.2, typescript@^4.5.5: +typescript@^4.5.5: version "4.5.5" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3" integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== @@ -7887,7 +7887,7 @@ vue-router@^4.0.12: dependencies: "@vue/devtools-api" "^6.0.0-beta.18" -vue-types@^4.0.1, vue-types@^4.1.1: +vue-types@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/vue-types/-/vue-types-4.1.1.tgz#7d7a4e4a01249a51b6da3faa301248c2ea5f5b97" integrity sha512-Jq2GZ/w6rExJbLA/h7nHBFLciu+YNekgox0DB64wN1snZ4IIJMq+qnqp1/vE4fc7vEjZcP5KGhLzkkSjIHLRzw== From 92d30edaf1855087dbe0483e050ab4dc224187e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 Jan 2022 19:02:20 +0100 Subject: [PATCH 052/434] chore: clean-up --- packages/coreui-vue-chartjs/src/CChart.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/coreui-vue-chartjs/src/CChart.ts b/packages/coreui-vue-chartjs/src/CChart.ts index 2443f47f..d082182d 100644 --- a/packages/coreui-vue-chartjs/src/CChart.ts +++ b/packages/coreui-vue-chartjs/src/CChart.ts @@ -135,12 +135,6 @@ const CChart = defineComponent({ : { datasets: [] } : merge({}, props.data), ) - // const computedData = - // typeof props.data === 'function' - // ? canvasRef.value - // ? props.data(canvasRef.value) - // : { datasets: [] } - // : merge({}, props.data) const renderChart = () => { if (!canvasRef.value) return From 0ecc82316d1cddd2389f1f1436c892f92a22ff83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 Jan 2022 19:05:15 +0100 Subject: [PATCH 053/434] release: v4.1.2 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-vue/README.md | 2 +- packages/coreui-vue/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8fe7a1ff..abcfff9d 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.1.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.1.2.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/lerna.json b/lerna.json index 60a60213..560eb97a 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "packages/*" ], "useWorkspaces": true, - "version": "4.1.1" + "version": "4.1.2" } diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 8fe7a1ff..abcfff9d 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.1.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.1.2.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 877b2207..ddc72820 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "4.1.1", + "version": "4.1.2", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/package.json b/packages/docs/package.json index 74b2d89d..c89dced8 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "4.1.1", + "version": "4.1.2", "config": { "version_short": "4.1" }, From 82476e76bb8b21098228e774e5273b9f9a7bfa54 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 11 Mar 2022 13:39:29 +0100 Subject: [PATCH 054/434] fix(CAccordionButton): add missing type='button' --- packages/coreui-vue/src/components/accordion/CAccordionButton.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts index 4fd1e48e..69ab7a00 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts @@ -10,6 +10,7 @@ const CAccordionButton = defineComponent({ h( 'button', { + type: 'button', 'aria-expanded': !visible.value, class: ['accordion-button', { ['collapsed']: !visible.value }], onClick: () => toggleVisibility(), From fd5e873f85bfe6ac3e133d67ba2591687dd2535b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 20 Mar 2022 10:46:53 +0100 Subject: [PATCH 055/434] refactor(CButton): add default type, add `click` event --- .../src/components/button/CButton.ts | 33 +++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts index 3de0f71f..c86c9b0e 100644 --- a/packages/coreui-vue/src/components/button/CButton.ts +++ b/packages/coreui-vue/src/components/button/CButton.ts @@ -1,4 +1,4 @@ -import { defineComponent, h } from 'vue' +import { defineComponent, h, ref } from 'vue' import { Color, Shape } from '../props' export const CButton = defineComponent({ @@ -60,6 +60,20 @@ export const CButton = defineComponent({ return ['sm', 'lg'].includes(value) }, }, + /** + * Specifies the type of button. Always specify the type attribute for the `"`; +exports[`Loads and display CAccordionButton component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap index 51d98ffd..95bad8ef 100644 --- a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap +++ b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CAccordionHeader component renders correctly 1`] = `"
    "`; +exports[`Loads and display CAccordionHeader component renders correctly 1`] = `"
    "`; diff --git a/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap b/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap index 40879a16..2f72273e 100644 --- a/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap +++ b/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap @@ -4,4 +4,4 @@ exports[`Customize (number two) CButton component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CButton component renders correctly 1`] = `""`; +exports[`Loads and display CButton component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts index 3debd15e..265388de 100644 --- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts +++ b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts @@ -1,22 +1,20 @@ import { mount } from '@vue/test-utils' import { CDropdownMenu as Component } from '../../../index' -import { reactive, ref } from 'vue' +import { ref } from 'vue' const ComponentName = 'CDropdownMenu' -const config = reactive({ +const config = { alignment: { lg: 'end' }, dark: false, popper: true, - visible: false, -}) +} -const customConfig = reactive({ +const customConfig = { alignment: { lg: 'end' }, dark: true, popper: false, - visible: true, -}) +} const defaultWrapper = mount(Component, { propsData: {}, @@ -27,6 +25,7 @@ const defaultWrapper = mount(Component, { provide: { config: config, dropdownMenuRef: ref(), + visible: ref(false), }, }, }) @@ -42,6 +41,7 @@ const customWrapper = mount(Component, { provide: { config: customConfig, dropdownMenuRef: ref(), + visible: ref(true), }, }, }) diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownToggle.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownToggle.spec.ts index 30954967..5af217be 100644 --- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownToggle.spec.ts +++ b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownToggle.spec.ts @@ -18,9 +18,9 @@ const defaultWrapper = mount(Component, { }, global: { provide: { - dropdownRef: ref(), + dropdownToggleRef: ref(), variant: 'input-group', - visible: true, + visible: ref(true), toggleMenu: function () { return true }, @@ -44,9 +44,9 @@ const customWrapper = mount(Component, { }, global: { provide: { - dropdownRef: ref(), + dropdownToggleRef: ref(), variant: 'nav-item', - visible: true, + visible: ref(true), toggleMenu: function () { return true }, @@ -71,7 +71,6 @@ describe(`Loads and display ${ComponentName} component`, () => { expect(defaultWrapper.classes('active')).toBe(true) expect(defaultWrapper.classes('disabled')).toBe(true) expect(defaultWrapper.attributes('disabled')).toBe('') - expect(defaultWrapper.attributes('active')).toBe('true') expect(defaultWrapper.find('span').classes('visually-hidden')).toBe(true) expect(defaultWrapper.find('span').text()).toContain('Toggle Dropdown') }) diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap b/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap index 601809cd..4d534045 100644 --- a/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap +++ b/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CDropdownToggle component renders correctly 1`] = `"Default slot"`; +exports[`Customize CDropdownToggle component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CDropdownToggle component renders correctly 1`] = `""`; +exports[`Loads and display CDropdownToggle component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap index 2bd37f6d..74563730 100644 --- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap +++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap @@ -1,13 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize with label - CFormCheck component renders correctly 1`] = ` -" -" -`; +exports[`Customize with label - CFormCheck component renders correctly 1`] = `""`; -exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = ` -" -" -`; +exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `""`; exports[`Loads and display CFormCheck component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap index 86ca7e34..07c56543 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap +++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap @@ -7,7 +7,8 @@ exports[`Customize CModal component renders correctly 1`] = `
    Default slot
    -" + +" `; exports[`Loads and display CModal component renders correctly 1`] = ` diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap index 1f78fb3e..d4ca113f 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CSidebar component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Customize CSidebar component renders correctly 1`] = ` +"
    Default slot
    +" +`; -exports[`Loads and display CSidebar component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Loads and display CSidebar component renders correctly 1`] = ` +"
    Default slot
    +" +`; diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap index 13701d5c..1cd25be0 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap +++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CToastClose component renders correctly 1`] = `""`; +exports[`Customize CToastClose component renders correctly 1`] = `""`; exports[`Loads and display CToastClose component renders correctly 1`] = `""`; From 8c6f47bda1432a60d269034b3a02ddcea3df77a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 21 Mar 2022 12:17:15 +0100 Subject: [PATCH 063/434] fix(CDropdown): add `show` class to toggler when visible set to true. --- .../src/components/dropdown/CDropdownToggle.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index 9c34dbbb..a83ac256 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -94,7 +94,6 @@ const CDropdownToggle = defineComponent({ { 'dropdown-toggle': props.caret, 'dropdown-toggle-split': props.split, - show: visible.value, active: props.active, disabled: props.disabled, }, @@ -120,7 +119,13 @@ const CDropdownToggle = defineComponent({ 'a', { active: props.active, - class: ['nav-link', className], + class: [ + 'nav-link', + className, + { + show: visible.value, + }, + ], disabled: props.disabled, href: '#', onClick: (event: Event) => { @@ -134,7 +139,12 @@ const CDropdownToggle = defineComponent({ : h( CButton, { - class: className, + class: [ + className, + { + show: visible.value, + }, + ], active: props.active, color: props.color, disabled: props.disabled, From 2d388625e858b8b6c93d53a781d4c42897685749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 21 Mar 2022 12:51:47 +0100 Subject: [PATCH 064/434] refactor(CDropdown): update triggers --- .../src/components/dropdown/CDropdown.ts | 7 +++- .../components/dropdown/CDropdownToggle.ts | 39 ++++++++++++++----- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index 64676f98..97b78fd3 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -197,11 +197,16 @@ const CDropdown = defineComponent({ popper.value = undefined } - const toggleMenu = () => { + const toggleMenu = (_visible?: boolean) => { if (props.disabled) { return } + if (typeof _visible == 'boolean') { + visible.value = _visible + return + } + if (visible.value === true) { visible.value = false return diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index a83ac256..a9ad7fb6 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -1,6 +1,7 @@ -import { cloneVNode, defineComponent, h, inject, onMounted, Ref, ref } from 'vue' +import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref } from 'vue' import { CButton } from '../button' import { Color, Shape } from '../props' +import { Triggers } from '../Types' const CDropdownToggle = defineComponent({ name: 'CDropdownToggle', @@ -70,6 +71,16 @@ const CDropdownToggle = defineComponent({ type: Boolean, required: false, }, + /** + * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. + * + * @type 'hover' | 'focus' | 'click' + */ + trigger: { + type: String as PropType, + default: 'click', + required: false, + }, /** * Set the button variant to an outlined button or a ghost button. * @@ -89,7 +100,8 @@ const CDropdownToggle = defineComponent({ const dropdownToggleRef = inject('dropdownToggleRef') as Ref const dropdownVariant = inject('variant') as string const visible = inject('visible') as Ref - const toggleMenu = inject('toggleMenu') as () => void + const toggleMenu = inject('toggleMenu') as (_visible?: boolean) => void + const className = [ { 'dropdown-toggle': props.caret, @@ -99,6 +111,18 @@ const CDropdownToggle = defineComponent({ }, ] + const triggers = { + ...((props.trigger === 'click' || props.trigger.includes('click')) && + !props.disabled && { + onClick: () => toggleMenu(), + }), + ...((props.trigger === 'focus' || props.trigger.includes('focus')) && + !props.disabled && { + onfocus: () => toggleMenu(true), + onblur: () => toggleMenu(false), + }), + } + onMounted(() => { if (buttonRef.value) { dropdownToggleRef.value = buttonRef.value.$el @@ -110,8 +134,8 @@ const CDropdownToggle = defineComponent({ ? slots.default && slots.default().map((slot) => cloneVNode(slot, { - onClick: () => toggleMenu(), ref: dropdownToggleRef, + ...triggers, }), ) : dropdownVariant === 'nav-item' @@ -128,11 +152,8 @@ const CDropdownToggle = defineComponent({ ], disabled: props.disabled, href: '#', - onClick: (event: Event) => { - event.preventDefault() - toggleMenu() - }, ref: dropdownToggleRef, + ...triggers, }, { default: () => slots.default && slots.default() }, ) @@ -148,13 +169,13 @@ const CDropdownToggle = defineComponent({ active: props.active, color: props.color, disabled: props.disabled, - onClick: () => toggleMenu(), - ...(props.component === 'button' && { type: 'button' }), ref: (el) => { buttonRef.value = el }, shape: props.shape, size: props.size, + ...triggers, + ...(props.component === 'button' && { type: 'button' }), variant: props.variant, }, () => From c85e7e240aaab7027f94f0a8928056c2833c971d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Tue, 22 Mar 2022 00:07:41 +0100 Subject: [PATCH 065/434] chore: clean-up --- packages/coreui-vue/src/components/form/CFormSwitch.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormSwitch.ts b/packages/coreui-vue/src/components/form/CFormSwitch.ts index 9685015e..17009f8c 100644 --- a/packages/coreui-vue/src/components/form/CFormSwitch.ts +++ b/packages/coreui-vue/src/components/form/CFormSwitch.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, onMounted, watch, ref } from 'vue' +import { defineComponent, h, watch, ref } from 'vue' import { CFormLabel } from './CFormLabel' @@ -81,12 +81,6 @@ const CFormSwitch = defineComponent({ setup(props, { attrs, emit }) { const checked = ref(attrs.checked) - onMounted(() => { - if (props.modelValue && typeof props.modelValue === 'boolean') { - console.log(props.modelValue) - } - }) - watch( () => props.modelValue, () => { From c060a212974a6dbc1bd007f66f9ca3df51820987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Tue, 22 Mar 2022 00:08:14 +0100 Subject: [PATCH 066/434] refactor(CDropdown): update toggler --- .../src/components/dropdown/CDropdownToggle.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index a9ad7fb6..37a94826 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -96,7 +96,7 @@ const CDropdownToggle = defineComponent({ }, }, setup(props, { slots }) { - const buttonRef = ref() + const togglerRef = ref() const dropdownToggleRef = inject('dropdownToggleRef') as Ref const dropdownVariant = inject('variant') as string const visible = inject('visible') as Ref @@ -124,8 +124,8 @@ const CDropdownToggle = defineComponent({ } onMounted(() => { - if (buttonRef.value) { - dropdownToggleRef.value = buttonRef.value.$el + if (togglerRef.value) { + dropdownToggleRef.value = togglerRef.value.$el } }) @@ -134,7 +134,9 @@ const CDropdownToggle = defineComponent({ ? slots.default && slots.default().map((slot) => cloneVNode(slot, { - ref: dropdownToggleRef, + ref: (el) => { + togglerRef.value = el + }, ...triggers, }), ) @@ -170,7 +172,7 @@ const CDropdownToggle = defineComponent({ color: props.color, disabled: props.disabled, ref: (el) => { - buttonRef.value = el + togglerRef.value = el }, shape: props.shape, size: props.size, From 8450aa494761d55ff3bd1fbc45bd8dc7bde3ce12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Tue, 22 Mar 2022 20:40:12 +0100 Subject: [PATCH 067/434] release: v4.2.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-vue/README.md | 2 +- packages/coreui-vue/package.json | 2 +- packages/docs/package.json | 2 +- yarn.lock | 116 +++++++++++++++---------------- 6 files changed, 62 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index abcfff9d..a41912c5 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.1.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.2.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/lerna.json b/lerna.json index 560eb97a..2bf1aa13 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "packages/*" ], "useWorkspaces": true, - "version": "4.1.2" + "version": "4.2.0" } diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index abcfff9d..a41912c5 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -43,7 +43,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.1.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.2.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index efc3b1d2..6c33cc86 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "4.1.2", + "version": "4.2.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/package.json b/packages/docs/package.json index 1974575c..5bea325a 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "4.1.2", + "version": "4.2.0", "config": { "version_short": "4.1" }, diff --git a/yarn.lock b/yarn.lock index 19fa693b..1ffdc6ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1650,9 +1650,9 @@ integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA== "@types/node@*": - version "17.0.21" - resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644" - integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ== + version "17.0.22" + resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.22.tgz#38b6c4b9b2f3ed9f2e376cce42a298fb2375251e" + integrity sha512-8FwbVoG4fy+ykY86XCAclKZDORttqE5/s7dyWZKLXTdv3vRy5HozBEinG5IqhvPXXzIZEcTVbuHlQEI6iuwcmw== "@types/normalize-package-data@^2.4.0": version "2.4.1" @@ -1704,13 +1704,13 @@ "@types/yargs-parser" "*" "@typescript-eslint/eslint-plugin@^5.0.0", "@typescript-eslint/eslint-plugin@^5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.15.0.tgz#c28ef7f2e688066db0b6a9d95fb74185c114fb9a" - integrity sha512-u6Db5JfF0Esn3tiAKELvoU5TpXVSkOpZ78cEGn/wXtT2RVqs2vkt4ge6N8cRCyw7YVKhmmLDbwI2pg92mlv7cA== + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.16.0.tgz#78f246dd8d1b528fc5bfca99a8a64d4023a3d86d" + integrity sha512-SJoba1edXvQRMmNI505Uo4XmGbxCK9ARQpkvOd00anxzri9RNQk0DDCxD+LIl+jYhkzOJiOMMKYEHnHEODjdCw== dependencies: - "@typescript-eslint/scope-manager" "5.15.0" - "@typescript-eslint/type-utils" "5.15.0" - "@typescript-eslint/utils" "5.15.0" + "@typescript-eslint/scope-manager" "5.16.0" + "@typescript-eslint/type-utils" "5.16.0" + "@typescript-eslint/utils" "5.16.0" debug "^4.3.2" functional-red-black-tree "^1.0.1" ignore "^5.1.8" @@ -1719,68 +1719,68 @@ tsutils "^3.21.0" "@typescript-eslint/parser@^5.0.0", "@typescript-eslint/parser@^5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.15.0.tgz#95f603f8fe6eca7952a99bfeef9b85992972e728" - integrity sha512-NGAYP/+RDM2sVfmKiKOCgJYPstAO40vPAgACoWPO/+yoYKSgAXIFaBKsV8P0Cc7fwKgvj27SjRNX4L7f4/jCKQ== + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.16.0.tgz#e4de1bde4b4dad5b6124d3da227347616ed55508" + integrity sha512-fkDq86F0zl8FicnJtdXakFs4lnuebH6ZADDw6CYQv0UZeIjHvmEw87m9/29nk2Dv5Lmdp0zQ3zDQhiMWQf/GbA== dependencies: - "@typescript-eslint/scope-manager" "5.15.0" - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/typescript-estree" "5.15.0" + "@typescript-eslint/scope-manager" "5.16.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/typescript-estree" "5.16.0" debug "^4.3.2" -"@typescript-eslint/scope-manager@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.15.0.tgz#d97afab5e0abf4018d1289bd711be21676cdd0ee" - integrity sha512-EFiZcSKrHh4kWk0pZaa+YNJosvKE50EnmN4IfgjkA3bTHElPtYcd2U37QQkNTqwMCS7LXeDeZzEqnsOH8chjSg== +"@typescript-eslint/scope-manager@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.16.0.tgz#7e7909d64bd0c4d8aef629cdc764b9d3e1d3a69a" + integrity sha512-P+Yab2Hovg8NekLIR/mOElCDPyGgFZKhGoZA901Yax6WR6HVeGLbsqJkZ+Cvk5nts/dAlFKm8PfL43UZnWdpIQ== dependencies: - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/visitor-keys" "5.15.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/visitor-keys" "5.16.0" -"@typescript-eslint/type-utils@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.15.0.tgz#d2c02eb2bdf54d0a645ba3a173ceda78346cf248" - integrity sha512-KGeDoEQ7gHieLydujGEFLyLofipe9PIzfvA/41urz4hv+xVxPEbmMQonKSynZ0Ks2xDhJQ4VYjB3DnRiywvKDA== +"@typescript-eslint/type-utils@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.16.0.tgz#b482bdde1d7d7c0c7080f7f2f67ea9580b9e0692" + integrity sha512-SKygICv54CCRl1Vq5ewwQUJV/8padIWvPgCxlWPGO/OgQLCijY9G7lDu6H+mqfQtbzDNlVjzVWQmeqbLMBLEwQ== dependencies: - "@typescript-eslint/utils" "5.15.0" + "@typescript-eslint/utils" "5.16.0" debug "^4.3.2" tsutils "^3.21.0" -"@typescript-eslint/types@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.15.0.tgz#c7bdd103843b1abae97b5518219d3e2a0d79a501" - integrity sha512-yEiTN4MDy23vvsIksrShjNwQl2vl6kJeG9YkVJXjXZnkJElzVK8nfPsWKYxcsGWG8GhurYXP4/KGj3aZAxbeOA== +"@typescript-eslint/types@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.16.0.tgz#5827b011982950ed350f075eaecb7f47d3c643ee" + integrity sha512-oUorOwLj/3/3p/HFwrp6m/J2VfbLC8gjW5X3awpQJ/bSG+YRGFS4dpsvtQ8T2VNveV+LflQHjlLvB6v0R87z4g== -"@typescript-eslint/typescript-estree@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.15.0.tgz#81513a742a9c657587ad1ddbca88e76c6efb0aac" - integrity sha512-Hb0e3dGc35b75xLzixM3cSbG1sSbrTBQDfIScqdyvrfJZVEi4XWAT+UL/HMxEdrJNB8Yk28SKxPLtAhfCbBInA== +"@typescript-eslint/typescript-estree@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.16.0.tgz#32259459ec62f5feddca66adc695342f30101f61" + integrity sha512-SE4VfbLWUZl9MR+ngLSARptUv2E8brY0luCdgmUevU6arZRY/KxYoLI/3V/yxaURR8tLRN7bmZtJdgmzLHI6pQ== dependencies: - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/visitor-keys" "5.15.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/visitor-keys" "5.16.0" debug "^4.3.2" globby "^11.0.4" is-glob "^4.0.3" semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/utils@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.15.0.tgz#468510a0974d3ced8342f37e6c662778c277f136" - integrity sha512-081rWu2IPKOgTOhHUk/QfxuFog8m4wxW43sXNOMSCdh578tGJ1PAaWPsj42LOa7pguh173tNlMigsbrHvh/mtA== +"@typescript-eslint/utils@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.16.0.tgz#42218b459d6d66418a4eb199a382bdc261650679" + integrity sha512-iYej2ER6AwmejLWMWzJIHy3nPJeGDuCqf8Jnb+jAQVoPpmWzwQOfa9hWVB8GIQE5gsCv/rfN4T+AYb/V06WseQ== dependencies: "@types/json-schema" "^7.0.9" - "@typescript-eslint/scope-manager" "5.15.0" - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/typescript-estree" "5.15.0" + "@typescript-eslint/scope-manager" "5.16.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/typescript-estree" "5.16.0" eslint-scope "^5.1.1" eslint-utils "^3.0.0" -"@typescript-eslint/visitor-keys@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.15.0.tgz#5669739fbf516df060f978be6a6dce75855a8027" - integrity sha512-+vX5FKtgvyHbmIJdxMJ2jKm9z2BIlXJiuewI8dsDYMp5LzPUcuTT78Ya5iwvQg3VqSVdmxyM8Anj1Jeq7733ZQ== +"@typescript-eslint/visitor-keys@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.16.0.tgz#f27dc3b943e6317264c7492e390c6844cd4efbbb" + integrity sha512-jqxO8msp5vZDhikTwq9ubyMHqZ67UIvawohr4qF3KhlpL7gzSjOd+8471H3nh5LyABkaI85laEKKU8SnGUK5/g== dependencies: - "@typescript-eslint/types" "5.15.0" + "@typescript-eslint/types" "5.16.0" eslint-visitor-keys "^3.0.0" "@vitejs/plugin-vue@^2.1.0": @@ -3266,9 +3266,9 @@ ecc-jsbn@~0.1.1: safer-buffer "^2.1.0" electron-to-chromium@^1.4.84: - version "1.4.88" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz#ebe6a2573b563680c7a7bf3a51b9e465c9c501db" - integrity sha512-oA7mzccefkvTNi9u7DXmT0LqvhnOiN2BhSrKerta7HeUC1cLoIwtbf2wL+Ah2ozh5KQd3/1njrGrwDBXx6d14Q== + version "1.4.89" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz#33c06592812a17a7131873f4596579084ce33ff8" + integrity sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw== emittery@^0.8.1: version "0.8.1" @@ -5313,11 +5313,9 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1: integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= json5@2.x, json5@^2.1.2: - version "2.2.0" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3" - integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA== - dependencies: - minimist "^1.2.5" + version "2.2.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" + integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== jsonfile@^6.0.1: version "6.1.0" @@ -5749,9 +5747,9 @@ minimist-options@4.1.0: kind-of "^6.0.3" minimist@^1.2.0, minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== + version "1.2.6" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" + integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== minipass-collect@^1.0.2: version "1.0.2" From 61835dd9860caaef32874e8a111b7ded327ee75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Tue, 29 Mar 2022 23:30:41 +0200 Subject: [PATCH 068/434] fix(CDropdown): disabled prop on toggler doesn't work properly --- .../components/dropdown/CDropdownToggle.ts | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index 37a94826..b5aae5d3 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -112,15 +112,30 @@ const CDropdownToggle = defineComponent({ ] const triggers = { - ...((props.trigger === 'click' || props.trigger.includes('click')) && - !props.disabled && { - onClick: () => toggleMenu(), - }), - ...((props.trigger === 'focus' || props.trigger.includes('focus')) && - !props.disabled && { - onfocus: () => toggleMenu(true), - onblur: () => toggleMenu(false), - }), + ...((props.trigger === 'click' || props.trigger.includes('click')) && { + onClick: () => { + if (props.disabled) { + return + } + + toggleMenu() + }, + }), + ...((props.trigger === 'focus' || props.trigger.includes('focus')) && { + onfocus: () => { + if (props.disabled) { + return + } + + toggleMenu(true) + }, + onblur: () => { + if (props.disabled) { + return + } + toggleMenu(false) + }, + }), } onMounted(() => { From 18d8ec4bfdf407ec22089dc9a08c7a46c1c6c111 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Wed, 30 Mar 2022 19:00:54 +0200 Subject: [PATCH 069/434] refactor(CDropdown): update close button behavior --- .../coreui-vue/src/components/dropdown/CDropdownMenu.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts index 2131a834..d6adf3cb 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts @@ -37,14 +37,16 @@ const CDropdownMenu = defineComponent({ return classNames } - const handleKeyup = (event: Event) => { + const handleKeyup = (event: KeyboardEvent) => { if (autoClose === false) { return } - if (!dropdownMenuRef.value?.contains(event.target as HTMLElement)) { + + if (event.key === 'Escape') { hideMenu() } } + const handleMouseUp = (event: Event) => { if (dropdownToggleRef.value?.contains(event.target as HTMLElement)) { return From 118eea4f6e691dccbb3fc5d31f66f7b61774efbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 17 Apr 2022 12:08:05 +0200 Subject: [PATCH 070/434] refactor(CToast): emit the close event when toast is automatically close --- packages/coreui-vue/src/components/toast/CToast.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/coreui-vue/src/components/toast/CToast.ts b/packages/coreui-vue/src/components/toast/CToast.ts index 423d64e3..e0e91a56 100644 --- a/packages/coreui-vue/src/components/toast/CToast.ts +++ b/packages/coreui-vue/src/components/toast/CToast.ts @@ -115,6 +115,7 @@ const CToast = defineComponent({ clearTimeout(timeout) timeout = window.setTimeout(() => { visible.value = false + emit('close') }, props.delay) } }) From 2260b57a61f88a41a80746ba5b3c8f2246284bc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 17 Apr 2022 12:12:16 +0200 Subject: [PATCH 071/434] feat(CFormCheck, CFormInput, CFormRange, CFormSelect, CFormSwitch, CFormTextarea): add new properties to generate labels, helper texts, and validation messages' --- .../src/components/form/CFormCheck.ts | 116 +++++++++++++----- .../components/form/CFormControlValidation.ts | 97 +++++++++++++++ .../components/form/CFormControlWrapper.ts | 106 ++++++++++++++++ .../src/components/form/CFormInput.ts | 69 ++++++++--- .../src/components/form/CFormRange.ts | 36 ++++-- .../src/components/form/CFormSelect.ts | 100 ++++++++++----- .../src/components/form/CFormSwitch.ts | 13 +- .../src/components/form/CFormTextarea.ts | 59 ++++++--- 8 files changed, 474 insertions(+), 122 deletions(-) create mode 100644 packages/coreui-vue/src/components/form/CFormControlValidation.ts create mode 100644 packages/coreui-vue/src/components/form/CFormControlWrapper.ts diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index 1fdc3c2a..f9428f07 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -1,13 +1,16 @@ import { defineComponent, h } from 'vue' import { shape } from 'vue-types' -import { Color, Shape } from '../props' +import { CFormControlValidation } from './CFormControlValidation' import { CFormLabel } from './CFormLabel' +import { Color, Shape } from '../props' + const CFormCheck = defineComponent({ name: 'CFormCheck', inheritAttrs: false, props: { + ...CFormControlValidation.props, /** * Create button-like checkboxes and radio buttons. */ @@ -75,6 +78,17 @@ const CFormCheck = defineComponent({ type: Boolean, required: false, }, + /** + * Sets hit area to the full area of the component. + */ + hitArea: { + type: String, + required: false, + validator: (value: string): boolean => { + // The value must match one of these strings + return ['full'].includes(value) + }, + }, /** * The element represents a caption for a component. */ @@ -126,39 +140,57 @@ const CFormCheck = defineComponent({ emit('update:modelValue', target.checked) } - const formControl = () => { - return h('input', { - ...attrs, - checked: props.modelValue, - class: [ - props.button ? 'btn-check' : 'form-check-input', + const className = [ + 'form-check', + { + 'form-check-inline': props.inline, + 'is-invalid': props.invalid, + 'is-valid': props.valid, + }, + attrs.class, + ] + + const inputClassName = props.button + ? 'btn-check' + : [ + 'form-check-input', { 'is-invalid': props.invalid, 'is-valid': props.valid, + 'me-2': props.hitArea, }, - ], + ] + + const labelClassName = props.button + ? [ + 'btn', + props.button.variant + ? `btn-${props.button.variant}-${props.button.color}` + : `btn-${props.button.color}`, + { + [`btn-${props.button.size}`]: props.button.size, + }, + `${props.button.shape}`, + ] + : 'form-check-label' + + const formControl = () => { + return h('input', { + ...attrs, + ...(props.modelValue && { checked: props.modelValue }), + class: inputClassName, id: props.id, indeterminate: props.indeterminate, onChange: (event: InputEvent) => handleChange(event), type: props.type, }) } + const formLabel = () => { return h( CFormLabel, { - customClassName: props.button - ? [ - 'btn', - props.button.variant - ? `btn-${props.button.variant}-${props.button.color}` - : `btn-${props.button.color}`, - { - [`btn-${props.button.size}`]: props.button.size, - }, - `${props.button.shape}`, - ] - : 'form-check-label', + customClassName: labelClassName, ...(props.id && { for: props.id }), }, { @@ -167,25 +199,41 @@ const CFormCheck = defineComponent({ ) } + const formValidation = () => { + return h(CFormControlValidation, { + describedby: attrs['aria-describedby'] as string, + feedback: props.feedback, + feedbackInvalid: props.feedbackInvalid, + feedbackValid: props.feedbackValid, + invalid: props.invalid, + tooltipFeedback: props.tooltipFeedback, + valid: props.valid, + }) + } + return () => props.button - ? [formControl(), (slots.label || props.label) && formLabel()] + ? [formControl(), (slots.label || props.label) && formLabel(), formValidation()] : props.label - ? h( - 'div', - { - class: [ - 'form-check', + ? props.hitArea + ? [ + h( + CFormLabel, { - 'form-check-inline': props.inline, - 'is-invalid': props.invalid, - 'is-valid': props.valid, + customClassName: className, + ...(props.id && { for: props.id }), }, - attrs.class, - ], - }, - [formControl(), props.label && formLabel()], - ) + [formControl(), props.label], + ), + formValidation(), + ] + : h( + 'div', + { + class: className, + }, + [formControl(), props.label && formLabel(), formValidation()], + ) : formControl() }, }) diff --git a/packages/coreui-vue/src/components/form/CFormControlValidation.ts b/packages/coreui-vue/src/components/form/CFormControlValidation.ts new file mode 100644 index 00000000..60e6fa1b --- /dev/null +++ b/packages/coreui-vue/src/components/form/CFormControlValidation.ts @@ -0,0 +1,97 @@ +import { defineComponent, h } from 'vue' +import { CFormFeedback } from './CFormFeedback' + +const CFormControlValidation = defineComponent({ + name: 'CFormControlValidation', + inheritAttrs: false, + props: { + /** + * @ignore + */ + describedby: { + type: String, + }, + /** + * Provide valuable, actionable feedback. + * + * @since 4.2.0 + */ + feedback: { + type: String, + }, + /** + * Provide valuable, actionable feedback. + * + * @since 4.2.0 + */ + feedbackInvalid: { + type: String, + }, + /** + * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.2.0 + */ + feedbackValid: { + type: String, + }, + /** + * Set component validation state to invalid. + */ + invalid: Boolean, + /** + * Display validation feedback in a styled tooltip. + * + * @since 4.2.0 + */ + tooltipFeedback: Boolean, + /** + * Set component validation state to valid. + */ + valid: Boolean, + }, + setup(props, { slots }) { + return () => [ + props.feedback && + (props.valid || props.invalid) && + h( + CFormFeedback, + { + ...(props.invalid && { id: props.describedby }), + invalid: props.invalid, + tooltip: props.tooltipFeedback, + valid: props.valid, + }, + { + default: () => (slots.feedback && slots.feedback()) || props.feedback, + }, + ), + (props.feedbackInvalid || slots.feedbackInvalid) && + h( + CFormFeedback, + { + id: props.describedby, + invalid: true, + tooltip: props.tooltipFeedback, + }, + { + default: () => + (slots.feedbackInvalid && slots.feedbackInvalid()) || props.feedbackInvalid, + }, + ), + (props.feedbackValid || slots.feedbackValid) && + h( + CFormFeedback, + { + tooltip: props.tooltipFeedback, + valid: true, + }, + { + default: () => (slots.feedbackValid && slots.feedbackValid()) || props.feedbackValid, + }, + ), + ] + }, +}) + +export { CFormControlValidation } diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts new file mode 100644 index 00000000..45c7b456 --- /dev/null +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -0,0 +1,106 @@ +import { defineComponent, h } from 'vue' +import { CFormControlValidation } from './CFormControlValidation' +import { CFormFloating } from './CFormFloating' +import { CFormLabel } from './CFormLabel' +import { CFormText } from './CFormText' + +const CFormControlWrapper = defineComponent({ + name: 'CFormControlWrapper', + inheritAttrs: false, + props: { + ...CFormControlValidation.props, + /** + * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.2.0 + */ + floatingLabel: { + type: String, + }, + /** + * @ignore + */ + id: { + type: String, + }, + /** + * Add a caption for a component. + * + * @since 4.2.0 + */ + label: { + type: String, + }, + /** + * Add helper text to the component. + * + * @since 4.2.0 + */ + text: { + type: String, + }, + }, + setup(props, { slots }) { + return () => + props.floatingLabel + ? h(CFormFloating, [ + slots.default && slots.default(), + h( + CFormLabel, + { + for: props.id, + }, + { + default: () => (slots.label && slots.label()) || props.label || props.floatingLabel, + }, + ), + ]) + : [ + (props.label || slots.label) && + h( + CFormLabel, + { + for: props.id, + }, + { + default: () => (slots.label && slots.label()) || props.label, + }, + ), + slots.default && slots.default(), + (props.text || slots.text) && + h( + CFormText, + { + id: props.describedby, + }, + { + default: () => (slots.text && slots.text()) || props.text, + }, + ), + h( + CFormControlValidation, + { + describedby: props.describedby, + feedback: props.feedback, + feedbackInvalid: props.feedbackInvalid, + feedbackValid: props.feedbackValid, + floatingLabel: props.floatingLabel, + invalid: props.invalid, + tooltipFeedback: props.tooltipFeedback, + valid: props.valid, + }, + { + ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }), + ...(slots.feedbackInvalid && { + feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.feedbackValid && { + feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + }, + ), + ] + }, +}) + +export { CFormControlWrapper } diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 91dd6274..80619d29 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -1,8 +1,10 @@ import { defineComponent, h } from 'vue' +import { CFormControlWrapper } from './CFormControlWrapper' const CFormInput = defineComponent({ name: 'CFormInput', props: { + ...CFormControlWrapper.props, /** * Toggle the disabled state for the component. */ @@ -84,12 +86,13 @@ const CFormInput = defineComponent({ */ 'update:modelValue', ], - setup(props, { emit, slots }) { + setup(props, { attrs, emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('change', event) emit('update:modelValue', target.value) } + const handleInput = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('input', event) @@ -98,25 +101,55 @@ const CFormInput = defineComponent({ return () => h( - 'input', + CFormControlWrapper, + { + describedby: attrs['aria-describedby'], + feedback: props.feedback, + feedbackInvalid: props.feedbackInvalid, + feedbackValid: props.feedbackValid, + floatingLabel: props.floatingLabel, + id: props.id, + invalid: props.invalid, + label: props.label, + text: props.text, + tooltipFeedback: props.tooltipFeedback, + valid: props.valid, + }, { - class: [ - props.plainText ? 'form-control-plaintext' : 'form-control', - { - 'form-control-color': props.type === 'color', - [`form-control-${props.size}`]: props.size, - 'is-invalid': props.invalid, - 'is-valid': props.valid, - }, - ], - disabled: props.disabled, - onChange: (event: InputEvent) => handleChange(event), - onInput: (event: InputEvent) => handleInput(event), - readonly: props.readonly, - type: props.type, - value: props.modelValue, + default: () => + h( + 'input', + { + ...attrs, + class: [ + props.plainText ? 'form-control-plaintext' : 'form-control', + { + 'form-control-color': props.type === 'color', + [`form-control-${props.size}`]: props.size, + 'is-invalid': props.invalid, + 'is-valid': props.valid, + }, + attrs.class, + ], + disabled: props.disabled, + onChange: (event: InputEvent) => handleChange(event), + onInput: (event: InputEvent) => handleInput(event), + readonly: props.readonly, + type: props.type, + value: props.modelValue || attrs.value, + }, + slots.default && slots.default(), + ), + ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }), + ...(slots.feedbackInvalid && { + feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.feedbackValid && { + feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.label && { label: () => slots.label && slots.label() }), + ...(slots.text && { text: () => slots.text && slots.text() }), }, - slots.default && slots.default(), ) }, }) diff --git a/packages/coreui-vue/src/components/form/CFormRange.ts b/packages/coreui-vue/src/components/form/CFormRange.ts index d5d1e1ae..c3b20ac1 100644 --- a/packages/coreui-vue/src/components/form/CFormRange.ts +++ b/packages/coreui-vue/src/components/form/CFormRange.ts @@ -1,4 +1,5 @@ import { defineComponent, h } from 'vue' +import { CFormLabel } from './CFormLabel' const CFormRange = defineComponent({ name: 'CFormRange', @@ -9,7 +10,14 @@ const CFormRange = defineComponent({ disabled: { type: Boolean, default: undefined, - required: false, + }, + /** + * Add a caption for a component. + * + * @since 4.2.0 + */ + label: { + type: String, }, /** * Specifies the maximum value for the component. @@ -17,7 +25,6 @@ const CFormRange = defineComponent({ max: { type: Number, default: undefined, - required: false, }, /** * Specifies the minimum value for the component. @@ -25,7 +32,6 @@ const CFormRange = defineComponent({ min: { type: Number, default: undefined, - required: false, }, /** * The default name for a value passed using v-model. @@ -33,14 +39,12 @@ const CFormRange = defineComponent({ modelValue: { type: String, value: undefined, - required: false, }, /** * Toggle the readonly state for the component. */ readonly: { type: Boolean, - required: false, }, /** * Specifies the interval between legal numbers in the component. @@ -48,7 +52,6 @@ const CFormRange = defineComponent({ steps: { type: Number, default: undefined, - required: false, }, /** * The `value` attribute of component. @@ -58,7 +61,6 @@ const CFormRange = defineComponent({ value: { type: Number, default: undefined, - required: false, }, }, emits: [ @@ -71,29 +73,41 @@ const CFormRange = defineComponent({ */ 'update:modelValue', ], - setup(props, { emit, slots }) { + setup(props, { attrs, emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('change', event) emit('update:modelValue', target.value) } - return () => + return () => [ + props.label && + h( + CFormLabel, + { + for: attrs.id, + }, + { + default: () => (slots.label && slots.label()) || props.label, + }, + ), h( 'input', { + ...attrs, class: 'form-range', disabled: props.disabled, max: props.max, min: props.min, onChange: (event: InputEvent) => handleChange(event), - steps: props.steps, readonly: props.readonly, + steps: props.steps, type: 'range', value: props.modelValue, }, slots.default && slots.default(), - ) + ), + ] }, }) diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index 63d09304..32b747c9 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -1,4 +1,5 @@ import { defineComponent, h, PropType } from 'vue' +import { CFormControlWrapper } from './CFormControlWrapper' type Option = { disabled?: boolean @@ -10,6 +11,7 @@ type Option = { const CFormSelect = defineComponent({ name: 'CFormSelect', props: { + ...CFormControlWrapper.props, /** * Specifies the number of visible options in a drop-down list. */ @@ -79,7 +81,7 @@ const CFormSelect = defineComponent({ */ 'update:modelValue', ], - setup(props, { emit, slots }) { + setup(props, { attrs, emit, slots }) { const handleChange = (event: InputEvent) => { const target = event.target as HTMLSelectElement const selected = Array.from(target.options) @@ -91,41 +93,71 @@ const CFormSelect = defineComponent({ return () => h( - 'select', + CFormControlWrapper, { - class: [ - 'form-select', - { - [`form-select-${props.size}`]: props.size, - 'is-invalid': props.invalid, - 'is-valid': props.valid, - }, - ], - multiple: props.multiple, - onChange: (event: InputEvent) => handleChange(event), - size: props.htmlSize, - ...(props.modelValue && !props.multiple && { value: props.modelValue }), + describedby: attrs['aria-describedby'], + feedback: props.feedback, + feedbackInvalid: props.feedbackInvalid, + feedbackValid: props.feedbackValid, + floatingLabel: props.floatingLabel, + id: props.id, + invalid: props.invalid, + label: props.label, + text: props.text, + tooltipFeedback: props.tooltipFeedback, + valid: props.valid, + }, + { + default: () => + h( + 'select', + { + ...attrs, + class: [ + 'form-select', + { + [`form-select-${props.size}`]: props.size, + 'is-invalid': props.invalid, + 'is-valid': props.valid, + }, + attrs.class, + ], + multiple: props.multiple, + onChange: (event: InputEvent) => handleChange(event), + size: props.htmlSize, + ...(props.modelValue && !props.multiple && { value: props.modelValue }), + }, + props.options + ? props.options.map((option: Option | string) => { + return h( + 'option', + { + ...(typeof option === 'object' && { + ...(option.disabled && { disabled: option.disabled }), + ...(option.selected && { selected: option.selected }), + ...(option.value && { + value: option.value, + ...(props.modelValue && + props.multiple && + props.modelValue.includes(option.value) && { selected: true }), + }), + }), + }, + typeof option === 'string' ? option : option.label, + ) + }) + : slots.default && slots.default(), + ), + ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }), + ...(slots.feedbackInvalid && { + feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.feedbackValid && { + feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.label && { label: () => slots.label && slots.label() }), + ...(slots.text && { text: () => slots.text && slots.text() }), }, - props.options - ? props.options.map((option: Option | string) => { - return h( - 'option', - { - ...(typeof option === 'object' && { - ...(option.disabled && { disabled: option.disabled }), - ...(option.selected && { selected: option.selected }), - ...(option.value && { - value: option.value, - ...(props.modelValue && - props.multiple && - props.modelValue.includes(option.value) && { selected: true }), - }), - }), - }, - typeof option === 'string' ? option : option.label, - ) - }) - : slots.default && slots.default(), ) }, }) diff --git a/packages/coreui-vue/src/components/form/CFormSwitch.ts b/packages/coreui-vue/src/components/form/CFormSwitch.ts index 17009f8c..1c729f9c 100644 --- a/packages/coreui-vue/src/components/form/CFormSwitch.ts +++ b/packages/coreui-vue/src/components/form/CFormSwitch.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, watch, ref } from 'vue' +import { defineComponent, h } from 'vue' import { CFormLabel } from './CFormLabel' @@ -79,15 +79,6 @@ const CFormSwitch = defineComponent({ 'update:modelValue', ], setup(props, { attrs, emit }) { - const checked = ref(attrs.checked) - - watch( - () => props.modelValue, - () => { - if (typeof props.modelValue === 'boolean') checked.value = props.modelValue - }, - ) - const handleChange = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('change', event) @@ -110,7 +101,7 @@ const CFormSwitch = defineComponent({ [ h('input', { ...attrs, - checked: checked.value, + ...(props.modelValue && { checked: props.modelValue }), class: [ 'form-check-input', { diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index f1e50cf5..afaa73db 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -1,8 +1,10 @@ import { defineComponent, h } from 'vue' +import { CFormControlWrapper } from './CFormControlWrapper' const CFormTextarea = defineComponent({ name: 'CFormTextarea', props: { + ...CFormControlWrapper.props, /** * Toggle the disabled state for the component. */ @@ -61,7 +63,7 @@ const CFormTextarea = defineComponent({ */ 'update:modelValue', ], - setup(props, { emit, slots }) { + setup(props, { attrs, emit, slots }) { const handleInput = (event: InputEvent) => { const target = event.target as HTMLInputElement emit('input', event) @@ -70,21 +72,50 @@ const CFormTextarea = defineComponent({ return () => h( - 'textarea', + CFormControlWrapper, { - disabled: props.disabled, - readonly: props.readonly, - class: [ - props.plainText ? 'form-control-plaintext' : 'form-control', - { - 'is-invalid': props.invalid, - 'is-valid': props.valid, - }, - ], - onInput: (event: InputEvent) => handleInput(event), - value: props.modelValue, + describedby: attrs['aria-describedby'], + feedback: props.feedback, + feedbackInvalid: props.feedbackInvalid, + feedbackValid: props.feedbackValid, + floatingLabel: props.floatingLabel, + id: props.id, + invalid: props.invalid, + label: props.label, + text: props.text, + tooltipFeedback: props.tooltipFeedback, + valid: props.valid, + }, + { + default: () => + h( + 'textarea', + { + ...attrs, + disabled: props.disabled, + readonly: props.readonly, + class: [ + props.plainText ? 'form-control-plaintext' : 'form-control', + { + 'is-invalid': props.invalid, + 'is-valid': props.valid, + }, + ], + onInput: (event: InputEvent) => handleInput(event), + ...(props.modelValue && { value: props.modelValue }), + }, + slots.default && slots.default(), + ), + ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }), + ...(slots.feedbackInvalid && { + feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.feedbackValid && { + feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(), + }), + ...(slots.label && { label: () => slots.label && slots.label() }), + ...(slots.text && { text: () => slots.text && slots.text() }), }, - slots.default && slots.default(), ) }, }) From f4037930bea43370f771fb87b622e4dee0f74485 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 18 Apr 2022 14:44:50 +0200 Subject: [PATCH 072/434] docs: update props comments --- packages/coreui-vue-chartjs/src/CChart.ts | 2 +- .../src/components/form/CFormCheck.ts | 155 ++++++++---------- .../components/form/CFormControlValidation.ts | 8 +- .../components/form/CFormControlWrapper.ts | 6 +- .../src/components/form/CFormInput.ts | 77 +++++++-- .../src/components/form/CFormRange.ts | 2 +- .../src/components/form/CFormSelect.ts | 69 +++++++- .../src/components/form/CFormSwitch.ts | 10 -- .../src/components/form/CFormTextarea.ts | 73 +++++++-- 9 files changed, 261 insertions(+), 141 deletions(-) diff --git a/packages/coreui-vue-chartjs/src/CChart.ts b/packages/coreui-vue-chartjs/src/CChart.ts index d082182d..225a19fe 100644 --- a/packages/coreui-vue-chartjs/src/CChart.ts +++ b/packages/coreui-vue-chartjs/src/CChart.ts @@ -83,7 +83,7 @@ const CChart = defineComponent({ /** * Chart.js chart type. * - * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'} + * @type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter' */ type: { type: String as PropType, diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index f9428f07..43ea7425 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -1,101 +1,80 @@ import { defineComponent, h } from 'vue' -import { shape } from 'vue-types' +import { CButton } from '../button' import { CFormControlValidation } from './CFormControlValidation' import { CFormLabel } from './CFormLabel' -import { Color, Shape } from '../props' - const CFormCheck = defineComponent({ name: 'CFormCheck', inheritAttrs: false, props: { - ...CFormControlValidation.props, /** * Create button-like checkboxes and radio buttons. + * + * @see http://coreui.io/vue/docs/components/button.html */ - button: shape({ - /** - * Sets the color context of the component to one of CoreUI’s themed colors. - * - * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' - */ - color: Color, - /** - * Select the shape of the component. - * - * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3' - */ - shape: Shape, - /** - * Size the component small or large. - * - * @values 'sm' | 'lg' - */ - size: { - type: String, - default: undefined, - required: false, - validator: (value: string) => { - return ['sm', 'lg'].includes(value) - }, - }, - /** - * Set the button variant to an outlined button or a ghost button. - */ - variant: { - type: String, - default: undefined, - required: false, - validator: (value: string) => { - return ['outline', 'ghost'].includes(value) - }, - }, - }), + button: { + type: Object, + }, /** - * The id global attribute defines an identifier (ID) that must be unique in the whole document. + * Provide valuable, actionable feedback. + * + * @since 4.3.0 */ - id: { + feedback: { type: String, - default: undefined, - required: false, }, /** - * Input Checkbox indeterminate Property - */ - indeterminate: Boolean, - /** - * Group checkboxes or radios on the same horizontal row by adding. + * Provide valuable, actionable feedback. + * + * @since 4.3.0 */ - inline: { - type: Boolean, - required: false, + feedbackInvalid: { + type: String, }, /** - * Set component validation state to invalid. + * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 */ - invalid: { - type: Boolean, - required: false, + feedbackValid: { + type: String, }, /** * Sets hit area to the full area of the component. */ hitArea: { type: String, - required: false, validator: (value: string): boolean => { // The value must match one of these strings return ['full'].includes(value) }, }, + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id: { + type: String, + }, + /** + * Input Checkbox indeterminate Property + */ + indeterminate: Boolean, + /** + * Group checkboxes or radios on the same horizontal row by adding. + */ + inline: { + type: Boolean, + }, + /** + * Set component validation state to invalid. + */ + invalid: Boolean, /** * The element represents a caption for a component. */ label: { type: String, - default: undefined, - required: false, }, /** * The default name for a value passed using v-model. @@ -103,8 +82,13 @@ const CFormCheck = defineComponent({ modelValue: { type: [Boolean, String], value: undefined, - required: false, }, + /** + * Display validation feedback in a styled tooltip. + * + * @since 4.3.0 + */ + tooltipFeedback: Boolean, /** * Specifies the type of component. * @@ -113,14 +97,12 @@ const CFormCheck = defineComponent({ type: { type: String, default: 'checkbox', - required: false, }, /** * Set component validation state to valid. */ valid: { type: Boolean, - required: false, }, }, emits: [ @@ -161,19 +143,6 @@ const CFormCheck = defineComponent({ }, ] - const labelClassName = props.button - ? [ - 'btn', - props.button.variant - ? `btn-${props.button.variant}-${props.button.color}` - : `btn-${props.button.color}`, - { - [`btn-${props.button.size}`]: props.button.size, - }, - `${props.button.shape}`, - ] - : 'form-check-label' - const formControl = () => { return h('input', { ...attrs, @@ -186,18 +155,26 @@ const CFormCheck = defineComponent({ }) } - const formLabel = () => { - return h( - CFormLabel, - { - customClassName: labelClassName, - ...(props.id && { for: props.id }), - }, - { - default: () => (slots.label && slots.label()) || props.label, - }, - ) - } + const formLabel = () => + props.button + ? h( + CButton, + { + component: 'label', + ...props.button, + ...(props.id && { for: props.id }), + }, + { + default: () => (slots.label && slots.label()) || props.label, + }, + ) + : h( + CFormLabel, + { class: 'form-check-label', ...(props.id && { for: props.id }) }, + { + default: () => (slots.label && slots.label()) || props.label, + }, + ) const formValidation = () => { return h(CFormControlValidation, { diff --git a/packages/coreui-vue/src/components/form/CFormControlValidation.ts b/packages/coreui-vue/src/components/form/CFormControlValidation.ts index 60e6fa1b..cdfabb70 100644 --- a/packages/coreui-vue/src/components/form/CFormControlValidation.ts +++ b/packages/coreui-vue/src/components/form/CFormControlValidation.ts @@ -14,7 +14,7 @@ const CFormControlValidation = defineComponent({ /** * Provide valuable, actionable feedback. * - * @since 4.2.0 + * @since 4.3.0 */ feedback: { type: String, @@ -22,7 +22,7 @@ const CFormControlValidation = defineComponent({ /** * Provide valuable, actionable feedback. * - * @since 4.2.0 + * @since 4.3.0 */ feedbackInvalid: { type: String, @@ -30,7 +30,7 @@ const CFormControlValidation = defineComponent({ /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * - * @since 4.2.0 + * @since 4.3.0 */ feedbackValid: { type: String, @@ -42,7 +42,7 @@ const CFormControlValidation = defineComponent({ /** * Display validation feedback in a styled tooltip. * - * @since 4.2.0 + * @since 4.3.0 */ tooltipFeedback: Boolean, /** diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts index 45c7b456..a8cb3a5a 100644 --- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -12,7 +12,7 @@ const CFormControlWrapper = defineComponent({ /** * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * - * @since 4.2.0 + * @since 4.3.0 */ floatingLabel: { type: String, @@ -26,7 +26,7 @@ const CFormControlWrapper = defineComponent({ /** * Add a caption for a component. * - * @since 4.2.0 + * @since 4.3.0 */ label: { type: String, @@ -34,7 +34,7 @@ const CFormControlWrapper = defineComponent({ /** * Add helper text to the component. * - * @since 4.2.0 + * @since 4.3.0 */ text: { type: String, diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 80619d29..c0c11b8b 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -4,7 +4,6 @@ import { CFormControlWrapper } from './CFormControlWrapper' const CFormInput = defineComponent({ name: 'CFormInput', props: { - ...CFormControlWrapper.props, /** * Toggle the disabled state for the component. */ @@ -12,12 +11,57 @@ const CFormInput = defineComponent({ type: Boolean, required: false, }, + + // Inherited Props from CFormControlWrapper + /** + * Provide valuable, actionable feedback. + * + * @since 4.3.0 + */ + feedback: { + type: String, + }, + /** + * Provide valuable, actionable feedback. + * + * @since 4.3.0 + */ + feedbackInvalid: { + type: String, + }, + /** + * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 + */ + feedbackValid: { + type: String, + }, + /** + * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 + */ + floatingLabel: { + type: String, + }, + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id: { + type: String, + }, /** * Set component validation state to invalid. */ - invalid: { - type: Boolean, - required: false, + invalid: Boolean, + /** + * Add a caption for a component. + * + * @since 4.3.0 + */ + label: { + type: String, }, /** * The default name for a value passed using v-model. @@ -25,7 +69,6 @@ const CFormInput = defineComponent({ modelValue: { type: String, default: undefined, - require: false, }, /** * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. @@ -48,12 +91,24 @@ const CFormInput = defineComponent({ */ size: { type: String, - default: undefined, - require: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, }, + /** + * Add helper text to the component. + * + * @since 4.3.0 + */ + text: { + type: String, + }, + /** + * Display validation feedback in a styled tooltip. + * + * @since 4.3.0 + */ + tooltipFeedback: Boolean, /** * Specifies the type of component. * @@ -62,15 +117,11 @@ const CFormInput = defineComponent({ type: { type: String, default: 'text', - require: false, }, /** * Set component validation state to valid. */ - valid: { - type: Boolean, - required: false, - }, + valid: Boolean, }, emits: [ /** @@ -136,7 +187,7 @@ const CFormInput = defineComponent({ onInput: (event: InputEvent) => handleInput(event), readonly: props.readonly, type: props.type, - value: props.modelValue || attrs.value, + ...(props.modelValue && { value: props.modelValue }), }, slots.default && slots.default(), ), diff --git a/packages/coreui-vue/src/components/form/CFormRange.ts b/packages/coreui-vue/src/components/form/CFormRange.ts index c3b20ac1..9b03a624 100644 --- a/packages/coreui-vue/src/components/form/CFormRange.ts +++ b/packages/coreui-vue/src/components/form/CFormRange.ts @@ -14,7 +14,7 @@ const CFormRange = defineComponent({ /** * Add a caption for a component. * - * @since 4.2.0 + * @since 4.3.0 */ label: { type: String, diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index 32b747c9..86852ef2 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -11,7 +11,38 @@ type Option = { const CFormSelect = defineComponent({ name: 'CFormSelect', props: { - ...CFormControlWrapper.props, + /** + * Provide valuable, actionable feedback. + * + * @since 4.3.0 + */ + feedback: { + type: String, + }, + /** + * Provide valuable, actionable feedback. + * + * @since 4.3.0 + */ + feedbackInvalid: { + type: String, + }, + /** + * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 + */ + feedbackValid: { + type: String, + }, + /** + * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 + */ + floatingLabel: { + type: String, + }, /** * Specifies the number of visible options in a drop-down list. */ @@ -20,12 +51,23 @@ const CFormSelect = defineComponent({ default: undefined, required: false, }, + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id: { + type: String, + }, /** * Set component validation state to invalid. */ - invalid: { - type: Boolean, - required: false, + invalid: Boolean, + /** + * Add a caption for a component. + * + * @since 4.3.0 + */ + label: { + type: String, }, /** * The default name for a value passed using v-model. @@ -64,12 +106,23 @@ const CFormSelect = defineComponent({ }, }, /** - * Set component validation state to valid. + * Add helper text to the component. + * + * @since 4.3.0 */ - valid: { - type: Boolean, - required: false, + text: { + type: String, }, + /** + * Display validation feedback in a styled tooltip. + * + * @since 4.3.0 + */ + tooltipFeedback: Boolean, + /** + * Set component validation state to valid. + */ + valid: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/form/CFormSwitch.ts b/packages/coreui-vue/src/components/form/CFormSwitch.ts index 1c729f9c..274c270a 100644 --- a/packages/coreui-vue/src/components/form/CFormSwitch.ts +++ b/packages/coreui-vue/src/components/form/CFormSwitch.ts @@ -11,23 +11,18 @@ const CFormSwitch = defineComponent({ */ id: { type: String, - default: undefined, - required: false, }, /** * Set component validation state to invalid. */ invalid: { type: Boolean, - required: false, }, /** * The element represents a caption for a component. */ label: { type: String, - default: undefined, - required: false, }, /** * The default name for a value passed using v-model. @@ -35,7 +30,6 @@ const CFormSwitch = defineComponent({ modelValue: { type: [Boolean, String], value: undefined, - required: false, }, /** * Size the component large or extra large. Works only with `switch`. @@ -44,8 +38,6 @@ const CFormSwitch = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['lg', 'xl'].includes(value) }, @@ -58,14 +50,12 @@ const CFormSwitch = defineComponent({ type: { type: String, default: 'checkbox', - required: false, }, /** * Set component validation state to valid. */ valid: { type: Boolean, - required: false, }, }, emits: [ diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index afaa73db..71c447bd 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -4,20 +4,61 @@ import { CFormControlWrapper } from './CFormControlWrapper' const CFormTextarea = defineComponent({ name: 'CFormTextarea', props: { - ...CFormControlWrapper.props, /** * Toggle the disabled state for the component. */ disabled: { type: Boolean, - required: false, + }, + /** + * Provide valuable, actionable feedback. + * + * @since 4.3.0 + */ + feedback: { + type: String, + }, + /** + * Provide valuable, actionable feedback. + * + * @since 4.3.0 + */ + feedbackInvalid: { + type: String, + }, + /** + * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 + */ + feedbackValid: { + type: String, + }, + /** + * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. + * + * @since 4.3.0 + */ + floatingLabel: { + type: String, + }, + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id: { + type: String, }, /** * Set component validation state to invalid. */ - invalid: { - type: Boolean, - required: false, + invalid: Boolean, + /** + * Add a caption for a component. + * + * @since 4.3.0 + */ + label: { + type: String, }, /** * The default name for a value passed using v-model. @@ -25,29 +66,37 @@ const CFormTextarea = defineComponent({ modelValue: { type: String, default: undefined, - require: false, }, /** * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. */ plainText: { type: Boolean, - required: false, }, /** * Toggle the readonly state for the component. */ readonly: { type: Boolean, - required: false, }, /** - * Set component validation state to valid. + * Add helper text to the component. + * + * @since 4.3.0 */ - valid: { - type: Boolean, - required: false, + text: { + type: String, }, + /** + * Display validation feedback in a styled tooltip. + * + * @since 4.3.0 + */ + tooltipFeedback: Boolean, + /** + * Set component validation state to valid. + */ + valid: Boolean, }, emits: [ /** From 8da6775c874b1aa9fd760abb4f38eeb5d1ffdc9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 18 Apr 2022 14:45:05 +0200 Subject: [PATCH 073/434] docs: update documentation --- packages/docs/.vuepress/config.ts | 40 +- packages/docs/api/CChart.api.md | 24 +- packages/docs/api/button/CButton.api.md | 27 +- packages/docs/api/dropdown/CDropdown.api.md | 23 +- .../docs/api/dropdown/CDropdownToggle.api.md | 22 +- packages/docs/api/form/CFormCheck.api.md | 27 +- .../api/form/CFormControlValidation.api.md | 18 + .../docs/api/form/CFormControlWrapper.api.md | 15 + packages/docs/api/form/CFormInput.api.md | 28 +- packages/docs/api/form/CFormRange.api.md | 19 +- packages/docs/api/form/CFormSelect.api.md | 24 +- packages/docs/api/form/CFormSwitch.api.md | 6 +- packages/docs/api/form/CFormTextarea.api.md | 24 +- packages/docs/build/docgen.config.js | 4 +- packages/docs/build/templates/component.js | 2 - packages/docs/build/templates/props.js | 24 +- packages/docs/components/list-group.md | 21 + packages/docs/forms/checkbox.md | 126 +++ packages/docs/forms/checks-radios.md | 50 +- packages/docs/forms/floating-labels.md | 130 +++- packages/docs/forms/input.md | 241 ++++++ packages/docs/forms/radio.md | 108 +++ packages/docs/forms/range.md | 24 +- packages/docs/forms/switch.md | 39 + packages/docs/forms/textarea.md | 92 +++ packages/docs/forms/validation.md | 729 +++++++++++------- 26 files changed, 1423 insertions(+), 464 deletions(-) create mode 100644 packages/docs/api/form/CFormControlValidation.api.md create mode 100644 packages/docs/api/form/CFormControlWrapper.api.md create mode 100644 packages/docs/forms/checkbox.md create mode 100644 packages/docs/forms/input.md create mode 100644 packages/docs/forms/radio.md create mode 100644 packages/docs/forms/switch.md create mode 100644 packages/docs/forms/textarea.md diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts index 42e8d042..e73036d8 100644 --- a/packages/docs/.vuepress/config.ts +++ b/packages/docs/.vuepress/config.ts @@ -105,33 +105,49 @@ export default defineUserConfig({ icon: ``, link: `/forms/`, children: [ + // { + // text: 'Overview', + // link: `/forms/overview.html`, + // }, { - text: 'Overview', - link: `/forms/overview.html`, + text: 'Checkbox', + link: `/forms/checkbox.html`, }, { - text: 'Form control', - link: `/forms/form-control.html`, + text: 'Input', + link: `/forms/input.html`, }, { - text: 'Select', - link: `/forms/select.html`, + text: 'Input group', + link: `/forms/input-group.html`, }, { - text: 'Checks & radios', - link: `/forms/checks-radios.html`, + text: 'Radio', + link: `/forms/radio.html`, }, + // { + // text: 'Checks & radios', + // link: `/forms/checks-radios.html`, + // }, { text: 'Range', link: `/forms/range.html`, }, { - text: 'Floating labels', - link: `/forms/floating-labels.html`, + text: 'Select', + link: `/forms/select.html`, }, { - text: 'Input group', - link: `/forms/input-group.html`, + text: 'Switch', + link: `/forms/switch.html`, + }, + { + text: 'Textarea', + link: `/forms/textarea.html`, + }, + { + text: 'Floating labels', + link: `/forms/floating-labels.html`, }, { text: 'Layout', diff --git a/packages/docs/api/CChart.api.md b/packages/docs/api/CChart.api.md index 64ec33d7..16ba9a3e 100644 --- a/packages/docs/api/CChart.api.md +++ b/packages/docs/api/CChart.api.md @@ -8,18 +8,18 @@ import CChart from '@coreui/vue-chartjs/src/CChart' #### Props -| Prop name | Description | Type | Values | Default | -| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------- | ------- | -| **custom-tooltips** | Enables custom html based tooltips instead of standard tooltips.
    `@default` true | boolean | - | true | -| **data** | The data object that is passed into the Chart.js chart (more info). | ChartData \| ((canvas: HTMLCanvasElement) => ChartData) | - | | -| **height** | Height attribute applied to the rendered canvas.
    `@default` 150 | number | - | 150 | -| **id** | ID attribute applied to the rendered canvas. | string | - | - | -| **options** | The options object that is passed into the Chart.js chart.

    {@link https://www.chartjs.org/docs/latest/general/options.html More Info} | ChartOptions | - | - | -| **plugins** | The plugins array that is passed into the Chart.js chart (more info)

    {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | Plugin[] | - | - | -| **redraw** | If true, will tear down and redraw chart on all updates. | boolean | - | | -| **type** | Chart.js chart type.
    `@type` undefined | ChartType | `line`, `bar`, `radar`, `doughnut`, `polarArea`, `bubble`, `pie`, `scatter` | 'bar' | -| **width** | Width attribute applied to the rendered canvas.
    `@default` 300 | number | - | 300 | -| **wrapper** | Put the chart into the wrapper div element.
    `@default` true | boolean | - | true | +| Prop name | Description | Type | Values | Default | +| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------ | ------- | +| **custom-tooltips** | Enables custom html based tooltips instead of standard tooltips.
    `@default` true | boolean | - | true | +| **data** | The data object that is passed into the Chart.js chart (more info). | ChartData \| ((canvas: HTMLCanvasElement) => ChartData) | - | | +| **height** | Height attribute applied to the rendered canvas.
    `@default` 150 | number | - | 150 | +| **id** | ID attribute applied to the rendered canvas. | string | - | - | +| **options** | The options object that is passed into the Chart.js chart.

    {@link https://www.chartjs.org/docs/latest/general/options.html More Info} | ChartOptions | - | - | +| **plugins** | The plugins array that is passed into the Chart.js chart (more info)

    {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | Plugin[] | - | - | +| **redraw** | If true, will tear down and redraw chart on all updates. | boolean | - | | +| **type** | Chart.js chart type.
    `@type` 'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter' | ChartType | - | 'bar' | +| **width** | Width attribute applied to the rendered canvas.
    `@default` 300 | number | - | 300 | +| **wrapper** | Put the chart into the wrapper div element.
    `@default` true | boolean | - | true | #### Events diff --git a/packages/docs/api/button/CButton.api.md b/packages/docs/api/button/CButton.api.md index 739baa9b..e5d4a583 100644 --- a/packages/docs/api/button/CButton.api.md +++ b/packages/docs/api/button/CButton.api.md @@ -8,13 +8,20 @@ import CButton from '@coreui/vue/src/components/button/CButton' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | --------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| **active** | Toggle the active state for the component. | boolean | - | false | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' | -| **disabled** | Toggle the disabled state for the component. | boolean | - | | -| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | | -| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | -| **variant** | Set the button variant to an outlined button or a ghost button. | string | `'ghost'`, `'outline'` | - | +| Prop name | Description | Type | Values | Default | +| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| **active** | Toggle the active state for the component. | boolean | - | false | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | +| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' | +| **disabled** | Toggle the disabled state for the component. | boolean | - | | +| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - | +| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | | +| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | +| **type** | Specifies the type of button. Always specify the type attribute for the `"`; +exports[`Customize CHeaderToggler component renders correctly 1`] = `""`; -exports[`Loads and display CHeaderToggler component renders correctly 1`] = `""`; +exports[`Loads and display CHeaderToggler component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/image/__tests__/__snapshots__/CImage.spec.ts.snap b/packages/coreui-vue/src/components/image/__tests__/__snapshots__/CImage.spec.ts.snap index 3cb60262..808f6428 100644 --- a/packages/coreui-vue/src/components/image/__tests__/__snapshots__/CImage.spec.ts.snap +++ b/packages/coreui-vue/src/components/image/__tests__/__snapshots__/CImage.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize (two) CImage component renders correctly 1`] = `""`; +exports[`Customize (two) CImage component renders correctly 1`] = `""`; -exports[`Customize CImage component renders correctly 1`] = `""`; +exports[`Customize CImage component renders correctly 1`] = `""`; -exports[`Loads and display CImage component renders correctly 1`] = `""`; +exports[`Loads and display CImage component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/link/__tests__/__snapshots__/CLink.spec.ts.snap b/packages/coreui-vue/src/components/link/__tests__/__snapshots__/CLink.spec.ts.snap index 7a6941d1..ab1d8241 100644 --- a/packages/coreui-vue/src/components/link/__tests__/__snapshots__/CLink.spec.ts.snap +++ b/packages/coreui-vue/src/components/link/__tests__/__snapshots__/CLink.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CLink component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Customize CLink component renders correctly 1`] = `"
    Default slot
    "`; -exports[`Loads and display CLink component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CLink component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.ts.snap b/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.ts.snap index 8c45503d..dca65991 100644 --- a/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.ts.snap +++ b/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CListGroup component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Customize CListGroup component renders correctly 1`] = `"
    Default slot
    "`; -exports[`Loads and display CListGroup component renders correctly 1`] = `"
      Default slot
    "`; +exports[`Loads and display CListGroup component renders correctly 1`] = `"
      Default slot
    "`; diff --git a/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.ts.snap b/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.ts.snap index 1dfeffaa..198cf490 100644 --- a/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.ts.snap +++ b/packages/coreui-vue/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize (two) CListGroupItem component renders correctly 1`] = `""`; +exports[`Customize (two) CListGroupItem component renders correctly 1`] = `""`; -exports[`Customize CListGroupItem component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Customize CListGroupItem component renders correctly 1`] = `"
    Default slot
    "`; -exports[`Loads and display CListGroupItem component renders correctly 1`] = `"
  • Default slot
    • "`; +exports[`Loads and display CListGroupItem component renders correctly 1`] = `"
  • Default slot
    • "`; diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalBody.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalBody.spec.ts.snap index 7cbc7cc4..b3bcb34c 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalBody.spec.ts.snap +++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalBody.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CModalBody component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Loads and display CModalBody component renders correctly 1`] = `"
    Default slot
    "`; diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.ts.snap index db68c52a..a87577d0 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.ts.snap +++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CModalFooter component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Loads and display CModalFooter component renders correctly 1`] = `"
    Default slot
    "`; diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.ts.snap index 144cc655..abeb2a67 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.ts.snap +++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CModalHeader component renders correctly 1`] = `"Default slot"`; +exports[`Customize CModalHeader component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CModalHeader component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CModalHeader component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.ts.snap index a7f8175b..fe60a9b6 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.ts.snap +++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CModalTitle component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Customize CModalTitle component renders correctly 1`] = `"
    Default slot
    "`; -exports[`Loads and display CModalTitle component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Loads and display CModalTitle component renders correctly 1`] = `"
    Default slot
    "`; diff --git a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNav.spec.ts.snap b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNav.spec.ts.snap index 7bf958f2..4d306a7d 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNav.spec.ts.snap +++ b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNav.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CNav component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Customize CNav component renders correctly 1`] = `""`; -exports[`Loads and display CNav component renders correctly 1`] = `"
      Default slot
    "`; +exports[`Loads and display CNav component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.ts.snap b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.ts.snap index c959b05c..78b1e4cb 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.ts.snap +++ b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.ts.snap @@ -1,17 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Customize CNavGroup component renders correctly 1`] = ` -"
  • togglerContent - -
      +"
    • togglerContent + +
        • " `; exports[`Loads and display CNavGroup component renders correctly 1`] = ` -"
      • +"
      • - +
        • " diff --git a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.ts.snap b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.ts.snap index 85dd192f..7e5bd579 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.ts.snap +++ b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CNavGroupItems component renders correctly 1`] = `"
          Default slot
        "`; +exports[`Loads and display CNavGroupItems component renders correctly 1`] = `"
          Default slot
        "`; diff --git a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavItem.spec.ts.snap b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavItem.spec.ts.snap index aafaa47d..7147ee44 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavItem.spec.ts.snap +++ b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavItem.spec.ts.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Customize CNavItem component renders correctly 1`] = ` -"
      • -
        Default slot
        +"
      • +
        Default slot
        • " `; -exports[`Loads and display CNavItem component renders correctly 1`] = `"
      • Default slot
        • "`; +exports[`Loads and display CNavItem component renders correctly 1`] = `"
      • Default slot
        • "`; diff --git a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavLink.spec.ts.snap b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavLink.spec.ts.snap index fb08bba5..343e8754 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavLink.spec.ts.snap +++ b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavLink.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CNavLink component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize CNavLink component renders correctly 1`] = `"
        Default slot
        "`; -exports[`Loads and display CNavLink component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CNavLink component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.ts.snap b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.ts.snap index ce071627..44eee351 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.ts.snap +++ b/packages/coreui-vue/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CNavTitle component renders correctly 1`] = `"
      • Default slot
        • "`; +exports[`Loads and display CNavTitle component renders correctly 1`] = `"
      • Default slot
        • "`; diff --git a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap index a181b2d6..ff0e3509 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap +++ b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Customize CNavbar component renders correctly 1`] = ` -"
        -
        Default slot
        +"
        +
        Default slot
        " `; -exports[`Loads and display CNavbar component renders correctly 1`] = `""`; +exports[`Loads and display CNavbar component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.ts.snap b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.ts.snap index c8d4dc74..0ddb600e 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.ts.snap +++ b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize (two) CNavbarBrand component renders correctly 1`] = `"Default slot"`; +exports[`Customize (two) CNavbarBrand component renders correctly 1`] = `"Default slot"`; -exports[`Customize CNavbarBrand component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize CNavbarBrand component renders correctly 1`] = `"
        Default slot
        "`; -exports[`Loads and display CNavbarBrand component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CNavbarBrand component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.ts.snap b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.ts.snap index 1bf1ff8c..d2e23afd 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.ts.snap +++ b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CNavbarNav component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize CNavbarNav component renders correctly 1`] = `""`; -exports[`Loads and display CNavbarNav component renders correctly 1`] = `"
          Default slot
        "`; +exports[`Loads and display CNavbarNav component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.ts.snap b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.ts.snap index 002c5d56..24487886 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.ts.snap +++ b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CNavbarText component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CNavbarText component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.ts.snap b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.ts.snap index 71742747..7054937b 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.ts.snap +++ b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CNavbarToggler component renders correctly 1`] = `""`; +exports[`Customize CNavbarToggler component renders correctly 1`] = `""`; -exports[`Loads and display CNavbarToggler component renders correctly 1`] = `""`; +exports[`Loads and display CNavbarToggler component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.ts.snap b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.ts.snap index 0734b39e..86cbd126 100644 --- a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.ts.snap +++ b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display COffcanvasBody component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display COffcanvasBody component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.ts.snap b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.ts.snap index 0d3349bf..f3a255fc 100644 --- a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.ts.snap +++ b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display COffcanvasHeader component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display COffcanvasHeader component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.ts.snap b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.ts.snap index 0f7852ee..52e231f8 100644 --- a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.ts.snap +++ b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize COffcanvasTitle component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize COffcanvasTitle component renders correctly 1`] = `"
        Default slot
        "`; -exports[`Loads and display COffcanvasTitle component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display COffcanvasTitle component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPagination.spec.ts.snap b/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPagination.spec.ts.snap index ab58969d..df7177ab 100644 --- a/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPagination.spec.ts.snap +++ b/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPagination.spec.ts.snap @@ -2,12 +2,12 @@ exports[`Customize CPagination component renders correctly 1`] = ` "" `; exports[`Loads and display CPagination component renders correctly 1`] = ` "" `; diff --git a/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.ts.snap b/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.ts.snap index f1cbff80..440c37db 100644 --- a/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.ts.snap +++ b/packages/coreui-vue/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CPaginationItem component renders correctly 1`] = `"
      • Default slot
        • "`; +exports[`Customize CPaginationItem component renders correctly 1`] = `"
      • Default slot
        • "`; -exports[`Loads and display CPaginationItem component renders correctly 1`] = `"
      • Default slot
        • "`; +exports[`Loads and display CPaginationItem component renders correctly 1`] = `"
      • Default slot
        • "`; diff --git a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap index 444e575e..bb820197 100644 --- a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap +++ b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CProgress component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize CProgress component renders correctly 1`] = `"
        Default slot
        "`; -exports[`Loads and display CProgress component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display CProgress component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap index 87a1eb70..c4daea91 100644 --- a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap +++ b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CProgressBar component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize CProgressBar component renders correctly 1`] = `"
        Default slot
        "`; -exports[`Loads and display CProgressBar component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display CProgressBar component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap index 1f78fb3e..cffd8e68 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CSidebar component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Customize CSidebar component renders correctly 1`] = `"
        Default slot
        "`; -exports[`Loads and display CSidebar component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display CSidebar component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.ts.snap index 69b13fc4..5b05d064 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CSidebarBrand component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display CSidebarBrand component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.ts.snap index 943df02f..c275d81c 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CSidebarFooter component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display CSidebarFooter component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.ts.snap index aa517e64..edf15cc3 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CSidebarHeader component renders correctly 1`] = `"
        Default slot
        "`; +exports[`Loads and display CSidebarHeader component renders correctly 1`] = `"
        Default slot
        "`; diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.ts.snap index 77f0c1cd..b476da94 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CSidebarNav component renders correctly 1`] = `"
          "`; +exports[`Loads and display CSidebarNav component renders correctly 1`] = `"
            "`; diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.ts.snap index b8357bf5..402da170 100644 --- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.ts.snap +++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CSidebarToggler component renders correctly 1`] = `""`; +exports[`Loads and display CSidebarToggler component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap b/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap index 087b82e0..f1d49397 100644 --- a/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap +++ b/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CSpinner component renders correctly 1`] = `""`; +exports[`Customize CSpinner component renders correctly 1`] = `""`; -exports[`Loads and display CSpinner component renders correctly 1`] = `""`; +exports[`Loads and display CSpinner component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTable.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTable.spec.ts.snap index 21adca39..896ca48b 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTable.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTable.spec.ts.snap @@ -1,9 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Customize CTable component renders correctly 1`] = ` -"
            - Default slot
            +"
            + + + + Default slot + +
            " `; -exports[`Loads and display CTable component renders correctly 1`] = `"Default slot
            "`; +exports[`Loads and display CTable component renders correctly 1`] = ` +" + + + Default slot + +
            " +`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableBody.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableBody.spec.ts.snap index e452db95..fc64a172 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableBody.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableBody.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CTableBody component renders correctly 1`] = `"Default slot"`; +exports[`Customize CTableBody component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CTableBody component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CTableBody component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.ts.snap index 06451f4e..75f33858 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CTableDataCell component renders correctly 1`] = `"Default slot"`; +exports[`Customize CTableDataCell component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CTableDataCell component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CTableDataCell component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableFoot.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableFoot.spec.ts.snap index 1d441f68..4d50b597 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableFoot.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableFoot.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CTableFoot component renders correctly 1`] = `"Default slot"`; +exports[`Customize CTableFoot component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CTableFoot component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CTableFoot component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHead.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHead.spec.ts.snap index 340dff97..e2a9c114 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHead.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHead.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CTableHead component renders correctly 1`] = `"Default slot"`; +exports[`Customize CTableHead component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CTableHead component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CTableHead component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.ts.snap index 814d9ad4..b5523d84 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CTableHeaderCell component renders correctly 1`] = `"Default slot"`; +exports[`Customize CTableHeaderCell component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CTableHeaderCell component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CTableHeaderCell component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableRow.spec.ts.snap b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableRow.spec.ts.snap index 3e798a33..11c6d246 100644 --- a/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableRow.spec.ts.snap +++ b/packages/coreui-vue/src/components/table/__tests__/__snapshots__/CTableRow.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CTableRow component renders correctly 1`] = `"Default slot"`; +exports[`Customize CTableRow component renders correctly 1`] = `"Default slot"`; -exports[`Loads and display CTableRow component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CTableRow component renders correctly 1`] = `"Default slot"`; diff --git a/packages/coreui-vue/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.ts.snap b/packages/coreui-vue/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.ts.snap index dddea15c..a6fe655d 100644 --- a/packages/coreui-vue/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.ts.snap +++ b/packages/coreui-vue/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CTabContent component renders correctly 1`] = `"
            Default slot
            "`; +exports[`Loads and display CTabContent component renders correctly 1`] = `"
            Default slot
            "`; diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastBody.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastBody.spec.ts.snap index 19fd8765..0636c970 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastBody.spec.ts.snap +++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastBody.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CToastBody component renders correctly 1`] = `"
            Default slot
            "`; +exports[`Loads and display CToastBody component renders correctly 1`] = `"
            Default slot
            "`; diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap index 7bfc900e..6944431f 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap +++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CToastClose component renders correctly 1`] = `""`; +exports[`Customize CToastClose component renders correctly 1`] = `""`; -exports[`Loads and display CToastClose component renders correctly 1`] = `""`; +exports[`Loads and display CToastClose component renders correctly 1`] = `""`; diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap index 0a22bada..6682d823 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap +++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CToastHeader component renders correctly 1`] = `"
            Default slot
            "`; +exports[`Customize CToastHeader component renders correctly 1`] = `"
            Default slot
            "`; exports[`Loads and display CToastHeader component renders correctly 1`] = ` -"
            Default slot +"
            Default slot
            " `; diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap index cf4120d0..8f23150f 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap +++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Customize CToaster component renders correctly 1`] = `"
            Default slot
            "`; +exports[`Customize CToaster component renders correctly 1`] = `"
            Default slot
            "`; -exports[`Loads and display CToaster component renders correctly 1`] = `"
            Default slot
            "`; +exports[`Loads and display CToaster component renders correctly 1`] = `"
            Default slot
            "`; diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap index febb42ea..c8e5f776 100644 --- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap +++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CWidgetStatsA component renders correctly 1`] = ` -"
            -
            +"
            +
            -
            75
            +
            75
            title
            action
            chartDefault slot diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap index 92099d9f..33f7850e 100644 --- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap +++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CWidgetStatsB component renders correctly 1`] = ` -"
            -
            -
            75
            +"
            +
            +
            75
            title
            -
            -
            -
            text +
            +
            +
            text
            " `; diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap index f1b38db8..8793d1ec 100644 --- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap +++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CWidgetStatsC component renders correctly 1`] = ` -"
            -
            -
            icon
            -
            75
            -
            title
            -
            -
            +"
            +
            +
            icon
            +
            75
            +
            title
            +
            +
            " diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap index cf88699f..77bab6a7 100644 --- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap +++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CWidgetStatsD component renders correctly 1`] = ` -"
            -
            iconchart
            -
            +"
            +
            iconchart
            +
            -
            -
            bb
            -
            aa
            +
            +
            bb
            +
            aa
            -
            -
            -
            dd
            -
            cc
            +
            +
            +
            dd
            +
            cc
            " diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap index 75efdd7e..c1c85e62 100644 --- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap +++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CWidgetStatsE component renders correctly 1`] = ` -"
            -
            -
            title
            -
            value
            chartdefault +"
            +
            +
            title
            +
            value
            chartdefault
            " `; diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap index 34bbce53..81b9aa42 100644 --- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap +++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CWidgetStatsF component renders correctly 1`] = ` -"
            -
            -
            default
            +"
            +
            +
            default
            -
            75
            -
            title
            +
            75
            +
            title
            -
            footer
            +
            footer
            " `; From e07b767307744624d83da88a94305a2172d2cdaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sat, 25 Mar 2023 17:08:39 +0100 Subject: [PATCH 160/434] refactor: clean-up, improvements, and shorthands in props definition --- packages/coreui-vue-chartjs/src/CChart.ts | 11 ---- .../src/components/accordion/CAccordion.ts | 6 +-- .../components/accordion/CAccordionItem.ts | 7 +-- .../coreui-vue/src/components/alert/CAlert.ts | 9 +--- .../src/components/alert/CAlertHeading.ts | 1 - .../src/components/avatar/CAvatar.ts | 10 +--- .../src/components/backdrop/CBackdrop.ts | 3 +- .../coreui-vue/src/components/badge/CBadge.ts | 5 -- .../components/breadcrumb/CBreadcrumbItem.ts | 11 +--- .../components/button-group/CButtonGroup.ts | 7 +-- .../src/components/button/CButton.ts | 23 ++------ .../src/components/card/CCardHeader.ts | 1 - .../src/components/card/CCardImage.ts | 3 -- .../src/components/card/CCardLink.ts | 1 - .../src/components/card/CCardSubtitle.ts | 1 - .../src/components/card/CCardText.ts | 1 - .../src/components/card/CCardTitle.ts | 1 - .../src/components/carousel/CCarousel.ts | 7 +-- .../src/components/carousel/CCarouselItem.ts | 2 - .../components/close-button/CCloseButton.ts | 10 +--- .../src/components/collapse/CCollapse.ts | 12 ++--- .../src/components/dropdown/CDropdown.ts | 23 ++------ .../components/dropdown/CDropdownHeader.ts | 1 - .../src/components/dropdown/CDropdownItem.ts | 17 ++---- .../src/components/dropdown/CDropdownMenu.ts | 1 - .../components/dropdown/CDropdownToggle.ts | 25 ++------- .../src/components/footer/CFooter.ts | 2 - .../coreui-vue/src/components/form/CForm.ts | 5 +- .../src/components/form/CFormCheck.ts | 32 +++-------- .../components/form/CFormControlValidation.ts | 16 ++---- .../components/form/CFormControlWrapper.ts | 16 ++---- .../src/components/form/CFormFeedback.ts | 1 - .../src/components/form/CFormInput.ts | 48 ++++------------- .../src/components/form/CFormLabel.ts | 6 +-- .../src/components/form/CFormRange.ts | 38 +++---------- .../src/components/form/CFormSelect.ts | 49 ++++------------- .../src/components/form/CFormSwitch.ts | 21 ++------ .../src/components/form/CFormText.ts | 1 - .../src/components/form/CFormTextarea.ts | 45 ++++------------ .../src/components/form/CInputGroup.ts | 2 - .../src/components/form/CInputGroupText.ts | 1 - .../coreui-vue/src/components/grid/CCol.ts | 12 ----- .../src/components/grid/CContainer.ts | 30 +++-------- .../coreui-vue/src/components/grid/CRow.ts | 46 ++++------------ .../src/components/header/CHeader.ts | 4 -- .../src/components/header/CHeaderBrand.ts | 1 - .../src/components/header/CHeaderNav.ts | 1 - .../coreui-vue/src/components/image/CImage.ts | 17 ++---- .../coreui-vue/src/components/link/CLink.ts | 17 ++---- .../src/components/list-group/CListGroup.ts | 8 +-- .../components/list-group/CListGroupItem.ts | 11 +--- .../coreui-vue/src/components/modal/CModal.ts | 13 ++--- .../src/components/modal/CModalHeader.ts | 1 - .../src/components/modal/CModalTitle.ts | 1 - .../coreui-vue/src/components/nav/CNav.ts | 5 -- .../coreui-vue/src/components/nav/CNavLink.ts | 17 ++---- .../src/components/navbar/CNavbar.ts | 9 ---- .../src/components/navbar/CNavbarBrand.ts | 7 +-- .../src/components/navbar/CNavbarNav.ts | 1 - .../src/components/offcanvas/COffcanvas.ts | 19 ++++--- .../components/offcanvas/COffcanvasTitle.ts | 1 - .../src/components/pagination/CPagination.ts | 4 -- .../components/pagination/CPaginationItem.ts | 22 ++------ .../components/placeholder/CPlaceholder.ts | 41 +++----------- .../src/components/popover/CPopover.ts | 17 ++---- .../src/components/progress/CProgress.ts | 6 +-- .../src/components/progress/CProgressBar.ts | 8 +-- .../src/components/sidebar/CSidebar.ts | 14 ++--- .../src/components/spinner/CSpinner.ts | 7 --- .../coreui-vue/src/components/table/CTable.ts | 53 +++---------------- .../src/components/table/CTableDataCell.ts | 12 +---- .../src/components/table/CTableRow.ts | 7 +-- .../src/components/tabs/CTabPane.ts | 3 +- .../coreui-vue/src/components/toast/CToast.ts | 18 ++----- .../src/components/toast/CToastClose.ts | 6 +-- .../src/components/toast/CToastHeader.ts | 5 +- .../src/components/toast/CToaster.ts | 2 - .../src/components/tooltip/CTooltip.ts | 11 +--- .../src/components/widgets/CWidgetStatsA.ts | 15 ++---- .../src/components/widgets/CWidgetStatsB.ts | 21 ++------ .../src/components/widgets/CWidgetStatsC.ts | 15 ++---- .../src/components/widgets/CWidgetStatsD.ts | 3 +- .../src/components/widgets/CWidgetStatsE.ts | 9 +--- .../src/components/widgets/CWidgetStatsF.ts | 15 ++---- packages/docs/api/CChart.api.md | 4 +- packages/docs/api/accordion/CAccordion.api.md | 4 +- packages/docs/api/alert/CAlert.api.md | 4 +- packages/docs/api/avatar/CAvatar.api.md | 6 +-- packages/docs/api/badge/CBadge.api.md | 6 +-- .../api/breadcrumb/CBreadcrumbItem.api.md | 2 +- .../docs/api/button-group/CButtonGroup.api.md | 2 +- packages/docs/api/button/CButton.api.md | 8 +-- packages/docs/api/callout/CCallout.api.md | 2 +- packages/docs/api/card/CCard.api.md | 4 +- packages/docs/api/carousel/CCarousel.api.md | 6 +-- .../docs/api/close-button/CCloseButton.api.md | 4 +- packages/docs/api/collapse/CCollapse.api.md | 4 +- packages/docs/api/dropdown/CDropdown.api.md | 6 +-- .../docs/api/dropdown/CDropdownItem.api.md | 4 +- .../docs/api/dropdown/CDropdownToggle.api.md | 10 ++-- packages/docs/api/form/CForm.api.md | 2 +- packages/docs/api/form/CFormCheck.api.md | 27 +++++----- .../api/form/CFormControlValidation.api.md | 12 ++--- .../docs/api/form/CFormControlWrapper.api.md | 6 +-- packages/docs/api/form/CFormFeedback.api.md | 6 +-- packages/docs/api/form/CFormInput.api.md | 28 +++++----- packages/docs/api/form/CFormRange.api.md | 6 +-- packages/docs/api/form/CFormSelect.api.md | 20 +++---- packages/docs/api/form/CFormSwitch.api.md | 13 ++--- packages/docs/api/form/CFormTextarea.api.md | 26 ++++----- packages/docs/api/grid/CContainer.api.md | 12 ++--- packages/docs/api/grid/CRow.api.md | 1 + packages/docs/api/image/CImage.api.md | 6 +-- packages/docs/api/link/CLink.api.md | 4 +- .../docs/api/list-group/CListGroup.api.md | 10 ++-- .../docs/api/list-group/CListGroupItem.api.md | 6 +-- packages/docs/api/modal/CModal.api.md | 4 +- packages/docs/api/nav/CNavGroup.api.md | 4 +- packages/docs/api/nav/CNavLink.api.md | 4 +- packages/docs/api/navbar/CNavbar.api.md | 2 +- packages/docs/api/offcanvas/COffcanvas.api.md | 2 +- .../api/pagination/CPaginationItem.api.md | 4 +- .../docs/api/placeholder/CPlaceholder.api.md | 2 +- packages/docs/api/popover/CPopover.api.md | 2 +- packages/docs/api/progress/CProgress.api.md | 4 +- .../docs/api/progress/CProgressBar.api.md | 4 +- packages/docs/api/sidebar/CSidebar.api.md | 8 +-- packages/docs/api/table/CTable.api.md | 22 ++++---- packages/docs/api/table/CTableBody.api.md | 2 +- packages/docs/api/table/CTableDataCell.api.md | 4 +- packages/docs/api/table/CTableFoot.api.md | 2 +- packages/docs/api/table/CTableHead.api.md | 2 +- .../docs/api/table/CTableHeaderCell.api.md | 2 +- packages/docs/api/table/CTableRow.api.md | 4 +- packages/docs/api/toast/CToast.api.md | 2 +- packages/docs/api/toast/CToastHeader.api.md | 2 +- packages/docs/api/tooltip/CTooltip.api.md | 2 +- .../docs/api/widgets/CWidgetStatsB.api.md | 2 +- .../docs/api/widgets/CWidgetStatsC.api.md | 2 +- .../docs/api/widgets/CWidgetStatsD.api.md | 2 +- .../docs/api/widgets/CWidgetStatsF.api.md | 2 +- 141 files changed, 365 insertions(+), 1005 deletions(-) diff --git a/packages/coreui-vue-chartjs/src/CChart.ts b/packages/coreui-vue-chartjs/src/CChart.ts index 225a19fe..387b2d42 100644 --- a/packages/coreui-vue-chartjs/src/CChart.ts +++ b/packages/coreui-vue-chartjs/src/CChart.ts @@ -29,7 +29,6 @@ const CChart = defineComponent({ customTooltips: { type: Boolean, default: true, - required: false, }, /** * The data object that is passed into the Chart.js chart (more info). @@ -46,15 +45,12 @@ const CChart = defineComponent({ height: { type: Number, default: 150, - required: false, }, /** * ID attribute applied to the rendered canvas. */ id: { type: String, - default: undefined, - required: false, }, /** * The options object that is passed into the Chart.js chart. @@ -63,8 +59,6 @@ const CChart = defineComponent({ */ options: { type: Object as PropType, - default: undefined, - required: false, }, /** * The plugins array that is passed into the Chart.js chart (more info) @@ -73,8 +67,6 @@ const CChart = defineComponent({ */ plugins: { type: Array as PropType, - default: undefined, - required: false, }, /** * If true, will tear down and redraw chart on all updates. @@ -88,7 +80,6 @@ const CChart = defineComponent({ type: { type: String as PropType, default: 'bar', - required: false, }, /** * Width attribute applied to the rendered canvas. @@ -98,7 +89,6 @@ const CChart = defineComponent({ width: { type: Number, default: 300, - required: false, }, /** * Put the chart into the wrapper div element. @@ -108,7 +98,6 @@ const CChart = defineComponent({ wrapper: { type: Boolean, default: true, - required: false, }, }, emits: [ diff --git a/packages/coreui-vue/src/components/accordion/CAccordion.ts b/packages/coreui-vue/src/components/accordion/CAccordion.ts index 2864a782..1422d40b 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordion.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordion.ts @@ -6,11 +6,7 @@ const CAccordion = defineComponent({ /** * The active item key. */ - activeItemKey: { - type: [Number, String], - default: undefined, - require: false, - }, + activeItemKey: [Number, String], /** * Make accordion items stay open when another item is opened */ diff --git a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts index 4aa020ac..1e749e71 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts @@ -6,16 +6,11 @@ const CAccordionItem = defineComponent({ /** * The item key. */ - itemKey: { - type: [Number, String], - default: undefined, - require: false, - }, + itemKey: [Number, String] }, setup(props, { slots }) { const activeItemKey = inject('activeItemKey') as Ref const alwaysOpen = inject('alwaysOpen') as boolean - // eslint-disable-next-line no-unused-vars const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void const itemKey = ref(props.itemKey ? props.itemKey : Math.random().toString(36).substr(2, 9)) diff --git a/packages/coreui-vue/src/components/alert/CAlert.ts b/packages/coreui-vue/src/components/alert/CAlert.ts index 36398262..cfc61ab9 100644 --- a/packages/coreui-vue/src/components/alert/CAlert.ts +++ b/packages/coreui-vue/src/components/alert/CAlert.ts @@ -15,11 +15,7 @@ export const CAlert = defineComponent({ /** * Optionally add a close button to alert and allow it to self dismisss. */ - dismissible: { - type: Boolean, - default: false, - required: false, - }, + dismissible: Boolean, /** * Set the alert variant to a solid. * @@ -27,8 +23,6 @@ export const CAlert = defineComponent({ */ variant: { type: String, - default: undefined, - required: false, validator: (value: string) => { return value === 'solid' }, @@ -39,7 +33,6 @@ export const CAlert = defineComponent({ visible: { type: Boolean, default: true, - required: false, }, }, emits: [ diff --git a/packages/coreui-vue/src/components/alert/CAlertHeading.ts b/packages/coreui-vue/src/components/alert/CAlertHeading.ts index dbae5e6e..fbf38c69 100644 --- a/packages/coreui-vue/src/components/alert/CAlertHeading.ts +++ b/packages/coreui-vue/src/components/alert/CAlertHeading.ts @@ -9,7 +9,6 @@ export const CAlertHeading = defineComponent({ component: { type: String, default: 'h4', - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/avatar/CAvatar.ts b/packages/coreui-vue/src/components/avatar/CAvatar.ts index c424f40d..c3a5eb86 100644 --- a/packages/coreui-vue/src/components/avatar/CAvatar.ts +++ b/packages/coreui-vue/src/components/avatar/CAvatar.ts @@ -23,8 +23,6 @@ const CAvatar = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'md', 'lg', 'xl'].includes(value) }, @@ -32,11 +30,7 @@ const CAvatar = defineComponent({ /** * The src attribute for the img element. */ - src: { - type: String, - default: undefined, - required: false, - }, + src: String, /** * Sets the color context of the status indicator to one of CoreUI’s themed colors. * @@ -44,8 +38,6 @@ const CAvatar = defineComponent({ */ status: { type: String, - default: undefined, - required: false, validator: (value: string) => { return [ 'primary', diff --git a/packages/coreui-vue/src/components/backdrop/CBackdrop.ts b/packages/coreui-vue/src/components/backdrop/CBackdrop.ts index 36cc4e11..8e6ce219 100644 --- a/packages/coreui-vue/src/components/backdrop/CBackdrop.ts +++ b/packages/coreui-vue/src/components/backdrop/CBackdrop.ts @@ -1,6 +1,6 @@ import { defineComponent, h, RendererElement, Transition } from 'vue' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const CBackdrop = defineComponent({ name: 'CBackdrop', @@ -11,7 +11,6 @@ const CBackdrop = defineComponent({ visible: { type: Boolean, default: false, - required: false, }, }, setup(props) { diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts index d6194e53..d619c120 100644 --- a/packages/coreui-vue/src/components/badge/CBadge.ts +++ b/packages/coreui-vue/src/components/badge/CBadge.ts @@ -16,7 +16,6 @@ const CBadge = defineComponent({ */ component: { type: String, - required: false, default: 'span', }, /** @@ -26,8 +25,6 @@ const CBadge = defineComponent({ */ position: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['top-start', 'top-end', 'bottom-end', 'bottom-start'].includes(value) }, @@ -45,8 +42,6 @@ const CBadge = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return value === 'sm' }, diff --git a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts index 3debd8bc..4b5fa4a6 100644 --- a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts +++ b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts @@ -6,18 +6,11 @@ const CBreadcrumbItem = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * The `href` attribute for the inner link component. */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/button-group/CButtonGroup.ts b/packages/coreui-vue/src/components/button-group/CButtonGroup.ts index 59650248..58add3d8 100644 --- a/packages/coreui-vue/src/components/button-group/CButtonGroup.ts +++ b/packages/coreui-vue/src/components/button-group/CButtonGroup.ts @@ -10,8 +10,6 @@ const CButtonGroup = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, @@ -19,10 +17,7 @@ const CButtonGroup = defineComponent({ /** * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. */ - vertical: { - type: Boolean, - required: false, - }, + vertical: Boolean, }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts index 7d9f95f8..11b9d7f3 100644 --- a/packages/coreui-vue/src/components/button/CButton.ts +++ b/packages/coreui-vue/src/components/button/CButton.ts @@ -7,11 +7,7 @@ export const CButton = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - default: false, - required: false, - }, + active: Boolean, /** * Sets the color context of the component to one of CoreUI’s themed colors. * @@ -24,23 +20,15 @@ export const CButton = defineComponent({ component: { type: String, default: 'button', - required: false, }, /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * The href attribute specifies the URL of the page the link goes to. */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, /** * Select the shape of the component. * @@ -54,8 +42,6 @@ export const CButton = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, @@ -69,7 +55,6 @@ export const CButton = defineComponent({ type: { type: String, default: 'button', - required: false, validator: (value: string) => { return ['button', 'submit', 'reset'].includes(value) }, @@ -81,8 +66,6 @@ export const CButton = defineComponent({ */ variant: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['ghost', 'outline'].includes(value) }, diff --git a/packages/coreui-vue/src/components/card/CCardHeader.ts b/packages/coreui-vue/src/components/card/CCardHeader.ts index a44c4f72..722ba187 100644 --- a/packages/coreui-vue/src/components/card/CCardHeader.ts +++ b/packages/coreui-vue/src/components/card/CCardHeader.ts @@ -8,7 +8,6 @@ const CCardHeader = defineComponent({ */ component: { type: String, - required: false, default: 'div', }, }, diff --git a/packages/coreui-vue/src/components/card/CCardImage.ts b/packages/coreui-vue/src/components/card/CCardImage.ts index d09d5e81..ee8695b9 100644 --- a/packages/coreui-vue/src/components/card/CCardImage.ts +++ b/packages/coreui-vue/src/components/card/CCardImage.ts @@ -8,7 +8,6 @@ const CCardImage = defineComponent({ */ component: { type: String, - required: false, default: 'img', }, /** @@ -18,8 +17,6 @@ const CCardImage = defineComponent({ */ orientation: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['top', 'bottom'].includes(value) }, diff --git a/packages/coreui-vue/src/components/card/CCardLink.ts b/packages/coreui-vue/src/components/card/CCardLink.ts index d42a94ea..b80d1865 100644 --- a/packages/coreui-vue/src/components/card/CCardLink.ts +++ b/packages/coreui-vue/src/components/card/CCardLink.ts @@ -10,7 +10,6 @@ const CCardLink = defineComponent({ href: { type: String, default: '#', - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/card/CCardSubtitle.ts b/packages/coreui-vue/src/components/card/CCardSubtitle.ts index 8f13c9d9..5a950776 100644 --- a/packages/coreui-vue/src/components/card/CCardSubtitle.ts +++ b/packages/coreui-vue/src/components/card/CCardSubtitle.ts @@ -8,7 +8,6 @@ const CCardSubtitle = defineComponent({ */ component: { type: String, - required: false, default: 'h6', }, }, diff --git a/packages/coreui-vue/src/components/card/CCardText.ts b/packages/coreui-vue/src/components/card/CCardText.ts index 290b0bb5..759ff7e8 100644 --- a/packages/coreui-vue/src/components/card/CCardText.ts +++ b/packages/coreui-vue/src/components/card/CCardText.ts @@ -8,7 +8,6 @@ const CCardText = defineComponent({ */ component: { type: String, - required: false, default: 'p', }, }, diff --git a/packages/coreui-vue/src/components/card/CCardTitle.ts b/packages/coreui-vue/src/components/card/CCardTitle.ts index 2e53873d..bc540e15 100644 --- a/packages/coreui-vue/src/components/card/CCardTitle.ts +++ b/packages/coreui-vue/src/components/card/CCardTitle.ts @@ -8,7 +8,6 @@ const CCardTitle = defineComponent({ */ component: { type: String, - required: false, default: 'h5', }, }, diff --git a/packages/coreui-vue/src/components/carousel/CCarousel.ts b/packages/coreui-vue/src/components/carousel/CCarousel.ts index 0bfb3988..10439586 100644 --- a/packages/coreui-vue/src/components/carousel/CCarousel.ts +++ b/packages/coreui-vue/src/components/carousel/CCarousel.ts @@ -10,7 +10,7 @@ import { watch, } from 'vue' -import { isInViewport } from './../../utils' +import { isInViewport } from '../../utils' const CCarousel = defineComponent({ name: 'CCarousel', @@ -29,7 +29,6 @@ const CCarousel = defineComponent({ index: { type: Number, default: 0, - required: false, }, /** * Adding indicators at the bottom of the carousel for each item. @@ -41,7 +40,6 @@ const CCarousel = defineComponent({ interval: { type: [Boolean, Number], default: 5000, - required: false, }, /** * If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. @@ -49,7 +47,6 @@ const CCarousel = defineComponent({ pause: { type: [Boolean, String], default: 'hover', - required: false, validator: (value: boolean | string) => { return typeof value === 'boolean' || value === 'hover' }, @@ -62,7 +59,6 @@ const CCarousel = defineComponent({ transition: { type: String, default: 'slide', - required: false, validator: (value: string) => { return ['crossfade', 'slide'].includes(value) }, @@ -73,7 +69,6 @@ const CCarousel = defineComponent({ wrap: { type: Boolean, default: true, - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/carousel/CCarouselItem.ts b/packages/coreui-vue/src/components/carousel/CCarouselItem.ts index d3611381..a83022f6 100644 --- a/packages/coreui-vue/src/components/carousel/CCarouselItem.ts +++ b/packages/coreui-vue/src/components/carousel/CCarouselItem.ts @@ -16,7 +16,6 @@ const CCarouselItem = defineComponent({ direction: { type: String, default: 'next', - required: false, }, /** * The amount of time to delay between automatically cycling an item. @@ -24,7 +23,6 @@ const CCarouselItem = defineComponent({ interval: { type: [Boolean, Number], default: false, - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/close-button/CCloseButton.ts b/packages/coreui-vue/src/components/close-button/CCloseButton.ts index c19ed9c0..6e329f9e 100644 --- a/packages/coreui-vue/src/components/close-button/CCloseButton.ts +++ b/packages/coreui-vue/src/components/close-button/CCloseButton.ts @@ -6,17 +6,11 @@ export const CCloseButton = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * Change the default color to white. */ - white: { - type: Boolean, - required: false, - }, + white: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/collapse/CCollapse.ts b/packages/coreui-vue/src/components/collapse/CCollapse.ts index 8014194a..c495f147 100644 --- a/packages/coreui-vue/src/components/collapse/CCollapse.ts +++ b/packages/coreui-vue/src/components/collapse/CCollapse.ts @@ -1,7 +1,7 @@ import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue' import { vVisible } from '../../directives/v-c-visible' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const CCollapse = defineComponent({ name: 'CCollapse', @@ -9,17 +9,11 @@ const CCollapse = defineComponent({ /** * Set horizontal collapsing to transition the width instead of height. */ - horizontal: { - type: Boolean, - required: false, - }, + horizontal: Boolean, /** * Toggle the visibility of component. */ - visible: { - type: Boolean, - required: false, - }, + visible: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index 6a9ec4c9..1691bdfd 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -11,8 +11,6 @@ const CDropdown = defineComponent({ */ alignment: { type: [String, Object], - default: undefined, - required: false, // eslint-disable-next-line @typescript-eslint/no-explicit-any validator: (value: string | any) => { if (value === 'start' || value === 'end') { @@ -57,10 +55,7 @@ const CDropdown = defineComponent({ /** * Sets a darker color scheme to match a dark navbar. */ - dark: { - type: Boolean, - required: false, - }, + dark: Boolean, /** * Sets a specified direction and location of the dropdown menu. * @@ -68,8 +63,6 @@ const CDropdown = defineComponent({ */ direction: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['center', 'dropup', 'dropup-center', 'dropend', 'dropstart'].includes(value) }, @@ -77,10 +70,7 @@ const CDropdown = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. * @@ -89,7 +79,6 @@ const CDropdown = defineComponent({ placement: { type: String as PropType, default: 'bottom-start', - required: false, }, /** * If you want to disable dynamic positioning set this property to `true`. @@ -97,14 +86,12 @@ const CDropdown = defineComponent({ popper: { type: Boolean, default: true, - required: false, }, /** * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. */ trigger: { type: [String, Array], - required: false, default: 'click', }, /** @@ -115,7 +102,6 @@ const CDropdown = defineComponent({ variant: { type: String, default: 'btn-group', - required: false, validator: (value: string) => { return ['btn-group', 'dropdown', 'input-group', 'nav-item'].includes(value) }, @@ -123,10 +109,7 @@ const CDropdown = defineComponent({ /** * Toggle the visibility of dropdown menu component. */ - visible: { - type: Boolean, - required: false, - }, + visible: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts b/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts index 10753cb4..0ee6018e 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts @@ -9,7 +9,6 @@ const CDropdownHeader = defineComponent({ component: { type: String, default: 'h6', - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts b/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts index 321c2a32..fdd01393 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts @@ -8,33 +8,22 @@ const CDropdownItem = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Component used for the root node. Either a string to use a HTML element or a component. */ component: { type: String, default: 'a', - required: false, }, /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * The href attribute specifies the URL of the page the link goes to. */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts index d6adf3cb..217a0792 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts @@ -11,7 +11,6 @@ const CDropdownMenu = defineComponent({ component: { type: String, default: 'div', - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index b5aae5d3..b13ec032 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -9,11 +9,7 @@ const CDropdownToggle = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - default: false, - required: false, - }, + active: Boolean, /** * Sets the color context of the component to one of CoreUI’s themed colors. * @@ -26,15 +22,13 @@ const CDropdownToggle = defineComponent({ caret: { type: Boolean, default: true, - required: false, }, /** * Component used for the root node. Either a string to use a HTML element or a component. */ component: { type: String, - default: 'button', - require: false, + default: 'button' }, /** * Create a custom toggler which accepts any content. @@ -43,10 +37,7 @@ const CDropdownToggle = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3' */ @@ -58,8 +49,6 @@ const CDropdownToggle = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, @@ -67,10 +56,7 @@ const CDropdownToggle = defineComponent({ /** * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. */ - split: { - type: Boolean, - required: false, - }, + split: Boolean, /** * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. * @@ -79,7 +65,6 @@ const CDropdownToggle = defineComponent({ trigger: { type: String as PropType, default: 'click', - required: false, }, /** * Set the button variant to an outlined button or a ghost button. @@ -88,8 +73,6 @@ const CDropdownToggle = defineComponent({ */ variant: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['ghost', 'outline'].includes(value) }, diff --git a/packages/coreui-vue/src/components/footer/CFooter.ts b/packages/coreui-vue/src/components/footer/CFooter.ts index 2c494dd3..81de0158 100644 --- a/packages/coreui-vue/src/components/footer/CFooter.ts +++ b/packages/coreui-vue/src/components/footer/CFooter.ts @@ -10,8 +10,6 @@ const CFooter = defineComponent({ */ position: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['fixed', 'sticky'].includes(value) }, diff --git a/packages/coreui-vue/src/components/form/CForm.ts b/packages/coreui-vue/src/components/form/CForm.ts index 6cd172b8..2747caa7 100644 --- a/packages/coreui-vue/src/components/form/CForm.ts +++ b/packages/coreui-vue/src/components/form/CForm.ts @@ -6,10 +6,7 @@ const CForm = defineComponent({ /** * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component. */ - validated: { - type: Boolean, - required: false, - }, + validated: Boolean, }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index ca952574..a5c57ce6 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -13,33 +13,25 @@ const CFormCheck = defineComponent({ * * @see http://coreui.io/vue/docs/components/button.html */ - button: { - type: Object, - }, + button: Object, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedback: { - type: String, - }, + feedback: String, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedbackInvalid: { - type: String, - }, + feedbackInvalid: String, /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - feedbackValid: { - type: String, - }, + feedbackValid: String, /** * Sets hit area to the full area of the component. */ @@ -53,9 +45,7 @@ const CFormCheck = defineComponent({ /** * The id global attribute defines an identifier (ID) that must be unique in the whole document. */ - id: { - type: String, - }, + id: String, /** * Input Checkbox indeterminate Property */ @@ -63,9 +53,7 @@ const CFormCheck = defineComponent({ /** * Group checkboxes or radios on the same horizontal row by adding. */ - inline: { - type: Boolean, - }, + inline: Boolean, /** * Set component validation state to invalid. */ @@ -73,9 +61,7 @@ const CFormCheck = defineComponent({ /** * The element represents a caption for a component. */ - label: { - type: String, - }, + label: String, /** * The default name for a value passed using v-model. */ @@ -107,9 +93,7 @@ const CFormCheck = defineComponent({ /** * Set component validation state to valid. */ - valid: { - type: Boolean, - }, + valid: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/form/CFormControlValidation.ts b/packages/coreui-vue/src/components/form/CFormControlValidation.ts index cdfabb70..e8723aa7 100644 --- a/packages/coreui-vue/src/components/form/CFormControlValidation.ts +++ b/packages/coreui-vue/src/components/form/CFormControlValidation.ts @@ -8,33 +8,25 @@ const CFormControlValidation = defineComponent({ /** * @ignore */ - describedby: { - type: String, - }, + describedby: String, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedback: { - type: String, - }, + feedback: String, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedbackInvalid: { - type: String, - }, + feedbackInvalid: String, /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - feedbackValid: { - type: String, - }, + feedbackValid: String, /** * Set component validation state to invalid. */ diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts index 8392ef4a..e4aee290 100644 --- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -14,31 +14,23 @@ const CFormControlWrapper = defineComponent({ * * @since 4.3.0 */ - floatingLabel: { - type: String, - }, + floatingLabel: String, /** * @ignore */ - id: { - type: String, - }, + id: String, /** * Add a caption for a component. * * @since 4.3.0 */ - label: { - type: String, - }, + label: String, /** * Add helper text to the component. * * @since 4.3.0 */ - text: { - type: String, - }, + text: String, }, setup(props, { slots }) { const formControlValidation = () => diff --git a/packages/coreui-vue/src/components/form/CFormFeedback.ts b/packages/coreui-vue/src/components/form/CFormFeedback.ts index b4fb0715..3a7d9a16 100644 --- a/packages/coreui-vue/src/components/form/CFormFeedback.ts +++ b/packages/coreui-vue/src/components/form/CFormFeedback.ts @@ -8,7 +8,6 @@ const CFormFeedback = defineComponent({ */ component: { type: String, - required: false, default: 'div', }, /** diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index aaffb2d9..b79e4b7f 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -9,10 +9,7 @@ const CFormInput = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, // Inherited Props from CFormControlWrapper /** @@ -20,39 +17,29 @@ const CFormInput = defineComponent({ * * @since 4.3.0 */ - feedback: { - type: String, - }, + feedback: String, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedbackInvalid: { - type: String, - }, + feedbackInvalid: String, /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - feedbackValid: { - type: String, - }, + feedbackValid: String, /** * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - floatingLabel: { - type: String, - }, + floatingLabel: String, /** * The id global attribute defines an identifier (ID) that must be unique in the whole document. */ - id: { - type: String, - }, + id: String, /** * Set component validation state to invalid. */ @@ -62,30 +49,19 @@ const CFormInput = defineComponent({ * * @since 4.3.0 */ - label: { - type: String, - }, + label: String, /** * The default name for a value passed using v-model. */ - modelValue: { - type: [File, Number, String], - default: undefined, - }, + modelValue: [File, Number, String], /** * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. */ - plainText: { - type: Boolean, - required: false, - }, + plainText: Boolean, /** * Toggle the readonly state for the component. */ - readonly: { - type: Boolean, - required: false, - }, + readonly: Boolean, /** * Size the component small or large. * @@ -102,9 +78,7 @@ const CFormInput = defineComponent({ * * @since 4.3.0 */ - text: { - type: String, - }, + text: String, /** * Display validation feedback in a styled tooltip. * diff --git a/packages/coreui-vue/src/components/form/CFormLabel.ts b/packages/coreui-vue/src/components/form/CFormLabel.ts index 2b768616..e0db72f4 100644 --- a/packages/coreui-vue/src/components/form/CFormLabel.ts +++ b/packages/coreui-vue/src/components/form/CFormLabel.ts @@ -6,11 +6,7 @@ const CFormLabel = defineComponent({ /** * A string of all className you want to be applied to the component, and override standard className value. */ - customClassName: { - type: [Array, String], - default: undefined, - required: false, - }, + customClassName: [Array, String], }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/form/CFormRange.ts b/packages/coreui-vue/src/components/form/CFormRange.ts index 9b03a624..fcefa832 100644 --- a/packages/coreui-vue/src/components/form/CFormRange.ts +++ b/packages/coreui-vue/src/components/form/CFormRange.ts @@ -7,61 +7,39 @@ const CFormRange = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - default: undefined, - }, + disabled: Boolean, /** * Add a caption for a component. * * @since 4.3.0 */ - label: { - type: String, - }, + label: String, /** * Specifies the maximum value for the component. */ - max: { - type: Number, - default: undefined, - }, + max: Number, /** * Specifies the minimum value for the component. */ - min: { - type: Number, - default: undefined, - }, + min: Number, /** * The default name for a value passed using v-model. */ - modelValue: { - type: String, - value: undefined, - }, + modelValue: String, /** * Toggle the readonly state for the component. */ - readonly: { - type: Boolean, - }, + readonly: Boolean, /** * Specifies the interval between legal numbers in the component. */ - steps: { - type: Number, - default: undefined, - }, + steps: Number, /** * The `value` attribute of component. * * @controllable onChange * */ - value: { - type: Number, - default: undefined, - }, + value: Number, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index a4fb4b70..e2fc5f66 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -16,47 +16,33 @@ const CFormSelect = defineComponent({ * * @since 4.3.0 */ - feedback: { - type: String, - }, + feedback: String, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedbackInvalid: { - type: String, - }, + feedbackInvalid: String, /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - feedbackValid: { - type: String, - }, + feedbackValid: String, /** * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - floatingLabel: { - type: String, - }, + floatingLabel: String, /** * Specifies the number of visible options in a drop-down list. */ - htmlSize: { - type: Number, - default: undefined, - required: false, - }, + htmlSize: Number, /** * The id global attribute defines an identifier (ID) that must be unique in the whole document. */ - id: { - type: String, - }, + id: String, /** * Set component validation state to invalid. */ @@ -66,32 +52,21 @@ const CFormSelect = defineComponent({ * * @since 4.3.0 */ - label: { - type: String, - }, + label: String, /** * The default name for a value passed using v-model. */ modelValue: { type: [String, Array] as PropType, - default: undefined, - require: false, - }, - multiple: { - type: Boolean, - required: false, }, + multiple: Boolean, /** * Options list of the select component. Available keys: `label`, `value`, `disabled`. * Examples: * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"` * - `:options="['js', 'html']"` */ - options: { - type: Array as PropType, - default: undefined, - required: false, - }, + options: Array as PropType, /** * Size the component small or large. * @@ -99,8 +74,6 @@ const CFormSelect = defineComponent({ */ size: { type: String, - default: undefined, - require: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, @@ -110,9 +83,7 @@ const CFormSelect = defineComponent({ * * @since 4.3.0 */ - text: { - type: String, - }, + text: String, /** * Display validation feedback in a styled tooltip. * diff --git a/packages/coreui-vue/src/components/form/CFormSwitch.ts b/packages/coreui-vue/src/components/form/CFormSwitch.ts index d188dc60..6265e87c 100644 --- a/packages/coreui-vue/src/components/form/CFormSwitch.ts +++ b/packages/coreui-vue/src/components/form/CFormSwitch.ts @@ -9,28 +9,19 @@ const CFormSwitch = defineComponent({ /** * The id global attribute defines an identifier (ID) that must be unique in the whole document */ - id: { - type: String, - }, + id: String, /** * Set component validation state to invalid. */ - invalid: { - type: Boolean, - }, + invalid: Boolean, /** * The element represents a caption for a component. */ - label: { - type: String, - }, + label: String, /** * The default name for a value passed using v-model. */ - modelValue: { - type: [Boolean, String], - value: undefined, - }, + modelValue: [Boolean, String], /** * Put checkboxes or radios on the opposite side. * @@ -60,9 +51,7 @@ const CFormSwitch = defineComponent({ /** * Set component validation state to valid. */ - valid: { - type: Boolean, - }, + valid: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/form/CFormText.ts b/packages/coreui-vue/src/components/form/CFormText.ts index dcde6e37..13b47ada 100644 --- a/packages/coreui-vue/src/components/form/CFormText.ts +++ b/packages/coreui-vue/src/components/form/CFormText.ts @@ -8,7 +8,6 @@ const CFormText = defineComponent({ */ component: { type: String, - required: false, default: 'div', }, }, diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index b852cd5b..21fb3596 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -7,47 +7,35 @@ const CFormTextarea = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - }, + disabled: Boolean, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedback: { - type: String, - }, + feedback: String, /** * Provide valuable, actionable feedback. * * @since 4.3.0 */ - feedbackInvalid: { - type: String, - }, + feedbackInvalid: String, /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - feedbackValid: { - type: String, - }, + feedbackValid: String, /** * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.3.0 */ - floatingLabel: { - type: String, - }, + floatingLabel: String, /** * The id global attribute defines an identifier (ID) that must be unique in the whole document. */ - id: { - type: String, - }, + id: String, /** * Set component validation state to invalid. */ @@ -57,36 +45,25 @@ const CFormTextarea = defineComponent({ * * @since 4.3.0 */ - label: { - type: String, - }, + label: String, /** * The default name for a value passed using v-model. */ - modelValue: { - type: String, - default: undefined, - }, + modelValue: String, /** * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. */ - plainText: { - type: Boolean, - }, + plainText: Boolean, /** * Toggle the readonly state for the component. */ - readonly: { - type: Boolean, - }, + readonly: Boolean, /** * Add helper text to the component. * * @since 4.3.0 */ - text: { - type: String, - }, + text: String, /** * Display validation feedback in a styled tooltip. * diff --git a/packages/coreui-vue/src/components/form/CInputGroup.ts b/packages/coreui-vue/src/components/form/CInputGroup.ts index 193dcbd7..56a8418c 100644 --- a/packages/coreui-vue/src/components/form/CInputGroup.ts +++ b/packages/coreui-vue/src/components/form/CInputGroup.ts @@ -10,8 +10,6 @@ const CInputGroup = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, diff --git a/packages/coreui-vue/src/components/form/CInputGroupText.ts b/packages/coreui-vue/src/components/form/CInputGroupText.ts index 107e722f..92717357 100644 --- a/packages/coreui-vue/src/components/form/CInputGroupText.ts +++ b/packages/coreui-vue/src/components/form/CInputGroupText.ts @@ -8,7 +8,6 @@ const CInputGroupText = defineComponent({ */ component: { type: String, - required: false, default: 'span', }, }, diff --git a/packages/coreui-vue/src/components/grid/CCol.ts b/packages/coreui-vue/src/components/grid/CCol.ts index b6f48080..8a532e92 100644 --- a/packages/coreui-vue/src/components/grid/CCol.ts +++ b/packages/coreui-vue/src/components/grid/CCol.ts @@ -29,8 +29,6 @@ const CCol = defineComponent({ */ xs: { type: [Boolean, Number, String, Object] as PropType, - default: undefined, - require: false, }, /** * The number of columns/offset/order on small devices (<768px). @@ -39,8 +37,6 @@ const CCol = defineComponent({ */ sm: { type: [Boolean, Number, String, Object] as PropType, - default: undefined, - require: false, }, /** * The number of columns/offset/order on medium devices (<992px). @@ -49,8 +45,6 @@ const CCol = defineComponent({ */ md: { type: [Boolean, Number, String, Object] as PropType, - default: undefined, - require: false, }, /** * The number of columns/offset/order on large devices (<1200px). @@ -59,8 +53,6 @@ const CCol = defineComponent({ */ lg: { type: [Boolean, Number, String, Object] as PropType, - default: undefined, - require: false, }, /** * The number of columns/offset/order on X-Large devices (<1400px). @@ -69,8 +61,6 @@ const CCol = defineComponent({ */ xl: { type: [Boolean, Number, String, Object] as PropType, - default: undefined, - require: false, }, /** * The number of columns/offset/order on XX-Large devices (≥1400px). @@ -79,8 +69,6 @@ const CCol = defineComponent({ */ xxl: { type: [Boolean, Number, String, Object] as PropType, - default: undefined, - require: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/grid/CContainer.ts b/packages/coreui-vue/src/components/grid/CContainer.ts index 6ca6e876..ad999eb7 100644 --- a/packages/coreui-vue/src/components/grid/CContainer.ts +++ b/packages/coreui-vue/src/components/grid/CContainer.ts @@ -15,45 +15,27 @@ const CContainer = defineComponent({ /** * Set container 100% wide until small breakpoint. */ - sm: { - type: Boolean, - required: false, - }, + sm: Boolean, /** * Set container 100% wide until medium breakpoint. */ - md: { - type: Boolean, - required: false, - }, + md: Boolean, /** * Set container 100% wide until large breakpoint. */ - lg: { - type: Boolean, - required: false, - }, + lg: Boolean, /** * Set container 100% wide until X-large breakpoint. */ - xl: { - type: Boolean, - required: false, - }, + xl: Boolean, /** * Set container 100% wide until XX-large breakpoint. */ - xxl: { - type: Boolean, - required: false, - }, + xxl: Boolean, /** * Set container 100% wide, spanning the entire width of the viewport. */ - fluid: { - type: Boolean, - required: false, - }, + fluid: Boolean, }, setup(props, { slots }) { const repsonsiveClassNames: string[] = [] diff --git a/packages/coreui-vue/src/components/grid/CRow.ts b/packages/coreui-vue/src/components/grid/CRow.ts index e17a4cd0..4501cffd 100644 --- a/packages/coreui-vue/src/components/grid/CRow.ts +++ b/packages/coreui-vue/src/components/grid/CRow.ts @@ -24,61 +24,37 @@ const CRow = defineComponent({ * * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } */ - xs: { - type: Object as () => BPObject, - default: undefined, - required: false, - }, + xs: Object as () => BPObject, /** * The number of columns/offset/order on small devices (<768px). * * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } */ - sm: { - type: Object as () => BPObject, - default: undefined, - required: false, - /** - * The number of columns/offset/order on medium devices (<992px). - * - * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } - */ - }, - md: { - type: Object as () => BPObject, - default: undefined, - required: false, - }, + sm: Object as () => BPObject, + /** + * The number of columns/offset/order on medium devices (<992px). + * + * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } + */ + md: Object as () => BPObject, /** * The number of columns/offset/order on large devices (<1200px). * * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } */ - lg: { - type: Object as () => BPObject, - default: undefined, - required: false, - }, + lg: Object as () => BPObject, /** * The number of columns/offset/order on X-Large devices (<1400px). * * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } */ - xl: { - type: Object as () => BPObject, - default: undefined, - required: false, - }, + xl: Object as () => BPObject, /** * The number of columns/offset/order on XX-Large devices (≥1400px). * * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string } */ - xxl: { - type: Object as () => BPObject, - default: undefined, - required: false, - }, + xxl: Object as () => BPObject, }, setup(props, { slots }) { const repsonsiveClassNames: string[] = [] diff --git a/packages/coreui-vue/src/components/header/CHeader.ts b/packages/coreui-vue/src/components/header/CHeader.ts index 76e2a03c..777a203a 100644 --- a/packages/coreui-vue/src/components/header/CHeader.ts +++ b/packages/coreui-vue/src/components/header/CHeader.ts @@ -10,8 +10,6 @@ const CHeader = defineComponent({ */ container: { type: [Boolean, String], - default: undefined, - required: false, validator: (value: boolean | string) => { return ( typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value) @@ -25,8 +23,6 @@ const CHeader = defineComponent({ */ position: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['fixed', 'sticky'].includes(value) }, diff --git a/packages/coreui-vue/src/components/header/CHeaderBrand.ts b/packages/coreui-vue/src/components/header/CHeaderBrand.ts index a1a6d96c..97ee9581 100644 --- a/packages/coreui-vue/src/components/header/CHeaderBrand.ts +++ b/packages/coreui-vue/src/components/header/CHeaderBrand.ts @@ -8,7 +8,6 @@ const CHeaderBrand = defineComponent({ */ component: { type: String, - required: false, default: 'a', }, }, diff --git a/packages/coreui-vue/src/components/header/CHeaderNav.ts b/packages/coreui-vue/src/components/header/CHeaderNav.ts index 462ae5c9..1fa1e7c7 100644 --- a/packages/coreui-vue/src/components/header/CHeaderNav.ts +++ b/packages/coreui-vue/src/components/header/CHeaderNav.ts @@ -8,7 +8,6 @@ const CHeaderNav = defineComponent({ */ component: { type: String, - required: false, default: 'ul', }, }, diff --git a/packages/coreui-vue/src/components/image/CImage.ts b/packages/coreui-vue/src/components/image/CImage.ts index 7bae46c3..9d122ee3 100644 --- a/packages/coreui-vue/src/components/image/CImage.ts +++ b/packages/coreui-vue/src/components/image/CImage.ts @@ -10,8 +10,6 @@ const CImage = defineComponent({ */ align: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['start', 'center', 'end'].includes(value) }, @@ -19,24 +17,15 @@ const CImage = defineComponent({ /** * Make image responsive. */ - fluid: { - type: Boolean, - required: false, - }, + fluid: Boolean, /** * Make image rounded. */ - rounded: { - type: Boolean, - required: false, - }, + rounded: Boolean, /** * Give an image a rounded 1px border appearance. */ - thumbnail: { - type: Boolean, - required: false, - }, + thumbnail: Boolean, }, setup(props) { return () => diff --git a/packages/coreui-vue/src/components/link/CLink.ts b/packages/coreui-vue/src/components/link/CLink.ts index 7b124e59..63766e56 100644 --- a/packages/coreui-vue/src/components/link/CLink.ts +++ b/packages/coreui-vue/src/components/link/CLink.ts @@ -6,33 +6,22 @@ const CLink = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Component used for the root node. Either a string to use a HTML element or a component. */ component: { type: String, - required: false, default: 'a', }, /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * The href attribute specifies the URL of the page the link goes to. */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/list-group/CListGroup.ts b/packages/coreui-vue/src/components/list-group/CListGroup.ts index 0fbf71de..57003be4 100644 --- a/packages/coreui-vue/src/components/list-group/CListGroup.ts +++ b/packages/coreui-vue/src/components/list-group/CListGroup.ts @@ -8,16 +8,12 @@ const CListGroup = defineComponent({ */ component: { type: String, - required: false, default: 'ul', }, /** * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``) */ - flush: { - type: Boolean, - required: false, - }, + flush: Boolean, /** * Specify a layout type. * @@ -25,8 +21,6 @@ const CListGroup = defineComponent({ */ layout: { type: String, - default: undefined, - required: false, validator: (value: string) => { return [ 'horizontal', diff --git a/packages/coreui-vue/src/components/list-group/CListGroupItem.ts b/packages/coreui-vue/src/components/list-group/CListGroupItem.ts index c301206f..5b4fde03 100644 --- a/packages/coreui-vue/src/components/list-group/CListGroupItem.ts +++ b/packages/coreui-vue/src/components/list-group/CListGroupItem.ts @@ -8,10 +8,7 @@ const CListGroupItem = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Sets the color context of the component to one of CoreUI’s themed colors. * @@ -21,16 +18,12 @@ const CListGroupItem = defineComponent({ /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * Component used for the root node. Either a string to use a HTML element or a component. */ component: { type: String, - required: false, default: 'li', }, }, diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts index 90ccf5df..854ca450 100644 --- a/packages/coreui-vue/src/components/modal/CModal.ts +++ b/packages/coreui-vue/src/components/modal/CModal.ts @@ -12,7 +12,7 @@ import { import { CBackdrop } from './../backdrop/CBackdrop' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const CModal = defineComponent({ name: 'CModal', @@ -50,10 +50,7 @@ const CModal = defineComponent({ /** * A string of all className you want applied to the modal content component. */ - contentClassName: { - type: String, - default: undefined, - }, + contentClassName: String, /** * Set modal to covers the entire user viewport * @@ -61,7 +58,6 @@ const CModal = defineComponent({ */ fullscreen: { type: [Boolean, String], - default: undefined, validator: (value: boolean | string) => { if (typeof value == 'string') { return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value) @@ -82,9 +78,7 @@ const CModal = defineComponent({ /** * Create a scrollable modal that allows scrolling the modal body. */ - scrollable: { - type: Boolean, - }, + scrollable: Boolean, /** * Size the component small, large, or extra large. * @@ -92,7 +86,6 @@ const CModal = defineComponent({ */ size: { type: String, - default: undefined, validator: (value: string) => { return ['sm', 'lg', 'xl'].includes(value) }, diff --git a/packages/coreui-vue/src/components/modal/CModalHeader.ts b/packages/coreui-vue/src/components/modal/CModalHeader.ts index 93481575..108a8ff2 100644 --- a/packages/coreui-vue/src/components/modal/CModalHeader.ts +++ b/packages/coreui-vue/src/components/modal/CModalHeader.ts @@ -10,7 +10,6 @@ const CModalHeader = defineComponent({ */ closeButton: { type: Boolean, - required: false, default: true, }, }, diff --git a/packages/coreui-vue/src/components/modal/CModalTitle.ts b/packages/coreui-vue/src/components/modal/CModalTitle.ts index e31e9635..ea970c09 100644 --- a/packages/coreui-vue/src/components/modal/CModalTitle.ts +++ b/packages/coreui-vue/src/components/modal/CModalTitle.ts @@ -9,7 +9,6 @@ const CModalTitle = defineComponent({ component: { type: String, default: 'h5', - required: false, }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/nav/CNav.ts b/packages/coreui-vue/src/components/nav/CNav.ts index 93d0d39e..add7ef70 100644 --- a/packages/coreui-vue/src/components/nav/CNav.ts +++ b/packages/coreui-vue/src/components/nav/CNav.ts @@ -8,7 +8,6 @@ const CNav = defineComponent({ */ component: { type: String, - required: false, default: 'ul', }, /** @@ -18,8 +17,6 @@ const CNav = defineComponent({ */ layout: { type: String, - required: false, - default: undefined, validator: (value: string) => { return ['fill', 'justified'].includes(value) }, @@ -31,8 +28,6 @@ const CNav = defineComponent({ */ variant: { type: String, - required: false, - default: undefined, validator: (value: string) => { return ['tabs', 'pills'].includes(value) }, diff --git a/packages/coreui-vue/src/components/nav/CNavLink.ts b/packages/coreui-vue/src/components/nav/CNavLink.ts index 1700d5aa..db5c183d 100644 --- a/packages/coreui-vue/src/components/nav/CNavLink.ts +++ b/packages/coreui-vue/src/components/nav/CNavLink.ts @@ -8,33 +8,22 @@ const CNavLink = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Component used for the root node. Either a string to use a HTML element or a component. */ component: { type: String, - required: false, default: 'a', }, /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * @ignore */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/navbar/CNavbar.ts b/packages/coreui-vue/src/components/navbar/CNavbar.ts index 1bd032ec..33a4d4f0 100644 --- a/packages/coreui-vue/src/components/navbar/CNavbar.ts +++ b/packages/coreui-vue/src/components/navbar/CNavbar.ts @@ -18,8 +18,6 @@ const CNavbar = defineComponent({ */ colorScheme: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['dark', 'light'].includes(value) }, @@ -30,7 +28,6 @@ const CNavbar = defineComponent({ component: { type: String, default: 'nav', - required: false, }, /** * Defines optional container wrapping children elements. @@ -39,8 +36,6 @@ const CNavbar = defineComponent({ */ container: { type: [Boolean, String], - default: undefined, - required: false, validator: (value: boolean | string) => { return ( typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value) @@ -54,8 +49,6 @@ const CNavbar = defineComponent({ */ expand: { type: [Boolean, String], - default: undefined, - required: false, validator: (value: boolean | string) => { return typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value) }, @@ -67,8 +60,6 @@ const CNavbar = defineComponent({ */ placement: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['fixed-top', 'fixed-bottom', 'sticky-top'].includes(value) }, diff --git a/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts b/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts index 8e053e22..b7d63931 100644 --- a/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts +++ b/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts @@ -10,16 +10,11 @@ const CNavbarBrand = defineComponent({ component: { type: String, default: 'a', - required: false, }, /** * The href attribute specifies the URL of the page the link goes to. */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/navbar/CNavbarNav.ts b/packages/coreui-vue/src/components/navbar/CNavbarNav.ts index 96f707a4..7a36931f 100644 --- a/packages/coreui-vue/src/components/navbar/CNavbarNav.ts +++ b/packages/coreui-vue/src/components/navbar/CNavbarNav.ts @@ -8,7 +8,6 @@ const CNavbarNav = defineComponent({ */ component: { type: String, - required: false, default: 'ul', }, }, diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts index 7285df6e..dd0d0474 100644 --- a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts +++ b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts @@ -3,7 +3,7 @@ import { defineComponent, h, ref, RendererElement, Transition, watch, withDirect import { CBackdrop } from '../backdrop' import { vVisible } from '../../directives/v-c-visible' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const COffcanvas = defineComponent({ name: 'COffcanvas', @@ -40,7 +40,6 @@ const COffcanvas = defineComponent({ */ placement: { type: String, - default: undefined, require: true, validator: (value: string) => { return ['start', 'end', 'top', 'bottom'].includes(value) @@ -72,10 +71,14 @@ const COffcanvas = defineComponent({ type: Boolean, default: false, }, + /** * Toggle the visibility of offcanvas component. */ - visible: Boolean, + visible: { + type: Boolean, + default: false, + }, }, emits: [ /** @@ -98,12 +101,12 @@ const COffcanvas = defineComponent({ }, ) + watch(visible, () => { - if (visible.value) { - if (!props.scroll) { - document.body.style.overflow = 'hidden' - document.body.style.paddingRight = '0px' - } + if (visible.value && !props.scroll) { + document.body.style.overflow = 'hidden' + document.body.style.paddingRight = '0px' + return } diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts index 7003dc6a..0ea9f496 100644 --- a/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts +++ b/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts @@ -8,7 +8,6 @@ const COffcanvasTitle = defineComponent({ */ component: { type: String, - required: false, default: 'h5', }, }, diff --git a/packages/coreui-vue/src/components/pagination/CPagination.ts b/packages/coreui-vue/src/components/pagination/CPagination.ts index 76ad5e36..9f0bc7c4 100644 --- a/packages/coreui-vue/src/components/pagination/CPagination.ts +++ b/packages/coreui-vue/src/components/pagination/CPagination.ts @@ -10,8 +10,6 @@ const CPagination = defineComponent({ */ align: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['start', 'center', 'end'].includes(value) }, @@ -23,8 +21,6 @@ const CPagination = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, diff --git a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts index d2242c96..3695ba1c 100644 --- a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts +++ b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts @@ -8,33 +8,19 @@ const CPaginationItem = defineComponent({ /** * Toggle the active state for the component. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Component used for the root node. Either a string to use a HTML element or a component. */ - component: { - type: String, - default: undefined, - required: false, - }, + component: String, /** * Toggle the disabled state for the component. */ - disabled: { - type: Boolean, - required: false, - }, + disabled: Boolean, /** * The href attribute specifies the URL of the page the link goes to. */ - href: { - type: String, - default: undefined, - required: false, - }, + href: String, }, setup(props, { slots }) { return () => { diff --git a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts index 07098013..12d37edc 100644 --- a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts +++ b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts @@ -21,8 +21,6 @@ export const CPlaceholder = defineComponent({ */ animation: { type: String, - default: undefined, - require: false, validator: (value: string) => { return ['glow', 'wave'].includes(value) }, @@ -39,7 +37,6 @@ export const CPlaceholder = defineComponent({ component: { type: String, default: 'span', - required: false, }, /** * Size the component extra small, small, or large. @@ -48,8 +45,6 @@ export const CPlaceholder = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['xs', 'sm', 'lg'].includes(value) }, @@ -57,51 +52,27 @@ export const CPlaceholder = defineComponent({ /** * The number of columns on extra small devices (<576px). */ - xs: { - type: Number, - default: undefined, - require: false, - }, + xs: Number, /** * The number of columns on small devices (<768px). */ - sm: { - type: Number, - default: undefined, - require: false, - }, + sm: Number, /** * The number of columns on medium devices (<992px). */ - md: { - type: Number, - default: undefined, - require: false, - }, + md: Number, /** * The number of columns on large devices (<1200px). */ - lg: { - type: Number, - default: undefined, - require: false, - }, + lg: Number, /** * The number of columns on X-Large devices (<1400px). */ - xl: { - type: Number, - default: undefined, - require: false, - }, + xl: Number, /** * The number of columns on XX-Large devices (≥1400px). */ - xxl: { - type: Number, - default: undefined, - require: false, - }, + xxl: Number, }, setup(props, { slots }) { const repsonsiveClassNames: string[] = [] diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 5abd76d2..2201fe56 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -1,7 +1,7 @@ import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue' import { createPopper, Placement } from '@popperjs/core' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const CPopover = defineComponent({ name: 'CPopover', @@ -9,18 +9,13 @@ const CPopover = defineComponent({ /** * Content for your component. If you want to pass non-string value please use dedicated slot `` */ - content: { - type: String, - default: undefined, - required: false, - }, + content: String, /** * Offset of the popover relative to its target. */ offset: { type: Array, default: () => [0, 8], - required: false, }, /** * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. @@ -28,7 +23,6 @@ const CPopover = defineComponent({ placement: { type: String as PropType, default: 'top', - required: false, validator: (value: string) => { return ['top', 'right', 'bottom', 'left'].includes(value) }, @@ -36,11 +30,7 @@ const CPopover = defineComponent({ /** * Title for your component. If you want to pass non-string value please use dedicated slot `` */ - title: { - type: String, - default: undefined, - required: false, - }, + title: String, /** * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. * @@ -49,7 +39,6 @@ const CPopover = defineComponent({ trigger: { type: [String, Array] as PropType, default: 'click', - required: false, validator: (value: string | string[]) => { if (typeof value === 'string') { return ['click', 'focus', 'hover'].includes(value) diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts index 3063be07..66a9c84f 100644 --- a/packages/coreui-vue/src/components/progress/CProgress.ts +++ b/packages/coreui-vue/src/components/progress/CProgress.ts @@ -8,11 +8,7 @@ const CProgress = defineComponent({ /** * Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. */ - height: { - type: Number, - default: undefined, - required: false, - }, + height: Number, /** * Makes progress bar thinner. */ diff --git a/packages/coreui-vue/src/components/progress/CProgressBar.ts b/packages/coreui-vue/src/components/progress/CProgressBar.ts index 1da80822..f825d79a 100644 --- a/packages/coreui-vue/src/components/progress/CProgressBar.ts +++ b/packages/coreui-vue/src/components/progress/CProgressBar.ts @@ -8,10 +8,7 @@ const CProgressBar = defineComponent({ /** * Use to animate the stripes right to left via CSS3 animations. */ - animated: { - type: Boolean, - required: false, - }, + animated: Boolean, /** * Sets the color context of the component to one of CoreUI’s themed colors. * @@ -23,7 +20,6 @@ const CProgressBar = defineComponent({ */ value: { type: Number, - required: false, default: 0, }, /** @@ -33,8 +29,6 @@ const CProgressBar = defineComponent({ */ variant: { type: String, - default: undefined, - require: false, validator: (value: string) => { return value === 'striped' }, diff --git a/packages/coreui-vue/src/components/sidebar/CSidebar.ts b/packages/coreui-vue/src/components/sidebar/CSidebar.ts index 9f2ad49a..e9122cb7 100644 --- a/packages/coreui-vue/src/components/sidebar/CSidebar.ts +++ b/packages/coreui-vue/src/components/sidebar/CSidebar.ts @@ -1,7 +1,7 @@ import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { CBackdrop } from '../backdrop' -import { isInViewport } from './../../utils' +import { isInViewport } from '../../utils' const isOnMobile = (element: HTMLDivElement) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile')) @@ -12,23 +12,16 @@ const CSidebar = defineComponent({ /** * Make sidebar narrow. */ - narrow: { - type: Boolean, - required: false, - }, + narrow: Boolean, /** * Set sidebar to overlaid variant. */ - overlaid: { - type: Boolean, - required: false, - }, + overlaid: Boolean, /** * Place sidebar in non-static positions. */ position: { type: String, - default: undefined, validator: (value: string) => { return ['fixed'].includes(value) }, @@ -38,7 +31,6 @@ const CSidebar = defineComponent({ */ size: { type: String, - default: undefined, validator: (value: string) => { return ['sm', 'lg', 'xl'].includes(value) }, diff --git a/packages/coreui-vue/src/components/spinner/CSpinner.ts b/packages/coreui-vue/src/components/spinner/CSpinner.ts index a0e92579..02b0ad45 100644 --- a/packages/coreui-vue/src/components/spinner/CSpinner.ts +++ b/packages/coreui-vue/src/components/spinner/CSpinner.ts @@ -10,8 +10,6 @@ const CSpinner = defineComponent({ */ color: { type: String, - default: undefined, - required: false, validator: (value: string) => { return [ 'primary', @@ -31,7 +29,6 @@ const CSpinner = defineComponent({ component: { type: String, default: 'div', - required: false, }, /** * Size the component small. @@ -40,8 +37,6 @@ const CSpinner = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return value === 'sm' }, @@ -54,7 +49,6 @@ const CSpinner = defineComponent({ variant: { type: String, default: 'border', - required: false, validator: (value: string) => { return ['border', 'grow'].includes(value) }, @@ -65,7 +59,6 @@ const CSpinner = defineComponent({ visuallyHiddenLabel: { type: String, default: 'Loading...', - required: false, }, }, setup(props) { diff --git a/packages/coreui-vue/src/components/table/CTable.ts b/packages/coreui-vue/src/components/table/CTable.ts index ec991aa9..56111fa9 100644 --- a/packages/coreui-vue/src/components/table/CTable.ts +++ b/packages/coreui-vue/src/components/table/CTable.ts @@ -57,8 +57,6 @@ const CTable = defineComponent({ */ align: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['bottom', 'middle', 'top'].includes(value) }, @@ -72,37 +70,23 @@ const CTable = defineComponent({ /** * Add borders on all sides of the table and cells. */ - bordered: { - type: Boolean, - required: false, - }, + bordered: Boolean, /** * Remove borders on all sides of the table and cells. */ - borderless: { - type: Boolean, - required: false, - }, + borderless: Boolean, /** * Put the `` on the top of the table. * * @values 'top' | string */ - caption: { - type: String, - default: undefined, - required: false, - }, + caption: String, /** * Set the text of the table caption and the caption on the top of the table. * * @since 4.5.0 */ - captionTop: { - type: String, - default: undefined, - required: false, - }, + captionTop: String, /** * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props') * @@ -118,7 +102,6 @@ const CTable = defineComponent({ */ columns: { type: Array as PropType<(Column | string)[]>, - required: false, }, /** * Sets the color context of the component to one of CoreUI’s themed colors. @@ -138,15 +121,11 @@ const CTable = defineComponent({ */ footer: { type: Array as PropType<(FooterItem | string)[]>, - required: false, }, /** * Enable a hover state on table rows within a ``. */ - hover: { - type: Boolean, - required: false, - }, + hover: Boolean, /** * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. * @@ -157,12 +136,9 @@ const CTable = defineComponent({ */ items: { type: Array as PropType, - required: false, }, responsive: { type: [Boolean, String], - default: undefined, - required: false, validator: (value: boolean | string) => { if (typeof value == 'string') { return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value) @@ -176,26 +152,17 @@ const CTable = defineComponent({ /** * Make table more compact by cutting all cell `padding` in half. */ - small: { - type: Boolean, - required: false, - }, + small: Boolean, /** * Add zebra-striping to any table row within the ``. */ - striped: { - type: Boolean, - required: false, - }, + striped: Boolean, /** * Add zebra-striping to any table column. * * @since 4.4.0 */ - stripedColumns: { - type: Boolean, - required: false, - }, + stripedColumns: Boolean, /** * Properties that will be passed to the table footer component. * @@ -204,8 +171,6 @@ const CTable = defineComponent({ */ tableFootProps: { type: Object, - default: undefined, - required: false, }, /** * Properties that will be passed to the table head component. @@ -215,8 +180,6 @@ const CTable = defineComponent({ */ tableHeadProps: { type: Object, - default: undefined, - required: false, }, }, setup(props, { slots, attrs }) { diff --git a/packages/coreui-vue/src/components/table/CTableDataCell.ts b/packages/coreui-vue/src/components/table/CTableDataCell.ts index 02723090..5d5ea8dd 100644 --- a/packages/coreui-vue/src/components/table/CTableDataCell.ts +++ b/packages/coreui-vue/src/components/table/CTableDataCell.ts @@ -8,10 +8,7 @@ const CTableDataCell = defineComponent({ /** * Highlight a table row or cell. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Set the vertical aligment. * @@ -19,8 +16,6 @@ const CTableDataCell = defineComponent({ */ align: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['bottom', 'middle', 'top'].includes(value) }, @@ -34,10 +29,7 @@ const CTableDataCell = defineComponent({ /** * @ignore */ - scope: { - type: String, - required: false, - }, + scope: String, }, setup(props, { slots }) { return () => diff --git a/packages/coreui-vue/src/components/table/CTableRow.ts b/packages/coreui-vue/src/components/table/CTableRow.ts index bf21efa1..f3f2a518 100644 --- a/packages/coreui-vue/src/components/table/CTableRow.ts +++ b/packages/coreui-vue/src/components/table/CTableRow.ts @@ -8,10 +8,7 @@ const CTableRow = defineComponent({ /** * Highlight a table row or cell.. */ - active: { - type: Boolean, - required: false, - }, + active: Boolean, /** * Set the vertical aligment. * @@ -19,8 +16,6 @@ const CTableRow = defineComponent({ */ align: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['bottom', 'middle', 'top'].includes(value) }, diff --git a/packages/coreui-vue/src/components/tabs/CTabPane.ts b/packages/coreui-vue/src/components/tabs/CTabPane.ts index 0540cdf3..9ff0050f 100644 --- a/packages/coreui-vue/src/components/tabs/CTabPane.ts +++ b/packages/coreui-vue/src/components/tabs/CTabPane.ts @@ -1,6 +1,6 @@ import { defineComponent, h, ref, RendererElement, Transition, vShow, withDirectives } from 'vue' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const CTabPane = defineComponent({ name: 'CTabPane', @@ -11,7 +11,6 @@ const CTabPane = defineComponent({ visible: { type: Boolean, default: false, - required: false, }, }, emits: [ diff --git a/packages/coreui-vue/src/components/toast/CToast.ts b/packages/coreui-vue/src/components/toast/CToast.ts index 76d4ecab..b34cf0a7 100644 --- a/packages/coreui-vue/src/components/toast/CToast.ts +++ b/packages/coreui-vue/src/components/toast/CToast.ts @@ -1,6 +1,6 @@ import { defineComponent, h, onMounted, provide, ref, RendererElement, Transition } from 'vue' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' import { Color } from '../props' @@ -13,7 +13,6 @@ const CToast = defineComponent({ autohide: { type: Boolean, default: true, - required: false, }, /** * Sets the color context of the component to one of CoreUI’s themed colors. @@ -27,7 +26,6 @@ const CToast = defineComponent({ delay: { type: Number, default: 5000, - required: false, }, /** * Optionally add a close button to component and allow it to self dismiss. @@ -35,31 +33,21 @@ const CToast = defineComponent({ dismissible: { type: Boolean, default: true, - required: false, }, /** * index of the component. */ - index: { - type: Number, - default: undefined, - required: false, - }, + index: Number, /** * Title node for your component. */ - title: { - type: String, - default: undefined, - required: false, - }, + title: String, /** * Toggle the visibility of component. */ visible: { type: Boolean, default: true, - required: false, }, }, emits: [ diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index 18e23511..f0aedd8d 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -7,11 +7,7 @@ const CToastClose = defineComponent({ /** * Component used for the root node. Either a string to use a HTML element or a component. */ - component: { - type: String, - default: undefined, - required: false, - }, + component: String, ...CCloseButton.props, }, emits: [ diff --git a/packages/coreui-vue/src/components/toast/CToastHeader.ts b/packages/coreui-vue/src/components/toast/CToastHeader.ts index add0d909..74fbc651 100644 --- a/packages/coreui-vue/src/components/toast/CToastHeader.ts +++ b/packages/coreui-vue/src/components/toast/CToastHeader.ts @@ -7,10 +7,7 @@ const CToastHeader = defineComponent({ /** * Automatically add a close button to the header. */ - closeButton: { - type: Boolean, - require: false, - }, + closeButton: Boolean, }, emits: [ /** diff --git a/packages/coreui-vue/src/components/toast/CToaster.ts b/packages/coreui-vue/src/components/toast/CToaster.ts index 7e4db4a8..6e5b8381 100644 --- a/packages/coreui-vue/src/components/toast/CToaster.ts +++ b/packages/coreui-vue/src/components/toast/CToaster.ts @@ -10,8 +10,6 @@ const CToaster = defineComponent({ */ placement: { type: String, - default: undefined, - require: false, validator: (value: string) => { return [ 'top-start', diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 2d02d3fa..801bdfd7 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -1,7 +1,7 @@ import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue' import { createPopper, Placement } from '@popperjs/core' -import { executeAfterTransition } from './../../utils/transition' +import { executeAfterTransition } from '../../utils/transition' const CTooltip = defineComponent({ name: 'CTooltip', @@ -9,18 +9,13 @@ const CTooltip = defineComponent({ /** * Content for your component. If you want to pass non-string value please use dedicated slot `` */ - content: { - type: String, - default: undefined, - required: false, - }, + content: String, /** * Offset of the tooltip relative to its target. */ offset: { type: Array, default: () => [0, 0], - required: false, }, /** * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. @@ -28,7 +23,6 @@ const CTooltip = defineComponent({ placement: { type: String as PropType, default: 'top', - required: false, validator: (value: string) => { return ['top', 'right', 'bottom', 'left'].includes(value) }, @@ -41,7 +35,6 @@ const CTooltip = defineComponent({ trigger: { type: [String, Array] as PropType, default: 'hover', - required: false, validator: (value: string | string[]) => { if (typeof value === 'string') { return ['click', 'focus', 'hover'].includes(value) diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts index 24633fab..d534deb8 100644 --- a/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts +++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts @@ -5,26 +5,17 @@ import { CCard, CCardBody } from '../card' const CWidgetStatsA = defineComponent({ name: 'CWidgetStatsA', props: { - color: { - type: String, - default: undefined, - require: false, - }, + color: String, /** * Title for your component. If you want to pass non-string value please use dedicated slot `` */ - title: { - type: String, - default: undefined, - require: false, - }, + title: String, /** * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `` */ value: { type: [Number, String], - default: 0, - require: false, + default: 0 }, }, /** diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts index 870525a7..27078a3b 100644 --- a/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts +++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts @@ -17,11 +17,7 @@ const CWidgetStatsB = defineComponent({ /** * Colors have been inverted from their default dark shade. */ - inverse: { - type: Boolean, - default: undefined, - require: false, - }, + inverse: Boolean, progress: shape({ /** * Sets the color context of the progress bar to one of CoreUI’s themed colors @@ -40,26 +36,17 @@ const CWidgetStatsB = defineComponent({ /** * Helper text for your component. If you want to pass non-string value please use dedicated slot `` */ - text: { - type: String, - default: undefined, - require: false, - }, + text: String, /** * Title for your component. If you want to pass non-string value please use dedicated slot `` */ - title: { - type: String, - default: undefined, - require: false, - }, + title: String, /** * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `` */ value: { type: [Number, String], - default: 0, - require: false, + default: 0 }, }, setup(props, { slots }) { diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts index 88e0bb7a..84c8eefb 100644 --- a/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts +++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts @@ -17,11 +17,7 @@ const CWidgetStatsC = defineComponent({ /** * Colors have been inverted from their default dark shade. */ - inverse: { - type: Boolean, - default: undefined, - require: false, - }, + inverse: Boolean, progress: shape({ /** * Sets the color context of the progress bar to one of CoreUI’s themed colors @@ -40,18 +36,13 @@ const CWidgetStatsC = defineComponent({ /** * Title for your component. If you want to pass non-string value please use dedicated slot `` */ - title: { - type: String, - default: undefined, - require: false, - }, + title: String, /** * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `` */ value: { type: [Number, String], - default: 0, - require: false, + default: 0 }, }, /** diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts index ca78d430..46b07913 100644 --- a/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts +++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts @@ -23,8 +23,7 @@ const CWidgetStatsD = defineComponent({ */ values: { type: Array as PropType, - default: () => [], - require: false, + default: () => [] }, }, /** diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts index 6c02a903..16efe09b 100644 --- a/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts +++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts @@ -8,18 +8,13 @@ const CWidgetStatsE = defineComponent({ /** * Title for your component. If you want to pass non-string value please use dedicated slot `` */ - title: { - type: String, - default: undefined, - require: false, - }, + title: String, /** * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `` */ value: { type: [Number, String], - default: 0, - require: false, + default: 0 }, }, /** diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts index 8dbe9483..3281ed98 100644 --- a/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts +++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts @@ -22,26 +22,17 @@ const CWidgetStatsF = defineComponent({ /** * Title for your component. If you want to pass non-string value please use dedicated slot `` */ - title: { - type: String, - default: undefined, - require: false, - }, + title: String, /** * Helper text for your component. If you want to pass non-string value please use dedicated slot `` */ - text: { - type: String, - default: undefined, - require: false, - }, + text: String, /** * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `` */ value: { type: [Number, String], - default: 0, - require: false, + default: 0 }, }, /** diff --git a/packages/docs/api/CChart.api.md b/packages/docs/api/CChart.api.md index 16ba9a3e..22ddea1a 100644 --- a/packages/docs/api/CChart.api.md +++ b/packages/docs/api/CChart.api.md @@ -11,12 +11,12 @@ import CChart from '@coreui/vue-chartjs/src/CChart' | Prop name | Description | Type | Values | Default | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------ | ------- | | **custom-tooltips** | Enables custom html based tooltips instead of standard tooltips.
            `@default` true | boolean | - | true | -| **data** | The data object that is passed into the Chart.js chart (more info). | ChartData \| ((canvas: HTMLCanvasElement) => ChartData) | - | | +| **data** | The data object that is passed into the Chart.js chart (more info). | ChartData \| ((canvas: HTMLCanvasElement) => ChartData) | - | - | | **height** | Height attribute applied to the rendered canvas.
            `@default` 150 | number | - | 150 | | **id** | ID attribute applied to the rendered canvas. | string | - | - | | **options** | The options object that is passed into the Chart.js chart.

            {@link https://www.chartjs.org/docs/latest/general/options.html More Info} | ChartOptions | - | - | | **plugins** | The plugins array that is passed into the Chart.js chart (more info)

            {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | Plugin[] | - | - | -| **redraw** | If true, will tear down and redraw chart on all updates. | boolean | - | | +| **redraw** | If true, will tear down and redraw chart on all updates. | boolean | - | - | | **type** | Chart.js chart type.
            `@type` 'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter' | ChartType | - | 'bar' | | **width** | Width attribute applied to the rendered canvas.
            `@default` 300 | number | - | 300 | | **wrapper** | Put the chart into the wrapper div element.
            `@default` true | boolean | - | true | diff --git a/packages/docs/api/accordion/CAccordion.api.md b/packages/docs/api/accordion/CAccordion.api.md index 59d52bfa..4c30183a 100644 --- a/packages/docs/api/accordion/CAccordion.api.md +++ b/packages/docs/api/accordion/CAccordion.api.md @@ -11,5 +11,5 @@ import CAccordion from '@coreui/vue/src/components/accordion/CAccordion' | Prop name | Description | Type | Values | Default | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | ------- | | **active-item-key** | The active item key. | number\|string | - | - | -| **always-open** | Make accordion items stay open when another item is opened | boolean | - | | -| **flush** | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | boolean | - | | +| **always-open** | Make accordion items stay open when another item is opened | boolean | - | - | +| **flush** | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | boolean | - | - | diff --git a/packages/docs/api/alert/CAlert.api.md b/packages/docs/api/alert/CAlert.api.md index 202552b4..140f73d1 100644 --- a/packages/docs/api/alert/CAlert.api.md +++ b/packages/docs/api/alert/CAlert.api.md @@ -10,8 +10,8 @@ import CAlert from '@coreui/vue/src/components/alert/CAlert' | Prop name | Description | Type | Values | Default | | --------------- | ------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- | ------- | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | -| **dismissible** | Optionally add a close button to alert and allow it to self dismisss. | boolean | - | false | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **dismissible** | Optionally add a close button to alert and allow it to self dismisss. | boolean | - | - | | **variant** | Set the alert variant to a solid. | string | `'solid'` | - | | **visible** | Toggle the visibility of alert component. | boolean | - | true | diff --git a/packages/docs/api/avatar/CAvatar.api.md b/packages/docs/api/avatar/CAvatar.api.md index eb86fe28..51491b27 100644 --- a/packages/docs/api/avatar/CAvatar.api.md +++ b/packages/docs/api/avatar/CAvatar.api.md @@ -10,9 +10,9 @@ import CAvatar from '@coreui/vue/src/components/avatar/CAvatar' | Prop name | Description | Type | Values | Default | | -------------- | -------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | | **size** | Size the component small, large, or extra large. | string | `'sm'`, `'md'`, `'lg'`, `'xl'` | - | | **src** | The src attribute for the img element. | string | - | - | | **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | | +| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | - | diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md index ff845d33..b9fd90b0 100644 --- a/packages/docs/api/badge/CBadge.api.md +++ b/packages/docs/api/badge/CBadge.api.md @@ -10,9 +10,9 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge' | Prop name | Description | Type | Values | Default | | -------------- | --------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | | **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | | **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | | +| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | | **size** | Size the component small. | string | `'sm'` | - | -| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | | +| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | - | diff --git a/packages/docs/api/breadcrumb/CBreadcrumbItem.api.md b/packages/docs/api/breadcrumb/CBreadcrumbItem.api.md index 620f95d4..792d17d6 100644 --- a/packages/docs/api/breadcrumb/CBreadcrumbItem.api.md +++ b/packages/docs/api/breadcrumb/CBreadcrumbItem.api.md @@ -10,5 +10,5 @@ import CBreadcrumbItem from '@coreui/vue/src/components/breadcrumb/CBreadcrumbIt | Prop name | Description | Type | Values | Default | | ---------- | -------------------------------------------------- | ------- | ------ | ------- | -| **active** | Toggle the active state for the component. | boolean | - | | +| **active** | Toggle the active state for the component. | boolean | - | - | | **href** | The `href` attribute for the inner link component. | string | - | - | diff --git a/packages/docs/api/button-group/CButtonGroup.api.md b/packages/docs/api/button-group/CButtonGroup.api.md index 5d48a7f0..cef08210 100644 --- a/packages/docs/api/button-group/CButtonGroup.api.md +++ b/packages/docs/api/button-group/CButtonGroup.api.md @@ -11,4 +11,4 @@ import CButtonGroup from '@coreui/vue/src/components/button-group/CButtonGroup' | Prop name | Description | Type | Values | Default | | ------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------- | ------- | | **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | -| **vertical** | Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. | boolean | - | | +| **vertical** | Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. | boolean | - | - | diff --git a/packages/docs/api/button/CButton.api.md b/packages/docs/api/button/CButton.api.md index e5d4a583..8f8f11ee 100644 --- a/packages/docs/api/button/CButton.api.md +++ b/packages/docs/api/button/CButton.api.md @@ -10,12 +10,12 @@ import CButton from '@coreui/vue/src/components/button/CButton' | Prop name | Description | Type | Values | Default | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| **active** | Toggle the active state for the component. | boolean | - | false | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | | +| **active** | Toggle the active state for the component. | boolean | - | - | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | | **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' | -| **disabled** | Toggle the disabled state for the component. | boolean | - | | +| **disabled** | Toggle the disabled state for the component. | boolean | - | - | | **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | | +| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | | **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | | **type** | Specifies the type of button. Always specify the type attribute for the `