spoko-design-system 1.1.0 → 1.1.2

package/src/components/Headline.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import type { PropType } from 'vue';
 
 const props = defineProps({
   as: {
@@ -8,61 +8,78 @@ const props = defineProps({
     required: true,
   },
   textSize: {
-    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+    type: String as PropType<
+      | 'xs'
+      | 'sm'
+      | 'base'
+      | 'lg'
+      | 'xl'
+      | '2xl'
+      | '3xl'
+      | '4xl'
+      | '5xl'
+      | '6xl'
+      | '7xl'
+      | '8xl'
+      | '9xl'
+    >,
     required: false,
-    default: null
+    default: null,
   },
   fontFamily: {
     type: String as PropType<'head' | 'text' | 'novamono' | 'mono'>,
     required: false,
-    default: 'head'
+    default: 'head',
   },
   fontWeight: {
     type: String as PropType<'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin'>,
     required: false,
-    default: 'regular'
+    default: 'regular',
   },
   underline: {
     type: [Boolean, String] as PropType<boolean | 'center'>,
     required: false,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 
 // Generate the typography class based on font family and weight
 const getTypographyClass = (): string => {
-  const family = props.fontFamily
-  const weight = props.fontWeight
-  
+  const family = props.fontFamily;
+  const weight = props.fontWeight;
+
   // Handle special cases for mono fonts
   if (family === 'novamono' || family === 'mono') {
-    return `font-${family}`
+    return `font-${family}`;
   }
-  
+
   // For head family, generate specific classes
   if (family === 'head') {
-    if (weight === 'light') return 'headline-light'
-    if (weight === 'bold') return 'headline-bold'
-    if (weight === 'light-bold') return 'headline-light-bold'
-    if (weight === 'light-thin') return 'headline-light-thin'
-    return 'headline' // for regular weight
+    if (weight === 'light') return 'headline-light';
+    if (weight === 'bold') return 'headline-bold';
+    if (weight === 'light-bold') return 'headline-light-bold';
+    if (weight === 'light-thin') return 'headline-light-thin';
+    return 'headline'; // for regular weight
   }
-  
+
   // For text family, generate appropriate class
   if (family === 'text') {
-    return `font-text${weight}`
+    return `font-text${weight}`;
   }
-  
+
   // Default fallback
-  return 'headline'
-}
+  return 'headline';
+};
 
-const typographyClass = getTypographyClass()
+const typographyClass = getTypographyClass();
 </script>
 
 <template>
-  <component :is="props.as" class="mb-2.5 leading-none"
-    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline === true ? 'headline--underline' : ''} ${props.underline === 'center' ? 'headline--underline-center block text-center' : 'flex sm:block md:flex items-center'}`">
+  <component
+    :is="props.as"
+    class="mb-2.5 leading-none"
+    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline === true ? 'headline--underline' : ''} ${props.underline === 'center' ? 'headline--underline-center block text-center' : 'flex sm:block md:flex items-center'}`"
+  >
     <slot />
   </component>
 </template>
@@ -105,4 +122,4 @@ const typographyClass = getTypographyClass()
     left: calc(50% - min(47.5%, 127.5px));
   }
 }
-</style>
+</style>

package/src/components/Image.astro

@@ -1,16 +1,16 @@
 ---
-import { Image } from "astro:assets";
+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";
+  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
+  inputProps['loading'] = 'eager';
 }
 
 if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps["widths"] = imageObject.srcset;
+  inputProps['widths'] = imageObject.srcset;
 }
 ---
 
