srcdev-nuxt-components 6.1.0 → 6.1.2

package/app/components/display-dialog/DisplayDialogCore.vue

@@ -1,9 +1,18 @@
 <template>
-  <dialog class="display-dialog-core" :class="[elementClasses]" role="dialog" :align-dialog :justify-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
+  <dialog
+    class="display-dialog-core"
+    :class="[elementClasses]"
+    role="dialog"
+    :align-dialog
+    :justify-dialog
+    :open
+    :data-dialog-id="dataDialogId"
+    ref="dialogRef"
+  >
     <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
       <div class="inner" :class="[variant]">
         <div class="header">
-          <div v-if="hasDialogTitle" class="col-left">
+          <div v-if="slots.dialogTitle" class="col-left">
             <slot name="dialogTitle"></slot>
           </div>
 
@@ -11,16 +20,24 @@
             <p class="text-normal wght-700">Center col</p>
           </div>
           <div class="col-right">
-            <button @click.prevent="closeDialog()" data-test-id="display-dialog-header-close" class="display-prompt-action">
+            <button
+              @click.prevent="closeDialog()"
+              data-test-id="display-dialog-header-close"
+              class="display-prompt-action"
+            >
               <Icon name="bitcoin-icons:cross-filled" class="icon" />
               <span class="sr-only">Really Close</span>
             </button>
           </div>
         </div>
-        <div v-if="hasDialogContent" class="dialog-content" :class="[{ 'allow-content-scroll': allowContentScroll }]">
+        <div
+          v-if="slots.dialogContent"
+          class="dialog-content"
+          :class="[{ 'allow-content-scroll': allowContentScroll }]"
+        >
           <slot name="dialogContent"></slot>
         </div>
-        <div v-if="hasActionButtons" class="footer">
+        <div v-if="slots.actionButtons" class="footer">
           <slot name="actionButtons"></slot>
         </div>
       </div>
