@maz-ui/mcp 4.1.1 → 4.1.3

package/docs/src/demo/ThemeEditorPage.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import type { ThemePreset } from '@maz-ui/themes'
+import { useTheme } from '@maz-ui/themes/composables/useTheme'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
+import { useToast } from 'maz-ui/composables'
+import { codeToHtml } from 'shiki'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+import ColorPicker from './ColorPicker.vue'
+import DemoAuthPage from './DemoAuthPage.vue'
+import DemoDashboardPage from './DemoDashboardPage.vue'
+import DemoProductPage from './DemoProductPage.vue'
+
+const { updateTheme, isDark, toggleDarkMode, presetName } = useTheme()
+const toast = useToast()
+
+const currentTab = ref(1)
+const editingMode = ref<'light' | 'dark'>('light')
+const exportedCode = ref('')
+const highlightedCode = ref('')
+const showExportModal = ref(false)
+const isTransitioning = ref(false)
+
+const themeData = reactive<ThemePreset>({
+  name: mazUi.name,
+  foundation: { ...mazUi.foundation },
+  colors: {
+    light: { ...mazUi.colors.light },
+    dark: { ...mazUi.colors.dark },
+  },
+})
+
+const originalTheme = {
+  name: mazUi.name,
+  foundation: { ...mazUi.foundation },
+  colors: {
+    light: { ...mazUi.colors.light },
+    dark: { ...mazUi.colors.dark },
+  },
+}
+
+const colorCategories = [
+  {
+    name: 'Base Colors',
+    colors: ['background', 'foreground', 'border', 'muted', 'overlay', 'shadow'] as const,
+  },
+  {
+    name: 'Colors',
+    colors: ['primary', 'primary-foreground', 'secondary', 'secondary-foreground', 'accent', 'accent-foreground', 'success', 'success-foreground', 'warning', 'warning-foreground', 'destructive', 'destructive-foreground', 'info', 'info-foreground', 'contrast', 'contrast-foreground'] as const,
+  },
+]
+
+watch([themeData, editingMode], async () => {
+  await nextTick()
+  await updateTheme(themeData)
+}, { deep: true })
+
+function handleThemeModeToggle() {
+  isTransitioning.value = true
+  toggleDarkMode()
+
+  setTimeout(() => {
+    isTransitioning.value = false
+  }, 500)
+}
+
+function resetTheme() {
+  Object.assign(themeData.foundation, originalTheme.foundation)
+  Object.assign(themeData.colors.light, originalTheme.colors.light)
+  Object.assign(themeData.colors.dark, originalTheme.colors.dark)
+}
+
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text).then(() => {
+    showExportModal.value = false
+  })
+
+  toast.success('Theme copied to clipboard', {
+    position: 'top',
+  })
+}
+
+async function exportTheme() {
+  const themeCode = `import type { ThemePreset } from '@maz-ui/themes'
+
+export const customTheme: ThemePreset = ${JSON.stringify(themeData, null, 2)
+// Escape single quotes within string values
+  .replace(/: "([^"]*)"/g, (match, value) => {
+    const escapedValue = value.replace(/'/g, '\\\'')
+    return `: '${escapedValue}'`
+  })
+// Remove quotes from top-level keys and nested object keys
+  .replace(/^(\s*)"(name|foundation|colors)":/gm, '$1$2:')
+  .replace(/^(\s*)"(light|dark)":/gm, '$1$2:')}`
+
+  exportedCode.value = themeCode
+
+  try {
+    const html = await codeToHtml(themeCode, {
+      lang: 'typescript',
+      theme: isDark.value ? 'tokyo-night' : 'github-dark',
+    })
+    highlightedCode.value = html
+  }
+  catch (error) {
+    console.error('Failed to highlight code:', error)
+    highlightedCode.value = ''
+  }
+
+  showExportModal.value = true
+}
+
+const foundationInputs = computed(() => [
+  {
+    key: 'base-font-size',
+    label: 'Base Font Size',
+    type: 'text',
+    placeholder: '14px',
+  },
+  {
+    key: 'font-family',
+    label: 'Font Family',
+    type: 'text',
+    placeholder: 'Manrope, sans-serif',
+  },
+  {
+    key: 'radius',
+    label: 'Border Radius',
+    type: 'text',
+    placeholder: '0.7rem',
+  },
+  {
+    key: 'border-width',
+    label: 'Border Width',
+    type: 'text',
+    placeholder: '0.0625rem',
+  },
+])
+
+const currentColors = computed(() => themeData.colors[editingMode.value])
+
+function formatColorName(colorName: string): string {
+  return colorName
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+</script>
+
+<template>
+  <div class="vp-raw theme-configurator" :class="{ 'no-transitions': isTransitioning }">
+    <div class="maz-grid maz-min-h-[80vh] maz-grid-cols-1 maz-gap-4 lg:maz-grid-cols-12">
+      <!-- Editor Panel -->
+      <div class="maz-space-y-6 lg:maz-col-span-4 lg:maz-border-r lg:maz-pr-4">
+        <h2 class="maz-text-2xl maz-text-foreground">
+          Editor
+        </h2>
+
+        <div class="maz-flex maz-flex-col maz-gap-2 mob-l:maz-flex-row">
+          <MazBtn
+            size="md"
+            block
+            color="secondary"
+            @click="resetTheme"
+          >
+            Reset theme
+          </MazBtn>
+          <MazBtn
+            size="md"
+            block
+            color="primary"
+            @click="exportTheme"
+          >
+            Export theme
+          </MazBtn>
+        </div>
+
+        <MazCard block title="Base preset">
+          <MazRadioButtons
+            :model-value="presetName"
+            size="sm"
+            :options="[
+              {
+                label: 'Maz-UI',
+                value: 'maz-ui',
+              },
+              {
+                label: 'Pristine',
+                value: 'pristine',
+              },
+              {
+                label: 'Ocean',
+                value: 'ocean',
+              }, {
+                label: 'Obsidian',
+                value: 'obsidian',
+              }]"
+            @update:model-value="updateTheme($event)"
+          />
+        </MazCard>
+
+        <!-- Foundation Settings -->
+        <MazCard title="Foundation" block>
+          <div
+            class="maz-flex maz-flex-col maz-gap-3"
+          >
+            <template
+              v-for="input in foundationInputs"
+              :key="input.key"
+            >
+              <MazInput
+                v-model="themeData.foundation[input.key as keyof typeof themeData.foundation]"
+                :label="input.label"
+                :placeholder="input.placeholder"
+                size="sm"
+                block
+                debounce
+              />
+            </template>
+          </div>
+        </MazCard>
+
+        <!-- Colors Settings -->
+        <MazCard block>
+          <template #title>
+            <div class="maz-flex maz-w-full maz-items-center maz-justify-between">
+              <h3 class="maz-text-base">
+                Colors
+              </h3>
+
+              <div class="maz-flex maz-items-center maz-gap-2">
+                <label for="dark-mode-switch" class="maz-cursor-pointer maz-text-sm">
+                  Edit dark colors
+                </label>
+                <MazSwitch
+                  id="dark-mode-switch"
+                  :model-value="editingMode === 'dark'"
+                  @update:model-value="editingMode = $event ? 'dark' : 'light'; handleThemeModeToggle()"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="maz-space-y-6">
+            <div
+              v-for="category in colorCategories"
+              :key="category.name"
+              class="maz-space-y-4"
+            >
+              <h4 class="maz-border-border maz-border-b maz-pb-2 maz-text-sm maz-font-semibold maz-text-foreground">
+                {{ category.name }}
+              </h4>
+
+              <div class="maz-grid maz-grid-cols-2 maz-gap-4">
+                <ColorPicker
+                  v-for="colorKey in category.colors"
+                  :key="`${editingMode}-${colorKey}`"
+                  v-model="currentColors[colorKey]"
+                  :label="formatColorName(colorKey)"
+                  class="maz-w-full"
+                />
+              </div>
+            </div>
+          </div>
+        </MazCard>
+      </div>
+
+      <!-- Preview Panel -->
+      <div class="lg:maz-col-span-8">
+        <div class="maz-sticky maz-top-4">
+          <div class="maz-mb-4 maz-flex maz-items-center maz-justify-between">
+            <h2 class="maz-text-2xl maz-text-foreground">
+              Preview
+            </h2>
+          </div>
+
+          <MazTabs v-model="currentTab">
+            <MazTabsBar
+              :items="['Dashboard', 'Product', 'Authentication']"
+              class="maz-mb-4"
+            />
+
+            <MazTabsContent>
+              <MazTabsContentItem :tab="1">
+                <MazCard
+                  bordered
+                  :padding="false"
+                  overflow-hidden
+                  class="maz-max-h-[70vh] maz-w-full maz-overflow-y-auto"
+                >
+                  <DemoDashboardPage :delay="0" />
+                </MazCard>
+              </MazTabsContentItem>
+
+              <MazTabsContentItem :tab="2">
+                <MazCard
+                  bordered
+                  :padding="false"
+                  overflow-hidden
+                  class="maz-max-h-[70vh] maz-w-full maz-overflow-y-auto"
+                >
+                  <DemoProductPage />
+                </MazCard>
+              </MazTabsContentItem>
+
+              <MazTabsContentItem :tab="3">
+                <MazCard
+                  bordered
+                  :padding="false"
+                  overflow-hidden
+                  class="maz-max-h-[70vh] maz-w-full maz-overflow-y-auto"
+                >
+                  <DemoAuthPage />
+                </MazCard>
+              </MazTabsContentItem>
+            </MazTabsContent>
+          </MazTabs>
+        </div>
+      </div>
+    </div>
+
+    <!-- Export Modal -->
+    <MazDialog v-model="showExportModal" scrollable title="Export Theme">
+      <div class="maz-space-y-4">
+        <p class="maz-text-muted">
+          Copy the generated TypeScript code below to use your custom theme:
+        </p>
+
+        <div class="maz-overflow-y-auto maz-rounded-md">
+          <div
+            v-if="highlightedCode"
+            class="shiki-wrapper"
+            v-html="highlightedCode"
+          />
+          <div
+            v-else
+            class="maz-bg-contrast maz-p-4 dark:maz-bg-surface-300"
+          >
+            <pre class="maz-whitespace-pre-wrap maz-font-mono maz-text-xs maz-text-contrast-foreground dark:maz-text-surface-foreground">{{ exportedCode }}</pre>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="maz-flex maz-gap-2">
+          <MazBtn color="primary" @click="copyToClipboard(exportedCode)">
+            Copy to Clipboard
+          </MazBtn>
+        </div>
+      </template>
+    </MazDialog>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+@media (max-width: 1024px) {
+  .theme-configurator {
+    @apply maz-space-y-8;
+  }
+
+  .theme-configurator .maz-sticky {
+    @apply maz-static;
+  }
+}
+</style>
+
+<style lang="postcss">
+/* Global styles to disable transitions during theme mode switch */
+.no-transitions *,
+.no-transitions *::before,
+.no-transitions *::after {
+  transition-duration: 0ms !important;
+  transition-delay: 0ms !important;
+  animation-duration: 0ms !important;
+  animation-delay: 0ms !important;
+}
+
+/* Shiki code highlighting styles */
+.shiki-wrapper {
+  @apply maz-rounded-md maz-overflow-hidden maz-bg-contrast dark:maz-bg-surface-400;
+}
+
+.shiki-wrapper pre {
+  @apply maz-p-4 maz-m-0 maz-text-xs maz-overflow-x-auto;
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace !important;
+}
+
+.shiki-wrapper code {
+  @apply maz-text-xs;
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace !important;
+}
+
+/* Override shiki background to match theme */
+.shiki-wrapper .shiki {
+  background-color: transparent !important;
+}
+</style>

