diff --git a/src/App.vue b/src/App.vue index 10e7e38..4c58d52 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,19 +6,18 @@ import Editor from '@components/Editor.vue' import Layout from '@components/Layout.vue' import Select from '@components/Select.vue' import { Switch } from '@headlessui/vue' - -const mathOptions = ['always', 'parens-division', 'parens'].map(value => ({ value })) +import { defaultStore, supportedOptions, renderOptions, type OptionStore } from './options' let input = $ref(LESS_DATA) let output = $ref('') let errorMessage = $ref('') let hash = $ref('') -let store: Less.Options & { activeVersion: string } = reactive({ +let store: OptionStore & { activeVersion: string } = reactive({ activeVersion: '4.x', - math: 'parens-division', - strictUnits: false + ...defaultStore }) let loadingLessJS = $ref(false) +const options = $computed(() => supportedOptions(store.activeVersion)) const serialize = () => { const newHash = '#' + utoa(JSON.stringify({ @@ -29,8 +28,7 @@ const serialize = () => { } const updateVue = () => { - const { math, strictUnits } = store - window.less.render(input, { math, strictUnits }, (error, result) => { + window.less.render(input, renderOptions(store, store.activeVersion), (error, result) => { if (error) { errorMessage = error.message output = '' @@ -80,18 +78,21 @@ onMounted(() => {