@timus-networks/theme 2.0.16 → 2.1.3

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

@@ -0,0 +1,151 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Popover</h1>
+    <p>The Element Plus Popover component provides a customizable tooltip that appears when the user clicks or hovers over an element.</p>
+
+    <el-card>
+      <template #header> Usage </template>
+      <div class="flex flex-col gap-4 items-start">
+        <p>
+          Popover is built with <el-text tag="mark">ElTooltip</el-text>. So for some duplicated attributes, please refer to the documentation of Tooltip. The
+          <el-text tag="mark">trigger</el-text> attribute is used to define how popover is triggered: <span class="font-medium">hover, click, focus or contextmenu</span> . If you
+          want to manually control it, you can set <el-text tag="mark">:visible</el-text>.
+        </p>
+        <div class="flex gap-7.5">
+          <el-popover placement="top-start" title="Title" :width="200" trigger="hover" content="this is content, this is content, this is content">
+            <template #reference>
+              <el-button>Hover to activate</el-button>
+            </template>
+          </el-popover>
+
+          <el-popover placement="bottom" title="Title" :width="200" trigger="click" content="this is content, this is content, this is content">
+            <template #reference>
+              <el-button>Click to activate</el-button>
+            </template>
+          </el-popover>
+
+          <el-popover ref="popover" placement="right" title="Title" :width="200" trigger="focus" content="this is content, this is content, this is content">
+            <template #reference>
+              <el-button>Focus to activate</el-button>
+            </template>
+          </el-popover>
+
+          <el-popover ref="popover" title="Title" :width="200" trigger="contextmenu" content="this is content, this is content, this is content">
+            <template #reference>
+              <el-button>contextmenu to activate</el-button>
+            </template>
+          </el-popover>
+
+          <el-popover :visible="visible" placement="bottom" title="Title" :width="200" content="this is content, this is content, this is content">
+            <template #reference>
+              <el-button @click="visible = !visible"> Manual to activate </el-button>
+            </template>
+          </el-popover>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Virtual triggering </template>
+      <div class="flex flex-col gap-4 items-start">
+        <p>
+          Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the triggering element and the content element, you should definitely use
+          the mechanism, normally we use <el-text tag="mark">#reference</el-text> to place our triggering element, with <el-text tag="mark">triggering-element</el-text> API you can
+          set your triggering element anywhere you like, but notice that the triggering element should be an element that accepts
+          <span class="font-medium">mouse and keyboard</span> event.
+        </p>
+        <div class="flex gap-2">
+          <el-button ref="buttonRef" v-click-outside="onClickOutside"> Click me </el-button>
+          <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="With title" virtual-triggering>
+            <span> Some content </span>
+          </el-popover>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.reference" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Nested operation </template>
+      <div class="flex flex-col gap-4 items-start">
+        <p>Of course, you can nest other operations. It's more light-weight than using a dialog.</p>
+        <div class="flex gap-2">
+          <el-popover :visible="visible" placement="top" :width="360">
+            <p>Are you sure to delete this?</p>
+            <div class="flex gap-2 justify-end mt-3">
+              <el-button size="small" text @click="visible = false">cancel</el-button>
+              <el-button size="small" type="primary" @click="visible = false"> confirm </el-button>
+            </div>
+            <template #reference>
+              <el-button @click="visible = true">Delete</el-button>
+            </template>
+          </el-popover>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.nested" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Directive </template>
+      <div class="flex flex-col gap-4 items-start">
+        <p>
+          You can still using popover in directive way but this is <span class="font-medium">not recommended</span> anymore since this makes your application complicated, you may
+          refer to the virtual triggering for more information.
+        </p>
+        <div class="flex gap-2">
+          <el-button v-popover="popoverRef" v-click-outside="onClickOutside"> Click me </el-button>
+          <el-popover ref="popoverRef" trigger="click" title="With title" virtual-triggering persistent>
+            <span> Some content </span>
+          </el-popover>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.directive" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, unref } from 'vue';
+
+  const buttonRef = ref();
+  const popoverRef = ref();
+  const visible = ref(false);
+  const onClickOutside = () => {
+    unref(popoverRef).popperRef?.delayHide?.();
+  };
+  const snippets = {
+    basic: `
+      <el-popover placement="top-start" title="Title" :width="200" trigger="hover" content="this is content, this is content, this is content">
+        <template #reference>
+          <el-button >Hover to activate</el-button>
+        </template>
+      </el-popover>
+    `,
+    reference: `
+      <el-button ref="buttonRef" v-click-outside="onClickOutside"> Click me </el-button>
+
+      <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="With title" virtual-triggering>
+        <span> Some content </span>
+      </el-popover>
+    `,
+    nested: `
+      <el-popover :visible="visible" placement="top" :width="360">
+        <p>Are you sure to delete this?</p>
+        <div class="flex gap-2 justify-end mt-3">
+          <el-button size="small" text @click="visible = false">cancel</el-button>
+          <el-button size="small" type="primary" @click="visible = false"> confirm </el-button>
+        </div>
+        <template #reference>
+          <el-button @click="visible = true">Delete</el-button>
+        </template>
+      </el-popover>
+    `,
+    directive: `
+      <el-button v-popover="popoverRef" v-click-outside="onClickOutside"> Click me </el-button>
+
+      <el-popover ref="popoverRef" trigger="click" title="With title" virtual-triggering persistent>
+        <span> Some content </span>
+      </el-popover>
+    `,
+  };
+</script>

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

