mltc-design-system/dist/mltc-design-system.es.js

長照設計系統

import { defineComponent as B, computed as k, createElementBlock as s, openBlock as o, normalizeStyle as G, normalizeClass as $, createCommentVNode as i, createElementVNode as n, renderSlot as I, ref as C, withDirectives as N, toDisplayString as g, vShow as H, createTextVNode as A, createBlock as j, resolveDynamicComponent as F, mergeProps as J, onMounted as X, onBeforeUnmount as Y, nextTick as Z, withKeys as O, withModifiers as S, createVNode as x, Fragment as L, renderList as W, Transition as _, withCtx as ee, vModelText as le, inject as te, provide as ne } from "vue";
const oe = B({
  name: "Button",
  props: {
    type: {
      type: String,
      default: "default",
      validator: (e) => ["default", "primary", "secondary", "text", "link", "outline"].includes(e)
    },
    size: {
      type: String,
      default: "medium",
      validator: (e) => ["small", "medium", "large"].includes(e)
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    loading: {
      type: Boolean,
      default: !1
    },
    block: {
      type: Boolean,
      default: !1
    },
    plain: {
      type: Boolean,
      default: !1
    },
    color: {
      type: String,
      default: ""
    }
  },
  emits: ["click"],
  setup(e, { emit: l }) {
    const a = (u) => {
      e.disabled || e.loading || l("click", u);
    }, d = k(() => !!e.color || !1), r = k(() => {
      if (!d.value) return {};
      const u = e.color, m = h(e.color, 0.1), b = t(e.color, 0.1), y = (v) => {
        const f = v.startsWith("#") ? v.substring(1) : v, V = parseInt(f.substring(0, 2), 16), p = parseInt(f.substring(2, 4), 16), T = parseInt(f.substring(4, 6), 16);
        return `${V}, ${p}, ${T}`;
      };
      return {
        "--button-bg-color": u,
        "--button-text-color": e.plain ? u : "white",
        "--button-border-color": u,
        "--button-hover-bg-color": m,
        "--button-active-bg-color": b,
        "--button-rgb-values": y(u),
        "--button-hover-rgb-values": y(m),
        "--button-active-rgb-values": y(b)
      };
    });
    function h(u, m) {
      try {
        const b = u.startsWith("#") ? u.substring(1) : u;
        let y = parseInt(b.substring(0, 2), 16), v = parseInt(b.substring(2, 4), 16), f = parseInt(b.substring(4, 6), 16);
        return y = Math.min(255, y + Math.round(255 * m)), v = Math.min(255, v + Math.round(255 * m)), f = Math.min(255, f + Math.round(255 * m)), `#${y.toString(16).padStart(2, "0")}${v.toString(16).padStart(2, "0")}${f.toString(16).padStart(2, "0")}`;
      } catch {
        return u;
      }
    }
    function t(u, m) {
      try {
        const b = u.startsWith("#") ? u.substring(1) : u;
        let y = parseInt(b.substring(0, 2), 16), v = parseInt(b.substring(2, 4), 16), f = parseInt(b.substring(4, 6), 16);
        return y = Math.max(0, y - Math.round(255 * m)), v = Math.max(0, v - Math.round(255 * m)), f = Math.max(0, f - Math.round(255 * m)), `#${y.toString(16).padStart(2, "0")}${v.toString(16).padStart(2, "0")}${f.toString(16).padStart(2, "0")}`;
      } catch {
        return u;
      }
    }
    return {
      handleClick: a,
      customColor: d,
      customColorStyle: r
    };
  }
}), M = (e, l) => {
  const a = e.__vccOpts || e;
  for (const [d, r] of l)
    a[d] = r;
  return a;
}, se = ["disabled"], re = {
  key: 0,
  class: "icon"
}, ae = {
  key: 1,
  class: "icon"
}, ie = { key: 2 };
function de(e, l, a, d, r, h) {
  return o(), s("button", {
    class: $([
      "mltc-button",
      `mltc-button--${e.type}`,
      `mltc-button--${e.size}`,
      {
        "mltc-button--disabled": e.disabled,
        "mltc-button--block": e.block,
        "mltc-button--custom": e.customColor,
        "mltc-button--custom-plain": e.customColor && e.plain
      }
    ]),
    style: G(e.customColorStyle),
    disabled: e.disabled || e.loading,
    onClick: l[0] || (l[0] = (...t) => e.handleClick && e.handleClick(...t))
  }, [
    e.loading ? (o(), s("span", re, l[1] || (l[1] = [
      n("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 24 24",
        width: "1em",
        height: "1em",
        class: "animate-spin"
      }, [
        n("circle", {
          cx: "12",
          cy: "12",
          r: "10",
          stroke: "currentColor",
          "stroke-width": "4",
          fill: "none",
          opacity: "0.25"
        }),
        n("path", {
          d: "M12 2a10 10 0 0 1 10 10",
          stroke: "currentColor",
          "stroke-width": "4",
          "stroke-linecap": "round",
          fill: "none"
        })
      ], -1)
    ]))) : i("", !0),
    e.$slots.icon && !e.loading ? (o(), s("span", ae, [
      I(e.$slots, "icon")
    ])) : i("", !0),
    e.$slots.default ? (o(), s("span", ie, [
      I(e.$slots, "default")
    ])) : i("", !0)
  ], 14, se);
}
const ue = /* @__PURE__ */ M(oe, [["render", de]]), ce = { class: "demo-container" }, fe = { class: "demo-block" }, pe = { class: "demo-content" }, he = { class: "demo-code-container" }, me = { class: "demo-code" }, ge = { class: "language-html" }, be = /* @__PURE__ */ B({
  __name: "DemoBlock",
  props: {
    codeContent: {
      type: String,
      required: !0,
      description: "要顯示的程式碼內容"
    }
  },
  setup(e) {
    B({
      name: "DemoBlock"
    });
    const l = C(!1), a = () => {
      l.value = !l.value;
    };
    return (d, r) => (o(), s("div", ce, [
      n("div", fe, [
        n("div", pe, [
          I(d.$slots, "default", {}, void 0, !0)
        ]),
        n("div", he, [
          n("div", {
            class: "demo-code-header",
            onClick: a
          }, [
            r[1] || (r[1] = n("span", null, "程式碼", -1)),
            n("span", {
              class: $(["code-expand-icon", { "is-active": l.value }])
            }, r[0] || (r[0] = [
              n("svg", {
                xmlns: "http://www.w3.org/2000/svg",
                width: "16",
                height: "16",
                viewBox: "0 0 24 24",
                fill: "none",
                stroke: "currentColor",
                "stroke-width": "2",
                "stroke-linecap": "round",
                "stroke-linejoin": "round"
              }, [
                n("polyline", { points: "6 9 12 15 18 9" })
              ], -1)
            ]), 2)
          ]),
          N(n("div", me, [
            n("pre", null, [
              n("code", ge, g(e.codeContent), 1)
            ])
          ], 512), [
            [H, l.value]
          ])
        ])
      ])
    ]));
  }
}), ye = /* @__PURE__ */ M(be, [["__scopeId", "data-v-ca6763ac"]]);
let E = 0;
function R(e = "") {
  const l = (/* @__PURE__ */ new Date()).getTime(), a = Math.floor(Math.random() * 1e3);
  return E += 1, `${e}${l}-${a}-${E}`;
}
const ve = B({
  name: "Input",
  inheritAttrs: !1,
  props: {
    modelValue: {
      type: [String, Number],
      default: ""
    },
    type: {
      type: String,
      default: "text",
      validator: (e) => ["text", "password", "number", "email", "tel", "url", "search"].includes(e)
    },
    size: {
      type: String,
      default: "medium",
      validator: (e) => ["small", "medium", "large"].includes(e)
    },
    label: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    required: {
      type: Boolean,
      default: !1
    },
    clearable: {
      type: Boolean,
      default: !1
    },
    prefixIcon: {
      type: [String, Object],
      default: null
    },
    suffixIcon: {
      type: [String, Object],
      default: null
    },
    error: {
      type: Boolean,
      default: !1
    },
    errorMessage: {
      type: String,
      default: ""
    },
    helpText: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue", "input", "change", "focus", "blur", "clear"],
  setup(e, { emit: l }) {
    const a = C(null), d = k(() => e.label ? `mltc-input-${R()}` : void 0);
    return {
      inputRef: a,
      inputId: d,
      handleInput: (f) => {
        const V = f.target;
        l("update:modelValue", V.value), l("input", f);
      },
      handleChange: (f) => {
        l("change", f);
      },
      handleFocus: (f) => {
        l("focus", f);
      },
      handleBlur: (f) => {
        l("blur", f);
      },
      handleClear: () => {
        l("update:modelValue", ""), l("clear"), a.value && a.value.focus();
      },
      focus: () => {
        a.value && a.value.focus();
      },
      blur: () => {
        a.value && a.value.blur();
      },
      select: () => {
        a.value && a.value.select();
      }
    };
  }
}), ke = ["for"], we = {
  key: 0,
  class: "required-mark"
}, $e = {
  key: 0,
  class: "prefix-container"
}, Ce = {
  key: 0,
  class: "prefix-icon"
}, Se = ["id", "type", "value", "placeholder", "readonly", "disabled"], Be = {
  key: 2,
  class: "suffix-container"
}, Ve = {
  key: 0,
  class: "suffix-icon"
}, Ie = {
  key: 1,
  class: "error-message"
}, Me = {
  key: 2,
  class: "help-text"
};
function Oe(e, l, a, d, r, h) {
  return o(), s("div", {
    class: $(["mltc-input-wrapper", { disabled: e.disabled }])
  }, [
    e.label ? (o(), s("label", {
      key: 0,
      for: e.inputId,
      class: "mltc-input-label"
    }, [
      A(g(e.label) + " ", 1),
      e.required ? (o(), s("span", we, "*")) : i("", !0)
    ], 8, ke)) : i("", !0),
    n("div", {
      class: $(["mltc-input-container", [
        e.size,
        {
          error: e.error,
          disabled: e.disabled
        }
      ]])
    }, [
      e.$slots.prefix || e.prefixIcon ? (o(), s("div", $e, [
        I(e.$slots, "prefix", {}, () => [
          e.prefixIcon ? (o(), s("span", Ce, [
            (o(), j(F(e.prefixIcon)))
          ])) : i("", !0)
        ], !0)
      ])) : i("", !0),
      n("input", J({
        id: e.inputId,
        ref: "inputRef"
      }, e.$attrs, {
        type: e.type,
        value: e.modelValue,
        placeholder: e.placeholder,
        readonly: e.readonly,
        disabled: e.disabled,
        class: ["mltc-input", {
          "no-prefix": !e.$slots.prefix && !e.prefixIcon,
          "no-suffix": !e.$slots.suffix && !e.suffixIcon && !e.clearable
        }],
        onInput: l[0] || (l[0] = (...t) => e.handleInput && e.handleInput(...t)),
        onFocus: l[1] || (l[1] = (...t) => e.handleFocus && e.handleFocus(...t)),
        onBlur: l[2] || (l[2] = (...t) => e.handleBlur && e.handleBlur(...t)),
        onChange: l[3] || (l[3] = (...t) => e.handleChange && e.handleChange(...t))
      }), null, 16, Se),
      e.clearable && e.modelValue && !e.disabled && !e.readonly ? (o(), s("div", {
        key: 1,
        class: "clear-button",
        onClick: l[4] || (l[4] = (...t) => e.handleClear && e.handleClear(...t))
      }, l[5] || (l[5] = [
        n("svg", {
          xmlns: "http://www.w3.org/2000/svg",
          width: "16",
          height: "16",
          viewBox: "0 0 24 24",
          fill: "none",
          stroke: "currentColor",
          "stroke-width": "2",
          "stroke-linecap": "round",
          "stroke-linejoin": "round"
        }, [
          n("circle", {
            cx: "12",
            cy: "12",
            r: "10"
          }),
          n("line", {
            x1: "15",
            y1: "9",
            x2: "9",
            y2: "15"
          }),
          n("line", {
            x1: "9",
            y1: "9",
            x2: "15",
            y2: "15"
          })
        ], -1)
      ]))) : i("", !0),
      e.$slots.suffix || e.suffixIcon ? (o(), s("div", Be, [
        I(e.$slots, "suffix", {}, () => [
          e.suffixIcon ? (o(), s("span", Ve, [
            (o(), j(F(e.suffixIcon)))
          ])) : i("", !0)
        ], !0)
      ])) : i("", !0)
    ], 2),
    e.error && e.errorMessage ? (o(), s("div", Ie, g(e.errorMessage), 1)) : i("", !0),
    !e.error && e.helpText ? (o(), s("div", Me, g(e.helpText), 1)) : i("", !0)
  ], 2);
}
const De = /* @__PURE__ */ M(ve, [["render", Oe], ["__scopeId", "data-v-126d3754"]]), Ae = B({
  name: "Select",
  props: {
    modelValue: {
      type: [String, Number, Array],
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: "請選擇"
    },
    size: {
      type: String,
      default: "medium",
      validator: (e) => ["small", "medium", "large"].includes(e)
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    clearable: {
      type: Boolean,
      default: !1
    },
    multiple: {
      type: Boolean,
      default: !1
    },
    filterable: {
      type: Boolean,
      default: !1
    },
    searchPlaceholder: {
      type: String,
      default: "搜尋選項"
    },
    emptyText: {
      type: String,
      default: "無匹配選項"
    },
    label: {
      type: String,
      default: ""
    },
    required: {
      type: Boolean,
      default: !1
    },
    error: {
      type: Boolean,
      default: !1
    },
    errorMessage: {
      type: String,
      default: ""
    },
    helpText: {
      type: String,
      default: ""
    },
    dropdownWidth: {
      type: [String, Number],
      default: ""
    },
    maxHeight: {
      type: [String, Number],
      default: 300
    }
  },
  emits: ["update:modelValue", "change", "focus", "blur", "clear", "visible-change"],
  setup(e, { emit: l }) {
    const a = k(() => e.label ? `mltc-select-${R()}` : void 0), d = C(!1), r = C(""), h = C(null), t = C(null), u = C(null), m = C(null), b = k(() => {
      const c = {};
      return e.dropdownWidth && (c.width = typeof e.dropdownWidth == "number" ? `${e.dropdownWidth}px` : e.dropdownWidth), e.maxHeight && (c.maxHeight = typeof e.maxHeight == "number" ? `${e.maxHeight}px` : e.maxHeight), c;
    }), y = k(() => r.value ? e.options.filter(
      (c) => c.label.toLowerCase().includes(r.value.toLowerCase())
    ) : e.options), v = k(() => e.multiple ? Array.isArray(e.modelValue) && e.modelValue.length > 0 : e.modelValue !== ""), f = k(() => !e.multiple || !Array.isArray(e.modelValue) ? [] : e.options.filter(
      (c) => e.modelValue.includes(c.value)
    )), V = k(() => {
      if (e.multiple || Array.isArray(e.modelValue))
        return "";
      const c = e.options.find((w) => w.value === e.modelValue);
      return c ? c.label : "";
    }), p = (c) => e.multiple && Array.isArray(e.modelValue) ? e.modelValue.includes(c.value) : e.modelValue === c.value, T = (c) => {
      if (e.multiple && Array.isArray(e.modelValue)) {
        const w = [...e.modelValue], D = w.indexOf(c.value);
        D === -1 ? w.push(c.value) : w.splice(D, 1), l("update:modelValue", w), l("change", w);
      } else
        l("update:modelValue", c.value), l("change", c.value), z();
    }, P = (c) => {
      if (!e.multiple || !Array.isArray(e.modelValue))
        return;
      const w = e.modelValue.filter(
        (D) => D !== c.value
      );
      l("update:modelValue", w), l("change", w);
    }, Q = () => {
      const c = e.multiple ? [] : "";
      l("update:modelValue", c), l("clear");
    }, U = () => {
    }, K = () => {
      d.value = !d.value, d.value ? (r.value = "", l("focus"), Z(() => {
        e.filterable && m.value && m.value.focus();
      })) : l("blur"), l("visible-change", d.value);
    }, z = () => {
      d.value && (d.value = !1, r.value = "", l("blur"), l("visible-change", !1));
    }, q = (c) => {
      const w = c.target;
      d.value && h.value && !h.value.contains(w) && z();
    };
    return X(() => {
      document.addEventListener("click", q);
    }), Y(() => {
      document.removeEventListener("click", q);
    }), {
      selectId: a,
      selectContainerRef: h,
      dropdownRef: t,
      optionsListRef: u,
      searchInputRef: m,
      isOpen: d,
      searchQuery: r,
      dropdownStyle: b,
      filteredOptions: y,
      hasSelected: v,
      selectedOptions: f,
      selectedLabel: V,
      isOptionSelected: p,
      selectOption: T,
      removeOption: P,
      handleClear: Q,
      handleSearch: U,
      toggleDropdown: K,
      closeDropdown: z
    };
  }
}), Te = ["for"], ze = {
  key: 0,
  class: "required-mark"
}, Ne = { class: "mltc-select-selection" }, Re = {
  key: 0,
  class: "mltc-select-tags"
}, qe = { class: "mltc-select-tag-text" }, je = ["onClick"], Fe = {
  key: 1,
  class: "mltc-select-selected"
}, Le = {
  key: 2,
  class: "mltc-select-placeholder"
}, We = {
  key: 0,
  class: "mltc-select-search"
}, Ee = ["placeholder"], Ge = {
  ref: "optionsListRef",
  class: "mltc-select-options-list"
}, He = ["onClick"], Pe = {
  key: 0,
  class: "mltc-select-checkbox"
}, Qe = {
  key: 0,
  xmlns: "http://www.w3.org/2000/svg",
  width: "16",
  height: "16",
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  "stroke-width": "2",
  "stroke-linecap": "round",
  "stroke-linejoin": "round"
}, Ue = {
  key: 1,
  class: "mltc-select-empty"
}, Ke = {
  key: 1,
  class: "mltc-select-error"
}, Je = {
  key: 2,
  class: "mltc-select-help"
};
function Xe(e, l, a, d, r, h) {
  return o(), s("div", {
    class: $(["mltc-select-wrapper", { disabled: e.disabled }])
  }, [
    e.label ? (o(), s("label", {
      key: 0,
      for: e.selectId,
      class: "mltc-select-label"
    }, [
      A(g(e.label) + " ", 1),
      e.required ? (o(), s("span", ze, "*")) : i("", !0)
    ], 8, Te)) : i("", !0),
    n("div", {
      ref: "selectContainerRef",
      class: $(["mltc-select-container", [
        e.size,
        {
          error: e.error,
          disabled: e.disabled,
          opened: e.isOpen,
          "is-multiple": e.multiple
        }
      ]]),
      onClick: l[4] || (l[4] = (t) => !e.disabled && !e.readonly && e.toggleDropdown()),
      onKeydown: [
        l[5] || (l[5] = O(S((t) => !e.disabled && !e.readonly && e.toggleDropdown(), ["stop", "prevent"]), ["enter"])),
        l[6] || (l[6] = O(S((t) => !e.disabled && !e.readonly && e.toggleDropdown(), ["stop", "prevent"]), ["space"])),
        l[7] || (l[7] = O(S((t) => !e.disabled && !e.readonly && !e.isOpen && e.toggleDropdown(), ["prevent"]), ["down"])),
        l[8] || (l[8] = O(S((t) => e.isOpen && e.closeDropdown(), ["stop"]), ["esc"])),
        l[9] || (l[9] = O((t) => e.isOpen && e.closeDropdown(), ["tab"]))
      ],
      tabindex: "0"
    }, [
      n("div", Ne, [
        e.multiple && e.selectedOptions.length > 0 ? (o(), s("div", Re, [
          (o(!0), s(L, null, W(e.selectedOptions, (t) => (o(), s("div", {
            key: t.value,
            class: "mltc-select-tag"
          }, [
            n("span", qe, g(t.label), 1),
            n("span", {
              class: "mltc-select-tag-close",
              onClick: S((u) => e.removeOption(t), ["stop"])
            }, l[10] || (l[10] = [
              n("svg", {
                xmlns: "http://www.w3.org/2000/svg",
                width: "14",
                height: "14",
                viewBox: "0 0 24 24",
                fill: "none",
                stroke: "currentColor",
                "stroke-width": "2",
                "stroke-linecap": "round",
                "stroke-linejoin": "round"
              }, [
                n("line", {
                  x1: "18",
                  y1: "6",
                  x2: "6",
                  y2: "18"
                }),
                n("line", {
                  x1: "6",
                  y1: "6",
                  x2: "18",
                  y2: "18"
                })
              ], -1)
            ]), 8, je)
          ]))), 128))
        ])) : !e.multiple && e.selectedLabel ? (o(), s("div", Fe, g(e.selectedLabel), 1)) : (o(), s("div", Le, g(e.placeholder), 1))
      ]),
      e.clearable && e.hasSelected && !e.disabled && !e.readonly ? (o(), s("div", {
        key: 0,
        class: "mltc-select-clear",
        onClick: l[0] || (l[0] = S((...t) => e.handleClear && e.handleClear(...t), ["stop"]))
      }, l[11] || (l[11] = [
        n("svg", {
          xmlns: "http://www.w3.org/2000/svg",
          width: "16",
          height: "16",
          viewBox: "0 0 24 24",
          fill: "none",
          stroke: "currentColor",
          "stroke-width": "2",
          "stroke-linecap": "round",
          "stroke-linejoin": "round"
        }, [
          n("circle", {
            cx: "12",
            cy: "12",
            r: "10"
          }),
          n("line", {
            x1: "15",
            y1: "9",
            x2: "9",
            y2: "15"
          }),
          n("line", {
            x1: "9",
            y1: "9",
            x2: "15",
            y2: "15"
          })
        ], -1)
      ]))) : i("", !0),
      n("div", {
        class: $(["mltc-select-arrow", { "is-reverse": e.isOpen }])
      }, l[12] || (l[12] = [
        n("svg", {
          xmlns: "http://www.w3.org/2000/svg",
          width: "16",
          height: "16",
          viewBox: "0 0 24 24",
          fill: "none",
          stroke: "currentColor",
          "stroke-width": "2",
          "stroke-linecap": "round",
          "stroke-linejoin": "round"
        }, [
          n("polyline", { points: "6 9 12 15 18 9" })
        ], -1)
      ]), 2),
      x(_, { name: "mltc-select-dropdown" }, {
        default: ee(() => [
          N(n("div", {
            ref: "dropdownRef",
            class: "mltc-select-dropdown",
            style: G(e.dropdownStyle)
          }, [
            e.filterable ? (o(), s("div", We, [
              N(n("input", {
                ref: "searchInputRef",
                "onUpdate:modelValue": l[1] || (l[1] = (t) => e.searchQuery = t),
                type: "text",
                class: "mltc-select-search-input",
                placeholder: e.searchPlaceholder,
                onClick: l[2] || (l[2] = S(() => {
                }, ["stop"])),
                onInput: l[3] || (l[3] = (...t) => e.handleSearch && e.handleSearch(...t))
              }, null, 40, Ee), [
                [le, e.searchQuery]
              ])
            ])) : i("", !0),
            n("div", Ge, [
              e.filteredOptions.length > 0 ? (o(!0), s(L, { key: 0 }, W(e.filteredOptions, (t, u) => (o(), s("div", {
                key: t.value,
                class: $(["mltc-select-option", {
                  "is-selected": e.isOptionSelected(t),
                  "is-disabled": t.disabled
                }]),
                onClick: S((m) => !t.disabled && e.selectOption(t), ["stop"])
              }, [
                e.multiple ? (o(), s("span", Pe, [
                  e.isOptionSelected(t) ? (o(), s("svg", Qe, l[13] || (l[13] = [
                    n("polyline", { points: "20 6 9 17 4 12" }, null, -1)
                  ]))) : i("", !0)
                ])) : i("", !0),
                A(" " + g(t.label), 1)
              ], 10, He))), 128)) : (o(), s("div", Ue, g(e.emptyText), 1))
            ], 512)
          ], 4), [
            [H, e.isOpen]
          ])
        ]),
        _: 1
      })
    ], 34),
    e.error && e.errorMessage ? (o(), s("div", Ke, g(e.errorMessage), 1)) : i("", !0),
    !e.error && e.helpText ? (o(), s("div", Je, g(e.helpText), 1)) : i("", !0)
  ], 2);
}
const Ye = /* @__PURE__ */ M(Ae, [["render", Xe]]), Ze = B({
  name: "Checkbox",
  props: {
    modelValue: {
      type: Boolean,
      default: !1
    },
    label: {
      type: String,
      default: ""
    },
    value: {
      type: [String, Number, Boolean],
      default: ""
    },
    size: {
      type: String,
      default: "medium",
      validator: (e) => ["small", "medium", "large"].includes(e)
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    indeterminate: {
      type: Boolean,
      default: !1
    },
    name: {
      type: String,
      default: ""
    },
    error: {
      type: Boolean,
      default: !1
    },
    errorMessage: {
      type: String,
      default: ""
    },
    trueValue: {
      type: [String, Number, Boolean],
      default: !0
    },
    falseValue: {
      type: [String, Number, Boolean],
      default: !1
    }
  },
  emits: ["update:modelValue", "change", "focus", "blur"],
  setup(e, { emit: l }) {
    const a = C(null), d = k(() => `mltc-checkbox-${R()}`), r = te("checkboxGroup", null), h = k(() => !!r), t = k(() => {
      if (h.value && r) {
        const p = r.modelValue;
        return Array.isArray(p) && p.includes(e.value);
      }
      return e.modelValue === e.trueValue;
    }), u = k(() => h.value && r && r.disabled || e.disabled);
    return {
      checkboxRef: a,
      checkboxId: d,
      isChecked: t,
      isDisabled: u,
      handleClick: () => {
        if (!u.value)
          if (h.value && r) {
            const { toggleOption: p } = r;
            p({
              value: e.value,
              label: e.label
            });
          } else
            l("update:modelValue", t.value ? e.falseValue : e.trueValue);
      },
      handleChange: (p) => {
        u.value || l("change", p);
      },
      handleFocus: (p) => {
        l("focus", p);
      },
      handleBlur: (p) => {
        l("blur", p);
      },
      focus: () => {
        var p;
        (p = a.value) == null || p.focus();
      },
      blur: () => {
        var p;
        (p = a.value) == null || p.blur();
      }
    };
  }
}), xe = ["id", "checked", "disabled", "value"], _e = {
  key: 0,
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24",
  class: "checkbox-icon",
  width: "1em",
  height: "1em",
  fill: "none",
  stroke: "currentColor",
  "stroke-width": "3",
  "stroke-linecap": "round",
  "stroke-linejoin": "round"
}, el = {
  key: 1,
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24",
  class: "checkbox-icon",
  width: "1em",
  height: "1em",
  fill: "none",
  stroke: "currentColor",
  "stroke-width": "3",
  "stroke-linecap": "round",
  "stroke-linejoin": "round"
}, ll = ["for"], tl = {
  key: 0,
  class: "error-message"
};
function nl(e, l, a, d, r, h) {
  return o(), s("div", {
    class: $(["mltc-checkbox-wrapper", [
      e.size,
      {
        disabled: e.isDisabled,
        error: e.error
      }
    ]])
  }, [
    n("div", {
      class: "mltc-checkbox-container",
      onClick: l[3] || (l[3] = (...t) => e.handleClick && e.handleClick(...t))
    }, [
      n("input", {
        id: e.checkboxId,
        ref: "checkboxRef",
        type: "checkbox",
        class: "mltc-checkbox-input",
        checked: e.isChecked,
        disabled: e.isDisabled,
        value: e.label || e.value,
        onChange: l[0] || (l[0] = (...t) => e.handleChange && e.handleChange(...t)),
        onFocus: l[1] || (l[1] = (...t) => e.handleFocus && e.handleFocus(...t)),
        onBlur: l[2] || (l[2] = (...t) => e.handleBlur && e.handleBlur(...t))
      }, null, 40, xe),
      n("span", {
        class: $(["mltc-checkbox-custom", {
          "is-checked": e.isChecked,
          "is-indeterminate": e.indeterminate
        }])
      }, [
        e.isChecked && !e.indeterminate ? (o(), s("svg", _e, l[4] || (l[4] = [
          n("polyline", { points: "20 6 9 17 4 12" }, null, -1)
        ]))) : i("", !0),
        e.indeterminate ? (o(), s("svg", el, l[5] || (l[5] = [
          n("line", {
            x1: "5",
            y1: "12",
            x2: "19",
            y2: "12"
          }, null, -1)
        ]))) : i("", !0)
      ], 2),
      e.label ? (o(), s("label", {
        key: 0,
        for: e.checkboxId,
        class: "mltc-checkbox-label"
      }, g(e.label), 9, ll)) : i("", !0)
    ]),
    e.error && e.errorMessage ? (o(), s("div", tl, g(e.errorMessage), 1)) : i("", !0)
  ], 2);
}
const ol = /* @__PURE__ */ M(Ze, [["render", nl]]), sl = B({
  name: "CheckboxGroup",
  props: {
    modelValue: {
      type: Array,
      required: !0
    },
    label: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "medium",
      validator: (e) => ["small", "medium", "large"].includes(e)
    },
    direction: {
      type: String,
      default: "horizontal",
      validator: (e) => ["horizontal", "vertical"].includes(e)
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    required: {
      type: Boolean,
      default: !1
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 1 / 0
    },
    error: {
      type: Boolean,
      default: !1
    },
    errorMessage: {
      type: String,
      default: ""
    },
    helpText: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue", "change"],
  setup(e, { emit: l }) {
    const a = (d) => {
      const { modelValue: r } = e, h = r.indexOf(d.value), t = [...r];
      h === -1 ? r.length < e.max && t.push(d.value) : r.length > e.min && t.splice(h, 1), l("update:modelValue", t), l("change", t);
    };
    return ne("checkboxGroup", {
      modelValue: e.modelValue,
      disabled: e.disabled,
      toggleOption: a
    }), {};
  }
}), rl = {
  key: 0,
  class: "mltc-checkbox-group-label"
}, al = {
  key: 0,
  class: "required-mark"
}, il = { class: "mltc-checkbox-group-content" }, dl = {
  key: 1,
  class: "error-message"
}, ul = {
  key: 2,
  class: "help-text"
};
function cl(e, l, a, d, r, h) {
  return o(), s("div", {
    class: $(["mltc-checkbox-group", [
      e.direction,
      e.size,
      {
        disabled: e.disabled,
        error: e.error
      }
    ]])
  }, [
    e.label ? (o(), s("div", rl, [
      A(g(e.label) + " ", 1),
      e.required ? (o(), s("span", al, "*")) : i("", !0)
    ])) : i("", !0),
    n("div", il, [
      I(e.$slots, "default")
    ]),
    e.error && e.errorMessage ? (o(), s("div", dl, g(e.errorMessage), 1)) : i("", !0),
    !e.error && e.helpText ? (o(), s("div", ul, g(e.helpText), 1)) : i("", !0)
  ], 2);
}
const fl = /* @__PURE__ */ M(sl, [["render", cl]]), pl = [ue, ye, De, Ye, ol, fl], hl = (e) => {
  pl.forEach((l) => {
    l.name ? e.component(`Mltc${l.name}`, l) : console.warn("組件缺少name屬性: ", l);
  });
}, gl = {
  install: hl
};
export {
  ue as Button,
  ol as Checkbox,
  fl as CheckboxGroup,
  ye as DemoBlock,
  De as Input,
  Ye as Select,
  gl as default
};
//# sourceMappingURL=mltc-design-system.es.js.map