From 89816f724902b512cdd9d0f2ca1dbb251f75c75a Mon Sep 17 00:00:00 2001 From: KeiferJu Date: Tue, 2 Jun 2020 21:56:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0slider=E5=8F=8Atip=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- docs/README.md | 2 +- docs/src/routes/components/jsdocs.json | 64 +++++++++++ docs/src/routes/components/modal.svelte | 2 +- docs/src/routes/components/slider.svelte | 55 +++++++++ docs/src/routes/components/tabs.svelte | 2 +- docs/src/routes/components/tip.svelte | 73 ++++++++++++ package-lock.json | 13 +++ package.json | 7 +- src/components/Slider/Slider.svelte | 138 +++++++++++++++++++++++ src/components/Slider/Thumb.svelte | 88 +++++++++++++++ src/components/Slider/index.js | 47 ++++++++ src/components/Tip/Tip.svelte | 24 ++++ src/components/Tip/index.js | 5 + src/index.js | 12 +- src/style/tippy.scss | 87 ++++++++++++++ src/svelma-pro.css | 73 ++++++++++++ src/svelma-pro.scss | 3 +- 18 files changed, 687 insertions(+), 10 deletions(-) create mode 100644 docs/src/routes/components/slider.svelte create mode 100644 docs/src/routes/components/tip.svelte create mode 100644 src/components/Slider/Slider.svelte create mode 100644 src/components/Slider/Thumb.svelte create mode 100644 src/components/Slider/index.js create mode 100644 src/components/Tip/Tip.svelte create mode 100644 src/components/Tip/index.js create mode 100644 src/style/tippy.scss diff --git a/README.md b/README.md index bc3fe81..fa97bee 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ # 文档 -[文档及Demo]](http://www.myllcn.com/svelma-pro/) +[文档及Demo](http://www.myllcn.com/svelma-pro/) # 快速开始 diff --git a/docs/README.md b/docs/README.md index 723b4d2..1ae744e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -12,7 +12,7 @@ # 文档 -[文档及Demo]](http://www.myllcn.com/svelma-pro/) +[文档及Demo](http://www.myllcn.com/svelma-pro/) # 快速开始 diff --git a/docs/src/routes/components/jsdocs.json b/docs/src/routes/components/jsdocs.json index b46a1ff..44b3994 100644 --- a/docs/src/routes/components/jsdocs.json +++ b/docs/src/routes/components/jsdocs.json @@ -2370,5 +2370,69 @@ "name": "change", "values": "" } + ], + "Slider": [ + { + "description": "绑定值,单选以Array[0]为准", + "type": [ + "Array [number, number]" + ], + "defaultvalue":"[min, max]", + "name": "value", + "values": "[min, max]" + },{ + "description": "最小值", + "type": [ + "Number" + ], + "defaultvalue":"0", + "name": "min", + "values": "" + },{ + "description": "最大值", + "type": [ + "Number" + ], + "defaultvalue":"100", + "name": "max", + "values": "" + },{ + "description": "步长", + "type": [ + "Number" + ], + "defaultvalue":"1", + "name": "step", + "values": "" + },{ + "description": "设置为true使用范围输入", + "type": [ + "Boolean" + ], + "defaultvalue":"false", + "name": "range", + "values": "" + },{ + "description": "如果你想要value[0]的值总是大于value[1]，就将它设置为true", + "type": [ + "Boolean" + ], + "defaultvalue":"false", + "name": "order", + "values": "" + },{ + "description": "自定义滑块", + "type": [ + "Slots" + ], + "defaultvalue":"default", + "name": "slot", + "values": "default,left,right" + },{ + "isEvent": true, + "description": "选择改变事件", + "name": "change", + "values": "" + } ] } \ No newline at end of file diff --git a/docs/src/routes/components/modal.svelte b/docs/src/routes/components/modal.svelte index 5c778e4..185c4e8 100644 --- a/docs/src/routes/components/modal.svelte +++ b/docs/src/routes/components/modal.svelte @@ -42,4 +42,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/routes/components/slider.svelte b/docs/src/routes/components/slider.svelte new file mode 100644 index 0000000..0a42692 --- /dev/null +++ b/docs/src/routes/components/slider.svelte @@ -0,0 +1,55 @@ + + + + + + + + import { Slider } from 'svelma-pro' + let value = [0, 1]; + +{value[0]} + +`}> +
+ {value[0]} + +
+ + +
+ +

