@maple-design/ui-vue 0.0.0-stage → 1.1.0

package/es/form/use-form-label-width.mjs

@@ -0,0 +1,93 @@
+import { ref, watch, onMounted, onUpdated, onDeactivated, onActivated, onBeforeUnmount, shallowReactive, computed } from "vue";
+function useFormLabelWidths() {
+  const widths = shallowReactive(/* @__PURE__ */ new Map());
+  const maxLabelWidth = computed(() => Math.max(0, ...widths.values()));
+  function setLabelWidth(width, key) {
+    if (key !== void 0 && Number.isFinite(width) && width >= 0) {
+      widths.set(key, width);
+    }
+  }
+  function removeLabelWidth(key) {
+    if (key !== void 0) {
+      widths.delete(key);
+    }
+  }
+  return { maxLabelWidth, setLabelWidth, removeLabelWidth };
+}
+function useFormLabelMeasurement(element, enabled, registry, trailingElement) {
+  const key = Symbol("form-label");
+  const mounted = ref(false);
+  const active = ref(true);
+  let observer;
+  let listening = false;
+  let frame;
+  function measure() {
+    if (mounted.value && active.value && enabled() && element.value) {
+      const trailing = trailingElement?.value;
+      const trailingStyle = trailing ? window.getComputedStyle(trailing) : void 0;
+      const margins = trailingStyle ? (parseFloat(trailingStyle.marginLeft) || 0) + (parseFloat(trailingStyle.marginRight) || 0) : 0;
+      registry?.setLabelWidth(element.value.offsetWidth + (trailing?.offsetWidth ?? 0) + margins, key);
+    }
+  }
+  function scheduleMeasure() {
+    if (!mounted.value || !active.value || !enabled() || frame !== void 0) {
+      return;
+    }
+    frame = window.requestAnimationFrame(() => {
+      frame = void 0;
+      measure();
+    });
+  }
+  function disconnect() {
+    if (frame !== void 0) {
+      window.cancelAnimationFrame(frame);
+      frame = void 0;
+    }
+    observer?.disconnect();
+    observer = void 0;
+    if (listening) {
+      window.removeEventListener("resize", measure);
+      listening = false;
+    }
+    registry?.removeLabelWidth(key);
+  }
+  function connect() {
+    disconnect();
+    if (!mounted.value || !active.value || !enabled() || !element.value || !registry) {
+      return;
+    }
+    measure();
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(scheduleMeasure);
+      observer.observe(element.value);
+      if (trailingElement?.value) {
+        observer.observe(trailingElement.value, { box: "border-box" });
+      }
+    } else if (typeof window !== "undefined") {
+      window.addEventListener("resize", measure);
+      listening = true;
+    }
+  }
+  watch(() => [enabled(), element.value, trailingElement?.value], connect, { flush: "post" });
+  onMounted(() => {
+    mounted.value = true;
+    connect();
+  });
+  onUpdated(measure);
+  onDeactivated(() => {
+    active.value = false;
+    disconnect();
+  });
+  onActivated(() => {
+    active.value = true;
+    connect();
+  });
+  onBeforeUnmount(() => {
+    mounted.value = false;
+    disconnect();
+  });
+}
+export {
+  useFormLabelMeasurement,
+  useFormLabelWidths
+};

package/es/form/utils.mjs

@@ -0,0 +1,14 @@
+import { resolveFieldPath } from "../utils/field-path.mjs";
+function getValueByPath(obj, path) {
+  return resolveFieldPath(obj, path).v;
+}
+function setValueByPath(obj, path, value) {
+  const { o, k } = resolveFieldPath(obj, path);
+  if (o != null && k) {
+    o[k] = value;
+  }
+}
+export {
+  getValueByPath,
+  setValueByPath
+};

package/es/form/validate-trigger.mjs

@@ -0,0 +1,9 @@
+function hasValidateTrigger(configured, trigger) {
+  if (!configured) {
+    return false;
+  }
+  return Array.isArray(configured) ? configured.includes(trigger) : configured === trigger;
+}
+export {
+  hasValidateTrigger
+};

package/es/form-details/FormDetails.vue.mjs

