@timus-networks/theme 2.0.0 → 2.0.1

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

@@ -0,0 +1,190 @@
+<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>

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

@@ -0,0 +1,24 @@
+import type { CheckboxValueType } from '@timus-networks/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<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Dialog</h1>
+    <p>Informs users while preserving the current page state.</p>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Basic usage</h2>
+          <p>
+            Dialog pops up a dialog box, and it's quite customizable. Set <el-text tag="mark">model-value / v-model</el-text> attribute with a Boolean, and Dialog shows when it is
+            true. The Dialog has two parts: <el-text tag="mark">body</el-text> and <el-text tag="mark">footer</el-text>, and the latter requires a
+            <el-text tag="mark">slot</el-text> named <el-text tag="mark">footer</el-text>. The optional <el-text tag="mark">title</el-text> attribute (empty by default) is for
+            defining a title. Finally, this example demonstrates how <el-text tag="mark">before-close</el-text> is used.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-2">
+        <el-button plain @click="dialogVisible = true"> Click to open the Dialog </el-button>
+
+        <el-dialog v-model="dialogVisible" title="Tips" :before-close="handleClose">
+          <span>
+            When enabled, all connections will be terminated and new requests will be denied until lockdown mode is disabled. Are you sure you want to enable the lockdown mode?
+          </span>
+          <template #footer>
+            <el-button plain @click="dialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
+          </template>
+        </el-dialog>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useZIndex } from '@timus-networks/element-plus';
+  import { ElMessageBox } from '@timus-networks/element-plus';
+  import { ref } from 'vue';
+
+  const c = ref(22);
+
+  useZIndex(c);
+
+  const dialogVisible = ref(false);
+  const handleClose = (done: () => void) => {
+    ElMessageBox.confirm('Are you sure to close this dialog?')
+      .then(() => {
+        done();
+      })
+      .catch(() => {
+        // catch error
+      });
+  };
+  const snippets = ref({
+    basic: `
+      <el-button plain @click="dialogVisible = true"> Click to open the Dialog </el-button>
+
+      <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
+        <template #header="{ close, titleId, titleClass }">
+          <div class="my-header">
+            <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
+            <el-button type="danger" @click="close">
+              <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+              Close
+            </el-button>
+          </div>
+        </template>
+        <span>This is a message</span>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="dialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
+          </div>
+        </template>
+      </el-dialog>
+    `,
+    disabled: `<el-link type="secondary" disabled>default</el-link>`,
+    underline: `<el-link :underline="false">Without Underline</el-link>`,
+    icon: `<el-link class="isax-add icon-right">Check</el-link>`,
+  });
+</script>