@fangzhongya/fang-ui 0.0.66 → 0.0.68

package/dist/components/page/src/set-column2.cjs

@@ -2,15 +2,12 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const Draggable = require("vuedraggable");
-const index$2 = require("../../dialogs/index.cjs");
-const index$4 = require("../../no-data/index.cjs");
-const index = require("../../../hooks/cssname/index.cjs");
-const index$3 = require("element-plus/es/components/checkbox/index");
-const index$1 = require("element-plus/es/components/button/index");
-const _hoisted_1 = {
-  key: 1,
-  class: "no-data"
-};
+const index$3 = require("../../dialogs/index.cjs");
+const index$5 = require("../../no-data/index.cjs");
+const index$4 = require("../../checkbox/index.cjs");
+const index$2 = require("../../button/index.cjs");
+const index$1 = require("../../../hooks/cssname/index.cjs");
+const index = require("../../../hooks/locale/index.cjs");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "set-column",
   props: {
@@ -21,15 +18,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     },
     list: {
-      type: Array
+      type: Array,
+      default() {
+        return [];
+      }
     }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const { getLocale } = index.useLocale();
     const props = __props;
     const emit = __emit;
-    const cs = index.useCssName("set-column");
+    const cs = index$1.useCssName("set-column");
     const dialogVisible = vue.ref(false);
+    const isall = vue.ref(false);
     const value = vue.ref([...props.modelValue]);
     vue.watch(
       () => props.modelValue,
@@ -38,8 +40,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     );
     const onOpen = () => {
+      var _a;
       value.value = [...props.modelValue];
       dialogVisible.value = true;
+      if (value.value.length == ((_a = props.list) == null ? void 0 : _a.length)) {
+        isall.value = true;
+      }
     };
     const isChecked = (item) => {
       return value.value.map((o) => o.prop).includes(item.prop);
@@ -56,31 +62,45 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const drag = vue.ref(false);
     const onChange = (item, is) => {
+      var _a;
       if (is) {
         value.value.push(item);
+        if (value.value.length == ((_a = props.list) == null ? void 0 : _a.length)) {
+          isall.value = true;
+        }
       } else {
         const v = value.value.map((o) => o.prop);
         value.value.splice(v.indexOf(item.prop), 1);
+        isall.value = false;
       }
     };
     const onDelete = (item, index2) => {
       value.value.splice(index2, 1);
+      isall.value = false;
+    };
+    const onAllChange = (is) => {
+      if (is) {
+        value.value = [...props.list];
+      } else {
+        value.value = [];
+      }
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(vue.unref(cs).z())
       }, [
-        vue.createVNode(vue.unref(index$1.ElButton), { onClick: onOpen }, {
-          default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
-            vue.createTextVNode("列设置", -1)
-          ])]),
+        vue.createVNode(vue.unref(index$2.Button), { onClick: onOpen }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(vue.unref(getLocale)("setColumn.name")), 1)
+          ]),
           _: 1
         }),
