@astrake/lumora-ui 0.2.0 → 0.2.2

package/src/components/LuTable.vue

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

package/src/components/LuTableBody.vue

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

package/src/components/LuTableCell.vue

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

package/src/components/LuTableHead.vue

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

package/src/components/LuTableHeadCell.vue

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

package/src/components/LuTableRow.vue

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

package/src/components/LuTabs.vue

@@ -1,30 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, provide, ref, watch } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-  modelValue?: string | number;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string | number): void;
-}>();
-
-const activeTab = ref(props.modelValue);
-watch(() => props.modelValue, (val) => activeTab.value = val);
-watch(activeTab, (val) => {
-  if (val !== undefined) emit("update:modelValue", val);
-});
-
-provide("lu-tabs-active", activeTab);
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuTabs", props.variant));
-</script>

package/src/components/LuTag.vue

@@ -1,35 +0,0 @@
-<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/LuText.vue

@@ -1,18 +0,0 @@
-<template>
-  <component :is="as ?? 'span'" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-  as?: string;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuText", props.variant));
-</script>

package/src/components/LuTextarea.vue

@@ -1,62 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<template>
-  <LuSelect
-    :model-value="mode"
-    variant="theme"
-    :options="options"
-    v-bind="$attrs"
-    @update:model-value="onChange"
-  />
-</template>
-
-<script setup lang="ts">
-import LuSelect from "./LuSelect.vue";
-import { useTheme, type ThemeMode } from "../composables/useTheme";
-
-const { mode, setMode } = useTheme();
-
-const options = [
-  { value: "system", label: "System" },
-  { value: "light", label: "Light" },
-  { value: "dark", label: "Dark" },
-];
-
-const onChange = (val: string | number) => {
-  setMode(val as ThemeMode);
-};
-</script>

package/src/components/LuThemeSwitch.vue

@@ -1,22 +0,0 @@
-<template>
-  <LuSwitch
-    :model-value="isDark"
-    variant="theme"
-    v-bind="$attrs"
-    @update:model-value="onToggle"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import LuSwitch from "./LuSwitch.vue";
-import { useTheme } from "../composables/useTheme";
-
-const { resolved, setMode } = useTheme();
-
-const isDark = computed(() => resolved.value === "dark");
-
-const onToggle = (val: boolean) => {
-  setMode(val ? "dark" : "light");
-};
-</script>

package/src/components/LuToggleButton.vue

@@ -1,35 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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/LuTooltip.vue

@@ -1,36 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="containerSkin" @mouseenter="onEnter" @mouseleave="onLeave">
-    <slot name="trigger" />
-    <div v-if="isVisible" :class="contentSkin">
-      <slot name="content" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{ variant?: string; position?: "top" | "bottom" | "left" | "right"; delay?: number }>();
-
-const isVisible = ref(false);
-let timeout: ReturnType<typeof setTimeout> | null = null;
-
-const onEnter = () => {
-  if (timeout) clearTimeout(timeout);
-  if (props.delay) {
-    timeout = setTimeout(() => isVisible.value = true, props.delay);
-  } else {
-    isVisible.value = true;
-  }
-};
-
-const onLeave = () => {
-  if (timeout) clearTimeout(timeout);
-  isVisible.value = false;
-};
-
-const { resolveSkin } = useLumoraConfig();
-const containerSkin = computed(() => resolveSkin("LuTooltip", props.variant));
-const contentSkin = computed(() => resolveSkin("LuTooltipContent", props.position ?? props.variant));
-</script>

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,
-  };
-}