material_design 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 792bfc436512bc05110a5a4b071705924153899300bfa0c5252c921b61fa687a
-  data.tar.gz: 58b034a146b93d4e4d63e99bd5ae7dbff01b9f989fbcfb9fa0856e19a1539778
+  metadata.gz: 501465343ada2fe0bb7395ee4c3b4a5c9b7445900652ce708f4c3624624824b1
+  data.tar.gz: 1521b11bdda2eed12d22b25b4bfaf7c596967b90c0c0fe48301eadbdb2cfc63c
 SHA512:
-  metadata.gz: fb4c395a4b9907be2e9698327aa26172c7c1c71864667765a2c4a5503924b240e5adb94a455de110ab1eac84e0090dc6885a3b6dbfb53780afa8fcbedce09d71
-  data.tar.gz: edfb8cc9b0b0bec9832f571fc8d44be92ba5dad792212573adb14e6dda3d2df76674eb3a6b95a800320cfdeed334f818c9665dfd2cb5fda4045d5ddfa10adcb7
+  metadata.gz: ef3296019b0cb8baf3c0f6555901e82c7e13d7438a137987bc792407dd80f3cb3022a0b8cd5bd785119320b533001f5e0f3ad375eea61da5082398e7afeb5a2e
+  data.tar.gz: dd14b3ed25d14787d566dcff0a304e250f1d37ad111925d434de21e9ee56b47113323aa16a1525ca48a35ae6d555a76389253e32255dab18aa05a81c906f5a15

data/app/assets/config/material_design_manifest.js

@@ -0,0 +1,3 @@
+//= link_directory ../stylesheets/material_design .css
+//= link_directory ../../javascript/material_design .js
+//= link_directory ../../javascript/material_design/controllers .js

data/app/assets/stylesheets/material_design/chips.css

@@ -1,21 +1,118 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --md-sys-hover-layer-state: rgb(
+      var(--md-sys-light-on-surface-variant) /
+        var(--md-sys-light-state-hover-state-layer-opacity)
+    );
+    --md-sys-hover-selected-state: rgb(
+      var(--md-sys-light-on-secondary-container) /
+        var(--md-sys-light-state-hover-state-layer-opacity)
+    );
+    --md-sys-pressed-layer-state: rgb(
+      var(--md-sys-light-on-secondary-container) / 0.1
+    );
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --md-sys-hover-layer-state: rgb(
+      var(--md-sys-dark-on-surface-variant) /
+        var(--md-sys-dark-state-hover-state-layer-opacity)
+    );
+    --md-sys-hover-selected-state: rgb(
+      var(--md-sys-dark-on-secondary-container) /
+        var(--md-sys-dark-state-hover-state-layer-opacity)
+    );
+    --md-sys-pressed-layer-state: rgb(
+      var(--md-sys-dark-on-secondary-container) /
+        var(--md-sys-dark-state-pressed-state-layer-opacity)
+    );
+  }
+}
+
 .chip {
-  display: inline-flex;
   align-items: center;
-  height: 32px;
-  padding: 8px 12px;
   border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  margin-right: 8px;
+  cursor: pointer;
+  display: inline-flex;
+  height: 32px;
+  padding: 0px 8px;
   white-space: nowrap;
+  @media (prefers-color-scheme: light) {
+    border: 1px solid rgb(var(--md-sys-light-outline-variant));
+    color: rgb(var(--md-sys-light-on-surface-variant));
+  }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid rgb(var(--md-sys-dark-outline-variant));
+    color: rgb(var(--md-sys-dark-on-surface-variant));
+  }
+}
+
+.chip:hover {
+  background: var(--md-sys-hover-layer-state)
+    radial-gradient(circle, transparent 1%, var(--md-sys-hover-layer-state) 1%)
+    center/15000%;
+}
+
+.chip.selected {
+  border-color: transparent;
   @media (prefers-color-scheme: light) {
-    background: rgb(var(--md-sys-light-secondary-fixed));
-    color: rgb(var(--md-sys-dark-on-secondary-fixed));
+    background: rgb(var(--md-sys-light-secondary-container));
+    color: rgb(var(--md-sys-light-on-secondary-container));
   }
 
   @media (prefers-color-scheme: dark) {
-    background: rgb(var(--md-sys-dark-secondary-fixed));
-    color: rgb(var(--md-sys-dark-on-secondary-fixed));
+    background: rgb(var(--md-sys-dark-secondary-container));
+    color: rgb(var(--md-sys-dark-on-secondary-container));
+  }
+}
+
+.chip.selected:hover {
+  background: var(--md-sys-hover-selected-state)
+    radial-gradient(
+      circle,
+      transparent 1%,
+      var(--md-sys-hover-selected-state) 1%
+    )
+    center/15000%;
+}
+
+.chip__container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+}
+
+.chip__dropdown {
+  box-sizing: border-box;
+  display: block;
+  max-width: calc(100vw - 60px);
+  min-width: 100%;
+  position: absolute;
+  width: fit-content;
+  z-index: 1051;
+}
+
+@media (min-width: 768px) {
+  .chip__dropdown {
+    max-width: calc(100vw - 140px);
   }
 }
+
+.chip__label {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0px 8px;
+}
+
+.dropdown--hidden {
+  display: none;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}

data/app/helpers/material_design/chip_helper.rb

@@ -0,0 +1,32 @@
+module MaterialDesign
+  module ChipHelper
+    def md_filter_chip(label=nil, leading_icon: nil, trailing_icon: nil, selected: false, data: {}, style: nil, &block)
+      merged_data = data.merge(controller: "filter-chip", filter_chip_selected_value: selected, action: "#{block_given? ? "click->filter-chip#toggleDropdown" : "click->filter-chip#toggleSelect"}")
+
+      chip_content = content_tag(:div, class: "chip__container", data: merged_data) do
+        concat(content_tag(:div, class: class_names("chip", selected: selected), data: { filter_chip_target: "chip"}, style: style) do
+          concat(content_tag(:span, class: "dropdown--hidden", data: {filter_chip_target: "selectedIcon"}) do
+            render("material_design/icons/icon", locals: { icon: "check", size: 18 })
+          end)
+          concat(content_tag(:span, data: {filter_chip_target: "leadingIcon"}) do
+            render("material_design/icons/icon", locals: { icon: leading_icon, size: 18 }) if leading_icon
+          end)
+          concat(content_tag(:p, label, class: "chip__label", data: {filter_chip_target: "label"}))
+          concat(content_tag(:span, data: {filter_chip_target: "chevronIcon"}) do
+            render("material_design/icons/icon", locals: { icon: "arrow_drop_down", size: 18 })
+          end) if block_given?
+          concat(content_tag(:span, data: {filter_chip_target: "trailingIcon"}) do
+            render("material_design/icons/icon", locals: { icon: trailing_icon, size: 18 }) if trailing_icon && !block_given?
+          end)
+        end)
+        if block_given?
+          concat(content_tag(:div,  class: "dropdown--hidden chip__dropdown", data: {filter_chip_target: "dropdown"}) do
+            capture(&block)
+          end)
+        end
+      end
+
+      chip_content
+    end
+  end
+end

data/app/javascript/material_design/application.js

@@ -0,0 +1 @@
+import "controllers";

data/app/javascript/material_design/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus";
+
+const application = Application.start();
+
+// Configure Stimulus development experience
+application.debug = false;
+window.Stimulus = application;
+
+export { application };

data/app/javascript/material_design/controllers/filter_chip_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside, useTransition } from "stimulus-use";
+
+export default class extends Controller {
+  static targets = [
+    "chevronIcon",
+    "chip",
+    "dropdown",
+    "label",
+    "leadingIcon",
+    "selectedIcon",
+    "trailingIcon",
+  ];
+  static values = { open: Boolean, selected: Boolean };
+
+  connect() {
+    this.setSelected();
+
+    useTransition(this, {
+      element: this.dropdownTarget,
+      enterActive: "transition ease-out duration-100",
+      enterFrom: "transform opacity-0 scale-95",
+      enterTo: "transform opacity-100 scale-100",
+      leaveActive: "transition ease-in duration-75",
+      leaveFrom: "transform opacity-100 scale-100",
+      leaveTo: "transform opacity-0 scale-95",
+      hiddenClass: "dropdown--hidden",
+      transitioned: false,
+    });
+
+    useClickOutside(this);
+
+    if (this.openValue) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  clickOutside() {
+    this.closeDropdown();
+  }
+
+  toggleDropdown() {
+    if (this.dropdownTarget.classList.contains("dropdown--hidden")) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  openDropdown() {
+    this.enter();
+    this.chevronIconTarget.classList.add("rotate-180");
+  }
+
+  closeDropdown() {
+    this.leave();
+    this.chevronIconTarget.classList.remove("rotate-180");
+  }
+
+  setSelected() {
+    if (this.selectedValue) {
+      this.selectedIconTarget.classList.remove("dropdown--hidden");
+      this.leadingIconTarget.classList.add("dropdown--hidden");
+    }
+  }
+
+  toggleSelected() {
+    this.selectedIconTarget.classList.toggle("dropdown--hidden");
+    this.leadingIconTarget.classList.toggle("dropdown--hidden");
+  }
+}

data/app/javascript/material_design/controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "./application";
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
+eagerLoadControllersFrom("controllers", application);
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

data/config/importmap.rb

@@ -0,0 +1,5 @@
+pin "application-md", to: "material_design/application.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+pin_all_from MaterialDesign::Engine.root.join("app/javascript/material_design/controllers"), under: "controllers", to: "material_design/controllers"
+

data/lib/material_design/engine.rb

@@ -1,5 +1,18 @@
+require "importmap-rails"
+require "stimulus-rails"
+
 module MaterialDesign
   class Engine < ::Rails::Engine
     isolate_namespace MaterialDesign
+
+    initializer "material_design.assets" do |app|
+      app.config.assets.paths << root.join("app/javascript")
+      app.config.assets.precompile += %w[ material_design_manifest ]
+    end
+
+    initializer "material_design.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/javascript")
+    end
   end
 end

data/lib/material_design/railtie.rb

@@ -1,10 +1,11 @@
 require "rails/railtie"
 
 module MyGem
-  class Railtie < Rails::Railtie  #add uma funcionalidade a um app rails a partir de uma gem
+  class Railtie < Rails::Railtie
     initializer "material_design.action_controller" do
-      ActiveSupport.on_load(:action_controller_base) do #quando a base controller for carregada
-        helper MaterialDesign::ButtonHelper #disponibiliza o helper em todos os arquivos
+      ActiveSupport.on_load(:action_controller_base) do
+        helper MaterialDesign::ButtonHelper
+        helper MaterialDesign::ChipHelper
       end
     end
   end

data/lib/material_design/version.rb

@@ -1,3 +1,3 @@
 module MaterialDesign
-  VERSION = "0.8.0"
+  VERSION = "0.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: material_design
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Eduardo Yutaka Nakanishi
@@ -12,7 +12,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-09 00:00:00.000000000 Z
+date: 2024-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -28,6 +28,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 7.1.3
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Material is Google’s open-source design system. Design and build beautiful,
   usable products with Material.
 email:
@@ -39,6 +67,7 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/config/material_design_manifest.js
 - app/assets/stylesheets/material_design/app_bars.css
 - app/assets/stylesheets/material_design/application.css
 - app/assets/stylesheets/material_design/buttons.css
@@ -54,6 +83,11 @@ files:
 - app/controllers/material_design/application_controller.rb
 - app/helpers/material_design/application_helper.rb
 - app/helpers/material_design/button_helper.rb
+- app/helpers/material_design/chip_helper.rb
+- app/javascript/material_design/application.js
+- app/javascript/material_design/controllers/application.js
+- app/javascript/material_design/controllers/filter_chip_controller.js
+- app/javascript/material_design/controllers/index.js
 - app/jobs/material_design/application_job.rb
 - app/mailers/material_design/application_mailer.rb
 - app/models/material_design/application_record.rb
@@ -2206,6 +2240,7 @@ files:
 - app/views/material_design/typography/_label_large.html.erb
 - app/views/material_design/typography/_title_large.html.erb
 - app/views/material_design/typography/_title_small.html.erb
+- config/importmap.rb
 - config/routes.rb
 - lib/material_design.rb
 - lib/material_design/engine.rb
@@ -2232,7 +2267,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.13
+rubygems_version: 3.5.21
 signing_key: 
 specification_version: 4
 summary: Material Design