smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use hexColorValue in borders and underlines

Browse Source
This commit is contained in:
Tom Hunkapiller
2021-05-24 08:42:34 +03:00
parent ee105cdb83
commit 097c6a5962
16 changed files with 59 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/2-declaritive-styles.ts
View File

@ -24,7 +24,7 @@ const doc = new Document({
size: 28,
bold: true,
italics: true,
color: "red",
color: "FF0000",
},
paragraph: {
spacing: {

6
demo/20-table-cell-borders.ts
View File

@ -36,17 +36,17 @@ const doc = new Document({
top: {
style: BorderStyle.DASH_DOT_STROKED,
size: 3,
color: "red",
color: "FF0000",
},
bottom: {
style: BorderStyle.DOUBLE,
size: 3,
color: "blue",
color: "0000FF",
},
left: {
style: BorderStyle.DASH_DOT_STROKED,
size: 3,
color: "green",
color: "00FF00",
},
right: {
style: BorderStyle.DASH_DOT_STROKED,

8
demo/32-merge-and-shade-table-cells.ts
View File

@ -224,22 +224,22 @@ const borders = {
top: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "FF0000",
},
bottom: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "FF0000",
},
left: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "FF0000",
},
right: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "FF0000",
},
};

2
demo/45-highlighting-text.ts
View File

@ -14,7 +14,7 @@ const doc = new Document({
children: [
new TextRun({
text: "Hello World",
color: "red",
color: "FF0000",
bold: true,
size: 24,
font: {

2
demo/46-shading-text.ts
View File

@ -14,7 +14,7 @@ const doc = new Document({
children: [
new TextRun({
text: "Hello World",
color: "red",
color: "FF0000",
bold: true,
size: 24,
font: {

8
demo/49-table-borders.ts
View File

@ -24,22 +24,22 @@ const table = new Table({
top: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "ff0000",
},
bottom: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "ff0000",
},
left: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "ff0000",
},
right: {
style: BorderStyle.DASH_SMALL_GAP,
size: 1,
color: "red",
color: "ff0000",
},
},
children: [new Paragraph("Hello")],

2
demo/60-track-revisions.ts
View File

@ -85,7 +85,7 @@ const doc = new Document({
new DeletedTextRun({
break: 1,
text: "in order",
color: "red",
color: "ff0000",
bold: true,
size: 24,
font: {

2
docs/usage/change-tracking.md
View File

@ -37,7 +37,7 @@ const paragraph = new Paragraph({
new TextRun("This is a simple demo"),
new DeletedTextRun({
text: "with a deletion.",
color: "red",
color: "ff0000",
bold: true,
size: 24,
id: 0,

4
docs/usage/tables.md
View File

@ -183,7 +183,7 @@ const cell = new TableCell({
top: {
style: BorderStyle.DASH_DOT_STROKED,
size: 1,
color: "red",
color: "ff0000",
},
bottom: {
style: BorderStyle.THICK_THIN_MEDIUM_GAP,
@ -205,7 +205,7 @@ const cell = new TableCell({
left: {
style: BorderStyle.DOT_DOT_DASH,
size: 3,
color: "green",
color: "00FF00",
},
right: {
style: BorderStyle.DOT_DOT_DASH,

10
src/file/border/border.ts
View File

@ -20,6 +20,7 @@
// <xsd:attribute name="frame" type="s:ST_OnOff" use="optional"/>
// </xsd:complexType>
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { hexColorValue } from "../values";
export interface IBorderOptions {
readonly style: BorderStyle;
@ -29,9 +30,14 @@ export interface IBorderOptions {
}
export class BorderElement extends XmlComponent {
constructor(elementName: string, options: IBorderOptions) {
constructor(elementName: string, { color, ...options }: IBorderOptions) {
super(elementName);
this.root.push(new TableBordersAttributes(options));
this.root.push(
new TableBordersAttributes({
...options,
color: color === undefined ? color : hexColorValue(color),
}),
);
}
}

16
src/file/paragraph/formatting/border.spec.ts
View File

@ -10,25 +10,25 @@ describe("Border", () => {
it("should create", () => {
const border = new Border({
top: {
color: "red",
color: "FF0000",
space: 1,
style: BorderStyle.WAVE,
size: 2,
},
bottom: {
color: "red",
color: "FF0000",
space: 3,
style: BorderStyle.WAVE,
size: 4,
},
left: {
color: "red",
color: "FF0000",
space: 5,
style: BorderStyle.WAVE,
size: 6,
},
right: {
color: "red",
color: "FF0000",
space: 7,
style: BorderStyle.WAVE,
size: 8,
@ -42,7 +42,7 @@ describe("Border", () => {
{
"w:top": {
_attr: {
"w:color": "red",
"w:color": "FF0000",
"w:space": 1,
"w:sz": 2,
"w:val": "wave",
@ -52,7 +52,7 @@ describe("Border", () => {
{
"w:bottom": {
_attr: {
"w:color": "red",
"w:color": "FF0000",
"w:space": 3,
"w:sz": 4,
"w:val": "wave",
@ -62,7 +62,7 @@ describe("Border", () => {
{
"w:left": {
_attr: {
"w:color": "red",
"w:color": "FF0000",
"w:space": 5,
"w:sz": 6,
"w:val": "wave",
@ -72,7 +72,7 @@ describe("Border", () => {
{
"w:right": {
_attr: {
"w:color": "red",
"w:color": "FF0000",
"w:space": 7,
"w:sz": 8,
"w:val": "wave",

4
src/file/paragraph/run/symbol-run.spec.ts
View File

@ -43,7 +43,7 @@ describe("SymbolRun", () => {
italics: true,
bold: true,
underline: {
color: "red",
color: "ff0000",
type: UnderlineType.DOUBLE,
},
emphasisMark: {
@ -63,7 +63,7 @@ describe("SymbolRun", () => {
{ "w:bCs": { _attr: { "w:val": true } } },
{ "w:i": { _attr: { "w:val": true } } },
{ "w:iCs": { _attr: { "w:val": true } } },
{ "w:u": { _attr: { "w:val": "double", "w:color": "red" } } },
{ "w:u": { _attr: { "w:val": "double", "w:color": "ff0000" } } },
{ "w:em": { _attr: { "w:val": "dot" } } },
{ "w:color": { _attr: { "w:val": "00FF00" } } },
{ "w:sz": { _attr: { "w:val": 40 } } },

3
src/file/paragraph/run/underline.ts
View File

@ -1,3 +1,4 @@
import { hexColorValue } from "file/values";
import { Attributes, XmlComponent } from "file/xml-components";
export enum UnderlineType {
@ -26,7 +27,7 @@ export abstract class BaseUnderline extends XmlComponent {
this.root.push(
new Attributes({
val: underlineType,
color: color,
color: color === undefined ? color : hexColorValue(color),
}),
);
}

4
src/file/table/table-cell/table-cell-properties.spec.ts
View File

@ -73,7 +73,7 @@ describe("TableCellProperties", () => {
borders: {
top: {
style: BorderStyle.DASH_DOT_STROKED,
color: "red",
color: "ff0000",
size: 3,
},
},
@ -82,7 +82,7 @@ describe("TableCellProperties", () => {
const tree = new Formatter().format(properties);
expect(tree["w:tcPr"][0]).to.deep.equal({
"w:tcBorders": [{ "w:top": { _attr: { "w:val": "dashDotStroked", "w:sz": 3, "w:color": "red" } } }],
"w:tcBorders": [{ "w:top": { _attr: { "w:val": "dashDotStroked", "w:sz": 3, "w:color": "ff0000" } } }],
});
});

14
src/file/table/table-cell/table-cell.spec.ts
View File

@ -570,17 +570,17 @@ describe("TableCell", () => {
top: {
style: BorderStyle.DASH_DOT_STROKED,
size: 3,
color: "red",
color: "FF0000",
},
bottom: {
style: BorderStyle.DOUBLE,
size: 3,
color: "blue",
color: "0000ff",
},
left: {
style: BorderStyle.DASH_DOT_STROKED,
size: 3,
color: "green",
color: "00ff00",
},
right: {
style: BorderStyle.DASH_DOT_STROKED,
@ -601,7 +601,7 @@ describe("TableCell", () => {
{
"w:top": {
_attr: {
"w:color": "red",
"w:color": "FF0000",
"w:sz": 3,
"w:val": "dashDotStroked",
},
@ -610,7 +610,7 @@ describe("TableCell", () => {
{
"w:left": {
_attr: {
"w:color": "green",
"w:color": "00ff00",
"w:sz": 3,
"w:val": "dashDotStroked",
},
@ -619,7 +619,7 @@ describe("TableCell", () => {
{
"w:bottom": {
_attr: {
"w:color": "blue",
"w:color": "0000ff",
"w:sz": 3,
"w:val": "double",
},
@ -628,7 +628,7 @@ describe("TableCell", () => {
{
"w:right": {
_attr: {
"w:color": "#ff8000",
"w:color": "ff8000",
"w:sz": 3,
"w:val": "dashDotStroked",
},

24
src/file/table/table-properties/table-borders.spec.ts
View File

@ -79,7 +79,7 @@ describe("TableBorders", () => {
top: {
style: BorderStyle.DOUBLE,
size: 1,
color: "red",
color: "FF0000",
},
});
@ -89,7 +89,7 @@ describe("TableBorders", () => {
{
"w:top": {
_attr: {
"w:color": "red",
"w:color": "FF0000",
"w:sz": 1,
"w:val": "double",
},
@ -151,7 +151,7 @@ describe("TableBorders", () => {
left: {
style: BorderStyle.DOUBLE,
size: 1,
color: "red",
color: "ff0000",
},
});
const tree = new Formatter().format(tableBorders);
@ -170,7 +170,7 @@ describe("TableBorders", () => {
{
"w:left": {
_attr: {
"w:color": "red",
"w:color": "ff0000",
"w:sz": 1,
"w:val": "double",
},
@ -223,7 +223,7 @@ describe("TableBorders", () => {
bottom: {
style: BorderStyle.DOUBLE,
size: 1,
color: "red",
color: "ff0000",
},
});
const tree = new Formatter().format(tableBorders);
@ -251,7 +251,7 @@ describe("TableBorders", () => {
{
"w:bottom": {
_attr: {
"w:color": "red",
"w:color": "ff0000",
"w:sz": 1,
"w:val": "double",
},
@ -295,7 +295,7 @@ describe("TableBorders", () => {
right: {
style: BorderStyle.DOUBLE,
size: 1,
color: "red",
color: "ff0000",
},
});
const tree = new Formatter().format(tableBorders);
@ -332,7 +332,7 @@ describe("TableBorders", () => {
{
"w:right": {
_attr: {
"w:color": "red",
"w:color": "ff0000",
"w:sz": 1,
"w:val": "double",
},
@ -367,7 +367,7 @@ describe("TableBorders", () => {
insideHorizontal: {
style: BorderStyle.DOUBLE,
size: 1,
color: "red",
color: "ff0000",
},
});
const tree = new Formatter().format(tableBorders);
@ -413,7 +413,7 @@ describe("TableBorders", () => {
{
"w:insideH": {
_attr: {
"w:color": "red",
"w:color": "ff0000",
"w:sz": 1,
"w:val": "double",
},
@ -439,7 +439,7 @@ describe("TableBorders", () => {
insideVertical: {
style: BorderStyle.DOUBLE,
size: 1,
color: "red",
color: "ff0000",
},
});
const tree = new Formatter().format(tableBorders);
@ -494,7 +494,7 @@ describe("TableBorders", () => {
{
"w:insideV": {
_attr: {
"w:color": "red",
"w:color": "ff0000",
"w:sz": 1,
"w:val": "double",
},