@macroui/macroui 1.0.30 → 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Pouya Saadeghi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,203 +1,37 @@
-# Element Plus DaisyUI 组件库
+<div align="center">
 
-基于 Vue 3 + Element Plus API + daisyUI 视觉风格的组件库。
+[![][logo-url]][docs-url]
 
-## 特性
+**The most popular, free and open-source component library for Tailwind CSS**
 
-- ✅ 100% Element Plus API 兼容
-- ✅ 100% daisyUI 视觉风格
-- ✅ 支持 25 个主题
-- ✅ TypeScript 支持
-- ✅ 按需引入
-- ✅ 多语言支持（i18n）
+[![][version]](https://www.npmjs.com/package/daisyui)
+[![][commit]](https://github.com/saadeghi/daisyui)
+[![][license]](https://github.com/saadeghi/daisyui/blob/master/LICENSE)
+[![][stars]](https://github.com/saadeghi/daisyui)
+[![][installs]](https://www.npmjs.com/package/daisyui)
+[![][jsdelivr]](https://cdn.jsdelivr.net/npm/daisyui@5)
+[![][discord]](https://daisyui.com/discord/)
+[![][opencollectivebadge]](https://opencollective.com/daisyui)
 
-## 安装
+</div>
 
-```bash
-npm install @macroui/macroui
-```
+# daisyUI 5
 
-## 使用
+### 🌼 [Official website →](https://daisyui.com/)
 
-### 全局注册（推荐）
+### 🌼 [See all components →](https://daisyui.com/components/)
 
-```javascript
-import { createApp } from 'vue'
-import App from './App.vue'
-import 'daisyui/dist/full.css'
-import Macroui from '@macroui/macroui'
+### 🌼 [How to use →](https://daisyui.com/docs/install/)
 
-const app = createApp(App)
-app.use(Macroui)
-app.mount('#app')
-```
+---
 
-### 按需引入
-
-```javascript
-import { ElButton, ElInput, ElSelect } from '@macroui/macroui'
-import 'daisyui/dist/full.css'
-
-app.component('el-button', ElButton)
-app.component('el-input', ElInput)
-app.component('el-select', ElSelect)
-```
-
-## 🌍 多语言
-
-### 全局配置
-
-```javascript
-import { ElConfigProvider } from '@macroui/macroui'
-import { zhCn, en } from '@macroui/macroui/locale'
-
-app.use(ElConfigProvider, { locale: zhCn })
-```
-
-### 组件内使用
-
-```javascript
-import { useLocale } from '@macroui/macroui'
-
-const { t } = useLocale()
-
-// 使用翻译键
-t('pagination.total', { total: 100 })  // 输出：共 100 条
-t('select.placeholder')  // 输出：请选择
-```
-
-### 支持的语言
-
-| 语言 | 代码 | 状态 |
-|------|------|------|
-| 简体中文 | zh-cn | ✅ 已完成 |
-| English | en | ✅ 已完成 |
-
-## 主题
-
-支持 daisyUI 全部 25 个主题：
-
-```javascript
-// 切换主题
-document.documentElement.setAttribute('data-theme', 'dark')
-```
-
-主题列表：
-
-- light, dark, corporate, business, cmyk, acid, aqua, autumn
-- black, coffee, cupcake, cyberpunk, dracula, emeral, fantasy
-- forest, garden, halloween, jungle, lofi, luxury, night
-- pastel, retro, synthwave, valentine, wireframe, zenith
-
-## 组件列表
-
-### 表单组件
-
-| 组件 | 说明 | DaisyUI |
-|------|------|--------|
-| ElButton | 按钮 | button |
-| ElInput | 输入框 | input |
-| ElSelect | 选择器 | select |
-| ElCheckbox | 多选框 | checkbox |
-| ElRadio | 单选框 | radio |
-| ElSwitch | 开关 | toggle |
-| ElTag | 标签 | badge |
-| ElForm | 表单 | form |
-| ElInputNumber | 数字输入 | - |
-| ElSlider | 滑块 | - |
-| ElRate | 评分 | - |
-
-### 数据展示
-
-| 组件 | 说明 | DaisyUI |
-|------|------|--------|
-| ElBadge | 徽章 | badge |
-| ElProgress | 进度条 | progress |
-| ElAvatar | 头像 | avatar |
-| ElSkeleton | 骨架屏 | skeleton |
-| ElTable | 表格 | table |
-| ElEmpty | 空状态 | - |
-| ElResult | 结果页 | - |
-
-### 反馈组件
-
-| 组件 | 说明 | DaisyUI |
-|------|------|--------|
-| ElAlert | 警告提示 | alert |
-| ElLoading | 加载状态 | loading |
-| ElMessage | 消息提示 | toast |
-| ElNotification | 通知 | toast |
-
-### 容器组件
-
-| 组件 | 说明 | DaisyUI |
-|------|------|--------|
-| ElCard | 卡片 | card |
-| ElCollapse | 折叠面板 | collapse |
-| ElDialog | 对话框 | modal |
-| ElDrawer | 抽屉 | - |
-
-### 导航组件
-
-| 组件 | 说明 | DaisyUI |
-|------|------|--------|
-| ElBreadcrumb | 面包屑 | breadcrumb |
-| ElPagination | 分页 | pagination |
-| ElSteps | 步骤条 | steps |
-| ElDropdown | 下拉菜单 | dropdown |
-| ElMenu | 菜单 | menu |
-| ElTabs | 标签页 | tabs |
-| ElPageHeader | 页头 | - |
-
-### 布局组件
-
-| 组件 | 说明 | DaisyUI |
-|------|------|--------|
-| ElDivider | 分割线 | divider |
-| ElTooltip | 文字提示 | tooltip |
-| ElContainer | 容器 | - |
-| ElSpace | 间距 | - |
-
-## 开发
-
-```bash
-# 安装依赖
-npm install
-
-# 启动示例页面（推荐）
-npm run dev:examples
-
-# 构建库
-npm run build:lib
-
-# 运行测试
-npm run test
-
-# 代码检查
-npm run lint
-
-# TypeScript 检查
-npm run typecheck
-```
-
-### 示例页面
-
-启动示例页面后，访问 http://localhost:3000/ 可以查看所有组件的示例演示。
-
-启动命令：`npm run dev:examples`
-
-> 注意：示例页面使用 3000 端口，如果端口被占用，Vite 会自动选择其他端口。
-
-## NPM 发布
-
-```bash
-# 设置认证 Token（2FA 账户必须）
-npm config set //registry.npmjs.org/:_authToken=YOUR_GRANULAR_TOKEN
-
-# 发布包
-npm publish --access public
-```
-
-## 许可证
-
-MIT License
+[version]: https://badgen.net/github/tag/saadeghi/daisyui?label=Version&color=1AD1A5
+[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?label=Last%20commit&color=1AD1A5
+[license]: https://badgen.net/github/license/saadeghi/daisyui?label=License&color=1AD1A5
+[stars]: https://badgen.net/github/stars/saadeghi/daisyui?label=GitHub%20stars&color=1AD1A5
+[installs]: https://badgen.net/npm/dt/daisyui?label=NPM%20installs&color=1AD1A5
+[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/daisyui?color=1AD1A5
+[discord]: https://badgen.net/discord/members/S6TZxycVHs?label=Discord&color=1AD1A5
+[opencollectivebadge]: https://badgen.net/opencollective/backers/daisyui?label=Open%20Collective&color=1AD1A5
+[docs-url]: https://daisyui.com/
+[logo-url]: https://img.daisyui.com/images/daisyui/daisyui-logo-192.png

package/functions/addPrefix.js

@@ -0,0 +1,185 @@
+const defaultExcludedPrefixes = ["color-", "size-", "radius-", "border", "depth", "noise"]
+const excludedSelectors = ["prose"]
+
+const shouldExcludeVariable = (variableName, excludedPrefixes) => {
+  if (variableName.startsWith("tw")) {
+    return true
+  }
+  return excludedPrefixes.some((excludedPrefix) => variableName.startsWith(excludedPrefix))
+}
+
+const prefixVariable = (variableName, prefix, excludedPrefixes) => {
+  if (shouldExcludeVariable(variableName, excludedPrefixes)) {
+    return variableName
+  }
+  return `${prefix}${variableName}`
+}
+
+const getPrefixedSelector = (selector, prefix) => {
+  if (!selector.startsWith(".")) return selector
+  if (excludedSelectors.includes(selector.slice(1))) return selector
+  return `.${prefix}${selector.slice(1)}`
+}
+
+const getPrefixedKey = (key, prefix, excludedPrefixes) => {
+  const prefixAmpDot = prefix ? `&.${prefix}` : ""
+
+  if (!prefix) return key
+
+  if (key.startsWith(".") && excludedSelectors.includes(key.slice(1))) return key
+
+  if (key.startsWith("--")) {
+    const variableName = key.slice(2)
+    return `--${prefixVariable(variableName, prefix, excludedPrefixes)}`
+  }
+
+  if (key.startsWith("@") || key.startsWith("[")) {
+    return key
+  }
+
+  if (key.startsWith("&")) {
+    // If it's a complex selector with :not(), :has(), etc.
+    if (key.match(/:[a-z-]+\(/)) {
+      return key.replace(/\.([\w-]+)/g, (m, cls) =>
+        excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+      )
+    }
+    // For simple &. cases
+    if (key.startsWith("&.")) {
+      if (excludedSelectors.includes(key.slice(2))) return key
+      return `${prefixAmpDot}${key.slice(2)}`
+    }
+    // For other & cases (like &:hover or &:not(...))
+    return key.replace(/\.([\w-]+)/g, (m, cls) =>
+      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+    )
+  }
+
+  if (key.startsWith(":")) {
+    return key.replace(/\.([\w-]+)/g, (m, cls) =>
+      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+    )
+  }
+
+  if (
+    key.includes(".") &&
+    !key.includes(" ") &&
+    !key.includes(">") &&
+    !key.includes("+") &&
+    !key.includes("~")
+  ) {
+    return key
+      .split(".")
+      .filter(Boolean)
+      .map((part) => (excludedSelectors.includes(part) ? part : prefix + part))
+      .join(".")
+      .replace(/^/, ".")
+  }
+
+  if (key.includes(">") || key.includes("+") || key.includes("~")) {
+    // For comma-separated selectors
+    if (key.includes(",")) {
+      return key
+        .split(/\s*,\s*/)
+        .map((part) => {
+          // Replace class names with prefixed versions for each part
+          return part.replace(/\.([\w-]+)/g, (m, cls) =>
+            excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+          )
+        })
+        .join(", ")
+    }
+
+    // For simple combinators (not comma-separated)
+    let processedKey = key.replace(/\.([\w-]+)/g, (m, cls) =>
+      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+    )
+
+    // Add a space before combinators at the beginning
+    if (
+      processedKey.startsWith(">") ||
+      processedKey.startsWith("+") ||
+      processedKey.startsWith("~")
+    ) {
+      processedKey = ` ${processedKey}`
+    }
+
+    return processedKey
+  }
+
+  if (key.includes(" ")) {
+    return key
+      .split(/\s+/)
+      .map((part) => {
+        if (part.startsWith(".")) {
+          return excludedSelectors.includes(part.slice(1))
+            ? part
+            : getPrefixedSelector(part, prefix)
+        }
+        return part
+      })
+      .join(" ")
+  }
+
+  if (key.includes(":")) {
+    const [selector, ...pseudo] = key.split(":")
+    if (selector.startsWith(".")) {
+      return `${excludedSelectors.includes(selector.slice(1)) ? selector : getPrefixedSelector(selector, prefix)}:${pseudo.join(":")}`
+    }
+    return key.replace(/\.([\w-]+)/g, (m, cls) =>
+      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+    )
+  }
+
+  if (key.startsWith(".")) {
+    return excludedSelectors.includes(key.slice(1)) ? key : getPrefixedSelector(key, prefix)
+  }
+
+  return key
+}
+
+const processArrayValue = (value, prefix, excludedPrefixes) => {
+  return value.map((item) => {
+    if (typeof item === "string") {
+      if (item.startsWith(".")) {
+        return excludedSelectors.includes(item.slice(1))
+          ? item
+          : prefix
+            ? `.${prefix}${item.slice(1)}`
+            : item
+      }
+      return processStringValue(item, prefix, excludedPrefixes)
+    }
+    return item
+  })
+}
+
+const processStringValue = (value, prefix, excludedPrefixes) => {
+  if (prefix === 0) return value
+  return value.replace(/var\(--([^)]+)\)/g, (match, variableName) => {
+    if (shouldExcludeVariable(variableName, excludedPrefixes)) {
+      return match
+    }
+    return `var(--${prefix}${variableName})`
+  })
+}
+
+const processValue = (value, prefix, excludedPrefixes) => {
+  if (Array.isArray(value)) {
+    return processArrayValue(value, prefix, excludedPrefixes)
+  } else if (typeof value === "object" && value !== null) {
+    return addPrefix(value, prefix, excludedPrefixes)
+  } else if (typeof value === "string") {
+    return processStringValue(value, prefix, excludedPrefixes)
+  } else {
+    return value
+  }
+}
+
+export const addPrefix = (obj, prefix, excludedPrefixes = defaultExcludedPrefixes) => {
+  return Object.entries(obj).reduce((result, [key, value]) => {
+    const newKey = getPrefixedKey(key, prefix, excludedPrefixes)
+    result[newKey] = processValue(value, prefix, excludedPrefixes)
+    return result
+  }, {})
+}

package/functions/plugin.js

@@ -0,0 +1,11 @@
+export const plugin = {
+  withOptions: (pluginFunction, configFunction = () => ({})) => {
+    const optionsFunction = (options) => {
+      const handler = pluginFunction(options)
+      const config = configFunction(options)
+      return { handler, config }
+    }
+    optionsFunction.__isOptionsFunction = true
+    return optionsFunction
+  },
+}

package/functions/pluginOptionsHandler.js

@@ -0,0 +1,97 @@
+import themeOrder from "./themeOrder.js"
+
+export const pluginOptionsHandler = (() => {
+  let firstRun = true
+  return (options, addBase, themesObject, packageVersion) => {
+    const {
+      logs = true,
+      root = ":root",
+      themes = ["light --default", "dark --prefersdark"],
+      include,
+      exclude,
+      prefix = "",
+    } = options || {}
+
+    if (logs !== false && firstRun) {
+      console.log(
+        `${atob("Lyoh")} ${decodeURIComponent("%F0%9F%8C%BC")} ${atob("ZGFpc3lVSQ==")} ${packageVersion} ${atob("Ki8=")}`,
+      )
+      firstRun = false
+    }
+
+    const applyTheme = (themeName, flags) => {
+      const theme = themesObject[themeName]
+      if (theme) {
+        // Use prefix for theme-controller class name
+        const themeControllerClass = `${prefix}theme-controller`
+        let selector = `${root}:has(input.${themeControllerClass}[value=${themeName}]:checked),[data-theme=${themeName}]`
+        if (flags.includes("--default")) {
+          selector = `:where(${root}),${selector}`
+        }
+        addBase({ [selector]: theme })
+
+        if (flags.includes("--prefersdark")) {
+          // Use :root:not([data-theme]) for dark mode specificity
+          const darkSelector =
+            root === ":root" ? ":root:not([data-theme])" : `${root}:not([data-theme])`
+          addBase({ "@media (prefers-color-scheme: dark)": { [darkSelector]: theme } })
+        }
+      }
+    }
+
+    if (themes === "all") {
+      if (themesObject["light"]) {
+        applyTheme("light", ["--default"])
+      }
+
+      if (themesObject["dark"]) {
+        const darkSelector =
+          root === ":root" ? ":root:not([data-theme])" : `${root}:not([data-theme])`
+        addBase({ "@media (prefers-color-scheme: dark)": { [darkSelector]: themesObject["dark"] } })
+      }
+
+      themeOrder.forEach((themeName) => {
+        if (themesObject[themeName]) {
+          applyTheme(themeName, [])
+        }
+      })
+    } else if (themes) {
+      const themeArray = Array.isArray(themes) ? themes : [themes]
+
+      // For single theme with --default flag, skip the other applications
+      if (themeArray.length === 1 && themeArray[0].includes("--default")) {
+        const [themeName, ...flags] = themeArray[0].split(" ")
+        applyTheme(themeName, flags)
+        return { include, exclude, prefix }
+      }
+
+      // default theme
+      themeArray.forEach((themeOption) => {
+        const [themeName, ...flags] = themeOption.split(" ")
+        if (flags.includes("--default")) {
+          applyTheme(themeName, ["--default"])
+        }
+      })
+
+      // prefers dark theme
+      themeArray.forEach((themeOption) => {
+        const [themeName, ...flags] = themeOption.split(" ")
+        if (flags.includes("--prefersdark")) {
+          const darkSelector =
+            root === ":root" ? ":root:not([data-theme])" : `${root}:not([data-theme])`
+          addBase({
+            "@media (prefers-color-scheme: dark)": { [darkSelector]: themesObject[themeName] },
+          })
+        }
+      })
+
+      // other themes
+      themeArray.forEach((themeOption) => {
+        const [themeName] = themeOption.split(" ")
+        applyTheme(themeName, [])
+      })
+    }
+
+    return { include, exclude, prefix }
+  }
+})()

package/functions/themeOrder.js

@@ -0,0 +1,37 @@
+export default [
+  "light",
+  "dark",
+  "cupcake",
+  "bumblebee",
+  "emerald",
+  "corporate",
+  "synthwave",
+  "retro",
+  "cyberpunk",
+  "valentine",
+  "halloween",
+  "garden",
+  "forest",
+  "aqua",
+  "lofi",
+  "pastel",
+  "fantasy",
+  "wireframe",
+  "black",
+  "luxury",
+  "dracula",
+  "cmyk",
+  "autumn",
+  "business",
+  "acid",
+  "lemonade",
+  "night",
+  "coffee",
+  "winter",
+  "dim",
+  "nord",
+  "sunset",
+  "caramellatte",
+  "abyss",
+  "silk",
+]

package/functions/variables.js

@@ -0,0 +1,29 @@
+export default {
+  colors: {
+    "base-100": "var(--color-base-100)",
+    "base-200": "var(--color-base-200)",
+    "base-300": "var(--color-base-300)",
+    "base-content": "var(--color-base-content)",
+    primary: "var(--color-primary)",
+    "primary-content": "var(--color-primary-content)",
+    secondary: "var(--color-secondary)",
+    "secondary-content": "var(--color-secondary-content)",
+    accent: "var(--color-accent)",
+    "accent-content": "var(--color-accent-content)",
+    neutral: "var(--color-neutral)",
+    "neutral-content": "var(--color-neutral-content)",
+    info: "var(--color-info)",
+    "info-content": "var(--color-info-content)",
+    success: "var(--color-success)",
+    "success-content": "var(--color-success-content)",
+    warning: "var(--color-warning)",
+    "warning-content": "var(--color-warning-content)",
+    error: "var(--color-error)",
+    "error-content": "var(--color-error-content)",
+  },
+  borderRadius: {
+    selector: "var(--radius-selector)",
+    field: "var(--radius-field)",
+    box: "var(--radius-box)",
+  },
+}

package/index.js

@@ -0,0 +1,61 @@
+const version = ""
+import { pluginOptionsHandler } from "./functions/pluginOptionsHandler.js"
+import { plugin } from "./functions/plugin.js"
+import variables from "./functions/variables.js"
+import themesObject from "./theme/object.js"
+import { base, components, utilities } from "./imports.js"
+
+export default plugin.withOptions(
+  (options) => {
+    return ({ addBase, addComponents, addUtilities, addVariant }) => {
+      const {
+        include,
+        exclude,
+        prefix = "",
+      } = pluginOptionsHandler(options, addBase, themesObject, version)
+
+      const shouldIncludeItem = (name) => {
+        if (include && exclude) {
+          return include.includes(name) && !exclude.includes(name)
+        }
+        if (include) {
+          return include.includes(name)
+        }
+        if (exclude) {
+          return !exclude.includes(name)
+        }
+        return true
+      }
+
+      Object.entries(base).forEach(([name, item]) => {
+        if (!shouldIncludeItem(name)) return
+        item({ addBase, prefix })
+      })
+
+      Object.entries(components).forEach(([name, item]) => {
+        if (!shouldIncludeItem(name)) return
+        item({ addComponents, prefix })
+      })
+
+      Object.entries(utilities).forEach(([name, item]) => {
+        if (!shouldIncludeItem(name)) return
+        item({ addUtilities, prefix })
+      })
+
+      // drawer variants. Can not be nested in layers so defined here
+      addVariant(
+        `${prefix}is-drawer-close`,
+        `&:where(.${prefix}drawer-toggle:not(:checked) ~ .${prefix}drawer-side, .${prefix}drawer-toggle:not(:checked) ~ .${prefix}drawer-side *)`,
+      )
+      addVariant(
+        `${prefix}is-drawer-open`,
+        `&:where(.${prefix}drawer-toggle:checked ~ .${prefix}drawer-side, .${prefix}drawer-toggle:checked ~ .${prefix}drawer-side *)`,
+      )
+    }
+  },
+  () => ({
+    theme: {
+      extend: variables,
+    },
+  }),
+)