@astrake/lumora-ui 0.1.5 → 0.2.0

package/src/components/LuInput.vue

@@ -1,30 +1,82 @@
 <template>
+  <div class="relative w-full" v-if="$slots.prepend || $slots.append">
+    <div v-if="$slots.prepend" :class="prependSkin">
+      <slot name="prepend" />
+    </div>
+    <input
+      v-bind="$attrs"
+      :class="[resolvedSkin, $slots.prepend && 'pl-9', $slots.append && 'pr-9']"
+      :value="modelValue"
+      :name="name"
+      :disabled="formContext?.disabled.value"
+      @input="onInput"
+      @blur="onBlur"
+    />
+    <div v-if="$slots.append" :class="appendSkin">
+      <slot name="append" />
+    </div>
+  </div>
   <input
+    v-else
     v-bind="$attrs"
     :class="resolvedSkin"
     :value="modelValue"
+    :name="name"
+    :disabled="formContext?.disabled.value"
     @input="onInput"
+    @blur="onBlur"
   />
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, inject, onMounted, onUnmounted, ref } from "vue";
 import { useLumoraConfig } from "../context";
+import { LuFormContextKey } from "./LuForm.types";
 
 const props = defineProps<{
   modelValue?: string | number;
   variant?: string;
+  name?: string;
+  error?: string | null;
 }>();
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void;
+  (e: "blur"): void;
 }>();
 
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuInput", props.variant));
+const prependSkin = computed(() => resolveSkin("LuInputPrepend", props.variant));
+const appendSkin = computed(() => resolveSkin("LuInputAppend", props.variant));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<string | number | undefined>(props.modelValue);
+
 const onInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit("update:modelValue", target.value);
+  const value = (event.target as HTMLInputElement).value;
+  internalValue.value = value;
+  emit("update:modelValue", value);
 };
 
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuInput", props.variant));
+const onBlur = () => {
+  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
+    // trigger single-field validation — handled by parent LuForm
+  }
+  emit("blur");
+};
+
+onMounted(() => {
+  if (!props.name || !formContext) return;
+  formContext.register({
+    name: props.name,
+    getValue: () => internalValue.value,
+    setValue: (v) => { internalValue.value = v as string; },
+    setError: (_msg) => { /* error display handled via formContext.getError in template if desired */ },
+  });
+});
+
+onUnmounted(() => {
+  if (props.name && formContext) formContext.unregister(props.name);
+});
 </script>

package/src/components/LuMenu.vue

@@ -0,0 +1,86 @@
+<template>
+  <div :class="resolvedSkin" ref="dropdownRef">
+    <div @click="toggle" :class="resolvedTriggerSkin" aria-haspopup="true" :aria-expanded="isOpen">
+      <slot name="trigger">
+        <LuButton variant="default">Options <LuIcon name="chevron-down" class="ml-2 h-4 w-4" /></LuButton>
+      </slot>
+    </div>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div v-if="isOpen" :class="[resolvedContentSkin, alignClass]">
+        <div :class="resolvedGroupSkin" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+          <slot />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { useLumoraConfig } from "../context";
+import LuButton from "./LuButton.vue";
+import LuIcon from "./LuIcon.vue";
+
+const props = withDefaults(defineProps<{
+  variant?: string;
+  align?: 'left' | 'right';
+}>(), {
+  align: 'left'
+});
+
+const emit = defineEmits<{
+  (e: "open"): void;
+  (e: "close"): void;
+}>();
+
+const isOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuMenu", props.variant));
+const resolvedTriggerSkin = computed(() => resolveSkin("LuMenuTrigger", props.variant));
+const resolvedContentSkin = computed(() => resolveSkin("LuMenuContent", props.variant));
+const resolvedGroupSkin = computed(() => resolveSkin("LuMenuGroup", props.variant));
+
+const alignClass = computed(() => {
+  return props.align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left';
+});
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    emit("open");
+  } else {
+    emit("close");
+  }
+};
+
+const close = () => {
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit("close");
+  }
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    close();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>

