view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/context_menu/context_menu_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  show(event) {
+    event.preventDefault()
+    this.panelTarget.hidden = false
+    this.panelTarget.style.top = `${event.clientY}px`
+    this.panelTarget.style.left = `${event.clientX}px`
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.panelTarget.contains(target)) this.close()
+  }
+}

data/lib/generators/view_primitives/add/templates/data_table/data_table_component.rb.tt

@@ -0,0 +1,163 @@
+# frozen_string_literal: true
+
+module UI
+  class DataTableComponent < ApplicationComponent
+    # Sortable, filterable data table with client-side pagination.
+    #
+    # columns: array of { key:, label:, sortable: true }
+    # rows:    array of hashes (keys must match column keys)
+    # per_page: rows per page (default 10, 0 = no pagination)
+    # caption:  optional <caption> text
+
+    WRAPPER    = "w-full overflow-auto rounded-lg border border-border"
+    TOOLBAR    = "flex items-center gap-3 border-b border-border bg-background px-4 py-3"
+    SEARCH_CLS = "flex h-8 flex-1 items-center gap-2 rounded-md border border-input bg-background " \
+                 "px-3 text-sm text-muted-foreground focus-within:border-ring focus-within:ring-[3px] " \
+                 "focus-within:ring-ring/50 transition"
+    SEARCH_INPUT = "w-full bg-transparent outline-none placeholder:text-muted-foreground text-foreground text-sm"
+    TABLE_CLS  = "w-full caption-bottom text-sm"
+    THEAD_CLS  = "bg-muted/40"
+    TH_CLS     = "h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap"
+    TH_SORT    = "cursor-pointer select-none hover:text-foreground transition-colors"
+    TR_CLS     = "border-t border-border transition-colors hover:bg-muted/30"
+    TD_CLS     = "px-4 py-3 align-middle"
+    FOOTER_CLS = "flex items-center justify-between border-t border-border bg-background px-4 py-3 " \
+                 "text-sm text-muted-foreground"
+    PAGE_BTN   = "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border " \
+                 "hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none " \
+                 "disabled:opacity-40 transition"
+    SORT_ASC   = "▲"
+    SORT_DESC  = "▼"
+
+    def initialize(columns:, rows:, per_page: 10, caption: nil, **html_attrs)
+      @columns   = columns
+      @rows      = rows
+      @per_page  = per_page.to_i
+      @caption   = caption
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(WRAPPER, @extra_class),
+        data: {
+          controller: "data-table",
+          data_table_per_page_value: @per_page,
+          data_table_total_value: @rows.size
+        },
+        **@html_attrs) do
+        concat toolbar
+        concat table_element
+        concat footer if @per_page > 0
+      end
+    end
+
+    private
+
+    def toolbar
+      content_tag(:div, class: TOOLBAR) do
+        concat search_box
+      end
+    end
+
+    def search_box
+      content_tag(:label, class: SEARCH_CLS) do
+        concat search_icon
+        concat tag.input(
+          type: "search", class: SEARCH_INPUT,
+          placeholder: "Search…",
+          data: {
+            data_table_target: "search",
+            action: "input->data-table#filter"
+          })
+      end
+    end
+
+    def table_element
+      content_tag(:table, class: TABLE_CLS) do
+        concat content_tag(:caption, @caption, class: "mt-2 text-sm text-muted-foreground") if @caption
+        concat thead
+        concat tbody
+      end
+    end
+
+    def thead
+      content_tag(:thead, class: THEAD_CLS) do
+        content_tag(:tr) do
+          safe_join(@columns.map { |col| th_cell(col) })
+        end
+      end
+    end
+
+    def th_cell(col)
+      key     = col[:key].to_s
+      label   = col[:label] || key.humanize
+      sortable = col.fetch(:sortable, false)
+
+      content_tag(:th, class: cn(TH_CLS, sortable ? TH_SORT : nil),
+        data: sortable ? {
+          action: "click->data-table#sort",
+          data_table_key_param: key
+        } : {}) do
+        content_tag(:span, class: "flex items-center gap-1") do
+          concat label
+          if sortable
+            concat content_tag(:span, SORT_ASC,
+              class: "text-xs opacity-0 data-[active=asc]:opacity-100",
+              data: { data_table_target: "sortIndicator", data_table_sort_key: key, data_table_dir: "asc" })
+            concat content_tag(:span, SORT_DESC,
+              class: "text-xs opacity-0 data-[active=desc]:opacity-100",
+              data: { data_table_target: "sortIndicator", data_table_sort_key: key, data_table_dir: "desc" })
+          end
+        end
+      end
+    end
+
+    def tbody
+      content_tag(:tbody, data: { data_table_target: "body" }) do
+        safe_join(@rows.map { |row| tr_row(row) })
+      end
+    end
+
+    def tr_row(row)
+      content_tag(:tr, class: TR_CLS, data: { data_table_row: true }) do
+        safe_join(@columns.map { |col| td_cell(row, col[:key].to_s) })
+      end
+    end
+
+    def td_cell(row, key)
+      content_tag(:td, row[key.to_sym] || row[key], class: TD_CLS)
+    end
+
+    def footer
+      content_tag(:div, class: FOOTER_CLS) do
+        concat content_tag(:span, "Page 1",
+          data: { data_table_target: "pageLabel" })
+        concat(content_tag(:div, class: "flex items-center gap-1") {
+          concat page_btn("‹", "click->data-table#prevPage", "Previous page")
+          concat page_btn("›", "click->data-table#nextPage", "Next page")
+        })
+      end
+    end
+
+    def page_btn(label, action, aria)
+      content_tag(:button, label, type: "button",
+        class: PAGE_BTN,
+        "aria-label": aria,
+        data: { action: action })
+    end
+
+    def search_icon
+      content_tag(:svg,
+        safe_join([
+          content_tag(:circle, nil, cx: "11", cy: "11", r: "8"),
+          content_tag(:path, nil, d: "m21 21-4.3-4.3")
+        ]),
+        xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        "stroke-linecap": "round", "stroke-linejoin": "round",
+        class: "size-4 shrink-0", "aria-hidden": "true")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/data_table/data_table_controller.js

