nanoui 0.4.0 → 0.6.0

data/lib/generators/nanoui/templates/js/controllers/upload_controller.js

@@ -0,0 +1,137 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    "input",
+    "dropzone",
+    "preview",
+    "thumbnail",
+    "name",
+    "size",
+    "error"
+  ]
+
+  static values = {
+    accept: String,
+    maxSize: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.#setState(this.hasInputTarget && this.inputTarget.files.length > 0 ? "filled" : "empty")
+  }
+
+  openPicker(event) {
+    if (event?.target?.closest("button")) return
+    event?.preventDefault()
+    this.inputTarget?.click()
+  }
+
+  onChange() {
+    const file = this.inputTarget?.files?.[0]
+    if (!file) {
+      this.#setState("empty")
+      return
+    }
+    this.#consumeFile(file)
+  }
+
+  onDragover(event) {
+    event.preventDefault()
+    this.#setState("dragover")
+  }
+
+  onDragleave(event) {
+    event.preventDefault()
+    this.#setState(this.inputTarget?.files?.length ? "filled" : "empty")
+  }
+
+  onDrop(event) {
+    event.preventDefault()
+    const file = event.dataTransfer?.files?.[0]
+    if (!file) {
+      this.#setState("empty")
+      return
+    }
+
+    if (this.hasInputTarget) {
+      const dt = new DataTransfer()
+      dt.items.add(file)
+      this.inputTarget.files = dt.files
+    }
+    this.#consumeFile(file)
+  }
+
+  remove(event) {
+    event?.preventDefault()
+    if (this.hasInputTarget) this.inputTarget.value = ""
+    this.#clearError()
+    this.#setState("empty")
+    this.dispatch("removed")
+  }
+
+  #consumeFile(file) {
+    const error = this.#validate(file)
+    if (error) {
+      this.#showError(error)
+      this.remove()
+      return
+    }
+    this.#clearError()
+
+    if (this.hasNameTarget) this.nameTarget.textContent = file.name
+    if (this.hasSizeTarget) this.sizeTarget.textContent = this.#formatSize(file.size)
+
+    if (this.hasThumbnailTarget && file.type.startsWith("image/")) {
+      const reader = new FileReader()
+      reader.onload = (e) => { this.thumbnailTarget.src = e.target.result }
+      reader.readAsDataURL(file)
+    }
+
+    this.#setState("filled")
+    this.dispatch("selected", { detail: { file } })
+  }
+
+  #validate(file) {
+    if (this.maxSizeValue && file.size > this.maxSizeValue) {
+      return `File is too large. Max ${this.#formatSize(this.maxSizeValue)}.`
+    }
+    if (this.hasAcceptValue && this.acceptValue) {
+      const accepted = this.acceptValue.split(",").map((s) => s.trim()).filter(Boolean)
+      const ok = accepted.some((pattern) => {
+        if (pattern.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(pattern.toLowerCase())
+        }
+        if (pattern.endsWith("/*")) {
+          return file.type.startsWith(pattern.slice(0, -1))
+        }
+        return file.type === pattern
+      })
+      if (!ok) return "File type not allowed."
+    }
+    return null
+  }
+
+  #formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+
+  #setState(state) {
+    this.element.dataset.state = state
+  }
+
+  #showError(message) {
+    if (this.hasErrorTarget) {
+      this.errorTarget.textContent = message
+      this.errorTarget.hidden = false
+    }
+  }
+
+  #clearError() {
+    if (this.hasErrorTarget) {
+      this.errorTarget.textContent = ""
+      this.errorTarget.hidden = true
+    }
+  }
+}

data/lib/nanoui/version.rb

@@ -1,3 +1,3 @@
 module Nanoui
-  VERSION = "0.4.0"
+  VERSION = "0.6.0".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nanoui
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Denis Omerovic
@@ -37,6 +37,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.60'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.60'
+- !ruby/object:Gem::Dependency
+  name: rubocop-rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 description: Quality components with semantic HTML, accessibility-first, native CSS
   nesting, and BEM naming. Zero runtime dependencies.
 email:
@@ -62,31 +90,48 @@ files:
 - lib/generators/nanoui/templates/css/base/10_globals.css
 - lib/generators/nanoui/templates/css/components/accordion.css
 - lib/generators/nanoui/templates/css/components/alert.css
+- lib/generators/nanoui/templates/css/components/avatar.css
 - lib/generators/nanoui/templates/css/components/badge.css
+- lib/generators/nanoui/templates/css/components/breadcrumb.css
 - lib/generators/nanoui/templates/css/components/button.css
 - lib/generators/nanoui/templates/css/components/card.css
 - lib/generators/nanoui/templates/css/components/checkbox.css
+- lib/generators/nanoui/templates/css/components/checklist.css
+- lib/generators/nanoui/templates/css/components/code.css
+- lib/generators/nanoui/templates/css/components/copy.css
 - lib/generators/nanoui/templates/css/components/dialog.css
 - lib/generators/nanoui/templates/css/components/dropdown.css
+- lib/generators/nanoui/templates/css/components/empty.css
 - lib/generators/nanoui/templates/css/components/input.css
 - lib/generators/nanoui/templates/css/components/label.css
+- lib/generators/nanoui/templates/css/components/navbar.css
 - lib/generators/nanoui/templates/css/components/progress.css
 - lib/generators/nanoui/templates/css/components/radio.css
 - lib/generators/nanoui/templates/css/components/select.css
+- lib/generators/nanoui/templates/css/components/sidebar.css
+- lib/generators/nanoui/templates/css/components/skeleton.css
+- lib/generators/nanoui/templates/css/components/stat.css
 - lib/generators/nanoui/templates/css/components/switch.css
 - lib/generators/nanoui/templates/css/components/table.css
 - lib/generators/nanoui/templates/css/components/tabs.css
+- lib/generators/nanoui/templates/css/components/timeline.css
 - lib/generators/nanoui/templates/css/components/toast.css
 - lib/generators/nanoui/templates/css/components/tooltip.css
+- lib/generators/nanoui/templates/css/components/upload.css
 - lib/generators/nanoui/templates/css/fonts/inter-variable.ttf
 - lib/generators/nanoui/templates/css/layout/container.css
 - lib/generators/nanoui/templates/js/controllers/accordion_controller.js
+- lib/generators/nanoui/templates/js/controllers/copy_controller.js
+- lib/generators/nanoui/templates/js/controllers/data_table_controller.js
 - lib/generators/nanoui/templates/js/controllers/dialog_controller.js
 - lib/generators/nanoui/templates/js/controllers/dropdown_controller.js
+- lib/generators/nanoui/templates/js/controllers/navbar_controller.js
+- lib/generators/nanoui/templates/js/controllers/sidebar_controller.js
 - lib/generators/nanoui/templates/js/controllers/switch_controller.js
 - lib/generators/nanoui/templates/js/controllers/tabs_controller.js
 - lib/generators/nanoui/templates/js/controllers/toast_controller.js
 - lib/generators/nanoui/templates/js/controllers/tooltip_controller.js
+- lib/generators/nanoui/templates/js/controllers/upload_controller.js
 - lib/nanoui.rb
 - lib/nanoui/version.rb
 homepage: https://github.com/chille1987/nanoui
@@ -109,7 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.3
 specification_version: 4
 summary: Vanilla CSS + Stimulus component library for Rails
 test_files: []