@@ -23,8 +23,6 @@ if (imageObject.srcset && imageObject.srcset.length) {
   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"
-  }`}
+  class={`h-full w-full select-none pointer-none ${imageObject.class || 'object-cover'}`}
   {...inputProps}
 />

package/src/components/Input.vue

@@ -1,153 +1,143 @@
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue';
-
-interface InputProps {
-  id?: string;
-  name?: string;
-  label: string;
-  variant?: 'filled' | 'standard';
-  type?: string;
-  modelValue?: string | number;
-  required?: boolean;
-  rows?: number;
-  placeholder?: string;
-  error?: string | boolean;
-  success?: string | boolean;
-  size?: 'sm' | 'md' | 'lg';
-  class?: string;
-  [key: string]: any;
-}
-
-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 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 - uses existing shortcut
-const wrapperClass = computed(() => `input-wrapper-${props.variant}`);
-
-// Compute input classes - uses shortcuts
-const inputClass = computed(() => {
-  const classes = ['input-base', 'input-placeholder', `input-${props.variant}`];
-  
-  // Add size class
-  if (props.size) classes.push(`input-${props.size}`);
-  
-  // Add textarea class if needed
-  if (props.type === 'textarea') classes.push('input-textarea');
-  
-  // Add status classes
-  if (props.error) classes.push('input-error');
-  else if (props.success) classes.push('input-success');
-  
-  // Add custom classes
-  if (props.class) classes.push(props.class);
-  
-  return classes.join(' ');
-});
-
-// Compute label classes - using optimized shortcuts
-const labelClass = computed(() => {
-  const classes = [
-    // Base label style
-    'input-label-base', 
-    
-    // Position styling
-    `input-label-${props.variant}`, 
-    
-    // State styling - contains all transformations for the specific variant
-    `input-label-${props.variant}-state`
-  ];
-  
-  // Add size class
-  if (props.size) classes.push(`input-label-${props.size}`);
-  
-  // Add status classes
-  if (props.error) classes.push('input-label-error');
-  else if (props.success) classes.push('input-label-success');
-  
-  return classes.join(' ');
-});
-
-// Event handlers
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
-  emit('update:modelValue', target.value);
-  emit('input', event);
-};
-
-const handleFocus = (event: FocusEvent) => emit('focus', event);
-const handleBlur = (event: FocusEvent) => emit('blur', event);
-</script>
-
-<template>
-  <div :class="wrapperClass">
-    <textarea
-      v-if="type === 'textarea'"
-      :id="id"
-      :name="name || id"
-      :rows="rows"
-      :required="required"
-      :class="inputClass + ' peer'"
-      :placeholder="placeholder"
-      :value="modelValue"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      v-bind="attrs"
-    ></textarea>
-    
-    <input
-      v-else
-      :type="type"
-      :id="id"
-      :name="name || id"
-      :required="required"
-      :class="inputClass + ' peer'"
-      :placeholder="placeholder"
-      :value="modelValue"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      v-bind="attrs"
-    />
-    
-    <label
-      :for="id"
-      :class="labelClass"
-      style="transform-origin: top left;"
-    >
-      {{ label }}
-      <span v-if="required" class="text-red-500 ml-1">*</span>
-    </label>
-    
-    <div 
-      v-if="error && typeof error === 'string'" 
-      class="input-error-message"
-    >
-      {{ error }}
-    </div>
-    
-    <div 
-      v-if="success && typeof success === 'string'" 
-      class="input-success-message"
-    >
-      {{ success }}
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+interface InputProps {
+  id?: string;
+  name?: string;
+  label: string;
+  variant?: 'filled' | 'standard';
+  type?: string;
+  modelValue?: string | number;
+  required?: boolean;
+  rows?: number;
+  placeholder?: string;
+  error?: string | boolean;
+  success?: string | boolean;
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+  [key: string]: any;
+}
+
+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 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 - uses existing shortcut
+const wrapperClass = computed(() => `input-wrapper-${props.variant}`);
+
+// Compute input classes - uses shortcuts
+const inputClass = computed(() => {
+  const classes = ['input-base', 'input-placeholder', `input-${props.variant}`];
+
+  // Add size class
+  if (props.size) classes.push(`input-${props.size}`);
+
+  // Add textarea class if needed
+  if (props.type === 'textarea') classes.push('input-textarea');
+
+  // Add status classes
+  if (props.error) classes.push('input-error');
+  else if (props.success) classes.push('input-success');
+
+  // Add custom classes
+  if (props.class) classes.push(props.class);
+
+  return classes.join(' ');
+});
+
+// Compute label classes - using optimized shortcuts
+const labelClass = computed(() => {
+  const classes = [
+    // Base label style
+    'input-label-base',
+
+    // Position styling
+    `input-label-${props.variant}`,
+
+    // State styling - contains all transformations for the specific variant
+    `input-label-${props.variant}-state`,
+  ];
+
+  // Add size class
+  if (props.size) classes.push(`input-label-${props.size}`);
+
+  // Add status classes
+  if (props.error) classes.push('input-label-error');
+  else if (props.success) classes.push('input-label-success');
+
+  return classes.join(' ');
+});
+
+// Event handlers
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+  emit('input', event);
+};
+
+const handleFocus = (event: FocusEvent) => emit('focus', event);
+const handleBlur = (event: FocusEvent) => emit('blur', event);
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <textarea
+      v-if="type === 'textarea'"
+      :id="id"
+      :name="name || id"
+      :rows="rows"
+      :required="required"
+      :class="inputClass + ' peer'"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    ></textarea>
+
+    <input
+      v-else
+      :type="type"
+      :id="id"
+      :name="name || id"
+      :required="required"
+      :class="inputClass + ' peer'"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    />
+
+    <label :for="id" :class="labelClass" style="transform-origin: top left">
+      {{ label }}
+      <span v-if="required" class="text-red-500 ml-1">*</span>
+    </label>
+
+    <div v-if="error && typeof error === 'string'" class="input-error-message">
+      {{ error }}
+    </div>
+
+    <div v-if="success && typeof success === 'string'" class="input-success-message">
+      {{ success }}
+    </div>
+  </div>
+</template>