css-zero 0.0.36 → 0.0.38

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02bf5fecc4db0a341a8e9787bf93ff11f447b0c36d71d02105fccfb544db431e
-  data.tar.gz: 6c39de744cd1c74965873dc531e55b8c8229785d698bcbf355de88a6f5f4ff04
+  metadata.gz: 609a6d11cfe6b31670eda63d7104d2d76069f0fe352bc4b6f7b0d00e5e7c2ea1
+  data.tar.gz: b118ad5a3842de5ab4df410b5516e62d52b9e241d559ec88f9146cdcc729b68a
 SHA512:
-  metadata.gz: eb4d6e6c8b0ec2b26e98eb4b3cd504d20024787ab435a65b0b624cbf1acdf044e5afe13be4118091bfb2b321e7f7d0e6afc5ab08b8e12bbcbdce93e9196fae0b
-  data.tar.gz: d93dfdf03c9752c3c938c81282b48c4fef238b344f7409e35af9a4f5369eca79b8c2feed210c0301639c9b21e367258640a7e97c4142b83adb5e393129ac674c
+  metadata.gz: 4dafa265f72d212202676d56ae7e3b5d20ee92516829c802a78794c43d3786aa68a7ed274361a2e3077df2e893cd75d298610f3a420e83de2703c0498419771f
+  data.tar.gz: fd08c640bdc6b4409b046e86a8e817dd916fef129c28cc8cb8f0a04c77080bb27c4f372fec509897d17706473e7ef334c081fce1d0e7157717189e7c864a5f95

