da-style 0.0.9 → 0.0.12

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 tutoupfx
+
+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 above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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

@@ -72,11 +72,11 @@ createApp(App)
 
 ## 瀑布流组件
 
-> Falls需要传入图片数组data
+> DFalls需要传入图片数组data
 
 ```javascript
 <template>
-	<falls :data="data" />
+	<d-falls :data="data" />
 </template>
 
 <script setup>

package/lib/index.js

@@ -1 +1 @@
-import{defineComponent as r}from"@vue/runtime-core";import{openBlock as t,createElementBlock as n,normalizeClass as o,renderSlot as a,defineComponent as e,pushScopeId as d,popScopeId as c,createElementVNode as l,Fragment as i,renderList as b}from"vue";var s=r({name:"DBtn",props:{type:String}});function v(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))}}v('\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 u=r({name:"DInput",props:{type:String}});const p=["type"];v("\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"),u.render=function(r,o,a,e,d,c){return t(),n("input",{type:r.type,spellcheck:"false"},null,8,p)},u.__scopeId="data-v-457377a6",u.__file="packages/DInput/src/DInput.vue",u.install=function(r){r.component(u.name,u)};var m=e({name:"DButton",props:{type:String}});const f=(r=>(d("data-v-90ab4c44"),r=r(),c(),r))((()=>l("span",null,null,-1)));v('\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'),m.render=function(r,e,d,c,l,i){return t(),n("button",{class:o(r.type)},[a(r.$slots,"default"),f],2)},m.__scopeId="data-v-90ab4c44",m.__file="packages/DButton/src/DButton.vue",m.install=function(r){r.component(m.name,m)};var h=r({name:"Falls",props:{data:Array}});const x={class:"falls"},g={class:"box"},y=["src"];v("\n.falls[data-v-5a8714bc] {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\n}\n.box[data-v-5a8714bc] {\r\n\tmax-width: 1300px;\r\n\tcolumn-count: 5;\r\n\tcolumn-gap: 15px;\n}\n.box div[data-v-5a8714bc] {\r\n\tmargin-bottom: 1rem;\n}\n.box div img[data-v-5a8714bc] {\r\n\twidth: 100%;\n}\n@media (max-width: 1200px) {\n.box[data-v-5a8714bc] {\r\n\t\tcolumn-count: 4;\n}\n}\n@media (max-width: 850px) {\n.box[data-v-5a8714bc] {\r\n\t\tcolumn-count: 3;\n}\n}\n@media (max-width: 600px) {\n.box[data-v-5a8714bc] {\r\n\t\tcolumn-count: 2;\n}\n}\r\n"),h.render=function(r,o,a,e,d,c){return t(),n("div",x,[l("div",g,[(t(!0),n(i,null,b(r.data,(r=>(t(),n("div",{key:r},[l("img",{src:r},null,8,y)])))),128))])])},h.__scopeId="data-v-5a8714bc",h.__file="packages/Falls/src/Falls.vue",h.install=function(r){r.component(DBtn.name,DBtn)};const w=[s,u,m,h];var _={install:r=>{w.forEach((t=>r.component(t.name,t)))},...w};export{s as DBtn,m as DButton,u as DInput,h as Falls,_ as default};
+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};

package/package.json

@@ -1,29 +1,31 @@
-{
-  "name": "da-style",
-  "version": "0.0.9",
-  "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"
-  ],
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^1.6.1",
-    "@vue/compiler-sfc": "^3.2.6",
-    "vite": "^2.5.4",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
-    "vue": "^3.2.6"
-  }
-}
+{
+  "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"
+  }
+}