@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/runtime/vue/components/Link.vue

@@ -101,10 +101,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
 </script>
 
 <template>
-  <template v-if="!isExternal && !!to">
-    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
-      <template v-if="custom">
-        <slot
+  <template v-if="!isExternal && !!to">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
+      <template v-if="custom">
+        <slot
           v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -114,11 +114,11 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   href,
   navigate,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
-        />
-      </template>
-      <ULinkBase
-        v-else
+}"
+        />
+      </template>
+      <ULinkBase
+        v-else
         v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -127,17 +127,17 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   disabled,
   href,
   navigate
-}"
-        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-      >
-        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
-      </ULinkBase>
-    </RouterLink>
-  </template>
-
-  <template v-else>
-    <template v-if="custom">
-      <slot
+}"
+        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      </ULinkBase>
+    </RouterLink>
+  </template>
+
+  <template v-else>
+    <template v-if="custom">
+      <slot
         v-bind="{
   ...$attrs,
   as,
@@ -147,11 +147,11 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   target: isExternal ? '_blank' : void 0,
   active,
   isExternal
-}"
-      />
-    </template>
-    <ULinkBase
-      v-else
+}"
+      />
+    </template>
+    <ULinkBase
+      v-else
       v-bind="{
   ...$attrs,
   as,
@@ -160,10 +160,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   href: to,
   target: isExternal ? '_blank' : void 0,
   isExternal
-}"
-      :class="resolveLinkClass()"
-    >
-      <slot :active="active" />
-    </ULinkBase>
-  </template>
+}"
+      :class="resolveLinkClass()"
+    >
+      <slot :active="active" />
+    </ULinkBase>
+  </template>
 </template>

package/dist/runtime/vue/components/color-mode/ColorModeButton.vue

