@piveau/piveau-hub-ui-modules 4.2.0 → 4.3.0-beta.0

package/dist/data-provider-interface/components/UniqueIdentifierInput.vue.mjs

@@ -1,32 +1,43 @@
-import { getCurrentInstance as v, ref as d, resolveComponent as h, openBlock as s, createElementBlock as I, createElementVNode as g, toDisplayString as D, createTextVNode as _, createBlock as n } from "vue";
-import { isNil as y } from "lodash-es";
-import $ from "axios";
-import { useStore as b } from "vuex";
-const q = { class: "formkitProperty DSid" }, k = {
+import { getCurrentInstance as g, ref as u, onMounted as I, watchEffect as h, resolveComponent as D, openBlock as i, createElementBlock as q, createElementVNode as _, toDisplayString as $, createTextVNode as b, createBlock as n, unref as y } from "vue";
+import { isNil as k } from "lodash-es";
+import E from "axios";
+import { useStore as U } from "vuex";
+import { useI18n as C } from "vue-i18n";
+const M = { class: "formkitProperty DSid" }, N = {
   props: ["context"]
-}, B = /* @__PURE__ */ Object.assign(k, {
+}, V = /* @__PURE__ */ Object.assign(N, {
   __name: "UniqueIdentifierInput",
-  setup(U) {
-    let r = v().appContext.app.config.globalProperties.$env;
-    const i = b(), l = d(), o = d();
-    o.value = localStorage.getItem("dpi_duplicate"), l.value = i.getters["auth/getIsEditMode"];
-    const u = {
-      idformatvalid: "Dataset ID must only contain lower case letters, numbers and single dashes (-). Please choose a different ID.",
-      idunique: "This ID is already in use, please choose a different one."
+  setup(S) {
+    let p = g().appContext.app.config.globalProperties.$env;
+    const d = U(), l = u(), o = u();
+    o.value = localStorage.getItem("dpi_duplicate"), l.value = d.getters["auth/getIsEditMode"];
+    const { t: s, locale: B } = C();
+    let r = {
+      idformatvalid: "",
+      idunique: "",
+      required: ""
     };
-    async function p(e) {
-      let t = !0, a = r.api.hubUrl;
-      const m = i.getters["auth/getUserDraftIds"];
+    I(() => {
+      r = {
+        idformatvalid: s("message.dataupload.datasets.datasetID.invalidFormat"),
+        idunique: s("message.dataupload.datasets.datasetID.duplicate"),
+        required: s("message.dataupload.datasets.datasetID.required")
+      };
+    }), h(() => {
+    });
+    async function m(e) {
+      let t = !0, a = p.api.hubUrl;
+      const f = d.getters["auth/getUserDraftIds"];
       return new Promise(() => {
-        if (y(e.value) || e.value === "" || e.value === void 0)
+        if (k(e.value) || e.value === "" || e.value === void 0)
           t = !0;
-        else if (m.includes(e.value))
+        else if (f.includes(e.value))
           t = !1;
         else {
-          const f = `${a}datasets/${e.value}?useNormalizedId=true`;
-          $.head(f).then(() => {
+          const v = `${a}datasets/${e.value}?useNormalizedId=true`;
+          E.head(v).then(() => {
             t = !1;
-          }).catch((C) => {
+          }).catch((F) => {
             t = !0;
           });
         }
@@ -36,11 +47,11 @@ const q = { class: "formkitProperty DSid" }, k = {
       return /^[a-z0-9-]*$/.test(e.value);
     }
     return (e, t) => {
-      const a = h("FormKit");
-      return s(), I("div", q, [
-        g("h4", null, D(e.$t("message.dataupload.datasets.datasetID.label")), 1),
-        _(),
-        !l.value || o.value ? (s(), n(a, {
+      const a = D("FormKit");
+      return i(), q("div", M, [
+        _("h4", null, $(e.$t("message.dataupload.datasets.datasetID.label")), 1),
+        b(),
+        !l.value || o.value ? (i(), n(a, {
           key: 0,
           type: "text",
           name: "datasetID",
@@ -48,12 +59,12 @@ const q = { class: "formkitProperty DSid" }, k = {
           placeholder: e.$t("message.dataupload.datasets.datasetID.label"),
           info: e.$t("message.dataupload.datasets.datasetID.info"),
           help: e.$t("message.dataupload.datasets.datasetID.help"),
-          "validation-rules": { idformatvalid: c, idunique: p },
+          "validation-rules": { idformatvalid: c, idunique: m },
           validation: "idformatvalid|idunique|required",
           "validation-visibility": "live",
-          "validation-messages": u,
+          "validation-messages": y(r),
           "outer-class": "formkitCmpWrap p-3"
-        }, null, 8, ["placeholder", "info", "help", "validation-rules"])) : (s(), n(a, {
+        }, null, 8, ["placeholder", "info", "help", "validation-rules", "validation-messages"])) : (i(), n(a, {
           key: 1,
           type: "text",
           name: "datasetID",
@@ -67,6 +78,6 @@ const q = { class: "formkitProperty DSid" }, k = {
   }
 });
 export {
-  B as default
+  V as default
 };
 //# sourceMappingURL=UniqueIdentifierInput.vue.mjs.map

package/dist/data-provider-interface/components/UniqueIdentifierInput.vue.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UniqueIdentifierInput.vue.mjs","sources":["../../../lib/data-provider-interface/components/UniqueIdentifierInput.vue"],"sourcesContent":["<script setup>\nimport { ref, onMounted, watchEffect } from 'vue'\nimport { isNil } from 'lodash';\nimport axios from 'axios';\nimport { useStore } from 'vuex';\nimport { getCurrentInstance } from \"vue\";\n\nlet env = getCurrentInstance().appContext.app.config.globalProperties.$env;\n\nconst store = useStore();\nconst isEditMode = ref();\nconst isDuplicate =ref();\nisDuplicate.value = localStorage.getItem('dpi_duplicate');\nisEditMode.value = store.getters['auth/getIsEditMode'];\n\nconst validationMessages = {\n  idformatvalid: \"Dataset ID must only contain lower case letters, numbers and single dashes (-). Please choose a different ID.\",\n  idunique: \"This ID is already in use, please choose a different one.\"\n};\n\nasync function idunique(node) {\n  let isUniqueID = true;\n  let hubUrl = env.api.hubUrl;\n  const draftIDs = store.getters['auth/getUserDraftIds'];\n\n  new Promise(() => {\n    if (isNil(node.value) || node.value === '' || node.value === undefined) isUniqueID = true;\n    else if (draftIDs.includes(node.value)) isUniqueID = false;\n    else {\n      const request = `${hubUrl}datasets/${node.value}?useNormalizedId=true`;\n      axios.head(request)\n        .then(() => {\n          isUniqueID = false;\n        })\n        .catch((e) => {\n          isUniqueID = true;\n        });\n    }\n  });\n  return isUniqueID;\n}\n\nfunction idformatvalid(node) {\n  return /^[a-z0-9-]*$/.test(node.value);\n}\n\n</script>\n\n<template>\n  <div class=\"formkitProperty DSid\">\n    <h4>{{ $t(`message.dataupload.datasets.datasetID.label`) }}</h4>\n    <FormKit v-if=\"!isEditMode || isDuplicate\" type=\"text\" name=\"datasetID\" id=\"datasetID\"\n      :placeholder=\"$t(`message.dataupload.datasets.datasetID.label`)\"\n      :info=\"$t(`message.dataupload.datasets.datasetID.info`)\" :help=\"$t(`message.dataupload.datasets.datasetID.help`)\"\n      :validation-rules=\"{ idformatvalid, idunique }\" validation=\"idformatvalid|idunique|required\"\n      validation-visibility=\"live\" :validation-messages=\"validationMessages\" outer-class=\"formkitCmpWrap p-3\">\n    </FormKit>\n    <FormKit v-else type=\"text\" name=\"datasetID\" id=\"datasetID\" :disabled=\"true\"\n      :info=\"$t(`message.dataupload.datasets.datasetID.info`)\" :help=\"$t(`message.dataupload.datasets.datasetID.help`)\">\n    </FormKit>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: ['context']\n}\n</script>\n\n<style></style>\n"],"names":["__default__","env","getCurrentInstance","store","useStore","isEditMode","ref","isDuplicate","validationMessages","idunique","node","isUniqueID","hubUrl","draftIDs","isNil","request","axios","e","idformatvalid"],"mappings":";;;;6CAgEAA,IAAe;AAAA,EACb,OAAO,CAAC,SAAS;AACnB;;;AA3DA,QAAIC,IAAMC,EAAkB,EAAG,WAAW,IAAI,OAAO,iBAAiB;AAEtE,UAAMC,IAAQC,EAAQ,GAChBC,IAAaC,EAAG,GAChBC,IAAaD,EAAG;AACtB,IAAAC,EAAY,QAAQ,aAAa,QAAQ,eAAe,GACxDF,EAAW,QAAQF,EAAM,QAAQ,oBAAoB;AAErD,UAAMK,IAAqB;AAAA,MACzB,eAAe;AAAA,MACf,UAAU;AAAA,IACZ;AAEA,mBAAeC,EAASC,GAAM;AAC5B,UAAIC,IAAa,IACbC,IAASX,EAAI,IAAI;AACrB,YAAMY,IAAWV,EAAM,QAAQ,sBAAsB;AAErD,iBAAI,QAAQ,MAAM;AAChB,YAAIW,EAAMJ,EAAK,KAAK,KAAKA,EAAK,UAAU,MAAMA,EAAK,UAAU;AAAW,UAAAC,IAAa;AAAA,iBAC5EE,EAAS,SAASH,EAAK,KAAK;AAAG,UAAAC,IAAa;AAAA,aAChD;AACH,gBAAMI,IAAU,GAAGH,CAAM,YAAYF,EAAK,KAAK;AAC/C,UAAAM,EAAM,KAAKD,CAAO,EACf,KAAK,MAAM;AACV,YAAAJ,IAAa;AAAA,UACvB,CAAS,EACA,MAAM,CAACM,MAAM;AACZ,YAAAN,IAAa;AAAA,UACvB,CAAS;AAAA,QACJ;AAAA,MACL,CAAG,GACMA;AAAA,IACT;AAEA,aAASO,EAAcR,GAAM;AAC3B,aAAO,eAAe,KAAKA,EAAK,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UniqueIdentifierInput.vue.mjs","sources":["../../../lib/data-provider-interface/components/UniqueIdentifierInput.vue"],"sourcesContent":["<script setup>\nimport { ref, onMounted, watchEffect } from 'vue'\nimport { isNil } from 'lodash';\nimport axios from 'axios';\nimport { useStore } from 'vuex';\nimport { getCurrentInstance } from \"vue\";\nimport { useI18n } from 'vue-i18n';\nlet env = getCurrentInstance().appContext.app.config.globalProperties.$env;\n\nconst store = useStore();\nconst isEditMode = ref();\nconst isDuplicate = ref();\nisDuplicate.value = localStorage.getItem('dpi_duplicate');\nisEditMode.value = store.getters['auth/getIsEditMode'];\nconst { t, locale } = useI18n();\n\nlet validationMessages = {\n  idformatvalid: \"\",\n  idunique: \"\",\n  required: \"\"\n\n};\n\nonMounted(() => {\n  // This is kind of buggy, its taking the strings from the wrong json (de and en is switched)\n  validationMessages = {\n    idformatvalid: t('message.dataupload.datasets.datasetID.invalidFormat'),\n    idunique: t('message.dataupload.datasets.datasetID.duplicate'),\n    required: t('message.dataupload.datasets.datasetID.required')\n  };\n\n});\n\n\nwatchEffect(() => {\n\n\n});\n\n\n\nasync function idunique(node) {\n  let isUniqueID = true;\n  let hubUrl = env.api.hubUrl;\n  const draftIDs = store.getters['auth/getUserDraftIds'];\n\n  new Promise(() => {\n    if (isNil(node.value) || node.value === '' || node.value === undefined) isUniqueID = true;\n    else if (draftIDs.includes(node.value)) isUniqueID = false;\n    else {\n      const request = `${hubUrl}datasets/${node.value}?useNormalizedId=true`;\n      axios.head(request)\n        .then(() => {\n          isUniqueID = false;\n        })\n        .catch((e) => {\n          isUniqueID = true;\n        });\n    }\n  });\n  return isUniqueID;\n}\n\nfunction idformatvalid(node) {\n  return /^[a-z0-9-]*$/.test(node.value);\n}\n\n</script>\n\n<template>\n  <div class=\"formkitProperty DSid\">\n    <h4>{{ $t(`message.dataupload.datasets.datasetID.label`) }}</h4>\n    <FormKit v-if=\"!isEditMode || isDuplicate\" type=\"text\" name=\"datasetID\" id=\"datasetID\"\n      :placeholder=\"$t(`message.dataupload.datasets.datasetID.label`)\"\n      :info=\"$t(`message.dataupload.datasets.datasetID.info`)\" :help=\"$t(`message.dataupload.datasets.datasetID.help`)\"\n      :validation-rules=\"{ idformatvalid, idunique }\" validation=\"idformatvalid|idunique|required\"\n      validation-visibility=\"live\" :validation-messages=\"validationMessages\" outer-class=\"formkitCmpWrap p-3\">\n    </FormKit>\n    <FormKit v-else type=\"text\" name=\"datasetID\" id=\"datasetID\" :disabled=\"true\"\n      :info=\"$t(`message.dataupload.datasets.datasetID.info`)\" :help=\"$t(`message.dataupload.datasets.datasetID.help`)\">\n    </FormKit>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: ['context']\n}\n</script>\n\n<style></style>\n"],"names":["__default__","env","getCurrentInstance","store","useStore","isEditMode","ref","isDuplicate","t","locale","useI18n","validationMessages","onMounted","watchEffect","idunique","node","isUniqueID","hubUrl","draftIDs","isNil","request","axios","e","idformatvalid"],"mappings":";;;;;6CAqFAA,IAAe;AAAA,EACb,OAAO,CAAC,SAAS;AACnB;;;AAhFA,QAAIC,IAAMC,EAAkB,EAAG,WAAW,IAAI,OAAO,iBAAiB;AAEtE,UAAMC,IAAQC,EAAQ,GAChBC,IAAaC,EAAG,GAChBC,IAAcD,EAAG;AACvB,IAAAC,EAAY,QAAQ,aAAa,QAAQ,eAAe,GACxDF,EAAW,QAAQF,EAAM,QAAQ,oBAAoB;AACrD,UAAM,EAAE,GAAAK,GAAG,QAAAC,MAAWC;AAEtB,QAAIC,IAAqB;AAAA,MACvB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,UAAU;AAAA,IAEZ;AAEA,IAAAC,EAAU,MAAM;AAEd,MAAAD,IAAqB;AAAA,QACnB,eAAeH,EAAE,qDAAqD;AAAA,QACtE,UAAUA,EAAE,iDAAiD;AAAA,QAC7D,UAAUA,EAAE,gDAAgD;AAAA,MAChE;AAAA,IAEA,CAAC,GAGDK,EAAY,MAAM;AAAA,IAGlB,CAAC;AAID,mBAAeC,EAASC,GAAM;AAC5B,UAAIC,IAAa,IACbC,IAAShB,EAAI,IAAI;AACrB,YAAMiB,IAAWf,EAAM,QAAQ,sBAAsB;AAErD,iBAAI,QAAQ,MAAM;AAChB,YAAIgB,EAAMJ,EAAK,KAAK,KAAKA,EAAK,UAAU,MAAMA,EAAK,UAAU;AAAW,UAAAC,IAAa;AAAA,iBAC5EE,EAAS,SAASH,EAAK,KAAK;AAAG,UAAAC,IAAa;AAAA,aAChD;AACH,gBAAMI,IAAU,GAAGH,CAAM,YAAYF,EAAK,KAAK;AAC/C,UAAAM,EAAM,KAAKD,CAAO,EACf,KAAK,MAAM;AACV,YAAAJ,IAAa;AAAA,UACvB,CAAS,EACA,MAAM,CAACM,MAAM;AACZ,YAAAN,IAAa;AAAA,UACvB,CAAS;AAAA,QACJ;AAAA,MACL,CAAG,GACMA;AAAA,IACT;AAEA,aAASO,EAAcR,GAAM;AAC3B,aAAO,eAAe,KAAKA,EAAK,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/data-provider-interface/config/dcatapde/input-definition.mjs

@@ -105,7 +105,8 @@ const t = {
       identifier: "qualityProcessURI",
       name: "dcatde:qualityProcessURI",
       class: "property",
-      $formkit: "url",
+      $formkit: "simpleInput",
+      validationType: "url",
       classes: { outer: "formkitProperty formkitCmpWrap mx-0 my-3 p-3" }
     },
     references: {
@@ -121,9 +122,10 @@ const t = {
           children: [
             {
               name: "@id",
-              identifier: "referencesUrl",
-              $formkit: "url",
-              validation: "optional|url",
+              identifier: "references",
+              $formkit: "simpleInput",
+              validationType: "url",
+              insideRepeatable: !0,
               classes: {
                 outer: "w100-textfield"
               }
@@ -1117,10 +1119,10 @@ const t = {
     },
     spatialResolutionInMeters: {
       identifier: "spatialResolutionInMeters",
-      $formkit: "number",
+      $formkit: "simpleInput",
       name: "dcat:spatialResolutionInMeters",
       class: "property",
-      validation: "number",
+      validationType: "number",
       classes: { outer: "formkitProperty formkitCmpWrap mx-0 my-3 p-3" }
     },
     temporalResolution: {
@@ -1178,7 +1180,7 @@ const t = {
     },
     versionInfo: {
       identifier: "versionInfo",
-      $formkit: "text",
+      $formkit: "simpleInput",
       name: "owl:versionInfo",
       class: "property",
       classes: { outer: "formkitProperty formkitCmpWrap mx-0 my-3 p-3" }
@@ -1500,7 +1502,8 @@ const t = {
     },
     byteSize: {
       identifier: "byteSize",
-      $formkit: "text",
+      $formkit: "simpleInput",
+      validationType: "number",
       name: "dcat:byteSize",
       class: "property",
       classes: { outer: "formkitProperty formkitCmpWrap mx-0 my-3 p-3" }
@@ -1716,41 +1719,18 @@ const t = {
     },
     rights: {
       identifier: "rights",
-      $formkit: "group",
+      id: "rightsCondDataset",
+      $formkit: "simpleConditional",
       name: "dct:rights",
-      children: [
-        {
-          identifier: "rights",
-          id: "rightsCondDataset",
-          $formkit: "select",
-          name: "@type",
-          options: { url: "Provide URL", text: "Provide a text" }
-        },
-        {
-          identifier: "rights",
-          $cmp: "FormKit",
-          if: "$get(rightsCondDataset).value",
-          props: {
-            if: "$get(rightsCondDataset).value === url",
-            then: {
-              type: "url",
-              name: "rdfs:value"
-            },
-            else: {
-              type: "text",
-              name: "rdfs:value"
-            }
-          }
-        }
-      ]
+      options: { url: "rdfs:label", text: "rdfs:label" },
+      selection: { 1: "URL", 2: "Text" }
     },
     spatialResolutionInMeters: {
       identifier: "spatialResolutionInMeters",
-      $formkit: "number",
+      $formkit: "simpleInput",
       name: "dcat:spatialResolutionInMeters",
       class: "property",
-      validation: "number",
-      classes: { outer: "formkitProperty formkitCmpWrap mx-0 my-3 p-3" }
+      validationType: "number"
     },
     temporalResolution: {
       identifier: "temporalResolution",
@@ -1872,45 +1852,43 @@ const t = {
           mandatory: !0,
           minimum: 1,
           children: [
-            {
-              identifier: "titleLabel",
-              $formkit: "text",
-              name: "@value",
-              validation: "required"
-            },
             {
               identifier: "language",
               value: "en",
               $formkit: "select",
               validation: "required",
               options: e,
-              name: "@language"
+              name: "@language",
+              classes: {
+                outer: "w25-textfield"
+              }
+            },
+            {
+              identifier: "title",
+              $formkit: "text",
+              name: "@value",
+              validation: "required",
+              mandatory: !0,
+              classes: {
+                outer: "w75-textfield"
+              }
             }
           ]
         }
       ]
     },
     description: {
-      identifier: "datasetDescription",
+      identifier: "description",
       $formkit: "repeatable",
       name: "dct:description",
       children: [
         {
-          identifier: "datasetDescription",
+          identifier: "description",
           $formkit: "group",
           name: "dct:description",
           mandatory: !0,
           minimum: 1,
           children: [
-            {
-              identifier: "description",
-              $formkit: "textarea",
-              name: "@value",
-              validation: "required",
-              classes: {
-                outer: "w25-textfield"
-              }
-            },
             {
               identifier: "language",
               value: "en",
@@ -1919,7 +1897,16 @@ const t = {
               validation: "required",
               name: "@language",
               classes: {
-                outer: "w75-descField"
+                outer: "w25-descField"
+              }
+            },
+            {
+              identifier: "description",
+              $formkit: "textarea",
+              name: "@value",
+              validation: "required",
+              classes: {
+                outer: "w75-textfield"
               }
             }
           ]
@@ -1927,11 +1914,12 @@ const t = {
       ]
     },
     publisher: {
-      $formkit: "auto",
+      $formkit: "simpleConditional",
       identifier: "publisher",
       name: "dct:publisher",
       voc: "corporate-body",
-      id: "publisher"
+      options: { text: "foaf:name", email: "foaf:mbox", url: "foaf:homepage" },
+      selection: { 1: "vocabulary", 2: "manually" }
     },
     language: {
       identifier: "language",
@@ -1947,7 +1935,7 @@ const t = {
       identifier: "licence",
       voc: "licence",
       options: { text: "dct:title", textarea: "skos:prefLabel", url: "skos:exactMatch" },
-      selection: { 1: "Vocabulary", 2: "Manually" }
+      selection: { 1: "vocabulary", 2: "manually" }
     },
     spatial: {
       identifier: "spatial",
@@ -1963,7 +1951,7 @@ const t = {
     },
     homepage: {
       identifier: "homepage",
-      $formkit: "url",
+      $formkit: "simpleInput",
       name: "foaf:homepage",
       validation: "optional|url"
     },
@@ -1981,7 +1969,10 @@ const t = {
               identifier: "hasPartURL",
               $formkit: "url",
               name: "@id",
-              validation: "optional|url"
+              validationType: "url",
+              classes: {
+                outer: "w100-textfield"
+              }
             }
           ]
         }
@@ -1989,41 +1980,43 @@ const t = {
     },
     isPartOf: {
       identifier: "isPartOf",
+      $formkit: "simpleInput",
       name: "dct:isPartOf",
-      $formkit: "url",
-      validation: "optional|url"
+      validationType: "url"
     },
     rights: {
       identifier: "rights",
-      $formkit: "group",
+      $formkit: "simpleConditional",
       name: "dct:rights",
-      children: [
-        {
-          identifier: "rights",
-          $formkit: "select",
-          name: "@type",
-          options: { url: "Provide an URL", str: "String" },
-          id: "rightsModeCatalogue"
-        },
-        {
-          identifier: "rights",
-          $cmp: "FormKit",
-          if: "$get(rightsModeCatalogue).value",
-          props: {
-            if: "$get(rightsModeCatalogue).value === url",
-            then: {
-              identifier: "rightsUrl",
-              type: "url",
-              label: "URL",
-              name: "rdfs:label"
-            },
-            else: {
-              type: "text",
-              name: "rdfs:label"
-            }
-          }
-        }
-      ]
+      options: { url: "rdfs:label", text: "rdfs:label" },
+      selection: { 1: "URL", 2: "text" }
+      // children: [
+      //   {
+      //     identifier: 'rights',
+      //     $formkit: "select",
+      //     name: '@type',
+      //     options: { url: 'Provide an URL', str: 'String' },
+      //     id: "rightsModeCatalogue"
+      //   },
+      //   {
+      //     identifier: 'rights',
+      //     $cmp: "FormKit",
+      //     if: "$get(rightsModeCatalogue).value",
+      //     props: {
+      //       if: "$get(rightsModeCatalogue).value === url",
+      //       then: {
+      //         identifier: 'rightsUrl',
+      //         type: "url",
+      //         label: "URL",
+      //         name: 'rdfs:label',
+      //       },
+      //       else: {
+      //         type: "text",
+      //         name: 'rdfs:label',
+      //       }
+      //     }
+      //   }
+      // ]
     },
     catalog: {
       identifier: "catalog",
@@ -2038,8 +2031,11 @@ const t = {
             {
               identifier: "catalogURL",
               $formkit: "url",
-              validation: "optional|url",
-              name: "@id"
+              validationType: "url",
+              name: "@id",
+              classes: {
+                outer: "w100-textfield"
+              }
             }
           ]
         }
@@ -2047,7 +2043,7 @@ const t = {
     },
     creator: {
       identifier: "creator",
-      $formkit: "group",
+      $formkit: "formkitGroup",
       name: "dct:creator",
       children: [
         {
@@ -2058,24 +2054,36 @@ const t = {
             "": "---",
             "foaf:Person": "Person",
             "foaf:Organization": "Organization"
+          },
+          classes: {
+            outer: "w100-textfield"
           }
         },
         {
           identifier: "creatorName",
           $formkit: "text",
-          name: "foaf:name"
+          name: "foaf:name",
+          classes: {
+            outer: "w100-textfield"
+          }
         },
         {
           identifier: "creatorEmail",
           $formkit: "email",
           name: "foaf:mbox",
-          validation: "optional|email"
+          validation: "optional|email",
+          classes: {
+            outer: "w100-textfield"
+          }
         },
         {
           identifier: "creatorHomepage",
           $formkit: "url",
           name: "foaf:homepage",
-          validation: "optional|url"
+          validation: "optional|url",
+          classes: {
+            outer: "w100-textfield"
+          }
         }
       ]
     }