{"version":3,"file":"grid-layout.mjs","sources":["../../../../../packages/components/grid-layout/src/grid-layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport { useNamespace } from '@element3/hooks'\nimport type { PropType } from 'vue'\n\ntype Target = {\n  [x: string]: any\n  lg?: { value: number; areas: string | never[] }\n  md?: { value: number; areas: string | never[] }\n  sm?: { value: number; areas: string | never[] }\n  xs?: { value: number; areas: string | never[] }\n  xl?: { value: number; areas: string | never[] }\n}\n\ntype GridAreas = string[][]\n\ntype GridReactive = Target[]\n\ndefineOptions({\n  name: 'ElGridLayout',\n})\n\nconst props = defineProps({\n  reactive: {\n    type: Array as PropType<GridReactive>,\n    default: () => [],\n  },\n  columns: {\n    type: String,\n    default: '1fr',\n  },\n  rows: {\n    type: String,\n    default: '1fr',\n  },\n  areas: {\n    type: Array as PropType<GridAreas>,\n    default: () => [],\n  },\n  gap: {\n    type: String,\n    default: '',\n  },\n  height: {\n    type: String,\n    default: '100%',\n  },\n})\n\ndefineEmits({})\n\nconst areas = ref()\n\nconst columns = ref()\n\nconst rows = ref()\n\nconst gap = ref()\n\nconst breakpoint = {\n  lg: {\n    value: 1200,\n    areas: [],\n    columns: '',\n    rows: '',\n    gap: '',\n  },\n  md: {\n    value: 992,\n    areas: [],\n    columns: '',\n    rows: '',\n    gap: '',\n  },\n  sm: {\n    value: 768,\n    areas: [],\n    columns: '',\n    rows: '',\n    gap: '',\n  },\n  xs: {\n    value: 480,\n    areas: [],\n    columns: '',\n    rows: '',\n    gap: '',\n  },\n  xl: {\n    value: 1920,\n    areas: [],\n    columns: '',\n    rows: '',\n    gap: '',\n  },\n}\n\nconst _config = ref()\n\nconst ns = useNamespace('grid-layout')\n\nconst style = computed(() => {\n  return {\n    'grid-template-columns': columns.value,\n    'grid-template-rows': rows.value,\n    'grid-template-areas': areas.value,\n    'grid-gap': gap.value,\n    height: props.height,\n  }\n})\n\nfunction extend(target: Target, ...args: Record<string, any>[]) {\n  for (let i = 0; i < args.length; ++i) {\n    const from = args[i]\n    if (typeof from !== 'object') continue\n    for (const j in from) {\n      if (from.prototype.hasOwnProperty.call(j)) {\n        target[j] = Array.isArray(from[j])\n          ? extend([], target[j], from[j])\n          : typeof from[j] === 'object'\n          ? extend({}, target[j], from[j])\n          : from[j]\n      }\n    }\n  }\n  return target\n}\nfunction init() {\n  _config.value = extend(breakpoint, props.reactive)\n}\n\nfunction areasTransform(data: string[][]) {\n  let res = ''\n  if (Array.isArray(data)) {\n    data.forEach((_s) => {\n      if (Array.isArray(_s)) {\n        res += `\"${_s.join(' ')}\"\\n`\n      }\n    })\n  }\n  return res\n}\n\n// TODO: Not elegant enough rewrite!!\n// fork https://github.com/vueuse/vueuse/blob/main/packages/core/useBreakpoints/index.ts\nfunction getAreas() {\n  const sizes = ['xs', 'sm', 'md', 'lg', 'xl']\n  const _w = window.innerWidth\n  for (let i = 0; i < sizes.length; i++) {\n    const cur = _config.value[sizes[i]]\n    const pre = _config.value[sizes[i - 1]]\n    if (!cur) return\n    if (!pre && _w <= cur.value) {\n      setGridAttributes(cur)\n    } else if (_w <= cur.value && _w > pre.value) {\n      setGridAttributes(cur)\n    }\n  }\n}\n\nfunction setGridAttributes(res: { [x: string]: string[][] }) {\n  Object.entries({\n    columns,\n    rows,\n    gap,\n    areas,\n  }).forEach(([key, val]) => {\n    if (key != 'areas') {\n      val.value = res[key] || props[key as keyof typeof props] || ''\n    } else {\n      val.value =\n        res[key] && res[key].length > 0\n          ? areasTransform(res[key])\n          : areasTransform(props[key]) || ''\n    }\n  })\n}\n\nonMounted(() => {\n  init()\n  getAreas()\n  window.addEventListener('resize', getAreas)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', getAreas)\n})\n</script>\n\n<template>\n  <div :class=\"ns.b()\" :style=\"style\"><slot /></div>\n</template>\n<style scoped></style>\n"],"names":[],"mappings":"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"}