#28 - Dataset - mutlistep - step 5 - second work

src/components/DatasetMultiStep/OcDatasetFormStep5/OcDatasetFormStep5.vue

 <template>
   <Form class="flex flex-wrap -px-2" :initial-values="model" @submit="submit">
     <OcField v-if="model.title" :metadata="datasetMetadata.title" for="title" class="w-full">
-      <div class="bg-slate-50 rounded-md p-2">
-        {{ model.title }}
-      </div>
+      {{ model.title }}
     </OcField>
     <OcField
       v-if="model.description"
@@ -11,13 +9,11 @@
       for="description"
       class="w-full"
     >
-      <div class="bg-slate-50 rounded-md p-2">
-        {{ model.description }}
-      </div>
+      {{ model.description }}
     </OcField>
     <OcField v-if="model.creator" :metadata="datasetMetadata.creator" for="creator" class="w-full">
       <div class="flex gap-2 flex-wrap">
-        <OcAgentChip v-for="creator in model.creator" :agent="creator" :key="creator['@id']" />
+        <OcAgentTag v-for="creator in model.creator" :agent="creator" :key="creator['@id']" />
       </div>
     </OcField>
     <OcField
@@ -26,7 +22,7 @@
       for="publisher"
       class="w-1/2"
     >
-      <OcAgentChip :agent="model.publisher" />
+      <OcAgentTag :agent="model.publisher" />
     </OcField>
     <OcField
       v-if="model.contactPoint"
@@ -34,7 +30,7 @@
       for="contactPoint"
       class="w-1/2"
     >
-      <OcAgentChip :agent="model.contactPoint" />
+      <OcAgentTag :agent="model.contactPoint" />
     </OcField>
     <OcField
       v-if="model.accrualPeriodicity"
@@ -42,27 +38,27 @@
       for="accrualPeriodicity"
       class="w-1/2"
     >
-      <Chip :label="translateValue(model.accrualPeriodicity.prefLabel)" />
+      <Tag :value="translateValue(model.accrualPeriodicity.prefLabel)" />
     </OcField>
     <OcField v-if="model.type" :metadata="datasetMetadata.type" for="type" class="w-1/2">
-      <Chip :label="translateValue(model.type.prefLabel)" />
+      <Tag :value="translateValue(model.type.prefLabel)" />
     </OcField>
     <OcField v-if="model.theme" :metadata="datasetMetadata.theme" for="theme" class="w-1/2">
       <div class="flex gap-2 flex-wrap">
-        <Chip
+        <Tag
           v-for="theme in model.theme"
-          :label="translateValue(theme.prefLabel)"
+          :value="translateValue(theme.prefLabel)"
           :key="theme['@id']"
         />
       </div>
     </OcField>
     <OcField v-if="model.keyword" :metadata="datasetMetadata.keyword" for="keyword" class="w-1/2">
       <div class="flex gap-2 flex-wrap">
-        <Chip v-for="keyword in model.keyword" :label="keyword" :key="keyword" />
+        <Tag v-for="keyword in model.keyword" :value="keyword" :key="keyword" />
       </div>
     </OcField>
     <OcField v-if="model.issued" :metadata="datasetMetadata.issued" for="issued" class="w-1/2">
-      <Chip :label="model.issued.toLocaleDateString()" />
+      {{ model.issued.toLocaleDateString() }}
     </OcField>
     <OcField
       v-if="model.modified"
@@ -70,7 +66,7 @@
       for="modified"
       class="w-1/2"
     >
-      <Chip :label="model.modified.toLocaleDateString()" />
+      {{ model.modified.toLocaleDateString() }}
     </OcField>
     <OcField
       v-if="model.language"
@@ -79,9 +75,9 @@
       class="w-1/2"
     >
       <div class="flex gap-2 flex-wrap">
-        <Chip
+        <Tag
           v-for="language in model.language"
-          :label="translateValue(language.prefLabel)"
+          :value="translateValue(language.prefLabel)"
           :key="language['@id']"
         />
       </div>
@@ -92,9 +88,7 @@
       for="landingPage"
       class="w-1/2"
     >
-      <div class="bg-slate-50 rounded-md p-2">
-        {{ model.landingPage }}
-      </div>
+      {{ model.landingPage }}
     </OcField>
     <OcField
       v-if="model.temporal"
@@ -102,20 +96,16 @@
       for="temporal"
       class="w-1/2"
     >
-      <Chip
-        :label="
-          model.temporal[0].toLocaleDateString() + ' > ' + model.temporal[1].toLocaleDateString()
-        "
-      />
+      {{ model.temporal[0].toLocaleDateString() + ' - ' + model.temporal[1].toLocaleDateString() }}
     </OcField>
     <OcField v-if="model.spatial" :metadata="datasetMetadata.spatial" for="spatial" class="w-1/2">
-      <Chip :label="translateValue(model.spatial.prefLabel)" />
+      <Tag :value="translateValue(model.spatial.prefLabel)" />
     </OcField>
     <OcField v-if="model.license" :metadata="datasetMetadata.license" for="license" class="w-1/2">
-      <Chip :label="translateValue(model.license.prefLabel)" />
+      <Tag :value="translateValue(model.license.prefLabel)" />
     </OcField>
     <OcField v-if="model.status" :metadata="datasetMetadata.status" for="status" class="w-1/2">
-      <Chip :label="translateValue(model.status.prefLabel)" />
+      <Tag :value="translateValue(model.status.prefLabel)" />
     </OcField>
     <OcField
       v-if="model.conformsTo"
@@ -123,10 +113,10 @@
       for="conformsTo"
       class="w-1/2"
     >
-      <Chip :label="translateValue(model.conformsTo.prefLabel)" />
+      <Tag :value="translateValue(model.conformsTo.prefLabel)" />
     </OcField>
     <OcField v-if="model.version" :metadata="datasetMetadata.version" for="version" class="w-1/2">
-      <Chip :label="model.version" />
+      {{ model.version }}
     </OcField>
     <template v-if="model.distribution">
       <h2 class="font-extrabold text-2xl mt-8">{{ t('distributionsLabel') }}</h2>
@@ -134,48 +124,55 @@
       <Accordion value="0" class="w-full">
         <AccordionPanel :value="key" v-for="(distribution, key) in model.distribution" :key="key">
           <AccordionHeader>{{ distribution.title }}</AccordionHeader>
-          <AccordionContent>
-            <OcField :metadata="distributionMetadata.title" for="title">
-              {{ distribution.title }}
-            </OcField>
-            <OcField :metadata="distributionMetadata.description" for="description">
+          <AccordionContent pt:content="flex flex-wrap">
+            <OcField :metadata="distributionMetadata.description" for="description" class="w-full">
               {{ distribution.description }}
             </OcField>
             <OcField
               v-if="distribution.license"
               :metadata="distributionMetadata.license"
               for="license"
+              class="w-1/2"
             >
-              {{ distribution.license }}
+              <Tag :value="translateValue(distribution.license.prefLabel)" />
             </OcField>
-            <OcField :metadata="distributionMetadata.type" for="type">
-              {{ distribution.type }}
+            <OcField
+              v-if="distribution.type"
+              :metadata="distributionMetadata.type"
+              for="type"
+              class="w-1/2"
+            >
+              <Tag :value="translateValue(distribution.type.prefLabel)" />
             </OcField>
             <OcField
               v-if="distribution.issued"
               :metadata="distributionMetadata.issued"
               for="issued"
+              class="w-1/2"
             >
-              {{ distribution.issued }}
+              {{ distribution.issued.toLocaleDateString() }}
             </OcField>
             <OcField
               v-if="distribution.format"
               :metadata="distributionMetadata.format"
               for="format"
+              class="w-1/2"
             >
-              {{ distribution.format }}
+              <Tag :value="translateValue(distribution.format.prefLabel)" />
             </OcField>
             <OcField
               v-if="distribution.conformsTo"
               :metadata="distributionMetadata.conformsTo"
               for="conformsTo"
+              class="w-1/2"
             >
-              {{ distribution.conformsTo }}
+              <Tag :value="translateValue(distribution.conformsTo.prefLabel)" />
             </OcField>
             <OcField
               v-if="distribution.accessURL"
               :metadata="distributionMetadata.accessURL"
               for="accessURL"
