vuestic-ui/dist/web-components/src/components/va-layout/hooks/useGridTemplateArea.js

Vue 3 UI Framework

import { computed } from "vue";
const areaIndexes = {
  top: [0, 1, 2],
  left: [0, 3, 6],
  right: [2, 5, 8],
  bottom: [6, 7, 8]
};
const areaElements = ["left", "right", "top", "bottom"];
const useGridTemplateArea = (props) => {
  const sort = () => {
    return [...areaElements].sort((a, b) => {
      return (props[a].order ?? 0) - (props[b].order ?? 0);
    });
  };
  const applyTemplate = (template, areaIndexes2, areaName) => {
    areaIndexes2.forEach((index) => {
      template[index] = areaName;
    });
  };
  return computed(() => {
    const sorted = sort();
    const template = [
      ".",
      ".",
      ".",
      ".",
      ".",
      ".",
      ".",
      ".",
      "."
    ].map(() => "content");
    sorted.forEach((areaName) => {
      applyTemplate(template, areaIndexes[areaName], areaName);
    });
    return [
      '"' + template.slice(0, 3).join(" ") + '"',
      '"' + template.slice(3, 6).join(" ") + '"',
      '"' + template.slice(6, 9).join(" ") + '"'
    ].join(" ");
  });
};
export {
  useGridTemplateArea as u
};
//# sourceMappingURL=useGridTemplateArea.js.map