@berqnet/theme 0.0.0-stage → 2.4.292

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

@@ -0,0 +1,333 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Table</h1>
+    <p>Display multiple data with similar format. You can sort, filter, compare your data in a table.</p>
+
+    <el-card>
+      <template #header> Basic table </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>
+          Basic table is just for data display. After setting attribute <el-text tag="mark">data</el-text> of <el-text tag="mark">el-table</el-text> with an object array, you can
+          use prop (corresponding to a key of the object in data array) in <el-text tag="mark">el-table-column</el-text> to insert data to table columns, and set the attribute
+          <el-text tag="mark">label</el-text> to define the column name. You can also use the attribute <el-text tag="mark">width</el-text> to define the width of columns.
+        </p>
+        <el-table :data="tableData" style="width: 100%" flexible height="300">
+          <el-table-column type="selection" width="16" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
+          <el-table-column property="city" label="City" show-overflow-tooltip />
+          <el-table-column property="zip" label="Zip" show-overflow-tooltip />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+          <el-table-column min-width="37" width="37" fixed="right">
+            <el-dropdown>
+              <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
+                  <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
+                  <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
+                  <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          v-model:current-page="current_page"
+          v-model:page-size="page_size"
+          :page-sizes="[10, 20, 50, 100]"
+          :disabled="disabled"
+          :background="background"
+          layout="total, prev, pager, next, jumper, sizes"
+          :total="40000"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.basic" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Without Border </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>Just add <el-text tag="mark">.t-border-none</el-text> to table class attribute.</p>
+        <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-none">
+          <el-table-column type="selection" width="16" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
+          <el-table-column property="city" label="City" show-overflow-tooltip />
+          <el-table-column property="zip" label="Zip" show-overflow-tooltip />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+          <el-table-column min-width="37" width="37" fixed="right">
+            <el-dropdown>
+              <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
+                  <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
+                  <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
+                  <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.borderless" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Top and Bottom Border </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>Just add <el-text tag="mark">.t-border-y</el-text> to table class attribute for top and bottom border.</p>
+        <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-y">
+          <el-table-column type="selection" width="16" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
+          <el-table-column property="city" label="City" show-overflow-tooltip />
+          <el-table-column property="zip" label="Zip" show-overflow-tooltip />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+          <el-table-column min-width="37" width="37" fixed="right">
+            <el-dropdown>
+              <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
+                  <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
+                  <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
+                  <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.top_and_bottom_border" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Just Top Border </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>Just add <el-text tag="mark">.t-border-t</el-text> to table class attribute for top border.</p>
+        <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-t">
+          <el-table-column type="selection" width="16" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
+          <el-table-column property="city" label="City" show-overflow-tooltip />
+          <el-table-column property="zip" label="Zip" show-overflow-tooltip />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+          <el-table-column min-width="37" width="37" fixed="right">
+            <el-dropdown>
+              <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
+                  <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
+                  <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
+                  <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.top_border" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Just Bottom Border </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>Just add <el-text tag="mark">.t-border-b</el-text> to table class attribute for bottom border.</p>
+        <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-b">
+          <el-table-column type="selection" width="16" />
+          <el-table-column label="Date" width="120" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
+          <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
+          <el-table-column property="city" label="City" show-overflow-tooltip />
+          <el-table-column property="zip" label="Zip" show-overflow-tooltip />
+          <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
+          <el-table-column min-width="37" width="37" fixed="right">
+            <el-dropdown>
+              <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
+                  <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
+                  <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
+                  <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.bottom_border" />
+        </code>
+      </template>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ElTable } from 'element-plus';
+  import { reactive, ref, toRefs } from 'vue';
+
+  interface User {
+    date: string;
+    name: string;
+    state: string;
+    city: string;
+    zip: string;
+    address: string;
+  }
+
+  interface PaginationState {
+    current_page: number;
+    size: string;
+    page_size: number;
+    disabled: boolean;
+    background: boolean;
+    handleSizeChange: (pageSize: number) => void;
+    handleCurrentChange: (page: number) => void;
+  }
+
+  const paginationState = reactive<PaginationState>({
+    current_page: 2,
+    size: 'small',
+    page_size: 20,
+    disabled: false,
+    background: false,
+    handleSizeChange: (pageSize: number) => {
+      console.log(pageSize);
+    },
+    handleCurrentChange: (page: number) => {
+      console.log(page);
+    },
+  });
+
+  const { current_page, page_size, disabled, background, handleSizeChange, handleCurrentChange } = toRefs(paginationState);
+
+  const tableData: User[] = [
+    {
+      date: '2016-05-03',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-02',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-01',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-08',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-06',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+    {
+      date: '2016-05-07',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+    },
+  ];
+
+  const snippets = ref({
+    basic: `
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
+    borderless: `
+      <el-table :data="tableData" class="no-border">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
+    top_and_bottom_border: `
+      <el-table :data="tableData" class="t-border-y">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
+    bottom_border: `
+      <el-table :data="tableData" class="t-border-b">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
+    top_border: `
+      <el-table :data="tableData" class="t-border-t">
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+    `,
+  });
+</script>

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

@@ -0,0 +1,268 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Tag</h1>
+    <p>Used for marking and selection.</p>
+
+    <el-card>
+      <template #header>Types</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Use the <el-text tag="mark">type</el-text> attribute to define Tag's type. In addition, the <el-text tag="mark">color</el-text> attribute can be used to set the
+          background color of the Tag.
+        </p>
+        <div class="flex gap-2">
+          <el-tag v-for="(color, key) in colors" :key="key + color" :type="color">{{ color }}</el-tag>
+        </div>
+      </div>
+      <template #footer><html-encode :tag="snippets.types" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Besides default size, Tag component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with
+          <el-text tag="mark">
+            {{ sizes.join(', ') }}
+          </el-text>
+        </p>
+        <div class="flex gap-2">
+          <el-tag v-for="(size, key) in sizes" :key="key + size" :size="size">{{ size }}</el-tag>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.sizes" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Removable Tag </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          <el-text tag="mark">closable</el-text> attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you
+          don't want to use it, you can set the <el-text tag="mark">disable-transitions</el-text> attribute, which accepts a Boolean, to true. close event triggers when Tag is
+          removed.
+        </p>
+        <div class="flex gap-2">
+          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
+            {{ tag.name }}
+          </el-tag>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.closable" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Edit Dynamically </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>You can use the <el-text tag="mark">close</el-text> event to add and remove tag dynamically.</p>
+        <div class="flex gap-2">
+          <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
+            {{ tag }}
+          </el-tag>
+          <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="!w-20" size="mini" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+          <el-button v-else class="button-new-tag" size="mini" @click="showInput"> + New Tag </el-button>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.dynamic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Theme </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Tag provide three different themes: dark、light and plain Using effect to change, default is light</p>
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-2">
+            <span>Dark</span>
+            <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
+              {{ item.label }}
+            </el-tag>
+          </div>
+          <div class="flex gap-2 mt-4">
+            <span>Light</span>
+            <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="light">
+              {{ item.label }}
+            </el-tag>
+          </div>
+          <div class="flex gap-2 mt-4">
+            <span>Plain</span>
+            <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain">
+              {{ item.label }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.theme" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Rounded </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Tag can also be rounded like button.</p>
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-2">
+            <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark" round>
+              {{ item.label }}
+            </el-tag>
+          </div>
+          <div class="flex gap-2 mt-4">
+            <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="light" round>
+              {{ item.label }}
+            </el-tag>
+          </div>
+          <div class="flex gap-2 mt-4">
+            <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain" round>
+              {{ item.label }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.rounded" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Checkable Tag </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Sometimes because of the business needs, we might need checkbox like tag, but button like checkbox cannot meet our needs, here comes
+          <el-text tag="mark">check-tag</el-text>. You can use type prop in 2.5.4. basic check-tag usage, the API is rather simple.
+        </p>
+        <div class="flex gap-2">
+          <div class="flex gap-2">
+            <el-check-tag checked>Checked</el-check-tag>
+            <el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
+          </div>
+          <el-check-tag :checked="checked1" type="primary" @change="onChange1"> Tag 1 </el-check-tag>
+          <el-check-tag :checked="checked2" type="success" @change="onChange2"> Tag 2 </el-check-tag>
+          <el-check-tag :checked="checked3" type="info" @change="onChange3"> Tag 3 </el-check-tag>
+          <el-check-tag :checked="checked4" type="warning" @change="onChange4"> Tag 4 </el-check-tag>
+          <el-check-tag :checked="checked5" type="danger" @change="onChange5"> Tag 5 </el-check-tag>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.checked" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { InputInstance } from 'element-plus';
+  import type { TagProps } from 'element-plus';
+  import { ElInput } from 'element-plus';
+  import { nextTick, ref } from 'vue';
+
+  interface TagsItem {
+    name: string;
+    type: TagProps['type'];
+  }
+
+  type Item = { type: TagProps['type']; label: string };
+
+  const checked = ref(false);
+  const checked1 = ref(true);
+  const checked2 = ref(true);
+  const checked3 = ref(true);
+  const checked4 = ref(true);
+  const checked5 = ref(true);
+
+  const onChange = (status: boolean) => {
+    checked.value = status;
+  };
+
+  const onChange1 = (status: boolean) => {
+    checked1.value = status;
+  };
+
+  const onChange2 = (status: boolean) => {
+    checked2.value = status;
+  };
+
+  const onChange3 = (status: boolean) => {
+    checked3.value = status;
+  };
+
+  const onChange4 = (status: boolean) => {
+    checked4.value = status;
+  };
+
+  const onChange5 = (status: boolean) => {
+    checked5.value = status;
+  };
+
+  const items = ref<Array<Item>>([
+    { type: 'primary', label: 'Tag 1' },
+    { type: 'secondary', label: 'Tag 2' },
+    { type: 'neutral', label: 'Tag 2' },
+    { type: 'success', label: 'Tag 2' },
+    { type: 'info', label: 'Tag 3' },
+    { type: 'warning', label: 'Tag 4' },
+    { type: 'danger', label: 'Tag 5' },
+  ]);
+
+  const tags = ref<TagsItem[]>([
+    { name: 'Tag 1', type: 'primary' },
+    { name: 'Tag 1', type: 'secondary' },
+    { name: 'Tag 1', type: 'neutral' },
+    { name: 'Tag 2', type: 'success' },
+    { name: 'Tag 3', type: 'info' },
+    { name: 'Tag 4', type: 'warning' },
+    { name: 'Tag 5', type: 'danger' },
+  ]);
+
+  const inputValue = ref('');
+  const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+  const inputVisible = ref(false);
+  const InputRef = ref<InputInstance>();
+
+  const handleClose = (tag: string) => {
+    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+  };
+
+  const showInput = () => {
+    inputVisible.value = true;
+    nextTick(() => {
+      InputRef.value!.input!.focus();
+    });
+  };
+
+  const handleInputConfirm = () => {
+    if (inputValue.value) {
+      dynamicTags.value.push(inputValue.value);
+    }
+
+    inputVisible.value = false;
+    inputValue.value = '';
+  };
+</script>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'BerqnetTag',
+    data() {
+      return {
+        sizes: ['default', 'large', 'medium', 'small', 'mini'],
+        colors: ['primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger'],
+        value: '',
+        snippets: {
+          types: `<el-tag type="success">tag</el-tag>`,
+          sizes: `<el-tag size="large">tag</el-tag>`,
+          closable: `<el-tag size="large" type="success" closable>tag</el-tag>`,
+          dynamic: `<el-tag closable :disable-transitions="false" @close="handleClose(tag)"> tag </el-tag>`,
+          theme: `
+            <el-tag effect="dark"> tag </el-tag>
+            <el-tag effect="light"> tag </el-tag>
+            <el-tag effect="plain"> tag </el-tag>
+          `,
+          rounded: `<el-tag round>tag</el-tag>`,
+          checked: `<el-check-tag :checked="checked1" type="primary" @change="onChange1"> Tag 1 </el-check-tag>`,
+        },
+      };
+    },
+    methods: {
+      capitalize(value: string): string {
+        const text = String(value);
+
+        return text.charAt(0).toUpperCase() + text.slice(1);
+      },
+    },
+  });
+</script>