srcdev-nuxt-components 0.0.25 → 0.0.27

package/assets/styles/utils/_page.css

@@ -1,5 +1,6 @@
 :root {
   color-scheme: light dark;
+  interpolate-size: allow-keywords; /* can also be set within html {} */
 }
 
 html {

package/components/functional/accordian/AccordianCore.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="display-accordian" :class="[elementClasses]" ref="accordianRef">
+    <template v-for="(item, key) in data" :key="key">
+      <div class="accordion-panel">
+        <button class="accordion-trigger" :id="`accordian-${key}-trigger`" aria-expanded="false" :aria-controls="`accordian-${key}-content`" ref="triggerRefs" @click.stop.prevent="handleSummary(key)">
+          <slot :name="`accordian-${key}-trigger`"></slot>
+        </button>
+
+        <div class="accordion-content" :aria-labelledby="`accordian-${key}-trigger`" :id="`accordian-${key}-content`" role="region" aria-hidden="true" ref="contentRefs">
+          <div>
+            <slot :name="`accordian-${key}-content`"></slot>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface IAccordianData {
+  title: string;
+  content: string;
+}
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<IAccordianData[]>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const accordianRef = ref<HTMLElement>();
+const triggerRefs = ref<HTMLElement[]>([]);
+const contentRefs = ref<HTMLElement[]>([]);
+
+onMounted(() => {
+  if (accordianRef.value) {
+    triggerRefs.value = Array.from(accordianRef.value.querySelectorAll('.accordion-trigger'));
+    contentRefs.value = Array.from(accordianRef.value.querySelectorAll('.accordion-content'));
+  }
+});
+
+const handleSummary = (clickedIndex: number) => {
+  triggerRefs.value.forEach((element, index) => {
+    if (clickedIndex === index) {
+      const currentState = element.getAttribute('aria-expanded');
+      const newState = currentState !== 'true';
+      triggerRefs.value[index].setAttribute('aria-expanded', String(newState));
+      contentRefs.value[index].setAttribute('aria-hidden', String(currentState));
+    } else {
+      triggerRefs.value[index].setAttribute('aria-expanded', 'false');
+      contentRefs.value[index].setAttribute('aria-hidden', 'true');
+    }
+  });
+};
+</script>
+
+<style lang="css">
+.display-accordian {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.accordion-panel {
+  border: var(--accordian-panel-border);
+  border-radius: var(--accordian-panel-border-radius);
+  margin-block-end: var(--accordian-panel-mbe);
+}
+
+.accordion-trigger {
+  display: block;
+  width: 100%;
+  padding: 1rem;
+  background: var(--accordion-trigger-bg);
+  border: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows ease-in-out 500ms;
+
+  > div {
+    overflow: hidden;
+    /* transform: translateY(-1rem);
+      transition: all ease-in-out 500ms;
+
+      > p {
+        padding-block: 0;
+        transition: all ease-in-out 500ms;
+      } */
+  }
+}
+
+.accordion-content[aria-hidden='false'] {
+  grid-template-rows: 1fr;
+
+  /* > div {
+      transform: translateY(0);
+      > p {
+        padding-block: 32px;
+      }
+    } */
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
-  <dialog class="display-dialog wrapper" :class="[elementClasses]" :align-dialog="`${positionY}-${positionX}`" :open="displayDialog" ref="dialogRef">
-    <focus-trap v-model:active="displayDialog" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
+  <dialog class="display-dialog wrapper" :class="[elementClasses]" :align-dialog :open ref="dialogRef">
+    <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
       <div class="inner">
         <div class="top-bar">
           <template v-if="hasDialogTitle">
@@ -57,12 +57,12 @@ const props = defineProps({
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const displayDialog = defineModel<boolean>();
+const open = defineModel<boolean>();
 const bodyTag = ref<HTMLBodyElement | null>(null);
 const lockViewport = toRef<boolean>(props.lockViewport);
 
 const closeDialog = () => {
-  displayDialog.value = false;
+  open.value = false;
 
   if (lockViewport.value && bodyTag.value !== null) {
     bodyTag.value.classList.remove('lock');
@@ -74,6 +74,8 @@ const hasDialogTitle = computed(() => slots.dialogTitle !== undefined);
 const hasDialogContent = computed(() => slots.dialogContent !== undefined);
 const hasActionButtons = computed(() => slots.actionButtons !== undefined);
 
+const alignDialog = computed(() => `${props.positionY}-${props.positionX}`);
+
 onMounted(() => {
   bodyTag.value = document.querySelector('body');
   if (lockViewport.value && bodyTag.value !== null) {

package/components/functional/pop-over/PopOver.vue

@@ -1,17 +1,24 @@
 <template>
   <ClientOnly>
-    <button :popovertarget class="popover-trigger" :class="[elementClasses]">
+    <button @click.prevent="showPopover()" :popovertarget class="popover-trigger" :class="[elementClasses]">
       <slot name="trigger"></slot>
     </button>
 
-    <dialog class="dialog-popover" popover :id="popovertarget" :class="[elementClasses]">
-      <slot name="popoverCotent"></slot>
+    <dialog :open class="dialog-popover" popover :id="popovertarget" :class="[elementClasses]">
+      <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closePopover()">
+        <div>
+          <button @click.prevent="closePopover()">x</button>
+          <slot name="popoverCotent"></slot>
+        </div>
+      </focus-trap>
     </dialog>
   </ClientOnly>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+import { FocusTrap } from 'focus-trap-vue';
+
+const { popovertarget, styleClassPassthrough } = defineProps({
   popovertarget: {
     type: String,
     required: true,
@@ -24,7 +31,19 @@ const props = defineProps({
 
 const anchorName = `--anchor-${useId()}`;
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const open = ref<boolean>(false);
+
+const showPopover = () => {
+  console.log('showPopover()');
+  open.value = true;
+};
+
+const closePopover = () => {
+  console.log('closePopover()');
+  open.value = false;
+};
 </script>
 
 <style lang="css">
@@ -46,6 +65,11 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 }
 
 .dialog-popover {
+  /* backdrop-filter: blur(5px);
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 0;
+  padding: 0; */
+
   display: none;
   position: absolute;
   position-anchor: v-bind(anchorName);

package/components/presentation/layout-row/stories/LayoutRow.mdx

@@ -0,0 +1,8 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as LayoutRowStories from './LayoutRow.stories'
+
+<Meta of={LayoutRowStories} />
+
+<Canvas of={LayoutRowStories.Primary} />
+
+<Controls of={LayoutRowStories.Primary} />

package/components/presentation/layout-row/stories/LayoutRow.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryFn } from '@nuxtjs/storybook';
+
+import LayoutRow from '../LayoutRow.vue';
+
+export default {
+  title: 'Components/UI/LayoutRow',
+  component: LayoutRow,
+  argTypes: {
+    tag: {
+      options: ['div', 'header', 'footer', 'section'],
+      control: { type: 'select' },
+    },
+    variant: {
+      options: [
+        'full',
+        'full-start',
+        'full-end',
+        'popout',
+        'popout-start',
+        'popout-end',
+        'content',
+        'content-start',
+        'content-end',
+        'inset-content',
+        'inset-content-start',
+        'inset-content-end',
+        'full-width',
+        'full-content',
+        'full-content-nopad',
+        'full-content',
+      ],
+      control: { type: 'select' },
+    },
+  },
+} as Meta<typeof LayoutRow>;
+
+const Template: StoryFn<typeof LayoutRow> = (args: any) => ({
+  components: { LayoutRow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <LayoutRow v-bind="args">
+      <template #default>${args.content}</template>
+    </LayoutRow>
+  `,
+  // template: '<LayoutRow v-bind="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  tag: 'div',
+  variant: 'full',
+  styleClassPassthrough: ['mbe-20'],
+  content: `
+    <h2 class="heading-2">Full Track (1fr)</h2>
+    <p>
+      Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora.
+      Platea accumsan interdum ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in
+      penatibus torquent tortor. Platea gravida nam; egestas enim nostra ultricies.
+    </p>
+    <p>
+      Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi
+      ullamcorper praesent. Arcu luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class suscipit quisque convallis eget? Dignissim mattis
+      luctus enim habitant porta pretium litora. Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+    </p>
+  `,
+};

package/nuxt.config.ts

@@ -2,6 +2,8 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
+  modules: ['@nuxt/icon', '@nuxtjs/storybook'],
+
   app: {
     head: {
       htmlAttrs: {
@@ -25,6 +27,9 @@ export default defineNuxtConfig({
       pathPrefix: false,
     },
   ],
+  vue: {
+    runtimeCompiler: true,
+  },
   // plugins: ['css-anchor-positioning'],
   compatibilityDate: '2024-07-13',
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -13,7 +13,9 @@
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
     "postinstall": "nuxt prepare .playground",
-    "release": "release-it"
+    "release": "release-it",
+    "storybook": "storybook dev --port 6006 --config-dir .storybook",
+    "test": "vitest"
   },
   "files": [
     "assets/",
@@ -23,12 +25,26 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "0.7.2",
+    "@nuxt/eslint-config": "0.7.3",
+    "@nuxt/icon": "1.10.2",
     "@oddbird/css-anchor-positioning": "0.4.0",
-    "eslint": "9.16.0",
+    "eslint": "9.17.0",
+    "happy-dom": "15.11.7",
     "nuxt": "3.14.1592",
     "release-it": "17.10.0",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "vue": "3.5.13"
+  },
+  "dependencies": {
+    "@nuxtjs/storybook": "8.3.1",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/vue3": "8.4.7",
+    "@vueuse/core": "12.0.0",
+    "focus-trap-vue": "4.0.3",
+    "http-proxy-middleware": "3.0.3",
+    "modern-normalize": "3.0.1"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",
@@ -39,10 +55,5 @@
       "release": true,
       "releaseName": "v${version}"
     }
-  },
-  "dependencies": {
-    "@vueuse/core": "12.0.0",
-    "focus-trap-vue": "4.0.3",
-    "modern-normalize": "3.0.1"
   }
 }