package/docs/src/directives/click-outside.md

@@ -1,6 +1,6 @@
 ---
 title: vClickOutside
-description: vClickOutside is a Vue 3 directive to trigger a function when the user clicks outside an element
+description: vClickOutside is a Vue directive to trigger a function when the user clicks outside an element
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/directives/lazy-img.md

@@ -1,6 +1,6 @@
 ---
 title: vLazyImg
-description: vLazyImg is a Vue 3 directive to lazy load images with many options. The image will be loaded on user's scroll
+description: vLazyImg is a Vue directive to lazy load images with many options. The image will be loaded on user's scroll
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/directives/tooltip.md

@@ -1,6 +1,6 @@
 ---
 title: vTooltip
-description: vTooltip is a Vue 3 directive to display a text when the user hovers an element
+description: vTooltip is a Vue directive to display a text when the user hovers an element
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/directives/zoom-img.md

@@ -1,6 +1,6 @@
 ---
 title: vZoomImg
-description: vZoomImg is a Vue 3 directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel
+description: vZoomImg is a Vue directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/guide/getting-started.md

@@ -4,7 +4,7 @@ description: Build Vue and Nuxt applications faster with Maz-UI v4 - The modern,
 head:
   - - meta
     - name: keywords
-      content: vue ui library, vue components, nuxt ui, maz-ui installation, vue 3 components
+      content: vue ui library, vue components, nuxt ui, maz-ui installation, components, nuxt, vue, themes, translations, icons, mcp, maz-ui
 ---
 
 # {{ $frontmatter.title }}
