@melt-js/comps-vue3 0.0.1 → 2026.11.6-1

package/scripts/meta.js

@@ -1,53 +1,53 @@
-/*
-|--------------------------------------------------------------------------
-|
-| 生成 hel-meta.json（写入 hel_dist）
-|
-|--------------------------------------------------------------------------
-*/
-const fs = require('fs')
-const path = require('path')
-const helDevUtils = require('hel-dev-utils')
-const packageJson = require('../package.json')
-const appInfo = require('../appInfo')
-
-const META_PATH = path.join(__dirname, '../hel_dist/hel-meta.json')
-
-/**
- * hel-dev-utils 在 Windows 下会把 dist 扫描出来的资源路径拼成反斜杠形式，
- * 形如 https://unpkg.com/xxx/hel_dist/\js\app.js，CDN 上是无效地址。
- * 这里统一转成 / 并去重，保证发布的 hel-meta.json 在 Windows 构建也正确。
- */
-function normalizePathSeparators(value) {
-  if (typeof value === 'string') {
-    return value
-      .replace(/\\/g, '/')
-      .replace(/([^:])\/{2,}/g, '$1/')
-  }
-  if (Array.isArray(value)) {
-    return [...new Set(value.map(normalizePathSeparators))]
-  }
-  if (value && typeof value === 'object') {
-    return Object.fromEntries(
-      Object.entries(value).map(([key, val]) => [key, normalizePathSeparators(val)]),
-    )
-  }
-  return value
-}
-
-async function main() {
-  const meta = await helDevUtils.extractHelMetaJson({
-    appInfo,
-    buildDirFullPath: path.join(__dirname, '../hel_dist'),
-    packageJson,
-  })
-
-  const normalizedMeta = normalizePathSeparators(meta)
-  fs.writeFileSync(META_PATH, JSON.stringify(normalizedMeta, null, 2))
-  console.log('[comps-vue3] hel-meta.json 生成完成')
-}
-
-main().catch((err) => {
-  console.error('[comps-vue3] hel-meta.json 生成失败:', err)
-  process.exit(-1)
-})
+/*
+|--------------------------------------------------------------------------
+|
+| 生成 hel-meta.json（写入 hel_dist）
+|
+|--------------------------------------------------------------------------
+*/
+const fs = require('fs')
+const path = require('path')
+const helDevUtils = require('hel-dev-utils')
+const packageJson = require('../package.json')
+const appInfo = require('../appInfo')
+
+const META_PATH = path.join(__dirname, '../hel_dist/hel-meta.json')
+
+/**
+ * hel-dev-utils 在 Windows 下会把 dist 扫描出来的资源路径拼成反斜杠形式，
+ * 形如 https://unpkg.com/xxx/hel_dist/\js\app.js，CDN 上是无效地址。
+ * 这里统一转成 / 并去重，保证发布的 hel-meta.json 在 Windows 构建也正确。
+ */
+function normalizePathSeparators(value) {
+  if (typeof value === 'string') {
+    return value
+      .replace(/\\/g, '/')
+      .replace(/([^:])\/{2,}/g, '$1/')
+  }
+  if (Array.isArray(value)) {
+    return [...new Set(value.map(normalizePathSeparators))]
+  }
+  if (value && typeof value === 'object') {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, val]) => [key, normalizePathSeparators(val)]),
+    )
+  }
+  return value
+}
+
+async function main() {
+  const meta = await helDevUtils.extractHelMetaJson({
+    appInfo,
+    buildDirFullPath: path.join(__dirname, '../hel_dist'),
+    packageJson,
+  })
+
+  const normalizedMeta = normalizePathSeparators(meta)
+  fs.writeFileSync(META_PATH, JSON.stringify(normalizedMeta, null, 2))
+  console.log('[comps-vue3] hel-meta.json 生成完成')
+}
+
+main().catch((err) => {
+  console.error('[comps-vue3] hel-meta.json 生成失败:', err)
+  process.exit(-1)
+})

package/scripts/prepublishOnly.js

