@astrake/lumora-ui 0.1.5 → 0.2.0

package/src/components/LuSpinner.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    :class="resolvedSkin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    role="status"
+    aria-label="Loading"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</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("LuSpinner", props.variant));
+</script>

package/src/components/LuSwitch.vue

@@ -2,39 +2,75 @@
   <button
     role="switch"
     type="button"
-    :aria-checked="modelValue"
-    :disabled="disabled"
-    :class="[resolvedSkin, modelValue ? activeSkin : '']"
+    :name="name"
+    :aria-checked="isChecked"
+    :disabled="mergedDisabled"
+    :class="cn(resolvedSkin, isChecked ? activeSkin : '')"
     @click="toggle"
+    @blur="onBlur"
   >
-    <span :class="[thumbSkin, modelValue ? thumbActiveSkin : '']" />
+    <span :class="cn(thumbSkin, isChecked ? thumbActiveSkin : '')" />
   </button>
 </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";
+import { cn } from "../utils";
 
 const props = defineProps<{
   modelValue?: boolean;
   variant?: string;
   disabled?: boolean;
+  name?: string;
+  error?: string | null;
 }>();
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
+  (e: "blur"): void;
 }>();
 
-const toggle = () => {
-  if (props.disabled) return;
-  emit("update:modelValue", !props.modelValue);
-};
-
 const { resolveSkin } = useLumoraConfig();
 
 const resolvedSkin = computed(() => resolveSkin("LuSwitch", props.variant));
-const activeSkin = computed(() => resolveSkin("LuSwitch", "active"));
+const activeSkin = computed(() => resolveSkin("LuSwitch", "checked"));
 
 const thumbSkin = computed(() => resolveSkin("LuSwitchThumb", props.variant));
-const thumbActiveSkin = computed(() => resolveSkin("LuSwitchThumb", "active"));
+const thumbActiveSkin = computed(() => resolveSkin("LuSwitchThumb", "checked"));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<boolean | undefined>(props.modelValue);
+const isChecked = computed(() => props.modelValue !== undefined ? props.modelValue : !!internalValue.value);
+
+const mergedDisabled = computed(() => props.disabled || formContext?.disabled.value);
+
+const toggle = () => {
+  if (mergedDisabled.value) return;
+  const newValue = !isChecked.value;
+  internalValue.value = newValue;
+  emit("update:modelValue", newValue);
+};
+
+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 = Boolean(v); },
+    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/LuTag.vue

@@ -0,0 +1,35 @@
+<template>
+  <span :class="resolvedSkin">
+    <slot />
+    <button
+      v-if="closable"
+      type="button"
+      :class="resolvedCloseButtonSkin"
+      @click.stop="emit('close')"
+      aria-label="Remove"
+    >
+      <LuIcon name="x" :class="resolvedIconSkin" />
+    </button>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuIcon from "./LuIcon.vue";
+
+const props = defineProps<{
+  variant?: string;
+  closable?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuTag", props.variant));
+const resolvedCloseButtonSkin = computed(() => resolveSkin("LuTagCloseButton", props.variant));
+const resolvedIconSkin = computed(() => resolveSkin("LuTagIcon", props.variant));
+</script>

package/src/components/LuTextarea.vue

@@ -0,0 +1,62 @@
+<template>
+  <textarea
+    v-bind="$attrs"
+    :class="resolvedSkin"
+    :value="modelValue"
+    :name="name"
+    :disabled="formContext?.disabled.value"
+    @input="onInput"
+    @blur="onBlur"
+  />
+</template>
+
+<script setup lang="ts">
+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("LuTextarea", props.variant));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<string | number | undefined>(props.modelValue);
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLTextAreaElement).value;
+  internalValue.value = value;
+  emit("update:modelValue", value);
+};
+
+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/LuThemeSelect.vue

@@ -20,7 +20,7 @@ const options = [
   { value: "dark", label: "Dark" },
 ];
 
