Sequence and visualizer switcher [cleaned]

.eslintrc.cjs

@@ -29,4 +29,10 @@ module.exports = {
         // For the Paramable interface, v-model directives need type annotation
         'vue/valid-v-model': 'off',
     },
+    overrides: [
+        {
+            files: ['src/components/MageExchangeA.vue'],
+            rules: {'max-len': 'off'},
+        },
+    ],
 }

src/App.vue

@@ -26,9 +26,11 @@
     * {
         box-sizing: border-box;
         font-family: var(--ns-font-main);
-        color: var(--ns-color-black);
     }
 
+    a {
+        color: inherit;
+    }
     html,
     body {
         margin: 0;
@@ -60,23 +62,29 @@
 
         /* Dimensions */
         --ns-desktop-tab-width: 300px;
+        --ns-specimen-card-width: 216px;
 
         /* Breakpoint widths 
         Default styles should be for vertical mobile devices
         (devices narrower than --ns-breakpoint-mobile)
 
-        Small devices (landscape phones)
-        @media (min-width: var(--ns-breakpoint-mobile)) { ... }
+        // Small devices (landscape phones)
+        @media (min-width: $mobile-breakpoint) { ... }
+        // Note var(...) expressions are not allowed in media queries,
+        // so it's necessary to use the global scss variables set up
+        // in src/assets/scss/_variables.scss directly, as shown
 
-        Medium devices (tablets)
-        @media (min-width: var(--ns-breakpoint-tablet)) { ... }
+        // Medium devices (tablets)
+        @media (min-width: $tablet-breakpoint) { ... }
 
         // Large devices (desktops)
-        @media (min-width: var(--ns-breakpoint-desktop)) { ... }
+        @media (min-width: $desktop-breakpoint) { ... }
         */
-        --ns-breakpoint-mobile: 580px;
-        --ns-breakpoint-tablet: 800px;
-        --ns-breakpoint-desktop: 1200px;
+        --ns-breakpoint-mobile: $mobile-breakpoint;
+        --ns-breakpoint-tablet: $tablet-breakpoint;
+        /* Not actually used at the moment:
+          --ns-breakpoint-desktop: 1200px;
+         */
     }
 
     /* Display font */

src/assets/scss/_variables.scss

@@ -0,0 +1,6 @@
+/* These variables will be included in every style section in the
+   entire project
+*/
+
+$tablet-breakpoint: 800px;
+$mobile-breakpoint: 580px;

src/components/MageExchangeA.vue

@@ -0,0 +1,49 @@
+<template>
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M3.52942 11.4706V13.5882C3.52942 14.7115 3.97564 15.7888 4.76991 16.583C5.56418 17.3773 6.64144 17.8235 7.76471 17.8235H20.4706"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M3.52942 6.17647H16.2353C17.3586 6.17647 18.4358 6.62268 19.2301 7.41696C20.0244 8.21123 20.4706 9.28849 20.4706 10.4118V12.5294"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M17.2941 14.6471L20.4706 17.8235L17.2941 21"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M6.70589 9.35294L3.52942 6.17647L6.70589 3"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<script lang="ts">
+    import {defineComponent} from 'vue'
+
+    /* https://mageicons.com/
+       Icon mage:exchange-a
+       Used according to Apache Commons license; no attribution required.
+       Note that stroke colors have been changed to currentColor, to allow
+       ambient CSS color to be used.
+     */
+    export default defineComponent({
+        name: 'MageExchangeA',
+    })
+</script>
+
+<style></style>

src/components/ParamEditor.vue

@@ -5,8 +5,20 @@
                 {{ error }}
             </p>
         </div>
-        <h1>{{ title }}</h1>
-        <span class="subheading">{{ paramable.name }}</span>
+        <div
+            class="title-and-button-bar button-container"
+            @click="openSwitcher">
+            <div style="flex-grow: 1">
+                <h1>Current {{ title }}</h1>
+                <div class="item-name">{{ paramable.name }}</div>
+            </div>
+            <div class="change-tooltip tooltip-anchor button">
+                <MageExchangeA id="change-icon" />
+                <div class="desc-tooltip-text help-box">
+                    Change {{ title }}
+                </div>
+            </div>
+        </div>
         <p class="description">{{ paramable.description }}</p>
         <div v-for="(hierarchy, name) in sortedParams" v-bind:key="name">
             <ParamField
@@ -43,6 +55,7 @@
     } from '../shared/Paramable'
     import typeFunctions, {ParamType} from '../shared/ParamType'
     import {ValidationStatus} from '../shared/ValidationStatus'
