rails-active-ui 0.1.0

data/app/javascript/ui/controllers/fui_popup_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Popup — tooltips and popup content.
+// Bridges: $.fn.popup
+//
+// Usage:
+//   <span data-controller="fui-popup"
+//         data-fui-popup-content-value="Tooltip text"
+//         data-fui-popup-position-value="top center">
+//     Hover me
+//   </span>
+//
+export default class extends Controller {
+  static values = {
+    content:   { type: String, default: "" },
+    title:     { type: String, default: "" },
+    html:      { type: String, default: "" },
+    position:  { type: String, default: "top center" },
+    on:        { type: String, default: "hover" },
+    hoverable: { type: Boolean, default: false },
+    closable:  { type: Boolean, default: true },
+    variation: { type: String, default: "" },
+  }
+
+  connect() {
+    $(this.element).popup(this._options())
+  }
+
+  disconnect() {
+    $(this.element).popup("destroy")
+  }
+
+  show()   { $(this.element).popup("show") }
+  hide()   { $(this.element).popup("hide") }
+  toggle() { $(this.element).popup("toggle") }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      position:  this.positionValue,
+      on:        this.onValue,
+      hoverable: this.hoverableValue,
+      closable:  this.closableValue,
+      variation: this.variationValue || false,
+      onShow:    () => { this.dispatch("show") },
+      onVisible: () => { this.dispatch("visible") },
+      onHide:    () => { this.dispatch("hide") },
+      onHidden:  () => { this.dispatch("hidden") },
+    }
+
+    if (this.contentValue) opts.content = this.contentValue
+    if (this.titleValue)   opts.title = this.titleValue
+    if (this.htmlValue)    opts.html = this.htmlValue
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_progress_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Progress — progress bars with labels.
+// Bridges: $.fn.progress
+//
+// Usage:
+//   <div class="ui progress" data-controller="fui-progress"
+//        data-percent="45">
+//     <div class="bar">
+//       <div class="progress"></div>
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    percent:     { type: Number, default: 0 },
+    total:       { type: Number, default: 0 },
+    value:       { type: Number, default: 0 },
+    autoSuccess: { type: Boolean, default: true },
+    showActivity: { type: Boolean, default: true },
+    label:       { type: String, default: "percent" },
+    precision:   { type: Number, default: 0 },
+  }
+
+  connect() {
+    $(this.element).progress(this._options())
+  }
+
+  disconnect() {
+    $(this.element).progress("destroy")
+  }
+
+  setPercent(pct)  { $(this.element).progress("set percent", pct) }
+  setValue(val)     { $(this.element).progress("set progress", val) }
+  increment(amt)   { $(this.element).progress("increment", amt) }
+  decrement(amt)   { $(this.element).progress("decrement", amt) }
+  complete()       { $(this.element).progress("complete") }
+  reset()          { $(this.element).progress("reset") }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      autoSuccess:  this.autoSuccessValue,
+      showActivity: this.showActivityValue,
+      label:        this.labelValue,
+      precision:    this.precisionValue,
+      onChange: (percent, value, total) => {
+        this.dispatch("change", { detail: { percent, value, total } })
+      },
+      onSuccess: (total) => { this.dispatch("success", { detail: { total } }) },
+    }
+
+    if (this.totalValue > 0) opts.total = this.totalValue
+    if (this.valueValue > 0) opts.value = this.valueValue
+    if (this.percentValue > 0) opts.percent = this.percentValue
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_rating_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Rating — star/heart rating widget.
+// Bridges: $.fn.rating
+//
+// Usage:
+//   <div class="ui star rating" data-controller="fui-rating"
+//        data-fui-rating-max-rating-value="5"
+//        data-fui-rating-initial-rating-value="3">
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    maxRating:     { type: Number, default: 5 },
+    initialRating: { type: Number, default: 0 },
+    interactive:   { type: Boolean, default: true },
+    clearable:     { type: Boolean, default: false },
+    fireOnInit:    { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).rating(this._options())
+  }
+
+  disconnect() {
+    $(this.element).rating("destroy")
+  }
+
+  getRating()       { return $(this.element).rating("get rating") }
+  setRating(rating) { $(this.element).rating("set rating", rating) }
+  clearRating()     { $(this.element).rating("clear rating") }
+  enable()          { $(this.element).rating("enable") }
+  disable()         { $(this.element).rating("disable") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      maxRating:     this.maxRatingValue,
+      initialRating: this.initialRatingValue,
+      interactive:   this.interactiveValue,
+      clearable:     this.clearableValue,
+      fireOnInit:    this.fireOnInitValue,
+      onRate: (rating) => {
+        this.dispatch("rate", { detail: { rating } })
+      },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_search_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Search — search with local or remote data sources.
+// Bridges: $.fn.search
+//
+// Usage:
+//   <div class="ui search" data-controller="fui-search">
+//     <div class="ui icon input">
+//       <input class="prompt" type="text">
+//       <i class="search icon"></i>
+//     </div>
+//     <div class="results"></div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    minCharacters:    { type: Number, default: 1 },
+    searchDelay:      { type: Number, default: 200 },
+    maxResults:       { type: Number, default: 7 },
+    showNoResults:    { type: Boolean, default: true },
+    url:              { type: String, default: "" },
+    searchFields:     { type: Array, default: ["title", "description"] },
+    source:           { type: Array, default: [] },
+    noResultsMessage: { type: String, default: "No results found." },
+    apiSettings:      { type: String, default: "" },
+  }
+
+  connect() {
+    $(this.element).search(this._options())
+  }
+
+  disconnect() {
+    $(this.element).search("destroy")
+  }
+
+  query()       { $(this.element).search("query") }
+  showResults() { $(this.element).search("show results") }
+  hideResults() { $(this.element).search("hide results") }
+  getValue()    { return $(this.element).search("get value") }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      minCharacters: this.minCharactersValue,
+      searchDelay:   this.searchDelayValue,
+      maxResults:    this.maxResultsValue,
+      showNoResults: this.showNoResultsValue,
+      searchFields:  this.searchFieldsValue,
+      error: {
+        noResults: this.noResultsMessageValue,
+      },
+      onSelect: (result, response) => {
+        this.dispatch("select", { detail: { result, response } })
+      },
+      onResults: (response) => {
+        this.dispatch("results", { detail: { response } })
+      },
+      onResultsOpen: () => { this.dispatch("resultsOpen") },
+      onResultsClose: () => { this.dispatch("resultsClose") },
+    }
+
+    if (this.urlValue) {
+      opts.apiSettings = { url: this.urlValue }
+    } else if (this.apiSettingsValue) {
+      try { opts.apiSettings = JSON.parse(this.apiSettingsValue) }
+      catch (e) { /* invalid JSON */ }
+    }
+
+    if (this.sourceValue.length > 0) {
+      opts.source = this.sourceValue
+    }
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_shape_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Shape — 3D CSS shape transformations.
+// Bridges: $.fn.shape
+//
+// Usage:
+//   <div class="ui shape" data-controller="fui-shape">
+//     <div class="sides">
+//       <div class="side active">Side 1</div>
+//       <div class="side">Side 2</div>
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    duration:     { type: Number, default: 700 },
+    allowRepeats: { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).shape(this._options())
+  }
+
+  disconnect() {
+    $(this.element).shape("destroy")
+  }
+
+  flipUp()    { $(this.element).shape("flip up") }
+  flipDown()  { $(this.element).shape("flip down") }
+  flipLeft()  { $(this.element).shape("flip left") }
+  flipRight() { $(this.element).shape("flip right") }
+  flipOver()  { $(this.element).shape("flip over") }
+  flipBack()  { $(this.element).shape("flip back") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      duration:     this.durationValue,
+      allowRepeats: this.allowRepeatsValue,
+      onBeforeChange: () => { this.dispatch("beforeChange") },
+      onChange:        () => { this.dispatch("change") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_sidebar_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Sidebar — slide-out navigation panel.
+// Bridges: $.fn.sidebar
+//
+// Usage:
+//   <div class="ui sidebar" data-controller="fui-sidebar">
+//     <a class="item">Menu Item 1</a>
+//     <a class="item">Menu Item 2</a>
+//   </div>
+//   <div class="pusher">Main content</div>
+//
+export default class extends Controller {
+  static values = {
+    transition: { type: String, default: "overlay" },
+    closable:   { type: Boolean, default: true },
+    dimPage:    { type: Boolean, default: true },
+    scrollLock: { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).sidebar(this._options())
+  }
+
+  disconnect() {
+    $(this.element).sidebar("destroy")
+  }
+
+  show()   { $(this.element).sidebar("show") }
+  hide()   { $(this.element).sidebar("hide") }
+  toggle() { $(this.element).sidebar("toggle") }
+
+  // -- Private --
+
+  _options() {
+    return {
+      transition: this.transitionValue,
+      closable:   this.closableValue,
+      dimPage:    this.dimPageValue,
+      scrollLock: this.scrollLockValue,
+      onShow:    () => { this.dispatch("show") },
+      onVisible: () => { this.dispatch("visible") },
+      onHide:    () => { this.dispatch("hide") },
+      onHidden:  () => { this.dispatch("hidden") },
+      onChange:   () => { this.dispatch("change") },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_site_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Site — base utility module.
+// Bridges: $.site
+//
+// Usage:
+//   <body data-controller="fui-site">
+//
+export default class extends Controller {
+  static values = {
+    debug: { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).site(this._options())
+  }
+
+  disconnect() {
+    // $.site has no destroy method
+  }
+
+  // -- Private --
+
+  _options() {
+    return {
+      debug: this.debugValue,
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_slider_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Slider — range slider control.
+// Bridges: $.fn.slider
+//
+// Usage:
+//   <div class="ui slider" data-controller="fui-slider"
+//        data-fui-slider-min-value="0"
+//        data-fui-slider-max-value="100"
+//        data-fui-slider-step-value="1"
+//        data-fui-slider-start-value="50">
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    min:      { type: Number, default: 0 },
+    max:      { type: Number, default: 100 },
+    step:     { type: Number, default: 1 },
+    start:    { type: Number, default: 0 },
+    smooth:   { type: Boolean, default: false },
+    vertical: { type: Boolean, default: false },
+  }
+
+  connect() {
+    $(this.element).slider(this._options())
+  }
+
+  disconnect() {
+    $(this.element).slider("destroy")
+  }
+
+  getValue()     { return $(this.element).slider("get value") }
+  setValue(val)   { $(this.element).slider("set value", val) }
+
+  // -- Private --
+
+  _options() {
+    return {
+      min:      this.minValue,
+      max:      this.maxValue,
+      step:     this.stepValue,
+      start:    this.startValue,
+      smooth:   this.smoothValue,
+      vertical: this.verticalValue,
+      onChange: (value) => {
+        this.dispatch("change", { detail: { value } })
+      },
+      onMove: (value) => {
+        this.dispatch("move", { detail: { value } })
+      },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_state_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI State — UI state management for elements.
+// Bridges: $.fn.state
+//
+// Usage:
+//   <button data-controller="fui-state"
+//           data-fui-state-active-text-value="Following"
+//           data-fui-state-inactive-text-value="Follow"
+//           data-action="click->fui-state#toggle">
+//     Follow
+//   </button>
+//
+export default class extends Controller {
+  static values = {
+    activeText:     { type: String, default: "" },
+    inactiveText:   { type: String, default: "" },
+    activateText:   { type: String, default: "" },
+    deactivateText: { type: String, default: "" },
+    flashText:      { type: String, default: "" },
+    flashDuration:  { type: Number, default: 1000 },
+  }
+
+  connect() {
+    $(this.element).state(this._options())
+  }
+
+  disconnect() {
+    $(this.element).state("destroy")
+  }
+
+  toggle()     { $(this.element).state("toggle") }
+  activate()   { $(this.element).state("activate") }
+  deactivate() { $(this.element).state("deactivate") }
+  enable()     { $(this.element).state("enable") }
+  disable()    { $(this.element).state("disable") }
+
+  flash(text) {
+    $(this.element).state("flash text", text || this.flashTextValue)
+  }
+
+  // -- Private --
+
+  _options() {
+    const opts = {}
+
+    const text = {}
+    if (this.activeTextValue)     text.active = this.activeTextValue
+    if (this.inactiveTextValue)   text.inactive = this.inactiveTextValue
+    if (this.activateTextValue)   text.activate = this.activateTextValue
+    if (this.deactivateTextValue) text.deactivate = this.deactivateTextValue
+    if (this.flashTextValue)      text.flash = this.flashTextValue
+    if (Object.keys(text).length > 0) opts.text = text
+
+    if (this.flashDurationValue !== 1000) opts.flashDuration = this.flashDurationValue
+
+    opts.onChange = () => { this.dispatch("change") }
+    opts.onActivate = () => { this.dispatch("activate") }
+    opts.onDeactivate = () => { this.dispatch("deactivate") }
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_sticky_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Sticky — stick elements to viewport on scroll.
+// Bridges: $.fn.sticky
+//
+// Usage:
+//   <div data-controller="fui-sticky"
+//        data-fui-sticky-offset-value="14">
+//     This content becomes sticky on scroll
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    offset:       { type: Number, default: 0 },
+    bottomOffset: { type: Number, default: 0 },
+    pushing:      { type: Boolean, default: false },
+    jitter:       { type: Number, default: 5 },
+    context:      { type: String, default: "" },
+  }
+
+  connect() {
+    $(this.element).sticky(this._options())
+  }
+
+  disconnect() {
+    $(this.element).sticky("destroy")
+  }
+
+  refresh() { $(this.element).sticky("refresh") }
+  reset()   { $(this.element).sticky("reset") }
+
+  // -- Private --
+
+  _options() {
+    const opts = {
+      offset:       this.offsetValue,
+      bottomOffset: this.bottomOffsetValue,
+      pushing:      this.pushingValue,
+      jitter:       this.jitterValue,
+      onStick:   () => { this.dispatch("stick") },
+      onUnstick: () => { this.dispatch("unstick") },
+      onTop:     () => { this.dispatch("top") },
+      onBottom:  () => { this.dispatch("bottom") },
+    }
+
+    if (this.contextValue) opts.context = this.contextValue
+
+    return opts
+  }
+}

data/app/javascript/ui/controllers/fui_tab_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Tab — tab navigation with content panels.
+// Bridges: $.fn.tab
+//
+// Usage:
+//   <div data-controller="fui-tab">
+//     <div class="ui tabular menu">
+//       <a class="item active" data-tab="first">First</a>
+//       <a class="item" data-tab="second">Second</a>
+//     </div>
+//     <div class="ui tab segment active" data-tab="first">
+//       First tab content
+//     </div>
+//     <div class="ui tab segment" data-tab="second">
+//       Second tab content
+//     </div>
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    history:     { type: Boolean, default: false },
+    historyType: { type: String, default: "hash" },
+  }
+
+  connect() {
+    // Fomantic tab needs to be initialized on the menu items, not the container.
+    // Find tabular menu items within this controller's element.
+    const $items = $(this.element).find(".item[data-tab]")
+    if ($items.length > 0) {
+      $items.tab(this._options())
+    }
+  }
+
+  disconnect() {
+    const $items = $(this.element).find(".item[data-tab]")
+    if ($items.length > 0) {
+      $items.tab("destroy")
+    }
+  }
+
+  changeTab(tabPath) {
+    $(this.element).find(".item[data-tab]").tab("change tab", tabPath)
+  }
+
+  // -- Private --
+
+  _options() {
+    return {
+      history:     this.historyValue,
+      historyType: this.historyTypeValue,
+      onVisible: (tabPath) => {
+        this.dispatch("change", { detail: { tab: tabPath } })
+      },
+    }
+  }
+}

data/app/javascript/ui/controllers/fui_toast_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Fomantic-UI Toast — toast notifications.
+// Bridges: $.fn.toast
+//
+// Usage:
+//   <div data-controller="fui-toast"
+//        data-fui-toast-title-value="Success"
+//        data-fui-toast-message-value="Item saved."
+//        data-fui-toast-class-value="success">
+//   </div>
+//
+export default class extends Controller {
+  static values = {
+    position:       { type: String, default: "top right" },
+    displayTime:    { type: Number, default: 3000 },
+    closeOnClick:   { type: Boolean, default: true },
+    closeIcon:      { type: Boolean, default: false },
+    class:          { type: String, default: "neutral" },
+    title:          { type: String, default: "" },
+    message:        { type: String, default: "" },
+    showProgress:   { type: Boolean, default: false },
+    progressUp:     { type: Boolean, default: false },
+    pauseOnHover:   { type: Boolean, default: true },
+    newestOnTop:    { type: Boolean, default: false },
+    compact:        { type: Boolean, default: true },
+  }
+
+  connect() {
+    // Toast is typically triggered imperatively, not on connect.
+    // The element serves as a configuration holder.
+  }
+
+  disconnect() {}
+
+  show() {
+    $("body").toast(this._options())
+  }
+
+  // -- Private --
+
+  _options() {
+    return {
+      position:     this.positionValue,
+      displayTime:  this.displayTimeValue,
+      closeOnClick: this.closeOnClickValue,
+      closeIcon:    this.closeIconValue,
+      class:        this.classValue,
+      title:        this.titleValue,
+      message:      this.messageValue,
+      showProgress: this.showProgressValue ? (this.progressUpValue ? "top" : "bottom") : false,
+      pauseOnHover: this.pauseOnHoverValue,
+      newestOnTop:  this.newestOnTopValue,
+      compact:      this.compactValue,
+      onShow:   () => { this.dispatch("show") },
+      onHide:   () => { this.dispatch("hide") },
+      onRemove: () => { this.dispatch("remove") },
+    }
+  }
+}