vue-ios13-segmented-control - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/vue-ios13-segmented-control.esm.js

@@ -1,1 +0,1 @@
-import{normalizeComponent as e,createInjector as t}from"vue-runtime-helpers";var n=e({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"vue-ios13-segmented-control"},[n("span",{staticClass:"selection-pill",style:e.pillTransformStyles}),e._v(" "),e._l(e.segments,function(t){return n("div",{key:t.id,staticClass:"option"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.selectedSegmentId,expression:"selectedSegmentId"}],attrs:{type:"radio",id:t.id,name:e.elementName},domProps:{value:t.id,checked:e._q(e.selectedSegmentId,t.id)},on:{change:function(n){e.selectedSegmentId=t.id}}}),e._v(" "),n("label",{attrs:{for:t.id}},[n("span",[e._v(e._s(t.title))])])])})],2)])},staticRenderFns:[]},function(e){e&&e("data-v-61ba2759_0",{source:'.vue-ios13-segmented-control{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;--background:rgba(239,239,240,1);background:var(--background);border-radius:9px;margin:0;padding:2px;border:none;outline:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}.vue-ios13-segmented-control label{cursor:inherit}.vue-ios13-segmented-control .option{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.vue-ios13-segmented-control .option:active input:not(:checked)+label span,.vue-ios13-segmented-control .option:focus input:not(:checked)+label span,.vue-ios13-segmented-control .option:hover input:not(:checked)+label span{opacity:.2}.vue-ios13-segmented-control .option:active input:not(:checked)+label span{transform:scale(.95)}.vue-ios13-segmented-control .option:first-of-type{grid-column:1;grid-row:1;box-shadow:none}.vue-ios13-segmented-control .option:first-of-type input::before{opacity:0}.vue-ios13-segmented-control .option:last-of-type input::after{opacity:0}.vue-ios13-segmented-control .option input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none}.vue-ios13-segmented-control .option input:checked+label{cursor:default}.vue-ios13-segmented-control .option input:checked+label::after,.vue-ios13-segmented-control .option input:checked+label::before{background:var(--background);z-index:1}.vue-ios13-segmented-control .option input::after,.vue-ios13-segmented-control .option input::before{content:"";width:1px;background:rgba(142,142,147,.15)!important;position:absolute;top:10%;bottom:10%;border-radius:10px;will-change:background;-webkit-transition:background .2s ease;transition:background .2s ease}.vue-ios13-segmented-control .option input::before{left:0;transform:translateX(-.5px)}.vue-ios13-segmented-control .option input::after{right:0;transform:translateX(.5px)}.vue-ios13-segmented-control .option label{position:relative;display:block;text-align:center;padding:3px 6vmin;margin-bottom:2px;background:rgba(255,255,255,0);font-weight:500;color:#000;font-size:14px}.vue-ios13-segmented-control .option label span{display:block;position:relative;z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease;will-change:transform}.vue-ios13-segmented-control .selection-pill{background:#fff;border:.5px solid rgba(0,0,0,.04);box-shadow:0 3px 8px 0 rgba(0,0,0,.12),0 3px 1px 0 rgba(0,0,0,.04);border-radius:7px;grid-column:1;grid-row:1;z-index:2;will-change:transform;-webkit-transition:transform .2s ease;transition:transform .2s ease}',map:void 0,media:void 0})},{name:"iOS13SegmentedControl",props:{value:{required:!0,type:[Number,String]},segments:{required:!0,type:Object},elementName:{type:String,required:!1,default:function(){return e=1e5,Math.floor(Math.random()*Math.floor(e));var e}}},data:function(){return{selectedSegmentWidth:0}},mounted:function(){window.addEventListener("resize",this.recalculateSelectedSegmentWidth)},beforeDestroy:function(){window.removeEventListener("resize",this.recalculateSelectedSegmentWidth)},computed:{selectedSegmentId:{get:function(){return this.value},set:function(e){this.$emit("change",e)}},selectedSegmentIndex:function(){var e=this;return this.segments.findIndex(function(t){return t.id===e.value})},pillTransformStyles:function(){return this.recalculateSelectedSegmentWidth(),"transform:translateX("+this.selectedSegmentWidth*this.selectedSegmentIndex+"px);width:"+this.selectedSegmentWidth+"px;"}},methods:{recalculateSelectedSegmentWidth:function(){var e=document.querySelector("input[type='radio'][value='"+this.value+"']");this.selectedSegmentWidth=e&&e.scrollWidth,this.selectedSegmentPositionLeft=e&&e.getBoundingClientRect().left}}},void 0,!1,void 0,!1,t,void 0,void 0);function o(e){o.installed||(o.installed=!0,e.component("ios13-segmented-control",n))}var i={install:o},r=null;"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use(i),n.install=o;export default n;
+import{normalizeComponent as e,createInjector as t}from"vue-runtime-helpers";var n=e({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"vue-ios13-segmented-control"},[n("span",{staticClass:"selection-pill",style:e.pillTransformStyles}),e._v(" "),e._l(e.segments,function(t){return n("div",{key:t.id,staticClass:"option"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.selectedSegmentId,expression:"selectedSegmentId"}],attrs:{type:"radio",id:t.id,name:e.elementName},domProps:{value:t.id,checked:e._q(e.selectedSegmentId,t.id)},on:{change:function(n){e.selectedSegmentId=t.id}}}),e._v(" "),n("label",{attrs:{for:t.id}},[n("span",[e._v(e._s(t.title))])])])})],2)])},staticRenderFns:[]},function(e){e&&e("data-v-617e6883_0",{source:'.vue-ios13-segmented-control{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;--background:rgba(239,239,240,1);background:var(--background);border-radius:9px;margin:0;padding:2px;border:none;outline:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}.vue-ios13-segmented-control label{cursor:inherit}.vue-ios13-segmented-control .option{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.vue-ios13-segmented-control .option:active input:not(:checked)+label span,.vue-ios13-segmented-control .option:focus input:not(:checked)+label span,.vue-ios13-segmented-control .option:hover input:not(:checked)+label span{opacity:.2}.vue-ios13-segmented-control .option:active input:not(:checked)+label span{transform:scale(.95)}.vue-ios13-segmented-control .option:first-of-type{grid-column:1;grid-row:1;box-shadow:none}.vue-ios13-segmented-control .option:first-of-type input::before{opacity:0}.vue-ios13-segmented-control .option:last-of-type input::after{opacity:0}.vue-ios13-segmented-control .option input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none}.vue-ios13-segmented-control .option input:checked+label{cursor:default}.vue-ios13-segmented-control .option input:checked+label::after,.vue-ios13-segmented-control .option input:checked+label::before{background:var(--background);z-index:1}.vue-ios13-segmented-control .option input::after,.vue-ios13-segmented-control .option input::before{content:"";width:1px;background:rgba(142,142,147,.15)!important;position:absolute;top:10%;bottom:10%;border-radius:10px;will-change:background;-webkit-transition:background .2s ease;transition:background .2s ease}.vue-ios13-segmented-control .option input::before{left:0;transform:translateX(-.5px)}.vue-ios13-segmented-control .option input::after{right:0;transform:translateX(.5px)}.vue-ios13-segmented-control .option label{position:relative;display:block;text-align:center;padding:3px 6vmin;margin-bottom:2px;background:rgba(255,255,255,0);font-weight:500;color:#000;font-size:14px}.vue-ios13-segmented-control .option label span{display:block;position:relative;z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease;will-change:transform}.vue-ios13-segmented-control .selection-pill{background:#fff;border:.5px solid rgba(0,0,0,.04);box-shadow:0 3px 8px 0 rgba(0,0,0,.12),0 3px 1px 0 rgba(0,0,0,.04);border-radius:7px;grid-column:1;grid-row:1;z-index:2;will-change:transform;-webkit-transition:transform .2s ease;transition:transform .2s ease}',map:void 0,media:void 0})},{name:"iOS13SegmentedControl",props:{value:{required:!0,type:[Number,String]},segments:{required:!0,type:Object},elementName:{type:String,required:!1,default:function(){return e=1e5,Math.floor(Math.random()*Math.floor(e));var e}}},data:function(){return{selectedSegmentWidth:0}},mounted:function(){window.addEventListener("resize",this.recalculateSelectedSegmentWidth)},beforeDestroy:function(){window.removeEventListener("resize",this.recalculateSelectedSegmentWidth)},computed:{selectedSegmentId:{get:function(){return this.value},set:function(e){this.$emit("input",e)}},selectedSegmentIndex:function(){var e=this;return this.segments.findIndex(function(t){return t.id===e.value})},pillTransformStyles:function(){return this.recalculateSelectedSegmentWidth(),"transform:translateX("+this.selectedSegmentWidth*this.selectedSegmentIndex+"px)"}},methods:{recalculateSelectedSegmentWidth:function(){var e=document.querySelector("input[type='radio'][value='"+this.value+"']");this.selectedSegmentWidth=e&&e.scrollWidth,this.selectedSegmentPositionLeft=e&&e.getBoundingClientRect().left}}},void 0,!1,void 0,!1,t,void 0,void 0);function o(e){o.installed||(o.installed=!0,e.component("ios13-segmented-control",n))}var i={install:o},r=null;"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use(i),n.install=o;export default n;