范围选择

+ + +import { Slider } from 'svelma-pro' + + let range2 = [10, 110]; + + + {value[0]}-{value[1]} + +`}> +
+ {range2[0]}-{range2[1]} + +
+ + + \ No newline at end of file diff --git a/docs/src/routes/components/tabs.svelte b/docs/src/routes/components/tabs.svelte index 5d20fe5..efe3bec 100644 --- a/docs/src/routes/components/tabs.svelte +++ b/docs/src/routes/components/tabs.svelte @@ -200,7 +200,7 @@

Tabs

- +

diff --git a/docs/src/routes/components/tip.svelte b/docs/src/routes/components/tip.svelte new file mode 100644 index 0000000..80b44ce --- /dev/null +++ b/docs/src/routes/components/tip.svelte @@ -0,0 +1,73 @@ + + + + + + + + import { Tip } from 'svelma-pro' + + + +`}> +
+ + + +
+ + +
+ +

自定义设置

+

更多配置请参考tippy.

+ + +import { Tip } from 'svelma-pro' + +let config = { + content: '
Styled tooltip text
', + allowHTML: true, + trigger: 'click', + onShow: function(instance) { + console.log(instance); +} + + + + + + + +`}> +
+ + + +
+ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6e381a8..ad25ffe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -145,6 +145,11 @@ "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==", "dev": true }, + "@popperjs/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz", + "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==" + }, "@semantic-release/commit-analyzer": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-6.3.0.tgz", @@ -10882,6 +10887,14 @@ "integrity": "sha512-Imqa6iv3Ig5FmC3ESwmqczusIn1h8D5RqNbpatGc1eLHeoytuhodbsAPpSJ8iKiLhxBtLuRsrywWHlJM1bA3Rg==", "dev": true }, + "tippy.js": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.3.tgz", + "integrity": "sha512-MzqHMrr2C0IC8ZUnG5kLQPxonWJ7V+Usqiy2W5b+dCvAfousio0mA85h+Ea5wRq94AQGd8mbFGeciRgkP+F+7w==", + "requires": { + "@popperjs/core": "^2.3.2" + } + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", diff --git a/package.json b/package.json index f37311e..b1cdad4 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,11 @@ "src" ], "peerDependencies": { - "bulma": "^0.8.0", - "tinycolor2": "^1.4.1" + "bulma": "^0.8.0" + }, + "dependencies": { + "tinycolor2": "^1.4.1", + "tippy.js": "^6.2.3" }, "devDependencies": { "autoprefixer": "^9.6.0", diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte new file mode 100644 index 0000000..37d27cd --- /dev/null +++ b/src/components/Slider/Slider.svelte @@ -0,0 +1,138 @@ + + + + + +{#if range} + +{/if} +
+
+ active = v} value={value[0]} {tip}> + + +
+ + + + {#if range} + active = v} value={value[1]} {tip}> + + +
+ + + + {/if} +
diff --git a/src/components/Slider/Thumb.svelte b/src/components/Slider/Thumb.svelte new file mode 100644 index 0000000..cb0add2 --- /dev/null +++ b/src/components/Slider/Thumb.svelte @@ -0,0 +1,88 @@ + + + + +
(pos = v)}> + {#if tip} +
{value}
+ {/if} +
+ +
+
diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js new file mode 100644 index 0000000..d4d60b2 --- /dev/null +++ b/src/components/Slider/index.js @@ -0,0 +1,47 @@ +export default function handle(node) { + const onDown = getOnDown(node); + + node.addEventListener("touchstart", onDown); + node.addEventListener("mousedown", onDown); + return { + destroy() { + node.removeEventListener("touchstart", onDown); + node.removeEventListener("mousedown", onDown); + } + }; +} + +function getOnDown(node) { + const onMove = getOnMove(node); + + return function (e) { + e.preventDefault(); + node.dispatchEvent(new CustomEvent("dragstart")); + + const moveevent = "touches" in e ? "touchmove" : "mousemove"; + const upevent = "touches" in e ? "touchend" : "mouseup"; + + document.addEventListener(moveevent, onMove); + document.addEventListener(upevent, onUp); + + function onUp(e) { + e.stopPropagation(); + + document.removeEventListener(moveevent, onMove); + document.removeEventListener(upevent, onUp); + + node.dispatchEvent(new CustomEvent("dragend")); + }; + }; +} + +function getOnMove(node) { + const track = node.parentNode; + + return function (e) { + const { left, width } = track.getBoundingClientRect(); + const clickOffset = "touches" in e ? e.touches[0].clientX : e.clientX; + const clickPos = Math.min(Math.max((clickOffset - left) / width, 0), 1) || 0; + node.dispatchEvent(new CustomEvent("drag", { detail: clickPos })); + }; +} \ No newline at end of file diff --git a/src/components/Tip/Tip.svelte b/src/components/Tip/Tip.svelte new file mode 100644 index 0000000..6c9092b --- /dev/null +++ b/src/components/Tip/Tip.svelte @@ -0,0 +1,24 @@ + + + + +
+ + no elements + +
diff --git a/src/components/Tip/index.js b/src/components/Tip/index.js new file mode 100644 index 0000000..0a72f76 --- /dev/null +++ b/src/components/Tip/index.js @@ -0,0 +1,5 @@ +import tippy from 'tippy.js'; + +export default function(node, props) { + tippy(node, props); +} diff --git a/src/index.js b/src/index.js index 84c19bf..5c9e26b 100644 --- a/src/index.js +++ b/src/index.js @@ -26,13 +26,15 @@ import { import Pagination from './components/Pagination/Pagination.svelte' import Datepicker from './components/DatePicker/Datepicker.svelte' import Timepicker from './components/Timepicker/TimePicker.svelte' -import Carousel from './components/carousel/Carousel.svelte' +import Carousel from './components/Carousel/Carousel.svelte' import { Nav, NavItem, NavLayout } from './components/Nav' import ColorPicker from './components/ColorPicker/ColorPicker.svelte'; +import Tip from './components/Tip/Tip.svelte' +import Slider from './components/Slider/Slider.svelte'; export { Button, @@ -62,7 +64,9 @@ export { Nav, NavItem, NavLayout, - ColorPicker + ColorPicker, + Tip, + Slider } export const Svelma = { @@ -93,5 +97,7 @@ export const Svelma = { Nav, NavItem, NavLayout, - ColorPicker + ColorPicker, + Tip, + Slider } \ No newline at end of file diff --git a/src/style/tippy.scss b/src/style/tippy.scss new file mode 100644 index 0000000..603ec57 --- /dev/null +++ b/src/style/tippy.scss @@ -0,0 +1,87 @@ +.tippy-box[data-animation=fade][data-state=hidden] { + opacity: 0 +} + +[data-tippy-root] { + max-width: calc(100vw - 10px) +} + +.tippy-box { + position: relative; + background-color: #333; + color: #fff; + border-radius: 4px; + font-size: 14px; + line-height: 1.4; + outline: 0; + transition-property: transform, visibility, opacity +} + +.tippy-box[data-placement^=top]>.tippy-arrow { + bottom: 0 +} + +.tippy-box[data-placement^=top]>.tippy-arrow:before { + bottom: -7px; + left: 0; + border-width: 8px 8px 0; + border-top-color: initial; + transform-origin: center top +} + +.tippy-box[data-placement^=bottom]>.tippy-arrow { + top: 0 +} + +.tippy-box[data-placement^=bottom]>.tippy-arrow:before { + top: -7px; + left: 0; + border-width: 0 8px 8px; + border-bottom-color: initial; + transform-origin: center bottom +} + +.tippy-box[data-placement^=left]>.tippy-arrow { + right: 0 +} + +.tippy-box[data-placement^=left]>.tippy-arrow:before { + border-width: 8px 0 8px 8px; + border-left-color: initial; + right: -7px; + transform-origin: center left +} + +.tippy-box[data-placement^=right]>.tippy-arrow { + left: 0 +} + +.tippy-box[data-placement^=right]>.tippy-arrow:before { + left: -7px; + border-width: 8px 8px 8px 0; + border-right-color: initial; + transform-origin: center right +} + +.tippy-box[data-inertia][data-state=visible] { + transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11) +} + +.tippy-arrow { + width: 16px; + height: 16px; + color: #333 +} + +.tippy-arrow:before { + content: ""; + position: absolute; + border-color: transparent; + border-style: solid +} + +.tippy-content { + position: relative; + padding: 5px 9px; + z-index: 1 +} \ No newline at end of file diff --git a/src/svelma-pro.css b/src/svelma-pro.css index 842ba9f..0a4fb33 100644 --- a/src/svelma-pro.css +++ b/src/svelma-pro.css @@ -526,3 +526,76 @@ button.swiper-pagination-bullet { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } + +.tippy-box[data-animation=fade][data-state=hidden] { + opacity: 0; } + +[data-tippy-root] { + max-width: calc(100vw - 10px); } + +.tippy-box { + position: relative; + background-color: #333; + color: #fff; + border-radius: 4px; + font-size: 14px; + line-height: 1.4; + outline: 0; + transition-property: transform, visibility, opacity; } + +.tippy-box[data-placement^=top] > .tippy-arrow { + bottom: 0; } + +.tippy-box[data-placement^=top] > .tippy-arrow:before { + bottom: -7px; + left: 0; + border-width: 8px 8px 0; + border-top-color: initial; + transform-origin: center top; } + +.tippy-box[data-placement^=bottom] > .tippy-arrow { + top: 0; } + +.tippy-box[data-placement^=bottom] > .tippy-arrow:before { + top: -7px; + left: 0; + border-width: 0 8px 8px; + border-bottom-color: initial; + transform-origin: center bottom; } + +.tippy-box[data-placement^=left] > .tippy-arrow { + right: 0; } + +.tippy-box[data-placement^=left] > .tippy-arrow:before { + border-width: 8px 0 8px 8px; + border-left-color: initial; + right: -7px; + transform-origin: center left; } + +.tippy-box[data-placement^=right] > .tippy-arrow { + left: 0; } + +.tippy-box[data-placement^=right] > .tippy-arrow:before { + left: -7px; + border-width: 8px 8px 8px 0; + border-right-color: initial; + transform-origin: center right; } + +.tippy-box[data-inertia][data-state=visible] { + transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); } + +.tippy-arrow { + width: 16px; + height: 16px; + color: #333; } + +.tippy-arrow:before { + content: ""; + position: absolute; + border-color: transparent; + border-style: solid; } + +.tippy-content { + position: relative; + padding: 5px 9px; + z-index: 1; } diff --git a/src/svelma-pro.scss b/src/svelma-pro.scss index 6a3117d..6bf3283 100644 --- a/src/svelma-pro.scss +++ b/src/svelma-pro.scss @@ -1 +1,2 @@ -@import 'style/carousel.scss'; \ No newline at end of file +@import 'style/carousel.scss'; +@import 'style/tippy.scss'; \ No newline at end of file