diff --git a/.gitignore b/.gitignore index 5883b72..cfbe1ba 100644 --- a/.gitignore +++ b/.gitignore @@ -3,9 +3,9 @@ node_modules/* npm-debug.log # TypeScript -src/*.js -src/*.map -src/*.d.ts +/src/*.js +/src/*.map +/src/*.d.ts typings typings.json @@ -31,9 +31,13 @@ Desktop.ini **/*.ngfactory.ts # Build files -dist -.tmp -build +/dist/ +/.tmp +/build # Debug chrome out/chrome + +# Docs +/docs/themes/qontu-doc-theme +/docs/dist diff --git a/docs/config.toml b/docs/config.toml new file mode 100644 index 0000000..68e1674 --- /dev/null +++ b/docs/config.toml @@ -0,0 +1,68 @@ +baseURL = "https://qontu.github.io/ngx-inline-editor/" +languageCode = "en-us" +defaultContentLanguage = "en" +defaultContentLanguageInSubdir = true +enableMissingTranslationPlaceholders = true + +title = "Inline editor doc" +theme = "qontu-doc-theme" +themesdir = "./themes/" +MetaDataFormat = "yaml" + +[params] +editURL = "https://github.com/qontu/ngx-inline-editor/edit/master/docs/content/" +noHomeIcon = false # default is false +noSearch = false # default is false +showVisitedLinks = true # default is false +# themeVariant = "green" # choose theme variant "green", "gold" , "blue" (default) + + +[outputs] +home = [ "HTML", "RSS", "JSON"] + +#[[menu.shortcuts]] +#name = " Hugo Documentation" +#identifier = "hugodoc" +#url = "https://gohugo.io/" +#weight = 2 + +[languages] +[languages.en] + weight = 20 + languageName = "English" + languageCode = "en-us" + description = "Documentation of ngx-inline-editor component." + copyright = "All rights reserved." + +[[languages.en.menu.shortcuts]] +name = " Authors" +url = "/en/authors" +weight = 3 + +[[languages.en.menu.shortcuts]] +pre = "

More

" +name = " Github repo" +identifier = "ds" +url = "https://github.com/qontu/ngx-inline-editor" +weight = 1 + + +[languages.es] + weight = 10 + languageName = "Español" + languageCode = "es-es" + description = "Documentación del componente ngx-inline-editor." + copyright = "Todos los derechos reservados" + +[[languages.es.menu.shortcuts]] +name = " Autores" +url = "/es/authors" +weight = 3 + + +[[languages.es.menu.shortcuts]] +pre = "

Más

" +name = " Repo de Github" +identifier = "ds" +url = "https://github.com/qontu/ngx-inline-editor" +weight = 1 diff --git a/docs/content/_header.en.md b/docs/content/_header.en.md new file mode 100644 index 0000000..83e2727 --- /dev/null +++ b/docs/content/_header.en.md @@ -0,0 +1,8 @@ +--- +date: "2017-06-18T13:58:45+02:00" +description: "" +title: "Header" + +--- + +Inline editor's docs diff --git a/docs/content/_header.es.md b/docs/content/_header.es.md new file mode 100644 index 0000000..acd00fc --- /dev/null +++ b/docs/content/_header.es.md @@ -0,0 +1,8 @@ +--- +date: "2017-06-18T13:58:45+02:00" +description: "" +title: "Header" + +--- + +Doc. del Inline editor diff --git a/docs/content/_index.en.md b/docs/content/_index.en.md new file mode 100644 index 0000000..5597d30 --- /dev/null +++ b/docs/content/_index.en.md @@ -0,0 +1,9 @@ +--- +title: Home +type: page +weight: 100 +--- + +# ngx-inline-editor +[![npm version](https://badge.fury.io/js/%40qontu%2Fngx-inline-editor.svg)](https://badge.fury.io/js/%40qontu%2Fngx-inline-editor) + diff --git a/docs/content/_index.es.md b/docs/content/_index.es.md new file mode 100644 index 0000000..516977e --- /dev/null +++ b/docs/content/_index.es.md @@ -0,0 +1,10 @@ +--- +title: Home +type: page +weight: 100 +--- + +# ngx-inline-editor +[![npm version](https://badge.fury.io/js/%40qontu%2Fngx-inline-editor.svg)](https://badge.fury.io/js/%40qontu%2Fngx-inline-editor) + +{{}} diff --git a/docs/content/authors/_index.en.md b/docs/content/authors/_index.en.md new file mode 100644 index 0000000..b8f4ed3 --- /dev/null +++ b/docs/content/authors/_index.en.md @@ -0,0 +1,9 @@ +--- +title: Authors +type: page +weight: 700 +--- + +[Carlos Caballero](hhttps://github.com/caballerog) + +[Antonio Villena](https://github.com/xxxtonixxx) \ No newline at end of file diff --git a/docs/content/authors/_index.es.md b/docs/content/authors/_index.es.md new file mode 100644 index 0000000..3b005fa --- /dev/null +++ b/docs/content/authors/_index.es.md @@ -0,0 +1,9 @@ +--- +title: Autores +type: page +weight: 700 +--- + +[Carlos Caballero](hhttps://github.com/caballerog) + +[Antonio Villena](https://github.com/xxxtonixxx) diff --git a/docs/content/development/_index.en.md b/docs/content/development/_index.en.md new file mode 100644 index 0000000..995d418 --- /dev/null +++ b/docs/content/development/_index.en.md @@ -0,0 +1,14 @@ +--- +title: Development +type: page +weight: 650 +--- + +1. To generate all `*.js`, `*.js.map` and `*.d.ts` files: + + `npm run build` + +2. To debug : + + `npm run build:watch` + \ No newline at end of file diff --git a/docs/content/development/_index.es.md b/docs/content/development/_index.es.md new file mode 100644 index 0000000..4255d83 --- /dev/null +++ b/docs/content/development/_index.es.md @@ -0,0 +1,22 @@ +--- +title: Desarrolladores +type: page +weight: 650 +--- +Este componente no usa dependencias de terceros por lo que es ultra ligero {{}} + + +Como herramienta para automatizar procesos usamos `gulp` y para crear los bundles `rollup`. + +Si quieres colaborar en el desarrollo te indicaré los pasos que usamos: + +1. Para compilar el código + `npm run build` + - Esto creará una carpeta `dist/` con el código transpilado y bundleado. + + +2. Para iniciar el modo debug: + `npm run debug` + - Esto copiará los ficheros `src/**/*.ts` al directorio `dist/` y permitirá que puedas usar directamente los ficheros typescript, esto aporta una gran facilidad a la hora de debuggear, ya que no necesitas los `.map`. + - Una vez iniciado, ejecuta el comando `yarn link` + - Y luego en tu proyecto de prueba `yarn link @qontu/ngx-inline-editor` diff --git a/docs/content/getting-started/_index.en.md b/docs/content/getting-started/_index.en.md new file mode 100644 index 0000000..cf5d34c --- /dev/null +++ b/docs/content/getting-started/_index.en.md @@ -0,0 +1,20 @@ +--- +title: Getting started +type: page +weight: 100 +--- + +## Welcome to our docs! + +**ngx-inline-editor** is a library developed in Angular 4 (version 4.x.x), +with this component you are able to create editable elements. This technique is also known as _click-to-edit_ or _edit-in-place_. +This component is based on ideas of [angular-xeditable](https://github.com/vitalets/angular-xeditable) which is developed in AngularJS. + +## Version +Angular 4 is now stable. Therefore, if encountering errors using this lib, ensure your version of Angular is compatible. +The current version used to develop this lib is angular4 `^4.0.0`. + +## Dependencies +Basically it does not depend on any libraries except Angular4 itself. + +For themes you need to include [Twitter Bootstrap](http://v4-alpha.getbootstrap.com/) and [FontAwesome](http://fontawesome.io/) in your project. diff --git a/docs/content/getting-started/_index.es.md b/docs/content/getting-started/_index.es.md new file mode 100644 index 0000000..55ec150 --- /dev/null +++ b/docs/content/getting-started/_index.es.md @@ -0,0 +1,22 @@ +--- +title: Cómo empezar +type: page +weight: 100 +--- + +## Bienvenido a nuestra documentacion! + +**ng-inline-editor** es una biblioteca desarrollada usando Angular 4 (version 4.x.x). Éste componente te permite crear elementos editables. +Esta técnica también es conocida como _click-to-edit_ o _edit-in-place_. +Este componente está basado en ideas de [angular-xeditable](https://github.com/vitalets/angular-xeditable), el cual está desarrollado en AngularJS. + +## Version + +La versión de Angular 4 es estable. Por lo tanto, si tienes algún problema usando esta biblioteca, asegurate de que tu versión es compatible. +La version la cual está siendo utilizada para desarrollar esta biblioteca es angular4 `4.4.4`. + +## Dependencias + +No depende de ninguna biblioteca excepto Angular4. + +Para los temas necesitas incluir [Twitter Bootstrap](http://v4-alpha.getbootstrap.com/) y [FontAwesome](http://fontawesome.io/) en tu proyecto. diff --git a/docs/content/getting-started/features.en.md b/docs/content/getting-started/features.en.md new file mode 100644 index 0000000..a5a2029 --- /dev/null +++ b/docs/content/getting-started/features.en.md @@ -0,0 +1,27 @@ +--- +title: Features +type: page +weight: 105 +--- + +Feature's component: + +- [x] text +- [x] textarea +- [x] select +- [ ] checkbox +- [ ] radio +- [ ] date +- [ ] time +- [x] datetime +- [ ] html5 inputs + - [x] pattern + - [x] number + - [x] range +- [ ] typeahead +- [ ] ui-select +- [ ] complex form +- [ ] editable row +- [ ] editable column +- [ ] editable table +- [x] themes diff --git a/docs/content/getting-started/features.es.md b/docs/content/getting-started/features.es.md new file mode 100644 index 0000000..83cc918 --- /dev/null +++ b/docs/content/getting-started/features.es.md @@ -0,0 +1,27 @@ +--- +title: Características +type: page +weight: 105 +--- + +Estas son las características que dispone actualmente el componente: + +- [x] text +- [x] textarea +- [x] select +- [ ] checkbox +- [ ] radio +- [ ] date +- [ ] time +- [x] datetime +- [ ] html5 inputs + - [x] pattern + - [x] number + - [x] range +- [ ] typeahead +- [ ] ui-select +- [ ] formularios complejos +- [ ] filas editables +- [ ] columnas editables +- [ ] tablas editables +- [x] temas diff --git a/docs/content/getting-started/setup.en.md b/docs/content/getting-started/setup.en.md new file mode 100644 index 0000000..e0f30ad --- /dev/null +++ b/docs/content/getting-started/setup.en.md @@ -0,0 +1,21 @@ +--- +date: 2017-06-17T20:55:11+02:00 +title: Setup +type: page +weight: 200 +--- + +## Installation +A recommended way of installing **ngx-inline-editor** with [npm](https://www.npmjs.com/package/@qontu/ngx-inline-editor) using the following command: + +`npm i @qontu/ngx-inline-editor --save` + +## Configure styles + +Include the basic theme or configure your own styles. To use the basic theme using *angular-cli*, you can import the css rules into *angular-cli*'s file `src/styles.css` using this line: + +`@import '~@qontu/ngx-inline-editor/themes/bootstrap.css'` + +{{% notice info %}} +We use some classes of [Twitter Bootstrap](http://v4-alpha.getbootstrap.com/) and [FontAwesome](http://fontawesome.io/) to perform the icons of buttons. You need to include them or customize your own style. +{{% /notice %}} diff --git a/docs/content/getting-started/setup.es.md b/docs/content/getting-started/setup.es.md new file mode 100644 index 0000000..271adc7 --- /dev/null +++ b/docs/content/getting-started/setup.es.md @@ -0,0 +1,22 @@ +--- +date: 2017-06-17T20:55:11+02:00 +title: Instalación +type: page +weight: 200 +--- + +## Instalación + +Una forma recomendable de instalar **ngx-inline-editor** es con [npm](https://www.npmjs.com/package/@qontu/ngx-inline-editor), usando el siguiente comando: + +`npm i @qontu/ngx-inline-editor --save` + +## Configurar estilos + +Puedes tanto incluir tus propios estilos como incluir el tema básico. Para utilizar el básico con *angular-cli*, puedes importarlo al fichero `src/styles.css` con el siguiente comando: + +`@import '~@qontu/ngx-inline-editor/themes/bootstrap.css'` + +{{% notice info %}} +Usamos ciertas clases de [Twitter Bootstrap](http://v4-alpha.getbootstrap.com/) y [FontAwesome](http://fontawesome.io/) para representar los iconos de los botones. Puedes tanto incluirlos o customizar los tuyos propios. +{{% /notice %}} diff --git a/docs/content/license/_index.en.md b/docs/content/license/_index.en.md new file mode 100644 index 0000000..f4f4237 --- /dev/null +++ b/docs/content/license/_index.en.md @@ -0,0 +1,7 @@ +--- +title: License +type: page +weight: 750 +--- + +MIT License (See the [LICENSE](https://github.com/qontu/ngx-inline-editor/blob/master/LICENSE.MD) file for the full text). \ No newline at end of file diff --git a/docs/content/license/_index.es.md b/docs/content/license/_index.es.md new file mode 100644 index 0000000..15e4d3b --- /dev/null +++ b/docs/content/license/_index.es.md @@ -0,0 +1,7 @@ +--- +title: Licencia +type: page +weight: 750 +--- + +MIT License (See the [LICENSE](https://github.com/qontu/ngx-inline-editor/blob/master/LICENSE.MD) file for the full text). diff --git a/docs/content/style/_index.en.md b/docs/content/style/_index.en.md new file mode 100644 index 0000000..ef48280 --- /dev/null +++ b/docs/content/style/_index.en.md @@ -0,0 +1,62 @@ +--- +title: Style/Themes +type: page +weight: 600 +--- + +This component has the following basic theme located in `dist/themes/bootstrap.css`: + +``` CSS +a.c-inline-editor { + text-decoration: none; + color: #428bca; + border-bottom: dashed 1px #428bca; + cursor: pointer; + line-height: 2; + margin-right: 5px; + margin-left: 5px; +} +.c-inline-editor.editable-empty, +.c-inline-editor.editable-empty:hover, +.c-inline-editor.editable-empty:focus, +.c-inline-editor.a.editable-empty, +.c-inline-editor.a.editable-empty:hover, +.c-inline-editor.a.editable-empty:focus { + font-style: italic; + color: #DD1144; + text-decoration: none; +} + +.c-inline-editor.inlineEditForm { + display: inline-block; + white-space: nowrap; + margin: 0; +} + +#inlineEditWrapper { + display: inline-block; +} + +.c-inline-editor.inlineEditForm input, +.c-inline-editor.select { + width: auto; + display: inline; +} + +.c-inline-editor.inline-editor-button-group { + display: inline-block; +} + +.c-inline-editor.editInvalid { + color: #a94442; + margin-bottom: 0; +} + +.c-inline-editor.error { + border-color: #a94442; +} + +[hidden].c-inline-editor { + display: none; +} +``` \ No newline at end of file diff --git a/docs/content/style/_index.es.md b/docs/content/style/_index.es.md new file mode 100644 index 0000000..18c1229 --- /dev/null +++ b/docs/content/style/_index.es.md @@ -0,0 +1,63 @@ +--- +title: Estilos/temas +type: page +weight: 600 +--- + + +Este componente tiene las siguientes reglas básicas en `dist/themes/bootstrap.css`: + +``` CSS +a.c-inline-editor { + text-decoration: none; + color: #428bca; + border-bottom: dashed 1px #428bca; + cursor: pointer; + line-height: 2; + margin-right: 5px; + margin-left: 5px; +} +.c-inline-editor.editable-empty, +.c-inline-editor.editable-empty:hover, +.c-inline-editor.editable-empty:focus, +.c-inline-editor.a.editable-empty, +.c-inline-editor.a.editable-empty:hover, +.c-inline-editor.a.editable-empty:focus { + font-style: italic; + color: #DD1144; + text-decoration: none; +} + +.c-inline-editor.inlineEditForm { + display: inline-block; + white-space: nowrap; + margin: 0; +} + +#inlineEditWrapper { + display: inline-block; +} + +.c-inline-editor.inlineEditForm input, +.c-inline-editor.select { + width: auto; + display: inline; +} + +.c-inline-editor.inline-editor-button-group { + display: inline-block; +} + +.c-inline-editor.editInvalid { + color: #a94442; + margin-bottom: 0; +} + +.c-inline-editor.error { + border-color: #a94442; +} + +[hidden].c-inline-editor { + display: none; +} +``` diff --git a/docs/content/troubleshooting/_index.en.md b/docs/content/troubleshooting/_index.en.md new file mode 100644 index 0000000..c029dae --- /dev/null +++ b/docs/content/troubleshooting/_index.en.md @@ -0,0 +1,12 @@ +--- +title: Troubleshooting +type: page +weight: 600 +--- + +Please follow this guidelines when reporting bugs and feature requests: + +1. Use [GitHub Issues](https://github.com/qontu/ngx-inline-editor/issues) board to report bugs and feature requests (not our email address). +2. Please **always** write steps to reproduce the error. So it is easier to focus on fixing the bug, not scratching our heads trying to reproduce it. + +Thanks for understanding! \ No newline at end of file diff --git a/docs/content/troubleshooting/_index.es.md b/docs/content/troubleshooting/_index.es.md new file mode 100644 index 0000000..293adc9 --- /dev/null +++ b/docs/content/troubleshooting/_index.es.md @@ -0,0 +1,12 @@ +--- +title: Troubleshooting +type: page +weight: 600 +--- + +Por favor usa estas guías cuando reportes bugs o peticiones de características: + +1. Usa [GitHub Issues](https://github.com/qontu/ngx-inline-editor/issues) para reportar bugs y nuevas características (no nuestro mail). +2. Por favor **siempre** divide el error en pasos para reproducirlo. De esta forma nos es más fácil centrarnos en el bug, no intentándolo reproducirlo. + +Gracias! \ No newline at end of file diff --git a/docs/content/usage/_index.en.md b/docs/content/usage/_index.en.md new file mode 100644 index 0000000..3bb17c6 --- /dev/null +++ b/docs/content/usage/_index.en.md @@ -0,0 +1,29 @@ +--- +title: Usage +type: page +weight: 300 +--- + +## Angular 4++ + +Import `InlineEditorModule` and `FormsModule` into your app's module: + +``` typescript +// Angular imports +import { InlineEditorModule } from '@qontu/ngx-inline-editor'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + InlineEditorModule, + FormsModule, + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } +``` \ No newline at end of file diff --git a/docs/content/usage/_index.es.md b/docs/content/usage/_index.es.md new file mode 100644 index 0000000..41b068f --- /dev/null +++ b/docs/content/usage/_index.es.md @@ -0,0 +1,29 @@ +--- +title: Uso +type: page +weight: 300 +--- + +## Angular 4++ + +Tienes que importar `InlineEditorModule` y `FormsModule` en el módulo de tu aplicación: + +``` typescript +// Angular imports +import { InlineEditorModule } from '@qontu/ngx-inline-editor'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + InlineEditorModule, + FormsModule, + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } +``` diff --git a/docs/content/usage/api/_index.en.md b/docs/content/usage/api/_index.en.md new file mode 100644 index 0000000..00750e4 --- /dev/null +++ b/docs/content/usage/api/_index.en.md @@ -0,0 +1,5 @@ +--- +title: Welcome to our API! +type: page +weight: 349 +--- diff --git a/docs/content/usage/api/_index.es.md b/docs/content/usage/api/_index.es.md new file mode 100644 index 0000000..8c32d99 --- /dev/null +++ b/docs/content/usage/api/_index.es.md @@ -0,0 +1,5 @@ +--- +title: ¡Bienvenido a nuestra API! +type: page +weight: 349 +--- diff --git a/docs/content/usage/api/common-attributes.en.md b/docs/content/usage/api/common-attributes.en.md new file mode 100644 index 0000000..43330b6 --- /dev/null +++ b/docs/content/usage/api/common-attributes.en.md @@ -0,0 +1,75 @@ +--- +title: Common attributes +type: page +weight: 350 +--- + +This attributes are common to all types of inputs: + +* `type`: Specifies the type \ element to display and it can be any of the following values: + * 'text' + * 'number' + * 'select' + * 'range' + * 'textarea' + * 'date' + * 'time' + * 'datetime' + +* \[`name`]: `string`. \ element's name. Default `''`. + +* \[`size`]: `number`. \ element's width. Default `8`. + +* \[`placeholder`]: `string`. \ element's placeholder. Default `'placeholder'`. + +* \[`empty`]: `string`. When \ element is empty, this string appears. Deafult `'empty'`. + +* \[`hideButtons`]: `boolean`. If it is set to `true`, buttons of check and cancel will not appear. Default `false`. + +* \[`required`]: `boolean`. If it is set to `true` and \ element's text is empty, triggers an error. Default `false`. + +* \[`disabled`]: `boolean`. If it is set to `true`, it becomes unusable and unclickable. Default `false`. + +* \[`onlyValue`]: `boolean`. If it is set to `false`, it sends you metadata of the element (ie. which event was triggered). If set to `true`, it just sends you its value. Default `true`. + +* \[`saveOnChange`] : `boolean`. \ element's value is saved when its value changes. Default `false`. + +* \[`saveOnBlur`] : `boolean`. \ element's value is saved when its focus is lost. Default `false`. + +* \[`saveOnEnter`] : `boolean`. \ element's value is saved when key Enter is pressed. Default `true`. + +* \[`cancelOnEscape`] : `boolean`.\ element loses its focus when key Escape is pressed. Default `true`. + +* \[`editOnClick`] : `boolean`. \ element get focused when it gets clicked. Default `true`. + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/common-attributes.es.md b/docs/content/usage/api/common-attributes.es.md new file mode 100644 index 0000000..d559755 --- /dev/null +++ b/docs/content/usage/api/common-attributes.es.md @@ -0,0 +1,75 @@ +--- +title: Atributos comunes +type: page +weight: 350 +--- + +Los siguientes atributos son comunes para todos los tipos de inputs: + +* `type`: Especifica el tipo de \ a mostrar y puede tener los siguientes valores: + * 'text' + * 'number' + * 'select' + * 'range' + * 'textarea' + * 'date' + * 'time' + * 'datetime' + +* \[`name`]: `string`. Nombre del elemento \. Por defecto `''`. + +* \[`size`]: `number`. Anchura del elemento \. Por defecto `8`. + +* \[`placeholder`]: `string`. Placeholder del elemento\. Por defecto `'placeholder'`. + +* \[`empty`]: `string`. El texto que se muestra cuando el elemento \ está vacio. Por defecto `'empty'`. + +* \[`hideButtons`]: `boolean`. Si es `true`, los botones de aceptar y cancelar no aparecerán. Por defecto `false`. + +* \[`required`]: `boolean`. Si es `true` y el texto del elemento \, lanza un error. Por defecto `false`. + +* \[`disabled`]: `boolean`. Si es `true`, se vuelve inusable y no se le puede hacer click. Por defecto `false`. + +* \[`onlyValue`]: `boolean`. Si es `false`, te envía metadatos del elemento (Ej: qué evento fue lanzado). Si es `true`, sólo te manda su valor. Por defecto `true`. + +* \[`saveOnChange`] : `boolean`. El elemento \ es guardado cuando su valor cambia. Por defecto `false`. + +* \[`saveOnBlur`] : `boolean`. El elemento \ es guardado cuando pierde el focus. Por defecto `false`. + +* \[`saveOnEnter`] : `boolean`. El elemento \ es guardado cuando se presiona la tecla Enter. Por defecto `true`. + +* \[`cancelOnEscape`] : `boolean`. El elemento pierde el focus cuando la tecla Escape es presionada. Por defecto `true`. + +* \[`editOnClick`] : `boolean`. El elemento \ gana el foco cuando se le hace click. Por defecto `true`. + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-number.en.md b/docs/content/usage/api/input-number.en.md new file mode 100644 index 0000000..8acc5c9 --- /dev/null +++ b/docs/content/usage/api/input-number.en.md @@ -0,0 +1,47 @@ +--- +title: Input number +type: page +weight: 500 +--- +* `type`: 'number'. + +* \[`min`]: `number`. \ element's minimum value. Default `0`. + +* \[`max`]: `number`. \ element's maximum value. Default `Infinity`. + + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-number.es.md b/docs/content/usage/api/input-number.es.md new file mode 100644 index 0000000..8acc5c9 --- /dev/null +++ b/docs/content/usage/api/input-number.es.md @@ -0,0 +1,47 @@ +--- +title: Input number +type: page +weight: 500 +--- +* `type`: 'number'. + +* \[`min`]: `number`. \ element's minimum value. Default `0`. + +* \[`max`]: `number`. \ element's maximum value. Default `Infinity`. + + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-select.en.md b/docs/content/usage/api/input-select.en.md new file mode 100644 index 0000000..c16a253 --- /dev/null +++ b/docs/content/usage/api/input-select.en.md @@ -0,0 +1,57 @@ +--- +title: Input select +type: page +weight: 450 +--- + + +* `type`: 'select'. + +* \[`options`]: `Object` + * `text`: `string` + * `value`: `string` + * `data`: `Object[]` + + + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-select.es.md b/docs/content/usage/api/input-select.es.md new file mode 100644 index 0000000..415c951 --- /dev/null +++ b/docs/content/usage/api/input-select.es.md @@ -0,0 +1,56 @@ +--- +title: Input select +type: page +weight: 450 +--- + +* `type`: 'select'. + +* \[`options`]: `Object` + * `text`: `string` + * `value`: `string` + * `data`: `Object[]` + + + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-text.en.md b/docs/content/usage/api/input-text.en.md new file mode 100644 index 0000000..331c25e --- /dev/null +++ b/docs/content/usage/api/input-text.en.md @@ -0,0 +1,47 @@ +--- +title: Input text +type: page +weight: 400 +--- + +* `type`: 'text'. + +* \[`pattern`]: `string | RegExp`. Define a regular expression to \ element's value. If \ element's value does not correct according to its regular expression, its value will not be changed. Default `''`. + + + + +Little example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-text.es.md b/docs/content/usage/api/input-text.es.md new file mode 100644 index 0000000..ac743e2 --- /dev/null +++ b/docs/content/usage/api/input-text.es.md @@ -0,0 +1,46 @@ +--- +title: Input text +type: page +weight: 400 +--- + +* `type`: 'text'. + +* \[`pattern`]: `string | RegExp`. Define una expresión regular para el valor del elemento \. Si éste no cumple la expresión regular, su valor no será cambiado. Por defecto `''`. + + + +Pequeño ejemplo: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-textarea.en.md b/docs/content/usage/api/input-textarea.en.md new file mode 100644 index 0000000..edbc53a --- /dev/null +++ b/docs/content/usage/api/input-textarea.en.md @@ -0,0 +1,48 @@ +--- +title: Input textarea +type: page +weight: 550 +--- + +* `type`: 'textarea'. + +* \[`rows`]: `number`. Visible height of a text area. Default `4`. + +* \[`cols`]: `number`. Visible width of a text area. Default `10`. + +* \[`pattern`]: `string | RegExp`. Define a regular expression to \ element's value. If \ element's value does not correct according to its regular expression, its value will not be changed. Default `''`. + + + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input-textarea.es.md b/docs/content/usage/api/input-textarea.es.md new file mode 100644 index 0000000..d01301a --- /dev/null +++ b/docs/content/usage/api/input-textarea.es.md @@ -0,0 +1,48 @@ +--- +title: Input textarea +type: page +weight: 550 +--- + +* `type`: 'textarea'. + +* \[`rows`]: `number`. Altura del text area. Por defecto `4`. + +* \[`cols`]: `number`. Anchura del text area. Por defecto `10`. + +* \[`pattern`]: `string | RegExp`. Define una expresión regular para el valor del elemento \. Si éste no cumple la expresión regular, su valor no será cambiado. Por defecto `''`. + + + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/api/input.number.es.md b/docs/content/usage/api/input.number.es.md new file mode 100644 index 0000000..ee63861 --- /dev/null +++ b/docs/content/usage/api/input.number.es.md @@ -0,0 +1,47 @@ +--- +title: Input number +type: page +weight: 500 +--- +* `type`: 'number'. + +* \[`min`]: `number`. Valor mínimo del elemento \. Por defecto `0`. + +* \[`max`]: `number`. Valor máximo del elemento \. Por defecto `Infinity`. + + + +Example: + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

