[优化] 组件代码

docs/docs/zh-CN/components/color.md

@@ -101,30 +101,30 @@ export default {
 
 <template>
 <ul class="layui-row site-doc-color site-doc-necolor">
-      <li class="layui-col-md6">
+      <li class="layui-col-md12">
         <div style="background-color: #FAFAFA;">
           <p>#FAFAFA</p><p>
         </p></div>
       </li>
-      <li class="layui-col-md6">
+      <li class="layui-col-md12">
         <div style="background-color: #f6f6f6;"><p>#F6F6F6</p><p></p></div>
       </li>
-      <li class="layui-col-md2">
+      <li class="layui-col-md4">
         <div style="background-color: #eeeeee;"><p>#eeeeee</p><p></p></div>
       </li>
-      <li class="layui-col-md2">
+      <li class="layui-col-md4">
         <div style="background-color: #e2e2e2;"><p>#e2e2e2</p><p></p></div>
       </li>
-      <li class="layui-col-md2">
+      <li class="layui-col-md4">
         <div style="background-color: #dddddd;"><p>#dddddd</p><p></p></div>
       </li>
-      <li class="layui-col-md2">
+      <li class="layui-col-md4">
         <div style="background-color: #d2d2d2;"><p>#d2d2d2</p><p></p></div>
       </li>
-      <li class="layui-col-md2">
+      <li class="layui-col-md4">
         <div style="background-color: #cccccc;"><p>#cccccc</p><p></p></div>
       </li>
-      <li class="layui-col-md2">
+      <li class="layui-col-md4">
         <div style="background-color: #c2c2c2;"><p>#c2c2c2</p><p></p></div>
       </li>
     </ul>

docs/src/assets/css/markdown.css

@@ -171,7 +171,6 @@ form {
   padding: 20px 10px;
   color: #fff;
   text-align: center;
-  border-radius: 2px;
   line-height: 1.6;
   font-size: 14px;
 }

src/css/layui.css

@@ -1049,19 +1049,6 @@ a cite {
   top: 0;
 }
 
-.layui-container {
-  position: relative;
-  margin: 0 auto;
-  padding: 0 15px;
-  box-sizing: border-box;
-}
-
-.layui-fluid {
-  position: relative;
-  margin: 0 auto;
-  padding: 0 15px;
-}
-
 .layui-btn,
 .layui-input,
 .layui-select,
@@ -1074,21 +1061,6 @@ a cite {
   box-sizing: border-box;
 }
 
-.layui-elem-quote {
-  margin-bottom: 10px;
-  padding: 15px;
-  line-height: 1.6;
-  border-left: 5px solid #5fb878;
-  border-radius: 0 2px 2px 0;
-  background-color: #fafafa;
-}
-
-.layui-quote-nm {
-  border-style: solid;
-  border-width: 1px 1px 1px 5px;
-  background: 0 0;
-}
-
 .layui-elem-field {
   margin-bottom: 10px;
   padding: 0;
@@ -1211,53 +1183,11 @@ a cite {
   position: relative;
 }
 
-.layui-card {
-  margin-bottom: 15px;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
 .layui-form-select dl,
 .layui-panel {
   box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
 }
 
-.layui-card:last-child {
-  margin-bottom: 0;
-}
-
-.layui-card-header {
-  height: 42px;
-  line-height: 42px;
-  padding: 0 15px;
-  border-bottom: 1px solid #f6f6f6;
-  color: #333;
-  border-radius: 2px 2px 0 0;
-  font-size: 14px;
-}
-
-.layui-card-body {
-  padding: 10px 15px;
-  line-height: 24px;
-}
-
-.layui-card-body[pad15] {
-  padding: 15px;
-}
-
-.layui-card-body[pad20] {
-  padding: 20px;
-}
-
-.layui-card-body .layui-table {
-  margin: 5px 0;
-}
-
-.layui-card .layui-tab {
-  margin: 0;
-}
-
 .layui-bg-black,
 .layui-bg-blue,
 .layui-bg-cyan,
@@ -4201,40 +4131,6 @@ body .layui-table-tips .layui-layer-content {
   line-height: 22px;
 }
 
-.layui-badge,
-.layui-badge-dot,
-.layui-badge-rim {
-  position: relative;
-  display: inline-block;
-  padding: 0 6px;
-  font-size: 12px;
-  text-align: center;
-  background-color: #ff5722;
-  color: #fff;
-  border-radius: 2px;
-}
-
-.layui-badge {
-  height: 18px;
-  line-height: 18px;
-}
-
-.layui-badge-dot {
-  width: 8px;
-  height: 8px;
-  padding: 0;
-  border-radius: 50%;
-}
-
-.layui-badge-rim {
-  height: 18px;
-  line-height: 18px;
-  border-width: 1px;
-  border-style: solid;
-  background-color: #fff;
-  color: #666;
-}
-
 .layui-btn .layui-badge,
 .layui-btn .layui-badge-dot {
   margin-left: 5px;

src/module/badge/index.less

@@ -0,0 +1,33 @@
+.layui-badge,
+.layui-badge-dot,
+.layui-badge-rim {
+    position: relative;
+    display: inline-block;
+    padding: 0 6px;
+    font-size: 12px;
+    text-align: center;
+    background-color: #ff5722;
+    color: #fff;
+    border-radius: 2px;
+}
+
+.layui-badge {
+    height: 18px;
+    line-height: 18px;
+}
+
+.layui-badge-dot {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border-radius: 50%;
+}
+
+.layui-badge-rim {
+    height: 18px;
+    line-height: 18px;
+    border-width: 1px;
+    border-style: solid;
+    background-color: #fff;
+    color: #666;
+}

src/module/badge/index.vue

@@ -1,26 +1,38 @@
+<script lang="ts">
+export default {
+  name: "LayBadge",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps } from "vue";
+import "./index.less";
+
+export interface LayBadgeProps {
+  type?: "dot" | "rim";
+  theme?: string;
+  color?: string;
+}
+const props = defineProps<LayBadgeProps>();
+
+const classes = computed(() => {
+  return [
+    {
+      "layui-badge": !props.type,
+      "layui-badge-dot": props.type == "dot",
+      "layui-badge-rim": props.type == "rim",
+    },
+    `layui-bg-${props.theme}`,
+  ];
+});
+
+const styles = computed(() => {
+  props.color ? `background-color: ${props.color}` : "";
+});
+</script>
+
 <template>
-  <span :class="classList" :style="styleList">
+  <span :class="classes" :style="styles">
     <slot v-if="type != 'dot'" />
   </span>
 </template>
-
-<script setup name="LayBadge" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  type?: string
-  theme?: string
-  color?: string
-}>()
-
-const classList = [
-  {
-    'layui-badge': !props.type,
-    'layui-badge-dot': props.type == 'dot',
-    'layui-badge-rim': props.type == 'rim',
-  },
-  'layui-bg-' + props.theme,
-]
-
-const styleList = props.color ? 'background-color: ' + props.color : ''
-</script>

src/module/block/index.less

@@ -0,0 +1,14 @@
+.layui-elem-quote {
+    margin-bottom: 10px;
+    padding: 15px;
+    line-height: 1.6;
+    border-left: 5px solid #5fb878;
+    border-radius: 0 2px 2px 0;
+    background-color: #fafafa;
+}
+
+.layui-quote-nm {
+    border-style: solid;
+    border-width: 1px 1px 1px 5px;
+    background: 0 0;
+}

src/module/block/index.vue

@@ -1,13 +1,20 @@
+<script lang="ts">
+export default {
+  name: "LayBlock",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import "./index.less"
+
+const props = defineProps<{
+  nm?: boolean;
+}>();
+</script>
+
 <template>
-  <blockquote class="layui-elem-quote" :class="[nm ? 'layui-quote-nm' : '']">
+  <blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }">
     <slot />
   </blockquote>
 </template>
-
-<script setup name="LayBlock" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  nm?: boolean
-}>()
-</script>

src/module/card/index.less

@@ -0,0 +1,41 @@
+.layui-card {
+    margin-bottom: 15px;
+    border-radius: 2px;
+    background-color: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.layui-card:last-child {
+    margin-bottom: 0;
+}
+
+.layui-card-header {
+    height: 42px;
+    line-height: 42px;
+    padding: 0 15px;
+    border-bottom: 1px solid #f6f6f6;
+    color: #333;
+    border-radius: 2px 2px 0 0;
+    font-size: 14px;
+}
+
+.layui-card-body {
+    padding: 10px 15px;
+    line-height: 24px;
+}
+
+.layui-card-body[pad15] {
+    padding: 15px;
+}
+
+.layui-card-body[pad20] {
+    padding: 20px;
+}
+
+.layui-card-body .layui-table {
+    margin: 5px 0;
+}
+
+.layui-card .layui-tab {
+    margin: 0;
+}

src/module/card/index.vue

@@ -12,12 +12,14 @@
 </template>
 
 <script setup name="LayCard" lang="ts">
-import { useSlots } from 'vue'
+import { useSlots } from "vue";
+import "./index.less";
 
-const slot = useSlots()
+const slot = useSlots();
 
-const props =
+export interface LayCardProps {
-  defineProps<{
+  title?: string;
-    title?: string
+}
-  }>()
+
+const props = defineProps<LayCardProps>();
 </script>

src/module/checkbox/index.vue

@@ -1,3 +1,35 @@
+<script lang="ts">
+export default {
+  name: "LayCheckbox",
+};
+</script>
+
+<script setup name="LayCheckbox" lang="ts">
+import { computed, defineProps } from "vue";
+import "./index.less";
+
+export interface LayCheckbox {
+  name?: string;
+  skin?: string;
+  label?: string;
+  modelValue?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<LayCheckbox>(), {
+  modelValue: false
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const handleClick = function () {
+  if (!props.disabled) {
+    emit("update:modelValue", !props.modelValue);
+    emit("change", { checked: !props.modelValue, value: props.label });
+  }
+};
+</script>
+
 <template>
   <span @click.stop="handleClick">
     <input type="checkbox" :name="name" :value="label" />
@@ -14,26 +46,3 @@
     </div>
   </span>
 </template>
-
-<script setup name="LayCheckbox" lang="ts">
-import { defineProps, useSlots } from 'vue'
-
-const slot = useSlots()
-
-const props = defineProps<{
-  name?: string
-  skin?: string
-  label?: string
-  checked?: boolean
-  disabled?: boolean
-}>()
-
-const emit = defineEmits(['update:checked', 'change'])
-
-const handleClick = function () {
-  if (!props.disabled) {
-    emit('update:checked', !props.checked)
-    emit('change', { checked: !props.checked, value: props.label })
-  }
-}
-</script>

src/module/container/index.less

@@ -0,0 +1,12 @@
+.layui-container {
+    position: relative;
+    margin: 0 auto;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+
+.layui-fluid {
+    position: relative;
+    margin: 0 auto;
+    padding: 0 15px;
+}

src/module/container/index.vue

@@ -1,15 +1,26 @@
+<script lang="ts">
+export default {
+  name: "LayContainer"
+}
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import "./index.less"
+
+export interface LayContainerProps {
+  fluid?: boolean
+}
+
+const props = withDefaults(defineProps<LayContainerProps>(), {
+  fluid: false
+});
+
+const classes = computed(() => props.fluid ? 'layui-fluid' : 'layui-container')
+</script>
+
 <template>
   <div :class="classes">
     <slot />
   </div>
 </template>
-
-<script setup name="LayContainer" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  fluid?: boolean
-}>()
-
-const classes = props.fluid ? 'layui-fluid' : 'layui-container'
-</script>

src/module/icon/index.vue

@@ -1,19 +1,24 @@
-<template>
+<script lang="ts">
-  <i :class="[prefix, type]" :style="{ color: color , fontSize: size}"/>
+export default {
-</template>
+  name: "LayIcon",
-
+};
-<script setup name="LayIcon" lang="ts">
-import { defineProps } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    type?: string
-    prefix?: string
-    color?: string
-    size?: string
-  }>(),
-  {
-    prefix: 'layui-icon',
-  }
-)
 </script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+export interface LayIconProps {
+  prefix?: string;
+  color?: string;
+  size?: string;
+  type?: string;
+}
+
+const props = withDefaults(defineProps<LayIconProps>(), {
+  prefix: "layui-icon",
+});
+</script>
+
+<template>
+  <i :class="[prefix, type]" :style="{ color: color, fontSize: size }" />
+</template>