From 30a0ca0645f0d7c69eb763de616809b6ec28b0d1 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 3 Jul 2023 22:04:06 +0200 Subject: [PATCH 001/112] feat(CFormCheck): add support for the `true-value` and `false-value` props, and enhance the handling of `v-model` --- .../src/components/form/CFormCheck.ts | 57 +++++++++++++++++-- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index b6e3df51..63c99288 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.9.0-beta.2 + */ + 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.9.0-beta.2 + */ + 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, From 477dfa6c84007a172860c2fcf999276015a41c64 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 3 Jul 2023 22:04:25 +0200 Subject: [PATCH 002/112] docs: update content --- packages/docs/components/tooltip.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/docs/components/tooltip.md b/packages/docs/components/tooltip.md index a03128d5..92e984ba 100644 --- a/packages/docs/components/tooltip.md +++ b/packages/docs/components/tooltip.md @@ -161,10 +161,7 @@ You can customize the appearance of tooltips using [CSS variables](#css-variable 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 - +