{"version":3,"file":"styles.css","mappings":"AA2IA,gBAIA,oDAHA,mCAEA,uDADA,kDAGA","sources":["webpack://@square/maker/./src/components/Theme/src/Theme.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.Theme\"\n\t\t:style=\"styles\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { merge, mergeWith } from 'lodash';\nimport { showWarning } from '@square/maker/utils/debug';\nimport key from './key';\nimport defaultTheme from './default-theme.cjs';\nimport { resolve, getPath } from './utils.cjs';\nimport publicizeVars from './publicize-vars.cjs';\n\n// naive check, just checks for presence of a render field,\n// which is assumed to be a function, which is fine for now\nfunction isVueComponent(value) {\n\treturn value && value.render;\n}\n\n// returns true if value is an array\n// of objects with id fields\n// for the moment this is only for profiles\nfunction isKeyedArray(value) {\n\treturn value?.[0]?.id;\n}\n\nfunction keyedArrayIntoObject(arrayValue) {\n\tconst objectValue = {};\n\tfor (const item of arrayValue) {\n\t\tobjectValue[item.id] = item;\n\t}\n\treturn objectValue;\n}\n\nfunction objectIntoKeyedArray(objectValue) {\n\tconst arrayValue = [];\n\tfor (const [id, item] of Object.entries(objectValue)) {\n\t\titem.id = id;\n\t\tarrayValue.push(item);\n\t}\n\treturn arrayValue;\n}\n\nfunction mergeKeyedArrays(value, mergeValue) {\n\tconst valueObject = keyedArrayIntoObject(value);\n\tconst mergeValueObject = keyedArrayIntoObject(mergeValue);\n\tconst mergedObject = merge(valueObject, mergeValueObject);\n\tconst mergedKeyedArray = objectIntoKeyedArray(mergedObject);\n\treturn mergedKeyedArray;\n}\n\n// recursively merge all objects\n// EXCEPT for Vue components\nfunction mergeStrategy(value, mergeValue) {\n\tif (isVueComponent(mergeValue)) {\n\t\treturn mergeValue;\n\t}\n\n\tif (isKeyedArray(value) && isKeyedArray(mergeValue)) {\n\t\treturn mergeKeyedArrays(value, mergeValue);\n\t}\n\n\t// returning undefined means \"merge values recursively\"\n\t// https://lodash.com/docs/4.17.15#mergeWith\n\treturn undefined;\n}\n\nfunction resolveTheme(data, parentTheme, theme, profileId) {\n\tmergeWith(data, parentTheme, theme, mergeStrategy);\n\tif (profileId) {\n\t\tconst foundProfile = data.profiles[profileId];\n\t\tif (foundProfile) {\n\t\t\tmergeWith(data, foundProfile, mergeStrategy);\n\t\t} else {\n\t\t\tconst validIds = Object.keys(data.profiles);\n\t\t\tshowWarning(`profile ${profileId} doesn't exist within theme, only found: ${validIds}`, 'Theme');\n\t\t}\n\t}\n\tdata.resolve = resolve;\n\tdata.getPath = getPath;\n}\n\nexport default {\n\tinject: {\n\t\tparentTheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: key,\n\t\t},\n\t},\n\tprovide() {\n\t\treturn {\n\t\t\t// provided data needs to be reactive\n\t\t\t[key]: this.$data,\n\t\t};\n\t},\n\tinheritAttrs: false,\n\tprops: {\n\t\ttheme: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t\tprofile: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\tdata() {\n\t\tconst data = {};\n\t\tresolveTheme(data, this.parentTheme, this.theme, this.profile);\n\t\treturn data;\n\t},\n\tcomputed: {\n\t\tstyles() {\n\t\t\treturn publicizeVars(this);\n\t\t},\n\t},\n\twatch: {\n\t\tparentTheme: {\n\t\t\thandler() {\n\t\t\t\tresolveTheme(this.$data, this.parentTheme, this.theme, this.profile);\n\t\t\t},\n\t\t\tdeep: true,\n\t\t\timmediate: true,\n\t\t},\n\t},\n\tbeforeUpdate() {\n\t\t// update theme on prop changes\n\t\tresolveTheme(this.$data, this.parentTheme, this.theme, this.profile);\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Theme {\n\tcolor: $maker-color-body;\n\tfont-weight: $maker-font-body-font-weight;\n\tfont-family: $maker-font-body-font-family;\n\tbackground-color: $maker-color-background;\n}\n</style>\n"],"names":[],"sourceRoot":""}