@timus-networks/theme 2.0.16 → 2.1.3

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

@@ -0,0 +1,235 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Buttons</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. Button 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">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size">{{ capitalize(size) }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :size=&quot;small&quot;&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Rounded </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          A rounded button in Element Plus features slightly curved corners, providing a softer and more modern appearance to your UI elements. To apply it add
+          <el-text tag="mark">round</el-text> to button
+        </p>
+        <div class="flex gap-4">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" round>{{ capitalize(size) }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button round&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Colors </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The type prop in Element Plus Button allows you to select from predefined styles such as
+          <el-text tag="mark">'primary', 'secondary', 'neutral', 'success', 'warning', 'info', and 'danger'</el-text> to visually distinguish buttons based on their purpose and
+          importance within your application.
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(color, index) of colors" :key="color + index" :type="color">{{ color }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :type=&quot;success&quot;&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Outline / Plain </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The plain prop in Element Plus Button creates a button with a transparent background, offering a subtle and minimalistic look. Add
+          <el-text tag="mark">plain</el-text> to the button to make it outlined."
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(color, index) of colors" :key="color + index" :type="color" plain>{{ color }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button plain&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Ghost / Text </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The plain prop in Element Plus Button creates a button with a transparent background, offering a subtle and minimalistic look. Add <el-text tag="mark">text</el-text>
+          to the button to make it ghost."
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(color, index) of colors" :key="color + index" :type="color" text>{{ color }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button text&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Disabled</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The <code><el-text tag="mark">disabled</el-text></code> attribute determines if the button is disabled. Use disabled attribute to determine whether a button is disabled.
+          It accepts a Boolean value.
+        </p>
+        <div class="flex flex-col gap-4">
+          <el-radio-group v-model="active_color" size="mini">
+            <el-radio-button v-for="color of colors" :key="color" :value="color">{{ color }}</el-radio-button>
+          </el-radio-group>
+          <div class="flex gap-4 flex-wrap">
+            <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled :type="active_color">{{ capitalize(size) }}</el-button>
+          </div>
+          <div class="flex gap-4 flex-wrap">
+            <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled plain :type="active_color">{{ capitalize(size) }}</el-button>
+          </div>
+          <div class="flex gap-4 flex-wrap">
+            <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled text :type="active_color">{{ capitalize(size) }}</el-button>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :size=&quot;small&quot;&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Icon Button </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Use <el-text tag="mark">icons</el-text> to add more meaning to Button. You can use icon alone to save some space, or use it with text. Use the icon attribute to add icon.
+          You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an
+          <span class="font-medium">&lt;i &gt;</span> tag. Custom icons can be used as well.
+        </p>
+        <div class="flex gap-4">
+          <el-button :icon="ElIconEdit" />
+          <el-button :icon="ElIconShare" />
+          <el-button round :icon="ElIconShare" />
+          <el-button round plain :icon="ElIconShare" />
+          <el-button :icon="ElIconDelete" size="small" type="danger" />
+          <el-button :icon="ElIconDelete" size="mini" type="danger" />
+          <el-button :icon="ElIconSearch">Search</el-button>
+          <el-button>
+            Upload<el-icon class="el-icon--right"><ElIconUpload /></el-icon>
+          </el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :icon=&quot;ElIconShare&quot; /&gt;</el-tag>
+          <el-tag type="neutral"> &lt;el-button&gt;Upload&lt;el-icon class=&quot;el-icon--right&quot;&gt;&lt;ElIconUpload /&gt;&lt;/el-icon&gt;&lt;/el-button&gt; </el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Button Group </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Displayed as a button group, can be used to group a series of similar operations. Use tag <el-text tag="mark">&lt;el-button-group&gt;</el-text> to group your buttons.
+        </p>
+        <div class="flex flex-col gap-7.5">
+          <el-radio-group v-model="active_color" size="mini">
+            <el-radio-button v-for="color of colors" :key="color" :value="color">{{ color }}</el-radio-button>
+          </el-radio-group>
+          <el-button-group>
+            <el-button disabled :type="active_color" :icon="ElIconArrowLeft">Previous Page</el-button>
+            <el-button disabled :type="active_color" :icon="ElIconArrowLeft">Previous Page</el-button>
+            <el-button disabled :type="active_color">
+              Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+            </el-button>
+          </el-button-group>
+          <el-button-group>
+            <el-button :type="active_color" :icon="ElIconArrowLeft">Previous Page</el-button>
+            <el-button :type="active_color" :icon="ElIconArrowLeft">Previous Page</el-button>
+            <el-button :type="active_color">
+              Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+            </el-button>
+          </el-button-group>
+        </div>
+      </div>
+
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Tag </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>You can custom element <el-text tag="mark">tag</el-text>, For example button, div, a, router-link, nuxt-link.</p>
+        <div class="flex gap-4">
+          <el-button type="" tag="div" role="button" tabindex="0">div</el-button>
+          <el-button type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank" rel="noopener noreferrer"> a </el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button tag=&quot;div&quot; role=&quot;button&quot; tabindex=&quot;0&quot;&gt;div&lt;/el-button&gt;</el-tag>
+          <el-tag type="neutral">
+            &lt;el-button type=&quot;primary&quot; tag=&quot;a&quot; href=&quot;https://github.com/element-plus/element-plus&quot; target=&quot;_blank&quot; rel=&quot;noopener
+            noreferrer&quot; &gt; a &lt;/el-button&gt;
+          </el-tag>
+        </code>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusButton",
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["default", "primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      snippets: {
+        group: `
+            <el-button-group>
+              <el-button type="primary" :icon="ElIconArrowLeft">Previous Page</el-button>
+              <el-button type="primary">
+                Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+              </el-button>
+            </el-button-group>`
+      },
+      active_color: "default"
+    };
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+  }
+});
+</script>

