css-zero 0.0.51 → 0.0.52

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7b5b639f94e6c5d8362049f9496337a8663596c34ba69fc2fab9937237ad52f
-  data.tar.gz: 0e7b620c61ff7d92478bf8a72aa5def5d38c794fb09751c0187132cffbd00a78
+  metadata.gz: c157fd23d2088eadf6b3ddd2301b2c6bb5e819e0fcebb3e2fd92bde924469a64
+  data.tar.gz: a68db27229c7b3c9118a008dc2f4417ff84b2dd99a54a637ed156a01c5aabd46
 SHA512:
-  metadata.gz: '0967b454d96821399b2447aea998d65726f179e80d5da8e1ec4a25df13fdf17b0fd33f7c3889e996418d909a86403ddde7771a1e1b77a83af925ee5b481f69bf'
-  data.tar.gz: 60449d04636f9cd001f7415aec961bcdd05e81249bcd990900ce1c850d92fc8d0d755c16027377cf146e468165888d5bfd1f3c5134275260808fab4b0045daee
+  metadata.gz: 6d06cd1f0e6c178496ecca303119b7d880f1d384c3ebd7549bedf3ae18c19bc90a8702016fd8bd9c0d913ffc48b68081d10b5e2e17e21eb2844644b80c331c36
+  data.tar.gz: 5bcd076df9a20544d488289894c858f426d88b0805a79fe47c326c48bf679de340542924510df37c6b06707ee537e0d396033a3db6bb082dd9ce7cf9142af90f

data/app/assets/stylesheets/_reset.css

