srcdev-nuxt-components 8.0.3 → 9.0.1

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

@@ -0,0 +1,290 @@
+<template>
+  <div class="triple-toggle-switch" :class="[elementClasses]" :data-theme="theme">
+    <div class="triple-toggle-switch-wrapper">
+      <div class="selected-option-marker-wrapper">
+        <div class="selected-option-marker" :class="[{ show: showMarker }]"></div>
+      </div>
+      <div class="option-group-wrapper">
+        <label
+          v-for="option in fieldData.data"
+          :key="option.id"
+          ref="optionGroup"
+          :for="option.id"
+          class="option-group"
+        >
+          <span class="sr-only">{{ option.label }}</span>
+          <Icon
+            v-if="option.icon"
+            ref="optionIcons"
+            :name="option.icon"
+            class="option-icon"
+            :class="[option.id, { active: modelValue === option.value }]"
+          />
+          <input
+            :id="option.id"
+            v-model="modelValue"
+            type="radio"
+            :name="name"
+            class="option-input"
+            :value="option.value"
+          />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, IFormMultipleOptions } from "~/types/forms/types.forms";
+
+interface Props {
+  name?: string;
+  theme?: FormUiTheme;
+  stepAnimationDuration?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: "triple-toggle-switch",
+  theme: "default",
+  stepAnimationDuration: "250ms",
+  styleClassPassthrough: () => [],
+});
+
+const modelValue = defineModel<string | number | boolean>();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+
+// Performance optimization: provide reactive access to props for template
+const { name, theme, stepAnimationDuration } = toRefs(props);
+
+const optionGroupRefs = useTemplateRef<HTMLDivElement>("optionGroup");
+
+const iconWidth = ref("0px");
+const showMarker = ref(false);
+
+// Performance-optimized computed for selected option index
+const selectedOptionIndex = computed(() => {
+  if (!fieldData.value?.data) return 0;
+  const index = fieldData.value.data.findIndex((option) => option.value === modelValue.value);
+  return Math.max(0, index); // Ensure non-negative index
+});
+
+// Optimized setup with better error handling
+const setupDefaults = async () => {
+  await nextTick(); // Ensure DOM is ready
+
+  if (Array.isArray(optionGroupRefs.value) && optionGroupRefs.value[0]) {
+    const rect = optionGroupRefs.value[0].getBoundingClientRect();
+    iconWidth.value = `${rect.width}px`;
+  }
+
+  // Use requestAnimationFrame for better performance than setTimeout
+  await new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      setTimeout(resolve, 250);
+    });
+  });
+
+  showMarker.value = true;
+};
+
+onMounted(() => {
+  setupDefaults();
+});
+</script>
+
+<style lang="css">
+@layer components {
+.triple-toggle-switch {
+  --_form-border-colour: var(--theme-form-radio-border);
+
+  --_form-outline-colour: var(--theme-form-radio-outline);
+
+  --_form-border-radius: calc(
+    (var(--_scheme-icon-font-size) / 2) + var(--form-element-border-width) + var(--form-element-outline-width) +
+      var(--_form-padding) + var(--_select-scheme-group-padding) + var(--form-element-border-width) +
+      var(--form-element-outline-width)
+  );
+
+  --_form-items-gap: 1rem;
+  --_form-padding: 0.6rem;
+
+  --_select-scheme-group-background-color: var(--theme-form-checkbox-bg);
+  --_select-scheme-group-background-image: none;
+  --_select-scheme-group-padding: 0.5rem;
+  --_scheme-icon-font-size: 2rem;
+  /* --_scheme-icon-colour: black; */
+
+  &:has(input[value="auto"]:checked) {
+    --_select-scheme-group-background-color: transparent;
+    --_select-scheme-group-background-image: radial-gradient(
+      circle,
+      rgb(66, 180, 58) 0%,
+      rgb(17, 199, 0) 27%,
+      rgb(8, 117, 3) 100%
+    );
+  }
+
+  &:has(input[value="light"]:checked) {
+    --_select-scheme-group-background-color: transparent;
+    --_select-scheme-group-background-image: radial-gradient(
+      circle,
+      rgba(180, 58, 91, 1) 0%,
+      rgba(253, 29, 29, 1) 27%,
+      rgba(252, 176, 69, 1) 100%
+    );
+  }
+
+  &:has(input[value="dark"]:checked) {
+    --_select-scheme-group-background-color: transparent;
+    --_select-scheme-group-background-image: radial-gradient(
+      circle,
+      rgb(50, 20, 25) 0%,
+      rgb(0, 0, 0) 27%,
+      rgb(100, 100, 100) 100%
+    );
+  }
+
+  .triple-toggle-switch-wrapper {
+    display: inline-grid;
+    grid-template-areas: "select-stack";
+    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-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-offset: 0.2rem;
+    }
+
+    .selected-option-marker-wrapper {
+      grid-area: select-stack;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .selected-option-marker {
+        aspect-ratio: 1;
+        width: v-bind(iconWidth);
+        transition: all v-bind(stepAnimationDuration) ease-in-out;
+        background-color: var(--_select-scheme-group-background-color);
+        background-image: var(--_select-scheme-group-background-image);
+        border: var(--form-element-border-width) solid light-dark(var(--slate-10), var(--slate-00));
+
+        border-radius: 50%;
+
+        position: absolute;
+        left: calc(
+          v-bind(selectedOptionIndex) * v-bind(iconWidth) + (var(--_form-items-gap) * v-bind(selectedOptionIndex))
+        );
+
+        opacity: 0;
+
+        &.show {
+          opacity: 1;
+        }
+      }
+    }
+
+    .option-group-wrapper {
+      display: grid;
+      grid-area: select-stack;
+      grid-template-columns: repeat(3, 1fr);
+      align-items: center;
+      width: fit-content;
+      z-index: 2;
+      gap: var(--_form-items-gap);
+      position: relative;
+
+      .option-group {
+        aspect-ratio: 1;
+        display: grid;
+        grid-template-areas: "icon-stack";
+        place-content: center;
+        background: transparent;
+        border: var(--form-element-border-width) solid light-dark(#00000025, #ffffff50);
+        outline: var(--form-element-outline-width) solid transparent;
+        border-radius: 50%;
+        padding: var(--_select-scheme-group-padding);
+        overflow: hidden;
+
+        transition: all calc(var(--theme-form-transition-duration) / 3);
+
+        &:has(.option-icon:hover) {
+          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-offset: 0.2rem;
+        }
+
+        .option-icon {
+          grid-area: icon-stack;
+          display: block;
+          font-size: var(--_scheme-icon-font-size);
+
+          &.auto {
+            color: light-dark(var(--slate-10), var(--slate-03));
+
+            &.active {
+              color: var(--slate-00);
+            }
+          }
+
+          &.light {
+            color: light-dark(var(--slate-10), var(--slate-03));
+
+            &.active {
+              color: var(--slate-00);
+            }
+          }
+
+          &.dark {
+            color: light-dark(var(--slate-10), var(--slate-03));
+
+            &.active {
+              color: var(--slate-00);
+            }
+          }
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        .option-input {
+          grid-area: icon-stack;
+          opacity: 0;
+          aspect-ratio: 1;
+          width: var(--_scheme-icon-font-size);
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        /* &:has(input[value="auto"]:checked) {
+          --_scheme-icon-colour: white;
+        }
+
+        &:has(input[value="light"]:checked) {
+          --_scheme-icon-colour: white;
+        }
+
+        &:has(input[value="dark"]:checked) {
+          --_scheme-icon-colour: white;
+        } */
+      }
+    }
+  }
+}
+}
+</style>

package/app/components/forms/ui/FormField.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="form-field"
+    :class="[width, styleClassPassthrough, { 'has-gutter': hasGutter }]"
+    :data-invalid="fieldHasError ? true : undefined"
+  >
+    <div class="form-field-inner">
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: String as PropType<string>,
+    default: "narrow",
+    validator: (val: string) => ["narrow", "medium", "wide"].includes(val),
+  },
+  fieldHasError: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  hasGutter: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="css">
+@layer components {
+.form-field {
+  --_gutter-width: 0rem;
+  --_max-width: 400px;
+  --_background-color: transparent;
+  --_border-radius: 0.4rem;
+
+  background-color: var(--_background-color);
+  border-radius: var(--_border-radius);
+  margin-inline: auto;
+  margin-block: 0 1rem;
+
+  width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
+  outline: 0rem solid var(--slate-05);
+  /* overflow-block: hidden; */
+
+  &:has(.underline) {
+    --_background-color: var(--theme-form-input-bg-underlined);
+  }
+
+  .form-field-inner {
+    background-color: var(--_background-color);
+    border-radius: var(--_border-radius);
+    margin-inline-start: 0rem;
+    padding-inline-start: 0rem;
+    outline: 0 solid var(--slate-05);
+  }
+
+  &.has-gutter {
+    --_gutter-width: 1.6rem;
+  }
+
+  &.narrow {
+    max-width: 400px;
+  }
+
+  &.medium {
+    --_max-width: 800px;
+  }
+
+  &.wide {
+    --_max-width: 1200px;
+  }
+}
+}
+</style>

package/app/components/forms/ui/FormWrapper.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="form-wrapper" :class="width">
+    <slot name="default"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: String as PropType<string>,
+    default: "narrow",
+    validator: (val: string) => ["narrow", "medium", "wide"].includes(val),
+  },
+});
+</script>
+
+<style lang="css">
+@layer components {
+.form-wrapper {
+  outline: 0rem solid var(--slate-10);
+  padding-bottom: 2rem;
+  margin-trim: block;
+
+  &.narrow {
+    max-width: 400px;
+  }
+
+  &.medium {
+    max-width: 800px;
+  }
+
+  &.wide {
+    max-width: 1200px;
+  }
+}
+}
+</style>

