@berqnet/theme 0.0.0-stage → 2.4.292

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Message</h1>
+    <p>Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Displays at the top, and disappears after 3 seconds. The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You
+          can check the options table below combined with notification doc to understand it. Element Plus has registered a <el-text tag="mark">$message</el-text> method for
+          invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
+        </p>
+        <div class="flex flex-col gap-7.5">
+          <el-radio-group v-model="isPlain" size="mini">
+            <el-radio-button :value="false">basic</el-radio-button>
+            <el-radio-button :value="true">plain</el-radio-button>
+          </el-radio-group>
+          <div class="flex gap-4">
+            <el-button type="secondary" @click="basicOpener">default</el-button>
+            <el-button v-for="color of colors" :key="color" :type="color" @click="open(color, isPlain)">{{ color }}</el-button>
+          </div>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElMessage, type MessageOptions } from 'element-plus';
+  import { ref } from 'vue';
+
+  const colors = ref(['primary', 'success', 'warning', 'info', 'error' /* , 'danger' */]);
+
+  const snippets = ref({
+    basic: `
+    import { ElMessage, type MessageOptions } from 'element-plus';
+
+    ElMessage({
+      showClose: true,
+      grouping: true,
+      message: "Congrats, this is a message."",
+      type,
+      duration: 0,
+      plain,
+    } as MessageOptions)
+    `,
+  });
+
+  const basicOpener = () => {
+    ElMessage({ message: 'This is a message.', showClose: true, duration: 0 });
+  };
+
+  const isPlain = ref(false);
+
+  const open = function (type: string, plain: boolean = true) {
+    ElMessage({
+      showClose: true,
+      grouping: true,
+      message: `Congrats, this is a ${type} message.`,
+      type,
+      duration: 0,
+      plain,
+      validator: () => null,
+    } as MessageOptions);
+  };
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Notification - (Needs Acceptance)</h1>
+    <p>Displays a global notification message at a corner of the page.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Element Plus has registered the <el-text tag="mark">$notify</el-text> method and it receives an object as its parameter. In the simplest case, you can set the
+          <el-text tag="mark">title</el-text> field and the <el-text tag="mark">message</el-text> field for the title and body of the notification. By default, the notification
+          automatically closes after 4500ms, but by setting <el-text tag="mark">duration</el-text> you can control its duration. Specifically, if set to 0, it will not close
+          automatically. Note that duration receives a <el-text tag="mark">Number</el-text> in milliseconds.
+        </p>
+        <section class="flex gap-7.5">
+          <el-button plain @click="open(4500)"> Closes automatically </el-button>
+          <el-button plain @click="open(0)"> Won't close automatically </el-button>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>With types</template>
+      <div class="flex flex-col gap-3">
+        <p>
+          We provide four types: <el-text tag="mark">success, warning, info</el-text> and <el-text tag="mark">error</el-text>. Element Plus provides four notification types:
+          success, warning, info and error. They are set by the <el-text tag="mark">type</el-text> field, and other values will be ignored. We also registered methods for these
+          types that can be invoked directly like open3 and open4 without passing a type field.
+        </p>
+        <section class="flex gap-7.5">
+          <el-button v-for="(type, index) of ['success', 'info', 'warning', 'error']" :key="index" plain :type="type" @click="open(0, type)">{{ type }}</el-button>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.types" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElNotification } from 'element-plus';
+  import { ref } from 'vue';
+
+  const open = (duration = 4500, type) => {
+    ElNotification({
+      title: capitalize(type) ?? 'Title',
+      message: 'This is a reminder',
+      duration: duration ?? 5000,
+      type: type ?? 'default',
+    });
+  };
+
+  const snippets = ref({
+    basic: `
+      ElNotification({
+        title: 'Title',
+        message: 'This is a reminder',
+        duration: 4500,
+      });`,
+    types: `
+      ElNotification({
+        title: 'Title',
+        message: 'This is a reminder',
+        duration: 0,
+        type: 'success',
+      });
+    `,
+  });
+
+  const capitalize = (value: string): string => {
+    if (!value) return null;
+
+    const text = String(value);
+
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
+</script>

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Input Number</h1>
+    <p>Input numerical values with a customizable range.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-7.5">
+        <p>Bind a variable to <el-text tag="mark">v-model</el-text> in <span class="comment">el-input-number</span> element and you are set.</p>
+        <el-switch v-model="controls" /> Controls
+        <section class="flex gap-7.5">
+          <el-input-number v-model="num" :controls="controls" :min="1" :max="10" @change="handleChange" />
+          <el-input-number v-model="num" :controls="controls" :disabled="true" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Size</template>
+      <div class="flex flex-col gap-7.5">
+        <p>Use attribute <el-text tag="mark">size</el-text> to set additional sizes with large or small.</p>
+        <section class="flex flex-col">
+          <el-form label-position="top">
+            <div class="el-form-items items-start">
+              <el-form-item v-for="size of sizes" :key="size" :label="size">
+                <el-input-number v-model="num" :controls="controls" :min="1" :max="10" controls-position="right" :size="size" @change="handleChange" />
+              </el-form-item>
+            </div>
+          </el-form>
+          <el-form label-position="top">
+            <div class="el-form-items items-start">
+              <el-form-item v-for="size of sizes" :key="size" :label="size">
+                <el-input-number v-model="num" :controls="controls" :min="1" :max="10" controls-position="right" :size="size" :disabled="true" @change="handleChange" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.content" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Controls Position</template>
+      <div class="flex flex-col gap-7.5">
+        <p>Set <el-text tag="mark">controls-position</el-text> to decide the position of control buttons.</p>
+        <section class="flex gap-7.5">
+          <el-input-number v-model="num" :controls="controls" :min="1" :max="10" controls-position="right" size="large" @change="handleChange" />
+          <el-input-number v-model="num" :controls="controls" :min="1" :max="10" controls-position="right" size="large" :disabled="true" @change="handleChange" />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.content" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const sizes = ref(['default', 'large', 'medium', 'small', 'mini']);
+  const num = ref(1);
+  const controls = ref(true);
+
+  const handleChange = (value: number) => {
+    console.log(value);
+  };
+
+  const snippets = ref({
+    basic: `
+      <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+      <el-input-number v-model="num" :disabled="true" />`,
+    content: `<el-input-number v-model="num" :min="1" :max="10" controls-position="right" size="large" @change="handleChange" />`,
+  });
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Pagination</h1>
+    <p>If you have too much data to display in one page, use pagination.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Set <el-text tag="mark">layout</el-text> with different pagination elements you wish to display separated with a comma. Pagination elements are:
+          <el-text tag="mark">prev</el-text> (a button navigating to the previous page), <el-text tag="mark">next</el-text> (a button navigating to the next page),
+          <el-text tag="mark">pager</el-text> (page list), <el-text tag="mark">jumper</el-text> (a jump-to input), <el-text tag="mark">total</el-text> (total item count),
+          <el-text tag="mark">sizes</el-text> (a select to determine page size) and <el-text tag="mark">-></el-text> (every element after this symbol will be pulled to the right).
+        </p>
+        <section class="flex flex-col gap-7.5">
+          <el-pagination
+            v-model:current-page="current_page"
+            v-model:page-size="page_size"
+            :page-sizes="[10, 20, 50, 100]"
+            :disabled="disabled"
+            :background="background"
+            layout="total, prev, pager, next, jumper, sizes"
+            :total="40000"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Disabled </template>
+      <div class="flex flex-col gap-7.5">
+        <p>For make a disable pagination component, add <el-text tag="mark">:disabled="true"</el-text></p>
+        <section class="flex flex-col gap-7.5">
+          <el-pagination
+            v-model:current-page="current_page"
+            v-model:page-size="page_size"
+            :page-sizes="[10, 20, 50, 100]"
+            :size="size"
+            :disabled="true"
+            :background="background"
+            layout="total, prev, pager, next, jumper, sizes"
+            :total="40000"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </section>
+      </div>
+      <template #footer> <html-encode :tag="snippets.disable" /> </template>
+    </el-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, toRefs } from 'vue';
+
+  interface PaginationState {
+    current_page: number;
+    size: string;
+    page_size: number;
+    disabled: boolean;
+    background: boolean;
+    handleSizeChange: (pageSize: number) => void;
+    handleCurrentChange: (page: number) => void;
+  }
+
+  const paginationState = reactive<PaginationState>({
+    current_page: 2,
+    size: 'small',
+    page_size: 20,
+    disabled: false,
+    background: false,
+    handleSizeChange: (pageSize: number) => {
+      console.log(pageSize);
+    },
+    handleCurrentChange: (page: number) => {
+      console.log(page);
+    },
+  });
+
+  const { current_page, size, page_size, disabled, background, handleSizeChange, handleCurrentChange } = toRefs(paginationState);
+
+  const snippets = ref({
+    basic: `
+    <el-pagination
+      v-model:current-page="current_page"
+      v-model:page-size="page_size"
+      :page-sizes="[10, 20, 50, 100]"
+      :size="size"
+      :background="background"
+      layout="total, prev, pager, next, jumper, sizes"
+      :total="40000"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  `,
+    disable: `<el-pagination :disabled="true" />`,
+  });
+</script>

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

