feat: added posibility for print config

limbo-works · Jan 30, 2024 · 130c1a7 · 130c1a7
1 parent 4a7d171
commit 130c1a7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/.playground/app.vue b/.playground/app.vue
@@ -1,7 +1,9 @@
 <template>
 	<div class="bg-fishStick bg-scope-fishStick">
 		<ThemeConfiguration
+			ref="themeConfiguration"
 			use-theme-classes
+			print-config="print"
 		>
 			Yes it is loaded
 		</ThemeConfiguration>
@@ -15,5 +17,6 @@
 </template>
 
 <script setup>
-const themeConfigurations = await getThemeConfigurations();
+const themeConfiguration = ref(null);
+const configurations = await getThemeConfigurations();
 </script>
diff --git a/.playground/assets/js/theme-configuration.print.js b/.playground/assets/js/theme-configuration.print.js
@@ -11,7 +11,7 @@
 */
 export default {
 	// Testing only - set to false when done testing
-	minify: true, // Can be turned to false for a more readable output in the style tag
+	minify: false, // Can be turned to false for a more readable output in the style tag
 
 	// Setup
 	baseFontSize: 12, // For rem conversion

diff --git a/components/ThemeConfiguration/ThemeConfiguration.vue b/components/ThemeConfiguration/ThemeConfiguration.vue
@@ -1,13 +1,14 @@
 <template>
 	<Head v-if="cssText">
 		<Style type="text/css" :children="cssText"></Style>
+		<Style v-if="printCssText" type="text/css" media="print" :children="printCssText"></Style>
 	</Head>
 	<slot></slot>
 </template>
 
 <script>
 const observedData = ref({});
-export const config = observedData;
+export { observedData as config };
 </script>
 
 <script setup>
@@ -20,14 +21,14 @@ import {
 
 const props = defineProps({
 	config: [String, Object],
+	printConfig: [String, Object],
 	useThemeClasses: [Boolean, Array],
 	cssLayer: String,
 });
 
-const globs = import.meta.glob(
-	'~/assets/js/theme-configuration.*.(js|cjs|mjs)',
-	{ as: 'json' }
-);
+defineExpose({
+	config: observedData,
+});
 
 const availableConfigs = await getThemeConfigurations();
 const defaultConfig = availableConfigs.default || {};
@@ -84,8 +85,42 @@ const cssText = computed(() => {
 			);
 		}
 	}
+
 	return rules.join('\n');
 });
+const printCssText = computed(() => {
+	const config = typeof props.printConfig === 'string'
+		? availableConfigs[props.printConfig]
+		: props.printConfig;
+
+	if (config) {
+		const rules = [makeCssText(undefined, config)];
+
+		if (props.useThemeClasses) {
+			for (const [key] of Object.entries(availableConfigs)) {
+				if (props.config === key) continue;
+				if (!props.config && key === 'default') continue;
+				if (
+					Array.isArray(props.useThemeClasses) &&
+					!props.useThemeClasses.includes(key)
+				)
+					continue;
+
+				rules.push(
+					makeCssText(
+						`.u-theme-${key}`,
+						config
+					)
+				);
+			}
+		}
+
+		return rules.join('\n');
+	}
+	return null;
+});
+// Add for https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+// Add for https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast (can they be combined?)
 
 function extractColorRules(object, prefix) {
 	object = cloneDeep(typeof object === 'object' ? object : {});
@@ -700,24 +735,8 @@ function deepMergeExisting(target, source) {
 	}
 }
 
-async function getThemeConfigurations() {
-	const themeConfigurations = {};
-	for (const key in globs) {
-		const themeName = key.match(
-			/theme-configuration\.([a-zA-Z0-9_-]+)\./
-		)[1];
-		themeConfigurations[themeName] = (await globs[key]())?.default;
-	}
-
-	return themeConfigurations;
-}
-
 watch(compConfig, (value) => (observedData.value = value), {
 	immediate: true,
 	deep: true,
 });
-
-defineExpose({
-	config: compConfig,
-});
 </script>