package/dist/runtime/components/development/example.button.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    snippets: {
+        group: string;
+    };
+    active_color: string;
+}, {}, {
+    capitalize(value: string): string;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Card - (Needs Acceptance)</h1>
+    <p>Integrate information in a card container.</p>
+
+    <el-card>
+      <template #header>
+        <h2>Basic usage</h2>
+      </template>
+      <section class="flex flex-col gap-7.5">
+        <p>
+          Card includes, content and operations. Card is made up of <el-text tag="mark">header</el-text>, <el-text tag="mark">body</el-text> and
+          <el-text tag="mark">footer</el-text>. header and footer are optional, and its content distribution depends on a named slot.
+        </p>
+        <el-card style="max-width: 480px">
+          <template #header>
+            <div class="card-header">
+              <span>Card name</span>
+            </div>
+          </template>
+          <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+          <template #footer>Footer content</template>
+        </el-card>
+      </section>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <h2>Shadow</h2>
+      </template>
+      <section class="flex flex-col gap-7.5">
+        <p>
+          You can define when to show the card shadows The shadow attribute determines when the card shadows are displayed. It can be <el-text tag="mark">always</el-text>,
+          <el-text tag="mark">hover</el-text> or <el-text tag="mark">never</el-text>.
+        </p>
+        <div class="flex gap-7.5">
+          <el-card style="width: 480px" shadow="always">Always</el-card>
+          <el-card style="width: 480px" shadow="hover">Hover</el-card>
+          <el-card style="width: 480px" shadow="never">Never</el-card>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.shadow" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const snippets = ref({
+    basic: `
+      <el-card style="max-width: 480px">
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+          </div>
+        </template>
+        <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+        <template #footer>Footer content</template>
+      </el-card>`,
+    shadow: `
+      <el-card style="width: 480px" shadow="always">Always</el-card>
+      <el-card style="width: 480px" shadow="hover">Hover</el-card>
+      <el-card style="width: 480px" shadow="never">Never</el-card>
+    `,
+  });
+</script>

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

