@phelan/design 0.0.1

package/docs/examples/form/custom-validation.vue

@@ -0,0 +1,121 @@
+<template>
+  <m-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    status-icon
+    :rules="rules"
+    label-width="auto"
+    class="demo-ruleForm"
+  >
+    <m-form-item
+      label="Password"
+      prop="pass"
+    >
+      <el-input
+        v-model="ruleForm.pass"
+        type="password"
+        autocomplete="off"
+      />
+    </m-form-item>
+    <m-form-item
+      label="Confirm"
+      prop="checkPass"
+    >
+      <el-input
+        v-model="ruleForm.checkPass"
+        type="password"
+        autocomplete="off"
+      />
+    </m-form-item>
+    <m-form-item
+      label="Age"
+      prop="age"
+    >
+      <el-input v-model.number="ruleForm.age" />
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="submitForm(ruleFormRef)"
+      >
+        Submit
+      </m-button>
+      <m-button @click="resetForm(ruleFormRef)">Reset</m-button>
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import type { FormInstance, FormRules } from 'element-plus';
+
+const ruleFormRef = ref<FormInstance>();
+
+const checkAge = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    return callback(new Error('Please input the age'));
+  }
+  setTimeout(() => {
+    if (!Number.isInteger(value)) {
+      callback(new Error('Please input digits'));
+    } else {
+      if (value < 18) {
+        callback(new Error('Age must be greater than 18'));
+      } else {
+        callback();
+      }
+    }
+  }, 1000);
+};
+
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('Please input the password'));
+  } else {
+    if (ruleForm.checkPass !== '') {
+      if (!ruleFormRef.value) return;
+      ruleFormRef.value.validateField('checkPass');
+    }
+    callback();
+  }
+};
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('Please input the password again'));
+  } else if (value !== ruleForm.pass) {
+    callback(new Error("Two inputs don't match!"));
+  } else {
+    callback();
+  }
+};
+
+const ruleForm = reactive({
+  pass: '',
+  checkPass: '',
+  age: '',
+});
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+  pass: [{ validator: validatePass, trigger: 'blur' }],
+  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+  age: [{ validator: checkAge, trigger: 'blur' }],
+});
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>

package/docs/examples/form/form-items.vue

@@ -0,0 +1,111 @@
+<template>
+  <m-form
+    ref="formRef"
+    style="max-width: 600px"
+    :model="dynamicValidateForm"
+    label-width="auto"
+    class="demo-dynamic"
+  >
+    <m-form-item
+      prop="email"
+      label="Email"
+      :rules="[
+        {
+          required: true,
+          message: 'Please input email address',
+          trigger: 'blur',
+        },
+        {
+          type: 'email',
+          message: 'Please input correct email address',
+          trigger: ['blur', 'change'],
+        },
+      ]"
+    >
+      <el-input v-model="dynamicValidateForm.email" />
+    </m-form-item>
+    <m-form-item
+      v-for="(domain, index) in dynamicValidateForm.domains"
+      :key="domain.key"
+      :label="'Domain' + index"
+      :prop="'domains.' + index + '.value'"
+      :rules="{
+        required: true,
+        message: 'domain can not be null',
+        trigger: 'blur',
+      }"
+    >
+      <el-input v-model="domain.value" />
+      <m-button
+        class="mt-2"
+        @click.prevent="removeDomain(domain)"
+      >
+        Delete
+      </m-button>
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="submitForm(formRef)"
+        >Submit</m-button
+      >
+      <m-button @click="addDomain">New domain</m-button>
+      <m-button @click="resetForm(formRef)">Reset</m-button>
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import type { FormInstance } from 'element-plus';
+
+const formRef = ref<FormInstance>();
+const dynamicValidateForm = reactive<{
+  domains: DomainItem[];
+  email: string;
+}>({
+  domains: [
+    {
+      key: 1,
+      value: '',
+    },
+  ],
+  email: '',
+});
+
+interface DomainItem {
+  key: number;
+  value: string;
+}
+
+const removeDomain = (item: DomainItem) => {
+  const index = dynamicValidateForm.domains.indexOf(item);
+  if (index !== -1) {
+    dynamicValidateForm.domains.splice(index, 1);
+  }
+};
+
+const addDomain = () => {
+  dynamicValidateForm.domains.push({
+    key: Date.now(),
+    value: '',
+  });
+};
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>

package/docs/examples/form/inline-form.vue