@@ -0,0 +1,115 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["body", "search", "pageLabel", "sortIndicator"]
+  static values = {
+    perPage: { type: Number, default: 10 },
+    total:   { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.#allRows = Array.from(this.bodyTarget.querySelectorAll("tr[data-data-table-row]"))
+    this.#filtered = [...this.#allRows]
+    this.#page = 1
+    this.#sortKey = null
+    this.#sortDir = null
+    this.#render()
+  }
+
+  filter() {
+    const q = this.searchTarget.value.trim().toLowerCase()
+    this.#filtered = q
+      ? this.#allRows.filter(row =>
+          row.textContent.toLowerCase().includes(q)
+        )
+      : [...this.#allRows]
+    this.#page = 1
+    this.#sortKey = null
+    this.#sortDir = null
+    this.#clearSortIndicators()
+    this.#render()
+  }
+
+  sort({ params: { key } }) {
+    if (this.#sortKey === key) {
+      this.#sortDir = this.#sortDir === "asc" ? "desc" : null
+      if (!this.#sortDir) this.#sortKey = null
+    } else {
+      this.#sortKey = key
+      this.#sortDir = "asc"
+    }
+
+    this.#clearSortIndicators()
+    if (this.#sortKey) {
+      const indicator = this.sortIndicatorTargets.find(
+        el => el.dataset.dataTableSortKey === this.#sortKey &&
+              el.dataset.dataTableDir === this.#sortDir
+      )
+      if (indicator) indicator.dataset.active = this.#sortDir
+    }
+
+    if (this.#sortKey) {
+      const colIdx = this.#columnIndex(this.#sortKey)
+      this.#filtered.sort((a, b) => {
+        const av = a.cells[colIdx]?.textContent.trim() ?? ""
+        const bv = b.cells[colIdx]?.textContent.trim() ?? ""
+        const n = parseFloat(av) - parseFloat(bv)
+        const cmp = isNaN(n) ? av.localeCompare(bv) : n
+        return this.#sortDir === "asc" ? cmp : -cmp
+      })
+    }
+
+    this.#page = 1
+    this.#render()
+  }
+
+  prevPage() {
+    if (this.#page > 1) { this.#page--; this.#render() }
+  }
+
+  nextPage() {
+    if (this.#page < this.#totalPages) { this.#page++; this.#render() }
+  }
+
+  #render() {
+    const rows = this.#filtered
+    const perPage = this.perPageValue
+    const total = rows.length
+
+    const start = perPage > 0 ? (this.#page - 1) * perPage : 0
+    const end   = perPage > 0 ? start + perPage : total
+
+    this.#allRows.forEach(row => { row.style.display = "none" })
+    rows.slice(start, end).forEach(row => { row.style.display = "" })
+
+    if (this.hasPageLabelTarget) {
+      if (perPage > 0 && total > 0) {
+        this.pageLabelTarget.textContent =
+          `Page ${this.#page} of ${this.#totalPages} (${total} rows)`
+      } else {
+        this.pageLabelTarget.textContent = `${total} rows`
+      }
+    }
+  }
+
+  #clearSortIndicators() {
+    this.sortIndicatorTargets.forEach(el => delete el.dataset.active)
+  }
+
+  #columnIndex(key) {
+    const headers = this.element.querySelectorAll("th[data-data-table-key-param]")
+    return Array.from(headers).findIndex(h => h.dataset.dataTableKeyParam === key)
+  }
+
+  get #totalPages() {
+    return this.perPageValue > 0
+      ? Math.max(1, Math.ceil(this.#filtered.length / this.perPageValue))
+      : 1
+  }
+
+  #allRows = []
+  #filtered = []
+  #page = 1
+  #sortKey = null
+  #sortDir = null
+}

