149 lines
3.3 KiB
TypeScript
149 lines
3.3 KiB
TypeScript
import { useNotification } from '@composables/notification';
|
|
import type { AppConfig } from 'nuxt/schema';
|
|
|
|
export type DemoConfigKey = keyof AppConfig['ui'];
|
|
|
|
export const useProjectConfig = () => {
|
|
const appConfig = useAppConfig();
|
|
const { t } = useI18n();
|
|
|
|
const demoOverridesCookie = useCookie<Partial<AppConfig['ui']>>('nuxt-demo-overrides', {
|
|
default: () => ({}),
|
|
path: '/',
|
|
});
|
|
|
|
const isDemoMode = useState('demo-mode', () => {
|
|
// return
|
|
return false;
|
|
});
|
|
|
|
const demoOverrides = computed({
|
|
get: () => demoOverridesCookie.value || {},
|
|
set: (value) => {
|
|
demoOverridesCookie.value = value;
|
|
},
|
|
});
|
|
|
|
const uiConfig = computed(() => {
|
|
const config = {
|
|
...appConfig.ui,
|
|
};
|
|
|
|
if (isDemoMode.value) {
|
|
Object.keys(demoOverrides.value).forEach((key) => {
|
|
if (key in config) {
|
|
config[key as DemoConfigKey] = demoOverrides.value[key as DemoConfigKey];
|
|
}
|
|
});
|
|
}
|
|
|
|
return config;
|
|
});
|
|
|
|
const getFlag = <K extends DemoConfigKey>(key: K): AppConfig['ui'][K] => {
|
|
if (isDemoMode.value && key in demoOverrides.value) {
|
|
return demoOverrides.value[key] as AppConfig['ui'][K];
|
|
}
|
|
return appConfig.ui[key];
|
|
};
|
|
|
|
const setDemoFlag = <K extends DemoConfigKey>(key: K, value: AppConfig['ui'][K]) => {
|
|
if (!isDemoMode.value) return;
|
|
|
|
demoOverrides.value = {
|
|
...demoOverrides.value,
|
|
[key]: value,
|
|
};
|
|
};
|
|
|
|
const resetDemoFlags = () => {
|
|
demoOverrides.value = {};
|
|
};
|
|
|
|
const availableFlags = computed(() => {
|
|
const flags: Array<{
|
|
key: DemoConfigKey;
|
|
value: boolean;
|
|
label: string;
|
|
description?: string;
|
|
}> = [];
|
|
|
|
Object.keys(appConfig.ui).forEach((key) => {
|
|
const k = key as DemoConfigKey;
|
|
const value = appConfig.ui[k];
|
|
|
|
if (typeof value === 'boolean') {
|
|
flags.push({
|
|
key: k,
|
|
value: getFlag(k) as boolean,
|
|
label: formatKeyToLabel(key),
|
|
description: getFlagDescription(k),
|
|
});
|
|
}
|
|
});
|
|
|
|
return flags;
|
|
});
|
|
|
|
const formatObjectAsCode = (obj: Record<string, boolean>, indent = 2): string => {
|
|
const spaces = ' '.repeat(indent);
|
|
const entries = Object.entries(obj)
|
|
.map(([key, value]) => `${spaces}${key}: ${value}`)
|
|
.join(',\n');
|
|
|
|
return `ui: {
|
|
${entries}
|
|
}`;
|
|
};
|
|
|
|
const generateConfigCode = () => {
|
|
const currentConfig = uiConfig.value;
|
|
const booleanConfig: Record<string, boolean> = {};
|
|
|
|
Object.entries(currentConfig).forEach(([key, value]) => {
|
|
if (typeof value === 'boolean') {
|
|
booleanConfig[key] = value;
|
|
}
|
|
});
|
|
|
|
return formatObjectAsCode(booleanConfig);
|
|
};
|
|
|
|
const copyToClipboard = async (text: string) => {
|
|
if (!import.meta.client) return false;
|
|
|
|
await navigator.clipboard.writeText(text);
|
|
|
|
useNotification({
|
|
message: t('popup.success.configCopy'),
|
|
type: 'success',
|
|
});
|
|
};
|
|
|
|
const formatKeyToLabel = (key: string): string => {
|
|
return key
|
|
.replace(/([A-Z])/g, ' $1')
|
|
.replace(/^./, (str) => str.toUpperCase())
|
|
.trim();
|
|
};
|
|
|
|
const getFlagDescription = (key: DemoConfigKey): string => {
|
|
const descriptions: Partial<Record<DemoConfigKey, string>> = {
|
|
showBreadcrumbs: t('demo.descriptions.showBreadcrumbs'),
|
|
showSearchBar: t('demo.descriptions.showSearchBar'),
|
|
};
|
|
return descriptions[key] || '';
|
|
};
|
|
|
|
return {
|
|
uiConfig,
|
|
isDemoMode,
|
|
demoOverrides,
|
|
availableFlags,
|
|
setDemoFlag,
|
|
resetDemoFlags,
|
|
getFlag,
|
|
generateConfigCode,
|
|
copyToClipboard,
|
|
};
|
|
};
|