@@ -1,27 +1,27 @@
-/*
-|--------------------------------------------------------------------------
-| npm publish 前检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
-|--------------------------------------------------------------------------
-*/
-
-const pkg = require('../package.json')
-const fs = require('fs')
-const path = require('path')
-
-const helDistPath = path.resolve(__dirname, '../hel_dist/hel-meta.json')
-const existHelMeata = fs.existsSync(helDistPath)
-
-// 检查是否执行 pnpm run build 打包命令
-if (!existHelMeata) {
-  console.log("Run the 'pnpm run build' command first.\n")
-  process.exit(1)
-}
-
-const { app } = JSON.parse(fs.readFileSync(helDistPath, 'utf-8'))
-// 检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
-if (app?.build_version !== pkg.version) {
-  console.log(
-    'The package.json version number and the hel_dist/hel-meta.json version number must be the same.\n',
-  )
-  process.exit(1)
-}
+/*
+|--------------------------------------------------------------------------
+| npm publish 前检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
+|--------------------------------------------------------------------------
+*/
+
+const pkg = require('../package.json')
+const fs = require('fs')
+const path = require('path')
+
+const helDistPath = path.resolve(__dirname, '../hel_dist/hel-meta.json')
+const existHelMeata = fs.existsSync(helDistPath)
+
+// 检查是否执行 pnpm run build 打包命令
+if (!existHelMeata) {
+  console.log("Run the 'pnpm run build' command first.\n")
+  process.exit(1)
+}
+
+const { app } = JSON.parse(fs.readFileSync(helDistPath, 'utf-8'))
+// 检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
+if (app?.build_version !== pkg.version) {
+  console.log(
+    'The package.json version number and the hel_dist/hel-meta.json version number must be the same.\n',
+  )
+  process.exit(1)
+}

package/scripts/preview.js

@@ -1,71 +1,72 @@
-/*
-|--------------------------------------------------------------------------
-| 本地预览 hel_dist 构建产物（默认 7002，带 CORS）
-|--------------------------------------------------------------------------
-| 预览前请先执行 `pnpm run build:local`，让产物里的资源地址指向
-| http://localhost:7002，否则 index.html 会引用 unpkg 上的线上地址。
-*/
-const http = require('node:http')
-const fs = require('node:fs')
-const path = require('node:path')
-
-const PORT = Number(process.env.PORT) || 7002
-const ROOT = path.resolve(__dirname, '../hel_dist')
-
-const MIME = {
-  '.html': 'text/html; charset=utf-8',
-  '.js': 'text/javascript; charset=utf-8',
-  '.mjs': 'text/javascript; charset=utf-8',
-  '.css': 'text/css; charset=utf-8',
-  '.json': 'application/json; charset=utf-8',
-  '.map': 'application/json; charset=utf-8',
-  '.png': 'image/png',
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.gif': 'image/gif',
-  '.svg': 'image/svg+xml',
-  '.ico': 'image/x-icon',
-  '.woff': 'font/woff',
-  '.woff2': 'font/woff2',
-}
-
-function send(res, status, body, headers = {}) {
-  res.writeHead(status, {
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Methods': '*',
-    'Access-Control-Allow-Headers': '*',
-    ...headers,
-  })
-  res.end(body)
-}
-
-http
-  .createServer((req, res) => {
-    const urlPath = decodeURIComponent((req.url || '/').split('?')[0])
-    const relativePath = urlPath === '/' ? 'index.html' : urlPath.replace(/^\/+/, '')
-    let filePath = path.resolve(ROOT, relativePath)
-
-    // 防止路径穿越
-    if (filePath !== ROOT && !filePath.startsWith(`${ROOT}${path.sep}`)) {
-      send(res, 403, 'Forbidden')
-      return
-    }
-
-    fs.stat(filePath, (statErr, stat) => {
-      if (!statErr && stat.isDirectory()) {
-        filePath = path.join(filePath, 'index.html')
-      }
-
-      fs.readFile(filePath, (readErr, content) => {
-        if (readErr) {
-          send(res, 404, 'Not Found')
-          return
-        }
-        const contentType = MIME[path.extname(filePath).toLowerCase()] || 'application/octet-stream'
-        send(res, 200, content, { 'Content-Type': contentType })
-      })
-    })
-  })
-  .listen(PORT, () => {
-    console.log(`[comps-vue3] preview: http://localhost:${PORT}`)
-  })
+/*
+|--------------------------------------------------------------------------
+| 本地预览 hel_dist 构建产物（默认 20020，带 CORS）
+|--------------------------------------------------------------------------
+| 预览前请先执行 `pnpm run build:local`，让产物里的资源地址指向
+| http://localhost:20020，否则 index.html 会引用 unpkg 上的线上地址。
+*/
+const http = require('node:http')
+const fs = require('node:fs')
+const path = require('node:path')
+
+// 端口写死，保证本包脱离 monorepo 也能独立运行（全局规则见根目录 ports.json）
+const PORT = Number(process.env.PORT) || 20020
+const ROOT = path.resolve(__dirname, '../hel_dist')
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+}
+
+function send(res, status, body, headers = {}) {
+  res.writeHead(status, {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': '*',
+    'Access-Control-Allow-Headers': '*',
+    ...headers,
+  })
+  res.end(body)
+}
+
+http
+  .createServer((req, res) => {
+    const urlPath = decodeURIComponent((req.url || '/').split('?')[0])
+    const relativePath = urlPath === '/' ? 'index.html' : urlPath.replace(/^\/+/, '')
+    let filePath = path.resolve(ROOT, relativePath)
+
+    // 防止路径穿越
+    if (filePath !== ROOT && !filePath.startsWith(`${ROOT}${path.sep}`)) {
+      send(res, 403, 'Forbidden')
+      return
+    }
+
+    fs.stat(filePath, (statErr, stat) => {
+      if (!statErr && stat.isDirectory()) {
+        filePath = path.join(filePath, 'index.html')
+      }
+
+      fs.readFile(filePath, (readErr, content) => {
+        if (readErr) {
+          send(res, 404, 'Not Found')
+          return
+        }
+        const contentType = MIME[path.extname(filePath).toLowerCase()] || 'application/octet-stream'
+        send(res, 200, content, { 'Content-Type': contentType })
+      })
+    })
+  })
+  .listen(PORT, () => {
+    console.log(`[comps-vue3] preview: http://localhost:${PORT}`)
+  })

