vue-amazing-ui/es/grid/col/Col.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as n, ref as i, computed as o, createElementBlock as u, openBlock as v, normalizeStyle as p, normalizeClass as c, renderSlot as x } from "vue";
import { useEventListener as m } from "../../utils/index.js";
const $ = /* @__PURE__ */ n({
  __name: "Col",
  props: {
    span: { default: void 0 },
    offset: { default: 0 },
    flex: { default: void 0 },
    order: { default: 0 },
    xs: { default: void 0 },
    sm: { default: void 0 },
    md: { default: void 0 },
    lg: { default: void 0 },
    xl: { default: void 0 },
    xxl: { default: void 0 }
  },
  setup(f) {
    const e = f, l = i(window.innerWidth), r = o(() => typeof e.flex == "number" ? `${e.flex} ${e.flex} auto` : e.flex), s = o(() => [
      {
        width: 1600,
        value: e.xxl
      },
      {
        width: 1200,
        value: e.xl
      },
      {
        width: 992,
        value: e.lg
      },
      {
        width: 768,
        value: e.md
      },
      {
        width: 576,
        value: e.sm
      },
      {
        width: 0,
        value: e.xs
      }
    ]), a = o(() => {
      for (const t of s.value)
        if (t.value !== void 0 && l.value >= t.width)
          return typeof t.value == "object" ? {
            span: t.value.span || e.span,
            offset: t.value.offset || e.offset
          } : {
            span: t.value,
            offset: e.offset
          };
      return {
        span: e.span,
        offset: e.offset
      };
    });
    m(window, "resize", d);
    function d() {
      l.value = window.innerWidth;
    }
    return (t, w) => (v(), u("div", {
      class: c(`grid-col col-${a.value.span} offset-${a.value.offset}`),
      style: p([{ "padding-left": "var(--xGap)", "padding-right": "var(--xGap)" }, `flex: ${r.value}; order: ${t.order};`])
    }, [
      x(t.$slots, "default", {}, void 0, !0)
    ], 6));
  }
});
export {
  $ as default
};