feat: global nonce value via ConfigProvider (#1097)

docs/content/meta/ComboboxViewport.md

@@ -16,7 +16,7 @@
   },
   {
     'name': 'nonce',
-    'description': '',
+    'description': '<p>Will add <code>nonce</code> attribute to the style tag which can be used by Content Security Policy. &lt;br&gt; If omitted, inherits globally from <code>ConfigProvider</code>.</p>\n',
     'type': 'string',
     'required': false
   }

docs/content/meta/ConfigProvider.md

@@ -8,6 +8,12 @@
     'required': false,
     'default': '\'ltr\''
   },
+  {
+    'name': 'nonce',
+    'description': '<p>The global <code>nonce</code> value of your application. This will be inherited by the related primitives.</p>\n',
+    'type': 'string',
+    'required': false
+  },
   {
     'name': 'scrollBody',
     'description': '<p>The global scroll body behavior of your application. This will be inherited by the related primitives.</p>\n',

docs/content/meta/ScrollAreaViewport.md

@@ -16,7 +16,7 @@
   },
   {
     'name': 'nonce',
-    'description': '',
+    'description': '<p>Will add <code>nonce</code> attribute to the style tag which can be used by Content Security Policy. &lt;br&gt; If omitted, inherits globally from <code>ConfigProvider</code>.</p>\n',
     'type': 'string',
     'required': false
   }

docs/content/meta/SelectViewport.md

@@ -16,7 +16,7 @@
   },
   {
     'name': 'nonce',
-    'description': '',
+    'description': '<p>Will add <code>nonce</code> attribute to the style tag which can be used by Content Security Policy. &lt;br&gt; If omitted, inherits globally from <code>ConfigProvider</code>.</p>\n',
     'type': 'string',
     'required': false
   }

docs/content/meta/Viewport.md

@@ -16,7 +16,7 @@
   },
   {
     'name': 'nonce',
-    'description': '',
+    'description': '<p>Will add <code>nonce</code> attribute to the style tag which can be used by Content Security Policy. &lt;br&gt; If omitted, inherits globally from <code>ConfigProvider</code>.</p>\n',
     'type': 'string',
     'required': false
   }

packages/radix-vue/src/Combobox/ComboboxViewport.vue

@@ -1,8 +1,13 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
+import { useNonce } from '@/shared/useNonce'
+import { toRefs } from 'vue'
 
 export interface ComboboxViewportProps extends PrimitiveProps {
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.
+   */
   nonce?: string
 }
 </script>
@@ -12,6 +17,9 @@ import { Primitive } from '@/Primitive'
 
 const props = defineProps<ComboboxViewportProps>()
 const { forwardRef } = useForwardExpose()
+
+const { nonce: propNonce } = toRefs(props)
+const nonce = useNonce(propNonce)
 </script>
 
 <template>

packages/radix-vue/src/ConfigProvider/ConfigProvider.vue

@@ -6,6 +6,7 @@ import { createContext } from '@/shared'
 interface ConfigProviderContextValue {
   dir?: Ref<Direction>
   scrollBody?: Ref<boolean | ScrollBodyOption>
+  nonce?: Ref<string | undefined>
   useId?: () => string
 }
 
@@ -23,6 +24,11 @@ export interface ConfigProviderProps {
    * @type boolean | ScrollBodyOption
    */
   scrollBody?: boolean | ScrollBodyOption
+  /**
+   * The global `nonce` value of your application. This will be inherited by the related primitives.
+   * @type string
+   */
+  nonce?: string
   /**
    * The global `useId` injection as a workaround for preventing hydration issue.
    */
@@ -36,14 +42,16 @@ import { toRefs } from 'vue'
 const props = withDefaults(defineProps<ConfigProviderProps>(), {
   dir: 'ltr',
   scrollBody: true,
+  nonce: undefined,
   useId: undefined,
 })
 
-const { dir, scrollBody } = toRefs(props)
+const { dir, scrollBody, nonce } = toRefs(props)
 
 provideConfigProviderContext({
   dir,
   scrollBody,
+  nonce,
   useId: props.useId,
 })
 </script>

packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue

@@ -1,14 +1,18 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
+import { useNonce } from '@/shared/useNonce'
 
 export interface ScrollAreaViewportProps extends PrimitiveProps {
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.
+   */
   nonce?: string
 }
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, toRefs } from 'vue'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { Primitive } from '@/Primitive'
 
@@ -18,6 +22,9 @@ defineOptions({
 
 const props = defineProps<ScrollAreaViewportProps>()
 
+const { nonce: propNonce } = toRefs(props)
+const nonce = useNonce(propNonce)
+
 const rootContext = injectScrollAreaRootContext()
 
 const viewportElement = ref<HTMLElement>()

packages/radix-vue/src/Select/SelectViewport.vue

@@ -1,14 +1,18 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
+import { useNonce } from '@/shared/useNonce'
 
 export interface SelectViewportProps extends PrimitiveProps {
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.
+   */
   nonce?: string
 }
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, toRefs } from 'vue'
 import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { CONTENT_MARGIN } from './utils'
 import {
@@ -17,6 +21,8 @@ import {
 import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 const props = defineProps<SelectViewportProps>()
+const { nonce: propNonce } = toRefs(props)
+const nonce = useNonce(propNonce)
 
 const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 const alignedPositionContext

packages/radix-vue/src/Viewport/Viewport.vue

@@ -1,8 +1,13 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
+import { useNonce } from '@/shared/useNonce'
+import { toRefs } from 'vue'
 
 export interface ViewportProps extends PrimitiveProps {
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.
+   */
   nonce?: string
 }
 </script>
@@ -12,6 +17,9 @@ import { Primitive } from '@/Primitive'
 
 const props = defineProps<ViewportProps>()
 const { forwardRef } = useForwardExpose()
+
+const { nonce: propNonce } = toRefs(props)
+const nonce = useNonce(propNonce)
 </script>
 
 <template>

packages/radix-vue/src/shared/useNonce.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useNonce } from './useNonce'
+import { ref } from 'vue'
+
+describe('useNonce', () => {
+  vi.mock('@/ConfigProvider/ConfigProvider.vue', async () => {
+    return {
+      injectConfigProviderContext: () => {
+        return {
+          nonce: ref('global-nonce'),
+        }
+      },
+    }
+  })
+
+  it('should return global nonce value from ConfigProvider', () => {
+    const nonce = useNonce()
+    expect(nonce.value).toBe('global-nonce')
+  })
+
+  it('should return local nonce value when overridden', () => {
+    const nonce = useNonce(ref('local-nonce'))
+    expect(nonce.value).toBe('local-nonce')
+  })
+})

packages/radix-vue/src/shared/useNonce.ts

@@ -0,0 +1,9 @@
+import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
+import { type Ref, computed, ref } from 'vue'
+
+export function useNonce(nonce?: Ref<string | undefined>) {
+  const context = injectConfigProviderContext({
+    nonce: ref(),
+  })
+  return computed(() => nonce?.value || context.nonce?.value)
+}