-        vue.createVNode(vue.unref(index$2.Dialogs), {
+        vue.createVNode(vue.unref(index$3.Dialogs), {
           class: vue.normalizeClass(vue.unref(cs).z("dialog")),
           modelValue: dialogVisible.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => dialogVisible.value = $event),
-          title: "设置显示字段",
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dialogVisible.value = $event),
+          width: 900,
+          title: vue.unref(getLocale)("setColumn.title"),
           onConfirm: onSubmit
         }, {
           default: vue.withCtx(() => [
@@ -92,13 +112,29 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               }, [
                 vue.createElementVNode("div", {
                   class: vue.normalizeClass(vue.unref(cs).z("title"))
-                }, "可选字段", 2),
+                }, [
+                  vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(getLocale)("setColumn.optional")), 1),
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass(vue.unref(cs).z("title-all"))
+                  }, [
+                    vue.createVNode(vue.unref(index$4.Checkbox), {
+                      modelValue: isall.value,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isall.value = $event),
+                      onChange: onAllChange
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(vue.unref(getLocale)("setColumn.all")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"])
+                  ], 2)
+                ], 2),
                 (vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(vue.unref(cs).z("check-list")),
                   key: value.value.length
                 }, [
-                  props.list && props.list.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.list, (item, index2) => {
-                    return vue.openBlock(), vue.createBlock(vue.unref(index$3.ElCheckbox), {
+                  props.list.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.list, (item, index2) => {
+                    return vue.openBlock(), vue.createBlock(vue.unref(index$4.Checkbox), {
                       class: vue.normalizeClass(vue.unref(cs).z("check-list-li")),
                       key: index2,
                       label: item.label,
@@ -106,7 +142,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       checked: isChecked(item),
                       onChange: (is) => onChange(item, Boolean(is))
                     }, null, 8, ["class", "label", "value", "checked", "onChange"]);
-                  }), 128)) : (vue.openBlock(), vue.createBlock(vue.unref(index$4.NoData), { key: 1 }))
+                  }), 128)) : (vue.openBlock(), vue.createBlock(vue.unref(index$5.NoData), { key: 1 }))
                 ], 2))
               ], 2),
               vue.createElementVNode("div", {
@@ -114,46 +150,50 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               }, [
                 vue.createElementVNode("div", {
                   class: vue.normalizeClass(vue.unref(cs).z("title"))
-                }, "已选字段", 2),
+                }, vue.toDisplayString(vue.unref(getLocale)("setColumn.selected")), 3),
                 vue.createElementVNode("div", {
                   class: vue.normalizeClass(vue.unref(cs).z("already-list"))
                 }, [
                   value.value && value.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(Draggable), vue.mergeProps({ key: 0 }, dragOptions, {
-                    onStart: _cache[0] || (_cache[0] = ($event) => drag.value = true),
-                    onEnd: _cache[1] || (_cache[1] = ($event) => drag.value = false),
+                    onStart: _cache[1] || (_cache[1] = ($event) => drag.value = true),
+                    onEnd: _cache[2] || (_cache[2] = ($event) => drag.value = false),
                     modelValue: value.value,
-                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => value.value = $event),
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => value.value = $event),
                     "item-key": (value2) => value2,
                     handle: ".handle"
                   }), {
                     item: vue.withCtx(({ element, index: index2 }) => [
                       vue.createElementVNode("div", {
-                        class: vue.normalizeClass(vue.unref(cs).z("already-li"))
+                        class: vue.normalizeClass(["handle", vue.unref(cs).z("already-li")])
                       }, [
                         vue.createElementVNode("div", {
-                          class: vue.normalizeClass(["handle", vue.unref(cs).z("already-li-v")])
+                          class: vue.normalizeClass(vue.unref(cs).z("already-li-v"))
                         }, [
                           vue.createElementVNode("div", null, vue.toDisplayString(element.label), 1)
                         ], 2),
-                        vue.createVNode(vue.unref(index$1.ElButton), {
+                        vue.createVNode(vue.unref(index$2.Button), {
                           text: "",
+                          type: "danger",
                           onClick: vue.withModifiers(($event) => onDelete(element, index2), ["stop"])
                         }, {
-                          default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
-                            vue.createTextVNode(" 删除 ", -1)
-                          ])]),
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(vue.toDisplayString(vue.unref(getLocale)("setColumn.delete")), 1)
+                          ]),
                           _: 1
                         }, 8, ["onClick"])
                       ], 2)
                     ]),
                     _: 1
-                  }, 16, ["modelValue", "item-key"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, "未选字段"))
+                  }, 16, ["modelValue", "item-key"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$5.NoData), {
+                    key: 1,
+                    text: vue.unref(getLocale)("setColumn.nodata")
+                  }, null, 8, ["text"]))
                 ], 2)
               ], 2)
             ], 2)
           ]),
           _: 1
-        }, 8, ["class", "modelValue"])
+        }, 8, ["class", "modelValue", "title"])
       ], 2);
     };
   }

package/dist/components/page/src/set-column2.js