package/src/components/LuMenuItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <button
+    type="button"
+    :class="resolvedSkin"
+    role="menuitem"
+    :disabled="disabled"
+    :data-disabled="disabled ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  variant?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuMenuItem", props.variant));
+
+const onClick = (event: MouseEvent) => {
+  if (props.disabled) {
+    event.preventDefault();
+    return;
+  }
+  emit("click", event);
+};
+</script>

package/src/components/LuModal.vue

@@ -0,0 +1,115 @@
+<template>
+  <Teleport to="body">
+    <transition
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="modelValue" :class="resolvedOverlaySkin" @click="handleOverlayClick" aria-modal="true" role="dialog" tabindex="-1">
+        <transition
+          enter-active-class="transition ease-out duration-200"
+          enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+          leave-active-class="transition ease-in duration-150"
+          leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          appear
+        >
+          <div v-if="modelValue" :class="resolvedSkin" @click.stop>
+            <div v-if="$slots.header || title" :class="resolvedHeaderSkin">
+              <slot name="header">
+                <LuText variant="section-title">{{ title }}</LuText>
+              </slot>
+              <button v-if="closable" type="button" :class="resolvedCloseButtonSkin" @click="close" aria-label="Close modal">
+                <LuIcon name="x" class="h-5 w-5" />
+              </button>
+            </div>
+            
+            <div :class="resolvedContentSkin">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" :class="resolvedFooterSkin">
+              <slot name="footer" />
+            </div>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useLumoraConfig } from "../context";
+import LuText from "./LuText.vue";
+import LuIcon from "./LuIcon.vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: boolean;
+  title?: string;
+  variant?: string;
+  closable?: boolean;
+  closeOnOverlayClick?: boolean;
+}>(), {
+  closable: true,
+  closeOnOverlayClick: true,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "close"): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedOverlaySkin = computed(() => resolveSkin("LuModalOverlay", props.variant));
+const resolvedSkin = computed(() => resolveSkin("LuModal", props.variant));
+const resolvedHeaderSkin = computed(() => resolveSkin("LuModalHeader", props.variant));
+const resolvedContentSkin = computed(() => resolveSkin("LuModalContent", props.variant));
+const resolvedFooterSkin = computed(() => resolveSkin("LuModalFooter", props.variant));
+const resolvedCloseButtonSkin = computed(() => resolveSkin("LuModalCloseButton", props.variant));
+
+const close = () => {
+  if (props.closable) {
+    emit("update:modelValue", false);
+    emit("close");
+  }
+};
+
+const handleOverlayClick = () => {
+  if (props.closeOnOverlayClick) {
+    close();
+  }
+};
+
+const handleEscKey = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.modelValue) {
+    close();
+  }
+};
+
+watch(() => props.modelValue, (isOpen) => {
+  if (typeof document !== 'undefined') {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+  }
+}, { immediate: true });
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscKey);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleEscKey);
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = '';
+  }
+});
+</script>

package/src/components/LuPagination.vue

