srcdev-nuxt-components 9.1.49 → 9.1.51

package/app/pages/forms/examples/buttons/index.vue

@@ -2,209 +2,209 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1 mbe-18">Settings</h1>
           <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
 
           <DisplayThemeSwitch />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutGridByCols>
-          <template #item-0>
-            <div>
-              <h1>Example buttons</h1>
-              <p>Primary submit</p>
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <LayoutGridByCols>
+            <template #item-0>
+              <div>
+                <h1>Example buttons</h1>
+                <p>Primary submit</p>
 
-              <p>Themes switcher</p>
-              <ul class="flex-group">
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Default"
-                    theme="default"
-                    @click.stop.prevent="swapTheme('default')"
-                  />
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Success"
-                    theme="success"
-                    @click.stop.prevent="swapTheme('success')"
-                  />
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Error"
-                    theme="error"
-                    @click.stop.prevent="swapTheme('error')"
-                  />
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Warning"
-                    theme="warning"
-                    @click.stop.prevent="swapTheme('warning')"
-                  />
-                </li>
-              </ul>
+                <p>Themes switcher</p>
+                <ul class="flex-group">
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Default"
+                      theme="default"
+                      @click.stop.prevent="swapTheme('default')"
+                    />
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Success"
+                      theme="success"
+                      @click.stop.prevent="swapTheme('success')"
+                    />
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Error"
+                      theme="error"
+                      @click.stop.prevent="swapTheme('error')"
+                    />
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Warning"
+                      theme="warning"
+                      @click.stop.prevent="swapTheme('warning')"
+                    />
+                  </li>
+                </ul>
 
-              <p>Variants switcher</p>
-              <ul class="flex-group">
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Primary"
-                    :theme
-                    variant="primary"
-                    @click.stop.prevent="swapVariant('primary')"
-                  />
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Secondary"
-                    :theme
-                    variant="secondary"
-                    @click.stop.prevent="swapVariant('secondary')"
-                  />
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="false"
-                    button-text="Tertiary"
-                    :theme
-                    variant="tertiary"
-                    @click.stop.prevent="swapVariant('tertiary')"
-                  />
-                </li>
-              </ul>
+                <p>Variants switcher</p>
+                <ul class="flex-group">
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Primary"
+                      :theme
+                      variant="primary"
+                      @click.stop.prevent="swapVariant('primary')"
+                    />
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Secondary"
+                      :theme
+                      variant="secondary"
+                      @click.stop.prevent="swapVariant('secondary')"
+                    />
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="false"
+                      button-text="Tertiary"
+                      :theme
+                      variant="tertiary"
+                      @click.stop.prevent="swapVariant('tertiary')"
+                    />
+                  </li>
+                </ul>
 
-              <p>Pending Settings</p>
-              <ul class="flex-group">
-                <li>
-                  <p>Toggle pending state</p>
-                  <InputButtonCore
-                    type="button"
-                    :button-text="`Pending is ${isPending}`"
-                    :theme
-                    variant="primary"
-                    @click.stop.prevent="isPending = !isPending"
-                  />
-                </li>
-                <li>
-                  <p>Toggle pending effect</p>
-                  <InputButtonCore
-                    type="button"
-                    :button-text="`Pending effect is ${hasPendingEffect}`"
-                    :theme
-                    :readonly="!isPending"
-                    variant="primary"
-                    @click.stop.prevent="hasPendingEffect = !hasPendingEffect"
-                  />
-                </li>
-              </ul>
-            </div>
-          </template>
-        </LayoutGridByCols>
+                <p>Pending Settings</p>
+                <ul class="flex-group">
+                  <li>
+                    <p>Toggle pending state</p>
+                    <InputButtonCore
+                      type="button"
+                      :button-text="`Pending is ${isPending}`"
+                      :theme
+                      variant="primary"
+                      @click.stop.prevent="isPending = !isPending"
+                    />
+                  </li>
+                  <li>
+                    <p>Toggle pending effect</p>
+                    <InputButtonCore
+                      type="button"
+                      :button-text="`Pending effect is ${hasPendingEffect}`"
+                      :theme
+                      :readonly="!isPending"
+                      variant="primary"
+                      @click.stop.prevent="hasPendingEffect = !hasPendingEffect"
+                    />
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </LayoutGridByCols>
 