@@ -291,7 +291,7 @@ textarea {
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
 }
 
 /*

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.51"
+  VERSION = "0.0.52"
 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 combobox check_all command collapsible dialog dropdown flash form fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs trix upload_preview toggle web_share
+  accordion alert autosave avatar badge breadcrumb button card carousel combobox check_all command collapsible dialog dropdown flash form fullscreen hotkey input input_concerns inputmask layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs trix upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -3,6 +3,8 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+autosave:
+  - app/javascript/controllers/autosave_controller.js
 avatar:
   - app/assets/stylesheets/avatar.css
 badge:
@@ -65,6 +67,8 @@ input_concerns:
   - app/javascript/controllers/revealable_input_controller.js
   - app/assets/images/eye.svg
   - app/assets/images/eye-off.svg
+inputmask:
+  - app/javascript/controllers/inputmask_controller.js
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/images/menu.svg

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

@@ -24,11 +24,11 @@
 .badge--positive {
   --badge-background: var(--color-positive);
   --badge-border-color: transparent;
-  --badge-color: white;
+  --badge-color: var(--color-text-reversed);
 }
 
 .badge--negative {
   --badge-background: var(--color-negative);
   --badge-border-color: transparent;
-  --badge-color: white;
+  --badge-color: var(--color-text-reversed);
 }

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

@@ -66,7 +66,7 @@ trix-editor {
   padding-block: var(--size-6) var(--size-2);
 
   &:empty:not(:focus)::before {
-    color: color-mix(in srgb, currentColor 50%, transparent);
+    color: color-mix(in oklch, currentColor 50%, transparent);
   }
 
   [data-trix-mutable].attachment img,

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

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from "@rails/request.js"
+
+const AUTOSAVE_INTERVAL = 3000
+
+export default class extends Controller {
+  static targets = [ "submitter" ]
+
+  #timer
+
+  disconnect() {
+    this.#submit()
+  }
+
+  change() {
+    !this.#dirty && this.#scheduleSave()
+    !this.#dirty && this.#updateAppearance()
+  }
+
+  async #submit() {
+    this.#dirty && await this.#save()
+  }
+
+  async #save() {
+    this.#updateAppearance(true)
+    this.#resetTimer()
+    await submitForm(this.element)
+    this.#updateAppearance()
+  }
+
+  #updateAppearance(saving = false) {
+    if (saving) {
+      this.element.setAttribute("aria-busy", true)
+      this.submitterTarget.setAttribute("aria-disabled", true)
+      this.submitterTarget.disabled = true
+    } else {
+      this.element.removeAttribute("aria-busy")
+      this.submitterTarget.removeAttribute("aria-disabled")
+      this.submitterTarget.disabled = false
+    }
+  }
+
+  #scheduleSave() {
+    this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
+  }
+
+  #resetTimer() {
+    clearTimeout(this.#timer); this.#timer = null
+  }
+
+  get #dirty() {
+    return !!this.#timer
+  }
+}
+
+// Helpers
+
+async function submitForm(form) {
+  const request = new FetchRequest(form.method, form.action, {
+    body: new FormData(form)
+  })
+
+  return await request.perform()
+}

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

@@ -3,7 +3,7 @@ import { get } from "@rails/request.js"
 import TomSelect from "tom-select"
 
 export default class extends Controller {
-  static values = { url: String, create: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
+  static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
 
   initialize() {
     this.load = this.load.bind(this)
@@ -28,17 +28,17 @@ export default class extends Controller {
   }
 
   get #inputSettings() {
-    return { render: this.#render, load: (this.hasUrlValue && this.load), persist: false, createOnBlur: true, create: true }
+    return { render: this.#render, load: this.hasUrlValue && this.load, persist: false, createOnBlur: true, create: true }
   }
 
   get #selectSettings() {
-    return { render: this.#render, load: (this.hasUrlValue && this.load) }
+    return { render: this.#render, load: this.hasUrlValue && this.load }
   }
 
   get #render() {
     return {
       option_create: (data, escape) => {
-        return `<div class="create">${this.createValue} <b>${escape(data.input)}</b>...</div>`
+        return `<div class="create">${this.optionCreateValue} <b>${escape(data.input)}</b>...</div>`
       },
       no_results: () =>  {
         return `<div class="no-results">${this.noResultsValue}</div>`

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

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+import Inputmask from "inputmask"
+
+export default class extends Controller {
+  static values = {
+    mask:           String,
+    alias:          String,
+    groupSeparator: { type: String,  default: "" },
+    radixPoint:     { type: String,  default: "." },
+    digits:         { type: String,  default: "*" },
+    digitsOptional: { type: Boolean, default: true },
+    inputFormat:    { type: String,  default: "mm/dd/yyyy HH:MM" },
+    outputFormat:   { type: String,  default: "yyyy-mm-dd HH:MM" }
+  }
+
+  connect() {
+    if (this.hasMaskValue) {
+      Inputmask.default({ mask: this.maskValue }).mask(this.element)
+    } else if (this.aliasValue == "numeric") {
+      Inputmask.default(this.#numericOptions).mask(this.element)
+    } else if (this.aliasValue == "datetime") {
+      Inputmask.default(this.#datetimeOptions).mask(this.element)
+    }
+  }
+
+  get #numericOptions() {
+    return {
+      alias: "numeric",
+      unmaskAsNumber: true,
+      removeMaskOnSubmit: true,
+      groupSeparator: this.groupSeparatorValue,
+      radixPoint: this.radixPointValue,
+      digits: this.digitsValue,
+      digitsOptional: this.digitsOptionalValue
+    }
+  }
+
+  get #datetimeOptions() {
+    return {
+      alias: "datetime",
+      removeMaskOnSubmit: true,
+      inputFormat: this.inputFormatValue,
+      outputFormat: this.outputFormatValue
+    }
+  }
+}

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

@@ -47,8 +47,8 @@
     --color-filter-text: invert(100%);
     --color-filter-text-reversed: invert(2%) sepia(3%) saturate(3904%) hue-rotate(201deg) brightness(98%) contrast(97%);
     --color-filter-text-subtle: invert(76%) sepia(8%) saturate(230%) hue-rotate(201deg) brightness(84%) contrast(87%);
-    --color-filter-negative: invert(16%) sepia(62%) saturate(2100%) hue-rotate(337deg) brightness(92%) contrast(100%);
-    --color-filter-positive: invert(21%) sepia(62%) saturate(549%) hue-rotate(91deg) brightness(101%) contrast(91%);
+    --color-filter-negative: invert(54%) sepia(16%) saturate(2119%) hue-rotate(313deg) brightness(111%) contrast(94%);
+    --color-filter-positive: invert(81%) sepia(23%) saturate(1237%) hue-rotate(80deg) brightness(95%) contrast(83%);
   }
 }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.51
+  version: 0.0.52
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-24 00:00:00.000000000 Z
+date: 2024-10-27 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -83,6 +83,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/tom-select.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css
+- lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
 - 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
@@ -96,6 +97,7 @@ files:
 - 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/inputmask_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/list_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js