@@ -29,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { FocusTrap } from 'focus-trap-vue';
+import { FocusTrap } from "focus-trap-vue"
 const props = defineProps({
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
@@ -37,18 +54,18 @@ const props = defineProps({
   },
   variant: {
     type: String,
-    default: 'dialog',
-    validator: (val) => ['dialog', 'modal', 'confirm'].includes(val as string),
+    default: "dialog",
+    validator: (val) => ["dialog", "modal", "confirm"].includes(val as string),
   },
   justifyDialog: {
     type: String,
-    default: 'center',
-    validator: (val) => ['start', 'center', 'end'].includes(val as string),
+    default: "center",
+    validator: (val) => ["start", "center", "end"].includes(val as string),
   },
   alignDialog: {
     type: String,
-    default: 'center',
-    validator: (val) => ['start', 'center', 'end'].includes(val as string),
+    default: "center",
+    validator: (val) => ["start", "center", "end"].includes(val as string),
   },
   lockViewport: {
     type: Boolean,
@@ -62,33 +79,30 @@ const props = defineProps({
     type: String,
     required: true,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const open = defineModel<boolean>();
-const bodyTag = ref<HTMLBodyElement | null>(null);
-const lockViewport = toRef<boolean>(props.lockViewport);
+const open = defineModel<boolean>()
+const bodyTag = ref<HTMLBodyElement | null>(null)
+const lockViewport = toRef<boolean>(props.lockViewport)
 
 const closeDialog = () => {
-  open.value = false;
+  open.value = false
 
   if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.remove('lock');
+    bodyTag.value.classList.remove("lock")
   }
-};
+}
 
-const slots = useSlots();
-const hasDialogTitle = computed(() => slots.dialogTitle !== undefined);
-const hasDialogContent = computed(() => slots.dialogContent !== undefined);
-const hasActionButtons = computed(() => slots.actionButtons !== undefined);
+const slots = useSlots()
 
 onMounted(() => {
-  bodyTag.value = document.querySelector('body');
+  bodyTag.value = document.querySelector("body")
   if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.add('lock');
+    bodyTag.value.classList.add("lock")
   }
-});
+})
 </script>
 
 <style lang="css">
@@ -121,26 +135,26 @@ onMounted(() => {
   }
 
   /* * Positioning the dialog */
-  &[justify-dialog='start'] {
+  &[justify-dialog="start"] {
     justify-content: flex-start;
   }
 
-  &[justify-dialog='center'] {
+  &[justify-dialog="center"] {
     justify-content: center;
   }
 
-  &[justify-dialog='end'] {
+  &[justify-dialog="end"] {
     justify-content: flex-end;
   }
 
-  &[align-dialog='start'] {
+  &[align-dialog="start"] {
     align-items: flex-start;
   }
 
-  &[align-dialog='center'] {
+  &[align-dialog="center"] {
     align-items: center;
   }
-  &[align-dialog='end'] {
+  &[align-dialog="end"] {
     align-items: flex-end;
   }
 

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -1,21 +1,35 @@
 <template>
-  <div class="display-prompt-core" :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]" :data-test-id="`display-prompt-core-${theme}`">
-    <div class="display-prompt-wrapper" :data-component-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
+  <div
+    class="display-prompt-core"
+    :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]"
+    :data-test-id="`display-prompt-core-${theme}`"
+  >
+    <div
+      class="display-prompt-wrapper"
+      :data-component-theme="theme"
+      :class="[elementClasses]"
+      data-test-id="display-prompt"
+    >
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon">
           <slot name="customDecoratorIcon">
-            <Icon :name="displayPromptIcons[theme]" class="icon" :color="iconColor" />
+            <Icon :name="displayPromptIcons[theme] ?? 'akar-icons:circle-alert'" class="icon" :color="iconColor" />
           </slot>
         </div>
         <div class="display-prompt-content">
           <p class="title" data-test-id="display-prompt-title">
             <slot name="title"></slot>
           </p>
-          <p v-if="hasContent" class="text" data-test-id="display-prompt-content">
+          <p v-if="slots.content" class="text" data-test-id="display-prompt-content">
             <slot name="content"></slot>
           </p>
         </div>
-        <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
+        <button
+          v-if="dismissible"
+          @click.prevent="dismissPrompt()"
+          data-test-id="display-prompt-action"
+          class="display-prompt-action"
+        >
           <slot name="customCloseIcon">
             <Icon name="bitcoin-icons:cross-filled" class="icon" />
           </slot>
@@ -36,9 +50,9 @@ const props = defineProps({
   },
   theme: {
     type: String,
-    default: 'error',
+    default: "error",
     validator(value: string) {
-      return ['error', 'info', 'success', 'warning', 'secondary'].includes(value);
+      return ["error", "info", "success", "warning", "secondary"].includes(value)
     },
   },
   styleClassPassthrough: {
@@ -47,9 +61,9 @@ const props = defineProps({
   },
   iconColor: {
     type: String as PropType<string>,
-    default: 'dark-grey',
+    default: "dark-grey",
     validator(value: string) {
-      return ['dark-grey', 'white'].includes(value);
+      return ["dark-grey", "white"].includes(value)
     },
   },
   useLocalStyleOverrides: {
@@ -59,24 +73,23 @@ const props = defineProps({
   displayPromptIcons: {
     type: Object as PropType<Record<string, string>>,
     default: () => ({
-      error: 'akar-icons:circle-alert',
-      info: 'akar-icons:info',
-      success: 'akar-icons:check',
-      warning: 'akar-icons:circle-alert',
-      secondary: 'akar-icons:info',
+      error: "akar-icons:circle-alert",
+      info: "akar-icons:info",
+      success: "akar-icons:check",
+      warning: "akar-icons:circle-alert",
+      secondary: "akar-icons:info",
     }),
   },
-});
+})
 
-const slots = useSlots();
-const hasContent = ref(slots.content !== undefined);
-const hide = ref(false);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+const hide = ref(false)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const dismissPrompt = () => {
   // styleClassPassthrough.value = '';
-  hide.value = true;
-};
+  hide.value = true
+}
 </script>
 
 <style lang="css">

package/app/components/display-prompt/variants/DisplayPromptError.vue

@@ -6,7 +6,7 @@
     <template #title>
       <slot name="title"></slot>
     </template>
-    <template v-if="hasContent" #content>
+    <template v-if="slots.content" #content>
       <slot name="content"></slot>
     </template>
   </DisplayPromptCore>
@@ -22,11 +22,9 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const slots = useSlots();
-const hasContent = ref(slots.content !== undefined);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
 </script>
 
 <style lang="css">

package/app/components/expanding-panel/ExpandingPanel.vue

@@ -24,11 +24,11 @@
 const props = defineProps({
   name: {
     type: String,
-    default: '',
+    default: "",
   },
   iconSize: {
     type: String,
-    default: 'medium',
+    default: "medium",
   },
   animationDuration: {
     type: Number,
@@ -38,15 +38,15 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const name = computed(() => props.name || useId());
+const name = computed(() => props.name || useId())
 
-const triggerId = computed(() => `id-${name.value}-trigger`);
-const contentId = computed(() => `id-${name.value}-content`);
-const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+const triggerId = computed(() => `id-${name.value}-trigger`)
+const contentId = computed(() => `id-${name.value}-content`)
+const animationDurationStr = computed(() => `${props.animationDuration}ms`)
 
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">