Add <dougal-fixed-string-text/> component.

It's similar to <dougal-fixed-string-decoder-field/> but it handles
static strings.

Used to match, e.g., file names, where certain parts of the name
are expected to contain a specific string (such as a project prefix
and the like).

lib/www/client/source/src/components/decoder/fixed-string-text.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-row dense no-gutters>
+
+    <v-col cols="1">
+      <slot name="prepend"></slot>
+    </v-col>
+
+    <v-col cols="2">
+      <v-chip outlined label small :color="colour" style="border: 1px dashed">{{value.text}}</v-chip>
+    </v-col>
+
+    <v-col cols="2">
+      <v-text-field
+        class="ml-3"
+        dense
+        label="From"
+        type="number"
+        min="0"
+        v-model.number="value.offset"
+        :readonly="readonly"
+      ></v-text-field>
+    </v-col>
+
+    <v-col cols="2">
+    </v-col>
+
+    <v-col cols="2">
+    </v-col>
+
+    <v-col cols="1">
+      <slot name="append"></slot>
+    </v-col>
+
+  </v-row>
+
+</template>
+
+<style scoped>
+
+.input {
+  flex: 1 1 auto;
+  line-height: 20px;
+  padding: 8px 0 8px;
+  min-height: 32px;
+  max-height: 32px;
+  max-width: 100%;
+  min-width: 0px;
+  width: 100%;
+}
+
+.input >>> .chunk {
+  padding-inline: 1px;
+  border: 1px solid;
+}
+
+.input >>> .chunk-empty {
+  padding-inline: 1px;
+}
+
+.input >>> .chunk-overlap {
+  padding-inline: 1px;
+  border: 1px solid grey;
+  color: grey;
+}
+</style>
+
+<script>
+
+export default {
+  name: "DougalFixedStringText",
+
+  components: {
+  },
+
+  props: {
+    value: Object,
+    colour: String,
+    readonly: Boolean,
+  },
+
+  data () {
+    return {
+      name_: "",
+    }
+  },
+
+  computed: {
+  },
+
+  watch: {
+
+    name () {
+      if (this.name != this.name_) {
+        this.name_ = this.name;
+      }
+    },
+  },
+
+  methods: {
+
+    addField () {
+      if (!this.fieldNameErrors) {
+        this.$emit("update:fields", {
+          ...this.fields,
+          [this.fieldName]: { offset: 0, length: 0 }
+        });
+        this.fieldName = "";
+      }
+    },
+
+    reset () {
+      this.text_ = this.text;
+    }
+
+  },
+
+  mounted () {
+    this.reset();
+  }
+
+}
+</script>