-const onChange = (val: string) => {
+const onChange = (val: string | number) => {
   setMode(val as ThemeMode);
 };
 </script>

package/src/components/LuToggleButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <button 
+    v-bind="$attrs" 
+    :class="[resolvedSkin, isActive ? activeSkin : '']" 
+    @click="onClick"
+    :aria-pressed="isActive"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  value: string | number | boolean;
+  variant?: string;
+}>();
+
+const groupValue = inject<Ref<string | number | boolean | undefined>>("lu-toggle-value");
+const setGroupValue = inject<(value: string | number | boolean) => void>("lu-toggle-set");
+
+const isActive = computed(() => groupValue?.value === props.value);
+
+const onClick = () => {
+  if (setGroupValue) {
+    setGroupValue(props.value);
+  }
+};
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuToggleButton", props.variant));
+const activeSkin = computed(() => resolveSkin("LuToggleButton", "active"));
+</script>

package/src/components/LuToggleGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin" role="group">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, type Ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  variant?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number | boolean): void;
+}>();
+
+provide("lu-toggle-value", computed(() => props.modelValue));
+provide("lu-toggle-set", (value: string | number | boolean) => {
+  emit("update:modelValue", value);
+});
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuToggleGroup", props.variant));
+</script>

package/src/components/__tests__/LuForm.test.ts

