@owocow/saber-ui 0.0.1

package/README.md

@@ -0,0 +1,72 @@
+# @owocow/saber-ui
+
+Vue 3 component library — BadgeStatus and more, built on top of [@nuxt/ui](https://ui.nuxt.com).
+
+## Install
+
+```bash
+npm install @owocow/saber-ui @nuxt/ui
+```
+
+> Requires: `vue` ^3, `@nuxt/ui` ^4
+
+## Usage
+
+### Plugin (recommended)
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import SaberUI from '@owocow/saber-ui'
+
+const app = createApp(App)
+app.use(SaberUI)
+app.mount('#app')
+```
+
+```vue
+<!-- Anywhere in your app -->
+<template>
+  <BadgeStatus
+    :value="row.status"
+    :config="['闲置:0:green', '已预订:1:blue', '使用中:2:orange']"
+  />
+</template>
+```
+
+### On-demand import
+
+```vue
+<script setup>
+import { BadgeStatus } from '@owocow/saber-ui'
+</script>
+
+<template>
+  <BadgeStatus
+    :value="row.status"
+    :config="['闲置:0:green', '已预订:1:blue', '使用中:2:orange']"
+  />
+</template>
+```
+
+## Components
+
+### BadgeStatus
+
+Status badge driven by `label:value:color` config. Renders `<UBadge>` from `@nuxt/ui`.
+
+Colors use inline styles (hex → rgba) to avoid Tailwind v4 JIT dynamic-class issues.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string \| number` | _(required)_ | Current value, matched against config's value segment |
+| `config` | `string[]` | _(required)_ | `'label:value:color'` array, color = Tailwind color name (500/600 shades) |
+| `bgOpacity` | `number` | `20` | Background opacity (0–100) |
+| `textColorWeight` | `number` | `500` | Text color Tailwind shade |
+
+## License
+
+MIT

package/dist/BadgeStatus.types.d.ts

@@ -0,0 +1,10 @@
+export interface BadgeStatusProps {
+    /** 当前值，与 config 中的 value 段匹配 */
+    value: string | number;
+    /** 'label:value:color' 格式的字符串数组，color 为 Tailwind 颜色名，如 ['闲置:0:green', '已预订:1:blue'] */
+    config: string[];
+    /** 背景色透明度（Tailwind opacity 数值），默认 20 */
+    bgOpacity?: number;
+    /** 文字颜色色阶权重（Tailwind 色阶），默认 500 */
+    textColorWeight?: number;
+}

package/dist/BadgeStatus.vue.d.ts

@@ -0,0 +1,6 @@
+import { BadgeStatusProps } from './BadgeStatus.types';
+declare const _default: import('vue').DefineComponent<BadgeStatusProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BadgeStatusProps> & Readonly<{}>, {
+    bgOpacity: number;
+    textColorWeight: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/colors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Tailwind 官方色系 500 / 600 色阶 hex 映射
+ *
+ * 用于替代动态模板字符串拼接类名，确保 Tailwind v4 JIT 扫描不受影响。
+ * 背景始终取 500 色阶 + rgba 透明度；文字取 textColorWeight 对应色阶。
+ *
+ * @see https://tailwindcss.com/docs/colors
+ */
+export declare function colorHex(color: string, shade: number): string;
+export declare function hexToRgba(hex: string, opacity: number): string;

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@nuxt/ui/components/Badge.vue"),l=require("vue"),s={red:{500:"#ef4444",600:"#dc2626"},orange:{500:"#f97316",600:"#ea580c"},amber:{500:"#f59e0b",600:"#d97706"},yellow:{500:"#eab308",600:"#ca8a04"},lime:{500:"#84cc16",600:"#65a30d"},green:{500:"#22c55e",600:"#16a34a"},emerald:{500:"#10b981",600:"#059669"},teal:{500:"#14b8a6",600:"#0d9488"},cyan:{500:"#06b6d4",600:"#0891b2"},sky:{500:"#0ea5e9",600:"#0284c7"},blue:{500:"#3b82f6",600:"#2563eb"},indigo:{500:"#6366f1",600:"#4f46e5"},violet:{500:"#8b5cf6",600:"#7c3aed"},purple:{500:"#a855f7",600:"#9333ea"},fuchsia:{500:"#d946ef",600:"#c026d3"},pink:{500:"#ec4899",600:"#db2777"},rose:{500:"#f43f5e",600:"#e11d48"},slate:{500:"#64748b",600:"#475569"},gray:{500:"#6b7280",600:"#4b5563"},zinc:{500:"#71717a",600:"#52525b"},neutral:{500:"#737373",600:"#525252"},stone:{500:"#78716c",600:"#57534e"}},g=s.gray;function u(e,t){var o,c;return((o=s[e])==null?void 0:o[t])??((c=s[e])==null?void 0:c[500])??g[500]}function p(e,t){const o=parseInt(e.slice(1,3),16),c=parseInt(e.slice(3,5),16),a=parseInt(e.slice(5,7),16);return`rgba(${o}, ${c}, ${a}, ${t/100})`}const d=l.defineComponent({__name:"BadgeStatus",props:{value:{},config:{},bgOpacity:{default:20},textColorWeight:{default:500}},setup(e){const t=e,o=l.computed(()=>{const a=String(t.value);for(const n of t.config){const[r,i,f]=n.split(":");if(i===a)return{label:r,color:f||"gray"}}return{label:a,color:"gray"}}),c=l.computed(()=>{const{color:a}=o.value,n=u(a,500),r=u(a,t.textColorWeight);return{backgroundColor:p(n,t.bgOpacity),color:r}});return(a,n)=>(l.openBlock(),l.createBlock(b,{style:l.normalizeStyle(c.value),variant:"soft",label:o.value.label,class:"rounded-full border-0 pt-0.75 pb-0.75 px-2"},null,8,["style","label"]))}}),y={install(e){e.component("UBadge",b),e.component("BadgeStatus",d)}};exports.BadgeStatus=d;exports.default=y;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vue';
+import { default as BadgeStatus } from './BadgeStatus.vue';
+declare const SaberUI: Plugin;
+export default SaberUI;
+export { BadgeStatus };
+export type { BadgeStatusProps } from './BadgeStatus.types';

package/dist/index.mjs

@@ -0,0 +1,74 @@
+import u from "@nuxt/ui/components/Badge.vue";
+import { defineComponent as f, computed as s, openBlock as g, createBlock as p, normalizeStyle as m } from "vue";
+const l = {
+  red: { 500: "#ef4444", 600: "#dc2626" },
+  orange: { 500: "#f97316", 600: "#ea580c" },
+  amber: { 500: "#f59e0b", 600: "#d97706" },
+  yellow: { 500: "#eab308", 600: "#ca8a04" },
+  lime: { 500: "#84cc16", 600: "#65a30d" },
+  green: { 500: "#22c55e", 600: "#16a34a" },
+  emerald: { 500: "#10b981", 600: "#059669" },
+  teal: { 500: "#14b8a6", 600: "#0d9488" },
+  cyan: { 500: "#06b6d4", 600: "#0891b2" },
+  sky: { 500: "#0ea5e9", 600: "#0284c7" },
+  blue: { 500: "#3b82f6", 600: "#2563eb" },
+  indigo: { 500: "#6366f1", 600: "#4f46e5" },
+  violet: { 500: "#8b5cf6", 600: "#7c3aed" },
+  purple: { 500: "#a855f7", 600: "#9333ea" },
+  fuchsia: { 500: "#d946ef", 600: "#c026d3" },
+  pink: { 500: "#ec4899", 600: "#db2777" },
+  rose: { 500: "#f43f5e", 600: "#e11d48" },
+  slate: { 500: "#64748b", 600: "#475569" },
+  gray: { 500: "#6b7280", 600: "#4b5563" },
+  zinc: { 500: "#71717a", 600: "#52525b" },
+  neutral: { 500: "#737373", 600: "#525252" },
+  stone: { 500: "#78716c", 600: "#57534e" }
+}, y = l.gray;
+function b(e, t) {
+  var o, c;
+  return ((o = l[e]) == null ? void 0 : o[t]) ?? ((c = l[e]) == null ? void 0 : c[500]) ?? y[500];
+}
+function v(e, t) {
+  const o = parseInt(e.slice(1, 3), 16), c = parseInt(e.slice(3, 5), 16), a = parseInt(e.slice(5, 7), 16);
+  return `rgba(${o}, ${c}, ${a}, ${t / 100})`;
+}
+const x = /* @__PURE__ */ f({
+  __name: "BadgeStatus",
+  props: {
+    value: {},
+    config: {},
+    bgOpacity: { default: 20 },
+    textColorWeight: { default: 500 }
+  },
+  setup(e) {
+    const t = e, o = s(() => {
+      const a = String(t.value);
+      for (const n of t.config) {
+        const [r, d, i] = n.split(":");
+        if (d === a)
+          return { label: r, color: i || "gray" };
+      }
+      return { label: a, color: "gray" };
+    }), c = s(() => {
+      const { color: a } = o.value, n = b(a, 500), r = b(a, t.textColorWeight);
+      return {
+        backgroundColor: v(n, t.bgOpacity),
+        color: r
+      };
+    });
+    return (a, n) => (g(), p(u, {
+      style: m(c.value),
+      variant: "soft",
+      label: o.value.label,
+      class: "rounded-full border-0 pt-0.75 pb-0.75 px-2"
+    }, null, 8, ["style", "label"]));
+  }
+}), k = {
+  install(e) {
+    e.component("UBadge", u), e.component("BadgeStatus", x);
+  }
+};
+export {
+  x as BadgeStatus,
+  k as default
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@owocow/saber-ui",
+  "version": "0.0.1",
+  "description": "Vue 3 component library — BadgeStatus and more, built on top of @nuxt/ui",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@nuxt/ui": "^4",
+    "vue": "^3"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "^4",
+    "@vitejs/plugin-vue": "^5",
+    "typescript": "^5",
+    "vite": "^6",
+    "vite-plugin-dts": "^4",
+    "vue": "^3"
+  },
+  "keywords": [
+    "vue",
+    "components",
+    "badge",
+    "status",
+    "nuxt-ui"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/owocow/saber-ui"
+  }
+}