@@ -0,0 +1,118 @@
+<template>
+  <nav aria-label="Pagination" :class="resolvedSkin">
+    <LuButton
+      variant="ghost"
+      :disabled="modelValue <= 1"
+      @click="prevPage"
+      :class="resolvedButtonSkin"
+      aria-label="Previous page"
+    >
+      <LuIcon name="chevron-left" class="h-4 w-4" />
+    </LuButton>
+
+    <div :class="resolvedPagesSkin">
+      <template v-for="page in pages" :key="page">
+        <span v-if="page === '...'" :class="resolvedEllipsisSkin">...</span>
+        <LuButton
+          v-else
+          :variant="page === modelValue ? 'primary' : 'ghost'"
+          @click="goToPage(page as number)"
+          :class="resolvedPageButtonSkin"
+          :aria-current="page === modelValue ? 'page' : undefined"
+        >
+          {{ page }}
+        </LuButton>
+      </template>
+    </div>
+
+    <LuButton
+      variant="ghost"
+      :disabled="modelValue >= totalPages"
+      @click="nextPage"
+      :class="resolvedButtonSkin"
+      aria-label="Next page"
+    >
+      <LuIcon name="chevron-right" class="h-4 w-4" />
+    </LuButton>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuButton from "./LuButton.vue";
+import LuIcon from "./LuIcon.vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: number;
+  total: number;
+  pageSize?: number;
+  siblingCount?: number;
+  variant?: string;
+}>(), {
+  pageSize: 10,
+  siblingCount: 1,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: number): void;
+  (e: "change", value: number): void;
+}>();
+
+const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
+
+const pages = computed(() => {
+  const current = props.modelValue;
+  const total = totalPages.value;
+  const siblings = props.siblingCount;
+
+  if (total <= 1) return [1];
+
+  const leftSiblingIndex = Math.max(current - siblings, 1);
+  const rightSiblingIndex = Math.min(current + siblings, total);
+
+  const showLeftEllipsis = leftSiblingIndex > 2;
+  const showRightEllipsis = rightSiblingIndex < total - 1;
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftItemCount = 3 + 2 * siblings;
+    const leftRange = Array.from({ length: Math.min(leftItemCount, total) }, (_, i) => i + 1);
+    return [...leftRange, '...', total];
+  }
+
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightItemCount = 3 + 2 * siblings;
+    const rightRange = Array.from({ length: Math.min(rightItemCount, total) }, (_, i) => total - rightItemCount + i + 1);
+    return [1, '...', ...rightRange];
+  }
+
+  if (showLeftEllipsis && showRightEllipsis) {
+    const middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);
+    return [1, '...', ...middleRange, '...', total];
+  }
+
+  return Array.from({ length: total }, (_, i) => i + 1);
+});
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuPagination", props.variant));
+const resolvedButtonSkin = computed(() => resolveSkin("LuPaginationButton", props.variant));
+const resolvedPagesSkin = computed(() => resolveSkin("LuPaginationPages", props.variant));
+const resolvedPageButtonSkin = computed(() => resolveSkin("LuPaginationPageButton", props.variant));
+const resolvedEllipsisSkin = computed(() => resolveSkin("LuPaginationEllipsis", props.variant));
+
+const goToPage = (page: number) => {
+  if (page === props.modelValue) return;
+  emit("update:modelValue", page);
+  emit("change", page);
+};
+
+const prevPage = () => {
+  if (props.modelValue > 1) goToPage(props.modelValue - 1);
+};
+
+const nextPage = () => {
+  if (props.modelValue < totalPages.value) goToPage(props.modelValue + 1);
+};
+</script>

