diff --git a/README.md b/README.md index 08386c0..bdaedbc 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,9 @@ Simple countdown component for GrapesJS Editor * Added `id` * Removed `blocks` and `labelCountdownCategory` options in favor of `block`. +* Removed `defaultStyle` options in favor of `style`. +* Removed `labelCountdown` options in favor of `label`. +* Removed `countdownClsPfx` options in favor of `classPrefix`. ## Options @@ -27,22 +30,17 @@ Simple countdown component for GrapesJS Editor | Option | Description | Default | |-|-|- | `id` | The ID used to create the block and component. | `countdown` | +| `label` | The label used for the block and the component. | `Countdown` | | `block` | Object to extend the default block, eg. `{ label: 'Countdown', category: 'Extra', ... }`. Pass a falsy value to avoid adding the block. | `{}` | - - - -* `blocks` Which blocks to add, default: `['countdown']` (all) -* `defaultStyle` Add default style to blocks, default: true -* `startTime` Default start time, eg. '2018-01-25 00:00', default: '' -* `endText` Text to show when the countdown is ended, default: 'EXPIRED' -* `dateInputType` Date input type, eg, 'date', 'datetime-local', default: 'date' -* `countdownClsPfx` Countdown class prefix, default: 'countdown' -* `labelCountdown` Countdown label, default 'Countdown' -* `labelCountdownCategory` Countdown category label, default 'Extra' -* `labelDays` Days label text used in component, default 'days' -* `labelHours` Hours label text used in component, default 'hours' -* `labelMinutes` Minutes label text used in component, default 'minutes' -* `labelSeconds` Seconds label text used in component, default 'seconds' +| `props` | Object to extend the default component properties., eg. `{ name: 'Countdown', droppable: false, ... }`. | `{}` | +| `startTime` | Default start time, eg. `2030-01-25 00:00`. | `''` | +| `endText` | Text to show when the countdown is ended. | `'EXPIRED'` | +| `dateInputType` | Date input type, eg. `date`, `datetime-local` | `'date'` | +| `labelDays` | Days label text used in component. | `'days'` | +| `labelHours` | Hours label text used in component. | `'hours'` | +| `labelMinutes` | Minutes label text used in component. | `'minutes'` | +| `labelSeconds` | Seconds label text used in component. | `'seconds'` | +| `classPrefix` | Countdown component class prefix. | `'countdown'` | diff --git a/src/index.ts b/src/index.ts index 22f3963..d647f50 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,66 +22,72 @@ export type PluginOptions = { block?: Partial; /** - * Object to extend the default tooltip block. Pass a falsy value to avoid adding the block. + * Object to extend the default component properties. * @example - * { label: 'Tooltip', category: 'Extra', ... } + * { name: 'Countdown', droppable: false, ... } */ - blockTooltip?: Partial; + props?: grapesjs.ComponentDefinition; /** - * Object to extend the default tooltip properties. - * @example - * { name: 'Tooltip', droppable: false, ... } + * Custom CSS styles for the component. This will replace the default one. + * @default '' */ - propsTooltip?: grapesjs.ComponentDefinition; + style?: string, /** - * A function which allows to extend default traits by receiving the original array and returning a new one. + * Additional CSS styles for the component. These will be appended to the default one. + * @default 'tooltip-component' */ - extendTraits?: (traits: TraitsOptions) => TraitsOptions, + styleAdditional?: string, /** - * Tooltip attribute prefix. - * @default 'data-tooltip' + * Default start time. + * @default '' + * @example '2018-01-25 00:00' */ - attrTooltip?: string, + startTime?: string, /** - * Tooltip class prefix. - * @default 'tooltip-component' + * Text to show when the countdown is ended. + * @default 'EXPIRED' */ - classTooltip?: string, + endText?: string, /** - * Custom CSS styles for the tooltip component, this will replace the default one. - * @default 'tooltip-component' + * Date input type, eg. `date`, `datetime-local` + * @default 'date' */ - style?: string, + dateInputType?: string, /** - * Additional CSS styles for the tooltip component. - * @default 'tooltip-component' + * Days label text used in component. + * @default 'days' */ - styleAdditional?: string, + labelDays?: string, /** - * Make all tooltip relative classes private. - * @default true + * Hours label text used in component. + * @default 'hours' */ - privateClasses?: boolean, + labelHours?: string, /** - * Indicate if the tooltip can be styled. - * You can pass an array of which proprties can be styled. - * @example ['color', 'background-color'] + * Minutes label text used in component. + * @default 'minutes' */ - stylableTooltip?: string[] | boolean, + labelMinutes?: string, /** - * If true, force the tooltip to be shown when the default "Style tooltip" trait button is clicked. - * @default true + * Seconds label text used in component. + * @default 'seconds' + */ + labelSeconds?: string, + + /** + * Countdown component class prefix. + * @default 'countdown' */ - showTooltipOnStyle?: boolean, + classPrefix?: string, }; const plugin: grapesjs.Plugin = (editor, opts = {}) => { @@ -89,36 +95,17 @@ const plugin: grapesjs.Plugin = (editor, opts = {}) => { id: 'countdown', label: 'Countdown', block: {}, - - // Default style - defaultStyle: true, - - // Default start time, eg. '2018-01-25 00:00' + props: {}, + style: '', + styleAdditional: '', startTime: '', - - // Text to show when the countdown is ended endText: 'EXPIRED', - - // Date input type, eg, 'date', 'datetime-local' dateInputType: 'date', - - // Countdown class prefix - countdownClsPfx: 'countdown', - - // Countdown label - labelCountdown: 'Countdown', - - // Days label text used in component labelDays: 'days', - - // Hours label text used in component labelHours: 'hours', - - // Minutes label text used in component labelMinutes: 'minutes', - - // Seconds label text used in component labelSeconds: 'seconds', + classPrefix: 'countdown', ...opts, };