da-style 0.0.12 → 0.1.2

package/dist/src/token/typography.d.ts

@@ -0,0 +1,86 @@
+/**
+ * da-style Typography System
+ *
+ * Cyberpunk-informed type scale: monospace primary for that
+ * hacker/terminal feel, system-ui for headings where readability
+ * at large sizes matters.
+ */
+export declare const fontMono = "'Courier New', 'Consolas', 'Source Code Pro', monospace";
+export declare const fontSans = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+export declare const fontHeading = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+export declare const fontBody = "'Courier New', Consolas, monospace";
+export declare const textXs = "12px";
+export declare const textSm = "14px";
+export declare const textBase = "16px";
+export declare const textLg = "18px";
+export declare const textXl = "20px";
+export declare const text2xl = "24px";
+export declare const text3xl = "30px";
+export declare const weightRegular = "400";
+export declare const weightMedium = "500";
+export declare const weightSemibold = "600";
+export declare const weightBold = "700";
+export declare const leadingTight = "1.2";
+export declare const leadingNormal = "1.5";
+export declare const leadingRelaxed = "1.75";
+export declare const trackingTight = "-0.02em";
+export declare const trackingNormal = "0";
+export declare const trackingWide = "0.08em";
+export declare const cssVars: {
+    readonly font: {
+        readonly mono: "--d-font-mono";
+        readonly sans: "--d-font-sans";
+        readonly heading: "--d-font-heading";
+        readonly body: "--d-font-body";
+    };
+    readonly size: {
+        readonly xs: "--d-text-xs";
+        readonly sm: "--d-text-sm";
+        readonly base: "--d-text-base";
+        readonly lg: "--d-text-lg";
+        readonly xl: "--d-text-xl";
+        readonly '2xl': "--d-text-2xl";
+        readonly '3xl': "--d-text-3xl";
+    };
+    readonly weight: {
+        readonly regular: "--d-weight-regular";
+        readonly medium: "--d-weight-medium";
+        readonly semibold: "--d-weight-semibold";
+        readonly bold: "--d-weight-bold";
+    };
+    readonly leading: {
+        readonly tight: "--d-leading-tight";
+        readonly normal: "--d-leading-normal";
+        readonly relaxed: "--d-leading-relaxed";
+    };
+    readonly tracking: {
+        readonly tight: "--d-tracking-tight";
+        readonly normal: "--d-tracking-normal";
+        readonly wide: "--d-tracking-wide";
+    };
+};
+export interface TypographyTokens {
+    fontMono: string;
+    fontSans: string;
+    fontHeading: string;
+    fontBody: string;
+    textXs: string;
+    textSm: string;
+    textBase: string;
+    textLg: string;
+    textXl: string;
+    text2xl: string;
+    text3xl: string;
+    weightRegular: string;
+    weightMedium: string;
+    weightSemibold: string;
+    weightBold: string;
+    leadingTight: string;
+    leadingNormal: string;
+    leadingRelaxed: string;
+    trackingTight: string;
+    trackingNormal: string;
+    trackingWide: string;
+}
+/** All typography tokens as a flat object */
+export declare const typography: TypographyTokens;

package/package.json

@@ -1,31 +1,38 @@
-{
-  "name": "da-style",
-  "version": "0.0.12",
-  "description": "Da式风格组件库,把自己觉得一些好看的组件封装起来，方便用",
-  "private": false,
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "license": "MIT",
-  "author": "da",
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "vite",
-    "serve": "vite preview"
-  },
-  "files": [
-    "lib",
-    "README.md"
-  ],
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^1.6.1",
-    "@vue/compiler-sfc": "^3.2.6",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
-    "vite": "^2.5.4",
-    "vue": "^3.2.6"
-  },
-  "dependencies": {
-    "rollup": "^2.79.0"
-  }
-}
+{
+  "name": "da-style",
+  "version": "0.1.2",
+  "description": "赛博朋克风格 Vue3 组件库",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "author": "da",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "vue": "^3.5.38"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^3.3.5"
+  }
+}

package/lib/index.js

