@flitsmeister/design-system 2.2.36 → 3.0.0

package/dist-lib/flitsmeister-design-system.es.js

@@ -1,506 +0,0 @@
-import { createElementBlock as i, createCommentVNode as u, openBlock as o, normalizeClass as d, createElementVNode as r, resolveComponent as k, createVNode as m, normalizeStyle as z, toDisplayString as h, Transition as p, withCtx as b, createBlock as x, renderSlot as y, Fragment as v, renderList as _, createTextVNode as C, Teleport as V, withModifiers as F } from "vue";
-const g = (t, l) => {
-  const e = t.__vccOpts || t;
-  for (const [f, s] of l)
-    e[f] = s;
-  return e;
-}, T = {
-  name: "Icon",
-  props: {
-    name: {
-      type: String,
-      required: !0
-    },
-    iconClass: {
-      type: String,
-      default: ""
-    }
-  }
-}, I = ["xlink:href"];
-function O(t, l, e, f, s, n) {
-  return e.name ? (o(), i("svg", {
-    key: 0,
-    class: d(e.iconClass)
-  }, [
-    r("use", {
-      "xlink:href": `#${e.name}`
-    }, null, 8, I)
-  ], 2)) : u("", !0);
-}
-const S = /* @__PURE__ */ g(T, [["render", O], ["__scopeId", "data-v-6c8ee23e"]]), w = {
-  sm: {
-    input: "h-10 text-base rounded-2xl px-3",
-    inputWithPlaceholder: "pt-5 pb-1",
-    inputWithoutPlaceholder: "py-2 flex items-center justify-center",
-    label: "top-2.5",
-    labelText: "text-base",
-    labelFocused: "peer-focus:top-[4px] peer-focus:left-2.5 peer-focus:text-xs peer-focus:font-bold",
-    labelFilled: "top-[4px] left-2.5 text-xs font-bold",
-    icon: "right-2 top-2.5 text-xl leading-none"
-  },
-  md: {
-    input: "h-[60px] text-lg leading-snug rounded-2xl px-3",
-    inputWithPlaceholder: "pt-6 pb-1",
-    inputWithoutPlaceholder: "py-3 flex items-center justify-center",
-    label: "top-3.5",
-    labelText: "text-lg",
-    labelFocused: "peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold",
-    labelFilled: "top-[6px] left-2.5 text-sm font-bold",
-    icon: "right-2 top-4 text-2xl leading-none"
-  },
-  lg: {
-    input: "h-14 text-lg rounded-2xl px-4",
-    inputWithPlaceholder: "pt-7 pb-1",
-    inputWithoutPlaceholder: "py-4 flex items-center justify-center",
-    label: "top-4",
-    labelText: "text-lg",
-    labelFocused: "peer-focus:top-[8px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold",
-    labelFilled: "top-[8px] left-2.5 text-sm font-bold",
-    icon: "right-3 top-5 text-2xl leading-none"
-  }
-}, B = {
-  name: "fmxInput",
-  components: {
-    Icon: S
-  },
-  props: {
-    type: {
-      type: String,
-      default: "text",
-      validator: (t) => ["text", "search", "email", "number", "password", "tel"].includes(
-        t
-      )
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    rules: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    readonly: {
-      type: Boolean,
-      default: !1
-    },
-    maxLength: {
-      type: Number,
-      default: null
-    },
-    letterSpacing: {
-      type: Number,
-      default: 0
-    },
-    autocomplete: {
-      type: String,
-      default: ""
-    },
-    customClass: {
-      type: String,
-      default: ""
-    },
-    inputClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    size: {
-      type: String,
-      default: "md",
-      validator: (t) => ["sm", "md", "lg"].includes(t)
-    }
-  },
-  emits: ["update:modelValue", "focus", "blur"],
-  data() {
-    return {
-      errorMessage: "",
-      icon: "",
-      iconClass: "text-current",
-      isFocused: !1
-    };
-  },
-  watch: {
-    modelValue: {
-      immediate: !0,
-      handler(t) {
-        !this.isFocused && (t == null ? void 0 : t.length) > 0 && this.runValidation(t);
-      }
-    }
-  },
-  computed: {
-    sizeConfig() {
-      return w[this.size] || w.md;
-    },
-    inputStateClass() {
-      return {
-        "border-outline-danger": this.errorMessage && !this.isFocused
-      };
-    },
-    labelFilledClass() {
-      return this.modelValue && this.modelValue.length > 0 ? this.sizeConfig.labelFilled : "";
-    }
-  },
-  methods: {
-    handleInput(t) {
-      const l = t.target.value;
-      this.$emit("update:modelValue", l);
-    },
-    handleFocus(t) {
-      this.isFocused = !0, this.iconClass = "", this.icon = "", this.$emit("focus", t);
-    },
-    handleBlur(t) {
-      this.isFocused = !1, this.runValidation(this.modelValue), this.$emit("blur", t);
-    },
-    runValidation(t) {
-      for (const l of this.rules) {
-        const e = l(t);
-        if (e) {
-          this.errorMessage = e, this.iconClass = "text-content-danger", this.icon = "stroke-warning";
-          return;
-        }
-        this.errorMessage = "", this.iconClass = "text-content-brand", this.icon = "bold-check";
-      }
-    },
-    validate() {
-      this.runValidation(this.modelValue);
-    }
-  }
-}, j = ["data-inputgroup-type", "data-size"], P = { class: "relative" }, L = ["type", "value", "disabled", "readonly", "maxlength", "autocomplete"], M = ["innerHTML"];
-function N(t, l, e, f, s, n) {
-  const a = k("Icon");
-  return o(), i("div", {
-    class: d(["inputgroup w-full mb-6", [e.customClass]]),
-    "data-inputgroup-type": e.type,
-    "data-size": e.size
-  }, [
-    r("div", P, [
-      r("input", {
-        type: e.type,
-        value: e.modelValue,
-        onInput: l[0] || (l[0] = (...c) => n.handleInput && n.handleInput(...c)),
-        onFocus: l[1] || (l[1] = (...c) => n.handleFocus && n.handleFocus(...c)),
-        onBlur: l[2] || (l[2] = (...c) => n.handleBlur && n.handleBlur(...c)),
-        disabled: e.disabled,
-        readonly: e.readonly,
-        maxlength: e.maxLength,
-        autocomplete: e.autocomplete,
-        class: d(["peer fmx-input-border w-full bg-surface-defaulthighest text-content-default border-2 transition duration-300 ease focus:outline-none focus:border-out fmx-input-autofill", [
-          n.inputStateClass,
-          n.sizeConfig.input,
-          e.placeholder ? n.sizeConfig.inputWithPlaceholder : n.sizeConfig.inputWithoutPlaceholder,
-          e.inputClass
-        ]]),
-        style: z({ letterSpacing: e.letterSpacing + "em" })
-      }, null, 46, L),
-      e.placeholder ? (o(), i("label", {
-        key: 0,
-        class: d([
-          "absolute px-1 left-2.5 text-content-defaultalt transition-all transform origin-left pointer-events-none",
-          n.sizeConfig.label,
-          n.sizeConfig.labelText,
-          n.sizeConfig.labelFocused,
-          n.labelFilledClass
-        ])
-      }, h(e.placeholder), 3)) : u("", !0),
-      m(p, { name: "icon-scale" }, {
-        default: b(() => [
-          s.icon ? (o(), i("span", {
-            key: 0,
-            class: d(["iconwrapper absolute", [n.sizeConfig.icon, s.iconClass]])
-          }, [
-            m(a, { name: s.icon }, null, 8, ["name"])
-          ], 2)) : u("", !0)
-        ]),
-        _: 1
-      })
-    ]),
-    s.errorMessage && !s.isFocused ? (o(), i("p", {
-      key: 0,
-      class: "text-content-danger text-sm font-bold mt-1",
-      innerHTML: s.errorMessage
-    }, null, 8, M)) : u("", !0)
-  ], 10, j);
-}
-const ee = /* @__PURE__ */ g(B, [["render", N], ["__scopeId", "data-v-ca16ddac"]]), W = {
-  name: "fmxButton",
-  components: { Icon: S },
-  props: {
-    type: {
-      type: String,
-      default: "button",
-      validator: (t) => ["button", "submit", "reset"].includes(t)
-    },
-    title: {
-      type: String
-    },
-    href: {
-      type: String,
-      default: "/"
-    },
-    target: {
-      type: String,
-      default: "_self"
-    },
-    size: {
-      type: String,
-      default: "md",
-      validator: (t) => ["sm", "md", "lg", "xl"].includes(t)
-    },
-    role: {
-      type: String,
-      default: "strong",
-      validator: (t) => [
-        "primary",
-        "secondary",
-        "success",
-        "warning",
-        "danger",
-        "dangeralt",
-        "danger-alt",
-        "info",
-        "strong",
-        "weak"
-      ].includes(t)
-    },
-    buttontype: {
-      type: String,
-      default: "filled",
-      validator: (t) => ["filled", "text", "outline", "squared"].includes(t)
-    },
-    /**
-     * Optional icon: symbol id for the SVG sprite.
-     * The consuming app must inject an SVG sprite containing symbols with these ids (e.g. via Vite/Webpack sprite plugin).
-     */
-    icon: {
-      type: String,
-      default: ""
-    },
-    iconPosition: {
-      type: String,
-      default: "prepend",
-      validator: (t) => ["prepend", "append"].includes(t)
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    customClasses: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    buttonClasses() {
-      return `btn btn-size-${this.size} btn-role-${this.role} btn-buttontype-${this.buttontype} ${this.customClasses}`;
-    }
-  }
-}, E = ["type", "title", "href", "target", "disabled", "data-role", "data-buttontype", "data-size"];
-function A(t, l, e, f, s, n) {
-  const a = k("Icon");
-  return o(), i("button", {
-    type: e.type,
-    class: d(n.buttonClasses),
-    title: e.title,
-    href: e.href,
-    target: e.target,
-    disabled: e.disabled,
-    "data-role": e.role,
-    "data-buttontype": e.buttontype,
-    "data-size": e.size
-  }, [
-    e.icon && e.iconPosition === "prepend" ? (o(), x(a, {
-      key: 0,
-      "icon-class": "mr-2",
-      name: e.icon
-    }, null, 8, ["name"])) : u("", !0),
-    y(t.$slots, "default", {}, void 0, !0),
-    e.icon && e.iconPosition === "append" ? (o(), x(a, {
-      key: 1,
-      "icon-class": "ml-2",
-      name: e.icon
-    }, null, 8, ["name"])) : u("", !0)
-  ], 10, E);
-}
-const te = /* @__PURE__ */ g(W, [["render", A], ["__scopeId", "data-v-45c99738"]]), D = {
-  name: "fmxDropdown",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: null
-    },
-    options: {
-      type: Array,
-      default: () => [],
-      validator(t) {
-        return t.every((l) => l && typeof l.value < "u" && typeof l.label == "string");
-      }
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    triggerClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    fullScreen: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      isOpen: !1,
-      justChanged: !1,
-      changeTimeout: null
-    };
-  },
-  computed: {
-    selectedLabel() {
-      const t = this.options.find((l) => l.value === this.modelValue);
-      return t ? t.label : this.placeholder;
-    }
-  },
-  methods: {
-    toggle() {
-      this.disabled || (this.isOpen = !this.isOpen);
-    },
-    close() {
-      this.isOpen = !1;
-    },
-    select(t) {
-      const l = t.value !== this.modelValue;
-      this.$emit("update:modelValue", t.value), this.isOpen = !1, l && (this.changeTimeout && clearTimeout(this.changeTimeout), this.justChanged = !0, this.changeTimeout = setTimeout(() => {
-        this.justChanged = !1, this.changeTimeout = null;
-      }, 200));
-    },
-    handleClickOutside(t) {
-      this.$refs.dropdownRoot && !this.$refs.dropdownRoot.contains(t.target) && (this.isOpen = !1);
-    }
-  },
-  mounted() {
-    document.addEventListener("click", this.handleClickOutside);
-  },
-  beforeUnmount() {
-    document.removeEventListener("click", this.handleClickOutside), this.changeTimeout && clearTimeout(this.changeTimeout);
-  }
-}, R = {
-  class: "fmx-dropdown relative",
-  ref: "dropdownRoot"
-}, q = {
-  key: 0,
-  class: "block px-1 left-2.5 text-content-defaultalt text-lg mb-1"
-}, H = ["disabled", "aria-expanded"], G = { class: "truncate text-left flex-1" }, U = {
-  key: 0,
-  class: "fmx-dropdown-panel absolute left-0 right-0 mt-2 rounded-2xl shadow-lg bg-surface-defaulthighest border-2 border-surface-neutral-default overflow-hidden z-10",
-  role: "listbox"
-}, Z = { class: "py-1 max-h-[250px] overflow-y-auto" }, J = ["aria-selected", "onClick"], K = {
-  class: "fmx-dropdown-modal-panel bg-surface-defaulthighest rounded-2xl shadow-lg border-2 border-surface-neutral-default overflow-hidden w-[min(300px,90vw)] max-h-[80vh] flex flex-col",
-  role: "listbox"
-}, Q = { class: "py-1 overflow-y-auto max-h-[250px]" }, X = ["aria-selected", "onClick"];
-function Y(t, l, e, f, s, n) {
-  return o(), i("div", R, [
-    e.label ? (o(), i("label", q, h(e.label), 1)) : u("", !0),
-    r("button", {
-      type: "button",
-      disabled: e.disabled,
-      "aria-expanded": s.isOpen,
-      "aria-haspopup": "listbox",
-      class: d(["fmx-dropdown-trigger w-full bg-surface-defaulthighest text-content-default text-lg leading-snug border-2 rounded-2xl px-3 py-3 h-[60px] focus:outline-none focus:border-out hover:border-outline-brand inline-flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed", [e.triggerClass, { "fmx-dropdown-trigger--just-changed": s.justChanged }]]),
-      onClick: l[0] || (l[0] = (...a) => n.toggle && n.toggle(...a))
-    }, [
-      r("span", G, h(n.selectedLabel), 1),
-      (o(), i("svg", {
-        class: d(["fmx-dropdown-chevron h-5 w-5 flex-shrink-0 ml-2 transition-transform", { "rotate-180": s.isOpen }]),
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        "aria-hidden": "true"
-      }, [...l[2] || (l[2] = [
-        r("path", {
-          "fill-rule": "evenodd",
-          d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
-          "clip-rule": "evenodd"
-        }, null, -1)
-      ])], 2))
-    ], 10, H),
-    m(p, { name: "fmx-dropdown" }, {
-      default: b(() => [
-        s.isOpen && !e.fullScreen ? (o(), i("div", U, [
-          r("div", Z, [
-            (o(!0), i(v, null, _(e.options, (a) => (o(), i("button", {
-              key: a.value,
-              type: "button",
-              role: "option",
-              "aria-selected": a.value === e.modelValue,
-              class: d(["fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none", { "bg-surface-defaulthigher": a.value === e.modelValue }]),
-              onClick: (c) => n.select(a)
-            }, [
-              y(t.$slots, "option", {
-                option: a,
-                selected: a.value === e.modelValue
-              }, () => [
-                C(h(a.label), 1)
-              ], !0)
-            ], 10, J))), 128))
-          ])
-        ])) : u("", !0)
-      ]),
-      _: 3
-    }),
-    (o(), x(V, { to: "body" }, [
-      m(p, { name: "fmx-dropdown-modal" }, {
-        default: b(() => [
-          s.isOpen && e.fullScreen ? (o(), i("div", {
-            key: 0,
-            class: "fmx-dropdown-overlay fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-white/30",
-            onClick: l[1] || (l[1] = F((...a) => n.close && n.close(...a), ["self"]))
-          }, [
-            r("div", K, [
-              r("div", Q, [
-                (o(!0), i(v, null, _(e.options, (a) => (o(), i("button", {
-                  key: a.value,
-                  type: "button",
-                  role: "option",
-                  "aria-selected": a.value === e.modelValue,
-                  class: d(["fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none", { "bg-surface-defaulthigher": a.value === e.modelValue }]),
-                  onClick: (c) => n.select(a)
-                }, [
-                  y(t.$slots, "option", {
-                    option: a,
-                    selected: a.value === e.modelValue
-                  }, () => [
-                    C(h(a.label), 1)
-                  ], !0)
-                ], 10, X))), 128))
-              ])
-            ])
-          ])) : u("", !0)
-        ]),
-        _: 3
-      })
-    ]))
-  ], 512);
-}
-const le = /* @__PURE__ */ g(D, [["render", Y], ["__scopeId", "data-v-42865537"]]);
-export {
-  te as fmxButton,
-  le as fmxDropdown,
-  ee as fmxInput
-};

