@umbra.ui/core 0.1.0

package/src/components/navigation/tabcontroller/TabController.vue

@@ -0,0 +1,307 @@
+// ============= TabController.vue =============
+<script setup lang="ts">
+import { ref, watch, provide, computed, useCssModule, type Ref } from "vue";
+import { TabControllerKey } from "./useTabController";
+import { icons, type IconKey } from "@umbra-ui/icons";
+import type { Tab, TabPosition } from "./types";
+import "../theme.css";
+
+interface Props {
+  modelValue?: string;
+  position?: TabPosition;
+  layout?: "row" | "column";
+  barColor?: string;
+  tabItemActiveColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  position: "bottom",
+  layout: "column",
+  barColor: "#111111",
+  tabItemActiveColor: "#0090ff",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  change: [value: string];
+}>();
+
+const $style = useCssModule();
+
+const tabs: Ref<Tab[]> = ref([]);
+const activeTab = ref(props.modelValue);
+
+const registerTab = (tab: Tab) => {
+  const existingIndex = tabs.value.findIndex((t) => t.id === tab.id);
+
+  if (existingIndex === -1) {
+    tabs.value.push(tab);
+  } else {
+    // Update existing tab
+    tabs.value[existingIndex] = tab;
+  }
+
+  // Set first tab as active if none selected
+  if (!activeTab.value && tabs.value.length === 1) {
+    setActiveTab(tab.id);
+  }
+};
+
+const unregisterTab = (id: string) => {
+  const index = tabs.value.findIndex((t) => t.id === id);
+  if (index > -1) {
+    tabs.value.splice(index, 1);
+
+    // If active tab was removed, select another
+    if (activeTab.value === id && tabs.value.length > 0) {
+      setActiveTab(tabs.value[Math.min(index, tabs.value.length - 1)].id);
+    }
+  }
+};
+
+const setActiveTab = (id: string) => {
+  const tab = tabs.value.find((t) => t.id === id);
+  if (tab && !tab.disabled && id !== activeTab.value) {
+    activeTab.value = id;
+    emit("update:modelValue", id);
+    emit("change", id);
+  }
+};
+
+const goToTab = (index: number) => {
+  if (index >= 0 && index < tabs.value.length) {
+    setActiveTab(tabs.value[index].id);
+  }
+};
+
+const nextTab = () => {
+  const currentIndex = tabs.value.findIndex((t) => t.id === activeTab.value);
+  const nextIndex = (currentIndex + 1) % tabs.value.length;
+  goToTab(nextIndex);
+};
+
+const previousTab = () => {
+  const currentIndex = tabs.value.findIndex((t) => t.id === activeTab.value);
+  const prevIndex =
+    currentIndex === 0 ? tabs.value.length - 1 : currentIndex - 1;
+  goToTab(prevIndex);
+};
+
+// Sync external model value changes
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== activeTab.value) {
+      activeTab.value = newVal;
+    }
+  }
+);
+
+// Provide context for child components
+provide(TabControllerKey, {
+  tabs,
+  activeTab,
+  registerTab,
+  unregisterTab,
+  setActiveTab,
+  goToTab,
+  nextTab,
+  previousTab,
+  animated: false,
+});
+
+const containerClasses = computed(() => ({
+  [$style.container]: true,
+  [$style["container--top"]]: props.position === "top",
+}));
+
+const tabItemClasses = (tab: Tab) => ({
+  [$style.tabItem]: true,
+  [$style["tabItem--active"]]: activeTab.value === tab.id,
+  [$style["tabItem--disabled"]]: tab.disabled,
+  [$style["tabItem--row"]]: props.layout === "row",
+  [$style["tabItem--column"]]: props.layout === "column",
+});
+
+const tabBarClasses = computed(() => ({
+  [$style.tabBar]: true,
+  [$style["tabBar--row"]]: props.layout === "row",
+  [$style["tabBar--column"]]: props.layout === "column",
+}));
+
+const getIconComponent = (iconKey?: string) => {
+  if (!iconKey) return null;
+  return icons[iconKey as IconKey] || null;
+};
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <!-- Top Tab Bar -->
+    <div v-if="position === 'top'" :class="tabBarClasses">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="tabItemClasses(tab)"
+        :disabled="tab.disabled"
+        @click="setActiveTab(tab.id)"
+      >
+        <component
+          v-if="tab.icon"
+          :is="getIconComponent(tab.icon)"
+          :class="$style.tabIcon"
+          size="18"
+        />
+        <span :class="[$style.tabLabel]">{{ tab.label }}</span>
+        <span v-if="tab.badge" :class="$style.tabBadge">{{ tab.badge }}</span>
+      </button>
+    </div>
+
+    <!-- Tab Content -->
+    <div :class="$style.tabContent">
+      <slot></slot>
+    </div>
+
+    <!-- Bottom Tab Bar -->
+    <div v-if="position === 'bottom'" :class="tabBarClasses">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="tabItemClasses(tab)"
+        :disabled="tab.disabled"
+        @click="setActiveTab(tab.id)"
+      >
+        <component
+          v-if="tab.icon"
+          :is="getIconComponent(tab.icon)"
+          :class="$style.tabIcon"
+        />
+        <span :class="$style.tabLabel">{{ tab.label }}</span>
+        <span v-if="tab.badge" :class="$style.tabBadge">{{ tab.badge }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--tabcontroller-container-bg);
+  overflow: hidden;
+}
+
+.container--top {
+  flex-direction: column;
+}
+
+.tabBar {
+  display: flex;
+  background: var(--tabcontroller-bar-bg);
+  border-top: 1px solid var(--tabcontroller-bar-border);
+  padding: 0.353rem;
+}
+
+.tabBar--column {
+  gap: 0.353rem;
+}
+
+.tabBar--row {
+  gap: 0.5rem;
+}
+
+.container--top .tabBar {
+  border-top: none;
+  border-bottom: 1px solid var(--tabcontroller-bar-border);
+}
+
+.tabItem {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--tabcontroller-tab-text);
+  font-family: inherit;
+  position: relative;
+  border-radius: 0.353rem;
+  font-size: 12px;
+}
+
+.tabItem--column {
+  flex-direction: column;
+}
+
+.tabItem--row {
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.tabItem:hover:not(.tabItem--disabled) {
+  background: var(--tabcontroller-tab-hover-bg);
+}
+
+.tabItem--active {
+  color: var(--tabcontroller-tab-active-text);
+}
+
+.tabItem--disabled {
+  opacity: var(--tabcontroller-tab-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.tabIcon {
+  font-size: 20px;
+  transition: transform 0.2s ease;
+}
+
+.tabItem--column .tabIcon {
+  margin-bottom: 4px;
+}
+
+.tabItem--row .tabIcon {
+  margin-right: 0;
+}
+
+.tabItem--active .tabIcon {
+  transform: scale(1.1);
+}
+
+.tabLabel {
+  font-weight: 500;
+}
+
+.tabBadge {
+  position: absolute;
+  background: var(--tabcontroller-badge-bg);
+  color: var(--tabcontroller-badge-text);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 10px;
+  min-width: 16px;
+  text-align: center;
+}
+
+.tabItem--column .tabBadge {
+  top: 4px;
+  right: calc(50% - 16px);
+}
+
+.tabItem--row .tabBadge {
+  position: relative;
+}
+
+.tabContent {
+  flex: 1;
+  overflow-y: auto;
+  position: relative;
+  height: 100%;
+}
+</style>

package/src/components/navigation/tabcontroller/TabItem.vue

@@ -0,0 +1,57 @@
+// ============= TabItem.vue =============
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useTabController } from "./useTabController";
+import type { Tab } from "./types";
+import "../theme.css";
+
+interface Props {
+  id: string;
+  label: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { activeTab, registerTab, unregisterTab } = useTabController();
+
+const isActive = computed(() => activeTab.value === props.id);
+
+const tabInfo = computed<Tab>(() => ({
+  id: props.id,
+  label: props.label,
+  icon: props.icon,
+  badge: props.badge,
+  disabled: props.disabled,
+}));
+
+onMounted(() => {
+  registerTab(tabInfo.value);
+});
+
+onBeforeUnmount(() => {
+  unregisterTab(props.id);
+});
+
+// Re-register when props change
+watch(
+  () => tabInfo.value,
+  (newTab) => {
+    registerTab(newTab);
+  }
+);
+</script>
+
+<template>
+  <div v-show="isActive" :class="$style.panel">
+    <slot></slot>
+  </div>
+</template>
+
+<style module>
+.panel {
+  height: 100%;
+}
+</style>

package/src/components/navigation/tabcontroller/types.ts

@@ -0,0 +1,24 @@
+// ============= types.ts =============
+import type { Ref } from "vue";
+
+export interface Tab {
+  id: string;
+  label: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+export interface TabControllerContext {
+  tabs: Ref<Tab[]>;
+  activeTab: Ref<string>;
+  registerTab: (tab: Tab) => void;
+  unregisterTab: (id: string) => void;
+  setActiveTab: (id: string) => void;
+  goToTab: (index: number) => void;
+  nextTab: () => void;
+  previousTab: () => void;
+  animated: boolean;
+}
+
+export type TabPosition = "top" | "bottom";

package/src/components/navigation/tabcontroller/useTabController.ts

@@ -0,0 +1,18 @@
+// ============= useTabController.ts =============
+import { inject, type InjectionKey } from "vue";
+import type { TabControllerContext } from "./types";
+
+export const TabControllerKey: InjectionKey<TabControllerContext> =
+  Symbol("TabController");
+
+export const useTabController = (): TabControllerContext => {
+  const context = inject(TabControllerKey);
+
+  if (!context) {
+    throw new Error(
+      "useTabController must be used within a TabController component"
+    );
+  }
+
+  return context;
+};

package/src/components/navigation/theme.css

@@ -0,0 +1,91 @@
+/* Light theme using Colors */
+:root {
+  /* Navigation container colors */
+  --navigation-container-bg: #ffffff; /* white - light background for light mode */
+
+  /* TabController colors */
+  --tabcontroller-container-bg: #ffffff; /* white - light background for light mode */
+  --tabcontroller-bar-bg: #f3f4f6; /* gray1 - light background for light mode */
+  --tabcontroller-bar-border: #e5e7eb; /* gray2 - border for light mode */
+  --tabcontroller-tab-text: #6b7280; /* gray5 - tab text for light mode */
+  --tabcontroller-tab-hover-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - hover background for light mode */
+  --tabcontroller-tab-active-text: #0090ff; /* blue9 - active tab text for light mode */
+  --tabcontroller-tab-disabled-opacity: 0.4; /* disabled opacity for light mode */
+  --tabcontroller-badge-bg: #dc2626; /* red6 - badge background for light mode */
+  --tabcontroller-badge-text: #ffffff; /* white - badge text for light mode */
+
+  /* SlideoverController colors */
+  --slideover-darken-bg: rgba(
+    0,
+    0,
+    0,
+    0.5
+  ); /* blackA8 - darken background for light mode */
+  --slideover-breadcrumb-hover-opacity: 1; /* breadcrumb hover opacity for light mode */
+  --slideover-breadcrumb-default-opacity: 0.5; /* breadcrumb default opacity for light mode */
+  --slideover-handle-bg: #6b7280; /* gray5 - handle background for light mode */
+  --slideover-handle-hover-width: 4px; /* handle hover width for light mode */
+  --slideover-handle-hover-height: 24px; /* handle hover height for light mode */
+  --slideover-handle-hover-opacity: 1; /* handle hover opacity for light mode */
+  --slideover-handle-default-width: 2px; /* handle default width for light mode */
+  --slideover-handle-default-height: 20px; /* handle default height for light mode */
+  --slideover-handle-default-opacity: 0; /* handle default opacity for light mode */
+
+  /* SplitViewController colors */
+  --splitview-handle-bg: #6b7280; /* gray5 - handle background for light mode */
+  --splitview-handle-hover-width: 4px; /* handle hover width for light mode */
+  --splitview-handle-hover-height: 24px; /* handle hover height for light mode */
+  --splitview-handle-hover-opacity: 1; /* handle hover opacity for light mode */
+  --splitview-handle-default-width: 2px; /* handle default width for light mode */
+  --splitview-handle-default-height: 20px; /* handle default height for light mode */
+  --splitview-handle-default-opacity: 0; /* handle default opacity for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Navigation container colors */
+  --navigation-container-bg: #000000; /* Original dark mode value */
+
+  /* TabController colors */
+  --tabcontroller-container-bg: #000000; /* Original dark mode value */
+  --tabcontroller-bar-bg: #111111; /* Original dark mode value */
+  --tabcontroller-bar-border: #2a2a2a; /* Original dark mode value */
+  --tabcontroller-tab-text: #b4b4b4; /* Original dark mode value */
+  --tabcontroller-tab-hover-bg: rgba(
+    255,
+    255,
+    255,
+    0.12
+  ); /* Original dark mode value */
+  --tabcontroller-tab-active-text: #0090ff; /* Original dark mode value */
+  --tabcontroller-tab-disabled-opacity: 0.4; /* Original dark mode value */
+  --tabcontroller-badge-bg: #e5484d; /* Original dark mode value */
+  --tabcontroller-badge-text: #ffffff; /* Original dark mode value */
+
+  /* SlideoverController colors */
+  --slideover-darken-bg: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+  --slideover-breadcrumb-hover-opacity: 1; /* Original dark mode value */
+  --slideover-breadcrumb-default-opacity: 0.5; /* Original dark mode value */
+  --slideover-handle-bg: #eeeeee; /* Original dark mode value */
+  --slideover-handle-hover-width: 4px; /* Original dark mode value */
+  --slideover-handle-hover-height: 24px; /* Original dark mode value */
+  --slideover-handle-hover-opacity: 1; /* Original dark mode value */
+  --slideover-handle-default-width: 2px; /* Original dark mode value */
+  --slideover-handle-default-height: 20px; /* Original dark mode value */
+  --slideover-handle-default-opacity: 0; /* Original dark mode value */
+
+  /* SplitViewController colors */
+  --splitview-handle-bg: #eeeeee; /* Original dark mode value */
+  --splitview-handle-hover-width: 4px; /* Original dark mode value */
+  --splitview-handle-hover-height: 24px; /* Original dark mode value */
+  --splitview-handle-hover-opacity: 1; /* Original dark mode value */
+  --splitview-handle-default-width: 2px; /* Original dark mode value */
+  --splitview-handle-default-height: 20px; /* Original dark mode value */
+  --splitview-handle-default-opacity: 0; /* Original dark mode value */
+}

package/src/components/navigation/types.ts

@@ -0,0 +1,7 @@
+export interface Pane {
+  name: string;
+  background: string;
+  foreground: string;
+  component: any;
+  props: Record<string, any>;
+}