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

Comparing version 1.0.3 to 1.0.4

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-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;
+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-592687f2_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:Array},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"transform:translateX("+this.selectedSegmentWidth*this.selectedSegmentIndex+"px)"}},methods:{recalculateSelectedSegmentWidth:function(){var e=this;this.$nextTick(function(){var t=document.querySelector("input[type='radio'][value='"+e.value+"']");e.selectedSegmentWidth=t&&t.offsetWidth})}},watch:{segments:function(){this.recalculateSelectedSegmentWidth()},value:function(){this.recalculateSelectedSegmentWidth()}}},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("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);
+var iOS13SegmentedControl=function(e,t){"use strict";var n={name:"iOS13SegmentedControl",props:{value:{required:!0,type:[Number,String]},segments:{required:!0,type:Array},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"transform:translateX("+this.selectedSegmentWidth*this.selectedSegmentIndex+"px)"}},methods:{recalculateSelectedSegmentWidth:function(){var e=this;this.$nextTick(function(){var t=document.querySelector("input[type='radio'][value='"+e.value+"']");e.selectedSegmentWidth=t&&t.offsetWidth})}},watch:{segments:function(){this.recalculateSelectedSegmentWidth()},value:function(){this.recalculateSelectedSegmentWidth()}}},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-592687f2_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

@@ -36,3 +36,3 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vueRuntimeHelpers=require('vue-runtime-helpers');//
       required: true,
-      type: Object
+      type: Array
     },
@@ -42,3 +42,3 @@ elementName: {
       required: false,
-      default: function () { return getRandomInt(100000); }
+      default: function () { return '' + getRandomInt(100000); }
     }
@@ -52,5 +52,7 @@ },
 
+
   mounted: function mounted() {
     window.addEventListener('resize', this.recalculateSelectedSegmentWidth);
   },
+  
   beforeDestroy: function beforeDestroy() {
@@ -75,3 +77,2 @@ window.removeEventListener('resize', this.recalculateSelectedSegmentWidth);
     pillTransformStyles: function pillTransformStyles() {
-      this.recalculateSelectedSegmentWidth();
       return "transform:translateX(" + (this.selectedSegmentWidth * this.selectedSegmentIndex) + "px)";
@@ -83,6 +84,21 @@ }
     recalculateSelectedSegmentWidth: function recalculateSelectedSegmentWidth() {
-      var segmentElement = document.querySelector(("input[type='radio'][value='" + (this.value) + "']"));
-      this.selectedSegmentWidth = segmentElement && segmentElement.scrollWidth;
-      this.selectedSegmentPositionLeft = segmentElement && segmentElement.getBoundingClientRect().left;
+      var this$1 = this;
+
+      // Wait for UI to rerender before measuring
+      this.$nextTick(function (){
+        var segmentElement = document.querySelector(("input[type='radio'][value='" + (this$1.value) + "']"));
+        this$1.selectedSegmentWidth = segmentElement && segmentElement.offsetWidth;
+      });
     }
+  },
+
+  watch: {
+    // If segments are added, edited, or removed
+    segments: function segments() {
+      this.recalculateSelectedSegmentWidth();
+    },
+    // If the segment is changed programmatically
+    value: function value() {
+      this.recalculateSelectedSegmentWidth();
+    }
   }
@@ -99,3 +115,3 @@ };/* script */
     if (!inject) { return }
-    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 });
+    inject("data-v-592687f2_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 });
 
@@ -106,3 +122,3 @@ };
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-617e6883";
+  var __vue_module_identifier__ = "data-v-592687f2";
   /* functional template */
@@ -109,0 +125,0 @@ var __vue_is_functional_template__ = false;

package.json

 {
   "name": "vue-ios13-segmented-control",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Vue.js radio button component inspired by the new skeuomorphic segmented control in iOS 13",
@@ -5,0 +5,0 @@ "repository": "https://github.com/AnalyzePlatypus/vue-ios13-segmented-control",

No alert changes

Improved metrics

Total package byte prevSize

27645

increased by1.4%

Lines of code

178

increased by7.88%

No dependency changes