diff --git a/.changeset/lovely-trees-divide.md b/.changeset/lovely-trees-divide.md new file mode 100644 index 000000000..662a8feea --- /dev/null +++ b/.changeset/lovely-trees-divide.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Add clipboard functionality to Tabler documentation diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss index dccca8fdd..d3056b8b1 100644 --- a/core/scss/ui/_markdown.scss +++ b/core/scss/ui/_markdown.scss @@ -47,7 +47,7 @@ Markdown border: 1px solid var(--#{$prefix}border-color); } - > pre { + pre { max-height: 20rem; } } \ No newline at end of file diff --git a/docs/content/ui/components/badges.md b/docs/content/ui/components/badges.md index e1c267f5d..b677876d9 100644 --- a/docs/content/ui/components/badges.md +++ b/docs/content/ui/components/badges.md @@ -10,50 +10,56 @@ bootstrapLink: components/badge/ The default badges are square and come in the basic set of colors. {% capture html -%} -Blue -Azure -Indigo -Purple -Pink -Red -Orange -Yellow -Lime -Green -Teal -Cyan +
+{% for color in site.colors -%} +{% include "ui/badge.html" color=color[0] text=color[1].title %} +{%- endfor -%} +
{%- endcapture %} {% include "docs/example.html" html=html centered %} ## Headings +Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `

` to `

`. The example below shows how to use badges in headings. + {% capture html -%} -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
+

+ Example heading + {% include "ui/badge.html" text="New" -%} +

+

+ Example heading + {% include "ui/badge.html" text="New" -%} +

+

+ Example heading + {% include "ui/badge.html" text="New" -%} +

+

+ Example heading + {% include "ui/badge.html" text="New" -%} +

+
+ Example heading + {% include "ui/badge.html" text="New" -%} +
+
+ Example heading + {% include "ui/badge.html" text="New" -%} +
{%- endcapture %} {% include "docs/example.html" html=html %} -## Outline badges +## Light versions of badges +You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look. +For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well. {% capture html -%} -blue -azure -indigo -purple -pink -red -orange -yellow -lime -green -teal -cyan +{%- for color in site.colors -%} +{% include "ui/badge.html" color=color[0] text=color[1].title light %} +{%- endfor -%} {%- endcapture %} {% include "docs/example.html" html=html centered %} @@ -62,18 +68,44 @@ The default badges are square and come in the basic set of colors. Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text. {% capture html -%} -1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 +{%- for color in site.colors -%} +{% include "ui/badge.html" color=color[0] text=color[1].title class="badge-pill" %} +{%- endfor -%} +{%- endcapture %} +{% include "docs/example.html" html=html centered %} + +You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits. + +{% capture html -%} +{%- for color in site.colors -%} +{% include "ui/badge.html" color=color[0] text=forloop.index class="badge-pill" %} +{%- endfor -%} +{%- endcapture %} +{% include "docs/example.html" html=html centered %} + +## Badges with icons + +You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges. + +{% capture html -%} +{% include "ui/badge.html" text="Star" icon="star" -%} +{% include "ui/badge.html" text="Heart" icon="heart" -%} +{% include "ui/badge.html" text="Check" icon="check" -%} +{% include "ui/badge.html" text="X" icon="x" -%} +{% include "ui/badge.html" text="Plus" icon="plus" -%} +{% include "ui/badge.html" text="Minus" icon="minus" -%} +{%- endcapture %} +{% include "docs/example.html" html=html centered %} + +You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges. + +{% capture html -%} +{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%} +{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%} +{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%} +{% include "ui/badge.html" text="X" icon-right="arrow-right" -%} +{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%} +{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%} {%- endcapture %} {% include "docs/example.html" html=html centered %} @@ -99,14 +131,55 @@ Place the badge within an `` element if you want it to perform the function o ## Button with badge -Badges can be used as part of links or buttons to provide, for example, a counter. +Badges can be used as parts of links or buttons to provide, for example, a counter. Use the `.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button. + +If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button. {% capture html -%} + {%- endcapture %} {% include "docs/example.html" html=html centered %} + +## Animated badges + +You can use the `.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention. + +{% capture html -%} + +{% endcapture %} +{% include "docs/example.html" html=html centered %} + +## Size Options + +Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above. + +{% capture html -%} +
+ {% include "ui/badge.html" color="primary" scale="sm" text="New" class="badge-sm" -%} + {% include "ui/badge.html" color="primary" scale="sm" text="1" class="badge-pill" -%} +
+
+ {% include "ui/badge.html" color="primary" text="New" class="badge-sm" -%} + {% include "ui/badge.html" color="primary" text="1" class="badge-pill" -%} +
+
+ {% include "ui/badge.html" color="primary" scale="lg" text="New" class="badge-sm" -%} + {% include "ui/badge.html" color="primary" scale="lg" text="1" class="badge-pill" -%} +
+{%- endcapture %} +{% include "docs/example.html" html=html centered vertical %} + + +## More examples + +If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview. \ No newline at end of file diff --git a/docs/content/ui/components/breadcrumb.md b/docs/content/ui/components/breadcrumb.md index d22d1a9ed..1aa68df58 100644 --- a/docs/content/ui/components/breadcrumb.md +++ b/docs/content/ui/components/breadcrumb.md @@ -12,19 +12,9 @@ Use the `breadcrumb` class to add a breadcrumb to your interface design for bett Look at the example below to see how breadcrumbs work in practice. {% capture html -%} -
    -
  1. - Home -
    2. -
  2. - Library -
    3. -
  3. - Data -
    4. -
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" %} {%- endcapture %} -{% include "docs/example.html" html=html vertical separated %} +{% include "docs/example.html" html=html centered %} ## Different separators @@ -33,60 +23,18 @@ You can use different breadcrumb styles to match your website or app design. Cho This example shows how to use different breadcrumb styles. {% capture html -%} -
    -
  1. - Home -
    2. -
  2. - Library -
    3. -
  3. - Data -
    4. -
-
    -
  1. - Home -
    2. -
  2. - Library -
    3. -
  3. - Data -
    4. -
-
    -
  1. - Home -
    2. -
  2. - Library -
    3. -
  3. - Data -
    4. -
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="dots" %} +{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="arrows" %} +{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="bullets" %} {%- endcapture %} -{% include "docs/example.html" html=html vertical separated %} +{% include "docs/example.html" html=html vertical separated centered %} ## With icon You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs. {% capture html -%} -
    -
  1. - - {% include "ui/icon.html" icon="home" %} - -
    2. -
  2. - Library -
    3. -
  3. - Data -
    4. -
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon %} {%- endcapture %} {% include "docs/example.html" html=html vertical separated %} @@ -95,19 +43,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app. {% capture html -%} - +{% include "ui/breadcrumb.html" pages="Home,Library,Data" class="breadcrumb-muted" %} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -119,24 +55,9 @@ You can use breadcrumbs in headers to show the current page location and provide
-
-
    -
  1. - Home -
    2. -
  2. - Library -
    3. -
  3. - Articles -
    4. -