dist/vue-ios13-segmented-control.min.js

@@ -1,1 +0,1 @@
-var iOS13SegmentedControl=function(e,t){"use strict";var n={name:"iOS13SegmentedControl",props:{value:{required:!0,type:[Number,String]},segments:{required:!0,type:Object},elementName:{type:String,required:!1,default:function(){return e=1e5,Math.floor(Math.random()*Math.floor(e));var e}}},data:function(){return{selectedSegmentWidth:0}},mounted:function(){window.addEventListener("resize",this.recalculateSelectedSegmentWidth)},beforeDestroy:function(){window.removeEventListener("resize",this.recalculateSelectedSegmentWidth)},computed:{selectedSegmentId:{get:function(){return this.value},set:function(e){this.$emit("change",e)}},selectedSegmentIndex:function(){var e=this;return this.segments.findIndex(function(t){return t.id===e.value})},pillTransformStyles:function(){return this.recalculateSelectedSegmentWidth(),"transform:translateX("+this.selectedSegmentWidth*this.selectedSegmentIndex+"px);width:"+this.selectedSegmentWidth+"px;"}},methods:{recalculateSelectedSegmentWidth:function(){var e=document.querySelector("input[type='radio'][value='"+this.value+"']");this.selectedSegmentWidth=e&&e.scrollWidth,this.selectedSegmentPositionLeft=e&&e.getBoundingClientRect().left}}},o=t.normalizeComponent({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"vue-ios13-segmented-control"},[n("span",{staticClass:"selection-pill",style:e.pillTransformStyles}),e._v(" "),e._l(e.segments,function(t){return n("div",{key:t.id,staticClass:"option"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.selectedSegmentId,expression:"selectedSegmentId"}],attrs:{type:"radio",id:t.id,name:e.elementName},domProps:{value:t.id,checked:e._q(e.selectedSegmentId,t.id)},on:{change:function(n){e.selectedSegmentId=t.id}}}),e._v(" "),n("label",{attrs:{for:t.id}},[n("span",[e._v(e._s(t.title))])])])})],2)])},staticRenderFns:[]},function(e){e&&e("data-v-61ba2759_0",{source:'.vue-ios13-segmented-control{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;--background:rgba(239,239,240,1);background:var(--background);border-radius:9px;margin:0;padding:2px;border:none;outline:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}.vue-ios13-segmented-control label{cursor:inherit}.vue-ios13-segmented-control .option{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.vue-ios13-segmented-control .option:active input:not(:checked)+label span,.vue-ios13-segmented-control .option:focus input:not(:checked)+label span,.vue-ios13-segmented-control .option:hover input:not(:checked)+label span{opacity:.2}.vue-ios13-segmented-control .option:active input:not(:checked)+label span{transform:scale(.95)}.vue-ios13-segmented-control .option:first-of-type{grid-column:1;grid-row:1;box-shadow:none}.vue-ios13-segmented-control .option:first-of-type input::before{opacity:0}.vue-ios13-segmented-control .option:last-of-type input::after{opacity:0}.vue-ios13-segmented-control .option input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none}.vue-ios13-segmented-control .option input:checked+label{cursor:default}.vue-ios13-segmented-control .option input:checked+label::after,.vue-ios13-segmented-control .option input:checked+label::before{background:var(--background);z-index:1}.vue-ios13-segmented-control .option input::after,.vue-ios13-segmented-control .option input::before{content:"";width:1px;background:rgba(142,142,147,.15)!important;position:absolute;top:10%;bottom:10%;border-radius:10px;will-change:background;-webkit-transition:background .2s ease;transition:background .2s ease}.vue-ios13-segmented-control .option input::before{left:0;transform:translateX(-.5px)}.vue-ios13-segmented-control .option input::after{right:0;transform:translateX(.5px)}.vue-ios13-segmented-control .option label{position:relative;display:block;text-align:center;padding:3px 6vmin;margin-bottom:2px;background:rgba(255,255,255,0);font-weight:500;color:#000;font-size:14px}.vue-ios13-segmented-control .option label span{display:block;position:relative;z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease;will-change:transform}.vue-ios13-segmented-control .selection-pill{background:#fff;border:.5px solid rgba(0,0,0,.04);box-shadow:0 3px 8px 0 rgba(0,0,0,.12),0 3px 1px 0 rgba(0,0,0,.04);border-radius:7px;grid-column:1;grid-row:1;z-index:2;will-change:transform;-webkit-transition:transform .2s ease;transition:transform .2s ease}',map:void 0,media:void 0})},n,void 0,!1,void 0,!1,t.createInjector,void 0,void 0);function i(e){i.installed||(i.installed=!0,e.component("ios13-segmented-control",o))}var r={install:i},s=null;return"undefined"!=typeof window?s=window.Vue:"undefined"!=typeof global&&(s=global.Vue),s&&s.use(r),o.install=i,e.default=o,e}({},vueRuntimeHelpers);
+var iOS13SegmentedControl=function(e,t){"use strict";var n={name:"iOS13SegmentedControl",props:{value:{required:!0,type:[Number,String]},segments:{required:!0,type:Object},elementName:{type:String,required:!1,default:function(){return e=1e5,Math.floor(Math.random()*Math.floor(e));var e}}},data:function(){return{selectedSegmentWidth:0}},mounted:function(){window.addEventListener("resize",this.recalculateSelectedSegmentWidth)},beforeDestroy:function(){window.removeEventListener("resize",this.recalculateSelectedSegmentWidth)},computed:{selectedSegmentId:{get:function(){return this.value},set:function(e){this.$emit("input",e)}},selectedSegmentIndex:function(){var e=this;return this.segments.findIndex(function(t){return t.id===e.value})},pillTransformStyles:function(){return this.recalculateSelectedSegmentWidth(),"transform:translateX("+this.selectedSegmentWidth*this.selectedSegmentIndex+"px)"}},methods:{recalculateSelectedSegmentWidth:function(){var e=document.querySelector("input[type='radio'][value='"+this.value+"']");this.selectedSegmentWidth=e&&e.scrollWidth,this.selectedSegmentPositionLeft=e&&e.getBoundingClientRect().left}}},o=t.normalizeComponent({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"vue-ios13-segmented-control"},[n("span",{staticClass:"selection-pill",style:e.pillTransformStyles}),e._v(" "),e._l(e.segments,function(t){return n("div",{key:t.id,staticClass:"option"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.selectedSegmentId,expression:"selectedSegmentId"}],attrs:{type:"radio",id:t.id,name:e.elementName},domProps:{value:t.id,checked:e._q(e.selectedSegmentId,t.id)},on:{change:function(n){e.selectedSegmentId=t.id}}}),e._v(" "),n("label",{attrs:{for:t.id}},[n("span",[e._v(e._s(t.title))])])])})],2)])},staticRenderFns:[]},function(e){e&&e("data-v-617e6883_0",{source:'.vue-ios13-segmented-control{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;--background:rgba(239,239,240,1);background:var(--background);border-radius:9px;margin:0;padding:2px;border:none;outline:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}.vue-ios13-segmented-control label{cursor:inherit}.vue-ios13-segmented-control .option{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.vue-ios13-segmented-control .option:active input:not(:checked)+label span,.vue-ios13-segmented-control .option:focus input:not(:checked)+label span,.vue-ios13-segmented-control .option:hover input:not(:checked)+label span{opacity:.2}.vue-ios13-segmented-control .option:active input:not(:checked)+label span{transform:scale(.95)}.vue-ios13-segmented-control .option:first-of-type{grid-column:1;grid-row:1;box-shadow:none}.vue-ios13-segmented-control .option:first-of-type input::before{opacity:0}.vue-ios13-segmented-control .option:last-of-type input::after{opacity:0}.vue-ios13-segmented-control .option input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none}.vue-ios13-segmented-control .option input:checked+label{cursor:default}.vue-ios13-segmented-control .option input:checked+label::after,.vue-ios13-segmented-control .option input:checked+label::before{background:var(--background);z-index:1}.vue-ios13-segmented-control .option input::after,.vue-ios13-segmented-control .option input::before{content:"";width:1px;background:rgba(142,142,147,.15)!important;position:absolute;top:10%;bottom:10%;border-radius:10px;will-change:background;-webkit-transition:background .2s ease;transition:background .2s ease}.vue-ios13-segmented-control .option input::before{left:0;transform:translateX(-.5px)}.vue-ios13-segmented-control .option input::after{right:0;transform:translateX(.5px)}.vue-ios13-segmented-control .option label{position:relative;display:block;text-align:center;padding:3px 6vmin;margin-bottom:2px;background:rgba(255,255,255,0);font-weight:500;color:#000;font-size:14px}.vue-ios13-segmented-control .option label span{display:block;position:relative;z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease;will-change:transform}.vue-ios13-segmented-control .selection-pill{background:#fff;border:.5px solid rgba(0,0,0,.04);box-shadow:0 3px 8px 0 rgba(0,0,0,.12),0 3px 1px 0 rgba(0,0,0,.04);border-radius:7px;grid-column:1;grid-row:1;z-index:2;will-change:transform;-webkit-transition:transform .2s ease;transition:transform .2s ease}',map:void 0,media:void 0})},n,void 0,!1,void 0,!1,t.createInjector,void 0,void 0);function i(e){i.installed||(i.installed=!0,e.component("ios13-segmented-control",o))}var r={install:i},s=null;return"undefined"!=typeof window?s=window.Vue:"undefined"!=typeof global&&(s=global.Vue),s&&s.use(r),o.install=i,e.default=o,e}({},vueRuntimeHelpers);

