init

.svn/pristine/9f/9f2571fe51c0bcf43cd9b48893913faec1a6a1c1.svn-base

@@ -0,0 +1,157 @@
+<script lang="ts">
+export default {
+  name: "LayForm",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { toRefs, provide, reactive, onMounted } from "vue";
+import { Rule, ValidateError, ValidateMessages } from "async-validator";
+import { LayFormItemContext, FormCallback, modelType } from "../../types/form";
+
+export interface FormProps {
+  model?: modelType;
+  required?: boolean;
+  rules?: Rule;
+  initValidate?: boolean;
+  requiredIcons?: string;
+  requiredErrorMessage?: string;
+  validateMessage?: ValidateMessages;
+  useCN?: boolean;
+}
+
+const props = withDefaults(defineProps<FormProps>(), {
+  model: function () {
+    return {};
+  },
+  useCN: true,
+  requiredIcons: "",
+  initValidate: false,
+});
+
+const formItems: LayFormItemContext[] = [];
+const formItemMap: { [key: string]: LayFormItemContext } = {};
+
+const emit = defineEmits(["submit"]);
+
+// 初始化表单就进行校验
+onMounted(() => {
+  props.initValidate && validate()?.catch((err) => {});
+});
+
+// 原生提交表单事件
+const submit = function () {
+  let _isValidate = false;
+  validate((isValidate, model, errors) => {
+    _isValidate = isValidate as boolean;
+    emit("submit", isValidate, model, errors);
+  });
+
+  // 如果表单失败则阻止提交表单，成功则进行提交表单
+  return _isValidate;
+};
+
+/**
+ * 校验表单数据
+ * @param fields 需要校验的表单字段(string|string[]); 该字段如果为function, 则默认为回调函数，校验全部字段;
+ * @param callback 校验表单之后的回调函数
+ **/
+const validate = function (
+  fields?: string | string[] | FormCallback | null,
+  callback?: FormCallback | null
+) {
+  // 根据参数识别需要校验的表单项
+  let validateItems: LayFormItemContext[] = formItems;
+  if (typeof fields === "function") {
+    callback = fields;
+  } else if (
+    typeof fields === "string" ||
+    (Array.isArray(fields) && fields.length > 0)
+  ) {
+    validateItems = [];
+    const validateFields = !fields ? [] : ([] as string[]).concat(fields);
+    validateFields.forEach(
+      (field) => formItemMap[field] && validateItems.push(formItemMap[field])
+    );
+  }
+  // 通过调用每个子项进行校验
+  let errorsArrs: ValidateError[] = [];
+  validateItems.forEach((filed) => {
+    filed.validate((errors, _fields) => {
+      errorsArrs = errorsArrs.concat(errors as ValidateError[]);
+    });
+  });
+  const isValidate = errorsArrs.length === 0;
+  // 有回调则进行回调
+  if (typeof callback === "function") {
+    isValidate
+      ? callback(true, props.model, null)
+      : callback(false, props.model, errorsArrs);
+    return null;
+  }
+
+  // 没有回调则创建一个Promise的链式调用
+  return new Promise((resolve, reject) => {
+    const callbackParams = {
+      isValidate,
+      model: props.model,
+      errors: isValidate ? null : errorsArrs,
+    };
+    callbackParams.isValidate
+      ? resolve(callbackParams)
+      : reject(callbackParams);
+  });
+};
+
+/**
+ * 清除校验
+ * @param fields 需要进行清除校验的表单字段(string|string[]); 该字段如果为null, 则默认为全部字段清除校验;
+ **/
+const clearValidate = function (fields?: string | string[]) {
+  const clearFields = !fields ? [] : ([] as string[]).concat(fields);
+  if (clearFields.length === 0) {
+    formItems.forEach((filed) => filed.clearValidate());
+  } else {
+    clearFields.forEach(
+      (field) => formItemMap[field] && formItemMap[field].clearValidate()
+    );
+  }
+};
+
+/**
+ * 重置表单所有值
+ **/
+const reset = function () {
+  for (const key in props.model) {
+    props.model[key] = null;
+  }
+  // 重新校验
+  setTimeout(() => validate()?.catch((err) => {}), 0);
+};
+
+// 添加子项
+const addField = function (item: LayFormItemContext) {
+  formItems.push(item);
+  formItemMap[item.prop as string] = item;
+};
+
+defineExpose({ validate, clearValidate, reset });
+
+provide(
+  "LayForm",
+  reactive({
+    formItems,
+    addField,
+    clearValidate,
+    validate,
+    ...toRefs(props),
+  })
+);
+</script>
+
+<template>
+  <form class="layui-form" :onsubmit="submit">
+    <slot></slot>
+  </form>
+</template>

.svn/pristine/9f/9f39cbd68a84308fe4a037e6036896e17de9c1d1.svn-base

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  name: "NoteIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon :color="props.color" :size="props.size" type="layui-icon-note" />
+</template>

.svn/pristine/9f/9f3e0986fd9e285ff6ffe9b31aed3b9535f98ca0.svn-base

@@ -0,0 +1 @@
+export type InputSize = "lg" | "md" | "sm" | "xs";

.svn/pristine/9f/9f97ada1ac752031444b1fb0842603896a2124c2.svn-base

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  name: "NoticeIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon :color="props.color" :size="props.size" type="layui-icon-notice" />
+</template>

.svn/pristine/9f/9fd15909c0cbc76503d6fadeb6bb535e31eb01f3.svn-base

@@ -0,0 +1,89 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 需要一个简洁的对话框询问用户时。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 通过 `layer.confirm` 方法, 创建一个对话框。
+
+<template>
+    <lay-button type="primary" @click="openConfirm1">信息框</lay-button>
+</template>
+
+<script>
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    const openConfirm1 = function() {
+        layer.confirm("layui-vue 1.0.0 已经发布")
+    }
+
+    return {
+        openConfirm1
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 指定操作
+:::
+
+::: demo 使用 `btn` 属性, 自定义对话框操作列表。
+
+<template>
+    <lay-button type="primary" @click="openConfirm2">询问框</lay-button>
+</template>
+
+<script>
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    const openConfirm2 = function() {
+        layer.confirm("你如何看待 layui-vue 的发布", {btn: [{text:'站着看'},{text:'坐着看'}]})
+    }
+
+    return {
+        openConfirm2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 组件方法
+:::
+
+```
+layer.confirm(content, options)
+```
+
+::: title 组件属性
+:::
+
+::: table
+
+| 属性                | 描述   | 备注 |
+| ------------------- | ------ | ---- |
+| content | 内容 | -- |
+| options | 选配属性 | { time: 加载时长, btn: 按钮组 }   |
+
+:::
+
+::: contributor confirm
+:::
+
+::: previousNext confirm
+:::

.svn/pristine/9f/9fdba24d0c62119aac4f1b267e00df70a93fb53a.svn-base

@@ -0,0 +1,3 @@
+0000000000000000000000000000000000000000 ef01d2baa97b4636e4c1c9870671fe5e1ed77a4e Theluyuan <1162963624@qq.com> 1668390312 +0800	clone: from https://gitee.com/layui/layui-vue.git
+ef01d2baa97b4636e4c1c9870671fe5e1ed77a4e a062e5831257b3d7f72b2c0055bb5c49f3966579 Theluyuan <1162963624@qq.com> 1668471925 +0800	pull: Fast-forward
+a062e5831257b3d7f72b2c0055bb5c49f3966579 c1cce5a7c2d332d69ec44d991e7dcfee2026fef8 Theluyuan <1162963624@qq.com> 1668475015 +0800	commit: 1

.svn/pristine/9f/9ff99e6a0a31241fe503c3c76a340bedfe2902b7.svn-base

@@ -0,0 +1 @@
+export {};