da-style 0.0.2 → 0.0.6

package/README.md

@@ -1 +1,12 @@
-# da式风格组件库
+# da式风格组件库
+
+## 按钮组件
+
+> **DBtn** 通过type的值变换风格:info、err、warn、success
+
+> **DButton** 通过type的值变换风格:info、err、warn、success
+
+## 输入框组件
+等待中...
+
+

package/lib/index.js

@@ -1 +1 @@
-import{defineComponent as r}from"@vue/runtime-core";import{openBlock as n,createElementBlock as e,normalizeClass as o,renderSlot as t}from"vue";var a=r({name:"DBtn",props:{type:String}});!function(r,n){void 0===n&&(n={});var e=n.insertAt;if(r&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===e&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=r:t.appendChild(document.createTextNode(r))}}('\nbutton[data-v-5ac4ea34] {\r\n  /*背景颜色*/\r\n  --d-bg-color: #ccc;\r\n  /*文字颜色*/\r\n  --d-text-color: #fff;\r\n  /*边框样式*/\r\n  --d-border: 4px solid var(--d-bg-color);\r\n  /*鼠标悬浮边框样式*/\r\n  --d-hover-border: 4px solid var(--d-hover-color);\r\n  /*按钮点击颜色*/\r\n  --d-active-color: var(--d-bg-color);\r\n  /*鼠标悬浮颜色*/\r\n  --d-hover-color: rgba(0, 0, 0, 0.5);\r\n  margin: 0.5rem;\r\n  outline: none;\r\n  background: var(--d-bg-color);\r\n  color: var(--d-text-color);\r\n  border-radius: 0.2rem;\r\n  padding: 0.3rem 1rem;\r\n  font-weight: bold;\r\n  transition: 0.25s all ease-in-out;\r\n  cursor: pointer;\r\n  border: none;\r\n  position: relative;\r\n  box-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  content: "";\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: inherit;\r\n  position: absolute;\r\n  background: transparent;\r\n  visibility: hidden;\r\n  transition: 0.1s all ease-in-out;\n}\nbutton[data-v-5ac4ea34]::before {\r\n  top: -5px;\r\n  left: -5px;\r\n  border-top: var(--d-border);\r\n  border-left: var(--d-border);\n}\nbutton[data-v-5ac4ea34]::after {\r\n  bottom: -5px;\r\n  right: -5px;\r\n  background: transparent;\r\n  border-right: var(--d-border);\r\n  border-bottom: var(--d-border);\n}\nbutton[data-v-5ac4ea34]:hover {\r\n  background: var(--d-hover-color);\n}\nbutton[data-v-5ac4ea34]:hover::before {\r\n  border-top: var(--d-hover-border);\r\n  border-left: var(--d-hover-border);\r\n  visibility: visible;\n}\nbutton[data-v-5ac4ea34]:hover::after {\r\n  border-right: var(--d-hover-border);\r\n  border-bottom: var(--d-hover-border);\r\n  visibility: visible;\n}\nbutton[data-v-5ac4ea34]:active {\r\n  background: var(--d-active-color);\r\n  color: var(--d-text-color);\n}\n.d-info[data-v-5ac4ea34] {\r\n  --d-bg-color: #3498db;\r\n  --d-hover-color: #2980b9;\n}\n.d-win[data-v-5ac4ea34] {\r\n  --d-bg-color: #2ecc71;\r\n  --d-hover-color: #27ae60;\n}\n.d-err[data-v-5ac4ea34] {\r\n  --d-bg-color: #e74c3c;\r\n  --d-hover-color: #c0392b;\n}\n.d-warn[data-v-5ac4ea34] {\r\n  --d-bg-color: #f1c40f;\r\n  --d-hover-color: #f39c12;\n}\r\n'),a.render=function(r,a,d,c,i,v){return n(),e("button",{class:o(r.type)},[t(r.$slots,"default")],2)},a.__scopeId="data-v-5ac4ea34",a.__file="packages/DBtn/src/DBtn.vue",a.install=function(r){r.component(a.name,a)};var d=r({name:"DInput"});const c={type:"text",disabled:""};d.render=function(r,o,t,a,d,i){return n(),e("input",c)},d.__file="packages/DInput/src/DInput.vue",d.install=function(r){r.component(d.name,d)};const i=[a,d];var v={install:r=>{i.forEach((n=>r.component(n.name,n)))},...i};export{a as DBtn,d as DInput,v as default};
+import{defineComponent as r}from"@vue/runtime-core";import{openBlock as t,createElementBlock as n,normalizeClass as o,renderSlot as e,defineComponent as a,pushScopeId as d,popScopeId as c,createElementVNode as i}from"vue";var l=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],e=document.createElement("style");e.type="text/css","top"===n&&o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.styleSheet?e.styleSheet.cssText=r:e.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'),l.render=function(r,a,d,c,i,l){return t(),n("button",{class:o(r.type)},[e(r.$slots,"default")],2)},l.__scopeId="data-v-5ac4ea34",l.__file="packages/DBtn/src/DBtn.vue",l.install=function(r){r.component(l.name,l)};var s=r({name:"DInput",props:{type:String}});const v=["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"),s.render=function(r,o,e,a,d,c){return t(),n("input",{type:r.type,spellcheck:"false"},null,8,v)},s.__scopeId="data-v-457377a6",s.__file="packages/DInput/src/DInput.vue",s.install=function(r){r.component(s.name,s)};var p=a({name:"DButton",props:{type:String}});const u=(r=>(d("data-v-90ab4c44"),r=r(),c(),r))((()=>i("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,a,d,c,i,l){return t(),n("button",{class:o(r.type)},[e(r.$slots,"default"),u],2)},p.__scopeId="data-v-90ab4c44",p.__file="packages/DButton/src/DButton.vue",p.install=function(r){r.component(p.name,p)};const f=[l,s,p];var h={install:r=>{f.forEach((t=>r.component(t.name,t)))},...f};export{l as DBtn,p as DButton,s as DInput,h as default};

package/package.json

@@ -1,31 +1,32 @@
-{
-  "name": "da-style",
-  "version": "0.0.2",
-  "description": "da式风格组件库",
-  "private": false,
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "license": "MIT",
-  "author": "da",
-  "scripts": {
-    "buildlib": "rollup -c",
-    "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview"
-  },
-  "files": [
-    "lib",
-    "README.md"
-  ],
-  "dependencies": {
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
-    "vue": "^3.2.6"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^1.6.1",
-    "@vue/compiler-sfc": "^3.2.6",
-    "vite": "^2.5.4"
-  }
-}
+{
+  "name": "da-style",
+  "version": "0.0.6",
+  "description": "da式风格组件库,把自己觉得一些好看的组件封装起来，方便用",
+  "private": false,
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "license": "MIT",
+  "author": "da",
+  "scripts": {
+    "buildlib": "rollup -c",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "dependencies": {
+    "da-style": "^0.0.3",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "vue": "^3.2.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.6.1",
+    "@vue/compiler-sfc": "^3.2.6",
+    "vite": "^2.5.4"
+  }
+}