@m3ui-vue/m3ui-vue 0.4.7 → 0.5.0

package/src/components/MTextField.vue

@@ -10,7 +10,8 @@ const props = withDefaults(
     label: string;
     type?: string;
     variant?: "filled" | "outlined";
-    error?: string;
+    error?: boolean;
+    errorLabel?: string;
     hint?: string;
     disabled?: boolean;
     required?: boolean;
@@ -188,7 +189,7 @@ function onInput(event: Event) {
       </button>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 </template>

package/src/components/MTimePicker.vue

@@ -9,7 +9,8 @@ const props = withDefaults(defineProps<{
   label?: string
   placeholder?: string
   disabled?: boolean
-  error?: string
+  error?: boolean
+  errorLabel?: string
   hint?: string
   minuteStep?: number
   use24h?: boolean
@@ -148,7 +149,7 @@ onUnmounted(() => {
       </label>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
 
     <Teleport to="body">

package/src/components/MWindow.vue

@@ -257,11 +257,11 @@ onUnmounted(() => {
 
 // Resize handle definitions
 const resizeHandles: { dir: ResizeDirection; class: string; cursor: string }[] = [
-  { 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: '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' },
+  { dir: 's', class: 'bottom-0 left-[20px] right-[20px] h-[8px]', cursor: 'cursor-ns-resize' },
+  { dir: 'e', class: 'top-[20px] right-0 bottom-[20px] w-[8px]', cursor: 'cursor-ew-resize' },
+  { dir: 'w', class: 'top-[20px] left-0 bottom-[20px] w-[8px]', cursor: 'cursor-ew-resize' },
+  { dir: 'se', class: 'bottom-0 right-0 w-[20px] h-[20px]', cursor: 'cursor-nwse-resize' },
+  { dir: 'sw', class: 'bottom-0 left-0 w-[20px] h-[20px]', cursor: 'cursor-nesw-resize' },
 ]
 </script>
 

package/src/index.ts

@@ -81,6 +81,7 @@ export { default as MLoadingOverlay } from './components/MLoadingOverlay.vue'
 // MMarkdown — import from '@m3ui-vue/m3ui-vue/markdown'
 export { default as MMasonry } from './components/MMasonry.vue'
 export { default as MMenu } from './components/MMenu.vue'
+export { default as MMenuDivider } from './components/MMenuDivider.vue'
 export { default as MMenuItem } from './components/MMenuItem.vue'
 export { default as MMaskField } from './components/MMaskField.vue'
 export type { MaskPreset } from './components/MMaskField.vue'
@@ -151,7 +152,6 @@ export type { Placement } from './components/MAbsolute.vue'
 export type { BadgePosition, BadgeOverlap } from './components/MBadge.vue'
 export type { CalendarEvent } from './components/MCalendar.vue'
 export type { CarouselItem } from './components/MCarousel.vue'
-export type { ContextMenuItem } from './components/MContextMenu.vue'
 export type { DataTableColumn, DataTableFetchParams } from './components/MDataTable.vue'
 export type { DateRange } from './components/MDateRangePicker.vue'
 export type { DragDropItem } from './components/MDragDropList.vue'

package/dist/components/_MContextMenuPanel.vue.d.ts

@@ -1,13 +0,0 @@
-import type { ContextMenuItem } from "./MContextMenu.vue";
-type __VLS_Props = {
-    items: ContextMenuItem[];
-    x: number;
-    y: number;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/src/components/_MContextMenuPanel.vue

@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, nextTick } from "vue";
-import MIcon from "./MIcon.vue";
-import MContextMenuPanel from "./_MContextMenuPanel.vue";
-import type { ContextMenuItem } from "./MContextMenu.vue";
-
-const props = defineProps<{
-  items: ContextMenuItem[];
-  x: number;
-  y: number;
-}>();
-
-const emit = defineEmits<{ close: [] }>();
-
-const panel = ref<HTMLElement | null>(null);
-const panelX = ref(props.x);
-const panelY = ref(props.y);
-const activeIndex = ref<number | null>(null);
-const subPos = ref({ x: 0, y: 0 });
-
-onMounted(async () => {
-  await nextTick();
-  if (!panel.value) return;
-  const el = panel.value;
-  panelX.value = Math.min(props.x, window.innerWidth - el.offsetWidth - 8);
-  panelY.value = Math.min(props.y, window.innerHeight - el.offsetHeight - 8);
-});
-
-function onItemMouseEnter(index: number, item: ContextMenuItem, e: MouseEvent) {
-  if (item.divider || item.disabled) {
-    activeIndex.value = null;
-    return;
-  }
-  if (!item.children?.length) {
-    activeIndex.value = null;
-    return;
-  }
-
-  activeIndex.value = index;
-  const itemEl = e.currentTarget as HTMLElement;
-  const itemRect = itemEl.getBoundingClientRect();
-  const panelRect = panel.value!.getBoundingClientRect();
-
-  let x = panelRect.right;
-  let y = itemRect.top;
-  if (x + 220 > window.innerWidth) x = panelRect.left - 220;
-  if (y + 300 > window.innerHeight) y = Math.max(8, window.innerHeight - 300);
-
-  subPos.value = { x, y };
-}
-
-function onItemClick(item: ContextMenuItem) {
-  if (item.disabled || item.divider || item.children?.length) return;
-  item.onClick?.();
-  emit("close");
-}
-
-function onPanelMouseLeave(e: MouseEvent) {
-  // Don't close if the mouse moved to another context menu panel (sibling sub-panel)
-  const related = e.relatedTarget as Element | null;
-  if (related?.closest(".m3-ctx-panel")) return;
-  activeIndex.value = null;
-}
-</script>
-
-<template>
-  <div
-    ref="panel"
-    class="m3-ctx-panel absolute z-201 min-w-[200px] overflow-hidden rounded-lg bg-surface-container shadow-elevation-2"
-    :style="{ left: `${panelX}px`, top: `${panelY}px` }"
-    @mouseleave="onPanelMouseLeave"
-  >
-    <div class="py-1">
-      <template v-for="(item, i) in items" :key="i">
-        <hr v-if="item.divider" class="my-1 border-outline-variant" />
-
-        <component
-          v-else
-          :is="item.to && !item.disabled ? 'RouterLink' : 'div'"
-          :to="item.to && !item.disabled ? item.to : undefined"
-          class="relative flex cursor-default select-none items-center gap-3 px-4 py-2.5 text-body-large"
-          :class="[
-            item.disabled
-              ? 'cursor-not-allowed opacity-38 text-on-surface'
-              : item.danger
-                ? 'cursor-pointer text-error hover:bg-error/8'
-                : 'cursor-pointer text-on-surface hover:bg-on-surface/8',
-            activeIndex === i && !item.disabled
-              ? item.danger
-                ? 'bg-error/8'
-                : 'bg-on-surface/8'
-              : '',
-          ]"
-          @mouseenter="onItemMouseEnter(i, item, $event)"
-          @click="onItemClick(item)"
-        >
-          <MIcon
-            v-if="item.icon"
-            :name="item.icon"
-            :size="18"
-            class="shrink-0"
-            :class="item.danger ? 'text-error' : 'text-on-surface-variant'"
-          />
-          <span v-else class="w-[18px] shrink-0" />
-
-          <span class="flex-1">{{ item.label }}</span>
-
-          <span
-            v-if="item.shortcut"
-            class="text-label-small text-on-surface-variant"
-          >
-            {{ item.shortcut }}
-          </span>
-
-          <MIcon
-            v-if="item.children?.length"
-            name="chevron_right"
-            :size="18"
-            class="shrink-0 text-on-surface-variant"
-          />
-        </component>
-      </template>
-    </div>
-  </div>
-
-  <!-- Sub-panel: sibling in the same Teleport layer.
-       No <Transition> wrapper — MContextMenuPanel is a fragment and cannot be
-       animated by Vue's Transition (produces a console warning). -->
-  <MContextMenuPanel
-    v-if="activeIndex !== null && items[activeIndex]?.children?.length"
-    :key="activeIndex"
-    :items="items[activeIndex]!.children!"
-    :x="subPos.x"
-    :y="subPos.y"
-    @close="emit('close')"
-  />
-</template>