@designcrowd/fe-shared-lib 1.8.7 → 1.8.9-edge-fallback-0

package/.storybook-static/assets/Slider.stories-dEVLBxDH.js

@@ -0,0 +1,141 @@
+import{c as o,f as V,e as u,t as y,b as f,G as c,C as d,o as m}from"./iframe-ndUd-rmt.js";import{_ as J}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as Q}from"./Button-CkyYO9sU.js";import"./ButtonPrimary-LDY_rMmo.js";import"./Icon-B_xzgi_Q.js";const G={props:{min:{type:Number,required:!1,default:0},max:{type:Number,required:!1,default:100},modelValue:{type:String,required:!1,default:void 0},suffix:{type:String,required:!1,default:void 0},label:{type:String,required:!1,default:void 0},transparent:{type:Boolean,required:!1,default:!1},step:{type:Number,required:!1,default:1},sliderRangeInputId:{type:String,required:!1,default:void 0},sliderValueInputId:{type:String,required:!1,default:void 0},onSliderMouseDown:{type:Function,required:!1,default:void 0},onSliderMouseUp:{type:Function,required:!1,default:void 0},maxDecimalPoint:{type:Number,required:!1,default:void 0},preventNegative:{type:Boolean,required:!1,default:!1}},data(){return{sliderValue:this.modelValue,decimalRegex:/^\d+\.\d{0,1}$/,isInteracting:!1}},computed:{isDecimal(){return!!this.decimalRegex.test(this.step)}},watch:{modelValue(t){this.sliderValue=t}},methods:{focus(){this.$refs.inputSlider.focus()},setValue(t){this.sliderValue=this.sliderValue>this.max?this.max:Number.parseFloat(t),this.$emit("update:model-value",t)},setInput(t){const e=t.target.value;if(e===""||e==="-")return;const l=this.isDecimal?e:Math.round(parseFloat(e));let s=0;if(l>this.max?s=this.max:Number.isNaN(l)?s=this.min:s=l,this.isDecimal)if(this.decimalRegex.test(s))this.updateValue(s,t);else{let i=l.replace(/[^\d.]/g,"");const n=i.indexOf(".");if(n!==-1&&(i=i.slice(0,n+1)+i.slice(n+1).replace(/\./g,"")),this.maxDecimalPoint){const a=this.maxDecimalPoint,H=new RegExp(`^(\\d+)(\\.\\d{0,${a}})?`),S=i.match(H);S&&(i=S[1]+(S[2]||""))}this.updateValue(i,t)}else this.updateValue(s,t)},checkLimit(t){let e=0;if(t.target.value===""||Number.isNaN(this.sliderValue)||this.sliderValue<=this.min?e=this.min:this.sliderValue>this.max?e=this.max:e=this.sliderValue,this.decimalRegex.test(this.sliderValue)){const l=parseFloat(e).toFixed(1);this.updateValue(l,t)}else this.updateValue(parseFloat(e),t)},limitToMinimum(t){if(this.sliderValue<=this.min)t.preventDefault(),this.updateValue(this.min,t);else{let e=0;this.isDecimal?e=(parseFloat(t.target.value)-this.step).toFixed(1):e=parseFloat(t.target.value)-this.step,this.updateValue(e,t)}},limitToMaximum(t){if(this.sliderValue>=this.max)t.preventDefault(),this.updateValue(this.max,t);else{let e=0;this.isDecimal?e=(parseFloat(t.target.value)+this.step).toFixed(1):e=parseFloat(t.target.value)+this.step,this.updateValue(e,t)}},updateValue(t,e){this.sliderValue=t,e.target.value=t,this.$emit("update:model-value",t)},handleSliderMouseDown(){typeof this.onSliderMouseDown=="function"&&(this.isInteracting=!0,this.onSliderMouseDown())},handleSliderMouseUp(){typeof this.onSliderMouseUp=="function"&&this.isInteracting&&(this.isInteracting=!1,this.onSliderMouseUp())},onKeydown(t){this.preventNegative&&(t.key==="-"||t.key==="Subtract")&&t.preventDefault()}}},X={key:0},Y={key:0,class:"tw-w-full tw-mr-4"},Z=["id","value","min","max","step"],_=["id","value","step"],$={key:0,class:"tw-w-full tw-mr-4"},ee=["value","min","max"],te=["value","step"];function ne(t,e,l,s,i,n){return m(),o("div",{onMouseup:e[15]||(e[15]=(...a)=>n.handleSliderMouseUp&&n.handleSliderMouseUp(...a))},[l.suffix?(m(),o("div",{key:1,class:f({"tw-flex tw-flex-row tw-gap-4 tw-items-center":l.label,"tw-grid tw-grid-cols-3 tw-gap-3":!l.label})},[l.label?(m(),o("p",$,y(l.label),1)):V("",!0),u("input",{value:i.sliderValue,type:"range",min:l.min,max:l.max,class:f(["slider",{"tw-w-full":l.label,"tw-col-span-2":!l.label,"transparent-slider":l.transparent}]),onInput:e[7]||(e[7]=a=>n.setValue(a.target.value)),onMousedown:e[8]||(e[8]=(...a)=>n.handleSliderMouseDown&&n.handleSliderMouseDown(...a))},null,42,ee),u("div",{class:"tw-rounded-r tw-rounded-l tw-py-2 tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner tw-flex",onClick:e[14]||(e[14]=d((...a)=>n.focus&&n.focus(...a),["stop"]))},[u("input",{ref:"inputSlider",value:i.sliderValue,type:"text",step:l.step,class:"tw-border-none focus:tw-outline-none tw-w-full",onInput:e[9]||(e[9]=d((...a)=>n.setInput&&n.setInput(...a),["stop"])),onBlur:e[10]||(e[10]=d((...a)=>n.checkLimit&&n.checkLimit(...a),["stop"])),onKeydown:[e[11]||(e[11]=c((...a)=>n.limitToMinimum&&n.limitToMinimum(...a),["down"])),e[12]||(e[12]=c((...a)=>n.limitToMaximum&&n.limitToMaximum(...a),["up"]))]},null,40,te),u("span",{class:"tw-cursor-text",onClick:e[13]||(e[13]=d((...a)=>n.focus&&n.focus(...a),["stop"]))},y(l.suffix),1)])],2)):(m(),o("div",X,[l.label?(m(),o("p",Y,y(l.label),1)):V("",!0),u("div",{class:f({"tw-flex tw-flex-row tw-gap-4 tw-items-center":l.label,"tw-grid tw-grid-cols-3 tw-gap-3":!l.label})},[u("input",{id:l.sliderRangeInputId,value:i.sliderValue,type:"range",min:l.min,max:l.max,step:l.step,class:f(["slider",{"tw-w-full":l.label,"tw-col-span-2":!l.label,"transparent-slider":l.transparent}]),onInput:e[0]||(e[0]=a=>n.setValue(a.target.value)),onMousedown:e[1]||(e[1]=(...a)=>n.handleSliderMouseDown&&n.handleSliderMouseDown(...a))},null,42,Z),u("input",{id:l.sliderValueInputId,value:i.sliderValue,type:"text",step:l.step,class:"input-slider tw-rounded-r tw-rounded-l tw-py-2 tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner",onInput:e[2]||(e[2]=d((...a)=>n.setInput&&n.setInput(...a),["stop"])),onBlur:e[3]||(e[3]=d((...a)=>n.checkLimit&&n.checkLimit(...a),["stop"])),onKeydown:[e[4]||(e[4]=c((...a)=>n.limitToMinimum&&n.limitToMinimum(...a),["down"])),e[5]||(e[5]=c((...a)=>n.limitToMaximum&&n.limitToMaximum(...a),["up"])),e[6]||(e[6]=(...a)=>n.onKeydown&&n.onKeydown(...a))]},null,40,_)],2)]))],32)}const r=J(G,[["render",ne],["__scopeId","data-v-76c998ff"]]);G.__docgenInfo={exportName:"default",displayName:"Slider",description:"",tags:{},props:[{name:"min",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"0"}},{name:"max",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"100"}},{name:"modelValue",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"suffix",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"label",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"transparent",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"step",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"1"}},{name:"sliderRangeInputId",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"sliderValueInputId",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"onSliderMouseDown",type:{name:"func"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"onSliderMouseUp",type:{name:"func"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"maxDecimalPoint",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"preventNegative",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"update:model-value",type:{names:["undefined"]}}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/Slider/Slider.vue"]};const ue={title:"Components/Slider",component:r,parameters:{layout:"centered"}},p=()=>({components:{Slider:r},template:`
+        <div>
+          <div>Min 12, Max 128</div>
+          <Slider :min="12" :max="128"  :model-value="16" :prevent-negative="true"/>
+          <div class="tw-mt-8">Min 0, max 100, Manually emptying the input box should fall back to 0 as min value</div>
+          <Slider :min="0" :max="100"  :model-value="16"/>
+        </div>
+        
+      `}),w=()=>({components:{Slider:r},template:`
+        <Slider :min="1" :max="2.5" :step="0.1" :model-value="1.2" :max-decimal-point="1"/>
+      `}),v=()=>({components:{Slider:r},template:`
+        <Slider :min="0" :max="100" suffix="%" />
+      `}),b=()=>({components:{Slider:r},template:`
+        <Slider :min="0" :max="100" label="Label" :transparent="true" :model-value="50" />
+      `}),x=()=>({components:{Slider:r,Button:Q},data(){return{obj1:{value:20},obj2:{value:30},currentObj:null}},mounted(){this.currentObj=this.obj1},template:`
+        <div class="tw-flex tw-gap-4">
+          <Button variant="secondary" label="Obj1" @click="buttonClick(obj1)"/>
+          <Button variant="secondary" label="Obj2" @click="buttonClick(obj2)"/>
+        </div>
+        <div class="tw-w-96">
+          <Slider :min="0" :max="100" label="Label" :transparent="true" :model-value="currentObj.value" />
+        </div>
+      `,methods:{buttonClick(t){this.currentObj=t}}}),h=()=>({components:{Slider:r},template:`
+        <div class="tw-flex-col tw-gap-2" >
+          <p>{{ isInteracting ? 'Interacting' : 'Not interacting' }}</p>
+          <Slider :min="0" :max="100" :model-value="50" :on-slider-mouse-down="onMouseDown" :on-slider-mouse-up="onMouseUp" />
+        </div>
+      `,data(){return{isInteracting:!1}},methods:{onMouseDown(){this.isInteracting=!0},onMouseUp(){this.isInteracting=!1}}}),g=()=>({components:{Slider:r},template:`
+        <Slider :min="-100" :max="100"  :model-value="0"/>
+      `});var M,I,D;p.parameters={...p.parameters,docs:{...(M=p.parameters)==null?void 0:M.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider
+    },
+    template: \`
+        <div>
+          <div>Min 12, Max 128</div>
+          <Slider :min="12" :max="128"  :model-value="16" :prevent-negative="true"/>
+          <div class="tw-mt-8">Min 0, max 100, Manually emptying the input box should fall back to 0 as min value</div>
+          <Slider :min="0" :max="100"  :model-value="16"/>
+        </div>
+        
+      \`
+  };
+}`,...(D=(I=p.parameters)==null?void 0:I.docs)==null?void 0:D.source}}};var k,q,j;w.parameters={...w.parameters,docs:{...(k=w.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider
+    },
+    template: \`
+        <Slider :min="1" :max="2.5" :step="0.1" :model-value="1.2" :max-decimal-point="1"/>
+      \`
+  };
+}`,...(j=(q=w.parameters)==null?void 0:q.docs)==null?void 0:j.source}}};var N,O,F;v.parameters={...v.parameters,docs:{...(N=v.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider
+    },
+    template: \`
+        <Slider :min="0" :max="100" suffix="%" />
+      \`
+  };
+}`,...(F=(O=v.parameters)==null?void 0:O.docs)==null?void 0:F.source}}};var B,L,U;b.parameters={...b.parameters,docs:{...(B=b.parameters)==null?void 0:B.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider
+    },
+    template: \`
+        <Slider :min="0" :max="100" label="Label" :transparent="true" :model-value="50" />
+      \`
+  };
+}`,...(U=(L=b.parameters)==null?void 0:L.docs)==null?void 0:U.source}}};var C,T,R;x.parameters={...x.parameters,docs:{...(C=x.parameters)==null?void 0:C.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider,
+      Button
+    },
+    data() {
+      return {
+        obj1: {
+          value: 20
+        },
+        obj2: {
+          value: 30
+        },
+        currentObj: null
+      };
+    },
+    mounted() {
+      this.currentObj = this.obj1;
+    },
+    template: \`
+        <div class="tw-flex tw-gap-4">
+          <Button variant="secondary" label="Obj1" @click="buttonClick(obj1)"/>
+          <Button variant="secondary" label="Obj2" @click="buttonClick(obj2)"/>
+        </div>
+        <div class="tw-w-96">
+          <Slider :min="0" :max="100" label="Label" :transparent="true" :model-value="currentObj.value" />
+        </div>
+      \`,
+    methods: {
+      buttonClick(obj) {
+        this.currentObj = obj;
+      }
+    }
+  };
+}`,...(R=(T=x.parameters)==null?void 0:T.docs)==null?void 0:R.source}}};var W,K,z;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider
+    },
+    template: \`
+        <div class="tw-flex-col tw-gap-2" >
+          <p>{{ isInteracting ? 'Interacting' : 'Not interacting' }}</p>
+          <Slider :min="0" :max="100" :model-value="50" :on-slider-mouse-down="onMouseDown" :on-slider-mouse-up="onMouseUp" />
+        </div>
+      \`,
+    data() {
+      return {
+        isInteracting: false
+      };
+    },
+    methods: {
+      onMouseDown() {
+        this.isInteracting = true;
+      },
+      onMouseUp() {
+        this.isInteracting = false;
+      }
+    }
+  };
+}`,...(z=(K=h.parameters)==null?void 0:K.docs)==null?void 0:z.source}}};var P,E,A;g.parameters={...g.parameters,docs:{...(P=g.parameters)==null?void 0:P.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Slider
+    },
+    template: \`
+        <Slider :min="-100" :max="100"  :model-value="0"/>
+      \`
+  };
+}`,...(A=(E=g.parameters)==null?void 0:E.docs)==null?void 0:A.source}}};const de=["SliderFontSize","SliderLineheight","SliderOpacity","SliderWithLabel","SliderWithSwappingTargetvalue","SliderWithMouseDownAndUp","SliderWithNegativeMinValue"];export{p as SliderFontSize,w as SliderLineheight,v as SliderOpacity,b as SliderWithLabel,h as SliderWithMouseDownAndUp,g as SliderWithNegativeMinValue,x as SliderWithSwappingTargetvalue,de as __namedExportsOrder,ue as default};