diff --git a/composer.json b/composer.json index 0e6ed44..e39dc08 100644 --- a/composer.json +++ b/composer.json @@ -21,7 +21,7 @@ } ], "require-dev": { - "markhuot/craft-pest-core": "dev-main", + "markhuot/craft-pest-core": "dev-sequence", "phpstan/phpstan": "^1.10", "laravel/pint": "^1.13", "craftcms/craft": "dev-main" diff --git a/src/actions/CompileTwigComponent.php b/src/actions/CompileTwigComponent.php index e5b69e6..d480bef 100644 --- a/src/actions/CompileTwigComponent.php +++ b/src/actions/CompileTwigComponent.php @@ -99,6 +99,9 @@ public function enterNode(Node $node) if ($node instanceof Stmt\Property && $node->props[0]->name->name === 'handle') { $node->props[0]->default = new Node\Scalar\String_($this->exports['type'] ?? $this->handle); } + if ($node instanceof Stmt\Property && $node->props[0]->name->name === 'category' && ! empty($this->exports['category'])) { + $node->props[0]->default = new Node\Scalar\String_($this->exports['category']); + } if ($node instanceof Stmt\Property && $node->props[0]->name->name === 'icon') { if ($this->exports['icon'] ?? false) { $node->props[0]->default = new Node\Scalar\String_($this->exports['icon']); diff --git a/src/base/ComponentType.php b/src/base/ComponentType.php index 8be9d8d..a4b904d 100644 --- a/src/base/ComponentType.php +++ b/src/base/ComponentType.php @@ -14,6 +14,11 @@ abstract class ComponentType // https://phosphoricons.com protected string $icon = ''; + /** + * The category the icon will display under when adding new components + */ + protected string $category = 'General'; + public function getName(): string { $parts = explode('/', $this->handle); @@ -21,6 +26,11 @@ public function getName(): string return ucfirst(last($parts)); } + public function getCategory(): string + { + return $this->category; + } + public function getHandle(): string { return $this->handle; diff --git a/src/controllers/ComponentsController.php b/src/controllers/ComponentsController.php index a95abbc..c1ae43d 100644 --- a/src/controllers/ComponentsController.php +++ b/src/controllers/ComponentsController.php @@ -41,7 +41,7 @@ public function actionAdd() 'path' => $path, 'slot' => $slot, 'parent' => $parent, - 'types' => (new GetComponentType())->all(), + 'groups' => (new GetComponentType())->all()->groupBy(fn ($t) => $t->getCategory()), 'sortOrder' => $sortOrder, ]); } diff --git a/src/resources/keystone.min.css b/src/resources/keystone.min.css index a2b849e..c55d5fa 100644 --- a/src/resources/keystone.min.css +++ b/src/resources/keystone.min.css @@ -703,22 +703,18 @@ video { border-width: 1px; } -.k-border-2 { - border-width: 2px; -} - -.k-border-hairline { - border-color: var(--hairline-color); +.k-border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.k-border-slate-800 { +.k-border-gray-400 { --tw-border-opacity: 1; - border-color: rgb(30 41 59 / var(--tw-border-opacity)); + border-color: rgb(156 163 175 / var(--tw-border-opacity)); } -.k-border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); +.k-border-hairline { + border-color: var(--hairline-color); } .k-bg-ui-control { @@ -737,14 +733,14 @@ video { padding: 0.5rem; } -.k-p-4 { - padding: 1rem; -} - .k-p-3 { padding: 0.75rem; } +.k-p-4 { + padding: 1rem; +} + .k-pt-xl { padding-top: var(--xl); } @@ -757,6 +753,11 @@ video { font-size: 8px; } +.k-text-base { + font-size: 1rem; + line-height: 1.5rem; +} + .k-text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -767,16 +768,6 @@ video { line-height: 1rem; } -.k-text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.k-text-base { - font-size: 1rem; - line-height: 1.5rem; -} - .k-font-bold { font-weight: 700; } @@ -892,3 +883,31 @@ video { .\[\&\:has\(\:disabled\)\]\:k-opacity-25:has(:disabled) { opacity: 0.25; } + +.\[\&\:has\(li\)\]\:k-block:has(li) { + display: block; +} + +.\[\&\:has\(li\:not\(\.disabled\)\)\]\:k-block:has(li:not(.disabled)) { + display: block; +} + +.\[\&\:has\(li\:not\(\.k-hidden\)\)\]\:k-block:has(li:not(.k-hidden)) { + display: block; +} + +.\[\&\:has\(ul\)\]\:k-block:has(ul) { + display: block; +} + +.\[\&\:has\(ul\>li\:not\(\.k-hidden\)\)\]\:k-block:has(ul>li:not(.k-hidden)) { + display: block; +} + +.\[\&\:has\(ul_li\:not\(\.k-hidden\)\)\]\:k-block:has(ul li:not(.k-hidden)) { + display: block; +} + +.\[\&\:has\(ul_ul\>li\:not\(\.k-hidden\)\)\]\:k-block:has(ul ul>li:not(.k-hidden)) { + display: block; +} diff --git a/src/templates/components/fragment.twig b/src/templates/components/fragment.twig index 08cb2df..82fcc1a 100644 --- a/src/templates/components/fragment.twig +++ b/src/templates/components/fragment.twig @@ -1 +1,2 @@ +{% export category = "Containers" %} {% slot %}{% endslot %} diff --git a/src/templates/components/heading.twig b/src/templates/components/heading.twig index 08eaf3b..203c279 100644 --- a/src/templates/components/heading.twig +++ b/src/templates/components/heading.twig @@ -4,6 +4,7 @@ {label: '2', value: '2'}, ]) } %} +{% export category = "Text" %} {% export icon %}{% endexport %} {% set level = props.level.value|default(1) %} {% set fontSize = craft.app.getView().registerCssRule((32 - (level-1)*4) ~ 'px', 'font-size') %} diff --git a/src/templates/components/section.twig b/src/templates/components/section.twig index be8aa9e..93eb897 100644 --- a/src/templates/components/section.twig +++ b/src/templates/components/section.twig @@ -1,4 +1,5 @@ +{% export category = "Containers" %} {% export icon %}{% endexport %} -
+
{% slot %}{% endslot %}
diff --git a/src/templates/components/text.twig b/src/templates/components/text.twig index 6fa0b88..22d6455 100644 --- a/src/templates/components/text.twig +++ b/src/templates/components/text.twig @@ -3,6 +3,7 @@ } %} {% export summary = props.text|default('')|slice(0,25) %} {% export icon %}{% endexport %} +{% export category = "Text" %}
{{ props.text }} diff --git a/src/templates/select.twig b/src/templates/select.twig index da42196..b4212c6 100644 --- a/src/templates/select.twig +++ b/src/templates/select.twig @@ -1,23 +1,30 @@ +{{ hiddenInput('element', element.id) }} +{{ hiddenInput('field', field.id) }} +{{ hiddenInput('path', path) }} +{{ hiddenInput('slot', slot) }} +{{ hiddenInput('sortOrder', sortOrder) }}
-
    - {{ hiddenInput('element', element.id) }} - {{ hiddenInput('field', field.id) }} - {{ hiddenInput('path', path) }} - {{ hiddenInput('slot', slot) }} - {{ hiddenInput('sortOrder', sortOrder) }} - {% for type in types %} -
  • - +
      + {% for category, types in groups %} +
    • +

      {{ category }}

      +
        + {% for type in types %} +
      • + +
        • + {% endfor %} +
      • {% endfor %}