@berqnet/theme 0.0.0-stage → 2.4.292

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

@@ -0,0 +1,275 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Inputs</h1>
+    <p>Element Plus Button is a customizable and versatile UI component designed for creating interactive and visually appealing buttons in web applications.</p>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default size is Large. Input component provides {{ sizes.length }} additional sizes for you to choose among different scenarios. Use attribute size to set additional
+          sizes <el-text tag="mark">{{ sizes.join(', ') }}</el-text>
+        </p>
+        <div class="flex gap-4 items-start">
+          <el-input
+            v-for="(size, index) of sizes"
+            :key="size + index"
+            v-model="input"
+            placeholder="Please input"
+            :size="size !== 'default' ? size : undefined"
+            :prefix-icon="ElIconSearch"
+            show-word-limit
+            maxlength="30"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input :size='small' /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Disable the Input with the <code><el-text tag="mark">disabled</el-text></code> attribute.
+        </p>
+        <div class="flex gap-4 items-start">
+          <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" v-bind="size !== 'default' ? { size } : {}" disabled />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input disabled /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Clearable </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Make the Input clearable with the <el-text tag="mark">clearable</el-text> attribute.</p>
+        <div class="flex gap-4">
+          <el-input
+            v-for="(size, index) of sizes"
+            :key="size + index"
+            v-model="input"
+            show-word-limit
+            maxlength="30"
+            placeholder="Please input"
+            v-bind="size !== 'default' ? { size } : {}"
+            clearable
+          />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input clearable /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Formatter </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Display value within it's situation with <el-text tag="mark">formatter</el-text>, and we usually use <el-text tag="mark">parser</el-text> at the same time.</p>
+        <div class="flex gap-4 flex-wrap">
+          <el-input
+            v-model="input"
+            style="width: 240px"
+            placeholder="Please input"
+            :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+            :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.formatter" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Password box </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Make a toggle-able password Input with the <el-text tag="mark">show-password</el-text> attribute.</p>
+        <div class="flex gap-4 flex-wrap">
+          <el-input v-model="input" style="width: 240px" type="password" placeholder="Please input password" show-password />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.password" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Input with icon </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Add an icon to indicate input type. To add icons in Input, you can simply use <el-text tag="mark">prefix-icon</el-text> and
+          <el-text tag="mark">suffix-icon</el-text> attributes. Also, the <el-text tag="mark">prefix</el-text> and <el-text tag="mark">suffix</el-text> named slots works as well.
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <div class="flex gap-4 mb-4 items-start">
+            <span>Using attributes</span>
+            <el-input v-model="input" style="width: 240px" placeholder="Pick a date" :suffix-icon="ElIconCalendar" />
+            <el-input v-model="input" style="width: 240px" placeholder="Type something" :prefix-icon="ElIconSearch" />
+          </div>
+          <div class="flex gap-4 items-start">
+            <span>Using slots</span>
+            <el-input v-model="input" style="width: 240px" placeholder="Pick a date">
+              <template #suffix>
+                <el-icon class="el-input__icon"><el-icon-calendar /></el-icon>
+              </template>
+            </el-input>
+            <el-input v-model="input" style="width: 240px" placeholder="Type something">
+              <template #prefix>
+                <el-icon class="el-input__icon"><el-icon-search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex flex-col gap-3">
+          <html-encode :tag="snippets.icons.suffix" />
+          <html-encode :tag="snippets.icons.slot" />
+        </div>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Textarea </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Resizable for entering multiple lines of text information. Add attribute <el-text tag="mark">type="textarea"</el-text> to change <el-text tag="mark">input</el-text> into
+          native textarea. Control the height by setting the rows prop.
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.textarea" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Mixed input</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          <el-text tag="mark">Prepend</el-text> or <el-text tag="mark">append</el-text> an element, generally a label or a button. Use <el-text tag="mark">slot</el-text> to
+          distribute elements that prepend or append to Input.
+        </p>
+        <div>
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+            <template #prepend>Http://</template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+            <template #append>.com</template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select">
+            <template #prepend>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template>
+            <template #append>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select">
+            <template #prepend>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+            <template #append>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select" disabled>
+            <template #prepend>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+            <template #append>
+              <el-button :icon="ElIconSearch" type="primary">Add</el-button>
+            </template>
+          </el-input>
+        </div>
+        <div class="mt-4">
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select" disabled>
+            <template #prepend>
+              <el-button :icon="ElIconSearch" type="primary" />
+            </template>
+            <template #append>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.mixed" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Calendar as ElIconCalendar, Search as ElIconSearch } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
+  const input = ref('');
+  const textarea = ref('');
+  const select = ref('1');
+
+  const snippets = {
+    formatter: `<el-input
+        v-model="input"
+        placeholder="Please input"
+        :formatter="(value: string) => \`$ \${value}\`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')"
+        :parser="(value: string) => value.replace(/\\$\\s?|(,*)/g, '')"
+      />`,
+    password: `<el-input v-model="input" type="password" placeholder="Please input password" show-password />`,
+    icons: {
+      suffix: `
+      // suffix
+      <el-input v-model="input" :suffix-icon="ElIconCalendar" />`,
+      slot: `
+      // slot
+      <el-input v-model="input" style="width: 240px" placeholder="Pick a date">
+        <template #suffix>
+          <el-icon class="el-input__icon"><calendar /></el-icon>
+        </template>
+      </el-input>
+      `,
+    },
+    textarea: `<el-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />`,
+    mixed: `
+      <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+        <template #prepend>Http://</template>
+        <template #append><el-button :icon="ElIconSearch" type="primary" /></template>
+      </el-input>
+  `,
+  };
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Link</h1>
+    <p>Text hyperlink</p>
+
+    <el-card>
+      <template #header> Basic </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Basic text link</p>
+        <div class="flex gap-2">
+          <el-link v-for="color of colors" :key="color" :type="color">{{ color }}</el-link>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default size is Large. Input component provides {{ sizes.length }} additional sizes for you to choose among different scenarios. Use attribute size to set additional
+          sizes <el-text tag="mark">{{ sizes.join(', ') }}</el-text>
+        </p>
+        <div class="flex gap-4 items-start">
+          <el-link v-for="(size, index) of sizes" :key="size + index" :size="size">{{ size }}</el-link>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-link :size='small' /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Disabled state of link</p>
+        <div class="flex gap-2">
+          <el-link v-for="color of colors" :key="color" :type="color" disabled>{{ color }}</el-link>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.disabled" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Underline </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default underline is <el-text tag="mark">hover</el-text>. Other underline props values is <el-text tag="mark">'always' | 'hover' | 'never'</el-text>. Boolean is
+          deprecated and will be removed in the future. Also gives an console warning.
+        </p>
+        <ul class="list-disc list-inside">
+          <li><el-link underline="never">Never</el-link> "underline='never'": Some text,</li>
+          <li><el-link underline="hover">Hover</el-link> "underline='hover'": Some text,</li>
+          <li><el-link underline="always">Always</el-link> "underline='always'": Some text</li>
+        </ul>
+      </div>
+      <template #footer> <html-encode :tag="snippets.underline" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Icon </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Link with icon</p>
+        <div class="flex flex-col gap-2 items-start">
+          <el-link class="isax-add">Check</el-link>
+          <el-link class="isax-add icon-right">Check</el-link>
+          <el-link :icon="ElIconPlus">Edit</el-link>
+          <el-link>
+            Check<el-icon class="isax-add el-icon--right"><el-icon-view /></el-icon>
+          </el-link>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.icon" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Plus as ElIconPlus } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const colors = ref<string[]>(['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger']);
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
+
+  const snippets = ref({
+    basic: `<el-link href="https://element-plus.org" target="_blank" type="secondary">default</el-link>`,
+    disabled: `<el-link type="secondary" disabled>default</el-link>`,
+    underline: `<el-link underline="hover">With Underline</el-link>`,
+    icon: `<el-link class="isax-add icon-right">Check</el-link>`,
+  });
+</script>

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