+    import MageExchangeA from './MageExchangeA.vue'
     import ParamField from './ParamField.vue'
 
     interface ParamHierarchy {
@@ -52,6 +65,13 @@
 
     type Paramable = () => ParamableInterface<GenericParamDescription>
 
+    function resetStatuses(
+        items: {[key: string]: unknown},
+        statuses: {[key: string]: ValidationStatus}
+    ) {
+        for (const item in items) statuses[item] = ValidationStatus.ok()
+    }
+
     export default defineComponent({
         name: 'ParamEditor',
         props: {
@@ -61,39 +81,41 @@
                 required: true,
             },
         },
+        emits: ['changed', 'openSwitcher'],
         components: {
+            MageExchangeA,
             ParamField,
         },
+        computed: {
+            sortedParams() {
+                const sortedParams: {[key: string]: ParamHierarchy} = {}
+                Object.keys(this.paramable.params).forEach(key => {
+                    const param = this.paramable.params[key]
+                    if (!param.visibleDependency)
+                        sortedParams[key] = {param, children: {}}
+                })
+                Object.keys(this.paramable.params).forEach(key => {
+                    const param = this.paramable.params[key]
+                    if (param.visibleDependency)
+                        sortedParams[param.visibleDependency].children[key] =
+                            param
+                })
+                return sortedParams
+            },
+        },
         data() {
-            const paramStatuses: {[key: string]: ValidationStatus} = {}
             const status = ValidationStatus.ok()
-
-            Object.keys(this.paramable.params).forEach(
-                key => (paramStatuses[key] = ValidationStatus.ok())
-            )
-
-            const sortedParams: {[key: string]: ParamHierarchy} = {}
-            Object.keys(this.paramable.params).forEach(key => {
-                const param = this.paramable.params[key]
-                if (!param.visibleDependency)
-                    sortedParams[key] = {param, children: {}}
-            })
-            Object.keys(this.paramable.params).forEach(key => {
-                const param = this.paramable.params[key]
-                if (param.visibleDependency)
-                    sortedParams[param.visibleDependency].children[key] =
-                        param
-            })
-
-            return {paramStatuses, status, sortedParams}
+            const paramStatuses: {[key: string]: ValidationStatus} = {}
+            resetStatuses(this.paramable.params, paramStatuses)
+            return {paramStatuses, status}
         },
         created() {
+            const pstatus = this.paramStatuses
+            resetStatuses(this.paramable.params, pstatus)
             let good = true
             for (const param in this.paramable.params) {
-                const newStatus = ValidationStatus.ok()
-                this.paramable.validateIndividual(param, newStatus)
-                this.paramStatuses[param] = newStatus
-                good &&= newStatus.isValid()
+                this.paramable.validateIndividual(param, pstatus[param])
+                good &&= pstatus[param].isValid()
             }
             if (good) {
                 // The argument '.' to validate below skips all
@@ -124,24 +146,50 @@
                     return param.visiblePredicate(v as never)
                 else return param.visibleValue! === v
             },
+            openSwitcher() {
+                this.$emit('openSwitcher')
+            },
+        },
+        watch: {
+            paramable() {
+                resetStatuses(this.paramable.params, this.paramStatuses)
+            },
         },
     })
 </script>
 
 <style scoped lang="scss">
+    /* Note some classes are used from SpecimenBar.vue, e.g.
+       title-and-button-bar
+     */
     h1 {
-        font-size: 16px;
-        margin-bottom: 0;
+        font-size: var(--ns-size-subheading); // sizes inverted in ParamEditor
+        // because the name of the item is more important than the title
+        margin: 0;
+    }
+
+    .item-name {
+        // designed to mimic input areas
+        border-bottom: 1.5px solid var(--ns-color-black);
+        font-size: var(--ns-size-heading);
+        padding: 6px 8px 6px 8px;
+        width: 100%;
+    }
+
+    .change-tooltip {
+        position: relative;
+        cursor: pointer;
     }
 
-    .subheading {
-        color: var(--ns-color-grey);
-        font-size: 14px;
+    #change-icon {
+        position: relative;
+        top: 2px;
     }
 
     .description {
         font-size: 12px;
-        margin-bottom: 32px;
+        margin-top: 0px;
+        margin-bottom: 24px;
     }
 
     .sub-param-box {

src/components/ParamField.vue

@@ -38,6 +38,7 @@
                     v-bind:id="paramName"
                     v-bind:class="!status.isValid() ? 'error-field' : ''"
                     v-bind:value="value"
+                    v-bind:placeholder="placehold(param)"
                     v-on:input="updateString($event)" />
             </label>
 
@@ -60,7 +61,7 @@
 <script lang="ts">
     import {defineComponent} from 'vue'
     import type {ParamInterface} from '../shared/Paramable'
-    import {ParamType} from '../shared/ParamType'
+    import typeFunctions, {ParamType} from '../shared/ParamType'
     import {ValidationStatus} from '../shared/ValidationStatus'
 
     export default defineComponent({
@@ -105,6 +106,11 @@
                     (e.target as HTMLInputElement).value
                 )
             },
+            placehold(par: ParamInterface<ParamType>) {
+                if (typeof par.placeholder === 'string')
+                    return par.placeholder
+                return typeFunctions[par.type].derealize(par.default as never)
+            },
         },
         data() {
             return {ParamType}
@@ -133,6 +139,19 @@
         }
     }
 
+    ::placeholder {
+        color: grey;
+        opacity: 0.5;
+    }
+    /* The below should be kept in sync with the above. Unfortunately,
+       just adding `, ::-ms-input-placeholder` to the above selector did
+       not work for reasons I do not understand.
+     */
+    ::-ms-input-placeholder {
+        color: grey;
+        opacity: 0.5;
+    }
+
     select {
         border: 1px solid var(--ns-color-black);
         background-color: var(--ns-color-white);