@@ -1,14 +1,11 @@
-import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, createElementVNode, createBlock, Fragment, renderList, mergeProps, toDisplayString, withModifiers } from "vue";
+import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, createBlock, Fragment, renderList, mergeProps, withModifiers } from "vue";
 import Draggable from "vuedraggable";
 import { Dialogs } from "../../dialogs/index.js";
 import { NoData } from "../../no-data/index.js";
+import { Checkbox } from "../../checkbox/index.js";
+import { Button } from "../../button/index.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
-import { ElCheckbox } from "element-plus/es/components/checkbox/index";
-import { ElButton } from "element-plus/es/components/button/index";
-const _hoisted_1 = {
-  key: 1,
-  class: "no-data"
-};
+import { useLocale } from "../../../hooks/locale/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "set-column",
   props: {
@@ -19,15 +16,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     },
     list: {
-      type: Array
+      type: Array,
+      default() {
+        return [];
+      }
     }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const { getLocale } = useLocale();
     const props = __props;
     const emit = __emit;
     const cs = useCssName("set-column");
     const dialogVisible = ref(false);
+    const isall = ref(false);
     const value = ref([...props.modelValue]);
     watch(
       () => props.modelValue,
@@ -36,8 +38,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     const onOpen = () => {
+      var _a;
       value.value = [...props.modelValue];
       dialogVisible.value = true;
+      if (value.value.length == ((_a = props.list) == null ? void 0 : _a.length)) {
+        isall.value = true;
+      }
     };
     const isChecked = (item) => {
       return value.value.map((o) => o.prop).includes(item.prop);
@@ -54,31 +60,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const drag = ref(false);
     const onChange = (item, is) => {
+      var _a;
       if (is) {
         value.value.push(item);
+        if (value.value.length == ((_a = props.list) == null ? void 0 : _a.length)) {
+          isall.value = true;
+        }
       } else {
         const v = value.value.map((o) => o.prop);
         value.value.splice(v.indexOf(item.prop), 1);
+        isall.value = false;
       }
     };
     const onDelete = (item, index) => {
       value.value.splice(index, 1);
+      isall.value = false;
+    };
+    const onAllChange = (is) => {
+      if (is) {
+        value.value = [...props.list];
+      } else {
+        value.value = [];
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(cs).z())
       }, [
-        createVNode(unref(ElButton), { onClick: onOpen }, {
-          default: withCtx(() => [..._cache[4] || (_cache[4] = [
-            createTextVNode("列设置", -1)
-          ])]),
+        createVNode(unref(Button), { onClick: onOpen }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(getLocale)("setColumn.name")), 1)
+          ]),
           _: 1
         }),
         createVNode(unref(Dialogs), {
           class: normalizeClass(unref(cs).z("dialog")),
           modelValue: dialogVisible.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => dialogVisible.value = $event),
-          title: "设置显示字段",
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dialogVisible.value = $event),
+          width: 900,
+          title: unref(getLocale)("setColumn.title"),
           onConfirm: onSubmit
         }, {
           default: withCtx(() => [
@@ -90,13 +110,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createElementVNode("div", {
                   class: normalizeClass(unref(cs).z("title"))
-                }, "可选字段", 2),
+                }, [
+                  createElementVNode("span", null, toDisplayString(unref(getLocale)("setColumn.optional")), 1),
+                  createElementVNode("span", {
+                    class: normalizeClass(unref(cs).z("title-all"))
+                  }, [
+                    createVNode(unref(Checkbox), {
+                      modelValue: isall.value,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isall.value = $event),
+                      onChange: onAllChange
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(getLocale)("setColumn.all")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"])
+                  ], 2)
+                ], 2),
                 (openBlock(), createElementBlock("div", {
                   class: normalizeClass(unref(cs).z("check-list")),
                   key: value.value.length
                 }, [
-                  props.list && props.list.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.list, (item, index) => {
-                    return openBlock(), createBlock(unref(ElCheckbox), {
+                  props.list.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.list, (item, index) => {
+                    return openBlock(), createBlock(unref(Checkbox), {
                       class: normalizeClass(unref(cs).z("check-list-li")),
                       key: index,
                       label: item.label,
@@ -112,46 +148,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createElementVNode("div", {
                   class: normalizeClass(unref(cs).z("title"))
-                }, "已选字段", 2),
+                }, toDisplayString(unref(getLocale)("setColumn.selected")), 3),
                 createElementVNode("div", {
                   class: normalizeClass(unref(cs).z("already-list"))
                 }, [
                   value.value && value.value.length > 0 ? (openBlock(), createBlock(unref(Draggable), mergeProps({ key: 0 }, dragOptions, {
-                    onStart: _cache[0] || (_cache[0] = ($event) => drag.value = true),
-                    onEnd: _cache[1] || (_cache[1] = ($event) => drag.value = false),
+                    onStart: _cache[1] || (_cache[1] = ($event) => drag.value = true),
+                    onEnd: _cache[2] || (_cache[2] = ($event) => drag.value = false),
                     modelValue: value.value,
-                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => value.value = $event),
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => value.value = $event),
                     "item-key": (value2) => value2,
                     handle: ".handle"
                   }), {
                     item: withCtx(({ element, index }) => [
                       createElementVNode("div", {
-                        class: normalizeClass(unref(cs).z("already-li"))
+                        class: normalizeClass(["handle", unref(cs).z("already-li")])
                       }, [
                         createElementVNode("div", {
-                          class: normalizeClass(["handle", unref(cs).z("already-li-v")])
+                          class: normalizeClass(unref(cs).z("already-li-v"))
                         }, [
                           createElementVNode("div", null, toDisplayString(element.label), 1)
                         ], 2),
-                        createVNode(unref(ElButton), {
+                        createVNode(unref(Button), {
                           text: "",
+                          type: "danger",
                           onClick: withModifiers(($event) => onDelete(element, index), ["stop"])
                         }, {
-                          default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                            createTextVNode(" 删除 ", -1)
-                          ])]),
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(getLocale)("setColumn.delete")), 1)
+                          ]),
                           _: 1
                         }, 8, ["onClick"])
                       ], 2)
                     ]),
                     _: 1
-                  }, 16, ["modelValue", "item-key"])) : (openBlock(), createElementBlock("div", _hoisted_1, "未选字段"))
+                  }, 16, ["modelValue", "item-key"])) : (openBlock(), createBlock(unref(NoData), {
+                    key: 1,
+                    text: unref(getLocale)("setColumn.nodata")
+                  }, null, 8, ["text"]))
                 ], 2)
               ], 2)
             ], 2)
           ]),
           _: 1
