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:
Joe
parent
1e11c4b22d
commit
aeeca0293a
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
{#if displayName}
|
||||
<div class="instance-name">
|
||||
<strong>{componentInstance._instanceName}</strong>
|
||||
{componentInstance._instanceName}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
@ -142,13 +142,15 @@
|
|||
}
|
||||
|
||||
.component-props-container {
|
||||
margin-top: 10px;
|
||||
margin-top: 16px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.instance-name {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
flex: 0 0 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -85,6 +85,8 @@ export const margin = [
|
|||
{ label: "20px", value: "20px" },
|
||||
{ label: "32px", value: "32px" },
|
||||
{ label: "64px", value: "64px" },
|
||||
{ label: "128px", value: "128px" },
|
||||
{ label: "256px", value: "256px" },
|
||||
{ label: "Auto", value: "auto" },
|
||||
{ label: "100%", value: "100%" },
|
||||
],
|
||||
|
|
@ -101,6 +103,8 @@ export const margin = [
|
|||
{ label: "20px", value: "20px" },
|
||||
{ label: "32px", value: "32px" },
|
||||
{ label: "64px", value: "64px" },
|
||||
{ label: "128px", value: "128px" },
|
||||
{ label: "256px", value: "256px" },
|
||||
{ label: "Auto", value: "auto" },
|
||||
{ label: "100%", value: "100%" },
|
||||
],
|
||||
|
|
@ -133,6 +137,8 @@ export const margin = [
|
|||
{ label: "20px", value: "20px" },
|
||||
{ label: "32px", value: "32px" },
|
||||
{ label: "64px", value: "64px" },
|
||||
{ label: "128px", value: "128px" },
|
||||
{ label: "256px", value: "256px" },
|
||||
{ label: "Auto", value: "auto" },
|
||||
{ label: "100%", value: "100%" },
|
||||
],
|
||||
|
|
@ -149,6 +155,8 @@ export const margin = [
|
|||
{ label: "20px", value: "20px" },
|
||||
{ label: "32px", value: "32px" },
|
||||
{ label: "64px", value: "64px" },
|
||||
{ label: "128px", value: "128px" },
|
||||
{ label: "256px", value: "256px" },
|
||||
{ label: "Auto", value: "auto" },
|
||||
{ label: "100%", value: "100%" },
|
||||
],
|
||||
|
|
|
|||
|
|
@ -313,7 +313,13 @@ export default {
|
|||
icon: "ri-archive-drawer-fill",
|
||||
properties: {
|
||||
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: [],
|
||||
},
|
||||
|
|
@ -330,11 +336,7 @@ export default {
|
|||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Model",
|
||||
key: "model",
|
||||
control: ModelSelect,
|
||||
},
|
||||
{ label: "Model", key: "model", control: ModelSelect,},
|
||||
],
|
||||
},
|
||||
template: {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,20 @@
|
|||
"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": {
|
||||
"name": "Button",
|
||||
"description": "an html <button />",
|
||||
|
|
@ -190,16 +204,22 @@
|
|||
"icon": {
|
||||
"description": "A HTML icon tag",
|
||||
"props": {
|
||||
"icon": "string",
|
||||
"fontSize": "string",
|
||||
"color": "string"
|
||||
"url": "string",
|
||||
"className": "string",
|
||||
"description": "string",
|
||||
"height": "string",
|
||||
"width": "string"
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
"description": "an HTML table that fetches data from a model or view and displays it.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"model": "models"
|
||||
"model": "models",
|
||||
"stripeColor": "string",
|
||||
"borderColor": "string",
|
||||
"backgroundColor": "string",
|
||||
"color": "string"
|
||||
}
|
||||
},
|
||||
"dataform": {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { cssVars, createClasses } from "./cssVars"
|
||||
|
||||
export let _bb
|
||||
export let onLoad
|
||||
export let model
|
||||
export let backgroundColor
|
||||
export let color
|
||||
export let stripeColor
|
||||
export let borderColor
|
||||
|
||||
let headers = []
|
||||
let store = _bb.store
|
||||
|
||||
$: cssVariables = {
|
||||
backgroundColor,
|
||||
color,
|
||||
stripeColor,
|
||||
borderColor,
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_RECORDS_URL = `/api/views/all_${model}`
|
||||
|
||||
|
|
@ -34,7 +46,7 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<table class="uk-table">
|
||||
<table use:cssVars={cssVariables}>
|
||||
<thead>
|
||||
<tr>
|
||||
{#each headers as header}
|
||||
|
|
@ -56,41 +68,71 @@
|
|||
</table>
|
||||
|
||||
<style>
|
||||
table {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #393c44;
|
||||
border: 1px solid #ccc;
|
||||
height: 40px;
|
||||
text-align: left;
|
||||
margin-right: 60px;
|
||||
}
|
||||
/* Zebra striping */
|
||||
tr:nth-of-type(odd) {
|
||||
background: var(--stripeColor);
|
||||
}
|
||||
|
||||
thead th {
|
||||
color: #ffffff;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-rendering: optimizeLegibility;
|
||||
justify-content: left;
|
||||
padding: 16px 20px 16px 8px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
th {
|
||||
background-color: var(--backgroundColor);
|
||||
color: var(--color);
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid #ccc;
|
||||
transition: 0.3s background-color;
|
||||
color: #393c44;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
td, th {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--borderColor);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue