From fc49995049b3444676c422103b028d50b4d7d376 Mon Sep 17 00:00:00 2001 From: Adnan Zaki Date: Sun, 12 Mar 2023 22:29:34 +0700 Subject: [PATCH] Fix overall style and bugs --- components/dist/ss-components.js | 57 ++++++++++++------- components/dist/ss-components.prod.js | 2 +- components/dist/style.css | 34 ++++++++--- components/index.html | 4 +- components/src/components/helpers.js | 4 +- components/src/components/input/searchbox.css | 2 +- components/src/components/navigation/nav.css | 17 +++++- components/src/components/navigation/nav.js | 11 +++- components/src/components/select/select.css | 21 ++++++- components/src/components/select/select.js | 50 ++++++++++------ components/src/components/variables.css | 2 +- components/src/tests/App.vue | 2 +- 12 files changed, 146 insertions(+), 60 deletions(-) diff --git a/components/dist/ss-components.js b/components/dist/ss-components.js index a231b0a..d34bf24 100644 --- a/components/dist/ss-components.js +++ b/components/dist/ss-components.js @@ -9,7 +9,7 @@ var SSComponents = (function (exports, vue) { return useStore ? vue.toRefs(paging) : vue.toRefs(paging.state) }; - const densePadding = { padding: '6px 12px' }; + const largePadding = { padding: '10px 15px' }; const iconSet = 'material-icons-round'; @@ -38,7 +38,7 @@ var SSComponents = (function (exports, vue) { selected: { default: null }, - dense: { + large: { type: Boolean, default: false }, @@ -54,9 +54,11 @@ var SSComponents = (function (exports, vue) { // Pagination instance const paging = props.paging; - const showOptions = vue.ref(false); const label = vue.ref(props.label); const optionsWidth = vue.ref(0); + + const listWrapperActive = vue.ref(''); + const activeIcon = vue.ref(''); vue.onMounted(() => { // hide options if users click outside the select element @@ -64,7 +66,8 @@ var SSComponents = (function (exports, vue) { const selectEl = document.getElementById('sp-select-id'); if(!selectEl.contains(event.target)) { setTimeout(() => { - showOptions.value = false; + // showOptions.value = false + listWrapperActive.value = ''; }, 100); } @@ -95,14 +98,23 @@ var SSComponents = (function (exports, vue) { return classes }; - // attributes for Select - const selectAttrs = { - class: selectClass(), - style: props.dense ? densePadding : '', - id: 'sp-select-id', - onClick(event) { - showOptions.value = !showOptions.value; - }, + // attributes for Select + const selectAttrs = () => { + return { + class: [selectClass(), activeIcon.value], + style: props.large ? largePadding : '', + id: 'sp-select-id', + onClick(event) { + // showOptions.value = !showOptions.value + if(listWrapperActive.value === 'active') { + listWrapperActive.value = ''; + activeIcon.value = ''; + } else { + listWrapperActive.value = 'active'; + activeIcon.value = 'active'; + } + }, + } }; const optionClass = () => { @@ -119,7 +131,7 @@ var SSComponents = (function (exports, vue) { return { class: optionClass(), key, - style: props.dense ? densePadding : '', + style: props.large ? largePadding : '', onClick(event) { setPagingState(props.useStore, { paging, @@ -138,19 +150,23 @@ var SSComponents = (function (exports, vue) { return () => [ // Select element - vue.h('div', selectAttrs, label.value, + vue.h('div', selectAttrs(), label.value, vue.h('span', { class: 'material-icons-round' }, 'expand_more'), ), // Options element - showOptions.value ? vue.h('ul', { - class: ['sp-select-options', props.dark ? 'dark' : ''], + vue.h('ul', { + class: [ + 'sp-select-options', + props.dark ? 'dark' : '', + listWrapperActive.value + ], style: { width: `${optionsWidth.value}px` } }, props.options.map((row, index) => { return vue.h('li', optionsAttrs(row, index), `${row} ${props.rowLabel}`) }) - ) : '' + ) ] } }); @@ -210,7 +226,7 @@ var SSComponents = (function (exports, vue) { } } }, - vue.h('a', { class: ['sp-link', ...customClass] }, content) + vue.h('button', { class: ['sp-link', ...customClass] }, content) ) }; @@ -218,7 +234,10 @@ var SSComponents = (function (exports, vue) { const navLinks = (icon, target) => { return createList(vue.h('span', { class: iconSet - }, icon), target, props.dark ? 'dark' : '', props.customNavigationClass + }, icon), + target, + props.paging.isDisabled(target), + props.dark ? 'dark' : '', props.customNavigationClass ) }; diff --git a/components/dist/ss-components.prod.js b/components/dist/ss-components.prod.js index 2ad8c53..422bf26 100644 --- a/components/dist/ss-components.prod.js +++ b/components/dist/ss-components.prod.js @@ -1 +1 @@ -var SSComponents=function(exports,vue){"use strict";const setPagingState=(useStore,{paging,property,value})=>{useStore?paging[property]=value:paging.state[property]=value};const getPaging=(useStore,paging)=>{return useStore?vue.toRefs(paging):vue.toRefs(paging.state)};const densePadding={padding:"6px 12px"};const iconSet="material-icons-round";var select=vue.defineComponent({props:{paging:{type:Object,required:true},useStore:{type:Boolean,default:false},label:{type:String,default:"Choose Option"},rowLabel:{type:String,default:"rows"},options:{type:Array,default:[10,25,50,100,250]},selected:{default:null},dense:{type:Boolean,default:false},customSelectClass:[String,Array],customOptionClass:[String,Array],dark:{type:Boolean,default:false}},emits:["update:selected"],setup(props,{emit}){const paging=props.paging;const showOptions=vue.ref(false);const label=vue.ref(props.label);const optionsWidth=vue.ref(0);vue.onMounted(()=>{document.addEventListener("click",event=>{const selectEl=document.getElementById("sp-select-id");if(!selectEl.contains(event.target)){setTimeout(()=>{showOptions.value=false},100)}optionsWidth.value=selectEl.offsetWidth})});if(props.selected!==null){const updateSelectedOption=()=>{if(props.options.includes(props.selected)){label.value=`${props.selected} ${props.rowLabel}`}};updateSelectedOption()}const selectClass=()=>{const classes=[props.dark?"sp-select dark":"sp-select"];if(props.customSelectClass!==undefined){classes.push(props.customSelectClass)}return classes};const selectAttrs={class:selectClass(),style:props.dense?densePadding:"",id:"sp-select-id",onClick(event){showOptions.value=!showOptions.value}};const optionClass=()=>{const classes=[props.dark?"dark":""];if(props.customOptionClass!==undefined){classes.push(props.customOptionClass)}return classes};const optionsAttrs=(row,key)=>{return{class:optionClass(),key:key,style:props.dense?densePadding:"",onClick(event){setPagingState(props.useStore,{paging:paging,property:"rows",value:row});label.value=`${row} ${props.rowLabel}`;paging.showPerPage();emit("update:selected",event,row)}}};return()=>[vue.h("div",selectAttrs,label.value,vue.h("span",{class:"material-icons-round"},"expand_more")),showOptions.value?vue.h("ul",{class:["sp-select-options",props.dark?"dark":""],style:{width:`${optionsWidth.value}px`}},props.options.map((row,index)=>{return vue.h("li",optionsAttrs(row,index),`${row} ${props.rowLabel}`)})):""]}});var nav=vue.defineComponent({props:{paging:{type:Object,required:true},useStore:{type:Boolean,default:false},modelValue:{required:true},useInput:{type:Boolean,default:false},dark:{type:Boolean,default:false},customNavigationClass:[String,Array],customInputClass:[String,Array],customNumlinkClass:[String,Array]},emits:["update:modelValue"],setup(props,{emit}){const{pageLinks,first,prev,next,last}=getPaging(props.useStore,props.paging);const resetModelValue=()=>{if(props.paging.activePage.value===1){emit("update:modelValue",1)}};vue.watch(pageLinks,resetModelValue);vue.onMounted(resetModelValue);const createList=(content,goTo,...customClass)=>{return vue.h("li",{class:"sp-item",onClick(event){if(goTo!==null){emit("update:modelValue",goTo+1);props.paging.nav(goTo)}}},vue.h("a",{class:["sp-link",...customClass]},content))};const navLinks=(icon,target)=>{return createList(vue.h("span",{class:iconSet},icon),target,props.dark?"dark":"",props.customNavigationClass)};const createNumberLinks=()=>{return pageLinks.value.map(item=>{return createList(item,item-1,"sp-numlink",props.paging.activeLink(item),props.dark?"dark":"",props.customNumlinkClass)})};const setPage=()=>{return createList(vue.h("input",{class:["sp-input",props.customInputClass],value:props.modelValue,onKeyup(event){if(event.keyCode===13){const targetPage=event.target.value-1;if(targetPage<=last.value&&targetPage>=0){emit("update:modelValue",event.target.value);props.paging.nav(targetPage)}}}}),null,"no-background")};return()=>vue.h("ul",{class:"sp-navigation"},[navLinks("first_page",first.value),navLinks("chevron_left",prev.value),props.useInput?setPage():createNumberLinks(),navLinks("chevron_right",next.value),navLinks("last_page",last.value)])}});var searchbox=vue.defineComponent({props:{paging:{type:Object,required:true},useStore:{type:Boolean,default:false},modelValue:{required:true},placeholder:{type:String,default:""},icon:{type:String,default:"search"}},emits:["update:modelValue"],setup(props,{emit}){const icons={search:"search",arrow:"arrow_forward"};return()=>vue.h("div",{class:"sp-searchbox-wrapper"},[vue.h("input",{class:"sp-searchbox",placeholder:props.placeholder,onInput(event){if(event.target.value===""){emit("update:modelValue",event.target.value);props.paging.onSearchChanged()}},onKeyup(event){if(event.keyCode===13){emit("update:modelValue",event.target.value);props.paging.filter()}}}),vue.h("span",{class:[iconSet,"sp-searchbox-icon"]},icons[props.icon])])}});exports.Navigator=nav;exports.SearchBox=searchbox;exports.SelectRow=select;return exports}({},Vue); \ No newline at end of file +var SSComponents=function(exports,vue){"use strict";const setPagingState=(useStore,{paging,property,value})=>{useStore?paging[property]=value:paging.state[property]=value};const getPaging=(useStore,paging)=>{return useStore?vue.toRefs(paging):vue.toRefs(paging.state)};const largePadding={padding:"10px 15px"};const iconSet="material-icons-round";var select=vue.defineComponent({props:{paging:{type:Object,required:true},useStore:{type:Boolean,default:false},label:{type:String,default:"Choose Option"},rowLabel:{type:String,default:"rows"},options:{type:Array,default:[10,25,50,100,250]},selected:{default:null},large:{type:Boolean,default:false},customSelectClass:[String,Array],customOptionClass:[String,Array],dark:{type:Boolean,default:false}},emits:["update:selected"],setup(props,{emit}){const paging=props.paging;const label=vue.ref(props.label);const optionsWidth=vue.ref(0);const listWrapperActive=vue.ref("");const activeIcon=vue.ref("");vue.onMounted(()=>{document.addEventListener("click",event=>{const selectEl=document.getElementById("sp-select-id");if(!selectEl.contains(event.target)){setTimeout(()=>{listWrapperActive.value=""},100)}optionsWidth.value=selectEl.offsetWidth})});if(props.selected!==null){const updateSelectedOption=()=>{if(props.options.includes(props.selected)){label.value=`${props.selected} ${props.rowLabel}`}};updateSelectedOption()}const selectClass=()=>{const classes=[props.dark?"sp-select dark":"sp-select"];if(props.customSelectClass!==undefined){classes.push(props.customSelectClass)}return classes};const selectAttrs=()=>{return{class:[selectClass(),activeIcon.value],style:props.large?largePadding:"",id:"sp-select-id",onClick(event){if(listWrapperActive.value==="active"){listWrapperActive.value="";activeIcon.value=""}else{listWrapperActive.value="active";activeIcon.value="active"}}}};const optionClass=()=>{const classes=[props.dark?"dark":""];if(props.customOptionClass!==undefined){classes.push(props.customOptionClass)}return classes};const optionsAttrs=(row,key)=>{return{class:optionClass(),key:key,style:props.large?largePadding:"",onClick(event){setPagingState(props.useStore,{paging:paging,property:"rows",value:row});label.value=`${row} ${props.rowLabel}`;paging.showPerPage();emit("update:selected",event,row)}}};return()=>[vue.h("div",selectAttrs(),label.value,vue.h("span",{class:"material-icons-round"},"expand_more")),vue.h("ul",{class:["sp-select-options",props.dark?"dark":"",listWrapperActive.value],style:{width:`${optionsWidth.value}px`}},props.options.map((row,index)=>{return vue.h("li",optionsAttrs(row,index),`${row} ${props.rowLabel}`)}))]}});var nav=vue.defineComponent({props:{paging:{type:Object,required:true},useStore:{type:Boolean,default:false},modelValue:{required:true},useInput:{type:Boolean,default:false},dark:{type:Boolean,default:false},customNavigationClass:[String,Array],customInputClass:[String,Array],customNumlinkClass:[String,Array]},emits:["update:modelValue"],setup(props,{emit}){const{pageLinks,first,prev,next,last}=getPaging(props.useStore,props.paging);const resetModelValue=()=>{if(props.paging.activePage.value===1){emit("update:modelValue",1)}};vue.watch(pageLinks,resetModelValue);vue.onMounted(resetModelValue);const createList=(content,goTo,...customClass)=>{return vue.h("li",{class:"sp-item",onClick(event){if(goTo!==null){emit("update:modelValue",goTo+1);props.paging.nav(goTo)}}},vue.h("button",{class:["sp-link",...customClass]},content))};const navLinks=(icon,target)=>{return createList(vue.h("span",{class:iconSet},icon),target,props.paging.isDisabled(target),props.dark?"dark":"",props.customNavigationClass)};const createNumberLinks=()=>{return pageLinks.value.map(item=>{return createList(item,item-1,"sp-numlink",props.paging.activeLink(item),props.dark?"dark":"",props.customNumlinkClass)})};const setPage=()=>{return createList(vue.h("input",{class:["sp-input",props.customInputClass],value:props.modelValue,onKeyup(event){if(event.keyCode===13){const targetPage=event.target.value-1;if(targetPage<=last.value&&targetPage>=0){emit("update:modelValue",event.target.value);props.paging.nav(targetPage)}}}}),null,"no-background")};return()=>vue.h("ul",{class:"sp-navigation"},[navLinks("first_page",first.value),navLinks("chevron_left",prev.value),props.useInput?setPage():createNumberLinks(),navLinks("chevron_right",next.value),navLinks("last_page",last.value)])}});var searchbox=vue.defineComponent({props:{paging:{type:Object,required:true},useStore:{type:Boolean,default:false},modelValue:{required:true},placeholder:{type:String,default:""},icon:{type:String,default:"search"}},emits:["update:modelValue"],setup(props,{emit}){const icons={search:"search",arrow:"arrow_forward"};return()=>vue.h("div",{class:"sp-searchbox-wrapper"},[vue.h("input",{class:"sp-searchbox",placeholder:props.placeholder,onInput(event){if(event.target.value===""){emit("update:modelValue",event.target.value);props.paging.onSearchChanged()}},onKeyup(event){if(event.keyCode===13){emit("update:modelValue",event.target.value);props.paging.filter()}}}),vue.h("span",{class:[iconSet,"sp-searchbox-icon"]},icons[props.icon])])}});exports.Navigator=nav;exports.SearchBox=searchbox;exports.SelectRow=select;return exports}({},Vue); \ No newline at end of file diff --git a/components/dist/style.css b/components/dist/style.css index 02cda2e..92f60a6 100644 --- a/components/dist/style.css +++ b/components/dist/style.css @@ -1,7 +1,7 @@ :root { --sp-brand-color: #d44670; --sp-brand-color-light: #dd5981; - --sp-default-padding: 10px 15px; + --sp-default-padding: 6px 12px; --sp-dark: #323232; --sp-dark-hover: #2a2a2a; --sp-default-border-radius: 5px; @@ -22,19 +22,30 @@ color: #fff; }.sp-select span { float: right; - margin-left: 20px; + margin-right: -10px; + transition: .2s; +}.sp-select.active span { + rotate: 180deg; }.sp-select-options { background-color: #fff; border-radius: var(--sp-default-border-radius); box-shadow: var(--sp-default-box-shadow); - margin-top: 3px; + margin-top: -40px; list-style: none; padding: 0; text-align: left; overflow: auto; - max-height: 200px; + max-height: 50px; position: absolute; z-index: 999; + transition: .2s; + opacity: 0; + visibility: hidden; +}.sp-select-options.active { + margin-top: 3px; + opacity: 1; + visibility: visible; + max-height: 250px; }.sp-select-options.dark { background-color: var(--sp-dark); box-shadow: var(--sp-dark-box-shadow); @@ -69,15 +80,22 @@ cursor: pointer; border-radius: 50%; transition: .2s; + background-color: transparent; + border: none; /* border: var(--sp-default-border); */ +}.sp-navigation .sp-item .sp-link.disabled { + cursor: default; + color: #7d7d7d; +}.sp-navigation .sp-item .sp-link.disabled:hover { + background-color: transparent; }.sp-navigation .sp-item .sp-link.dark:hover { background-color: var(--sp-dark); color: #fff; }.sp-navigation .sp-item .sp-numlink { display: flex; - width: 23.5px; - height: 23.5px; - padding-bottom: 10px; + width: 24px; + height: 24px; + padding: 20px 21px 20px 20px; border-radius: 25px; justify-content: center; align-items: center; @@ -103,6 +121,7 @@ background-color: var(--sp-active-mark-color); }.sp-searchbox-wrapper { display: flex; + align-items: center; }.sp-searchbox { outline: none; padding: 10px 15px 10px 10px; @@ -116,6 +135,5 @@ box-shadow: 0 0 0 2px var(--sp-default-border-color); }.sp-searchbox-icon { margin-left: -30px; - margin-top: 6px; color: var(--sp-grey-color); } diff --git a/components/index.html b/components/index.html index 4ffdc0a..2274f8f 100644 --- a/components/index.html +++ b/components/index.html @@ -32,11 +32,11 @@ font-weight: 400; - font-synthesis: none; + /* font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; */ } .custom-class { diff --git a/components/src/components/helpers.js b/components/src/components/helpers.js index 2eea5b9..01feae7 100644 --- a/components/src/components/helpers.js +++ b/components/src/components/helpers.js @@ -8,9 +8,9 @@ const getPaging = (useStore, paging) => { return useStore ? toRefs(paging) : toRefs(paging.state) } -const densePadding = { padding: '6px 12px' } +const largePadding = { padding: '10px 15px' } const iconSet = 'material-icons-round' -export { setPagingState, getPaging, densePadding, iconSet } +export { setPagingState, getPaging, largePadding, iconSet } diff --git a/components/src/components/input/searchbox.css b/components/src/components/input/searchbox.css index 5278d74..3c4c847 100644 --- a/components/src/components/input/searchbox.css +++ b/components/src/components/input/searchbox.css @@ -1,5 +1,6 @@ .sp-searchbox-wrapper { display: flex; + align-items: center; } .sp-searchbox { @@ -19,6 +20,5 @@ .sp-searchbox-icon { margin-left: -30px; - margin-top: 6px; color: var(--sp-grey-color); } diff --git a/components/src/components/navigation/nav.css b/components/src/components/navigation/nav.css index ec22847..836db44 100644 --- a/components/src/components/navigation/nav.css +++ b/components/src/components/navigation/nav.css @@ -16,9 +16,20 @@ cursor: pointer; border-radius: 50%; transition: .2s; + background-color: transparent; + border: none; /* border: var(--sp-default-border); */ } +.sp-navigation .sp-item .sp-link.disabled { + cursor: default; + color: #7d7d7d; +} + +.sp-navigation .sp-item .sp-link.disabled:hover { + background-color: transparent; +} + .sp-navigation .sp-item .sp-link.dark:hover { background-color: var(--sp-dark); color: #fff; @@ -26,9 +37,9 @@ .sp-navigation .sp-item .sp-numlink { display: flex; - width: 23.5px; - height: 23.5px; - padding-bottom: 10px; + width: 24px; + height: 24px; + padding: 20px 21px 20px 20px; border-radius: 25px; justify-content: center; align-items:center; diff --git a/components/src/components/navigation/nav.js b/components/src/components/navigation/nav.js index 581c2e6..877b3ae 100644 --- a/components/src/components/navigation/nav.js +++ b/components/src/components/navigation/nav.js @@ -46,6 +46,10 @@ export default defineComponent({ // for CDN version onMounted(resetModelValue) + const disableLink = link => { + + } + const createList = (content, goTo, ...customClass) => { return h('li', { class: 'sp-item', @@ -56,7 +60,7 @@ export default defineComponent({ } } }, - h('a', { class: ['sp-link', ...customClass] }, content) + h('button', { class: ['sp-link', ...customClass] }, content) ) } @@ -64,7 +68,10 @@ export default defineComponent({ const navLinks = (icon, target) => { return createList(h('span', { class: iconSet - }, icon), target, props.dark ? 'dark' : '', props.customNavigationClass + }, icon), + target, + props.paging.isDisabled(target), + props.dark ? 'dark' : '', props.customNavigationClass ) } diff --git a/components/src/components/select/select.css b/components/src/components/select/select.css index 4a6a524..5dca171 100644 --- a/components/src/components/select/select.css +++ b/components/src/components/select/select.css @@ -13,21 +13,36 @@ .sp-select span { float: right; - margin-left: 20px; + margin-right: -10px; + transition: .2s; +} + +.sp-select.active span { + rotate: 180deg; } .sp-select-options { background-color: #fff; border-radius: var(--sp-default-border-radius); box-shadow: var(--sp-default-box-shadow); - margin-top: 3px; + margin-top: -40px; list-style: none; padding: 0; text-align: left; overflow: auto; - max-height: 200px; + max-height: 50px; position: absolute; z-index: 999; + transition: .2s; + opacity: 0; + visibility: hidden; +} + +.sp-select-options.active { + margin-top: 3px; + opacity: 1; + visibility: visible; + max-height: 250px; } .sp-select-options.dark { diff --git a/components/src/components/select/select.js b/components/src/components/select/select.js index dbd5af8..e586997 100644 --- a/components/src/components/select/select.js +++ b/components/src/components/select/select.js @@ -1,5 +1,5 @@ import { h, defineComponent, ref, onMounted } from "vue"; -import { setPagingState, densePadding } from "../helpers"; +import { setPagingState, largePadding } from "../helpers"; export default defineComponent({ props: { @@ -26,7 +26,7 @@ export default defineComponent({ selected: { default: null }, - dense: { + large: { type: Boolean, default: false }, @@ -42,9 +42,11 @@ export default defineComponent({ // Pagination instance const paging = props.paging - const showOptions = ref(false) const label = ref(props.label) const optionsWidth = ref(0) + + const listWrapperActive = ref('') + const activeIcon = ref('') onMounted(() => { // hide options if users click outside the select element @@ -52,7 +54,8 @@ export default defineComponent({ const selectEl = document.getElementById('sp-select-id') if(!selectEl.contains(event.target)) { setTimeout(() => { - showOptions.value = false + // showOptions.value = false + listWrapperActive.value = '' }, 100) } @@ -83,14 +86,23 @@ export default defineComponent({ return classes } - // attributes for Select - const selectAttrs = { - class: selectClass(), - style: props.dense ? densePadding : '', - id: 'sp-select-id', - onClick(event) { - showOptions.value = !showOptions.value - }, + // attributes for Select + const selectAttrs = () => { + return { + class: [selectClass(), activeIcon.value], + style: props.large ? largePadding : '', + id: 'sp-select-id', + onClick(event) { + // showOptions.value = !showOptions.value + if(listWrapperActive.value === 'active') { + listWrapperActive.value = '' + activeIcon.value = '' + } else { + listWrapperActive.value = 'active' + activeIcon.value = 'active' + } + }, + } } const optionClass = () => { @@ -107,7 +119,7 @@ export default defineComponent({ return { class: optionClass(), key, - style: props.dense ? densePadding : '', + style: props.large ? largePadding : '', onClick(event) { setPagingState(props.useStore, { paging, @@ -126,19 +138,23 @@ export default defineComponent({ return () => [ // Select element - h('div', selectAttrs, label.value, + h('div', selectAttrs(), label.value, h('span', { class: 'material-icons-round' }, 'expand_more'), ), // Options element - showOptions.value ? h('ul', { - class: ['sp-select-options', props.dark ? 'dark' : ''], + h('ul', { + class: [ + 'sp-select-options', + props.dark ? 'dark' : '', + listWrapperActive.value + ], style: { width: `${optionsWidth.value}px` } }, props.options.map((row, index) => { return h('li', optionsAttrs(row, index), `${row} ${props.rowLabel}`) }) - ) : '' + ) ] } }) \ No newline at end of file diff --git a/components/src/components/variables.css b/components/src/components/variables.css index 72eb840..4f2ad85 100644 --- a/components/src/components/variables.css +++ b/components/src/components/variables.css @@ -1,7 +1,7 @@ :root { --sp-brand-color: #d44670; --sp-brand-color-light: #dd5981; - --sp-default-padding: 10px 15px; + --sp-default-padding: 6px 12px; --sp-dark: #323232; --sp-dark-hover: #2a2a2a; --sp-default-border-radius: 5px; diff --git a/components/src/tests/App.vue b/components/src/tests/App.vue index df6f93e..c879ce1 100644 --- a/components/src/tests/App.vue +++ b/components/src/tests/App.vue @@ -41,7 +41,7 @@ onMounted(() => {