@timus-networks/theme 2.0.0 → 2.0.2

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

@@ -0,0 +1,193 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">DatePicker</h1>
+    <p>Use Date Picker for date input.</p>
+
+    <el-card>
+      <template #header>Enter Date</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Basic date picker measured by 'day'. The measurement is determined by the <el-text tag="mark">type</el-text> attribute. You can enable quick options via
+          <el-text tag="mark">shortcuts</el-text> property. The disabled date is set by <el-text tag="mark">disabledDate</el-text>, which is a function.
+        </p>
+        <div class="flex gap-7.5">
+          <el-form label-position="top" size="mini">
+            <div class="el-form-items">
+              <el-form-item label="Sizes">
+                <el-radio-group v-model="size" aria-label="size control" size="mini">
+                  <el-radio-button v-for="item of sizes" :key="item" :value="item">{{ item }}</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="Date Type">
+                <el-radio-group v-model="type" aria-label="size control" size="mini">
+                  <el-radio-button value="date">Date</el-radio-button>
+                  <el-radio-button value="datetime">DateTime</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+        <section class="flex flex-col gap-4">
+          <div class="flex gap-7.5">
+            <el-date-picker v-model="value" :type="type" placeholder="Pick a day" :size="size" />
+            <el-date-picker v-model="value" :type="type" placeholder="Pick a day" :disabled-date="disabledDate" :shortcuts="shortcuts" :size="size" />
+          </div>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Other measurements</template>
+      <div class="flex flex-col gap-7.5">
+        <p>You can choose week, month, year or multiple dates by extending the standard date picker component.</p>
+        <section class="flex flex-col gap-4">
+          <el-form label-position="top">
+            <div class="el-form-items">
+              <el-form-item label="Dates">
+                <el-date-picker v-model="multiple_value" type="dates" placeholder="Pick one or more dates" />
+              </el-form-item>
+              <el-form-item label="Month">
+                <el-date-picker v-model="value" type="month" placeholder="Pick a month" />
+              </el-form-item>
+              <el-form-item label="Year">
+                <el-date-picker v-model="value" type="year" placeholder="Pick a year" />
+              </el-form-item>
+            </div>
+            <div class="el-form-items">
+              <el-form-item label="Week">
+                <el-date-picker v-model="value" type="week" format="[Week] ww" placeholder="Pick a week" />
+              </el-form-item>
+              <el-form-item label="Months">
+                <el-date-picker v-model="multiple_value" type="months" placeholder="Pick one or more months" />
+              </el-form-item>
+              <el-form-item label="Years">
+                <el-date-picker v-model="multiple_value" type="years" placeholder="Pick one or more years" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.types" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Range Picker</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Picking a date range is supported. When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently,
+          you can use the <el-text tag="mark">unlink-panels</el-text> attribute. You can set <el-text tag="mark">daterange, monthrange</el-text> or
+          <el-text tag="mark">yearrange</el-text> to range picker.
+        </p>
+        <el-form label-position="top" size="mini">
+          <div class="el-form-items">
+            <el-form-item label="Sizes">
+              <el-radio-group v-model="size" aria-label="size control" size="mini">
+                <el-radio-button v-for="item of sizes" :key="item" :value="item">{{ item }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="Date Type">
+              <el-radio-group v-model="range_type" aria-label="size control" size="mini">
+                <el-radio-button value="daterange">Date</el-radio-button>
+                <el-radio-button value="datetimerange">DateTime</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+        </el-form>
+        <section class="flex flex-col gap-4">
+          <div class="flex flex-col gap-7.5">
+            <el-form label-position="top" class="grid grid-cols-2">
+              <el-form-item label="Date Range">
+                <el-date-picker v-model="range_value" :type="range_type" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size" />
+              </el-form-item>
+              <el-form-item label="Date Range With Links">
+                <el-date-picker
+                  v-model="range_value"
+                  :type="range_type"
+                  range-separator="To"
+                  start-placeholder="Start date"
+                  end-placeholder="End date"
+                  :size="size"
+                  :shortcuts="shortcuts"
+                  unlink-panels
+                />
+              </el-form-item>
+              <el-form-item label="Month Range">
+                <el-date-picker
+                  v-model="range_value"
+                  type="monthrange"
+                  range-separator="To"
+                  start-placeholder="Start date"
+                  end-placeholder="End date"
+                  :size="size"
+                  :shortcuts="shortcuts"
+                  unlink-panels
+                />
+              </el-form-item>
+              <el-form-item label="Year Range">
+                <el-date-picker
+                  v-model="range_value"
+                  type="yearrange"
+                  range-separator="To"
+                  start-placeholder="Start date"
+                  end-placeholder="End date"
+                  :size="size"
+                  :shortcuts="shortcuts"
+                  unlink-panels
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+        </section>
+      </div>
+      <template #footer>
+        <el-scrollbar><html-encode :tag="snippets.ranges" /></el-scrollbar>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const size = ref('medium');
+  const type = ref<'date' | 'datetime'>('date');
+  const range_type = ref<'daterange' | 'datetimerage'>('daterange');
+  const multiple_value = ref([]);
+  const range_value = ref([]);
+  const value = ref('');
+  const sizes = ref<Array<'default' | 'large' | 'medium' | 'small' | 'mini'>>(['default', 'large', 'medium', 'small', 'mini']);
+  const shortcuts = [
+    {
+      text: 'Today',
+      value: new Date(),
+    },
+    {
+      text: 'Yesterday',
+      value: () => {
+        const date = new Date();
+
+        date.setTime(date.getTime() - 3600 * 1000 * 24);
+
+        return date;
+      },
+    },
+    {
+      text: 'A week ago',
+      value: () => {
+        const date = new Date();
+
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+
+        return date;
+      },
+    },
+  ];
+  const disabledDate = (time: Date) => time.getTime() > Date.now();
+  const snippets = ref({
+    basic: `<el-date-picker v-model="value" type="date" placeholder="Pick a day" size="large" />`,
+    types: `<el-date-picker v-model="value" type="month" placeholder="Pick a month" />`,
+    ranges: `<el-date-picker v-model="range_value" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
+`,
+  });
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Description - (Coding Not Started)</h1>
+    <p>Display multiple fields in list form.</p>
+
+    <el-card>
+      <template #header>Basic usage</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          This element displays information in a label-value combination format. By default, it has three columns, with both the label and value shown in the same
+          <span class="comment">&lt;td&gt;</span> element. We will use this format on the
+          <el-link href="https://manage-st01-us-01.timusnetworks.com/devices/VDct5ZEBmELnuk3BPsBt" target="_blank">Device Page</el-link> and
+          <el-link href="https://manage-st01-us-01.timusnetworks.com/sites/1988">Site Information Page</el-link>.
+        </p>
+        <div class="flex gap-7.5">
+          <el-radio-group v-model="size" size="mini">
+            <el-radio-button plain value="default">Default</el-radio-button>
+            <el-radio-button plain value="large">Large</el-radio-button>
+            <el-radio-button plain value="medium">Medium</el-radio-button>
+            <el-radio-button plain value="small">Small</el-radio-button>
+            <el-radio-button plain value="mini">Mini</el-radio-button>
+          </el-radio-group>
+          <el-select v-model="column_count" class="!w-32" size="mini">
+            <el-option v-for="index of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" :key="index" :value="index" />
+          </el-select>
+        </div>
+        <section class="flex gap-7.5">
+          <el-descriptions :size="size" :column="column_count">
+            <el-descriptions-item label="Username:">kooriookami</el-descriptions-item>
+            <el-descriptions-item label="Telephone:">18100000000</el-descriptions-item>
+            <el-descriptions-item label="Place:">Suzhou</el-descriptions-item>
+            <el-descriptions-item label="Remarks:"> <el-tag size="small">School</el-tag> </el-descriptions-item>
+            <el-descriptions-item label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </el-descriptions-item>
+          </el-descriptions>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Seperated Columns</template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          When added border tag to code, it will splits labels and values each other. So this way all items has their own <span class="comment">&lt;td&gt;</span> tag. We will use
+          this format on the <el-link href="https://manage-st01-us-01.timusnetworks.com/devices/VDct5ZEBmELnuk3BPsBt" target="_blank">Device Page</el-link> and
+          <el-link href="https://manage-st01-us-01.timusnetworks.com/sites/1988">Site Information Page</el-link>.
+        </p>
+        <div class="flex gap-7.5">
+          <el-radio-group v-model="size" size="mini">
+            <el-radio-button plain value="default">Default</el-radio-button>
+            <el-radio-button plain value="large">Large</el-radio-button>
+            <el-radio-button plain value="medium">Medium</el-radio-button>
+            <el-radio-button plain value="small">Small</el-radio-button>
+            <el-radio-button plain value="mini">Mini</el-radio-button>
+          </el-radio-group>
+          <el-select v-model="column_count" class="!w-32" size="mini">
+            <el-option v-for="index of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" :key="index" :value="index" />
+          </el-select>
+        </div>
+        <section class="flex gap-7.5">
+          <el-descriptions title="Seperated Columns" border :size="size" :column="column_count">
+            <el-descriptions-item label="Username:">kooriookami</el-descriptions-item>
+            <el-descriptions-item label="Telephone:">18100000000</el-descriptions-item>
+            <el-descriptions-item label="Place:">Suzhou</el-descriptions-item>
+            <el-descriptions-item label="Remarks:">
+              <el-tag size="small">School</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </el-descriptions-item>
+          </el-descriptions>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const size = ref('default');
+  const column_count = ref(3);
+  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>

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

@@ -0,0 +1,79 @@
+<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> Basic usage </template>
+      <div class="flex flex-col gap-3 items-start">
+        <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 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>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useZIndex } from 'element-plus';
+  import { ElMessageBox } from '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>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Dropdown</h1>
+    <p>Toggleable menu for displaying lists of links and actions.</p>
+
+    <el-card>
+      <template #header> Basic </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Hover on the dropdown menu to unfold it for more actions. The triggering element is rendered by the default <el-text tag="mark">slot</el-text>, and the
+          <el-text tag="mark">dropdown</el-text> part is rendered by the slot named dropdown. By default, dropdown list shows when you hover on the triggering element without
+          having to click it.
+        </p>
+        <div class="flex gap-2">
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              Dropdown List
+              <el-icon class="el-icon--right">
+                <ElIconArrowDown />
+              </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="item of [1, 2, 3, 4, 5]" :key="item" :disabled="item === 4" :divided="item === 5">Action {{ item }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Placement</h2>
+          <p>Support 6 placements. Set <el-text tag="mark">placement</el-text> property to make dropdown appear in different locations.</p>
+        </div>
+      </template>
+      <div class="flex flex-col gap-7.5">
+        <el-radio-group v-model="placement_selected" size="mini">
+          <el-radio-button v-for="place of placement_list" :key="place" :value="place">{{ place }}</el-radio-button>
+        </el-radio-group>
+        <el-dropdown :placement="placement_selected">
+          <span class="el-dropdown-link">
+            Dropdown List
+            <el-icon class="el-icon--right">
+              <ElIconArrowDown />
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item of [1, 2, 3, 4, 5]" :key="item" :disabled="item === 4" :divided="item === 5">Action {{ item }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Triggering element</h2>
+          <p>
+            Use the button to trigger the dropdown list. Use split-button to split the triggering element into a button group with the left button being a normal button and right
+            one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class divider to item four.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-7.5">
+        <el-dropdown>
+          <el-button type="primary">
+            Dropdown List<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item of [1, 2, 3, 4, 5]" :key="item" :disabled="item === 4" :divided="item === 5">Action {{ item }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <el-dropdown split-button @click="handleClick">
+          <span class="el-dropdown-link"> Dropdown List </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item of [1, 2, 3, 4, 5]" :key="item" :disabled="item === 4" :divided="item === 5">Action {{ item }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>How to trigger</h2>
+          <p>Click the triggering element or hover on it. Use the attribute <el-text tag="mark">trigger</el-text>. By default, it is <el-text tag="mark">hover</el-text>.</p>
+        </div>
+      </template>
+      <div class="flex flex-col gap-7.5">
+        <el-radio-group v-model="trigger_selected" size="mini">
+          <el-radio-button v-for="trigger of trigger_list" :key="trigger" :value="trigger">{{ trigger }}</el-radio-button>
+        </el-radio-group>
+        <el-dropdown :trigger="trigger_selected">
+          <el-button type="primary">
+            Dropdown List<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item of [1, 2, 3, 4, 5]" :key="item" :disabled="item === 4" :divided="item === 5">Action {{ item }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Sizes</h2>
+          <p>
+            Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with
+            large, default or small.
+          </p>
+        </div>
+      </template>
+      <div class="flex flex-col gap-7.5">
+        <el-radio-group v-model="size_selected" size="mini">
+          <el-radio-button v-for="size of size_list" :key="size" :value="size">{{ size }}</el-radio-button>
+        </el-radio-group>
+        <el-dropdown :size="size_selected" split-button type="primary" trigger="click">
+          {{ size_selected }}
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item of [1, 2, 3, 4, 5]" :key="item" :disabled="item === 4" :divided="item === 5">Action {{ item }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElIcon } from 'element-plus';
+
+  const placement_list = ref(['top-start', 'top', 'top-end', 'bottom-start', 'bottom', 'bottom-end']);
+  const placement_selected = ref('top-start');
+  const trigger_list = ref(['hover', 'click', 'contextmenu']);
+  const trigger_selected = ref('click');
+  const size_list = ref(['default', 'large', 'medium', 'small', 'mini']);
+  const size_selected = ref('default');
+  const snippets = ref({
+    basic: `<el-link href="https://element-plus.org" target="_blank" type="secondary">default</el-link>`,
+    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>`,
+  });
+  const handleClick = () => {
+    alert('button click');
+  };
+</script>