@@ -0,0 +1,237 @@
+<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-button @click="collapsed = !collapsed">Toggle</el-button>
+          <el-menu
+            id="el-menu-primary"
+            ref="menuRef"
+            data-testid="components-sidebar-vgcvofuzyo"
+            :default-active="computedStates.active_item.to"
+            class="w-full overflow-hidden !px-4 overflow-y-auto"
+            :router="true"
+            :unique-opened="true"
+            :collapse-transition="false"
+            :collapse="collapsed"
+          >
+            <el-menu-item v-index index="/" class="mat-grid-view" data-testid="components-sidebar-ycllqnbrv">
+              <template #title>{{ $t('sidebar.dashboard.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index index="/users" class="mat-person" data-testid="components-sidebar-lhxzcthocp">
+              <template #title>{{ $t('sidebar.teams.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index index="/devices" class="mat-devices" data-testid="components-sidebar-mpftdiklbu">
+              <template #title>{{ $t('sidebar.devices.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index index="/agent-configuration" class="mat-folder-eye" data-testid="sidebar-agent-configuration">
+              <template #title>{{ $t('sidebar.agent_configuration.text') }}</template>
+            </el-menu-item>
+            <el-menu-item v-index data-testid="components-sidebar-yzjnblrbvn" index="/sites" regex="/sites" class="mat-lan">
+              <template #title>{{ $t('sidebar.sites.text') }}</template>
+            </el-menu-item>
+            <el-sub-menu v-index index="/rules" data-testid="components-sidebar-tmdvrlndak">
+              <template #title>
+                <i class="mat-rule" />
+                <span>{{ $t('sidebar.rules.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/rules/firewall" data-testid="components-sidebar-pezlxnffvl">
+                <template #title>{{ $t('sidebar.rules.firewall.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/rules/routes/static" data-testid="components-sidebar-jvruigbwdp">
+                <template #title>{{ $t('sidebar.rules.routes.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/rules/forwarding" data-testid="components-sidebar-iizzyuvzkh">
+                <template #title>{{ $t('sidebar.rules.forwarding.text') }}</template>
+              </el-menu-item>
+              <!-- TODO: This feature will open after all controller versions are 14.0.0 v-if="false" <el-menu-item v-index index="/rules/qos" data-testid="components-sidebar-krxfszjkyp"> {{ $t('sidebar.rules.qos.text') }} </el-menu-item> -->
+              <el-menu-item v-index index="/rules/categories" data-testid="components-sidebar-ptienrknds">
+                <template #title>{{ $t('sidebar.settings.categories.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu v-index index="/ztna" data-testid="components-sidebar-bnihbcpjuh">
+              <template #title>
+                <i class="mat-shield" />
+                <span>{{ $t('sidebar.ztna.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/ztna/dashboard" data-testid="components-sidebar-nettrmotu">
+                <template #title>{{ $t('sidebar.ztna.dashboard.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/behavior-detection" data-testid="components-sidebar-svzpertkjn">
+                <template #title>{{ $t('sidebar.ztna.behaviors.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/device-posture-check" data-testid="components-sidebar-oreuewhqhj">
+                <template #title>{{ $t('sidebar.ztna.device_posture_check.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/user-sign-on-policies" data-testid="components-sidebar-voglodqvvx">
+                <template #title>{{ $t('sidebar.ztna.user_sign_on_policies.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/ztna/admin-sign-on-policies" data-testid="components-sidebar-vzizrrtpzn">
+                <template #title>{{ $t('sidebar.ztna.admin_sign_on_policies.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu v-index index="/insights" data-testid="components-sidebar-neymnnlec">
+              <template #title>
+                <i class="mat-folder-open" />
+                <span>{{ $t('sidebar.insights.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/insights/alerts" data-testid="components-sidebar-mtklcicmi">
+                <template #title>{{ $t('sidebar.insights.alerts.text') }}</template>
+              </el-menu-item>
+              <!--<el-menu-item v-index index="/insights/threats" data-testid="components-sidebar-pfrrtymjti">{{ $t('sidebar.threats.text') }}</el-menu-item>-->
+              <el-menu-item v-index index="/insights/network-activity" data-testid="components-sidebar-selflhiujn">
+                <template #title>{{ $t('sidebar.insights.all_traffic.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/insights/events" data-testid="components-sidebar-toksfhzzfq">
+                <template #title>{{ $t('sidebar.insights.events.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/insights/blocked-ips" data-testid="components-sidebar-kvhegftktx">
+                <template #title>{{ $t('sidebar.insights.blocked_ips.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu v-index index="/reports" data-testid="components-sidebar-bnihbcpjuh">
+              <template #title>
+                <i class="mat-bar-chart" />
+                <span>{{ $t('sidebar.reports.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/reports/automated" data-testid="components-sidebar-cnudlizsfg">
+                <template #title>{{ $t('sidebar.insights.reports.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/reports/productivity" data-testid="components-sidebar-ewrnssadfv">
+                <template #title>{{ $t('sidebar.insights.tracker.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/reports/device-posture" data-testid="components-sidebar-jdxrecyjwd">
+                <template #title>{{ $t('sidebar.insights.device_posture_check_reports.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-divider class="!my-2 !border-t-neutral-2" />
+            <el-sub-menu v-index index="/settings" data-testid="components-sidebar-jcaexatpod">
+              <template #title>
+                <i class="mat-settings" />
+                <span>{{ $t('sidebar.settings.text') }}</span>
+              </template>
+              <el-menu-item v-index index="/settings/cache-analytics" data-testid="components-sidebar-fswikkipil">
+                <template #title>{{ $t('sidebar.settings.cache_analytics.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/captive-portals" data-testid="components-sidebar-fswikkipil">
+                <template #title>{{ $t('sidebar.settings.captive_portal.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/integrations" data-testid="components-sidebar-integrations">
+                <template #title>{{ $t('sidebar.settings.integrations.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/configuration" data-testid="components-sidebar-zvuhmrdamh">
+                <template #title>{{ $t('sidebar.settings.configuration.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/tags" data-testid="components-sidebar-yxikpneqsi">
+                <template #title>{{ $t('sidebar.settings.tags.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/administrators" data-testid="components-sidebar-sjavprmmmj">
+                <template #title>{{ $t('sidebar.settings.administrators.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/organization" data-testid="components-sidebar-iywlhkkmta">
+                <template #title>{{ $t('sidebar.settings.organization.text') }}</template>
+              </el-menu-item>
+              <el-menu-item v-index index="/settings/agent-deployment" data-testid="components-sidebar-yxbnijbpmj">
+                <template #title>{{ $t('sidebar.settings.agent_deployment.text') }}</template>
+              </el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+
+  const menuRef = ref();
+  const menuIndexes = ref<{ value: string; to: string | undefined }[]>([]);
+  const route = useRoute();
+  const collapsed = ref(false);
+
+  /****************************************************************************
+   * Computed States
+   ****************************************************************************/
+
+  const computedStates = reactive({
+    active_item: computed(() => {
+      const currentPath = route.path;
+      const sortedIndexes = [...menuIndexes.value].sort((a, b) => b.value.length - a.value.length);
+
+      const matchingPath = sortedIndexes.find((pattern) => {
+        if (currentPath === pattern.value) return true;
+        if (currentPath.startsWith(pattern.value)) return true;
+
+        return false;
+      });
+
+      return matchingPath || { value: '/', to: '/' };
+    }),
+  });
+
+  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>`,
+  });
+</script>