修复显示bug

README.md

@@ -29,73 +29,13 @@
 
     $ npm install --save bulma svelma-pro
 
-#### scss
+### 3. scss支持
 
-     $ npm install --save-dev svelte-preprocess autoprefixer node-sass sass
+     因为组件库使用了sass样式扩展，所以需要项目可以编译sass语法。如果没有集成，可以参考此文档。
 
 
-### 3. config
-在你的rollup或者webpack配置文件中添加scss支持:
     
-```js
+ [svelte-sass-template](https://github.com/KeiferJu/svelte-sass-template)
-// rollup配置  rollup.config.js
-import sveltePreprocess from 'svelte-preprocess';
-
-// ...
-
-const preprocess = sveltePreprocess({
-  scss: {
-    includePaths: ['src'],
-  },
-  postcss: {
-    plugins: [require('autoprefixer')],
-  },
-});
-
-export default {
-  // ... 
-  plugins: [
-    svelte({
-      // ...
-      preprocess: preprocess,
-    })
-  ]
-}
-```
-
-```js
-// webpack配置  webpack.config.js
-import sveltePreprocess from 'svelte-preprocess';
-
-// ...
-const preprocess = sveltePreprocess({
-  scss: {
-    includePaths: ['src'],
-  },
-  postcss: {
-    plugins: [require('autoprefixer')],
-  },
-});
-
-module.export = {
-  // ... 
-  module: {
-    rules: [
-      {
-        test: /.(svelte|html)$/,
-        use: {
-          loader: 'svelte-loader',
-          options: {
-            preprocess, 
-            // ...
-          }
-        }
-      },
-    ]
-  },
-  ]
-}
-```
 
 ### 4. 引入Bulma的CSS样式和svelma-pro组件
 
@@ -116,14 +56,4 @@ module.export = {
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
 ```
 
-...或者通过npm包:
+...或者下载`fontawesome-free`包,引入到静态资产目录，通过html引入.
-
-    $ npm install --save @fortawesome/fontawesome-free
-
-```html
- <!-- main.js or client.js(sapper) -->
-<script>
-  import 'bulma/css/bulma.css'
-  import '@fortawesome/fontawesome-free/css/all.css'
-</script>
-```

docs/package.json

@@ -27,7 +27,7 @@
     "chokidar": "^3.0.1",
     "codesandbox": "^2.1.6",
     "npm-run-all": "^4.1.5",
-    "rollup": "^1.0.0",
+    "rollup": "^2.3.4",
     "rollup-plugin-babel": "^4.0.2",
     "rollup-plugin-commonjs": "^9.1.6",
     "rollup-plugin-includepaths": "^0.2.3",
@@ -35,8 +35,8 @@
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-scss": "^1.0.1",
-    "rollup-plugin-svelte": "^5.0.1",
+    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^4.0.4",
+    "rollup-plugin-terser": "^7.0.0",
     "sapper": "^0.27.4"
   }
 }

docs/rollup.config.js

@@ -36,9 +36,14 @@ export default {
       }),
       // scss(),
       svelte({
+        compilerOptions:{
+          // enable run-time checks when not in production
           dev,
+          // generate: production ? 'dom' : 'ssr',
           hydratable: true,
           emitCss: true,
+             },
+     
         preprocess: autoPreprocess({
           postcss: {
             plugins: [require('autoprefixer')()],

docs/src/routes/components/jsdocs.json

@@ -2640,6 +2640,24 @@
       "name": "slot",
       "values": "default,left,right"
     },
+    {
+      "description": "显示气泡",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": "false",
+      "name": "tip",
+      "values": "default,true,false"
+    },
+    {
+      "description": "气泡显示值进行处理，例如:(e)=> e+1",
+      "type": [
+        "Function"
+      ],
+      "defaultvalue": "value",
+      "name": "tipRender",
+      "values": "value"
+    },
     {
       "isEvent": true,
       "description": "选择改变事件",

package.json

@@ -44,7 +44,7 @@
     "postcss": "^7.0.17",
     "prettier": "^1.17.1",
     "prettier-plugin-svelte": "^0.5.1",
-    "rollup": "^1.2.2",
+    "rollup": "^2.3.4",
     "rollup-plugin-alias": "^1.5.1",
     "rollup-plugin-analyzer": "^3.0.1",
     "rollup-plugin-bundle-size": "^1.0.3",
@@ -53,8 +53,8 @@
     "rollup-plugin-livereload": "^1.0.4",
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-scss": "^1.0.1",
-    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^4.0.4",
+    "rollup-plugin-terser": "^7.0.0",
     "sirv-cli": "^0.3.1",
     "standard-version": "^6.0.1",
     "svelte": "^3.9.2",

rollup.config.js

@@ -29,10 +29,13 @@ export default {
   ],
   plugins: [
     svelte({
+      compilerOptions:{
    // enable run-time checks when not in production
    dev: !production,
    // generate: production ? 'dom' : 'ssr',
    hydratable: true,
+      },
+   
 
       preprocess: autoPreprocess({
         postcss: {

src/components/Input.svelte

@@ -3,6 +3,7 @@
   import { omit } from '../utils'
   import Icon from './Icon.svelte'
 
+  export let customClass = '';
   /** Binding value
    * @svelte-prop {String|Number} [value]
    * */
@@ -154,7 +155,7 @@
       {...props}
       type={newType}
       {value}
-      class="input {statusType}
+      class="input {statusType}  {customClass}
       {size}
       {$$props.class || ''}"
       bind:this={input}
@@ -168,7 +169,7 @@
     <textarea
       {...props}
       {value}
-      class="textarea {statusType}
+      class="textarea {statusType}  {customClass}
       {size}"
       bind:this={input}
       on:input={onInput}

src/components/Slider/Slider.svelte

@@ -14,6 +14,7 @@
     export let active = false;
     export let order = false;
     export let tip = false;
+    export let tipRender;
 
     $: if (active) setValue(pos);
     $: if (!active) setPos(value);
@@ -119,7 +120,7 @@
     <div
             class="progress-sli"
             style={progress}/>
-    <Thumb bind:pos={pos[0]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[0]} {tip}>
+    <Thumb bind:pos={pos[0]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[0]} {tip} {tipRender}>
         <slot name="left">
             <slot>
                 <div class="thumb"/>
@@ -127,7 +128,7 @@
         </slot>
     </Thumb>
     {#if range}
-        <Thumb bind:pos={pos[1]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[1]} {tip}>
+        <Thumb bind:pos={pos[1]} on:active={({ detail: v }) => active = v} on:dragEnd value={value[1]} {tip} {tipRender}>
             <slot name="right">
                 <slot>
                     <div class="thumb"/>

src/components/Slider/Thumb.svelte

@@ -7,6 +7,7 @@
     export let pos;
     export let value;
     export let tip;
+    export let tipRender = (e)=> e;
 
     function dragstart() {
         active = true;
@@ -55,6 +56,7 @@
         width: fit-content;
         height: fit-content;
         transform: translate(-50%, -50%);
+        cursor: pointer;
     }
 
     .thumb-content::before {
@@ -81,7 +83,7 @@
      on:dragend={dragend}
      on:drag={({ detail: v }) => (pos = v)}>
     {#if tip}
-        <div class="sli-tip">{value}</div>
+        <div class="sli-tip">{tipRender(value)}</div>
     {/if}
     <div class="thumb-content" class:active>
         <slot/>