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

Comparing version 1.0.4 to 1.0.5

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-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;
+var e={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()}}};function t(e,t,n,o,i,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var c,u="function"==typeof n?n.options:n;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,i&&(u.functional=!0)),o&&(u._scopeId=o),r?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},u._ssrRegister=c):t&&(c=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(u.functional){var p=u.render;u.render=function(e,t){return c.call(t),p(e,t)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,c):[c]}return n}var n,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return function(e,t){return function(e,t){var i=o?t.media||"default":e,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,d=document.createTextNode(a),c=s.element.childNodes;c[l]&&s.element.removeChild(c[l]),c.length?s.element.insertBefore(d,c[l]):s.element.appendChild(d)}}}(e,t)}}var r={};var s=t({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})},e,void 0,!1,void 0,!1,i,void 0,void 0);function a(e){a.installed||(a.installed=!0,e.component("ios13-segmented-control",s))}var l={install:a},d=null;"undefined"!=typeof window?d=window.Vue:"undefined"!=typeof global&&(d=global.Vue),d&&d.use(l),s.install=a;export default s;

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: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);
+var iOS13SegmentedControl=function(e){"use strict";var t={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()}}};function n(e,t,n,o,i,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var c,u="function"==typeof n?n.options:n;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,i&&(u.functional=!0)),o&&(u._scopeId=o),r?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},u._ssrRegister=c):t&&(c=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(u.functional){var p=u.render;u.render=function(e,t){return c.call(t),p(e,t)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,c):[c]}return n}var o,i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(e){return function(e,t){return function(e,t){var n=i?t.media||"default":e,r=s[n]||(s[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(a),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var l=r.ids.size-1,d=document.createTextNode(a),c=r.element.childNodes;c[l]&&r.element.removeChild(c[l]),c.length?r.element.insertBefore(d,c[l]):r.element.appendChild(d)}}}(e,t)}}var s={};var a=n({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})},t,void 0,!1,void 0,!1,r,void 0,void 0);function l(e){l.installed||(l.installed=!0,e.component("ios13-segmented-control",a))}var d={install:l},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.Vue),c&&c.use(d),a.install=l,e.default=a,e}({});

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

@@ -1,2 +0,2 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vueRuntimeHelpers=require('vue-runtime-helpers');//
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});//
 //
@@ -100,3 +100,116 @@ //
   }
-};/* script */
+};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    var options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    var hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            var originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            var existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}function createInjectorSSR(context) {
+    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+    }
+    if (!context)
+        { return function () { }; }
+    if (!('styles' in context)) {
+        context._styles = context._styles || {};
+        Object.defineProperty(context, 'styles', {
+            enumerable: true,
+            get: function () { return context._renderStyles(context._styles); }
+        });
+        context._renderStyles = context._renderStyles || renderStyles;
+    }
+    return function (id, style) { return addStyle(id, style, context); };
+}
+function addStyle(id, css, context) {
+    var group =  css.media || 'default' ;
+    var style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
+    if (!style.ids.includes(id)) {
+        style.media = css.media;
+        style.ids.push(id);
+        var code = css.source;
+        style.css += code + '\n';
+    }
+}
+function renderStyles(styles) {
+    var css = '';
+    for (var key in styles) {
+        var style = styles[key];
+        css +=
+            '<style data-vue-ssr-id="' +
+                Array.from(style.ids).join(' ') +
+                '"' +
+                (style.media ? ' media="' + style.media + '"' : '') +
+                '>' +
+                style.css +
+                '</style>';
+    }
+    return css;
+}/* script */
 var __vue_script__ = script;
@@ -124,3 +237,3 @@
   
-  var component = vueRuntimeHelpers.normalizeComponent(
+  var __vue_component__ = /*#__PURE__*/normalizeComponent(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
@@ -134,3 +247,3 @@ __vue_inject_styles__,
     undefined,
-    vueRuntimeHelpers.createInjectorSSR,
+    createInjectorSSR,
     undefined
@@ -143,3 +256,3 @@ );// Import vue component
   install.installed = true;
-  Vue.component('ios13-segmented-control', component);
+  Vue.component('ios13-segmented-control', __vue_component__);
 }
@@ -166,3 +279,3 @@
 // to be registered via Vue.use() as well as Vue.component()
-component.install = install;
+__vue_component__.install = install;
 
@@ -172,2 +285,2 @@ // It's possible to expose named exports when writing components that can
 // export const RollupDemoDirective = component;
-exports.default=component;
+exports.default=__vue_component__;

package.json

 {
   "name": "vue-ios13-segmented-control",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Vue.js radio button component inspired by the new skeuomorphic segmented control in iOS 13",
@@ -16,2 +16,3 @@ "repository": "https://github.com/AnalyzePlatypus/vue-ios13-segmented-control",
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:demo": "cd demo-site &&  NODE_ENV=production npm run build",
     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
@@ -23,5 +24,5 @@ "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "cross-env": "^5.2.0",
-    "minimist": "^1.2.0",
-    "node-sass": "^4.13.0",
-    "rollup": "^1.12.1",
+    "minimist": "^1.2.5",
+    "node-sass": "^4.14.1",
+    "rollup": "^1.32.1",
     "rollup-plugin-buble": "^0.19.6",
@@ -31,7 +32,7 @@ "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-terser": "^4.0.4",
-    "rollup-plugin-vue": "^5.1.2",
-    "sass-loader": "^8.0.0",
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "rollup-plugin-vue": "^5.1.9",
+    "sass-loader": "^8.0.2",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
   }
 }

readme.md

@@ -5,2 +5,6 @@ # iOS 13 Segmented Control for Vue
 
+[Live demo › ](https://vue-ios13-segmented-control.netlify.com)
+
+![Demo GIF](/demo.gif)
+
 ## Install
@@ -12,8 +16,2 @@
 
-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
@@ -80,3 +78,3 @@
 
-* Styles based on  [this repo](https://github.com/eljoseurena/ios-13-Style-Switcher) by [@eljoseurena](https://github.com/eljoseurena)
+* Styles based on  [this repo](https://github.com/laurasandoval/ios-13-Style-Switcher) by [@laurasandoval](https://github.com/laurasandoval)
 
@@ -83,0 +81,0 @@ * The component development template I used is [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup) by [Team Innovation](https://github.com/team-innovation)

New 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

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35206

increased by27.35%

Lines of code

297

increased by66.85%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Number of lines in readme file

85

decreased by-2.3%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes