@bedrock/vue-vc 5.0.0 → 5.1.0

package/LICENSE.md

@@ -1,8 +1,7 @@
 Bedrock Non-Commercial License v1.0
 ===================================
 
-Copyright (c) 2011-2022 Digital Bazaar, Inc.
-All rights reserved.
+Copyright (c) 2011-2026 Digital Bazaar, Inc.
 
 Summary
 =======

package/components/CredentialBase.vue

@@ -20,7 +20,9 @@
             descriptionOverride : description"
           :value-class="`text-right
             ${textColor ? '':' text-grey-7'}
-            ${dense ? ' text-caption':' text-caption'}`" />
+            ${dense ? ' text-caption':' text-caption'}`"
+          :max-width="maxWidth"
+          lines="2" />
       </slot>
     </div>
     <q-dialog v-model="state.details">
@@ -42,7 +44,7 @@
 
 <script setup>
 /*!
- * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2018-2026 Digital Bazaar, Inc.
  */
 import {computed, defineProps, reactive, toRef, unref} from 'vue';
 import CredentialField from './CredentialField.vue';
@@ -94,6 +96,10 @@ const props = defineProps({
   descriptionOverride: {
     type: String,
     default: ''
+  },
+  maxWidth: {
+    type: String,
+    default: '225px'
   }
 });
 

package/components/CredentialDetail.vue

@@ -21,7 +21,7 @@
 
 <script setup>
 /*!
- * Copyright (c) 2018-2023 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2018-2026 Digital Bazaar, Inc.
  */
 import {computed, defineProps, toRef, unref} from 'vue';
 import CredentialField from './CredentialField.vue';

package/components/CredentialField.vue

@@ -4,7 +4,7 @@
       <q-item-section>
         <q-item-label
           class="cf-value"
-          style="max-width: 225px;"
+          :style="{maxWidth: maxWidth}"
           :class="valueClass"
           :lines="lines">
           {{value}}
@@ -12,7 +12,7 @@
         <q-item-label
           v-if="title"
           class="cf-title"
-          style="max-width: 225px;"
+          :style="{maxWidth: maxWidth}"
           :class="titleClass"
           :lines="lines">
           {{title}}
@@ -24,7 +24,7 @@
 
 <script setup>
 /*!
- * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2018-2026 Digital Bazaar, Inc.
  */
 import {computed, defineProps} from 'vue';
 
@@ -48,6 +48,10 @@ const props = defineProps({
   lines: {
     type: String,
     default: '1'
+  },
+  maxWidth: {
+    type: String,
+    default: '225px'
   }
 });
 

package/components/CredentialSwitch.vue

@@ -14,7 +14,7 @@
 
 <script setup>
 /*!
- * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2018-2026 Digital Bazaar, Inc.
  */
 import {computed, defineProps, unref} from 'vue';
 import {config, extend} from '@bedrock/web';

package/components/DynamicImage.vue

@@ -14,7 +14,7 @@
 
 <script setup>
 /*!
- * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2018-2026 Digital Bazaar, Inc.
  */
 import {computed, defineProps, ref} from 'vue';
 import {useQuasar} from 'quasar';
@@ -47,13 +47,11 @@ const hasImageError = ref(false);
 const props = defineProps({
   src: {
     type: String,
-    required: true,
-    default: ''
+    required: true
   },
   size: {
     type: String,
-    required: true,
-    default: 'md'
+    required: true
   }
 });
 
@@ -157,6 +155,5 @@ img {
     height: $xl;
     border-radius: 4px;
   }
-
 }
 </style>

package/components/credentialCommon.js

@@ -1,7 +1,8 @@
 /*!
- * Copyright (c) 2022 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2022-2026 Digital Bazaar, Inc.
  */
 import {computed, unref} from 'vue';