@@ -0,0 +1,163 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Radio</h1>
+    <p>Single selection among multiple options.</p>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Radio should not have too many options. Otherwise, use the Select component instead. Creating a radio component is easy, you just need to bind a variable to Radio's
+          <el-text tag="mark">v-model</el-text>. It equals to the value of <el-text tag="mark">value</el-text> of the chosen radio. The type of value is
+          <span class="font-medium">String, Number or Boolean</span>
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-radio-group v-model="value">
+            <el-radio v-for="(size, index) of sizes" :key="index" :value="index" :size="size">Option 1</el-radio>
+          </el-radio-group>
+        </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><el-text tag="mark">disabled</el-text> attribute is used to disable the radio. You just need to add the disabled attribute.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-radio-group v-model="value">
+            <el-radio disabled :value="1" label="Select above to large" />
+            <el-radio disabled :value="2" label="Select medium" />
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.disabled" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Radio group</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Suitable for choosing from some mutually exclusive options. Combine <el-text tag="mark">el-radio-group</el-text> with el-radio to display a radio group. Bind a variable
+          with v-model of el-radio-group element and set label value in el-radio. It also provides <el-text tag="mark">change</el-text> event with the current value as its
+          parameter.
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-radio-group v-model="value">
+            <el-radio :value="1">Option A</el-radio>
+            <el-radio :value="2">Option B</el-radio>
+            <el-radio :value="3">Option C</el-radio>
+            <el-radio :value="4">Option C</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Button style </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>Radio with button styles. You just need to change el-radio element into <el-text tag="mark">el-radio-button</el-text> element. We also provide size attribute.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-select v-model="selected_size" placeholder="Select" style="width: 184px">
+            <el-option v-for="item in ['default', 'large', 'medium', 'small', 'mini']" :key="item" :label="item" :value="item" />
+          </el-select>
+          <el-radio-group v-model="value">
+            <el-radio-button
+              v-for="val of [1, 2, 3, 4]"
+              :key="val"
+              :size="selected_size"
+              label="New York"
+              :value="val"
+              :disabled="[1, 4].includes(Number(value)) && val === Number(value)"
+            />
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.button" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>With borders</template>
+      <div class="flex flex-col gap-3 items-start">
+        <h2>With borders</h2>
+        <p>The <el-text tag="mark">border</el-text> attribute adds a border to Radios.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-radio-group v-for="size of sizes" :key="size" v-model="value">
+            <el-radio v-for="(val, index) of [1, 2]" :key="val" :value="val" :size="size" border :disabled="size === 'large' && val === 2">Option {{ index + 1 }}</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.bordered" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusCheckbox",
+  data() {
+    return {
+      selected_size: "default",
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      value: "",
+      disabled: "",
+      snippets: {
+        sizes: `<el-radio value="value" size="large">Label</el-radio>`,
+        disabled: `<el-radio value="value" label="Label" disabled />`,
+        group: `
+            <el-radio-group v-model="value">
+              <el-radio :value="1">Option A</el-radio>
+              <el-radio :value="2">Option B</el-radio>
+            </el-radio-group>
+          `,
+        button: `
+            <el-radio-group v-model="value">
+              <el-radio-button label="New York" value="ny" />
+              <el-radio-button label="\u0130stanbul" value="ist" />
+            </el-radio-group>
+          `,
+        bordered: `
+            <el-radio-group v-model="value">
+              <el-radio :value="1" border>Option A</el-radio>
+              <el-radio :value="2" border>Option B</el-radio>
+            </el-radio-group>
+          `
+      },
+      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.radio.vue.d.ts

@@ -0,0 +1,25 @@
+import type { CheckboxValueType } from 'element-plus';
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    selected_size: string;
+    sizes: string[];
+    colors: string[];
+    value: string;
+    disabled: string;
+    snippets: {
+        sizes: string;
+        disabled: string;
+        group: string;
+        button: string;
+        bordered: 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;