vueless 0.0.601 → 0.0.603

package/package.json

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

package/ui.dropdown-list/UDropdownList.vue

@@ -151,7 +151,7 @@ function optionHighlight(index: number, option: Option) {
   return classes;
 }
 
-function addPointerElement(keyCode: string) {
+function addPointerElement(keyCode?: string) {
   if (props.options.length > 0) {
     select(props.options[pointer.value], keyCode);
     onClickOption(props.options[pointer.value]);

package/ui.form-checkbox/UCheckbox.vue

@@ -142,6 +142,7 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
+    interactive
     v-bind="checkboxLabelAttrs"
     :data-test="`${dataTest}-label`"
   >

package/ui.form-checkbox/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       border rounded bg-white cursor-pointer transition checked:text-{color}-600
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
-      disabled:border-gray-300 disabled:bg-gray-100
+      disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

package/ui.form-input/UInput.vue

@@ -273,6 +273,7 @@ const {
     :size="size"
     :align="labelAlign"
     centred
+    interactive
     v-bind="inputLabelAttrs"
   >
     <label :for="elementId" v-bind="wrapperAttrs">

package/ui.form-input/config.ts

@@ -15,7 +15,10 @@ export default /*tw*/ {
         `,
       },
       disabled: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0 pointer-events-none",
+        true: `
+          focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100 
+          hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
+        `,
       },
     },
   },
@@ -26,10 +29,10 @@ export default /*tw*/ {
   passwordIcon: "{UIcon}",
   input: {
     base: `
-      block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-white
+      block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent
       border-none rounded-dynamic transition focus:ring-0
       placeholder:font-normal placeholder-gray-400
-      disabled:text-gray-700 disabled:bg-gray-100
+      disabled:text-gray-700 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

package/ui.form-input/storybook/stories.ts

@@ -127,6 +127,7 @@ RightIconSlot.args = {
   slotTemplate: `
     <template #right-icon>
       <UIcon
+        interactive
         name="star"
         color="green"
       />

package/ui.form-input-file/UInputFile.vue

@@ -281,6 +281,7 @@ const {
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
+    interactive
     v-bind="inputLabelAttrs"
   >
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">

package/ui.form-label/config.ts

@@ -24,14 +24,7 @@ export default /*tw*/ {
       { align: "right", centred: true, class: "items-center justify-start w-auto" },
     ],
   },
-  content: {
-    base: "flex",
-    variants: {
-      disabled: {
-        true: "pointer-events-none",
-      },
-    },
-  },
+  content: "flex",
   label: {
     base: "text-gray-900 z-10 block !leading-none w-max",
     variants: {
@@ -51,10 +44,11 @@ export default /*tw*/ {
         true: "text-red-500",
       },
       disabled: {
-        true: "text-gray-500 pointer-events-none",
+        true: "text-gray-500 cursor-not-allowed",
       },
     },
     compoundVariants: [
+      { interactive: true, disabled: false, class: "hover:cursor-pointer" },
       { align: "topInside", size: "sm", class: "top-2 text-2xs" },
       { align: "topInside", size: "md", class: "top-2.5 text-xs" },
       { align: "topInside", size: "lg", class: "top-2.5 text-sm" },
@@ -101,5 +95,6 @@ export default /*tw*/ {
     size: "md",
     centred: false,
     disabled: false,
+    interactive: false,
   },
 };

package/ui.form-label/types.ts

@@ -25,6 +25,11 @@ export interface Props {
    */
   error?: string;
 
+  /**
+   * Make the label interactive (cursor pointer on hover).
+   */
+  interactive?: boolean;
+
   /**
    * Label align.
    */

package/ui.form-radio/URadio.vue

@@ -103,6 +103,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
+    interactive
     v-bind="radioLabelAttrs"
     :data-test="`${dataTest}-label`"
   >

package/ui.form-radio/config.ts

@@ -6,7 +6,7 @@ export default /*tw*/ {
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       disabled:border-gray-300 disabled:text-gray-100
-      checked:disabled:border-gray-400 checked:disabled:text-gray-400
+      checked:disabled:border-gray-400 checked:disabled:text-gray-400 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

package/ui.form-select/USelect.vue

@@ -465,6 +465,7 @@ const {
     :align="labelAlign"
     :disabled="disabled"
     centred
+    interactive
     v-bind="selectLabelAttrs"
     :data-test="dataTest"
     :tabindex="-1"
@@ -479,7 +480,7 @@ const {
       @blur="deactivate"
       @keydown.self.down.prevent="dropdownListRef?.pointerForward"
       @keydown.self.up.prevent="dropdownListRef?.pointerBackward"
-      @keydown.enter.tab.stop.self="dropdownListRef?.addPointerElement"
+      @keydown.enter.tab.stop.self="dropdownListRef?.addPointerElement()"
       @keyup.esc="deactivate"
     >
       <!-- @slot Use it to add something right. -->
@@ -677,7 +678,7 @@ const {
             @keyup.esc="deactivate"
             @keydown.down.prevent="dropdownListRef?.pointerForward"
             @keydown.up.prevent="dropdownListRef?.pointerBackward"
-            @keydown.enter.prevent.stop.self="dropdownListRef?.addPointerElement"
+            @keydown.enter.prevent.stop.self="dropdownListRef?.addPointerElement()"
           />
         </div>
 

package/ui.form-switch/USwitch.vue

@@ -105,6 +105,7 @@ const {
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
+    interactive
     v-bind="switchLabelAttrs"
     :data-test="dataTest"
     @click="onClickToggle"

package/ui.form-textarea/UTextarea.vue

@@ -200,6 +200,7 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
     :size="size"
     :disabled="disabled"
     :align="labelAlign"
+    interactive
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >

package/ui.form-textarea/config.ts

@@ -18,7 +18,10 @@ export default /*tw*/ {
         `,
       },
       disabled: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100 pointer-events-none",
+        true: `
+            focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100 
+            hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
+          `,
       },
     },
     compoundVariants: [
@@ -31,7 +34,7 @@ export default /*tw*/ {
     base: `
       p-0 block w-full bg-transparent border-none !leading-none font-normal text-gray-900
       placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
-      focus:border-none focus:outline-none focus:ring-0
+      focus:border-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

package/ui.image-icon/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   icon: {
-    base: "fill-current outline-0 shrink-0 grow-0",
+    base: "fill-current shrink-0 grow-0 focus:outline-0",
     variants: {
       variant: {
         light: "text-{color}-400 dark:text-{color}-200",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.601",
+  "version": "0.0.603",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7178,6 +7178,16 @@
                 "type": "string"
               }
             },
+            {
+              "name": "interactive",
+              "required": false,
+              "description": "Make the label interactive (cursor pointer on hover).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "align",
               "required": false,