@@ -0,0 +1,146 @@
+<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" trigger="click" popper-class="custom-popover">
+            <template #reference>
+              <el-button type="primary">popover</el-button>
+            </template>
+            <div class="table-filter-box" style="padding: 10px">
+              <el-select v-model="model" style="width: 200px" :teleported="false">
+                <el-option label="item1" value="item1" />
+                <el-option label="item2" value="item2" />
+                <el-option label="item3" value="item3" />
+              </el-select>
+            </div>
+          </el-popover>
+
+          <el-popover ref="popoverRef" 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="popoverRef" 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="popover-footer">
+              <el-button plain @click="visible = false">cancel</el-button>
+              <el-button @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>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ClickOutside as vClickOutside } from 'element-plus';
+  import { ref, unref } from 'vue';
+
+  const buttonRef = ref();
+  const popoverRef = ref();
+  const visible = ref(false);
+
+  const onClickOutside = () => {
+    unref(popoverRef).popperRef?.delayHide?.();
+  };
+
+  const model = ref('');
+
+  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,178 @@
+<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" v-bind="size !== 'default' ? { size } : {}">Option 1</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.sizes" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Vertical Group</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>To made radio group vertical just add <el-text tag="mark">class="el-vertical-group"</el-text> to <el-text tag="mark">el-radio-group</el-text> component.</p>
+        <div class="flex flex-col gap-4 items-start">
+          Selected: {{ value }}
+          <el-radio-group v-model="value" class="el-vertical-group">
+            <el-radio v-for="(size, index) of sizes" :key="index" :value="index" v-bind="size !== 'default' ? { size } : {}">Option 1</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.vertical" /> </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: "BerqnetCheckbox",
+  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>
+          `,
+        vertical: ` <el-radio-group v-model="value" class="el-vertical-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>