+import {resolveCredentialDefinitionField} from './credentialDefinitions.js';
 
 /**
  * Common utilities for credential components.
@@ -26,8 +27,16 @@ export function useCredentialCommon({credential}) {
   });
 
   const credentialImage = computed(() => {
-    const {image = null, issuer} = unref(credential);
-    return image ?? issuer?.image ?? issuer?.logo ?? '';
+    const cred = unref(credential);
+    const {image = null, issuer} = cred;
+    // fall back to a vocabulary-specific image (e.g. OBv3's
+    // `credentialSubject.achievement.image`) when no top-level image is
+    // set; the resolved value may itself be a string URL or an image
+    // object (`.id` holds the URL), per the OBv3 vocabulary
+    const definitionImage = resolveCredentialDefinitionField(
+      {credential: cred, field: 'imagePointer'});
+    const definitionImageUrl = definitionImage?.id ?? definitionImage ?? null;
+    return image ?? definitionImageUrl ?? issuer?.image ?? issuer?.logo ?? '';
   });
 
   const issuerName = computed(() => {
@@ -36,8 +45,15 @@ export function useCredentialCommon({credential}) {
   });
 
   const credentialDescription = computed(() => {
-    const {description = ''} = unref(credential);
-    return description;
+    const cred = unref(credential);
+    const {description = ''} = cred;
+    // fall back to a vocabulary-specific description (e.g. OBv3's
+    // `credentialSubject.achievement.description`) when no top-level
+    // description is set. Use `||`, not `??`, so an explicit empty string
+    // (not just a missing/undefined field) also triggers the fallback.
+    const definitionDescription = resolveCredentialDefinitionField(
+      {credential: cred, field: 'descriptionPointer'});
+    return description || definitionDescription || '';
   });
 
   return {

package/components/credentialDefinitions.js

@@ -0,0 +1,72 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+/**
+ * Generic, vocabulary-specific fallbacks for credential fields the core
+ * VCDM does not define a fixed location for (e.g. `image`, `description`).
+ * Each definition matches a credential via a map of JSON Pointer (RFC 6901)
+ * => expected value, and supplies JSON Pointers to resolve for fields it
+ * covers. A pointer whose target value is an array (e.g. `/type`) matches
+ * if the array includes the expected value.
+ *
+ * Matching on `/type` rather than `/@context` avoids breaking on
+ * vocabularies (like Open Badges) that mint a new context URL per minor
+ * version -- `type` values are stable across those.
+ */
+export const credentialDefinitions = [
+  {
+    // Open Badges v3 (OBv3) `OpenBadgeCredential`s.
+    matches: {
+      '/type': 'OpenBadgeCredential'
+    },
+    imagePointer: '/credentialSubject/achievement/image',
+    descriptionPointer: '/credentialSubject/achievement/description'
+  }
+];
+
+/**
+ * Resolves a JSON Pointer (RFC 6901) against a value.
+ *
+ * @param {object} options - The options to use.
+ * @param {*} options.value - The value to resolve the pointer against.
+ * @param {string} [options.pointer] - The JSON Pointer to resolve.
+ *
+ * @returns {*} The resolved value, or `undefined` if the pointer is unset
+ *   or any segment is missing.
+ */
+export function getPointerValue({value, pointer}) {
+  if(!pointer) {
+    return undefined;
+  }
+  const segments = pointer.split('/').slice(1).map(
+    segment => segment.replace(/~1/g, '/').replace(/~0/g, '~'));
+  return segments.reduce((target, segment) => target?.[segment], value);
+}
+
+function _matchesDefinition({credential, matches}) {
+  return Object.entries(matches).every(([pointer, expected]) => {
+    const target = getPointerValue({value: credential, pointer});
+    return Array.isArray(target) ?
+      target.includes(expected) : target === expected;
+  });
+}
+
+/**
+ * Finds the first credential definition matching `credential` and resolves
+ * the JSON Pointer named by `field` (e.g. `imagePointer`,
+ * `descriptionPointer`) against it.
+ *
+ * @param {object} options - The options to use.
+ * @param {object} options.credential - The credential to resolve a
+ *   fallback value for.
+ * @param {string} options.field - The definition field naming the JSON
+ *   Pointer to resolve.
+ *
+ * @returns {*} The resolved value, or `undefined` if no definition
+ *   matches, or the matched definition does not set `field`.
+ */
+export function resolveCredentialDefinitionField({credential, field}) {
+  const definition = credentialDefinitions.find(
+    ({matches}) => _matchesDefinition({credential, matches}));
+  return getPointerValue({value: credential, pointer: definition?.[field]});
+}

package/lib/index.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ * Copyright (c) 2018-2026 Digital Bazaar, Inc.
  */
 import './config.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrock/vue-vc",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "description": "Vue.js credential components for Bedrock Web Apps",
   "exports": {
@@ -32,16 +32,12 @@
   },
   "homepage": "https://github.com/digitalbazaar/bedrock-vue-vc",
   "peerDependencies": {
-    "@bedrock/quasar": "^10.0.0",
-    "@bedrock/web": "^3.0.0",
-    "vue": "^3.4.21"
+    "@bedrock/quasar": "^10.0.1",
+    "@bedrock/web": "^3.1.0",
+    "vue": "^3.5.42"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
-    "eslint-config-digitalbazaar": "^5.0.1",
-    "eslint-plugin-jsdoc": "^48.2.1",
-    "eslint-plugin-quasar": "^1.1.0",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "eslint-plugin-vue": "^9.23.0"
+    "@digitalbazaar/eslint-config": "^9.0.0",
+    "eslint": "^10.9.1"
   }
 }