css-zero 0.0.37 → 0.0.38

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d03cbc1032455ed1426a832bd3f71fcc6091275b6a6a75fa1d2111cf0105f24
-  data.tar.gz: e4aae85c8fdcea540a262ae0de03546c367afabb6a3bbb0e769eceff328e3a2b
+  metadata.gz: 609a6d11cfe6b31670eda63d7104d2d76069f0fe352bc4b6f7b0d00e5e7c2ea1
+  data.tar.gz: b118ad5a3842de5ab4df410b5516e62d52b9e241d559ec88f9146cdcc729b68a
 SHA512:
-  metadata.gz: eae8de16d7008f3c47960c19a90840e236b9846505b3e988d20c10c41f21e5319200bb10b1fd0154d9dc61072bddb479efd8369597c9051bd1724ac32b64ecb0
-  data.tar.gz: 8fcecce58a61bfa94b08879bd9338357988cb217da22c3398f6832b2a2842fc2d0802c9403502b70f80531dc7100b6d8fd591d0dc10211c4ba2185f994494c6e
+  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.37"
+  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

@@ -44,6 +44,7 @@ input_concerns:
   - 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/assets/images/x.svg
@@ -53,9 +54,12 @@ layouts:
 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/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

@@ -1,13 +1,36 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "input" ]
+  static targets = [ "input", "copyIcon", "successIcon" ]
+  static values  = { copied: Boolean }
 
-  async copy() {
+  #copiedTimeout = null
+
+  copiedValueChanged() {
+    this.#update()
+  }
+
+  copy() {
+    this.#copyToClipboard()
+    this.#reset()
+  }
+
+  #copyToClipboard() {
     try {
-      await navigator.clipboard.writeText(this.inputTarget.value)
+      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

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

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

@@ -2,7 +2,7 @@ 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()

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.37
+  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
@@ -88,6 +89,7 @@ files:
 - 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/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