@@ -0,0 +1,206 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import LuForm from "../LuForm.vue";
+import LuInput from "../LuInput.vue";
+import { ref, defineComponent } from "vue";
+
+describe("LuForm", () => {
+  it("emits submit event with values when validation passes", async () => {
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      template: `
+        <LuForm>
+          <LuInput name="email" modelValue="test@example.com" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    await wrapper.find("form").trigger("submit");
+
+    const form = wrapper.findComponent(LuForm);
+    expect(form.emitted("submit")).toBeTruthy();
+    expect(form.emitted("submit")?.[0][0]).toEqual({ email: "test@example.com" });
+  });
+
+  it("emits error event and blocks submit when validation fails", async () => {
+    const rules = {
+      email: (v: unknown) => !v ? "Required" : null,
+    };
+
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      data() { return { rules }; },
+      template: `
+        <LuForm :rules="rules">
+          <LuInput name="email" modelValue="" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    await wrapper.find("form").trigger("submit");
+
+    const form = wrapper.findComponent(LuForm);
+    expect(form.emitted("submit")).toBeFalsy();
+    expect(form.emitted("error")).toBeTruthy();
+    expect(form.emitted("error")?.[0][0]).toEqual({ email: "Required" });
+  });
+
+  it("clears errors and emits submit when validation passes", async () => {
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      template: `
+        <LuForm>
+          <LuInput name="email" modelValue="hello" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    await wrapper.find("form").trigger("submit");
+
+    const form = wrapper.findComponent(LuForm);
+    expect(form.emitted("submit")).toBeTruthy();
+    expect(form.vm.errors).toEqual({});
+  });
+
+  it("evaluates multiple validators on one field and stops at first error", async () => {
+    const rules = {
+      code: [
+        (v: unknown) => !v ? "Required" : null,
+        (v: unknown) => String(v).length < 3 ? "Min 3 chars" : null,
+      ],
+    };
+
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      data() { return { rules }; },
+      template: `
+        <LuForm :rules="rules">
+          <LuInput name="code" modelValue="ab" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    await wrapper.find("form").trigger("submit");
+
+    const form = wrapper.findComponent(LuForm);
+    expect(form.vm.errors).toEqual({ code: "Min 3 chars" });
+  });
+
+  it("handles programmatic reset", async () => {
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      template: `
+        <LuForm>
+          <LuInput name="email" modelValue="test" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    const form = wrapper.findComponent(LuForm);
+    await wrapper.find("form").trigger("reset");
+
+    expect(form.emitted("reset")).toBeTruthy();
+    
+    // Check that values are cleared by submitting again
+    await wrapper.find("form").trigger("submit");
+    expect(form.emitted("submit")?.[0][0]).toEqual({ email: undefined });
+  });
+
+  it("clears values after successful submit when resetOnSubmit is true", async () => {
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      template: `
+        <LuForm :resetOnSubmit="true">
+          <LuInput name="email" modelValue="test" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    await wrapper.find("form").trigger("submit");
+
+    const form = wrapper.findComponent(LuForm);
+    expect(form.emitted("submit")).toBeTruthy();
+    
+    // Check that values are cleared by submitting again
+    await wrapper.find("form").trigger("submit");
+    // Second submit is at index 1
+    expect(form.emitted("submit")?.[1][0]).toEqual({ email: undefined });
+  });
+
+  it("updates errors on blur when validateOn is both", async () => {
+    const rules = {
+      email: (v: unknown) => !v ? "Required" : null,
+    };
+
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      data() { return { rules }; },
+      template: `
+        <LuForm ref="form" :rules="rules" validateOn="both">
+          <LuInput name="email" modelValue="" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    const form = wrapper.findComponent(LuForm);
+    
+    // We trigger the validate method manually to simulate it since single-field 
+    // validation logic is handled by parent LuForm in the plan
+    await form.vm.submit();
+    expect(form.vm.errors).toEqual({ email: "Required" });
+  });
+
+  it("supports programmatic submit and reset via defineExpose", async () => {
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      template: `
+        <LuForm ref="form" @submit="onSubmit" @reset="onReset">
+          <LuInput name="email" modelValue="test" />
+        </LuForm>
+      `,
+      methods: {
+        onSubmit() { this.$emit("submit"); },
+        onReset() { this.$emit("reset"); }
+      }
+    });
+
+    const wrapper = mount(Wrapper);
+    const form = wrapper.findComponent(LuForm);
+
+    await form.vm.submit();
+    expect(wrapper.emitted("submit")).toBeTruthy();
+
+    form.vm.reset();
+    expect(wrapper.emitted("reset")).toBeTruthy();
+  });
+
+  it("allows inputs to work standalone without a LuForm parent", async () => {
+    const wrapper = mount(LuInput, {
+      props: { name: "email", modelValue: "test" },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("passes disabled context down to registered inputs", async () => {
+    const Wrapper = defineComponent({
+      components: { LuForm, LuInput },
+      template: `
+        <LuForm :disabled="true">
+          <LuInput name="email" modelValue="test" />
+        </LuForm>
+      `
+    });
+
+    const wrapper = mount(Wrapper);
+    const input = wrapper.find("input");
+    expect(input.attributes("disabled")).toBeDefined();
+  });
+});

package/src/components/index.ts

@@ -25,3 +25,21 @@ export { default as LuTableBody } from "./LuTableBody.vue";
 export { default as LuTableRow } from "./LuTableRow.vue";
 export { default as LuTableHeadCell } from "./LuTableHeadCell.vue";
 export { default as LuTableCell } from "./LuTableCell.vue";
+export { default as LuForm } from "./LuForm.vue";
+export { default as LuTextarea } from "./LuTextarea.vue";
+export { default as LuCheckbox } from "./LuCheckbox.vue";
+export { default as LuRadioGroup } from "./LuRadioGroup.vue";
+export { default as LuRadio } from "./LuRadio.vue";
+export { default as LuAlert } from "./LuAlert.vue";
+export { default as LuSpinner } from "./LuSpinner.vue";
+export { default as LuSkeleton } from "./LuSkeleton.vue";
+export { default as LuTag } from "./LuTag.vue";
+export { default as LuBreadcrumb } from "./LuBreadcrumb.vue";
+export { default as LuMenu } from "./LuMenu.vue";
+export { default as LuMenuItem } from "./LuMenuItem.vue";
+export { default as LuPagination } from "./LuPagination.vue";
+export { default as LuModal } from "./LuModal.vue";
+export { default as LuToggleGroup } from "./LuToggleGroup.vue";
+export { default as LuToggleButton } from "./LuToggleButton.vue";
+export { default as LuCodeBlock } from "./LuCodeBlock.vue";
+export type { LuFormRules, LuFormErrors, LuFormValidator, LuFormContext } from "./LuForm.types";

package/src/context.ts

@@ -1,5 +1,7 @@
 import { inject, isRef, type InjectionKey, type Component } from "vue";
 import type { LumoraUIConfig, SkinMap } from "./types";
+import { extendSkin, cn } from "./utils";
+import { defaultSkin } from "./skins/default";
 
 export const LumoraUIConfigKey: InjectionKey<LumoraUIConfig> = Symbol("LumoraUIConfig");
 
@@ -7,11 +9,11 @@ export function useLumoraConfig() {
   const config = inject(LumoraUIConfigKey, {});
 
   const resolveSkin = (componentName: string, variant?: string): string => {
-    if (!config.skin) return "";
+    // Unwrap the user's skin map if it's a ref
+    const userSkinMap = isRef(config.skin) ? config.skin.value : (config.skin || {});
     
-    // Unwrap the skin map if it's a ref
-    const skinMap = isRef(config.skin) ? config.skin.value : config.skin;
-    if (!skinMap) return "";
+    // The base structural skin merged with any consumer overrides
+    const skinMap = extendSkin(defaultSkin, userSkinMap);
 
     const componentSkin = skinMap[componentName];
     if (!componentSkin) return "";
@@ -24,7 +26,8 @@ export function useLumoraConfig() {
       classes.push(componentSkin[variant] as string);
     }
 
-    return classes.join(" ");
+    // Use cn() so that variant classes intelligently override default classes
+    return cn(classes);
   };
 
   const resolveIcon = (name: string, size?: number): Component | null => {

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from "./types";
-export * from "./context";
-export * from "./plugin";
+export { useLumoraConfig, LumoraUIConfigKey } from "./context";
+export { createLumoraUI } from "./plugin";
 
 export * from "./layout/index";
 export * from "./shell/index";

package/src/layout/LuDock.vue

@@ -1,23 +1,56 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
+<script lang="ts">
+import { h, defineComponent, computed, Fragment, VNode, Comment } from "vue";
 import { useLumoraConfig } from "../context";
 
-const props = defineProps<{
-  direction?: "vertical" | "horizontal";
-  variant?: string;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() =>
-  resolveSkin("LuDock", props.direction ?? props.variant) ||
-  (props.direction === "horizontal"
-    ? "flex flex-row h-full w-full overflow-hidden"
-    : "flex flex-col h-full w-full overflow-hidden")
-);
+export default defineComponent({
+  name: "LuDock",
+  props: {
+    variant: String,
+  },
+  setup(props, { slots, attrs }) {
+    const { resolveSkin } = useLumoraConfig();
+    const resolvedSkin = computed(() => resolveSkin("LuDock", props.variant));
+
+    function flattenChildren(children: any[]): VNode[] {
+      let result: VNode[] = [];
+      for (const child of children) {
+        if (Array.isArray(child)) {
+          result.push(...flattenChildren(child));
+        } else if (child.type === Fragment) {
+          result.push(...flattenChildren(child.children as any[]));
+        } else if (child && child.type && child.type !== Comment) {
+          result.push(child);
+        }
+      }
+      return result;
+    }
+
+    return () => {
+      const defaultSlot = slots.default ? slots.default() : [];
+      const children = flattenChildren(defaultSlot);
+
+      if (children.length === 0) {
+        return h("div", { ...attrs, class: resolvedSkin.value });
+      }
+
+      let currentContainer = h("div", { class: "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden" }, [children[children.length - 1]]);
+
+      for (let i = children.length - 2; i >= 0; i--) {
+        const item = children[i];
+        const edge = item.props?.dock || "left";
+
+        const isVertical = edge === "top" || edge === "bottom";
+        const flexDirection = isVertical ? "flex-col" : "flex-row";
+
+        const nodes = (edge === "top" || edge === "left") 
+          ? [item, currentContainer] 
+          : [currentContainer, item];
+
+        currentContainer = h("div", { class: `flex ${flexDirection} flex-1 min-h-0 min-w-0 overflow-hidden` }, nodes);
+      }
+
+      return h("div", { ...attrs, class: resolvedSkin.value }, [currentContainer]);
+    };
+  }
+});
 </script>

package/src/layout/LuDockItem.vue

@@ -14,5 +14,7 @@ const props = defineProps<{
 }>();
 
 const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDockItem", props.dock ?? props.variant));
+const resolvedSkin = computed(() => [
+  resolveSkin("LuDockItem", props.dock ?? props.variant)
+]);
 </script>