sharedcz-vue3 1.0.0

package/LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2026
+
+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 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

@@ -0,0 +1,87 @@
+# sharedcz-vue3
+
+A small Vue 3 library with shared components and utilities.
+
+## Naming conventions
+
+- Components use `Cz` prefix and PascalCase, e.g. `CzButton`.
+- Utilities use `cz` prefix and camelCase, e.g. `czDebounce`, `czClamp`.
+- Installing the plugin mounts utilities on `app.config.globalProperties.$cz` for runtime access (e.g. `this.$cz.czDebounce`).
+
+## Install
+
+```bash
+npm i sharedcz-vue3
+```
+
+## Usage
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import SharedCZ, { CzButton, czDebounce } from 'sharedcz-vue3'
+import 'sharedcz-vue3/style.css'
+
+const app = createApp(App)
+app.use(SharedCZ)
+app.mount('#app')
+
+// or named imports
+// app.component('CzButton', CzButton)
+// console.log(czDebounce)
+```
+
+## Styles & theming
+
+- Global variables and base rules are defined in `src/styles/base.css` and built to `dist/style.css`.
+- Component-specific styles are stored in `src/styles/components/` and copied to `dist/components/` during `postbuild`.
+- To customize theme or adapt styles in the consumer project, override CSS variables before importing the library stylesheet:
+
+```css
+:root {
+  --cz-primary: #1a73e8;
+  --cz-btn-bg: #fff;
+  --cz-btn-color: #1a73e8;
+}
+@import 'sharedcz-vue3/style.css';
+```
+
+If you only need to tweak a specific component, import its CSS from `dist/components/<component>.css`.
+
+## Build & Test
+
+```
+cd packages/sharedcz-vue3
+npm install
+npm run build    # builds lib to dist/ and runs postbuild to copy styles
+npm test         # runs unit tests (vitest)
+```
+
+## Publish
+
+- Before publishing, bump the package `version` in `packages/sharedcz-vue3/package.json`.
+- Publish with:
+
+```bash
+cd packages/sharedcz-vue3
+npm publish --access public
+```
+
+> Note: This template intentionally does not contain an automated publish workflow. If your npm account requires two-factor authentication (2FA), use an Automation token with `bypass 2FA` in CI when automating publishes.
+
+## Files & structure
+
+Key files:
+
+- `src/components/` — component source files (each component has its own folder and style in `src/styles/components/`)
+- `src/styles/` — `base.css` and per-component CSS files
+- `src/utils/` — utility functions prefixed with `cz`
+- `dist/` — build output (JS bundles + `style.css` + `components/` styles)
+
+---
+
+If you'd like, I can also:
+- add a small example demo (Vite app) showing variable overrides and per-component style imports, or
+- create a simple CI step that runs build + tests on push (no publishing).
+
+Tell me which (if any) you'd like next.

package/dist/components/cz-button.css

@@ -0,0 +1,11 @@
+.cz-btn {
+  min-width: 100px;
+  height: 36px;
+  border-radius: 6px;
+  border: 1px solid var(--cz-btn-border);
+  background: var(--cz-btn-bg);
+  color: var(--cz-btn-color);
+  cursor: pointer;
+  font-family: inherit;
+}
+.cz-btn:hover { background: var(--cz-primary); color: #fff }

package/dist/index.css

@@ -0,0 +1 @@
+.cz-btn[data-v-cfc70710]{min-width:100px;height:36px;border-radius:6px;border:1px solid var(--cz-btn-border);background:var(--cz-btn-bg);color:var(--cz-btn-color);cursor:pointer;font-family:inherit}.cz-btn[data-v-cfc70710]:hover{background:var(--cz-primary);color:#fff}

package/dist/sharedcz-vue3.es.js

@@ -0,0 +1,45 @@
+import { openBlock as r, createElementBlock as i, renderSlot as l, createTextVNode as _ } from "vue";
+const a = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [n, c] of o)
+    t[n] = c;
+  return t;
+}, u = { class: "cz-btn" }, f = /* @__PURE__ */ Object.assign({ name: "CzButton" }, {
+  __name: "index",
+  setup(e) {
+    return (o, t) => (r(), i("button", u, [
+      l(o.$slots, "default", {}, () => [
+        t[0] || (t[0] = _("Button", -1))
+      ], !0)
+    ]));
+  }
+}), p = /* @__PURE__ */ a(f, [["__scopeId", "data-v-cfc70710"]]);
+function m(e, o = 300) {
+  let t;
+  return function(...n) {
+    const c = this;
+    clearTimeout(t), t = setTimeout(() => e.apply(c, n), o);
+  };
+}
+function d(e, o, t) {
+  return Math.min(t, Math.max(o, e));
+}
+const s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  czClamp: d,
+  czDebounce: m
+}, Symbol.toStringTag, { value: "Module" })), g = [p];
+function b(e) {
+  g.forEach((o) => {
+    const t = o.name || o.__file && o.__file.split("/").pop().replace(/\.[^.]+$/, "");
+    t && e.component(t, o);
+  }), e.config.globalProperties.$cz || (e.config.globalProperties.$cz = {}), Object.assign(e.config.globalProperties.$cz, s);
+}
+const x = Object.assign({ install: b }, s);
+export {
+  p as CzButton,
+  d as czClamp,
+  m as czDebounce,
+  x as default
+};
+//# sourceMappingURL=sharedcz-vue3.es.js.map

package/dist/sharedcz-vue3.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedcz-vue3.es.js","sources":["../src/components/cz-button/index.vue","../src/utils/debounce.js","../src/utils/index.js","../src/index.js"],"sourcesContent":["<template>\r\n  <button class=\"cz-btn\"><slot>Button</slot></button>\r\n</template>\r\n\r\n<script setup>\r\ndefineOptions({ name: 'CzButton' })\r\n</script>\r\n\r\n<style src=\"../../styles/components/cz-button.css\" scoped></style>\r\n","/**\r\n * Debounce helper (cz-prefixed)\r\n * @param {Function} fn\r\n * @param {number} wait\r\n */\r\nexport function czDebounce(fn, wait = 300) {\r\n  let timer\r\n  return function (...args) {\r\n    const ctx = this\r\n    clearTimeout(timer)\r\n    timer = setTimeout(() => fn.apply(ctx, args), wait)\r\n  }\r\n}\r\n","export { czDebounce } from './debounce'\r\n\r\nexport function czClamp(n, min, max) {\r\n  return Math.min(max, Math.max(min, n))\r\n}\r\n","import CzButton from './components/cz-button/index.vue'\r\nimport * as utils from './utils'\r\n\r\nconst components = [CzButton]\r\n\r\nfunction install(app) {\r\n  components.forEach((c) => {\r\n    const name =\r\n      c.name ||\r\n      (c.__file &&\r\n        c.__file\r\n          .split('/')\r\n          .pop()\r\n          .replace(/\\.[^.]+$/, ''))\r\n    if (name) app.component(name, c)\r\n  })\r\n\r\n  // Mount utilities under a short global property $cz\r\n  if (!app.config.globalProperties.$cz) app.config.globalProperties.$cz = {}\r\n  Object.assign(app.config.globalProperties.$cz, utils)\r\n}\r\n\r\nexport { CzButton }\r\nexport * from './utils'\r\nexport default Object.assign({ install }, utils)\r\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","czDebounce","fn","wait","timer","args","ctx","czClamp","n","min","max","components","CzButton","install","app","c","name","utils","index"],"mappings":";;;;;;;;;sBACEA,EAAA,GAAAC,EAAmD,UAAnDC,GAAmD;AAAA,MAA5BC,EAAmBC,yBAAnB,MAAmB;AAAA,0BAAb,UAAM,EAAA;AAAA;;;;ACI9B,SAASC,EAAWC,GAAIC,IAAO,KAAK;AACzC,MAAIC;AACJ,SAAO,YAAaC,GAAM;AACxB,UAAMC,IAAM;AACZ,iBAAaF,CAAK,GAClBA,IAAQ,WAAW,MAAMF,EAAG,MAAMI,GAAKD,CAAI,GAAGF,CAAI;AAAA,EACnD;AACH;ACVO,SAASI,EAAQC,GAAGC,GAAKC,GAAK;AACnC,SAAO,KAAK,IAAIA,GAAK,KAAK,IAAID,GAAKD,CAAC,CAAC;AACvC;;;;;8CCDMG,IAAa,CAACC,CAAQ;AAE5B,SAASC,EAAQC,GAAK;AACpB,EAAAH,EAAW,QAAQ,CAACI,MAAM;AACxB,UAAMC,IACJD,EAAE,QACDA,EAAE,UACDA,EAAE,OACC,MAAM,GAAG,EACT,IAAK,EACL,QAAQ,YAAY,EAAE;AAC7B,IAAIC,KAAMF,EAAI,UAAUE,GAAMD,CAAC;AAAA,EACnC,CAAG,GAGID,EAAI,OAAO,iBAAiB,QAAKA,EAAI,OAAO,iBAAiB,MAAM,CAAE,IAC1E,OAAO,OAAOA,EAAI,OAAO,iBAAiB,KAAKG,CAAK;AACtD;AAIA,MAAeC,IAAA,OAAO,OAAO,EAAE,SAAAL,EAAO,GAAII,CAAK;"}

package/dist/sharedcz-vue3.umd.js

@@ -0,0 +1,3 @@
+(function(o,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(o=typeof globalThis<"u"?globalThis:o||self,c(o.SharedCZ={},o.Vue))})(this,function(o,c){"use strict";var s=document.createElement("style");s.textContent=`.cz-btn[data-v-cfc70710]{min-width:100px;height:36px;border-radius:6px;border:1px solid var(--cz-btn-border);background:var(--cz-btn-bg);color:var(--cz-btn-color);cursor:pointer;font-family:inherit}.cz-btn[data-v-cfc70710]:hover{background:var(--cz-primary);color:#fff}
+`,document.head.appendChild(s);const z="",d=(t,n)=>{const e=t.__vccOpts||t;for(const[r,i]of n)e[r]=i;return e},_={class:"cz-btn"},a=d(Object.assign({name:"CzButton"},{__name:"index",setup(t){return(n,e)=>(c.openBlock(),c.createElementBlock("button",_,[c.renderSlot(n.$slots,"default",{},()=>[e[0]||(e[0]=c.createTextVNode("Button",-1))],!0)]))}}),[["__scopeId","data-v-cfc70710"]]);function l(t,n=300){let e;return function(...r){const i=this;clearTimeout(e),e=setTimeout(()=>t.apply(i,r),n)}}function u(t,n,e){return Math.min(e,Math.max(n,t))}const f=Object.freeze(Object.defineProperty({__proto__:null,czClamp:u,czDebounce:l},Symbol.toStringTag,{value:"Module"})),p=[a];function b(t){p.forEach(n=>{const e=n.name||n.__file&&n.__file.split("/").pop().replace(/\.[^.]+$/,"");e&&t.component(e,n)}),t.config.globalProperties.$cz||(t.config.globalProperties.$cz={}),Object.assign(t.config.globalProperties.$cz,f)}const m=Object.assign({install:b},f);o.CzButton=a,o.czClamp=u,o.czDebounce=l,o.default=m,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=sharedcz-vue3.umd.js.map

package/dist/sharedcz-vue3.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedcz-vue3.umd.js","sources":["../src/components/cz-button/index.vue","../src/utils/debounce.js","../src/utils/index.js","../src/index.js"],"sourcesContent":["<template>\r\n  <button class=\"cz-btn\"><slot>Button</slot></button>\r\n</template>\r\n\r\n<script setup>\r\ndefineOptions({ name: 'CzButton' })\r\n</script>\r\n\r\n<style src=\"../../styles/components/cz-button.css\" scoped></style>\r\n","/**\r\n * Debounce helper (cz-prefixed)\r\n * @param {Function} fn\r\n * @param {number} wait\r\n */\r\nexport function czDebounce(fn, wait = 300) {\r\n  let timer\r\n  return function (...args) {\r\n    const ctx = this\r\n    clearTimeout(timer)\r\n    timer = setTimeout(() => fn.apply(ctx, args), wait)\r\n  }\r\n}\r\n","export { czDebounce } from './debounce'\r\n\r\nexport function czClamp(n, min, max) {\r\n  return Math.min(max, Math.max(min, n))\r\n}\r\n","import CzButton from './components/cz-button/index.vue'\r\nimport * as utils from './utils'\r\n\r\nconst components = [CzButton]\r\n\r\nfunction install(app) {\r\n  components.forEach((c) => {\r\n    const name =\r\n      c.name ||\r\n      (c.__file &&\r\n        c.__file\r\n          .split('/')\r\n          .pop()\r\n          .replace(/\\.[^.]+$/, ''))\r\n    if (name) app.component(name, c)\r\n  })\r\n\r\n  // Mount utilities under a short global property $cz\r\n  if (!app.config.globalProperties.$cz) app.config.globalProperties.$cz = {}\r\n  Object.assign(app.config.globalProperties.$cz, utils)\r\n}\r\n\r\nexport { CzButton }\r\nexport * from './utils'\r\nexport default Object.assign({ install }, utils)\r\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","czDebounce","fn","wait","timer","args","ctx","czClamp","n","min","max","components","CzButton","install","app","c","name","utils","index"],"mappings":";6MACEA,YAAA,EAAAC,qBAAmD,SAAnDC,EAAmD,CAA5BC,EAAAA,WAAmBC,sBAAnB,IAAmB,+BAAb,SAAM,EAAA,iDCI9B,SAASC,EAAWC,EAAIC,EAAO,IAAK,CACzC,IAAIC,EACJ,OAAO,YAAaC,EAAM,CACxB,MAAMC,EAAM,KACZ,aAAaF,CAAK,EAClBA,EAAQ,WAAW,IAAMF,EAAG,MAAMI,EAAKD,CAAI,EAAGF,CAAI,CACnD,CACH,CCVO,SAASI,EAAQC,EAAGC,EAAKC,EAAK,CACnC,OAAO,KAAK,IAAIA,EAAK,KAAK,IAAID,EAAKD,CAAC,CAAC,CACvC,2HCDMG,EAAa,CAACC,CAAQ,EAE5B,SAASC,EAAQC,EAAK,CACpBH,EAAW,QAASI,GAAM,CACxB,MAAMC,EACJD,EAAE,MACDA,EAAE,QACDA,EAAE,OACC,MAAM,GAAG,EACT,IAAK,EACL,QAAQ,WAAY,EAAE,EACzBC,GAAMF,EAAI,UAAUE,EAAMD,CAAC,CACnC,CAAG,EAGID,EAAI,OAAO,iBAAiB,MAAKA,EAAI,OAAO,iBAAiB,IAAM,CAAE,GAC1E,OAAO,OAAOA,EAAI,OAAO,iBAAiB,IAAKG,CAAK,CACtD,CAIe,MAAAC,EAAA,OAAO,OAAO,CAAE,QAAAL,CAAO,EAAII,CAAK"}

package/dist/style.css

@@ -0,0 +1,10 @@
+/* Global variables and base styles for sharedcz-vue3 */
+:root {
+  --cz-primary: #000;
+  --cz-btn-bg: #fff;
+  --cz-btn-color: #000;
+  --cz-btn-border: #000;
+}
+
+* { box-sizing: border-box }
+body { margin: 0 }

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "sharedcz-vue3",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/sharedcz-vue3.umd.js",
+  "module": "dist/sharedcz-vue3.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/sharedcz-vue3.es.js",
+      "require": "./dist/sharedcz-vue3.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "postbuild": "node scripts/copy-styles.js",
+    "test": "vitest",
+    "dev:example": "cd example && npm install && npm run dev"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "vite": "^4.4.9",
+    "@vitejs/plugin-vue": "^4.2.0",
+    "vitest": "^0.34.0",
+    "@vue/test-utils": "^2.0.0-rc.24"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "sharedcz-vue3 - shared Vue 3 components and utilities"
+}