@bedrock/vue-vc 1.0.0

package/LICENSE.md

@@ -0,0 +1,115 @@
+Bedrock Non-Commercial License v1.0
+===================================
+
+Copyright (c) 2011-2022 Digital Bazaar, Inc.
+All rights reserved.
+
+Summary
+=======
+
+This license allows the licensee to use Bedrock and its software modules
+for non-commercial purposes such as self-study, research, personal
+projects, or for evaluation purposes. If the licensee uses Bedrock
+directly or indirectly to generate revenue, or to provide products or
+services to more than 500 people (users), the licensee must immediately
+obtain a non-profit or commercial license.
+
+Examples
+========
+
+These are examples of cases that are allowed by this license:
+
+* The licensee is an individual that creates Bedrock-dependent software for
+  personal use only.
+* The licensee is an individual or group of students/researchers that uses
+  Bedrock to experiment with an idea for a non-commercial project.
+* The licensee is a startup company that prototypes a Bedrock-dependent
+  product before they have cash flow and will be testing the prototype
+  software with less than 500 users. The service will not generate revenue
+  of any kind.
+* The licensee is a for-profit organization that creates a product or
+  service that is used by less than 500 users and is built with or
+  integrates with Bedrock. The service must be exclusively provided for free
+  and no parent, subsidiary, agent, or affiliate organization may profit
+  from its use.
+
+These cases require a non-profit or commercial license:
+
+* The licensee is a non-profit that receives funding to create and/or run a
+  Bedrock-dependent service.
+* The licensee is a startup company with Bedrock-dependent software that is
+  funded by another organization.
+* The licensee is a startup company that is going into production with
+  Bedrock-dependent software.
+* The licensee has more than 500 users using a Bedrock-dependent service
+  either directly or indirectly.
+* The licensee is a medium to large organization that builds or integrates a
+  commercial product or service with Bedrock.
+
+THE LICENSE
+===========
+
+This section and all subsequent sections of this document constitute the
+agreement between the licensee and Digital Bazaar, Inc.
+
+DEFINITIONS
+===========
+
+* Product - The Bedrock software and any modules associated with Bedrock
+where Digital Bazaar, Inc. owns the copyright.
+
+CONDITIONS
+==========
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted for NON-COMMERCIAL PURPOSES as long as the
+following conditions are met:
+
+1. Any use of the Product must not generate revenue for the licensee or
+   any parent, subsidiary, agent, or affiliate of the licensee. Use of
+   Product includes, but is not limited to, interacting with any of the
+   licensee's Product-dependent products or services over a network.
+
+2. The aggregate number of individual people (users) of the licensee's
+   products or services that use Product must be less than 500.
+
+3. Redistributions of source code must retain the above copyright notice
+   intact, this list of conditions and the following disclaimer.
+
+4. Redistributions in binary form must reproduce the above copyright
+   notice, this license and the following disclaimer in the documentation and
+   on a web page available via interactive use and/or other materials
+   provided with the distribution.
+
+5. Neither the name of the copyright holder, the names of its
+   contributors, nor any trademarks held by the copyright holder may be used
+   to endorse or promote products or services built using the Product without
+   specific prior written permission.
+
+6. Any modifications are clearly outlined in release documentation and are
+   specifically mentioned as not being a part of an official Product release.
+   No additional restrictions to this license may be made when distributing
+   modifications.
+
+7. For the avoidance of doubt, this license prohibits sublicensing of the
+   Product.
+
+8. Any breach of this license by licensee must be resolved within 30 days.
+   Failure to do so results in the termination of this license.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+To obtain a non-profit or commercial license for Product, please contact
+Digital Bazaar, Inc. at the following email address:
+
+Digital Bazaar <support@digitalbazaar.com>

package/README.md

@@ -0,0 +1,2 @@
+# bedrock-vue-vc
+Vue.js Verifiable Credential components

