1b9be8fe2d
- Migrate `StatefulVue`:
- Introduce `UseCollectionState` that replaces its behavior and acts
as a shared state store.
- Add more encapsulated, granular functions based on read or write
access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
modern parses, fix linting errors.
- Rename Dialog to ModalDialog as after refactoring,
eslintvue/no-reserved-component-names does not allow name Dialog.
- To comply with `vue/multi-word-component-names`, rename:
- `Code` -> `CodeInstruction`
- `Handle` -> `SliderHandle`
- `Documentable` -> `DocumentableNode`
- `Node` -> `NodeContent`
- `INode` -> `INodeContent`
- `Responsive` -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
dependencies.
- Refactor `watch` with computed properties when possible for cleaner
code.
- Introduce `UseApplication` to reduce repeated code in new components
that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
for getting application context/state/instance to simplify the code by
removing async calls. However, mocha (unit and integration) tests do
not run with top level awaits, so a workaround is used.
125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<template>
|
|
<div class="instructions">
|
|
<p>
|
|
You have two alternatives to apply your selection.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
<strong>1. The easy alternative</strong>. Run your script without any manual steps by
|
|
<a :href="macOsDownloadUrl">downloading desktop version</a> of {{ appName }} on the
|
|
{{ osName }} system you wish to configure, and then click on the Run button. This is
|
|
recommended for most users.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
<strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
|
|
steps. If you are unsure how to follow the instructions, hover on information
|
|
(<font-awesome-icon :icon="['fas', 'info-circle']" />)
|
|
icons near the steps, or follow the easy alternative described above.
|
|
</p>
|
|
<p>
|
|
<ol>
|
|
<li
|
|
v-for='(step, index) in data.steps'
|
|
v-bind:key="index"
|
|
class="step"
|
|
>
|
|
<div class="step__action">
|
|
<span>{{ step.action.instruction }}</span>
|
|
<font-awesome-icon
|
|
v-if="step.action.details"
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="step.action.details"
|
|
/>
|
|
</div>
|
|
<div v-if="step.code" class="step__code">
|
|
<CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
|
|
<font-awesome-icon
|
|
v-if="step.code.details"
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="step.code.details"
|
|
/>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent, PropType, computed,
|
|
} from 'vue';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
|
|
import CodeInstruction from './CodeInstruction.vue';
|
|
import { IInstructionListData } from './InstructionListData';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
CodeInstruction,
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object as PropType<IInstructionListData>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { info } = useApplication();
|
|
|
|
const appName = computed<string>(() => info.name);
|
|
|
|
const macOsDownloadUrl = computed<string>(
|
|
() => info.getDownloadUrl(OperatingSystem.macOS),
|
|
);
|
|
|
|
const osName = computed<string>(() => {
|
|
if (!props.data) {
|
|
throw new Error('missing data');
|
|
}
|
|
return renderOsName(props.data.operatingSystem);
|
|
});
|
|
|
|
return {
|
|
appName,
|
|
macOsDownloadUrl,
|
|
osName,
|
|
};
|
|
},
|
|
});
|
|
|
|
function renderOsName(os: OperatingSystem): string {
|
|
switch (os) {
|
|
case OperatingSystem.Windows: return 'Windows';
|
|
case OperatingSystem.macOS: return 'macOS';
|
|
case OperatingSystem.Linux: return 'Linux';
|
|
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.step {
|
|
margin: 10px 0;
|
|
&__action {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
&__code {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
.explanation {
|
|
margin-left: 0.5em;
|
|
}
|
|
</style>
|