Table component revised plus minor UI changes
Table redesigned to be more flexible and include setting props for better control
This commit is contained in:
parent
3d4b855ec8
commit
b8c0678c87
6 changed files with 122 additions and 49 deletions
|
@ -100,7 +100,7 @@
|
||||||
|
|
||||||
{#if displayName}
|
{#if displayName}
|
||||||
<div class="instance-name">
|
<div class="instance-name">
|
||||||
<strong>{componentInstance._instanceName}</strong>
|
{componentInstance._instanceName}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
@ -142,13 +142,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.component-props-container {
|
.component-props-container {
|
||||||
margin-top: 10px;
|
margin-top: 16px;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instance-name {
|
.instance-name {
|
||||||
margin-top: 10px;
|
margin-top: 20px;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -52,7 +52,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
flex: 0 0 50px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
@ -85,6 +85,8 @@ export const margin = [
|
||||||
{ label: "20px", value: "20px" },
|
{ label: "20px", value: "20px" },
|
||||||
{ label: "32px", value: "32px" },
|
{ label: "32px", value: "32px" },
|
||||||
{ label: "64px", value: "64px" },
|
{ label: "64px", value: "64px" },
|
||||||
|
{ label: "128px", value: "128px" },
|
||||||
|
{ label: "256px", value: "256px" },
|
||||||
{ label: "Auto", value: "auto" },
|
{ label: "Auto", value: "auto" },
|
||||||
{ label: "100%", value: "100%" },
|
{ label: "100%", value: "100%" },
|
||||||
],
|
],
|
||||||
|
@ -101,6 +103,8 @@ export const margin = [
|
||||||
{ label: "20px", value: "20px" },
|
{ label: "20px", value: "20px" },
|
||||||
{ label: "32px", value: "32px" },
|
{ label: "32px", value: "32px" },
|
||||||
{ label: "64px", value: "64px" },
|
{ label: "64px", value: "64px" },
|
||||||
|
{ label: "128px", value: "128px" },
|
||||||
|
{ label: "256px", value: "256px" },
|
||||||
{ label: "Auto", value: "auto" },
|
{ label: "Auto", value: "auto" },
|
||||||
{ label: "100%", value: "100%" },
|
{ label: "100%", value: "100%" },
|
||||||
],
|
],
|
||||||
|
@ -133,6 +137,8 @@ export const margin = [
|
||||||
{ label: "20px", value: "20px" },
|
{ label: "20px", value: "20px" },
|
||||||
{ label: "32px", value: "32px" },
|
{ label: "32px", value: "32px" },
|
||||||
{ label: "64px", value: "64px" },
|
{ label: "64px", value: "64px" },
|
||||||
|
{ label: "128px", value: "128px" },
|
||||||
|
{ label: "256px", value: "256px" },
|
||||||
{ label: "Auto", value: "auto" },
|
{ label: "Auto", value: "auto" },
|
||||||
{ label: "100%", value: "100%" },
|
{ label: "100%", value: "100%" },
|
||||||
],
|
],
|
||||||
|
@ -149,6 +155,8 @@ export const margin = [
|
||||||
{ label: "20px", value: "20px" },
|
{ label: "20px", value: "20px" },
|
||||||
{ label: "32px", value: "32px" },
|
{ label: "32px", value: "32px" },
|
||||||
{ label: "64px", value: "64px" },
|
{ label: "64px", value: "64px" },
|
||||||
|
{ label: "128px", value: "128px" },
|
||||||
|
{ label: "256px", value: "256px" },
|
||||||
{ label: "Auto", value: "auto" },
|
{ label: "Auto", value: "auto" },
|
||||||
{ label: "100%", value: "100%" },
|
{ label: "100%", value: "100%" },
|
||||||
],
|
],
|
||||||
|
|
|
@ -313,7 +313,13 @@ export default {
|
||||||
icon: "ri-archive-drawer-fill",
|
icon: "ri-archive-drawer-fill",
|
||||||
properties: {
|
properties: {
|
||||||
design: { ...all },
|
design: { ...all },
|
||||||
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
settings: [
|
||||||
|
{ label: "Model", key: "model", control: ModelSelect },
|
||||||
|
{ label: "Stripe Color", key: "stripeColor", control: Input },
|
||||||
|
{ label: "Border Color", key: "borderColor", control: Input },
|
||||||
|
{ label: "TH Color", key: "backgroundColor", control: Input },
|
||||||
|
{ label: "TH Font Color", key: "color", control: Input }
|
||||||
|
],
|
||||||
},
|
},
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
|
@ -330,11 +336,7 @@ export default {
|
||||||
properties: {
|
properties: {
|
||||||
design: { ...all },
|
design: { ...all },
|
||||||
settings: [
|
settings: [
|
||||||
{
|
{ label: "Model", key: "model", control: ModelSelect,},
|
||||||
label: "Model",
|
|
||||||
key: "model",
|
|
||||||
control: ModelSelect,
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
template: {
|
template: {
|
||||||
|
|
|
@ -26,6 +26,20 @@
|
||||||
"borderStyle": "string"
|
"borderStyle": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"Navigation1": {
|
||||||
|
"name": "Navigation1",
|
||||||
|
"description": "A basic left navigation component",
|
||||||
|
"props": {
|
||||||
|
"logoUrl": "string",
|
||||||
|
"title": "string",
|
||||||
|
"backgroundColor": "string",
|
||||||
|
"color": "string",
|
||||||
|
"borderWidth": "string",
|
||||||
|
"borderColor": "string",
|
||||||
|
"borderStyle": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"button": {
|
"button": {
|
||||||
"name": "Button",
|
"name": "Button",
|
||||||
"description": "an html <button />",
|
"description": "an html <button />",
|
||||||
|
@ -190,16 +204,22 @@
|
||||||
"icon": {
|
"icon": {
|
||||||
"description": "A HTML icon tag",
|
"description": "A HTML icon tag",
|
||||||
"props": {
|
"props": {
|
||||||
"icon": "string",
|
"url": "string",
|
||||||
"fontSize": "string",
|
"className": "string",
|
||||||
"color": "string"
|
"description": "string",
|
||||||
|
"height": "string",
|
||||||
|
"width": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"datatable": {
|
"datatable": {
|
||||||
"description": "an HTML table that fetches data from a model or view and displays it.",
|
"description": "an HTML table that fetches data from a model or view and displays it.",
|
||||||
"data": true,
|
"data": true,
|
||||||
"props": {
|
"props": {
|
||||||
"model": "models"
|
"model": "models",
|
||||||
|
"stripeColor": "string",
|
||||||
|
"borderColor": "string",
|
||||||
|
"backgroundColor": "string",
|
||||||
|
"color": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dataform": {
|
"dataform": {
|
||||||
|
|
|
@ -1,13 +1,25 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
import { cssVars, createClasses } from "./cssVars"
|
||||||
|
|
||||||
export let _bb
|
export let _bb
|
||||||
export let onLoad
|
export let onLoad
|
||||||
export let model
|
export let model
|
||||||
|
export let backgroundColor
|
||||||
|
export let color
|
||||||
|
export let stripeColor
|
||||||
|
export let borderColor
|
||||||
|
|
||||||
let headers = []
|
let headers = []
|
||||||
let store = _bb.store
|
let store = _bb.store
|
||||||
|
|
||||||
|
$: cssVariables = {
|
||||||
|
backgroundColor,
|
||||||
|
color,
|
||||||
|
stripeColor,
|
||||||
|
borderColor,
|
||||||
|
}
|
||||||
|
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const FETCH_RECORDS_URL = `/api/views/all_${model}`
|
const FETCH_RECORDS_URL = `/api/views/all_${model}`
|
||||||
|
|
||||||
|
@ -34,7 +46,7 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<table class="uk-table">
|
<table use:cssVars={cssVariables}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{#each headers as header}
|
{#each headers as header}
|
||||||
|
@ -56,41 +68,71 @@
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
table {
|
table {
|
||||||
border: 1px solid #ccc;
|
width: 100%;
|
||||||
background: #fff;
|
border-collapse: collapse;
|
||||||
border-radius: 3px;
|
}
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
/* Zebra striping */
|
||||||
background: #393c44;
|
tr:nth-of-type(odd) {
|
||||||
border: 1px solid #ccc;
|
background: var(--stripeColor);
|
||||||
height: 40px;
|
}
|
||||||
text-align: left;
|
|
||||||
margin-right: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th {
|
th {
|
||||||
color: #ffffff;
|
background-color: var(--backgroundColor);
|
||||||
text-transform: capitalize;
|
color: var(--color);
|
||||||
font-weight: 500;
|
font-weight: bold;
|
||||||
font-size: 14px;
|
text-transform: capitalize;
|
||||||
text-rendering: optimizeLegibility;
|
}
|
||||||
justify-content: left;
|
|
||||||
padding: 16px 20px 16px 8px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr {
|
td, th {
|
||||||
border-bottom: 1px solid #ccc;
|
padding: 16px;
|
||||||
transition: 0.3s background-color;
|
border: 1px solid var(--borderColor);
|
||||||
color: #393c44;
|
text-align: left;
|
||||||
font-size: 14px;
|
}
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:hover {
|
|
||||||
background: var(--grey-1);
|
@media
|
||||||
}
|
only screen and (max-width: 760px),
|
||||||
|
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force table to not be like tables anymore */
|
||||||
|
table, thead, tbody, th, td, tr {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide table headers (but not display: none;, for accessibility) */
|
||||||
|
thead tr {
|
||||||
|
position: absolute;
|
||||||
|
top: -9999px;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr { border: 1px solid var(--borderColor); }
|
||||||
|
|
||||||
|
td {
|
||||||
|
/* Behave like a "row" */
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:before {
|
||||||
|
/* Now like a table header */
|
||||||
|
position: absolute;
|
||||||
|
/* Top/left values mimic padding */
|
||||||
|
top: 6px;
|
||||||
|
left: 6px;
|
||||||
|
width: 45%;
|
||||||
|
padding-right: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
/* Label the data */
|
||||||
|
content: attr(data-column);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue