@astrake/lumora-ui 0.2.0 → 0.2.1

package/src/context.ts

@@ -1,39 +0,0 @@
-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");
-
-export function useLumoraConfig() {
-  const config = inject(LumoraUIConfigKey, {});
-
-  const resolveSkin = (componentName: string, variant?: string): string => {
-    // Unwrap the user's skin map if it's a ref
-    const userSkinMap = isRef(config.skin) ? config.skin.value : (config.skin || {});
-    
-    // The base structural skin merged with any consumer overrides
-    const skinMap = extendSkin(defaultSkin, userSkinMap);
-
-    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);
-    }
-
-    // Use cn() so that variant classes intelligently override default classes
-    return cn(classes);
-  };
-
-  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,56 +0,0 @@
-<script lang="ts">
-import { h, defineComponent, computed, Fragment, VNode, Comment } from "vue";
-import { useLumoraConfig } from "../context";
-
-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

@@ -1,20 +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,27 +0,0 @@
-<template>
-  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import { resolveLayoutProps, cn } from "../utils";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  as?: string;
-  width?: string;
-  height?: string;
-  padding?: string | number;
-}>(), {
-  as: 'div'
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => cn(
-  resolveSkin("LuFill", props.variant),
-  resolveLayoutProps(props)
-));
-</script>

package/src/layout/LuFixed.vue

@@ -1,27 +0,0 @@
-<template>
-  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import { resolveLayoutProps, cn } from "../utils";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  as?: string;
-  width?: string;
-  height?: string;
-  padding?: string | number;
-}>(), {
-  as: 'div'
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => cn(
-  resolveSkin("LuFixed", props.variant),
-  resolveLayoutProps(props)
-));
-</script>

package/src/layout/LuGrid.vue

@@ -1,45 +0,0 @@
-<template>
-  <component :is="as" v-bind="$attrs" :class="resolvedSkin" :style="gridStyle">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import { resolveLayoutProps, cn } from "../utils";
-
-const props = withDefaults(defineProps<{
-  cols?: number;
-  smCols?: number;
-  mdCols?: number;
-  lgCols?: number;
-  variant?: string;
-  as?: string;
-  gap?: string | number;
-  padding?: string | number;
-  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-}>(), {
-  as: 'div'
-});
-
-const colsClass = computed(() => {
-  const map: Record<number, string> = {1:'grid-cols-1',2:'grid-cols-2',3:'grid-cols-3',4:'grid-cols-4',5:'grid-cols-5',6:'grid-cols-6',12:'grid-cols-12'};
-  const sm = props.smCols && map[props.smCols] ? `sm:${map[props.smCols]}` : '';
-  const md = props.mdCols && map[props.mdCols] ? `md:${map[props.mdCols]}` : '';
-  const lg = props.lgCols && map[props.lgCols] ? `lg:${map[props.lgCols]}` : '';
-  return [sm, md, lg].filter(Boolean).join(' ');
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => cn(
-  resolveSkin("LuGrid", props.variant),
-  resolveLayoutProps(props),
-  colsClass.value
-));
-
-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,19 +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, unref, type Ref } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  minSize?: number;
-  maxSize?: number;
-  defaultSize?: number;
-  variant?: string;
-}>();
-
-const direction = inject<Ref<"horizontal" | "vertical"> | "horizontal">("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 unref(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,19 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin"></div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, unref, type Ref } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-}>();
-
-const direction = inject<Ref<"horizontal" | "vertical"> | "horizontal">("lu-split-direction", "horizontal");
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => [
-  resolveSkin("LuSplitResizer", unref(direction) === "horizontal" ? "horizontal" : "vertical")
-]);
-</script>

package/src/layout/LuStack.vue

@@ -1,29 +0,0 @@
-<template>
-  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import { resolveLayoutProps, cn } from "../utils";
-
-const props = withDefaults(defineProps<{
-  direction?: "vertical" | "horizontal";
-  variant?: string;
-  as?: string;
-  gap?: string | number;
-  padding?: string | number;
-  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-}>(), {
-  as: 'div'
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => cn(
-  resolveSkin("LuStack", props.direction ?? props.variant),
-  resolveLayoutProps(props)
-));
-</script>

package/src/plugin.ts

@@ -1,28 +0,0 @@
-import type { App, Plugin } from "vue";
-import { shallowReactive } 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 = shallowReactive<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));
-const labelSkin = computed(() => resolveSkin("LuDesktopRailItemLabel", props.variant));
-</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));
-const contentWrapperSkin = computed(() => resolveSkin("LuDesktopShellContentWrapper"));
-const mainContentSkin = computed(() => resolveSkin("LuDesktopShellMainContent"));
-</script>

package/src/shell/desktop/LuDesktopSidebar.vue

@@ -1,36 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <!-- Named slot layout: sticky header + scrollable content + sticky footer -->
-    <template v-if="hasHeader || hasContent || hasFooter">
-      <div v-if="hasHeader" :class="headerSkin">
-        <slot name="header" />
-      </div>
-      <div :class="contentSkin">
-        <slot name="content" />
-      </div>
-      <div v-if="hasFooter" :class="footerSkin">
-        <slot name="footer" />
-      </div>
-    </template>
-    <!-- Fallback: legacy default slot (no layout enforcement) -->
-    <slot v-else />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-import { useLumoraConfig } from "../../context";
-
-const props = defineProps<{ variant?: string }>();
-
-const slots = useSlots();
-const hasHeader = computed(() => !!slots.header);
-const hasContent = computed(() => !!slots.content);
-const hasFooter = computed(() => !!slots.footer);
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDesktopSidebar", props.variant));
-const headerSkin = computed(() => resolveSkin("LuDesktopSidebarHeader", props.variant));
-const contentSkin = computed(() => resolveSkin("LuDesktopSidebarContent", props.variant));
-const footerSkin = computed(() => resolveSkin("LuDesktopSidebarFooter", props.variant));
-</script>

package/src/shell/desktop/LuDesktopStatusBar.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("LuDesktopStatusBar", props.variant));
-</script>

package/src/shell/desktop/LuDesktopTopBar.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("LuDesktopTopBar", props.variant));
-</script>

package/src/shell/embedded/LuEmbeddedShell.vue

@@ -1,20 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot name="topbar" />
-    <div :class="contentSkin">
-      <slot name="content" />
-    </div>
-    <slot name="bottombar" />
-  </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("LuEmbeddedShell", props.variant));
-const contentSkin = computed(() => resolveSkin("LuEmbeddedShellContent", props.variant));
-</script>

package/src/shell/embedded/LuEmbeddedStatusBar.vue

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

package/src/shell/embedded/LuEmbeddedTopBar.vue

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

package/src/shell/mobile/LuMobileHeader.vue

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

package/src/shell/mobile/LuMobileNavBar.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("LuMobileNavBar", props.variant));
-</script>

package/src/shell/mobile/LuMobileShell.vue

@@ -1,21 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin">
-    <slot name="header" />
-    <div :class="contentSkin">
-      <slot name="content" />
-    </div>
-    <slot name="navbar" />
-    <slot name="drawer" />
-  </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("LuMobileShell", props.variant));
-const contentSkin = computed(() => resolveSkin("LuMobileShellContent"));
-</script>