Merge pull request #6967 from nextcloud-libraries/chore/refactor-nc-icon

refactor(NcIconSvgWrapper): migrate component to Typescript and script-setup

Author: susnux

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -8,7 +8,7 @@ import { mdiArrowRight } from '@mdi/js'
 import { emit } from '@nextcloud/event-bus'
 import { onBeforeUnmount, watch } from 'vue'
 import NcButton from '../NcButton/index.ts'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { t } from '../../l10n.js'
 

src/components/NcAvatar/NcAvatar.vue

@@ -239,7 +239,7 @@ import NcActionLink from '../NcActionLink/index.js'
 import NcActionRouter from '../NcActionRouter/index.js'
 import NcActionText from '../NcActionText/index.js'
 import NcButton from '../NcButton/index.ts'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
 import NcActionButton from '../NcActionButton/index.js'

src/components/NcDialogButton/NcDialogButton.vue

@@ -31,7 +31,7 @@ import { ref } from 'vue'
 import { t } from '../../l10n.js'
 
 import NcButton from '../NcButton/index'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 const props = withDefaults(defineProps<{

src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue

@@ -158,6 +158,80 @@ export default {
 ```
 </docs>
 
+<script setup lang="ts">
+import { computed, warn } from 'vue'
+import DOMPurify from 'dompurify'
+
+const props = withDefaults(defineProps<{
+	/**
+	 * Make the icon directional, meaning it is langauge direction aware.
+	 * If the icon is placed in a right-to-left context it will be mirrored vertically.
+	 */
+	directional?: boolean
+
+	/**
+	 * 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
+
+	/**
+	 * Raw SVG string to render
+	 */
+	svg?: string
+
+	/**
+	 * Label of the icon, used in aria-label
+	 */
+	name?: string
+
+	/**
+	 * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+	 */
+	path?: string
+
+	/**
+	 * Size of the icon to show. Only use if not using within an icon slot.
+	 * Defaults to 20px which is the Nextcloud icon size for all icon slots.
+	 */
+	size?: number | 'auto'
+}>(), {
+	name: undefined,
+	path: '',
+	size: 20,
+	svg: '',
+})
+
+/**
+ * Icon size used in CSS
+ */
+const iconSize = computed(() => typeof props.size === 'number' ? `${props.size}px` : props.size)
+
+/**
+ * The sanitized SVG or undefined if path shall be used
+ */
+const cleanSvg = computed(() => {
+	if (!props.svg || props.path) {
+		return
+	}
+
+	const svg = DOMPurify.sanitize(props.svg)
+
+	const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')
+
+	if (svgDocument.querySelector('parsererror')) {
+		warn('SVG is not valid')
+		return ''
+	}
+
+	if (svgDocument.documentElement.id) {
+		svgDocument.documentElement.removeAttribute('id')
+	}
+
+	return svgDocument.documentElement.outerHTML
+})
+</script>
+
 <template>
 	<span :aria-hidden="name ? undefined : 'true'"
 		:aria-label="name || undefined"
@@ -175,100 +249,6 @@ export default {
 	</span>
 </template>
 
-<script>
-import { warn } from 'vue'
-import DOMPurify from 'dompurify'
-
-export default {
-	name: 'NcIconSvgWrapper',
-
-	props: {
-		/**
-		 * Make the icon directional, meaning it is langauge direction aware.
-		 * If the icon is placed in a right-to-left context it will be mirrored vertically.
-		 */
-		directional: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * 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: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Raw SVG string to render
-		 */
-		svg: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Label of the icon, used in aria-label
-		 */
-		name: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
-		 */
-		path: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Size of the icon to show. Only use if not using within an icon slot.
-		 * Defaults to 20px which is the Nextcloud icon size for all icon slots.
-		 * @default 20
-		 */
-		size: {
-			type: [Number, String],
-			default: 20,
-			validator: (value) => typeof value === 'number' || value === 'auto',
-		},
-	},
-
-	computed: {
-		/**
-		 * Icon size used in CSS
-		 */
-		iconSize() {
-			return typeof this.size === 'number' ? `${this.size}px` : this.size
-		},
-
-		cleanSvg() {
-			if (!this.svg || this.path) {
-				return
-			}
-
-			const svg = DOMPurify.sanitize(this.svg)
-
-			const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')
-
-			if (svgDocument.querySelector('parsererror')) {
-				warn('SVG is not valid')
-				return ''
-			}
-
-			if (svgDocument.documentElement.id) {
-				svgDocument.documentElement.removeAttribute('id')
-			}
-
-			return svgDocument.documentElement.outerHTML
-		},
-	},
-}
-</script>
-
 <style lang="scss" scoped>
 .icon-vue {
 	display: flex;

src/components/NcIconSvgWrapper/index.js src/components/NcIconSvgWrapper/index.tssrc/components/NcIconSvgWrapper/index.js renamed to src/components/NcIconSvgWrapper/index.ts

@@ -145,7 +145,7 @@ It might be used for list rendering or within the multiselect for example
 <script>
 import NcAvatar from '../NcAvatar/index.js'
 import NcHighlight from '../NcHighlight/index.js'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'
 
 import { userStatus } from '../../mixins/index.js'
 

src/components/NcListItemIcon/NcListItemIcon.vue

@@ -339,7 +339,7 @@ import { t } from '../../l10n.js'
 
 import NcActions from '../NcActions/index.js'
 import NcButton from '../NcButton/index.ts'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'
 import Timer from '../../utils/Timer.js'
 
 import Close from 'vue-material-design-icons/Close.vue'

src/components/NcModal/NcModal.vue

@@ -58,7 +58,7 @@ export { default as NcGuestContent } from './NcGuestContent/index.ts'
 export { default as NcHeaderButton } from './NcHeaderButton/index.ts'
 export { default as NcHeaderMenu } from './NcHeaderMenu/index.js'
 export { default as NcHighlight } from './NcHighlight/index.js'
-export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'
+export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.ts'
 export { default as NcInputField } from './NcInputField/index.js'
 export { default as NcListItem } from './NcListItem/index.js'
 export { default as NcListItemIcon } from './NcListItemIcon/index.js'