srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/skip-links/SkipLinks.vue

@@ -21,6 +21,7 @@ const slots = useSlots()
 </script>
 
 <style lang="css">
+@layer components {
 .home-link-navigation {
   position: relative;
   list-style: none;
@@ -90,4 +91,5 @@ const slots = useSlots()
 .skip-link:focus {
   top: 0;
 } */
+}
 </style>

package/app/components/tabs/TabsCore.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="tabs-core" :class="`axis-${axis}`">
     <ul
+      ref="tabsNavRef"
       role="tablist"
       aria-labelledby="channel-name"
-      ref="tabsNavRef"
-      @mouseleave="resetHoverToActivePosition()"
       class="tabs-list"
       :class="[elementClasses]"
+      @mouseleave="resetHoverToActivePosition()"
     >
       <li v-for="(index, key) in itemCount" :key="key">
         <button
-          @click.prevent="navItemClicked($event)"
-          @mouseover="navItemHovered($event)"
           :id="`tab-${key}-trigger`"
           :data-tab-index="key"
           data-nav-item
           role="tab"
           aria-selected="false"
           class="tabs-list-item"
+          @click.prevent="navItemClicked($event)"
+          @mouseover="navItemHovered($event)"
         >
           <slot :name="`tab-${key}-trigger`"></slot>
         </button>
@@ -26,13 +26,13 @@
     <div class="tab-content-wrapper">
       <div
         v-for="(item, key) in itemCount"
+        :id="`tab-${key}-content`"
         :key="key"
+        ref="tabsContentRefs"
         class="tab-content"
         :aria-labelledby="`tab-${key}-trigger`"
-        :id="`tab-${key}-content`"
         role="region"
         aria-hidden="true"
-        ref="tabsContentRefs"
       >
         <slot :name="`tab-${key}-content`"></slot>
       </div>
@@ -74,26 +74,27 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const tabsNavRef = ref<HTMLElement | null>(null)
-const tabsContentRefs = ref<HTMLElement[] | null>(null)
+const tabsNavRef = ref<HTMLElement | null>(null);
+const tabsContentRefs = ref<HTMLElement[] | null>(null);
 
 const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(
   props.axis,
   tabsNavRef,
   tabsContentRefs,
   props.transitionDuration
-)
+);
 
 onMounted(() => {
-  initNavDecorators()
-})
+  initNavDecorators();
+});
 </script>
 
 <style lang="css">
