From 510ea1a36bfed375c3d80530a830681af25abc73 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 1 Jun 2023 13:36:48 +0200 Subject: [PATCH 001/243] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^4.2.6 → ^4.3.0-beta.0 @coreui/icons ^3.0.0 → ^3.0.1 @docsearch/css ^3.3.3 → ^3.4.0 @docsearch/js ^3.3.3 → ^3.4.0 vue-docgen-cli ^4.57.1 → ^4.67 --- packages/docs/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index aa96e0f0..37b49091 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -9,15 +9,15 @@ "license": "MIT", "devDependencies": { "@coreui/chartjs": "^3.1.1", - "@coreui/coreui": "^4.2.6", - "@coreui/icons": "^3.0.0", + "@coreui/coreui": "^4.3.0-beta.0", + "@coreui/icons": "^3.0.1", "@coreui/icons-vue": "^2.0.0", "@coreui/vue-chartjs": "^2.0.1", - "@docsearch/css": "^3.3.3", - "@docsearch/js": "^3.3.3", + "@docsearch/css": "^3.4.0", + "@docsearch/js": "^3.4.0", "@vuepress/plugin-toc": "2.0.0-beta.38", "markdown-it-include": "^2.0.0", - "vue-docgen-cli": "^4.57.1", + "vue-docgen-cli": "^4.67.0", "vuepress": "2.0.0-beta.38" } } From 06b182cf39b0442f9c31889420882f3dc63121ec Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 1 Jun 2023 18:50:36 +0200 Subject: [PATCH 002/243] docs: update theme --- packages/docs/.vuepress/clientAppEnhance.ts | 6 + packages/docs/.vuepress/config.ts | 3 + .../src/assets/brand/coreui-vue.svg | 44 +- .../src/client/components/Header.vue | 63 ++- .../src/client/components/Sidebar.vue | 19 +- .../src/client/layouts/Layout.vue | 50 ++- .../theme-coreui/src/client/styles/_ads.scss | 14 +- .../src/client/styles/_code-group.scss | 67 --- .../theme-coreui/src/client/styles/_code.scss | 267 ----------- .../client/styles/_component-examples.scss | 425 ++++++++++++++++++ .../theme-coreui/src/client/styles/_demo.scss | 314 ------------- .../src/client/styles/_footer.scss | 18 +- .../src/client/styles/_prism.scss | 172 +++++++ .../src/client/styles/_scrolling.scss | 13 + .../src/client/styles/_search.scss | 40 +- .../src/client/styles/_sidebar.scss | 21 +- .../src/client/styles/_syntax.scss | 142 ++++++ .../src/client/styles/_variables.scss | 27 ++ .../theme-coreui/src/client/styles/index.scss | 41 +- .../theme-coreui/src/client/styles/page.scss | 65 --- .../src/client/styles/transitions.scss | 13 - .../src/client/styles/vars-dark.scss | 46 -- .../theme-coreui/src/client/styles/vars.scss | 124 ----- 23 files changed, 1018 insertions(+), 976 deletions(-) delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/styles/_code-group.scss delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/styles/_code.scss create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss delete mode 100644 packages/docs/.vuepress/theme-coreui/src/client/styles/_demo.scss create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/styles/page.scss delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/styles/transitions.scss delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/styles/vars-dark.scss delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/styles/vars.scss diff --git a/packages/docs/.vuepress/clientAppEnhance.ts b/packages/docs/.vuepress/clientAppEnhance.ts index 4ef7fe8c..2b2fade4 100644 --- a/packages/docs/.vuepress/clientAppEnhance.ts +++ b/packages/docs/.vuepress/clientAppEnhance.ts @@ -18,13 +18,16 @@ import { cilBurn, cilCheckCircle, cilCloudDownload, + cilContrast, cilInfo, cilMenu, + cilMoon, cilOptions, cilPeople, cilPuzzle, cilSettings, cilSpeedometer, + cilSun, cilUserFollow, cilWarning, } from '@coreui/icons' @@ -42,13 +45,16 @@ export const icons = { cilBurn, cilCheckCircle, cilCloudDownload, + cilContrast, cilInfo, cilMenu, + cilMoon, cilOptions, cilPeople, cilPuzzle, cilSettings, cilSpeedometer, + cilSun, cilUserFollow, cilWarning, } diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts index 0233f50c..55b18a67 100644 --- a/packages/docs/.vuepress/config.ts +++ b/packages/docs/.vuepress/config.ts @@ -26,6 +26,9 @@ export default defineUserConfig({ placement: 'after' }) }, + code: { + lineNumbers: false + } }, plugins: [ '@vuepress/plugin-toc', diff --git a/packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg b/packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg index 4eecb11e..2b481a7d 100755 --- a/packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg +++ b/packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg @@ -1,38 +1,10 @@ - - - - coreui vue - - - - - - - - - - - - - - - - - - - - - - - + + - + + + + + + \ No newline at end of file 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 8e548abf..bbeedcbf 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue @@ -14,6 +14,47 @@ +
  • +
    +
    +
    • + + + + + + + + + Light + + + Dark + + + Auto + + + +
  • +
    +
    +
    • 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 d9fba4ea..ce1b07f7 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue @@ -1,8 +1,23 @@ diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Home.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Home.vue deleted file mode 100755 index 4c69d855..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Home.vue +++ /dev/null @@ -1,133 +0,0 @@ - - - diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/global/CodeGroup.ts b/packages/docs/.vuepress/theme-coreui/src/client/components/global/CodeGroup.ts deleted file mode 100755 index f7d22994..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/global/CodeGroup.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { defineComponent, h, ref } from 'vue' -import type { Component, VNode } from 'vue' - -export default defineComponent({ - name: 'CodeGroup', - - setup(_, { slots }) { - // index of current active item - const activeIndex = ref(-1) - - // refs of the tab buttons - const tabRefs = ref([]) - - // activate next tab - const activateNext = (i = activeIndex.value): void => { - if (i < tabRefs.value.length - 1) { - activeIndex.value = i + 1 - } else { - activeIndex.value = 0 - } - tabRefs.value[activeIndex.value].focus() - } - - // activate previous tab - const activatePrev = (i = activeIndex.value): void => { - if (i > 0) { - activeIndex.value = i - 1 - } else { - activeIndex.value = tabRefs.value.length - 1 - } - tabRefs.value[activeIndex.value].focus() - } - - // handle keyboard event - const keyboardHandler = (event: KeyboardEvent, i: number): void => { - if (event.key === ' ' || event.key === 'Enter') { - event.preventDefault() - activeIndex.value = i - } else if (event.key === 'ArrowRight') { - event.preventDefault() - activateNext(i) - } else if (event.key === 'ArrowLeft') { - event.preventDefault() - activatePrev(i) - } - } - - return () => { - // NOTICE: here we put the `slots.default()` inside the render function to make - // the slots reactive, otherwise the slot content won't be changed once the - // `setup()` function of current component is called - - // get children code-group-item - const items = (slots.default?.() || []) - .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem') - .map((vnode) => { - if (vnode.props === null) { - vnode.props = {} - } - return vnode as VNode & { props: Exclude } - }) - - // clear tabRefs for HMR - tabRefs.value = [] - - // do not render anything if there is no code-group-item - if (items.length === 0) { - return null - } - - if (activeIndex.value < 0 || activeIndex.value > items.length - 1) { - // if `activeIndex` is invalid - - // find the index of the code-group-item with `active` props - activeIndex.value = items.findIndex( - (vnode) => vnode.props.active === '' || vnode.props.active === true - ) - - // if there is no `active` props on code-group-item, set the first item active - if (activeIndex.value === -1) { - activeIndex.value = 0 - } - } else { - // set the active item - items.forEach((vnode, i) => { - vnode.props.active = i === activeIndex.value - }) - } - - return h('div', { class: 'code-group' }, [ - h( - 'div', - { class: 'code-group__nav' }, - h( - 'ul', - { class: 'code-group__ul' }, - items.map((vnode, i) => { - const isActive = i === activeIndex.value - - return h( - 'li', - { class: 'code-group__li' }, - h( - 'button', - { - ref: (element) => { - if (element) { - tabRefs.value[i] = element as HTMLButtonElement - } - }, - class: { - 'code-group__nav-tab': true, - 'code-group__nav-tab-active': isActive, - }, - ariaPressed: isActive, - ariaExpanded: isActive, - onClick: () => (activeIndex.value = i), - onKeydown: (e) => keyboardHandler(e, i), - }, - vnode.props.title - ) - ) - }) - ) - ), - items, - ]) - } - }, -}) diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/global/CodeGroupItem.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/global/CodeGroupItem.vue deleted file mode 100755 index f22b7370..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/global/CodeGroupItem.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/global/_Badge.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/global/_Badge.vue deleted file mode 100755 index 392aa4d8..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/global/_Badge.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts b/packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts index ce3616fa..0e953614 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts +++ b/packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts @@ -1,6 +1,4 @@ -export * from './useDarkMode' -export * from './useNavLink' -export * from './useResolveRouteWithRedirect' +export * from './useColorMode' export * from './useScrollPromise' export * from './useSidebarItems' export * from './useThemeData' diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useColorMode.ts b/packages/docs/.vuepress/theme-coreui/src/client/composables/useColorMode.ts new file mode 100755 index 00000000..4ee78aba --- /dev/null +++ b/packages/docs/.vuepress/theme-coreui/src/client/composables/useColorMode.ts @@ -0,0 +1,46 @@ +import { onMounted, ref, watch } from 'vue' +import type { Ref } from 'vue' + +export const useColorMode = (): Ref => { + const storedTheme = ref() + const theme = 'coreui-react-docs-theme' + + const getPreferredTheme = (storedTheme: string | undefined) => { + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = (theme: string) => { + document.documentElement.dataset.coreuiTheme = + theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme + + const event = new Event('ColorSchemeChange') + document.documentElement.dispatchEvent(event) + storedTheme.value = theme + + localStorage.setItem('coreui-react-docs-theme', theme) + } + + onMounted(() => { + if (typeof localStorage.getItem(theme) === 'string') { + storedTheme.value = localStorage.getItem(theme) + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + if (storedTheme.value !== 'light' || storedTheme.value !== 'dark') { + setTheme(getPreferredTheme(storedTheme.value)) + } + }) + + if (typeof localStorage.getItem(theme) === 'string') { + setTheme(localStorage.getItem(theme) as string) + } + + watch(storedTheme, setTheme) + }) + + return storedTheme +} diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useDarkMode.ts b/packages/docs/.vuepress/theme-coreui/src/client/composables/useDarkMode.ts deleted file mode 100755 index 2e734fdd..00000000 --- a/packages/docs/.vuepress/theme-coreui/src/client/composables/useDarkMode.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { onMounted, onUnmounted, ref, watch } from 'vue' -import type { Ref } from 'vue' - -export const useDarkMode = (): Ref => { - const isDarkMode = ref(false) - - const updateDarkModeClass = (value = isDarkMode.value): void => { - // set `class="dark"` on `` element - const htmlEl = window?.document.querySelector('html') - htmlEl?.classList.toggle('dark', value) - } - - const mediaQuery = ref(null) - const onMediaQueryChange = (event: MediaQueryListEvent): void => { - isDarkMode.value = event.matches - } - - onMounted(() => { - // get `prefers-color-scheme` media query and set the initial mode - mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)') - isDarkMode.value = mediaQuery.value.matches - - // watch changes - mediaQuery.value.addEventListener('change', onMediaQueryChange) - watch(isDarkMode, updateDarkModeClass, { immediate: true }) - }) - - onUnmounted(() => { - mediaQuery.value?.removeEventListener('change', onMediaQueryChange) - updateDarkModeClass(false) - }) - - return isDarkMode -} diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue index 8acddac3..4662bea1 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue @@ -1,27 +1,14 @@ +``` + +## Usage + +### Disabled elements + +Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `
    ` or ``, ideally made keyboard-focusable using `tabindex="0"`. + +For disabled popover triggers, you may also prefer `:trigger="['hover', 'focus']"` so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element. + +:::demo + + + +::: +```vue + + + +``` + ## Customizing ### CSS variables Vue popovers use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-popover-zindex: #{$zindex-popover}; ---cui-popover-max-width: #{$popover-max-width}; ---cui-popover-font-size: {$popover-font-size}; ---cui-popover-bg: #{$popover-bg}; ---cui-popover-border-width: #{$popover-border-width}; ---cui-popover-border-color: #{$popover-border-color}; ---cui-popover-border-radius: #{$popover-border-radius}; ---cui-popover-inner-border-radius: #{$popover-inner-border-radius}; ---cui-popover-box-shadow: #{$popover-box-shadow}; ---cui-popover-header-padding-x: #{$popover-header-padding-x}; ---cui-popover-header-padding-y: #{$popover-header-padding-y}; ---cui-popover-header-font-size: {$popover-header-font-size}; ---cui-popover-header-color: #{$popover-header-color}; ---cui-popover-header-bg: #{$popover-header-bg}; ---cui-popover-body-padding-x: #{$popover-body-padding-x}; ---cui-popover-body-padding-y: #{$popover-body-padding-y}; ---cui-popover-body-color: #{$popover-body-color}; ---cui-popover-arrow-width: #{$popover-arrow-width}; ---cui-popover-arrow-height: #{$popover-arrow-height}; ---cui-popover-arrow-border: var(--cui-popover-border-color); -``` + #### How to use CSS variables @@ -140,30 +201,25 @@ return ... ### SASS variables -```sass -$popover-font-size: $font-size-sm; -$popover-bg: $white; -$popover-max-width: 276px; -$popover-border-width: $border-width; -$popover-border-color: var(--cui-border-color-translucent); -$popover-border-radius: $border-radius-lg; -$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width); -$popover-box-shadow: $box-shadow; - -$popover-header-font-size: $font-size-base; -$popover-header-bg: shade-color($popover-bg, 6%); -$popover-header-color: var(--cui-heading-color); -$popover-header-padding-y: .5rem; -$popover-header-padding-x: $spacer; - -$popover-body-color: $body-color; -$popover-body-padding-y: $spacer; -$popover-body-padding-x: $spacer; - -$popover-arrow-width: 1rem; -$popover-arrow-height: .5rem; -``` + ## API -!!!include(./api/popover/CPopover.api.md)!!! \ No newline at end of file +!!!include(./api/popover/CPopover.api.md)!!! + + \ No newline at end of file diff --git a/packages/docs/components/progress.md b/packages/docs/components/progress.md index 71da71ce..9c32dbcb 100644 --- a/packages/docs/components/progress.md +++ b/packages/docs/components/progress.md @@ -206,16 +206,7 @@ The striped gradient can also be animated. Add `animated` property to ` #### How to use CSS variables @@ -229,20 +220,7 @@ return ... ### SASS variables -```sass -$progress-height: 1rem; -$progress-font-size: $font-size-base * .75; -$progress-bg: $gray-200; -$progress-border-radius: $border-radius; -$progress-box-shadow: $box-shadow-inset; -$progress-bar-color: $high-emphasis-inverse; -$progress-bar-bg: $primary; -$progress-bar-animation-timing: 1s linear infinite; -$progress-bar-transition: width .6s ease; - -$progress-group-margin-bottom: $spacer; -$progress-group-header-margin-bottom: $spacer * .25; -``` + ## API diff --git a/packages/docs/components/sidebar.md b/packages/docs/components/sidebar.md index 5faaa9d4..99afd650 100644 --- a/packages/docs/components/sidebar.md +++ b/packages/docs/components/sidebar.md @@ -92,69 +92,9 @@ Sidebar come with built-in support for a handful of sub-components. Choose from Vue sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-sidebar-width: #{$sidebar-width}; ---cui-sidebar-bg: #{$sidebar-bg}; ---cui-sidebar-padding-x: #{$sidebar-padding-x}; ---cui-sidebar-padding-y: #{$sidebar-padding-y}; ---cui-sidebar-color: #{$sidebar-color}; ---cui-sidebar-border-width: #{$sidebar-border-width}; ---cui-sidebar-border-color: #{$sidebar-border-color}; ---cui-sidebar-brand-color: #{$sidebar-brand-color}; ---cui-sidebar-brand-height: #{$sidebar-brand-height}; ---cui-sidebar-brand-bg: #{$sidebar-brand-bg}; ---cui-sidebar-header-height: #{$sidebar-header-height}; ---cui-sidebar-header-bg: #{$sidebar-header-bg}; ---cui-sidebar-header-padding-x: #{$sidebar-header-padding-x}; ---cui-sidebar-header-padding-y: #{$sidebar-header-padding-y}; ---cui-sidebar-footer-bg: #{$sidebar-footer-bg}; ---cui-sidebar-footer-height: #{$sidebar-footer-height}; ---cui-sidebar-footer-padding-x: #{$sidebar-footer-padding-x}; ---cui-sidebar-footer-padding-y: #{$sidebar-footer-padding-y}; ---cui-sidebar-toggler-bg: #{$sidebar-toggler-bg}; ---cui-sidebar-toggler-height: #{$sidebar-toggler-height}; ---cui-sidebar-toggler-indicator: #{escape-svg($sidebar-toggler-indicator-icon)}; ---cui-sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width}; ---cui-sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height}; ---cui-sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg}; ---cui-sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)} ---cui-sidebar-narrow-width: #{$sidebar-narrow-width}; ---cui-sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x}; ---cui-sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y}; ---cui-sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top}; ---cui-sidebar-nav-title-color: #{$sidebar-nav-title-color}; ---cui-sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x}; ---cui-sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y}; ---cui-sidebar-nav-link-color: #{$sidebar-nav-link-color}; ---cui-sidebar-nav-link-bg: #{$sidebar-nav-link-bg}; ---cui-sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color}; ---cui-sidebar-nav-link-border: #{$sidebar-nav-link-border-width} solid var(--cui-sidebar-nav-link-border-color); ---cui-sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius}; ---cui-sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color}; ---cui-sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg}; ---cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color}; ---cui-sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color}; ---cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color}; ---cui-sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color}; ---cui-sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg}; ---cui-sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color}; ---cui-sidebar-nav-icon-width: #{$sidebar-nav-icon-width}; ---cui-sidebar-nav-icon-height: #{$sidebar-nav-icon-height}; ---cui-sidebar-nav-icon-font-size: #{$sidebar-nav-icon-font-size}; ---cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color}; ---cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg}; ---cui-sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y}; ---cui-sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x}; ---cui-sidebar-nav-group-indicator: #{escape-svg($sidebar-nav-group-indicator-icon)}; ---cui-sidebar-nav-group-indicator-hover: #{escape-svg($sidebar-nav-group-indicator-hover-icon)}; ---cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color}; -``` + -```sass ---cui-backdrop-zindex: #{$zindex-sidebar-backdrop}; ---cui-backdrop-bg: #{$sidebar-backdrop-bg}; ---cui-backdrop-opacity: #{$sidebar-backdrop-opacity}; -``` + #### How to use CSS variables @@ -168,144 +108,7 @@ return ... ### SASS variables -```sass -$sidebar-width: 16rem; -$sidebar-widths: ( - sm: 12rem, - lg: 20rem, - xl: 24rem -); -$sidebar-padding-y: 0; -$sidebar-padding-x: 0; -$sidebar-color: $high-emphasis-inverse; -$sidebar-bg: $gray-base; -$sidebar-border-width: 0; -$sidebar-border-color: transparent; -$sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s; - -$sidebar-brand-height: 4rem; -$sidebar-brand-color: $high-emphasis-inverse; -$sidebar-brand-bg: rgba($black, .2); - -$sidebar-header-height: 4rem; -$sidebar-header-padding-y: .75rem; -$sidebar-header-padding-x: 1rem; -$sidebar-header-bg: rgba($black, .2); -$sidebar-header-height-transition: height .15s, padding .15s; - -$sidebar-narrow-width: 4rem; - -$sidebar-backdrop-bg: $black; -$sidebar-backdrop-opacity: .5; - -$sidebar-nav-title-padding-y: .75rem; -$sidebar-nav-title-padding-x: 1rem; -$sidebar-nav-title-margin-top: 1rem; -$sidebar-nav-title-color: $medium-emphasis-inverse; -$sidebar-nav-title-transition: height .15s, margin .15s; - -$sidebar-nav-link-padding-y: .8445rem; -$sidebar-nav-link-padding-x: 1rem; -$sidebar-nav-link-color: $medium-emphasis-inverse; -$sidebar-nav-link-bg: transparent; -$sidebar-nav-link-border-width: 0; -$sidebar-nav-link-border-color: transparent; -$sidebar-nav-link-border-radius: 0; -$sidebar-nav-link-transition: background .15s ease, color .15s ease; -$sidebar-nav-link-icon-color: $medium-emphasis-inverse; - -$sidebar-nav-link-hover-color: $high-emphasis-inverse; -$sidebar-nav-link-hover-bg: rgba($white, .05); -$sidebar-nav-link-hover-icon-color: $high-emphasis-inverse; - -$sidebar-nav-link-active-color: $high-emphasis-inverse; -$sidebar-nav-link-active-bg: rgba($white, .05); -$sidebar-nav-link-active-icon-color: $high-emphasis-inverse; - -$sidebar-nav-link-disabled-color: $disabled-inverse; -$sidebar-nav-link-disabled-icon-color: $sidebar-nav-link-icon-color; - -$sidebar-nav-icon-width: 4rem; -$sidebar-nav-icon-height: 1.25rem; -$sidebar-nav-icon-font-size: $sidebar-nav-icon-height; - -$sidebar-nav-group-bg: rgba(0, 0, 0, .2); -$sidebar-nav-group-transition: background .15s ease-in-out; -$sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color; - -$sidebar-nav-group-items-padding-y: 0; -$sidebar-nav-group-items-padding-x: 0; -$sidebar-nav-group-items-transition: height .15s ease; - -$sidebar-nav-group-indicator-color: $medium-emphasis-inverse; -$sidebar-nav-group-indicator-icon: url("data:image/svg+xml,"); -$sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color; -$sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,"); -$sidebar-nav-group-indicator-transition: transform .15s; - -$sidebar-footer-height: auto; -$sidebar-footer-padding-y: .75rem; -$sidebar-footer-padding-x: 1rem; -$sidebar-footer-bg: rgba($black, .2); -$sidebar-footer-height-transition: height .15s, padding .15s; - -$sidebar-toggler-height: 3rem; -$sidebar-toggler-bg: rgba($black, .2); -$sidebar-toggler-transition: transform .15s; - -$sidebar-toggler-indicator-width: 4rem; -$sidebar-toggler-indicator-height: 3rem; -$sidebar-toggler-indicator-color: $gray-600; -$sidebar-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); -$sidebar-toggler-hover-bg: rgba(0, 0, 0, .3); - -$sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color; -$sidebar-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); - -$sidebar-light-color: $body-color; -$sidebar-light-bg: $white; -$sidebar-light-border-width: 0; -$sidebar-light-border-color: transparent; - -$sidebar-light-brand-color: $white; -$sidebar-light-brand-bg: $primary; - -$sidebar-light-header-bg: rgba($black, .2); - -$sidebar-light-nav-title-color: $medium-emphasis; - -$sidebar-light-nav-link-color: $medium-emphasis; -$sidebar-light-nav-link-bg: transparent; -$sidebar-light-nav-link-icon-color: $medium-emphasis; - -$sidebar-light-nav-link-hover-color: $high-emphasis; -$sidebar-light-nav-link-hover-bg: theme-color("primary"); -$sidebar-light-nav-link-hover-icon-color: $high-emphasis; - -$sidebar-light-nav-link-active-color: $high-emphasis; -$sidebar-light-nav-link-active-bg: rgba($white, .05); -$sidebar-light-nav-link-active-icon-color: $high-emphasis; - -$sidebar-light-nav-link-disabled-color: $disabled; -$sidebar-light-nav-link-disabled-icon-color: $sidebar-light-nav-link-icon-color; - -$sidebar-light-nav-group-bg: rgba(0, 0, 0, .05); -$sidebar-light-nav-group-toggle-show-color: $sidebar-light-nav-link-color; - -$sidebar-light-nav-group-indicator-color: $medium-emphasis; -$sidebar-light-nav-group-indicator-icon: url("data:image/svg+xml,"); -$sidebar-light-nav-group-indicator-hover-color: $sidebar-light-nav-link-hover-color; -$sidebar-light-nav-group-indicator-hover-icon: url("data:image/svg+xml,"); - -$sidebar-light-footer-bg: rgba($black, .1); - -$sidebar-light-toggler-bg: rgba($black, .1); -$sidebar-light-toggler-hover-bg: rgba(0, 0, 0, .2); -$sidebar-light-toggler-indicator-color: $medium-emphasis; -$sidebar-light-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); -$sidebar-light-toggler-indicator-hover-color: $sidebar-light-nav-link-hover-color; -$sidebar-light-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"); -``` + ## API diff --git a/packages/docs/components/spinner.md b/packages/docs/components/spinner.md index fc8eae19..7c3dda54 100644 --- a/packages/docs/components/spinner.md +++ b/packages/docs/components/spinner.md @@ -146,32 +146,15 @@ Vue spinners use local CSS variables on `.spinner-border` and `.spinner-grow` fo Border spinner variables: -```sass ---cui-spinner-width: #{$spinner-width}; ---cui-spinner-height: #{$spinner-height}; ---cui-spinner-vertical-align: #{$spinner-vertical-align}; ---cui-spinner-border-width: #{$spinner-border-width}; ---cui-spinner-animation-speed: #{$spinner-animation-speed}; ---cui-spinner-animation-name: spinner-border; -``` + Growing spinner variables: -```sass ---cui-spinner-width: #{$spinner-width}; ---cui-spinner-height: #{$spinner-height}; ---cui-spinner-vertical-align: #{$spinner-vertical-align}; ---cui-spinner-animation-speed: #{$spinner-animation-speed}; ---cui-spinner-animation-name: spinner-grow; -``` + For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following: -```sass ---cui-spinner-width: #{$spinner-width-sm}; ---cui-spinner-height: #{$spinner-height-sm}; ---cui-spinner-border-width: #{$spinner-border-width-sm}; -``` + #### How to use CSS variables @@ -185,17 +168,7 @@ return ... ### SASS variables -```sass -$spinner-width: 2rem; -$spinner-height: $spinner-width; -$spinner-vertical-align: -.125em; -$spinner-border-width: .25em; -$spinner-animation-speed: .75s; - -$spinner-width-sm: 1rem; -$spinner-height-sm: $spinner-width-sm; -$spinner-border-width-sm: .2em; -``` + ## API diff --git a/packages/docs/components/toast.md b/packages/docs/components/toast.md index 297e8904..1d27d176 100644 --- a/packages/docs/components/toast.md +++ b/packages/docs/components/toast.md @@ -339,22 +339,7 @@ Building on the above example, you can create different toast color schemes with Vue toasts use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-toast-padding-x: #{$toast-padding-x}; ---cui-toast-padding-y: #{$toast-padding-y}; ---cui-toast-spacing: #{$toast-spacing}; ---cui-toast-max-width: #{$toast-max-width}; ---cui-toast-font-size: #{$toast-font-size}; ---cui-toast-color: #{$toast-color}; ---cui-toast-bg: #{$toast-background-color}; ---cui-toast-border-width: #{$toast-border-width}; ---cui-toast-border-color: #{$toast-border-color}; ---cui-toast-border-radius: #{$toast-border-radius}; ---cui-toast-box-shadow: #{$toast-box-shadow}; ---cui-toast-header-color: #{$toast-header-color}; ---cui-toast-header-bg: #{$toast-header-background-color}; ---cui-toast-header-border-color: #{$toast-header-border-color}; -``` + #### How to use CSS variables @@ -368,23 +353,7 @@ return ... ### SASS variables -```sass -$toast-max-width: 350px; -$toast-padding-x: .75rem; -$toast-padding-y: .5rem; -$toast-font-size: .875rem; -$toast-color: unset; -$toast-background-color: rgba($white, .85); -$toast-border-width: $border-width; -$toast-border-color: var(--cui-border-color-translucent); -$toast-border-radius: $border-radius; -$toast-box-shadow: $box-shadow; -$toast-spacing: $container-padding-x; - -$toast-header-color: $gray-600; -$toast-header-background-color: rgba($white, .85); -$toast-header-border-color: rgba($black, .05); -``` + ## API diff --git a/packages/docs/components/tooltip.md b/packages/docs/components/tooltip.md index 3bec5159..a03128d5 100644 --- a/packages/docs/components/tooltip.md +++ b/packages/docs/components/tooltip.md @@ -7,6 +7,8 @@ other_frameworks: tooltip ## Examples +### Tooltips on links + Hover over the links below to see tooltips: ::: demo @@ -112,26 +114,84 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo Tooltip on left ``` +### Custom popovers + +You can customize the appearance of tooltips using [CSS variables](#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables. + +::: demo + + + +::: +```vue + + +``` + +## Usage + +### Disabled elements + +Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `
    ` or ``, ideally made keyboard-focusable using `tabindex="0"`. + +:::demo + + + +::: +```vue + + + +``` + ## Customizing ### CSS variables Vue toltips use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -```sass ---cui-tooltip-zindex: #{$zindex-tooltip}; ---cui-tooltip-max-width: #{$tooltip-max-width}; ---cui-tooltip-padding-x: #{$tooltip-padding-x}; ---cui-tooltip-padding-y: #{$tooltip-padding-y}; ---cui-tooltip-margin: #{$tooltip-margin}; ---cui-tooltip-font-size: #{$tooltip-font-size}; ---cui-tooltip-color: #{$tooltip-color}; ---cui-tooltip-bg: #{$tooltip-bg}; ---cui-tooltip-border-radius: #{$tooltip-border-radius}; ---cui-tooltip-opacity: #{$tooltip-opacity}; ---cui-tooltip-arrow-width: #{$tooltip-arrow-width}; ---cui-tooltip-arrow-height: #{$tooltip-arrow-height}; -``` + #### How to use CSS variables @@ -145,23 +205,21 @@ return ... ### SASS variables -```sass -$tooltip-font-size: $font-size-sm; -$tooltip-max-width: 200px; -$tooltip-color: $high-emphasis-inverse; -$tooltip-bg: $black; -$tooltip-border-radius: $border-radius; -$tooltip-opacity: .9; -$tooltip-padding-y: $spacer * .25; -$tooltip-padding-x: $spacer * .5; -$tooltip-margin: null; - -$tooltip-arrow-width: .8rem; -$tooltip-arrow-height: .4rem; -$tooltip-arrow-color: null; -``` + ## API -!!!include(./api/tooltip/CTooltip.api.md)!!! \ No newline at end of file +!!!include(./api/tooltip/CTooltip.api.md)!!! + + \ No newline at end of file From ec17c7bc07a05b46dae71d0a41cf086a357e2f63 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 10 Jun 2023 12:58:51 +0200 Subject: [PATCH 020/243] refactor(CTooltip): update offset --- packages/coreui-vue/src/directives/v-c-tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-vue/src/directives/v-c-tooltip.ts b/packages/coreui-vue/src/directives/v-c-tooltip.ts index 8a98b348..5c12fab1 100644 --- a/packages/coreui-vue/src/directives/v-c-tooltip.ts +++ b/packages/coreui-vue/src/directives/v-c-tooltip.ts @@ -44,7 +44,7 @@ export default { const trigger = value.trigger ?? 'hover' // Popper Config - const offset = value.offset ?? [0, 0] + const offset = value.offset ?? [0, 6] const placement = value.placement ?? 'top' const popperOptions = { From 3be14286d254aaa6cdfb8bd895f2b5f5178f5b15 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 10 Jun 2023 13:01:12 +0200 Subject: [PATCH 021/243] fix(CPopover, CTooltip): inline styles attribute don't work --- packages/coreui-vue/src/components/popover/CPopover.ts | 3 ++- packages/coreui-vue/src/components/tooltip/CTooltip.ts | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index cb76ab7d..1bfe5348 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -79,7 +79,7 @@ const CPopover = defineComponent({ */ 'show', ], - setup(props, { slots, emit }) { + setup(props, { attrs, slots, emit }) { const togglerRef = ref() const popoverRef = ref() const popper = ref() @@ -149,6 +149,7 @@ const CPopover = defineComponent({ class: 'popover fade bs-popover-auto', ref: popoverRef, role: 'tooltip', + ...attrs, }, [ h('div', { class: 'popover-arrow', 'data-popper-arrow': '' }), diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index e1d7488c..4ceda0b2 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -30,7 +30,7 @@ const CTooltip = defineComponent({ */ offset: { type: Array, - default: () => [0, 0], + default: () => [0, 6], }, /** * 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. @@ -75,7 +75,7 @@ const CTooltip = defineComponent({ */ 'show', ], - setup(props, { slots, emit }) { + setup(props, { attrs, slots, emit }) { const togglerRef = ref() const tooltipRef = ref() const popper = ref() @@ -145,6 +145,7 @@ const CTooltip = defineComponent({ class: 'tooltip fade bs-tooltip-auto', ref: tooltipRef, role: 'tooltip', + ...attrs, }, [ h('div', { class: 'tooltip-arrow', 'data-popper-arrow': '' }), From 0cfa7353150716bf2887a7d96b4321508bf842c4 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 10 Jun 2023 13:02:57 +0200 Subject: [PATCH 022/243] docs: update theme --- packages/docs/.vuepress/config.ts | 9 ++++ .../src/client/components/ScssDocs.vue | 51 +++++++++++++++++++ packages/docs/package.json | 1 + 3 files changed, 61 insertions(+) create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts index ece96d9c..736add24 100644 --- a/packages/docs/.vuepress/config.ts +++ b/packages/docs/.vuepress/config.ts @@ -4,7 +4,11 @@ import include_plugin from 'markdown-it-include' import { defaultTheme } from './theme-coreui' import { containerPlugin } from '@vuepress/plugin-container' +import { registerComponentsPlugin } from '@vuepress/plugin-register-components' import { tocPlugin } from '@vuepress/plugin-toc' +import { getDirname, path } from '@vuepress/utils' + +const __dirname = getDirname(import.meta.url) export default defineUserConfig({ base: `/vue/docs/`, @@ -63,6 +67,11 @@ export default defineUserConfig({ }, }), tocPlugin({}), + registerComponentsPlugin({ + components: { + ScssDocs: path.resolve(__dirname, './theme-coreui/src/client/components/ScssDocs.vue'), + }, + }), ], theme: defaultTheme({ sidebar: [ diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue new file mode 100644 index 00000000..1a5a2897 --- /dev/null +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue @@ -0,0 +1,51 @@ + + + diff --git a/packages/docs/package.json b/packages/docs/package.json index bfc1cdd5..451a7933 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -15,6 +15,7 @@ "@coreui/vue-chartjs": "^2.0.1", "@docsearch/css": "^3.4.0", "@docsearch/js": "^3.4.0", + "@vuepress/plugin-register-components": "2.0.0-beta.62", "@vuepress/plugin-toc": "2.0.0-beta.62", "markdown-it-include": "^2.0.0", "vue-docgen-cli": "^4.67.0", From 6795b6b6bf8ce9a79f4fc10c4304e82dd2e11e2e Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 10 Jun 2023 13:14:18 +0200 Subject: [PATCH 023/243] build: update tsconfig --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 040f7e33..8cf48188 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "module": "esnext", "target": "esnext", "strict": true, - "lib": ["es6", "dom", "es2016", "es2017"], + "lib": ["dom", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "es2021"], "sourceMap": true, "allowJs": false, "declaration": true, From 39197fa12895bf0ca21256fc0e034b0de939968a Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 10 Jun 2023 13:37:25 +0200 Subject: [PATCH 024/243] docs: update content --- packages/docs/forms/checkbox.md | 6 +++++ packages/docs/forms/floating-labels.md | 8 +++++- packages/docs/forms/input-group.md | 6 +++++ packages/docs/forms/input.md | 18 +++++++++++++ packages/docs/forms/radio.md | 6 +++++ packages/docs/forms/range.md | 14 +++++++--- packages/docs/forms/select.md | 7 +++++ packages/docs/forms/switch.md | 6 +++++ packages/docs/forms/textarea.md | 14 ++++++++++ packages/docs/forms/validation.md | 37 ++++++++++++++++++++++++++ 10 files changed, 117 insertions(+), 5 deletions(-) diff --git a/packages/docs/forms/checkbox.md b/packages/docs/forms/checkbox.md index 2a4cec18..ceced278 100644 --- a/packages/docs/forms/checkbox.md +++ b/packages/docs/forms/checkbox.md @@ -135,6 +135,12 @@ Different variants of button, such at the various outlined styles, are supported ``` +## Customizing + +### SASS variables + + + ## API !!!include(./api/form/CFormCheck.api.md)!!! \ No newline at end of file diff --git a/packages/docs/forms/floating-labels.md b/packages/docs/forms/floating-labels.md index 7ca253d3..75980909 100644 --- a/packages/docs/forms/floating-labels.md +++ b/packages/docs/forms/floating-labels.md @@ -247,4 +247,10 @@ When working with the CoreUI for Bootstrap grid system, be sure to place form el -``` \ No newline at end of file +``` + +## Customizing + +### SASS variables + + \ No newline at end of file diff --git a/packages/docs/forms/input-group.md b/packages/docs/forms/input-group.md index e263aecf..d8540628 100644 --- a/packages/docs/forms/input-group.md +++ b/packages/docs/forms/input-group.md @@ -536,6 +536,12 @@ Input groups include support for custom selects and custom file inputs. Browser ``` +## Customizing + +### SASS variables + + + ## API !!!include(./api/form/CInputGroup.api.md)!!! \ No newline at end of file diff --git a/packages/docs/forms/input.md b/packages/docs/forms/input.md index b4c07adc..211afd82 100644 --- a/packages/docs/forms/input.md +++ b/packages/docs/forms/input.md @@ -230,6 +230,24 @@ If you want to have `` elements in your form styled as plain tex /> ``` +## Customizing + +### SASS variables + +`$input-*` are shared across most of our form controls (and not buttons). + + + +`$form-label-*` and `$form-text-*` are for our ``s and `` component. + + + + + +`$form-file-*` are for file input. + + + ## API !!!include(./api/form/CFormInput.api.md)!!! diff --git a/packages/docs/forms/radio.md b/packages/docs/forms/radio.md index 7ee5cbac..3a942a5e 100644 --- a/packages/docs/forms/radio.md +++ b/packages/docs/forms/radio.md @@ -117,6 +117,12 @@ Different variants of button, such at the various outlined styles, are supported ``` +## Customizing + +### SASS variables + + + ## API !!!include(./api/form/CFormCheck.api.md)!!! diff --git a/packages/docs/forms/range.md b/packages/docs/forms/range.md index 4a7dec20..39b1d0d9 100644 --- a/packages/docs/forms/range.md +++ b/packages/docs/forms/range.md @@ -32,10 +32,10 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. ::: demo - + ::: ```vue - + ``` ## Steps @@ -43,12 +43,18 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `:step="0.5"`. ::: demo - + ::: ```vue - + ``` +## Customizing + +### SASS variables + + + ## API !!!include(./api/form/CFormRange.api.md)!!! \ No newline at end of file diff --git a/packages/docs/forms/select.md b/packages/docs/forms/select.md index e70dd0da..98f33a18 100644 --- a/packages/docs/forms/select.md +++ b/packages/docs/forms/select.md @@ -128,6 +128,13 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara ``` + +## Customizing + +### SASS variables + + + ## API !!!include(./api/form/CFormSelect.api.md)!!! \ No newline at end of file diff --git a/packages/docs/forms/switch.md b/packages/docs/forms/switch.md index 5286fe98..657ceef2 100644 --- a/packages/docs/forms/switch.md +++ b/packages/docs/forms/switch.md @@ -54,6 +54,12 @@ Put your switches on the opposite side by adding `reverse` boolean property. ``` +## Customizing + +### SASS variables + + + ## API !!!include(./api/form/CFormSwitch.api.md)!!! \ No newline at end of file diff --git a/packages/docs/forms/textarea.md b/packages/docs/forms/textarea.md index c0cb5127..c9754840 100644 --- a/packages/docs/forms/textarea.md +++ b/packages/docs/forms/textarea.md @@ -82,6 +82,20 @@ Add the `readonly` boolean attribute on an textarea to prevent modification of t > ``` +## Customizing + +### SASS variables + +`$input-*` are shared across most of our form controls (and not buttons). + + + +`$form-label-*` and `$form-text-*` are for our ``s and `` component. + + + + + ## API !!!include(./api/form/CFormTextarea.api.md)!!! diff --git a/packages/docs/forms/validation.md b/packages/docs/forms/validation.md index 7af4216b..9e7af3db 100644 --- a/packages/docs/forms/validation.md +++ b/packages/docs/forms/validation.md @@ -804,6 +804,43 @@ If your form layout allows it, you can swap the text for the tooltip to display ``` +## Customizing + +### CSS variables + +CoreUI forms components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +These variables are also color mode adaptive, meaning they change color while in dark mode. + +### SASS variables + + + + + + + +### SASS mixins + +Two mixins are combined, through our loop, to generate our form validation feedback styles. + + + +### SASS maps +This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. + + + +Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. + +### SASS loops + +Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. + + + + ## API !!!include(./api/CChart.api.md)!!! \ No newline at end of file From 7f1fc3bd4eb6d2097ff3a34c600872eea07e4278 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 12 Jun 2023 23:59:13 +0200 Subject: [PATCH 043/243] refactor(useColorModes): change `onMounted` to `onBeforeMount` --- packages/coreui-vue/src/composables/useColorModes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/composables/useColorModes.ts b/packages/coreui-vue/src/composables/useColorModes.ts index 06db746e..4b344a89 100644 --- a/packages/coreui-vue/src/composables/useColorModes.ts +++ b/packages/coreui-vue/src/composables/useColorModes.ts @@ -1,4 +1,4 @@ -import { onMounted, ref, watch } from 'vue' +import { onBeforeMount, ref, watch } from 'vue' const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName) const setStoredTheme = (localStorageItemName: string, colorMode: string) => @@ -32,7 +32,7 @@ export const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') setTheme(colorMode.value) }) - onMounted(() => { + onBeforeMount(() => { if (typeof getStoredTheme(localStorageItemName) === 'string') { setTheme(colorMode.value) } From e6d18a1098b4627dd58498d52a18f6714adb9a94 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 12 Jun 2023 23:59:47 +0200 Subject: [PATCH 044/243] chore: update dependencies and devDependencies --- packages/docs/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index c8359a3e..937db90c 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -12,7 +12,8 @@ "@coreui/coreui": "^4.3.0-beta.0", "@coreui/icons": "^3.0.1", "@coreui/icons-vue": "^2.0.0", - "@coreui/vue-chartjs": "^2.0.1", + "@coreui/utils": "^2.0.2", + "@coreui/vue-chartjs": "^2.1.0", "@docsearch/css": "^3.5.0", "@docsearch/js": "^3.5.0", "@vuepress/plugin-register-components": "2.0.0-beta.62", From f4519d4326532bd1168f62a7460cdddc65a3121f Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 13 Jun 2023 00:00:05 +0200 Subject: [PATCH 045/243] docs: update theme --- packages/docs/.vuepress/theme-coreui/templates/build.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/.vuepress/theme-coreui/templates/build.html b/packages/docs/.vuepress/theme-coreui/templates/build.html index 5ba656d6..0ffbc946 100644 --- a/packages/docs/.vuepress/theme-coreui/templates/build.html +++ b/packages/docs/.vuepress/theme-coreui/templates/build.html @@ -5,7 +5,7 @@ + + +
    - \ No newline at end of file + From d714fb856ed1fe8fe997bdcb10dd8b462adc26ce Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 15 Jun 2023 23:58:49 +0200 Subject: [PATCH 053/243] fix: add proper directives names --- packages/coreui-vue/src/directives/v-c-tooltip.ts | 1 + packages/coreui-vue/src/index.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/coreui-vue/src/directives/v-c-tooltip.ts b/packages/coreui-vue/src/directives/v-c-tooltip.ts index baa371c2..20b0c09d 100644 --- a/packages/coreui-vue/src/directives/v-c-tooltip.ts +++ b/packages/coreui-vue/src/directives/v-c-tooltip.ts @@ -40,6 +40,7 @@ const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOp } export default { + name: 'c-tooltip', mounted(el: HTMLElement, binding: DirectiveBinding): void { const value = binding.value const content = typeof value === 'string' ? value : value.content ?? '' diff --git a/packages/coreui-vue/src/index.ts b/packages/coreui-vue/src/index.ts index 427bcd53..262ecc6b 100644 --- a/packages/coreui-vue/src/index.ts +++ b/packages/coreui-vue/src/index.ts @@ -9,7 +9,7 @@ const CoreuiVue = { } for (const key in Directives) { - app.directive(key, Directives[key]) + app.directive(Directives[key]['name'], Directives[key]) } }, } From daf54e396070998f53cab3a52a22305af23153a4 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 16 Jun 2023 10:06:24 +0200 Subject: [PATCH 054/243] release: v4.9.0-beta.2 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-vue/package.json | 2 +- packages/docs/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index cea3eda8..a71b31fc 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.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.9.0-beta.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 eb9a19fc..a64928e9 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "packages/*" ], "useWorkspaces": true, - "version": "4.9.0-beta.1" + "version": "4.9.0-beta.2" } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 75d5c387..a8bc07f0 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.1", + "version": "4.9.0-beta.2", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/package.json b/packages/docs/package.json index 299eb858..140c3ee8 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "4.9.0-beta.1", + "version": "4.9.0-beta.2", "scripts": { "api": "vue-docgen -c build/docgen.config.js", "dev": "vuepress dev --clean-cache", From 99ddbbcee706b182bb4a82f6e8a67c2c3c80e4b5 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 16 Jun 2023 14:06:07 +0200 Subject: [PATCH 055/243] docs: update theme --- .../docs/.vuepress/theme-coreui/src/client/components/Page.vue | 2 +- .../.vuepress/theme-coreui/src/client/components/ScssDocs.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue index 8beadbf2..4ae63055 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue @@ -3,7 +3,7 @@ v-if="pro_component" class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5" > -

    CoreUI PRO Component

    +

    CoreUI PRO Component

    To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO 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 f398aae2..ae622b73 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue @@ -1,5 +1,5 @@ From 30eac653d708c18e995256b64ca12fbdff835f05 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 16 Jun 2023 14:06:18 +0200 Subject: [PATCH 056/243] docs: update content --- packages/docs/components/widgets.md | 2 +- packages/docs/forms/textarea.md | 4 ++-- packages/docs/forms/validation.md | 4 ++-- packages/docs/getting-started/accessibility.md | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/docs/components/widgets.md b/packages/docs/components/widgets.md index a8bd91a5..77421487 100644 --- a/packages/docs/components/widgets.md +++ b/packages/docs/components/widgets.md @@ -966,7 +966,7 @@ description: