css-zero 0.0.54 → 0.0.56

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ed27e158f8a76846339dfa69f1c174dea2af1fdadae6a3b63373da5b8c71f7b
-  data.tar.gz: b3969c7185bd0508fe1c63ec94a48c9d96243d614d2cc30a2dd5469fb0be959f
+  metadata.gz: dda2e775427e1ef39365fd7d86e67435f9a7b9537772871544b05f675ef1fab3
+  data.tar.gz: 382243e0f4441e706606aac3b8a646b163ef38642e17dcc9a620358b8925a3aa
 SHA512:
-  metadata.gz: 623658c4fba2326aabdd9313c80f8fb1d2fdeb46d2f48d6181f5d1fc9701f1be82173f15956c194d680d9800f13984fda6151c3d11dd9b02ff00d3bb1aa5bffc
-  data.tar.gz: d1a40430b67b9084a6f40de4c32907b19f31c157baed20f9f27538b4017d9ce3e2e9ca837d649e7659c8b12512b9f6d3339d1ad739a1b6ed4947615b89f2bfe0
+  metadata.gz: 5b44ccc95deabacf46b16f71f2ce72112104d3c4dc223bcb9f73e2ac7ad354e95cf18ee2efd07e236f7e5ba674d8d1b3b9ae38a47193ef144b68330df30eefdd
+  data.tar.gz: 63c113d51c33d46a9d26a3e73865f201d1083cae21797eb2b2d9b22f29e307bb94079b104c163d9fb49c0982e22fa8febefefba798a82481f6cf490c3be239d6

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.54"
+  VERSION = "0.0.56"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert autosave avatar badge breadcrumb button card carousel combobox check_all command collapsible datepicker 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
+  accordion alert autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker 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

@@ -22,13 +22,15 @@ carousel:
   - app/javascript/controllers/carousel_controller.js
   - app/assets/images/arrow-left.svg
   - app/assets/images/arrow-right.svg
+chart:
+  - app/javascript/controllers/chart_controller.js
+check_all:
+  - app/javascript/controllers/check_all_controller.js
 combobox:
   - app/assets/stylesheets/tom-select.css
   - app/assets/stylesheets/zcombobox.css
   - app/javascript/controllers/combobox_controller.js
   - app/assets/images/select-arrow.svg
-check_all:
-  - app/javascript/controllers/check_all_controller.js
 command:
   - app/assets/stylesheets/command.css
   - app/javascript/controllers/filter_controller.js

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

