srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/pages/ui/display-chip.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout">
+          <h1 class="page-heading-2">Display Chip</h1>
+
+          <form>
+            <div class="form-row">
+              <div class="form-col">
+                <label for="size">Size - {{ chipConfig.size }}</label>
+                <input @input="changeSize" id="size" type="range" min="1" max="24" :value="12" />
+              </div>
+              <div class="form-col">
+                <label for="maskWidth">Mask Width - {{ chipConfig.maskWidth }}</label>
+                <input @input="changeMaskWidth" id="maskWidth" type="range" min="0" max="12" :value="4" />
+              </div>
+              <div class="form-col">
+                <label for="offset">Offset - {{ chipConfig.offset }}</label>
+                <input @input="changeOffset" id="offset" type="range" min="-12" max="12" :value="2" />
+              </div>
+              <div class="form-col">
+                <label for="angle">Angle - {{ chipConfig.angle }}</label>
+                <input @input="changeAngle" id="angle" type="range" min="0" max="360" :value="45" />
+              </div>
+            </div>
+          </form>
+
+          <section>
+            <div class="dl">
+              <div class="dt">Round</div>
+              <div class="dd">
+                <DisplayChip shape="circle" :config="chipConfig" :style-class-passthrough="['online']">
+                  <div class="demo-content round">
+                    <Icon name="akar-icons:info" class="icon" />
+                  </div>
+                </DisplayChip>
+              </div>
+
+              <div class="dt">Round + Icon</div>
+              <div class="dd">
+                <DisplayChip
+                  shape="circle"
+                  :config="{ ...chipConfig, icon: 'material-symbols:star-outline' }"
+                  :style-class-passthrough="['online']"
+                >
+                  <div class="demo-content round">
+                    <p class="page-body-normal">SRC</p>
+                  </div>
+                </DisplayChip>
+              </div>
+
+              <div class="dt">Round + Text (1 character)</div>
+              <div class="dd">
+                <DisplayChip
+                  shape="circle"
+                  :config="{ ...chipConfig, label: '2' }"
+                  :style-class-passthrough="['online']"
+                >
+                  <div class="demo-content round">
+                    <p class="page-body-normal">SRC</p>
+                  </div>
+                </DisplayChip>
+              </div>
+
+              <div class="dt">Round + Text (2 character)</div>
+              <div class="dd">
+                <DisplayChip
+                  shape="circle"
+                  :config="{ ...chipConfig, label: '+2' }"
+                  :style-class-passthrough="['online']"
+                >
+                  <div class="demo-content round">
+                    <p class="page-body-normal">SRC</p>
+                  </div>
+                </DisplayChip>
+              </div>
+
+              <div class="dt">Round + Text (3 character)</div>
+              <div class="dd">
+                <DisplayChip
+                  shape="circle"
+                  :config="{ ...chipConfig, label: '314' }"
+                  :style-class-passthrough="['online']"
+                >
+                  <div class="demo-content round">
+                    <p class="page-body-normal">SRC</p>
+                  </div>
+                </DisplayChip>
+              </div>
+
+              <div class="dt">Square</div>
+              <div class="dd">
+                <DisplayChip shape="square" :config="chipConfig" :style-class-passthrough="['idle']">
+                  <div class="demo-content square">
+                    <Icon name="akar-icons:info" class="icon" />
+                  </div>
+                </DisplayChip>
+              </div>
+            </div>
+          </section>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Display Chips",
+  meta: [{ name: "description", content: "Examples of UI Display Chips" }],
+  bodyAttrs: {
+    class: "ui-display-chip-page",
+  },
+});
+
+const chipConfig = reactive({
+  size: "12px",
+  maskWidth: "4px",
+  offset: "2px",
+  angle: "45deg",
+});
+
+const changeSize = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  chipConfig.size = `${target.value}px`;
+};
+
+const changeMaskWidth = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  chipConfig.maskWidth = `${target.value}px`;
+};
+
+const changeOffset = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  chipConfig.offset = `${target.value}px`;
+};
+
+const changeAngle = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  chipConfig.angle = `${target.value}deg`;
+};
+</script>
+
+<style lang="css">
+.ui-display-chip-page {
+  form {
+    margin-bottom: 2rem;
+
+    .form-row {
+      .form-col {
+        display: grid;
+        grid-template-columns: 200px 200px;
+        gap: 1rem;
+        padding: 0.5rem 0;
+
+        label {
+          font-weight: bold;
+        }
+
+        input {
+          padding: 0.5rem;
+          border: 1px solid var(--slate-07);
+          border-radius: 4px;
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+  section {
+    margin-top: 2rem;
+
+    .dl {
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: 2rem;
+      align-items: center;
+      justify-content: start;
+
+      /* background-color: var(--slate-05); */
+
+      .dt {
+        font-weight: bold;
+      }
+      .dd {
+        margin: 0;
+
+        .demo-content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .page-body-normal {
+            color: light-dark(var(--slate-10), var(--slate-10));
+          }
+
+          .icon {
+            width: 24px;
+            height: 24px;
+            color: light-dark(var(--slate-10), var(--slate-10));
+          }
+
+          &.round {
+            width: 50px;
+            height: 50px;
+            background-color: light-dark(var(--slate-03), var(--slate-04));
+            border-radius: 50%;
+          }
+
+          &.square {
+            width: 50px;
+            height: 50px;
+            background-color: light-dark(var(--slate-03), var(--slate-04));
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/display-details.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['display-details-section', 'mbe-20']">
+          <h1 class="page-heading-2">Details element - Unlinked</h1>
+          <p class="mbe-12">Following 2 details block behave independantly.</p>
+
+          <DisplayDetailsCore
+            id="details-1"
+            name="details-1"
+            :animation-duration="200"
+            icon-size="medium"
+            :style-class-passthrough="['custom-style-1']"
+          >
+            <template #summary>
+              <h3 class="page-heading-3 m-8">Details header 1 (Fast)</h3>
+            </template>
+            <template #summaryIcon>
+              <Icon name="bi:caret-down-fill" class="icon mi-12" />
+            </template>
+            <template #details-content>
+              <div>
+                <p class="mt-0">Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+
+          <DisplayDetailsCore
+            id="details-2"
+            name="details-2"
+            :animation-duration="2000"
+            icon-size="medium"
+            :style-class-passthrough="['custom-style-2']"
+          >
+            <template #summary>
+              <h3 class="page-heading-3 m-8">Details header 2 (Slow)</h3>
+            </template>
+            <template #summaryIcon>
+              <Icon name="bi:caret-down-fill" class="icon mi-12" />
+            </template>
+            <template #details-content>
+              <div>
+                <p class="mt-0">Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+        </LayoutRow>
+
+        <LayoutRow
+          tag="div"
+          variant="full-width"
+          :style-class-passthrough="['display-details-section', 'mbe-20', 'hidden']"
+        >
+          <h2 class="page-heading-2">Details element - Linked</h2>
+          <p class="mbe-12">Details panels are linked, only 1 can be open at a time.</p>
+
+          <DisplayDetailsCore
+            :id="useId()"
+            name="details-linked"
+            icon-size="medium"
+            :style-class-passthrough="['linked']"
+          >
+            <template #summary>
+              <h3 class="page-heading-3 m-8">Details header 1</h3>
+            </template>
+            <template #summaryIcon>
+              <Icon name="bi:caret-down-fill" class="icon mi-12" />
+            </template>
+            <template #details-content>
+              <div>
+                <p class="mt-0">Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+
+          <DisplayDetailsCore
+            :id="useId()"
+            name="details-linked"
+            icon-size="medium"
+            :style-class-passthrough="['linked']"
+          >
+            <template #summary>
+              <h3 class="page-heading-3 m-8">Details header 2</h3>
+            </template>
+            <template #summaryIcon>
+              <Icon name="bi:caret-down-fill" class="icon mi-12" />
+            </template>
+            <template #details-content>
+              <div>
+                <p class="mt-0">Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+                <p>Details content</p>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Browser title tag",
+  meta: [
+    {
+      name: "description",
+      content: "Meta description content",
+    },
+  ],
+})
+</script>
+
+<style lang="css">
+.display-details-section {
+  .display-details {
+    &.custom-style-1 {
+      border: 1px solid blue;
+      outline: 1px solid green;
+      box-shadow: 2px 2px 2px light-dark(#000, #fff);
+      border-radius: 10px;
+      --_display-details-mbe: 1em;
+
+      .display-details-summary {
+        gap: 0;
+        flex-direction: row-reverse;
+      }
+    }
+
+    &.custom-style-2 {
+      border: 1px solid pink;
+      outline: 1px solid yellow;
+      box-shadow: 2px 2px 2px light-dark(#000, #fff);
+      border-radius: 10px;
+      --_display-details-mbe: 1em;
+
+      .display-details-summary {
+        gap: 0;
+        flex-direction: row-reverse;
+      }
+    }
+    &.linked {
+      border: 1px solid blue;
+      outline: 1px solid grey;
+      box-shadow: 2px 2px 2px light-dark(#000, #fff);
+      border-radius: 10px;
+      --_display-details-mbe: 1em;
+
+      .display-details-summary {
+        gap: 0;
+        flex-direction: row;
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/display-dialog.vue

@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
+          <h1 class="page-heading-2">Dialog withscrollable content</h1>
+          <p><button @click.prevent="controlDialogs('sample1', true)" type="button">Show Dialog</button></p>
+
+          <DisplayDialogScrollableContent
+            v-if="dialogsConfig['sample1']"
+            v-model="dialogsConfig['sample1']"
+            :style-class-passthrough="['your-modifier-class']"
+            :allowContentScroll="true"
+            data-dialog-id="sample1"
+          >
+            <template #dialogTitle>
+              <p class="text-normal wght-700 m-0">Confirm logout?</p>
+            </template>
+
+            <template #dialogContent>
+              <div class="pt-12 pb-12">
+                <p class="text-normal">
+                  Lorem ipsum odor amet, consectetuer adipiscing elit. Scelerisque tincidunt vestibulum litora torquent
+                  aliquam a. Sem litora tellus mattis nisi vehicula sodales arcu egestas. Consectetur ultrices maximus
+                  pulvinar habitant imperdiet habitasse feugiat. Varius vehicula potenti aliquam mollis efficitur at mus
+                  ridiculus. Nec dis elit euismod posuere etiam fermentum, nisi ante. Pharetra ligula laoreet commodo et
+                  mollis, semper malesuada urna. Id porttitor hendrerit scelerisque justo ridiculus sagittis. Adipiscing
+                  pellentesque eget metus orci; potenti natoque habitasse. Adipiscing leo parturient dis nullam
+                  condimentum id.
+                </p>
+                <p class="text-normal">
+                  Justo molestie felis tellus tellus taciti? Ullamcorper viverra quis felis donec aliquam torquent
+                  imperdiet. Curabitur vitae quis malesuada imperdiet hendrerit felis quam dictum. Aptent curabitur
+                  lacus dapibus; nunc enim vestibulum finibus. Lorem commodo tortor blandit nisl curabitur interdum
+                  ultricies magnis. Dui vehicula ex; congue sagittis commodo tincidunt. Varius sociosqu finibus facilisi
+                  per, vel quisque. Ornare fames cubilia diam maximus habitant nulla nisl. Sollicitudin cubilia inceptos
+                  taciti hac tristique mauris hendrerit vestibulum.
+                </p>
+                <p class="text-normal">
+                  Lobortis efficitur enim litora dictum montes. Sagittis eget etiam curae suspendisse cubilia. Ante
+                  aliquam orci mus ultricies nostra. Ad augue quam egestas ipsum sem lacus tempus. Magnis enim posuere
+                  eros montes fermentum velit. Montes lacinia nisl facilisi volutpat vehicula porttitor auctor
+                  condimentum venenatis. Semper varius nascetur imperdiet laoreet vivamus montes praesent purus nostra.
+                  Magna nascetur augue curae proin nascetur sagittis urna adipiscing.
+                </p>
+                <p class="text-normal">
+                  Venenatis adipiscing integer eget donec ridiculus risus. Nulla quis sollicitudin sem nam bibendum
+                  ligula. Curabitur malesuada platea egestas venenatis in torquent. Eget eros euismod vehicula consequat
+                  at, efficitur ullamcorper. Donec nibh molestie semper nulla vehicula. Vulputate porta euismod cras;
+                  inceptos vel erat. Vehicula urna mattis suscipit iaculis nostra eget. Eleifend vivamus nullam porta
+                  urna nulla dictum praesent aenean. Etiam ipsum placerat bibendum nullam rhoncus egestas. Mollis
+                  pretium nullam nullam donec eget imperdiet.
+                </p>
+                <p class="text-normal">
+                  Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque
+                  neque varius nostra. Imperdiet tellus libero ornare lobortis maximus rutrum parturient litora viverra.
+                  Praesent proin sem nulla mauris justo mi morbi. Neque diam sodales nam nascetur commodo risus. Ornare
+                  at sit, mattis erat aenean ipsum. Dictum integer ipsum suspendisse sagittis nisl sollicitudin.
+                </p>
+                <p class="text-normal">
+                  Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque
+                  neque varius nostra. Imperdiet tellus libero ornare lobortis maximus rutrum parturient litora viverra.
+                  Praesent proin sem nulla mauris justo mi morbi. Neque diam sodales nam nascetur commodo risus. Ornare
+                  at sit, mattis erat aenean ipsum. Dictum integer ipsum suspendisse sagittis nisl sollicitudin.
+                </p>
+                <p class="text-normal">
+                  Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque
+                  neque varius nostra. Imperdiet tellus libero ornare lobortis maximus rutrum parturient litora viverra.
+                  Praesent proin sem nulla mauris justo mi morbi. Neque diam sodales nam nascetur commodo risus. Ornare
+                  at sit, mattis erat aenean ipsum. Dictum integer ipsum suspendisse sagittis nisl sollicitudin.
+                </p>
+              </div>
+            </template>
+            <template #actionButtonLeft>
+              <button @click.prevent="controlDialogs('sample1', false, 'cancel')" type="submit">Cancel</button>
+            </template>
+            <template #actionButtonRight>
+              <button @click.prevent="controlDialogs('sample1', false, 'confirm')" type="submit">Confirm</button>
+            </template>
+          </DisplayDialogScrollableContent>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
+          <h2 class="page-heading-2">Confirm Dialog</h2>
+          <p><button @click.prevent="controlDialogs('logout', true)" type="button">Show Dialog Prompt</button></p>
+
+          <DisplayDialogConfirm
+            v-if="dialogsConfig['logout']"
+            v-model="dialogsConfig['logout']"
+            :style-class-passthrough="['your-modifier-class']"
+            data-dialog-id="logout"
+          >
+            <template #dialogTitle>
+              <p class="text-normal wght-700 m-0">Confirm logout?</p>
+            </template>
+
+            <template #dialogContent>
+              <div class="m-0">
+                <p class="text-normal">Are you sure you wish to log out?</p>
+              </div>
+            </template>
+            <template #actionButtonLeft>
+              <button @click.prevent="controlDialogs('logout', false, 'cancel')" type="submit">Cancel</button>
+            </template>
+            <template #actionButtonRight>
+              <button @click.prevent="controlDialogs('logout', false, 'confirm')" type="submit">Confirm</button>
+            </template>
+          </DisplayDialogConfirm>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "UI Dialogs",
+  meta: [{ name: "description", content: "Examples of Dialogs" }],
+  bodyAttrs: {
+    class: "home",
+  },
+})
+
+const dialogBtnSampleAction = () => {
+  console.log("Dialog button action clicked")
+}
+
+const { dialogsConfig, controlDialogs, initialiseDialogs, registerDialogCallbacks } = useDialogControls()
+
+onMounted(() => {
+  const dialogIds = ["logout", "sample1"]
+  initialiseDialogs(dialogIds)
+
+  // Register callbacks for each dialog
+  registerDialogCallbacks("sample1", {
+    onConfirm: dialogBtnSampleAction,
+    onCancel: () => console.log("Sample1 dialog cancelled"),
+  })
+
+  registerDialogCallbacks("logout", {
+    onConfirm: () => {
+      dialogBtnSampleAction()
+      console.log("User logged out")
+    },
+    onCancel: () => console.log("Logout cancelled"),
+  })
+})
+</script>
+
+<style lang="css">
+.your-modifier-class {
+  &.display-dialog-core {
+    /* Dialog core styles */
+    /* Delete or add styles as needed */
+
+    &[open] {
+      @starting-style {
+      }
+    }
+
+    /* * Positioning the dialog */
+    &[justify-dialog="start"] {
+    }
+
+    &[justify-dialog="center"] {
+    }
+
+    &[justify-dialog="end"] {
+    }
+
+    &[align-dialog="start"] {
+    }
+
+    &[align-dialog="center"] {
+    }
+    &[align-dialog="end"] {
+    }
+
+    .inner {
+      &.confirm {
+      }
+
+      &.dialog {
+      }
+
+      &.form {
+      }
+
+      &.fullscreen {
+      }
+
+      &.modal {
+      }
+
+      .header {
+        .col-left {
+        }
+
+        .col-center {
+        }
+
+        .col-right {
+          .display-prompt-action {
+            &:hover {
+            }
+            &:focus-visible {
+            }
+
+            .icon {
+            }
+          }
+        }
+      }
+
+      .dialog-content {
+        &.allow-content-scroll {
+          &::-webkit-scrollbar {
+          }
+        }
+      }
+
+      .footer {
+      }
+    }
+  }
+}
+</style>