vueless 0.0.137 → 0.0.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/configs/default.config.js

@@ -5,39 +5,41 @@ export default /*tw*/ {
       text-base font-medium outline-none
       border border-solid rounded-lg
       transition duration-100 ease-in-out
-      focus:ring-opacity-20 focus:ring-4 focus:outline-none
-      active:ring-opacity-20
+      focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
+      focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
       disabled:ring-0 disabled:cursor-no-drop
     `,
     variants: {
       size: {
-        xs: "px-2 py-1.5 text-xs leading-tight gap-0.5",
-        sm: "px-3 py-2.5 text-sm leading-tight gap-1",
-        md: "px-4 py-3.5 text-base leading-tight gap-1.5",
-        lg: "px-5 py-[1.125rem] text-lg leading-tight gap-2",
+        "2xs": "px-3 py-1 text-2xs leading-tight gap-1",
+        xs: "px-4 py-1.5 text-xs leading-tight gap-1.5",
+        sm: "px-5 py-2.5 text-sm leading-tight gap-1.5",
+        md: "px-6 py-3.5 text-base leading-tight gap-2",
+        lg: "px-7 py-4 text-lg leading-tight gap-2.5",
+        xl: "px-8 py-5 text-xl leading-tight gap-2.5",
       },
       variant: {
         primary: `
           text-white
           bg-{color}-600 border-{color}-600
           hover:bg-{color}-700 hover:border-{color}-700
-          focus:bg-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
-          active:bg-{color}-800 active:border-{color}-800 active:ring-{color}-800
+          focus:bg-{color}-700 focus:border-{color}-700
+          active:bg-{color}-800 active:border-{color}-800
           disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
         `,
         secondary: `
           text-{color}-600 border-{color}-600
           hover:text-{color}-700 hover:border-{color}-700
-          focus:text-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
-          active:text-{color}-800 active:border-{color}-800 active:ring-{color}-800
+          focus:text-{color}-700 focus:border-{color}-700
+          active:text-{color}-800 active:border-{color}-800
           disabled:text-{color}-300 disabled:border-{color}-300
         `,
         thirdary: `
           border-transparent
           text-{color}-600
           hover:text-{color}-700 hover:bg-{color}-700 hover:bg-opacity-10
-          focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10 focus:ring-{color}-700
-          active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15 active:ring-{color}-800
+          focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10
+          active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15
           disabled:text-{color}-300
         `,
       },
@@ -51,8 +53,8 @@ export default /*tw*/ {
         true: "w-full",
       },
       color: {
-        grayscale: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
-        white: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
+        grayscale: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
+        white: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
       },
     },
     compoundVariants: [
@@ -83,9 +85,10 @@ export default /*tw*/ {
         variant: "thirdary",
         class: `
           text-gray-900
-          hover:text-gray-800 hover:bg-gray-800 hover:bg-opacity-10
-          focus:text-gray-800 focus:bg-gray-800 focus:bg-opacity-10
-          active:text-gray-700 active:bg-gray-700 active:bg-opacity-15
+          hover:text-gray-800 hover:bg-gray-800
+          focus:text-gray-800 focus:bg-gray-800
+          active:text-gray-700 active:bg-gray-700
+          disabled:bg-transparent
         `,
       },
       {
@@ -102,10 +105,10 @@ export default /*tw*/ {
         color: "white",
         variant: "secondary",
         class: `
-          text-gray-900 border-white
-          hover:text-gray-800 hover:border-gray-50
-          focus:text-gray-800 focus:border-gray-50
-          active:text-gray-700 active:border-gray-100
+          text-gray-900 border-gray-200
+          hover:text-gray-800 hover:border-gray-300
+          focus:text-gray-800 focus:border-gray-300
+          active:text-gray-700 active:border-gray-400
         `,
       },
       {
@@ -113,26 +116,29 @@ export default /*tw*/ {
         variant: "thirdary",
         class: `
           text-gray-900
-          hover:text-gray-800 hover:bg-white hover:bg-opacity-10
-          focus:text-gray-800 focus:bg-white focus:bg-opacity-10
-          active:text-gray-700 active:bg-white active:bg-opacity-15
+          hover:text-gray-800 hover:bg-white
+          focus:text-gray-800 focus:bg-white
+          active:text-gray-700 active:bg-white
+          disabled:bg-transparent
         `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-600 bg-opacity-10" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-700 bg-opacity-10" },
       { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-800 bg-opacity-10" },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { square: true, size: "xs", class: "p-1" },
-      { square: true, size: "sm", class: "p-2" },
-      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "xs", class: "p-1.5" },
+      { square: true, size: "sm", class: "p-2.5" },
+      { square: true, size: "md", class: "p-3.5" },
       { square: true, size: "lg", class: "p-4" },
+      { square: true, size: "lg", class: "p-5" },
     ],
   },
-  text: "whitespace-nowrap",
+  text: "whitespace-nowrap focus-visible:outline-none",
   defaultVariants: {
     color: "brand",
     variant: "primary",
-    size: "md",
     tag: "button",
+    size: "md",
     pill: false,
     block: false,
     square: false,

package/ui.button/index.vue

@@ -12,10 +12,9 @@
     <slot v-if="!loading" name="left" />
 
     <!-- @slot Use it to add something instead of text. -->
-    <slot v-if="!loading">
-      <div v-if="label" v-bind="textAttrs" v-text="label" />
-    </slot>
+    <slot v-if="!loading" />
 
+    <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
     <ULoader v-if="loading" :size="size" color="white" />
 
     <!-- @slot Use it to add something after text. -->
@@ -65,7 +64,7 @@ const props = defineProps({
 
   /**
    * Button size.
-   * @values xs, sm, md, lg
+   * @values 2xs, xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -163,8 +162,5 @@ function onClick(event) {
   if (props.disabled) return;
 
   emit("click", event);
-
-  // TODO: Maybe this should be removed (need to test)
-  //document.getElementById(props.id).blur();
 }
 </script>

package/ui.button-toggle/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   wrapper: `
     flex gap-px
-    [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:first-child]:overflow-hidden
-    [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:last-child]:overflow-hidden
+    [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none
+    [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none
   `,
   toggleItem: "",
   defaultVariants: {

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -1,53 +1,15 @@
-import { computed, toValue } from "vue";
 import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { size, block, variant }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { label, labelText, wrapper } = config.value;
+export function useAttrs(props) {
+  const { getAttrs } = useUI(defaultConfig, () => props.config);
 
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaLabelText = cva({
-    base: labelText.base,
-    variants: labelText.variants,
-    compoundVariants: labelText.compoundVariants,
-  });
-
-  const cvaLabel = cva({
-    base: label.base,
-    variants: label.variants,
-    compoundVariants: label.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() => cvaWrapper({ block: toValue(block) }));
-
-  const labelTextClasses = computed(() => cvaLabelText({ size: toValue(size) }));
-
-  const labelClasses = computed(() =>
-    cvaLabel({
-      size: toValue(size),
-      variant: toValue(variant),
-      disabled: props.disabled,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const buttonAttrs = getAttrs("button");
   const inputAttrs = getAttrs("input");
-  const labelAttrs = getAttrs("label", { classes: labelClasses });
-  const labelTextAttrs = getAttrs("labelText", { classes: labelTextClasses });
 
   return {
+    buttonAttrs,
     inputAttrs,
-    wrapperAttrs,
-    labelTextAttrs,
-    labelAttrs,
-    hasSlotContent,
   };
 }

package/ui.button-toggle-item/configs/default.config.js

@@ -1,53 +1,6 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "w-fit",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-  },
+  button: "rounded-none",
   input: "p-0 m-0 size-0 invisible peer absolute",
-  label: {
-    base: "font-medium w-full flex items-center justify-center cursor-pointer",
-    variants: {
-      variant: {
-        primary: `
-          bg-gray-900/5 hover:bg-gray-900/10 active:bg-gray-900/15
-          peer-focus:border-gray-100 peer-focus:bg-opacity-10 peer-focus:ring-4 peer-focus:ring-gray-600/15
-          focus:border-gray-100 focus:bg-opacity-10 focus:ring-4 focus:ring-gray-600/15
-          peer-checked:bg-gray-900/15
-        `,
-        secondary: `
-          bg-transparent border hover:text-opacity-80 hover:border-opacity-80
-          peer-focus:text-opacity-100 peer-focus:border-opacity-100
-          focus:text-opacity-100 focus:border-opacity-100
-          peer-checked:text-opacity-100 peer-checked:border-opacity-100
-        `,
-        thirdary: `
-          bg-transparent opacity-50 border-none hover:border-none hover:opacity-100 hover:ring-0
-          peer-focus:border-none peer-focus:bg-gray-100 peer-focus:bg-opacity-10 peer-focus:opacity-100
-          peer-focus:ring-0 peer-checked:bg-transparent peer-checked:opacity-100
-          focus:border-none focus:bg-gray-100 focus:bg-opacity-10 focus:opacity-100 focus:ring-0
-        `,
-      },
-      size: {
-        sm: "gap-1.5 p-3.5",
-        md: "p-[1.125rem] gap-2",
-        lg: "gap-2.5 p-[1.375rem]",
-      },
-    },
-  },
-  labelText: {
-    base: "font-medium text-center w-full",
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "font-base",
-        lg: "text-lg",
-      },
-    },
-  },
   defaultVariants: {
     variant: "primary",
     type: "radio",

package/ui.button-toggle-item/index.vue

@@ -1,34 +1,43 @@
 <template>
-  <div v-bind="wrapperAttrs">
-    <input
-      :id="id"
-      v-model="selectedItem"
-      :name="name"
-      :type="type"
-      :value="value"
-      :disabled="disabled"
-      v-bind="inputAttrs"
-    />
-    <label tabindex="0" :for="id" v-bind="labelAttrs" @click="onClickSetValue">
-      <span v-if="hasSlotContent($slots['left'])">
-        <!-- @slot Use it to add some content before label. -->
-        <slot name="left" />
-      </span>
-
-      <!-- @slot Use it to add some content instead of label. -->
-      <slot />
-      <span v-if="!hasSlotContent($slots['default'])" v-bind="labelTextAttrs" v-text="label" />
-
-      <span v-if="hasSlotContent($slots['right'])">
-        <!-- @slot Use it to add some content after label. -->
-        <slot name="right" />
-      </span>
-    </label>
-  </div>
+  <UButton
+    tag="label"
+    tabindex="0"
+    :for="id"
+    :label="label"
+    :size="toValue(size)"
+    :block="toValue(block)"
+    :variant="toValue(variant)"
+    v-bind="buttonAttrs"
+    @click="onClickSetValue"
+  >
+    <template #left>
+      <slot name="left" />
+    </template>
+
+    <template #default>
+      <input
+        :id="id"
+        v-model="selectedItem"
+        :name="name"
+        :type="type"
+        :value="value"
+        :disabled="disabled"
+        v-bind="inputAttrs"
+      />
+
+      <slot name="default" />
+    </template>
+
+    <template #right>
+      <slot name="right" />
+    </template>
+  </UButton>
 </template>
 
 <script setup>
-import { inject, onMounted, ref } from "vue";
+import { inject, onMounted, ref, toValue } from "vue";
+
+import UButton from "../ui.button";
 import UIService, { getRandomId } from "../service.ui";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants";
@@ -108,11 +117,7 @@ const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).de
 const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
-const { wrapperAttrs, labelTextAttrs, labelAttrs, inputAttrs, hasSlotContent } = useAttrs(props, {
-  size,
-  block,
-  variant,
-});
+const { buttonAttrs, inputAttrs } = useAttrs(props);
 
 const selectedItem = ref("");
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -576,7 +576,7 @@
               "description": "Button size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -7146,16 +7146,13 @@
           ],
           "slots": [
             {
-              "name": "left",
-              "description": "Use it to add some content before label."
+              "name": "left"
             },
             {
-              "name": "default",
-              "description": "Use it to add some content instead of label."
+              "name": "default"
             },
             {
-              "name": "right",
-              "description": "Use it to add some content after label."
+              "name": "right"
             }
           ],
           "source": {