@@ -19,7 +19,7 @@ head:
 - 🆕 **New components** - MazPopover & MazSelectCountry
 - 🎨 **Theming system** - Customizable themes and dark mode support (4 presets available) - [@maz-ui/themes](./themes.md)
 - 🌐 **Internationalization** - Locale management and tree-shakable imports - [@maz-ui/translations](./translations.md)
-- 🎨 **Icon library** - Comprehensive collection of SVG icons designed for performance and flexibility (300+ icons) - [@maz-ui/icons](./icons.md)
+- 🎨 **Icon library** - Comprehensive collection of SVG icons designed for performance and flexibility (400+ icons) - [@maz-ui/icons](./icons.md)
 - 🧰 **Nuxt module** - Effortless Maz-UI integration with auto-imports - [@maz-ui/nuxt](./nuxt.md)
 - 🤖 **MCP** - Connect your IA agents to the documentation - [@maz-ui/mcp](./mcp.md)
 
@@ -131,7 +131,7 @@ npm install @maz-ui/icons
 
 **Features:**
 
-- 300+ icons
+- 840+ icons
 - Usable as Vue components (e.g. `<MazStar />`)
 - Tree-shakable imports
 - Multiple sizes and variants

package/docs/src/guide/icon-set.md

@@ -1,6 +1,6 @@
-# Icon Set (300+ icons)
+# Icon Set (840+ icons)
 
