hongluan-ui/es/components/group/src/group.mjs

Hongluan Component Library for Vue 3

import { defineComponent, h } from 'vue';
import '../../../hooks/index.mjs';
import { groupProps } from './group-props.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const Group = defineComponent({
  name: "Group",
  props: groupProps,
  setup(props, { slots }) {
    const { namespace } = useNamespace("group");
    const handleGroupItem = (internalSlots) => {
      var _a;
      const children = ((_a = internalSlots.default) == null ? void 0 : _a.call(internalSlots)) || [];
      addClazz(children);
      return children;
    };
    const addClazz = (children) => {
      children.forEach((c) => {
        var _a;
        if (c.shapeFlag & 16 && !(c.shapeFlag & 1) || c.shapeFlag & 64 || c.shapeFlag & 128) {
          addClazz(c.children || []);
        }
        const clazz = ((_a = c.props) == null ? void 0 : _a.class) || "";
        if (clazz.indexOf("group-item") === -1) {
          if (!c.props) {
            c.props = {};
          }
          c.props.class = clazz + " group-item";
        }
      });
    };
    return () => h("div", {
      class: [
        namespace.value,
        props.dir,
        props.align,
        typeof props.full === "boolean" && props.full ? "full" : props.full,
        props.indent ? "indent" : "",
        props.merge ? "merge" : "",
        props.deepMerge ? "deep-merge" : "",
        props.wrap ? "wrap" : "",
        props.block ? "block" : ""
      ],
      style: [
        typeof props.indent === "string" ? `--indent:${props.indent}` : "",
        props.gap ? `--group-gap-x: ${props.gap}; --group-gap-y: ${props.gap}` : "",
        props.gapX ? `--group-gap-x: ${props.gapX}` : "",
        props.gapY ? `--group-gap-y: ${props.gapY}` : ""
      ]
    }, handleGroupItem(slots));
  }
});

export { Group as default };
//# sourceMappingURL=group.mjs.map