package/app/components/glowing-border/GlowingBorder.vue

@@ -50,6 +50,7 @@ watch(
 </script>
 
 <style scoped lang="css">
+@layer components {
 @property --glow-deg {
   syntax: "<angle>";
   inherits: true;
@@ -137,4 +138,5 @@ watch(
     --glow-deg: 270deg;
   }
 }
+}
 </style>

package/app/components/glowing-border/stories/GlowingBorder.stories.ts

@@ -0,0 +1,141 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../GlowingBorder.vue";
+
+// Custom interface for story args
+interface GlowingBorderStoryArgs {
+  variant: "vivid" | "subtle" | "silver" | "steel";
+  content: string;
+  showDisplayCard: boolean;
+  displayCardVariant: "solid" | "subtle" | "soft" | "outline";
+}
+
+export default {
+  title: "Components/Effects/GlowingBorder",
+  component: StorybookComponent,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["vivid", "subtle", "silver", "steel"],
+      description: "GlowingBorder visual variant",
+      table: {
+        category: "Appearance",
+      },
+    },
+    content: {
+      control: { type: "text" },
+      description: "Content to display inside the glowing border",
+      table: {
+        category: "Content",
+      },
+    },
+    showDisplayCard: {
+      control: { type: "boolean" },
+      description: "Show content wrapped in a DisplayCard component",
+      table: {
+        category: "Content",
+      },
+    },
+    displayCardVariant: {
+      control: { type: "select" },
+      options: ["solid", "subtle", "soft", "outline"],
+      description: "DisplayCard variant when showDisplayCard is true",
+      table: {
+        category: "Content",
+      },
+    },
+    // Hide internal props
+    styleClassPassthrough: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    variant: "vivid",
+    content:
+      "This is default slot content for the GlowingBorder component. As it's a slot, any HTML content can be placed here.",
+    showDisplayCard: false,
+    displayCardVariant: "solid",
+  },
+} as Meta<GlowingBorderStoryArgs>;
+
+const Template: StoryFn<GlowingBorderStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; background-color: var(--slate-10);">
+      <StorybookComponent
+        :variant="args.variant"
+        :style-class-passthrough="['storybook-demo']"
+      >
+        <div v-if="!args.showDisplayCard" style="padding: 20px; color: var(--slate-02);">
+          <h3 style="margin: 0 0 12px 0; font-size: 1.5rem; font-weight: 600;">GlowingBorder Header</h3>
+          <h4 style="margin: 0 0 16px 0; font-size: 1.25rem; font-weight: 500;">GlowingBorder Content</h4>
+          <p style="margin: 0 0 12px 0; line-height: 1.6;">{{ args.content }}</p>
+          <p style="margin: 0; font-size: 0.875rem; color: var(--slate-09);">GlowingBorder Footer</p>
+        </div>
+
+        <!-- DisplayCard version -->
+        <DisplayCard
+          v-else
+          :variant="args.displayCardVariant"
+          :has-dividers="true"
+          :no-outline="false"
+        >
+          <template #header>
+            <h2 style="margin: 0; font-size: 1.5rem; font-weight: 600;">DisplayCard Header</h2>
+          </template>
+          <template #default>
+            <h3 style="margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 500; color: var(--slate-02);">DisplayCard Content</h3>
+            <p style="margin: 0 0 12px 0; line-height: 1.6; color: var(--slate-02);">{{ args.content }}</p>
+            <p style="margin: 0; line-height: 1.6; color: var(--slate-02);">This demonstrates how GlowingBorder can wrap other components.</p>
+          </template>
+          <template #footer>
+            <p style="margin: 0; font-size: 0.875rem; color: var(--slate-02);">DisplayCard Footer</p>
+          </template>
+        </DisplayCard>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const Vivid = Template.bind({});
+Vivid.args = {
+  variant: "vivid",
+  content:
+    "Vivid variant creates a bright, attention-grabbing glow effect perfect for highlighting important content or call-to-action elements.",
+};
+
+export const Subtle = Template.bind({});
+Subtle.args = {
+  variant: "subtle",
+  content:
+    "Subtle variant provides a gentle glow that adds visual interest without being overwhelming, ideal for elegant content presentation.",
+};
+
+export const Silver = Template.bind({});
+Silver.args = {
+  variant: "silver",
+  content:
+    "Silver variant offers a metallic, sophisticated glow that works well in professional or modern design contexts.",
+};
+
+export const Steel = Template.bind({});
+Steel.args = {
+  variant: "steel",
+  content:
+    "Steel variant provides a cool, industrial glow effect that's perfect for technical or utilitarian design themes.",
+};
+
+export const WithDisplayCard = Template.bind({});
+WithDisplayCard.args = {
+  variant: "vivid",
+  content:
+    "This example shows how GlowingBorder can enhance other components like DisplayCard, creating layered visual effects.",
+  showDisplayCard: true,
+  displayCardVariant: "solid",
+};