feat: ktable checks & some stuff

calltek · Jan 23, 2025 · 57c3d4f · 57c3d4f
1 parent 3f3e4c9
commit 57c3d4f
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 20 deletions.
diff --git a/.storybook/helpers/params.ts b/.storybook/helpers/params.ts
@@ -72,8 +72,6 @@ export function renderArgsV2(props: any) {
                 }
             }
 
-            console.log(args)
-
             // args[prop.name].control = parseControl(prop, false)
             // args[prop.name].type.name = parseControl(prop, false).type
             // if (Array.isArray(prop.type)) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kodama-ui",
-    "version": "0.33.5",
+    "version": "0.35.3",
     "description": "Kodama UI is a Vue 3 component library that provides a set of components & funcionality to build your application.",
     "homepage": "https://50l3r.github.io/kodama-ui",
     "keywords": [

diff --git a/src/components/data-display/k-table/k-table.props.ts b/src/components/data-display/k-table/k-table.props.ts
@@ -75,5 +75,9 @@ export default {
     show404: {
         type: Boolean,
         default: true
+    },
+    disabledRows: {
+        type: Array as () => any[],
+        default: () => []
     }
 }
diff --git a/src/components/data-display/k-table/k-table.vue b/src/components/data-display/k-table/k-table.vue
@@ -225,17 +225,12 @@
                 <template v-for="(item, itemKey) in data" :key="itemKey">
                     <div class="k-table-tr">
                         <div v-if="selected" class="k-table-td w-6">
-                            <!-- <input
-                                            :checked="isRowChecked[itemKey]"
-                                            class="form-check-input widget-13-check"
-                                            type="checkbox"
-                                            @change="toggleCheck(itemKey)"
-                                        /> -->
                             <div>
                                 <input
                                     type="checkbox"
                                     class="k-checkbox w-4 h-4 -mt-1 border-gray-300 rounded dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-primary focus:ring-primary dark:focus:ring-primary"
                                     :checked="isRowChecked[itemKey]"
+                                    :disabled="isRowDisabled[itemKey]"
                                     @change="toggleCheck(itemKey)"
                                 />
                             </div>
@@ -550,8 +545,10 @@
             const {
                 toggleCheck,
                 isRowChecked,
+                isRowDisabled,
                 toggleGlobalCheck,
                 populateChecks,
+                uncheckDisabledRows,
                 isCheckedAll
             } = useCheck(props)
             const { isMore, loadMore, loadLess, busy, data, refresh } =
@@ -569,6 +566,9 @@
             // Create checks when data its modified
             watch(data, populateChecks, { deep: true })
 
+            // Remove selected checks id disabledRows changes
+            watch(isRowDisabled, uncheckDisabledRows, { deep: true })
+
             populateChecks()
             loadStoreParams()
 
@@ -622,6 +622,7 @@
                 colLength,
                 toggleCheck,
                 isRowChecked,
+                isRowDisabled,
                 toggleGlobalCheck,
                 busy,
                 enable404,

diff --git a/src/components/data-display/k-table/lib/check.ts b/src/components/data-display/k-table/lib/check.ts
@@ -36,17 +36,53 @@ export default function (props: KTableProps): any {
         })
     })
 
+    const isRowDisabled = computed(() => {
+        const key = props.index || 'id'
+
+        return props.data.map((data) => {
+            if (props.disabledRows) {
+                const isDisabled = props.disabledRows.includes(data[key])
+                if (isDisabled) return true
+            }
+
+            return false
+        })
+    })
+
     const toggleGlobalCheck = () => {
         if (props.selected) {
             const checked = props.selected
+            const allPosibleData = props.data.filter((c) => {
+                const key = props.index || 'id'
+                const isDisabled = props.disabledRows.includes(c[key])
 
-            if (checked.length >= props.data.length) {
+                return !isDisabled
+            })
+
+            if (checked.length >= allPosibleData.length) {
                 props.selected.splice(0, props.selected.length)
             } else {
                 props.selected.splice(0, props.selected.length)
 
                 for (let i = 0; i < props.data.length; i++) {
-                    props.selected.push(props.data[i])
+                    const isDisabled = isRowDisabled.value[i]
+                    if (!isDisabled) props.selected.push(props.data[i])
+                }
+            }
+        }
+    }
+
+    const uncheckDisabledRows = () => {
+        if (props.selected) {
+            for (let i = 0; i < props.selected.length; i++) {
+                const selected = props.selected[i]
+
+                const findIndex = props.disabledRows.findIndex(
+                    (d) => d === selected[props.index || 'id']
+                )
+
+                if (findIndex > -1) {
+                    props.selected.splice(i, 1)
                 }
             }
         }
@@ -87,7 +123,14 @@ export default function (props: KTableProps): any {
     const isCheckedAll = computed(() => {
         if (props.selected) {
             const checked = props.selected
-            if (checked.length >= props.data.length) {
+            const allPosibleData = props.data.filter((c) => {
+                const key = props.index || 'id'
+                const isDisabled = props.disabledRows.includes(c[key])
+
+                return !isDisabled
+            })
+
+            if (checked.length >= allPosibleData.length) {
                 return true
             }
         }
@@ -98,8 +141,10 @@ export default function (props: KTableProps): any {
     return {
         toggleCheck,
         isRowChecked,
+        isRowDisabled,
         toggleGlobalCheck,
         populateChecks,
-        isCheckedAll
+        isCheckedAll,
+        uncheckDisabledRows
     }
 }
diff --git a/src/components/navigation/k-dropdown/k-dropdown-submenu.vue b/src/components/navigation/k-dropdown/k-dropdown-submenu.vue
@@ -7,7 +7,6 @@
         theme="dropdown"
         tag="li"
         :placement="placement"
-        @state="onStateChange"
     >
         <template #default>
             <div class="flex flex-row items-center">
@@ -72,9 +71,9 @@
             }
         },
         setup(props) {
-            const onStateChange = (state: boolean) => {
-                console.log('state', state)
-            }
+            // const onStateChange = (state: boolean) => {
+            //     console.log('state', state)
+            // }
 
             const ulStyle = computed((): Record<string, any> => {
                 return {
@@ -85,7 +84,7 @@
                 }
             })
 
-            return { onStateChange, ulStyle }
+            return { ulStyle }
         }
     })
 </script>

diff --git a/src/helpers/storybook.ts b/src/helpers/storybook.ts
@@ -180,8 +180,6 @@ export function renderArgsV2(props: any) {
                 }
             }
 
-            console.log(args)
-
             // args[prop.name].control = parseControl(prop, false)
             // args[prop.name].type.name = parseControl(prop, false).type
             // if (Array.isArray(prop.type)) {

diff --git a/src/store/modules/query.ts b/src/store/modules/query.ts
@@ -12,6 +12,7 @@ export type QueryFilterOperator = {
     $like?: string
     $from?: string | Date
     $to?: string | Date
+    $null?: boolean
 }
 
 export type QueryCondition = {