package/components/CredentialBase.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="column justify-evenly">
+    <div
+      :class="dense ? 'q-py-none' : 'q-py-xs'"
+      class="cb-content col row justify-between items-center">
+      <slot name="description">
+        <credential-field
+          class="col"
+          :title="nameOverride.length > 0 ? nameOverride : credentialName"
+          title-class="text-left text-subtitle1"
+          :value="descriptionOverride.length > 0 ?
+            descriptionOverride : description"
+          value-class="text-left text-body2 text-grey-7" />
+      </slot>
+      <slot name="image">
+        <dynamic-image
+          :src="imageOverride.length > 0 ? imageOverride : credentialImage"
+          :size="dense ? 'sm' : 'md'" />
+      </slot>
+    </div>
+    <q-separator
+      v-if="(clickable || expandable) && separator"
+      class="cb-separator" />
+    <div
+      :class="dense ? 'q-py-none' : 'q-py-xs'"
+      class="col">
+      <div
+        v-if="clickable"
+        class="cb-clickable cursor-pointer
+        row items-center justify-center text-grey-7"
+        @click="toggleDetails">
+        <span class="cb-details-text q-mr-sm">{{detailsText}}</span>
+        <q-icon :name="detailsIcon" />
+        <q-dialog v-model="state.details">
+          <slot name="modal">
+            <q-card>
+              <slot name="modalHeader" />
+              <slot name="modalContent">
+                <credential-switch
+                  v-bind="$attrs"
+                  mode="details"
+                  :credential="credential" />
+              </slot>
+              <slot name="modalFooter" />
+            </q-card>
+          </slot>
+        </q-dialog>
+      </div>
+      <div
+        v-else-if="expandable"
+        class="cb-expandable row justify-start text-grey-7 full-width">
+        <q-expansion-item
+          :label="detailsText"
+          class="full-width"
+          dense
+          dense-toggle
+          switch-toggle-side>
+          <slot name="expansion">
+            <slot name="expansionHeader" />
+            <slot name="expansionContent">
+              <credential-switch
+                v-bind="$attrs"
+                mode="details"
+                :credential="credential" />
+            </slot>
+            <slot name="expansionFooter" />
+          </slot>
+        </q-expansion-item>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/*!
+ * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import {computed, defineProps, reactive, toRef, unref} from 'vue';
+import CredentialField from './CredentialField.vue';
+import CredentialSwitch from './CredentialSwitch.vue';
+import DynamicImage from './DynamicImage.vue';
+import {useCredentialCommon} from './credentialCommon.js';
+
+const props = defineProps({
+  credential: {
+    type: Object,
+    required: true
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  separator: {
+    type: Boolean,
+    default: true
+  },
+  clickable: {
+    type: Boolean,
+    default: false
+  },
+  expandable: {
+    type: Boolean,
+    default: false
+  },
+  detailsText: {
+    type: String,
+    default: 'Show Details'
+  },
+  detailsIcon: {
+    type: String,
+    default: 'far fa-window-restore'
+  },
+  imageOverride: {
+    type: String,
+    default: ''
+  },
+  nameOverride: {
+    type: String,
+    default: ''
+  },
+  descriptionOverride: {
+    type: String,
+    default: ''
+  }
+});
+
+const state = reactive({
+  details: false
+});
+
+const {
+  credentialDescription, credentialName,
+  credentialImage
+} = useCredentialCommon({
+  credential: toRef(props, 'credential')
+});
+
+const description = computed(() => {
+  const _cd = unref(credentialDescription);
+  if(_cd.length === 0) {
+    return 'No description available.';
+  }
+  return _cd;
+});
+
+function toggleDetails() {
+  console.log(state.details);
+  state.details = !state.details;
+}
+</script>
+
+<style lang="scss" scoped>
+.cb-expandable :deep(.q-item__section--avatar) {
+  min-width: unset;
+}
+</style>

package/components/CredentialDetail.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="column justify-evenly">
+    <div
+      class="cd-content col column items-center justify-start q-pb-md">
+      <credential-field
+        title="Issued by"
+        :value="issuerName" />
+      <dynamic-image
+        :src="credentialImage"
+        size="lg" />
+      <credential-field
+        class="col text-center"
+        :title="credentialName"
+        title-class="text-subtitle1"
+        :value="credentialDescription"
+        value-class="text-body2 text-grey-7" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+/*!
+ * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import {defineProps, toRef} from 'vue';
+import CredentialField from './CredentialField.vue';
+import DynamicImage from './DynamicImage.vue';
+import {useCredentialCommon} from './credentialCommon.js';
+
+const props = defineProps({
+  credential: {
+    type: Object,
+    default: null
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const {
+  credentialName, credentialImage,
+  issuerName, credentialDescription
+} = useCredentialCommon({
+  credential: toRef(props, 'credential')
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/CredentialField.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-if="show">
+    <q-item class="col q-py-none">
+      <q-item-section>
+        <q-item-label
+          v-if="title"
+          class="cf-title"
+          :class="titleClass"
+          :lines="lines">
+          {{title}}
+        </q-item-label>
+        <q-item-label
+          class="cf-value"
+          :class="valueClass"
+          :lines="lines">
+          {{value}}
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </div>
+</template>
+
+<script setup>
+/*!
+ * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import {computed, defineProps} from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  titleClass: {
+    type: String,
+    default: 'text-caption text-center text-grey-7'
+  },
+  valueClass: {
+    type: String,
+    default: 'text-body2 text-center'
+  },
+  lines: {
+    type: String,
+    default: '2'
+  }
+});
+
+const show = computed(() => props.value.length > 0);
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/CredentialSwitch.vue

@@ -0,0 +1,86 @@
+<template>
+  <component
+    :is="selection"
+    v-bind="{...$props, ...$attrs}">
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope">
+      <slot
+        :name="slot"
+        v-bind="scope || {}" />
+    </template>
+  </component>
+</template>
+
+<script setup>
+/*!
+ * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import {computed, defineProps, unref} from 'vue';
+import {config, extend} from '@bedrock/web';
+import CredentialBase from './CredentialBase.vue';
+import CredentialDetail from './CredentialDetail.vue';
+
+const componentDefaults = {
+  list: CredentialBase,
+  details: CredentialDetail
+};
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'list'
+  },
+  credential: {
+    type: Object,
+    required: true
+  }
+});
+
+const selection = computed(() => {
+  const {credentialDisplay: {registration: registrations}} = config;
+  const map = new Map();
+  for(const registration of registrations) {
+    const {acceptableTypes, components} = registration;
+    // loop through types so that map will consist of an object
+    // containing all registered types
+    for(const type of acceptableTypes) {
+      // if the type already exists in the map, merge it with the
+      // new information
+      const existing = map.get(type);
+      if(existing) {
+        const combined = extend({
+          target: {}, source: [existing, components], deep: true
+        });
+        map.set(type, combined);
+        continue;
+      }
+      map.set(type, components);
+    }
+  }
+  const {mode, credential} = props;
+  const {type = ''} = unref(credential);
+  // work backwards to lookup type in mapping
+  // use defaults if not found in mapping
+  let options;
+  let index = type.length - 1;
+  while(!options) {
+    if(index === -1) {
+      return componentDefaults[mode];
+    }
+    const granularType = type[index];
+    options = map.get(granularType)?.[mode];
+    index--;
+  }
+  // TODO: Determine if there is a way to check which components are
+  // globally registered. This would allow for the component
+  // selection to walk through the options and select the first
+  // available component for the type.
+  const {component} = options[0];
+  return component;
+});
+
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/DynamicImage.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    class="row justify-center"
+    :class="credentialImageClass">
+    <q-icon
+      v-if="showDefault || hasImageError"
+      :name="defaultImage" />
+    <img
+      v-else
+      :src="src"
+      @error="imageError">
+  </div>
+</template>
+
+<script setup>
+/*!
+ * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import {computed, defineProps, ref} from 'vue';
+import {useQuasar} from 'quasar';
+
+const DEFAULT_ICONS = {
+  fontawesome: {
+    defaultImage: 'fas fa-check-square'
+  },
+  'material-icons': {
+    defaultImage: 'check_box'
+  }
+};
+const $q = useQuasar();
+
+// set default icons
+const defaultIcons = DEFAULT_ICONS[$q.iconSet.name] ||
+  DEFAULT_ICONS.fontawesome;
+// if the iconSet is missing credentialCard add it
+if(!$q.iconSet.credentialCard) {
+  $q.iconSet.credentialCard = {};
+}
+// add all the defaultIcons to credentialCard
+for(const name in defaultIcons) {
+  if(!$q.iconSet.credentialCard[name]) {
+    $q.iconSet.credentialCard[name] = defaultIcons[name];
+  }
+}
+
+const hasImageError = ref(false);
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  size: {
+    type: String,
+    required: true,
+    default: 'md'
+  }
+});
+
+const showDefault = computed(() => !props.src);
+const defaultImage = computed(() => $q.iconSet.credentialCard.defaultImage);
+const credentialImageClass = computed(
+  () => [`credential-card-image-${props.size}`]);
+
+function imageError() {
+  hasImageError.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+$xs: 25px;
+$sm: 50px;
+$md: 75px;
+$lg: 125px;
+$xl: 150px;
+
+.credential-card-image-xs {
+  svg {
+    width: $xs;
+    height: $xs;
+  }
+
+  .q-icon {
+    font-size: $xs;
+  }
+
+  img {
+    width: $xs;
+    height: $xs;
+    border-radius: 4px;
+  }
+}
+.credential-card-image-sm {
+  svg {
+    width: $sm;
+    height: $sm;
+  }
+
+  .q-icon {
+    font-size: $sm;
+  }
+
+  img {
+    width: $sm;
+    height: $sm;
+    border-radius: 4px;
+  }
+}
+.credential-card-image-md {
+  svg {
+    width: $md;
+    height: $md;
+  }
+
+  .q-icon {
+    font-size: $md;
+  }
+
+  img {
+    width: $md;
+    height: $md;
+    border-radius: 4px;
+  }
+}
+.credential-card-image-lg {
+  svg {
+    width: $lg;
+    height: $lg;
+  }
+
+  .q-icon {
+    font-size: $lg;
+  }
+
+  img {
+    width: $lg;
+    height: $lg;
+    border-radius: 4px;
+  }
+}
+.credential-card-image-xl {
+  svg {
+    width: $xl;
+    height: $xl;
+  }
+
+  .q-icon {
+    font-size: $xl;
+  }
+
+  img {
+    width: $xl;
+    height: $xl;
+    border-radius: 4px;
+  }
+}
+</style>

package/components/credentialCommon.js

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import {computed, unref} from 'vue';
+
+/**
+ * Common utilities for credential components.
+ *
+ * @param {object} options - The options to use.
+ * @param {*} options.credential - A vue ref to the credential.
+ * @returns {object} An object containing common credential utilities.
+ */
+export function useCredentialCommon({credential}) {
+  const credentialName = computed(() => {
+    const {name = '', type = ['Verifiable Credential']} = unref(credential);
+    if(name.length > 0) {
+      return name;
+    }
+    const granularType = type[type.length - 1];
+    // Replace any uppercase letter `[A-Z]` or any sequence of digits `\d+`
+    // with a space plus what was just matched ` $1`. Skip the first
+    // letter so that no space will be added at the beginning of the
+    // resulting string by adding a negative lookahead on the start of the
+    // string (?!^). 'SomeTestCredential300' -> 'Some Test Credential 300'
+    return granularType.replace(/(?!^)([A-Z]|\d+)/g, ' $1');
+  });
+
+  const credentialImage = computed(() => {
+    const {image = null, issuer} = unref(credential);
+    return image ?? issuer?.image ?? issuer?.logo ?? '';
+  });
+
+  const issuerName = computed(() => {
+    const {issuer} = unref(credential);
+    return issuer?.name ?? '';
+  });
+
+  const credentialDescription = computed(() => {
+    const {description = ''} = unref(credential);
+    return description;
+  });
+
+  return {
+    credentialName,
+    credentialImage,
+    credentialDescription,
+    issuerName
+  };
+}

