@timus-networks/theme 2.0.1 → 2.0.2

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

@@ -1,237 +0,0 @@
-<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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Sizes</h2>
-          <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>
-      </template>
-      <div class="flex gap-4">
-        <el-button v-for="(size, index) of sizes" :key="size + index" :size="size">{{ capitalize(size) }}</el-button>
-      </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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Rounded</h2>
-          <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>
-      </template>
-      <div class="flex gap-4">
-        <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" round>{{ capitalize(size) }}</el-button>
-      </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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Colors</h2>
-          <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>
-      </template>
-      <div class="flex gap-4 flex-wrap">
-        <el-button v-for="(color, index) of colors" :key="color + index" :type="color">{{ color }}</el-button>
-      </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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Outline / Plain</h2>
-          <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>
-      </template>
-      <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>
-      <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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Ghost / Text</h2>
-          <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>
-      </template>
-      <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>
-      <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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Disabled</h2>
-          <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>
-      </template>
-      <div class="flex flex-col gap-4">
-        <div class="flex gap-4 flex-wrap">
-          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled type="primary">{{ 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" type="primary" disabled plain>{{ 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" type="primary" disabled text>{{ 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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Icon Button</h2>
-          <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>
-      </template>
-      <div class="flex gap-4">
-        <el-button :icon="ElIconEdit" />
-        <el-button :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 class="isax-add-circle">Search</el-button>
-        <el-button>
-          Upload<el-icon class="el-icon--right"><ElIconUpload /></el-icon>
-        </el-button>
-      </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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Button Group</h2>
-          <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-groupn&gt;</el-text> to group your buttons.
-          </p>
-        </div>
-      </template>
-      <div class="flex gap-4">
-        <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>
-      </div>
-      <template #footer>
-        <html-encode :tag="snippets.group" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Tag</h2>
-          <p>You can custom element <el-text tag="mark">tag</el-text>, For example button, div, a, router-link, nuxt-link.</p>
-        </div>
-      </template>
-      <div class="flex gap-4">
-        <el-button 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>
-      <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>`
-      }
-    };
-  },
-  methods: {
-    capitalize(value) {
-      const text = String(value);
-      return text.charAt(0).toUpperCase() + text.slice(1);
-    }
-  }
-});
-</script>

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

@@ -1,190 +0,0 @@
-<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>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Sizes</h2>
-          <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>
-      </template>
-      <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>
-      <template #footer>
-        <html-encode :tag="snippets.sizes" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Disabled</h2>
-          <p>Disabled state for checkbox. Set the <el-text tag="mark">disabled</el-text> attribute.</p>
-        </div>
-      </template>
-      <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>
-      <template #footer>
-        <html-encode :tag="snippets.disabled" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Checkbox group</h2>
-          <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>
-      </template>
-      <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>
-      <template #footer>
-        <html-encode :tag="snippets.group" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Indeterminate</h2>
-          <p>The <el-text tag="mark">indeterminate</el-text> property can help you to achieve a 'check all' effect.</p>
-        </div>
-      </template>
-      <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>
-      <template #footer>
-        <html-encode :tag="snippets.indeterminate" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Minimum / Maximum items checked</h2>
-          <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>
-      </template>
-      <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>
-      <template #footer>
-        <html-encode :tag="snippets.indeterminate" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>Button style</h2>
-          <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>
-      </template>
-      <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>
-      <template #footer>
-        <html-encode :tag="snippets.indeterminate" />
-      </template>
-    </el-card>
-
-    <el-card>
-      <template #header>
-        <div class="flex flex-col gap-3 items-start">
-          <h2>With borders</h2>
-          <p>The border attribute adds a border to Checkboxes.</p>
-        </div>
-      </template>
-      <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>
-      <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>