package/src/components/LuRadio.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :class="resolvedContainerSkin">
+    <input
+      type="radio"
+      v-bind="$attrs"
+      :class="resolvedSkin"
+      :name="radioGroup?.name"
+      :value="value"
+      :checked="isChecked"
+      :disabled="radioGroup?.disabled.value || disabled"
+      @change="onChange"
+    />
+    <label v-if="$slots.default || label" :class="resolvedLabelSkin" @click.prevent="onClick">
+      <slot>{{ label }}</slot>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { useLumoraConfig } from "../context";
+import { LuRadioGroupContextKey } from "./LuRadioGroup.types";
+
+const props = defineProps<{
+  value: string | number;
+  variant?: string;
+  label?: string;
+  disabled?: boolean;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedContainerSkin = computed(() => resolveSkin("LuRadioContainer", props.variant));
+const resolvedSkin = computed(() => resolveSkin("LuRadio", props.variant));
+const resolvedLabelSkin = computed(() => resolveSkin("LuRadioLabel", props.variant));
+
+const radioGroup = inject(LuRadioGroupContextKey, null);
+
+if (!radioGroup) {
+  console.warn("LuRadio must be used within a LuRadioGroup");
+}
+
+const isChecked = computed(() => {
+  return radioGroup?.modelValue.value === props.value;
+});
+
+const onChange = () => {
+  if (props.disabled || radioGroup?.disabled.value) return;
+  radioGroup?.updateValue(props.value);
+};
+
+const onClick = () => {
+  if (props.disabled || radioGroup?.disabled.value) return;
+  radioGroup?.updateValue(props.value);
+};
+</script>

package/src/components/LuRadioGroup.types.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export interface LuRadioGroupContext {
+  name: string;
+  modelValue: Ref<string | number | undefined>;
+  updateValue: (value: string | number) => void;
+  disabled: Ref<boolean>;
+}
+
+export const LuRadioGroupContextKey: InjectionKey<LuRadioGroupContext> = Symbol('LuRadioGroupContext');

package/src/components/LuRadioGroup.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="resolvedSkin" role="radiogroup" :aria-disabled="disabled || formContext?.disabled.value">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { useLumoraConfig } from "../context";
+import { LuFormContextKey } from "./LuForm.types";
+import { LuRadioGroupContextKey } from "./LuRadioGroup.types";
+
+const props = defineProps<{
+  modelValue?: string | number;
+  name: string;
+  variant?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void;
+  (e: "change", value: string | number): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuRadioGroup", props.variant));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<string | number | undefined>(props.modelValue);
+
+watch(() => props.modelValue, (newVal) => {
+  internalValue.value = newVal;
+});
+
+const updateValue = (value: string | number) => {
+  if (props.disabled || formContext?.disabled.value) return;
+  internalValue.value = value;
+  emit("update:modelValue", value);
+  emit("change", value);
+  
+  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
+    // validation
+  }
+};
+
+provide(LuRadioGroupContextKey, {
+  name: props.name,
+  modelValue: computed(() => internalValue.value),
+  updateValue,
+  disabled: computed(() => !!props.disabled || !!formContext?.disabled.value)
+});
+
+onMounted(() => {
+  if (!props.name || !formContext) return;
+  formContext.register({
+    name: props.name,
+    getValue: () => internalValue.value,
+    setValue: (v) => { internalValue.value = v as string | number; },
+    setError: (_msg) => {},
+  });
+});
+
+onUnmounted(() => {
+  if (props.name && formContext) formContext.unregister(props.name);
+});
+</script>

package/src/components/LuSelect.vue

@@ -3,7 +3,10 @@
     v-bind="$attrs"
     :class="resolvedSkin"
     :value="modelValue"
+    :name="name"
+    :disabled="formContext?.disabled.value"
     @change="onChange"
+    @blur="onBlur"
   >
     <option v-for="opt in options" :key="opt.value" :value="opt.value">
       {{ opt.label }}
@@ -12,24 +15,53 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, inject, onMounted, onUnmounted, ref } from "vue";
 import { useLumoraConfig } from "../context";
+import { LuFormContextKey } from "./LuForm.types";
 
 const props = defineProps<{
   modelValue?: string | number;
   variant?: string;
   options: Array<{ value: string | number; label: string }>;
+  name?: string;
+  error?: string | null;
 }>();
 
 const emit = defineEmits<{
-  (e: "update:modelValue", value: string): void;
+  (e: "update:modelValue", value: string | number): void;
+  (e: "blur"): void;
 }>();
 
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuSelect", props.variant));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<string | number | undefined>(props.modelValue);
+
 const onChange = (event: Event) => {
-  const target = event.target as HTMLSelectElement;
-  emit("update:modelValue", target.value);
+  const value = (event.target as HTMLSelectElement).value;
+  internalValue.value = value;
+  emit("update:modelValue", value);
 };
 
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuSelect", props.variant));
+const onBlur = () => {
+  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
+    // trigger single-field validation — handled by parent LuForm
+  }
+  emit("blur");
+};
+
+onMounted(() => {
+  if (!props.name || !formContext) return;
+  formContext.register({
+    name: props.name,
+    getValue: () => internalValue.value,
+    setValue: (v) => { internalValue.value = v as string | number; },
+    setError: (_msg) => { /* error display handled via formContext.getError in template if desired */ },
+  });
+});
+
+onUnmounted(() => {
+  if (props.name && formContext) formContext.unregister(props.name);
+});
 </script>

package/src/components/LuSkeleton.vue

@@ -0,0 +1,15 @@
+<template>
+  <div :class="resolvedSkin" aria-hidden="true" />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  variant?: string;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuSkeleton", props.variant));
+</script>