@@ -0,0 +1,54 @@
+import _sfc_main from "./FormDetails2.vue.mjs";
+import { openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.mjs";
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 0,
+  role: "alert"
+};
+const _hoisted_3 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, {
+    name: _ctx.n()
+  }, {
+    default: withCtx(() => [
+      _ctx.errorMessage || _ctx.extraMessage || _ctx.$slots["extra-message"] ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.n())
+      }, [
+        createElementVNode("div", {
+          id: _ctx.errorId,
+          class: normalizeClass(_ctx.n("error-message"))
+        }, [
+          createVNode(Transition, {
+            name: _ctx.n("message")
+          }, {
+            default: withCtx(() => [
+              _ctx.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.errorMessage), 1)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["name"])
+        ], 10, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.n("extra-message"))
+        }, [
+          createVNode(Transition, {
+            name: _ctx.n("message")
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "extra-message", {}, () => [
+                _ctx.extraMessage ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(_ctx.extraMessage), 1)) : createCommentVNode("", true)
+              ])
+            ]),
+            _: 3
+          }, 8, ["name"])
+        ], 2)
+      ], 2)) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["name"]);
+}
+const FormDetails = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  FormDetails as default
+};

package/es/form-details/FormDetails2.vue.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, computed } from "vue";
+import { useFormErrorDescription } from "../form/error-description.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+const { name, n } = createNamespace("form-details");
+const _sfc_main = defineComponent({
+  name,
+  props,
+  setup(_props, { attrs }) {
+    const { errorId } = useFormErrorDescription();
+    return { n, errorId: computed(() => attrs["data-form-item-feedback"] !== void 0 ? errorId?.value : void 0) };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/form-details/index.mjs

@@ -0,0 +1,11 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import FormDetails from "./FormDetails.vue.mjs";
+import { props } from "./props.mjs";
+withInstall(FormDetails);
+withPropsDefaultsSetter(FormDetails, props);
+const _FormDetailsComponent = FormDetails;
+export {
+  _FormDetailsComponent,
+  FormDetails as default,
+  props as formDetailsProps
+};

package/es/form-details/props.mjs

@@ -0,0 +1,13 @@
+const props = {
+  errorMessage: {
+    type: String,
+    default: ""
+  },
+  extraMessage: {
+    type: String,
+    default: ""
+  }
+};
+export {
+  props
+};

package/es/form-details/style/index.css

@@ -0,0 +1,50 @@
+:where([data-mp-theme]) {
+  color-scheme: var(--mp-color-scheme);
+}
+:root,
+:where([data-mp-theme]) {
+  --mp-form-details-error-message-color: var(--mp-sys-color-content-danger);
+  --mp-form-details-extra-message-color: var(--mp-sys-color-content-secondary);
+  --mp-form-details-margin-top: 6px;
+  --mp-form-details-font-size: 12px;
+  --mp-form-details-message-margin-right: 4px;
+}
+.mp-form-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--mp-form-details-font-size);
+  margin-top: var(--mp-form-details-margin-top);
+}
+.mp-form-details-enter-from,
+.mp-form-details-leave-to {
+  opacity: 0;
+  margin-top: 2px !important;
+}
+.mp-form-details-enter-active,
+.mp-form-details-leave-active {
+  transition: 0.2s all var(--mp-cubic-bezier);
+}
+.mp-form-details__message-enter-from,
+.mp-form-details__message-leave-to {
+  opacity: 0;
+}
+.mp-form-details__message-enter-active,
+.mp-form-details__message-leave-active {
+  transition: 0.2s all var(--mp-cubic-bezier);
+}
+.mp-form-details__error-message {
+  flex-grow: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--mp-form-details-error-message-color);
+  margin-inline-end: var(--mp-form-details-message-margin-right);
+  user-select: none;
+  text-align: start;
+}
+.mp-form-details__extra-message {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--mp-form-details-extra-message-color);
+  user-select: none;
+  text-align: end;
+}

package/es/form-details/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../style/index.css'
+import './index.css'

package/es/grid/Grid.vue.mjs