-The library includes **300+ carefully**
+The library includes **840+ carefully**
 
 ## Icon Naming Convention
 
@@ -16,13 +16,16 @@ All icons follow a consistent naming pattern:
     <div class="maz-flex maz-gap-2 maz-items-start">
       <MazInput v-model="search" label="Search icon" @update:model-value="search = $event.trim()" :left-icon="MazIcons.MazMagnifyingGlass" class="flex-1" :assistive-text="`${filteredIcons.length} icons found`" />
     </div>
+    <MazTabs v-model="currentTab">
+      <MazTabsBar :items="tabs" />
+    </MazTabs>
     <div class="maz-grid maz-grid-cols-3 maz-gap-2">
-      <div v-for="icon in filteredIcons" :key="icon.label" class="maz-flex maz-flex-col maz-items-center maz-gap-3 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate hover:maz-bg-surface-600/50 dark:hover:maz-bg-surface-400">
-        <Component :is="icon.value" class="maz-size-8" />
-        <span class="maz-text-xs maz-text-muted maz-truncate">{{ icon.label }}</span>
+      <div v-for="icon in filteredIcons" :key="icon.name" class="maz-flex maz-flex-col maz-items-center maz-gap-3 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate hover:maz-bg-surface-600/50 dark:hover:maz-bg-surface-400">
+        <Component :is="icon.component" class="maz-size-8" />
+        <span class="maz-text-xs maz-text-muted maz-truncate">{{ icon.name }}</span>
         <div class="maz-flex maz-flex-row maz-gap-2 maz-w-full">
