@tak-ps/vue-tabler 3.79.3 → 3.81.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v3.81.0
+
+- :rocket: Add visual indicator on hover to TablerIconButton
+- :tada: Support Disabled State for TablerIconButton & TablerDelete
+
+### v3.80.0
+
+- :rocket: Add `clickAnywhereExpand` prop to TablerSlidedown
+
 ### v3.79.3
 
 - :bug: Remove Debug Code

package/components/Delete.vue

@@ -1,17 +1,21 @@
 <template>
     <div>
         <template v-if='props.displaytype === "button"'>
-            <div
+            <button
                 class='btn btn-outline-danger'
-                @click.stop.prevent='modal = true'
+                :disabled='props.disabled'
+                @click.stop.prevent='props.disabled ? undefined : modal = true'
             >
                 <span v-text='props.label' />
-            </div>
+            </button>
         </template>
         <template v-else-if='props.displaytype === "menu"'>
             <div
-                class='cursor-pointer col-12 d-flex align-items-center px-2 py-2'
-                @click.stop.prevent='modal = true'
+                class='col-12 d-flex align-items-center px-2 py-2'
+                :class='{
+                    "cursor-pointer": !props.disabled,
+                }'
+                @click.stop.prevent='props.disabled ? undefined : modal = true'
             >
                 <IconTrash
                     :size='32'
@@ -26,7 +30,8 @@
         <template v-else>
             <TablerIconButton
                 title='Delete'
-                @click.stop.prevent='modal = true'
+                :disabled='props.disabled'
+                @click.stop.prevent='props.disabled ? undefined : modal = true'
             >
                 <IconTrash
                     :size='props.size'
@@ -91,6 +96,10 @@ const props = defineProps({
         type: Number,
         default: 32
     },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
     displaytype: {
         type: String,
         default: 'button' // Or icon

package/components/IconButton.vue

@@ -1,10 +1,15 @@
 <template>
     <div
         :ref='iconid'
-        v-tooltip='title'
+        v-tooltip='props.title'
         tabindex='0'
         role='button'
-        class='cursor-pointer rounded'
+        :class='{
+            "cursor-pointer": props.disabled === false,
+            "cursor-default disabled": props.disabled === true,
+            "custom-hover": props.hover,
+        }'
+        class='rounded'
         @keyup.enter='icon.click()'
     >
         <slot />
@@ -18,10 +23,28 @@ const iconid = useId();
 
 const icon = useTemplateRef(iconid);
 
-defineProps({
+const props = defineProps({
     title: {
         type: String,
         required: true
     },
+    hover: {
+        type: Boolean,
+        default: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
 })
 </script>
+
+<style scoped>
+.disabled {
+    color: var(--tblr-gray-500);
+}
+
+.custom-hover:not(.disabled):hover {
+    background-color: var(--tblr-border-color);
+}
+</style>

package/components/Slidedown.vue

@@ -2,8 +2,10 @@
     <div
         class='hover-expandable rounded position-relative px-2 py-2'
         :class='{
-            "expanded": isExpanded
+            "expanded": isExpanded,
+            "cursor-pointer": props.clickAnywhereExpand && !isExpanded
         }'
+        @click='(props.clickAnywhereExpand && !isExpanded) ? toggle() : null'
     >
         <div class='mb-2'>
             <slot />
@@ -21,7 +23,7 @@
         <div
             class='arrow-container'
             title='Toggle content'
-            @click='toggle'
+            @click.stop='toggle'
         >
             <IconChevronDown
                 size='24'
@@ -45,6 +47,13 @@ const isExpanded = ref(false);
 
 const contentWrapperRef = ref(null);
 
+const props = defineProps({
+    clickAnywhereExpand: {
+        type: Boolean,
+        default: false
+    }
+});
+
 function toggle() {
     isExpanded.value = !isExpanded.value;
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.79.3",
+    "version": "3.81.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",