+@layer components {
 .tabs-core {
   .tabs-list {
     position: relative;
@@ -115,7 +116,9 @@ onMounted(() => {
       scale: var(--_width-hovered, 0.125) 1;
       translate: var(--_x-hovered, 0) 0;
       transform-origin: left;
-      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      transition:
+        scale var(--_transition-duration),
+        translate var(--_transition-duration);
       z-index: 1;
     }
 
@@ -129,7 +132,9 @@ onMounted(() => {
       scale: var(--_width-active, 0.125) 1;
       translate: var(--_x-active, 0) 0;
       transform-origin: left;
-      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      transition:
+        scale var(--_transition-duration),
+        translate var(--_transition-duration);
       z-index: 2;
     }
 
@@ -142,7 +147,9 @@ onMounted(() => {
       scale: var(--_width-active, 0.125) 1;
       translate: var(--_x-active, 0) 0;
       transform-origin: left;
-      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      transition:
+        scale var(--_transition-duration),
+        translate var(--_transition-duration);
       z-index: 3;
     }
 
@@ -164,24 +171,24 @@ onMounted(() => {
     border-bottom: var(--_tabs-border-bottom);
 
     .nav__hovered {
-      background: light-dark(var(--gray-7), var(--gray-3));
-      color: light-dark(var(--gray-0), var(--gray-12));
+      background: light-dark(var(--slate-07), var(--slate-03));
+      color: light-dark(var(--slate-00), var(--slate-10));
     }
 
     .nav__active {
-      background: light-dark(var(--gray-12), var(--gray-0));
-      color: light-dark(var(--gray-0), var(--gray-12));
+      background: light-dark(var(--slate-10), var(--slate-00));
+      color: light-dark(var(--slate-00), var(--slate-10));
     }
 
     .nav__active-indicator {
-      background: light-dark(var(--gray-12), var(--gray-0));
+      background: light-dark(var(--slate-10), var(--slate-00));
       height: 0.4rem;
     }
 
     .tabs-list-item {
       background: transparent;
       border: 0;
-      color: light-dark(var(--gray-12), var(--gray-0));
+      color: light-dark(var(--slate-10), var(--slate-00));
       cursor: pointer;
       font: inherit;
       text-transform: uppercase;
@@ -190,15 +197,15 @@ onMounted(() => {
       padding: 1em 2em;
 
       &:hover {
-        color: light-dark(var(--gray-0), var(--gray-12));
+        color: light-dark(var(--slate-00), var(--slate-10));
       }
 
       &[aria-selected="true"] {
-        color: light-dark(var(--gray-0), var(--gray-12));
+        color: light-dark(var(--slate-00), var(--slate-10));
       }
 
       &.transitioning {
-        color: light-dark(var(--gray-0), var(--gray-12));
+        color: light-dark(var(--slate-00), var(--slate-10));
       }
     }
   }
@@ -207,13 +214,13 @@ onMounted(() => {
     display: grid;
     grid-template-areas: "element-stack";
 
-    background-color: light-dark(var(--gray-9), var(--gray-10));
-    border: 0.1rem solid var(--gray-6);
+    background-color: light-dark(var(--slate-09), var(--slate-10));
+    border: 0.1rem solid var(--slate-06);
     border-start-start-radius: 0;
     border-start-end-radius: 0;
     border-end-start-radius: 0;
     border-end-end-radius: 0;
-    outline: 0.1rem solid var(--gray-6);
+    outline: 0.1rem solid var(--slate-06);
 
     .tab-content {
       grid-area: element-stack;
@@ -244,7 +251,7 @@ onMounted(() => {
         width: 100%;
 
         &:hover {
-          /* color: light-dark(var(--gray-0), var(--gray-12)); */
+          /* color: light-dark(var(--slate-00), var(--slate-10)); */
         }
 
         &[aria-selected="true"] {
@@ -252,7 +259,7 @@ onMounted(() => {
         }
 
         &.transitioning {
-          /* color: light-dark(var(--gray-0), var(--gray-12)); */
+          /* color: light-dark(var(--slate-00), var(--slate-10)); */
         }
       }
 
@@ -295,4 +302,5 @@ onMounted(() => {
     }
   }
 }
+}
 </style>

package/app/components/test-storybook/TestStorybook.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="test-storybook" :class="[elementClasses]" :data-testid="props.dataTestid">
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <h1>Test Storybook Component</h1>
+      <slot v-if="slots.titleSlot" name="titleSlot"></slot>
+      <div class="test-storybook__content">
+        <p>
+          <code>&lt;Icon name="mdi:star"&gt;</code>
+          NuxtIcon test
+        </p>
+        <Icon name="mdi:star" style="width: 48px; height: 48px; color: orange" />
+      </div>
+    </LayoutRow>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: "test-storybook",
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+})
+const slots = useSlots()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+</script>
+
+<style lang="css">
+@layer components {
+.test-storybook {
+  border: 1px solid #ccc;
+  padding: 16px;
+  margin: 16px;
+  text-align: center;
+  .test-storybook__content {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 24px;
+    border: 1px solid #ccc;
+    padding: 16px;
+    margin-top: 12px;
+  }
+}
+}
+</style>

package/app/components/test-storybook/stories/TestStorybook.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook"
+import StoryBookComponent from "../TestStorybook.vue"
+
+export default {
+  title: "Components/TestStorybook/TestStorybook",
+  component: StoryBookComponent,
+  args: {
+    styleClassPassthrough: ["test-storybook"],
+  },
+} as Meta<typeof StoryBookComponent>
+
+const Template: StoryFn<typeof StoryBookComponent> = (args) => ({
+  components: { StoryBookComponent },
+  setup() {
+    return { args }
+  },
+  template: `
+    <StoryBookComponent v-bind="args">
+      <template v-if="args.titleSlot" v-slot:titleSlot>{{ args.titleSlot }}</template>
+    </StoryBookComponent>
+  `,
+})
+
+export const TitleOnlyDismissable = Template.bind({})
+TitleOnlyDismissable.args = {
+  styleClassPassthrough: ["test-storybook--title-only-dismissable"],
+  titleSlot: "Title Slot Content",
+}

package/app/components/ui-block-decorated/UiBlockDecorated.vue

@@ -73,6 +73,7 @@ watch(
 </script>
 
 <style lang="css">
+@layer components {
 .ui-block-decorated {
   /* Component styles */
 }
@@ -162,4 +163,5 @@ watch(
 .inner-shadow-4::before {
   box-shadow: var(--inner-shadow-4), var(--inner-shadow-highlight);
 }
+}
 </style>

package/app/components/view-timeline/WipeAwayVertical.vue

@@ -132,6 +132,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="css">
+@layer components {
 .wipe-away-vertical {
   .sticky-items-container {
     position: sticky;
@@ -175,4 +176,5 @@ onUnmounted(() => {
     transition: opacity 0.4s ease-in-out;
   }
 }
+}
 </style>

package/app/composables/useApiRequest.ts

@@ -0,0 +1,25 @@
+class CustomError extends Error {
+  // name = "CustomError";
+  override name = 'CustomError';
+  extraProp = 'Error: test';
+}
+
+async function useApiRequest<T, E extends new (message?: string) => Error>(promise: Promise<T>, errorsToCatch?: E[]): Promise<[undefined, T] | [InstanceType<E>]> {
+  return promise
+    .then((data) => {
+      return [undefined, data] as [undefined, T];
+    })
+    .catch((error) => {
+      if (errorsToCatch == undefined) {
+        return [error];
+      }
+
+      if (errorsToCatch.some((errorType) => error instanceof errorType)) {
+        return [error];
+      }
+
+      throw error;
+    });
+}
+
+export default useApiRequest;

package/app/composables/useAriaDescribedById.ts

@@ -0,0 +1,19 @@
+import type { Slots } from "vue";
+
+export function useAriaDescribedById(name: string | Ref<string>, fieldHasError: Ref<boolean>, slots: Slots) {
+  const id = `${name}-${useId()}`;
+  const errorId = `${id}-error-message`;
+  const descriptionId = `${id}-description`;
+
+  const ariaDescribedby = computed(() => {
+    const hasDescription = slots.descriptionText || slots.descriptionHtml || slots.description;
+    const ids = [];
+
+    if (hasDescription) ids.push(descriptionId);
+    if (fieldHasError.value) ids.push(errorId);
+
+    return ids.length ? ids.join(" ") : null;
+  });
+
+  return { id, errorId, descriptionId, ariaDescribedby };
+}

package/app/composables/useColourScheme.ts

@@ -0,0 +1,18 @@
+import { COLOUR_SCHEME_KEY, type ColourScheme, getValidScheme, applyColourScheme } from "~/utils/colour-scheme-init";
+
+export const useColourScheme = () => {
+  const currentColourScheme = ref<ColourScheme>("auto");
+
+  onMounted(() => {
+    // DOM already has correct scheme applied by the head script,
+    // this just syncs the reactive state to match
+    currentColourScheme.value = getValidScheme(localStorage.getItem(COLOUR_SCHEME_KEY));
+  });
+
+  watch(currentColourScheme, (newVal) => {
+    localStorage.setItem(COLOUR_SCHEME_KEY, newVal);
+    applyColourScheme(newVal);
+  });
+
+  return { currentColourScheme };
+};

package/app/composables/useErrorMessages.ts

@@ -0,0 +1,62 @@
+import type { IFormData } from "../types/forms/types.forms"
+
+export function useErrorMessage(name: string, formData: Ref<IFormData>) {
+  const defaultError = ref("")
+  const errorMessages = ref(formData.value.errorMessages)
+
+  const hasCustomError = () => {
+    return errorMessages.value[name] !== undefined && errorMessages.value[name].useCustomError
+  }
+
+  const errorMessage = computed(() => {
+    console.log(`errorMessage()`)
+    if (hasCustomError()) {
+      console.log(`errorMessage() | IF`)
+      return errorMessages.value[name]?.message
+    } else {
+      return defaultError.value
+    }
+  })
+
+  const setDefaultError = (newDefaultError: string) => {
+    defaultError.value = newDefaultError
+  }
+
+  const fieldHasError = computed(() => {
+    // console.log(`fieldHasError() | name(${name})`);
+    nextTick()
+    if (formData.value.submitDisabled) {
+      console.log(`fieldHasError() | name(${name}) | IF`)
+      if (hasCustomError()) {
+        console.log(`fieldHasError() | name(${name}) | IF | IF`)
+
+        return true
+      } else if (
+        Object.keys(formData.value.validityState).length > 0 &&
+        formData.value.validityState[name] !== undefined
+      ) {
+        console.log(`fieldHasError() | name(${name}) | IF | ELSE IF`)
+
+        return !formData.value.validityState[name]
+      }
+      console.log(`fieldHasError() | name(${name}) | IF | ELSE`)
+
+      return false
+    }
+  })
+
+  const removeCustomError = (valid: boolean = false) => {
+    console.log(`useErrorMessage | removeCustomError | name(${name}) | valid(${valid})`)
+    // formData.value.validityState[name] = valid;
+    // await nextTick();
+    // delete formData.value.errorMessages[name];
+  }
+
+  return {
+    hasCustomError,
+    errorMessage,
+    setDefaultError,
+    fieldHasError,
+    removeCustomError,
+  }
+}