@timus-networks/theme 2.0.0 → 2.0.1

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

@@ -0,0 +1,591 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Select</h1>
+    <p>When there are plenty of options, use a drop-down menu to display and select desired ones.</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 flex-col items-start">
+        <el-select v-for="(size, index) of sizes" :key="size + index" v-model="value" :size="size" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </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 option</h2>
+          <p>Set the value of <el-text tag="mark">disabled</el-text> in <el-text tag="mark">el-option</el-text> to <el-text tag="mark">true</el-text> to disable this option.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.disableOptions" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Disabled select</h2>
+          <p>Disable the whole component. Set <el-text tag="mark">disabled</el-text> of <el-text tag="mark">el-select</el-text> to make it disabled.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" disabled placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.disableSelect" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Clearable single select</h2>
+          <p>
+            You can clear Select using a clear icon. Set <el-text tag="mark">clearable</el-text> attribute for <el-text tag="mark">el-select</el-text> and a clear icon will appear.
+            Note that <el-text tag="mark">clearable</el-text> is only for single select.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" clearable placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.clearable" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Basic multiple select</h2>
+          <p>
+            Multiple select uses tags to display selected options. Set <el-text tag="mark">multiple</el-text> attribute for el-select to enable multiple mode. In this case, the
+            value of v-model will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using
+            <el-text tag="mark">collapse-tags</el-text> attribute. You can check them when mouse hover collapse text by using
+            <el-text tag="mark">collapse-tags-tooltip</el-text> attribute.
+          </p>
+        </div>
+      </template>
+      <div v-for="(size, index) of sizes" :key="index + 'multiple'" class="flex flex-col items-start justify-start mb-4">
+        <h3>{{ capitalize(size) }}</h3>
+        <div class="flex gap-4">
+          <div class="flex gap-4 flex-col">
+            <p>default</p>
+            <el-select v-model="multiple.one" multiple placeholder="Select" style="width: 240px" :size="size" disabled>
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div class="flex gap-4 flex-col">
+            <p>use collapse-tags</p>
+            <el-select v-model="multiple.two" multiple collapse-tags placeholder="Select" style="width: 240px" :size="size">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div class="flex gap-4 flex-col">
+            <p>use collapse-tags-tooltip</p>
+            <el-select v-model="multiple.three" multiple collapse-tags collapse-tags-tooltip placeholder="Select" style="width: 240px" :size="size">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div class="flex gap-4 flex-col">
+            <p>use max-collapse-tags</p>
+            <el-select v-model="multiple.four" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="Select" style="width: 240px" :size="size">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.multiple" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Custom template</h2>
+          <p>You can customize HTML templates for options. Insert customized HTML templates into the slot of <el-text tag="mark">el-option</el-text>.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            <span style="float: left">{{ item.label }}</span>
+            <span style="color: var(--el-color-neutral-light-4); float: right; font-size: 13px">
+              {{ item.value }}
+            </span>
+          </el-option>
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.custom" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Header of the dropdown</h2>
+          <p>You can customize the header of the dropdown. Use slot to customize the content.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="valueChecboxed" multiple clearable collapse-tags placeholder="Select" popper-class="custom-header" :max-collapse-tags="1" style="width: 240px">
+          <template #header>
+            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll"> All </el-checkbox>
+          </template>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.withHeader" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Footer of the dropdown</h2>
+          <p>You can customize the footer of the dropdown. Use slot to customize the content.</p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          <template #footer>
+            <el-button v-if="!footer.isAdding" plain size="small" @click="onAddOption"> Add an option </el-button>
+            <template v-else>
+              <el-input v-model="footer.optionName" class="option-input" placeholder="input option name" size="small" />
+              <el-button type="primary" size="small" @click="onConfirm"> confirm </el-button>
+              <el-button size="small" @click="clear">cancel</el-button>
+            </template>
+          </template>
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.withFooter" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Grouping</h2>
+          <p>
+            Display options in groups. Use <el-text tag="mark">el-option-group</el-text> to group the options, and its <span class="font-medium">label</span> attribute stands for
+            the name of the group.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" placeholder="Select" style="width: 240px">
+          <el-option-group v-for="group in groupOptions" :key="group.label" :label="group.label">
+            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-option-group>
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.withGroup" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Option filtering</h2>
+          <p>
+            You can filter options for your desired ones. Adding <el-text tag="mark">filterable</el-text> to <span class="font-medium">el-select</span> enables filtering. By
+            default, Select will find all the options whose label attribute contains the input value. If you prefer other filtering strategies, you can pass the
+            <el-text tag="mark">filter-method</el-text>. filter-method is a <span class="font-medium">Function</span> that gets called when the input value changes, and its
+            parameter is the current input value.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="value" filterable placeholder="Select" style="width: 240px" clearable>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.filter" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Create new items</h2>
+          <p>
+            Create and select new items that are not included in select options By using the <el-text tag="mark">allow-create</el-text> attribute, users can create new items by
+            typing in the input box. Note that for allow-create to work, <el-text tag="mark">filterable</el-text> must be <span class="font-medium">true</span>. This example also
+            demonstrates <el-text tag="mark">default-first-option</el-text>. When this attribute is set to <span class="font-medium">true</span>, you can select the first option in
+            the current option list by hitting enter without having to navigate with mouse or arrow keys.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select
+          v-model="newItemsValues"
+          multiple
+          filterable
+          allow-create
+          default-first-option
+          :reserve-keyword="false"
+          placeholder="Choose tags for your article"
+          style="width: 240px"
+        >
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-select
+          v-model="newItemsValues"
+          multiple
+          filterable
+          allow-create
+          default-first-option
+          :reserve-keyword="false"
+          placeholder="Choose tags for your article"
+          style="width: 240px"
+          disabled
+        >
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.filter" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Option filtering</h2>
+          <p>
+            If the binding value of Select is an object, make sure to assign <el-text tag="mark">value-key</el-text> as its unique identity key name. By using the value-key
+            attribute, data with duplicate labels can be properly handled. The value of the <span class="font-medium">label</span> property is duplicated, but the option can be
+            identified through the <span class="font-medium">id</span>.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="objectSelected" value-key="id" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in objectOptions" :key="item.id" :label="item.label" :value="item" />
+        </el-select>
+        <p>
+          Selected option's:
+          {{ objectSelected ? objectSelected : 'no select' }}
+        </p>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.filter" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Custom Tag</h2>
+          <p>
+            You can customize tags. Insert customized <el-text tag="mark">tags</el-text> into the <span class="font-medium">slot</span> of el-select.
+            <span class="font-medium">collapse-tags, collapse-tags-tooltip, max-collapse-tags</span> will not work.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="colorSelected" multiple placeholder="Select" style="width: 240px">
+          <el-option v-for="tag in coloredOptions" :key="tag.value" :label="tag.label" :value="tag.value">
+            <div class="flex items-center">
+              <el-tag :type="tag.label" style="margin-right: 8px" size="small" />
+              <span :style="{ color: tag.value }">{{ tag.label }}</span>
+            </div>
+          </el-option>
+          <template #tag>
+            <div
+              v-for="color in colorSelected"
+              :key="color"
+              class="px-2 w-[18px] h-[18px]"
+              :style="{ backgroundColor: `var(--el-color-${color}-light-2)`, border: `1px solid var(--el-color-${color}-light-4)` }"
+            />
+          </template>
+        </el-select>
+        <p>
+          Selected option's:
+          {{ colorSelected ? colorSelected : 'no select' }}
+        </p>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.customTag" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="flex flex-col gap-3 items-start">
+          <h2>Custom Label</h2>
+          <p>
+            You can customize label. Insert customized <el-text tag="mark">label</el-text> into the <span class="font-medium">slot</span> of el-select.
+            <span class="font-medium">collapse-tags, collapse-tags-tooltip, max-collapse-tags</span> will not work.
+          </p>
+        </div>
+      </template>
+      <div class="flex gap-4 flex-col items-start">
+        <el-select v-model="colorSelected" multiple placeholder="Select" style="width: 240px">
+          <el-option v-for="tag in coloredOptions" :key="tag.value" :label="tag.label" :value="tag.value">
+            <div class="flex items-center">
+              <el-tag :type="tag.label" style="margin-right: 8px" size="small" />
+              <span :style="{ color: tag.value }">{{ tag.label }}</span>
+            </div>
+          </el-option>
+          <template #label="{ label, value: val }">
+            <span>{{ label }}: </span>
+            <span style="font-weight: bold">{{ val }}</span>
+          </template>
+        </el-select>
+        <p>
+          Selected option's:
+          {{ colorSelected ? colorSelected : 'no select' }}
+        </p>
+      </div>
+      <template #footer>
+        <html-encode :tag="snippets.customLabel" />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "TimusSelect",
+  data() {
+    return {
+      sizes: ["default", "large", "medium", "small", "mini"],
+      colors: ["primary", "secondary", "neutral", "success", "warning", "info", "danger"],
+      value: "",
+      multiple: { one: [], two: [], three: [], four: [] },
+      options: [
+        { value: "Option 1", label: "Option 1" },
+        { value: "Option 2", label: "Option 2", disabled: true },
+        { value: "Option 3", label: "Option 3 uzun" },
+        { value: "Option 4", label: "Option 4" },
+        { value: "Option 5", label: "Option 5" },
+        { value: "Option 6", label: "Option 6", disabled: true },
+        { value: "Option 7", label: "Option 7" },
+        { value: "Option 8", label: "Option 8" },
+        { value: "Beijing", label: "Beijing" },
+        { value: "Shanghai", label: "Shanghai" },
+        { value: "Nanjing", label: "Nanjing" },
+        { value: "Chengdu", label: "Chengdu" },
+        { value: "Shenzhen", label: "Shenzhen" },
+        { value: "Guangzhou", label: "Guangzhou" }
+      ],
+      snippets: {
+        sizes: `
+              <el-select v-for="(size, index) of sizes" :key="size + index" v-model="value" :size="size" placeholder="Select" style="width: 240px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            `,
+        disableOptions: `
+              <el-select v-model="value" placeholder="Select" style="width: 240px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
+              </el-select>`,
+        disableSelect: `
+              <el-select v-model="value" disabled placeholder="Select" style="width: 240px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>`,
+        clearable: `
+              <el-select v-model="value" clearable placeholder="Select" style="width: 240px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>`,
+        multiple: `
+              <el-select v-model="multiple.four" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="Select" style="width: 240px" :size="size">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            `,
+        custom: `
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                <span style="float: left">{{ item.label }}</span>
+                <span style="color: var(--el-text-color-secondary); float: right; font-size: 13px">
+                  {{ item.value }}
+                </span>
+              </el-option>
+            `,
+        withHeader: `
+            <el-select v-model="valueChecboxed" multiple clearable collapse-tags placeholder="Select" popper-class="custom-header" :max-collapse-tags="1" style="width: 240px">
+              <template #header>
+                <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll"> All </el-checkbox>
+              </template>
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            `,
+        withFooter: `
+            <el-select v-model="value" placeholder="Select" style="width: 240px">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              <template #footer>
+                <el-button v-if="!footer.isAdding" plain size="small" @click="onAddOption"> Add an option </el-button>
+                <template v-else>
+                  <el-input v-model="footer.optionName" class="option-input" placeholder="input option name" size="small" />
+                  <el-button type="primary" size="small" @click="onConfirm"> confirm </el-button>
+                  <el-button size="small" @click="clear">cancel</el-button>
+                </template>
+              </template>
+            </el-select>
+          `,
+        withGroup: `
+            <el-select v-model="value" placeholder="Select" style="width: 240px">
+              <el-option-group v-for="group in groupOptions" :key="group.label" :label="group.label">
+                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-option-group>
+            </el-select>
+          `,
+        filter: `
+            <el-select v-model="value" filterable placeholder="Select" style="width: 240px">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          `,
+        customTag: `
+            <el-select v-model="colorSelected" multiple placeholder="Select" style="width: 240px">
+              <el-option v-for="tag in coloredOptions" :key="tag.value" :label="tag.label" :value="tag.value">
+                <div class="flex items-center">
+                  <el-tag :type="tag.label" style="margin-right: 8px" size="small" />
+                  <span :style="{ color: tag.value }">{{ tag.label }}</span>
+                </div>
+              </el-option>
+              <template #tag>
+                <div
+                  v-for="color in colorSelected"
+                  :key="color"
+                  class="px-2 w-[18px] h-[18px]"
+                  :style="{ backgroundColor: 'red', border: 'blue' }"
+                />
+              </template>
+            </el-select>
+          `,
+        customLabel: `
+            <el-select v-model="colorSelected" multiple placeholder="Select" style="width: 240px">
+              <el-option v-for="tag in coloredOptions" :key="tag.value" :label="tag.label" :value="tag.value">
+                <div class="flex items-center">
+                  <el-tag :type="tag.label" style="margin-right: 8px" size="small" />
+                  <span :style="{ color: tag.value }">{{ tag.label }}</span>
+                </div>
+              </el-option>
+              <template #label="{ label, value }">
+                <span>{{ label }}: </span>
+                <span style="font-weight: bold">{{ value }}</span>
+              </template>
+            </el-select>
+          `
+      },
+      checkAll: false,
+      indeterminate: false,
+      valueChecboxed: [],
+      footer: {
+        isAdding: false,
+        optionName: ""
+      },
+      groupOptions: [
+        {
+          label: "Popular cities",
+          options: [
+            { value: "Shanghai", label: "Shanghai" },
+            { value: "Beijing", label: "Beijing" }
+          ]
+        },
+        {
+          label: "City name",
+          options: [
+            { value: "Chengdu", label: "Chengdu" },
+            { value: "Shenzhen", label: "Shenzhen" },
+            { value: "Guangzhou", label: "Guangzhou" },
+            { value: "Dalian", label: "Dalian" }
+          ]
+        }
+      ],
+      newItemsValues: [],
+      objectOptions: [
+        { id: 1, label: "Option A", desc: "Option A - 230506" },
+        { id: 2, label: "Option B", desc: "Option B - 230506" },
+        { id: 3, label: "Option C", desc: "Option C - 230506" },
+        { id: 4, label: "Option A", desc: "Option A - 230507" }
+      ],
+      objectSelected: {},
+      coloredOptions: [
+        { value: "primary", label: "primary" },
+        { value: "secondary", label: "secondary" },
+        { value: "neutral", label: "neutral" },
+        { value: "success", label: "success" },
+        { value: "warning", label: "warning" },
+        { value: "danger", label: "danger" },
+        { value: "info", label: "info" }
+      ],
+      colorSelected: []
+    };
+  },
+  watch: {
+    valueChecboxed(val) {
+      if (val.length === 0) {
+        this.checkAll = false;
+        this.indeterminate = false;
+      } else if (val.length === this.options.length) {
+        this.checkAll = true;
+        this.indeterminate = false;
+      } else {
+        this.indeterminate = true;
+      }
+    }
+  },
+  methods: {
+    capitalize(value) {
+      const text = String(value);
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    },
+    handleCheckAll(val) {
+      this.indeterminate = false;
+      if (val) {
+        this.valueChecboxed = this.options.map((_) => _.value);
+      } else {
+        this.valueChecboxed = [];
+      }
+    },
+    onAddOption() {
+      this.footer.isAdding = true;
+    },
+    onConfirm() {
+      if (this.footer.optionName) {
+        this.options.push({
+          label: this.footer.optionName,
+          value: this.footer.optionName
+        });
+        this.clear();
+      }
+    },
+    clear() {
+      this.footer.optionName = "";
+      this.footer.isAdding = false;
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,69 @@
+import type { CheckboxValueType } from '@timus-networks/element-plus';
+type Option = {
+    id: number;
+    label: string;
+    desc: string;
+};
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    sizes: string[];
+    colors: string[];
+    value: string;
+    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<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;