init

src/component/row/index.less

@@ -0,0 +1,115 @@
+.layui-row:after,
+.layui-row:before {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.generate-space(@a) {
+  .layui-col-space@{a} {
+    margin: -0.5px * @a;
+  }
+
+  .layui-col-space@{a} > * {
+    padding: 0.5px * @a;
+  }
+}
+
+.loop-generate-space(@index) when (@index <=30) {
+  .generate-space(@index);
+  .loop-generate-space(@index + 1);
+}
+
+.loop-generate-space(1);
+
+.generate-col-xs(@a) {
+  .layui-col-xs@{a} {
+    float: left;
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100% * (@a / 24);
+  }
+
+  .layui-col-xs-offset@{a} {
+    margin-left: 100% * (@a / 24);
+  }
+}
+
+.generate-col-sm(@a) {
+  .layui-col-sm@{a} {
+    float: left;
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100% * (@a / 24);
+  }
+
+  .layui-col-sm-offset@{a} {
+    margin-left: 100% * (@a / 24);
+  }
+}
+
+.generate-col-md(@a) {
+  .layui-col-md@{a} {
+    float: left;
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100% * (@a / 24);
+  }
+
+  .layui-col-md-offset@{a} {
+    margin-left: 100% * (@a / 24);
+  }
+}
+
+.generate-col-lg(@a) {
+  .layui-col-lg@{a} {
+    float: left;
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100% * (@a / 24);
+  }
+
+  .layui-col-lg-offset@{a} {
+    margin-left: 100% * (@a / 24);
+  }
+}
+
+.loop-generate-col-xs(@index) when (@index <=24) {
+  .generate-col-xs(@index);
+  .loop-generate-col-xs(@index + 1);
+}
+
+.loop-generate-col-sm(@index) when (@index <=24) {
+  .generate-col-sm(@index);
+  .loop-generate-col-sm(@index + 1);
+}
+
+.loop-generate-col-md(@index) when (@index <=24) {
+  .generate-col-md(@index);
+  .loop-generate-col-md(@index + 1);
+}
+
+.loop-generate-col-lg(@index) when (@index <=24) {
+  .generate-col-lg(@index);
+  .loop-generate-col-lg(@index + 1);
+}
+
+@media screen and (max-width: 768px) {
+  .loop-generate-col-xs(1);
+}
+
+@media screen and (min-width: 768px) {
+  .loop-generate-col-sm(1);
+}
+
+@media screen and (min-width: 992px) {
+  .loop-generate-col-md(1);
+}
+
+@media screen and (min-width: 1200px) {
+  .loop-generate-col-lg(1);
+}

src/component/row/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/row/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export default {
+  name: "LayRow",
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import "./index.less";
+
+export interface RowProps {
+  space?: string | number;
+}
+
+const props = defineProps<RowProps>();
+
+const classes = computed(() => {
+  return [props.space ? `layui-col-space${props.space}` : ""];
+});
+</script>
+
+<template>
+  <div class="layui-row" :class="classes">
+    <slot></slot>
+  </div>
+</template>