@@ -0,0 +1,85 @@
+import { defineComponent, computed, shallowRef, ref, provide, onMounted, onUpdated, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { GRID_CONTEXT_KEY } from "./context.mjs";
+import { useResponsiveState } from "./hook/use-responsive-state.mjs";
+import { gridProps } from "./props.mjs";
+import { setItemVisible } from "./utils/index.mjs";
+import { normalizeGridResponsive, resolveGridCols, resolveGridRows } from "./validation.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: createNamespace("grid").name },
+  __name: "Grid",
+  props: gridProps,
+  setup(__props) {
+    const props = __props;
+    const { n } = createNamespace("grid");
+    const rawCols = useResponsiveState(
+      computed(() => normalizeGridResponsive(props.cols, 24)),
+      24
+    );
+    const cols = computed(() => resolveGridCols(rawCols.value));
+    const rawColGap = useResponsiveState(
+      computed(() => normalizeGridResponsive(props.colGap, 0)),
+      0
+    );
+    const rawRowGap = useResponsiveState(
+      computed(() => normalizeGridResponsive(props.rowGap, 0)),
+      0
+    );
+    const colGap = computed(() => Math.max(0, rawColGap.value));
+    const records = shallowRef([]);
+    const mounted = ref(false);
+    const layout = computed(
+      () => setItemVisible({
+        cols: cols.value,
+        collapsed: props.collapsed,
+        collapsedRows: resolveGridRows(props.collapsedRows),
+        itemDataList: records.value.map((record) => record.data.value)
+      })
+    );
+    const reorder = () => {
+      const sorted = [...records.value].sort((a, b) => {
+        if (!a.element.value || !b.element.value) {
+          return 0;
+        }
+        const position = a.element.value.compareDocumentPosition(b.element.value);
+        return position & 4 ? -1 : position & 2 ? 1 : 0;
+      });
+      if (sorted.some((record, i) => record !== records.value[i])) {
+        records.value = sorted;
+      }
+    };
+    provide(GRID_CONTEXT_KEY, {
+      cols,
+      colGap,
+      overflow: computed(() => layout.value.overflow),
+      visible: (id) => !mounted.value || layout.value.displayIndexList.includes(records.value.findIndex((record) => record.id === id)),
+      register: (record) => {
+        records.value = [...records.value, record];
+      },
+      remove: (id) => {
+        records.value = records.value.filter((record) => record.id !== id);
+      },
+      reorder
+    });
+    onMounted(() => {
+      reorder();
+      mounted.value = true;
+    });
+    onUpdated(reorder);
+    const style = computed(() => ({
+      gap: `${Math.max(0, rawRowGap.value)}px ${colGap.value}px`,
+      gridTemplateColumns: `repeat(${cols.value}, minmax(0px, 1fr))`
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(n)()),
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/grid/Grid2.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./Grid.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/grid/GridItem.vue.mjs

@@ -0,0 +1,56 @@
+import { defineComponent, inject, ref, computed, onBeforeUnmount, onUpdated, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { GRID_CONTEXT_KEY } from "./context.mjs";
+import { useResponsiveState } from "./hook/use-responsive-state.mjs";
+import { gridItemProps } from "./item-props.mjs";
+import { resolveItemData } from "./utils/index.mjs";
+import { normalizeGridResponsive } from "./validation.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: createNamespace("grid-item").name },
+  __name: "GridItem",
+  props: gridItemProps,
+  setup(__props) {
+    const props = __props;
+    const { n } = createNamespace("grid-item");
+    const grid = inject(GRID_CONTEXT_KEY, void 0);
+    const element = ref();
+    const id = Symbol("grid-item");
+    const span = useResponsiveState(
+      computed(() => normalizeGridResponsive(props.span, 1)),
+      1
+    );
+    const offset = useResponsiveState(
+      computed(() => normalizeGridResponsive(props.offset, 0)),
+      0
+    );
+    const data = computed(
+      () => resolveItemData(grid?.cols.value ?? 24, { span: span.value, offset: offset.value, suffix: props.suffix })
+    );
+    grid?.register({ id, data, element });
+    onBeforeUnmount(() => grid?.remove(id));
+    onUpdated(() => grid?.reorder());
+    const overflow = computed(() => grid?.overflow.value ?? false);
+    const style = computed(() => {
+      const { span: span2, offset: offset2, suffix } = data.value;
+      const cols = grid?.cols.value ?? 24, gap = grid?.colGap.value ?? 0;
+      return {
+        gridColumn: span2 === 0 ? void 0 : `${suffix ? cols - span2 + 1 : `span ${span2}`} / span ${span2}`,
+        marginInlineStart: offset2 && span2 ? `calc(((100% - ${gap * (span2 - 1)}px) / ${span2} * ${offset2}) + ${gap * offset2}px)` : void 0,
+        display: span2 === 0 || grid && !grid.visible(id) ? "none" : void 0
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        class: normalizeClass(unref(n)()),
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "default", { overflow: overflow.value })
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/grid/GridItem2.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./GridItem.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/grid/context.mjs

@@ -0,0 +1,4 @@
+const GRID_CONTEXT_KEY = Symbol("GRID_CONTEXT_KEY");
+export {
+  GRID_CONTEXT_KEY
+};

package/es/grid/hook/use-responsive-state.mjs

@@ -0,0 +1,57 @@
+import { ref, onMounted, watch, onBeforeUnmount, computed } from "vue";
+const points = [
+  ["xxl", 1600],
+  ["xl", 1200],
+  ["lg", 992],
+  ["md", 768],
+  ["sm", 576]
+];
+function useResponsiveState(value, fallback, _fallbackToXs = true) {
+  const matches = ref({});
+  const cleanup = [];
+  const clear = () => cleanup.splice(0).forEach((stop) => stop());
+  onMounted(() => {
+    watch(
+      () => typeof value.value === "object",
+      (active) => {
+        clear();
+        if (!active) {
+          return;
+        }
+        if (typeof window.matchMedia !== "function") {
+          return;
+        }
+        for (const [point, width] of points) {
+          const query = window.matchMedia(`(min-width: ${width}px)`);
+          const update = () => {
+            matches.value = { ...matches.value, [point]: query.matches };
+          };
+          update();
+          if (query.addEventListener) {
+            query.addEventListener("change", update);
+            cleanup.push(() => query.removeEventListener("change", update));
+          } else {
+            query.addListener(update);
+            cleanup.push(() => query.removeListener(update));
+          }
+        }
+      },
+      { immediate: true }
+    );
+  });
+  onBeforeUnmount(clear);
+  return computed(() => {
+    if (typeof value.value === "number") {
+      return value.value;
+    }
+    for (const [point] of points) {
+      if (matches.value[point] && value.value[point] !== void 0) {
+        return value.value[point];
+      }
+    }
+    return value.value.xs ?? fallback;
+  });
+}
+export {
+  useResponsiveState
+};

package/es/grid/index.mjs

@@ -0,0 +1,20 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import _sfc_main$1 from "./Grid.vue.mjs";
+import _sfc_main from "./GridItem.vue.mjs";
+import { gridItemProps } from "./item-props.mjs";
+import { gridProps } from "./props.mjs";
+const GridItem = withInstall(_sfc_main);
+const Grid = withInstall(_sfc_main$1, Object.assign(_sfc_main$1, { Item: GridItem }), { components: [_sfc_main$1, GridItem] });
+const _GridComponent = Grid;
+const _GridItemComponent = GridItem;
+withPropsDefaultsSetter(Grid, gridProps);
+withPropsDefaultsSetter(GridItem, gridItemProps);
+export {
+  Grid,
+  GridItem,
+  _GridComponent,
+  _GridItemComponent,
+  Grid as default,
+  gridItemProps,
+  gridProps
+};

package/es/grid/item-props.mjs

@@ -0,0 +1,29 @@
+import { isGridResponsive } from "./validation.mjs";
+const gridItemProps = {
+  /**
+   * 跨越的格数
+   */
+  span: {
+    type: [Number, Object],
+    default: 1,
+    validator: process.env.NODE_ENV !== "production" ? isGridResponsive : void 0
+  },
+  /**
+   * 逻辑行内起点的间隔格数
+   */
+  offset: {
+    type: [Number, Object],
+    default: 0,
+    validator: process.env.NODE_ENV !== "production" ? isGridResponsive : void 0
+  },
+  /**
+   * 是否是后缀元素
+   */
+  suffix: {
+    type: Boolean,
+    default: false
+  }
+};
+export {
+  gridItemProps
+};

package/es/grid/props.mjs

@@ -0,0 +1,45 @@
+import { isGridScalar, isGridResponsive } from "./validation.mjs";
+const gridProps = {
+  /**
+   * 每一行展示的列数
+   */
+  cols: {
+    type: [Number, Object],
+    default: 24,
+    validator: process.env.NODE_ENV !== "production" ? isGridResponsive : void 0
+  },
+  /**
+   * 行与行之间的间距
+   */
+  rowGap: {
+    type: [Number, Object],
+    default: 0,
+    validator: process.env.NODE_ENV !== "production" ? isGridResponsive : void 0
+  },
+  /**
+   * 列与列之间的间距
+   */
+  colGap: {
+    type: [Number, Object],
+    default: 0,
+    validator: process.env.NODE_ENV !== "production" ? isGridResponsive : void 0
+  },
+  /**
+   * 是否折叠
+   */
+  collapsed: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 折叠时显示的行数
+   */
+  collapsedRows: {
+    type: Number,
+    default: 1,
+    validator: process.env.NODE_ENV !== "production" ? isGridScalar : void 0
+  }
+};
+export {
+  gridProps
+};

package/es/grid/style/index.css

@@ -0,0 +1,9 @@
+.mp-grid {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+}
+.mp-grid-item {
+  box-sizing: border-box;
+  min-width: 0;
+}

package/es/grid/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../style/index.css'
+import './index.css'

package/es/grid/utils/index.mjs

@@ -0,0 +1,62 @@
+import { normalizeGridScalar, resolveGridCols, resolveGridRows } from "../validation.mjs";
+function resolveItemData(cols, props) {
+  cols = resolveGridCols(cols);
+  const rawSpan = normalizeGridScalar(props.span, 1);
+  if (!(rawSpan > 0)) {
+    return { span: 0, offset: 0, suffix: !!props.suffix };
+  }
+  const offset = Math.min(Math.max(0, Math.floor(normalizeGridScalar(props.offset, 0))), cols);
+  const span = Math.min(Math.max(0, Math.floor(rawSpan)) + offset, cols);
+  return { span, offset: Math.min(offset, Math.max(0, span - 1)), suffix: !!props.suffix };
+}
+function setItemVisible({
+  cols,
+  collapsed,
+  collapsedRows,
+  itemDataList
+}) {
+  if (!collapsed) {
+    return { overflow: false, displayIndexList: itemDataList.map((_, i) => i) };
+  }
+  cols = resolveGridCols(cols);
+  collapsedRows = resolveGridRows(collapsedRows);
+  const suffix = itemDataList.flatMap((item, i) => item.suffix ? [i] : []);
+  const displayIndexList = [];
+  const fits = (indices) => {
+    const selected = new Set(indices);
+    let row = 1, used = 0;
+    for (let i = 0; i < itemDataList.length; i++) {
+      if (!selected.has(i)) {
+        continue;
+      }
+      const span = itemDataList[i].span;
+      if (!span) {
+        continue;
+      }
+      if (used + span > cols) {
+        row++;
+        used = 0;
+      }
+      used = itemDataList[i].suffix ? cols : used + span;
+    }
+    return row <= collapsedRows;
+  };
+  for (let i = 0; i < itemDataList.length; i++) {
+    if (itemDataList[i].suffix) {
+      continue;
+    }
+    if (!fits([...displayIndexList, i, ...suffix])) {
+      break;
+    }
+    displayIndexList.push(i);
+  }
+  displayIndexList.push(...suffix);
+  return {
+    overflow: itemDataList.some((item, i) => item.span > 0 && !item.suffix && !displayIndexList.includes(i)),
+    displayIndexList
+  };
+}
+export {
+  resolveItemData,
+  setItemVisible
+};