vueless 0.0.3 → 0.0.5

package/{ui.container-page → src/ui.container-page}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx, isMobileApp } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx, isMobileApp } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.container-page → src/ui.container-page}/index.stories.js

@@ -1,13 +1,13 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UPage from "vueless/ui.container-page";
-import UCard from "vueless/ui.container-card";
-import URow from "vueless/ui.container-row";
-import UInput from "vueless/ui.form-input";
-import UTextarea from "vueless/ui.form-textarea";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/ui.text-header";
+import { getArgTypes } from "../service.storybook";
+
+import UPage from "../ui.container-page";
+import UCard from "../ui.container-card";
+import URow from "../ui.container-row";
+import UInput from "../ui.form-input";
+import UTextarea from "../ui.form-textarea";
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import UHeader from "../ui.text-header";
 
 export default {
   id: "5090",

package/{ui.container-page → src/ui.container-page}/index.vue

@@ -68,7 +68,7 @@
 import { computed, useSlots, onMounted } from "vue";
 import { useStore } from "vuex";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UPage } from "./constants";

package/src/ui.container-row/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.container-row → src/ui.container-row}/composables/attrs.composable.js

@@ -1,6 +1,6 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
-import { cva } from "vueless/service.ui";
+import { cva } from "../../service.ui";
 import { computed } from "vue";
 
 export function useAttrs(props) {

package/{ui.container-row → src/ui.container-row}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import URow from "vueless/ui.container-row";
-import UInput from "vueless/ui.form-input";
+import URow from "../ui.container-row";
+import UInput from "../ui.form-input";
 
 export default {
   id: "5020",

package/{ui.container-row → src/ui.container-row}/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { URow } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.data-list → src/ui.data-list}/composables/attrs.composable.js

@@ -1,7 +1,7 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
-import { cx } from "vueless/service.ui";
+import { cx } from "../../service.ui";
 
 export function useAttrs(props) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);

package/{ui.data-list → src/ui.data-list}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UDataList from "vueless/ui.data-list";
-import UIcon from "vueless/ui.image-icon";
+import UDataList from "../ui.data-list";
+import UIcon from "../ui.image-icon";
 
 export default {
   id: "7020",

package/{ui.data-list → src/ui.data-list}/index.vue

@@ -98,9 +98,9 @@
 <script setup>
 import draggable from "vuedraggable";
 
-import UIcon from "vueless/ui.image-icon";
-import UDivider from "vueless/ui.container-divider";
-import UIService from "vueless/service.ui";
+import UIcon from "../ui.image-icon";
+import UDivider from "../ui.container-divider";
+import UIService from "../service.ui";
 
 import { UDataListName } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.data-table/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.data-table → src/ui.data-table}/composables/attrs.composable.js

@@ -1,6 +1,6 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
-import { cva, cx } from "vueless/service.ui";
+import { cva, cx } from "../../service.ui";
 import { computed, useSlots } from "vue";
 
 export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky }) {
@@ -129,17 +129,17 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
     class: cx([customHeaderItemAttrsRaw.value.class, thClass]),
   }));
 
