spoko-design-system 0.5.7 → 0.5.8

package/src/components/Headline.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'span',
-    required: true,
-  },
-  textSize: {
-    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
-    required: false,
-    default: null
-  },
-  underline: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-})
-</script>
-
-<template>
-  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
-    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
-    <slot />
-  </component>
-</template>
-
-<style>
-.headline--underline {
-  @apply relative pb-4;
-
-  &:after {
-    @apply content-empty absolute left-0 bottom-0;
-    height: 3px;
-    width: 55px;
-    background-color: var(--clr-primary-400);
-  }
-
-  &:before {
-    @apply content-empty absolute left-0 bottom-px h-px;
-    width: 95%;
-    max-width: 255px;
-    background-color: #64748b
-  }
-}
-</style>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'span',
+    required: true,
+  },
+  textSize: {
+    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+    required: false,
+    default: null
+  },
+  underline: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
+    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
+    <slot />
+  </component>
+</template>
+
+<style>
+.headline--underline {
+  @apply relative pb-4;
+
+  &:after {
+    @apply content-empty absolute left-0 bottom-0;
+    height: 3px;
+    width: 55px;
+    background-color: var(--clr-primary-400);
+  }
+
+  &:before {
+    @apply content-empty absolute left-0 bottom-px h-px;
+    width: 95%;
+    max-width: 255px;
+    background-color: #64748b
+  }
+}
+</style>

package/src/components/Image.astro

@@ -1,30 +1,30 @@
----
-import { Image } from "astro:assets";
-
-const { imageObject } = Astro.props;
-let inputProps = {};
-
-if (imageObject.index && imageObject.index === 1) {
-  inputProps["data-pagefind-meta"] = "image[src], image_alt[alt]";
-  inputProps["loading"] = "eager";
-}
-
-if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps["widths"] = imageObject.srcset;
-}
----
-
-<Image
-  src={imageObject.src}
-  alt={imageObject.alt}
-  height={imageObject.height}
-  width={imageObject.width}
-  itemprop="image"
-  format="avif"
-  data-pagefind-index-attrs="alt"
-  onerror="this.style.display='none';"
-  class={`h-full w-full select-none pointer-none ${
-    imageObject.class || "object-cover"
-  }`}
-  {...inputProps}
-/>
+---
+import { Image } from "astro:assets";
+
+const { imageObject } = Astro.props;
+let inputProps = {};
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps["data-pagefind-meta"] = "image[src], image_alt[alt]";
+  inputProps["loading"] = "eager";
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps["widths"] = imageObject.srcset;
+}
+---
+
+<Image
+  src={imageObject.src}
+  alt={imageObject.alt}
+  height={imageObject.height}
+  width={imageObject.width}
+  itemprop="image"
+  format="avif"
+  data-pagefind-index-attrs="alt"
+  onerror="this.style.display='none';"
+  class={`h-full w-full select-none pointer-none ${
+    imageObject.class || "object-cover"
+  }`}
+  {...inputProps}
+/>

