← All changes | blocks/data-table/index.js +21 -41 2.0.2 → 2.0.14 View file →

		@@ -1,5 +1,5 @@
1		-wp.domReady(function () {
	1	+( function () {
2	2	var el = wp.element.createElement;
3	3	var Fragment = wp.element.Fragment;
4	4	var __ = wp.i18n.__;
5	5	var registerBlockType = wp.blocks.registerBlockType;
		@@ -13,12 +13,16 @@
13	13	var SelectControl = wp.components.SelectControl;
14	14	var TextControl = wp.components.TextControl;
15	15	var TextareaControl = wp.components.TextareaControl;
16	16
	17	+ var _dtTC, _dtTV;
	18	+ function _tc() { return _dtTC || (_dtTC = window.bkbgTypographyControl); }
	19	+ function _tv(obj, prefix) { var fn = _dtTV || (_dtTV = window.bkbgTypoCssVars); return fn ? fn(obj, prefix) : {}; }
	20	+
17	21	registerBlockType('blockenberg/data-table', {
18	22	title: __('Data Table', 'blockenberg'),
19	23	icon: 'editor-table',
20		- category: 'blockenberg',
	24	+ category: 'bkbg-charts',
21	25	description: __('Interactive data table with sorting, search, pagination and export.', 'blockenberg'),
22	26
23	27	edit: function (props) {
24	28	var attributes = props.attributes;
		@@ -350,34 +354,10 @@
350	354	),
351	355
352	356	// Typography
353	357	el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false },
354		- el(RangeControl, {
355		- label: __('Header Font Size', 'blockenberg'),
356		- value: a.headerFontSize,
357		- min: 12,
358		- max: 20,
359		- onChange: function (v) { setAttributes({ headerFontSize: v }); }
360		- }),
361		- el(SelectControl, {
362		- label: __('Header Font Weight', 'blockenberg'),
363		- value: a.headerFontWeight,
364		- options: fontWeightOptions,
365		- onChange: function (v) { setAttributes({ headerFontWeight: parseInt(v, 10) }); }
366		- }),
367		- el(RangeControl, {
368		- label: __('Cell Font Size', 'blockenberg'),
369		- value: a.cellFontSize,
370		- min: 12,
371		- max: 18,
372		- onChange: function (v) { setAttributes({ cellFontSize: v }); }
373		- }),
374		- el(SelectControl, {
375		- label: __('Cell Font Weight', 'blockenberg'),
376		- value: a.cellFontWeight,
377		- options: fontWeightOptions,
378		- onChange: function (v) { setAttributes({ cellFontWeight: parseInt(v, 10) }); }
379		- })
	358	+ _tc() && el(_tc(), { label: __('Header', 'blockenberg'), value: a.typoHeader, onChange: function (v) { setAttributes({ typoHeader: v }); } }),
	359	+ _tc() && el(_tc(), { label: __('Cell', 'blockenberg'), value: a.typoCell, onChange: function (v) { setAttributes({ typoCell: v }); } })
380	360	),
381	361
382	362	// Colors
383	363	el(PanelColorSettings, {
		@@ -426,9 +406,9 @@
426	406	)
427	407	);
428	408
429	409	// CSS variables
430		- var wrapStyle = {
	410	+ var wrapStyle = Object.assign({
431	411	'--bkbg-dt-header-bg': a.headerBg,
432	412	'--bkbg-dt-header-color': a.headerColor,
433	413	'--bkbg-dt-header-border': a.headerBorderColor,
434	414	'--bkbg-dt-cell-bg': a.cellBg,
		@@ -436,8 +416,9 @@
436	416	'--bkbg-dt-cell-color': a.cellColor,
437	417	'--bkbg-dt-cell-border': a.cellBorderColor,
438	418	'--bkbg-dt-hover-bg': a.hoverBg,
439	419	'--bkbg-dt-accent': a.accentColor,
	420	+ /* legacy fallback vars */
440	421	'--bkbg-dt-header-font-size': a.headerFontSize + 'px',
441	422	'--bkbg-dt-header-font-weight': a.headerFontWeight,
442	423	'--bkbg-dt-cell-font-size': a.cellFontSize + 'px',
443	424	'--bkbg-dt-cell-font-weight': a.cellFontWeight,
		@@ -443,13 +424,13 @@
443	424	'--bkbg-dt-cell-font-weight': a.cellFontWeight,
444	425	'--bkbg-dt-cell-padding': a.cellPadding + 'px',
445	426	'--bkbg-dt-brd-w': a.borderWidth + 'px',
446	427	'--bkbg-dt-radius': a.borderRadius + 'px'
447		- };
	428	+ }, _tv(a.typoHeader || {}, '--bkbg-dt-hdr-'), _tv(a.typoCell || {}, '--bkbg-dt-cel-'));
448	429
449	430	// Build editor table
450	431	var headerCells = a.headers.map(function (header, colIndex) {
451		- return el('th', { className: 'bkbg-dt-editor-th', key: 'th-' + colIndex },
	432	+ return el('th', { className: 'bkbg-dt-th bkbg-dt-editor-th', key: 'th-' + colIndex },
452	433	el('input', {
453	434	className: 'bkbg-dt-editor-input',
454	435	type: 'text',
455	436	value: header,
		@@ -496,9 +477,9 @@
496	477	});
497	478
498	479	var bodyRows = a.rows.map(function (row, rowIndex) {
499	480	var cells = row.map(function (cell, colIndex) {
500		- return el('td', { className: 'bkbg-dt-editor-td', key: 'td-' + colIndex },
	481	+ return el('td', { className: 'bkbg-dt-td bkbg-dt-editor-td', key: 'td-' + colIndex },
501	482	el('input', {
502	483	className: 'bkbg-dt-editor-input',
503	484	type: 'text',
504	485	value: cell,
		@@ -569,13 +550,13 @@
569	550	el('tr', {}, headerCells)
570	551	),
571	552	el('tbody', {}, bodyRows)
572	553	)
573		- ),
574		- el('div', { className: 'bkbg-dt-editor-actions' },
575		- el(Button, { variant: 'secondary', onClick: addRow }, __('+ Add Row', 'blockenberg')),
576		- el(Button, { variant: 'secondary', onClick: addColumn }, __('+ Add Column', 'blockenberg'))
577	554	)
	555	+ ),
	556	+ el('div', { className: 'bkbg-editor-actions' },
	557	+ el(Button, { variant: 'secondary', icon: 'plus-alt2', onClick: addRow }, __('Add Row', 'blockenberg')),
	558	+ el(Button, { variant: 'secondary', icon: 'plus-alt2', onClick: addColumn }, __('Add Column', 'blockenberg'))
578	559	)
579	560	);
580	561	},
581	562
		@@ -581,9 +562,9 @@
581	562
582	563	save: function (props) {
583	564	var a = props.attributes;
584	565
585		- var wrapStyle = {
	566	+ var wrapStyle = Object.assign({
586	567	'--bkbg-dt-header-bg': a.headerBg,
587	568	'--bkbg-dt-header-color': a.headerColor,
588	569	'--bkbg-dt-header-border': a.headerBorderColor,
589	570	'--bkbg-dt-cell-bg': a.cellBg,
		@@ -591,8 +572,9 @@
591	572	'--bkbg-dt-cell-color': a.cellColor,
592	573	'--bkbg-dt-cell-border': a.cellBorderColor,
593	574	'--bkbg-dt-hover-bg': a.hoverBg,
594	575	'--bkbg-dt-accent': a.accentColor,
	576	+ /* legacy fallback vars */
595	577	'--bkbg-dt-header-font-size': a.headerFontSize + 'px',
596	578	'--bkbg-dt-header-font-weight': a.headerFontWeight,
597	579	'--bkbg-dt-cell-font-size': a.cellFontSize + 'px',
598	580	'--bkbg-dt-cell-font-weight': a.cellFontWeight,
		@@ -598,9 +580,9 @@
598	580	'--bkbg-dt-cell-font-weight': a.cellFontWeight,
599	581	'--bkbg-dt-cell-padding': a.cellPadding + 'px',
600	582	'--bkbg-dt-brd-w': a.borderWidth + 'px',
601	583	'--bkbg-dt-radius': a.borderRadius + 'px'
602		- };
	584	+ }, _tv(a.typoHeader || {}, '--bkbg-dt-hdr-'), _tv(a.typoCell || {}, '--bkbg-dt-cel-'));
603	585
604	586	// Search icon SVG
605	587	var searchIcon = el('svg', {
606	588	className: 'bkbg-dt-search-icon',
		@@ -699,7 +681,5 @@
699	681	)
700	682	);
701	683	}
702	684	});
703		-});
704		-
705		-
	685	+}() );