v4.0.0

docs/.vitepress/config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
 		sidebar: sidebar,
 
 		socialLinks: [
-			{ icon: "github", link: "https://github.com/mohammadsiddiqui/masc-vue" },
+			{ icon: "github", link: "https://github.com/siddiquipro/masc-vue" },
 			{
 				icon: {
 					svg: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 10v4h2v-3h1v3h1v-4H4m5 0v5h2v-1h2v-4H9m3 1v2h-1v-2h1m2-1v4h2v-3h1v3h1v-3h1v3h1v-4h-6M3 9h18v6h-9v1H8v-1H3V9Z"/></svg>',

docs/.vitepress/head.ts

@@ -28,7 +28,7 @@ export default [
 	["meta", { name: "twitter:label2", content: "License" }],
 	["meta", { name: "twitter:data2", content: "MIT" }],
 	["meta", { name: "twitter:label3", content: "Github" }],
-	["meta", { name: "twitter:data3", content: "https://github.com/mohammadsiddiqui" }],
+	["meta", { name: "twitter:data3", content: "https://github.com/siddiquipro" }],
 	["meta", { name: "twitter:label4", content: "NPM" }],
 	["meta", { name: "twitter:data4", content: "https://www.npmjs.com/package/masc-vue" }],
 ] satisfies HeadConfig[];

docs/content/index.md

@@ -17,7 +17,7 @@ hero:
       link: /overview/getting-started
     - theme: alt
       text: View on GitHub
-      link: https://github.com/mohammadsiddiqui/masc-vue
+      link: https://github.com/siddiquipro/masc-vue
 
 features:
   - icon: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6 3.22-5.6Z"/><path fill="#41b883" d="m2 3.925 14 24.15 14-24.15h-5.6L16 18.415 7.53 3.925Z"/><path fill="#35495e" d="M7.53 3.925 16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"/></svg>

docs/content/overview/introduction.md

@@ -35,4 +35,4 @@ One of our main goals is to provide the best possible developer experience. We p
 
 To file issues, request features, and contribute, check out my GitHub.
 
-[GitHub repo](https://github.com/mohammadsiddiqui/masc-vue)
+[GitHub repo](https://github.com/siddiquipro/masc-vue)

example/src/components/stable.vue

@@ -2,7 +2,7 @@
 	<s-card title="Table">
 		<s-table :data="data" :meta="meta" @on-expand="onExpand">
 			<s-table-column type="expand" />
-			<s-table-column field="name" label="Name" filterable />
+			<s-table-column field="name" label="Name" filterable :options="options" />
 			<s-table-column field="email" label="Email" />
 			<s-table-column field="new" label="New User?" type="boolean" />
 			<s-table-column field="date" label="Date" type="date" class="text-center" />
@@ -23,13 +23,37 @@
 				</div>
 			</template>
 		</s-table>
+
+		<s-table :data="[]">
+			<s-table-column type="expand" />
+			<s-table-column field="name" label="Name" filterable />
+			<s-table-column field="email" label="Email" />
+
+			<template #no-data>
+				<div class="flex items-center justify-center gap-4 py-10">
+					<s-icon icon="mdi:alert" class="text-2xl text-gray-400" />
+					Nothing to show
+				</div>
+			</template>
+		</s-table>
 	</s-card>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useNotify } from "masc-vue";
 
+const options = ref([
+	{ text: "Name", value: "name" },
+	{ text: "Email", value: "email" },
+	{ text: "New User?", value: "new" },
+	{ text: "Date", value: "date" },
+]);
+
+setTimeout(() => {
+	options.value.push({ text: "New Column", value: "new_column" });
+}, 5000);
+
 const notify = useNotify();
 function onEdit(row: any) {
 	notify.alert(`Editing ${row.name}`);

packages/masc/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "masc-vue",
 	"private": false,
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"source": "src/index.ts",
 	"main": "./dist/index.umd.js",
 	"module": "./dist/index.es.js",
@@ -52,12 +52,12 @@
 	},
 	"homepage": "https://masc-vue.netlify.app",
 	"bugs": {
-		"url": "https://github.com/mohammadsiddiqui/masc-vue/issues",
+		"url": "https://github.com/siddiquipro/masc-vue/issues",
 		"email": "[email protected]"
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/mohammadsiddiqui/masc-vue.git",
+		"url": "https://github.com/siddiquipro/masc-vue.git",
 		"directory": "src"
 	},
 	"author": "Mohammad Siddiqui",

packages/masc/src/components/table/s-table-column.vue

@@ -15,6 +15,8 @@ import { getObjectValue } from "../../utils/helpers";
 import { formatDate, formatBoolean } from "../../utils/formatters";
 import icon from "../icon/icon.vue";
 
+defineOptions({ name: "STableColumn" });
+
 const emits = defineEmits(["onExpand"]);
 
 const props = defineProps({

packages/masc/src/components/table/s-table-filter.vue

@@ -1,21 +1,21 @@
 <template>
-  <th>
-    <div v-if="hasFilter" class="relative w-full" :class="filterValue ? 'has-icons-right' : ''">
-      <div v-if="props.options && props.options.length">
-        <select class="select select-sm w-full" v-model="filterValue" @change="onFilter">
-          <option value=""></option>
-          <option v-for="opt in options" :key="opt.value" :value="opt.value">{{ opt.text }}</option>
-        </select>
-      </div>
-      <input v-else-if="props.type === 'date'" type="date" v-model="filterValue" class="input input-sm w-full" @change="onFilter" />
-      <input v-else type="text" v-model="filterValue" class="input input-sm w-full" @keyup.enter="onFilter" />
-      <span class="absolute right-1 top-0 flex items-center justify-center h-full" v-if="filterValue" @click="clearFilter">
-        <button class="btn btn-circle btn-xs btn-ghost">
-          <icon icon="mdi:close" class="text-sm" />
-        </button>
-      </span>
-    </div>
-  </th>
+	<th>
+		<div v-if="hasFilter" class="relative w-full" :class="filterValue ? 'has-icons-right' : ''">
+			<div v-if="opts && opts.length">
+				<select class="select select-sm w-full" v-model="filterValue" @change="onFilter">
+					<option value=""></option>
+					<option v-for="opt in options" :key="opt.value" :value="opt.value">{{ opt.text }}</option>
+				</select>
+			</div>
+			<input v-else-if="props.type === 'date'" type="date" v-model="filterValue" class="input input-sm w-full" @change="onFilter" />
+			<input v-else type="text" v-model="filterValue" class="input input-sm w-full" @keyup.enter="onFilter" />
+			<span class="absolute right-1 top-0 flex items-center justify-center h-full" v-if="filterValue" @click="clearFilter">
+				<button class="btn btn-circle btn-xs btn-ghost">
+					<icon icon="mdi:close" class="text-sm" />
+				</button>
+			</span>
+		</div>
+	</th>
 </template>
 
 <script setup lang="ts">
@@ -29,12 +29,16 @@ const emits = defineEmits(["onFilter"]);
 
 const filterValue = ref(null);
 
+const opts = computed(() => {
+	return props.options?.length ? props.options : [];
+});
+
 function onFilter() {
-  emits("onFilter", { field: props.field, value: filterValue.value });
+	emits("onFilter", { field: props.field, value: filterValue.value });
 }
 
 function clearFilter() {
-  filterValue.value = null;
-  onFilter();
+	filterValue.value = null;
+	onFilter();
 }
 </script>

packages/masc/src/components/table/s-table.vue

@@ -40,7 +40,9 @@
 				</template>
 				<tr v-if="slotData && slotData.length > 0 && (!data || data.length == 0)">
 					<td :colspan="colCount" class="text-center">
-						<div class="py-3">{{ props.noDataText }}</div>
+						<slot name="no-data">
+							<div class="py-3 s-no-data">{{ props.noDataText }}</div>
+						</slot>
 					</td>
 				</tr>
 			</tbody>
@@ -120,15 +122,17 @@ const colCount = computed(() => slotData.value.length + (props.selectable ? 1 :
 const slotData = computed(() => {
 	const slots = useSlots();
 	const temps = slots && slots.default ? slots.default() : [];
+	const cols: any[] = [];
+	const addToCols = (slotCols: any) => {
+		for (const col of slotCols) {
+			if (col.type.name !== "STableColumn") continue;
+			cols.push(col);
+		}
+	};
 
-	const cols = [];
 	for (const col of temps) {
 		const children: any = col.children;
-		if (children && children.length > 0) {
-			cols.push(...children);
-		} else {
-			cols.push(col);
-		}
+		children?.length ? addToCols(children) : addToCols([col]);
 	}
 	return cols;
 });