package/dist-lib/flitsmeister-design-system.umd.js

@@ -1 +0,0 @@
-(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.FlitsmeisterDesignSystem={},i.Vue))})(this,function(i,e){"use strict";const c=(l,n)=>{const t=l.__vccOpts||l;for(const[d,s]of n)t[d]=s;return t},m={name:"Icon",props:{name:{type:String,required:!0},iconClass:{type:String,default:""}}},h=["xlink:href"];function p(l,n,t,d,s,o){return t.name?(e.openBlock(),e.createElementBlock("svg",{key:0,class:e.normalizeClass(t.iconClass)},[e.createElementVNode("use",{"xlink:href":`#${t.name}`},null,8,h)],2)):e.createCommentVNode("",!0)}const u=c(m,[["render",p],["__scopeId","data-v-6c8ee23e"]]),f={sm:{input:"h-10 text-base rounded-2xl px-3",inputWithPlaceholder:"pt-5 pb-1",inputWithoutPlaceholder:"py-2 flex items-center justify-center",label:"top-2.5",labelText:"text-base",labelFocused:"peer-focus:top-[4px] peer-focus:left-2.5 peer-focus:text-xs peer-focus:font-bold",labelFilled:"top-[4px] left-2.5 text-xs font-bold",icon:"right-2 top-2.5 text-xl leading-none"},md:{input:"h-[60px] text-lg leading-snug rounded-2xl px-3",inputWithPlaceholder:"pt-6 pb-1",inputWithoutPlaceholder:"py-3 flex items-center justify-center",label:"top-3.5",labelText:"text-lg",labelFocused:"peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold",labelFilled:"top-[6px] left-2.5 text-sm font-bold",icon:"right-2 top-4 text-2xl leading-none"},lg:{input:"h-14 text-lg rounded-2xl px-4",inputWithPlaceholder:"pt-7 pb-1",inputWithoutPlaceholder:"py-4 flex items-center justify-center",label:"top-4",labelText:"text-lg",labelFocused:"peer-focus:top-[8px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold",labelFilled:"top-[8px] left-2.5 text-sm font-bold",icon:"right-3 top-5 text-2xl leading-none"}},g={name:"fmxInput",components:{Icon:u},props:{type:{type:String,default:"text",validator:l=>["text","search","email","number","password","tel"].includes(l)},placeholder:{type:String,default:""},modelValue:{type:[String,Number],default:""},rules:{type:Array,default:()=>[]},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},maxLength:{type:Number,default:null},letterSpacing:{type:Number,default:0},autocomplete:{type:String,default:""},customClass:{type:String,default:""},inputClass:{type:[String,Array,Object],default:""},size:{type:String,default:"md",validator:l=>["sm","md","lg"].includes(l)}},emits:["update:modelValue","focus","blur"],data(){return{errorMessage:"",icon:"",iconClass:"text-current",isFocused:!1}},watch:{modelValue:{immediate:!0,handler(l){!this.isFocused&&(l==null?void 0:l.length)>0&&this.runValidation(l)}}},computed:{sizeConfig(){return f[this.size]||f.md},inputStateClass(){return{"border-outline-danger":this.errorMessage&&!this.isFocused}},labelFilledClass(){return this.modelValue&&this.modelValue.length>0?this.sizeConfig.labelFilled:""}},methods:{handleInput(l){const n=l.target.value;this.$emit("update:modelValue",n)},handleFocus(l){this.isFocused=!0,this.iconClass="",this.icon="",this.$emit("focus",l)},handleBlur(l){this.isFocused=!1,this.runValidation(this.modelValue),this.$emit("blur",l)},runValidation(l){for(const n of this.rules){const t=n(l);if(t){this.errorMessage=t,this.iconClass="text-content-danger",this.icon="stroke-warning";return}this.errorMessage="",this.iconClass="text-content-brand",this.icon="bold-check"}},validate(){this.runValidation(this.modelValue)}}},b=["data-inputgroup-type","data-size"],x={class:"relative"},y=["type","value","disabled","readonly","maxlength","autocomplete"],k=["innerHTML"];function C(l,n,t,d,s,o){const a=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["inputgroup w-full mb-6",[t.customClass]]),"data-inputgroup-type":t.type,"data-size":t.size},[e.createElementVNode("div",x,[e.createElementVNode("input",{type:t.type,value:t.modelValue,onInput:n[0]||(n[0]=(...r)=>o.handleInput&&o.handleInput(...r)),onFocus:n[1]||(n[1]=(...r)=>o.handleFocus&&o.handleFocus(...r)),onBlur:n[2]||(n[2]=(...r)=>o.handleBlur&&o.handleBlur(...r)),disabled:t.disabled,readonly:t.readonly,maxlength:t.maxLength,autocomplete:t.autocomplete,class:e.normalizeClass(["peer fmx-input-border w-full bg-surface-defaulthighest text-content-default border-2 transition duration-300 ease focus:outline-none focus:border-out fmx-input-autofill",[o.inputStateClass,o.sizeConfig.input,t.placeholder?o.sizeConfig.inputWithPlaceholder:o.sizeConfig.inputWithoutPlaceholder,t.inputClass]]),style:e.normalizeStyle({letterSpacing:t.letterSpacing+"em"})},null,46,y),t.placeholder?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(["absolute px-1 left-2.5 text-content-defaultalt transition-all transform origin-left pointer-events-none",o.sizeConfig.label,o.sizeConfig.labelText,o.sizeConfig.labelFocused,o.labelFilledClass])},e.toDisplayString(t.placeholder),3)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"icon-scale"},{default:e.withCtx(()=>[s.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["iconwrapper absolute",[o.sizeConfig.icon,s.iconClass]])},[e.createVNode(a,{name:s.icon},null,8,["name"])],2)):e.createCommentVNode("",!0)]),_:1})]),s.errorMessage&&!s.isFocused?(e.openBlock(),e.createElementBlock("p",{key:0,class:"text-content-danger text-sm font-bold mt-1",innerHTML:s.errorMessage},null,8,k)):e.createCommentVNode("",!0)],10,b)}const _=c(g,[["render",C],["__scopeId","data-v-ca16ddac"]]),B={name:"fmxButton",components:{Icon:u},props:{type:{type:String,default:"button",validator:l=>["button","submit","reset"].includes(l)},title:{type:String},href:{type:String,default:"/"},target:{type:String,default:"_self"},size:{type:String,default:"md",validator:l=>["sm","md","lg","xl"].includes(l)},role:{type:String,default:"strong",validator:l=>["primary","secondary","success","warning","danger","dangeralt","danger-alt","info","strong","weak"].includes(l)},buttontype:{type:String,default:"filled",validator:l=>["filled","text","outline","squared"].includes(l)},icon:{type:String,default:""},iconPosition:{type:String,default:"prepend",validator:l=>["prepend","append"].includes(l)},disabled:{type:Boolean,default:!1},customClasses:{type:String,default:""}},computed:{buttonClasses(){return`btn btn-size-${this.size} btn-role-${this.role} btn-buttontype-${this.buttontype} ${this.customClasses}`}}},w=["type","title","href","target","disabled","data-role","data-buttontype","data-size"];function S(l,n,t,d,s,o){const a=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,class:e.normalizeClass(o.buttonClasses),title:t.title,href:t.href,target:t.target,disabled:t.disabled,"data-role":t.role,"data-buttontype":t.buttontype,"data-size":t.size},[t.icon&&t.iconPosition==="prepend"?(e.openBlock(),e.createBlock(a,{key:0,"icon-class":"mr-2",name:t.icon},null,8,["name"])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default",{},void 0,!0),t.icon&&t.iconPosition==="append"?(e.openBlock(),e.createBlock(a,{key:1,"icon-class":"ml-2",name:t.icon},null,8,["name"])):e.createCommentVNode("",!0)],10,w)}const V=c(B,[["render",S],["__scopeId","data-v-45c99738"]]),z={name:"fmxDropdown",props:{modelValue:{type:[String,Number],default:null},options:{type:Array,default:()=>[],validator(l){return l.every(n=>n&&typeof n.value<"u"&&typeof n.label=="string")}},label:{type:String,default:""},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},triggerClass:{type:[String,Array,Object],default:""},fullScreen:{type:Boolean,default:!1}},emits:["update:modelValue"],data(){return{isOpen:!1,justChanged:!1,changeTimeout:null}},computed:{selectedLabel(){const l=this.options.find(n=>n.value===this.modelValue);return l?l.label:this.placeholder}},methods:{toggle(){this.disabled||(this.isOpen=!this.isOpen)},close(){this.isOpen=!1},select(l){const n=l.value!==this.modelValue;this.$emit("update:modelValue",l.value),this.isOpen=!1,n&&(this.changeTimeout&&clearTimeout(this.changeTimeout),this.justChanged=!0,this.changeTimeout=setTimeout(()=>{this.justChanged=!1,this.changeTimeout=null},200))},handleClickOutside(l){this.$refs.dropdownRoot&&!this.$refs.dropdownRoot.contains(l.target)&&(this.isOpen=!1)}},mounted(){document.addEventListener("click",this.handleClickOutside)},beforeUnmount(){document.removeEventListener("click",this.handleClickOutside),this.changeTimeout&&clearTimeout(this.changeTimeout)}},N={class:"fmx-dropdown relative",ref:"dropdownRoot"},E={key:0,class:"block px-1 left-2.5 text-content-defaultalt text-lg mb-1"},T=["disabled","aria-expanded"],F={class:"truncate text-left flex-1"},I={key:0,class:"fmx-dropdown-panel absolute left-0 right-0 mt-2 rounded-2xl shadow-lg bg-surface-defaulthighest border-2 border-surface-neutral-default overflow-hidden z-10",role:"listbox"},O={class:"py-1 max-h-[250px] overflow-y-auto"},j=["aria-selected","onClick"],P={class:"fmx-dropdown-modal-panel bg-surface-defaulthighest rounded-2xl shadow-lg border-2 border-surface-neutral-default overflow-hidden w-[min(300px,90vw)] max-h-[80vh] flex flex-col",role:"listbox"},L={class:"py-1 overflow-y-auto max-h-[250px]"},M=["aria-selected","onClick"];function D(l,n,t,d,s,o){return e.openBlock(),e.createElementBlock("div",N,[t.label?(e.openBlock(),e.createElementBlock("label",E,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",disabled:t.disabled,"aria-expanded":s.isOpen,"aria-haspopup":"listbox",class:e.normalizeClass(["fmx-dropdown-trigger w-full bg-surface-defaulthighest text-content-default text-lg leading-snug border-2 rounded-2xl px-3 py-3 h-[60px] focus:outline-none focus:border-out hover:border-outline-brand inline-flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed",[t.triggerClass,{"fmx-dropdown-trigger--just-changed":s.justChanged}]]),onClick:n[0]||(n[0]=(...a)=>o.toggle&&o.toggle(...a))},[e.createElementVNode("span",F,e.toDisplayString(o.selectedLabel),1),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["fmx-dropdown-chevron h-5 w-5 flex-shrink-0 ml-2 transition-transform",{"rotate-180":s.isOpen}]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[...n[2]||(n[2]=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z","clip-rule":"evenodd"},null,-1)])],2))],10,T),e.createVNode(e.Transition,{name:"fmx-dropdown"},{default:e.withCtx(()=>[s.isOpen&&!t.fullScreen?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,a=>(e.openBlock(),e.createElementBlock("button",{key:a.value,type:"button",role:"option","aria-selected":a.value===t.modelValue,class:e.normalizeClass(["fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none",{"bg-surface-defaulthigher":a.value===t.modelValue}]),onClick:r=>o.select(a)},[e.renderSlot(l.$slots,"option",{option:a,selected:a.value===t.modelValue},()=>[e.createTextVNode(e.toDisplayString(a.label),1)],!0)],10,j))),128))])])):e.createCommentVNode("",!0)]),_:3}),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"fmx-dropdown-modal"},{default:e.withCtx(()=>[s.isOpen&&t.fullScreen?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fmx-dropdown-overlay fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-white/30",onClick:n[1]||(n[1]=e.withModifiers((...a)=>o.close&&o.close(...a),["self"]))},[e.createElementVNode("div",P,[e.createElementVNode("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,a=>(e.openBlock(),e.createElementBlock("button",{key:a.value,type:"button",role:"option","aria-selected":a.value===t.modelValue,class:e.normalizeClass(["fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none",{"bg-surface-defaulthigher":a.value===t.modelValue}]),onClick:r=>o.select(a)},[e.renderSlot(l.$slots,"option",{option:a,selected:a.value===t.modelValue},()=>[e.createTextVNode(e.toDisplayString(a.label),1)],!0)],10,M))),128))])])])):e.createCommentVNode("",!0)]),_:3})]))],512)}const W=c(z,[["render",D],["__scopeId","data-v-42865537"]]);i.fmxButton=V,i.fmxDropdown=W,i.fmxInput=_,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});