dist/vue-ios13-segmented-control.ssr.js

@@ -63,4 +63,3 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vueRuntimeHelpers=require('vue-runtime-helpers');//
       set: function set(segmentId) {
-        // this.value = segmentId;
-        this.$emit("change", segmentId);
+        this.$emit("input", segmentId);
       }
@@ -75,3 +74,3 @@ },
       this.recalculateSelectedSegmentWidth();
-      return "transform:translateX(" + (this.selectedSegmentWidth * this.selectedSegmentIndex) + "px)" + ";width:" + (this.selectedSegmentWidth) + "px;";
+      return "transform:translateX(" + (this.selectedSegmentWidth * this.selectedSegmentIndex) + "px)";
     }
@@ -97,3 +96,3 @@ },
     if (!inject) { return }
-    inject("data-v-61ba2759_0", { source: ".vue-ios13-segmented-control{font-family:-apple-system,system-ui,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;--background:rgba(239,239,240,1);background:var(--background);border-radius:9px;margin:0;padding:2px;border:none;outline:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}.vue-ios13-segmented-control label{cursor:inherit}.vue-ios13-segmented-control .option{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.vue-ios13-segmented-control .option:active input:not(:checked)+label span,.vue-ios13-segmented-control .option:focus input:not(:checked)+label span,.vue-ios13-segmented-control .option:hover input:not(:checked)+label span{opacity:.2}.vue-ios13-segmented-control .option:active input:not(:checked)+label span{transform:scale(.95)}.vue-ios13-segmented-control .option:first-of-type{grid-column:1;grid-row:1;box-shadow:none}.vue-ios13-segmented-control .option:first-of-type input::before{opacity:0}.vue-ios13-segmented-control .option:last-of-type input::after{opacity:0}.vue-ios13-segmented-control .option input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none}.vue-ios13-segmented-control .option input:checked+label{cursor:default}.vue-ios13-segmented-control .option input:checked+label::after,.vue-ios13-segmented-control .option input:checked+label::before{background:var(--background);z-index:1}.vue-ios13-segmented-control .option input::after,.vue-ios13-segmented-control .option input::before{content:\"\";width:1px;background:rgba(142,142,147,.15)!important;position:absolute;top:10%;bottom:10%;border-radius:10px;will-change:background;-webkit-transition:background .2s ease;transition:background .2s ease}.vue-ios13-segmented-control .option input::before{left:0;transform:translateX(-.5px)}.vue-ios13-segmented-control .option input::after{right:0;transform:translateX(.5px)}.vue-ios13-segmented-control .option label{position:relative;display:block;text-align:center;padding:3px 6vmin;margin-bottom:2px;background:rgba(255,255,255,0);font-weight:500;color:#000;font-size:14px}.vue-ios13-segmented-control .option label span{display:block;position:relative;z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease;will-change:transform}.vue-ios13-segmented-control .selection-pill{background:#fff;border:.5px solid rgba(0,0,0,.04);box-shadow:0 3px 8px 0 rgba(0,0,0,.12),0 3px 1px 0 rgba(0,0,0,.04);border-radius:7px;grid-column:1;grid-row:1;z-index:2;will-change:transform;-webkit-transition:transform .2s ease;transition:transform .2s ease}", map: undefined, media: undefined });
+    inject("data-v-617e6883_0", { source: ".vue-ios13-segmented-control{font-family:-apple-system,system-ui,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;--background:rgba(239,239,240,1);background:var(--background);border-radius:9px;margin:0;padding:2px;border:none;outline:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}.vue-ios13-segmented-control label{cursor:inherit}.vue-ios13-segmented-control .option{display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.vue-ios13-segmented-control .option:active input:not(:checked)+label span,.vue-ios13-segmented-control .option:focus input:not(:checked)+label span,.vue-ios13-segmented-control .option:hover input:not(:checked)+label span{opacity:.2}.vue-ios13-segmented-control .option:active input:not(:checked)+label span{transform:scale(.95)}.vue-ios13-segmented-control .option:first-of-type{grid-column:1;grid-row:1;box-shadow:none}.vue-ios13-segmented-control .option:first-of-type input::before{opacity:0}.vue-ios13-segmented-control .option:last-of-type input::after{opacity:0}.vue-ios13-segmented-control .option input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:none}.vue-ios13-segmented-control .option input:checked+label{cursor:default}.vue-ios13-segmented-control .option input:checked+label::after,.vue-ios13-segmented-control .option input:checked+label::before{background:var(--background);z-index:1}.vue-ios13-segmented-control .option input::after,.vue-ios13-segmented-control .option input::before{content:\"\";width:1px;background:rgba(142,142,147,.15)!important;position:absolute;top:10%;bottom:10%;border-radius:10px;will-change:background;-webkit-transition:background .2s ease;transition:background .2s ease}.vue-ios13-segmented-control .option input::before{left:0;transform:translateX(-.5px)}.vue-ios13-segmented-control .option input::after{right:0;transform:translateX(.5px)}.vue-ios13-segmented-control .option label{position:relative;display:block;text-align:center;padding:3px 6vmin;margin-bottom:2px;background:rgba(255,255,255,0);font-weight:500;color:#000;font-size:14px}.vue-ios13-segmented-control .option label span{display:block;position:relative;z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease;will-change:transform}.vue-ios13-segmented-control .selection-pill{background:#fff;border:.5px solid rgba(0,0,0,.04);box-shadow:0 3px 8px 0 rgba(0,0,0,.12),0 3px 1px 0 rgba(0,0,0,.04);border-radius:7px;grid-column:1;grid-row:1;z-index:2;will-change:transform;-webkit-transition:transform .2s ease;transition:transform .2s ease}", map: undefined, media: undefined });
 
