@berqnet/theme 0.0.0-stage → 2.4.291

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

@@ -0,0 +1,70 @@
+import type { CheckboxValueType } from 'element-plus';
+type Option = {
+    id: number;
+    label: string;
+    desc: string;
+};
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    value: string;
+    model: never[];
+    multiple: {
+        one: never[];
+        two: never[];
+        three: never[];
+        four: never[];
+    };
+    options: ({
+        value: string;
+        label: string;
+        disabled?: undefined;
+    } | {
+        value: string;
+        label: string;
+        disabled: boolean;
+    })[];
+    snippets: {
+        sizes: string;
+        disableOptions: string;
+        disableSelect: string;
+        clearable: string;
+        multiple: string;
+        custom: string;
+        withHeader: string;
+        withFooter: string;
+        withGroup: string;
+        filter: string;
+        customTag: string;
+        customLabel: string;
+    };
+    checkAll: boolean;
+    indeterminate: boolean;
+    valueChecboxed: CheckboxValueType[];
+    footer: {
+        isAdding: boolean;
+        optionName: string;
+    };
+    groupOptions: {
+        label: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+    }[];
+    newItemsValues: string[];
+    objectOptions: Option[];
+    objectSelected: Option;
+    coloredOptions: {
+        value: string;
+        label: string;
+    }[];
+    colorSelected: never[];
+}, {}, {
+    capitalize(value: string): string;
+    handleCheckAll(val: CheckboxValueType): void;
+    onAddOption(): void;
+    onConfirm(): void;
+    clear(): 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.sidebar.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Menu</h1>
+    <p>Menu that provides navigation for your website.</p>
+
+    <el-card>
+      <template #header> Sidebar </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Vertical <el-text tag="mark">Menu</el-text> with sub-menus. You can use the <el-text tag="mark">el-menu-item-group</el-text> component to create a
+          <span class="font-medium">menu group</span>, and the name of the group is determined by the title prop or a named slot.
+        </p>
+        <div class="flex flex-col gap-4 items-start">
+          {{ currentRoute }}
+          <el-menu :default-active="currentRoute.path" class="w-[270px]" :router="true" @open="handleOpen" @close="handleClose">
+            <el-menu-item index="/" class="isax-grid-3">Dashboard</el-menu-item>
+            <el-menu-item index="/theme" class="isax-designtools">Theme</el-menu-item>
+            <el-menu-item index="/users" class="isax-profile-circle">User & Teams</el-menu-item>
+            <el-menu-item index="/devices" class="isax-monitor-mobbile">Devices</el-menu-item>
+            <el-menu-item index="/sites" class="isax-driver-2">Sites</el-menu-item>
+            <el-sub-menu index="1">
+              <template #title><i class="isax-key-square" /><span>Rules</span></template>
+              <el-menu-item index="/rules/firewall">Firewall</el-menu-item>
+              <el-menu-item index="/rules/routes">Routes</el-menu-item>
+              <el-menu-item index="/rules/forwarding">Forwarding</el-menu-item>
+              <el-menu-item index="/rules/acls">Access Control List</el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu index="2">
+              <template #title><i class="isax-shield" /><span>Zero Trust Security</span></template>
+              <el-menu-item index="/ztna/dashboard">Dashboard</el-menu-item>
+              <el-menu-item index="/ztna/behavior-detection">Behaviors</el-menu-item>
+              <el-menu-item index="/ztna/device-posture-check">Device Posture Checks</el-menu-item>
+              <el-menu-item index="/ztna/behavior-detection">User Sign-In Policies</el-menu-item>
+              <el-menu-item index="/ztna/behavior-detection">Admin Sign-In Policies</el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu index="3">
+              <template #title><i class="isax-folder-open" /><span>Insights</span></template>
+              <el-menu-item index="/insights/alerts">Alerts</el-menu-item>
+              <el-menu-item index="/ztna/dashboard">Traffic Logs</el-menu-item>
+              <el-menu-item index="/ztna/dashboard">Events</el-menu-item>
+              <el-menu-item index="/insights/blocked-ips">Blocked IP Addresses</el-menu-item>
+              <el-menu-item index="/insights/signed-logs">"Signed Logs"</el-menu-item>
+              <el-menu-item index="/insights/reports">Automated Reports</el-menu-item>
+              <el-menu-item index="/insights/tracker">Productivity Reports</el-menu-item>
+              <el-menu-item index="/insights/dpc-reports">Device Posture Reports</el-menu-item>
+            </el-sub-menu>
+            <el-sub-menu index="4">
+              <template #title><i class="isax-setting-2" /><span>Settings</span></template>
+              <el-menu-item index="/settings/captive-portals">Captive Portal</el-menu-item>
+              <el-menu-item index="/settings/integrations">Integrations</el-menu-item>
+              <el-menu-item index="/settings/configuration">Configurations</el-menu-item>
+              <el-menu-item index="/settings/tags">Tags</el-menu-item>
+              <el-menu-item index="/settings/administrators">Administrators</el-menu-item>
+              <el-menu-item index="/settings/organization">Organization</el-menu-item>
+              <el-menu-item index="/settings/downloads">Downloads</el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.sizes" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRoute } from 'nuxt/app';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+
+  const route = useRoute();
+
+  const currentRoute = computed(() => ({
+    path: route.path,
+    fullPath: route.fullPath,
+    name: route.name,
+    params: route.params,
+    query: route.query,
+  }));
+
+  const handleOpen = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath);
+  };
+
+  const handleClose = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath);
+  };
+
+  const snippets = ref({
+    sizes: `
+      <el-menu :default-active="currentRoute.path" class="w-[270px]" :router="true" @open="handleOpen" @close="handleClose">
+        <el-sub-menu index="4">
+          <template #title><i class="isax-setting-2" /><span>Settings</span></template>
+          <el-menu-item index="/settings/captive-portals">Captive Portal</el-menu-item>
+          <el-menu-item index="/settings/integrations">Integrations</el-menu-item>
+          <el-menu-item index="/settings/configuration">Configurations</el-menu-item>
+          <el-menu-item index="/settings/tags">Tags</el-menu-item>
+          <el-menu-item index="/settings/administrators">Administrators</el-menu-item>
+          <el-menu-item index="/settings/organization">Organization</el-menu-item>
+          <el-menu-item index="/settings/downloads">Downloads</el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    `,
+  });
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Static - (Coding Not Started)</h1>
+    <p>Display statistics.</p>
+
+    <el-card>
+      <template #header>Basic usage</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          To highlight a number or a group of numbers, such as statistical value, amount, and ranking, you can add elements such as icon and unit before and after the number and
+          title. And use vueuse to add animated transitions to value.
+        </p>
+        <section class="flex gap-7.5">
+          <el-statistic :value="138">
+            <template #title>
+              <div style="align-items: center; display: inline-flex">
+                Ratio of men to women
+                <el-icon style="margin-left: 4px" :size="12">
+                  <ElIconMale />
+                </el-icon>
+              </div>
+            </template>
+            <template #suffix>/100</template>
+          </el-statistic>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Male as ElIconMale } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const snippets = ref({
+    basic: `
+      <el-statistic :value="138">
+        <template #title>
+          <div style="align-items: center; display: inline-flex">
+            Ratio of men to women
+            <el-icon style="margin-left: 4px" :size="12">
+              <ElIconMale />
+            </el-icon>
+          </div>
+        </template>
+        <template #suffix>/100</template>
+      </el-statistic>
+    `,
+  });
+</script>

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

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Switch</h1>
+    <p>Switch is used for switching between two opposing states.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Bind <el-text tag="mark">v-model</el-text> to a Boolean typed variable. The <el-text tag="mark">--el-switch-on-color</el-text> and
+          <el-text tag="mark">--el-switch-off-color</el-text> CSS variables decides the background color in two states.
+        </p>
+        <div class="flex gap-4">
+          <el-switch v-model="value" />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3">
+        <p>You can set <el-text tag="mark">size</el-text>.</p>
+        <div class="flex flex-row gap-7.5">
+          <div v-for="size of sizes" :key="size" class="flex flex-col items-start border p-4 rounded">
+            <h5 class="font-normal text-neutral-7 grow">{{ size }}</h5>
+            <el-switch v-model="value" :size="size" active-text="Open" inactive-text="Close" />
+          </div>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.sizes" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Text description </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          You can add <el-text tag="mark">active-text</el-text> and <el-text tag="mark">inactive-text</el-text> attribute to show texts. use
+          <el-text tag="mark">inline-prompt</el-text> attribute to control text is displayed inside dot. You can add active-text and inactive-text attribute to show texts.
+        </p>
+        <div class="flex flex-col items-start">
+          <el-switch v-model="value" active-text="Pay by month" inactive-text="Pay by year" />
+          <el-switch v-model="value" inline-prompt width="40" active-text="超出省略" inactive-text="超出省略" />
+          <el-switch v-model="value" width="80" inline-prompt active-text="超出省略" inactive-text="超出省略" />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.text" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Extended value types </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          You can set <el-text tag="mark">active-value</el-text> and <el-text tag="mark">inactive-value</el-text> attributes. They both receive a Boolean, String or Number typed
+          value.
+        </p>
+        <div class="flex items-center gap-4">
+          <el-tooltip :content="'Switch value: ' + custom" placement="top">
+            <el-switch v-model="custom" active-value="100" inactive-value="0" size="default" :active-text="`Value is ${custom}`" />
+          </el-tooltip>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.value" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-3">
+        <p>Adding the disabled attribute <el-text tag="mark">disables</el-text> Switch.</p>
+        <div class="flex items-center gap-4">
+          <el-switch v-model="value" disabled active-text="disabled text" />
+          <el-switch v-model="value" class="ml-2" active-text="disabled text" />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.disable" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const value = ref(true);
+  const custom = ref(100);
+  const sizes = ref(['default', 'large', 'medium', 'small', 'mini']);
+
+  const snippets = ref({
+    basic: `<el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />`,
+    sizes: `<el-switch v-model="value" size="large" />`,
+    text: `
+      <el-switch v-model="value" active-text="Pay by month" inactive-text="Pay by year" />
+      <el-switch v-model="value" inline-prompt width="40" active-text="超出省略" inactive-text="超出省略" />
+      <el-switch v-model="value" width="80" inline-prompt active-text="超出省略" inactive-text="超出省略" />
+    `,
+    value: `
+      <el-tooltip :content="'Switch value: ' + custom" placement="top">
+        <el-switch v-model="custom" active-value="100" inactive-value="0" size="default" :active-text="\`Value is \${custom}\`" />
+      </el-tooltip>
+    `,
+    disable: `<el-switch v-model="value" disabled />`,
+  });
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Tab</h1>
+    <p>Divide data collections which are related yet belong to different types.</p>
+
+    <el-card>
+      <template #header> Basic Tab </template>
+      <div class="flex flex-col gap-7.5 items-start">
+        <p>
+          Basic and concise tabs. Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the value
+          attribute.
+        </p>
+        <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%">
+          <el-tab-pane label="User" name="first">User</el-tab-pane>
+          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+        </el-tabs>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.basic" />
+        </code>
+      </template>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { TabsPaneContext } from 'element-plus';
+  import { ref } from 'vue';
+
+  const activeName = ref('first');
+
+  const handleClick = (tab: TabsPaneContext, event: Event) => {
+    console.log(tab, event);
+  };
+
+  const snippets = ref({
+    basic: `
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+          <el-tab-pane label="User" name="first">User</el-tab-pane>
+          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+        </el-tabs>
+    `,
+  });
+</script>