-        }, 8, ["class", "modelValue"])
+        }, 8, ["class", "modelValue", "title"])
       ], 2);
     };
   }

package/dist/components/paging/src/index2.cjs

@@ -16,8 +16,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: Object,
       default() {
         return {};
-      },
-      required: true
+      }
+      // required: true,
     }
   },
   emits: ["size-change", "current-change"],

package/dist/components/paging/src/index2.js

@@ -14,8 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: Object,
       default() {
         return {};
-      },
-      required: true
+      }
+      // required: true,
     }
   },
   emits: ["size-change", "current-change"],

package/dist/components/selects/src/data.cjs

@@ -12,7 +12,7 @@ const dataProps = {
   }
 };
 const dataHandle = list.comHandle;
-const dataEmits = [...list.emits];
+const dataEmits = [...list.emits, "click-multiple"];
 exports.dataEmits = dataEmits;
 exports.dataHandle = dataHandle;
 exports.dataProps = dataProps;

package/dist/components/selects/src/data.js

@@ -10,7 +10,7 @@ const dataProps = {
   }
 };
 const dataHandle = comHandle;
-const dataEmits = [...emits];
+const dataEmits = [...emits, "click-multiple"];
 export {
   dataEmits,
   dataHandle,

package/dist/components/stick-div/src/index2.cjs

@@ -56,7 +56,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rect = refDom.value.getBoundingClientRect();
         return true;
       };
