npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@zy_ui/zy-ui

v0.1.1

Published

ZY-UI — Zy* 业务组件集(Naive UI 之上,经 ZyDataLoader 注入取数,自包含可发布包).

Readme

@zbzc/zy-ui

ZBZC 的 Naive-UI 业务组件集(Zy* 系列)的可发布包。

架构要点

  • 单一实现:组件(mock-free)常驻本仓库 src/components/**,经由 ZyDataLoader 取值/动作, mock 只在演示边界 src/mock-adapter.ts。
  • packages/zy-ui 以 vite lib 从该实现产出自包含 dist/zy-ui.js + dist/style.css (运行时外部仅 vue、naive-ui;@vicons/*、@antv/x6 一并打入)。
  • 类型出厂状态:主入口(各 Zy* 组件)暂只随 JS/CSS;dist/types/**(由 src/zylib alias-free 目录经 tsc 生成)仅覆盖数据契约/域模型(自 @zbzc/zy-ui/data 取)。 组件级 props 类型(需遍历 .vue 生成首轮声明)仍是后续改进项。

在宿主(App/新低代码项目)接入

  1. 依赖本包 + naive-ui + vue(源码构建时用 workspace 链接或私有 registry/git 引用包)。
  2. naive 四个 provider 包裹,并注入数据源:
<script setup>
import { provideZyData, useZyData } from '@zbzc/zy-ui'
// 返回 Promise 的方法按 ZyDataLoader 接口实现(未实现的方法会在调用时抛可读错误)
provideZyData({
  loadTabs: (viewCode) => http.get(`/tabs/${viewCode}`).then((r) => r.body),
  loadOperations: (op) => http.fetchOperations(op),
  getObject: (op) => http.getObject(op),
  exportRows: () => exportService().then((b) => b),
  // ……对象 CRUD/锁/版本、IDM 用户/组织/生命周期、人员树、关系图、模块X6、字典 等按需
})
</script>

<template>
  <n-config-provider>
    <n-message-provider><n-dialog-provider><n-notification-provider>
      <MyPage/>
    </n-notification-provider></n-dialog-provider></n-message-provider>
  </n-config-provider>
</template>
  • 运行时 API(provideZyData/useZyData 及各 Zy* 组件)来自主入口 import { ... } from '@zbzc/zy-ui'。
  • 类型契约(ZyDataLoader、域模型 ZyRow/OptItem/ObjDetail/…)可从 import type { ZyDataLoader } from '@zbzc/zy-ui/data'。
  1. demo 内 import 参考 src/views/**(如 ZyTable/ZyTabs/ZyOperateBtns/ZySelectXxx 等 26 个 Zy*)。

ZyDataLoader 完整方法清单见 src/zylib/data-loader.ts(=packages/zy-ui 源所对齐的契约)。

演示工程开发 / 校验

pnpm install
pnpm dev      # 打开各路由浏览
pnpm build    # demo 产物
pnpm smoke    # headless chromium 逐路由冒烟(22 路由,判 console error + 文本渲染)
pnpm -C packages/zy-ui build:runtime   # 组装运行时(包 runtime dist)
pnpm -C packages/zy-ui build:types     # 生成类型契约 dist/types
pnpm -C packages/zy-ui build           # 二者都做

发布

pnpm -C packages/zy-ui pack           # 本地校验包内容(dist/{zy-ui.js,style.css,types/**} + README + package.json)
# 推独立仓库后,新低代码项目以 registry 或 git 依赖引用:
#   "dependencies": { "@zbzc/zy-ui": "git+https://<host>/<org>/zy-ui.git#v0.1.0" }