@m3ui-vue/m3ui-vue 0.1.0

package/src/composables/useFieldBg.ts

@@ -0,0 +1,91 @@
+import { ref, computed, onMounted, onBeforeUnmount, type Ref } from 'vue'
+
+const M3_BG_CLASSES = [
+  'bg-surface-container-highest',
+  'bg-surface-container-high',
+  'bg-surface-container-low',
+  'bg-surface-container-lowest',
+  'bg-surface-container',
+  'bg-surface-variant',
+  'bg-surface-bright',
+  'bg-surface-dim',
+  'bg-surface',
+  'bg-background',
+  'bg-inverse-surface',
+  'bg-primary-container',
+  'bg-secondary-container',
+  'bg-tertiary-container',
+  'bg-error-container',
+  'bg-primary',
+  'bg-secondary',
+  'bg-tertiary',
+  'bg-error',
+] as const
+
+function findM3BgVar(el: HTMLElement): string | null {
+  for (const cls of M3_BG_CLASSES) {
+    if (el.classList.contains(cls)) return `var(--color-${cls.slice(3)})`
+  }
+  return null
+}
+
+function isTransparent(color: string): boolean {
+  if (!color || color === 'transparent') return true
+  const m = color.match(/^rgba?\(([^)]+)\)$/)
+  if (m) {
+    const parts = m[1]!.split(',').map((s) => s.trim())
+    if (parts.length === 4 && parseFloat(parts[3]!) === 0) return true
+  }
+  return false
+}
+
+/**
+ * Auto-detects the background behind `containerEl` and exposes it as `--field-bg`.
+ * Prefers a CSS variable reference (e.g. var(--color-surface-container-low)) over a
+ * raw computed color so the outlined label cutout transitions in sync with the rest
+ * of the theme switch instead of lagging behind.
+ *
+ * @param containerEl  The element that receives `--field-bg` as an inline style.
+ * @param fieldBgProp  Getter for the explicit `fieldBg` prop (overrides auto-detect).
+ */
+export function useFieldBg(
+  containerEl: Ref<HTMLElement | null>,
+  fieldBgProp: () => string | undefined,
+) {
+  const detectedBg = ref<string>('var(--color-surface)')
+
+  function applyFieldBg(value: string) {
+    detectedBg.value = value
+    containerEl.value?.style.setProperty('--field-bg', fieldBgProp() ?? value)
+  }
+
+  function resolveBg() {
+    let el: HTMLElement | null = containerEl.value?.parentElement ?? null
+    while (el) {
+      const cssVar = findM3BgVar(el)
+      if (cssVar) { applyFieldBg(cssVar); return }
+      if (el === document.body) { applyFieldBg('var(--color-surface)'); return }
+      const bg = getComputedStyle(el).backgroundColor
+      if (!isTransparent(bg)) { applyFieldBg(bg); return }
+      el = el.parentElement
+    }
+    applyFieldBg('var(--color-surface)')
+  }
+
+  let observer: MutationObserver | null = null
+
+  onMounted(() => {
+    resolveBg()
+    observer = new MutationObserver(() => resolveBg())
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'data-theme'],
+    })
+  })
+
+  onBeforeUnmount(() => observer?.disconnect())
+
+  const resolvedFieldBg = computed(() => fieldBgProp() ?? detectedBg.value)
+
+  return { resolvedFieldBg }
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,55 @@
+import { ref, watchEffect, onMounted, onUnmounted } from 'vue'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+const theme = ref<Theme>((localStorage.getItem('m3-theme') as Theme) ?? 'system')
+
+let _appliedDark: boolean | null = null
+
+function applyTheme(t: Theme) {
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const isDark = t === 'dark' || (t === 'system' && prefersDark)
+
+  const isChange = _appliedDark !== null && _appliedDark !== isDark
+
+  if (isChange) {
+    // Force reflow so transition property takes effect before the color change
+    document.documentElement.classList.add('theme-transitioning')
+    void document.documentElement.offsetHeight
+  }
+
+  document.documentElement.classList.toggle('dark', isDark)
+
+  if (isChange) {
+    setTimeout(() => document.documentElement.classList.remove('theme-transitioning'), 300)
+  }
+
+  _appliedDark = isDark
+}
+
+// Apply immediately on module load (before any component mounts) — no animation
+applyTheme(theme.value)
+
+export function useTheme() {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+  function onSystemChange() {
+    if (theme.value === 'system') applyTheme('system')
+  }
+
+  watchEffect(() => {
+    localStorage.setItem('m3-theme', theme.value)
+    applyTheme(theme.value)
+  })
+
+  onMounted(() => mediaQuery.addEventListener('change', onSystemChange))
+  onUnmounted(() => mediaQuery.removeEventListener('change', onSystemChange))
+
+  function cycle() {
+    const order: Theme[] = ['light', 'dark', 'system']
+    const idx = order.indexOf(theme.value)
+    theme.value = order[(idx + 1) % order.length]!
+  }
+
+  return { theme, cycle }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error'
+export type ToastPosition =
+  | 'top-left' | 'top-center' | 'top-right'
+  | 'bottom-left' | 'bottom-center' | 'bottom-right'
+
+export interface ToastAction { label: string; onClick: () => void }
+
+export interface Toast {
+  id: number
+  message: string
+  variant: ToastVariant
+  duration: number
+  action?: ToastAction
+}
+
+let nextId = 1
+
+const toasts = ref<Toast[]>([])
+const position = ref<ToastPosition>('bottom-center')
+
+function dismiss(id: number) {
+  toasts.value = toasts.value.filter((t) => t.id !== id)
+}
+
+function show(
+  message: string,
+  variant: ToastVariant = 'info',
+  options: number | { duration?: number; action?: ToastAction } = {},
+) {
+  const id = nextId++
+  const opts = typeof options === 'number' ? { duration: options } : options
+  const duration = opts.duration ?? (variant === 'error' ? 6000 : 4000)
+  toasts.value.push({ id, message, variant, duration, action: opts.action })
+  if (duration > 0) setTimeout(() => dismiss(id), duration)
+  return id
+}
+
+const success = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
+  show(msg, 'success', opts ?? {})
+const error = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
+  show(msg, 'error', opts ?? {})
+const warning = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
+  show(msg, 'warning', opts ?? {})
+const info = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
+  show(msg, 'info', opts ?? {})
+
+export function useToast() {
+  return { toasts, position, show, success, error, warning, info, dismiss }
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+declare module '@xterm/xterm/css/xterm.css'

package/src/index.ts

@@ -0,0 +1,119 @@
+// Plugin
+export { createM3UI } from './plugin'
+export type { M3UIOptions } from './plugin'
+
+// Composables
+export { useTheme } from './composables/useTheme'
+export type { Theme } from './composables/useTheme'
+export { useColorPalette, palettes } from './composables/useColorPalette'
+export type { Palette } from './composables/useColorPalette'
+export { useToast } from './composables/useToast'
+export type { Toast, ToastVariant, ToastPosition, ToastAction } from './composables/useToast'
+export { useFieldBg } from './composables/useFieldBg'
+
+// Components
+export { default as MAlert } from './components/MAlert.vue'
+export { default as MAppBar } from './components/MAppBar.vue'
+export { default as MAvatar } from './components/MAvatar.vue'
+export { default as MBadge } from './components/MBadge.vue'
+export { default as MBottomSheet } from './components/MBottomSheet.vue'
+export { default as MBreadcrumbs } from './components/MBreadcrumbs.vue'
+export { default as MButton } from './components/MButton.vue'
+export { default as MCalendar } from './components/MCalendar.vue'
+export { default as MCard } from './components/MCard.vue'
+export { default as MChart } from './components/MChart.vue'
+export { default as MCheckbox } from './components/MCheckbox.vue'
+export { default as MChip } from './components/MChip.vue'
+export { default as MCodeEditor } from './components/MCodeEditor.vue'
+export { default as MColorPicker } from './components/MColorPicker.vue'
+export { default as MCommandPalette } from './components/MCommandPalette.vue'
+export { default as MConfirmDialog } from './components/MConfirmDialog.vue'
+export { default as MContainer } from './components/MContainer.vue'
+export { default as MContextMenu } from './components/MContextMenu.vue'
+export { default as MDataTable } from './components/MDataTable.vue'
+export { default as MDatePicker } from './components/MDatePicker.vue'
+export { default as MDateRangePicker } from './components/MDateRangePicker.vue'
+export { default as MDialog } from './components/MDialog.vue'
+export { default as MDivider } from './components/MDivider.vue'
+export { default as MDragDropList } from './components/MDragDropList.vue'
+export { default as MEmptyState } from './components/MEmptyState.vue'
+export { default as MExpansionPanel } from './components/MExpansionPanel.vue'
+export { default as MFab } from './components/MFab.vue'
+export { default as MFileUpload } from './components/MFileUpload.vue'
+export { default as MGrid } from './components/MGrid.vue'
+export { default as MHotkeys } from './components/MHotkeys.vue'
+export { default as MIcon } from './components/MIcon.vue'
+export { default as MIconButton } from './components/MIconButton.vue'
+export { default as MInfiniteScroll } from './components/MInfiniteScroll.vue'
+export { default as MJsonEditor } from './components/MJsonEditor.vue'
+export { default as MJsonViewer } from './components/MJsonViewer.vue'
+export { default as MKanban } from './components/MKanban.vue'
+export { default as MLoadingOverlay } from './components/MLoadingOverlay.vue'
+export { default as MMarkdown } from './components/MMarkdown.vue'
+export { default as MMasonry } from './components/MMasonry.vue'
+export { default as MMenu } from './components/MMenu.vue'
+export { default as MMenuItem } from './components/MMenuItem.vue'
+export { default as MMultiSelect } from './components/MMultiSelect.vue'
+export { default as MNavigationBar } from './components/MNavigationBar.vue'
+export { default as MNavigationDrawer } from './components/MNavigationDrawer.vue'
+export { default as MNavigationRail } from './components/MNavigationRail.vue'
+export { default as MPagination } from './components/MPagination.vue'
+export { default as MProgressBar } from './components/MProgressBar.vue'
+export { default as MRadio } from './components/MRadio.vue'
+export { default as MRadioGroup } from './components/MRadioGroup.vue'
+export { default as MRating } from './components/MRating.vue'
+export { default as MResult } from './components/MResult.vue'
+export { default as MRichTextEditor } from './components/MRichTextEditor.vue'
+export { default as MScheduler } from './components/MScheduler.vue'
+export { default as MSegmentedButton } from './components/MSegmentedButton.vue'
+export { default as MSelect } from './components/MSelect.vue'
+export { default as MSideSheet } from './components/MSideSheet.vue'
+export { default as MSkeleton } from './components/MSkeleton.vue'
+export { default as MSlider } from './components/MSlider.vue'
+export { default as MSnackbar } from './components/MSnackbar.vue'
+export { default as MSpinner } from './components/MSpinner.vue'
+export { default as MSplitter } from './components/MSplitter.vue'
+export { default as MSpotlightSearch } from './components/MSpotlightSearch.vue'
+export { default as MStack } from './components/MStack.vue'
+export { default as MStatCard } from './components/MStatCard.vue'
+export { default as MStepper } from './components/MStepper.vue'
+export { default as MSwitch } from './components/MSwitch.vue'
+export { default as MTable } from './components/MTable.vue'
+export { default as MTabs } from './components/MTabs.vue'
+export { default as MTerminal } from './components/MTerminal.vue'
+export { default as MTextField } from './components/MTextField.vue'
+export { default as MTimeline } from './components/MTimeline.vue'
+export { default as MTimePicker } from './components/MTimePicker.vue'
+export { default as MTooltip } from './components/MTooltip.vue'
+export { default as MTopAppBar } from './components/MTopAppBar.vue'
+export { default as MTour } from './components/MTour.vue'
+export { default as MTransferList } from './components/MTransferList.vue'
+export { default as MTree } from './components/MTree.vue'
+export { default as MTreeTable } from './components/MTreeTable.vue'
+export { default as MVirtualTable } from './components/MVirtualTable.vue'
+
+// Re-export types from components that define them
+export type { CalendarEvent } from './components/MCalendar.vue'
+export type { ContextMenuItem } from './components/MContextMenu.vue'
+export type { DataTableColumn } from './components/MDataTable.vue'
+export type { DateRange } from './components/MDateRangePicker.vue'
+export type { DragDropItem } from './components/MDragDropList.vue'
+export type { UploadFile } from './components/MFileUpload.vue'
+export type { HotkeyBinding } from './components/MHotkeys.vue'
+export type { KanbanColumn, KanbanCard } from './components/MKanban.vue'
+export type { NavBarItem } from './components/MNavigationBar.vue'
+export type { DrawerSection } from './components/MNavigationDrawer.vue'
+export type { NavRailItem } from './components/MNavigationRail.vue'
+export type { SchedulerEvent } from './components/MScheduler.vue'
+export type { SegmentedOption } from './components/MSegmentedButton.vue'
+export type { SpotlightResult } from './components/MSpotlightSearch.vue'
+export type { StepItem } from './components/MStepper.vue'
+export type { CommandItem } from './components/MCommandPalette.vue'
+export type { TableFetchParams } from './components/MTable.vue'
+export type { TimelineItem } from './components/MTimeline.vue'
+export type { TourStep } from './components/MTour.vue'
+export type { TransferItem } from './components/MTransferList.vue'
+export type { TreeNode } from './components/MTree.vue'
+export type { TreeTableColumn, TreeTableRow } from './components/MTreeTable.vue'
+export type { VTableColumn } from './components/MVirtualTable.vue'
+export type { BreadcrumbItem } from './components/MBreadcrumbs.vue'

package/src/plugin.ts

@@ -0,0 +1,18 @@
+import type { App } from 'vue'
+import type { Palette } from './composables/useColorPalette'
+
+export interface M3UIOptions {
+  palette?: string
+  customPalettes?: Palette[]
+}
+
+export function createM3UI(options: M3UIOptions = {}) {
+  return {
+    install(_app: App) {
+      if (options.palette && options.palette !== 'purple') {
+        document.documentElement.setAttribute('data-palette', options.palette)
+        localStorage.setItem('m3-palette', options.palette)
+      }
+    },
+  }
+}