srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/components/05.forms/input-textarea/InputTextareaCore.vue

@@ -94,23 +94,23 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
   position: relative;
 
   &.normal {
-    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border: var(--form-element-border-width) solid var(--theme-border);
     border-radius: var(--form-input-border-radius);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+    outline: var(--form-element-outline-width) solid transparent;
 
     &:has(textarea:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
       outline-offset: var(--form-element-outline-offset-focus);
     }
 
     &:has(textarea:is(:hover)) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
       outline-offset: var(--form-element-outline-offset-focus);
     }
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
   }
 
   display: flex;

package/app/components/05.forms/pending-effect/PendingEffect.vue

@@ -21,81 +21,81 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 @layer components {
-.pending-effect {
-  --pending-line-color: var(--theme-button-primary-border);
-  --pending-line-thickness: 0.1rem;
-  --pending-line-length: 2rem;
-  --pending-blur-color: var(--theme-button-primary-border);
-  --pending-blur-size: 0rem; /* 0.3rem */
-  --pending-offset: 1rem;
-  --animation-speed: 3000ms;
-  /* do not change, used for calculations */
-  --container-offset: 10rem;
-  position: relative;
+  .pending-effect {
+    --pending-line-color: var(--theme-surface);
+    --pending-line-thickness: 0.1rem;
+    --pending-line-length: 2rem;
+    --pending-blur-color: var(--theme-surface);
+    --pending-blur-size: 0rem; /* 0.3rem */
+    --pending-offset: 1rem;
+    --animation-speed: 3000ms;
+    /* do not change, used for calculations */
+    --container-offset: 10rem;
+    position: relative;
 
-  .pending-container {
-    pointer-events: none;
-    position: absolute;
-    inset: calc(var(--container-offset) / -2);
-    width: calc(100% + var(--container-offset));
-    height: calc(100% + var(--container-offset));
-    opacity: 0;
+    .pending-container {
+      pointer-events: none;
+      position: absolute;
+      inset: calc(var(--container-offset) / -2);
+      width: calc(100% + var(--container-offset));
+      height: calc(100% + var(--container-offset));
+      opacity: 0;
 
-    .pending-blur,
-    .pending-line {
-      width: calc(100% - var(--container-offset) + var(--pending-offset));
-      height: calc(100% - var(--container-offset) + var(--pending-offset));
-      x: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
-      y: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
-      rx: 0.8rem;
-      fill: transparent;
-      stroke: black;
-      stroke-width: 0.5rem;
-      stroke-dasharray: var(--pending-line-length) calc(5rem - var(--pending-line-length));
-    }
+      .pending-blur,
+      .pending-line {
+        width: calc(100% - var(--container-offset) + var(--pending-offset));
+        height: calc(100% - var(--container-offset) + var(--pending-offset));
+        x: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
+        y: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
+        rx: 0.8rem;
+        fill: transparent;
+        stroke: black;
+        stroke-width: 0.5rem;
+        stroke-dasharray: var(--pending-line-length) calc(5rem - var(--pending-line-length));
+      }
 
-    .pending-line {
-      stroke: var(--pending-line-color);
-      stroke-width: var(--pending-line-thickness);
-    }
+      .pending-line {
+        stroke: var(--pending-line-color);
+        stroke-width: var(--pending-line-thickness);
+      }
 
-    .pending-blur {
-      filter: blur(var(--pending-blur-size));
-      stroke: var(--pending-blur-color);
-      stroke-width: var(--pending-blur-size);
+      .pending-blur {
+        filter: blur(var(--pending-blur-size));
+        stroke: var(--pending-blur-color);
+        stroke-width: var(--pending-blur-size);
+      }
     }
-  }
 
-  &:is(.icon-only) {
-    .pending-container {
-      .pending-blur,
-      .pending-line {
-        rx: 100vw;
+    &:is(.icon-only) {
+      .pending-container {
+        .pending-blur,
+        .pending-line {
+          rx: 100vw;
+        }
       }
     }
-  }
 
-  &:is(.is-pending) {
-    pointer-events: none;
-    cursor: wait;
+    &:is(.is-pending) {
+      pointer-events: none;
+      cursor: wait;
 
-    @media (prefers-reduced-motion: no-preference) {
-      animation: stroke-dashoffset var(--animation-speed) infinite linear;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: stroke-dashoffset var(--animation-speed) infinite linear;
 
-      .pending-container {
-        opacity: 1;
+        .pending-container {
+          opacity: 1;
+        }
       }
     }
   }
-}
 
-@keyframes stroke-dashoffset {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: -10rem;
+  @keyframes stroke-dashoffset {
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: -10rem;
+    }
   }
 }
-}
 </style>

package/app/components/05.forms/toggle-switch/ToggleSwitchCore.vue

@@ -117,7 +117,7 @@ const toggleSwitchValue = () => {
 
       &:focus-visible {
         + .symbol-wrapper {
-          outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+          outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
           outline-offset: var(--form-element-outline-offset-focus);
         }
       }
@@ -138,14 +138,14 @@ const toggleSwitchValue = () => {
 
       /* UI */
       background-color: var(--theme-checkbox-symbol-surface);
-      border: var(--form-element-border-width) solid var(--theme-input-border);
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+      border: var(--form-element-border-width) solid var(--theme-border);
+      outline: var(--form-element-outline-width) solid transparent;
       border-radius: 100vw;
       width: 72px;
       padding: calc(var(--input-toggle-wrapper-padding) + var(--input-toggle-symbol-outline-width));
 
       &:hover {
-        background-color: var(--theme-toggle-wrapper-surface-color-hover);
+        background-color: var(--theme-surface-subtle);
         cursor: pointer;
       }
 
@@ -163,16 +163,16 @@ const toggleSwitchValue = () => {
 
         /* UI */
         /* padding: calc(calc(var(--input-toggle-symbol-size) - var(--_icon-font-size)) / 2); */
-        border: var(--input-toggle-symbol-border-width) solid var(--theme-checkbox-symbol-color);
-        outline: var(--input-toggle-symbol-outline-width) solid var(--theme-input-outline, red);
+        border: var(--input-toggle-symbol-border-width) solid var(--theme-text);
+        outline: var(--input-toggle-symbol-outline-width) solid transparent;
         border-radius: 100vw;
-        background-color: var(--theme-toggle-symbol-color-default);
+        background-color: var(--theme-on-surface);
         transition:
           translate 0.4s ease,
           background-color 0.4s linear;
 
         &.checked {
-          background-color: var(--theme-toggle-symbol-color-checked);
+          background-color: var(--theme-surface);
           /* left: calc(
             100% - var(--input-toggle-symbol-size) - var(--_switch-padding) - (2 * var(--_toggle-symbol-border-width))
           ); */
@@ -202,11 +202,11 @@ const toggleSwitchValue = () => {
             color var(--theme-form-transition-duration);
 
           &.icon-on {
-            color: var(--theme-toggle-symbol-color-default);
+            color: var(--theme-on-surface);
           }
 
           &.icon-off {
-            color: var(--theme-toggle-symbol-color-checked);
+            color: var(--theme-surface);
           }
 
           &.active {

package/app/components/05.forms/triple-toggle-switch/TripleToggleSwitchCore.vue

@@ -153,15 +153,15 @@ onMounted(() => {
     width: fit-content;
 
     background-color: var(--theme-input-surface);
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+    border: var(--form-element-border-width) solid var(--theme-border);
+    outline: var(--form-element-outline-width) solid transparent;
     border-radius: 100vw;
     padding: var(--_form-padding);
 
     transition: all var(--theme-form-transition-duration) ease-in-out;
 
     &:has(input:focus-visible) {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+      outline: var(--form-element-outline-width) solid var(--theme-ring);
       outline-offset: 0.2rem;
     }
 
@@ -223,7 +223,7 @@ onMounted(() => {
           outline: var(--form-element-outline-width) solid light-dark(var(--slate-10), var(--slate-00));
         }
         &:has(input:focus-visible) {
-          outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+          outline: var(--form-element-outline-width) solid var(--theme-ring);
           outline-offset: 0.2rem;
         }
 

package/app/components/display-theme-switch/DisplayThemeSwitch.vue

@@ -112,12 +112,12 @@ watch(colorModeVal, (val) => {
 
     .triple-toggle-switch-wrapper {
       background-color: var(--theme-input-surface);
-      border: var(--form-element-border-width) solid var(--theme-input-border);
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+      border: var(--form-element-border-width) solid var(--theme-border);
+      outline: var(--form-element-outline-width) solid transparent;
       padding: var(--_form-padding);
 
       &:has(input:focus-visible) {
-        outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+        outline: var(--form-element-outline-width) solid var(--theme-ring);
         outline-offset: 0.2rem;
       }
 
@@ -144,7 +144,7 @@ watch(colorModeVal, (val) => {
           }
 
           &:has(input:focus-visible) {
-            outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+            outline: var(--form-element-outline-width) solid var(--theme-ring);
             outline-offset: 0.2rem;
           }
 

package/app/components/display-tooltip/DisplayTooltip.vue

@@ -137,8 +137,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
         all: unset;
         cursor: pointer;
         color: var(--nuxt-text-accessibility-blue);
-        border: 1px solid var(--theme-button-border);
-        outline: 1px solid var(--theme-button-outline);
+        border: 1px solid var(--theme-border);
+        outline: 1px solid var(--theme-ring);
 
         font-weight: 600;
         padding: 8px 12px;
@@ -146,8 +146,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
         &:hover,
         &:focus {
           text-decoration: underline;
-          border: 1px solid var(--theme-button-border-hover);
-          outline: 1px solid var(--theme-button-outline-hover);
+          border: 1px solid var(--theme-surface);
+          outline: 1px solid var(--theme-surface);
           outline-offset: 2px;
         }
       }

package/app/composables/useBodyLock.ts

@@ -0,0 +1,21 @@
+const getCount = (): number => Number(document.body.dataset.lockCount ?? 0);
+
+const setCount = (n: number) => {
+  if (n > 0) document.body.dataset.lockCount = String(n);
+  else delete document.body.dataset.lockCount;
+};
+
+export const useBodyLock = () => {
+  const lock = () => {
+    setCount(getCount() + 1);
+    document.body.classList.add("lock");
+  };
+
+  const unlock = () => {
+    const next = Math.max(0, getCount() - 1);
+    setCount(next);
+    if (next === 0) document.body.classList.remove("lock");
+  };
+
+  return { lock, unlock };
+};

package/app/composables/useDialogControls.ts

@@ -3,27 +3,27 @@ type DialogCallbacks = {
   onCancel?: () => void;
 };
 
-type DialogsSetupConfig = Record<string, DialogCallbacks>;
-
-export const useDialogControls = (config: DialogsSetupConfig = {}) => {
-  const dialogsConfig = reactive<Record<string, boolean>>(
-    Object.fromEntries(Object.keys(config).map((id) => [id, false]))
+export const useDialogControls = <T extends string>(config: Record<T, DialogCallbacks> = {} as Record<T, DialogCallbacks>) => {
+  const dialogsConfig = reactive<Record<T, boolean>>(
+    Object.fromEntries(Object.keys(config).map((id) => [id, false])) as Record<T, boolean>
   );
 
-  const openDialog = (name: string) => {
-    dialogsConfig[name] = true;
+  const state = dialogsConfig as Record<T, boolean>;
+
+  const openDialog = (name: T) => {
+    state[name] = true;
   };
 
-  const closeDialog = (name: string, action?: "confirm" | "cancel") => {
-    if (action && config[name]) {
+  const closeDialog = (name: T, action?: "confirm" | "cancel") => {
+    if (action) {
       if (action === "confirm") config[name].onConfirm?.();
       else if (action === "cancel") config[name].onCancel?.();
     }
-    dialogsConfig[name] = false;
+    state[name] = false;
   };
 
   return {
-    dialogsConfig,
+    dialogsConfig: state,
     openDialog,
     closeDialog,
   };

package/app/composables/useToastQueue.ts

@@ -0,0 +1,39 @@
+import type { DisplayToastConfig, ToastQueueEntry } from "~/types/components";
+
+const _queue = ref<ToastQueueEntry[]>([]);
+
+const _promote = (id: string) => {
+  const entry = _queue.value.find((e) => e.id === id);
+  if (entry) entry.status = "visible";
+};
+
+const _dismiss = (id: string) => {
+  _queue.value = _queue.value.filter((e) => e.id !== id);
+};
+
+export function useToastQueue() {
+  const show = (config: DisplayToastConfig): string => {
+    const id = `toast-${crypto.randomUUID()}`;
+    _queue.value = [..._queue.value, { id, config, status: "pending" }];
+    return id;
+  };
+
+  const clear = () => {
+    _queue.value = [];
+  };
+
+  return {
+    queue: readonly(_queue),
+    show,
+    dismiss: _dismiss,
+    clear,
+  };
+}
+
+export function useToastQueueProvider() {
+  return {
+    queue: readonly(_queue),
+    promote: _promote,
+    dismiss: _dismiss,
+  };
+}

package/app/layouts/default.vue

@@ -79,12 +79,12 @@ const responsiveNavLinks = {
         { name: "Card Core", path: "/ui/card-core" },
         { name: "Glowing Border", path: "/ui/glowing-border" },
         { name: "Display Toast", path: "/ui/display-toast" },
+        { name: "Prompts", path: "/ui/display-prompt" },
         { name: "Masked Alert", path: "/ui/mask-element" },
         { name: "Expanding Panel", path: "/ui/expanding-panel" },
         { name: "Dialogs", path: "/ui/display-dialog" },
         { name: "Tabs X", path: "/ui/tabs" },
         { name: "Tabs Y", path: "/ui/tabs-y" },
-        { name: "Prompts", path: "/ui/display-prompt" },
         { name: "Rotating Carousel", path: "/ui/rotating-carousel" },
         { name: "Clipped Panels", path: "/ui/clipped-panels" },
         { name: "Display Chip", path: "/ui/display-chip" },