-  const dateSeparatorRowAttrs = computed(() => (rowIndex) => {
+  const dateSeparatorRowAttrs = (rowIndex) => {
     const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
     const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
 
-    return {
-      class:
-        (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
-          ? config.value.checkedRow
-          : "",
-    };
-  });
+    const activeClass =
+      (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
+        ? config.value.checkedRow
+        : "";
+
+    return getAttrs("option", { classes: activeClass }).value;
+  };
 
   const toggleButtonWrapperAttrs = computed(() => (index) => ({
     class: index === 0 && props.nesting ? config.value.toggleButtonWrapper : "",

package/{ui.data-table → src/ui.data-table}/configs/default.config.js

@@ -71,6 +71,12 @@ export default /*tw*/ {
     collapse group-[]/footer-fixed:[visibility:inherit]
   `,
   empty: "my-8",
+  i18n: {
+    noItems: "There is no data in the table yet.",
+    noResultsForFilters: "No results were found for the specified filters.",
+    today: "today",
+    tomorrow: "tomorrow",
+  },
   defaultVariants: {
     nestingFrom: 0,
     nesting: false,

package/{ui.data-table → src/ui.data-table}/index.stories.js

@@ -1,12 +1,12 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-import { getRandomId } from "vueless/service.ui";
+import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getRandomId } from "../service.ui";
 
-import UTable from "vueless/ui.data-table";
-import UTableCell from "vueless/ui.data-table-cell";
-import UButton from "vueless/ui.button";
-import ULink from "vueless/ui.button-link";
-import UMoney from "vueless/ui.text-money";
-import UBadge from "vueless/ui.text-badge";
+import UTable from "../ui.data-table";
+import UTableCell from "../ui.data-table-cell";
+import UButton from "../ui.button";
+import ULink from "../ui.button-link";
+import UMoney from "../ui.text-money";
+import UBadge from "../ui.text-badge";
 
 export default {
   id: "7010",

package/{ui.data-table → src/ui.data-table}/index.vue

@@ -113,7 +113,10 @@
               <td v-else :colspan="colsCount" v-bind="beforeFirstRowCellAttrs" />
             </tr>
 
-            <tr v-if="isShownDateSeparator(rowIndex) && row.date" v-bind="dateSeparatorRowAttrs">
+            <tr
+              v-if="isShownDateSeparator(rowIndex) && row.date"
+              v-bind="dateSeparatorRowAttrs(rowIndex)"
+            >
               <td :colspan="colsCount">
                 <UDivider
                   size="xs"
@@ -136,7 +139,7 @@
                   size="sm"
                   :data-cy="`${dataCy}-table-body-checkbox`"
                   v-bind="tableCheckboxAttrs"
-                  @click.stop="onClickSelectRow(row.id)"
+                  @click.stop
                 />
               </td>
 
@@ -270,15 +273,14 @@ import {
   onBeforeUnmount,
 } from "vue";
 
-import UCheckbox from "vueless/ui.form-checkbox";
-import ULoaderTop from "@vueless/layouts/ui.loader-top";
+import UCheckbox from "../ui.form-checkbox";
+import ULoaderTop from "../ui.loader-top";
 
-import I18nServiceDefault from "@vueless/services/i18n";
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 import defaultConfig from "./configs/default.config";
 import TableService from "./services/table.service";
 
-import { HYPHEN_SYMBOL, PX_IN_REM } from "vueless/service.ui";
+import { HYPHEN_SYMBOL, PX_IN_REM } from "../service.ui";
 import { UTable } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 
@@ -395,7 +397,6 @@ const emit = defineEmits(["clickRow", "update:rows"]);
 
 defineExpose({ clearSelectedItems });
 
-const { getTranslation } = new I18nServiceDefault();
 const slots = useSlots();
 
 const selectAll = ref(false);
@@ -467,14 +468,6 @@ const {
   headerAttrs,
 } = useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky });
 
-const i18n = computed(() => ({
-  noItems: getTranslation("noItems"),
-  noResultsForFilters: getTranslation("noResultsForFilters"),
-  yesterday: getTranslation("yesterday"),
-  today: getTranslation("today"),
-  tomorrow: getTranslation("tomorrow"),
-}));
-
 const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
 
 const isSelectedAllRows = computed(() => {
@@ -519,7 +512,7 @@ const hasContentBeforeFirstRowSlot = computed(() => {
 });
 
 const emptyTableMsg = computed(() => {
-  return props.filters ? i18n.value.noResultsForFilters : i18n.value.noItems;
+  return props.filters ? config.value.i18n.noResultsForFilters : config.value.i18n.noItems;
 });
 
 watch(selectAll, onChangeSelectAll, { deep: true });
@@ -531,6 +524,16 @@ watch(isHeaderSticky, setHeaderItemsWidth);
 watch(isFooterSticky, (newValue) =>
   newValue ? nextTick(setFooterItemsWidth) : setFooterItemsWidth(true),
 );
+watch(
+  () => selectedRows.value.length,
+  () => {
+    tableRows.value = tableRows.value.map((row) => {
+      row.isChecked = selectedRows.value.includes(row.id);
+
+      return row;
+    });
+  },
+);
 
 tableRows.value = props.rows;
 
@@ -682,12 +685,6 @@ function rowClass(row) {
   return selectedRows.value.includes(row.id) ? config.value.checkedRow : "";
 }
 
-function onClickSelectRow(rowId) {
-  const targetRowIndex = tableRows.value.findIndex((row) => row.id === rowId);
-
-  tableRows.value[targetRowIndex].isChecked = !tableRows.value[targetRowIndex].isChecked;
-}
-
 function onClickRow(row) {
   emit("clickRow", row);
 }
@@ -726,15 +723,3 @@ function clearSelectedItems() {
   selectedRows.value = [];
 }
 </script>
-
-<i18n>
-en:
-  noItems: There is no data in the table yet.
-  noResultsForFilters: No results were found for the specified filters.
-ru:
-  noItems: Пока что в таблице нет данных.
-  noResultsForFilters: По заданным фильтрам ничего не найдено.
-ua:
-  noItems: Поки що в таблиці немає даних.
-  noResultsForFilters: За даними фільтрами нічого не знайдено.
-</i18n>

package/{ui.data-table-cell → src/ui.data-table-cell}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.data-table-cell → src/ui.data-table-cell}/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UTableCell } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.dropdown-badge/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.dropdown-badge → src/ui.dropdown-badge}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.dropdown-badge → src/ui.dropdown-badge}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UDropdownBadge from "vueless/ui.dropdown-badge";
-import UDropdownItem from "vueless/ui.dropdown-item";
-import URow from "vueless/ui.container-row";
+import UDropdownBadge from "../ui.dropdown-badge";
+import UDropdownItem from "../ui.dropdown-item";
+import URow from "../ui.container-row";
 
 export default {
   id: "2020",

package/{ui.dropdown-badge → src/ui.dropdown-badge}/index.vue

@@ -44,10 +44,10 @@
 <script setup>
 import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
 
-import UIcon from "vueless/ui.image-icon";
-import UBadge from "vueless/ui.text-badge";
-import UDropdownList from "vueless/ui.dropdown-list";
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIcon from "../ui.image-icon";
+import UBadge from "../ui.text-badge";
+import UDropdownList from "../ui.dropdown-list";
+import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UDropdownBadge } from "./constants";

package/src/ui.dropdown-button/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.dropdown-button → src/ui.dropdown-button}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.dropdown-button → src/ui.dropdown-button}/index.stories.js

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UDropdownButton from "vueless/ui.dropdown-button";
-import UDropdownItem from "vueless/ui.dropdown-item";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/ui.container-group";
+import UDropdownButton from "../ui.dropdown-button";
+import UDropdownItem from "../ui.dropdown-item";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "2010",

package/{ui.dropdown-button → src/ui.dropdown-button}/index.vue

@@ -47,11 +47,11 @@
 <script setup>
 import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
 
-import UIService, { getRandomId } from "vueless/service.ui";
-import UIcon from "vueless/ui.image-icon";
-import UButton from "vueless/ui.button";
-import UDropdownList from "vueless/ui.dropdown-list";
-import { BUTTON_VARIANT } from "vueless/ui.dropdown-button/constants";
+import UIService, { getRandomId } from "../service.ui";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
+import UDropdownList from "../ui.dropdown-list";
+import { BUTTON_VARIANT } from "../ui.dropdown-button/constants";
 
 import { UDropdownButton } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.dropdown-item/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.dropdown-item → src/ui.dropdown-item}/composables/attrs.composable.js

@@ -1,4 +1,4 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.dropdown-item → src/ui.dropdown-item}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UDropdownItem from "vueless/ui.dropdown-item";
+import UDropdownItem from "../ui.dropdown-item";
 
 export default {
   id: "2040",

package/src/ui.dropdown-link/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.dropdown-link → src/ui.dropdown-link}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.dropdown-link → src/ui.dropdown-link}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UDropdownLink from "vueless/ui.dropdown-link";
-import UDropdownItem from "vueless/ui.dropdown-item";
-import URow from "vueless/ui.container-row";
+import UDropdownLink from "../ui.dropdown-link";
+import UDropdownItem from "../ui.dropdown-item";
+import URow from "../ui.container-row";
 
 export default {
   id: "2030",

package/{ui.dropdown-link → src/ui.dropdown-link}/index.vue

@@ -48,10 +48,10 @@
 <script setup>
 import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
 
-import UIcon from "vueless/ui.image-icon";
-import ULink from "vueless/ui.button-link";
-import UDropdownList from "vueless/ui.dropdown-list";
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIcon from "../ui.image-icon";
+import ULink from "../ui.button-link";
+import UDropdownList from "../ui.dropdown-list";
+import UIService, { getRandomId } from "../service.ui";
 
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.dropdown-list/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.dropdown-list → src/ui.dropdown-list}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
@@ -51,6 +51,7 @@ export default function useAttrs(props) {
   const addTitleHotkeyAttrs = getAttrs("addTitleHotkey");
   const buttonAddAttrs = getAttrs("buttonAdd", { isComponent: true });
   const iconAddAttrs = getAttrs("iconAdd", { isComponent: true });
+  const optionContentAttrs = getAttrs("optionContent");
 
   const subGroupLabelAttrsRaw = getAttrs("subGroupLabel", { classes: subGroupLabelClasses });
   const subGroupLabelAttrs = computed(() => ({
@@ -87,5 +88,6 @@ export default function useAttrs(props) {
     subGroupLabelAttrs,
     groupLabelAttrs,
     optionClasses,
+    optionContentAttrs,
   };
 }

package/{ui.dropdown-list → src/ui.dropdown-list}/configs/default.config.js

@@ -34,6 +34,7 @@ export default /*tw*/ {
         p-3 flex items-center align-middle whitespace-nowrap cursor-pointer
         font-normal !leading-none normal-case text-gray-900
         hover:bg-gray-100 active:bg-gray-200 active:font-medium
+        overflow-hidden text-ellipsis
       `,
     variants: {
       size: {
@@ -49,6 +50,7 @@ export default /*tw*/ {
   optionHighlight: "bg-gray-100",
   optionSelected: "bg-gray-200 font-medium",
   optionItem: "group/item block",
+  optionContent: "overflow-hidden text-ellipsis",
   addTitleWrapper: `
     flex items-center justify-between cursor-pointer p-3 hover:bg-gray-100
     active:bg-gray-200 active:font-medium -mb-6
@@ -58,6 +60,10 @@ export default /*tw*/ {
   buttonAdd: "sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
   iconAddName: "add",
   iconAdd: "bg-transparent",
+  i18n: {
+    noDataToShow: "No data to show.",
+    add: "Add",
+  },
   defaultVariants: {
     size: "md",
     optionHeight: 40,