/
index.ts
119 lines (100 loc) · 2.23 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { readonly, ref, watch } from 'vue-demi'
import type { Ref } from 'vue-demi'
import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
import type { MaybeRef } from '@vueuse/shared'
import type { ConfigurableDocument } from '../_configurable'
import { defaultDocument } from '../_configurable'
export interface UseStyleTagOptions extends ConfigurableDocument {
/**
* Media query for styles to apply
*/
media?: string
/**
* Load the style immediately
*
* @default true
*/
immediate?: boolean
/**
* Manual controls the timing of loading and unloading
*
* @default false
*/
manual?: boolean
/**
* DOM id of the style tag
*
* @default auto-incremented
*/
id?: string
}
export interface UseStyleTagReturn {
id: string
css: Ref<string>
load: () => void
unload: () => void
isLoaded: Readonly<Ref<boolean>>
}
let _id = 0
/**
* Inject <style> element in head.
*
* Overload: Omitted id
*
* @see https://vueuse.org/useStyleTag
* @param css
* @param options
*/
export function useStyleTag(
css: MaybeRef<string>,
options: UseStyleTagOptions = {},
): UseStyleTagReturn {
const isLoaded = ref(false)
const {
document = defaultDocument, immediate = true,
manual = false,
id = `vueuse_styletag_${++_id}`,
} = options
const cssRef = ref(css)
let stop = () => { }
const load = () => {
if (!document)
return
const el = (document.getElementById(id) || document.createElement('style')) as HTMLStyleElement
if (!el.isConnected) {
el.type = 'text/css'
el.id = id
if (options.media)
el.media = options.media
document.head.appendChild(el)
}
if (isLoaded.value)
return
stop = watch(
cssRef,
(value) => {
el.innerText = value
},
{ immediate: true },
)
isLoaded.value = true
}
const unload = () => {
if (!document || !isLoaded.value)
return
stop()
document.head.removeChild(document.getElementById(id) as HTMLStyleElement)
isLoaded.value = false
}
if (immediate && !manual)
tryOnMounted(load)
if (!manual)
tryOnScopeDispose(unload)
return {
id,
css: cssRef,
unload,
load,
isLoaded: readonly(isLoaded),
}
}