diff --git a/README.md b/README.md index a71b31fc..ba8470df 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.9.0-beta.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.10.2.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/lerna.json b/lerna.json index a64928e9..d8c6d770 100644 --- a/lerna.json +++ b/lerna.json @@ -1,8 +1,6 @@ { "npmClient": "yarn", - "packages": [ - "packages/*" - ], - "useWorkspaces": true, - "version": "4.9.0-beta.2" + "packages": ["packages/*"], + "version": "4.10.2", + "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index a83c62b8..048e9734 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^5.57.0", - "@typescript-eslint/parser": "^5.57.0", + "@typescript-eslint/eslint-plugin": "^5.61.0", + "@typescript-eslint/parser": "^5.61.0", "@vue/eslint-config-prettier": "^7.1.0", - "@vue/eslint-config-typescript": "^11.0.2", - "@vue/vue3-jest": "29.2.3", - "eslint": "8.36.0", + "@vue/eslint-config-typescript": "^11.0.3", + "@vue/vue3-jest": "29.2.4", + "eslint": "8.44.0", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-vue": "^9.10.0", - "eslint-config-prettier": "^8.7.0", - "eslint-plugin-unicorn": "^46.0.0", - "lerna": "^6.6.1", + "eslint-plugin-vue": "^9.15.1", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-unicorn": "^47.0.0", + "lerna": "^7.1.1", "npm-run-all": "^4.1.5", - "prettier": "^2.8.7" + "prettier": "^3.0.0" } } diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 8293a55c..ba8470df 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.4.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.10.2.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index a8bc07f0..d905abdc 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "4.9.0-beta.2", + "version": "4.10.2", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -38,20 +38,20 @@ }, "devDependencies": { "@popperjs/core": "^2.11.8", - "@rollup/plugin-commonjs": "^25.0.1", + "@rollup/plugin-commonjs": "^25.0.2", "@rollup/plugin-node-resolve": "^15.1.0", - "@rollup/plugin-typescript": "^11.1.1", + "@rollup/plugin-typescript": "^11.1.2", "@types/jest": "^29.5.2", - "@vue/test-utils": "^2.3.2", + "@vue/test-utils": "^2.4.0", "@vue/vue3-jest": "29.2.4", - "jest": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", - "rollup": "^3.25.0", + "jest": "^29.6.1", + "jest-environment-jsdom": "^29.6.1", + "rollup": "^3.26.2", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.1.0", + "ts-jest": "^29.1.1", "typescript": "^4.9.5", "vue": "^3.3.4", - "vue-types": "^5.0.3" + "vue-types": "^5.1.0" }, "peerDependencies": { "@coreui/coreui": "^4.2.6", diff --git a/packages/coreui-vue/src/components/accordion/CAccordion.ts b/packages/coreui-vue/src/components/accordion/CAccordion.ts index 1422d40b..eee9a535 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordion.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordion.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, provide, ref } from 'vue' +import { defineComponent, h, provide, ref, watch } from 'vue' const CAccordion = defineComponent({ name: 'CAccordion', @@ -21,6 +21,9 @@ const CAccordion = defineComponent({ const setActiveItemKey = (key: string | number) => { activeItemKey.value = key } + + watch(() => props.activeItemKey, value => activeItemKey.value = value) + provide('activeItemKey', activeItemKey) provide('alwaysOpen', props.alwaysOpen) provide('setActiveItemKey', setActiveItemKey) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index 67b4d0cc..c9b00cf8 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -121,7 +121,7 @@ const CDropdown = defineComponent({ /** * Offset of the dropdown menu relative to its target. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ offset: { type: Array, diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index b6e3df51..c7ed6edc 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/src/components/form/CFormCheck.ts @@ -14,6 +14,12 @@ const CFormCheck = defineComponent({ * @see http://coreui.io/vue/docs/components/button.html */ button: Object, + /** + * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state. + * + * @since 4.10.0 + */ + falseValue: String, /** * Provide valuable, actionable feedback. * @@ -66,7 +72,7 @@ const CFormCheck = defineComponent({ * The default name for a value passed using v-model. */ modelValue: { - type: [Boolean, String], + type: [Array, Boolean, String], value: undefined, }, /** @@ -81,6 +87,12 @@ const CFormCheck = defineComponent({ * @since 4.3.0 */ tooltipFeedback: Boolean, + /** + * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state. + * + * @since 4.10.0 + */ + trueValue: String, /** * Specifies the type of component. * @@ -111,8 +123,35 @@ const CFormCheck = defineComponent({ ], setup(props, { attrs, emit, slots }) { const handleChange = (event: InputEvent) => { + const target = event.target as HTMLInputElement emit('change', event) - emit('update:modelValue', (event.target as HTMLInputElement).value) + + if (props.falseValue && props.trueValue) { + emit('update:modelValue', target.checked ? props.trueValue : props.falseValue) + return + } + + if (props.value && Array.isArray(props.modelValue)) { + if (props.modelValue.includes(props.value)) { + emit( + 'update:modelValue', + props.modelValue.filter((value) => value !== props.value), + ) + } else { + emit('update:modelValue', [...props.modelValue, props.value]) + } + + return + } + + if (props.value === undefined) { + emit('update:modelValue', target.checked) + return + } + + if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) { + emit('update:modelValue', target.checked ? props.value : undefined) + } } const className = [ @@ -135,12 +174,22 @@ const CFormCheck = defineComponent({ }, ] - const isChecked = computed(() => props.modelValue == props.value) + const isChecked = computed(() => { + if (Array.isArray(props.modelValue)) { + return props.modelValue.includes(props.value) + } + + if (typeof props.modelValue === 'string') { + return props.modelValue === props.value + } + + return props.modelValue + }) const formControl = () => { return h('input', { ...attrs, - ...(props.modelValue && { checked: isChecked.value }), + ...((props.modelValue || props.value) && { checked: isChecked.value }), class: inputClassName, id: props.id, indeterminate: props.indeterminate, diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts index 8f3a70b2..aca98dbe 100644 --- a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts +++ b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts @@ -7,6 +7,7 @@ import { executeAfterTransition } from '../../utils/transition' const COffcanvas = defineComponent({ name: 'COffcanvas', + inheritAttrs: false, props: { /** * Apply a backdrop on body while offcanvas is open. @@ -90,7 +91,7 @@ const COffcanvas = defineComponent({ */ 'show', ], - setup(props, { slots, emit }) { + setup(props, { attrs, emit, slots }) { const offcanvasRef = ref() const visible = ref(props.visible) @@ -170,6 +171,7 @@ const COffcanvas = defineComponent({ h( 'div', { + ...attrs, class: [ { [`offcanvas${ @@ -177,6 +179,7 @@ const COffcanvas = defineComponent({ }`]: props.responsive, [`offcanvas-${props.placement}`]: props.placement, }, + attrs.class, ], onKeydown: (event: KeyboardEvent) => handleKeyDown(event), ref: offcanvasRef, diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 1c43742a..0e5d172b 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -12,7 +12,7 @@ const CPopover = defineComponent({ /** * Apply a CSS fade transition to the popover. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ animation: { type: Boolean, @@ -25,7 +25,7 @@ const CPopover = defineComponent({ /** * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ delay: { type: [Number, Object] as PropType, @@ -34,7 +34,7 @@ const CPopover = defineComponent({ /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ fallbackPlacements: { type: [String, Array] as PropType, diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 638cb387..db47bddb 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -12,7 +12,7 @@ const CTooltip = defineComponent({ /** * Apply a CSS fade transition to the tooltip. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ animation: { type: Boolean, @@ -25,7 +25,7 @@ const CTooltip = defineComponent({ /** * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ delay: { type: [Number, Object] as PropType, @@ -34,7 +34,7 @@ const CTooltip = defineComponent({ /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-beta.2 + * @since 4.9.0 */ fallbackPlacements: { type: [String, Array] as PropType, diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts index 4cee4c15..e45a266d 100644 --- a/packages/coreui-vue/src/composables/index.ts +++ b/packages/coreui-vue/src/composables/index.ts @@ -1,4 +1,3 @@ -import { useColorModes } from './useColorModes' import { usePopper } from './usePopper' -export { useColorModes, usePopper } +export { usePopper } diff --git a/packages/coreui-vue/src/composables/useColorModes.ts b/packages/coreui-vue/src/composables/useColorModes.ts deleted file mode 100644 index ac622e5d..00000000 --- a/packages/coreui-vue/src/composables/useColorModes.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { onBeforeMount, ref, watch } from 'vue' - -const getStoredTheme = (localStorageItemName: string) => - typeof window !== 'undefined' && localStorage.getItem(localStorageItemName) - -const setStoredTheme = (localStorageItemName: string, colorMode: string) => - localStorage.setItem(localStorageItemName, colorMode) - -const getPreferredColorScheme = (localStorageItemName: string) => { - if (typeof window === 'undefined') { - return - } - - const storedTheme = getStoredTheme(localStorageItemName) - - if (storedTheme) { - return storedTheme - } - - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' -} - -const setTheme = (colorMode: string) => { - document.documentElement.dataset.coreuiTheme = - colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : colorMode - - const event = new Event('ColorSchemeChange') - document.documentElement.dispatchEvent(event) -} - -export const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => { - const colorMode = ref(getPreferredColorScheme(localStorageItemName)) - - watch(colorMode, () => { - if (colorMode.value) { - setStoredTheme(localStorageItemName, colorMode.value) - setTheme(colorMode.value) - } - }) - - onBeforeMount(() => { - if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) { - setTheme(colorMode.value) - } - - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { - const storedTheme = getStoredTheme(localStorageItemName) - if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) { - setTheme(colorMode.value) - } - }) - }) - - return { - colorMode, - isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)), - setColorMode: (mode: string) => { - colorMode.value = mode - }, - } -} diff --git a/packages/coreui-vue/src/utils/getRTLPlacement.ts b/packages/coreui-vue/src/utils/getRTLPlacement.ts index cc60b801..87c38517 100644 --- a/packages/coreui-vue/src/utils/getRTLPlacement.ts +++ b/packages/coreui-vue/src/utils/getRTLPlacement.ts @@ -1,5 +1,5 @@ import { Placement } from '@popperjs/core' -import { isRTL } from '../utils' +import isRTL from './isRTL' const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => { switch (placement) { diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue index 183935cf..3e31269b 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue @@ -18,46 +18,6 @@
- - - - - - - - - Light - - - Dark - - - Auto - - - -
  • -
    -
    -
    • diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue index ae622b73..b2579346 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue @@ -15,16 +15,18 @@ export default defineComponent({ file: String, }, setup(props) { - if (typeof window !== 'undefined') { - window.Prism = window.Prism || {}; - window.Prism.manual = true; + window.Prism = window.Prism || {} + window.Prism.manual = true } - const files = import.meta.glob(`../../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, { - as: 'raw', - eager: true, - }) + const files = import.meta.glob( + `../../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, + { + as: 'raw', + eager: true, + }, + ) const file = files[`../../../../../../../node_modules/@coreui/coreui/scss/${props.file}`] const captureStart = `// scss-docs-start ${props.capture}` @@ -40,8 +42,13 @@ export default defineComponent({ .replaceAll('\n @', '\n@'), Prism.languages.scss, 'scss', - ) + ) : null + + if (code === null) { + console.error(`Can't find "${props.capture}"`) + } + return { code, } diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue index ce1b07f7..b819a1ba 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue @@ -17,7 +17,7 @@ -
    Framework:
    +
    Framework:
    Vue.js diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss index 7544a17b..14e22108 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss +++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss @@ -7,7 +7,7 @@ @include font-size(.875rem); a { - color: var(--#{$prefix}tertiary-color); + color: #768192; text-decoration: none; &:hover, diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss index 6145e4b6..21bfa2c9 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss +++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss @@ -6,8 +6,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli * @author Rose Pritchard */ -:root, -[data-coreui-theme="light"] { +:root { // --base00: #fff; // --base01: #f5f5f5; --base02: #c8c8fa; @@ -24,32 +23,6 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli --base0D: #{$purple-500}; // #795da3 --base0E: #{$pink-600}; // #a71d5d --base0F: #333; - } - -@include color-mode(dark, true) { - // --base00: #282c34; - // --base01: #353b45; - --base02: #3e4451; - --base03: #868e96; - --base04: #868e96; - --base05: #abb2bf; - --base06: #b6bdca; - --base07: #{$orange-300}; // #d19a66 - --base08: #{$cyan-300}; - --base09: #{$orange-300}; // #d19a66 - --base0A: #{$yellow-200}; // #e5c07b - --base0B: #{$teal-300}; // #98c379 - --base0C: #{$teal-300}; // #56b6c2 - --base0D: #{$blue-300}; // #61afef - --base0E: #{$indigo-200}; // #c678dd - --base0F: #{$red-300}; // #be5046 - - .language-diff .gd { - color: $red-400; - } - .language-diff .gi { - color: $green-400; - } } code[class*='language-'], diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss index c487e640..8b19708c 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss +++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss @@ -5,26 +5,6 @@ --docsearch-logo-color: var(--cui-primary); } -@include color-mode(dark, true) { - // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3 - // in html[data-theme="dark"] selector - // and are slightly modified for formatting purpose - --docsearch-text-color: #f5f6f7; - --docsearch-container-background: rgba(9, 10, 17, .8); - --docsearch-modal-background: #15172a; - --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; - --docsearch-searchbox-background: #090a11; - --docsearch-searchbox-focus-background: #000; - --docsearch-hit-color: #bec3c9; - --docsearch-hit-shadow: none; - --docsearch-hit-background: #090a11; - --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); - --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3); - --docsearch-footer-background: #1e2136; - --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2); - --docsearch-muted-color: #7f8497; -} - .DocSearch-Container { --docsearch-muted-color: var(--cui-secondary-color); --docsearch-hit-shadow: none; diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss deleted file mode 100644 index ac38381a..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss +++ /dev/null @@ -1,142 +0,0 @@ -:root, -[data-coreui-theme="light"] { - // --base00: #fff; - // --base01: #f5f5f5; - --base02: #c8c8fa; - --base03: #565c64; - --base04: #666; - --base05: #333; - --base06: #fff; - --base07: #{$teal-700}; // #9a6700 - --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00 - --base09: #{$cyan-700}; // #087990 - --base0A: #{$purple-500}; // #795da3 - --base0B: #{$blue-700}; // #183691 - --base0C: #{$blue-700}; // #183691 - --base0D: #{$purple-500}; // #795da3 - --base0E: #{$pink-600}; // #a71d5d - --base0F: #333; -} - -@include color-mode(dark, true) { - // --base00: #282c34; - // --base01: #353b45; - --base02: #3e4451; - --base03: #868e96; - --base04: #868e96; - --base05: #abb2bf; - --base06: #b6bdca; - --base07: #{$orange-300}; // #d19a66 - --base08: #{$cyan-300}; - --base09: #{$orange-300}; // #d19a66 - --base0A: #{$yellow-200}; // #e5c07b - --base0B: #{$teal-300}; // #98c379 - --base0C: #{$teal-300}; // #56b6c2 - --base0D: #{$blue-300}; // #61afef - --base0E: #{$indigo-200}; // #c678dd - --base0F: #{$red-300}; // #be5046 - - .language-diff .gd { - color: $red-400; - } - .language-diff .gi { - color: $green-400; - } -} - -.hl { background-color: var(--base02); } -.c { color: var(--base03); } -.err { color: var(--base08); } -.k { color: var(--base0E); } -.l { color: var(----base09); } -.n { color: var(--base08); } -.o { color: var(--base05); } -.p { color: var(--base05); } -.cm { color: var(--base04); } -.cp { color: var(--base08); } -.c1 { color: var(--base03); } -.cs { color: var(--base04); } -.gd { color: var(--base08); } -.ge { font-style: italic; } -.gh { - font-weight: 600; - color: var(--base0A); -} -.gi { color: var(--cui-success); } -.gp { - font-weight: 600; - color: var(--base04); -} -.gs { font-weight: 600; } -.gu { - font-weight: 600; - color: var(--base0C); -} -.kc { color: var(--base0E); } -.kd { color: var(--base0E); } -.kn { color: var(--base0C); } -.kp { color: var(--base0E); } -.kr { color: var(--base0E); } -.kt { color: var(--base0A); } -.ld { color: var(--base0C); } -.m { color: var(--base09); } -.s { color: var(--base0C); } -.na { color: var(--base0A); } -.nb { color: var(--base05); } -.nc { color: var(--base07); } -.no { color: var(--base08); } -.nd { color: var(--base07); } -.ni { color: var(--base08); } -.ne { color: var(--base08); } -.nf { color: var(--base0B); } -.nl { color: var(--base05); } -.nn { color: var(--base0A); } -.nx { color: var(--base0A); } -.py { color: var(--base08); } -.nt { color: var(--base08); } -.nv { color: var(--base08); } -.ow { color: var(--base0C); } -.w { color: #fff; } -.mf { color: var(--base09); } -.mh { color: var(--base09); } -.mi { color: var(--base09); } -.mo { color: var(--base09); } -.sb { color: var(--base0C); } -.sc { color: #fff; } -.sd { color: var(--base04); } -.s2 { color: var(--base0C); } -.se { color: var(--base09); } -.sh { color: var(--base0C); } -.si { color: var(--base09); } -.sx { color: var(--base0C); } -.sr { color: var(--base0C); } -.s1 { color: var(--base0C); } -.ss { color: var(--base0C); } -.bp { color: var(--base05); } -.vc { color: var(--base08); } -.vg { color: var(--base08); } -.vi { color: var(--base08); } -.il { color: var(--base09); } - -// Color commas in rgba() values -.m + .o { color: var(--base03); } - -// Fix bash -.language-sh .c { color: var(--base03); } - -.chroma { - .language-bash, - .language-sh { - .line::before { - color: var(--base03); - content: "$ "; - user-select: none; - } - } - - .language-powershell::before { - color: var(--base0C); - content: "PM> "; - user-select: none; - } -} diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss index bb49c60f..a76e509d 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss +++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss @@ -20,6 +20,7 @@ $cd-gutter-x: 3rem; $cd-callout-variants: info, warning, danger !default; :root { + --cui-tertiary-bg: #f0f4f7; --cd-purple: #{$cd-purple}; --cd-violet: #{$cd-violet}; --cd-accent: #{$cd-accent}; diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md index 71f0905c..80c1de1d 100644 --- a/packages/docs/api/dropdown/CDropdown.api.md +++ b/packages/docs/api/dropdown/CDropdown.api.md @@ -8,18 +8,19 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown' #### Props -| Prop name | Description | Type | Values | Default | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| **alignment** | Set aligment of dropdown menu. | string\|object | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - | -| **auto-close** | Configure the auto close behavior of the dropdown:
    - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
    - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
    - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
    - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true | -| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - | -| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - | -| **disabled** | Toggle the disabled state for the component. | boolean | - | - | -| **placement** | 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. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' | -| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | string\|array | - | 'click' | -| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' | -| **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - | +| **auto-close** | Configure the auto close behavior of the dropdown:
    - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
    - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
    - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
    - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true | +| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - | +| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - | +| **disabled** | Toggle the disabled state for the component. | boolean | - | - | +| **offset**
    4.9.0+
    | Offset of the dropdown menu relative to its target. | array | - | [0, 2] | +| **placement** | 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. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' | +| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' | +| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' | +| **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - | #### Events diff --git a/packages/docs/api/form/CFormCheck.api.md b/packages/docs/api/form/CFormCheck.api.md index e6fd5f77..1d906212 100644 --- a/packages/docs/api/form/CFormCheck.api.md +++ b/packages/docs/api/form/CFormCheck.api.md @@ -8,23 +8,26 @@ import CFormCheck from '@coreui/vue/src/components/form/CFormCheck' #### Props -| Prop name | Description | Type | Values | Default | -| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- | -| **button** | Create button-like checkboxes and radio buttons.
    `@see` http://coreui.io/vue/docs/components/button.html | object | - | - | -| **feedback**
    4.3.0+
    | Provide valuable, actionable feedback. | string | - | - | -| **feedback-invalid**
    4.3.0+
    | Provide valuable, actionable feedback. | string | - | - | -| **feedback-valid**
    4.3.0+
    | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | - | - | -| **hit-area** | Sets hit area to the full area of the component. | string | - | - | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - | -| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | - | -| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | - | -| **invalid** | Set component validation state to invalid. | boolean | - | - | -| **label** | The element represents a caption for a component. | string | - | - | -| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | - | -| **reverse** | Put checkboxes or radios on the opposite side.
    `@since` 4.8.0 | boolean | - | - | -| **tooltip-feedback**
    4.3.0+
    | Display validation feedback in a styled tooltip. | boolean | - | - | -| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | -| **valid** | Set component validation state to valid. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------- | ---------- | +| **button** | Create button-like checkboxes and radio buttons.
    `@see` http://coreui.io/vue/docs/components/button.html | object | - | - | +| **false-value**
    4.10.0+
    | Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state. | string | - | - | +| **feedback**
    4.3.0+
    | Provide valuable, actionable feedback. | string | - | - | +| **feedback-invalid**
    4.3.0+
    | Provide valuable, actionable feedback. | string | - | - | +| **feedback-valid**
    4.3.0+
    | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | - | - | +| **hit-area** | Sets hit area to the full area of the component. | string | - | - | +| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - | +| **indeterminate** | Input Checkbox indeterminate Property | boolean | - | - | +| **inline** | Group checkboxes or radios on the same horizontal row by adding. | boolean | - | - | +| **invalid** | Set component validation state to invalid. | boolean | - | - | +| **label** | The element represents a caption for a component. | string | - | - | +| **model-value** | The default name for a value passed using v-model. | array\|boolean\|string | - | - | +| **reverse**
    4.8.0+
    | Put checkboxes or radios on the opposite side. | boolean | - | - | +| **tooltip-feedback**
    4.3.0+
    | Display validation feedback in a styled tooltip. | boolean | - | - | +| **true-value**
    4.10.0+
    | Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state. | string | - | - | +| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | +| **valid** | Set component validation state to valid. | boolean | - | - | +| **value** | The value attribute of component. | string | - | - | #### Events diff --git a/packages/docs/api/form/CFormSwitch.api.md b/packages/docs/api/form/CFormSwitch.api.md index ede39558..fc2864c1 100644 --- a/packages/docs/api/form/CFormSwitch.api.md +++ b/packages/docs/api/form/CFormSwitch.api.md @@ -8,16 +8,16 @@ import CFormSwitch from '@coreui/vue/src/components/form/CFormSwitch' #### Props -| Prop name | Description | Type | Values | Default | -| --------------- | -------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document | string | - | - | -| **invalid** | Set component validation state to invalid. | boolean | - | - | -| **label** | The element represents a caption for a component. | string | - | - | -| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | - | -| **reverse** | Put checkboxes or radios on the opposite side.
    `@since` 4.8.0 | boolean | - | - | -| **size** | Size the component large or extra large. Works only with `switch`. | string | `'lg' \| 'xl'` | - | -| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | -| **valid** | Set component validation state to valid. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- | +| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document | string | - | - | +| **invalid** | Set component validation state to invalid. | boolean | - | - | +| **label** | The element represents a caption for a component. | string | - | - | +| **model-value** | The default name for a value passed using v-model. | boolean\|string | - | - | +| **reverse**
    4.8.0+
    | Put checkboxes or radios on the opposite side. | boolean | - | - | +| **size** | Size the component large or extra large. Works only with `switch`. | string | `'lg' \| 'xl'` | - | +| **type** | Specifies the type of component. | string | `'checkbox'`, `'radio'` | 'checkbox' | +| **valid** | Set component validation state to valid. | boolean | - | - | #### Events diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md index 3c4917d6..648449b9 100644 --- a/packages/docs/api/popover/CPopover.api.md +++ b/packages/docs/api/popover/CPopover.api.md @@ -8,14 +8,17 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------- | ------- | -| **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | -| **offset** | Offset of the popover relative to its target. | array | - | [0, 8] | -| **placement** | 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. | Placement | - | 'top' | -| **title** | Title for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | string \| string[] | `'click'`, `'focus'`, `'hover'` | 'click' | -| **visible** | Toggle the visibility of popover component. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- | +| **animation**
    4.9.0+
    | Apply a CSS fade transition to the popover. | boolean | - | true | +| **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | +| **delay**
    4.9.0+
    | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 | +| **fallback-placements**
    4.9.0+
    | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] | +| **offset** | Offset of the popover relative to its target. | array | - | [0, 8] | +| **placement** | 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. | Placement | - | 'top' | +| **title** | Title for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers \| Triggers[] | `'click'`, `'focus'`, `'hover'` | 'click' | +| **visible** | Toggle the visibility of popover component. | boolean | - | - | #### Events diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md index 66bf91ce..8279d9d3 100644 --- a/packages/docs/api/tooltip/CTooltip.api.md +++ b/packages/docs/api/tooltip/CTooltip.api.md @@ -8,13 +8,16 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------- | ------- | -| **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | -| **offset** | Offset of the tooltip relative to its target. | array | - | [0, 0] | -| **placement** | 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. | Placement | - | 'top' | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | string \| string[] | `'click'`, `'focus'`, `'hover'` | 'hover' | -| **visible** | Toggle the visibility of tooltip component. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- | +| **animation**
    4.9.0+
    | Apply a CSS fade transition to the tooltip. | boolean | - | true | +| **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | +| **delay**
    4.9.0+
    | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 | +| **fallback-placements**
    4.9.0+
    | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] | +| **offset** | Offset of the tooltip relative to its target. | array | - | [0, 6] | +| **placement** | 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. | Placement | - | 'top' | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers \| Triggers[] | `'click'`, `'focus'`, `'hover'` | () => ['hover', 'focus'] | +| **visible** | Toggle the visibility of tooltip component. | boolean | - | - | #### Events diff --git a/packages/docs/components/header.md b/packages/docs/components/header.md index 5094d15c..a58ee2f7 100644 --- a/packages/docs/components/header.md +++ b/packages/docs/components/header.md @@ -104,7 +104,7 @@ Here's an example of all the sub-components included in a responsive light-theme export default { data() { return { - visible: true, + visible: false, } } } @@ -115,7 +115,7 @@ Here's an example of all the sub-components included in a responsive light-theme export default { data() { return { - visible: true, + visible: false, } } } diff --git a/packages/docs/components/navbar.md b/packages/docs/components/navbar.md index c2b7f2ef..80acd132 100644 --- a/packages/docs/components/navbar.md +++ b/packages/docs/components/navbar.md @@ -1304,10 +1304,6 @@ Variables for all navbars: -Variables for the [dark navbar](#color-schemes): - - - ### SASS loops [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. diff --git a/packages/docs/forms/checkbox.md b/packages/docs/forms/checkbox.md index ceced278..f2f9f671 100644 --- a/packages/docs/forms/checkbox.md +++ b/packages/docs/forms/checkbox.md @@ -20,6 +20,74 @@ Browser default checkboxes are replaced with the help of ``. Checkbo ``` +### vModel + +Single checkbox, boolean value. + +::: demo + +
    Checked: {{checked}}
    +::: +```vue + + +``` + +We can also bind multiple checkboxes to the same array. + +::: demo + + + +
    Checked names: {{checkedNames}}
    +::: +```vue + + +``` + + + ## Indeterminate Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property. @@ -32,7 +100,7 @@ Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via ` ``` -### Disabled +## Disabled Add the `disabled` attribute and the associated `