vuestic-ui
Version:
Vue 3 UI Framework
1 lines • 4.05 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../../src/services/colors-classes/plugin/index.ts"],"sourcesContent":["import { watch } from 'vue'\n\nimport { isServer } from '../../../utils/ssr'\nimport { useGlobalConfig } from '../../../composables/useGlobalConfig'\nimport { defineGlobalProperty, defineVuesticPlugin } from '../../vue-plugin/utils'\nimport { addOrUpdateStyleElement } from '../../../utils/dom'\n\nimport type { ColorVariables } from '../../color'\nimport type { ColorsClassesConfig, ColorsClassesConfigItem } from '../types'\n\nconst getColorsClassesHelpers = (helpers: ColorsClassesConfig, colors: ColorVariables) => {\n const colorsEntries = Object.entries(colors)\n\n return helpers.reduce((acc, helper: ColorsClassesConfigItem) => acc.concat(\n colorsEntries.map(([colorName, colorValue]) => ({\n ...helper,\n postfix: helper.postfix ?? colorName,\n value: helper.value ?? colorValue,\n })),\n ), [] as ColorsClassesConfig)\n}\n\nconst getColorsClassesStyles = (helpers: ColorsClassesConfig) => {\n return helpers.reduce((styles, helper) => {\n const style = [helper.property].flat().map(prop => `${prop}: ${helper.value};`).join('')\n\n styles += `.va-${helper.prefix}--${helper.postfix} { ${style} }`\n\n return styles\n }, '')\n}\n\nconst handleConfigUpdate = (helpers: ColorsClassesConfig, colors: ColorVariables) => {\n const coloredHelpers = getColorsClassesHelpers(helpers, colors)\n\n addOrUpdateStyleElement(\n 'va-color-helpers',\n () => getColorsClassesStyles(coloredHelpers),\n )\n}\n\nconst createColorHelpersPlugin = () => {\n if (isServer()) { return }\n\n const { globalConfig } = useGlobalConfig()\n\n watch(() => globalConfig.value.colorsClasses, (newHelpers: ColorsClassesConfig) => {\n if (newHelpers.length) {\n handleConfigUpdate(newHelpers, globalConfig.value.colors.variables)\n }\n }, { immediate: true, deep: true })\n\n watch(() => globalConfig.value.colors.variables, (newColors: ColorVariables) => {\n if (!newColors) { return }\n\n handleConfigUpdate(globalConfig.value.colorsClasses, newColors)\n }, { immediate: true, deep: true })\n\n return {\n renderColorHelpers: () => {\n const coloredHelpers = getColorsClassesHelpers(globalConfig.value.colorsClasses, globalConfig.value.colors.variables)\n\n return getColorsClassesStyles(coloredHelpers)\n },\n }\n}\n\nexport const ColorsClassesPlugin = defineVuesticPlugin(() => ({\n install (app) {\n defineGlobalProperty(app, '$vaColorsClasses', createColorHelpersPlugin())\n },\n}))\n\ndeclare module 'vue' {\n export interface ComponentCustomProperties {\n $vaColorsClasses: ReturnType<typeof createColorHelpersPlugin>\n }\n}\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,0BAA0B,CAAC,SAA8B,WAA2B;AAClF,QAAA,gBAAgB,OAAO,QAAQ,MAAM;AAE3C,SAAO,QAAQ,OAAO,CAAC,KAAK,WAAoC,IAAI;AAAA,IAClE,cAAc,IAAI,CAAC,CAAC,WAAW,UAAU,OAAO;AAAA,MAC9C,GAAG;AAAA,MACH,SAAS,OAAO,WAAW;AAAA,MAC3B,OAAO,OAAO,SAAS;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAyB,CAAA;AAC9B;AAEA,MAAM,yBAAyB,CAAC,YAAiC;AAC/D,SAAO,QAAQ,OAAO,CAAC,QAAQ,WAAW;AACxC,UAAM,QAAQ,CAAC,OAAO,QAAQ,EAAE,KAAO,EAAA,IAAI,CAAQ,SAAA,GAAG,IAAI,KAAK,OAAO,KAAK,GAAG,EAAE,KAAK,EAAE;AAEvF,cAAU,OAAO,OAAO,MAAM,KAAK,OAAO,OAAO,MAAM,KAAK;AAErD,WAAA;AAAA,KACN,EAAE;AACP;AAEA,MAAM,qBAAqB,CAAC,SAA8B,WAA2B;AAC7E,QAAA,iBAAiB,wBAAwB,SAAS,MAAM;AAE9D;AAAA,IACE;AAAA,IACA,MAAM,uBAAuB,cAAc;AAAA,EAAA;AAE/C;AAEA,MAAM,2BAA2B,MAAM;AACrC,MAAI,YAAY;AAAE;AAAA,EAAO;AAEnB,QAAA,EAAE,iBAAiB;AAEzB,QAAM,MAAM,aAAa,MAAM,eAAe,CAAC,eAAoC;AACjF,QAAI,WAAW,QAAQ;AACrB,yBAAmB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,IACpE;AAAA,KACC,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAElC,QAAM,MAAM,aAAa,MAAM,OAAO,WAAW,CAAC,cAA8B;AAC9E,QAAI,CAAC,WAAW;AAAE;AAAA,IAAO;AAEN,uBAAA,aAAa,MAAM,eAAe,SAAS;AAAA,KAC7D,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAE3B,SAAA;AAAA,IACL,oBAAoB,MAAM;AAClB,YAAA,iBAAiB,wBAAwB,aAAa,MAAM,eAAe,aAAa,MAAM,OAAO,SAAS;AAEpH,aAAO,uBAAuB,cAAc;AAAA,IAC9C;AAAA,EAAA;AAEJ;AAEa,MAAA,sBAAsB,oBAAoB,OAAO;AAAA,EAC5D,QAAS,KAAK;AACS,yBAAA,KAAK,oBAAoB,yBAA0B,CAAA;AAAA,EAC1E;AACF,EAAE;"}