@@ -1 +0,0 @@
-import{defineComponent as r,openBlock as t,createElementBlock as n,normalizeClass as o,renderSlot as a,pushScopeId as e,popScopeId as d,createElementVNode as c,Fragment as l,renderList as i}from"vue";var s=r({name:"DBtn",props:{type:String}});function b(r,t){void 0===t&&(t={});var n=t.insertAt;if(r&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}b('\nbutton[data-v-5ac4ea34] {\r\n\t/*背景颜色*/\r\n\t--d-bg-color: #ccc;\r\n\t/*文字颜色*/\r\n\t--d-text-color: #fff;\r\n\t/*边框样式*/\r\n\t--d-border: 4px solid var(--d-bg-color);\r\n\t/*鼠标悬浮边框样式*/\r\n\t--d-hover-border: 4px solid var(--d-hover-color);\r\n\t/*按钮点击颜色*/\r\n\t--d-active-color: var(--d-bg-color);\r\n\t/*鼠标悬浮颜色*/\r\n\t--d-hover-color: rgba(0, 0, 0, 0.5);\r\n\tmargin: 0.5rem;\r\n\toutline: none;\r\n\tbackground: var(--d-bg-color);\r\n\tcolor: var(--d-text-color);\r\n\tborder-radius: 0.2rem;\r\n\tpadding: 0.3rem 1rem;\r\n\tfont-weight: bold;\r\n\ttransition: 0.25s all ease-in-out;\r\n\tcursor: pointer;\r\n\tborder: none;\r\n\tposition: relative;\r\n\tbox-shadow: 1px 1px 1px var(--d-bg-color), -1px -1px 1px var(--d-bg-color);\n}\nbutton[data-v-5ac4ea34]::before,\r\nbutton[data-v-5ac4ea34]::after {\r\n\tcontent: "";\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder-radius: inherit;\r\n\tposition: absolute;\r\n\tbackground: transparent;\r\n\tvisibility: hidden;\r\n\ttransition: 0.1s all ease-in-out;\n}\nbutton[data-v-5ac4ea34]::before {\r\n\ttop: -5px;\r\n\tleft: -5px;\r\n\tborder-top: var(--d-border);\r\n\tborder-left: var(--d-border);\n}\nbutton[data-v-5ac4ea34]::after {\r\n\tbottom: -5px;\r\n\tright: -5px;\r\n\tbackground: transparent;\r\n\tborder-right: var(--d-border);\r\n\tborder-bottom: var(--d-border);\n}\nbutton[data-v-5ac4ea34]:hover {\r\n\tbackground: var(--d-hover-color);\n}\nbutton[data-v-5ac4ea34]:hover::before {\r\n\tborder-top: var(--d-hover-border);\r\n\tborder-left: var(--d-hover-border);\r\n\tvisibility: visible;\n}\nbutton[data-v-5ac4ea34]:hover::after {\r\n\tborder-right: var(--d-hover-border);\r\n\tborder-bottom: var(--d-hover-border);\r\n\tvisibility: visible;\n}\nbutton[data-v-5ac4ea34]:active {\r\n\tbackground: var(--d-active-color);\r\n\tcolor: var(--d-text-color);\n}\n.info[data-v-5ac4ea34] {\r\n\t--d-bg-color: #3498db;\r\n\t--d-hover-color: #2980b9;\n}\n.success[data-v-5ac4ea34] {\r\n\t--d-bg-color: #2ecc71;\r\n\t--d-hover-color: #27ae60;\n}\n.err[data-v-5ac4ea34] {\r\n\t--d-bg-color: #e74c3c;\r\n\t--d-hover-color: #c0392b;\n}\n.warn[data-v-5ac4ea34] {\r\n\t--d-bg-color: #f1c40f;\r\n\t--d-hover-color: #f39c12;\n}\r\n'),s.render=function(r,e,d,c,l,i){return t(),n("button",{class:o(r.type)},[a(r.$slots,"default")],2)},s.__scopeId="data-v-5ac4ea34",s.__file="packages/DBtn/src/DBtn.vue",s.install=function(r){r.component(s.name,s)};var v=r({name:"DInput",props:{type:String}});const u=["type"];b("\ninput[data-v-457377a6] {\r\n  --d-border-color: rgba(0, 0, 0, 0.7);\r\n  --d-text-color: #3498db;\r\n  outline: none;\r\n  border: none;\r\n  padding: 0.5rem;\r\n  margin: 0.5rem;\r\n  border-radius: 0.2rem;\r\n  font-weight: bold;\r\n  box-shadow: 1px 1px 1px var(--d-border-color),\r\n    -1px -1px 1px var(--d-border-color);\n}\ninput[data-v-457377a6]:active,\r\ninput[data-v-457377a6]:hover {\r\n  --d-border-color: var(--d-text-color);\r\n  caret-color: var(--d-text-color);\n}\r\n"),v.render=function(r,o,a,e,d,c){return t(),n("input",{type:r.type,spellcheck:"false"},null,8,u)},v.__scopeId="data-v-457377a6",v.__file="packages/DInput/src/DInput.vue",v.install=function(r){r.component(v.name,v)};var p=r({name:"DButton",props:{type:String}});const f=(r=>(e("data-v-90ab4c44"),r=r(),d(),r))((()=>c("span",null,null,-1)));b('\nbutton[data-v-90ab4c44] {\r\n\t--d-color: royalblue;\r\n\toverflow: hidden;\r\n\tbox-sizing: border-box;\r\n\tborder: none;\r\n\tposition: relative;\r\n\tpadding: 0.3rem 1rem;\r\n\tmargin: .3rem;\r\n\tfont-size: 1.1rem;\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n\tbackground-color: transparent;\r\n\tcolor: var(--d-color);\n}\nbutton span[data-v-90ab4c44] {\r\n\tbox-sizing: border-box;\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground-color: transparent;\r\n\tz-index: -1;\r\n\tborder: 4px solid var(--d-color);\n}\nbutton span[data-v-90ab4c44]::before {\r\n\tcontent: "";\r\n\tposition: absolute;\r\n\twidth: 8%;\r\n\theight: 500%;\r\n\tbackground-color: white;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%) rotate(-60deg);\r\n\ttransition: 0.25s all;\n}\nbutton:hover span[data-v-90ab4c44]::before,\r\nbutton:focus span[data-v-90ab4c44]::before {\r\n\ttransform: translate(-50%, -50%) rotate(-90deg);\r\n\twidth: 100%;\r\n\tbackground: var(--d-color);\n}\nbutton[data-v-90ab4c44]:hover,\r\nbutton[data-v-90ab4c44]:focus {\r\n\tcolor: white;\n}\n.info[data-v-90ab4c44] {\r\n\t--d-color: #3498db;\n}\n.err[data-v-90ab4c44] {\r\n\t--d-color: #e74c3c;\n}\n.warn[data-v-90ab4c44] {\r\n\t--d-color: #f1c40f;\n}\n.success[data-v-90ab4c44] {\r\n\t--d-color: #2ecc71;\n}\r\n'),p.render=function(r,e,d,c,l,i){return t(),n("button",{class:o(r.type)},[a(r.$slots,"default"),f],2)},p.__scopeId="data-v-90ab4c44",p.__file="packages/DButton/src/DButton.vue",p.install=function(r){r.component(p.name,p)};var m=r({name:"DFalls",props:{data:Array}});const h={class:"falls"},x={class:"box"},g=["src"];b("\n.falls[data-v-6cd592e6] {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\n}\n.box[data-v-6cd592e6] {\r\n\tmax-width: 1300px;\r\n\tcolumn-count: 5;\r\n\tcolumn-gap: 15px;\n}\n.box div[data-v-6cd592e6] {\r\n\tmargin-bottom: 1rem;\n}\n.box div img[data-v-6cd592e6] {\r\n\twidth: 100%;\n}\n@media (max-width: 1200px) {\n.box[data-v-6cd592e6] {\r\n\t\tcolumn-count: 4;\n}\n}\n@media (max-width: 850px) {\n.box[data-v-6cd592e6] {\r\n\t\tcolumn-count: 3;\n}\n}\n@media (max-width: 600px) {\n.box[data-v-6cd592e6] {\r\n\t\tcolumn-count: 2;\n}\n}\r\n"),m.render=function(r,o,a,e,d,s){return t(),n("div",h,[c("div",x,[(t(!0),n(l,null,i(r.data,(r=>(t(),n("div",{key:r},[c("img",{src:r},null,8,g)])))),128))])])},m.__scopeId="data-v-6cd592e6",m.__file="packages/DFalls/src/DFalls.vue",m.install=function(r){r.component(m.name,m)};const y=[s,v,p,m];var w={install:r=>{y.forEach((t=>r.component(t.name,t)))},...y};export{s as DBtn,p as DButton,m as DFalls,v as DInput,w as default};