@@ -0,0 +1,70 @@
+<template>
+  <m-form
+    :inline="true"
+    :model="formInline"
+    class="demo-form-inline"
+  >
+    <m-form-item label="Approved by">
+      <el-input
+        v-model="formInline.user"
+        placeholder="Approved by"
+        clearable
+      />
+    </m-form-item>
+    <m-form-item label="Activity zone">
+      <el-select
+        v-model="formInline.region"
+        placeholder="Activity zone"
+        clearable
+      >
+        <el-option
+          label="Zone one"
+          value="shanghai"
+        />
+        <el-option
+          label="Zone two"
+          value="beijing"
+        />
+      </el-select>
+    </m-form-item>
+    <m-form-item label="Activity time">
+      <el-date-picker
+        v-model="formInline.date"
+        type="date"
+        placeholder="Pick a date"
+        clearable
+      />
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="onSubmit"
+        >Query</m-button
+      >
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+const formInline = reactive({
+  user: '',
+  region: '',
+  date: '',
+});
+
+const onSubmit = () => {
+  console.log('submit!');
+};
+</script>
+
+<style>
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

package/docs/examples/form/number-validate.vue

@@ -0,0 +1,60 @@
+<template>
+  <m-form
+    ref="formRef"
+    style="max-width: 600px"
+    :model="numberValidateForm"
+    label-width="auto"
+    class="demo-ruleForm"
+  >
+    <m-form-item
+      label="age"
+      prop="age"
+      :rules="[
+        { required: true, message: 'age is required' },
+        { type: 'number', message: 'age must be a number' },
+      ]"
+    >
+      <el-input
+        v-model.number="numberValidateForm.age"
+        type="text"
+        autocomplete="off"
+      />
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="submitForm(formRef)"
+        >Submit</m-button
+      >
+      <m-button @click="resetForm(formRef)">Reset</m-button>
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import type { FormInstance } from 'element-plus';
+
+const formRef = ref<FormInstance>();
+
+const numberValidateForm = reactive({
+  age: '',
+});
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>

package/docs/examples/form/size-control.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <m-radio-group
+      v-model="size"
+      aria-label="size control"
+    >
+      <m-radio-button value="large">large</m-radio-button>
+      <m-radio-button value="default">default</m-radio-button>
+      <m-radio-button value="small">small</m-radio-button>
+    </m-radio-group>
+    <m-radio-group
+      v-model="labelPosition"
+      aria-label="position control"
+    >
+      <m-radio-button value="left">Left</m-radio-button>
+      <m-radio-button value="right">Right</m-radio-button>
+      <m-radio-button value="top">Top</m-radio-button>
+    </m-radio-group>
+  </div>
+  <br />
+  <m-form
+    style="max-width: 600px"
+    :model="sizeForm"
+    label-width="auto"
+    :label-position="labelPosition"
+    :size="size"
+  >
+    <m-form-item label="Activity name">
+      <el-input v-model="sizeForm.name" />
+    </m-form-item>
+    <m-form-item label="Activity zone">
+      <el-select
+        v-model="sizeForm.region"
+        placeholder="please select your zone"
+      >
+        <el-option
+          label="Zone one"
+          value="shanghai"
+        />
+        <el-option
+          label="Zone two"
+          value="beijing"
+        />
+      </el-select>
+    </m-form-item>
+    <m-form-item label="Activity time">
+      <el-col :span="11">
+        <el-date-picker
+          v-model="sizeForm.date1"
+          type="date"
+          aria-label="Pick a date"
+          placeholder="Pick a date"
+          style="width: 100%"
+        />
+      </el-col>
+      <el-col
+        class="text-center"
+        :span="1"
+        style="margin: 0 0.5rem"
+        >-</el-col
+      >
+      <el-col :span="11">
+        <el-time-picker
+          v-model="sizeForm.date2"
+          aria-label="Pick a time"
+          placeholder="Pick a time"
+          style="width: 100%"
+        />
+      </el-col>
+    </m-form-item>
+    <m-form-item label="Activity type">
+      <m-checkbox-group v-model="sizeForm.type">
+        <m-checkbox-button
+          value="Online activities"
+          name="type"
+        >
+          Online activities
+        </m-checkbox-button>
+        <m-checkbox-button
+          value="Promotion activities"
+          name="type"
+        >
+          Promotion activities
+        </m-checkbox-button>
+      </m-checkbox-group>
+    </m-form-item>
+    <m-form-item label="Resources">
+      <m-radio-group v-model="sizeForm.resource">
+        <m-radio
+          border
+          value="Sponsor"
+          >Sponsor</m-radio
+        >
+        <m-radio
+          border
+          value="Venue"
+          >Venue</m-radio
+        >
+      </m-radio-group>
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="onSubmit"
+        >Create</m-button
+      >
+      <m-button>Cancel</m-button>
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import type { ComponentSize, FormProps } from 'element-plus';
+
+const size = ref<ComponentSize>('default');
+const labelPosition = ref<FormProps['labelPosition']>('right');
+
+const sizeForm = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+});
+
+function onSubmit() {
+  console.log('submit!');
+}
+</script>
+
+<style>
+.m-radio-group {
+  margin-right: 12px;
+}
+</style>