@@ -0,0 +1,176 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Select</h1>
+    <p>When there are plenty of options, use a drop-down menu to display and select desired ones.</p>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default size is Large. Checkbox 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-checkbox v-for="(size, index) of sizes" :key="index" v-model="value" :label="`${capitalize(size)}`" :size="size" />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.sizes" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Disabled state for checkbox. Set the <el-text tag="mark">disabled</el-text> attribute.</p>
+        <div class="flex gap-4 items-start">
+          <el-checkbox v-model="value">Not Disabled Default</el-checkbox>
+          <el-checkbox v-model="value" disabled>Disabled Default</el-checkbox>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.disabled" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Checkbox group </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
+          <el-text tag="mark">checkbox-group</el-text> element can manage multiple checkboxes in one group by using v-model which is bound as an
+          <el-text tag="mark">Array</el-text>. Inside the el-checkbox element, value is the value of the checkbox. If no content is nested in that tag, label will be rendered as
+          the description following the button of the checkbox. value also corresponds with the element values in the array. It is selected if the specified value exists in the
+          array, and vice versa.
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox-group v-model="checkList" class="flex gap-3">
+            <el-checkbox label="Option A" value="Value A" />
+            <el-checkbox label="Option B" value="Value B" />
+            <el-checkbox label="Option C" value="Value C" />
+            <el-checkbox label="disabled" value="Value disabled" disabled />
+            <el-checkbox label="selected and disabled" value="Value selected and disabled" disabled />
+          </el-checkbox-group>
+          Model: {{ checkList }}
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Indeterminate </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>The <el-text tag="mark">indeterminate</el-text> property can help you to achieve a 'check all' effect.</p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" disabled @change="handleCheckAllChange"> Check all </el-checkbox>
+          <el-checkbox-group v-model="checkedCities" class="flex gap-3" @change="handleCheckedCitiesChange">
+            <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+              {{ city }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Minimum / Maximum items checked </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>The <el-text tag="mark">min</el-text> and <el-text tag="mark">max</el-text> properties can help you to limit the number of checked items.</p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox-group v-model="checkedCities" :min="1" :max="2" class="gap-3">
+            <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
+              {{ city }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Button style </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Checkbox with button styles. You just need to change el-checkbox element into el-checkbox-button element. We also provide <el-text tag="mark">size</el-text> attribute.
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox-group v-for="(size, index) of sizes" :key="index" v-model="checkedCities" :size="size">
+            <el-checkbox-button v-for="(city, i) in cities" :key="city" :value="city" :disabled="[0, 1, 3].includes(i)">
+              {{ city }}
+            </el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With borders </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>The border attribute adds a border to Checkboxes.</p>
+        <div class="flex flex-col gap-4 items-start">
+          <el-checkbox v-for="(size, index) of sizes" :key="index" v-model="value" border :label="`${capitalize(size)}`" :size="size" :disabled="[1, 2, 3].includes(index)" />
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.indeterminate" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusCheckbox",
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      value: "",
+      disabled: true,
+      snippets: {
+        sizes: `<el-checkbox v-model="value" label="Option label" size="large" />`,
+        disabled: `<el-checkbox v-model="value" label="Option label" disabled />`,
+        group: `
+            <el-checkbox-group v-model="checkList" class="flex gap-3">
+              <el-checkbox label="Option A" value="Value A" />
+              <el-checkbox label="Option B" value="Value B" />
+            </el-checkbox-group>
+          `,
+        indeterminate: ` <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"> Check all </el-checkbox> `,
+        min_max: ``
+      },
+      checkAll: false,
+      checkList: ["Value selected and disabled", "Value A"],
+      isIndeterminate: true,
+      checkedCities: ["Shanghai", "Beijing"],
+      cities: ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"]
+    };
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    },
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    }
+  }
+});
+</script>

package/dist/runtime/components/development/example.checkbox.vue.d.ts

@@ -0,0 +1,24 @@
+import type { CheckboxValueType } from 'element-plus';
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    value: string;
+    disabled: boolean;
+    snippets: {
+        sizes: string;
+        disabled: string;
+        group: string;
+        indeterminate: string;
+        min_max: string;
+    };
+    checkAll: boolean;
+    checkList: string[];
+    isIndeterminate: boolean;
+    checkedCities: string[];
+    cities: string[];
+}, {}, {
+    capitalize(value: string): string;
+    handleCheckedCitiesChange(value: CheckboxValueType[]): void;
+    handleCheckAllChange(val: CheckboxValueType): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Collapse - (Coding Not Started)</h1>
+    <p>Display prompt information for mouse hover.</p>
+
+    <el-card>
+      <template #header>Basic usage</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Tooltip has 9 placements. Use attribute <el-text tag="mark">content</el-text> to set the display content when hover. The attribute
+          <el-text tag="mark"> placement </el-text> determines the position of the tooltip. Its value is <el-text tag="mark">[orientation]-[alignment]</el-text> with four
+          orientations <el-text tag="mark">top, left, right, bottom</el-text> and three alignments <el-text tag="mark">start, end, null, and the default</el-text> alignment is
+          null. Take <el-text tag="mark">placement="left-end"</el-text> for example, Tooltip will display on the left of the element which you are hovering and the bottom of the
+          tooltip aligns with the bottom of the element. attribute for display an image
+        </p>
+        <section class="flex gap-7.5">sss</section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const snippets = ref({
+    basic: `
+      <el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+        <el-button>left-end</el-button>
+      </el-tooltip>`,
+    content: `
+      <el-tooltip placement="top">
+        <template #content> multiple lines<br />second line </template>
+        <el-button>Top center</el-button>
+      </el-tooltip>
+    `,
+  });
+</script>