-
+ {% include "ui/breadcrumb.html" pages="Home,Library,Articles" -%}

- Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these - woods. + How to Build a Modern Dashboard with Tabler

@@ -151,5 +72,5 @@ You can use breadcrumbs in headers to show the current page location and provide
{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html centered vertical %} diff --git a/docs/content/ui/components/buttons.md b/docs/content/ui/components/buttons.md index c91938334..fbaee53c9 100644 --- a/docs/content/ui/components/buttons.md +++ b/docs/content/ui/components/buttons.md @@ -16,7 +16,7 @@ As one of the most common elements of UI design, buttons have a very important f {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Default button @@ -25,7 +25,7 @@ The standard button creates a white background and subtle hover animation. It's {% capture html -%} Link {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Button variations @@ -41,7 +41,7 @@ Use the button classes that correspond to the function of your button. The big r Dark Light {%- endcapture -%} -{%- include "docs/example.html" html=html separated centered -%} +{%- include "docs/example.html" html=html separated centered %} ## Disabled buttons @@ -57,7 +57,7 @@ Make buttons look inactive to show that an action is possible once the user meet Dark Light {%- endcapture -%} -{%- include "docs/example.html" html=html separated centered -%} +{%- include "docs/example.html" html=html separated centered %} ## Color variations @@ -77,7 +77,7 @@ Choose the right color for your button to make it go well with your design and d Teal Cyan {%- endcapture -%} -{%- include "docs/example.html" html=html separated centered -%} +{%- include "docs/example.html" html=html separated centered %} ## Ghost buttons @@ -95,7 +95,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a Light
{%- endcapture -%} -{%- include "docs/example.html" html=html separated vertical -%} +{%- include "docs/example.html" html=html separated vertical %} ## Square buttons @@ -104,7 +104,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners {% capture html -%} Square button {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Pill buttons @@ -113,7 +113,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern {% capture html -%} Pill button {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Outline buttons @@ -129,7 +129,7 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want Dark Light {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Button size @@ -139,13 +139,13 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} {% capture html -%} {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Buttons with icons @@ -179,7 +179,7 @@ See all icons at [tabler.io/icons]({{ site.icons.link }}). Comment {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## Social buttons @@ -243,7 +243,7 @@ You can use the icons of popular social networking sites, which users are famili Tabler {%- endcapture -%} -{%- include "docs/example.html" html=html separated centered hide-code -%} +{%- include "docs/example.html" html=html separated centered hide-code %} ```html @@ -298,7 +298,7 @@ You can also add an icon without the name of a social networking site, if you wa {%- include "ui/icon.html" icon="brand-tabler" -%} {%- endcapture -%} -{%- include "docs/example.html" html=html separated vertical hide-code -%} +{%- include "docs/example.html" html=html separated vertical hide-code %} ```html @@ -333,7 +333,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use {%- include "ui/icon.html" icon="git-merge" -%} {%- endcapture -%} -{%- include "docs/example.html" html=html separated centered hide-code -%} +{%- include "docs/example.html" html=html separated centered hide-code %} ```html @@ -373,7 +373,7 @@ Create a dropdown button that will encourage users to click for more options. Yo {%- endcapture -%} -{%- include "docs/example.html" html=html centered hide-code height="260px" -%} +{%- include "docs/example.html" html=html centered hide-code height="260px" %} ```html
@@ -399,7 +399,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef Loading button with loooong content {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} {% capture html -%} @@ -407,7 +407,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef Button {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} ## List of buttons @@ -420,7 +420,7 @@ Create a list of buttons using the `.btn-list` container to display different ac Cancel
{%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced. @@ -447,7 +447,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne Nineteen {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best. @@ -457,7 +457,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align Save changes {%- endcapture -%} -{%- include "docs/example.html" html=html -%} +{%- include "docs/example.html" html=html %} {% capture html -%}
@@ -465,7 +465,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align Save changes
{%- endcapture -%} -{%- include "docs/example.html" html=html -%} +{%- include "docs/example.html" html=html %} {% capture html -%}
@@ -474,7 +474,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align Save changes
{%- endcapture -%} -{%- include "docs/example.html" html=html -%} +{%- include "docs/example.html" html=html %} ## Buttons with avatars @@ -507,4 +507,4 @@ Use buttons with avatars to simplify the process of interaction and make your de Avatar {%- endcapture -%} -{%- include "docs/example.html" html=html centered -%} +{%- include "docs/example.html" html=html centered %} diff --git a/docs/content/ui/components/vector-maps.md b/docs/content/ui/components/vector-maps.md index d2a5f1a12..6cf5650d0 100644 --- a/docs/content/ui/components/vector-maps.md +++ b/docs/content/ui/components/vector-maps.md @@ -14,55 +14,22 @@ To use vector maps in your project, you need to include the jsVectorMap library ``` -## Sample demo +## Default map Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map: ```html -
- +{% include "ui/map-vector.html" map-id="empty" %} +{{ script }} ``` +## Sample demo + Look at the example below to see how the vector map works with a world map. {% capture html -%} -
-
-
-
-
-
-
-
-
- +{% include "ui/map-vector.html" map-id="world" %} +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -71,99 +38,17 @@ Look at the example below to see how the vector map works with a world map. You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers: {% capture html -%} -
-
-
-
-
-
-
-
-
- +{% include "ui/map-vector.html" map-id="world-markers" %} +{{ script }} +{%- endcapture %} +{% include "docs/example.html" html=html %} + +## Lines + +You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines: + +{% capture html -%} +{% include "ui/map-vector.html" map-id="world-lines" %} +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} \ No newline at end of file diff --git a/docs/eleventy.config.mjs b/docs/eleventy.config.mjs index 2ea770b32..cb20535b0 100644 --- a/docs/eleventy.config.mjs +++ b/docs/eleventy.config.mjs @@ -163,7 +163,17 @@ export default function (eleventyConfig) { children: [] } }).sort((a, b) => { - return (a.data.order || 999) - (b.data.order || 999); + const orderA = a.data.order ?? 999; + const orderB = b.data.order ?? 999; + + if (orderA !== orderB) { + return orderA - orderB; + } + + const titleA = a.data.title ?? ''; + const titleB = b.data.title ?? ''; + + return titleA.localeCompare(titleB); }); return buildCollectionTree(a); diff --git a/docs/js/docs.js b/docs/js/docs.js index de578744f..5e577f066 100644 --- a/docs/js/docs.js +++ b/docs/js/docs.js @@ -5,4 +5,4 @@ docsearch({ appId: "NE1EGTYLS9", indexName: "tabler", apiKey: "016353235ef1dd32a6c392be0e939058", -}); \ No newline at end of file +}); diff --git a/docs/package.json b/docs/package.json index 96fec6be3..ee7fb9e85 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,6 +32,7 @@ "apexcharts": "3.54.1", "autosize": "^6.0.1", "choices.js": "^11.1.0", + "clipboard": "^2.0.11", "countup.js": "^2.8.0", "dropzone": "^6.0.0-beta.2", "flatpickr": "^4.6.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cec1ee4d0..e46640f1e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -128,6 +128,9 @@ importers: choices.js: specifier: ^11.1.0 version: 11.1.0 + clipboard: + specifier: ^2.0.11 + version: 2.0.11 countup.js: specifier: ^2.8.0 version: 2.8.2 @@ -216,6 +219,9 @@ importers: choices.js: specifier: ^11.1.0 version: 11.1.0 + clipboard: + specifier: ^2.0.11 + version: 2.0.11 countup.js: specifier: ^2.8.2 version: 2.8.2 @@ -1235,6 +1241,9 @@ packages: resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==} engines: {node: '>= 10.0'} + clipboard@2.0.11: + resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==} + cliui@8.0.1: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} @@ -1360,6 +1369,9 @@ packages: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} + delegate@3.2.0: + resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==} + depd@2.0.0: resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==} engines: {node: '>= 0.8'} @@ -1722,6 +1734,9 @@ packages: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} + good-listener@1.2.2: + resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==} + gopd@1.2.0: resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} engines: {node: '>= 0.4'} @@ -2624,6 +2639,9 @@ packages: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} engines: {node: '>=4'} + select@1.1.2: + resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==} + semver-compare@1.0.0: resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==} @@ -2870,6 +2888,9 @@ packages: thenby@1.3.4: resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==} + tiny-emitter@2.1.0: + resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==} + tinyglobby@0.2.13: resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==} engines: {node: '>=12.0.0'} @@ -4273,6 +4294,12 @@ snapshots: dependencies: source-map: 0.6.1 + clipboard@2.0.11: + dependencies: + good-listener: 1.2.2 + select: 1.1.2 + tiny-emitter: 2.1.0 + cliui@8.0.1: dependencies: string-width: 4.2.3 @@ -4385,6 +4412,8 @@ snapshots: delayed-stream@1.0.0: {} + delegate@3.2.0: {} + depd@2.0.0: {} dependency-graph@1.0.0: {} @@ -4760,6 +4789,10 @@ snapshots: merge2: 1.4.1 slash: 3.0.0 + good-listener@1.2.2: + dependencies: + delegate: 3.2.0 + gopd@1.2.0: {} graceful-fs@4.2.11: {} @@ -5611,6 +5644,8 @@ snapshots: extend-shallow: 2.0.1 kind-of: 6.0.3 + select@1.1.2: {} + semver-compare@1.0.0: {} semver@5.7.2: {} @@ -5874,6 +5909,8 @@ snapshots: thenby@1.3.4: {} + tiny-emitter@2.1.0: {} + tinyglobby@0.2.13: dependencies: fdir: 6.4.4(picomatch@4.0.2) diff --git a/preview/package.json b/preview/package.json index 9710b8983..c931c7da5 100644 --- a/preview/package.json +++ b/preview/package.json @@ -38,6 +38,7 @@ "apexcharts": "3.54.1", "autosize": "^6.0.1", "choices.js": "^11.1.0", + "clipboard": "^2.0.11", "countup.js": "^2.8.2", "dropzone": "^6.0.0-beta.2", "flatpickr": "^4.6.13", diff --git a/shared/data/libs.json b/shared/data/libs.json index 4a0c31aa9..ca6613f8b 100644 --- a/shared/data/libs.json +++ b/shared/data/libs.json @@ -22,6 +22,7 @@ "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js", "typed.js": "typed.js/dist/typed.umd.js", "signature_pad": "signature_pad/dist/signature_pad.umd.min.js", + "clipboard": "clipboard/dist/clipboard.min.js", "fullcalendar": "fullcalendar/index.global.min.js" }, "js-head": { diff --git a/shared/data/maps-vector.json b/shared/data/maps-vector.json index 2fe690c1f..9dd561630 100644 --- a/shared/data/maps-vector.json +++ b/shared/data/maps-vector.json @@ -1,4 +1,9 @@ { + "empty": { + "title": "Empty map", + "map": "world", + "color": "primary" + }, "world": { "title": "World map", "map": "world", diff --git a/shared/e11ty/filters.mjs b/shared/e11ty/filters.mjs index b920b3f41..d9a74806b 100644 --- a/shared/e11ty/filters.mjs +++ b/shared/e11ty/filters.mjs @@ -34,6 +34,17 @@ export function appFilters(eleventyConfig) { } }); + eleventyConfig.addFilter("escape_attribute", (text) => { + return text + .replace(/&/g, '&') + .replace(/'/g, ''') + .replace(/"/g, '"') + .replace(//g, '>') + .replace(/\r\n/g, ' ') + .replace(/[\r\n]/g, ' '); + }); + eleventyConfig.addFilter("contains", (items, item) => { return items && Array.isArray(items) && items.includes(item); }); @@ -149,7 +160,6 @@ export function appFilters(eleventyConfig) { // Convert a URL path to an absolute URL eleventyConfig.addFilter("absolute_url", function (url) { - // Base URL for the site - change this to your production domain const baseUrl = "https://docs.tabler.io"; // Ensure url starts with a slash diff --git a/shared/includes/docs/example.html b/shared/includes/docs/example.html index 7e97b01aa..d1703ce45 100644 --- a/shared/includes/docs/example.html +++ b/shared/includes/docs/example.html @@ -1,14 +1,22 @@
- {%- unless include.raw -%}
{%- endunless -%} - {{ html | remove-href }} + {%- unless include.raw -%}
{%- endunless -%} + {{ include.html | remove-href }} {%- unless include.raw -%}
{%- endunless -%}
{% unless include.hide-code %} +
+ + {% include "ui/icon.html" icon="clipboard" %} + {% include "ui/icon.html" icon="check" class="d-none" %} + + ```html -{{ html }} +{{ include.html }} ``` + +
{% endunless %} \ No newline at end of file diff --git a/shared/includes/ui/badge.html b/shared/includes/ui/badge.html index ed0dd519d..1bfb1cb58 100644 --- a/shared/includes/ui/badge.html +++ b/shared/includes/ui/badge.html @@ -1,5 +1,9 @@ {%- assign el = 'span' -%} -<{{ el }} class="badge{% if include['size'] %} badge-{{ include['size'] }}{% endif %}{% if include.color %} bg-{{ include.color }} text-{{ include.color }}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> +<{{ el }} class="badge{% if include.scale %} badge-{{ include.scale }}{% endif %}{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% endif %} text-{{ include.color }}{% if include.light %}-lt{% endif %}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> +{%- if include.icon -%} + {%- assign icon = include.icon -%} + {% include "ui/icon.html" icon=icon %} +{%- endif -%} {%- if include.person-id -%} {%- assign person-id = include.person-id | minus: 1 -%} {%- assign person = people[person-id] -%} diff --git a/shared/includes/ui/breadcrumb.html b/shared/includes/ui/breadcrumb.html index 9b7241b1d..7dcfd7f56 100644 --- a/shared/includes/ui/breadcrumb.html +++ b/shared/includes/ui/breadcrumb.html @@ -1,10 +1,20 @@ -{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," %} -
    - {% for page in breadcrumb-pages %} - {% if forloop.last %} -
  1. {{ page }}
    2. - {% else %} -
  2. {{ page }}
    3. - {% endif %} - {% endfor %} +{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%} +
      + {%- for page in breadcrumb-pages -%} + {%- if forloop.last -%} +
    1. + {{ page }} +
      2. + {%- else -%} +
    2. + {% if forloop.first and include.home-icon-%} + + {% include "ui/icon.html" icon="home" %} + + {%- else -%} + {{ page }} + {%- endif -%} +
      3. + {%- endif -%} + {%- endfor -%}
    diff --git a/shared/includes/ui/map-vector.html b/shared/includes/ui/map-vector.html index cdfd9a43a..5af62ec95 100644 --- a/shared/includes/ui/map-vector.html +++ b/shared/includes/ui/map-vector.html @@ -1,117 +1,117 @@ +{% removeemptylines %} {% assign id = include.map-id %} {% assign data = maps-vector[id] %} -{% assign color = include.color | default: data.color | default: 'green' %} +{% assign color = include.color | default: data.color | default: 'primary' %} {% if data %} -
    -
    -
    -
    +
    +
    +
    +
    - {% capture script %} - - {%- endcapture %} - {% if include.show-scripts %} - {{ script }} - {% else %} - {% capture_script %} - {{ script }} - {% endcapture_script %} - {% endif %} + window.addEventListener("resize", () => { + map.updateSize(); + }); + }); +{% endremoveemptylines %} + +{%- endcapture %} + +{% capture_script %} + {{ script }} +{% endcapture_script %} {% endif %} +{% endremoveemptylines %} \ No newline at end of file diff --git a/shared/layouts/docs/default.html b/shared/layouts/docs/default.html index c56765110..240648c7f 100644 --- a/shared/layouts/docs/default.html +++ b/shared/layouts/docs/default.html @@ -178,9 +178,8 @@
- {% if docs-libs -%} {% for lib in libs.js -%} - {% if docs-libs contains lib[0] or libs.global-libs contains lib[0] -%} + {% if docs-libs contains lib[0] or libs.global-libs contains lib[0] or lib[0] == "clipboard" -%} {% for file in lib[1] -%}