{{editableText}}

+
+ + +
+ ` +}) +export class AppComponent { + editableText = 'myText'; + + saveEditable(event) { + console.log(event); + } +} + +``` diff --git a/docs/content/usage/first-example.en.md b/docs/content/usage/first-example.en.md new file mode 100644 index 0000000..abc56eb --- /dev/null +++ b/docs/content/usage/first-example.en.md @@ -0,0 +1,28 @@ +--- +title: First example +type: page +weight: 300 +--- + +{{}} + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: + `

{{sampleText}}

+
+ + +
` +}) +export class AppComponent { + sampleText = 'sample'; +} + +``` + diff --git a/docs/content/usage/first-example.es.md b/docs/content/usage/first-example.es.md new file mode 100644 index 0000000..bb38103 --- /dev/null +++ b/docs/content/usage/first-example.es.md @@ -0,0 +1,25 @@ +--- +title: Primer ejemplo +type: page +weight: 300 +--- + +``` typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: + `

{{sampleText}}

+
+ + +
` +}) +export class AppComponent { + sampleText = 'sample'; +} + +``` diff --git a/docs/deploy.sh b/docs/deploy.sh new file mode 100755 index 0000000..1839a2b --- /dev/null +++ b/docs/deploy.sh @@ -0,0 +1,16 @@ +#!/usr/bin/env bash + +yarn docs:build +( + cd $DOCS_BUILDED_FOLDER + if [ -d ".git" ]; then + rm -rf .git + fi + git init + git remote add origin git@github.com:xxxtonixxx/ngx-inline-editor.git + git checkout -b gh-pages + git add . + git commit -m "docs" + git push -f origin gh-pages:gh-pages +) +yarn docs:clean diff --git a/gulpfile.ts b/gulpfile.ts index 793dc1f..8f9fbc8 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -7,6 +7,31 @@ import * as del from "del"; import * as ts from "gulp-typescript"; import * as ngc from "gulp-ngc"; import * as merge from "merge2"; +import * as cp from "child_process"; + +function exec( + command: string, + { args = [], output = false }: { + args?: string[], + output?: boolean, + } = {}, +): Promise<{ stdout: string, stderr: string }> { + return new Promise((resolve, reject) => { + const cmdExecuted = cp.exec(`${command} ${args.join(" ")}`, (error, stdout, stderr) => { + if (error instanceof Error) { + reject(error); + } else { + resolve({ stdout, stderr }); + } + }); + + if (output) { + cmdExecuted.stdout.pipe(process.stdout); + cmdExecuted.stderr.pipe(process.stderr); + } + }); +} + const rollup = require("gulp-rollup"); const inlineNg2Template = require("gulp-inline-ng2-template"); @@ -24,6 +49,8 @@ const tmpFolder = path.join(rootFolder, ".tmp"); const tmpBundlesFolder = path.join(tmpFolder, ".bundles"); const buildFolder = path.join(rootFolder, "build"); const distFolder = path.join(rootFolder, "dist"); +const docsFolder = path.join(rootFolder, "docs"); +const docsBuildedFolder = path.join(docsFolder, "dist"); const { name: libName, @@ -254,6 +281,19 @@ task("compile:debug", () => runSequence( }), ); +task("clean:docs", () => deleteFolders([docsBuildedFolder])); + +task("build:docs", ["clean:docs"], done => { + exec(`cd ${docsFolder} && hugo -d ${docsBuildedFolder}`) + .then(({ stdout, stderr }) => { + console.log(stdout); + console.error(stderr); + + done(); + }) + .catch(done); +}); + /** * Watch for any change in the /src folder and compile files */ diff --git a/package.json b/package.json index 765b921..c5e5ba8 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,15 @@ "es2015": "ngx-inline-editor.es2015.js", "typings": "ngx-inline-editor.d.ts", "scripts": { - "gulp": "node_modules/.bin/gulp", - "build": "node_modules/.bin/gulp build && echo 'To publish a new version of library, please use npm run publish'", - "build:watch": "node_modules/.bin/gulp", - "debug": "node_modules/.bin/gulp watch:debug", - "clean": "node_modules/.bin/gulp clean", - "commit": "node_modules/.bin/git-cz", + "gulp": "gulp", + "build": "gulp build && echo 'To publish a new version of library, please use npm run publish'", + "build:watch": "gulp", + "debug": "gulp watch:debug", + "clean": "gulp clean", + "commit": "git-cz", + "docs:build": "gulp build:docs", + "docs:clean": "gulp clean:docs", + "docs:deploy": "DOCS_BUILDED_FOLDER=$PWD/docs/dist bash docs/deploy.sh", "lint": "tslint --type-check --project ./src/tsconfig.json src/**/*.ts", "publish": "cd dist && npm publish", "test": "tsc && karma start"