merge: #33 from dev

dist/zoa.js

@@ -1,4 +1,4 @@
-import { Z as p, a as r, F as m, c as i, M as l, b as n, T as u } from "./main-0a9a9412.js";
+import { Z as p, a as r, F as m, c as i, M as l, b as n, T as u } from "./main-39a6cf06.js";
 import "vue";
 import "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/free-solid-svg-icons";

src/components/buttons/tabs/Tabs.vue

@@ -146,13 +146,15 @@ const tabOptions = computed(() => {
 });
 
 // set initial value
-if (
-  props.initialValue &&
-  tabOptions.value.some((o) => o.value === props.initialValue)
-) {
-  value.value = props.initialValue;
-} else {
-  value.value = tabOptions.value[0].value;
+if (value.value == null) {
+  if (
+    props.initialValue &&
+    tabOptions.value.some((o) => o.value === props.initialValue)
+  ) {
+    value.value = props.initialValue;
+  } else {
+    value.value = tabOptions.value[0].value;
+  }
 }
 </script>
 
@@ -176,10 +178,13 @@ if (
     @include sr-only;
   }
 
-  &.state--active::after {
+  &::after {
     content: '';
     height: 0;
     width: 0;
+  }
+
+  &.state--active::after {
     position: absolute;
     border: $arrowSize solid transparent;
   }

src/components/buttons/togglebutton/ToggleButton.vue

@@ -4,7 +4,7 @@
     :for="subId('toggle')"
     tabindex="0"
     ref="checkboxContainer"
-    :class="addPropClasses([])"
+    :class="addPropClasses([$style.container])"
   >
     <input
       type="checkbox"
@@ -154,59 +154,61 @@ onKeyStroke('Enter', () => {
 
 <style module lang="scss">
 @import '../../inputs/inputs';
+.container {
+  display: inline-block;
+}
+
 .main {
   font-family: $header-font;
   font-weight: 600;
   border: none;
   border-radius: $rounding;
-
+  display: inline-block;
   transition: 0.2s;
   cursor: pointer;
   color: black;
+  background-color: $grey;
 }
 
 .kind--normal {
-  background-color: $secondary;
-  color: $secondary-text;
-
   &:hover,
   &:focus,
   &:active {
     background-color: $secondary-b;
+    color: $secondary-text;
   }
 
   .checkbox:checked + & {
-    background-color: $secondary-b;
+    background-color: $secondary;
+    color: $secondary-text;
   }
 }
 
 .kind--primary {
-  background-color: $primary;
-  color: $primary-text;
-
   &:hover,
   &:focus,
   &:active {
     background-color: $primary-b;
+    color: $primary-text;
   }
 
   .checkbox:checked + & {
-    background-color: $primary-b;
+    background-color: $primary;
+    color: $primary-text;
   }
 }
 
 .kind--alt {
-  background-color: $tertiary;
-  color: $tertiary-text;
-
   &:hover,
   &:focus,
   &:active {
     background-color: $tertiary-b;
+    color: $tertiary-text;
   }
 
   .checkbox:checked + & {
-    background-color: $tertiary-b;
+    background-color: $tertiary;
+    color: $tertiary-text;
   }
 }
 

src/components/dialogs/dialogs.scss

@@ -6,7 +6,7 @@
   border-width: 1px;
   border-style: solid;
   border-radius: $rounding;
-  padding: $box-padding;
+  padding: 0;
 }
 
 .container {
@@ -15,18 +15,36 @@
 }
 
 .header {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'icon text button';
   gap: 10px;
   align-items: center;
+  padding: $box-padding;
+  border-radius: $rounding $rounding 0 0;
+
+  & .icon {
+    grid-area: icon;
+    padding-top: 2px;
+  }
+
+  & .headerText {
+    grid-area: text;
+  }
 }
 
-.icon {
-  padding-top: 2px;
+.content {
+  background: #fff;
+  padding: 0 $box-padding $box-padding;
+  border-radius: 0 0 $rounding $rounding;
 }
 
 .kind--info {
   border-color: $info-dark;
-  background: $info-light;
+
+  .header {
+    background: $info-light;
+  }
 
   .icon {
     color: $info-dark;
@@ -35,7 +53,10 @@
 
 .kind--warning {
   border-color: $warning-dark;
-  background: $warning-light;
+
+  .header {
+    background: $warning-light;
+  }
 
   .icon {
     color: $warning-dark;
@@ -44,7 +65,10 @@
 
 .kind--error {
   border-color: $error-dark;
-  background: $error-light;
+
+  .header {
+    background: $error-light;
+  }
 
   .icon {
     color: $error-dark;
@@ -53,7 +77,10 @@
 
 .kind--success {
   border-color: $success-dark;
-  background: $success-light;
+
+  .header {
+    background: $success-light;
+  }
 
   .icon {
     color: $success-dark;

src/components/dialogs/flash/Flash.vue

@@ -6,7 +6,7 @@
   >
     <div :class="$style.header">
       <font-awesome-icon :icon="['fa-solid', icon]" :class="$style.icon" />
-      <h2>{{ header }}</h2>
+      <h2 :class="$style.headerText">{{ header }}</h2>
     </div>
     <div :class="$style.content">
       <!-- @slot The main content of the flash message; overrides the message prop. -->

src/components/dialogs/modal/Modal.stories.js

@@ -21,21 +21,53 @@ const meta = {
 export default meta;
 
 const Base = {
-  args: {},
+  args: {
+    message: 'Here is some content that goes in the modal.',
+  },
+  render: (args) => ({
+    components: { ZoaModal },
+    setup() {
+      return { args };
+    },
+    template: `
+      <zoa-modal v-bind="args"/>
+        `,
+  }),
+};
+
+export const Default = {
+  ...Base,
+  args: {
+    ...Base.args,
+    kind: 'info',
+    header: 'Parameters can be set using properties',
+  },
+};
+
+export const Slot = {
+  ...Base,
+  args: {
+    kind: 'info',
+  },
   render: (args) => ({
     components: { ZoaModal },
     setup() {
       return { args };
     },
     template: `
-      <zoa-modal v-bind="args"><span>Here is some content that goes in the modal.</span></zoa-modal>
+      <zoa-modal v-bind="args">
+        <template v-slot:button>Button slot</template>
+        <template v-slot:header>Or you can use slots</template>
+        <span>The default slot defines the modal body.</span>
+      </zoa-modal>
         `,
   }),
 };
 
 export const Info = {
   ...Base,
   args: {
+    ...Base.args,
     kind: 'info',
     header: 'Here is an informational message.',
   },
@@ -44,6 +76,7 @@ export const Info = {
 export const Warning = {
   ...Base,
   args: {
+    ...Base.args,
     kind: 'warning',
     header: "Are you sure that's a good idea?",
   },
@@ -52,6 +85,7 @@ export const Warning = {
 export const Error = {
   ...Base,
   args: {
+    ...Base.args,
     kind: 'error',
     header: 'Oh no! Something went wrong.',
   },
@@ -60,6 +94,7 @@ export const Error = {
 export const Success = {
   ...Base,
   args: {
+    ...Base.args,
     kind: 'success',
     header: 'Congratulations! The thing worked.',
   },

src/components/dialogs/modal/Modal.vue

@@ -1,18 +1,26 @@
 <template>
-  <ZoaButton v-bind="buttonArgs" @click="openModal" />
+  <ZoaButton v-bind="buttonArgs" @click="openModal">
+    <!-- @slot The content of the button; overrides buttonArgs.label -->
+    <slot name="button" />
+  </ZoaButton>
   <dialog
     ref="modal"
     :class="addPropClasses([$style.main, $style[`kind--${kind}`]])"
   >
     <div :class="$style.container">
-      <form method="dialog" :class="$style.form" @submit="emit('closed')">
-        <button :class="$style.close">
-          <font-awesome-icon icon="fa-solid fa-xmark" />
-        </button>
-      </form>
       <div :class="$style.header">
         <font-awesome-icon :icon="['fa-solid', icon]" :class="$style.icon" />
-        <h2>{{ header }}</h2>
+        <h2 :class="$style.headerText">
+          <!-- @slot The header content (within <h2> tags); overrides the header prop. -->
+          <slot name="header">
+            {{ header }}
+          </slot>
+        </h2>
+        <form method="dialog" :class="$style.form" @submit="emit('closed')">
+          <button :class="$style.close">
+            <font-awesome-icon icon="fa-solid fa-xmark" />
+          </button>
+        </form>
       </div>
       <div :class="$style.content">
         <!-- @slot The main content of the modal; overrides the message prop. -->
@@ -30,6 +38,7 @@ import { useKindIcon } from '../../utils/icons.js';
 import FontAwesomeIcon from '../../../icons.js';
 import { ref } from 'vue';
 import { usePropClasses } from '../../utils/classes.js';
+import { onClickOutside } from '@vueuse/core';
 
 const props = defineProps({
   /**
@@ -91,6 +100,11 @@ function openModal() {
   modal.value.show();
   emit('opened');
 }
+
+onClickOutside(modal, () => {
+  modal.value.close();
+  emit('closed');
+});
 </script>
 
 <style module lang="scss">
@@ -120,13 +134,6 @@ function openModal() {
   }
 }
 
-.container {
-  grid-template-areas:
-    'header button'
-    'content content';
-  grid-template-columns: 1fr auto;
-}
-
 .form {
   grid-area: button;
 }
@@ -137,12 +144,4 @@ function openModal() {
   border: none;
   cursor: pointer;
 }
-
-.header {
-  grid-area: header;
-}
-
-.content {
-  grid-area: content;
-}
 </style>