@@ -104,3 +103,3 @@ };
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-61ba2759";
+  var __vue_module_identifier__ = "data-v-617e6883";
   /* functional template */
@@ -107,0 +106,0 @@ var __vue_is_functional_template__ = false;

package.json

 {
   "name": "vue-ios13-segmented-control",
-  "version": "1.0.1",
-  "description": "",
+  "version": "1.0.2",
+  "description": "Vue.js radio button component inspired by the new skeuomorphic segmented control in iOS 13",
+  "repository": "https://github.com/AnalyzePlatypus/vue-ios13-segmented-control",
   "main": "dist/vue-ios13-segmented-control.ssr.js",
@@ -6,0 +7,0 @@ "module": "dist/vue-ios13-segmented-control.esm.js",

readme.md

@@ -5,2 +5,53 @@ # iOS 13 Segmented Control for Vue
 
+## Install
+
+```bash
+npm i vue-ios13-segmented-control
+```
+
+Or use the `unpkg` CDN:
+
+```html
+<script src="https://unpkg.com/vue-ios13-segmented-control@1.0.1/dist/vue-ios13-segmented-control.min.js" integrity="sha384-M63o+KK9pQcShpoV2/YwrXPOoOumiHtXBy+8URwNOQBeNhav4XrDp3uV0+qwmjr8" crossorigin="anonymous"></script>
+```
+
+## Usage
+
+```html
+<ios13-segmented-control v-model="value" :segments="segments"/>
+```
+
+```javascript
+import iOS13SegmentedControl from "@/vue-ios13-segmented-control.vue";
+
+export default {
+  name: 'MyComponent',
+  components: { 
+    "ios13-segmented-control": iOS13SegmentedControl
+  }
+  data() {
+    return {
+      value: "42",
+      segments: [
+        {
+          title: "Apple Music",
+          id: "0"
+        },
+        {
+          title: "Spotify",
+          id: "1"
+        },
+        {
+          title: "Deezer",
+          id: "2"
+        },
+      ]
+    };
+  },
+  
+};
+</script>
+
+```
+
 ## Live Development
@@ -7,0 +58,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27064

increased by3.21%

Number of lines in readme file

87

increased by141.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

165

decreased by-1.2%

No dependency changes