From 82476e76bb8b21098228e774e5273b9f9a7bfa54 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 11 Mar 2022 13:39:29 +0100 Subject: [PATCH 001/381] 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 002/381] 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 010/381] 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 011/381] 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 012/381] 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 013/381] 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 014/381] 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 015/381] 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 016/381] 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 017/381] 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 018/381] 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 019/381] 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 020/381] 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`] = `""`; 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`] = `""`; 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`] = `""`; -exports[`Loads and display CModalTitle component renders correctly 1`] = `"
    Default slot
    "`; +exports[`Loads and display CModalTitle component renders correctly 1`] = `""`; 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 - -
      +"
    • " `; 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`] = `""`; 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
      +"
    • " `; -exports[`Loads and display CNavItem component renders correctly 1`] = `"
    • Default slot
    • "`; +exports[`Loads and display CNavItem component renders correctly 1`] = `""`; 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`] = `""`; -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`] = `""`; 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
      +"" `; -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`] = `""`; -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`] = `""`; -exports[`Loads and display CSidebar component renders correctly 1`] = `"
      Default slot
      "`; +exports[`Loads and display CSidebar component renders correctly 1`] = `""`; 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`] = `""`; 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`] = `""`; 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`] = `""`; 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`] = `"

        visuallyHiddenLabel

        "`; +exports[`Customize CSpinner component renders correctly 1`] = `"

        visuallyHiddenLabel

        "`; -exports[`Loads and display CSpinner component renders correctly 1`] = `"
        Loading...
        "`; +exports[`Loads and display CSpinner component renders correctly 1`] = `"
        Loading...
        "`; 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
        +
        " `; 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 107/381] 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 `