vueless 0.0.138 → 0.0.140

package/package.json

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

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

@@ -5,7 +5,8 @@ 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:ring-{color}-700 focus:outline-none
+      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: {
@@ -52,8 +53,8 @@ export default /*tw*/ {
         true: "w-full",
       },
       color: {
-        grayscale: "focus:ring-gray-800 disabled:text-gray-400",
-        white: "focus:ring-gray-800 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: [
@@ -132,7 +133,7 @@ export default /*tw*/ {
       { square: true, size: "lg", class: "p-5" },
     ],
   },
-  text: "whitespace-nowrap",
+  text: "whitespace-nowrap focus-visible:outline-none",
   defaultVariants: {
     color: "brand",
     variant: "primary",

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. -->
@@ -46,14 +45,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UButton).default.variant,
   },
 
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.filled,
-  },
-
   /**
    * Button color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -80,6 +71,22 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Allows changing button html tag.
+   */
+  tag: {
+    type: String,
+    default: UIService.get(defaultConfig, UButton).default.tag,
+  },
+
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UButton).default.filled,
+  },
+
   /**
    * Disable the button.
    */
@@ -137,11 +144,6 @@ const props = defineProps({
     default: () => ({}),
   },
 
-  tag: {
-    type: String,
-    default: UIService.get(defaultConfig, UButton).default.tag,
-  },
-
   /**
    * Data-cy attribute for automated testing.
    */
@@ -163,8 +165,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.138",
+  "version": "0.0.140",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -553,15 +553,6 @@
               },
               "default": "primary"
             },
-            {
-              "name": "filled",
-              "description": "Fill the background for thirdary variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "color",
               "description": "Button color.",
@@ -589,6 +580,24 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "tag",
+              "description": "Allows changing button html tag.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "button"
+            },
+            {
+              "name": "filled",
+              "description": "Fill the background for thirdary variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "disabled",
               "description": "Disable the button.",
@@ -652,14 +661,6 @@
               },
               "default": "{}"
             },
-            {
-              "name": "tag",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "button"
-            },
             {
               "name": "dataCy",
               "description": "Data-cy attribute for automated testing.",
@@ -7146,16 +7147,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": {