@m3ui-vue/m3ui-vue 0.2.7 → 0.3.0

package/src/components/MTagInput.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+import MIcon from './MIcon.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[]
+    label?: string
+    placeholder?: string
+    variant?: 'filled' | 'outlined'
+    disabled?: boolean
+    error?: string
+    hint?: string
+    required?: boolean
+    leadingIcon?: string
+    fieldBg?: string
+    maxTags?: number
+    duplicates?: boolean
+    clearable?: boolean
+  }>(),
+  {
+    modelValue: () => [],
+    variant: 'filled',
+    disabled: false,
+    required: false,
+    duplicates: false,
+    clearable: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string[]] }>()
+
+const id = useId()
+const focused = ref(false)
+const inputValue = ref('')
+const fieldEl = ref<HTMLElement | null>(null)
+const inputEl = ref<HTMLInputElement | null>(null)
+const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
+
+const hasValue = computed(() => props.modelValue.length > 0)
+const canAddMore = computed(() => props.maxTags == null || props.modelValue.length < props.maxTags)
+
+function addTag(raw: string) {
+  const tag = raw.trim()
+  if (!tag) return
+  if (!props.duplicates && props.modelValue.includes(tag)) return
+  if (!canAddMore.value) return
+  emit('update:modelValue', [...props.modelValue, tag])
+}
+
+function removeTag(index: number, e?: Event) {
+  e?.stopPropagation()
+  const next = [...props.modelValue]
+  next.splice(index, 1)
+  emit('update:modelValue', next)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' || e.key === ',') {
+    e.preventDefault()
+    addTag(inputValue.value)
+    inputValue.value = ''
+  } else if (e.key === 'Backspace' && inputValue.value === '' && props.modelValue.length > 0) {
+    removeTag(props.modelValue.length - 1)
+  }
+}
+
+function onInput(e: Event) {
+  const value = (e.target as HTMLInputElement).value
+  // Handle comma typed via input event (covers paste with commas too)
+  if (value.includes(',')) {
+    const parts = value.split(',')
+    for (const part of parts.slice(0, -1)) {
+      addTag(part)
+    }
+    inputValue.value = parts[parts.length - 1] ?? ''
+  } else {
+    inputValue.value = value
+  }
+}
+
+function onPaste(e: ClipboardEvent) {
+  const pasted = e.clipboardData?.getData('text') ?? ''
+  if (pasted.includes(',')) {
+    e.preventDefault()
+    const parts = pasted.split(',')
+    for (const part of parts) {
+      addTag(part)
+    }
+  }
+}
+
+function focusInput() {
+  if (!props.disabled) {
+    inputEl.value?.focus()
+  }
+}
+
+const triggerClasses = computed(() => {
+  const base = [
+    'flex min-h-[56px] w-full cursor-text items-center gap-1.5 flex-wrap',
+    'transition-[border-color,border-width] duration-150',
+    props.leadingIcon ? 'pl-12 pr-10' : 'pl-4 pr-10',
+  ]
+
+  if (props.variant === 'outlined') {
+    return [
+      ...base,
+      'rounded-sm border bg-transparent py-2',
+      focused.value
+        ? (props.error ? 'border-2 border-error' : 'border-2 border-primary')
+        : (props.error ? 'border-error' : 'border-outline hover:border-on-surface'),
+    ].join(' ')
+  }
+
+  return [
+    ...base,
+    'rounded-t-sm bg-surface-container-highest border-b pb-2',
+    hasValue.value || focused.value ? 'pt-7' : 'pt-4',
+    focused.value
+      ? (props.error ? 'border-b-2 border-error' : 'border-b-2 border-primary')
+      : (props.error ? 'border-error' : 'border-on-surface-variant hover:border-on-surface'),
+  ].join(' ')
+})
+
+const labelClasses = computed(() => {
+  const left = props.leadingIcon
+    ? (props.variant === 'outlined' ? 'left-11' : 'left-12')
+    : (props.variant === 'outlined' ? 'left-3' : 'left-4')
+
+  const floated = props.variant === 'outlined'
+    ? '-top-2.5 translate-y-0 text-label-small bg-[var(--field-bg)] px-1 right-auto max-w-[calc(100%-1.5rem)]'
+    : 'top-2 translate-y-0 text-label-small'
+
+  const unFloated = props.variant === 'filled'
+    ? 'top-[53%] -translate-y-1/2 text-body-large'
+    : 'top-1/2 -translate-y-1/2 text-body-large'
+  const active = focused.value || hasValue.value
+
+  return [
+    'pointer-events-none absolute right-10 truncate transition-all duration-200',
+    left,
+    active ? floated : unFloated,
+    focused.value
+      ? (props.error ? 'text-error' : 'text-primary')
+      : (props.error ? 'text-error' : 'text-on-surface-variant'),
+  ].join(' ')
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      ref="fieldEl"
+      class="relative"
+      :class="variant === 'outlined' ? 'mt-2' : ''"
+      :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
+    >
+      <div
+        v-if="leadingIcon"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-5' : 'top-4.5'"
+      >
+        <MIcon :name="leadingIcon" :size="20" />
+      </div>
+
+      <!-- Trigger field -->
+      <div
+        :id="id"
+        :class="triggerClasses"
+        @click="focusInput"
+      >
+        <span
+          v-for="(tag, i) in modelValue"
+          :key="i"
+          class="inline-flex items-center gap-1 rounded-full bg-secondary-container px-2 py-0.5 text-label-small text-on-secondary-container"
+        >
+          {{ tag }}
+          <button
+            v-if="!disabled"
+            type="button"
+            class="flex h-4 w-4 items-center justify-center rounded-full hover:bg-on-secondary-container/20"
+            @click="removeTag(i, $event)"
+          >
+            <MIcon name="close" :size="12" />
+          </button>
+        </span>
+
+        <input
+          ref="inputEl"
+          :value="inputValue"
+          type="text"
+          class="min-w-[60px] flex-1 bg-transparent text-body-large text-on-surface outline-none placeholder:text-on-surface-variant"
+          :placeholder="!hasValue && (!label || focused) ? placeholder : ''"
+          :disabled="disabled"
+          :readonly="!canAddMore"
+          @input="onInput"
+          @keydown="onKeydown"
+          @paste="onPaste"
+          @focus="focused = true"
+          @blur="focused = false"
+        />
+      </div>
+
+      <label :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute right-2 top-4 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
+        @click.stop="emit('update:modelValue', []); inputValue = ''"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
+    </div>
+
+    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
+  </div>
+</template>

package/src/components/MTextField.vue

@@ -136,7 +136,7 @@ function onInput(event: Event) {
       <div
         v-if="leadingIcon"
         class="pointer-events-none absolute left-3.5 text-on-surface-variant"
-        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        :class="multiline ? 'top-[55%] -translate-y-1/2' : variant === 'filled' ? 'top-5' : 'top-4.5'"
       >
         <MIcon :name="leadingIcon" :size="20" />
       </div>
@@ -169,14 +169,13 @@ function onInput(event: Event) {
         {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
       </label>
 
-      <div v-if="$slots.trailing" class="absolute right-2" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
+      <div v-if="$slots.trailing" class="absolute right-2 top-1/2 -translate-y-1/2">
         <slot name="trailing" />
       </div>
       <button
         v-else-if="showClear"
         type="button"
-        class="absolute right-3 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
-        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        class="absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
         @click="emit('update:modelValue', '')"
       >
         <MIcon name="close" :size="18" />

package/src/components/MWindow.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+    icon?: string
+    width?: string
+    height?: string
+    minWidth?: number
+    minHeight?: number
+    resizable?: boolean
+    draggable?: boolean
+    closable?: boolean
+    minimizable?: boolean
+    x?: number
+    y?: number
+    resetPosition?: boolean
+  }>(),
+  {
+    width: '400px',
+    height: '300px',
+    minWidth: 200,
+    minHeight: 150,
+    resizable: true,
+    draggable: true,
+    closable: true,
+    minimizable: true,
+    x: 50,
+    y: 50,
+    resetPosition: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+  minimize: []
+}>()
+
+// ---- State ----
+const posX = ref(props.x)
+const posY = ref(props.y)
+const winWidth = ref(parseInt(props.width) || 400)
+const winHeight = ref(parseInt(props.height) || 300)
+const minimized = ref(false)
+const zIndex = ref(100)
+
+// Global z-index counter shared across instances
+let globalZIndex = 100
+
+const windowRef = ref<HTMLElement | null>(null)
+
+// ---- Drag state ----
+let isDragging = false
+let dragStartX = 0
+let dragStartY = 0
+let dragStartPosX = 0
+let dragStartPosY = 0
+
+// ---- Resize state ----
+type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
+let isResizing = false
+let resizeDir: ResizeDirection = 'se'
+let resizeStartX = 0
+let resizeStartY = 0
+let resizeStartW = 0
+let resizeStartH = 0
+let resizeStartPosX = 0
+let resizeStartPosY = 0
+
+// ---- Computed ----
+const windowStyle = computed(() => ({
+  left: `${posX.value}px`,
+  top: `${posY.value}px`,
+  width: `${winWidth.value}px`,
+  height: minimized.value ? 'auto' : `${winHeight.value}px`,
+  zIndex: zIndex.value,
+}))
+
+// ---- Bring to front ----
+function bringToFront() {
+  globalZIndex++
+  zIndex.value = globalZIndex
+}
+
+// ---- Drag ----
+function onTitleBarMouseDown(e: MouseEvent) {
+  if (!props.draggable) return
+  // Ignore clicks on buttons inside the title bar
+  if ((e.target as HTMLElement).closest('button')) return
+  e.preventDefault()
+  isDragging = true
+  dragStartX = e.clientX
+  dragStartY = e.clientY
+  dragStartPosX = posX.value
+  dragStartPosY = posY.value
+  bringToFront()
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+// ---- Resize ----
+function onResizeMouseDown(e: MouseEvent, direction: ResizeDirection) {
+  if (!props.resizable) return
+  e.preventDefault()
+  e.stopPropagation()
+  isResizing = true
+  resizeDir = direction
+  resizeStartX = e.clientX
+  resizeStartY = e.clientY
+  resizeStartW = winWidth.value
+  resizeStartH = winHeight.value
+  resizeStartPosX = posX.value
+  resizeStartPosY = posY.value
+  bringToFront()
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+function onMouseMove(e: MouseEvent) {
+  e.preventDefault()
+
+  if (isDragging) {
+    const dx = e.clientX - dragStartX
+    const dy = e.clientY - dragStartY
+    const parent = windowRef.value?.parentElement
+    const maxX = parent ? parent.clientWidth - winWidth.value : Infinity
+    const maxY = parent ? parent.clientHeight - (minimized.value ? 40 : winHeight.value) : Infinity
+    posX.value = Math.max(0, Math.min(maxX, dragStartPosX + dx))
+    posY.value = Math.max(0, Math.min(maxY, dragStartPosY + dy))
+  }
+
+  if (isResizing) {
+    const dx = e.clientX - resizeStartX
+    const dy = e.clientY - resizeStartY
+    const dir = resizeDir
+    const parent = windowRef.value?.parentElement
+    const parentW = parent ? parent.clientWidth : Infinity
+    const parentH = parent ? parent.clientHeight : Infinity
+
+    // East
+    if (dir.includes('e')) {
+      const maxW = parentW - resizeStartPosX
+      winWidth.value = Math.min(maxW, Math.max(props.minWidth, resizeStartW + dx))
+    }
+    // West
+    if (dir.includes('w')) {
+      const maxW = resizeStartPosX + resizeStartW
+      const newW = Math.min(maxW, Math.max(props.minWidth, resizeStartW - dx))
+      posX.value = Math.max(0, resizeStartPosX + (resizeStartW - newW))
+      winWidth.value = newW
+    }
+    // South
+    if (dir.includes('s')) {
+      const maxH = parentH - resizeStartPosY
+      winHeight.value = Math.min(maxH, Math.max(props.minHeight, resizeStartH + dy))
+    }
+    // North
+    if (dir === 'n' || dir === 'ne' || dir === 'nw') {
+      const maxH = resizeStartPosY + resizeStartH
+      const newH = Math.min(maxH, Math.max(props.minHeight, resizeStartH - dy))
+      posY.value = Math.max(0, resizeStartPosY + (resizeStartH - newH))
+      winHeight.value = newH
+    }
+  }
+}
+
+function onMouseUp() {
+  isDragging = false
+  isResizing = false
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+}
+
+// ---- Actions ----
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+  if (props.resetPosition) {
+    posX.value = props.x
+    posY.value = props.y
+    winWidth.value = parseInt(props.width) || 400
+    winHeight.value = parseInt(props.height) || 300
+    minimized.value = false
+  }
+}
+
+function toggleMinimize() {
+  minimized.value = !minimized.value
+  emit('minimize')
+}
+
+// ---- Focus on click ----
+function onWindowMouseDown() {
+  bringToFront()
+}
+
+// ---- Sync initial props ----
+watch(
+  () => props.x,
+  (v) => { posX.value = v },
+)
+watch(
+  () => props.y,
+  (v) => { posY.value = v },
+)
+
+// ---- Cleanup ----
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+})
+
+// Resize handle definitions
+const resizeHandles: { dir: ResizeDirection; class: string; cursor: string }[] = [
+  { dir: 'n', class: 'top-0 left-[10px] right-[10px] h-[5px]', cursor: 'cursor-ns-resize' },
+  { dir: 's', class: 'bottom-0 left-[10px] right-[10px] h-[5px]', cursor: 'cursor-ns-resize' },
+  { dir: 'e', class: 'top-[10px] right-0 bottom-[10px] w-[5px]', cursor: 'cursor-ew-resize' },
+  { dir: 'w', class: 'top-[10px] left-0 bottom-[10px] w-[5px]', cursor: 'cursor-ew-resize' },
+  { dir: 'ne', class: 'top-0 right-0 w-[12px] h-[12px]', cursor: 'cursor-nesw-resize' },
+  { dir: 'nw', class: 'top-0 left-0 w-[12px] h-[12px]', cursor: 'cursor-nwse-resize' },
+  { dir: 'se', class: 'bottom-0 right-0 w-[12px] h-[12px]', cursor: 'cursor-nwse-resize' },
+  { dir: 'sw', class: 'bottom-0 left-0 w-[12px] h-[12px]', cursor: 'cursor-nesw-resize' },
+]
+</script>
+
+<template>
+  <div
+    v-if="modelValue"
+    ref="windowRef"
+    class="absolute flex flex-col rounded-xl bg-surface shadow-elevation-3 overflow-hidden"
+    :style="windowStyle"
+    @mousedown="onWindowMouseDown"
+  >
+    <!-- Title bar -->
+    <div
+      class="flex items-center gap-2 px-4 h-10 bg-surface-container select-none shrink-0"
+      :class="{ 'cursor-move': draggable }"
+      @mousedown="onTitleBarMouseDown"
+    >
+      <slot name="header">
+        <MIcon v-if="icon" :name="icon" :size="18" class="text-on-surface-variant" />
+        <span class="text-title-small font-medium text-on-surface truncate flex-1">
+          {{ title }}
+        </span>
+      </slot>
+
+      <slot name="actions" />
+
+      <button
+        v-if="minimizable"
+        class="text-on-surface-variant hover:bg-on-surface/8 rounded-full w-7 h-7 flex items-center justify-center transition-colors"
+        @click="toggleMinimize"
+      >
+        <MIcon :name="minimized ? 'open_in_full' : 'minimize'" :size="16" />
+      </button>
+
+      <button
+        v-if="closable"
+        class="text-on-surface-variant hover:bg-error/12 hover:text-error rounded-full w-7 h-7 flex items-center justify-center transition-colors"
+        @click="close"
+      >
+        <MIcon name="close" :size="16" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div
+      v-show="!minimized"
+      class="flex-1 overflow-auto"
+    >
+      <slot />
+    </div>
+
+    <!-- Resize handles -->
+    <template v-if="resizable && !minimized">
+      <div
+        v-for="handle in resizeHandles"
+        :key="handle.dir"
+        class="absolute"
+        :class="[handle.class, handle.cursor]"
+        @mousedown="onResizeMouseDown($event, handle.dir)"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.flex-col {
+  transition: height 0.2s ease;
+}
+</style>

package/src/index.ts

@@ -16,6 +16,7 @@ export type { M3Locale } from './composables/useLocale'
 // Components
 export { default as MAbsolute } from './components/MAbsolute.vue'
 export { default as MAlert } from './components/MAlert.vue'
+export { default as MAutocomplete } from './components/MAutocomplete.vue'
 export { default as MAppBar } from './components/MAppBar.vue'
 export { default as MAppLayout } from './components/MAppLayout.vue'
 export { default as MAspectRatio } from './components/MAspectRatio.vue'
@@ -73,6 +74,7 @@ export { default as MMenu } from './components/MMenu.vue'
 export { default as MMenuItem } from './components/MMenuItem.vue'
 export { default as MMaskField } from './components/MMaskField.vue'
 export type { MaskPreset } from './components/MMaskField.vue'
+export { default as MMultiAutocomplete } from './components/MMultiAutocomplete.vue'
 export { default as MMultiSelect } from './components/MMultiSelect.vue'
 export type { MultiSelectOption } from './components/MMultiSelect.vue'
 export { default as MNavigationBar } from './components/MNavigationBar.vue'
@@ -110,6 +112,7 @@ export { default as MSticky } from './components/MSticky.vue'
 export { default as MSubtitle } from './components/MSubtitle.vue'
 export { default as MSwitch } from './components/MSwitch.vue'
 export { default as MTable } from './components/MTable.vue'
+export { default as MTagInput } from './components/MTagInput.vue'
 export { default as MTabs } from './components/MTabs.vue'
 // MTerminal — import from '@m3ui-vue/m3ui-vue/terminal'
 export { default as MText } from './components/MText.vue'
@@ -124,6 +127,7 @@ 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'
+export { default as MWindow } from './components/MWindow.vue'
 
 // Re-export types from components that define them
 export type { EmojiCategory } from './data/emojis'