RubyGems - polaris_view_components - Versions diffs - 0.5.0 → 0.8.1 - Mend

polaris_view_components 0.5.0 → 0.8.1

Files changed (165) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4ecf6c373c0c3a1188d677df7da49034a9094392ce74b0bac9e72780b1a851a
-  data.tar.gz: 836ebef4a9e97c359d4bf36e4ae497d673a6579de232c0a82f6cf12d4f33e3d9
+  metadata.gz: 4d4484aea870437d2c04e9962e86b40d7ebfcfd78119900fd9e5fde4cf225301
+  data.tar.gz: 8afb88abb96c45259eebbf58af6229faa543afae16c38f96858eaa92e9944795
 SHA512:
-  metadata.gz: add02e909f36a997d49d261b3960ad41636001dbb4a6beea5f1652a7bfadab94d9bb2e07cefc5618f652bbdd431934ceb11da59388d0523d75686bbdddc7723e
-  data.tar.gz: cdd86e17c2a970aae8e5fec22cb296eae4cd1df572dee371978d0b02450cf6185c30c5a891db0943b62f1f114b593a2a3e890840362c1c1efc9da6087c663dd7
+  metadata.gz: 763b2fef888918919bf55c8e3fad976d60727b79b432683d72b4227a178ee6c3ec3f048bc27c6b8b29107b6f8fec5720f07136b16c21202e9e0a427c4bce6955
+  data.tar.gz: 0b5fdf681d13bab109bf60231bcf9b1fdbd79d86d87859d8df41bd426b1daaf2f779ef38d445806598c3ab974139edda3486514d917d8280eabff654507a021e

data/README.md CHANGED Viewed

@@ -8,7 +8,7 @@ Polaris ViewComponents is an implementation of the Polaris Design System using [
 ## Preview
-https://polaris-view-components.herokuapp.com/lookbook
+https://polarisviewcomponents.org
 ## Usage
@@ -47,6 +47,16 @@ Define Polaris style on your `<body>` tag:
 ### Importmaps
+Install dependencies:
+```
+bin/importmap pin @rails/request.js --download
+```
+If you use sprockets make sure the vendor folder is loaded in `app/assets/config/manifest.js`:
+```js
+//= link_tree ../../../vendor/assets/javascripts .js
+```
 Add to `config/importmap.rb`:
 ```rb
@@ -65,7 +75,7 @@ registerPolarisControllers(Stimulus)
 Install NPM package:
 ```bash
-yarn add polaris-view-components
+yarn add polaris-view-components @rails/request.js
 ```
 Add to `app/javascript/controllers/index.js`:

data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js ADDED Viewed

@@ -0,0 +1,136 @@
+import { Controller } from '@hotwired/stimulus'
+import { get } from '@rails/request.js'
+import { debounce } from './utils'
+export default class extends Controller {
+  static targets = ['popover', 'input', 'results', 'option', 'emptyState']
+  static values = { url: String, selected: Array }
+  connect() {
+    this.inputTarget.addEventListener("input", this.onInputChange)
+  }
+  disconnect() {
+    this.inputTarget.removeEventListener("input", this.onInputChange)
+  }
+  // Actions
+  toggle() {
+    if (this.isRemote && this.visibleOptions.length == 0 && this.value.length == 0) {
+      this.fetchResults()
+    } else {
+      this.handleResults()
+    }
+  }
+  select(event) {
+    const input = event.currentTarget
+    const label = input.closest('li').dataset.label
+    const changeEvent = new CustomEvent('polaris-autocomplete:change', {
+      detail: { value: input.value, label, selected: input.checked }
+    })
+    this.element.dispatchEvent(changeEvent)
+  }
+  onInputChange = debounce(() => {
+    if (this.isRemote) {
+      this.fetchResults()
+    } else {
+      this.filterOptions()
+    }
+  }, 200)
+  reset() {
+    this.inputTarget.value = ''
+    this.optionTargets.forEach(option => {
+      option.classList.add('Polaris--hidden')
+    })
+    this.handleResults()
+  }
+  // Private
+  get isRemote() {
+    return this.urlValue.length > 0
+  }
+  get popoverController() {
+    return this.application.getControllerForElementAndIdentifier(this.popoverTarget, 'polaris-popover')
+  }
+  get value() {
+    return this.inputTarget.value
+  }
+  get visibleOptions() {
+    return this.optionTargets.filter(option => {
+      return !option.classList.contains('Polaris--hidden')
+    })
+  }
+  handleResults() {
+    if (this.visibleOptions.length > 0) {
+      this.hideEmptyState()
+      this.popoverController.show()
+      this.checkSelected()
+    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
+      this.showEmptyState()
+    } else {
+      this.popoverController.forceHide()
+    }
+  }
+  filterOptions() {
+    if (this.value === '') {
+      this.optionTargets.forEach(option => {
+        option.classList.remove('Polaris--hidden')
+      })
+    } else {
+      const filterRegex = new RegExp(this.value, 'i')
+      this.optionTargets.forEach(option => {
+        if (option.dataset.label.match(filterRegex)) {
+          option.classList.remove('Polaris--hidden')
+        } else {
+          option.classList.add('Polaris--hidden')
+        }
+      })
+    }
+    this.handleResults()
+  }
+  async fetchResults() {
+    const response = await get(this.urlValue, {
+      query: { q: this.value }
+    })
+    if (response.ok) {
+      const results = await response.html
+      this.resultsTarget.innerHTML = results
+      this.handleResults()
+    }
+  }
+  showEmptyState() {
+    if (this.hasEmptyStateTarget) {
+      this.resultsTarget.classList.add('Polaris--hidden')
+      this.emptyStateTarget.classList.remove('Polaris--hidden')
+    }
+  }
+  hideEmptyState() {
+    if (this.hasEmptyStateTarget) {
+      this.emptyStateTarget.classList.add('Polaris--hidden')
+      this.resultsTarget.classList.remove('Polaris--hidden')
+    }
+  }
+  checkSelected() {
+    this.visibleOptions.forEach(option => {
+      const input = option.querySelector('input')
+      if (!input) return
+      input.checked = this.selectedValue.includes(input.value)
+    })
+  }
+}

data/app/assets/javascripts/polaris_view_components/button_controller.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  disable(event) {
+    if (this.button.disabled) {
+      event.preventDefault()
+    } else {
+      this.button.disabled = true
+      this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
+      this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
+    }
+  }
+  enable() {
+    if (this.button.disabled) {
+      this.button.disabled = false
+      this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
+      if (this.spinner) this.spinner.remove()
+    }
+  }
+  // Private
+  get button() {
+    return this.element
+  }
+  get buttonContent() {
+    return this.button.querySelector(".Polaris-Button__Content")
+  }
+  get spinner() {
+    return this.button.querySelector(".Polaris-Button__Spinner")
+  }
+  get spinnerHTML() {
+    return `
+      <span class="Polaris-Button__Spinner">
+        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
+          </svg>
+        </span>
+      </span>
+    `
+  }
+}