data/lib/generators/view_primitives/add/templates/date_picker/date_picker_component.rb.tt

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module UI
+  class DatePickerComponent < ApplicationComponent
+    # Date picker — text input that opens a calendar popover on focus/click.
+    #
+    # value:       Date or nil — initial selected date
+    # name:        form field name for the hidden input
+    # placeholder: displayed when no date is selected (default: "Pick a date")
+    # min/max:     Date bounds passed to the calendar
+
+    WRAPPER  = "relative inline-block"
+    TRIGGER  = "flex h-9 w-48 cursor-pointer items-center gap-2 rounded-md border border-input " \
+               "bg-background px-3 text-sm text-foreground shadow-xs " \
+               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition " \
+               "aria-expanded:border-ring"
+    ICON_CLS = "size-4 shrink-0 text-muted-foreground"
+    POPOVER  = "absolute left-0 top-full z-50 mt-1 hidden w-max rounded-lg border border-border " \
+               "bg-popover p-0 shadow-md data-[open=true]:block"
+
+    def initialize(value: nil, name: nil, placeholder: "Pick a date", min: nil, max: nil, **html_attrs)
+      @value       = value
+      @name        = name
+      @placeholder = placeholder
+      @min         = min
+      @max         = max
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(WRAPPER, @extra_class),
+        data: { controller: "date-picker" },
+        **@html_attrs) do
+        concat hidden_input if @name
+        concat trigger_button
+        concat calendar_popover
+      end
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name,
+        value: @value&.iso8601,
+        data: { date_picker_target: "hidden" })
+    end
+
+    def trigger_button
+      label_text = @value ? @value.strftime("%B %-d, %Y") : @placeholder
+      content_tag(:button, type: "button",
+        class: TRIGGER,
+        "aria-expanded": "false",
+        "aria-haspopup": "dialog",
+        data: {
+          date_picker_target: "trigger",
+          action: "click->date-picker#toggle"
+        }) do
+        concat calendar_icon
+        concat content_tag(:span, label_text, data: { date_picker_target: "label" })
+      end
+    end
+
+    def calendar_popover
+      content_tag(:div,
+        class: POPOVER,
+        role: "dialog",
+        "aria-modal": "true",
+        data: {
+          date_picker_target: "popover",
+          action: "calendar:change->date-picker#dateSelected"
+        }) do
+        render UI::CalendarComponent.new(
+          selected: @value,
+          min: @min,
+          max: @max
+        )
+      end
+    end
+
+    def calendar_icon
+      content_tag(:svg,
+        content_tag(:path, nil,
+          d: "M8 2v3m8-3v3M3.5 8h17M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
+          "stroke-linecap": "round", "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        class: ICON_CLS, "aria-hidden": "true")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/date_picker/date_picker_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "popover", "label", "hidden"]
+
+  connect() {
+    this.#outsideHandler = (e) => {
+      if (!this.element.contains(e.target)) this.close()
+    }
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    this.popoverTarget.dataset.open = "true"
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+    document.addEventListener("click", this.#outsideHandler)
+    this.isOpen = true
+  }
+
+  close() {
+    this.popoverTarget.dataset.open = "false"
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+    document.removeEventListener("click", this.#outsideHandler)
+    this.isOpen = false
+  }
+
+  dateSelected(event) {
+    const iso = event.detail.date
+    const [year, month, day] = iso.split("-").map(Number)
+    const d = new Date(year, month - 1, day)
+
+    this.labelTarget.textContent = d.toLocaleDateString("default", {
+      month: "long",
+      day: "numeric",
+      year: "numeric"
+    })
+
+    if (this.hasHiddenTarget) this.hiddenTarget.value = iso
+
+    this.close()
+  }
+
+  #outsideHandler = null
+  isOpen = false
+}

data/lib/generators/view_primitives/add/templates/device_mockup/device_mockup_component.rb.tt

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module UI
+  class DeviceMockupComponent < ApplicationComponent
+    VARIANTS = {
+      phone: {
+        outer:  "relative mx-auto h-[600px] w-[300px] rounded-[2.5rem] border-[14px] " \
+                "border-foreground bg-foreground shadow-xl",
+        screen: "relative h-full w-full overflow-hidden rounded-[2rem] bg-white dark:bg-zinc-900",
+        notch:  "absolute left-1/2 top-0 z-10 h-6 w-28 -translate-x-1/2 rounded-b-2xl bg-foreground"
+      },
+      browser: {
+        outer:  "relative mx-auto overflow-hidden rounded-xl border border-border bg-background shadow-xl",
+        bar:    "flex h-10 items-center gap-2 border-b border-border bg-muted px-4",
+        dots:   "flex gap-1.5",
+        screen: "overflow-hidden bg-white dark:bg-zinc-900"
+      },
+      tablet: {
+        outer:  "relative mx-auto h-[500px] w-[700px] rounded-[1.75rem] border-[12px] " \
+                "border-foreground bg-foreground shadow-xl",
+        screen: "relative h-full w-full overflow-hidden rounded-[1.25rem] bg-white dark:bg-zinc-900",
+        notch:  nil
+      }
+    }.freeze
+
+    # variant: :phone (default) | :browser | :tablet
+    # url:     address bar text for :browser variant
+    def initialize(variant: :phone, url: nil, **html_attrs)
+      @variant = variant.to_sym
+      @url     = url
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      cfg = VARIANTS.fetch(@variant, VARIANTS[:phone])
+
+      content_tag(:div, class: cn(cfg[:outer], @extra_class), **@html_attrs) do
+        if @variant == :browser
+          concat browser_bar(cfg)
+          concat content_tag(:div, content, class: cfg[:screen])
+        else
+          concat content_tag(:div, nil, class: cfg[:notch]) if cfg[:notch]
+          concat content_tag(:div, content, class: cfg[:screen])
+        end
+      end
+    end
+
+    private
+
+    def browser_bar(cfg)
+      content_tag(:div, class: cfg[:bar]) do
+        concat(content_tag(:div, class: cfg[:dots]) {
+          %w[bg-red-400 bg-yellow-400 bg-green-400].each do |color|
+            concat content_tag(:div, nil, class: "size-3 rounded-full #{color}")
+          end
+        })
+        if @url
+          concat content_tag(:div, @url,
+            class: "ml-4 flex-1 truncate rounded-md bg-background px-3 py-1 text-xs text-muted-foreground")
+        end
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/dialog/dialog_component.rb.tt

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module UI
+  class DialogComponent < ApplicationComponent
+    renders_one :trigger
+    renders_one :footer
+
+    OVERLAY = "fixed inset-0 z-50 bg-black/50"
+    PANEL   = "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " \
+              "translate-x-[-50%] translate-y-[-50%] gap-4 " \
+              "rounded-lg border bg-background p-6 shadow-lg outline-none sm:max-w-lg"
+
+    def initialize(title: nil, description: nil, **html_attrs)
+      @title       = title
+      @description = description
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, data: { controller: "dialog" }, **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->dialog#open" }, class: "contents") if trigger
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div, data: { dialog_target: "panel" }, hidden: true) do
+        concat content_tag(:div, nil,
+          class: OVERLAY,
+          data: { action: "click->dialog#close" },
+          "aria-hidden": "true")
+        concat content_tag(:div,
+          class: cn(PANEL, @extra_class),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": @title,
+          data: { action: "keydown.escape@window->dialog#close" }) {
+          concat close_button
+          concat header_area
+          concat content_tag(:div, content, class: "py-1 text-sm text-foreground")
+          concat content_tag(:div, footer, class: "mt-6 flex justify-end gap-2") if footer
+        }
+      end
+    end
+
+    def header_area
+      return "" if @title.nil? && @description.nil?
+
+      content_tag(:div, class: "mb-4 pr-6") do
+        concat content_tag(:h2, @title, class: "text-lg font-semibold leading-none tracking-tight") if @title
+        concat content_tag(:p, @description, class: "mt-2 text-sm text-muted-foreground") if @description
+      end
+    end
+
+    def close_button
+      content_tag(:button,
+        close_svg,
+        type: "button",
+        class: "absolute right-4 top-4 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
+        data: { action: "click->dialog#close" },
+        "aria-label": "Close")
+    end
+
+    def close_svg
+      raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>')
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/dialog/dialog_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  open() {
+    this.panelTarget.hidden = false
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+    document.body.style.overflow = ""
+  }
+}

