maz-ui 5.0.0-beta.34 → 5.0.0-beta.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{MazDropdown.C1r5LD-W.css → MazDropdown.CS3v6JOo.css} +1 -1
- package/dist/assets/MazPopover.CnEtNdIO.css +2 -0
- package/dist/chunks/{MazDatePicker.Cf_PhJXa.js → MazDatePicker.DLJcSJOM.js} +1 -1
- package/dist/chunks/MazDropdown.TQ8Ob7Xl.js +1 -0
- package/dist/chunks/{MazInputPhoneNumber.C8hAPK8C.js → MazInputPhoneNumber.CbCSOLh-.js} +1 -1
- package/dist/chunks/{MazMarkdownEditor.BrPtECqM.js → MazMarkdownEditor.zmln9XoX.js} +1 -1
- package/dist/chunks/{MazPopover.mlqNR5Y3.js → MazPopover.pWRD93tY.js} +1 -1
- package/dist/chunks/{MazSelect.vgpZNoBa.js → MazSelect.BQlQNcxq.js} +1 -1
- package/dist/chunks/{MazSelectCountry.BtgWOrIV.js → MazSelectCountry.DsxjU_D1.js} +1 -1
- package/dist/components/MazDatePicker.js +1 -1
- package/dist/components/MazDropdown.js +1 -1
- package/dist/components/MazInputPhoneNumber.js +1 -1
- package/dist/components/MazMarkdownEditor.js +1 -1
- package/dist/components/MazPopover.js +1 -1
- package/dist/components/MazSelect.js +1 -1
- package/dist/components/MazSelectCountry.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/directives/vTooltip.js +1 -1
- package/package.json +5 -5
- package/dist/assets/MazPopover.v29OvLUy.css +0 -2
- package/dist/chunks/MazDropdown.CyHUTEuD.js +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-c89fad12],[data-v-c89fad12]:before,[data-v-c89fad12]:after{--tw-duration:initial;--tw-ease:initial}[data-v-c89fad12]::backdrop{--tw-duration:initial;--tw-ease:initial}}}.m-dropdown__icon[data-v-c89fad12]{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--ease-out));transition-duration:var(--tw-duration,var(--duration-normal));--tw-duration:.2s;--tw-ease:var(--maz-easing-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:.2s;transition-timing-function:var(--maz-easing-in-out,cubic-bezier(.4, 0, .2, 1))}.m-dropdown__icon.--open[data-v-c89fad12]{rotate:180deg}.m-dropdown__menu .menuitem[data-v-c89fad12]{text-align:start;white-space:nowrap}.m-dropdown__menu .menuitem[data-v-c89fad12]:not(.menuitem--hoverable){cursor:default}.m-dropdown__menu .menuitem[data-v-c89fad12]:not(.menuitem--hoverable):hover{background-color:#0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-9d68e50d],[data-v-9d68e50d]:before,[data-v-9d68e50d]:after{--tw-border-style:solid}[data-v-9d68e50d]::backdrop{--tw-border-style:solid}}}.m-popover-panel[data-v-9d68e50d]{will-change:transform, opacity;contain:layout style paint;backface-visibility:hidden}.m-popover-panel.--surface[data-v-9d68e50d]{background-color:var(--maz-container-bg,var(--maz-surface))}.m-popover-panel.--surface[data-v-9d68e50d]:where(.dark,.dark *){border-style:var(--tw-border-style);border-width:var(--maz-border-width);border-color:var(--maz-color-divider,var(--maz-divider))}.m-popover-panel.--primary[data-v-9d68e50d]{border-color:var(--maz-color-primary-600,oklch(from var(--maz-primary) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-primary,var(--maz-primary));color:var(--maz-color-primary-foreground,var(--maz-primary-foreground))}.m-popover-panel.--secondary[data-v-9d68e50d]{border-color:var(--maz-color-secondary-600,oklch(from var(--maz-secondary) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-secondary,var(--maz-secondary));color:var(--maz-color-secondary-foreground,var(--maz-secondary-foreground))}.m-popover-panel.--success[data-v-9d68e50d]{border-color:var(--maz-color-success-600,oklch(from var(--maz-success) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-success,var(--maz-success));color:var(--maz-color-success-foreground,var(--maz-success-foreground))}.m-popover-panel.--warning[data-v-9d68e50d]{border-color:var(--maz-color-warning-600,oklch(from var(--maz-warning) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-warning,var(--maz-warning));color:var(--maz-color-warning-foreground,var(--maz-warning-foreground))}.m-popover-panel.--destructive[data-v-9d68e50d]{border-color:var(--maz-color-destructive-600,oklch(from var(--maz-destructive) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-destructive,var(--maz-destructive));color:var(--maz-color-destructive-foreground,var(--maz-destructive-foreground))}.m-popover-panel.--info[data-v-9d68e50d]{border-color:var(--maz-color-info-600,oklch(from var(--maz-info) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-info,var(--maz-info));color:var(--maz-color-info-foreground,var(--maz-info-foreground))}.m-popover-panel.--accent[data-v-9d68e50d]{border-color:var(--maz-color-accent-600,oklch(from var(--maz-accent) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-accent,var(--maz-accent));color:var(--maz-color-accent-foreground,var(--maz-accent-foreground))}.m-popover-panel.--contrast[data-v-9d68e50d]{border-color:var(--maz-color-contrast-600,oklch(from var(--maz-contrast) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-contrast,var(--maz-contrast));color:var(--maz-color-contrast-foreground,var(--maz-contrast-foreground))}.maz-scale-fade-enter-active[data-v-9d68e50d],.maz-scale-pop-enter-active[data-v-9d68e50d]{transition:opacity .15s ease-out,transform .15s ease-out}.maz-scale-fade-leave-active[data-v-9d68e50d],.maz-scale-pop-leave-active[data-v-9d68e50d],.maz-scale-pop-leave-active[data-v-9d68e50d]{transition:opacity .15s ease-in,transform .15s ease-in}.m-popover-panel.--position-bottom.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-bottom.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-bottom-start.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-bottom-start.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-bottom-end.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-bottom-end.maz-scale-fade-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:top;transform:scaleY(.5)}.m-popover-panel.--position-bottom.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-bottom.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-bottom-start.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-bottom-start.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-bottom-end.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-bottom-end.maz-scale-pop-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:top;transform:scale(.2)translateY(-4px)}.m-popover-panel.--position-top.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-top.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-top-start.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-top-start.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-top-end.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-top-end.maz-scale-fade-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:bottom;transform:scaleY(.5)}.m-popover-panel.--position-top.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-top.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-top-start.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-top-start.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-top-end.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-top-end.maz-scale-pop-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:bottom;transform:scale(.2)translateY(4px)}.m-popover-panel.--position-right.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-right.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-right-start.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-right-start.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-right-end.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-right-end.maz-scale-fade-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:0;transform:scaleX(.5)}.m-popover-panel.--position-right.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-right.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-right-start.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-right-start.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-right-end.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-right-end.maz-scale-pop-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:0;transform:scale(.2)translate(-4px)}.m-popover-panel.--position-left.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-left.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-left-start.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-left-start.maz-scale-fade-leave-to[data-v-9d68e50d],.m-popover-panel.--position-left-end.maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel.--position-left-end.maz-scale-fade-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:100%;transform:scaleX(.5)}.m-popover-panel.--position-left.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-left.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-left-start.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-left-start.maz-scale-pop-leave-to[data-v-9d68e50d],.m-popover-panel.--position-left-end.maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel.--position-left-end.maz-scale-pop-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:100%;transform:scale(.2)translate(4px)}.m-popover-panel:not([class*=--position-]).maz-scale-pop-enter-from[data-v-9d68e50d],.m-popover-panel:not([class*=--position-]).maz-scale-pop-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:50%;transform:scale(.2)}.m-popover-panel:not([class*=--position-]).maz-scale-fade-enter-from[data-v-9d68e50d],.m-popover-panel:not([class*=--position-]).maz-scale-fade-leave-to[data-v-9d68e50d]{opacity:0;transform-origin:50%;transform:scale(.5)translateY(-4px)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as MazPopover_default}from"./MazPopover.mlqNR5Y3.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{t as MazIcon_default}from"./MazIcon.CblJ-8Iu.js";import{t as MazPickerContainer_default}from"./MazPickerContainer.D4wrM2uK.js";import{a as getDefaultsShortcuts,c as getISODate,d as isRangeValue,g as isValueDisabledWeekly,h as isValueDisabledDate,l as getRangeFormattedDate,s as getFormattedDate,t as checkValueWithMinMaxDates,u as getRangeISODate}from"./utils.CjLBQJki.js";import{computed,createBlock,createCommentVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,onBeforeMount,openBlock,ref,renderSlot,unref,useModel,useTemplateRef,vShow,watch,withCtx,withDirectives}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazChevronDown}from"@maz-ui/icons/raw/MazChevronDown";import{MazCalendar}from"@maz-ui/icons/lazy/MazCalendar";import{MazClock}from"@maz-ui/icons/lazy/MazClock";import{formatDate}from"@maz-ui/utils/helpers/formatDate";import dayjs from"dayjs/esm";import customParseFormat from"dayjs/esm/plugin/customParseFormat";import isBetween from"dayjs/esm/plugin/isBetween";import '../assets/MazDatePicker.Dze5lP2Z.css';var MazDatePicker_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazDatePicker`,props:mergeModels({id:{},style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},inputProps:{},modelValue:{},format:{default:`YYYY-MM-DD`},open:{type:Boolean},label:{},placeholder:{},inputDateFormat:{default:()=>({dateStyle:`medium`,timeStyle:`short`})},inputDateTransformer:{type:Function},locale:{},hideHeader:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},firstDayOfWeek:{default:0},autoClose:{type:Boolean,default:!1},customElementSelector:{},double:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},color:{default:`primary`},pickerPosition:{default:`auto`},pickerPreferPosition:{default:`bottom-start`},pickerFallbackPosition:{default:`top-start`},time:{type:Boolean,default:!1},onlyTime:{type:Boolean,default:!1},minuteInterval:{default:5},useBrowserLocale:{type:Boolean},fetchLocal:{type:Boolean},shortcuts:{type:[Array,Boolean],default:!0},shortcut:{},minDate:{},maxDate:{},minMaxAuto:{type:Boolean,default:!0},disabledWeekly:{default:()=>[]},disabledDates:{default:()=>[]},disabledHours:{default:()=>[]},block:{type:Boolean},range:{type:Boolean,default:!1},transition:{default:`scale-fade`}},{locale:{default:void 0},localeModifiers:{},open:{default:!1},openModifiers:{}}),emits:mergeModels([`update:model-value`,`close`],[`update:locale`,`update:open`]),setup(__props,{emit:__emit}){let emits=__emit;let{t,locale}=useTranslations();dayjs.extend(customParseFormat),dayjs.extend(isBetween);let MazInput=defineAsyncComponent(()=>import(`../components/MazInput.js`));let instanceId=useInstanceUniqId({componentName:`MazDatePicker`,providedId:__props.id});function isRangeModelValue(value){return typeof value==`object`&&!!value}let currentValue=computed({get:()=>isRangeModelValue(__props.modelValue)||__props.range?{start:isRangeModelValue(__props.modelValue)&&__props.modelValue.start?dayjs(__props.modelValue.start,__props.format).format():void 0,end:isRangeModelValue(__props.modelValue)&&__props.modelValue.end?dayjs(__props.modelValue.end,__props.format).format():void 0}:typeof __props.modelValue==`string`&&__props.modelValue?dayjs(__props.modelValue,__props.format).format():void 0,set:value=>{if(__props.disabled)return;emitValue(__props.range&&!isRangeValue(value)?{start:value,end:void 0}:value);let isRangeMode=isRangeModelValue(value)||__props.range;__props.autoClose&&(!isRangeMode||isRangeMode&&isRangeModelValue(value)&&value.end)&&closeCalendar()}});let hasTime=computed(()=>__props.time||__props.onlyTime);let hasDouble=computed(()=>__props.double&&!__props.onlyTime);let hasDate=computed(()=>!__props.onlyTime);let isRangeMode=computed(()=>isRangeModelValue(currentValue.value)||__props.range);let internalShortcuts=computed(()=>!isRangeMode.value||__props.shortcuts===!1?!1:__props.shortcuts&&Array.isArray(__props.shortcuts)?__props.shortcuts:getDefaultsShortcuts({lastSevenDays:t(`datePicker.shortcuts.lastSevenDays`),lastThirtyDays:t(`datePicker.shortcuts.lastThirtyDays`),thisWeek:t(`datePicker.shortcuts.thisWeek`),lastWeek:t(`datePicker.shortcuts.lastWeek`),thisMonth:t(`datePicker.shortcuts.thisMonth`),thisYear:t(`datePicker.shortcuts.thisYear`),lastYear:t(`datePicker.shortcuts.lastYear`)}));let localeModel=useModel(__props,`locale`);localeModel.value=__props.locale??locale.value;let containerUniqueId=computed(()=>`MazDatePickerContainer-${instanceId.value}`);let popoverRef=useTemplateRef(`popover`);onBeforeMount(()=>{isRangeMode.value&&hasTime.value&&console.error(`[maz-ui](MazDatePicker) You can't use time picker with range picker`),hasTime.value&&!(__props.format.includes(`h`)||__props.format.includes(`H`))&&console.error(`[maz-ui](MazDatePicker) When you use the time picker, you must provided a format with time - Ex: "YYYY-MM-DD HH:mm"`),__props.format.includes(`h`)&&!(__props.format.includes(`a`)||__props.format.includes(`A`))&&console.error(`[maz-ui](MazDatePicker) if you use the 12 format "h" or "hh", you must add "a" or "A" at the end of the format - Ex: "YYYY-MM-DD hh:mm a"`)});function getCalendarDate(value){let baseDate=(isRangeModelValue(value)?value.start:value)??dayjs().format();return __props.minDate&&dayjs(baseDate).isBefore(__props.minDate)?__props.minDate:__props.maxDate&&dayjs(baseDate).isAfter(__props.maxDate)?__props.minDate??__props.maxDate:baseDate}let calendarDate=ref(getCalendarDate(currentValue.value));let isHour12=computed(()=>__props.format.includes(`a`)||__props.format.includes(`A`)||__props.format.includes(`h`));let formatterOptions=computed(()=>({...__props.inputDateFormat,timeStyle:hasTime.value?__props.inputDateFormat.timeStyle??`short`:void 0,hour12:hasTime.value?__props.inputDateFormat.hour12??isHour12.value:void 0}));let inputValue=computed(()=>{if(!currentValue.value)return;let formattedDate;return __props.onlyTime&&typeof currentValue.value==`string`&¤tValue.value?formattedDate=currentValue.value?formatDate(dayjs(currentValue.value).format(),localeModel.value,{timeStyle:formatterOptions.value.timeStyle,hour12:formatterOptions.value.hour12}):void 0:isRangeMode.value&&isRangeValue(currentValue.value)?formattedDate=getRangeFormattedDate({value:currentValue.value,locale:localeModel.value,options:formatterOptions.value}):typeof currentValue.value==`string`&¤tValue.value&&(formattedDate=getFormattedDate({value:dayjs(currentValue.value).format(),locale:localeModel.value,options:formatterOptions.value})),__props.inputDateTransformer&&formattedDate?__props.inputDateTransformer({formattedDate,value:__props.modelValue,locale:localeModel.value}):formattedDate});let hasPickerOpen=useModel(__props,`open`);function closeCalendar(){popoverRef.value?.close(),emits(`close`)}function checkMinMaxValues(value){if(!(!__props.minDate&&!__props.maxDate)){if(!isRangeMode.value&&(typeof value==`string`&&value||!value)){let{newValue,newCurrentDate}=checkValueWithMinMaxDates({value,minDate:__props.minDate,maxDate:__props.maxDate,format:__props.format,minMaxAuto:__props.minMaxAuto});newValue&&emitValue(newValue),newCurrentDate&&setCalendarDate(newCurrentDate)}else if(isRangeMode.value&&isRangeValue(value)){let newStartValue=value.start;let newEndValue=value.end;if(value.start){let{newValue,newCurrentDate}=checkValueWithMinMaxDates({value:value.start,minDate:__props.minDate,maxDate:__props.maxDate,format:__props.format,minMaxAuto:__props.minMaxAuto});newValue&&(newStartValue=newValue),newCurrentDate&&setCalendarDate(newCurrentDate)}if(value.end){let{newValue}=checkValueWithMinMaxDates({value:value.end,minDate:__props.minDate,maxDate:__props.maxDate,format:__props.format,minMaxAuto:__props.minMaxAuto});newValue&&(newEndValue=newValue)}emitValue({start:newStartValue,end:newEndValue})}}}function setCalendarDate(value){value&&!dayjs(calendarDate.value).isSame(value,`month`)&&(calendarDate.value=value)}function emitValue(value){if(isRangeMode.value&&(isRangeModelValue(value)||value===void 0)){let newValue=getRangeISODate(value,__props.format)??{start:void 0,end:void 0};emits(`update:model-value`,newValue),newValue.start&&setCalendarDate(newValue.start)}else (typeof value==`string`&&value||value===void 0)&&emits(`update:model-value`,getISODate(value,__props.format))}return watch(()=>[currentValue.value,__props.minDate,__props.maxDate],(values,oldValues)=>{let value=values[0];let oldValue=oldValues?.[0];isRangeModelValue(value)&&(value.start||value.end)?(!oldValue||isRangeModelValue(oldValue)&&(oldValue.start!==value.start||oldValue.end!==value.end))&&(emitValue(value),checkMinMaxValues(value)):typeof value==`string`&&value&&value!==oldValue&&(emitValue(value),checkMinMaxValues(value))},{immediate:!0}),watch(()=>[currentValue.value,__props.disabledWeekly,__props.disabledDates],values=>{let value=values[0];let disabledWeekly=values[1];let disabledDates=values[2];isRangeModelValue(value)&&(value.start||value.end)?((value.start&&isValueDisabledWeekly({value:value.start,disabledWeekly})||value.start&&isValueDisabledDate({value:value.start,disabledDates})||value.end&&isValueDisabledWeekly({value:value.end,disabledWeekly})||value.end&&isValueDisabledDate({value:value.end,disabledDates}))&&(currentValue.value={start:void 0,end:void 0}),(value.end&&isValueDisabledWeekly({value:value.end,disabledWeekly})||value.end&&isValueDisabledDate({value:value.end,disabledDates}))&&(currentValue.value={start:value.start,end:void 0})):typeof value==`string`&&value&&(isValueDisabledWeekly({value,disabledWeekly})||isValueDisabledDate({value,disabledDates}))&&(currentValue.value=void 0)},{immediate:!0}),(_ctx,_cache)=>__props.inline?(openBlock(),createBlock(MazPickerContainer_default,{key:1,id:containerUniqueId.value,modelValue:currentValue.value,"onUpdate:modelValue":_cache[3]||=$event=>currentValue.value=$event,"calendar-date":calendarDate.value,"onUpdate:calendarDate":_cache[4]||=$event=>calendarDate.value=$event,color:__props.color,locale:localeModel.value,"has-date":hasDate.value,double:hasDouble.value,"has-time":hasTime.value,"formatter-options":formatterOptions.value,"hide-header":__props.hideHeader,"min-date":__props.minDate,format:__props.format,"is-hour12":isHour12.value,"max-date":__props.maxDate,"disabled-weekly":__props.disabledWeekly,inline:__props.inline,"first-day-of-week":__props.firstDayOfWeek,shortcuts:internalShortcuts.value,shortcut:__props.shortcut,disabled:__props.disabled,"disabled-hours":__props.disabledHours,"disabled-dates":__props.disabledDates,"minute-interval":__props.minuteInterval,range:isRangeMode.value,onClose:closeCalendar},null,8,[`id`,`modelValue`,`calendar-date`,`color`,`locale`,`has-date`,`double`,`has-time`,`formatter-options`,`hide-header`,`min-date`,`format`,`is-hour12`,`max-date`,`disabled-weekly`,`inline`,`first-day-of-week`,`shortcuts`,`shortcut`,`disabled`,`disabled-hours`,`disabled-dates`,`minute-interval`,`range`])):(openBlock(),createBlock(MazPopover_default,{key:0,id:`${unref(instanceId)}-popover`,ref:`popover`,modelValue:hasPickerOpen.value,"onUpdate:modelValue":_cache[2]||=$event=>hasPickerOpen.value=$event,class:normalizeClass([`m-date-picker m-reset-css maz:relative maz:inline-block`,[`m-date-picker--${__props.color}`,{"--is-open":hasPickerOpen.value,"--is-disabled":__props.disabled},__props.class]]),style:normalizeStyle(__props.style),offset:0,trigger:`click`,transition:__props.transition,disabled:__props.disabled,block:__props.block,position:__props.pickerPosition,"prefer-position":__props.pickerPreferPosition,"fallback-position":__props.pickerFallbackPosition,"position-reference":`#${unref(instanceId)}-popover .m-input-wrapper`},{trigger:withCtx(({isOpen,close,open:openPicker,toggle:togglePicker})=>[renderSlot(_ctx.$slots,`trigger`,{isOpen,close,open:openPicker,toggle:togglePicker},()=>[withDirectives(createVNode(unref(MazInput),mergeProps({id:unref(instanceId),"model-value":inputValue.value,readonly:``},{...__props.inputProps,..._ctx.$attrs},{block:``,autocomplete:`off`,class:`m-date-picker__input maz:size-full`,label:__props.label,disabled:__props.disabled,placeholder:__props.placeholder,color:__props.color}),{"start-icon":withCtx(()=>[hasDate.value?(openBlock(),createBlock(unref(MazCalendar),{key:0,class:`maz:text-xl`})):hasTime.value?(openBlock(),createBlock(unref(MazClock),{key:1,class:`maz:text-xl`})):createCommentVNode(``,!0)]),"end-icon":withCtx(()=>[createVNode(MazIcon_default,{icon:unref(MazChevronDown),class:`m-date-picker__button__chevron maz:text-lg`},null,8,[`icon`])]),_:1},16,[`id`,`model-value`,`label`,`disabled`,`placeholder`,`color`]),[[vShow,!__props.customElementSelector&&!__props.inline]])],!0)]),default:withCtx(()=>[createVNode(MazPickerContainer_default,{id:containerUniqueId.value,modelValue:currentValue.value,"onUpdate:modelValue":_cache[0]||=$event=>currentValue.value=$event,"calendar-date":calendarDate.value,"onUpdate:calendarDate":_cache[1]||=$event=>calendarDate.value=$event,color:__props.color,locale:localeModel.value,"has-date":hasDate.value,double:hasDouble.value,"has-time":hasTime.value,"formatter-options":formatterOptions.value,"hide-header":__props.hideHeader,"min-date":__props.minDate,format:__props.format,"is-hour12":isHour12.value,"max-date":__props.maxDate,"disabled-weekly":__props.disabledWeekly,inline:__props.inline,"first-day-of-week":__props.firstDayOfWeek,shortcuts:internalShortcuts.value,shortcut:__props.shortcut,disabled:__props.disabled,"disabled-hours":__props.disabledHours,"disabled-dates":__props.disabledDates,"minute-interval":__props.minuteInterval,range:isRangeMode.value,onClose:closeCalendar},null,8,[`id`,`modelValue`,`calendar-date`,`color`,`locale`,`has-date`,`double`,`has-time`,`formatter-options`,`hide-header`,`min-date`,`format`,`is-hour12`,`max-date`,`disabled-weekly`,`inline`,`first-day-of-week`,`shortcuts`,`shortcut`,`disabled`,`disabled-hours`,`disabled-dates`,`minute-interval`,`range`])]),_:3},8,[`id`,`modelValue`,`style`,`class`,`transition`,`disabled`,`block`,`position`,`prefer-position`,`fallback-position`,`position-reference`]))}}),[[`__scopeId`,`data-v-a3f850f7`]]);export{MazDatePicker_default as t};
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as MazPopover_default}from"./MazPopover.pWRD93tY.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{t as MazIcon_default}from"./MazIcon.CblJ-8Iu.js";import{t as MazPickerContainer_default}from"./MazPickerContainer.D4wrM2uK.js";import{a as getDefaultsShortcuts,c as getISODate,d as isRangeValue,g as isValueDisabledWeekly,h as isValueDisabledDate,l as getRangeFormattedDate,s as getFormattedDate,t as checkValueWithMinMaxDates,u as getRangeISODate}from"./utils.CjLBQJki.js";import{computed,createBlock,createCommentVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,onBeforeMount,openBlock,ref,renderSlot,unref,useModel,useTemplateRef,vShow,watch,withCtx,withDirectives}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazChevronDown}from"@maz-ui/icons/raw/MazChevronDown";import{MazCalendar}from"@maz-ui/icons/lazy/MazCalendar";import{MazClock}from"@maz-ui/icons/lazy/MazClock";import{formatDate}from"@maz-ui/utils/helpers/formatDate";import dayjs from"dayjs/esm";import customParseFormat from"dayjs/esm/plugin/customParseFormat";import isBetween from"dayjs/esm/plugin/isBetween";import '../assets/MazDatePicker.Dze5lP2Z.css';var MazDatePicker_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazDatePicker`,props:mergeModels({id:{},style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},inputProps:{},modelValue:{},format:{default:`YYYY-MM-DD`},open:{type:Boolean},label:{},placeholder:{},inputDateFormat:{default:()=>({dateStyle:`medium`,timeStyle:`short`})},inputDateTransformer:{type:Function},locale:{},hideHeader:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},firstDayOfWeek:{default:0},autoClose:{type:Boolean,default:!1},customElementSelector:{},double:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},color:{default:`primary`},pickerPosition:{default:`auto`},pickerPreferPosition:{default:`bottom-start`},pickerFallbackPosition:{default:`top-start`},time:{type:Boolean,default:!1},onlyTime:{type:Boolean,default:!1},minuteInterval:{default:5},useBrowserLocale:{type:Boolean},fetchLocal:{type:Boolean},shortcuts:{type:[Array,Boolean],default:!0},shortcut:{},minDate:{},maxDate:{},minMaxAuto:{type:Boolean,default:!0},disabledWeekly:{default:()=>[]},disabledDates:{default:()=>[]},disabledHours:{default:()=>[]},block:{type:Boolean},range:{type:Boolean,default:!1},transition:{default:`scale-fade`}},{locale:{default:void 0},localeModifiers:{},open:{default:!1},openModifiers:{}}),emits:mergeModels([`update:model-value`,`close`],[`update:locale`,`update:open`]),setup(__props,{emit:__emit}){let emits=__emit;let{t,locale}=useTranslations();dayjs.extend(customParseFormat),dayjs.extend(isBetween);let MazInput=defineAsyncComponent(()=>import(`../components/MazInput.js`));let instanceId=useInstanceUniqId({componentName:`MazDatePicker`,providedId:__props.id});function isRangeModelValue(value){return typeof value==`object`&&!!value}let currentValue=computed({get:()=>isRangeModelValue(__props.modelValue)||__props.range?{start:isRangeModelValue(__props.modelValue)&&__props.modelValue.start?dayjs(__props.modelValue.start,__props.format).format():void 0,end:isRangeModelValue(__props.modelValue)&&__props.modelValue.end?dayjs(__props.modelValue.end,__props.format).format():void 0}:typeof __props.modelValue==`string`&&__props.modelValue?dayjs(__props.modelValue,__props.format).format():void 0,set:value=>{if(__props.disabled)return;emitValue(__props.range&&!isRangeValue(value)?{start:value,end:void 0}:value);let isRangeMode=isRangeModelValue(value)||__props.range;__props.autoClose&&(!isRangeMode||isRangeMode&&isRangeModelValue(value)&&value.end)&&closeCalendar()}});let hasTime=computed(()=>__props.time||__props.onlyTime);let hasDouble=computed(()=>__props.double&&!__props.onlyTime);let hasDate=computed(()=>!__props.onlyTime);let isRangeMode=computed(()=>isRangeModelValue(currentValue.value)||__props.range);let internalShortcuts=computed(()=>!isRangeMode.value||__props.shortcuts===!1?!1:__props.shortcuts&&Array.isArray(__props.shortcuts)?__props.shortcuts:getDefaultsShortcuts({lastSevenDays:t(`datePicker.shortcuts.lastSevenDays`),lastThirtyDays:t(`datePicker.shortcuts.lastThirtyDays`),thisWeek:t(`datePicker.shortcuts.thisWeek`),lastWeek:t(`datePicker.shortcuts.lastWeek`),thisMonth:t(`datePicker.shortcuts.thisMonth`),thisYear:t(`datePicker.shortcuts.thisYear`),lastYear:t(`datePicker.shortcuts.lastYear`)}));let localeModel=useModel(__props,`locale`);localeModel.value=__props.locale??locale.value;let containerUniqueId=computed(()=>`MazDatePickerContainer-${instanceId.value}`);let popoverRef=useTemplateRef(`popover`);onBeforeMount(()=>{isRangeMode.value&&hasTime.value&&console.error(`[maz-ui](MazDatePicker) You can't use time picker with range picker`),hasTime.value&&!(__props.format.includes(`h`)||__props.format.includes(`H`))&&console.error(`[maz-ui](MazDatePicker) When you use the time picker, you must provided a format with time - Ex: "YYYY-MM-DD HH:mm"`),__props.format.includes(`h`)&&!(__props.format.includes(`a`)||__props.format.includes(`A`))&&console.error(`[maz-ui](MazDatePicker) if you use the 12 format "h" or "hh", you must add "a" or "A" at the end of the format - Ex: "YYYY-MM-DD hh:mm a"`)});function getCalendarDate(value){let baseDate=(isRangeModelValue(value)?value.start:value)??dayjs().format();return __props.minDate&&dayjs(baseDate).isBefore(__props.minDate)?__props.minDate:__props.maxDate&&dayjs(baseDate).isAfter(__props.maxDate)?__props.minDate??__props.maxDate:baseDate}let calendarDate=ref(getCalendarDate(currentValue.value));let isHour12=computed(()=>__props.format.includes(`a`)||__props.format.includes(`A`)||__props.format.includes(`h`));let formatterOptions=computed(()=>({...__props.inputDateFormat,timeStyle:hasTime.value?__props.inputDateFormat.timeStyle??`short`:void 0,hour12:hasTime.value?__props.inputDateFormat.hour12??isHour12.value:void 0}));let inputValue=computed(()=>{if(!currentValue.value)return;let formattedDate;return __props.onlyTime&&typeof currentValue.value==`string`&¤tValue.value?formattedDate=currentValue.value?formatDate(dayjs(currentValue.value).format(),localeModel.value,{timeStyle:formatterOptions.value.timeStyle,hour12:formatterOptions.value.hour12}):void 0:isRangeMode.value&&isRangeValue(currentValue.value)?formattedDate=getRangeFormattedDate({value:currentValue.value,locale:localeModel.value,options:formatterOptions.value}):typeof currentValue.value==`string`&¤tValue.value&&(formattedDate=getFormattedDate({value:dayjs(currentValue.value).format(),locale:localeModel.value,options:formatterOptions.value})),__props.inputDateTransformer&&formattedDate?__props.inputDateTransformer({formattedDate,value:__props.modelValue,locale:localeModel.value}):formattedDate});let hasPickerOpen=useModel(__props,`open`);function closeCalendar(){popoverRef.value?.close(),emits(`close`)}function checkMinMaxValues(value){if(!(!__props.minDate&&!__props.maxDate)){if(!isRangeMode.value&&(typeof value==`string`&&value||!value)){let{newValue,newCurrentDate}=checkValueWithMinMaxDates({value,minDate:__props.minDate,maxDate:__props.maxDate,format:__props.format,minMaxAuto:__props.minMaxAuto});newValue&&emitValue(newValue),newCurrentDate&&setCalendarDate(newCurrentDate)}else if(isRangeMode.value&&isRangeValue(value)){let newStartValue=value.start;let newEndValue=value.end;if(value.start){let{newValue,newCurrentDate}=checkValueWithMinMaxDates({value:value.start,minDate:__props.minDate,maxDate:__props.maxDate,format:__props.format,minMaxAuto:__props.minMaxAuto});newValue&&(newStartValue=newValue),newCurrentDate&&setCalendarDate(newCurrentDate)}if(value.end){let{newValue}=checkValueWithMinMaxDates({value:value.end,minDate:__props.minDate,maxDate:__props.maxDate,format:__props.format,minMaxAuto:__props.minMaxAuto});newValue&&(newEndValue=newValue)}emitValue({start:newStartValue,end:newEndValue})}}}function setCalendarDate(value){value&&!dayjs(calendarDate.value).isSame(value,`month`)&&(calendarDate.value=value)}function emitValue(value){if(isRangeMode.value&&(isRangeModelValue(value)||value===void 0)){let newValue=getRangeISODate(value,__props.format)??{start:void 0,end:void 0};emits(`update:model-value`,newValue),newValue.start&&setCalendarDate(newValue.start)}else (typeof value==`string`&&value||value===void 0)&&emits(`update:model-value`,getISODate(value,__props.format))}return watch(()=>[currentValue.value,__props.minDate,__props.maxDate],(values,oldValues)=>{let value=values[0];let oldValue=oldValues?.[0];isRangeModelValue(value)&&(value.start||value.end)?(!oldValue||isRangeModelValue(oldValue)&&(oldValue.start!==value.start||oldValue.end!==value.end))&&(emitValue(value),checkMinMaxValues(value)):typeof value==`string`&&value&&value!==oldValue&&(emitValue(value),checkMinMaxValues(value))},{immediate:!0}),watch(()=>[currentValue.value,__props.disabledWeekly,__props.disabledDates],values=>{let value=values[0];let disabledWeekly=values[1];let disabledDates=values[2];isRangeModelValue(value)&&(value.start||value.end)?((value.start&&isValueDisabledWeekly({value:value.start,disabledWeekly})||value.start&&isValueDisabledDate({value:value.start,disabledDates})||value.end&&isValueDisabledWeekly({value:value.end,disabledWeekly})||value.end&&isValueDisabledDate({value:value.end,disabledDates}))&&(currentValue.value={start:void 0,end:void 0}),(value.end&&isValueDisabledWeekly({value:value.end,disabledWeekly})||value.end&&isValueDisabledDate({value:value.end,disabledDates}))&&(currentValue.value={start:value.start,end:void 0})):typeof value==`string`&&value&&(isValueDisabledWeekly({value,disabledWeekly})||isValueDisabledDate({value,disabledDates}))&&(currentValue.value=void 0)},{immediate:!0}),(_ctx,_cache)=>__props.inline?(openBlock(),createBlock(MazPickerContainer_default,{key:1,id:containerUniqueId.value,modelValue:currentValue.value,"onUpdate:modelValue":_cache[3]||=$event=>currentValue.value=$event,"calendar-date":calendarDate.value,"onUpdate:calendarDate":_cache[4]||=$event=>calendarDate.value=$event,color:__props.color,locale:localeModel.value,"has-date":hasDate.value,double:hasDouble.value,"has-time":hasTime.value,"formatter-options":formatterOptions.value,"hide-header":__props.hideHeader,"min-date":__props.minDate,format:__props.format,"is-hour12":isHour12.value,"max-date":__props.maxDate,"disabled-weekly":__props.disabledWeekly,inline:__props.inline,"first-day-of-week":__props.firstDayOfWeek,shortcuts:internalShortcuts.value,shortcut:__props.shortcut,disabled:__props.disabled,"disabled-hours":__props.disabledHours,"disabled-dates":__props.disabledDates,"minute-interval":__props.minuteInterval,range:isRangeMode.value,onClose:closeCalendar},null,8,[`id`,`modelValue`,`calendar-date`,`color`,`locale`,`has-date`,`double`,`has-time`,`formatter-options`,`hide-header`,`min-date`,`format`,`is-hour12`,`max-date`,`disabled-weekly`,`inline`,`first-day-of-week`,`shortcuts`,`shortcut`,`disabled`,`disabled-hours`,`disabled-dates`,`minute-interval`,`range`])):(openBlock(),createBlock(MazPopover_default,{key:0,id:`${unref(instanceId)}-popover`,ref:`popover`,modelValue:hasPickerOpen.value,"onUpdate:modelValue":_cache[2]||=$event=>hasPickerOpen.value=$event,class:normalizeClass([`m-date-picker m-reset-css maz:relative maz:inline-block`,[`m-date-picker--${__props.color}`,{"--is-open":hasPickerOpen.value,"--is-disabled":__props.disabled},__props.class]]),style:normalizeStyle(__props.style),offset:0,trigger:`click`,transition:__props.transition,disabled:__props.disabled,block:__props.block,position:__props.pickerPosition,"prefer-position":__props.pickerPreferPosition,"fallback-position":__props.pickerFallbackPosition,"position-reference":`#${unref(instanceId)}-popover .m-input-wrapper`},{trigger:withCtx(({isOpen,close,open:openPicker,toggle:togglePicker})=>[renderSlot(_ctx.$slots,`trigger`,{isOpen,close,open:openPicker,toggle:togglePicker},()=>[withDirectives(createVNode(unref(MazInput),mergeProps({id:unref(instanceId),"model-value":inputValue.value,readonly:``},{...__props.inputProps,..._ctx.$attrs},{block:``,autocomplete:`off`,class:`m-date-picker__input maz:size-full`,label:__props.label,disabled:__props.disabled,placeholder:__props.placeholder,color:__props.color}),{"start-icon":withCtx(()=>[hasDate.value?(openBlock(),createBlock(unref(MazCalendar),{key:0,class:`maz:text-xl`})):hasTime.value?(openBlock(),createBlock(unref(MazClock),{key:1,class:`maz:text-xl`})):createCommentVNode(``,!0)]),"end-icon":withCtx(()=>[createVNode(MazIcon_default,{icon:unref(MazChevronDown),class:`m-date-picker__button__chevron maz:text-lg`},null,8,[`icon`])]),_:1},16,[`id`,`model-value`,`label`,`disabled`,`placeholder`,`color`]),[[vShow,!__props.customElementSelector&&!__props.inline]])],!0)]),default:withCtx(()=>[createVNode(MazPickerContainer_default,{id:containerUniqueId.value,modelValue:currentValue.value,"onUpdate:modelValue":_cache[0]||=$event=>currentValue.value=$event,"calendar-date":calendarDate.value,"onUpdate:calendarDate":_cache[1]||=$event=>calendarDate.value=$event,color:__props.color,locale:localeModel.value,"has-date":hasDate.value,double:hasDouble.value,"has-time":hasTime.value,"formatter-options":formatterOptions.value,"hide-header":__props.hideHeader,"min-date":__props.minDate,format:__props.format,"is-hour12":isHour12.value,"max-date":__props.maxDate,"disabled-weekly":__props.disabledWeekly,inline:__props.inline,"first-day-of-week":__props.firstDayOfWeek,shortcuts:internalShortcuts.value,shortcut:__props.shortcut,disabled:__props.disabled,"disabled-hours":__props.disabledHours,"disabled-dates":__props.disabledDates,"minute-interval":__props.minuteInterval,range:isRangeMode.value,onClose:closeCalendar},null,8,[`id`,`modelValue`,`calendar-date`,`color`,`locale`,`has-date`,`double`,`has-time`,`formatter-options`,`hide-header`,`min-date`,`format`,`is-hour12`,`max-date`,`disabled-weekly`,`inline`,`first-day-of-week`,`shortcuts`,`shortcut`,`disabled`,`disabled-hours`,`disabled-dates`,`minute-interval`,`range`])]),_:3},8,[`id`,`modelValue`,`style`,`class`,`transition`,`disabled`,`block`,`position`,`prefer-position`,`fallback-position`,`position-reference`]))}}),[[`__scopeId`,`data-v-a3f850f7`]]);export{MazDatePicker_default as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as hasSlotContent}from"./hasSlotContent.rEQOMGV4.js";import{t as MazPopover_default}from"./MazPopover.pWRD93tY.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useMazIconProps}from"../composables/useMazIconProps.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createSlots,createTextVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,openBlock,renderList,renderSlot,toDisplayString,unref,useModel,useTemplateRef,watch,withCtx,withKeys,withModifiers}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{isClient}from"@maz-ui/utils/helpers/isClient";import{MazChevronDown}from"@maz-ui/icons/raw/MazChevronDown";import '../assets/MazDropdown.CS3v6JOo.css';var _hoisted_1=[`id`];var _hoisted_2=[`id`];var _hoisted_3=[`id`];var MazDropdown_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazDropdown`,props:mergeModels({modelValue:{type:Boolean},style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},items:{default:()=>[]},itemsSize:{},id:{},trigger:{default:`adaptive`},color:{default:`transparent`},position:{default:`auto`},closeOnClick:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},chevron:{type:Boolean,default:!0},screenReaderDescription:{},menuPanelClass:{type:[Boolean,null,String,Object,Array]},menuPanelStyle:{type:[Boolean,null,String,Object,Array]},block:{type:Boolean},dropdownIcon:{type:[String,Function,Object]},dropdownIconAnimation:{type:Boolean,default:!0},size:{},transition:{default:`scale-pop`},preferPosition:{default:`bottom-start`},fallbackPosition:{},ariaLabel:{},announceChanges:{type:Boolean},offset:{},delay:{},hoverDelay:{},teleportTo:{},overlayClass:{type:[Boolean,null,String,Object,Array]},panelClass:{type:[Boolean,null,String,Object,Array]},panelStyle:{type:[Boolean,null,String,Object,Array]},closeOnClickOutside:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},persistent:{type:Boolean},ariaLabelledby:{},ariaDescribedby:{},trapFocus:{type:Boolean,default:!0},keepOpenOnHover:{type:Boolean},positionReference:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:mergeModels([`menuitem-clicked`,`update:model-value`],[`update:modelValue`]),setup(__props,{emit:__emit}){let emits=__emit;let{size}=useGlobalConfig(`MazDropdown`,{size:`md`});let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let MazIcon=defineAsyncComponent(()=>import(`../components/MazIcon.js`));let{iconProps:dropdownIconProps}=useMazIconProps(()=>__props.dropdownIcon??MazChevronDown);let instanceId=useInstanceUniqId({componentName:`MazDropdown`,providedId:__props.id});let{t}=useTranslations();let isOpen=useModel(__props,`modelValue`);let iconClassSize=computed(()=>size.value===`xl`?`maz:text-lg`:size.value===`lg`||size.value===`md`||size.value===`sm`?`maz:text-base`:size.value===`xs`||size.value===`mini`?`maz:text-sm`:`maz:text-lg`);function setDropdown(value){__props.disabled||(isOpen.value=value)}function isLinkItem(item){return`href`in item||`to`in item}function hasLinkOrAction(item){return isLinkItem(item)||`onClick`in item}async function runAction(item,event){emits(`menuitem-clicked`,event),await item.onClick?.(),closeDropdown()}function closeDropdown(){__props.closeOnClick&&setDropdown(!1)}function keydownHandler(event){[`ArrowDown`,`ArrowUp`].includes(event.key)?arrowHandler(event):event.key===`Enter`&&(event.preventDefault(),document.activeElement?.click(),closeDropdown())}function arrowHandler(event){event.preventDefault();let code=event.key;let itemLength=__props.items?.length;if(!itemLength)return;let currentElement=document.activeElement;let itemsElements=Array.from(document.querySelectorAll(`#${instanceId.value}-menu .menuitem`)).filter(el=>el.getAttribute(`tabindex`)!==`-1`);let currentIndex=[...itemsElements].indexOf(currentElement);if(currentIndex===-1){itemsElements[0]?.focus();return}itemsElements[code===`ArrowDown`?(currentIndex+1)%itemLength:(currentIndex-1+itemLength)%itemLength]?.focus()}let mazPopoverElement=useTemplateRef(`mazPopoverRef`);function onBlurTrigger(event){event.preventDefault(),!(mazPopoverElement.value?.panelRef)?.contains(event.relatedTarget)&&setDropdown(!1)}return watch(isOpen,value=>{isClient()&&(value?document.addEventListener(`keydown`,keydownHandler):document.removeEventListener(`keydown`,keydownHandler))}),(_ctx,_cache)=>(openBlock(),createBlock(MazPopover_default,{ref:`mazPopoverRef`,trigger:__props.trigger,"model-value":isOpen.value,class:normalizeClass([`m-dropdown m-reset-css`,[__props.class]]),role:`menu`,style:normalizeStyle(__props.style),"prefer-position":__props.preferPosition,color:`surface`,position:__props.position,transition:__props.transition,disabled:__props.disabled,offset:__props.offset,delay:__props.delay,"fallback-position":__props.fallbackPosition,persistent:__props.persistent,"hover-delay":__props.hoverDelay,"panel-class":__props.panelClass,"panel-style":__props.panelStyle,"close-on-escape":__props.closeOnEscape,"close-on-click":__props.closeOnClick,"teleport-to":__props.teleportTo,"trap-focus":__props.trapFocus,"overlay-class":__props.overlayClass,"close-on-click-outside":__props.closeOnClickOutside,"aria-describedby":__props.ariaDescribedby,"announce-changes":__props.announceChanges,"aria-label":__props.ariaLabel,"aria-labelledby":__props.ariaLabelledby,"position-reference":__props.positionReference,"keep-open-on-hover":__props.trigger===`hover`||__props.trigger===`adaptive`,block:__props.block,"onUpdate:modelValue":setDropdown},{trigger:withCtx(({toggle,close,open})=>[createElementVNode(`div`,{id:unref(instanceId),tabindex:`-1`,class:`m-dropdown__wrapper maz:size-full maz:rounded-md maz:outline-hidden maz:focus:bg-surface-600 maz:dark:focus:bg-surface-400`},[createElementVNode(`span`,{id:`${unref(instanceId)}-labelspan`,class:`maz:sr-only`},[renderSlot(_ctx.$slots,`screen-reader-description`,{},()=>[createTextVNode(toDisplayString(__props.screenReaderDescription||unref(t)(`dropdown.screenReaderDescription`)),1)],!0)],8,_hoisted_2),renderSlot(_ctx.$slots,`trigger`,{isOpen:isOpen.value,toggle,close,open},()=>[createVNode(unref(MazBtn),mergeProps({"aria-labelledby":`${unref(instanceId)}-labelspan`,color:__props.color,disabled:__props.disabled},_ctx.$attrs,{block:__props.block,size:unref(size),onKeydown:[withKeys(withModifiers(toggle,[`stop`,`prevent`]),[`enter`]),withKeys(withModifiers(toggle,[`stop`,`prevent`]),[`space`]),withKeys(withModifiers(close,[`stop`,`prevent`]),[`escape`])],onBlur:withModifiers(onBlurTrigger,[`stop`,`prevent`])}),createSlots({default:withCtx(()=>[renderSlot(_ctx.$slots,`default`,{},void 0,!0)]),_:2},[__props.chevron||unref(hasSlotContent)(_ctx.$slots[`dropdown-icon`])?{name:`end-icon`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`dropdown-icon`,{isOpen:isOpen.value,toggle,close,open},()=>[unref(dropdownIconProps)?(openBlock(),createBlock(unref(MazIcon),mergeProps({key:0},unref(dropdownIconProps),{class:[[{"--open":isOpen.value&&__props.dropdownIconAnimation},iconClassSize.value],`m-dropdown__icon`]}),null,16,[`class`])):createCommentVNode(``,!0)],!0)]),key:`0`}:void 0]),1040,[`aria-labelledby`,`color`,`disabled`,`block`,`size`,`onKeydown`])],!0)],8,_hoisted_1)]),default:withCtx(({open,close,toggle})=>[createElementVNode(`div`,{id:`${unref(instanceId)}-menu`,role:`menu`,"aria-label":`Menu`,class:normalizeClass([`m-dropdown__menu maz:flex maz:min-h-max maz:min-w-max maz:flex-col maz:gap-1 maz:overflow-auto maz:p-2`,__props.menuPanelClass]),tabindex:`-1`,style:normalizeStyle(__props.menuPanelStyle)},[renderSlot(_ctx.$slots,`dropdown`,{items:__props.items,open,close,isOpen:isOpen.value,toggle},()=>[renderSlot(_ctx.$slots,`prepend-menu`,{isOpen:isOpen.value,open,close,toggle},void 0,!0),(openBlock(!0),createElementBlock(Fragment,null,renderList(__props.items,(item,index)=>renderSlot(_ctx.$slots,`menuitem`,{key:index,item,open,close,isOpen:isOpen.value,toggle},()=>[createVNode(unref(MazBtn),mergeProps({ref_for:!0},{...item,onClick:void 0,label:void 0},{target:isLinkItem(item)?item.target??`_self`:void 0,to:isLinkItem(item)?item.to:void 0,href:isLinkItem(item)?item.href:void 0,class:[`menuitem`,[{"menuitem--hoverable":hasLinkOrAction(item)},item.class,isLinkItem(item)?`menuitem__link`:`menuitem__button`,`menuitem--${item.color}`]],justify:item.justify??`start`,color:item.color??`transparent`,size:__props.itemsSize??item.size??unref(size),disabled:item.disabled??!1,tabindex:hasLinkOrAction(item)?0:-1,onClick:withModifiers($event=>runAction(item,$event),[`stop`]),onKeypress:withKeys(withModifiers($event=>runAction(item,$event),[`stop`,`prevent`]),[`enter`])}),{default:withCtx(()=>[renderSlot(_ctx.$slots,`menuitem-label`,{item,open,close,isOpen:isOpen.value,toggle},()=>[createTextVNode(toDisplayString(item.label),1)],!0)]),_:2},1040,[`target`,`to`,`href`,`class`,`justify`,`color`,`size`,`disabled`,`tabindex`,`onClick`,`onKeypress`])],!0)),128)),renderSlot(_ctx.$slots,`append-menu`,{isOpen:isOpen.value,open,close,toggle},void 0,!0)],!0)],14,_hoisted_3)]),_:3},8,`trigger.model-value.style.prefer-position.position.transition.disabled.offset.delay.fallback-position.persistent.hover-delay.panel-class.panel-style.close-on-escape.close-on-click.teleport-to.trap-focus.overlay-class.close-on-click-outside.aria-describedby.announce-changes.aria-label.aria-labelledby.position-reference.keep-open-on-hover.class.block`.split(`.`)))}}),[[`__scopeId`,`data-v-c89fad12`]]);export{MazDropdown_default as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazSelectCountry_default}from"./MazSelectCountry.BtgWOrIV.js";import{n as useMazInputPhoneNumber,r as useLibphonenumber,t as PhoneInput_default}from"./PhoneInput.Cx7Biuzs.js";import{computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineComponent,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeMount,onMounted,openBlock,provide,ref,renderSlot,toDisplayString,unref,watch,withCtx}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import '../assets/MazInputPhoneNumber.BrLgcHxB.css';var _hoisted_1=[`id`];var _hoisted_2=[`for`];var _hoisted_3={class:`m-input-phone-number__country-list-code maz:min-w-8 maz:text-center maz:text-muted`};var MazInputPhoneNumber_default=_plugin_vue_export_helper_default(defineComponent({name:`MazInputPhoneNumber`,inheritAttrs:!1,__name:`MazInputPhoneNumber`,props:{style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},modelValue:{default:()=>void 0},countryCode:{default:()=>void 0},id:{default:()=>void 0},placeholder:{default:()=>void 0},topLabel:{},label:{},preferredCountries:{default:()=>void 0},ignoredCountries:{default:()=>void 0},onlyCountries:{default:()=>void 0},translations:{default:()=>void 0},listPosition:{default:`bottom-start`},color:{default:`primary`},size:{},hideFlags:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},example:{type:Boolean,default:!0},search:{type:Boolean,default:!0},searchThreshold:{default:.75},useBrowserLocale:{type:Boolean,default:!0},fetchCountry:{type:Boolean,default:()=>void 0},hideCountrySelect:{type:Boolean,default:!1},showCodeInList:{type:Boolean,default:!1},customCountriesList:{default:()=>void 0},autoFormat:{type:[String,Boolean],default:`blur`},countryLocale:{default:()=>void 0},validationError:{type:Boolean,default:!0},validationSuccess:{type:Boolean,default:!0},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},displayCountryName:{type:Boolean,default:!1},block:{type:Boolean,default:!1},orientation:{default:`responsive`},countrySelectAttributes:{default:()=>({name:`country`,autocomplete:`off`,style:{width:`14rem`}})},phoneInputAttributes:{default:()=>({name:`phone`,autocomplete:`tel`,inputmode:`tel`})},assistiveText:{default:()=>void 0},hint:{default:()=>void 0}},emits:[`update:model-value`,`country-code`,`update:country-code`,`data`],setup(__props,{emit:__emit}){let emits=__emit;let{fetchCountryCode,getBrowserLocale,getCountryList}=useMazInputPhoneNumber();let{isCountryAvailable,getPhoneNumberResults}=useLibphonenumber();let instanceId=useInstanceUniqId({componentName:`MazInputPhoneNumber`,providedId:__props.id});let{size}=useGlobalConfig(`MazInputPhoneNumber`,{size:`md`});let phoneNumber=ref();let selectedCountry=ref();let{t}=useTranslations();let messages=computed(()=>({countrySelect:{error:__props.translations?.countrySelect?.error||t(`inputPhoneNumber.countrySelect.error`),placeholder:__props.translations?.countrySelect?.placeholder||t(`inputPhoneNumber.countrySelect.placeholder`),searchPlaceholder:__props.translations?.countrySelect?.searchPlaceholder||t(`inputPhoneNumber.countrySelect.searchPlaceholder`)},phoneInput:{placeholder:__props.translations?.phoneInput?.placeholder||t(`inputPhoneNumber.phoneInput.placeholder`),example:__props.translations?.phoneInput?.example}}));let isPhoneNumberInternalUpdate=ref(!1);let isCountryInternalUpdate=ref(!1);let results=ref({isValid:!1,countryCode:__props.countryCode,phoneNumber:__props.modelValue});let PhoneInputRef=ref();onBeforeMount(async()=>{if(__props.countryCode&&!selectedCountry.value&&onCountryChanged({countryCode:__props.countryCode}),__props.fetchCountry&&!selectedCountry.value){let{data:countryCode,error}=await fetchCountryCode();if(error){console.error(`[MazInputPhoneNumber](onBeforeMount) Error while fetching country code - ${error.message}`);return}onCountryChanged({countryCode})}}),onMounted(()=>{if(!selectedCountry.value&&__props.useBrowserLocale){let countryCode=getBrowserLocale()?.locale;countryCode&&isCountryAvailable(countryCode)&&onCountryChanged({countryCode})}});function updateTheResults({phone=phoneNumber.value||__props.modelValue,countryCode=selectedCountry.value,checkCountryCode=!1}){results.value=getPhoneNumberResults({phoneNumber:phone,countryCode,checkCountryCode})}async function selectPhoneNumberInput(){await nextTick(),setTimeout(()=>{PhoneInputRef.value?.focus()},100)}function setSelectedCountry(countryCode){if(countryCode){if(!isCountryAvailable(countryCode)){console.warn(`[MazInputPhoneNumber] Country code not available: "${countryCode}"`),selectedCountry.value=void 0;return}selectedCountry.value=countryCode}}let isLetterRegex=/\D/g;function onPhoneNumberChanged({newPhoneNumber}){updateTheResults({phone:newPhoneNumber}),results.value.parsedCountryCode&&results.value.parsedCountryCode!==selectedCountry.value&&onCountryChanged({countryCode:results.value.parsedCountryCode,updateResults:!1}),results.value.isValid&&(__props.autoFormat===`blur`||__props.autoFormat===`typing`)?phoneNumber.value=results.value.formatNational?.trim().replaceAll(isLetterRegex,``):phoneNumber.value=newPhoneNumber,isPhoneNumberInternalUpdate.value=!0,results.value.e164?emits(`update:model-value`,results.value.e164):emits(`update:model-value`,results.value.phoneNumber),setTimeout(()=>{isPhoneNumberInternalUpdate.value=!1},0)}function onCountryChanged({countryCode,updateResults=!0,selectPhoneNumber=!1}){if(!countryCode){selectedCountry.value=void 0;return}isCountryInternalUpdate.value=!0,countryCode!==selectedCountry.value&&setSelectedCountry(countryCode),updateResults&&updateTheResults({countryCode:selectedCountry.value,checkCountryCode:!0});let code=selectedCountry.value;emits(`country-code`,code),emits(`update:country-code`,code),selectPhoneNumber&&!results.value.isValid&&selectPhoneNumberInput(),setTimeout(()=>{isCountryInternalUpdate.value=!1},0)}let countriesList=computed(()=>{let list=getCountryList(__props.countryLocale,__props.customCountriesList);return __props.onlyCountries&&(list=list?.filter(country=>__props.onlyCountries?.includes(country.code))),__props.ignoredCountries&&(list=list?.filter(country=>!__props.ignoredCountries?.includes(country.code))),__props.preferredCountries&&(list=list?.sort((a,b)=>{let indexA=__props.preferredCountries?.indexOf(a.code)??-1;let indexB=__props.preferredCountries?.indexOf(b.code)??-1;return indexA>=0&&indexB>=0?indexA-indexB:indexA>=0?-1:+(indexB>=0)})),list??[]});watch(()=>__props.modelValue,(value,oldValue)=>{!isPhoneNumberInternalUpdate.value&&value!==oldValue&&value!==phoneNumber.value&&onPhoneNumberChanged({newPhoneNumber:value})},{immediate:!0}),watch(()=>__props.countryCode,(value,oldValue)=>{!isCountryInternalUpdate.value&&value&&value!==oldValue&&value!==selectedCountry.value&&onCountryChanged({countryCode:value})},{immediate:!0}),watch(results,value=>emits(`data`,value),{immediate:!0});let countryState=computed(()=>({error:__props.error||(__props.validationError?!!phoneNumber.value&&!selectedCountry.value:!1),success:__props.success||(__props.validationSuccess?results.value?.isValid:!1)}));let phoneState=computed(()=>({error:__props.error||(__props.validationError?!!phoneNumber.value&&!results.value?.isValid:!1),success:__props.success||(__props.validationSuccess?results.value.isValid:!1)}));let stateLabelColor=computed(()=>[{"maz:text-destructive-600":countryState.value.error||phoneState.value.error,"maz:text-success-600":countryState.value.success&&phoneState.value.success,"maz:text-warning-600":__props.warning}]);let assistiveTextStateColor=computed(()=>[{"maz:text-destructive-600":countryState.value.error||phoneState.value.error,"maz:text-success-600":countryState.value.success&&phoneState.value.success,"maz:text-warning-600":__props.warning,"maz:text-muted":!(countryState.value.error||phoneState.value.error)&&!(countryState.value.success&&phoneState.value.success)&&!__props.warning}]);return provide(`mazInputPhoneNumberData`,{selectedCountry,phoneNumber,results}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{id:unref(instanceId),class:normalizeClass([`m-input-phone-number m-reset-css maz:relative maz:inline-flex maz:flex-col`,[__props.class,{"maz:w-full":__props.block}]]),style:normalizeStyle(__props.style)},[__props.topLabel?(openBlock(),createElementBlock(`label`,{key:0,for:`${unref(instanceId)}-phone`,class:normalizeClass([`m-input-phone-number__top-label maz:mb-2`,stateLabelColor.value]),style:{fontWeight:`var(--maz-input-top-label-font-weight, 600)`}},toDisplayString(__props.topLabel),11,_hoisted_2)):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`maz:flex maz:items-center maz:align-top`,[__props.orientation&&`--${__props.orientation}`,__props.orientation===`col`?`maz:flex-col`:__props.orientation===`row`?`maz:flex-row`:`maz:flex-col maz:mob-l:flex-row`]])},[__props.hideCountrySelect?createCommentVNode(``,!0):(openBlock(),createBlock(MazSelectCountry_default,mergeProps({key:0,id:`${unref(instanceId)}-country`,class:`m-input-phone-number__country-select`},__props.countrySelectAttributes,{"model-value":selectedCountry.value,"option-input-value-key":__props.displayCountryName?`name`:`dialCode`,color:__props.color,size:unref(size),locale:__props.countryLocale,"countries-list":__props.customCountriesList,"list-position":__props.listPosition,"hide-flags":__props.hideFlags,search:__props.search,block:__props.block,error:__props.error||(__props.validationError?!!phoneNumber.value&&!selectedCountry.value:!1),success:__props.success||(__props.validationSuccess?results.value?.isValid:!1),translations:messages.value.countrySelect,hint:phoneNumber.value&&!selectedCountry.value?messages.value.countrySelect.error:void 0,options:countriesList.value,disabled:__props.disabled,warning:__props.warning,required:__props.required,"search-threshold":__props.searchThreshold,"format-input-value":__props.displayCountryName||!selectedCountry.value?void 0:value=>`+${value}`,"show-code-in-list":__props.showCodeInList,label:messages.value.countrySelect.placeholder,"onUpdate:modelValue":_cache[0]||=$event=>onCountryChanged({countryCode:$event,selectPhoneNumber:!0})}),{"no-results":withCtx(()=>[renderSlot(_ctx.$slots,`no-results`,{},void 0,!0)]),"selector-flag":withCtx(({countryCode:codeCountry})=>[renderSlot(_ctx.$slots,`selector-flag`,{countryCode:codeCountry},void 0,!0)]),"country-list-flag":withCtx(({isSelected,option})=>[renderSlot(_ctx.$slots,`country-list-flag`,{countryCode:option.code,option,isSelected},void 0,!0)]),"country-list-code":withCtx(({option})=>[createElementVNode(`span`,_hoisted_3,` +`+toDisplayString(option.dialCode),1)]),_:3},16,[`id`,`model-value`,`option-input-value-key`,`color`,`size`,`locale`,`countries-list`,`list-position`,`hide-flags`,`search`,`block`,`error`,`success`,`translations`,`hint`,`options`,`disabled`,`warning`,`required`,`search-threshold`,`format-input-value`,`show-code-in-list`,`label`])),createVNode(PhoneInput_default,mergeProps({id:`${unref(instanceId)}-phone`,ref_key:`PhoneInputRef`,ref:PhoneInputRef,class:`m-input-phone-number__phone-input`,"model-value":phoneNumber.value},{..._ctx.$attrs,...__props.phoneInputAttributes},{color:__props.color,size:unref(size),"auto-format":__props.autoFormat,example:__props.example,block:``,disabled:__props.disabled,required:__props.required,warning:__props.warning,hint:__props.hint,name:__props.phoneInputAttributes.name,"has-radius":!__props.hideCountrySelect,success:__props.success||(__props.validationSuccess?results.value.isValid:!1),error:__props.error||(__props.validationError?!!phoneNumber.value&&!results.value.isValid:!1),locales:messages.value.phoneInput,label:__props.label,placeholder:__props.placeholder,"onUpdate:modelValue":_cache[1]||=$event=>onPhoneNumberChanged({newPhoneNumber:$event})}),null,16,[`id`,`model-value`,`color`,`size`,`auto-format`,`example`,`disabled`,`required`,`warning`,`hint`,`name`,`has-radius`,`success`,`error`,`locales`,`label`,`placeholder`])],2),__props.assistiveText?(openBlock(),createElementBlock(`div`,{key:1,class:normalizeClass([`m-input-phone-number__bottom-text maz:mt-1 maz:text-sm`,assistiveTextStateColor.value])},toDisplayString(__props.assistiveText),3)):createCommentVNode(``,!0)],14,_hoisted_1))}}),[[`__scopeId`,`data-v-79018cd1`]]);export{MazInputPhoneNumber_default as t};
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazSelectCountry_default}from"./MazSelectCountry.DsxjU_D1.js";import{n as useMazInputPhoneNumber,r as useLibphonenumber,t as PhoneInput_default}from"./PhoneInput.Cx7Biuzs.js";import{computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineComponent,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeMount,onMounted,openBlock,provide,ref,renderSlot,toDisplayString,unref,watch,withCtx}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import '../assets/MazInputPhoneNumber.BrLgcHxB.css';var _hoisted_1=[`id`];var _hoisted_2=[`for`];var _hoisted_3={class:`m-input-phone-number__country-list-code maz:min-w-8 maz:text-center maz:text-muted`};var MazInputPhoneNumber_default=_plugin_vue_export_helper_default(defineComponent({name:`MazInputPhoneNumber`,inheritAttrs:!1,__name:`MazInputPhoneNumber`,props:{style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},modelValue:{default:()=>void 0},countryCode:{default:()=>void 0},id:{default:()=>void 0},placeholder:{default:()=>void 0},topLabel:{},label:{},preferredCountries:{default:()=>void 0},ignoredCountries:{default:()=>void 0},onlyCountries:{default:()=>void 0},translations:{default:()=>void 0},listPosition:{default:`bottom-start`},color:{default:`primary`},size:{},hideFlags:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},example:{type:Boolean,default:!0},search:{type:Boolean,default:!0},searchThreshold:{default:.75},useBrowserLocale:{type:Boolean,default:!0},fetchCountry:{type:Boolean,default:()=>void 0},hideCountrySelect:{type:Boolean,default:!1},showCodeInList:{type:Boolean,default:!1},customCountriesList:{default:()=>void 0},autoFormat:{type:[String,Boolean],default:`blur`},countryLocale:{default:()=>void 0},validationError:{type:Boolean,default:!0},validationSuccess:{type:Boolean,default:!0},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},displayCountryName:{type:Boolean,default:!1},block:{type:Boolean,default:!1},orientation:{default:`responsive`},countrySelectAttributes:{default:()=>({name:`country`,autocomplete:`off`,style:{width:`14rem`}})},phoneInputAttributes:{default:()=>({name:`phone`,autocomplete:`tel`,inputmode:`tel`})},assistiveText:{default:()=>void 0},hint:{default:()=>void 0}},emits:[`update:model-value`,`country-code`,`update:country-code`,`data`],setup(__props,{emit:__emit}){let emits=__emit;let{fetchCountryCode,getBrowserLocale,getCountryList}=useMazInputPhoneNumber();let{isCountryAvailable,getPhoneNumberResults}=useLibphonenumber();let instanceId=useInstanceUniqId({componentName:`MazInputPhoneNumber`,providedId:__props.id});let{size}=useGlobalConfig(`MazInputPhoneNumber`,{size:`md`});let phoneNumber=ref();let selectedCountry=ref();let{t}=useTranslations();let messages=computed(()=>({countrySelect:{error:__props.translations?.countrySelect?.error||t(`inputPhoneNumber.countrySelect.error`),placeholder:__props.translations?.countrySelect?.placeholder||t(`inputPhoneNumber.countrySelect.placeholder`),searchPlaceholder:__props.translations?.countrySelect?.searchPlaceholder||t(`inputPhoneNumber.countrySelect.searchPlaceholder`)},phoneInput:{placeholder:__props.translations?.phoneInput?.placeholder||t(`inputPhoneNumber.phoneInput.placeholder`),example:__props.translations?.phoneInput?.example}}));let isPhoneNumberInternalUpdate=ref(!1);let isCountryInternalUpdate=ref(!1);let results=ref({isValid:!1,countryCode:__props.countryCode,phoneNumber:__props.modelValue});let PhoneInputRef=ref();onBeforeMount(async()=>{if(__props.countryCode&&!selectedCountry.value&&onCountryChanged({countryCode:__props.countryCode}),__props.fetchCountry&&!selectedCountry.value){let{data:countryCode,error}=await fetchCountryCode();if(error){console.error(`[MazInputPhoneNumber](onBeforeMount) Error while fetching country code - ${error.message}`);return}onCountryChanged({countryCode})}}),onMounted(()=>{if(!selectedCountry.value&&__props.useBrowserLocale){let countryCode=getBrowserLocale()?.locale;countryCode&&isCountryAvailable(countryCode)&&onCountryChanged({countryCode})}});function updateTheResults({phone=phoneNumber.value||__props.modelValue,countryCode=selectedCountry.value,checkCountryCode=!1}){results.value=getPhoneNumberResults({phoneNumber:phone,countryCode,checkCountryCode})}async function selectPhoneNumberInput(){await nextTick(),setTimeout(()=>{PhoneInputRef.value?.focus()},100)}function setSelectedCountry(countryCode){if(countryCode){if(!isCountryAvailable(countryCode)){console.warn(`[MazInputPhoneNumber] Country code not available: "${countryCode}"`),selectedCountry.value=void 0;return}selectedCountry.value=countryCode}}let isLetterRegex=/\D/g;function onPhoneNumberChanged({newPhoneNumber}){updateTheResults({phone:newPhoneNumber}),results.value.parsedCountryCode&&results.value.parsedCountryCode!==selectedCountry.value&&onCountryChanged({countryCode:results.value.parsedCountryCode,updateResults:!1}),results.value.isValid&&(__props.autoFormat===`blur`||__props.autoFormat===`typing`)?phoneNumber.value=results.value.formatNational?.trim().replaceAll(isLetterRegex,``):phoneNumber.value=newPhoneNumber,isPhoneNumberInternalUpdate.value=!0,results.value.e164?emits(`update:model-value`,results.value.e164):emits(`update:model-value`,results.value.phoneNumber),setTimeout(()=>{isPhoneNumberInternalUpdate.value=!1},0)}function onCountryChanged({countryCode,updateResults=!0,selectPhoneNumber=!1}){if(!countryCode){selectedCountry.value=void 0;return}isCountryInternalUpdate.value=!0,countryCode!==selectedCountry.value&&setSelectedCountry(countryCode),updateResults&&updateTheResults({countryCode:selectedCountry.value,checkCountryCode:!0});let code=selectedCountry.value;emits(`country-code`,code),emits(`update:country-code`,code),selectPhoneNumber&&!results.value.isValid&&selectPhoneNumberInput(),setTimeout(()=>{isCountryInternalUpdate.value=!1},0)}let countriesList=computed(()=>{let list=getCountryList(__props.countryLocale,__props.customCountriesList);return __props.onlyCountries&&(list=list?.filter(country=>__props.onlyCountries?.includes(country.code))),__props.ignoredCountries&&(list=list?.filter(country=>!__props.ignoredCountries?.includes(country.code))),__props.preferredCountries&&(list=list?.sort((a,b)=>{let indexA=__props.preferredCountries?.indexOf(a.code)??-1;let indexB=__props.preferredCountries?.indexOf(b.code)??-1;return indexA>=0&&indexB>=0?indexA-indexB:indexA>=0?-1:+(indexB>=0)})),list??[]});watch(()=>__props.modelValue,(value,oldValue)=>{!isPhoneNumberInternalUpdate.value&&value!==oldValue&&value!==phoneNumber.value&&onPhoneNumberChanged({newPhoneNumber:value})},{immediate:!0}),watch(()=>__props.countryCode,(value,oldValue)=>{!isCountryInternalUpdate.value&&value&&value!==oldValue&&value!==selectedCountry.value&&onCountryChanged({countryCode:value})},{immediate:!0}),watch(results,value=>emits(`data`,value),{immediate:!0});let countryState=computed(()=>({error:__props.error||(__props.validationError?!!phoneNumber.value&&!selectedCountry.value:!1),success:__props.success||(__props.validationSuccess?results.value?.isValid:!1)}));let phoneState=computed(()=>({error:__props.error||(__props.validationError?!!phoneNumber.value&&!results.value?.isValid:!1),success:__props.success||(__props.validationSuccess?results.value.isValid:!1)}));let stateLabelColor=computed(()=>[{"maz:text-destructive-600":countryState.value.error||phoneState.value.error,"maz:text-success-600":countryState.value.success&&phoneState.value.success,"maz:text-warning-600":__props.warning}]);let assistiveTextStateColor=computed(()=>[{"maz:text-destructive-600":countryState.value.error||phoneState.value.error,"maz:text-success-600":countryState.value.success&&phoneState.value.success,"maz:text-warning-600":__props.warning,"maz:text-muted":!(countryState.value.error||phoneState.value.error)&&!(countryState.value.success&&phoneState.value.success)&&!__props.warning}]);return provide(`mazInputPhoneNumberData`,{selectedCountry,phoneNumber,results}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{id:unref(instanceId),class:normalizeClass([`m-input-phone-number m-reset-css maz:relative maz:inline-flex maz:flex-col`,[__props.class,{"maz:w-full":__props.block}]]),style:normalizeStyle(__props.style)},[__props.topLabel?(openBlock(),createElementBlock(`label`,{key:0,for:`${unref(instanceId)}-phone`,class:normalizeClass([`m-input-phone-number__top-label maz:mb-2`,stateLabelColor.value]),style:{fontWeight:`var(--maz-input-top-label-font-weight, 600)`}},toDisplayString(__props.topLabel),11,_hoisted_2)):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`maz:flex maz:items-center maz:align-top`,[__props.orientation&&`--${__props.orientation}`,__props.orientation===`col`?`maz:flex-col`:__props.orientation===`row`?`maz:flex-row`:`maz:flex-col maz:mob-l:flex-row`]])},[__props.hideCountrySelect?createCommentVNode(``,!0):(openBlock(),createBlock(MazSelectCountry_default,mergeProps({key:0,id:`${unref(instanceId)}-country`,class:`m-input-phone-number__country-select`},__props.countrySelectAttributes,{"model-value":selectedCountry.value,"option-input-value-key":__props.displayCountryName?`name`:`dialCode`,color:__props.color,size:unref(size),locale:__props.countryLocale,"countries-list":__props.customCountriesList,"list-position":__props.listPosition,"hide-flags":__props.hideFlags,search:__props.search,block:__props.block,error:__props.error||(__props.validationError?!!phoneNumber.value&&!selectedCountry.value:!1),success:__props.success||(__props.validationSuccess?results.value?.isValid:!1),translations:messages.value.countrySelect,hint:phoneNumber.value&&!selectedCountry.value?messages.value.countrySelect.error:void 0,options:countriesList.value,disabled:__props.disabled,warning:__props.warning,required:__props.required,"search-threshold":__props.searchThreshold,"format-input-value":__props.displayCountryName||!selectedCountry.value?void 0:value=>`+${value}`,"show-code-in-list":__props.showCodeInList,label:messages.value.countrySelect.placeholder,"onUpdate:modelValue":_cache[0]||=$event=>onCountryChanged({countryCode:$event,selectPhoneNumber:!0})}),{"no-results":withCtx(()=>[renderSlot(_ctx.$slots,`no-results`,{},void 0,!0)]),"selector-flag":withCtx(({countryCode:codeCountry})=>[renderSlot(_ctx.$slots,`selector-flag`,{countryCode:codeCountry},void 0,!0)]),"country-list-flag":withCtx(({isSelected,option})=>[renderSlot(_ctx.$slots,`country-list-flag`,{countryCode:option.code,option,isSelected},void 0,!0)]),"country-list-code":withCtx(({option})=>[createElementVNode(`span`,_hoisted_3,` +`+toDisplayString(option.dialCode),1)]),_:3},16,[`id`,`model-value`,`option-input-value-key`,`color`,`size`,`locale`,`countries-list`,`list-position`,`hide-flags`,`search`,`block`,`error`,`success`,`translations`,`hint`,`options`,`disabled`,`warning`,`required`,`search-threshold`,`format-input-value`,`show-code-in-list`,`label`])),createVNode(PhoneInput_default,mergeProps({id:`${unref(instanceId)}-phone`,ref_key:`PhoneInputRef`,ref:PhoneInputRef,class:`m-input-phone-number__phone-input`,"model-value":phoneNumber.value},{..._ctx.$attrs,...__props.phoneInputAttributes},{color:__props.color,size:unref(size),"auto-format":__props.autoFormat,example:__props.example,block:``,disabled:__props.disabled,required:__props.required,warning:__props.warning,hint:__props.hint,name:__props.phoneInputAttributes.name,"has-radius":!__props.hideCountrySelect,success:__props.success||(__props.validationSuccess?results.value.isValid:!1),error:__props.error||(__props.validationError?!!phoneNumber.value&&!results.value.isValid:!1),locales:messages.value.phoneInput,label:__props.label,placeholder:__props.placeholder,"onUpdate:modelValue":_cache[1]||=$event=>onPhoneNumberChanged({newPhoneNumber:$event})}),null,16,[`id`,`model-value`,`color`,`size`,`auto-format`,`example`,`disabled`,`required`,`warning`,`hint`,`name`,`has-radius`,`success`,`error`,`locales`,`label`,`placeholder`])],2),__props.assistiveText?(openBlock(),createElementBlock(`div`,{key:1,class:normalizeClass([`m-input-phone-number__bottom-text maz:mt-1 maz:text-sm`,assistiveTextStateColor.value])},toDisplayString(__props.assistiveText),3)):createCommentVNode(``,!0)],14,_hoisted_1))}}),[[`__scopeId`,`data-v-79018cd1`]]);export{MazInputPhoneNumber_default as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazBtn_default}from"./MazBtn.C7LV-iX2.js";import{t as MazBtnGroup_default}from"./MazBtnGroup.DQPVMzrc.js";import{t as MazDropdown_default}from"./MazDropdown.
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazBtn_default}from"./MazBtn.C7LV-iX2.js";import{t as MazBtnGroup_default}from"./MazBtnGroup.DQPVMzrc.js";import{t as MazDropdown_default}from"./MazDropdown.TQ8Ob7Xl.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,createVNode,defineComponent,mergeModels,mergeProps,nextTick,normalizeClass,normalizeStyle,openBlock,ref,renderList,renderSlot,toDisplayString,unref,useModel,vModelText,vShow,watch,withCtx,withDirectives}from"vue";import{MazLinkIcon}from"@maz-ui/icons/lazy/MazLinkIcon";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazCheckCircle}from"@maz-ui/icons/lazy/MazCheckCircle";import{MazEye}from"@maz-ui/icons/lazy/MazEye";import{MazBold}from"@maz-ui/icons/lazy/MazBold";import{MazChatBubbleBottomCenterText}from"@maz-ui/icons/lazy/MazChatBubbleBottomCenterText";import{MazCodeBracket}from"@maz-ui/icons/lazy/MazCodeBracket";import{MazCodeBracketSquare}from"@maz-ui/icons/lazy/MazCodeBracketSquare";import{MazHashtag}from"@maz-ui/icons/lazy/MazHashtag";import{MazItalic}from"@maz-ui/icons/lazy/MazItalic";import{MazListBullet}from"@maz-ui/icons/lazy/MazListBullet";import{MazNumberedList}from"@maz-ui/icons/lazy/MazNumberedList";import{MazPencil}from"@maz-ui/icons/lazy/MazPencil";import{MazPhoto}from"@maz-ui/icons/lazy/MazPhoto";import{MazStrikethrough}from"@maz-ui/icons/lazy/MazStrikethrough";import{MazTableCells}from"@maz-ui/icons/lazy/MazTableCells";import{MazViewColumns}from"@maz-ui/icons/lazy/MazViewColumns";import '../assets/MazMarkdownEditor.DeyfIz2b.css';var _hoisted_1=[`for`];var _hoisted_2={class:`m-markdown-editor__header maz:flex maz:items-center maz:justify-between maz:gap-2 maz:border-b maz:bg-container maz:px-2 maz:py-1.5`};var _hoisted_3=[`aria-label`];var _hoisted_4={key:0,class:`m-markdown-editor__toolbar maz:flex maz:flex-wrap maz:items-center maz:gap-0.5`};var _hoisted_5={class:`m-markdown-editor__editor maz:flex maz:min-w-0 maz:flex-1`};var _hoisted_6=[`id`,`name`,`rows`,`placeholder`,`disabled`,`readonly`,`required`,`aria-labelledby`];var _hoisted_7=[`id`,`aria-labelledby`];var _hoisted_8=[`innerHTML`];var _hoisted_9={key:1,class:`m-markdown-editor__preview-empty maz:text-muted maz:italic`};var MazMarkdownEditor_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazMarkdownEditor`,props:mergeModels({style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},modelValue:{},id:{},name:{default:`MazMarkdownEditor`},label:{},placeholder:{},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},color:{default:`primary`},roundedSize:{},topLabel:{},assistiveText:{},toolbar:{type:[Boolean,Array],default:!1},lineNumbers:{type:Boolean,default:!1},shortcuts:{type:Boolean,default:!0},sanitize:{type:Boolean,default:!0},renderFunction:{type:Function},markedOptions:{},rows:{default:6},translations:{}},{mode:{default:`write`},modeModifiers:{}}),emits:mergeModels([`update:model-value`,`input`,`focus`,`blur`,`change`],[`update:mode`]),setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let mode=useModel(__props,`mode`);let{roundedSize}=useGlobalConfig(`MazMarkdownEditor`,{roundedSize:`md`});let{t}=useTranslations();let instanceId=useInstanceUniqId({componentName:`MazMarkdownEditor`,providedId:__props.id});let textareaEl=ref();let gutterEl=ref();let previewHtml=ref(``);let isRendering=ref(!1);let labels=computed(()=>({write:__props.translations?.write??t(`markdownEditor.write`),preview:__props.translations?.preview??t(`markdownEditor.preview`),split:__props.translations?.split??t(`markdownEditor.split`),emptyPreview:__props.translations?.emptyPreview??t(`markdownEditor.emptyPreview`),toolbar:{heading:__props.translations?.toolbar?.heading??t(`markdownEditor.toolbar.heading`),bold:__props.translations?.toolbar?.bold??t(`markdownEditor.toolbar.bold`),italic:__props.translations?.toolbar?.italic??t(`markdownEditor.toolbar.italic`),strikethrough:__props.translations?.toolbar?.strikethrough??t(`markdownEditor.toolbar.strikethrough`),quote:__props.translations?.toolbar?.quote??t(`markdownEditor.toolbar.quote`),code:__props.translations?.toolbar?.code??t(`markdownEditor.toolbar.code`),codeBlock:__props.translations?.toolbar?.codeBlock??t(`markdownEditor.toolbar.codeBlock`),link:__props.translations?.toolbar?.link??t(`markdownEditor.toolbar.link`),image:__props.translations?.toolbar?.image??t(`markdownEditor.toolbar.image`),bulletList:__props.translations?.toolbar?.bulletList??t(`markdownEditor.toolbar.bulletList`),orderedList:__props.translations?.toolbar?.orderedList??t(`markdownEditor.toolbar.orderedList`),checkList:__props.translations?.toolbar?.checkList??t(`markdownEditor.toolbar.checkList`),table:__props.translations?.toolbar?.table??t(`markdownEditor.toolbar.table`)},headings:{h1:__props.translations?.headings?.h1??t(`markdownEditor.headings.h1`),h2:__props.translations?.headings?.h2??t(`markdownEditor.headings.h2`),h3:__props.translations?.headings?.h3??t(`markdownEditor.headings.h3`)}}));let inputValue=computed({get:()=>__props.modelValue,set:value=>updateValue(value)});function updateValue(value){emits(`update:model-value`,value),emits(`input`,value)}function escapeHtml(value){return value.replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`).replace(/"/g,`"`).replace(/'/g,`'`)}let renderSeq=0;async function parseToHtml(source){if(__props.renderFunction)return __props.renderFunction(source);let{marked}=await import(`marked`);return marked.parse(source,{gfm:!0,breaks:!0,...__props.markedOptions})}async function sanitizeHtml(html,source){if(!__props.sanitize)return html;try{let{default:DOMPurify}=await import(`dompurify`);return DOMPurify.sanitize(html)}catch{return`<pre>${escapeHtml(source)}</pre>`}}async function renderPreview(){let seq=++renderSeq;let source=__props.modelValue??``;if(!source.trim()||globalThis.window===void 0){seq===renderSeq&&(previewHtml.value=``);return}isRendering.value=!0;try{let html=await sanitizeHtml(await parseToHtml(source),source);seq===renderSeq&&(previewHtml.value=html)}catch{seq===renderSeq&&(previewHtml.value=`<pre>${escapeHtml(source)}</pre>`)}finally{seq===renderSeq&&(isRendering.value=!1)}}function setMode(value){__props.disabled||(mode.value=value)}function tryExecInsert(el,text){if(typeof document>`u`||typeof document.execCommand!=`function`)return!1;try{return document.execCommand(`insertText`,!1,text)}catch{return!1}}function replaceRange(rangeStart,rangeEnd,text,caretStart,caretEnd=caretStart){let el=textareaEl.value;if(!(!el||__props.disabled||__props.readonly)){if(el.focus(),el.setSelectionRange(rangeStart,rangeEnd),!tryExecInsert(el,text)){let value=__props.modelValue??``;updateValue(value.slice(0,rangeStart)+text+value.slice(rangeEnd))}nextTick(()=>{el.focus(),el.setSelectionRange(caretStart,caretEnd)})}}function wrapSelection(before,after=before){let el=textareaEl.value;if(!el)return;let value=__props.modelValue??``;let start=el.selectionStart??value.length;let end=el.selectionEnd??value.length;let selected=value.slice(start,end);let caret=start+before.length;replaceRange(start,end,`${before}${selected}${after}`,caret,caret+selected.length)}function prefixLines(prefix){let el=textareaEl.value;if(!el)return;let value=__props.modelValue??``;let start=el.selectionStart??0;let end=el.selectionEnd??0;let lineStart=value.lastIndexOf(`
|
|
2
2
|
`,start-1)+1;let prefixed=value.slice(lineStart,end).split(`
|
|
3
3
|
`).map(line=>prefix+line).join(`
|
|
4
4
|
`);replaceRange(lineStart,end,prefixed,lineStart,lineStart+prefixed.length)}function applyHeading(level){prefixLines(`${`#`.repeat(level)} `)}function insertLink(){let el=textareaEl.value;if(!el)return;let value=__props.modelValue??``;let start=el.selectionStart??value.length;let end=el.selectionEnd??value.length;let selected=value.slice(start,end)||labels.value.toolbar.link.toLowerCase();let urlStart=start+selected.length+3;replaceRange(start,end,`[${selected}](url)`,urlStart,urlStart+3)}function insertImage(){let el=textareaEl.value;if(!el)return;let value=__props.modelValue??``;let start=el.selectionStart??value.length;let end=el.selectionEnd??value.length;let selected=value.slice(start,end)||`alt`;let urlStart=start+selected.length+4;replaceRange(start,end,``,urlStart,urlStart+3)}function insertCodeBlock(){let el=textareaEl.value;if(!el)return;let value=__props.modelValue??``;let start=el.selectionStart??value.length;let end=el.selectionEnd??value.length;let selected=value.slice(start,end);let caret=start+4;replaceRange(start,end,`\`\`\`\n${selected}\n\`\`\``,caret,caret+selected.length)}function insertTable(){let el=textareaEl.value;if(!el)return;let start=el.selectionStart??0;replaceRange(start,el.selectionEnd??0,`| Header | Header |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as hasSlotContent}from"./hasSlotContent.rEQOMGV4.js";import{t as getColor}from"./types.BkdDF2d8.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{Fragment,Teleport,Transition,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineComponent,mergeModels,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,onUnmounted,openBlock,renderSlot,unref,useAttrs,useModel,useTemplateRef,watch,withCtx}from"vue";import{autoPlacement,autoUpdate,flip,hide,offset,shift,useFloating}from"@floating-ui/vue";import{isClient}from"@maz-ui/utils/helpers/isClient";import '../assets/MazPopover.v29OvLUy.css';var _hoisted_1=[`id`,`aria-expanded`,`aria-haspopup`,`aria-describedby`,`aria-labelledby`,`aria-controls`];var _hoisted_2=[`id`,`role`,`aria-label`,`aria-labelledby`,`aria-describedby`,`aria-modal`,`tabindex`,`aria-live`];var MazPopover_default=_plugin_vue_export_helper_default(defineComponent({name:`MazPopover`,inheritAttrs:!1,__name:`MazPopover`,props:mergeModels({modelValue:{type:Boolean},position:{default:`auto`},preferPosition:{},fallbackPosition:{},trigger:{default:`click`},role:{default:`dialog`},ariaLabel:{},announceChanges:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},offset:{default:8},delay:{default:0},hoverDelay:{default:150},transition:{default:`scale-pop`},teleportTo:{default:`body`},overlayClass:{type:[Boolean,null,String,Object,Array]},panelClass:{type:[Boolean,null,String,Object,Array]},panelStyle:{type:[Boolean,null,String,Object,Array]},closeOnClickOutside:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},persistent:{type:Boolean,default:!1},id:{},ariaLabelledby:{},ariaDescribedby:{},color:{default:`surface`},trapFocus:{type:Boolean,default:!0},keepOpenOnHover:{type:Boolean,default:!1},block:{type:Boolean,default:!1},positionReference:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:mergeModels([`update:model-value`,`open`,`close`,`after-close-animation`,`toggle`],[`update:modelValue`]),setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let triggerId=useInstanceUniqId({componentName:`MazPopover`,providedId:__props.id});let attrs=useAttrs();let triggerRef=useTemplateRef(`trigger`);let panelRef=useTemplateRef(`panel`);let middleware=computed(()=>{let middleware=[offset(__props.offset),hide(),shift({padding:5})];return middleware.push(__props.position===`auto`&&!__props.preferPosition&&!__props.fallbackPosition?autoPlacement({allowedPlacements:[`top`,`bottom`,`left`,`right`]}):flip({fallbackPlacements:__props.fallbackPosition?[__props.fallbackPosition]:void 0})),middleware});let floatingPosition=computed(()=>__props.position===`auto`?__props.preferPosition:__props.position);let transitionName=computed(()=>[`scale-pop`,`scale-fade`].includes(__props.transition)?`maz-${__props.transition}`:__props.transition);function onTransitionAfterLeave(){emits(`after-close-animation`)}let positionRef=computed(()=>__props.positionReference?typeof __props.positionReference==`string`?triggerRef.value?.querySelector(__props.positionReference)||(isClient()?document.querySelector(__props.positionReference):null):__props.positionReference:triggerRef.value);let{floatingStyles,placement,update,middlewareData}=useFloating(computed(()=>positionRef.value||triggerRef.value),panelRef,{placement:floatingPosition,middleware,transform:!1,whileElementsMounted:autoUpdate});let computedPosition=computed(()=>placement.value??floatingPosition.value);let isOpen=useModel(__props,`modelValue`);let openTimeout=null;let closeTimeout=null;let initialFocusElement=null;let panelId=computed(()=>`${triggerId.value}-panel`);let rootStyles=computed(()=>attrs.style);let panelStyles=computed(()=>({...floatingStyles.value,pointerEvents:isOpen.value?`auto`:`none`}));let isTouchDevice=computed(()=>isClient()?`ontouchstart`in globalThis||navigator.maxTouchPoints>0:!1);let effectiveTrigger=computed(()=>__props.trigger===`adaptive`?isTouchDevice.value?`click`:`hover`:__props.trigger);let triggerEvents=computed(()=>{if(__props.disabled||effectiveTrigger.value===`manual`)return{};let events={};return effectiveTrigger.value===`hover`&&(events.onMouseenter=()=>{clearCloseTimeout(),open()},events.onMouseleave=close),effectiveTrigger.value===`click`&&(events.onClick=toggle),events});let panelEvents=computed(()=>effectiveTrigger.value===`hover`?{onMouseenter:()=>{__props.keepOpenOnHover&&clearCloseTimeout()},onMouseleave:()=>{__props.keepOpenOnHover&&close()}}:{});let panelClasses=computed(()=>[__props.overlayClass,__props.panelClass,`--position-${computedPosition.value}`,`--${getColor(__props.color)}`]);function cleanup(){clearOpenTimeout(),clearCloseTimeout(),isClient()&&(document.removeEventListener(`keydown`,onKeydown),document.removeEventListener(`pointerdown`,onDocumentPointerDown,!0))}function open(){__props.disabled||(clearCloseTimeout(),__props.delay>0?openTimeout=setTimeout(()=>{setOpen(!0)},__props.delay):setOpen(!0))}function close(){clearOpenTimeout(),__props.delay>0&&effectiveTrigger.value===`hover`?closeTimeout=setTimeout(()=>{setOpen(!1)},__props.delay):effectiveTrigger.value===`hover`&&__props.keepOpenOnHover?closeTimeout=setTimeout(()=>{setOpen(!1)},__props.hoverDelay):setOpen(!1)}function toggle(){isOpen.value?close():open()}function setOpen(value){isOpen.value=value,value?(emits(`open`),emits(`toggle`,value),nextTick(()=>{update(),setupFocusTrap(),isClient()&&document.addEventListener(`pointerdown`,onDocumentPointerDown,!0)})):(emits(`toggle`,value),emits(`close`),isClient()&&document.removeEventListener(`pointerdown`,onDocumentPointerDown,!0),__props.trapFocus&&restoreFocus())}function clearOpenTimeout(){openTimeout&&=(clearTimeout(openTimeout),null)}function clearCloseTimeout(){closeTimeout&&=(clearTimeout(closeTimeout),null)}function getTransformOrigin(position){switch(position){case`top`:return`center bottom`;case`top-start`:return`left bottom`;case`top-end`:return`right bottom`;case`bottom`:return`center top`;case`bottom-start`:return`left top`;case`bottom-end`:return`right top`;case`left`:return`right center`;case`left-start`:return`right top`;case`left-end`:return`right bottom`;case`right`:return`left center`;case`right-start`:return`left top`;case`right-end`:return`left bottom`;default:return`center`}}function setupFocusTrap(){__props.role===`tooltip`||effectiveTrigger.value===`hover`||!__props.trapFocus||!isClient()||(initialFocusElement=document.activeElement,nextTick(()=>{let focusableElements=panelRef.value?.querySelectorAll(`a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])`);focusableElements&&focusableElements.length>0?focusableElements[0].focus({preventScroll:!0}):panelRef.value?.focus({preventScroll:!0})}))}function restoreFocus(){__props.role===`tooltip`||effectiveTrigger.value===`hover`||!__props.trapFocus||!isClient()||nextTick(()=>{initialFocusElement?.focus({preventScroll:!0})})}function onKeydown(event){isOpen.value&&(event.key===`Escape`&&__props.closeOnEscape&&!__props.persistent&&(event.preventDefault(),close()),event.key===`Tab`&&__props.trapFocus&&handleTrapFocus(event))}function handleTrapFocus(event){if(!panelRef.value||!isClient())return;let focusableElements=panelRef.value.querySelectorAll(`a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])`);if(focusableElements.length===0)return;let firstElement=focusableElements[0];let lastElement=focusableElements[focusableElements.length-1];event.shiftKey?document.activeElement===firstElement&&(event.preventDefault(),lastElement.focus()):document.activeElement===lastElement&&(event.preventDefault(),firstElement.focus())}function onDocumentPointerDown(event){if(effectiveTrigger.value===`manual`||!__props.closeOnClickOutside||__props.persistent)return;let target=event.target;target&&(panelRef.value?.contains(target)||triggerRef.value?.contains(target)||close())}return watch(isOpen,(value,oldValue)=>{!isClient()||value===oldValue||(value?open():oldValue&&!value&&close())},{immediate:!0}),watch(()=>__props.position,()=>{isOpen.value&&nextTick(()=>update())}),onMounted(()=>{document.addEventListener(`keydown`,onKeydown)}),onBeforeUnmount(cleanup),onUnmounted(cleanup),__expose({open,close,toggle,isOpen,updatePosition:update,panelRef,onTransitionAfterLeave}),(_ctx,_cache)=>(openBlock(),createElementBlock(Fragment,null,[unref(hasSlotContent)(_ctx.$slots.trigger)?(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`m-popover m-reset-css maz:inline-block`,[unref(attrs).class,{"--open":isOpen.value,"--disabled":__props.disabled,"--block":__props.block,"maz:disabled-cursor":__props.disabled,"maz:w-full":__props.block}]]),style:normalizeStyle(rootStyles.value)},[createElementVNode(`div`,mergeProps({id:unref(triggerId),ref:`trigger`,role:`button`,class:`m-popover-trigger maz:inline-block maz:size-full`,"aria-expanded":__props.role===`dialog`||__props.role===`menu`?isOpen.value:void 0,"aria-haspopup":__props.role===`dialog`?`dialog`:void 0,"aria-describedby":__props.role===`tooltip`&&isOpen.value?panelId.value:__props.ariaDescribedby,"aria-labelledby":__props.ariaLabelledby,"aria-controls":panelId.value},triggerEvents.value),[renderSlot(_ctx.$slots,`trigger`,{open,close,toggle,isOpen:isOpen.value,trigger:effectiveTrigger.value},void 0,!0)],16,_hoisted_1)],6)):createCommentVNode(``,!0),(openBlock(),createBlock(Teleport,{to:__props.teleportTo},[createVNode(Transition,{name:transitionName.value,appear:``,onAfterLeave:onTransitionAfterLeave},{default:withCtx(()=>[isOpen.value?(openBlock(),createElementBlock(`div`,mergeProps({key:0,id:panelId.value,ref:`panel`,role:__props.role,"aria-label":__props.ariaLabel,"aria-labelledby":__props.role===`dialog`?__props.ariaLabelledby||unref(triggerId):void 0,"aria-describedby":__props.role===`dialog`?__props.ariaDescribedby:void 0,"aria-modal":__props.role===`dialog`?`true`:void 0,tabindex:__props.role===`dialog`?`-1`:void 0,class:[`m-popover-panel maz:fixed maz:z-default-backdrop maz:rounded-md maz:shadow-elevation maz:outline-hidden maz:drop-shadow-md`,panelClasses.value],"aria-live":__props.announceChanges?`polite`:void 0,style:[__props.panelStyle,panelStyles.value,{transformOrigin:getTransformOrigin(computedPosition.value),visibility:unref(middlewareData).hide?.referenceHidden?`hidden`:`visible`}]},panelEvents.value),[renderSlot(_ctx.$slots,`default`,{open,close,toggle,isOpen:isOpen.value},void 0,!0)],16,_hoisted_2)):createCommentVNode(``,!0)]),_:3},8,[`name`])],8,[`to`]))],64))}}),[[`__scopeId`,`data-v-82fb48e2`]]);export{MazPopover_default as t};
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as hasSlotContent}from"./hasSlotContent.rEQOMGV4.js";import{t as getColor}from"./types.BkdDF2d8.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{Fragment,Teleport,Transition,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineComponent,mergeModels,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,onUnmounted,openBlock,renderSlot,unref,useAttrs,useModel,useTemplateRef,watch,withCtx}from"vue";import{autoPlacement,autoUpdate,flip,hide,offset,shift,useFloating}from"@floating-ui/vue";import{isClient}from"@maz-ui/utils/helpers/isClient";import '../assets/MazPopover.CnEtNdIO.css';var _hoisted_1=[`id`,`aria-expanded`,`aria-haspopup`,`aria-describedby`,`aria-labelledby`,`aria-controls`];var _hoisted_2=[`id`,`role`,`aria-label`,`aria-labelledby`,`aria-describedby`,`aria-modal`,`tabindex`,`aria-live`];var MazPopover_default=_plugin_vue_export_helper_default(defineComponent({name:`MazPopover`,inheritAttrs:!1,__name:`MazPopover`,props:mergeModels({modelValue:{type:Boolean},position:{default:`auto`},preferPosition:{},fallbackPosition:{},trigger:{default:`click`},role:{default:`dialog`},ariaLabel:{},announceChanges:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},offset:{default:8},delay:{default:0},hoverDelay:{default:150},transition:{default:`scale-pop`},teleportTo:{default:`body`},overlayClass:{type:[Boolean,null,String,Object,Array]},panelClass:{type:[Boolean,null,String,Object,Array]},panelStyle:{type:[Boolean,null,String,Object,Array]},closeOnClickOutside:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},persistent:{type:Boolean,default:!1},id:{},ariaLabelledby:{},ariaDescribedby:{},color:{default:`surface`},trapFocus:{type:Boolean,default:!0},keepOpenOnHover:{type:Boolean,default:!1},block:{type:Boolean,default:!1},positionReference:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:mergeModels([`update:model-value`,`open`,`close`,`after-close-animation`,`toggle`],[`update:modelValue`]),setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let triggerId=useInstanceUniqId({componentName:`MazPopover`,providedId:__props.id});let attrs=useAttrs();let triggerRef=useTemplateRef(`trigger`);let panelRef=useTemplateRef(`panel`);let middleware=computed(()=>{let middleware=[offset(__props.offset),hide(),shift({padding:5})];return middleware.push(__props.position===`auto`&&!__props.preferPosition&&!__props.fallbackPosition?autoPlacement({allowedPlacements:[`top`,`bottom`,`left`,`right`]}):flip({fallbackPlacements:__props.fallbackPosition?[__props.fallbackPosition]:void 0})),middleware});let floatingPosition=computed(()=>__props.position===`auto`?__props.preferPosition:__props.position);let transitionName=computed(()=>[`scale-pop`,`scale-fade`].includes(__props.transition)?`maz-${__props.transition}`:__props.transition);function onTransitionAfterLeave(){emits(`after-close-animation`)}let positionRef=computed(()=>__props.positionReference?typeof __props.positionReference==`string`?triggerRef.value?.querySelector(__props.positionReference)||(isClient()?document.querySelector(__props.positionReference):null):__props.positionReference:triggerRef.value);let{floatingStyles,placement,update,middlewareData}=useFloating(computed(()=>positionRef.value||triggerRef.value),panelRef,{placement:floatingPosition,middleware,transform:!1,whileElementsMounted:autoUpdate});let computedPosition=computed(()=>placement.value??floatingPosition.value);let isOpen=useModel(__props,`modelValue`);let openTimeout=null;let closeTimeout=null;let initialFocusElement=null;let panelId=computed(()=>`${triggerId.value}-panel`);let rootStyles=computed(()=>attrs.style);let panelStyles=computed(()=>({...floatingStyles.value,pointerEvents:isOpen.value?`auto`:`none`}));let isTouchDevice=computed(()=>isClient()?`ontouchstart`in globalThis||navigator.maxTouchPoints>0:!1);let effectiveTrigger=computed(()=>__props.trigger===`adaptive`?isTouchDevice.value?`click`:`hover`:__props.trigger);let triggerEvents=computed(()=>{if(__props.disabled||effectiveTrigger.value===`manual`)return{};let events={};return effectiveTrigger.value===`hover`&&(events.onMouseenter=()=>{clearCloseTimeout(),open()},events.onMouseleave=close),effectiveTrigger.value===`click`&&(events.onClick=toggle),events});let panelEvents=computed(()=>effectiveTrigger.value===`hover`?{onMouseenter:()=>{__props.keepOpenOnHover&&clearCloseTimeout()},onMouseleave:()=>{__props.keepOpenOnHover&&close()}}:{});let panelClasses=computed(()=>[__props.overlayClass,__props.panelClass,`--position-${computedPosition.value}`,`--${getColor(__props.color)}`]);function cleanup(){clearOpenTimeout(),clearCloseTimeout(),isClient()&&(document.removeEventListener(`keydown`,onKeydown),document.removeEventListener(`pointerdown`,onDocumentPointerDown,!0))}function open(){__props.disabled||(clearCloseTimeout(),__props.delay>0?openTimeout=setTimeout(()=>{setOpen(!0)},__props.delay):setOpen(!0))}function close(){clearOpenTimeout(),__props.delay>0&&effectiveTrigger.value===`hover`?closeTimeout=setTimeout(()=>{setOpen(!1)},__props.delay):effectiveTrigger.value===`hover`&&__props.keepOpenOnHover?closeTimeout=setTimeout(()=>{setOpen(!1)},__props.hoverDelay):setOpen(!1)}function toggle(){isOpen.value?close():open()}function setOpen(value){isOpen.value=value,value?(emits(`open`),emits(`toggle`,value),nextTick(()=>{update(),setupFocusTrap(),isClient()&&document.addEventListener(`pointerdown`,onDocumentPointerDown,!0)})):(emits(`toggle`,value),emits(`close`),isClient()&&document.removeEventListener(`pointerdown`,onDocumentPointerDown,!0),__props.trapFocus&&restoreFocus())}function clearOpenTimeout(){openTimeout&&=(clearTimeout(openTimeout),null)}function clearCloseTimeout(){closeTimeout&&=(clearTimeout(closeTimeout),null)}function getTransformOrigin(position){switch(position){case`top`:return`center bottom`;case`top-start`:return`left bottom`;case`top-end`:return`right bottom`;case`bottom`:return`center top`;case`bottom-start`:return`left top`;case`bottom-end`:return`right top`;case`left`:return`right center`;case`left-start`:return`right top`;case`left-end`:return`right bottom`;case`right`:return`left center`;case`right-start`:return`left top`;case`right-end`:return`left bottom`;default:return`center`}}function setupFocusTrap(){__props.role===`tooltip`||effectiveTrigger.value===`hover`||!__props.trapFocus||!isClient()||(initialFocusElement=document.activeElement,nextTick(()=>{let focusableElements=panelRef.value?.querySelectorAll(`a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])`);focusableElements&&focusableElements.length>0?focusableElements[0].focus({preventScroll:!0}):panelRef.value?.focus({preventScroll:!0})}))}function restoreFocus(){__props.role===`tooltip`||effectiveTrigger.value===`hover`||!__props.trapFocus||!isClient()||nextTick(()=>{initialFocusElement?.focus({preventScroll:!0})})}function onKeydown(event){isOpen.value&&(event.key===`Escape`&&__props.closeOnEscape&&!__props.persistent&&(event.preventDefault(),close()),event.key===`Tab`&&__props.trapFocus&&handleTrapFocus(event))}function handleTrapFocus(event){if(!panelRef.value||!isClient())return;let focusableElements=panelRef.value.querySelectorAll(`a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])`);if(focusableElements.length===0)return;let firstElement=focusableElements[0];let lastElement=focusableElements[focusableElements.length-1];event.shiftKey?document.activeElement===firstElement&&(event.preventDefault(),lastElement.focus()):document.activeElement===lastElement&&(event.preventDefault(),firstElement.focus())}function onDocumentPointerDown(event){if(effectiveTrigger.value===`manual`||!__props.closeOnClickOutside||__props.persistent)return;let target=event.target;target&&(panelRef.value?.contains(target)||triggerRef.value?.contains(target)||close())}return watch(isOpen,(value,oldValue)=>{!isClient()||value===oldValue||(value?open():oldValue&&!value&&close())},{immediate:!0}),watch(()=>__props.position,()=>{isOpen.value&&nextTick(()=>update())}),onMounted(()=>{document.addEventListener(`keydown`,onKeydown)}),onBeforeUnmount(cleanup),onUnmounted(cleanup),__expose({open,close,toggle,isOpen,updatePosition:update,panelRef,onTransitionAfterLeave}),(_ctx,_cache)=>(openBlock(),createElementBlock(Fragment,null,[unref(hasSlotContent)(_ctx.$slots.trigger)?(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`m-popover m-reset-css maz:inline-block`,[unref(attrs).class,{"--open":isOpen.value,"--disabled":__props.disabled,"--block":__props.block,"maz:disabled-cursor":__props.disabled,"maz:w-full":__props.block}]]),style:normalizeStyle(rootStyles.value)},[createElementVNode(`div`,mergeProps({id:unref(triggerId),ref:`trigger`,role:`button`,class:`m-popover-trigger maz:inline-block maz:size-full`,"aria-expanded":__props.role===`dialog`||__props.role===`menu`?isOpen.value:void 0,"aria-haspopup":__props.role===`dialog`?`dialog`:void 0,"aria-describedby":__props.role===`tooltip`&&isOpen.value?panelId.value:__props.ariaDescribedby,"aria-labelledby":__props.ariaLabelledby,"aria-controls":panelId.value},triggerEvents.value),[renderSlot(_ctx.$slots,`trigger`,{open,close,toggle,isOpen:isOpen.value,trigger:effectiveTrigger.value},void 0,!0)],16,_hoisted_1)],6)):createCommentVNode(``,!0),(openBlock(),createBlock(Teleport,{to:__props.teleportTo},[createVNode(Transition,{name:transitionName.value,appear:``,onAfterLeave:onTransitionAfterLeave},{default:withCtx(()=>[isOpen.value?(openBlock(),createElementBlock(`div`,mergeProps({key:0,id:panelId.value,ref:`panel`,role:__props.role,"aria-label":__props.ariaLabel,"aria-labelledby":__props.role===`dialog`?__props.ariaLabelledby||unref(triggerId):void 0,"aria-describedby":__props.role===`dialog`?__props.ariaDescribedby:void 0,"aria-modal":__props.role===`dialog`?`true`:void 0,tabindex:__props.role===`dialog`?`-1`:void 0,class:[`m-popover-panel maz:fixed maz:z-default-backdrop maz:rounded-md maz:shadow-elevation maz:outline-hidden maz:drop-shadow-md`,panelClasses.value],"aria-live":__props.announceChanges?`polite`:void 0,style:[__props.panelStyle,panelStyles.value,{transformOrigin:getTransformOrigin(computedPosition.value),visibility:unref(middlewareData).hide?.referenceHidden?`hidden`:`visible`}]},panelEvents.value),[renderSlot(_ctx.$slots,`default`,{open,close,toggle,isOpen:isOpen.value},void 0,!0)],16,_hoisted_2)):createCommentVNode(``,!0)]),_:3},8,[`name`])],8,[`to`]))],64))}}),[[`__scopeId`,`data-v-9d68e50d`]]);export{MazPopover_default as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as hasSlotContent}from"./hasSlotContent.rEQOMGV4.js";import{t as MazPopover_default}from"./MazPopover.mlqNR5Y3.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useStringMatching}from"../composables/useStringMatching.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazIcon_default}from"./MazIcon.CblJ-8Iu.js";import{t as MazInput_default}from"./MazInput.CfAgOEV4.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createSlots,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeUnmount,openBlock,ref,renderList,renderSlot,toDisplayString,unref,useModel,useTemplateRef,watch,withCtx,withModifiers}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{isClient}from"@maz-ui/utils/helpers/isClient";import{normalizeString}from"@maz-ui/utils/helpers/normalizeString";import{MazMagnifyingGlass}from"@maz-ui/icons/lazy/MazMagnifyingGlass";import{MazNoSymbol}from"@maz-ui/icons/lazy/MazNoSymbol";import{MazChevronDown}from"@maz-ui/icons/raw/MazChevronDown";import{debounceCallback}from"@maz-ui/utils/helpers/debounceCallback";import '../assets/MazSelect.Bj7tG0KH.css';var _hoisted_1=[`disabled`,`aria-label`];var _hoisted_2=[`id`];var _hoisted_3={key:0,class:`m-select-list__search-wrapper`};var _hoisted_4={class:`m-select-list__no-results`};var _hoisted_5={key:2,ref:`optionListWrapper`,class:`m-select-list__scroll-wrapper`,tabindex:`-1`};var _hoisted_6={class:`m-select-list-optgroup`};var _hoisted_7=[`tabindex`,`onClick`];var MazSelect_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazSelect`,props:mergeModels({style:{type:[Boolean,null,String,Object,Array],default:()=>void 0},class:{type:[Boolean,null,String,Object,Array],default:()=>void 0},id:{default:()=>void 0},label:{},placeholder:{},modelValue:{default:()=>void 0},options:{},optionValueKey:{default:`value`},optionLabelKey:{default:`label`},optionInputValueKey:{default:`label`},listPosition:{default:`auto`},preferPosition:{default:`bottom-start`},fallbackPosition:{default:`top-start`},itemHeight:{default:()=>void 0},maxListHeight:{default:240},maxListWidth:{default:()=>void 0},minListHeight:{default:()=>void 0},minListWidth:{default:()=>void 0},size:{},color:{default:`primary`},search:{type:Boolean},searchFunction:{type:Function},searchThreshold:{default:.75},multiple:{type:Boolean,default:!1},required:{type:Boolean},disabled:{type:Boolean},block:{type:Boolean},autocomplete:{default:`off`},translations:{},formatInputValue:{type:Function},transition:{default:`scale-fade`}},{open:{default:!1},openModifiers:{}}),emits:mergeModels([`close`,`open`,`blur`,`focus`,`change`,`input`,`update:model-value`,`selected-option`],[`update:open`]),setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let MazCheckbox=defineAsyncComponent(()=>import(`../components/MazCheckbox.js`));let popoverComponent=useTemplateRef(`popover`);let inputRef=useTemplateRef(`input`);let searchInputRef=useTemplateRef(`searchInput`);let optionListElement=useTemplateRef(`optionListRef`);let optionListWrapperRef=useTemplateRef(`optionListWrapper`);let selectedTextColor=computed(()=>`var(--maz-${__props.color})`);let selectedBgColor=computed(()=>`color-mix(in srgb, var(--maz-${__props.color}) 10%, transparent)`);let SIZE_TEXT_CLASS={mini:`maz:text-xs`,xs:`maz:text-xs`,sm:`maz:text-sm`,md:`maz:text-base`,lg:`maz:text-lg`,xl:`maz:text-xl`};let{t}=useTranslations();let messages=computed(()=>({searchPlaceholder:__props.translations?.searchPlaceholder||t(`select.searchPlaceholder`)}));let isOpen=useModel(__props,`open`);let{size}=useGlobalConfig(`MazSelect`,{size:`md`});let instanceId=useInstanceUniqId({componentName:`MazSelect`,providedId:__props.id});function getOptionPayload(option){return{[__props.optionValueKey]:option,[__props.optionLabelKey]:option,[__props.optionInputValueKey]:option}}function getNormalizedOptionPayload(option){return{...option,[__props.optionValueKey]:option[__props.optionValueKey],[__props.optionLabelKey]:option[__props.optionLabelKey],[__props.optionInputValueKey]:option[__props.optionInputValueKey]}}function getNormalizedOptions(options){let normalizedOptions=[];if(!options?.length)return[];for(let option of options)typeof option==`string`||typeof option==`number`||typeof option==`boolean`?normalizedOptions.push(getOptionPayload(option)):typeof option==`object`&&`options`in option&&Array.isArray(option.options)?normalizedOptions.push({label:option.label,isOptGroup:!0},...option.options.map(opt=>typeof opt==`string`||typeof opt==`number`||typeof opt==`boolean`?getOptionPayload(opt):getNormalizedOptionPayload(opt))):normalizedOptions.push(getNormalizedOptionPayload(option));return normalizedOptions}let optionsNormalized=computed(()=>getNormalizedOptions(__props.options??[]));function isOptionInSelection(option){return isNullOrUndefined(option[__props.optionValueKey])?!1:__props.multiple?Array.isArray(__props.modelValue)&&__props.modelValue.includes(option[__props.optionValueKey]):__props.modelValue===option[__props.optionValueKey]}let selectedOptions=computed(()=>optionsNormalized.value?.filter(isOptionInSelection)??[]);function isNullOrUndefined(value){return value==null}function isSelectedOption(option){return(selectedOptions.value?.some(selectedOption=>selectedOption[__props.optionValueKey]===option[__props.optionValueKey])??!1)&&!isNullOrUndefined(option[__props.optionValueKey])}let inputValue=computed(()=>{if(__props.multiple&&__props.modelValue&&Array.isArray(__props.modelValue)){let values=__props.modelValue.map(value=>optionsNormalized.value?.find(option=>option[__props.optionValueKey]===value)?.[__props.optionInputValueKey]);return __props.formatInputValue?__props.formatInputValue(values):values.join(`, `)}let selectedOption=optionsNormalized.value?.find(option=>option[__props.optionValueKey]===__props.modelValue);let value=isNullOrUndefined(__props.modelValue)?void 0:selectedOption?.[__props.optionInputValueKey];return __props.formatInputValue?__props.formatInputValue(value):value});let searchQuery=ref();let query=ref(``);function searchInValue(value,query){return query&&value&&normalizeString(value).includes(normalizeString(query))}function getFilteredOptionWithQuery(query){return query?optionsNormalized.value?.filter(option=>{let searchValue=option[__props.optionLabelKey];let searchValue3=option[__props.optionValueKey];let searchValue2=option[__props.optionInputValueKey];let threshold=__props.searchThreshold;return searchInValue(searchValue,query)||searchInValue(searchValue2,query)||searchInValue(searchValue3,query)||typeof searchValue==`string`&&useStringMatching(searchValue,query,threshold).isMatching.value||typeof searchValue2==`string`&&useStringMatching(searchValue2,query,threshold).isMatching.value||typeof searchValue3==`string`&&useStringMatching(searchValue3,query,threshold).isMatching.value}):optionsNormalized.value}let optionList=computed(()=>__props.searchFunction&&__props.search&&searchQuery.value?getNormalizedOptions(__props.searchFunction(searchQuery.value,__props.options??[])??[]):getFilteredOptionWithQuery(searchQuery.value));async function onOpenList(){let selectedIndex=optionList.value?.findIndex(option=>isSelectedOption(option));await scrollToOptionIndex(selectedIndex),emits(`open`)}function focusMainInput(){inputRef.value?.$el?.querySelector(`input`)?.focus()}function emitInputMainInput(){inputRef.value?.$el?.querySelector(`input`)?.dispatchEvent(new Event(`input`))}function focusSearchInputAndSetQuery(q){searchQuery.value=q,searchInputRef.value?.$el?.querySelector(`input`)?.focus()}function searchOptionWithQuery(keyPressed){keyPressed===`Backspace`&&query.value&&query.value.length>0?query.value=query.value.slice(0,-1):query.value+=keyPressed;let filteredOptions=getFilteredOptionWithQuery(query.value);if(!filteredOptions?.length)return;let optionIndex=optionList.value?.findIndex(option=>option[__props.optionValueKey]===filteredOptions[0][__props.optionValueKey]);typeof optionIndex!=`number`||optionIndex===-1||(scrollToOptionIndex(optionIndex),debounceCallback(()=>{query.value=``},1e3))}let isLetterOrNumberRegex=/^([\dA-Za-z\u0400-\u04FF])$/;function mainInputKeyboardHandler(event){if(event.ctrlKey||event.metaKey||event.altKey)return;let keyPressed=event.key;(keyPressed===`ArrowDown`||keyPressed===`ArrowUp`||isLetterOrNumberRegex.test(keyPressed))&&!isOpen.value&&(event.preventDefault(),popoverComponent.value?.open()),isLetterOrNumberRegex.test(keyPressed)&&__props.search&&(event.preventDefault(),event.stopPropagation(),focusSearchInputAndSetQuery(keyPressed))}async function scrollToOptionIndex(index){if(await nextTick(),typeof index!=`number`||index<0)return;let item=optionListElement.value?.querySelector(`.m-select-list-item:nth-child(${index+1})`);if(item&&optionListWrapperRef.value){let wrapperRect=optionListWrapperRef.value.getBoundingClientRect();let itemRect=item.getBoundingClientRect();let scrollTop=item.offsetTop-wrapperRect.height/2-itemRect.height;optionListWrapperRef.value.scrollTo?.({top:scrollTop,behavior:`auto`}),setTimeout(()=>{item.focus({preventScroll:!0})},100)}}function updateValue(inputOption,mustCloseList=!0){mustCloseList&&!__props.multiple&&nextTick(()=>{popoverComponent.value?.close()}),searchQuery.value=``;let isAlreadySelected=selectedOptions.value?.some(option=>option[__props.optionValueKey]===inputOption[__props.optionValueKey]);let newValue=selectedOptions.value;isAlreadySelected&&__props.multiple?newValue=newValue?.filter(option=>option[__props.optionValueKey]!==inputOption[__props.optionValueKey]):__props.multiple?newValue.push(inputOption):newValue=[inputOption];let selectedValues=newValue.map(option=>option[__props.optionValueKey]);emits(`update:model-value`,__props.multiple?selectedValues:selectedValues[0]),emits(`selected-option`,inputOption),emitInputMainInput(),focusMainInput()}function keydownHandler(event){let keyPressed=event.key;if(keyPressed===`ArrowDown`||keyPressed===`ArrowUp`){event.preventDefault();let itemLength=optionList.value?.length;if(!itemLength)return;let currentElement=document.activeElement;let itemsElements=document.querySelectorAll(`#${instanceId.value}-option-list .m-select-list-item`);let currentIndex=[...itemsElements].indexOf(currentElement);if(currentIndex===-1){itemsElements[0]?.focus({preventScroll:!0});return}itemsElements[keyPressed===`ArrowDown`?(currentIndex+1)%itemLength:(currentIndex-1+itemLength)%itemLength]?.focus()}else !__props.search&&isLetterOrNumberRegex.test(keyPressed)&&searchOptionWithQuery(keyPressed)}function updateListPosition(){nextTick(()=>{popoverComponent.value?.updatePosition()})}return watch(isOpen,value=>{isClient()&&(value?document.addEventListener(`keydown`,keydownHandler):document.removeEventListener(`keydown`,keydownHandler))},{immediate:!0}),onBeforeUnmount(()=>{document.removeEventListener(`keydown`,keydownHandler)}),__expose({open:()=>{popoverComponent.value?.open()},close:()=>{popoverComponent.value?.close()}}),(_ctx,_cache)=>(openBlock(),createBlock(MazPopover_default,{id:`${unref(instanceId)}-popover`,ref:`popover`,modelValue:isOpen.value,"onUpdate:modelValue":_cache[5]||=$event=>isOpen.value=$event,class:normalizeClass([`m-select m-reset-css maz:relative maz:inline-flex maz:align-top`,[{"--is-open":isOpen.value,"--disabled":__props.disabled},__props.class,`--${unref(size)}`,SIZE_TEXT_CLASS[unref(size)]]]),style:normalizeStyle(__props.style),trigger:`click`,block:__props.block,transition:__props.transition,offset:0,position:__props.listPosition,disabled:__props.disabled,"prefer-position":__props.preferPosition,"fallback-position":__props.fallbackPosition,"position-reference":`#${unref(instanceId)}-popover .m-input-wrapper`,onClose:_cache[6]||=$event=>emits(`close`),onOpen:onOpenList},{trigger:withCtx(({close,open:openPicker,toggle:togglePopover})=>[createVNode(MazInput_default,mergeProps({id:unref(instanceId),ref:`input`,class:`m-select-input`},_ctx.$attrs,{required:__props.required,"border-active":isOpen.value,color:__props.color,"model-value":inputValue.value,size:unref(size),block:__props.block,placeholder:__props.placeholder,label:__props.label,autocomplete:__props.autocomplete,disabled:__props.disabled,readonly:``,onChange:_cache[0]||=$event=>emits(`change`,$event),onInput:_cache[1]||=$event=>emits(`input`,$event),onFocus:_cache[2]||=$event=>emits(`focus`,$event),onBlur:_cache[3]||=$event=>emits(`blur`,$event),onKeydown:mainInputKeyboardHandler}),createSlots({"end-icon":withCtx(()=>[renderSlot(_ctx.$slots,`end-icon`,{isOpen:isOpen.value,close,open:openPicker,toggle:togglePopover},()=>[createElementVNode(`button`,{tabindex:`-1`,disabled:__props.disabled,type:`button`,class:`m-select-input__toggle-button maz-custom`,"aria-label":`${isOpen.value?`collapse`:`expand`} list of options`},[createVNode(MazIcon_default,{icon:unref(MazChevronDown),class:`m-select-chevron`},null,8,[`icon`])],8,_hoisted_1)],!0)]),_:2},[unref(hasSlotContent)(_ctx.$slots[`start-icon`])?{name:`start-icon`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`start-icon`,{isOpen:isOpen.value,close,open:openPicker,toggle:togglePopover},void 0,!0)]),key:`0`}:void 0]),1040,[`id`,`required`,`border-active`,`color`,`model-value`,`size`,`block`,`placeholder`,`label`,`autocomplete`,`disabled`])]),default:withCtx(({close,open:openPicker,toggle:togglePopover})=>[createElementVNode(`div`,{id:`${unref(instanceId)}-option-list`,ref:`optionListRef`,class:normalizeClass([`m-select-list`,[`--${unref(size)}`,SIZE_TEXT_CLASS[unref(size)]]]),style:normalizeStyle([{maxHeight:`${__props.maxListHeight}px`,maxWidth:`${__props.maxListWidth}px`,minHeight:`${__props.minListHeight}px`,minWidth:`${__props.minListWidth}px`,"--selected-bg-color":selectedBgColor.value,"--selected-text-color":selectedTextColor.value}])},[__props.search?(openBlock(),createElementBlock(`div`,_hoisted_3,[createVNode(MazInput_default,{ref:`searchInput`,modelValue:searchQuery.value,"onUpdate:modelValue":[_cache[4]||=$event=>searchQuery.value=$event,updateListPosition],size:`sm`,disabled:__props.disabled,color:__props.color,placeholder:messages.value.searchPlaceholder,name:`search`,inputmode:`search`,autocomplete:`off`,block:``,class:`m-select-list__search-input maz:flex-none`,"start-icon":unref(MazMagnifyingGlass)},null,8,[`modelValue`,`disabled`,`color`,`placeholder`,`start-icon`])])):createCommentVNode(``,!0),!optionList.value||optionList.value.length<=0?renderSlot(_ctx.$slots,`no-results`,{key:1},()=>[createElementVNode(`span`,_hoisted_4,[createVNode(unref(MazNoSymbol),{class:`maz:size-6 maz:text-foreground`})])],!0):(openBlock(),createElementBlock(`div`,_hoisted_5,[(openBlock(!0),createElementBlock(Fragment,null,renderList(optionList.value,(option,i)=>(openBlock(),createElementBlock(Fragment,{key:i},[option.label&&option.isOptGroup?renderSlot(_ctx.$slots,`optgroup`,{key:0,label:option.label},()=>[createElementVNode(`span`,_hoisted_6,toDisplayString(option.label),1)],!0):(openBlock(),createElementBlock(`button`,{key:1,type:`button`,tabindex:__props.multiple?-1:0,class:normalizeClass([`m-select-list-item maz-custom maz:flex-none`,[{"--is-selected":isSelectedOption(option),"--is-none-value":isNullOrUndefined(option[__props.optionValueKey])}]]),style:normalizeStyle(__props.itemHeight?{height:`${__props.itemHeight}px`}:void 0),onClick:withModifiers($event=>updateValue(option,!0),[`prevent`,`stop`])},[__props.multiple?(openBlock(),createBlock(unref(MazCheckbox),{key:0,"model-value":isSelectedOption(option),size:`sm`,color:__props.color},null,8,[`model-value`,`color`])):createCommentVNode(``,!0),renderSlot(_ctx.$slots,`default`,{option,isSelected:isSelectedOption(option),isOpen:isOpen.value,close,open:openPicker,toggle:togglePopover},()=>[createElementVNode(`span`,null,toDisplayString(option[__props.optionLabelKey]),1)],!0)],14,_hoisted_7))],64))),128))],512))],14,_hoisted_2)]),_:3},8,[`id`,`modelValue`,`class`,`style`,`block`,`transition`,`position`,`disabled`,`prefer-position`,`fallback-position`,`position-reference`]))}}),[[`__scopeId`,`data-v-43ed07ec`]]);export{MazSelect_default as t};
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as hasSlotContent}from"./hasSlotContent.rEQOMGV4.js";import{t as MazPopover_default}from"./MazPopover.pWRD93tY.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useStringMatching}from"../composables/useStringMatching.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazIcon_default}from"./MazIcon.CblJ-8Iu.js";import{t as MazInput_default}from"./MazInput.CfAgOEV4.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createSlots,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeUnmount,openBlock,ref,renderList,renderSlot,toDisplayString,unref,useModel,useTemplateRef,watch,withCtx,withModifiers}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{isClient}from"@maz-ui/utils/helpers/isClient";import{normalizeString}from"@maz-ui/utils/helpers/normalizeString";import{MazMagnifyingGlass}from"@maz-ui/icons/lazy/MazMagnifyingGlass";import{MazNoSymbol}from"@maz-ui/icons/lazy/MazNoSymbol";import{MazChevronDown}from"@maz-ui/icons/raw/MazChevronDown";import{debounceCallback}from"@maz-ui/utils/helpers/debounceCallback";import '../assets/MazSelect.Bj7tG0KH.css';var _hoisted_1=[`disabled`,`aria-label`];var _hoisted_2=[`id`];var _hoisted_3={key:0,class:`m-select-list__search-wrapper`};var _hoisted_4={class:`m-select-list__no-results`};var _hoisted_5={key:2,ref:`optionListWrapper`,class:`m-select-list__scroll-wrapper`,tabindex:`-1`};var _hoisted_6={class:`m-select-list-optgroup`};var _hoisted_7=[`tabindex`,`onClick`];var MazSelect_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazSelect`,props:mergeModels({style:{type:[Boolean,null,String,Object,Array],default:()=>void 0},class:{type:[Boolean,null,String,Object,Array],default:()=>void 0},id:{default:()=>void 0},label:{},placeholder:{},modelValue:{default:()=>void 0},options:{},optionValueKey:{default:`value`},optionLabelKey:{default:`label`},optionInputValueKey:{default:`label`},listPosition:{default:`auto`},preferPosition:{default:`bottom-start`},fallbackPosition:{default:`top-start`},itemHeight:{default:()=>void 0},maxListHeight:{default:240},maxListWidth:{default:()=>void 0},minListHeight:{default:()=>void 0},minListWidth:{default:()=>void 0},size:{},color:{default:`primary`},search:{type:Boolean},searchFunction:{type:Function},searchThreshold:{default:.75},multiple:{type:Boolean,default:!1},required:{type:Boolean},disabled:{type:Boolean},block:{type:Boolean},autocomplete:{default:`off`},translations:{},formatInputValue:{type:Function},transition:{default:`scale-fade`}},{open:{default:!1},openModifiers:{}}),emits:mergeModels([`close`,`open`,`blur`,`focus`,`change`,`input`,`update:model-value`,`selected-option`],[`update:open`]),setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let MazCheckbox=defineAsyncComponent(()=>import(`../components/MazCheckbox.js`));let popoverComponent=useTemplateRef(`popover`);let inputRef=useTemplateRef(`input`);let searchInputRef=useTemplateRef(`searchInput`);let optionListElement=useTemplateRef(`optionListRef`);let optionListWrapperRef=useTemplateRef(`optionListWrapper`);let selectedTextColor=computed(()=>`var(--maz-${__props.color})`);let selectedBgColor=computed(()=>`color-mix(in srgb, var(--maz-${__props.color}) 10%, transparent)`);let SIZE_TEXT_CLASS={mini:`maz:text-xs`,xs:`maz:text-xs`,sm:`maz:text-sm`,md:`maz:text-base`,lg:`maz:text-lg`,xl:`maz:text-xl`};let{t}=useTranslations();let messages=computed(()=>({searchPlaceholder:__props.translations?.searchPlaceholder||t(`select.searchPlaceholder`)}));let isOpen=useModel(__props,`open`);let{size}=useGlobalConfig(`MazSelect`,{size:`md`});let instanceId=useInstanceUniqId({componentName:`MazSelect`,providedId:__props.id});function getOptionPayload(option){return{[__props.optionValueKey]:option,[__props.optionLabelKey]:option,[__props.optionInputValueKey]:option}}function getNormalizedOptionPayload(option){return{...option,[__props.optionValueKey]:option[__props.optionValueKey],[__props.optionLabelKey]:option[__props.optionLabelKey],[__props.optionInputValueKey]:option[__props.optionInputValueKey]}}function getNormalizedOptions(options){let normalizedOptions=[];if(!options?.length)return[];for(let option of options)typeof option==`string`||typeof option==`number`||typeof option==`boolean`?normalizedOptions.push(getOptionPayload(option)):typeof option==`object`&&`options`in option&&Array.isArray(option.options)?normalizedOptions.push({label:option.label,isOptGroup:!0},...option.options.map(opt=>typeof opt==`string`||typeof opt==`number`||typeof opt==`boolean`?getOptionPayload(opt):getNormalizedOptionPayload(opt))):normalizedOptions.push(getNormalizedOptionPayload(option));return normalizedOptions}let optionsNormalized=computed(()=>getNormalizedOptions(__props.options??[]));function isOptionInSelection(option){return isNullOrUndefined(option[__props.optionValueKey])?!1:__props.multiple?Array.isArray(__props.modelValue)&&__props.modelValue.includes(option[__props.optionValueKey]):__props.modelValue===option[__props.optionValueKey]}let selectedOptions=computed(()=>optionsNormalized.value?.filter(isOptionInSelection)??[]);function isNullOrUndefined(value){return value==null}function isSelectedOption(option){return(selectedOptions.value?.some(selectedOption=>selectedOption[__props.optionValueKey]===option[__props.optionValueKey])??!1)&&!isNullOrUndefined(option[__props.optionValueKey])}let inputValue=computed(()=>{if(__props.multiple&&__props.modelValue&&Array.isArray(__props.modelValue)){let values=__props.modelValue.map(value=>optionsNormalized.value?.find(option=>option[__props.optionValueKey]===value)?.[__props.optionInputValueKey]);return __props.formatInputValue?__props.formatInputValue(values):values.join(`, `)}let selectedOption=optionsNormalized.value?.find(option=>option[__props.optionValueKey]===__props.modelValue);let value=isNullOrUndefined(__props.modelValue)?void 0:selectedOption?.[__props.optionInputValueKey];return __props.formatInputValue?__props.formatInputValue(value):value});let searchQuery=ref();let query=ref(``);function searchInValue(value,query){return query&&value&&normalizeString(value).includes(normalizeString(query))}function getFilteredOptionWithQuery(query){return query?optionsNormalized.value?.filter(option=>{let searchValue=option[__props.optionLabelKey];let searchValue3=option[__props.optionValueKey];let searchValue2=option[__props.optionInputValueKey];let threshold=__props.searchThreshold;return searchInValue(searchValue,query)||searchInValue(searchValue2,query)||searchInValue(searchValue3,query)||typeof searchValue==`string`&&useStringMatching(searchValue,query,threshold).isMatching.value||typeof searchValue2==`string`&&useStringMatching(searchValue2,query,threshold).isMatching.value||typeof searchValue3==`string`&&useStringMatching(searchValue3,query,threshold).isMatching.value}):optionsNormalized.value}let optionList=computed(()=>__props.searchFunction&&__props.search&&searchQuery.value?getNormalizedOptions(__props.searchFunction(searchQuery.value,__props.options??[])??[]):getFilteredOptionWithQuery(searchQuery.value));async function onOpenList(){let selectedIndex=optionList.value?.findIndex(option=>isSelectedOption(option));await scrollToOptionIndex(selectedIndex),emits(`open`)}function focusMainInput(){inputRef.value?.$el?.querySelector(`input`)?.focus()}function emitInputMainInput(){inputRef.value?.$el?.querySelector(`input`)?.dispatchEvent(new Event(`input`))}function focusSearchInputAndSetQuery(q){searchQuery.value=q,searchInputRef.value?.$el?.querySelector(`input`)?.focus()}function searchOptionWithQuery(keyPressed){keyPressed===`Backspace`&&query.value&&query.value.length>0?query.value=query.value.slice(0,-1):query.value+=keyPressed;let filteredOptions=getFilteredOptionWithQuery(query.value);if(!filteredOptions?.length)return;let optionIndex=optionList.value?.findIndex(option=>option[__props.optionValueKey]===filteredOptions[0][__props.optionValueKey]);typeof optionIndex!=`number`||optionIndex===-1||(scrollToOptionIndex(optionIndex),debounceCallback(()=>{query.value=``},1e3))}let isLetterOrNumberRegex=/^([\dA-Za-z\u0400-\u04FF])$/;function mainInputKeyboardHandler(event){if(event.ctrlKey||event.metaKey||event.altKey)return;let keyPressed=event.key;(keyPressed===`ArrowDown`||keyPressed===`ArrowUp`||isLetterOrNumberRegex.test(keyPressed))&&!isOpen.value&&(event.preventDefault(),popoverComponent.value?.open()),isLetterOrNumberRegex.test(keyPressed)&&__props.search&&(event.preventDefault(),event.stopPropagation(),focusSearchInputAndSetQuery(keyPressed))}async function scrollToOptionIndex(index){if(await nextTick(),typeof index!=`number`||index<0)return;let item=optionListElement.value?.querySelector(`.m-select-list-item:nth-child(${index+1})`);if(item&&optionListWrapperRef.value){let wrapperRect=optionListWrapperRef.value.getBoundingClientRect();let itemRect=item.getBoundingClientRect();let scrollTop=item.offsetTop-wrapperRect.height/2-itemRect.height;optionListWrapperRef.value.scrollTo?.({top:scrollTop,behavior:`auto`}),setTimeout(()=>{item.focus({preventScroll:!0})},100)}}function updateValue(inputOption,mustCloseList=!0){mustCloseList&&!__props.multiple&&nextTick(()=>{popoverComponent.value?.close()}),searchQuery.value=``;let isAlreadySelected=selectedOptions.value?.some(option=>option[__props.optionValueKey]===inputOption[__props.optionValueKey]);let newValue=selectedOptions.value;isAlreadySelected&&__props.multiple?newValue=newValue?.filter(option=>option[__props.optionValueKey]!==inputOption[__props.optionValueKey]):__props.multiple?newValue.push(inputOption):newValue=[inputOption];let selectedValues=newValue.map(option=>option[__props.optionValueKey]);emits(`update:model-value`,__props.multiple?selectedValues:selectedValues[0]),emits(`selected-option`,inputOption),emitInputMainInput(),focusMainInput()}function keydownHandler(event){let keyPressed=event.key;if(keyPressed===`ArrowDown`||keyPressed===`ArrowUp`){event.preventDefault();let itemLength=optionList.value?.length;if(!itemLength)return;let currentElement=document.activeElement;let itemsElements=document.querySelectorAll(`#${instanceId.value}-option-list .m-select-list-item`);let currentIndex=[...itemsElements].indexOf(currentElement);if(currentIndex===-1){itemsElements[0]?.focus({preventScroll:!0});return}itemsElements[keyPressed===`ArrowDown`?(currentIndex+1)%itemLength:(currentIndex-1+itemLength)%itemLength]?.focus()}else !__props.search&&isLetterOrNumberRegex.test(keyPressed)&&searchOptionWithQuery(keyPressed)}function updateListPosition(){nextTick(()=>{popoverComponent.value?.updatePosition()})}return watch(isOpen,value=>{isClient()&&(value?document.addEventListener(`keydown`,keydownHandler):document.removeEventListener(`keydown`,keydownHandler))},{immediate:!0}),onBeforeUnmount(()=>{document.removeEventListener(`keydown`,keydownHandler)}),__expose({open:()=>{popoverComponent.value?.open()},close:()=>{popoverComponent.value?.close()}}),(_ctx,_cache)=>(openBlock(),createBlock(MazPopover_default,{id:`${unref(instanceId)}-popover`,ref:`popover`,modelValue:isOpen.value,"onUpdate:modelValue":_cache[5]||=$event=>isOpen.value=$event,class:normalizeClass([`m-select m-reset-css maz:relative maz:inline-flex maz:align-top`,[{"--is-open":isOpen.value,"--disabled":__props.disabled},__props.class,`--${unref(size)}`,SIZE_TEXT_CLASS[unref(size)]]]),style:normalizeStyle(__props.style),trigger:`click`,block:__props.block,transition:__props.transition,offset:0,position:__props.listPosition,disabled:__props.disabled,"prefer-position":__props.preferPosition,"fallback-position":__props.fallbackPosition,"position-reference":`#${unref(instanceId)}-popover .m-input-wrapper`,onClose:_cache[6]||=$event=>emits(`close`),onOpen:onOpenList},{trigger:withCtx(({close,open:openPicker,toggle:togglePopover})=>[createVNode(MazInput_default,mergeProps({id:unref(instanceId),ref:`input`,class:`m-select-input`},_ctx.$attrs,{required:__props.required,"border-active":isOpen.value,color:__props.color,"model-value":inputValue.value,size:unref(size),block:__props.block,placeholder:__props.placeholder,label:__props.label,autocomplete:__props.autocomplete,disabled:__props.disabled,readonly:``,onChange:_cache[0]||=$event=>emits(`change`,$event),onInput:_cache[1]||=$event=>emits(`input`,$event),onFocus:_cache[2]||=$event=>emits(`focus`,$event),onBlur:_cache[3]||=$event=>emits(`blur`,$event),onKeydown:mainInputKeyboardHandler}),createSlots({"end-icon":withCtx(()=>[renderSlot(_ctx.$slots,`end-icon`,{isOpen:isOpen.value,close,open:openPicker,toggle:togglePopover},()=>[createElementVNode(`button`,{tabindex:`-1`,disabled:__props.disabled,type:`button`,class:`m-select-input__toggle-button maz-custom`,"aria-label":`${isOpen.value?`collapse`:`expand`} list of options`},[createVNode(MazIcon_default,{icon:unref(MazChevronDown),class:`m-select-chevron`},null,8,[`icon`])],8,_hoisted_1)],!0)]),_:2},[unref(hasSlotContent)(_ctx.$slots[`start-icon`])?{name:`start-icon`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`start-icon`,{isOpen:isOpen.value,close,open:openPicker,toggle:togglePopover},void 0,!0)]),key:`0`}:void 0]),1040,[`id`,`required`,`border-active`,`color`,`model-value`,`size`,`block`,`placeholder`,`label`,`autocomplete`,`disabled`])]),default:withCtx(({close,open:openPicker,toggle:togglePopover})=>[createElementVNode(`div`,{id:`${unref(instanceId)}-option-list`,ref:`optionListRef`,class:normalizeClass([`m-select-list`,[`--${unref(size)}`,SIZE_TEXT_CLASS[unref(size)]]]),style:normalizeStyle([{maxHeight:`${__props.maxListHeight}px`,maxWidth:`${__props.maxListWidth}px`,minHeight:`${__props.minListHeight}px`,minWidth:`${__props.minListWidth}px`,"--selected-bg-color":selectedBgColor.value,"--selected-text-color":selectedTextColor.value}])},[__props.search?(openBlock(),createElementBlock(`div`,_hoisted_3,[createVNode(MazInput_default,{ref:`searchInput`,modelValue:searchQuery.value,"onUpdate:modelValue":[_cache[4]||=$event=>searchQuery.value=$event,updateListPosition],size:`sm`,disabled:__props.disabled,color:__props.color,placeholder:messages.value.searchPlaceholder,name:`search`,inputmode:`search`,autocomplete:`off`,block:``,class:`m-select-list__search-input maz:flex-none`,"start-icon":unref(MazMagnifyingGlass)},null,8,[`modelValue`,`disabled`,`color`,`placeholder`,`start-icon`])])):createCommentVNode(``,!0),!optionList.value||optionList.value.length<=0?renderSlot(_ctx.$slots,`no-results`,{key:1},()=>[createElementVNode(`span`,_hoisted_4,[createVNode(unref(MazNoSymbol),{class:`maz:size-6 maz:text-foreground`})])],!0):(openBlock(),createElementBlock(`div`,_hoisted_5,[(openBlock(!0),createElementBlock(Fragment,null,renderList(optionList.value,(option,i)=>(openBlock(),createElementBlock(Fragment,{key:i},[option.label&&option.isOptGroup?renderSlot(_ctx.$slots,`optgroup`,{key:0,label:option.label},()=>[createElementVNode(`span`,_hoisted_6,toDisplayString(option.label),1)],!0):(openBlock(),createElementBlock(`button`,{key:1,type:`button`,tabindex:__props.multiple?-1:0,class:normalizeClass([`m-select-list-item maz-custom maz:flex-none`,[{"--is-selected":isSelectedOption(option),"--is-none-value":isNullOrUndefined(option[__props.optionValueKey])}]]),style:normalizeStyle(__props.itemHeight?{height:`${__props.itemHeight}px`}:void 0),onClick:withModifiers($event=>updateValue(option,!0),[`prevent`,`stop`])},[__props.multiple?(openBlock(),createBlock(unref(MazCheckbox),{key:0,"model-value":isSelectedOption(option),size:`sm`,color:__props.color},null,8,[`model-value`,`color`])):createCommentVNode(``,!0),renderSlot(_ctx.$slots,`default`,{option,isSelected:isSelectedOption(option),isOpen:isOpen.value,close,open:openPicker,toggle:togglePopover},()=>[createElementVNode(`span`,null,toDisplayString(option[__props.optionLabelKey]),1)],!0)],14,_hoisted_7))],64))),128))],512))],14,_hoisted_2)]),_:3},8,[`id`,`modelValue`,`class`,`style`,`block`,`transition`,`position`,`disabled`,`prefer-position`,`fallback-position`,`position-reference`]))}}),[[`__scopeId`,`data-v-43ed07ec`]]);export{MazSelect_default as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useDisplayNames}from"../composables/useDisplayNames.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazSelect_default}from"./MazSelect.
|
|
1
|
+
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useDisplayNames}from"../composables/useDisplayNames.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{t as MazSelect_default}from"./MazSelect.BQlQNcxq.js";import{computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineAsyncComponent,defineComponent,mergeProps,normalizeClass,normalizeStyle,openBlock,renderSlot,toDisplayString,unref,withCtx}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{getBrowserLocale}from"@maz-ui/utils/helpers/getBrowserLocale";import{getCountryFlagUrl}from"@maz-ui/utils/helpers/getCountryFlagUrl";import '../assets/MazSelectCountry.BWmaLOTk.css';var _hoisted_1={key:0,class:`m-select-country__select__item__flag-container maz:flex maz:flex-center`};var _hoisted_2={key:1,class:`m-select-country__select__item__list-flag maz:flex maz:size-5 maz:flex-center maz:rounded-full maz:bg-primary-500 maz:text-xs maz:leading-none maz:text-primary-foreground/80`};var _hoisted_3={class:`maz:text-muted`};var MazSelectCountry_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazSelectCountry`,props:{style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},id:{},color:{default:`primary`},size:{},preferredCodes:{},ignoredCodes:{},onlyCodes:{},listPosition:{},hideFlags:{type:Boolean},search:{type:Boolean,default:!0},showCodeInList:{type:Boolean,default:!1},locale:{},success:{type:Boolean},error:{type:Boolean},warning:{type:Boolean},displayCode:{type:Boolean},searchThreshold:{},translations:{},hint:{},options:{},displayNamesOptions:{default:()=>({type:`region`,languageDisplay:`standard`,fallback:`code`,style:`long`})},codesType:{},open:{type:Boolean},label:{},placeholder:{},modelValue:{},optionValueKey:{default:`code`},optionLabelKey:{default:`name`},optionInputValueKey:{default:`name`},preferPosition:{},fallbackPosition:{},itemHeight:{},maxListHeight:{},maxListWidth:{default:250},minListHeight:{},minListWidth:{default:200},searchFunction:{type:Function},required:{type:Boolean},disabled:{type:Boolean},block:{type:Boolean},autocomplete:{},formatInputValue:{type:Function},transition:{}},emits:[`update:model-value`],setup(__props){let{size}=useGlobalConfig(`MazSelectCountry`,{size:`md`});let instanceId=useInstanceUniqId({componentName:`MazSelectCountry`,providedId:__props.id});let{t,locale:mazLocale}=useTranslations();let locale=computed(()=>__props.locale??mazLocale.value??getBrowserLocale());let MazLazyImg=defineAsyncComponent(()=>import(`../components/MazLazyImg.js`));let{getAllDisplayNames}=useDisplayNames(locale);let displayNames=getAllDisplayNames({type:()=>__props.displayNamesOptions.type,languageDisplay:()=>__props.displayNamesOptions.languageDisplay,fallback:()=>__props.displayNamesOptions.fallback,style:()=>__props.displayNamesOptions.style,onlyCodes:()=>__props.onlyCodes,excludedCodes:()=>__props.ignoredCodes,preferredCodes:()=>__props.preferredCodes,codesType:computed(()=>__props.codesType?__props.codesType:__props.displayNamesOptions.type===`region`?`country`:`iso`)});let countriesOptions=computed(()=>__props.options?__props.options:displayNames?.value??[]);let messages=computed(()=>({searchPlaceholder:__props.translations?.searchPlaceholder??t(`selectCountry.searchPlaceholder`)}));function getFlagUrl(code,size=`h20`){return getCountryFlagUrl(code.slice(0,2),size)||getCountryFlagUrl(code.slice(3,5),size)||getCountryFlagUrl(code,size)}let flagUrl=computed(()=>{if(__props.modelValue)return getFlagUrl(__props.modelValue)});return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-select-country m-reset-css maz:relative maz:inline-flex`,[__props.class,{"--no-flags":__props.hideFlags}]]),style:normalizeStyle(__props.style)},[createVNode(MazSelect_default,mergeProps({id:unref(instanceId),"model-value":__props.modelValue},_ctx.$attrs,{class:`m-select-country__select`,"option-value-key":__props.optionValueKey,"option-label-key":__props.optionLabelKey,"option-input-value-key":__props.displayCode?`code`:__props.optionInputValueKey,"max-list-width":__props.maxListWidth,"min-list-width":__props.minListWidth,disabled:__props.disabled,color:__props.color,placeholder:__props.placeholder,label:__props.label,size:unref(size),multiple:!1,"list-position":__props.listPosition,error:__props.error,warning:__props.warning,success:__props.success,search:__props.search,block:__props.block,autocomplete:__props.autocomplete,"item-height":__props.itemHeight,"max-list-height":__props.maxListHeight,"min-list-height":__props.minListHeight,required:__props.required,"search-function":__props.searchFunction,"format-input-value":__props.formatInputValue,translations:messages.value,"search-threshold":__props.searchThreshold,options:countriesOptions.value,hint:__props.hint,open:__props.open,"onUpdate:modelValue":_cache[0]||=$event=>_ctx.$emit(`update:model-value`,$event)}),{"start-icon":withCtx(()=>[renderSlot(_ctx.$slots,`selector-flag`,{countryCode:__props.modelValue},()=>[flagUrl.value&&!__props.hideFlags?(openBlock(),createBlock(unref(MazLazyImg),{key:0,src:flagUrl.value,alt:__props.modelValue,width:`20`,height:`20`,class:`maz:size-5 maz:rounded-md`,"img-class":`maz:size-5 maz:rounded-md`},null,8,[`src`,`alt`])):createCommentVNode(``,!0)],!0)]),"no-results":withCtx(()=>[renderSlot(_ctx.$slots,`no-results`,{},void 0,!0)]),default:withCtx(({option,isSelected})=>[createElementVNode(`div`,{class:normalizeClass([`m-select-country__select__item maz:flex maz:w-full maz:items-center maz:gap-2 maz:truncate maz:text-sm`,{"m-select-country__select__item--selected":isSelected}])},[!__props.hideFlags&&typeof option.code==`string`?(openBlock(),createElementBlock(`span`,_hoisted_1,[renderSlot(_ctx.$slots,`country-list-flag`,{option,isSelected},()=>[option.code&&getFlagUrl(option.code)?(openBlock(),createBlock(unref(MazLazyImg),{key:0,src:getFlagUrl(option.code),alt:`${option.name} flag`,width:`20`,height:`20`,class:`maz:size-5 maz:rounded-md`,"img-class":`maz:rounded-md maz:h-5 maz:w-5`},null,8,[`src`,`alt`])):(openBlock(),createElementBlock(`span`,_hoisted_2,toDisplayString(option.code),1))],!0)])):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`maz:flex maz:flex-1 maz:gap-2 maz:truncate`,{"maz:font-semibold":isSelected}])},[__props.showCodeInList?renderSlot(_ctx.$slots,`country-list-code`,{key:0,option,isSelected},()=>[createElementVNode(`span`,_hoisted_3,toDisplayString(option.code),1)],!0):createCommentVNode(``,!0),renderSlot(_ctx.$slots,`country-list-name`,{option,isSelected},()=>[createElementVNode(`span`,null,toDisplayString(option.name),1)],!0)],2)],2)]),_:3},16,`id.model-value.option-value-key.option-label-key.option-input-value-key.max-list-width.min-list-width.disabled.color.placeholder.label.size.list-position.error.warning.success.search.block.autocomplete.item-height.max-list-height.min-list-height.required.search-function.format-input-value.translations.search-threshold.options.hint.open`.split(`.`))],6))}}),[[`__scopeId`,`data-v-afc57d48`]]);export{MazSelectCountry_default as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazDatePicker_default}from"../chunks/MazDatePicker.
|
|
1
|
+
import{t as MazDatePicker_default}from"../chunks/MazDatePicker.DLJcSJOM.js";export{MazDatePicker_default as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazDropdown_default}from"../chunks/MazDropdown.
|
|
1
|
+
import{t as MazDropdown_default}from"../chunks/MazDropdown.TQ8Ob7Xl.js";export{MazDropdown_default as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazInputPhoneNumber_default}from"../chunks/MazInputPhoneNumber.
|
|
1
|
+
import{t as MazInputPhoneNumber_default}from"../chunks/MazInputPhoneNumber.CbCSOLh-.js";export{MazInputPhoneNumber_default as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazMarkdownEditor_default}from"../chunks/MazMarkdownEditor.
|
|
1
|
+
import{t as MazMarkdownEditor_default}from"../chunks/MazMarkdownEditor.zmln9XoX.js";export{MazMarkdownEditor_default as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazPopover_default}from"../chunks/MazPopover.
|
|
1
|
+
import{t as MazPopover_default}from"../chunks/MazPopover.pWRD93tY.js";export{MazPopover_default as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazSelect_default}from"../chunks/MazSelect.
|
|
1
|
+
import{t as MazSelect_default}from"../chunks/MazSelect.BQlQNcxq.js";export{MazSelect_default as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazSelectCountry_default}from"../chunks/MazSelectCountry.
|
|
1
|
+
import{t as MazSelectCountry_default}from"../chunks/MazSelectCountry.DsxjU_D1.js";export{MazSelectCountry_default as default};
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazPopover_default}from"../chunks/MazPopover.
|
|
1
|
+
import{t as MazPopover_default}from"../chunks/MazPopover.pWRD93tY.js";import{t as MazWindowMockup_default}from"../chunks/MazWindowMockup.CDE8xxey.js";import{t as MazUiProvider_default}from"../chunks/MazUiProvider.YBDFRmEY.js";import{n as mazSidebarKey,t as MazSidebar_default}from"../chunks/MazSidebar.CWg_HTit.js";import{t as MazTimeline_default}from"../chunks/MazTimeline.B_3DWkmn.js";import{t as MazTicker_default}from"../chunks/MazTicker.PRBHC5D4.js";import{t as MazTextarea_default}from"../chunks/MazTextarea.-yf7kcEl.js";import{t as MazTabsContentItem_default}from"../chunks/MazTabsContentItem.CMmd6V-1.js";import{t as MazTabsContent_default}from"../chunks/MazTabsContent.CVEKkYv9.js";import{t as MazBtn_default}from"../chunks/MazBtn.C7LV-iX2.js";import{t as MazTabsBar_default}from"../chunks/MazTabsBar.6uYFYXhR.js";import{t as MazTabs_default}from"../chunks/MazTabs.KH7bWhto.js";import{t as MazIcon_default}from"../chunks/MazIcon.CblJ-8Iu.js";import{t as MazTable_default}from"../chunks/MazTable.DyMoS2Gm.js";import{t as MazTableTitle_default}from"../chunks/MazTableTitle.9l_upktE.js";import{t as MazTableRow_default}from"../chunks/MazTableRow.BXIXL0yV.js";import{t as MazTableCell_default}from"../chunks/MazTableCell.DNP_LZnR.js";import{t as MazSwitch_default}from"../chunks/MazSwitch.CuyojUBj.js";import{t as MazStepper_default}from"../chunks/MazStepper.DOvk4K1V.js";import{t as MazSpinner_default}from"../chunks/MazSpinner.BvOWQwI6.js";import{t as MazSlider_default}from"../chunks/MazSlider.Ckx-cbq4.js";import{t as MazSkeleton_default}from"../chunks/MazSkeleton.CDEdF3uV.js";import{t as MazSidebarTrigger_default}from"../chunks/MazSidebarTrigger.C_n--TNi.js";import{t as MazSidebarSeparator_default}from"../chunks/MazSidebarSeparator.DINm2uP8.js";import{t as MazSidebarMenuSub_default}from"../chunks/MazSidebarMenuSub.1Lt1YwRi.js";import{t as MazSidebarMenuItem_default}from"../chunks/MazSidebarMenuItem.B7oeLi8j.js";import{t as MazSidebarMenuButton_default}from"../chunks/MazSidebarMenuButton.BNHhUUiY.js";import{t as MazSidebarMenu_default}from"../chunks/MazSidebarMenu.BOHdlxZM.js";import{t as MazSidebarHeader_default}from"../chunks/MazSidebarHeader.D4tN79kH.js";import{t as MazSidebarGroup_default}from"../chunks/MazSidebarGroup.BBOqFj0b.js";import{t as MazSidebarFooter_default}from"../chunks/MazSidebarFooter.CK8nUWF-.js";import{t as MazSidebarContent_default}from"../chunks/MazSidebarContent.EwcLb3rl.js";import{t as MazInput_default}from"../chunks/MazInput.CfAgOEV4.js";import{t as MazSelect_default}from"../chunks/MazSelect.BQlQNcxq.js";import{t as MazSelectCountry_default}from"../chunks/MazSelectCountry.DsxjU_D1.js";import{t as MazReadingProgressBar_default}from"../chunks/MazReadingProgressBar.BH9Yu_Qj.js";import{t as MazLink_default}from"../chunks/MazLink.CemC1AR_.js";import{t as MazReadMore_default}from"../chunks/MazReadMore.CxrT7jez.js";import{t as MazRadioButtons_default}from"../chunks/MazRadioButtons.D-LDS_9l.js";import{t as MazRadio_default}from"../chunks/MazRadio._e2IxB4p.js";import{t as MazPullToRefresh_default}from"../chunks/MazPullToRefresh.B4Qk9C_7.js";import{t as MazPagination_default}from"../chunks/MazPagination.C9dBe4AB.js";import{t as MazBtnGroup_default}from"../chunks/MazBtnGroup.DQPVMzrc.js";import{t as MazDropdown_default}from"../chunks/MazDropdown.TQ8Ob7Xl.js";import{t as MazMarkdownEditor_default}from"../chunks/MazMarkdownEditor.zmln9XoX.js";import{t as MazLoadingBar_default}from"../chunks/MazLoadingBar.E4257kYk.js";import{t as MazLazyImg_default}from"../chunks/MazLazyImg.DN5hea6A.js";import{t as MazInputTags_default}from"../chunks/MazInputTags.CgEsmbnw.js";import{t as MazInputPrice_default}from"../chunks/MazInputPrice.BfHnR4OF.js";import{t as MazInputPhoneNumber_default}from"../chunks/MazInputPhoneNumber.CbCSOLh-.js";import{t as MazInputNumber_default}from"../chunks/MazInputNumber.DV2AhSCG.js";import{t as MazInputCode_default}from"../chunks/MazInputCode.cxaSfwc-.js";import{t as MazGallery_default}from"../chunks/MazGallery.Dln1pMxz.js";import{t as MazFullscreenLoader_default}from"../chunks/MazFullscreenLoader.DehRHfTr.js";import{t as MazExpandAnimation_default}from"../chunks/MazExpandAnimation.D6ftohlp.js";import{t as MazDropzone_default}from"../chunks/MazDropzone.Cz5cSHN8.js";import{t as MazBackdrop_default}from"../chunks/MazBackdrop.DfqSzNiW.js";import{t as MazDrawer_default}from"../chunks/MazDrawer.4ZjwgXfV.js";import{t as MazDialog_default}from"../chunks/MazDialog.DdbzVWys.js";import{n as useMazDialogConfirm,t as MazDialogConfirm_default}from"../chunks/MazDialogConfirm.FHmw1fnY.js";import{t as MazDatePicker_default}from"../chunks/MazDatePicker.DLJcSJOM.js";import{t as MazContainer_default}from"../chunks/MazContainer.DUmIYBil.js";import{t as MazCodeHighlight_default}from"../chunks/MazCodeHighlight.DdOWcO1L.js";import{t as MazCircularProgressBar_default}from"../chunks/MazCircularProgressBar.ECvJYXG9.js";import{t as MazCardSpotlight_default}from"../chunks/MazCardSpotlight.-ciu7Z_G.js";import{t as MazCheckbox_default}from"../chunks/MazCheckbox.B-1h7RWD.js";import{t as MazChecklist_default}from"../chunks/MazChecklist.Cn_k6AHg.js";import{t as MazChart_default}from"../chunks/MazChart.DkIIa41T.js";import{t as MazCarousel_default}from"../chunks/MazCarousel.B63aV7pT.js";import{t as MazCard_default}from"../chunks/MazCard.DxGlpBqG.js";import{t as MazBottomSheet_default}from"../chunks/MazBottomSheet.BMiGc4uw.js";import{t as MazBadge_default}from"../chunks/MazBadge.G9hi-6Ps.js";import{t as MazAvatar_default}from"../chunks/MazAvatar.Dec3roPS.js";import{t as MazAnimatedText_default}from"../chunks/MazAnimatedText.B7cNm4ss.js";import{t as MazAnimatedElement_default}from"../chunks/MazAnimatedElement.C5yNRQYK.js";import{t as MazAnimatedCounter_default}from"../chunks/MazAnimatedCounter.BejzeMiX.js";import{t as MazAlert_default}from"../chunks/MazAlert.CI0NbMYT.js";import{t as MazAccordion_default}from"../chunks/MazAccordion.CAUGG4-A.js";export{MazAccordion_default as MazAccordion,MazAlert_default as MazAlert,MazAnimatedCounter_default as MazAnimatedCounter,MazAnimatedElement_default as MazAnimatedElement,MazAnimatedText_default as MazAnimatedText,MazAvatar_default as MazAvatar,MazBackdrop_default as MazBackdrop,MazBadge_default as MazBadge,MazBottomSheet_default as MazBottomSheet,MazBtn_default as MazBtn,MazBtnGroup_default as MazBtnGroup,MazCard_default as MazCard,MazCardSpotlight_default as MazCardSpotlight,MazCarousel_default as MazCarousel,MazChart_default as MazChart,MazCheckbox_default as MazCheckbox,MazChecklist_default as MazChecklist,MazCircularProgressBar_default as MazCircularProgressBar,MazCodeHighlight_default as MazCodeHighlight,MazContainer_default as MazContainer,MazDatePicker_default as MazDatePicker,MazDialog_default as MazDialog,MazDialogConfirm_default as MazDialogConfirm,MazDrawer_default as MazDrawer,MazDropdown_default as MazDropdown,MazDropzone_default as MazDropzone,MazExpandAnimation_default as MazExpandAnimation,MazFullscreenLoader_default as MazFullscreenLoader,MazGallery_default as MazGallery,MazIcon_default as MazIcon,MazInput_default as MazInput,MazInputCode_default as MazInputCode,MazInputNumber_default as MazInputNumber,MazInputPhoneNumber_default as MazInputPhoneNumber,MazInputPrice_default as MazInputPrice,MazInputTags_default as MazInputTags,MazLazyImg_default as MazLazyImg,MazLink_default as MazLink,MazLoadingBar_default as MazLoadingBar,MazMarkdownEditor_default as MazMarkdownEditor,MazPagination_default as MazPagination,MazPopover_default as MazPopover,MazPullToRefresh_default as MazPullToRefresh,MazRadio_default as MazRadio,MazRadioButtons_default as MazRadioButtons,MazReadMore_default as MazReadMore,MazReadingProgressBar_default as MazReadingProgressBar,MazSelect_default as MazSelect,MazSelectCountry_default as MazSelectCountry,MazSidebar_default as MazSidebar,MazSidebarContent_default as MazSidebarContent,MazSidebarFooter_default as MazSidebarFooter,MazSidebarGroup_default as MazSidebarGroup,MazSidebarHeader_default as MazSidebarHeader,MazSidebarMenu_default as MazSidebarMenu,MazSidebarMenuButton_default as MazSidebarMenuButton,MazSidebarMenuItem_default as MazSidebarMenuItem,MazSidebarMenuSub_default as MazSidebarMenuSub,MazSidebarSeparator_default as MazSidebarSeparator,MazSidebarTrigger_default as MazSidebarTrigger,MazSkeleton_default as MazSkeleton,MazSlider_default as MazSlider,MazSpinner_default as MazSpinner,MazStepper_default as MazStepper,MazSwitch_default as MazSwitch,MazTable_default as MazTable,MazTableCell_default as MazTableCell,MazTableRow_default as MazTableRow,MazTableTitle_default as MazTableTitle,MazTabs_default as MazTabs,MazTabsBar_default as MazTabsBar,MazTabsContent_default as MazTabsContent,MazTabsContentItem_default as MazTabsContentItem,MazTextarea_default as MazTextarea,MazTicker_default as MazTicker,MazTimeline_default as MazTimeline,MazUiProvider_default as MazUiProvider,MazWindowMockup_default as MazWindowMockup,mazSidebarKey,useMazDialogConfirm};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as MazPopover_default}from"../chunks/MazPopover.
|
|
1
|
+
import{t as MazPopover_default}from"../chunks/MazPopover.pWRD93tY.js";import{useMountComponent}from"../composables/useMountComponent.js";import{h,nextTick,ref,watch}from"vue";function isDisabled(value){return value===!1||value==null}var tooltipInstances=new WeakMap;var TooltipHandler=class{defaultProps;constructor(options={}){this.defaultProps={open:!1,position:`top`,trigger:`hover`,role:`tooltip`,closeOnClickOutside:!1,closeOnEscape:!1,color:`contrast`,...options}}getTooltipProps(binding){let baseOptions={...this.defaultProps};let value=binding.value;return typeof value==`string`?{...baseOptions,text:value,position:this.getPositionFromModifiers(binding)||baseOptions.position||`top`}:{...baseOptions,...value,position:this.getPositionFromModifiers(binding)||value.position||baseOptions.position||`top`}}getPositionFromModifiers(binding){let modifiers=Object.keys(binding.modifiers);let validPositions=[`top`,`bottom`,`left`,`right`,`top-start`,`top-end`,`bottom-start`,`bottom-end`,`left-start`,`left-end`,`right-start`,`right-end`,`auto`];for(let modifier of modifiers)if(validPositions.includes(modifier))return modifier}mount(el,binding){if(isDisabled(binding.value))return;let tooltipProps=this.getTooltipProps(binding);if(!tooltipProps.text&&!tooltipProps.html){console.warn(`[maz-ui](vTooltip) No text or html content provided`);return}let isOpen=ref(!!tooltipProps.open);let vNodeInstance=null;let createTooltip=()=>{vNodeInstance=useMountComponent(MazPopover_default,{props:{...tooltipProps,panelClass:[`m-tooltip-panel`,`maz:text-sm`,`maz:whitespace-pre-wrap`,`maz:break-words`,`maz:p-2`,`maz:max-w-xs`,tooltipProps.panelClass].filter(Boolean).join(` `),modelValue:isOpen.value,positionReference:el,onAfterCloseAnimation:()=>{vNodeInstance?.destroy(),vNodeInstance=null}},children:{default:()=>tooltipProps.html?h(`div`,{innerHTML:tooltipProps.html}):tooltipProps.text||``},element:el})};function isTouchDevice(){return`ontouchstart`in globalThis||navigator.maxTouchPoints>0}function getEffectiveTrigger(){return tooltipProps.trigger===`adaptive`?isTouchDevice()?`click`:`hover`:tooltipProps.trigger||`hover`}let mouseEnterHandler=null;let mouseLeaveHandler=null;let clickHandler=null;function setupTriggers(){cleanupTriggers();let effectiveTrigger=getEffectiveTrigger();effectiveTrigger===`hover`?(mouseEnterHandler=()=>{isOpen.value=!0},mouseLeaveHandler=()=>{isOpen.value=!1},el.addEventListener(`mouseenter`,mouseEnterHandler),el.addEventListener(`mouseleave`,mouseLeaveHandler)):effectiveTrigger===`click`&&(clickHandler=()=>{isOpen.value=!isOpen.value},el.addEventListener(`click`,clickHandler))}function cleanupTriggers(){mouseEnterHandler&&=(el.removeEventListener(`mouseenter`,mouseEnterHandler),null),mouseLeaveHandler&&=(el.removeEventListener(`mouseleave`,mouseLeaveHandler),null),clickHandler&&=(el.removeEventListener(`click`,clickHandler),null)}nextTick(()=>{setupTriggers()}),watch(isOpen,value=>{value?createTooltip():vNodeInstance&&vNodeInstance?.vNode.component?.exposed?.close()},{immediate:!0});function destroy(){cleanupTriggers(),vNodeInstance&&=(vNodeInstance.destroy(),null)}function updateProps(newProps){let oldTrigger=tooltipProps.trigger;Object.assign(tooltipProps,newProps),isOpen.value=!!newProps.open,oldTrigger!==newProps.trigger&&setupTriggers(),createTooltip()}tooltipInstances.set(el,{destroy,updateProps,isOpen})}update(el,binding){let instance=tooltipInstances.get(el);if(isDisabled(binding.value)){instance&&(instance.destroy(),tooltipInstances.delete(el));return}if(instance){let newProps=this.getTooltipProps(binding);instance.updateProps(newProps)}else this.mount(el,binding)}unmount(el){let instance=tooltipInstances.get(el);instance&&(instance.destroy(),tooltipInstances.delete(el))}};var globalHandler;var directive={mounted(el,binding){return globalHandler||=new TooltipHandler,globalHandler.mount(el,binding)},updated(el,binding){return globalHandler||=new TooltipHandler,globalHandler.update(el,binding)},unmounted(el){globalHandler&&globalHandler.unmount(el)}};var plugin={install:(app,options)=>{let handler=new TooltipHandler(options);app.directive(`tooltip`,{beforeMount:handler.mount.bind(handler),updated:handler.update.bind(handler),unmounted:handler.unmount.bind(handler)})}};export{directive as vTooltip,plugin as vTooltipInstall};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "maz-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.0.0-beta.
|
|
4
|
+
"version": "5.0.0-beta.35",
|
|
5
5
|
"description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -185,11 +185,11 @@
|
|
|
185
185
|
"dayjs": "^1.11.20",
|
|
186
186
|
"libphonenumber-js": "^1.13.6",
|
|
187
187
|
"valibot": "^1.4.0",
|
|
188
|
-
"@maz-ui/cli": "5.0.0-beta.28",
|
|
189
|
-
"@maz-ui/translations": "5.0.0-beta.28",
|
|
190
188
|
"@maz-ui/icons": "5.0.0-beta.25",
|
|
189
|
+
"@maz-ui/utils": "5.0.0-beta.28",
|
|
191
190
|
"@maz-ui/themes": "5.0.0-beta.28",
|
|
192
|
-
"@maz-ui/
|
|
191
|
+
"@maz-ui/translations": "5.0.0-beta.28",
|
|
192
|
+
"@maz-ui/cli": "5.0.0-beta.28"
|
|
193
193
|
},
|
|
194
194
|
"devDependencies": {
|
|
195
195
|
"@tailwindcss/cli": "^4.3.0",
|
|
@@ -209,9 +209,9 @@
|
|
|
209
209
|
"unplugin-auto-import": "^21.0.0",
|
|
210
210
|
"unplugin-vue-components": "^32.0.0",
|
|
211
211
|
"vue-router": "^5.0.7",
|
|
212
|
-
"@maz-ui/stylelint-config": "5.0.0-beta.28",
|
|
213
212
|
"@maz-ui/eslint-config": "5.0.0-beta.28",
|
|
214
213
|
"@maz-ui/node": "5.0.0-beta.26",
|
|
214
|
+
"@maz-ui/stylelint-config": "5.0.0-beta.28",
|
|
215
215
|
"@maz-ui/vite-config": "0.0.0"
|
|
216
216
|
},
|
|
217
217
|
"lint-staged": {
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-82fb48e2],[data-v-82fb48e2]:before,[data-v-82fb48e2]:after{--tw-border-style:solid}[data-v-82fb48e2]::backdrop{--tw-border-style:solid}}}.m-popover-panel[data-v-82fb48e2]{will-change:transform, opacity;contain:layout style paint;backface-visibility:hidden}.m-popover-panel.--surface[data-v-82fb48e2]{background-color:var(--maz-container-bg,var(--maz-surface))}.m-popover-panel.--surface[data-v-82fb48e2]:where(.dark,.dark *){border-style:var(--tw-border-style);border-width:var(--maz-border-width);border-color:var(--maz-color-divider,var(--maz-divider))}.m-popover-panel.--primary[data-v-82fb48e2]{border-color:var(--maz-color-primary-600,oklch(from var(--maz-primary) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-primary,var(--maz-primary));color:var(--maz-color-primary-foreground,var(--maz-primary-foreground))}.m-popover-panel.--secondary[data-v-82fb48e2]{border-color:var(--maz-color-secondary-600,oklch(from var(--maz-secondary) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-secondary,var(--maz-secondary));color:var(--maz-color-secondary-foreground,var(--maz-secondary-foreground))}.m-popover-panel.--success[data-v-82fb48e2]{border-color:var(--maz-color-success-600,oklch(from var(--maz-success) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-success,var(--maz-success));color:var(--maz-color-success-foreground,var(--maz-success-foreground))}.m-popover-panel.--warning[data-v-82fb48e2]{border-color:var(--maz-color-warning-600,oklch(from var(--maz-warning) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-warning,var(--maz-warning));color:var(--maz-color-warning-foreground,var(--maz-warning-foreground))}.m-popover-panel.--destructive[data-v-82fb48e2]{border-color:var(--maz-color-destructive-600,oklch(from var(--maz-destructive) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-destructive,var(--maz-destructive));color:var(--maz-color-destructive-foreground,var(--maz-destructive-foreground))}.m-popover-panel.--info[data-v-82fb48e2]{border-color:var(--maz-color-info-600,oklch(from var(--maz-info) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-info,var(--maz-info));color:var(--maz-color-info-foreground,var(--maz-info-foreground))}.m-popover-panel.--accent[data-v-82fb48e2]{border-color:var(--maz-color-accent-600,oklch(from var(--maz-accent) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-accent,var(--maz-accent));color:var(--maz-color-accent-foreground,var(--maz-accent-foreground))}.m-popover-panel.--contrast[data-v-82fb48e2]{border-color:var(--maz-color-contrast-600,oklch(from var(--maz-contrast) clamp(0, calc(l - .05), 1) c h));background-color:var(--maz-color-contrast,var(--maz-contrast));color:var(--maz-color-contrast-foreground,var(--maz-contrast-foreground))}.maz-scale-fade-enter-active[data-v-82fb48e2],.maz-scale-pop-enter-active[data-v-82fb48e2]{transition:opacity .15s ease-out,transform .15s ease-out}.maz-scale-fade-leave-active[data-v-82fb48e2],.maz-scale-pop-leave-active[data-v-82fb48e2],.maz-scale-pop-leave-active[data-v-82fb48e2]{transition:opacity .15s ease-in,transform .15s ease-in}.m-popover-panel.--position-bottom.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-bottom.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-bottom-start.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-bottom-start.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-bottom-end.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-bottom-end.maz-scale-fade-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:top;transform:scaleY(.5)}.m-popover-panel.--position-bottom.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-bottom.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-bottom-start.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-bottom-start.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-bottom-end.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-bottom-end.maz-scale-pop-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:top;transform:scale(.2)translateY(-4px)}.m-popover-panel.--position-top.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-top.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-top-start.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-top-start.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-top-end.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-top-end.maz-scale-fade-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:bottom;transform:scaleY(.5)}.m-popover-panel.--position-top.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-top.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-top-start.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-top-start.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-top-end.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-top-end.maz-scale-pop-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:bottom;transform:scale(.2)translateY(4px)}.m-popover-panel.--position-right.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-right.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-right-start.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-right-start.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-right-end.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-right-end.maz-scale-fade-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:0;transform:scaleX(.5)}.m-popover-panel.--position-right.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-right.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-right-start.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-right-start.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-right-end.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-right-end.maz-scale-pop-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:0;transform:scale(.2)translate(-4px)}.m-popover-panel.--position-left.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-left.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-left-start.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-left-start.maz-scale-fade-leave-to[data-v-82fb48e2],.m-popover-panel.--position-left-end.maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel.--position-left-end.maz-scale-fade-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:100%;transform:scaleX(.5)}.m-popover-panel.--position-left.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-left.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-left-start.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-left-start.maz-scale-pop-leave-to[data-v-82fb48e2],.m-popover-panel.--position-left-end.maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel.--position-left-end.maz-scale-pop-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:100%;transform:scale(.2)translate(4px)}.m-popover-panel:not([class*=--position-]).maz-scale-pop-enter-from[data-v-82fb48e2],.m-popover-panel:not([class*=--position-]).maz-scale-pop-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:50%;transform:scale(.2)}.m-popover-panel:not([class*=--position-]).maz-scale-fade-enter-from[data-v-82fb48e2],.m-popover-panel:not([class*=--position-]).maz-scale-fade-leave-to[data-v-82fb48e2]{opacity:0;transform-origin:50%;transform:scale(.5)translateY(-4px)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as hasSlotContent}from"./hasSlotContent.rEQOMGV4.js";import{t as MazPopover_default}from"./MazPopover.mlqNR5Y3.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.zP_plvmB.js";import{useMazIconProps}from"../composables/useMazIconProps.js";import{useGlobalConfig}from"../composables/useGlobalConfig.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createSlots,createTextVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,openBlock,renderList,renderSlot,toDisplayString,unref,useModel,useTemplateRef,watch,withCtx,withKeys,withModifiers}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{isClient}from"@maz-ui/utils/helpers/isClient";import{MazChevronDown}from"@maz-ui/icons/raw/MazChevronDown";import '../assets/MazDropdown.C1r5LD-W.css';var _hoisted_1=[`id`];var _hoisted_2=[`id`];var _hoisted_3=[`id`];var MazDropdown_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazDropdown`,props:mergeModels({modelValue:{type:Boolean},style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},items:{default:()=>[]},itemsSize:{},id:{},trigger:{default:`adaptive`},color:{default:`transparent`},position:{default:`auto`},closeOnClick:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},chevron:{type:Boolean,default:!0},screenReaderDescription:{},menuPanelClass:{type:[Boolean,null,String,Object,Array]},menuPanelStyle:{type:[Boolean,null,String,Object,Array]},block:{type:Boolean},dropdownIcon:{type:[String,Function,Object]},dropdownIconAnimation:{type:Boolean,default:!0},size:{},transition:{default:`scale-pop`},preferPosition:{default:`bottom-start`},fallbackPosition:{},ariaLabel:{},announceChanges:{type:Boolean},offset:{},delay:{},hoverDelay:{},teleportTo:{},overlayClass:{type:[Boolean,null,String,Object,Array]},panelClass:{type:[Boolean,null,String,Object,Array]},panelStyle:{type:[Boolean,null,String,Object,Array]},closeOnClickOutside:{type:Boolean},closeOnEscape:{type:Boolean},persistent:{type:Boolean},ariaLabelledby:{},ariaDescribedby:{},trapFocus:{type:Boolean},keepOpenOnHover:{type:Boolean},positionReference:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:mergeModels([`menuitem-clicked`,`update:model-value`],[`update:modelValue`]),setup(__props,{emit:__emit}){let emits=__emit;let{size}=useGlobalConfig(`MazDropdown`,{size:`md`});let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let MazIcon=defineAsyncComponent(()=>import(`../components/MazIcon.js`));let{iconProps:dropdownIconProps}=useMazIconProps(()=>__props.dropdownIcon??MazChevronDown);let instanceId=useInstanceUniqId({componentName:`MazDropdown`,providedId:__props.id});let{t}=useTranslations();let isOpen=useModel(__props,`modelValue`);let iconClassSize=computed(()=>size.value===`xl`?`maz:text-lg`:size.value===`lg`||size.value===`md`||size.value===`sm`?`maz:text-base`:size.value===`xs`||size.value===`mini`?`maz:text-sm`:`maz:text-lg`);function setDropdown(value){__props.disabled||(isOpen.value=value)}function isLinkItem(item){return`href`in item||`to`in item}function hasLinkOrAction(item){return isLinkItem(item)||`onClick`in item}async function runAction(item,event){emits(`menuitem-clicked`,event),await item.onClick?.(),closeDropdown()}function closeDropdown(){__props.closeOnClick&&setDropdown(!1)}function keydownHandler(event){[`ArrowDown`,`ArrowUp`].includes(event.key)?arrowHandler(event):event.key===`Enter`&&(event.preventDefault(),document.activeElement?.click(),closeDropdown())}function arrowHandler(event){event.preventDefault();let code=event.key;let itemLength=__props.items?.length;if(!itemLength)return;let currentElement=document.activeElement;let itemsElements=Array.from(document.querySelectorAll(`#${instanceId.value}-menu .menuitem`)).filter(el=>el.getAttribute(`tabindex`)!==`-1`);let currentIndex=[...itemsElements].indexOf(currentElement);if(currentIndex===-1){itemsElements[0]?.focus();return}itemsElements[code===`ArrowDown`?(currentIndex+1)%itemLength:(currentIndex-1+itemLength)%itemLength]?.focus()}let mazPopoverElement=useTemplateRef(`mazPopoverRef`);function onBlurTrigger(event){event.preventDefault(),!(mazPopoverElement.value?.panelRef)?.contains(event.relatedTarget)&&setDropdown(!1)}return watch(isOpen,value=>{isClient()&&(value?document.addEventListener(`keydown`,keydownHandler):document.removeEventListener(`keydown`,keydownHandler))}),(_ctx,_cache)=>(openBlock(),createBlock(MazPopover_default,{ref:`mazPopoverRef`,trigger:__props.trigger,"model-value":isOpen.value,class:normalizeClass([`m-dropdown m-reset-css`,[__props.class]]),role:`menu`,style:normalizeStyle(__props.style),"prefer-position":__props.preferPosition,color:`surface`,position:__props.position,transition:__props.transition,disabled:__props.disabled,offset:__props.offset,delay:__props.delay,"fallback-position":__props.fallbackPosition,persistent:__props.persistent,"hover-delay":__props.hoverDelay,"panel-class":__props.panelClass,"panel-style":__props.panelStyle,"close-on-escape":__props.closeOnEscape,"close-on-click":__props.closeOnClick,"teleport-to":__props.teleportTo,"trap-focus":__props.trapFocus,"overlay-class":__props.overlayClass,"close-on-click-outside":__props.closeOnClickOutside,"aria-describedby":__props.ariaDescribedby,"announce-changes":__props.announceChanges,"aria-label":__props.ariaLabel,"aria-labelledby":__props.ariaLabelledby,"position-reference":__props.positionReference,"keep-open-on-hover":__props.trigger===`hover`||__props.trigger===`adaptive`,block:__props.block,"onUpdate:modelValue":setDropdown},{trigger:withCtx(({toggle,close,open})=>[createElementVNode(`div`,{id:unref(instanceId),tabindex:`-1`,class:`m-dropdown__wrapper maz:size-full maz:rounded-md maz:outline-hidden maz:focus:bg-surface-600 maz:dark:focus:bg-surface-400`},[createElementVNode(`span`,{id:`${unref(instanceId)}-labelspan`,class:`maz:sr-only`},[renderSlot(_ctx.$slots,`screen-reader-description`,{},()=>[createTextVNode(toDisplayString(__props.screenReaderDescription||unref(t)(`dropdown.screenReaderDescription`)),1)],!0)],8,_hoisted_2),renderSlot(_ctx.$slots,`trigger`,{isOpen:isOpen.value,toggle,close,open},()=>[createVNode(unref(MazBtn),mergeProps({"aria-labelledby":`${unref(instanceId)}-labelspan`,color:__props.color,disabled:__props.disabled},_ctx.$attrs,{block:__props.block,size:unref(size),onKeydown:[withKeys(withModifiers(toggle,[`stop`,`prevent`]),[`enter`]),withKeys(withModifiers(toggle,[`stop`,`prevent`]),[`space`]),withKeys(withModifiers(close,[`stop`,`prevent`]),[`escape`])],onBlur:withModifiers(onBlurTrigger,[`stop`,`prevent`])}),createSlots({default:withCtx(()=>[renderSlot(_ctx.$slots,`default`,{},void 0,!0)]),_:2},[__props.chevron||unref(hasSlotContent)(_ctx.$slots[`dropdown-icon`])?{name:`end-icon`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`dropdown-icon`,{isOpen:isOpen.value,toggle,close,open},()=>[unref(dropdownIconProps)?(openBlock(),createBlock(unref(MazIcon),mergeProps({key:0},unref(dropdownIconProps),{class:[[{"--open":isOpen.value&&__props.dropdownIconAnimation},iconClassSize.value],`m-dropdown__icon`]}),null,16,[`class`])):createCommentVNode(``,!0)],!0)]),key:`0`}:void 0]),1040,[`aria-labelledby`,`color`,`disabled`,`block`,`size`,`onKeydown`])],!0)],8,_hoisted_1)]),default:withCtx(({open,close,toggle})=>[createElementVNode(`div`,{id:`${unref(instanceId)}-menu`,role:`menu`,"aria-label":`Menu`,class:normalizeClass([`m-dropdown__menu maz:flex maz:min-h-max maz:min-w-max maz:flex-col maz:gap-1 maz:overflow-auto maz:p-2`,__props.menuPanelClass]),tabindex:`-1`,style:normalizeStyle(__props.menuPanelStyle)},[renderSlot(_ctx.$slots,`dropdown`,{items:__props.items,open,close,isOpen:isOpen.value,toggle},()=>[renderSlot(_ctx.$slots,`prepend-menu`,{isOpen:isOpen.value,open,close,toggle},void 0,!0),(openBlock(!0),createElementBlock(Fragment,null,renderList(__props.items,(item,index)=>renderSlot(_ctx.$slots,`menuitem`,{key:index,item,open,close,isOpen:isOpen.value,toggle},()=>[createVNode(unref(MazBtn),mergeProps({ref_for:!0},{...item,onClick:void 0,label:void 0},{target:isLinkItem(item)?item.target??`_self`:void 0,to:isLinkItem(item)?item.to:void 0,href:isLinkItem(item)?item.href:void 0,class:[`menuitem`,[{"menuitem--hoverable":hasLinkOrAction(item)},item.class,isLinkItem(item)?`menuitem__link`:`menuitem__button`,`menuitem--${item.color}`]],justify:item.justify??`start`,color:item.color??`transparent`,size:__props.itemsSize??item.size??unref(size),disabled:item.disabled??!1,tabindex:hasLinkOrAction(item)?0:-1,onClick:withModifiers($event=>runAction(item,$event),[`stop`]),onKeypress:withKeys(withModifiers($event=>runAction(item,$event),[`stop`,`prevent`]),[`enter`])}),{default:withCtx(()=>[renderSlot(_ctx.$slots,`menuitem-label`,{item,open,close,isOpen:isOpen.value,toggle},()=>[createTextVNode(toDisplayString(item.label),1)],!0)]),_:2},1040,[`target`,`to`,`href`,`class`,`justify`,`color`,`size`,`disabled`,`tabindex`,`onClick`,`onKeypress`])],!0)),128)),renderSlot(_ctx.$slots,`append-menu`,{isOpen:isOpen.value,open,close,toggle},void 0,!0)],!0)],14,_hoisted_3)]),_:3},8,`trigger.model-value.style.prefer-position.position.transition.disabled.offset.delay.fallback-position.persistent.hover-delay.panel-class.panel-style.close-on-escape.close-on-click.teleport-to.trap-focus.overlay-class.close-on-click-outside.aria-describedby.announce-changes.aria-label.aria-labelledby.position-reference.keep-open-on-hover.class.block`.split(`.`)))}}),[[`__scopeId`,`data-v-fb02821a`]]);export{MazDropdown_default as t};
|