feat(VnTable): is-editable and use-model. fix: checkbox

src/components/VnTable/VnColumn.vue

@@ -61,13 +61,17 @@ const defaultComponents = {
     checkbox: {
         component: markRaw(QCheckbox),
         attrs: (prop) => {
-            return {
+            const defaultAttrs = {
                 disable: !$props.isEditable,
-                'true-value': 1,
-                'false-value': 0,
                 'model-value': Boolean(prop),
                 class: 'no-padding',
             };
+
+            if (typeof prop == 'number') {
+                defaultAttrs['true-value'] = 1;
+                defaultAttrs['false-value'] = 0;
+            }
+            return defaultAttrs;
         },
         forceAttrs: {
             label: null,
@@ -118,14 +122,14 @@ const components = computed(() => $props.components ?? defaultComponents);
         v-if="col.before"
         :prop="col.before"
         :components="components"
-        :value="$props.row"
+        :value="model"
         v-model="model"
     />
     <VnComponent
         v-if="col.component"
         :prop="col"
         :components="components"
-        :value="$props.row"
+        :value="model"
         v-model="model"
     />
     <span :title="value" v-else>{{ value }}</span>
@@ -133,7 +137,7 @@ const components = computed(() => $props.components ?? defaultComponents);
         v-if="col.after"
         :prop="col.after"
         :components="components"
-        :value="$props.row"
+        :value="model"
         v-model="model"
     />
 </template>

src/components/VnTable/VnFilter.vue

@@ -103,7 +103,7 @@ const components = {
 };
 
 async function addFilter(value) {
-    value ||= undefined;
+    value ??= undefined;
     if (value && typeof value === 'object') value = model.value;
     value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;

src/components/VnTable/VnTable.vue

@@ -51,6 +51,14 @@ const $props = defineProps({
         type: String,
         default: 'table',
     },
+    isEditable: {
+        type: Boolean,
+        default: null,
+    },
+    useModel: {
+        type: Boolean,
+        default: false,
+    },
 });
 const attrs = useAttrs();
 const { t } = useI18n();
@@ -127,6 +135,8 @@ function splitColumns(columns) {
         if (col.isTitle) splittedColumns.value.title = col;
         if (col.create) splittedColumns.value.create.push(col);
         if (col.cardVisible) splittedColumns.value.visible.push(col);
+        if ($props.isEditable && col.disable == null) col.disable = false;
+        if ($props.useModel) col.columnFilter = { ...col.columnFilter, inWhere: true };
         splittedColumns.value.columns.push(col);
     }
     // Status column
@@ -483,27 +493,6 @@ defineExpose({
     background-color: var(--vn-page-color);
 }
 
-/* Works on Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: grey transparent;
-}
-
-/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-    width: 12px;
-}
-
-*::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 20px;
-    border: 3px solid var(--vn-page-color);
-}
-
 .grid-three {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, max-content));

src/css/app.scss

@@ -196,3 +196,26 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
+
+/* ===== Scrollbar CSS ===== /
+/ Firefox */
+
+* {
+    scrollbar-width: auto;
+    scrollbar-color: var(--vn-label-color) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: var(--vn-label-color);
+    border-radius: 10px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}