package/src/App.vue

@@ -14,13 +14,13 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  /* margin-top: 60px; */
 }
 </style>

package/src/components/CircularMenu.propsSchema.json

@@ -0,0 +1,62 @@
+[
+  {
+    "name": "items",
+    "type": "CircularMenuItem[]",
+    "description": "菜单项，label 是文案，href 给了就走链接，active 是高亮态",
+    "default": "",
+    "required": true,
+    "version": "",
+    "isEvent": false,
+    "bindable": false
+  },
+  {
+    "name": "variant",
+    "type": "'wheel' | 'fan'",
+    "description": "形态：wheel 贴视口底部展开半环，fan 在定位祖先内展开整环",
+    "default": "\"wheel\"",
+    "required": false,
+    "version": "",
+    "isEvent": false,
+    "bindable": true,
+    "value": "wheel",
+    "control": {
+      "options": {
+        "wheel": "wheel",
+        "fan": "fan"
+      }
+    }
+  },
+  {
+    "name": "overlay",
+    "type": "boolean",
+    "description": "wheel 形态下是否显示半透明遮罩",
+    "default": "false",
+    "required": false,
+    "version": "",
+    "isEvent": false,
+    "bindable": true,
+    "value": false
+  },
+  {
+    "name": "openText",
+    "type": "string",
+    "description": "展开时的按钮文案，不传则按形态用默认符号",
+    "default": "",
+    "required": false,
+    "version": "",
+    "isEvent": false,
+    "bindable": true,
+    "value": ""
+  },
+  {
+    "name": "closeText",
+    "type": "string",
+    "description": "收起时的按钮文案，不传则按形态用默认符号",
+    "default": "",
+    "required": false,
+    "version": "",
+    "isEvent": false,
+    "bindable": true,
+    "value": ""
+  }
+]