data/README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 ```
 
 ### Requirements

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.36"
+  VERSION = "0.0.38"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

data/lib/generators/css_zero/add/resources.yml

@@ -40,22 +40,26 @@ input:
   - app/javascript/controllers/check_all_controller.js
 input_concerns:
   - app/javascript/controllers/autoselect_controller.js
-  - app/javascript/controllers/clear_button_controller.js
-  - app/assets/images/x.svg
-  - app/javascript/controllers/reveal_button_controller.js
+  - app/javascript/controllers/copyable_input_controller.js
+  - app/javascript/controllers/clearable_input_controller.js
+  - app/javascript/controllers/revealable_input_controller.js
+  - app/assets/images/copy.svg
+  - app/assets/images/check.svg
   - app/assets/images/eye.svg
   - app/assets/images/eye-off.svg
-  - app/javascript/controllers/copy_button_controller.js
-  - app/assets/images/copy.svg
+  - app/assets/images/x.svg
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/images/menu.svg
 lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js
+  - app/javascript/controllers/web_share_controller.js
   - app/assets/images/download.svg
   - app/assets/images/share.svg
   - app/assets/images/x.svg
+local_time:
+  - app/javascript/controllers/local_time_controller.js
 pagination:
   - app/assets/images/chevron-right.svg
   - app/assets/images/chevron-left.svg
@@ -70,9 +74,9 @@ sheet:
   - app/assets/images/x.svg
 skeleton:
   - app/assets/stylesheets/skeleton.css
-  - app/javascript/controllers/form_controller.js
 switch:
   - app/assets/stylesheets/switch.css
+  - app/javascript/controllers/form_controller.js
 table:
   - app/assets/stylesheets/table.css
 tabs:

data/lib/generators/css_zero/add/templates/app/assets/images/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css

@@ -66,18 +66,14 @@
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
+  --btn-filter-hover: none;
   --btn-padding: 0;
 }
 
 .btn--rounded {
-  --btn-padding: var(--size-2);
   --btn-radius: var(--rounded-full);
 }
 
-.btn--pressed:active {
-  opacity: var(--opacity-50);
-}
-
 [aria-busy] .btn--loading:disabled {
   > * {
     visibility: hidden;

data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js

@@ -4,12 +4,20 @@ export default class extends Controller {
   static targets = [ "content" ]
 
   next() {
-    this.contentTarget.scrollTo({ left: this.#scrollLeft + this.#slideSize, behavior: "smooth" })
+    this.contentTarget.scrollTo({ left: this.#nextPosition, behavior: "smooth" })
   }
 
-  previous() {
-    this.contentTarget.scrollTo({ left: this.#scrollLeft - this.#slideSize, behavior: "smooth" })
-  }  
+  prev() {
+    this.contentTarget.scrollTo({ left: this.#prevPosition, behavior: "smooth" })
+  }
+
+  get #nextPosition() {
+    return this.#scrollLeft + this.#slideSize
+  }
+
+  get #prevPosition() {
+    return this.#scrollLeft - this.#slideSize
+  }
 
   get #scrollLeft() {
     return this.contentTarget.scrollLeft

data/lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js

@@ -3,7 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "dependent" ]
 
-  check({target}) {
+  check({ target }) {
     this.dependentTargets.forEach(element => element.checked = target.checked)
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input", "copyIcon", "successIcon" ]
+  static values  = { copied: Boolean }
+
+  #copiedTimeout = null
+
+  copiedValueChanged() {
+    this.#update()
+  }
+
+  copy() {
+    this.#copyToClipboard()
+    this.#reset()
+  }
+
+  #copyToClipboard() {
+    try {
+      navigator.clipboard.writeText(this.inputTarget.value)
+      this.copiedValue = true
+    } catch (error) {
+      console.warn(error.message);
+    }
+  }
+
+  #reset() {
+    clearTimeout(this.#copiedTimeout)
+    this.#copiedTimeout = setTimeout(() => { this.copiedValue = false }, 3000)
+  }
+
+  #update() {
+    this.copyIconTarget.hidden    = this.copiedValue
+    this.successIconTarget.hidden = !this.copiedValue
+  }
+}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js

@@ -2,9 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   click(event) {
-    if (this.#isClickable && !this.#shouldIgnore(event)) {
-      this.element.click()
-    }
+    if (this.#isClickable && !this.#shouldIgnore(event)) this.element.click()
   }
 
   #shouldIgnore(event) {

data/lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "time", "date", "datetime" ]
+
+  initialize() {
+    this.timeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short" })
+    this.dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: "long" })
+    this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
+  }
+
+  timeTargetConnected(target) {
+    this.#formatTime(this.timeFormatter, target)
+  }
+
+  dateTargetConnected(target) {
+    this.#formatTime(this.dateFormatter, target)
+  }
+
+  datetimeTargetConnected(target) {
+    this.#formatTime(this.dateTimeFormatter, target)
+  }
+
+  #formatTime(formatter, target) {
+    const dt = new Date(target.getAttribute("datetime"))
+    target.textContent = formatter.format(dt)
+    target.title = this.dateTimeFormatter.format(dt)
+  }
+}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input", "showIcon", "hideIcon" ]
+  static values  = { revealed: Boolean }
+
+  revealedValueChanged() {
+    this.#update()
+  }
+
+  reveal() {
+    this.revealedValue = !this.revealedValue
+  }
+
+  #update() {
+    this.inputTarget.type      = this.#inputType
+    this.showIconTarget.hidden = this.revealedValue
+    this.hideIconTarget.hidden = !this.revealedValue
+  }
+
+  get #inputType() {
+    return this.revealedValue ? "text" : "password"
+  }
+}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js

@@ -2,14 +2,26 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "button", "tab" ]
-  static values  = { index: Number, default: 0 }
+  static values  = { index: Number }
+
+  indexValueChanged() {
+    this.#showSelectedTab()
+  }
 
   select({ target }) {
     this.indexValue = target.dataset.index
   }
 
-  indexValueChanged() {
-    this.#showSelectedTab()
+  prev() {
+    if (this.indexValue > 0) this.indexValue--
+  }
+
+  next() {
+    if (this.indexValue < this.#lastIndex) this.indexValue++
+  }
+
+  get #lastIndex() {
+    return this.tabTargets.length -1
   }
 
   #showSelectedTab() {

data/lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js

@@ -18,4 +18,4 @@ export default class extends Controller {
     this.imageTarget.src = this.defaultImageValue
     this.removeInputTarget.value = true
   }
-}
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.36
+  version: 0.0.38
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-23 00:00:00.000000000 Z
+date: 2024-09-24 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -38,6 +38,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg
 - lib/generators/css_zero/add/templates/app/assets/images/camera.svg
+- lib/generators/css_zero/add/templates/app/assets/images/check.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
@@ -79,16 +80,17 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/clear_button_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/copy_button_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/reveal_button_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js

data/lib/generators/css_zero/add/templates/app/javascript/controllers/copy_button_controller.js

@@ -1,13 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = [ "input" ]
-
-  async copy() {
-    try {
-      await navigator.clipboard.writeText(this.inputTarget.value)
-    } catch (error) {
-      console.warn(error.message);
-    }
-  }
-}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/reveal_button_controller.js

@@ -1,19 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = [ "input", "image" ]
-  static values  = { showImage: String, hideImage: String }
-
-  reveal() {
-    this.inputTarget.type = this.#inputType
-    this.imageTarget.src  = this.#imageSrc
-  }
-
-  get #inputType() {
-    return this.inputTarget.type === "text" ? "password" : "text"
-  }
-
-  get #imageSrc() {
-    return this.inputTarget.type === "text" ? this.hideImageValue : this.showImageValue
-  }
-}