-        <LayoutGridByCols>
-          <template #item-0>
-            <div>
-              <h1>Example buttons</h1>
-              <p>Currently displaying {{ buttonText }}</p>
-              <ul class="flex-group">
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="isPending"
-                    :has-pending-effect="hasPendingEffect"
-                    button-text="Submit"
-                    :theme="theme"
-                    :variant="variant"
-                  />
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="isPending"
-                    :has-pending-effect="hasPendingEffect"
-                    button-text="Submit"
-                    :theme="theme"
-                    :variant="variant"
-                  >
-                    <template #left>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="isPending"
-                    :has-pending-effect="hasPendingEffect"
-                    button-text="Submit"
-                    :theme="theme"
-                    :variant="variant"
-                  >
-                    <template #right>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="isPending"
-                    :has-pending-effect="hasPendingEffect"
-                    button-text="Submit"
-                    :theme="theme"
-                    :variant="variant"
-                    true;
-                  >
-                    <template #left>
-                      <Icon name="mdi:arrow-left" class="icon" />
-                    </template>
-                    <template #right>
-                      <Icon name="mdi:arrow-right" class="icon" />
-                    </template>
-                  </InputButtonCore>
-                </li>
-                <li>
-                  <InputButtonCore
-                    type="button"
-                    :is-pending="isPending"
-                    :has-pending-effect="hasPendingEffect"
-                    button-text="Submit"
-                    :theme="theme"
-                    :variant="variant"
-                  >
-                    <template #iconOnly>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-                </li>
-              </ul>
-            </div>
-          </template>
-        </LayoutGridByCols>
+          <LayoutGridByCols>
+            <template #item-0>
+              <div>
+                <h1>Example buttons</h1>
+                <p>Currently displaying {{ buttonText }}</p>
+                <ul class="flex-group">
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="isPending"
+                      :has-pending-effect="hasPendingEffect"
+                      button-text="Submit"
+                      :theme="theme"
+                      :variant="variant"
+                    />
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="isPending"
+                      :has-pending-effect="hasPendingEffect"
+                      button-text="Submit"
+                      :theme="theme"
+                      :variant="variant"
+                    >
+                      <template #left>
+                        <Icon name="radix-icons:eye-none" class="icon" />
+                      </template>
+                    </InputButtonCore>
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="isPending"
+                      :has-pending-effect="hasPendingEffect"
+                      button-text="Submit"
+                      :theme="theme"
+                      :variant="variant"
+                    >
+                      <template #right>
+                        <Icon name="radix-icons:eye-none" class="icon" />
+                      </template>
+                    </InputButtonCore>
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="isPending"
+                      :has-pending-effect="hasPendingEffect"
+                      button-text="Submit"
+                      :theme="theme"
+                      :variant="variant"
+                      true;
+                    >
+                      <template #left>
+                        <Icon name="mdi:arrow-left" class="icon" />
+                      </template>
+                      <template #right>
+                        <Icon name="mdi:arrow-right" class="icon" />
+                      </template>
+                    </InputButtonCore>
+                  </li>
+                  <li>
+                    <InputButtonCore
+                      type="button"
+                      :is-pending="isPending"
+                      :has-pending-effect="hasPendingEffect"
+                      button-text="Submit"
+                      :theme="theme"
+                      :variant="variant"
+                    >
+                      <template #iconOnly>
+                        <Icon name="radix-icons:eye-none" class="icon" />
+                      </template>
+                    </InputButtonCore>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </LayoutGridByCols>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { IFieldsInitialState } from "~/types/forms/types.forms";
-
 definePageMeta({
   layout: false,
 });
@@ -233,37 +233,11 @@ const isPending = ref(false);
 const buttonText = computed(() => {
   return `Theme: ${theme.value.charAt(0).toUpperCase() + theme.value.slice(1)} | Variant: ${variant.value.charAt(0).toUpperCase() + variant.value.slice(1)}`;
 });
