Merge branch 'dev' of https://github.com/tabler/tabler into dev-build

.changeset/large-birds-teach.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix icons in `form-elements.html`

.changeset/little-badgers-care.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix colors of disabled `.ts-control`

.changeset/seven-islands-act.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor Dockerfile and package.json

Dockerfile

@@ -17,4 +17,4 @@ EXPOSE 3000
 # website management (browser auto reload)
 EXPOSE 3001
 # run tabler
-ENTRYPOINT [ "pnpm", "run", "start-plugins" ]
+ENTRYPOINT [ "pnpm", "run", "start" ]

eleventy.config.mjs

@@ -14,6 +14,8 @@ export default function (eleventyConfig) {
 
 	eleventyConfig.setWatchThrottleWaitTime(100);
 
+	eleventyConfig.addPassthroughCopy("src/pages/favicon.ico");
+
 	eleventyConfig.addPlugin(EleventyRenderPlugin, {
 		accessGlobalData: true,
 	});
@@ -29,8 +31,6 @@ export default function (eleventyConfig) {
 		eleventyConfig.addWatchTarget("dist");
 	}
 
-	eleventyConfig.addPassthroughCopy("favicon.ico");
-
 	/**
 	 * Data
 	 */

gulpfile.js

@@ -69,7 +69,7 @@ gulp.task('clean-dirs', () => {
  */
 gulp.task('sass', () => {
 	return gulp
-		.src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`)
+		.src(`${srcDir}/scss/!(_)*.scss`)
 		.pipe(debug())
 		.pipe(sass({
 			includePaths: ['node_modules'],

package.json

@@ -4,9 +4,8 @@
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
-    "dev": "pnpm run start-plugins",
+    "dev": "pnpm run start",
     "start": "gulp start",
-    "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
     "preview": "gulp build --preview",
     "unused-files": "node .build/unused-files.js",
@@ -22,7 +21,7 @@
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
     "format:write": "prettier --write src/**/*.{js,scss} --cache",
     "build:html": "eleventy",
-    "watch:html": "eleventy --watch"
+    "watch:html": "eleventy --watch --incremental"
   },
   "repository": {
     "type": "git",

src/pages/_includes/ui/button-group.html

@@ -1,18 +1,18 @@
-{% assign items = include.items | split: ',' %}
-{% assign icons = include.icons | split: ',' %}
+{% assign button-items = include.items | split: ',' %}
+{% assign button-icons = include.icons | split: ',' %}
 
 {% assign id = include.id %}
 
 <div class="btn-group{% if include.vertical %}-vertical{% endif %}{% if include.fluid %} w-100{% endif %}"role="group">
 
-	{% for item in items %}
+	{% for item in button-items %}
 	{% if include.radio %}
 	<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
 	{% endif %}
 	<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }}</{% if include.radio %}label{% else %}button{% endif %}>
 	{% endfor %}
 
-	{% for icon in icons %}
+	{% for icon in button-icons %}
 	{% if include.radio %}
 	<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
 	{% endif %}

src/pages/_includes/ui/datepicker.html

@@ -1,16 +1,15 @@
 {% assign value = include.value | default: '2020-06-20' %}
 {% assign placeholder = include.placeholder | default: 'Select a date' %}
-{% assign id = include.id %}
 
-{% if id %}
+{% if include.id %}
 
 {% capture input %}
-<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ id }}" value="{{ value }}"/>
+<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ include.id }}" value="{{ value }}"/>
 {% endcapture %}
 
 
 {% if include.inline %}
-	<div class="datepicker-inline" id="datepicker-{{ id }}"></div>
+	<div class="datepicker-inline" id="datepicker-{{ include.id }}"></div>
 {% elsif include.layout == 'icon' %}
 	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
 		{{ input | replace: include.class, '' }}
@@ -33,8 +32,8 @@
 		window.tabler_datepicker = window.tabler_datepicker || {};
 		{% endif %}
 
-		window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ id }}"] = {% endif %}new Litepicker({
-			element: document.getElementById('datepicker-{{ id }}'),
+		window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ include.id }}"] = {% endif %}new Litepicker({
+			element: document.getElementById('datepicker-{{ include.id }}'),
 			buttonText: {
 				previousMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-left" %}{% endcapture %}{{ icon | strip }}`,
 				nextMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-right" %}{% endcapture %}{{ icon | strip }}`,

src/pages/tags.html

@@ -6,7 +6,7 @@ layout: default
 permalink: tags.html
 ---
 
-{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}
+{% assign tag-icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}
 
 <div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
 	<div class="col">
@@ -41,7 +41,7 @@ permalink: tags.html
 			<div class="card-body">
 				<h3 class="card-title">Tags with icon</h3>
 				<div class="tags-list">   
-					{% for icon in icons %}     
+					{% for icon in tag-icons %}     
 					{% include "ui/tag.html" text=icon icon=icon %}
 					{% endfor %}
 				</div>

src/scss/vendor/_tom-select.scss

@@ -60,8 +60,19 @@ $input-border-width: 1px;
   }
 }
 
-.ts-wrapper.multi .ts-control > div {
-  background: var(--#{$prefix}bg-surface-secondary);
-  border: 1px solid var(--#{$prefix}border-color);
-  color: var(--#{$prefix}body-color);
+.ts-wrapper.multi,
+.ts-wrapper.multi.disabled {
+  .ts-control > div {
+    background: var(--#{$prefix}bg-surface-secondary);
+    border: 1px solid var(--#{$prefix}border-color);
+    color: var(--#{$prefix}body-color);
+  }
+}
+
+.ts-wrapper.disabled .ts-control {
+  opacity: 1;
+
+  &> div.item {
+    color: var(--#{$prefix}gray-500);
+  }
 }