chore: adjust for Vue 2

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcAssistantButton/NcAssistantButton.vue

@@ -20,13 +20,13 @@
 		<p>Primary</p>
 		<NcAssistantButton
 			aria-label="Generate content"
-			:disabled
-			:text>
+			:disabled="disabled"
+			:text="text">
 		</NcAssistantButton>
 		<NcAssistantButton
 			aria-label="Generate content"
-			:disabled
-			:text
+			:disabled="disabled"
+			:text="text"
 			variant="primary">
 		</NcAssistantButton>
 	</div>
@@ -93,63 +93,66 @@ button {
 ```
 </docs>
 
-<script setup lang="ts">
+<script setup>
 import { mdiCreation } from '@mdi/js'
 import NcAssistantIcon from '../NcAssistantIcon/NcAssistantIcon.vue'
 import NcButton from '../NcButton/NcButton.vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 
-withDefaults(defineProps<{
+defineProps({
 	/**
 	 * Toggles the disabled state of the button on and off.
 	 */
-	disabled?: boolean
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 
 	/**
 	 * The readable text of the button.
 	 * Can be overriden by using the `default` slot.
 	 *
 	 * If neither this is set nor the `default` slot is used, you will have to set at least `aria-label` or `aria-labelledby`.
 	 */
-	text?: string
+	text: {
+		type: String,
+		default: '',
+	},
 
 	/**
 	 * The button variant.
 	 * In most cases the `secondary` style should be used.
 	 */
-	variant?: 'primary' | 'secondary'
-}>(), {
-	text: '',
-	variant: 'secondary',
+	variant: {
+		type: String,
+		default: 'secondary',
+	},
 })
 
-defineEmits<{
+defineEmits([
 	/**
 	 * The mouse click event when the button is triggered.
 	 */
-	click: [MouseEvent]
-}>()
+	'click',
+])
 </script>
 
 <template>
-	<div
-		:class="[{
-			[$style.assistantButton_disabled!]: disabled,
-			[$style.assistantButton_primary!]: variant === 'primary',
-		}, $style.assistantButton]">
-		<NcButton
-			:class="$style.assistantButton__button"
-			:disabled
+	<div :class="[{
+		[$style.assistantButton_disabled]: disabled,
+		[$style.assistantButton_primary]: variant === 'primary',
+	}, $style.assistantButton]">
+		<NcButton :class="$style.assistantButton__button"
+			:disabled="disabled"
 			variant="tertiary"
 			@click="$emit('click', $event)">
 			<template #icon>
-				<NcIconSvgWrapper
-					v-if="variant === 'primary'"
+				<NcIconSvgWrapper v-if="variant === 'primary'"
 					:class="$style.assistantButton__icon"
 					:path="mdiCreation" />
 				<NcAssistantIcon v-else />
 			</template>
-			<template v-if="text || $slots.default" #default>
+			<template v-if="text || $scopedSlots.default" #default>
 				<div :class="$style.assistantButton__text">
 					<slot>{{ text }}</slot>
 				</div>

src/components/NcAssistantContent/NcAssistantContent.vue

@@ -43,30 +43,23 @@
 ```
 </docs>
 
-<script setup lang="ts">
-import type { Slot } from 'vue'
-import type { VueClassType } from '../../utils/VueTypes.ts'
+<script setup>
 
-withDefaults(defineProps<{
+defineProps({
 	/**
 	 * Classes to assign to the content container
 	 */
-	contentClasses?: VueClassType
-}>(), {
-	contentClasses: '',
+	contentClasses: {
+		type: [String, Array, Object],
+		default: '',
+	},
 })
-
-defineSlots<{
-	/**
-	 * The content to be shown.
-	 */
-	default?: Slot
-}>()
 </script>
 
 <template>
 	<div :class="$style.assistantContent">
 		<div :class="[$style.assistantContent__inner, contentClasses]">
+			<!-- @slot The content to be shown. -->
 			<slot />
 		</div>
 	</div>

src/components/NcAssistantIcon/NcAssistantIcon.vue

@@ -20,33 +20,36 @@
 ```
 </docs>
 
-<script setup lang="ts">
+<script setup>
 import { mdiCreation } from '@mdi/js'
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
+const props = defineProps({
 	/**
 	 * Set if the icon should be used as inline content e.g. within text.
 	 * By default the icon is made a block element for use inside `icon`-slots.
 	 */
-	inline?: boolean
+	inline: {
+		type: Boolean,
+		default: false,
+	},
 
 	/**
 	 * Size of the icon.
 	 * Defaults to the proper size to be used in buttons and other interactive elements
 	 * like all `Nc*` components with an icon slot.
 	 */
-	size?: number
-}>(), {
-	size: 20,
+	size: {
+		type: Number,
+		default: 20,
+	},
 })
 
 const sizePx = computed(() => `${props.size}px`)
 </script>
 
 <template>
-	<span
-		aria-hidden="true"
+	<span aria-hidden="true"
 		:class="[$style.assistantIcon, inline && $style.assistantIcon_inline]"
 		role="img">
 		<svg :class="$style.assistantIcon__svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">