package/src/components/Input.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+interface InputProps {
+  id?: string;
+  name?: string;
+  label: string;
+  variant?: 'filled' | 'standard';
+  type?: string; // HTMLInputElement['type'] | 'textarea'
+  modelValue?: string | number; // For v-model compatibility
+  required?: boolean;
+  rows?: number; // rows for textarea
+  placeholder?: string;
+  error?: string | boolean;
+  success?: string | boolean;
+  size?: 'sm' | 'md' | 'lg'; // Size prop
+  class?: string; // additional classes
+  [key: string]: any; // To allow additional props
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  id: () => `input-${Math.random().toString(36).substring(2, 9)}`,
+  name: undefined,
+  variant: 'standard',
+  type: 'text',
+  modelValue: '',
+  required: false,
+  rows: 3,
+  placeholder: ' ', // space is important for "floating label"
+  error: false,
+  success: false,
+  size: 'md',
+  class: ''
+});
+
+const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur']);
+
+// Handle external attrs
+const attrs = useAttrs();
+
+// Compute wrapper class
+const wrapperClass = computed(() => `input-wrapper-${props.variant}`);
+
+// Compute input classes going back to direct arbitrary selectors
+const inputClass = computed(() => {
+  // Base classes
+  const classes = ['input-base', `input-${props.variant}`];
+  
+  // Focus and placeholder behavior - using direct arbitrary selectors
+  classes.push('[&:focus~label]:text-blue-light');
+  classes.push('[&:focus~label]:dark:text-blue-lightest');
+  classes.push('[&:focus~label]:scale-75');
+  classes.push('[&:placeholder-shown~label]:scale-100');
+  classes.push('[&:placeholder-shown~label]:translate-y-0');
+  classes.push('[&:not(:placeholder-shown)~label]:scale-75');
+  
+  // Variant-specific behaviors
+  if (props.variant === 'standard') {
+    classes.push('[&:focus~label]:-translate-y-6');
+    classes.push('[&:focus~label]:start-0');
+    classes.push('[&:not(:placeholder-shown)~label]:-translate-y-6');
+  } else if (props.variant === 'filled') {
+    classes.push('[&:focus~label]:-translate-y-4');
+    classes.push('[&:not(:placeholder-shown)~label]:-translate-y-4');
+  }
+  
+  // Additional classes
+  if (props.size) classes.push(`input-${props.size}`);
+  if (props.type === 'textarea') classes.push('input-textarea');
+  if (props.error) classes.push('input-error');
+  else if (props.success) classes.push('input-success');
+  if (props.class) classes.push(props.class);
+  
+  return classes.join(' ');
+});
+
+// Compute label classes - important: add -translate-y for initial state explicitly
+const labelClass = computed(() => {
+  // Base classes
+  const classes = ['input-label-base', `input-label-${props.variant}`];
+  
+  // Explicitly add transform for initial state to ensure consistency
+  if (props.variant === 'standard') {
+    // Start in position and let focus/content move it
+    classes.push('translate-y-0');
+  } else if (props.variant === 'filled') {
+    // Start in position and let focus/content move it
+    classes.push('translate-y-0');
+  }
+  
+  // Additional classes
+  if (props.size) classes.push(`input-label-${props.size}`);
+  if (props.error) classes.push('input-label-error');
+  else if (props.success) classes.push('input-label-success');
+  
+  return classes.join(' ');
+});
+
+// Emit modelValue on input change
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+  emit('input', event);
+};
+
+// Forward focus and blur events
+const handleFocus = (event: FocusEvent) => emit('focus', event);
+const handleBlur = (event: FocusEvent) => emit('blur', event);
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <!-- Textarea field -->
+    <textarea
+      v-if="type === 'textarea'"
+      :id="id"
+      :name="name || id"
+      :rows="rows"
+      :required="required"
+      :class="inputClass"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    ></textarea>
+    
+    <!-- Input field -->
+    <input
+      v-else
+      :type="type"
+      :id="id"
+      :name="name || id"
+      :required="required"
+      :class="inputClass"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    />
+    
+    <!-- Label with guaranteed correct transform origin -->
+    <label
+      :for="id"
+      :class="labelClass"
+      style="transform-origin: top left;"
+    >
+      {{ label }}
+      <span v-if="required" class="text-red-500 ml-1">*</span>
+    </label>
+    
+    <!-- Error message -->
+    <div 
+      v-if="error && typeof error === 'string'" 
+      class="input-error-message"
+    >
+      {{ error }}
+    </div>
+    
+    <!-- Success message -->
+    <div 
+      v-if="success && typeof success === 'string'" 
+      class="input-success-message"
+    >
+      {{ success }}
+    </div>
+  </div>
+</template>

package/src/components/LeftSidebar.astro

@@ -1,53 +1,53 @@
----
-import { SIDEBAR } from "../config";
-import { Astronav, MenuItems } from "astro-navbar";
-const { currentPage } = Astro.props;
-const currentPageMatch = currentPage.slice(1);
-
-const isCurrentPage = (item) => {
-  if (item.link) {
-    return item.link.includes(currentPageMatch);
-  }
-  return false;
-};
-
-const getLinkClasses = (link) => {
-  const baseClasses =
-    "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
-
-  if (isCurrentPage(link)) {
-    return baseClasses + " border-slate-500 text-slate-900";
-  } else {
-    return baseClasses;
-  }
-};
----
-
-<Astronav>
-  <MenuItems
-    class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative bg-blue-lightest bg-opacity-5 flex)"
-  >
-    <ul class="mt-0 mb-auto">
-      {
-        SIDEBAR.map((item) =>
-          item.header ? (
-            <h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2>
-          ) : (
-            <li class={getLinkClasses(item)}>
-              <a href={item.link}>{item.text}</a>
-            </li>
-          ),
-        )
-      }
-    </ul>
-  </MenuItems>
-</Astronav>
-
-<script is:inline>
-  window.addEventListener("DOMContentLoaded", (event) => {
-    var target = document.querySelector('[aria-current="page"]');
-    if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
-    }
-  });
-</script>
+---
+import { SIDEBAR } from "../config";
+import { Astronav, MenuItems } from "astro-navbar";
+const { currentPage } = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+
+const isCurrentPage = (item) => {
+  if (item.link) {
+    return item.link.includes(currentPageMatch);
+  }
+  return false;
+};
+
+const getLinkClasses = (link) => {
+  const baseClasses =
+    "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
+
+  if (isCurrentPage(link)) {
+    return baseClasses + " border-slate-500 text-slate-900";
+  } else {
+    return baseClasses;
+  }
+};
+---
+
+<Astronav>
+  <MenuItems
+    class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative bg-blue-lightest bg-opacity-5 flex)"
+  >
+    <ul class="mt-0 mb-auto">
+      {
+        SIDEBAR.map((item) =>
+          item.header ? (
+            <h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2>
+          ) : (
+            <li class={getLinkClasses(item)}>
+              <a href={item.link}>{item.text}</a>
+            </li>
+          ),
+        )
+      }
+    </ul>
+  </MenuItems>
+</Astronav>
+
+<script is:inline>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    var target = document.querySelector('[aria-current="page"]');
+    if (target && target.offsetTop > window.innerHeight - 100) {
+      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
+    }
+  });
+</script>