+              class="w-1/2"
             >
               {{ distribution.accessURL }}
             </OcField>
@@ -183,15 +180,17 @@
               v-if="distribution.accessRights"
               :metadata="distributionMetadata.accessRights"
               for="accessRights"
+              class="w-1/2"
             >
-              {{ distribution.accessRights }}
+              <Tag :value="translateValue(distribution.accessRights.prefLabel)" />
             </OcField>
             <OcField
               v-if="distribution.accessService"
               :metadata="distributionMetadata.accessService"
               for="accessService"
+              class="w-1/2"
             >
-              {{ distribution.accessService }}
+              <Tag :value="translateValue(distribution.accessService.title)" />
             </OcField>
           </AccordionContent>
         </AccordionPanel>
@@ -227,8 +226,8 @@ import { distributionMetadata } from '@/modelMetadata/distribution'
 import { useTranslateValue } from '@/composables/translateValue'
 import type { OcDataset } from '@/declarations'
 import OcField from '@/components/FormInputs/OcField/OcField.vue'
-import OcAgentChip from '@/components/OcAgentChip/OcAgentChip.vue'
-import Chip from 'primevue/chip'
+import OcAgentTag from '@/components/OcAgentTag/OcAgentTag.vue'
+import Tag from 'primevue/tag'
 import Accordion from 'primevue/accordion'
 import AccordionPanel from 'primevue/accordionpanel'
 import AccordionHeader from 'primevue/accordionheader'
@@ -255,4 +254,7 @@ const submit = (values: Object, ctx: SubmissionContext) => {
 .oc-field {
   @apply px-2 py-1;
 }
+:deep(.oc-field-content) {
+  @apply bg-slate-50 rounded-md p-2;
+}
 </style>

src/components/FormInputs/OcField/OcField.vue

@@ -7,7 +7,7 @@
       <OcFairBadge :letter="false" size="small" :badges="metadata.fair" :popover="true" />
     </div>
     <div class="flex content-stretch items-start">
-      <div class="grow w-full">
+      <div class="oc-field-content grow w-full">
         <slot />
       </div>
       <Button

src/components/OcAgentChip/OcAgentChip.stories.ts → src/components/OcAgentTag/OcAgentTag.stories.ts

 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import OcAgentChip from './OcAgentChip.vue';
+import OcAgentTag from './OcAgentTag.vue';
 
-const meta: Meta<typeof OcAgentChip> = {
-  component: OcAgentChip,
+const meta: Meta<typeof OcAgentTag> = {
+  component: OcAgentTag,
 };
 
 export default meta;
-type Story = StoryObj<typeof OcAgentChip>;
+type Story = StoryObj<typeof OcAgentTag>;
 
 export const Person: Story = {
   render: (args) => ({
-    components: { OcAgentChip },
+    components: { OcAgentTag },
     setup() {
       return { args };
     },
-    template: '<OcAgentChip v-bind="args" />',
+    template: '<OcAgentTag v-bind="args" />',
   }),
   args: {
     agent: {
@@ -29,11 +29,11 @@ export const Person: Story = {
 
 export const Organization: Story = {
   render: (args) => ({
-    components: { OcAgentChip },
+    components: { OcAgentTag },
     setup() {
       return { args };
     },
-    template: '<OcAgentChip v-bind="args" />',
+    template: '<OcAgentTag v-bind="args" />',
   }),
   args: {
     agent: {

src/components/OcAgentChip/OcAgentChip.vue → src/components/OcAgentTag/OcAgentTag.vue

 <template>
-  <Chip :icon="icon" :label="name" />
+  <Tag :icon="icon" :value="name" />
 </template>
 
 <script setup lang="ts">
 import { useTranslateValue } from '@/composables/translateValue'
 import type { OcOrganization, OcPerson } from '@/declarations'
 import { type2IconsDict } from '@/helpers/icons'
-import Chip from 'primevue/chip'
+import Tag from 'primevue/tag'
 import { computed, type PropType } from 'vue'
 
 const { translateValue } = useTranslateValue()