@dile/crud 0.1.1 → 0.2.1

package/components/image-uploader/image-uploader-form.js

@@ -0,0 +1,2 @@
+import { DileImageUploaderForm } from './src/DileImageUploaderForm.js';
+customElements.define('dile-image-uploader-form', DileImageUploaderForm);

package/components/image-uploader/image-uploader.js

@@ -0,0 +1,2 @@
+import { DileImageUploader } from './src/DileImageUploader.js';
+customElements.define('dile-image-uploader', DileImageUploader);

package/components/image-uploader/index.js

@@ -0,0 +1,2 @@
+export { DileImageUploaderForm } from './src/DileImageUploaderForm.js';
+export { DileImageUploader } from './src/DileImageUploader.js';

package/components/image-uploader/src/DileImageUploader.js

@@ -0,0 +1,70 @@
+import { LitElement, html, css } from 'lit';
+import '../../ajax-form/ajax-form.js';
+import '../image-uploader-form.js';
+import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
+import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
+
+export class DileImageUploader extends DileI18nMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      endpoint: { type: String },
+      selectImageLabel: { type: String },
+      saveLabel: { type: String },
+      allowedExtensions: { type: Array },
+      responseAdapter: { type: Object },
+    };
+  }
+  
+  constructor() {
+    super();
+    this.responseAdapter = new ResponseApiAdapter();
+    this.allowedExtensions = ['jpeg', 'jpg', 'png'];
+  }
+
+  render() {
+    return html`
+      <dile-ajax-form 
+        id="elform"
+        operation="insert"
+        endpoint=${this.endpoint}
+        actionLabel="${this.saveLabelComputed(this.saveLabel, this.translations)}"
+        sendDataAsFormData
+        language="es"
+        @save-success=${this.imageSaveSuccess}
+        .responseAdapter=${this.responseAdapter}
+      >
+        <dile-image-uploader-form 
+          id="form"
+          label="${this.selectLabelComputed(this.selectImageLabel, this.translations)}"
+          .allowedExtensions=${this.allowedExtensions}
+          .translations=${this.translations}
+        ></dile-image-uploader-form>
+      </dile-ajax-form>
+    `;
+  }
+
+  selectLabelComputed(label, translations) {
+      return label ? label : translations?.select_image ? translations.select_image : 'Select an image';
+  }
+
+  saveLabelComputed(label, translations) {
+    return label ? label : translations?.save_image ? translations.save_image : 'Save image';
+}
+
+  imageSaveSuccess(e) {
+    this.dispatchEvent(new CustomEvent('image-uploaded', {
+      bubbles: true,
+      composed: true,
+      detail: e.detail
+    }));
+  }
+
+}

package/components/image-uploader/src/DileImageUploaderForm.js

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from 'lit';
+import { DileForm } from '@dile/ui/mixins/form/index.js'
+import "@dile/ui/components/drop-file/drop-file.js"
+
+export class DileImageUploaderForm extends DileForm(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      dile-drop-file {
+        margin-bottom: 0;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      label: { type: String },
+      allowedExtensions: { type: Array },
+      translations: { type: Object },
+    };
+  }
+
+  render() {
+    return html`
+      <dile-drop-file 
+        name="image"
+        label="${this.label}" 
+        id="dropfile" 
+        .allowedExtensions=${this.allowedExtensions}
+        dropLabel="${this.translations.file_drop}"
+        buttonLabel="${this.translations.select_file}"
+        selectedFileLabel="${this.translations.selected_file}"
+        extensionErrorMessage="${this.translations.extension_allowed}"
+      ></dile-drop-file>
+    `;
+  }
+}

package/lib/i18n/en.js

@@ -42,5 +42,10 @@ export const translations = {
   all_in_page: "All in this page",
   select_matching: "Select all matching",
   element_actions: "Element actions",
-
+  select_image: "Select an image",
+  save_image: "Save image",
+  file_drop: "Drop here your file",
+  select_file: "Select file",
+  selected_file: "Selected file",
+  extension_allowed: "Only this file extensions are allowed: ",
 };

package/lib/i18n/es.js

@@ -42,4 +42,10 @@ export const translations = {
   all_in_page: "Todos de esta página",
   select_matching: "Seleccionar coincidentes",
   element_actions: "Acciones en este ítem",
+  select_image: "Selecciona una imagen",
+  save_image: "Salvar la imagen",
+  file_drop: "Suelta aquí el archivo",
+  select_file: "Seleccionar archivo",
+  selected_file: "Archivo seleccionado",
+  extension_allowed: "Solo se permiten estas extensiones: ",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -24,12 +24,12 @@
   },
   "homepage": "https://dile-components.polydile.com/",
   "dependencies": {
-    "@dile/ui": "^2.1.39",
+    "@dile/ui": "^2.2.0",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "072d0ecf23ade48c6f33d3dc37b29a209114f08b"
+  "gitHead": "5d4e95bced050de218bb3d5a0e489437d9dea8a6"
 }