@dataloop-ai/components 0.18.13 → 0.18.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.13",
+  "version": "0.18.14",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlAccordion/DlAccordion.vue

@@ -60,7 +60,7 @@ export default defineComponent({
         DlEmptyState
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/basic/DlAlert/DlAlert.vue

@@ -80,7 +80,7 @@ export default defineComponent({
         DlIcon
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/basic/DlGrid/DlGrid.vue

@@ -20,8 +20,8 @@ import {
 
 export default defineComponent({
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: {
@@ -41,7 +41,7 @@ export default defineComponent({
             default: 3
         }
     },
-    emits: ['update:modelValue', 'layout-changed'],
+    emits: ['update:model-value', 'layout-changed'],
     computed: {
         gridStyles(): object {
             return {
@@ -129,7 +129,7 @@ export default defineComponent({
                 this.maxElementsPerRow
             )
             // Update modelValue is required to trigger visualization of the changes
-            this.$emit('update:modelValue', newLayout)
+            this.$emit('update:model-value', newLayout)
             if (e.detail.endDragging) {
                 this.layoutChanged()
             }

package/src/components/basic/DlPanelContainer/DlPanelContainer.vue

@@ -139,7 +139,7 @@ export default defineComponent({
         DlEmptyState
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/basic/DlPopup/DlPopup.vue

@@ -142,7 +142,7 @@ export default defineComponent({
         DlEmptyState
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlCharts/components/DlBrush.vue

@@ -77,8 +77,8 @@ export default defineComponent({
         BrushThumb
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         ...useSliderProps,

package/src/components/compound/DlCodeEditor/DlCodeEditor.vue

@@ -33,7 +33,7 @@ export default defineComponent({
         CodeEditor
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlCodeEditor/components/CodeEditor.vue

@@ -136,7 +136,7 @@ export default defineComponent({
         DlButton
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlDateTime/DlDatePicker/DlDatePicker.vue

@@ -17,7 +17,7 @@
                     :disabled="disabled"
                     :with-left-chevron="true"
                     @prev="handleDatePrev"
-                    @update:modelValue="updateDateInterval"
+                    @update:model-value="updateDateInterval"
                     @mousedown="handleMousedown"
                     @mouseenter="handleMouseenter"
                 />
@@ -32,7 +32,7 @@
                     :disabled="disabled"
                     :with-right-chevron="true"
                     @next="handleDateNext"
-                    @update:modelValue="updateDateInterval"
+                    @update:model-value="updateDateInterval"
                     @mousedown="handleMousedown"
                     @mouseenter="handleMouseenter"
                 />
@@ -49,7 +49,7 @@
                     :available-range="availableRange"
                     :disabled="disabled"
                     :with-left-chevron="true"
-                    @update:modelValue="updateDateInterval"
+                    @update:model-value="updateDateInterval"
                     @prev="handleMonthPrev"
                     @mousedown="handleMousedown"
                     @mouseenter="handleMouseenter"
@@ -62,7 +62,7 @@
                     :available-range="availableRange"
                     :disabled="disabled"
                     :with-right-chevron="true"
-                    @update:modelValue="updateDateInterval"
+                    @update:model-value="updateDateInterval"
                     @next="handleMonthNext"
                     @mousedown="handleMousedown"
                     @mouseenter="handleMouseenter"
@@ -87,8 +87,8 @@ export default defineComponent({
         DlMonthCalendar
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: {
@@ -110,7 +110,7 @@ export default defineComponent({
         normalizeCalendars: Boolean,
         disabled: Boolean
     },
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:model-value', 'change'],
     data(): {
         uuid: string
         timeout: number | null
@@ -193,7 +193,7 @@ export default defineComponent({
         },
         updateModelValue(value: DateInterval) {
             if (this.disabled) return
-            this.$emit('update:modelValue', value)
+            this.$emit('update:model-value', value)
             this.$emit('change', value)
         },
 

package/src/components/compound/DlDateTime/DlDatePicker/components/DlCalendar.vue

@@ -71,8 +71,8 @@ export default defineComponent({
         DlIcon
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         title: {
@@ -96,7 +96,7 @@ export default defineComponent({
         disabled: Boolean
     },
     emits: [
-        'update:modelValue',
+        'update:model-value',
         'change',
         'mousedown',
         'mouseenter',
@@ -127,7 +127,7 @@ export default defineComponent({
                 to: value.toDate()
             }
 
-            this.$emit('update:modelValue', newDate)
+            this.$emit('update:model-value', newDate)
             this.$emit('change', newDate)
         },
         getDayStyle(value: Partial<CalendarDate>) {

package/src/components/compound/DlDateTime/DlDatePicker/components/DlMonthCalendar.vue

@@ -53,8 +53,8 @@ export default defineComponent({
         DlIcon
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         title: {
@@ -74,7 +74,7 @@ export default defineComponent({
         disabled: Boolean
     },
     emits: [
-        'update:modelValue',
+        'update:model-value',
         'change',
         'mousedown',
         'mouseenter',
@@ -109,7 +109,7 @@ export default defineComponent({
                 from: date,
                 to: date
             }
-            this.$emit('update:modelValue', newDate)
+            this.$emit('update:model-value', newDate)
             this.$emit('change', newDate)
         },
 

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -43,13 +43,15 @@
                             :available-range="availableRange"
                             :disabled="isInputDisabled"
                             :normalize-calendars="normalizeCalendars"
-                            @update:modelValue="updateDateIntervalWithAutoClose"
+                            @update:model-value="
+                                updateDateIntervalWithAutoClose
+                            "
                         />
                         <dl-time-picker
                             v-if="showTime && typeState === 'day'"
                             :disabled="isInputDisabled"
                             :model-value="dateInterval"
-                            @update:modelValue="updateDateInterval"
+                            @update:model-value="updateDateInterval"
                         />
                     </div>
                 </div>
@@ -85,8 +87,8 @@ export default defineComponent({
         DlMenu
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: {
@@ -118,7 +120,7 @@ export default defineComponent({
             default: 'Set Due Date'
         }
     },
-    emits: ['update:modelValue', 'set-type', 'change'],
+    emits: ['update:model-value', 'set-type', 'change'],
     data(): {
         uuid: string
         dateInterval: DateInterval | null
@@ -426,7 +428,7 @@ export default defineComponent({
                     59
                 )
             }
-            this.$emit('update:modelValue', value)
+            this.$emit('update:model-value', value)
             this.$emit('change', value)
         },
         updateDateIntervalWithAutoClose(value: DateInterval) {

package/src/components/compound/DlDateTime/DlTimePicker/DlTimePicker.vue

@@ -11,7 +11,7 @@
             <dl-time-picker-input
                 :disabled="disableInput"
                 :model-value="formatedFromValue"
-                @update:modelValue="handleFromTimeChange"
+                @update:model-value="handleFromTimeChange"
             />
         </div>
         <div class="dl-time-picker--dash">
@@ -25,7 +25,7 @@
             <dl-time-picker-input
                 :disabled="disableInput"
                 :model-value="formatedToValue"
-                @update:modelValue="handleToTimeChange"
+                @update:model-value="handleToTimeChange"
             />
         </div>
     </div>
@@ -49,7 +49,7 @@ export default defineComponent({
         },
         disabled: Boolean
     },
-    emits: ['update:modelValue'],
+    emits: ['update:model-value'],
     data() {
         return {
             uuid: `dl-time-picker-${v4()}`
@@ -104,7 +104,7 @@ export default defineComponent({
             newFrom.hours(parseInt(value.hour)).minutes(parseInt(value.minute))
 
             if (newFrom.isBefore(new CustomDate(this.modelValue.to))) {
-                this.$emit('update:modelValue', {
+                this.$emit('update:model-value', {
                     from: newFrom.toDate(),
                     to: this.modelValue.to
                 })
@@ -116,7 +116,7 @@ export default defineComponent({
             newTo.hours(parseInt(value.hour)).minutes(parseInt(value.minute))
 
             if (newTo.isAfter(new CustomDate(this.modelValue.from))) {
-                this.$emit('update:modelValue', {
+                this.$emit('update:model-value', {
                     from: this.modelValue.from,
                     to: newTo.toDate()
                 })

package/src/components/compound/DlDateTime/DlTimePicker/components/DlTimePickerInput.vue

@@ -97,7 +97,7 @@ export default defineComponent({
         },
         disabled: Boolean
     },
-    emits: ['update:modelValue'],
+    emits: ['update:model-value'],
     data(): {
         options: Time[]
     } {
@@ -230,14 +230,14 @@ export default defineComponent({
         },
 
         handleHourChange(value: string) {
-            this.$emit('update:modelValue', {
+            this.$emit('update:model-value', {
                 hour: value,
                 minute: this.modelValue.minute
             })
         },
 
         handleMinuteChange(value: string) {
-            this.$emit('update:modelValue', {
+            this.$emit('update:model-value', {
                 hour: this.modelValue.hour,
                 minute: value
             })

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -91,8 +91,8 @@ export default defineComponent({
     name: 'DlDialogBox',
     components: { DlIcon, DlEmptyState },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         width: { type: [Number, String], default: 400 },
@@ -120,7 +120,7 @@ export default defineComponent({
             default: 'var(--dl-z-index-dialog)'
         }
     },
-    emits: ['update:modelValue', 'hide', 'show'],
+    emits: ['update:model-value', 'hide', 'show'],
     data(): {
         uuid: string
         show: boolean
@@ -224,7 +224,7 @@ export default defineComponent({
                 (this.$el as HTMLElement).blur()
             }
             this.show = false
-            this.$emit('update:modelValue', false)
+            this.$emit('update:model-value', false)
             if (!this.hasParent) {
                 document.documentElement.style.overflow = 'auto'
             }
@@ -234,7 +234,7 @@ export default defineComponent({
         },
         openModal() {
             this.show = true
-            this.$emit('update:modelValue', true)
+            this.$emit('update:model-value', true)
             if (!this.hasParent) {
                 document.documentElement.style.overflow = 'hidden'
             }

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -199,7 +199,7 @@ export default defineComponent({
         ButtonGroup
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {
@@ -257,7 +257,7 @@ export default defineComponent({
     },
     emits: [
         'update:model-value',
-        'update:modelValue',
+        'update:model-value',
         'click',
         'before-show',
         'show',
@@ -293,7 +293,7 @@ export default defineComponent({
 
         const menuModel = computed({
             get: () => props.modelValue,
-            set: (val) => emit('update:modelValue', val)
+            set: (val) => emit('update:model-value', val)
         })
 
         const iconClass = computed(() => {
@@ -344,7 +344,7 @@ export default defineComponent({
 
         function onShow(e: Event) {
             emit('show', e)
-            emit('update:modelValue', true)
+            emit('update:model-value', true)
         }
 
         function onBeforeHide(e: Event) {
@@ -354,7 +354,7 @@ export default defineComponent({
 
         function onHide(e: Event) {
             emit('hide', e)
-            emit('update:modelValue', false)
+            emit('update:model-value', false)
         }
 
         function onClick(e: Event) {

package/src/components/compound/DlInput/DlInput.vue

@@ -229,7 +229,7 @@ export default defineComponent({
         DlListItem
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -12,8 +12,8 @@ import { debounce } from 'lodash'
 
 export default defineComponent({
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         /**
@@ -32,7 +32,7 @@ export default defineComponent({
             default: null
         }
     },
-    emits: ['update:modelValue', 'update-prevent', 'align-text'],
+    emits: ['update:model-value', 'update-prevent', 'align-text'],
     data() {
         return {
             jsonEditor: {} as JSONEditor,
@@ -62,7 +62,7 @@ export default defineComponent({
                             this.preventOnChange = false
                             return
                         }
-                        this.$emit('update:modelValue', updatedContent.text)
+                        this.$emit('update:model-value', updatedContent.text)
                         if (this.preventUpdate !== null) {
                             this.$emit('update-prevent', true)
                         }

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -70,7 +70,7 @@ export default defineComponent({
         DlTooltip
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlPagination/DlPagination.vue

@@ -28,7 +28,7 @@
                     :active-color="activeColor"
                     :text-color="textColor"
                     :active-text-color="activeTextColor"
-                    @update:modelValue="setValue"
+                    @update:model-value="setValue"
                 />
                 <quick-navigation
                     v-if="withQuickNavigation"
@@ -36,7 +36,7 @@
                     :max="max"
                     :min="min"
                     :disabled="disabled"
-                    @update:modelValue="setValue"
+                    @update:model-value="setValue"
                 />
             </div>
             <pagination-legend
@@ -67,8 +67,8 @@ export default defineComponent({
         PaginationLegend
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: {
@@ -124,7 +124,7 @@ export default defineComponent({
         withRowsPerPage: Boolean,
         withLegend: Boolean
     },
-    emits: ['update:modelValue', 'update:rowsPerPage'],
+    emits: ['update:model-value', 'update:rowsPerPage'],
     data() {
         return {
             uuid: `dl-pagination-${v4()}`,
@@ -167,7 +167,7 @@ export default defineComponent({
     methods: {
         setValue(value: number) {
             this.value = value
-            this.$emit('update:modelValue', value)
+            this.$emit('update:model-value', value)
         }
     }
 })

package/src/components/compound/DlPagination/components/PageNavigation.vue

@@ -112,8 +112,8 @@ export default defineComponent({
         DlIcon
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: {
@@ -155,7 +155,7 @@ export default defineComponent({
             default: 'dl-color-text-buttons'
         }
     },
-    emits: ['update:modelValue'],
+    emits: ['update:model-value'],
     data() {
         return {
             value: this.modelValue,
@@ -229,7 +229,7 @@ export default defineComponent({
         },
         setPage(value: number) {
             this.set(value)
-            this.$emit('update:modelValue', value)
+            this.$emit('update:model-value', value)
         },
         updateState() {
             this.ellipsesStart = false

package/src/components/compound/DlPagination/components/QuickNavigation.vue

@@ -38,8 +38,8 @@ export default defineComponent({
         DlButton
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: { type: Number, required: true },
@@ -47,7 +47,7 @@ export default defineComponent({
         max: { type: Number, required: true },
         disabled: Boolean
     },
-    emits: ['update:modelValue'],
+    emits: ['update:model-value'],
     data() {
         return {
             inputValue: this.modelValue.toString(),
@@ -71,7 +71,7 @@ export default defineComponent({
                 this.inputValue = this.max.toString()
             }
 
-            this.$emit('update:modelValue', Number(this.inputValue))
+            this.$emit('update:model-value', Number(this.inputValue))
         },
         handleKeyDown(e: KeyboardEvent) {
             if (

package/src/components/compound/DlPagination/components/RowsSelector.vue

@@ -34,8 +34,8 @@ export default defineComponent({
         DlTypography
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         options: {
@@ -52,7 +52,7 @@ export default defineComponent({
         },
         disabled: Boolean
     },
-    emits: ['update:modelValue'],
+    emits: ['update:model-value'],
     computed: {
         hasSingeValue(): boolean {
             return this.options.length <= 1
@@ -60,7 +60,7 @@ export default defineComponent({
     },
     methods: {
         setSelectedItem(val: number) {
-            this.$emit('update:modelValue', val)
+            this.$emit('update:model-value', val)
         }
     }
 })

package/src/components/compound/DlRange/DlRange.vue

@@ -114,7 +114,7 @@ export default defineComponent({
         touchPan: touchPanDirective as any // force any type cause of the vue version
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlSearches/DlSearch/DlSearch.vue

@@ -70,7 +70,7 @@ export default defineComponent({
         DlInput
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlSearches/DlSmartSearch/DlSmartSearch.vue

@@ -23,7 +23,7 @@
                 :default-width="width"
                 @save="saveQueryDialogBoxModel = true"
                 @focus="setFocused"
-                @update:modelValue="debouncedInputModel"
+                @update:model-value="debouncedInputModel"
                 @dql-edit="jsonEditorModel = !jsonEditorModel"
             />
         </div>
@@ -261,8 +261,8 @@ export default defineComponent({
         DlSelect
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         modelValue: {
@@ -321,7 +321,7 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['save-query', 'remove-query', 'search-query', 'update:modelValue'],
+    emits: ['save-query', 'remove-query', 'search-query', 'update:model-value'],
     setup(props, { emit }) {
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
@@ -362,7 +362,7 @@ export default defineComponent({
             const cleanedAliases = revertAliases(bracketless, props.aliases)
             const json = toJSON(cleanedAliases)
             if (!isEqual(json, props.modelValue)) {
-                emit('update:modelValue', json)
+                emit('update:model-value', json)
             }
             const stringified = JSON.stringify(json)
             activeQuery.value.query = stringified

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -158,8 +158,8 @@ export default defineComponent({
         DlMenu
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         status: {
@@ -224,7 +224,7 @@ export default defineComponent({
         }
     },
     emits: [
-        'update:modelValue',
+        'update:model-value',
         'update:expanded',
         'save',
         'search',
@@ -307,7 +307,7 @@ export default defineComponent({
                 }
             }
 
-            emit('update:modelValue', stringValue)
+            emit('update:model-value', stringValue)
         }
 
         const debouncedSetModal = debounce(
@@ -570,7 +570,7 @@ export default defineComponent({
         },
         clearValue() {
             this.cancelBlur = this.cancelBlur === 0 ? 1 : this.cancelBlur
-            this.$emit('update:modelValue', '')
+            this.$emit('update:model-value', '')
             if (!this.focused) {
                 this.focus()
             }
@@ -591,7 +591,7 @@ export default defineComponent({
                 .toString()
                 .replaceAll(' ', ' ')
 
-            this.$emit('update:modelValue', text)
+            this.$emit('update:model-value', text)
         },
         handleScreenButtonClick() {
             this.cancelBlur = this.cancelBlur === 0 ? 1 : this.cancelBlur
@@ -604,7 +604,7 @@ export default defineComponent({
             this.datePickerSelection = val
 
             this.$emit(
-                'update:modelValue',
+                'update:model-value',
                 replaceDateInterval(this.modelValue, val)
             )
         }

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSuggestionsDropdown.vue

@@ -43,7 +43,7 @@ export default defineComponent({
         DlListItem
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {
@@ -90,6 +90,7 @@ export default defineComponent({
             handleOption(value)
         }
         const emitModelValue = (event: any) => {
+            console.log('emit suggestion model change')
             emit('update:model-value', event)
         }
         const handleOption = (item: any) => {

package/src/components/compound/DlSelect/DlSelect.vue

@@ -344,7 +344,7 @@ export default defineComponent({
         DlVirtualScroll
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlSelect/components/DlSelectOption.vue

@@ -116,7 +116,7 @@ export default defineComponent({
         DlIcon
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlSlider/DlSlider.vue

@@ -113,7 +113,7 @@ export default defineComponent({
         DlIcon
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlSlider/components/DlSliderBase.vue

@@ -58,7 +58,7 @@ export default defineComponent({
         touchPan: touchPanDirective as any // force any type cause of the vue version
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlSlider/components/DlSliderInput.vue

@@ -20,7 +20,7 @@ import { getInputValue } from '../utils'
 export default defineComponent({
     name: 'DlSliderInput',
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlStepper/DlStepper.vue

@@ -97,8 +97,8 @@ export default defineComponent({
         DlEmptyState
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         steps: {
@@ -163,7 +163,7 @@ export default defineComponent({
             default: null
         }
     },
-    emits: ['update:modelValue', 'done', 'next', 'prev', 'set-step', 'close'],
+    emits: ['update:model-value', 'done', 'next', 'prev', 'set-step', 'close'],
     data() {
         return {
             uuid: `dl-stepper-${v4()}`,
@@ -207,7 +207,7 @@ export default defineComponent({
     methods: {
         closeStepper() {
             this.$emit('close')
-            this.$emit('update:modelValue', false)
+            this.$emit('update:model-value', false)
         }
     }
 })

package/src/components/compound/DlTabPanels/DlTabPanels.vue

@@ -6,7 +6,7 @@ import { textSlot } from '../../../utils/render'
 export default defineComponent({
     name: 'DlTabPanels',
     model: {
-        prop: 'modelValue'
+        prop: 'model-value'
     },
     props: {
         modelValue: { type: String, required: true }

package/src/components/compound/DlTable/DlTable.vue

@@ -478,7 +478,7 @@
                             @update:rowsPerPage="
                                 (v) => setPagination({ rowsPerPage: v })
                             "
-                            @update:modelValue="
+                            @update:model-value="
                                 (v) => setPagination({ page: v })
                             "
                         />
@@ -1263,7 +1263,7 @@ export default defineComponent({
                 ...computedPagination.value,
                 'update:rowsPerPage': (rowsPerPage: number) =>
                     setPagination({ rowsPerPage }),
-                'update:modelValue': (page: number) => setPagination({ page }),
+                'update:model-value': (page: number) => setPagination({ page }),
                 modelValue: computedPagination.value.page,
                 totalItems: computedRowsNumber.value
             }

package/src/components/compound/DlTabs/DlTabs.vue

@@ -59,7 +59,7 @@ export default defineComponent({
         DlTab
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/compound/DlThumbnailGallery/DlThumbnailGallery.vue

@@ -73,8 +73,8 @@ export default defineComponent({
         DlTooltip
     },
     model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
+        prop: 'model-value',
+        event: 'update:model-value'
     },
     props: {
         /**
@@ -120,7 +120,7 @@ export default defineComponent({
             default: 0.3
         }
     },
-    emits: ['update:modelValue', 'selected'],
+    emits: ['update:model-value', 'selected'],
     data() {
         return {
             currentList: { first: 0, last: this.visibleThumbnails }
@@ -186,7 +186,7 @@ export default defineComponent({
                 : 'slider__arrow--icon--invisible'
         },
         handleThumbnailMousedown(image: string) {
-            this.$emit('update:modelValue', image)
+            this.$emit('update:model-value', image)
             this.$emit('selected', image)
         }
     }

package/src/components/compound/DlToggleButton/DlToggleButton.vue

@@ -43,7 +43,7 @@ export default defineComponent({
     name: 'DlToggleButton',
     components: { DlButton },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {
@@ -60,7 +60,7 @@ export default defineComponent({
             required: true
         }
     },
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:model-value', 'change'],
     data: () => ({
         scopedValue: null as string | number,
         hoverButton: null as string | number
@@ -79,7 +79,7 @@ export default defineComponent({
                     buttonValue = null
                 }
                 this.scopedValue = buttonValue
-                this.$emit('update:modelValue', buttonValue)
+                this.$emit('update:model-value', buttonValue)
             }
         },
         toggleButtons(): DlToggleButtonOption[] {

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -512,7 +512,7 @@
                             @update:rowsPerPage="
                                 (v) => setPagination({ rowsPerPage: v })
                             "
-                            @update:modelValue="
+                            @update:model-value="
                                 (v) => setPagination({ page: v })
                             "
                         />
@@ -1215,7 +1215,7 @@ export default defineComponent({
                 ...computedPagination.value,
                 'update:rowsPerPage': (rowsPerPage: number) =>
                     setPagination({ rowsPerPage }),
-                'update:modelValue': (page: number) => setPagination({ page }),
+                'update:model-value': (page: number) => setPagination({ page }),
                 modelValue: computedPagination.value.page,
                 totalItems: computedRowsNumber.value
             }

package/src/components/essential/DlCheckbox/DlCheckbox.vue

@@ -89,7 +89,7 @@ const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 export default defineComponent({
     name: 'DlCheckbox',
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     },
     inheritAttrs: false,
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/essential/DlRadio/DlRadio.vue

@@ -68,7 +68,7 @@ import { v4 } from 'uuid'
 export default defineComponent({
     name: 'DlRadio',
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -64,7 +64,7 @@ const Any = [Array, Boolean, String, Number, Object]
 export default defineComponent({
     name: 'DlSwitch',
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/components/essential/DlTextArea/DlTextArea.vue

@@ -126,7 +126,7 @@ export default defineComponent({
         DlInfoErrorMessage
     },
     model: {
-        prop: 'modelValue',
+        prop: 'model-value',
         event: 'update:model-value'
     },
     props: {

package/src/hooks/use-anchor.ts

@@ -219,7 +219,7 @@ export default function useAnchor({
         pickAnchorEl()
 
         if (props.modelValue === true && anchorEl.value === null) {
-            emit('update:modelValue', false)
+            emit('update:model-value', false)
         }
     })