@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MTour.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
+import MButton from './MButton.vue'
+import MIcon from './MIcon.vue'
+
+export interface TourStep {
+  target: string
+  title: string
+  content: string
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    steps: TourStep[]
+  }>(),
+  {},
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  finish: []
+}>()
+
+const currentStep = ref(0)
+const tooltipStyle = ref<Record<string, string>>({})
+const arrowStyle = ref<Record<string, string>>({})
+const placement = ref<'top' | 'bottom' | 'left' | 'right'>('bottom')
+
+const step = computed(() => props.steps[currentStep.value])
+const isFirst = computed(() => currentStep.value === 0)
+const isLast = computed(() => currentStep.value === props.steps.length - 1)
+
+function positionTooltip() {
+  if (!step.value) return
+  const el = document.querySelector(step.value.target) as HTMLElement | null
+  if (!el) return
+
+  const rect = el.getBoundingClientRect()
+  const pad = 12
+  const arrowSize = 8
+  const p = step.value.placement ?? 'bottom'
+  placement.value = p
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+  const s: Record<string, string> = { position: 'fixed' }
+  const a: Record<string, string> = { position: 'absolute' }
+
+  switch (p) {
+    case 'bottom':
+      s.top = `${rect.bottom + pad}px`
+      s.left = `${rect.left + rect.width / 2}px`
+      s.transform = 'translateX(-50%)'
+      a.top = `-${arrowSize}px`
+      a.left = '50%'
+      a.transform = 'translateX(-50%)'
+      a.borderBottom = `${arrowSize}px solid var(--color-surface-container-high)`
+      a.borderLeft = `${arrowSize}px solid transparent`
+      a.borderRight = `${arrowSize}px solid transparent`
+      break
+    case 'top':
+      s.bottom = `${window.innerHeight - rect.top + pad}px`
+      s.left = `${rect.left + rect.width / 2}px`
+      s.transform = 'translateX(-50%)'
+      a.bottom = `-${arrowSize}px`
+      a.left = '50%'
+      a.transform = 'translateX(-50%)'
+      a.borderTop = `${arrowSize}px solid var(--color-surface-container-high)`
+      a.borderLeft = `${arrowSize}px solid transparent`
+      a.borderRight = `${arrowSize}px solid transparent`
+      break
+    case 'left':
+      s.top = `${rect.top + rect.height / 2}px`
+      s.right = `${window.innerWidth - rect.left + pad}px`
+      s.transform = 'translateY(-50%)'
+      a.top = '50%'
+      a.right = `-${arrowSize}px`
+      a.transform = 'translateY(-50%)'
+      a.borderLeft = `${arrowSize}px solid var(--color-surface-container-high)`
+      a.borderTop = `${arrowSize}px solid transparent`
+      a.borderBottom = `${arrowSize}px solid transparent`
+      break
+    case 'right':
+      s.top = `${rect.top + rect.height / 2}px`
+      s.left = `${rect.right + pad}px`
+      s.transform = 'translateY(-50%)'
+      a.top = '50%'
+      a.left = `-${arrowSize}px`
+      a.transform = 'translateY(-50%)'
+      a.borderRight = `${arrowSize}px solid var(--color-surface-container-high)`
+      a.borderTop = `${arrowSize}px solid transparent`
+      a.borderBottom = `${arrowSize}px solid transparent`
+      break
+  }
+
+  tooltipStyle.value = s
+  arrowStyle.value = a
+}
+
+function highlightTarget() {
+  if (!step.value) return
+  document.querySelectorAll('.m3-tour-highlight').forEach((el) => el.classList.remove('m3-tour-highlight'))
+  const el = document.querySelector(step.value.target)
+  el?.classList.add('m3-tour-highlight')
+}
+
+function clearHighlight() {
+  document.querySelectorAll('.m3-tour-highlight').forEach((el) => el.classList.remove('m3-tour-highlight'))
+}
+
+function goNext() {
+  if (isLast.value) {
+    close()
+    emit('finish')
+  } else {
+    currentStep.value++
+  }
+}
+
+function goPrev() {
+  if (!isFirst.value) currentStep.value--
+}
+
+function close() {
+  clearHighlight()
+  currentStep.value = 0
+  emit('update:modelValue', false)
+}
+
+watch([() => props.modelValue, currentStep], () => {
+  if (props.modelValue) {
+    nextTick(() => {
+      highlightTarget()
+      positionTooltip()
+    })
+  }
+})
+
+watch(() => props.modelValue, (v) => {
+  if (!v) clearHighlight()
+})
+
+onBeforeUnmount(clearHighlight)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="m3-tour">
+      <div v-if="modelValue && step" class="fixed inset-0 z-[100]">
+        <!-- Overlay -->
+        <div class="absolute inset-0 bg-black/40" @click="close" />
+
+        <!-- Tooltip -->
+        <div
+          class="z-[101] w-80 rounded-xl bg-surface-container-high p-5 shadow-elevation-3"
+          :style="tooltipStyle"
+        >
+          <!-- Arrow -->
+          <div class="h-0 w-0" :style="arrowStyle" />
+
+          <!-- Step indicator -->
+          <div class="mb-2 flex items-center justify-between">
+            <span class="text-label-small text-on-surface-variant">
+              {{ currentStep + 1 }} / {{ steps.length }}
+            </span>
+            <button
+              type="button"
+              class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8"
+              @click="close"
+            >
+              <MIcon name="close" :size="16" />
+            </button>
+          </div>
+
+          <h3 class="mb-1 text-title-medium font-medium text-on-surface">{{ step.title }}</h3>
+          <p class="mb-4 text-body-medium text-on-surface-variant">{{ step.content }}</p>
+
+          <!-- Progress dots -->
+          <div class="mb-4 flex justify-center gap-1.5">
+            <div
+              v-for="(_, i) in steps"
+              :key="i"
+              class="h-1.5 rounded-full transition-all duration-200"
+              :class="i === currentStep ? 'w-6 bg-primary' : 'w-1.5 bg-outline-variant'"
+            />
+          </div>
+
+          <!-- Actions -->
+          <div class="flex justify-between">
+            <MButton
+              v-if="!isFirst"
+              variant="text"
+              @click="goPrev"
+            >
+              Anterior
+            </MButton>
+            <span v-else />
+            <MButton @click="goNext">
+              {{ isLast ? 'Finalizar' : 'Siguiente' }}
+            </MButton>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+.m3-tour-highlight {
+  position: relative;
+  z-index: 101 !important;
+  box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 9999px rgba(0, 0, 0, 0.4);
+  border-radius: 8px;
+}
+
+.m3-tour-enter-active,
+.m3-tour-leave-active {
+  transition: opacity 0.2s ease;
+}
+.m3-tour-enter-from,
+.m3-tour-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/MTransferList.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+import MCheckbox from './MCheckbox.vue'
+
+export interface TransferItem {
+  value: string | number
+  label: string
+  icon?: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: (string | number)[]
+  items: TransferItem[]
+  sourceTitle?: string
+  targetTitle?: string
+  filterable?: boolean
+}>(), { sourceTitle: 'Disponibles', targetTitle: 'Seleccionados', filterable: false })
+
+const emit = defineEmits<{ 'update:modelValue': [(string | number)[]] }>()
+
+const checkedSource = ref<Set<string | number>>(new Set())
+const checkedTarget = ref<Set<string | number>>(new Set())
+const sourceSearch = ref('')
+const targetSearch = ref('')
+
+const sourceItems = computed(() => {
+  const selected = new Set(props.modelValue)
+  let list = props.items.filter(i => !selected.has(i.value))
+  if (sourceSearch.value) {
+    const q = sourceSearch.value.toLowerCase()
+    list = list.filter(i => i.label.toLowerCase().includes(q))
+  }
+  return list
+})
+
+const targetItems = computed(() => {
+  const selected = new Set(props.modelValue)
+  let list = props.items.filter(i => selected.has(i.value))
+  if (targetSearch.value) {
+    const q = targetSearch.value.toLowerCase()
+    list = list.filter(i => i.label.toLowerCase().includes(q))
+  }
+  return list
+})
+
+function toggleSource(value: string | number) {
+  const s = new Set(checkedSource.value)
+  s.has(value) ? s.delete(value) : s.add(value)
+  checkedSource.value = s
+}
+function toggleTarget(value: string | number) {
+  const s = new Set(checkedTarget.value)
+  s.has(value) ? s.delete(value) : s.add(value)
+  checkedTarget.value = s
+}
+
+function moveRight() {
+  const next = [...props.modelValue, ...checkedSource.value]
+  emit('update:modelValue', next)
+  checkedSource.value = new Set()
+}
+function moveLeft() {
+  const remove = checkedTarget.value
+  emit('update:modelValue', props.modelValue.filter(v => !remove.has(v)))
+  checkedTarget.value = new Set()
+}
+function moveAllRight() {
+  const all = sourceItems.value.map(i => i.value)
+  emit('update:modelValue', [...props.modelValue, ...all])
+  checkedSource.value = new Set()
+}
+function moveAllLeft() {
+  const keep = targetItems.value.map(i => i.value)
+  emit('update:modelValue', props.modelValue.filter(v => !new Set(keep).has(v)))
+  checkedTarget.value = new Set()
+}
+</script>
+
+<template>
+  <div class="flex items-stretch gap-2">
+    <!-- Source list -->
+    <div class="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-outline-variant">
+      <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-2">
+        <span class="text-label-large font-medium text-on-surface">{{ sourceTitle }}</span>
+        <span class="text-label-small text-on-surface-variant">{{ sourceItems.length }}</span>
+      </div>
+      <div v-if="filterable" class="border-b border-outline-variant px-3 py-2">
+        <input
+          v-model="sourceSearch"
+          type="text"
+          placeholder="Buscar..."
+          class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
+        />
+      </div>
+      <div class="flex-1 overflow-y-auto" style="max-height: 240px">
+        <button
+          v-for="item in sourceItems"
+          :key="item.value"
+          type="button"
+          class="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-on-surface/4"
+          @click="toggleSource(item.value)"
+        >
+          <MCheckbox :model-value="checkedSource.has(item.value)" @update:model-value="toggleSource(item.value)" />
+          <MIcon v-if="item.icon" :name="item.icon" :size="18" class="shrink-0 text-on-surface-variant" />
+          <span class="flex-1 truncate text-body-medium text-on-surface">{{ item.label }}</span>
+        </button>
+        <p v-if="!sourceItems.length" class="px-3 py-4 text-center text-body-small text-on-surface-variant">
+          Sin elementos
+        </p>
+      </div>
+    </div>
+
+    <!-- Transfer buttons -->
+    <div class="flex flex-col items-center justify-center gap-1">
+      <MIconButton
+        icon="keyboard_double_arrow_right"
+        label="Mover todos a la derecha"
+        :size="36"
+        :disabled="!sourceItems.length"
+        @click="moveAllRight"
+      />
+      <MIconButton
+        icon="chevron_right"
+        label="Mover seleccionados a la derecha"
+        variant="tonal"
+        :size="36"
+        :disabled="!checkedSource.size"
+        @click="moveRight"
+      />
+      <MIconButton
+        icon="chevron_left"
+        label="Mover seleccionados a la izquierda"
+        variant="tonal"
+        :size="36"
+        :disabled="!checkedTarget.size"
+        @click="moveLeft"
+      />
+      <MIconButton
+        icon="keyboard_double_arrow_left"
+        label="Mover todos a la izquierda"
+        :size="36"
+        :disabled="!targetItems.length"
+        @click="moveAllLeft"
+      />
+    </div>
+
+    <!-- Target list -->
+    <div class="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-outline-variant">
+      <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-2">
+        <span class="text-label-large font-medium text-on-surface">{{ targetTitle }}</span>
+        <span class="text-label-small text-on-surface-variant">{{ targetItems.length }}</span>
+      </div>
+      <div v-if="filterable" class="border-b border-outline-variant px-3 py-2">
+        <input
+          v-model="targetSearch"
+          type="text"
+          placeholder="Buscar..."
+          class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
+        />
+      </div>
+      <div class="flex-1 overflow-y-auto" style="max-height: 240px">
+        <button
+          v-for="item in targetItems"
+          :key="item.value"
+          type="button"
+          class="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-on-surface/4"
+          @click="toggleTarget(item.value)"
+        >
+          <MCheckbox :model-value="checkedTarget.has(item.value)" @update:model-value="toggleTarget(item.value)" />
+          <MIcon v-if="item.icon" :name="item.icon" :size="18" class="shrink-0 text-on-surface-variant" />
+          <span class="flex-1 truncate text-body-medium text-on-surface">{{ item.label }}</span>
+        </button>
+        <p v-if="!targetItems.length" class="px-3 py-4 text-center text-body-small text-on-surface-variant">
+          Sin elementos
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/MTree.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, provide, ref, type Ref } from 'vue'
+import MTreeNode from './_MTreeNode.vue'
+import MIcon from './MIcon.vue'
+
+// ── Public types ────────────────────────────────────────────────────────────
+
+export interface TreeNode {
+  id: string | number
+  label: string
+  icon?: string
+  children?: TreeNode[]
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+/** Shape injected into every _MTreeNode via provide/inject. */
+export interface TreeContext {
+  selected: Ref<string | number | null>
+  checkedSet: Ref<Set<string | number>>
+  expandedIds: Ref<Set<string | number>>
+  checkable: Ref<boolean>
+  selectNode: (node: TreeNode) => void
+  toggleExpand: (id: string | number) => void
+  toggleCheck: (node: TreeNode) => void
+  getDescendantIds: (node: TreeNode) => (string | number)[]
+  getLeafIds: (node: TreeNode) => (string | number)[]
+}
+
+// ── Props & emits ───────────────────────────────────────────────────────────
+
+const props = withDefaults(
+  defineProps<{
+    nodes: TreeNode[]
+    /** Currently selected node id (single-select). */
+    selected?: string | number | null
+    /** Checked node ids (checkable multi-select). */
+    checked?: (string | number)[]
+    /** Show checkboxes with cascade selection. */
+    checkable?: boolean
+    /**
+     * Which nodes start expanded.
+     * 'all' | 'none' | array of ids (default: 'none').
+     */
+    defaultExpanded?: (string | number)[] | 'all' | 'none'
+    emptyText?: string
+  }>(),
+  {
+    selected: null,
+    checked: () => [],
+    checkable: false,
+    defaultExpanded: 'none',
+    emptyText: 'Sin elementos',
+  },
+)
+
+const emit = defineEmits<{
+  'update:selected': [string | number | null]
+  'update:checked': [(string | number)[]]
+  'node-click': [TreeNode]
+}>()
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function getDescendantIds(node: TreeNode): (string | number)[] {
+  return [node.id, ...(node.children ?? []).flatMap(getDescendantIds)]
+}
+
+function getLeafIds(node: TreeNode): (string | number)[] {
+  if (!node.children?.length) return [node.id]
+  return node.children.flatMap(getLeafIds)
+}
+
+function getAllIds(nodes: TreeNode[]): (string | number)[] {
+  return nodes.flatMap((n) => getDescendantIds(n))
+}
+
+// ── Expand state ────────────────────────────────────────────────────────────
+
+function buildInitialExpanded(): Set<string | number> {
+  if (props.defaultExpanded === 'all') return new Set(getAllIds(props.nodes))
+  if (props.defaultExpanded === 'none') return new Set()
+  return new Set(props.defaultExpanded)
+}
+
+const expandedIds = ref<Set<string | number>>(buildInitialExpanded())
+
+function toggleExpand(id: string | number) {
+  const next = new Set(expandedIds.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expandedIds.value = next
+}
+
+// ── Selection ───────────────────────────────────────────────────────────────
+
+const selectedRef = computed(() => props.selected ?? null)
+
+function selectNode(node: TreeNode) {
+  emit('update:selected', selectedRef.value === node.id ? null : node.id)
+  emit('node-click', node)
+}
+
+// ── Checkable ───────────────────────────────────────────────────────────────
+
+const checkedSet = computed(() => new Set(props.checked))
+
+function toggleCheck(node: TreeNode) {
+  const leafIds = getLeafIds(node)
+  const allLeafsChecked = leafIds.every((id) => checkedSet.value.has(id))
+  const next = new Set(props.checked)
+  if (allLeafsChecked) {
+    // Remove leaf ids + clean up any stale branch ids
+    getDescendantIds(node).forEach((id) => next.delete(id))
+  } else {
+    leafIds.forEach((id) => next.add(id))
+  }
+  emit('update:checked', [...next])
+}
+
+// ── Provide context ─────────────────────────────────────────────────────────
+
+provide<TreeContext>('m-tree', {
+  selected: selectedRef,
+  checkedSet,
+  expandedIds,
+  checkable: computed(() => props.checkable),
+  selectNode,
+  toggleExpand,
+  toggleCheck,
+  getDescendantIds,
+  getLeafIds,
+})
+
+// ── Expose expand/collapse utilities ────────────────────────────────────────
+
+function expandAll() { expandedIds.value = new Set(getAllIds(props.nodes)) }
+function collapseAll() { expandedIds.value = new Set() }
+
+defineExpose({ expandAll, collapseAll })
+</script>
+
+<template>
+  <div role="tree" class="flex flex-col">
+    <template v-if="nodes.length">
+      <MTreeNode
+        v-for="node in nodes"
+        :key="node.id"
+        :node="node"
+        :depth="0"
+      >
+        <!-- Forward all slots down the recursive tree -->
+        <template v-for="(_, name) in $slots" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps ?? {}" />
+        </template>
+      </MTreeNode>
+    </template>
+
+    <div v-else class="flex flex-col items-center gap-2 py-10 text-on-surface-variant">
+      <MIcon name="account_tree" :size="32" class="opacity-30" />
+      <p class="text-body-medium">{{ emptyText }}</p>
+    </div>
+  </div>
+</template>