-
-/*
- * Setup forms
- */
-const fieldsInitialState = ref<IFieldsInitialState>({
-  emailAddress: "",
-  username: "",
-  password: "",
-});
-
-// Setup formData
-const { formData, initFormData, getErrorCount, formIsValid } = useFormControl();
-await initFormData(fieldsInitialState);
-
-const submitForm = async () => {
-  await getErrorCount(true);
-
-  if (formIsValid.value) {
-    formData.value.isPending = true;
-    console.log("Form is good - post it!");
-    // await useSleep(2000);
-    // formData.value.isPending = false;
-  } else {
-    console.warn("Form has errors");
-  }
-};
 </script>
 
 <style lang="css">
 .buttons-examples-page {
-  .layout-row {
+  .page-row {
     .ui-content-grid {
       --_margin-inline: 12px;
     }

package/app/pages/forms/examples/material/text-fields.vue

@@ -73,11 +73,11 @@
                 </li>
               </ul>
 
-              <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+              <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
                 <h1 class="page-heading-1 mbe-18">Settings</h1>
                 <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
                 <DisplayThemeSwitch />
-              </LayoutRow>
+              </PageRow>
 
               <FormWrapper width="medium">
                 <template #default>

package/app/pages/grid-stack.vue

@@ -3,7 +3,7 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <!-- Demo 3: BannerVideo + overlay -->
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-48']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-48']">
           <GridStack :tag="tag" class="grid-stack-video-demo">
             <template #layer-1>
               <BannerVideo
@@ -30,9 +30,9 @@
               </div>
             </template>
           </GridStack>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
           <h1 class="page-heading-1">GridStack</h1>
           <p class="page-body-normal">
             Stacks slot content in the z-axis using
@@ -41,10 +41,10 @@
             <code>position: absolute</code>
             . Layers share a single grid area; DOM order determines z-order (last slot is on top).
           </p>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Demo 1: Two layers -->
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-48']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-48']">
           <h2 class="page-heading-2 mbe-16">Two layers</h2>
           <GridStack class="grid-stack-demo">
             <template #layer-1>
@@ -54,10 +54,10 @@
               <div class="demo-layer demo-layer--overlay">layer-2 (overlay)</div>
             </template>
           </GridStack>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Demo 2: Three layers -->
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-48']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-48']">
           <h2 class="page-heading-2 mbe-16">Three layers</h2>
           <GridStack class="grid-stack-demo">
             <template #layer-1>
@@ -70,10 +70,10 @@
               <div class="demo-layer demo-layer--overlay">layer-3 (overlay)</div>
             </template>
           </GridStack>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Controls -->
-        <LayoutRow tag="div" variant="full-width">
+        <PageRow tag="div" variant="full">
           <div class="grid-stack-demo-controls">
             <p class="demo-controls__heading">Props (video demo)</p>
             <div class="demo-controls__row">
@@ -91,7 +91,7 @@
               />
             </div>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/index.vue

@@ -2,46 +2,46 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">GridStack</h2>
           <NuxtLink class="page-body-normal" to="/grid-stack">GridStack</NuxtLink>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">AutoGrid</h2>
           <NuxtLink class="page-body-normal" to="/auto-grid">AutoGrid</NuxtLink>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Nuxt3 Components Layer</h1>
           <p>
             A collection of hand rolled UI components for Nuxt3 that can be added as a layer (extended into another
             Nuxt3 app)
           </p>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Services test pages</h1>
           <NuxtLink class="page-body-normal" to="/ui/services/services-cards">Services Cards</NuxtLink>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <NuxtLink class="page-body-normal" to="/ui/services/services-sections-compact">
             Services Sections Compact
           </NuxtLink>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Profile Section</h1>
           <NuxtLink class="page-body-normal" to="/ui/profile-section">Profile Section</NuxtLink>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Contact Section</h1>
           <NuxtLink class="page-body-normal" to="/ui/contact-section">Contact Section</NuxtLink>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">PopOver component 1</h2>
           <ClientOnly>
             <p>popoverSupported({{ popoverSupported }})</p>
@@ -55,9 +55,9 @@
               <h2>Popover content 1</h2>
             </template>
           </PopOver>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">PopOver component 2</h2>
           <div class="justify-end">
             <PopOver popovertarget="profile2">
@@ -69,9 +69,9 @@
               </template>
             </PopOver>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">Masonry Grid</h2>
           <MasonryGrid :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? {}">
             <template
@@ -85,7 +85,7 @@
               </div>
             </template>
           </MasonryGrid>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/samaritan.vue

@@ -148,13 +148,13 @@
           </details>
         </div>
 
-        <LayoutRow tag="div" variant="full-width">
+        <PageRow tag="div" variant="full">
           <div class="samaritan-stage samaritan-stage--mixed">
             <SamaritanPromptMixed :message-configs="mixedMessages" :hide-cursor-in-cycle="false" />
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width">
+        <PageRow tag="div" variant="full">
           <div class="samaritan-stage">
             <SamaritanPrompt
               :messages="messages"
@@ -168,7 +168,7 @@
               :hide-cursor-in-cycle="qaHideCursorInCycle"
             />
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>