-          <MazBtn v-tooltip="'Copy Name'" class="maz-flex-1" size="xs" color="background" outlined @click="copyIcon(icon.label)" :icon="MazClipboardDocument" />
-          <MazBtn v-tooltip="'Copy Import'" class="maz-flex-1" size="xs" color="background" outlined @click="copyIconImport(icon.label)" :icon="MazClipboardDocumentList" />
+          <MazBtn v-tooltip="{ text: 'Copy Name', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIcon(icon.name)" :icon="MazClipboardDocument" />
+          <MazBtn v-tooltip="{ text: 'Copy Import', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIconImport(icon.name)" :icon="MazClipboardDocumentList" />
         </div>
       </div>
     </div>
@@ -36,20 +39,51 @@ import { vTooltip } from 'maz-ui/directives/vTooltip'
 import { MazClipboardDocument, MazClipboardDocumentList } from '@maz-ui/icons'
 
 const MazIcons = await import('@maz-ui/icons')
-const { success} = useToast()
 
 const icons = Object.entries(MazIcons).sort(([nameA, _], [nameB, __]) => nameA.localeCompare(nameB)).map(([name, component]) => ({
-  label: name,
-  value: component,
+  name,
+  component,
 }))
 
+const { commonIcons, flags, flagsSquare, all } = icons.reduce((acc, iconComponent) => {
+  if (iconComponent.name.startsWith('MazFlagSquare')) {
+    acc.flagsSquare.push(iconComponent)
+  }
+  else if (iconComponent.name.startsWith('MazFlag') && iconComponent.name.length >= 8) acc.flags.push(iconComponent)
+  else if (iconComponent.name.startsWith('Maz')) acc.commonIcons.push(iconComponent)
+
+  acc.all.push(iconComponent)
+
+  return acc
+}, {
+  commonIcons: [],
+  flags: [],
+  flagsSquare: [],
+  all: [],
+})
+
+const currentTab = ref(1)
+
+const tabs = [
+  { label: 'All', badge: { color: 'secondary', content: all.length, roundedSize: 'full' } },
+  { label: 'Icons', badge: { color: 'secondary', content: commonIcons.length, roundedSize: 'full' } },
+  { label: 'Flags', badge: { color: 'secondary', content: flags.length, roundedSize: 'full' } },
+  { label: 'Flags Square', badge: { color: 'secondary', content: flagsSquare.length, roundedSize: 'full' } },
+]
+
+const { success } = useToast()
+
 const search = ref()
 
 const filteredIcons = computed(() => {
+  const _currentTab = currentTab.value
+
+  const baseIcons = _currentTab === 1 ? all : _currentTab === 2 ? commonIcons : _currentTab === 3 ? flags : _currentTab === 4 ? flagsSquare : all
+
   const _search = search.value?.toLowerCase().replace(/\s/g, '')
-  if (!_search) return icons
+  if (!_search) return baseIcons
 
-  return icons.filter(icon => icon.label.toLowerCase().includes(_search) || _search.includes(icon.label.toLowerCase()))
+  return baseIcons.filter(icon => icon.name.toLowerCase().includes(_search) || _search.includes(icon.name.toLowerCase()))
 })
 
 const copyIcon = (icon) => {

package/docs/src/guide/icons.md

@@ -4,7 +4,7 @@ A comprehensive collection of **328 beautiful SVG icons** ready for use in your
 
 ## Features
 
-- **300+ icons** - Comprehensive set covering all common use cases
+- **840+ icons** - All icons are available [in the icon set page](./icon-set.md)
 - **Multiple usage patterns** - Direct SVG files, Vue components, or auto-import
 - **TypeScript support** - Full type definitions included
 - **Tree-shakeable** - Import only the icons you need
@@ -73,7 +73,7 @@ import { MazCheck, MazHeart, MazUser } from '@maz-ui/icons'
 
 - ✅ Tree-shaking - Only bundled icons are included
 - ✅ TypeScript support with full IntelliSense
-- ✅ Vue 3 optimized with `defineAsyncComponent`
+- ✅ Vue optimized with `defineAsyncComponent`
 - ✅ Easy to style with CSS classes
 
 ### Method 2: Auto-import with Resolver
@@ -270,7 +270,7 @@ All icons support CSS custom properties for advanced styling:
 
 ## Available Icons
 
-The library includes **300+ carefully** covering all common use cases:
+The library includes **840+ carefully** covering all common use cases:
 
 ### Icon Naming Convention