@astrake/lumora-ui 0.1.6 → 0.2.1

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

@@ -1,206 +0,0 @@
-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/composables/useRail.ts

@@ -1,24 +0,0 @@
-import { ref, readonly } from "vue";
-
-export function useRail(defaultExpanded = false) {
-  const isExpanded = ref(defaultExpanded);
-
-  function toggle() {
-    isExpanded.value = !isExpanded.value;
-  }
-
-  function expand() {
-    isExpanded.value = true;
-  }
-
-  function collapse() {
-    isExpanded.value = false;
-  }
-
-  return {
-    isExpanded: readonly(isExpanded),
-    toggle,
-    expand,
-    collapse,
-  };
-}

package/src/composables/useSplit.ts

@@ -1,17 +0,0 @@
-import { ref, type Ref } from "vue";
-
-export function useSplit(
-  containerRef: Ref<HTMLElement | null>,
-  direction: "horizontal" | "vertical" = "horizontal",
-  onResize?: (sizes: number[]) => void
-) {
-  const isDragging = ref(false);
-
-  // Simplified split drag logic hook.
-  // In a real implementation, this would attach mousedown to resizers,
-  // and mousemove/mouseup to the window, updating the size of adjacent panes.
-  
-  return {
-    isDragging,
-  };
-}

package/src/composables/useTheme.ts

@@ -1,36 +0,0 @@
-import { ref, computed, watchEffect } from "vue";
-
-export type ThemeMode = "system" | "light" | "dark";
-export type ResolvedTheme = "light" | "dark";
-
-// Global state for the theme
-const mode = ref<ThemeMode>("system");
-const systemPrefersDark = ref(false);
-
-// Update system preference when window matches change
-if (typeof window !== "undefined") {
-  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-  systemPrefersDark.value = mediaQuery.matches;
-  mediaQuery.addEventListener("change", (e) => {
-    systemPrefersDark.value = e.matches;
-  });
-}
-
-const resolved = computed<ResolvedTheme>(() => {
-  if (mode.value === "system") {
-    return systemPrefersDark.value ? "dark" : "light";
-  }
-  return mode.value;
-});
-
-export function useTheme() {
-  const setMode = (newMode: ThemeMode) => {
-    mode.value = newMode;
-  };
-
-  return {
-    mode,
-    resolved,
-    setMode,
-  };
-}

package/src/context.ts

@@ -1,36 +0,0 @@
-import { inject, isRef, type InjectionKey, type Component } from "vue";
-import type { LumoraUIConfig, SkinMap } from "./types";
-
-export const LumoraUIConfigKey: InjectionKey<LumoraUIConfig> = Symbol("LumoraUIConfig");
-
-export function useLumoraConfig() {
-  const config = inject(LumoraUIConfigKey, {});
-
-  const resolveSkin = (componentName: string, variant?: string): string => {
-    if (!config.skin) return "";
-    
-    // Unwrap the skin map if it's a ref
-    const skinMap = isRef(config.skin) ? config.skin.value : config.skin;
-    if (!skinMap) return "";
-
-    const componentSkin = skinMap[componentName];
-    if (!componentSkin) return "";
-
-    const classes: string[] = [];
-    if (componentSkin.default) {
-      classes.push(componentSkin.default);
-    }
-    if (variant && componentSkin[variant]) {
-      classes.push(componentSkin[variant] as string);
-    }
-
-    return classes.join(" ");
-  };
-
-  const resolveIcon = (name: string, size?: number): Component | null => {
-    if (!config.icons) return null;
-    return config.icons(name, size);
-  };
-
-  return { config, resolveSkin, resolveIcon };
-}

package/src/layout/LuDock.vue

@@ -1,23 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } 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")
-);
-</script>

package/src/layout/LuDockItem.vue

@@ -1,18 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  dock?: "top" | "bottom" | "left" | "right" | "fill";
-  variant?: string;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDockItem", props.dock ?? props.variant));
-</script>

package/src/layout/LuFill.vue

@@ -1,17 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</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("LuFill", props.variant));
-</script>

package/src/layout/LuFixed.vue

@@ -1,17 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</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("LuFixed", props.variant));
-</script>

package/src/layout/LuGrid.vue

@@ -1,22 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin" :style="gridStyle">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  cols?: number;
-  variant?: string;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuGrid", props.variant) || "grid");
-
-const gridStyle = computed(() => 
-  props.cols ? { gridTemplateColumns: `repeat(${props.cols}, minmax(0, 1fr))` } : {}
-);
-</script>

package/src/layout/LuOverlay.vue

@@ -1,17 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</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("LuOverlay", props.variant));
-</script>

package/src/layout/LuScroll.vue

@@ -1,17 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</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("LuScroll", props.variant));
-</script>

package/src/layout/LuSplit.vue