@@ -24,11 +24,11 @@ const isDark = computed({
 </script>
 
 <template>
-  <UButton
-    :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
-    :color="color"
-    :variant="variant"
-    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-    @click="isDark = !isDark"
-  />
+  <UButton
+    :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+    :color="color"
+    :variant="variant"
+    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+    @click="isDark = !isDark"
+  />
 </template>

package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue

@@ -27,11 +27,11 @@ const preference = computed({
 </script>
 
 <template>
-  <USelectMenu
-    v-model="preference"
-    :icon="preference?.icon"
-    :search-input="false"
-    v-bind="$attrs"
-    :items="items"
-  />
+  <USelectMenu
+    v-model="preference"
+    :icon="preference?.icon"
+    :search-input="false"
+    v-bind="$attrs"
+    :items="items"
+  />
 </template>

package/dist/runtime/vue/components/color-mode/ColorModeSwitch.vue

@@ -22,11 +22,11 @@ const isDark = computed({
 </script>
 
 <template>
-  <USwitch
-    v-model="isDark"
-    :checked-icon="appConfig.ui.icons.dark"
-    :unchecked-icon="appConfig.ui.icons.light"
-    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-    v-bind="$attrs"
-  />
+  <USwitch
+    v-model="isDark"
+    :checked-icon="appConfig.ui.icons.dark"
+    :unchecked-icon="appConfig.ui.icons.light"
+    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+    v-bind="$attrs"
+  />
 </template>

package/dist/shared/{ui.BcVNrqyb.mjs → ui.DQZ75GCP.mjs}

@@ -68,7 +68,9 @@ const defaultOptions = {
   theme: {
     colors: void 0,
     transitions: true
-  }
+  },
+  mdc: false,
+  content: false
 };
 const resolveColors = (colors) => {
   return colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...colors])] : ["primary", "secondary", "success", "info", "warning", "error"];
@@ -1509,7 +1511,7 @@ const contentSurround = {
   }
 };
 
-const contentToc = {
+const contentToc = (options) => ({
   slots: {
     root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
     container: "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
@@ -1530,33 +1532,13 @@ const contentToc = {
   },
   variants: {
     color: {
-      primary: "",
-      secondary: "",
-      success: "",
-      info: "",
-      warning: "",
-      error: "",
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       neutral: ""
     },
     highlightColor: {
-      primary: {
-        indicator: "bg-primary"
-      },
-      secondary: {
-        indicator: "bg-secondary"
-      },
-      success: {
-        indicator: "bg-success"
-      },
-      info: {
-        indicator: "bg-info"
-      },
-      warning: {
-        indicator: "bg-warning"
-      },
-      error: {
-        indicator: "bg-error"
-      },
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicator: `bg-${color}`
+      }])),
       neutral: {
         indicator: "bg-inverted"
       }
@@ -1577,60 +1559,20 @@ const contentToc = {
     }
   },
   compoundVariants: [
-    {
-      color: "primary",
-      active: true,
-      class: {
-        link: "text-primary",
-        linkLeadingIcon: "text-primary"
-      }
-    },
-    {
-      color: "secondary",
-      active: true,
-      class: {
-        link: "text-secondary",
-        linkLeadingIcon: "text-secondary"
-      }
-    },
-    {
-      color: "success",
-      active: true,
-      class: {
-        link: "text-success",
-        linkLeadingIcon: "text-success"
-      }
-    },
-    {
-      color: "info",
-      active: true,
-      class: {
-        link: "text-info",
-        linkLeadingIcon: "text-info"
-      }
-    },
-    {
-      color: "warning",
-      active: true,
-      class: {
-        link: "text-warning",
-        linkLeadingIcon: "text-warning"
-      }
-    },
-    {
-      color: "error",
+    ...(options.theme.colors || []).map((color) => ({
+      color: `${color}`,
       active: true,
       class: {
-        link: "text-error",
-        linkLeadingIcon: "text-error"
+        link: `text-${color}`,
+        linkText: `text-${color}`
       }
-    },
+    })),
     {
       color: "neutral",
       active: true,
       class: {
-        link: "text-highlighted",
-        linkLeadingIcon: "text-highlighted"
+        link: `text-highlighted`,
+        linkLeadingIcon: `text-highlighted`
       }
     }
   ],
@@ -1638,7 +1580,7 @@ const contentToc = {
     color: "primary",
     highlightColor: "primary"
   }
-};
+});
 
 const contextMenu = (options) => ({
   slots: {
@@ -2073,6 +2015,16 @@ const dropdownMenu = (options) => ({
   }
 });
 
+const error = {
+  slots: {
+    root: "min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center",
+    statusCode: "text-base font-semibold text-primary",
+    statusMessage: "mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance",
+    message: "mt-4 text-lg text-muted text-balance",
+    links: "mt-8 flex items-center justify-center gap-6"
+  }
+};
+
 const form = {
   base: ""
 };
@@ -4575,6 +4527,90 @@ const tree = (options) => ({
   }
 });
 
+const theme = {
+  __proto__: null,
+  accordion: accordion$1,
+  alert: alert,
+  avatar: avatar,
+  avatarGroup: avatarGroup,
+  badge: badge$1,
+  breadcrumb: breadcrumb,
+  button: button,
+  buttonGroup: buttonGroup,
+  calendar: calendar,
+  card: card$1,
+  carousel: carousel,
+  chatMessage: chatMessage,
+  chatMessages: chatMessages,
+  chatPrompt: chatPrompt,
+  chatPromptSubmit: chatPromptSubmit,
+  checkbox: checkbox,
+  checkboxGroup: checkboxGroup,
+  chip: chip,
+  collapsible: collapsible$1,
+  colorPicker: colorPicker,
+  commandPalette: commandPalette,
+  container: container,
+  contentNavigation: contentNavigation,
+  contentSearch: contentSearch,
+  contentSearchButton: contentSearchButton,
+  contentSurround: contentSurround,
+  contentToc: contentToc,
+  contextMenu: contextMenu,
+  dashboardGroup: dashboardGroup,
+  dashboardNavbar: dashboardNavbar,
+  dashboardPanel: dashboardPanel,
+  dashboardResizeHandle: dashboardResizeHandle,
+  dashboardSearch: dashboardSearch,
+  dashboardSearchButton: dashboardSearchButton,
+  dashboardSidebar: dashboardSidebar,
+  dashboardSidebarCollapse: dashboardSidebarCollapse,
+  dashboardSidebarToggle: dashboardSidebarToggle,
+  drawer: drawer,
+  dropdownMenu: dropdownMenu,
+  error: error,
+  form: form,
+  formField: formField,
+  input: input,
+  inputMenu: inputMenu,
+  inputNumber: inputNumber,
+  inputTags: inputTags,
+  kbd: kbd$1,
+  link: link,
+  modal: modal,
+  navigationMenu: navigationMenu,
+  pagination: pagination,
+  pinInput: pinInput,
+  popover: popover,
+  progress: progress,
+  radioGroup: radioGroup,
+  select: select,
+  selectMenu: selectMenu,
+  separator: separator,
+  skeleton: skeleton,
+  slideover: slideover,
+  slider: slider,
+  stepper: stepper,
+  switch: _switch,
+  table: table$1,
+  tabs: tabs$1,
+  textarea: textarea,
+  timeline: timeline,
+  toast: toast,
+  toaster: toaster,
+  tooltip: tooltip,
+  tree: tree
+};
+
+const contentTheme = {
+  __proto__: null,
+  contentNavigation: contentNavigation,
+  contentSearch: contentSearch,
+  contentSearchButton: contentSearchButton,
+  contentSurround: contentSurround,
+  contentToc: contentToc
+};
+
 const a = {
   base: [
     "text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary",
@@ -5084,7 +5120,7 @@ const ul = {
   base: "list-disc ps-6 my-5 marker:text-(--ui-border-accented)"
 };
 
-const index = {
+const proseTheme = {
   __proto__: null,
   a: a,
   accordion: accordion,
@@ -5129,114 +5165,59 @@ const index = {
   ul: ul
 };
 
-const theme = {
-  __proto__: null,
-  accordion: accordion$1,
-  alert: alert,
-  avatar: avatar,
-  avatarGroup: avatarGroup,
-  badge: badge$1,
-  breadcrumb: breadcrumb,
-  button: button,
-  buttonGroup: buttonGroup,
-  calendar: calendar,
-  card: card$1,
-  carousel: carousel,
-  chatMessage: chatMessage,
-  chatMessages: chatMessages,
-  chatPrompt: chatPrompt,
-  chatPromptSubmit: chatPromptSubmit,
-  checkbox: checkbox,
-  checkboxGroup: checkboxGroup,
-  chip: chip,
-  collapsible: collapsible$1,
-  colorPicker: colorPicker,
-  commandPalette: commandPalette,
-  container: container,
-  contentNavigation: contentNavigation,
-  contentSearch: contentSearch,
-  contentSearchButton: contentSearchButton,
-  contentSurround: contentSurround,
-  contentToc: contentToc,
-  contextMenu: contextMenu,
-  dashboardGroup: dashboardGroup,
-  dashboardNavbar: dashboardNavbar,
-  dashboardPanel: dashboardPanel,
-  dashboardResizeHandle: dashboardResizeHandle,
-  dashboardSearch: dashboardSearch,
-  dashboardSearchButton: dashboardSearchButton,
-  dashboardSidebar: dashboardSidebar,
-  dashboardSidebarCollapse: dashboardSidebarCollapse,
-  dashboardSidebarToggle: dashboardSidebarToggle,
-  drawer: drawer,
-  dropdownMenu: dropdownMenu,
-  form: form,
-  formField: formField,
-  input: input,
-  inputMenu: inputMenu,
-  inputNumber: inputNumber,
-  inputTags: inputTags,
-  kbd: kbd$1,
-  link: link,
-  modal: modal,
-  navigationMenu: navigationMenu,
-  pagination: pagination,
-  pinInput: pinInput,
-  popover: popover,
-  progress: progress,
-  prose: index,
-  radioGroup: radioGroup,
-  select: select,
-  selectMenu: selectMenu,
-  separator: separator,
-  skeleton: skeleton,
-  slideover: slideover,
-  slider: slider,
-  stepper: stepper,
-  switch: _switch,
-  table: table$1,
-  tabs: tabs$1,
-  textarea: textarea,
-  timeline: timeline,
-  toast: toast,
-  toaster: toaster,
-  tooltip: tooltip,
-  tree: tree
+const themeCollections = {
+  "": theme,
+  // Root theme files
+  "content": contentTheme,
+  "prose": proseTheme
 };
-
+function generateVariantDeclarations(variants, result) {
+  return variants.filter((variant) => result.variants?.[variant]).map((variant) => {
+    const keys = Object.keys(result.variants[variant]);
+    return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+  });
+}
+function processJsonWithVariants(json, variants) {
+  let processedJson = json;
+  for (const variant of variants) {
+    processedJson = processedJson.replace(
+      new RegExp(`("${variant}": "[^"]+")`, "g"),
+      `$1 as typeof ${variant}[number]`
+    );
+    processedJson = processedJson.replace(
+      new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"),
+      (_, before, match, after) => {
+        const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+        return `${before}${replaced}${after}`;
+      }
+    );
+  }
+  return processedJson;
+}
 function getTemplates(options, uiConfig) {
   const templates = [];
-  for (const component in theme) {
-    templates.push({
-      filename: `ui/${kebabCase(component)}.ts`,
-      write: true,
-      getContents: async () => {
-        const template = theme[component];
-        const result = typeof template === "function" ? template(options) : template;
-        const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
-          const keys = Object.keys(values);
-          return keys.some((key) => key !== "true" && key !== "false");
-        }).map(([key]) => key);
-        let json = JSON.stringify(result, null, 2);
-        for (const variant of variants) {
-          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
-          json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
-            const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
-            return `${before}${replaced}${after}`;
-          });
+  for (const [folder, themeCollection] of Object.entries(themeCollections)) {
+    for (const [component, template] of Object.entries(themeCollection)) {
+      const folderPath = folder ? `${folder}/` : "";
+      const filename = `ui/${folderPath}${kebabCase(component)}.ts`;
+      templates.push({
+        filename,
+        write: true,
+        getContents: async () => {
+          const result = typeof template === "function" ? template(options) : template;
+          const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+            const keys = Object.keys(values);
+            return keys.some((key) => key !== "true" && key !== "false");
+          }).map(([key]) => key);
+          let json = JSON.stringify(result, null, 2);
+          json = processJsonWithVariants(json, variants);
+          return [
+            ...generateVariantDeclarations(variants, result),
+            `export default ${json}`
+          ].join("\n\n");
         }
-        function generateVariantDeclarations(variants2) {
-          return variants2.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
-            const keys = Object.keys(result.variants[variant]);
-            return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
-          });
-        }
-        return [
-          ...generateVariantDeclarations(variants),
-          `export default ${json}`
-        ].join("\n\n");
-      }
-    });
+      });
+    }
   }
   templates.push({
     filename: "ui.css",
@@ -5311,7 +5292,29 @@ function getTemplates(options, uiConfig) {
   templates.push({
     filename: "ui/index.ts",
     write: true,
-    getContents: () => Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+    getContents: () => {
+      const exports = [];
+      for (const component of Object.keys(theme)) {
+        exports.push(`export { default as ${component} } from './${kebabCase(component)}'`);
+      }
+      for (const component of Object.keys(contentTheme)) {
+        exports.push(`export { default as ${component} } from './content/${kebabCase(component)}'`);
+      }
+      for (const component of Object.keys(proseTheme)) {
+        exports.push(`export { default as ${component} } from './prose/${kebabCase(component)}'`);
+      }
+      return exports.join("\n");
+    }
+  });
+  templates.push({
+    filename: "ui/content/index.ts",
+    write: true,
+    getContents: () => Object.keys(contentTheme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+  });
+  templates.push({
+    filename: "ui/prose/index.ts",
+    write: true,
+    getContents: () => Object.keys(proseTheme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
   });
   templates.push({
     filename: "types/ui.d.ts",

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.BcVNrqyb.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.DQZ75GCP.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';
@@ -19,16 +19,16 @@ function TemplatePlugin(options, appConfig) {
   const templates = getTemplates(options, appConfig.ui);
   const templateKeys = new Set(templates.map((t) => `#build/${t.filename}`));
   return {
-    name: "nuxt:ui:templates",
+    name: "eslamdevui:ui:templates",
     enforce: "pre",
     resolveId(id) {
       if (templateKeys.has(id + ".ts")) {
-        return id.replace("#build/", "virtual:nuxt-ui-templates/") + ".ts";
+        return id.replace("#build/", "virtual:eslamdevui-ui-templates/") + ".ts";
       }
     },
-    loadInclude: (id) => templateKeys.has(id.replace("virtual:nuxt-ui-templates/", "#build/")),
+    loadInclude: (id) => templateKeys.has(id.replace("virtual:eslamdevui-ui-templates/", "#build/")),
     load(id) {
-      id = id.replace("virtual:nuxt-ui-templates/", "#build/");
+      id = id.replace("virtual:eslamdevui-ui-templates/", "#build/");
       return templates.find((t) => `#build/${t.filename}` === id).getContents({});
     }
   };
@@ -41,11 +41,11 @@ function PluginsPlugin(options) {
     plugins.push(resolvePathSync("../runtime/vue/plugins/color-mode", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url }));
   }
   return {
-    name: "nuxt:ui:plugins",
+    name: "eslamdevui:ui:plugins",
     enforce: "pre",
     resolveId(id) {
       if (id === "@eslamdevui/ui/vue-plugin") {
-        return "virtual:nuxt-ui-plugins";
+        return "virtual:eslamdevui-ui-plugins";
       }
     },
     transform(code, id) {
@@ -60,7 +60,7 @@ function PluginsPlugin(options) {
         }
       }
     },
-    loadInclude: (id) => id === "virtual:nuxt-ui-plugins",
+    loadInclude: (id) => id === "virtual:eslamdevui-ui-plugins",
     load() {
       return `
         ${plugins.map((p) => `import ${genSafeVariableName(p)} from "${p}"`).join("\n")}
@@ -127,7 +127,7 @@ function ComponentImportPlugin(options, meta) {
   const pluginOptions = defu(options.components, {
     dts: options.dts ?? true,
     exclude: [
-      /[\\/]node_modules[\\/](?!\.pnpm|@nuxt\/ui|@compodium\/examples)/,
+      /[\\/]node_modules[\\/](?!\.pnpm|@eslamdevui\/ui|@compodium\/examples)/,
       /[\\/]\.git[\\/]/,
       /[\\/]\.nuxt[\\/]/
     ],

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.BcVNrqyb.mjs';
+import './shared/ui.DQZ75GCP.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';