Skip to content

Commit

Permalink
Merge pull request #45 from FelipeSimoes/feature-virtual-transforms
Browse files Browse the repository at this point in the history
[ready] Feature virtual transforms
  • Loading branch information
FelipeSimoes authored Sep 27, 2024
2 parents 360e0a7 + a628b14 commit d6930ab
Show file tree
Hide file tree
Showing 23 changed files with 787 additions and 904 deletions.
1 change: 0 additions & 1 deletion blocks/card/card.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ raqn-card {
}

raqn-card > div {
display: flex;
gap: var(--gap, 20px);
position: relative;
background: var(--inner-background, transparent);
Expand Down
2 changes: 1 addition & 1 deletion blocks/card/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default class Card extends ComponentBase {
attributesValues = {
all: {
data: {
columns: '4',
columns: '3',
ratio: 'auto',
eager: '0',
},
Expand Down
9 changes: 3 additions & 6 deletions blocks/grid/grid.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,9 @@ raqn-grid {
display: grid;

/* defaults to 2 columns */
grid-template-columns: var(--grid-tpl-columns);
grid-template-rows: var(--grid-tpl-rows);
grid-template-areas: var(--grid-tpl-areas);
grid-auto-columns: var(--grid-auto-columns);
grid-auto-rows: var(--grid-auto-rows);
gap: var(--gap, 20px);
grid-template-columns: var(--grid-template-columns, 1fr 1fr);
grid-template-rows: var(--grid-template-rows, 1fr);
gap: var(--grid-gap, 20px);
justify-items: var(--grid-justify-items);
align-items: var(--grid-align-items);
justify-content: var(--grid-justify-content);
Expand Down
215 changes: 215 additions & 0 deletions blocks/grid/grid.editor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
export default function config() {
return {
inline: {
component: 'InlineEditGridComponent',
inputs: [],
},
attributes: {
grid: {
'template-rows': {
type: 'text',
label: 'Row',
helpText: 'The row number.',
value: '1fr',
},
'template-columns': {
type: 'text',
label: 'Columns',
helpText: 'The column number.',
value: '1fr 1fr',
},
gap: {
type: 'text',
label: 'Gap',
helpText: 'The gap between the grid items.',
value: '20px',
},
},
data: {
level: {
type: 'text',
label: 'Level',
helpText: 'The level of the grid.',
value: '1',
},
height: {
type: 'text',
label: 'Height',
helpText: 'The height of the grid.',
value: '100%',
},
width: {
type: 'text',
label: 'Width',
helpText: 'The width of the grid.',
value: '100%',
},
reverse: {
type: 'select',
options: [
{
label: 'Default',
value: 'default',
},
{
label: 'True',
value: 'true',
},
{
label: 'Alternate',
value: 'alternate',
},
],
label: 'Reverse',
helpText: 'Reverse the order of the grid items.',
},
columns: {
type: 'text',
label: 'Columns',
helpText: 'Number of columns in the grid.',
value: 'auto',
},
rows: {
type: 'text',
label: 'Rows',
helpText: 'Number of rows in the grid.',
value: 'auto',
},
'auto-columns': {
type: 'text',
label: 'Auto Columns',
helpText: 'The width of the columns.',
value: 'auto',
},
'auto-rows': {
type: 'text',
label: 'Auto Rows',
helpText: 'The height of the rows.',
value: 'auto',
},
areas: {
type: 'text',
label: 'Areas',
helpText: 'The grid areas.',
value: '',
},
'justify-items': {
type: 'select',
options: [
{
label: 'Start',
value: 'start',
},
{
label: 'End',
value: 'end',
},
{
label: 'Center',
value: 'center',
},
{
label: 'Stretch',
value: 'stretch',
},
],
label: 'Justify Items',
helpText: 'The alignment of the items along the inline (row) axis.',
},
'align-items': {
type: 'select',
options: [
{
label: 'Start',
value: 'start',
},
{
label: 'End',
value: 'end',
},
{
label: 'Center',
value: 'center',
},
{
label: 'Stretch',
value: 'stretch',
},
],
label: 'Align Items',
helpText: 'The alignment of the items along the block (column) axis.',
},
'justify-content': {
type: 'select',
options: [
{
label: 'Start',
value: 'start',
},
{
label: 'End',
value: 'end',
},
{
label: 'Center',
value: 'center',
},
{
label: 'Stretch',
value: 'stretch',
},
{
label: 'Space Around',
value: 'space-around',
},
{
label: 'Space Between',
value: 'space-between',
},
{
label: 'Space Evenly',
value: 'space-evenly',
},
],
label: 'Justify Content',
helpText: 'The alignment of the grid along the inline (row) axis.',
},
'align-content': {
type: 'select',
options: [
{
label: 'Start',
value: 'start',
},
{
label: 'End',
value: 'end',
},
{
label: 'Center',
value: 'center',
},
{
label: 'Stretch',
value: 'stretch',
},
{
label: 'Space Around',
value: 'space-around',
},
{
label: 'Space Between',
value: 'space-between',
},
{
label: 'Space Evenly',
value: 'space-evenly',
},
],
label: 'Align Content',
helpText: 'The alignment of the grid along the block (column) axis.',
},
},
},
};
}
Loading

0 comments on commit d6930ab

Please sign in to comment.