quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
51 lines (41 loc) • 1.25 kB
JavaScript
import { ref, computed, watch, onMounted } from 'vue'
import uid from '../../utils/uid/uid.js'
import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
function parseValue (val) {
return val === void 0 || val === null
? null
: val
}
function getId (val, required) {
return val === void 0 || val === null
? (required === true ? `f_${ uid() }` : null)
: val
}
/**
* Returns an "id" which is a ref() that can be used as
* a unique identifier to apply to a DOM node attribute.
*
* On SSR, it takes care of generating the id on the client side (only) to
* avoid hydration errors.
*/
export default function ({ getValue, required = true } = {}) {
if (isRuntimeSsrPreHydration.value === true) {
const id = getValue !== void 0
? ref(parseValue(getValue()))
: ref(null)
if (required === true && id.value === null) {
onMounted(() => {
id.value = `f_${ uid() }` // getId(null, true)
})
}
if (getValue !== void 0) {
watch(getValue, newId => {
id.value = getId(newId, required)
})
}
return id
}
return getValue !== void 0
? computed(() => getId(getValue(), required))
: ref(`f_${ uid() }`) // getId(null, true)
}