barbican-reset 3.36.0 → 3.40.0

package/components/BrAlert.vue

@@ -19,8 +19,8 @@
 
 `
 <script>
-import CloseIcon from "#icons/close.vue";
-import BrButton from "#components/BrButton.vue";
+import CloseIcon from '../icons/Close.vue';
+import BrButton from './BrButton.vue';
 
 export default {
   components: {

package/components/BrButton.vue

@@ -7,13 +7,13 @@
     aria-live="polite"
     ref="button">
     <template v-if="state == 'default'">
-      <slot name="default">default</slot>
+      <slot name="default" />
     </template>
     <template v-else-if="state == 'loading'">
       <template v-if="$slots.loading">
         <slot name="loading">loading</slot>
       </template>
-      <dot-typing v-else />
+      <dots-animation v-else />
     </template>
     <template v-else-if="state == 'loaded'">
       <slot name="loaded">loaded</slot>
@@ -26,7 +26,7 @@
 
 <script setup>
 import { computed, useTemplateRef } from 'vue'
-import DotTyping from '#components/BrButton/dot_typing.vue'
+import DotsAnimation from '../icons/Dots.vue'
 
 const emits = defineEmits(['click'])
 
@@ -43,6 +43,10 @@ const generateClassnames = computed(() => {
     classnames.push('btn-slim')
   }
 
+  if (!props.noReact) {
+    classnames.push('btn-react')
+  }
+
   return classnames
 })
 
@@ -69,6 +73,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  noReact: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 defineExpose({

package/components/BrCard.vue

@@ -16,7 +16,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import BrCardBody from '#components/BrCardBody.vue'
+import BrCardBody from './BrCardBody.vue'
 
 const generateClassnames = computed(() => {
   let classnames = ['br-card']

package/components/BrCardTearoff.vue

@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import BrCardBody from '#components/BrCardBody.vue'
+import BrCardBody from './BrCardBody.vue'
 </script>

package/components/BrCollapse/Button.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import BrButton from "#components/BrButton.vue";
+import BrButton from "../BrButton.vue";
 
 export default {
   components: {

package/components/BrConfirmDone.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-done">
-    <done-icon />
+    <br-done-icon />
     <br-card-title class="title">Done</br-card-title>
     <br-card-text v-if="$slots.default" class="margin-top-1">
       <slot />
@@ -10,12 +10,12 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { animateDone } from '#scripts/animations/confirm'
+import { animateDone } from '../animations/confirm'
 
-import BrCard from '#components/BrCard.vue'
-import BrCardTitle from '#components/BrCardTitle.vue'
-import BrCardText from '#components/BrCardText.vue'
-import DoneIcon from '#icons/confirm/done.vue'
+import BrCard from './BrCard.vue'
+import BrCardTitle from './BrCardTitle.vue'
+import BrCardText from './BrCardText.vue'
+import BrDoneIcon from '../icons/Confirm/Done.vue'
 
 onMounted(() => animateDone())
 </script>

package/components/BrConfirmEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-email">
-    <email-icon />
+    <br-email-icon />
     <br-card-title v-if="$slots.title" class="title">
       <slot name="title" />
     </br-card-title>
@@ -12,12 +12,12 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { animateEmail } from '#scripts/animations/confirm'
+import { animateEmail } from '../animations/confirm'
 
-import BrCard from '#components/BrCard.vue'
-import BrCardTitle from '#components/BrCardTitle.vue'
-import BrCardText from '#components/BrCardText.vue'
-import EmailIcon from '#icons/confirm/email.vue'
+import BrCard from './BrCard.vue'
+import BrCardTitle from './BrCardTitle.vue'
+import BrCardText from './BrCardText.vue'
+import BrEmailIcon from '../icons/Confirm/Email.vue'
 
 onMounted(() => animateEmail())
 </script>

package/components/BrDetails.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="br-details">
-    <br-button variant="summary" @click="update" :data-test="'toggle-' + label">
+    <br-button
+      :data-test="'toggle-' + label"
+      variant="summary"
+      @click="update"
+      no-react>
       <div class="wrap-title">
         <slot name="title">Title goes here</slot>
       </div>

package/components/BrFormCheckbox.vue

@@ -28,9 +28,9 @@
 
 <script setup>
 import { computed, useAttrs } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
-import BrFormLabel from '#components/BrFormLabel.vue'
-import BrFormInput from '#components/BrFormInput.vue'
+import formatKebabCase from '../utils/formatKebabCase'
+import BrFormLabel from './BrFormLabel.vue'
+import BrFormInput from './BrFormInput.vue'
 
 /** All fallthrough attributes from the parent. */
 const attrs = useAttrs()

package/components/BrFormCheckboxGroup.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import BrFormCheckbox from '#components/BrFormCheckbox.vue'
+import BrFormCheckbox from './BrFormCheckbox.vue'
 
 const model = defineModel()
 

package/components/BrFormDate.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import BrFormInput from '#components/BrFormInput.vue'
+import BrFormInput from './BrFormInput.vue'
 
 defineOptions({
   inheritAttrs: false,

package/components/BrFormEdit.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import BrButton from '#components/BrButton.vue'
-import EditIcon from '#icons/account/edit.vue'
+import BrButton from './BrButton.vue'
+import EditIcon from '../icons/AccountEdit.vue'
 
 export default {
   props: {

package/components/BrFormEmail.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import BrFormInput from '#components/BrFormInput.vue'
+import BrFormInput from './BrFormInput.vue'
 </script>

package/components/BrFormInput.vue

@@ -6,12 +6,13 @@
     :type="generateType"
     v-model="model"
     v-bind="$attrs"
+    :style="generateStyles"
     :id="id" />
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '../utils/formatKebabCase'
 
 const model = defineModel()
 
@@ -20,6 +21,7 @@ const props = defineProps({
   type: String,
   dataTest: String,
   autocomplete: String,
+  inputCustomColors: Object,
 })
 
 defineOptions({
@@ -56,6 +58,21 @@ const generateDataTest = computed(() => {
   return result && formatKebabCase(result)
 })
 
+const generateStyles = computed(function () {
+  const colors = props.inputCustomColors
+
+  if (!colors) return
+
+  return Object.fromEntries(
+    [
+      ['--background-color-toggle-unchecked', colors.default],
+      ['--background-color-toggle-checked', colors.checked],
+      ['--background-color-toggle-before-unchecked', colors.defaultCircle],
+      ['--background-color-toggle-before-checked', colors.checkedCircle],
+    ].filter(([, value]) => value),
+  )
+})
+
 // @description Returns a string for the "type" attribute
 // @returns {string} result - string based on preceeding conditions
 

package/components/BrFormPassword.vue

@@ -12,8 +12,8 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import BrFormInput from '#components/BrFormInput.vue'
-import BrFormVisible from '#components/BrFormVisible.vue'
+import BrFormInput from './BrFormInput.vue'
+import BrFormVisible from './BrFormVisible.vue'
 
 const props = defineProps({
   toggle: Boolean,

package/components/BrFormRadio.vue

@@ -20,10 +20,10 @@
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '../utils/formatKebabCase'
 
-import BrFormLabel from '#components/BrFormLabel.vue'
-import BrFormInput from '#components/BrFormInput.vue'
+import BrFormLabel from './BrFormLabel.vue'
+import BrFormInput from './BrFormInput.vue'
 
 const generateClassnames = computed(() => {
   let classnames = ['br-form-radio']

package/components/BrFormRadioGroup.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup>
-import BrFormRadio from '#components/BrFormRadio.vue'
-import BrWrap from '#components/BrWrap.vue'
+import BrFormRadio from './BrFormRadio.vue'
+import BrWrap from './BrWrap.vue'
 
 const model = defineModel()
 

package/components/BrFormRow.vue

@@ -16,8 +16,8 @@
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
-import BrFormLabel from '#components/BrFormLabel.vue'
+import formatKebabCase from '../utils/formatKebabCase'
+import BrFormLabel from './BrFormLabel.vue'
 
 const props = defineProps({
   label: String,

package/components/BrFormSelect.vue

@@ -9,16 +9,8 @@
       aria-expanded="false"
       data-title="title"
       role="combobox">
+      <br-dropdown-icon />
       <span class="br-select-form-button--title">{{ placeholder }}</span>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="br-select-form-icon"
-        width="12"
-        height="6"
-        version="1.1"
-        viewBox="0 0 12 6">
-        <path d="M6,5.48L1.04.52h9.92l-4.96,4.96Z" />
-      </svg>
     </button>
     <ul class="br-select-form-list" role="listbox">
       <slot />
@@ -27,7 +19,8 @@
 </template>
 
 <script setup>
-import constrainTabbing from '#scripts/helpers/constrainTabbing'
+import BrDropdownIcon from '../icons/Dropdown.vue'
+import constrainTabbing from '../utils/constrainTabbing'
 
 let listenConstrainTabbing = null
 
@@ -117,52 +110,5 @@ defineProps({
     type: String,
     default: 'Add to wallet',
   },
-  // options: {
-  //   type: Array,
-  //   default: [
-  //     {
-  //       link: {
-  //         href: 'https://apple.com',
-  //         target: '_blank',
-  //         title: 'apple',
-  //       },
-  //     },
-  //     {
-  //       link: {
-  //         href: 'https://google.com',
-  //         target: '_blank',
-  //         title: 'google',
-  //       },
-  //     },
-  //   ],
-  // },
 })
 </script>
-
-<style scoped>
-.br-select-form {
-  position: relative;
-  width: 200px;
-}
-
-.br-select-form-button[aria-expanded='false'] + .br-select-form-list {
-  visibility: hidden;
-}
-
-.br-select-form-list {
-  border-bottom: 1px solid currentColor;
-  border-right: 1px solid currentColor;
-  border-left: 1px solid currentColor;
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-  background-color: white;
-  position: absolute;
-  margin-bottom: 0;
-  list-style: none;
-  overflow: hidden;
-  padding-left: 0;
-  margin-top: 0;
-  width: 100%;
-  z-index: 2;
-}
-</style>

package/components/BrFormSelectItem.vue

@@ -2,10 +2,4 @@
   <li class="br-select-form-item">
     <slot />
   </li>
-</template>
-
-<style scoped>
-.br-select-form-item {
-  border-bottom: 1px solid currentColor;
-}
-</style>
+</template>

package/components/BrFormTel.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import BrFormInput from '#components/BrFormInput.vue'
+import BrFormInput from './BrFormInput.vue'
 </script>

package/components/BrFormTextarea.vue

@@ -8,7 +8,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '../utils/formatKebabCase'
 
 const value = defineModel()
 

package/components/BrFormToggle.vue

@@ -1,18 +1,12 @@
 <template>
   <div :class="generateClasses">
-    <BrFormLabel>
-      <span>
-        <slot />
-      </span>
-      <BrFormInput v-bind="$attrs" type="checkbox" />
-    </BrFormLabel>
+    <BrFormInput v-bind="$attrs" type="checkbox" />
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import BrFormLabel from '#components/BrFormLabel.vue'
-import BrFormInput from '#components/BrFormInput.vue'
+import BrFormInput from './BrFormInput.vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -20,6 +14,7 @@ defineOptions({
 
 const props = defineProps({
   drawer: Boolean,
+  inputCustomClass: String,
 })
 
 const generateClasses = computed(() => {
@@ -27,7 +22,9 @@ const generateClasses = computed(() => {
 
   if (props.drawer) result.push('drawer')
 
-  if (!props.drawer) result.push('default')
+  if (props.inputCustomClass) result.push(props.inputCustomClass)
+
+  if (!props.drawer && !props.inputCustomClass) result.push('default')
 
   return result
 })

package/components/BrFormUpdate.vue

@@ -9,7 +9,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import BrButton from '#components/BrButton.vue'
+import BrButton from './BrButton.vue'
 
 const props = defineProps({
   active: Boolean,

package/components/BrFormVisible.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script setup>
-import BrButton from '#components/BrButton.vue'
-import HidePasswordIcon from '#icons/password/hide.vue'
-import ShowPasswordIcon from '#icons/password/show.vue'
+import BrButton from './BrButton.vue'
+import HidePasswordIcon from '../icons/Password/Hide.vue'
+import ShowPasswordIcon from '../icons/Password/Show.vue'
 
 const props = defineProps({
   visible: Boolean,

package/components/BrLink.vue

@@ -1,16 +1,28 @@
 <template>
-  <a v-if="isExternal" :href="to" :class="generateClassnames">
-    <slot />
+  <a
+    v-if="isExternal"
+    :href="to"
+    :class="generateClassnames"
+    @click="animateDots">
+    <slot v-if="!showDots" />
+    <dots-animation v-else />
   </a>
-  <router-link v-else :to="to" :class="generateClassnames">
-    <slot />
+  <router-link v-else :to="to" :class="generateClassnames" @click="animateDots">
+    <slot v-if="!showDots" />
+    <dots-animation v-else />
   </router-link>
 </template>
 
 <script setup>
 // https://vueschool.io/lessons/extending-router-link-for-external-urls
 
-import { computed } from 'vue'
+import DotsAnimation from '../icons/Dots.vue'
+
+import { computed, ref } from 'vue'
+
+const showDots = ref(false)
+
+const animateDots = () => (showDots.value = props.animate)
 
 const isExternal = computed(() => typeof props.to == 'string')
 
@@ -44,5 +56,8 @@ const props = defineProps({
   active: {
     type: Boolean,
   },
+  animate: {
+    type: Boolean,
+  },
 })
 </script>

package/components/BrLoader.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import BrCard from "#components/BrCard.vue";
+import BrCard from "./BrCard.vue";
 
 export default {
   components: {

package/components/BrOverlay.vue

@@ -1,40 +1,74 @@
 <template>
-  <div class="br-overlay-wrap">
-    <div class="br-overlay-content">
-      <slot />
+  <Transition name="fade">
+    <div v-if="show" class="br-overlay-wrap">
+      <div class="br-overlay-content">
+        <slot />
+      </div>
+      <div class="br-overlay-background">
+        <div class="wrap-overlay-exit-button">
+          <br-button variant="exit-overlay" @click="emit('closeOverlay')">
+            <close-icon class="close-icon" />
+          </br-button>
+        </div>
+        <br-button variant="exit-overlay-bg" @click="emit('closeOverlay')" />
+      </div>
     </div>
-    <br-button variant="exit-overlay" @click="emit('closeOverlay')">
-      <close-icon class="close-icon" />
-    </br-button>
-  </div>
+  </Transition>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue'
-import { constrainTabbing } from '#scripts/helpers'
-import BrButton from '#components/BrButton.vue'
-import CloseIcon from '#icons/close.vue'
+/**
+ * @component BrOverlay
+ * @description Modal overlay with a fade transition, focus trap, and Escape-to-close.
+ *
+ * @prop {Boolean} show - Controls overlay visibility via v-if.
+ * @emits closeOverlay - Fired when the user clicks the close button, the background, or presses Escape.
+ *
+ * @example
+ * <BrOverlay :show="isOpen" @closeOverlay="isOpen = false">
+ *   <p>Content here</p>
+ * </BrOverlay>
+ */
+
+import { onUnmounted, watch, nextTick, Transition } from 'vue'
+
+const props = defineProps({
+  /** Controls overlay visibility. */
+  show: Boolean
+})
+import constrainTabbing from '../utils/constrainTabbing'
+import BrButton from './BrButton.vue'
+import CloseIcon from '../icons/Close.vue'
 
 const emit = defineEmits(['closeOverlay'])
 
-function constrainOverlayPadding() {
-  let $overlay = document.querySelector('.br-overlay-wrap')
-  constrainTabbing($overlay)
-}
+/** @type {{ stop: () => void } | null} */
+let tabTrap = null
 
-function listenForKeys({ key }) {
-  if (key == 'Escape') {
-    emit('closeOverlay')
+// Set up / tear down the focus trap whenever the overlay opens or closes.
+// nextTick ensures the v-if element is in the DOM before querying it.
+watch(() => props.show, async (val) => {
+  if (val) {
+    await nextTick()
+    const $overlay = document.querySelector('.br-overlay-wrap')
+    if ($overlay) tabTrap = constrainTabbing($overlay)
+  } else {
+    tabTrap?.stop()
+    tabTrap = null
   }
+})
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function listenForKeys({ key }) {
+  if (key == 'Escape') emit('closeOverlay')
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', listenForKeys)
-  document.addEventListener('keydown', constrainOverlayPadding)
-})
+document.addEventListener('keydown', listenForKeys)
 
 onUnmounted(() => {
   document.removeEventListener('keydown', listenForKeys)
-  document.removeEventListener('keydown', constrainOverlayPadding)
+  tabTrap?.stop()
 })
 </script>

package/components/BrQrCode.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="br-qr-code" v-html="qrCode" />
+</template>
+
+<script setup>
+import { ref, watchEffect } from 'vue'
+import * as qrcode from 'qrcode'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+})
+
+const qrCode = ref('')
+
+watchEffect(async () => {
+  qrCode.value = await qrcode.toString(props.code, { type: 'svg', margin: 0 })
+})
+</script>