UNPKG

@fifteen/design-system-vue

Version:

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

2 lines (1 loc) 3.08 kB
"use strict";const x=require("./FSelect.js");;/* empty css */const o=require("vue"),y=require("../../vendor/date-fns/locale.js"),T=require("../../composables/useFieldWithValidation.js"),B=require("../../composables/useInputEventBindings.js"),_=o.defineComponent({__name:"FLocaleSelect",props:{localeCodes:{default:()=>[]},optionLabelFormat:{type:Function,default:void 0},optionsMenuColor:{default:"neutral--light-5"},optionTextColor:{default:"secondary"},selectedOptionColor:{default:"neutral--light-2"},selectedOptionTextColor:{default:"primary--dark-2"},outlineColor:{default:"neutral--light-3"},placeholder:{default:""},placeholderTextColor:{default:"neutral--dark-2"},focusBorderColor:{default:"secondary"},menuWidth:{default:300},clearable:{type:Boolean},emptyText:{default:""},size:{default:"medium"},validationTrigger:{default:"change"},preventSelection:{type:Boolean},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{default:"neutral--dark-4"},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean},hintIcon:{default:null},modelValue:{default:void 0},disabled:{type:Boolean},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean},focusColor:{default:"neutral--light-5"},borderColor:{default:"secondary"}},emits:["update:modelValue","input","change","focus","blur"],setup(u,{expose:i,emit:d}){const e=u,s=d,c={label:e.label,name:e.name,color:e.color,textColor:e.textColor,focusColor:e.focusColor,borderColor:e.borderColor,focusBorderColor:e.focusBorderColor,outlineColor:e.outlineColor,optionsMenuColor:e.optionsMenuColor,optionTextColor:e.optionTextColor,selectedOptionTextColor:e.selectedOptionTextColor,labelTextColor:e.labelTextColor,hint:e.hint,hideHint:e.hideHint,hintTextColor:e.hintTextColor,hintIcon:e.hintIcon,placeholder:e.placeholder,clearable:e.clearable,errorMessage:e.errorMessage,errorColor:e.errorColor,disabled:e.disabled,loading:e.loading,rules:e.rules,size:e.size,validationTrigger:e.validationTrigger,validateOnMount:e.validateOnMount,menuWidth:e.menuWidth},{hint:p,value:t,validate:f}=T.useFieldWithValidation(e,{validateOnMount:e?.validateOnMount}),{handleFocus:C,handleBlur:h}=B.useInputEventBindings(f,e.validationTrigger,s);i({focus:m});const a=o.ref();function m(){a.value?.focus()}const g=Object.values(y).map(r=>r.code),v=o.computed(()=>(e.localeCodes.length?e.localeCodes:g).map(l=>({label:e.optionLabelFormat?.(l)??l,value:l})));return(r,l)=>{const b=x;return o.openBlock(),o.createBlock(b,o.mergeProps({class:"FLocaleSelect",ref_key:"localeSelectRef",ref:a,modelValue:o.unref(t),"onUpdate:modelValue":l[0]||(l[0]=n=>o.isRef(t)?t.value=n:null)},c,{options:o.unref(v),hint:o.unref(p),onFocus:o.unref(C),onBlur:o.unref(h)}),{option:o.withCtx(({option:n})=>[o.createElementVNode("span",null,o.toDisplayString(n.label),1)]),_:1},16,["modelValue","options","hint","onFocus","onBlur"])}}});module.exports=_;