-      getShiftEvent.pressEvent(refStick.value, mousedown, handleMouseMove, handleMouseUp);
+      getShiftEvent.pressEvent(
+        refStick.value,
+        mousedown,
+        handleMouseMove,
+        handleMouseUp,
+        void 0,
+        "mouse"
+      );
     });
     __expose({
       ...data.dataExpose

package/dist/components/stick-div/src/index2.js

@@ -54,7 +54,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rect = refDom.value.getBoundingClientRect();
         return true;
       };
-      pressEvent(refStick.value, mousedown, handleMouseMove, handleMouseUp);
+      pressEvent(
+        refStick.value,
+        mousedown,
+        handleMouseMove,
+        handleMouseUp,
+        void 0,
+        "mouse"
+      );
     });
     __expose({
       ...dataExpose

package/dist/components/tablesv/src/columns2.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const columns = require("./columns3.cjs");
-const index = require("element-plus/components/tooltip/index");
+const index = require("element-plus/es/components/tooltip/index");
 require("../../tables/common/table-but.cjs");
 require("../../tables/common/table-color.cjs");
 require("../../tables/common/table-list.cjs");

package/dist/components/tablesv/src/columns2.js

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue";
 import { render } from "./columns3.js";
-import { ElTooltip } from "element-plus/components/tooltip/index";
+import { ElTooltip } from "element-plus/es/components/tooltip/index";
 import "../../tables/common/table-but.js";
 import "../../tables/common/table-color.js";
 import "../../tables/common/table-list.js";

package/dist/css/index.css

@@ -668,17 +668,80 @@
   display: flex;
   margin-right: 20px;
 }
-.page-operations > .el-button {
+.page-operations .el-button {
   margin-left: 2px;
   margin-right: 2px;
   padding-left: 5px;
   padding-right: 5px;
 }
+.page-operations .el-button:first-child {
+  margin-left: 0;
+}
+.page-operations .el-button:last-child {
+  margin-right: 0;
+}
 .page-footer {
   padding: 10px;
   text-align: right;
   background-color: #f5f5f5;
 }
+.page .set-column {
+  margin-left: 10px;
+}
+.page .set-column .set-column-dialog-main {
+  font-size: 16px;
+  display: flex;
+}
+.page .set-column .set-column-dialog-main .set-column-title {
+  height: 40px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.page .set-column .set-column-dialog-main .set-column-title .set-column-title-all {
+  margin-right: 20px;
+}
+.page .set-column .set-column-dialog-main .set-column-check {
+  flex: 1;
+}
+.page .set-column .set-column-dialog-main .set-column-check .set-column-check-list {
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow-y: auto;
+}
+.page .set-column .set-column-dialog-main .set-column-check .set-column-check-list .set-column-check-list-li {
+  margin-right: 0;
+  width: 33%;
+  height: 40px;
+}
+.page .set-column .set-column-dialog-main .set-column-already {
+  border-left: 1px solid #999;
+  padding-left: 20px;
+  width: 240px;
+}
+.page .set-column .set-column-dialog-main .set-column-already .set-column-already-list {
+  padding: 10px 10px 10px 0;
+}
+.page .set-column .set-column-dialog-main .set-column-already .set-column-already-list .set-column-already-li {
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #ccc;
+}
+.page .set-column .set-column-dialog-main .set-column-already .set-column-already-list .set-column-already-li:first-child {
+  border-top: 1px solid #ccc;
+}
+.page .set-column .set-column-dialog-main .set-column-already .set-column-already-list .set-column-already-li .set-column-already-li-v {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
 
 .retract {
   position: relative;
@@ -998,6 +1061,7 @@
 
 .input-num-input {
   height: 100%;
+  width: 100%;
 }
 
 .input-select-select-icon {

package/dist/css/input-num.css

@@ -14,4 +14,5 @@
 
 .input-num-input {
   height: 100%;
+  width: 100%;
 }