@@ -2,13 +2,13 @@
   details {
     border-block-end-width: var(--border);
     interpolate-size: allow-keywords;
+    overflow: hidden;
 
     &::details-content {
       block-size: 0;
-      overflow-y: clip;
       transition-behavior: allow-discrete;
       transition-duration: var(--time-150);
-      transition-property: content-visibility height;
+      transition-property: content-visibility block-size;
     }
 
     &[open]::details-content {

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

@@ -5,7 +5,7 @@
   border-radius: var(--input-radius, var(--rounded-md));
   font-size: var(--input-font-size, var(--text-sm));
   inline-size: var(--size-full);
-  padding: var(--input-padding, 0.5rem 1rem);
+  padding: var(--input-padding, 0.5rem 0.75rem);
 
   option {
     padding-block: 2px;

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

@@ -5,12 +5,11 @@
   border-radius: var(--rounded-md);
   min-block-size: var(--size-10);
   color: var(--color-text);
-  display: flex;
+  display: inline-flex;
   font-size: var(--text-sm);
-  font-weight: var(--font-medium);
   gap: var(--size-1);
   line-height: inherit;
-  padding: var(--size-1_5) var(--size-2);
+  padding: var(--size-2) var(--size-3);
 
   > input {
     color: inherit; font-size: inherit;
@@ -85,6 +84,7 @@
   background: var(--color-secondary);
   border-radius: var(--rounded-md);
   color: inherit;
+  line-height: var(--leading-tight);
   margin: 0;
 }
 

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

@@ -8,7 +8,7 @@
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
   font-size: var(--text-sm);
-  inline-size: 280px;
+  inline-size: 285px;
   padding: var(--size-3);
 
   :is(.dayContainer, .flatpickr-days) {
@@ -115,14 +115,15 @@
   }
 
   .flatpickr-day {
-    align-items: center;
+    --day-size: var(--size-9);
     border-radius: var(--rounded-md);
     border-color: transparent !important;
     box-shadow: none !important;
     color: var(--color-text);
-    display: inline-flex;
-    height: var(--size-9);
-    max-width: 100%;
+    height: var(--day-size);
+    line-height: var(--day-size);
+    margin-block-start: 1px;
+    max-width: var(--day-size);
 
     &:is(.inRange) {
       border-radius: 0;
@@ -130,6 +131,7 @@
 
     &:is(.today, .inRange, :hover, :focus) {
       background: var(--color-secondary);
+      color: var(--color-text);
     }
 
     &:is(

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { FetchRequest } from "@rails/request.js"
+import { FetchRequest } from "https://cdn.skypack.dev/@rails/request.js@0.0.11"
 
 const AUTOSAVE_INTERVAL = 3000
 
@@ -61,4 +61,4 @@ async function submitForm(form) {
   })
 
   return await request.perform()
-}
+}

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

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+import { Chart, Colors, registerables } from "https://cdn.skypack.dev/chart.js@4.4.6"
+
+Chart.register(...registerables)
+
+Chart.defaults.backgroundColor = getCssVariableValue("--color-primary")
+Chart.defaults.borderColor = getCssVariableValue("--color-border")
+Chart.defaults.color = getCssVariableValue("--color-text")
+
+Chart.defaults.font.family = getCssVariableValue("--font-system-ui")
+Chart.defaults.font.size = 12
+
+export default class extends Controller {
+  static values = { type: { type: String, default: "line" }, data: Object, options: Object }
+
+  connect() {
+    this.chart = new Chart(this.element, this.#settings)
+  }
+
+  disconnect() {
+    this.chart.destroy()
+  }
+
+  get #settings() {
+    return { type: this.typeValue, data: this.dataValue, options: this.optionsValue }
+  }
+}
+
+// Helpers
+
+function getCssVariableValue(variableName) {
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
+}

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import { get } from "@rails/request.js"
-import TomSelect from "tom-select"
+import { get } from "https://cdn.skypack.dev/@rails/request.js@0.0.11"
+import TomSelect from "https://cdn.skypack.dev/tom-select@2.3.1"
 
 export default class extends Controller {
   static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
@@ -28,11 +28,11 @@ 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.#loadSetting, persist: false, createOnBlur: true, create: true }
   }
 
   get #selectSettings() {
-    return { render: this.#render, load: this.hasUrlValue && this.load }
+    return { render: this.#render, load: this.#loadSetting }
   }
 
   get #render() {
@@ -45,4 +45,8 @@ export default class extends Controller {
       }
     }
   }
+
+  get #loadSetting() {
+    return this.hasUrlValue && this.load
+  }
 }

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import flatpickr from "flatpickr"
+import flatpickr from "https://cdn.skypack.dev/flatpickr@4.6.13"
 
 export default class extends Controller {
   static targets = [ "details" ]
@@ -30,23 +30,14 @@ export default class extends Controller {
   }
 
   get #dateTimeOptions() {
-    return {
-      altInput: true,
-      altFormat: this.dateTimeFormatValue,
-      dateFormat: "Y-m-d H:i",
-      disable: this.disableValue,
-      mode: this.modeValue,
-      enableTime: true
-    }
+    return { ...this.#baseOptions, altFormat: this.dateTimeFormatValue, dateFormat: "Y-m-d H:i", enableTime: true }
   }
 
   get #basicOptions() {
-    return {
-      altInput: true,
-      altFormat: this.dateFormatValue,
-      dateFormat: "Y-m-d",
-      disable: this.disableValue,
-      mode: this.modeValue
-    }
+    return { ...this.#baseOptions, altFormat: this.dateFormatValue, dateFormat: "Y-m-d" }
+  }
+
+  get #baseOptions() {
+    return { altInput: true, disable: this.disableValue, mode: this.modeValue }
   }
-}
+}

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import Inputmask from "inputmask"
+import Inputmask from "https://cdn.skypack.dev/inputmask@5.0.9"
 
 export default class extends Controller {
   static values = {
@@ -15,14 +15,18 @@ export default class extends Controller {
 
   connect() {
     if (this.hasMaskValue) {
-      Inputmask.default({ mask: this.maskValue }).mask(this.element)
+      Inputmask({ mask: this.maskValue }).mask(this.element)
     } else if (this.aliasValue == "numeric") {
-      Inputmask.default(this.#numericOptions).mask(this.element)
+      Inputmask(this.#numericOptions).mask(this.element)
     } else if (this.aliasValue == "datetime") {
-      Inputmask.default(this.#datetimeOptions).mask(this.element)
+      Inputmask(this.#datetimeOptions).mask(this.element)
     }
   }
 
+  disconnect() {
+    Inputmask.remove(this.element)
+  }
+
   get #numericOptions() {
     return {
       alias: "numeric",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.54
+  version: 0.0.56
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-29 00:00:00.000000000 Z
+date: 2024-11-03 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -88,6 +88,7 @@ files:
 - 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/chart_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_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