package/lib/config.js

@@ -0,0 +1,13 @@
+import {config} from '@bedrock/web';
+
+config.credentialDisplay = {
+  registration: [/*
+  {
+    acceptableTypes: ['VerifiableCredential'],
+    components: {
+      details: [{component: 'CredentialDetail'}],
+    }
+  },
+  ...
+  */]
+};

package/lib/index.js

@@ -0,0 +1,23 @@
+/*!
+ * Copyright (c) 2018-2022 Digital Bazaar, Inc. All rights reserved.
+ */
+import './config.js';
+
+export {default as CredentialBase} from '../components/CredentialBase.vue';
+export {default as CredentialField} from '../components/CredentialField.vue';
+export {default as CredentialSwitch} from '../components/CredentialSwitch.vue';
+export {default as DynamicImage} from '../components/DynamicImage.vue';
+export {useCredentialCommon} from '../components/credentialCommon.js';
+
+export const registerComponent = async ({app, component, name = ''}) => {
+  app.component(name, component);
+};
+
+export const registerComponents = async ({app, components}) => {
+  for(const component of components) {
+    await registerComponent({
+      app, component: component.value,
+      name: component.name
+    });
+  }
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@bedrock/vue-vc",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Vue.js credential components for Bedrock Web Apps",
+  "module": "./lib/index.js",
+  "scripts": {
+    "lint": "eslint --ext .cjs,.js,.vue ."
+  },
+  "files": [
+    "lib/**/*.js",
+    "components/**/*.js",
+    "components/**/*.vue"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/digitalbazaar/bedrock-vue-vc"
+  },
+  "keywords": [
+    "bedrock"
+  ],
+  "author": {
+    "name": "Digital Bazaar, Inc.",
+    "email": "support@digitalbazaar.com",
+    "url": "https://digitalbazaar.com"
+  },
+  "bugs": {
+    "url": "https://github.com/digitalbazaar/bedrock-vue-vc/issues"
+  },
+  "homepage": "https://github.com/digitalbazaar/bedrock-vue-vc",
+  "peerDependencies": {
+    "@bedrock/quasar": "^8.0.1",
+    "@bedrock/web": "^2.0.1",
+    "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "eslint": "^8.20.0",
+    "eslint-config-digitalbazaar": "^4.1.0",
+    "eslint-plugin-jsdoc": "^39.3.3",
+    "eslint-plugin-unicorn": "^43.0.2",
+    "eslint-plugin-vue": "^9.2.0",
+    "jsdoc": "^3.6.11",
+    "jsdoc-to-markdown": "^7.1.1"
+  }
+}