@timus-networks/theme 2.0.0 → 2.0.1

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

@@ -0,0 +1,286 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Inputs</h1>
+    <p>Element Plus Button is a customizable and versatile UI component designed for creating interactive and visually appealing buttons in web applications.</p>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Sizes</h2>
+          <p>
+            Default size is Large. Input 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-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" :size="size" :prefix-icon="ElIconSearch" />
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input :size='small' /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Disabled</h2>
+          <p>
+            Disable the Input with the <code><el-text tag="mark">disabled</el-text></code> attribute.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 items-start">
+        <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" :size="size" disabled />
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input disabled /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Clearable</h2>
+          <p>Make the Input clearable with the <el-text tag="mark">clearable</el-text> attribute.</p>
+        </div>
+      </template>
+      <div class="flex gap-4">
+        <el-input v-for="(size, index) of sizes" :key="size + index" v-model="input" placeholder="Please input" :size="size" clearable />
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-input clearable /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Formatter</h2>
+          <p>Display value within it's situation with <el-text tag="mark">formatter</el-text>, and we usually use <el-text tag="mark">parser</el-text> at the same time.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <el-input
+          v-model="input"
+          style="width: 240px"
+          placeholder="Please input"
+          :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+          :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
+        />
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode :tag="snippets.formatter" />
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Password box</h2>
+          <p>Make a toggle-able password Input with the <el-text tag="mark">show-password</el-text> attribute.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <el-input v-model="input" style="width: 240px" type="password" placeholder="Please input password" show-password />
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.password" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Input with icon</h2>
+          <p>
+            Add an icon to indicate input type. To add icons in Input, you can simply use <el-text tag="mark">prefix-icon</el-text> and
+            <el-text tag="mark">suffix-icon</el-text> attributes. Also, the <el-text tag="mark">prefix</el-text> and <el-text tag="mark">suffix</el-text> named slots works as well.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <div class="flex gap-4 mb-4 items-start">
+          <span>Using attributes</span>
+          <el-input v-model="input" style="width: 240px" placeholder="Pick a date" :suffix-icon="ElIconCalendar" />
+          <el-input v-model="input" style="width: 240px" placeholder="Type something" :prefix-icon="ElIconSearch" />
+        </div>
+        <div class="flex gap-4 items-start">
+          <span>Using slots</span>
+          <el-input v-model="input" style="width: 240px" placeholder="Pick a date">
+            <template #suffix>
+              <el-icon class="el-input__icon"><calendar /></el-icon>
+            </template>
+          </el-input>
+          <el-input v-model="input" style="width: 240px" placeholder="Type something">
+            <template #prefix>
+              <el-icon class="el-input__icon"><search /></el-icon>
+            </template>
+          </el-input>
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex flex-col gap-3">
+          <html-encode :tag="snippets.icons.suffix" />
+          <html-encode :tag="snippets.icons.slot" />
+        </div>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Textarea</h2>
+          <p>
+            Resizable for entering multiple lines of text information. Add attribute <el-text tag="mark">type="textarea"</el-text> to change
+            <el-text tag="mark">input</el-text> into native textarea. Control the height by setting the rows prop.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-wrap">
+        <el-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.textarea" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Mixed input</h2>
+          <p>
+            <el-text tag="mark">Prepend</el-text> or <el-text tag="mark">append</el-text> an element, generally a label or a button. Use <el-text tag="mark">slot</el-text> to
+            distribute elements that prepend or append to Input.
+          </p>
+        </div>
+      </template>
+      <div>
+        <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+          <template #prepend>Http://</template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+          <template #append>.com</template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select">
+          <template #prepend>
+            <el-select v-model="select" placeholder="Select" style="width: 115px">
+              <el-option label="Restaurant" value="1" />
+              <el-option label="Order No." value="2" />
+              <el-option label="Tel" value="3" />
+            </el-select>
+          </template>
+          <template #append>
+            <el-button :icon="ElIconSearch" type="primary" />
+          </template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select">
+          <template #prepend>
+            <el-button :icon="ElIconSearch" type="primary" />
+          </template>
+          <template #append>
+            <el-select v-model="select" placeholder="Select" style="width: 115px">
+              <el-option label="Restaurant" value="1" />
+              <el-option label="Order No." value="2" />
+              <el-option label="Tel" value="3" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select" disabled>
+          <template #prepend>
+            <el-button :icon="ElIconSearch" type="primary" />
+          </template>
+          <template #append>
+            <el-button :icon="ElIconSearch" type="primary">Add</el-button>
+          </template>
+        </el-input>
+      </div>
+      <div class="mt-4">
+        <el-input v-model="input" style="max-width: 600px" placeholder="Please input" class="input-with-select" disabled>
+          <template #prepend>
+            <el-button :icon="ElIconSearch" type="primary" />
+          </template>
+          <template #append>
+            <el-select v-model="select" placeholder="Select" style="width: 115px">
+              <el-option label="Restaurant" value="1" />
+              <el-option label="Order No." value="2" />
+              <el-option label="Tel" value="3" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.mixed" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { Calendar, Search } from "@element-plus/icons-vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusInput",
+  components: { Calendar, Search },
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      input: "",
+      textarea: "",
+      select: "1",
+      snippets: {
+        formatter: `<el-input
+              v-model="input"
+              placeholder="Please input"
+              :formatter="(value: string) => \`$ \${value}\`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')"
+              :parser="(value: string) => value.replace(/\\$\\s?|(,*)/g, '')"
+            />`,
+        password: `<el-input v-model="input" type="password" placeholder="Please input password" show-password />`,
+        icons: {
+          suffix: `
+            // suffix
+            <el-input v-model="input" :suffix-icon="ElIconCalendar" />`,
+          slot: `
+            // slot
+            <el-input v-model="input" style="width: 240px" placeholder="Pick a date">
+              <template #suffix>
+                <el-icon class="el-input__icon"><calendar /></el-icon>
+              </template>
+            </el-input>
+            `
+        },
+        textarea: `<el-input v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />`,
+        mixed: `
+          <el-input v-model="input" style="max-width: 600px" placeholder="Please input">
+            <template #prepend>Http://</template>
+            <template #append><el-button :icon="ElIconSearch" type="primary" /></template>
+          </el-input>
+          `
+      }
+    };
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    input: string;
+    textarea: string;
+    select: string;
+    snippets: {
+        formatter: string;
+        password: string;
+        icons: {
+            suffix: string;
+            slot: string;
+        };
+        textarea: string;
+        mixed: string;
+    };
+}, {}, {
+    capitalize(value: string): string;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,161 @@
+<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>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Usage</h2>
+          <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>
+      </template>
+      <div class="flex gap-2">
+        <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 class="m-2">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 class="m-2">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 class="m-2">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 class="m-2">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 class="m-2" @click="visible = !visible"> Manual to activate </el-button>
+          </template>
+        </el-popover>
+      </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>Virtual triggering</h2>
+          <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>
+      </template>
+      <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>
+      <template #footer> <html-encode :tag="snippets.reference" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Nested operation</h2>
+          <p>Of course, you can nest other operations. It's more light-weight than using a dialog.</p>
+        </div>
+      </template>
+      <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>
+      <template #footer> <html-encode :tag="snippets.nested" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Directive</h2>
+          <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>
+      </template>
+      <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>
+      <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 class="m-2">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/example.radio.vue

@@ -0,0 +1,165 @@
+<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>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Sizes</h2>
+          <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>
+      </template>
+      <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>
+      <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><el-text tag="mark">disabled</el-text> attribute is used to disable the radio. You just need to add the disabled attribute.</p>
+        </div>
+      </template>
+      <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>
+      <template #footer>
+        <html-encode :tag="snippets.disabled" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Radio button group</h2>
+          <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>
+      </template>
+      <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>
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Button style</h2>
+          <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>
+      </template>
+      <div class="flex flex-col gap-4 items-start">
+        Selected: {{ value }}
+        <el-radio-group v-model="value">
+          <el-radio-button v-for="val of [1, 2, 3, 4]" :key="val" label="New York" :value="val" :disabled="[1, 4].includes(Number(value)) && val === Number(value)" />
+        </el-radio-group>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.button" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <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>
+      </template>
+      <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 of [1, 2]" :key="val" :value="val" :size="size" border :disabled="size === 'large' && val === 2">Option A</el-radio>
+        </el-radio-group>
+      </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 {
+      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/example.radio.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: 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<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;