data/lib/generators/view_primitives/add/templates/drawer/drawer_component.rb.tt

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module UI
+  class DrawerComponent < ApplicationComponent
+    renders_one :trigger
+    renders_one :footer
+
+    OVERLAY = "fixed inset-0 z-50 bg-black/50"
+    PANEL   = "fixed inset-x-0 bottom-0 z-50 rounded-t-xl border-t bg-background shadow-xl overflow-y-auto"
+
+    def initialize(title: nil, description: nil, **html_attrs)
+      @title       = title
+      @description = description
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, data: { controller: "drawer" }, **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->drawer#open" }, class: "contents") if trigger
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div, data: { drawer_target: "panel" }, hidden: true) do
+        concat content_tag(:div, nil,
+          class: OVERLAY,
+          data: { action: "click->drawer#close" },
+          "aria-hidden": "true")
+        concat content_tag(:div,
+          class: cn(PANEL, @extra_class),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": @title,
+          data: { action: "keydown.escape@window->drawer#close" }) {
+          concat drag_handle
+          concat header_area
+          concat content_tag(:div, content, class: "px-4 pb-6 text-sm")
+          concat content_tag(:div, footer, class: "px-4 pb-6 flex justify-end gap-2") if footer
+        }
+      end
+    end
+
+    def drag_handle
+      content_tag(:div, class: "flex justify-center pt-3 pb-2") {
+        content_tag(:div, nil, class: "h-1.5 w-12 rounded-full bg-muted")
+      }
+    end
+
+    def header_area
+      return "" if @title.nil? && @description.nil?
+
+      content_tag(:div, class: "px-4 pb-4") do
+        concat content_tag(:h2, @title, class: "text-lg font-semibold text-foreground") if @title
+        concat content_tag(:p, @description, class: "mt-1 text-sm text-muted-foreground") if @description
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/drawer/drawer_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  open() {
+    this.panelTarget.hidden = false
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+    document.body.style.overflow = ""
+  }
+}

data/lib/generators/view_primitives/add/templates/dropdown_menu/dropdown_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  toggle() {
+    this.panelTarget.hidden = !this.panelTarget.hidden
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.close()
+  }
+}