@timus-networks/theme 2.0.0 → 2.0.2

package/dist/runtime/components/development/example.form.vue

@@ -0,0 +1,488 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Form</h1>
+    <p>Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.</p>
+
+    <el-card>
+      <template #header>Basic Form</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          It includes all kinds of input items, such as input, select, radio and checkbox. In each form component, you need a form-item field to be the container of your input
+          item.
+        </p>
+        <div class="flex gap-2">
+          <el-form :model="form" label-width="auto" style="max-width: 600px" :label-position="labelPosition" require-asterisk-position="right">
+            <el-form-item label="Form Align" :required="true" class="grow">
+              <el-radio-group v-model="labelPosition" aria-label="label position">
+                <el-radio-button value="left">Left</el-radio-button>
+                <el-radio-button value="right">Right</el-radio-button>
+                <el-radio-button value="top">Top</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="Activity name" class="grow">
+              <el-input v-model="form.name" />
+            </el-form-item>
+            <el-form-item label="Activity form">
+              <el-input v-model="form.desc" type="textarea" />
+            </el-form-item>
+            <el-form-item label="Instant delivery">
+              <el-switch v-model="form.delivery" />
+            </el-form-item>
+            <el-form-item label="Activity type">
+              <el-checkbox-group v-model="form.type">
+                <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox>
+                <el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox>
+                <el-checkbox value="Offline activities" name="type"> Offline activities </el-checkbox>
+                <el-checkbox value="Simple brand exposure" name="type"> Simple brand exposure </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="Resources">
+              <el-radio-group v-model="form.resource">
+                <el-radio value="Sponsor">Sponsor</el-radio>
+                <el-radio value="Venue">Venue</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="Activity time">
+              <el-col :span="11">
+                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+              </el-col>
+              <el-col :span="2" class="text-center">
+                <span class="text-gray-500">-</span>
+              </el-col>
+              <el-col :span="11">
+                <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+              </el-col>
+            </el-form-item>
+            <el-form-item class="flex gap-7">
+              <el-button class="mr-7.5" type="primary" @click="onSubmit">Create</el-button>
+              <el-button>Cancel</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Same Line Form Items </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Add a <el-text tag="mark">div</el-text> with a class name containing <el-text tag="mark">.el-form-items</el-text> to make the form items appear on the same line, which
+          will automatically add a 30px gap between them.
+        </p>
+        <div class="flex gap-2">
+          <el-form :model="form" label-width="auto" :label-position="labelPosition" require-asterisk-position="right">
+            <div class="el-form-items">
+              <el-form-item label="Activity form">
+                <el-input v-model="form.input" />
+              </el-form-item>
+              <el-form-item label="Activity zone">
+                <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
+                  <el-option label="Zone one" value="shanghai" />
+                  <el-option label="Zone two" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Activity form">
+                <el-input v-model="form.input" />
+              </el-form-item>
+              <el-form-item label="Deactivity form">
+                <el-input v-model="form.input" />
+              </el-form-item>
+              <el-form-item label="Activity zone" class="w-32">
+                <el-select v-model="form.region" placeholder="please select your zone">
+                  <el-option label="Zone one" value="shanghai" />
+                  <el-option label="Zone two" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button class="isax-add" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.same_line" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sticky Form Items </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Add a <el-text tag="mark">div</el-text> with a class name containing <el-text tag="mark">sticky</el-text> and <el-text tag="mark">el-form-items</el-text> to make it stick
+          to others.
+        </p>
+        <div class="flex gap-2">
+          <el-form :model="form" label-width="auto" :label-position="labelPosition" require-asterisk-position="right">
+            <div class="el-form-items sticky">
+              <el-form-item label="Activity form">
+                <el-input v-model="form.input" />
+              </el-form-item>
+              <el-form-item label="Activity zone">
+                <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
+                  <el-option label="Zone one" value="shanghai" />
+                  <el-option label="Zone two" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Activity form">
+                <el-input v-model="form.input" />
+              </el-form-item>
+              <el-form-item label="Deactivity form">
+                <el-input v-model="form.input" />
+              </el-form-item>
+              <el-form-item label="Activity zone" class="w-32">
+                <el-select v-model="form.region" placeholder="please select your zone">
+                  <el-option label="Zone one" value="shanghai" />
+                  <el-option label="Zone two" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button class="isax-add" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.sticky" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Validation </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Form component allows you to verify your data, helping you find and correct errors. Just add the <el-text tag="mark">rules</el-text> attribute for
+          <el-text tag="mark">Form</el-text> component, pass validation rules, and set prop attribute for FormItem as a specific key that needs to be validated. See more
+          information at <a href="https://github.com/yiminghe/async-validator" target="_blank">async-validator</a>.
+        </p>
+        <div class="flex gap-2">
+          <el-form
+            ref="ruleFormRef"
+            style="max-width: 600px"
+            :model="ruleForm"
+            :rules="rules"
+            label-width="auto"
+            class="demo-ruleForm"
+            :size="formSize"
+            status-icon
+            require-asterisk-position="right"
+            label-position="top"
+          >
+            <el-form-item label="Activity name" prop="name">
+              <el-input v-model="ruleForm.name" />
+            </el-form-item>
+            <el-form-item label="Activity zone" prop="region">
+              <el-select v-model="ruleForm.region" placeholder="Activity zone">
+                <el-option label="Zone one" value="shanghai" />
+                <el-option label="Zone two" value="beijing" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="Activity count" prop="count">
+              <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
+            </el-form-item>
+            <el-form-item label="Activity time" required>
+              <el-col :span="11">
+                <el-form-item prop="date1">
+                  <el-input v-model="ruleForm.name" />
+                </el-form-item>
+              </el-col>
+              <el-col class="text-center" :span="2">
+                <span class="text-gray-500">-</span>
+              </el-col>
+              <el-col :span="11">
+                <el-form-item prop="date2">
+                  <el-input v-model="ruleForm.name" />
+                </el-form-item>
+              </el-col>
+            </el-form-item>
+            <div label="Activity time" required class="el-form-items sticky">
+              <el-form-item prop="date1" label="Date 1">
+                <el-date-picker v-model="ruleForm.date1" type="date" aria-label="Pick a date" placeholder="Pick a date" style="width: 100%" />
+              </el-form-item>
+              <el-form-item prop="date2">
+                <el-time-picker v-model="ruleForm.date2" aria-label="Pick a time" placeholder="Pick a time" style="width: 100%" />
+              </el-form-item>
+            </div>
+            <el-form-item label="Instant delivery" prop="delivery">
+              <el-switch v-model="ruleForm.delivery" />
+            </el-form-item>
+            <el-form-item label="Activity location" prop="location">
+              <el-segmented v-model="ruleForm.location" :options="locationOptions" />
+            </el-form-item>
+            <el-form-item label="Activity type" prop="type">
+              <el-checkbox-group v-model="ruleForm.type">
+                <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox>
+                <el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox>
+                <el-checkbox value="Offline activities" name="type"> Offline activities </el-checkbox>
+                <el-checkbox value="Simple brand exposure" name="type"> Simple brand exposure </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="Resources" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio value="Sponsorship">Sponsorship</el-radio>
+                <el-radio value="Venue">Venue</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="Activity form" prop="desc">
+              <el-input v-model="ruleForm.desc" type="textarea" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="mr-7.5" @click="submitForm(ruleFormRef)"> Create </el-button>
+              <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.validation" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          All components in a Form inherit their <el-text tag="mark">size</el-text> attribute from that Form. Similarly, FormItem also has a size attribute. Still you can fine tune
+          each component's size if you don't want that component to inherit its size from From or FormItem.
+        </p>
+        <div class="flex flex-col gap-7.5">
+          <div class="flex gap-7.5">
+            <el-radio-group v-model="formSize" aria-label="size control">
+              <el-radio-button value="default">default</el-radio-button>
+              <el-radio-button value="large">large</el-radio-button>
+              <el-radio-button value="medium">medium</el-radio-button>
+              <el-radio-button value="small">small</el-radio-button>
+              <el-radio-button value="mini">mini</el-radio-button>
+            </el-radio-group>
+            <el-radio-group v-model="labelPosition" aria-label="position control">
+              <el-radio-button value="left">Left</el-radio-button>
+              <el-radio-button value="right">Right</el-radio-button>
+              <el-radio-button value="top">Top</el-radio-button>
+            </el-radio-group>
+          </div>
+          <el-form style="max-width: 600px" :model="ruleForm" label-width="auto" :label-position="labelPosition" :size="formSize">
+            <el-form-item label="Activity name">
+              <el-input v-model="ruleForm.name" />
+            </el-form-item>
+            <el-form-item label="Activity zone">
+              <el-select v-model="ruleForm.region" placeholder="please select your zone">
+                <el-option label="Zone one" value="shanghai" />
+                <el-option label="Zone two" value="beijing" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="Activity time">
+              <el-col :span="11">
+                <el-date-picker v-model="ruleForm.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="ruleForm.date2" aria-label="Pick a time" placeholder="Pick a time" style="width: 100%" />
+              </el-col>
+            </el-form-item>
+            <el-form-item label="Activity type">
+              <el-checkbox-group v-model="ruleForm.type">
+                <el-checkbox-button value="Online activities" name="type"> Online activities </el-checkbox-button>
+                <el-checkbox-button value="Promotion activities" name="type"> Promotion activities </el-checkbox-button>
+              </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="Resources">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio border value="Sponsor">Sponsor</el-radio>
+                <el-radio border value="Venue">Venue</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="mr-7.5" @click="onSubmit">Create</el-button>
+              <el-button>Cancel</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.size" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { FormProps } from 'element-plus';
+  import { reactive, ref } from 'vue';
+
+  // do not use same name with ref
+  const form = reactive({
+    name: '',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    input: '',
+    type: [],
+    resource: '',
+    desc: '',
+  });
+  const onSubmit = () => {
+    console.log('submit!');
+  };
+  const labelPosition = ref<FormProps['labelPosition']>('top');
+  const snippets = ref({
+    basic: `
+      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
+      </el-form>`,
+    same_line: `
+      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
+        <div class="el-form-items">
+          <el-form-item label="Activity form">
+            <el-input v-model="form.input" />
+          </el-form-item>
+          <el-form-item label="Activity zone">
+            <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="isax-add" />
+          </el-form-item>
+        </div>
+      </el-form>`,
+    sticky: `
+      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
+        <div class="el-form-items sticky">
+          <el-form-item label="Activity form">
+            <el-input v-model="form.input" />
+          </el-form-item>
+          <el-form-item label="Activity zone">
+            <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="isax-add" />
+          </el-form-item>
+        </div>
+      </el-form>
+    `,
+    validation: `
+      <el-form
+        ref="ruleFormRef"
+        style="max-width: 600px"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="auto"
+        class="demo-ruleForm"
+        :size="formSize"
+        status-icon
+        require-asterisk-position="right"
+        label-position="top"
+      />`,
+    size: `<el-form size="large" :model="ruleForm" label-width="auto" label-position="top"></el-form>`,
+  });
+
+  // Rules
+
+  import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
+
+  interface RuleForm {
+    name: string;
+    region: string;
+    count: string;
+    date1: string;
+    date2: string;
+    delivery: boolean;
+    location: string;
+    type: string[];
+    resource: string;
+    desc: string;
+  }
+
+  const formSize = ref<ComponentSize>('default');
+  const ruleFormRef = ref<FormInstance>();
+  const ruleForm = reactive<RuleForm>({
+    name: 'Hello',
+    region: '',
+    count: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    location: '',
+    type: [],
+    resource: '',
+    desc: '',
+  });
+  const locationOptions = ['Home', 'Company', 'School'];
+  const rules = reactive<FormRules<RuleForm>>({
+    name: [
+      { required: true, message: 'Please input Activity name', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    region: [
+      {
+        required: true,
+        message: 'Please select Activity zone',
+        trigger: 'change',
+      },
+    ],
+    count: [
+      {
+        required: true,
+        message: 'Please select Activity count',
+        trigger: 'change',
+      },
+    ],
+    date1: [
+      {
+        type: 'date',
+        required: true,
+        message: 'Please pick a date',
+        trigger: 'change',
+      },
+    ],
+    date2: [
+      {
+        type: 'date',
+        required: true,
+        message: 'Please pick a time',
+        trigger: 'change',
+      },
+    ],
+    location: [
+      {
+        required: true,
+        message: 'Please select a location',
+        trigger: 'change',
+      },
+    ],
+    type: [
+      {
+        type: 'array',
+        required: true,
+        message: 'Please select at least one activity type',
+        trigger: 'change',
+      },
+    ],
+    resource: [
+      {
+        required: true,
+        message: 'Please select activity resource',
+        trigger: 'change',
+      },
+    ],
+    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
+  });
+  const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid: boolean, fields) => {
+      if (valid) {
+        console.log('submit!');
+      } else {
+        console.log('error submit!', fields);
+      }
+    });
+  };
+  const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+  };
+  const options = Array.from({ length: 10000 }).map((_, idx) => ({
+    value: `${idx + 1}`,
+    label: `${idx + 1}`,
+  }));
+</script>