package/src/components/MainColors.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { colors } from "./../../uno-config/theme/colors";
-
-// Get color categories
-const colorCategories = Object.entries(colors);
-</script>
-
-<template>
-  <div class="flex flex-col space-y-12">
-    <div v-for="[category, shades] in colorCategories" :key="category">
-      <h3 class="capitalize">{{ category }}</h3>
-      <div class="grid grid-cols-3 md:grid-cols-9">
-        <div v-for="(value, name) in shades" :key="name" class="mb-6">
-          <div class="h-12 transition-all" :style="`background: ${value}`"></div>
-          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
-            <span>{{ name }}</span>
-            <span class="uppercase text-xs">{{ value }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<script setup lang="ts">
+import { colors } from "./../../uno-config/theme/colors";
+
+// Get color categories
+const colorCategories = Object.entries(colors);
+</script>
+
+<template>
+  <div class="flex flex-col space-y-12">
+    <div v-for="[category, shades] in colorCategories" :key="category">
+      <h3 class="capitalize">{{ category }}</h3>
+      <div class="grid grid-cols-3 md:grid-cols-9">
+        <div v-for="(value, name) in shades" :key="name" class="mb-6">
+          <div class="h-12 transition-all" :style="`background: ${value}`"></div>
+          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
+            <span>{{ name }}</span>
+            <span class="uppercase text-xs">{{ value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

package/src/components/MainInput.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-const props = defineProps<{
-  label: string;
-}>();
-</script>
-
-<template>
-  <label class="group text-left w-full max-w-xs flex flex-col">
-    <span class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium">{{ label
-    }}</span>
-    <input
-      class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
-      type="text" />
-  </label>
-</template>
+<script setup lang="ts">
+const props = defineProps<{
+  label: string;
+}>();
+</script>
+
+<template>
+  <label class="group text-left w-full max-w-xs flex flex-col">
+    <span class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium">{{ label
+    }}</span>
+    <input
+      class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
+      type="text" />
+  </label>
+</template>

package/src/components/Modal.astro

@@ -1,27 +1,27 @@
----
-const { id, open } = Astro.props;
-import Button from "../components/Button.vue";
----
-
-<style >
-  dialog {
-    @apply fixed top-0 left-0 right-0 bottom-0;
-
-    &::backdrop {
-      @apply bg-slate-medium/50 fixed;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-    }
-  }
-</style>
-
-<Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
-
-<dialog id={id} class="p-6">
-  <slot name="main" />
-  <form method="dialog">
-    <slot name="close" />
-  </form>
-</dialog>
+---
+const { id, open } = Astro.props;
+import Button from "../components/Button.vue";
+---
+
+<style >
+  dialog {
+    @apply fixed top-0 left-0 right-0 bottom-0;
+
+    &::backdrop {
+      @apply bg-slate-medium/50 fixed;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
+  }
+</style>
+
+<Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
+
+<dialog id={id} class="p-6">
+  <slot name="main" />
+  <form method="dialog">
+    <slot name="close" />
+  </form>
+</dialog>

package/src/components/PageContent.astro

@@ -1,5 +1,5 @@
-<article id="article" class="content">
-  <section class="main-section">
-    <slot />
-  </section>
-</article>
+<article id="article" class="content">
+  <section class="main-section">
+    <slot />
+  </section>
+</article>

package/src/components/PartNumber.vue

@@ -1,28 +1,28 @@
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'div' | 'td' | 'span' | 'h1' | 'h2' | 'h3'>,
-    default: 'div',
-    required: true,
-  },
-  number: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  class: {
-    type: String,
-    default: '',
-    required: false,
-  },
-})
-
-</script>
-
-<template>
-  <component :is="props.as" :class="props.class">
-    {{ props.number }}
-  </component>
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'div' | 'td' | 'span' | 'h1' | 'h2' | 'h3'>,
+    default: 'div',
+    required: true,
+  },
+  number: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  class: {
+    type: String,
+    default: '',
+    required: false,
+  },
+})
+
+</script>
+
+<template>
+  <component :is="props.as" :class="props.class">
+    {{ props.number }}
+  </component>
 </template>