vuestic-ui
Version:
Vue 3 UI Framework
1 lines • 3.43 kB
Source Map (JSON)
{"version":3,"file":"createProps.mjs","sources":["../../../../../src/services/config-transport/createProps.ts"],"sourcesContent":["import { ComponentInternalInstance, Ref } from 'vue'\nimport { injectChildPropsFromParent } from '../../composables/useChildComponents'\nimport { Props } from './shared'\n\nconst KEBAB_CASE_REGEX = /([a-z0-9])([A-Z])/g\n\nconst toKebabCase = (str: string) => str.replace(KEBAB_CASE_REGEX, '$1-$2').toLowerCase()\n\nconst findCamelCased = (obj: Record<string, unknown>, key: string) => {\n if (key in obj) { return obj[key] }\n\n return obj[toKebabCase(key)]\n}\n\n/**\n * @param propsFromConfig Ref of custom props. Required to be ref so vue can rerender component on custom props change.\n * @returns new props object, where some props replaced with props from config.\n */\nexport const createProps = (instance: ComponentInternalInstance, propsFromConfig: Ref<Props>) => {\n /**\n * Reactive and compiled props. Compiled props considering default value, Boolean transformation etc.\n * It is a default props that passed to setup function.\n */\n const instanceProps: Props = instance.props\n\n const childPropsFromParent = injectChildPropsFromParent()\n\n return new Proxy(instanceProps, {\n get: (target, key: string) => {\n if (typeof key !== 'string') { return target[key] }\n\n /**\n * Child props is passed from parent component by user.\n * We need to override default props that provided by Vuestic UI with user props.\n */\n const childProp = childPropsFromParent?.value?.[key]\n\n if (childProp !== undefined) {\n return childProp\n }\n\n /**\n * Props passed to VNode. Not compiled at all and not reactive.\n * VNode props contained only props passed from parent.\n */\n const incomingProps: Props = instance.vnode.props || {}\n\n /**\n * Make sure to access both original and from config prop in get.\n * Since instanceProps and propsFromConfig both are reactive, we need to know that both of\n * this objects are dependency of effect where proxy is used.\n * If original prop will not be accessed vue will not track reactivity for original props object.\n */\n const originalProp = target[key]\n const incomingProp = findCamelCased(incomingProps, key)\n\n if (incomingProp !== undefined) {\n return originalProp\n }\n\n const propFromConfig = propsFromConfig.value?.[key]\n\n // Return prop from config only if user didn't pass props manually\n if (propFromConfig !== undefined) {\n return propFromConfig\n }\n\n return originalProp\n },\n })\n}\n"],"names":[],"mappings":";AAIA,MAAM,mBAAmB;AAEzB,MAAM,cAAc,CAAC,QAAgB,IAAI,QAAQ,kBAAkB,OAAO,EAAE;AAE5E,MAAM,iBAAiB,CAAC,KAA8B,QAAgB;AACpE,MAAI,OAAO,KAAK;AAAE,WAAO,IAAI,GAAG;AAAA,EAAE;AAE3B,SAAA,IAAI,YAAY,GAAG,CAAC;AAC7B;AAMa,MAAA,cAAc,CAAC,UAAqC,oBAAgC;AAK/F,QAAM,gBAAuB,SAAS;AAEtC,QAAM,uBAAuB;AAEtB,SAAA,IAAI,MAAM,eAAe;AAAA,IAC9B,KAAK,CAAC,QAAQ,QAAgB;;AACxB,UAAA,OAAO,QAAQ,UAAU;AAAE,eAAO,OAAO,GAAG;AAAA,MAAE;AAM5C,YAAA,aAAY,kEAAsB,UAAtB,mBAA8B;AAEhD,UAAI,cAAc,QAAW;AACpB,eAAA;AAAA,MACT;AAMA,YAAM,gBAAuB,SAAS,MAAM,SAAS,CAAA;AAQ/C,YAAA,eAAe,OAAO,GAAG;AACzB,YAAA,eAAe,eAAe,eAAe,GAAG;AAEtD,UAAI,iBAAiB,QAAW;AACvB,eAAA;AAAA,MACT;AAEM,YAAA,kBAAiB,qBAAgB,UAAhB,mBAAwB;AAG/C,UAAI,mBAAmB,QAAW;AACzB,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IACT;AAAA,EAAA,CACD;AACH;"}