@astrake/lumora-ui 0.1.6 → 0.2.1

package/src/components/LuPageHeader.vue

@@ -1,24 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <LuText :as="level" variant="page-title">{{ title }}</LuText>
-    <LuText v-if="description" as="p" variant="page-subtitle" class="mt-2">{{ description }}</LuText>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import LuText from "./LuText.vue";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  title: string;
-  description?: string;
-  level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}>(), {
-  level: "h1"
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuPageHeader", props.variant));
-</script>

package/src/components/LuProgressBar.vue

@@ -1,21 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="trackSkin">
-    <div :class="fillSkin" :style="{ width: `${percent}%` }"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{ variant?: string; value: number; max?: number }>();
-
-const percent = computed(() => {
-  const m = props.max ?? 100;
-  return Math.max(0, Math.min(100, (props.value / m) * 100));
-});
-
-const { resolveSkin } = useLumoraConfig();
-const trackSkin = computed(() => resolveSkin("LuProgressBar", props.variant));
-const fillSkin = computed(() => resolveSkin("LuProgressBarFill", props.variant));
-</script>

package/src/components/LuSelect.vue

@@ -1,67 +0,0 @@
-<template>
-  <select
-    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 }}
-    </option>
-  </select>
-</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;
-  options: Array<{ value: string | number; label: string }>;
-  name?: string;
-  error?: string | null;
-}>();
-
-const emit = defineEmits<{
-  (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 value = (event.target as HTMLSelectElement).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 | 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/LuSwitch.vue

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

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

package/src/components/LuTabList.vue

@@ -1,15 +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("LuTabList", props.variant));
-</script>

package/src/components/LuTabPanel.vue

@@ -1,19 +0,0 @@
-<template>
-  <div v-show="isActive" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, type Ref } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{ variant?: string; value: string | number }>();
-
-const activeTab = inject<Ref<string | number | undefined>>("lu-tabs-active");
-
-const isActive = computed(() => activeTab?.value === props.value);
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuTabPanel", props.variant));
-</script>

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/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/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/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>