@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MRichTextEditor.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Underline from '@tiptap/extension-underline'
+import TextAlign from '@tiptap/extension-text-align'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import Highlight from '@tiptap/extension-highlight'
+import Placeholder from '@tiptap/extension-placeholder'
+import { TextStyle } from '@tiptap/extension-text-style'
+import Color from '@tiptap/extension-color'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    placeholder?: string
+    disabled?: boolean
+    minHeight?: string
+  }>(),
+  { placeholder: 'Escribe aquí...', disabled: false, minHeight: '200px' },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const editor = useEditor({
+  content: props.modelValue,
+  editable: !props.disabled,
+  extensions: [
+    StarterKit,
+    Underline,
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    Link.configure({ openOnClick: false }),
+    Image,
+    Highlight.configure({ multicolor: true }),
+    Placeholder.configure({ placeholder: props.placeholder }),
+    TextStyle,
+    Color,
+  ],
+  onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),
+})
+
+watch(() => props.modelValue, (val) => {
+  if (editor.value && editor.value.getHTML() !== val) editor.value.commands.setContent(val)
+})
+
+watch(() => props.disabled, (v) => editor.value?.setEditable(!v))
+
+interface ToolBtn {
+  icon: string
+  label: string
+  action: () => void
+  active?: () => boolean
+}
+
+const toolGroups: ToolBtn[][] = [
+  [
+    { icon: 'format_bold', label: 'Negrita', action: () => editor.value?.chain().focus().toggleBold().run(), active: () => !!editor.value?.isActive('bold') },
+    { icon: 'format_italic', label: 'Cursiva', action: () => editor.value?.chain().focus().toggleItalic().run(), active: () => !!editor.value?.isActive('italic') },
+    { icon: 'format_underlined', label: 'Subrayado', action: () => editor.value?.chain().focus().toggleUnderline().run(), active: () => !!editor.value?.isActive('underline') },
+    { icon: 'format_strikethrough', label: 'Tachado', action: () => editor.value?.chain().focus().toggleStrike().run(), active: () => !!editor.value?.isActive('strike') },
+    { icon: 'ink_highlighter', label: 'Resaltar', action: () => editor.value?.chain().focus().toggleHighlight().run(), active: () => !!editor.value?.isActive('highlight') },
+  ],
+  [
+    { icon: 'format_list_bulleted', label: 'Lista', action: () => editor.value?.chain().focus().toggleBulletList().run(), active: () => !!editor.value?.isActive('bulletList') },
+    { icon: 'format_list_numbered', label: 'Lista numerada', action: () => editor.value?.chain().focus().toggleOrderedList().run(), active: () => !!editor.value?.isActive('orderedList') },
+    { icon: 'format_quote', label: 'Cita', action: () => editor.value?.chain().focus().toggleBlockquote().run(), active: () => !!editor.value?.isActive('blockquote') },
+    { icon: 'code', label: 'Código', action: () => editor.value?.chain().focus().toggleCode().run(), active: () => !!editor.value?.isActive('code') },
+  ],
+  [
+    { icon: 'format_align_left', label: 'Izquierda', action: () => editor.value?.chain().focus().setTextAlign('left').run(), active: () => !!editor.value?.isActive({ textAlign: 'left' }) },
+    { icon: 'format_align_center', label: 'Centro', action: () => editor.value?.chain().focus().setTextAlign('center').run(), active: () => !!editor.value?.isActive({ textAlign: 'center' }) },
+    { icon: 'format_align_right', label: 'Derecha', action: () => editor.value?.chain().focus().setTextAlign('right').run(), active: () => !!editor.value?.isActive({ textAlign: 'right' }) },
+  ],
+  [
+    { icon: 'undo', label: 'Deshacer', action: () => editor.value?.chain().focus().undo().run() },
+    { icon: 'redo', label: 'Rehacer', action: () => editor.value?.chain().focus().redo().run() },
+  ],
+]
+
+function insertLink() {
+  const url = window.prompt('URL del enlace:')
+  if (url) editor.value?.chain().focus().setLink({ href: url }).run()
+}
+
+function insertImage() {
+  const url = window.prompt('URL de la imagen:')
+  if (url) editor.value?.chain().focus().setImage({ src: url }).run()
+}
+
+function setHeading(level: 1 | 2 | 3) {
+  editor.value?.chain().focus().toggleHeading({ level }).run()
+}
+</script>
+
+<template>
+  <div
+    class="overflow-hidden rounded-lg border transition-colors duration-150"
+    :class="disabled ? 'border-outline-variant/50 opacity-60' : 'border-outline-variant focus-within:border-primary'"
+  >
+    <!-- Toolbar -->
+    <div class="flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5">
+      <!-- Heading select -->
+      <select
+        class="h-8 cursor-pointer rounded bg-transparent px-2 text-label-large text-on-surface-variant outline-none hover:bg-on-surface/8"
+        :value="
+          editor?.isActive('heading', { level: 1 }) ? '1'
+          : editor?.isActive('heading', { level: 2 }) ? '2'
+          : editor?.isActive('heading', { level: 3 }) ? '3'
+          : '0'
+        "
+        @change="(e: Event) => {
+          const v = (e.target as HTMLSelectElement).value
+          if (v === '0') editor?.chain().focus().setParagraph().run()
+          else setHeading(Number(v) as 1 | 2 | 3)
+        }"
+      >
+        <option value="0">Párrafo</option>
+        <option value="1">Título 1</option>
+        <option value="2">Título 2</option>
+        <option value="3">Título 3</option>
+      </select>
+
+      <div class="mx-1 h-6 w-px bg-outline-variant" />
+
+      <template v-for="(group, gi) in toolGroups" :key="gi">
+        <button
+          v-for="btn in group"
+          :key="btn.icon"
+          type="button"
+          :title="btn.label"
+          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100"
+          :class="btn.active?.() ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-on-surface/8'"
+          @click="btn.action"
+        >
+          <MIcon :name="btn.icon" :size="20" />
+        </button>
+        <div v-if="gi < toolGroups.length - 1" class="mx-1 h-6 w-px bg-outline-variant" />
+      </template>
+
+      <div class="mx-1 h-6 w-px bg-outline-variant" />
+
+      <button
+        type="button"
+        title="Enlace"
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8"
+        @click="insertLink"
+      >
+        <MIcon name="link" :size="20" />
+      </button>
+      <button
+        type="button"
+        title="Imagen"
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8"
+        @click="insertImage"
+      >
+        <MIcon name="image" :size="20" />
+      </button>
+    </div>
+
+    <!-- Editor content -->
+    <EditorContent
+      :editor="editor"
+      class="rte-content bg-surface px-4 py-3 text-body-large text-on-surface"
+      :style="{ minHeight: minHeight }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.rte-content :deep(.tiptap) {
+  outline: none;
+  min-height: inherit;
+}
+
+.rte-content :deep(.tiptap p.is-editor-empty:first-child::before) {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-on-surface-variant);
+  opacity: 0.5;
+  pointer-events: none;
+  height: 0;
+}
+
+.rte-content :deep(h1) { font-size: var(--text-headline-large); line-height: var(--text-headline-large--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }
+.rte-content :deep(h2) { font-size: var(--text-headline-medium); line-height: var(--text-headline-medium--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }
+.rte-content :deep(h3) { font-size: var(--text-headline-small); line-height: var(--text-headline-small--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }
+.rte-content :deep(p) { margin: 0.5em 0; }
+.rte-content :deep(ul),
+.rte-content :deep(ol) { padding-left: 1.5em; margin: 0.5em 0; }
+.rte-content :deep(blockquote) { border-left: 3px solid var(--color-primary); padding-left: 1em; margin: 0.5em 0; color: var(--color-on-surface-variant); }
+.rte-content :deep(code) { background: var(--color-surface-container-highest); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; }
+.rte-content :deep(pre) { background: var(--color-surface-container-highest); padding: 1em; border-radius: 8px; overflow-x: auto; margin: 0.5em 0; }
+.rte-content :deep(pre code) { background: none; padding: 0; }
+.rte-content :deep(a) { color: var(--color-primary); text-decoration: underline; }
+.rte-content :deep(mark) { background: var(--color-tertiary-container); color: var(--color-on-tertiary-container); padding: 0.1em 0.2em; border-radius: 2px; }
+.rte-content :deep(img) { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }
+</style>

package/src/components/MScheduler.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import MIconButton from './MIconButton.vue'
+
+export interface SchedulerEvent {
+  id: string | number
+  title: string
+  start: string
+  end: string
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success'
+}
+
+const props = withDefaults(
+  defineProps<{
+    events?: SchedulerEvent[]
+    view?: 'week' | 'day'
+    startHour?: number
+    endHour?: number
+    locale?: string
+  }>(),
+  {
+    events: () => [],
+    view: 'week',
+    startHour: 7,
+    endHour: 22,
+    locale: 'es-ES',
+  },
+)
+
+const emit = defineEmits<{
+  eventClick: [SchedulerEvent]
+  slotClick: [{ date: string; hour: number }]
+}>()
+
+const currentDate = ref(new Date())
+const currentView = ref(props.view)
+
+const hours = computed(() =>
+  Array.from({ length: props.endHour - props.startHour }, (_, i) => props.startHour + i),
+)
+
+function startOfWeek(d: Date) {
+  const dt = new Date(d)
+  const day = dt.getDay()
+  const diff = day === 0 ? -6 : 1 - day
+  dt.setDate(dt.getDate() + diff)
+  dt.setHours(0, 0, 0, 0)
+  return dt
+}
+
+const weekDays = computed(() => {
+  const start = startOfWeek(currentDate.value)
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(start)
+    d.setDate(d.getDate() + i)
+    return d
+  })
+})
+
+const visibleDays = computed(() =>
+  currentView.value === 'day' ? [currentDate.value] : weekDays.value,
+)
+
+const todayIso = (() => {
+  const d = new Date()
+  return fmt(d)
+})()
+
+function fmt(d: Date) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+const dayFormat = new Intl.DateTimeFormat(props.locale, { weekday: 'short' })
+const dateFormat = new Intl.DateTimeFormat(props.locale, { day: 'numeric' })
+
+const headerLabel = computed(() => {
+  if (currentView.value === 'day') {
+    return new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
+      .format(currentDate.value)
+  }
+  const start = weekDays.value[0]!
+  const end = weekDays.value[6]!
+  const f = new Intl.DateTimeFormat(props.locale, { day: 'numeric', month: 'short' })
+  return `${f.format(start)} – ${f.format(end)}, ${end.getFullYear()}`
+})
+
+function navigate(delta: number) {
+  const d = new Date(currentDate.value)
+  if (currentView.value === 'week') d.setDate(d.getDate() + delta * 7)
+  else d.setDate(d.getDate() + delta)
+  currentDate.value = d
+}
+
+function goToday() { currentDate.value = new Date() }
+
+function eventsForDayHour(day: Date, hour: number) {
+  const dayStr = fmt(day)
+  return props.events.filter((ev) => {
+    const start = new Date(ev.start)
+    const end = new Date(ev.end)
+    const evDay = fmt(start)
+    if (evDay !== dayStr) return false
+    const evStartHour = start.getHours()
+    const evEndHour = end.getHours() + (end.getMinutes() > 0 ? 1 : 0)
+    return hour >= evStartHour && hour < evEndHour
+  })
+}
+
+function isEventStart(ev: SchedulerEvent, hour: number) {
+  return new Date(ev.start).getHours() === hour
+}
+
+function eventDuration(ev: SchedulerEvent) {
+  const start = new Date(ev.start)
+  const end = new Date(ev.end)
+  return Math.max(1, Math.ceil((end.getTime() - start.getTime()) / 3600000))
+}
+
+function timeLabel(ev: SchedulerEvent) {
+  const f = new Intl.DateTimeFormat(props.locale, { hour: '2-digit', minute: '2-digit' })
+  return `${f.format(new Date(ev.start))} – ${f.format(new Date(ev.end))}`
+}
+
+const eventColors: Record<string, string> = {
+  primary: 'bg-primary-container text-on-primary-container border-primary/30',
+  secondary: 'bg-secondary-container text-on-secondary-container border-secondary/30',
+  tertiary: 'bg-tertiary-container text-on-tertiary-container border-tertiary/30',
+  error: 'bg-error-container text-on-error-container border-error/30',
+  success: 'bg-success-container text-on-success-container border-success/30',
+}
+</script>
+
+<template>
+  <div class="flex flex-col overflow-hidden rounded-lg border border-outline-variant">
+    <!-- Header -->
+    <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-3">
+      <div class="flex items-center gap-1">
+        <MIconButton icon="chevron_left" label="Anterior" :size="36" @click="navigate(-1)" />
+        <MIconButton icon="chevron_right" label="Siguiente" :size="36" @click="navigate(1)" />
+        <button
+          type="button"
+          class="ml-2 cursor-pointer rounded-full border border-outline px-3 py-1 text-label-medium text-on-surface transition-colors hover:bg-on-surface/8"
+          @click="goToday"
+        >
+          Hoy
+        </button>
+      </div>
+
+      <h3 class="text-title-medium font-medium capitalize text-on-surface">{{ headerLabel }}</h3>
+
+      <div class="flex rounded-full bg-surface-container-high p-0.5">
+        <button
+          v-for="v in (['day', 'week'] as const)"
+          :key="v"
+          type="button"
+          class="cursor-pointer rounded-full px-3 py-1 text-label-medium transition-all duration-150"
+          :class="currentView === v ? 'bg-secondary-container text-on-secondary-container shadow-elevation-1' : 'text-on-surface-variant hover:bg-on-surface/8'"
+          @click="currentView = v"
+        >
+          {{ v === 'day' ? 'Día' : 'Semana' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Grid -->
+    <div class="overflow-auto">
+      <table class="w-full border-collapse">
+        <!-- Day headers -->
+        <thead>
+          <tr>
+            <th class="sticky top-0 z-10 w-16 border-b border-r border-outline-variant bg-surface-container p-2" />
+            <th
+              v-for="day in visibleDays"
+              :key="fmt(day)"
+              class="sticky top-0 z-10 border-b border-r border-outline-variant bg-surface-container px-2 py-2 text-center last:border-r-0"
+              :class="fmt(day) === todayIso ? 'bg-primary-container/30' : ''"
+            >
+              <div class="text-label-small uppercase text-on-surface-variant">{{ dayFormat.format(day) }}</div>
+              <div
+                class="mx-auto mt-0.5 flex h-8 w-8 items-center justify-center rounded-full text-title-medium"
+                :class="fmt(day) === todayIso ? 'bg-primary text-on-primary font-medium' : 'text-on-surface'"
+              >
+                {{ dateFormat.format(day) }}
+              </div>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="hour in hours" :key="hour">
+            <!-- Hour label -->
+            <td class="w-16 border-r border-b border-outline-variant/50 p-0 pr-2 text-right align-top">
+              <span class="relative -top-2.5 text-label-small text-on-surface-variant">
+                {{ String(hour).padStart(2, '0') }}:00
+              </span>
+            </td>
+
+            <!-- Day cells -->
+            <td
+              v-for="day in visibleDays"
+              :key="fmt(day)"
+              class="relative h-14 border-r border-b border-outline-variant/50 p-0 last:border-r-0"
+              :class="fmt(day) === todayIso ? 'bg-primary-container/[0.05]' : ''"
+              @click="emit('slotClick', { date: fmt(day), hour })"
+            >
+              <template v-for="ev in eventsForDayHour(day, hour)" :key="ev.id">
+                <button
+                  v-if="isEventStart(ev, hour)"
+                  type="button"
+                  class="absolute inset-x-0.5 top-0.5 z-[5] cursor-pointer overflow-hidden rounded border-l-[3px] px-2 py-1 text-left transition-opacity hover:opacity-90"
+                  :class="eventColors[ev.color ?? 'primary']"
+                  :style="{ height: `calc(${eventDuration(ev) * 100}% - 4px)` }"
+                  @click.stop="emit('eventClick', ev)"
+                >
+                  <p class="truncate text-label-small font-medium">{{ ev.title }}</p>
+                  <p class="truncate text-label-small opacity-70">{{ timeLabel(ev) }}</p>
+                </button>
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/src/components/MSegmentedButton.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+
+export interface SegmentedOption {
+  value: string | number
+  label: string
+  icon?: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<{
+  modelValue: string | number | (string | number)[]
+  options: SegmentedOption[]
+  multiSelect?: boolean
+  density?: 'default' | 'comfortable' | 'compact'
+  color?: 'primary' | 'secondary' | 'tertiary'
+}>(), { multiSelect: false, density: 'default', color: 'primary' })
+
+const emit = defineEmits<{ 'update:modelValue': [string | number | (string | number)[]] }>()
+
+function isSelected(value: string | number, modelValue: string | number | (string | number)[]) {
+  return Array.isArray(modelValue) ? modelValue.includes(value) : modelValue === value
+}
+
+function toggle(opt: SegmentedOption, modelValue: string | number | (string | number)[], multi: boolean) {
+  if (opt.disabled) return
+  if (multi) {
+    const arr = Array.isArray(modelValue) ? [...modelValue] : [modelValue]
+    const idx = arr.indexOf(opt.value)
+    if (idx >= 0) arr.splice(idx, 1)
+    else arr.push(opt.value)
+    emit('update:modelValue', arr)
+  } else {
+    emit('update:modelValue', opt.value)
+  }
+}
+</script>
+
+<template>
+  <div
+    class="inline-flex overflow-hidden rounded-full border border-outline"
+    role="group"
+  >
+    <button
+      v-for="(opt, i) in options"
+      :key="opt.value"
+      type="button"
+      class="relative inline-flex items-center justify-center gap-2 text-label-large font-medium transition-[background-color,color] duration-150 outline-none before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]"
+      :class="[
+        density === 'compact' ? 'h-8 px-3' : density === 'comfortable' ? 'h-10 px-4' : 'h-10 px-6',
+        i > 0 ? 'border-l border-outline' : '',
+        opt.disabled ? 'cursor-not-allowed opacity-[0.38]' : 'cursor-pointer',
+        isSelected(opt.value, modelValue)
+          ? color === 'secondary'
+            ? 'bg-secondary-container text-on-secondary-container'
+            : color === 'tertiary'
+              ? 'bg-tertiary-container text-on-tertiary-container'
+              : 'bg-secondary-container text-on-secondary-container'
+          : 'text-on-surface',
+      ]"
+      :disabled="opt.disabled"
+      :aria-pressed="isSelected(opt.value, modelValue)"
+      @click="toggle(opt, modelValue, multiSelect)"
+    >
+      <MIcon
+        v-if="isSelected(opt.value, modelValue)"
+        name="check"
+        :size="18"
+        class="transition-transform duration-150"
+      />
+      <MIcon v-else-if="opt.icon" :name="opt.icon" :size="18" />
+      <span>{{ opt.label }}</span>
+    </button>
+  </div>
+</template>