vueless 0.0.718 → 0.0.720

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.718",
+  "version": "0.0.720",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button-toggle/UToggle.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when toggle item is selected.
+   * Triggers when toggle option is selected.
    * @property {string} modelValue
    */
   "update:modelValue",
@@ -34,24 +34,24 @@ const selectedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-function isSelected(item: UToggleOption) {
+function isSelected(option: UToggleOption) {
   if (Array.isArray(selectedValue.value)) {
-    return selectedValue.value.includes(item.value);
+    return selectedValue.value.includes(option.value);
   }
 
-  return selectedValue.value === item.value;
+  return selectedValue.value === option.value;
 }
 
-function onClickOption(item: UToggleOption) {
+function onClickOption(option: UToggleOption) {
   if (props.multiple) {
     const newValue = Array.isArray(selectedValue.value) ? [...selectedValue.value] : [];
-    const index = newValue.indexOf(item.value);
+    const index = newValue.indexOf(option.value);
 
-    ~index ? newValue.splice(index, 1) : newValue.push(item.value);
+    ~index ? newValue.splice(index, 1) : newValue.push(option.value);
 
     emit("update:modelValue", newValue);
   } else {
-    emit("update:modelValue", item.value);
+    emit("update:modelValue", option.value);
   }
 }
 
@@ -65,7 +65,7 @@ const mutatedProps = computed(() => ({
   selected: isSelected,
 }));
 
-const { toggleLabelAttrs, itemsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } =
+const { toggleLabelAttrs, optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } =
   useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -82,17 +82,17 @@ const { toggleLabelAttrs, itemsAttrs, toggleButtonInactiveAttrs, toggleButtonAct
   >
     <template #label>
       <!--
-        @slot Use this to add custom content instead of the label.
+        @slot Use this to add custom content instead of the entire Toggle label.
         @binding {string} label
       -->
       <slot name="label" :label="label" />
     </template>
 
-    <div v-bind="itemsAttrs">
+    <div v-bind="optionsAttrs">
       <UButton
-        v-for="(item, index) in options"
-        :key="item.value"
-        :label="item.label"
+        v-for="(option, index) in options"
+        :key="option.value"
+        :label="option.label"
         tabindex="0"
         color="gray"
         :size="size"
@@ -100,38 +100,41 @@ const { toggleLabelAttrs, itemsAttrs, toggleButtonInactiveAttrs, toggleButtonAct
         :block="block"
         :square="square"
         :disabled="disabled"
-        v-bind="isSelected(item) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
-        :data-test="`${dataTest}-item-${index}`"
-        @click="onClickOption(item)"
+        v-bind="isSelected(option) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
+        :data-test="`${dataTest}-option-${index}`"
+        @click="onClickOption(option)"
       >
         <template #left="{ iconName }">
           <!--
             @slot Use it to add something before the label.
+            @binding {object} option
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="left" :icon-name="iconName" :index="index" />
+          <slot name="left" :option="option" :icon-name="iconName" :index="index" />
         </template>
 
         <template #default="{ label, iconName }">
           <!--
-            @slot Use it to add something instead of the toggle item label.
+            @slot Use it to add something instead of the toggle option label.
+            @binding {object} option
             @binding {string} label
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="default" :label="label" :icon-name="iconName" :index="index">
-            {{ item.label }}
+          <slot name="option" :option="option" :label="label" :icon-name="iconName" :index="index">
+            {{ option.label }}
           </slot>
         </template>
 
         <template #right="{ iconName }">
           <!--
             @slot Use it to add something after the label.
+            @binding {object} option
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="right" :icon-name="iconName" :index="index" />
+          <slot name="right" :option="option" :icon-name="iconName" :index="index" />
         </template>
       </UButton>
     </div>

package/ui.button-toggle/config.ts

@@ -17,7 +17,7 @@ export default /*tw*/ {
       },
     },
   },
-  items: {
+  options: {
     base: "flex",
     variants: {
       size: {

package/ui.navigation-tab/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   tabButton: {
     base: `
-      {UButton} -mb-px rounded-none border-transparent
+      {UButton} -mb-px rounded-none border-b-2 border-transparent
       hover:bg-transparent dark:hover:bg-transparent
       active:bg-transparent dark:active:bg-transparent
     `,
@@ -10,7 +10,7 @@ export default /*tw*/ {
     },
   },
   tabButtonActive: {
-    base: "{>tabButton} -mb-0.5 border-b-2 border-b-brand-600",
+    base: "{>tabButton} border-b-brand-600",
     defaults: {
       color: "brand",
     },

package/ui.navigation-tabs/config.ts

@@ -1,5 +1,10 @@
 export default /*tw*/ {
-  tabs: "mb-6 flex border-b border-gray-200 dark:border-gray-700",
+  tabs: {
+    base: "mb-6 flex flex-nowrap border-b border-gray-200 dark:border-gray-700",
+    variants: {
+      block: "w-full",
+    },
+  },
   tab: "{UTab}",
   defaults: {
     size: "md",