@@ -1,23 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin" ref="splitRef">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, provide, ref, readonly } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  direction?: "horizontal" | "vertical";
-  variant?: string;
-}>();
-
-const direction = computed(() => props.direction ?? "horizontal");
-provide("lu-split-direction", readonly(direction));
-
-const splitRef = ref<HTMLElement | null>(null);
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuSplit", props.direction ?? props.variant));
-</script>

package/src/layout/LuSplitPane.vue

@@ -1,32 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin" :style="style">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  minSize?: number;
-  maxSize?: number;
-  defaultSize?: number;
-  variant?: string;
-}>();
-
-const direction = inject<"horizontal" | "vertical">("lu-split-direction", "horizontal");
-const size = ref(props.defaultSize);
-
-const style = computed(() => {
-  if (size.value === undefined) return { flex: "1 1 0%" };
-  const dim = `${size.value}px`;
-  return direction === "horizontal"
-    ? { width: dim, flex: `0 0 ${dim}` }
-    : { height: dim, flex: `0 0 ${dim}` };
-});
-
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuSplitPane", props.variant));
-</script>

package/src/layout/LuSplitResizer.vue

@@ -1,17 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin"></div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-}>();
-
-const direction = inject<"horizontal" | "vertical">("lu-split-direction", "horizontal");
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuSplitResizer", direction === "horizontal" ? "horizontal" : "vertical"));
-</script>

package/src/layout/LuStack.vue

@@ -1,24 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  direction?: "vertical" | "horizontal";
-  variant?: string;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => {
-  const base = resolveSkin("LuStack", props.variant);
-  let extra = "";
-  if (props.direction === "vertical") extra = " flex-col";
-  if (props.direction === "horizontal") extra = " flex-row";
-  return base + extra;
-});
-</script>

package/src/plugin.ts

@@ -1,27 +0,0 @@
-import type { App, Plugin } from "vue";
-import { LumoraUIConfigKey } from "./context";
-import type { LumoraUIConfig } from "./types";
-
-export interface LumoraUIPluginOptions extends LumoraUIConfig {
-  global?: boolean;
-}
-
-export function createLumoraUI(options: LumoraUIPluginOptions = {}): Plugin {
-  return {
-    install(app: App) {
-      const config: LumoraUIConfig = {
-        target: options.target ?? "desktop",
-        skin: options.skin,
-        locale: options.locale ?? "en-US",
-        a11y: options.a11y ?? true,
-        icons: options.icons,
-      };
-
-      app.provide(LumoraUIConfigKey, config);
-
-      if (options.global) {
-        // TODO: globally register all components if requested
-      }
-    },
-  };
-}

package/src/shell/desktop/LuDesktopRailBar.vue

@@ -1,23 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="[resolvedSkin, isExpanded ? expandedSkin : '']" @mouseenter="onHover(true)" @mouseleave="onHover(false)">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from "vue";
-import { useLumoraConfig } from "../../context";
-
-const props = defineProps<{ variant?: string; expanded?: boolean; expandOnHover?: boolean }>();
-
-const hovered = ref(false);
-const isExpanded = computed(() => props.expanded || (props.expandOnHover && hovered.value));
-
-const onHover = (val: boolean) => {
-  hovered.value = val;
-};
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDesktopRailBar", props.variant));
-const expandedSkin = computed(() => resolveSkin("LuDesktopRailBar", "expanded"));
-</script>

package/src/shell/desktop/LuDesktopRailItem.vue

@@ -1,23 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="[resolvedSkin, active ? activeSkin : '']">
-    <div :class="iconSkin">
-      <slot name="icon" />
-    </div>
-    <div v-if="$slots.default" :class="labelSkin">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../../context";
-
-const props = defineProps<{ variant?: string; active?: boolean }>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDesktopRailItem", props.variant));
-const activeSkin = computed(() => resolveSkin("LuDesktopRailItem", "active"));
-const iconSkin = computed(() => resolveSkin("LuDesktopRailItemIcon", props.variant) || "flex-shrink-0 flex items-center justify-center w-6 h-6");
-const labelSkin = computed(() => resolveSkin("LuDesktopRailItemLabel", props.variant) || "overflow-hidden transition-all duration-200");
-</script>

package/src/shell/desktop/LuDesktopShell.vue

@@ -1,25 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot name="topbar" />
-    <div :class="contentWrapperSkin">
-      <slot name="rail" />
-      <slot name="sidebar" />
-      <div :class="mainContentSkin">
-        <slot name="content" />
-      </div>
-    </div>
-    <slot name="statusbar" />
-  </div>
-</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("LuDesktopShell", props.variant) || "flex flex-col h-screen w-screen overflow-hidden bg-white");
-const contentWrapperSkin = computed(() => resolveSkin("LuDesktopShellContentWrapper") || "flex flex-1 overflow-hidden");
-const mainContentSkin = computed(() => resolveSkin("LuDesktopShellMainContent") || "flex flex-1 flex-col overflow-hidden relative");
-</script>