feat: update x-tailwindcss package to vue 3 (#1656)

BREAKING CHANGE: The showcase is no longer exported as Vue components but as web application.

packages/x-tailwindcss/demo/src/components/icons/uncheck.vue

@@ -1,10 +1,5 @@
-<template functional>
-  <svg
-    :class="['x-icon'].concat(data.staticClass, data.class)"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+<template>
+  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"

packages/x-tailwindcss/demo/src/components/xds-badge.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-  import { ShowcaseSectionsClasses, ShowcaseSections } from '../types/types';
+  import { computed, defineComponent, PropType } from 'vue';
+  import { ShowcaseSectionsClasses } from '../types/types';
   import { addParentClasses } from '../utils';
   import XdsBaseShowcase from './xds-base-showcase.vue';
   import CuratedIcon from './icons/curated.vue';
@@ -47,91 +47,98 @@
     | 'AttachTo'
     | 'WithIcon'
     | 'Combinations';
-
-  @Component({
+  export default defineComponent({
     components: {
       XdsBaseShowcase,
       CuratedIcon
-    }
-  })
-  export default class XdsBadgeShowcase extends Vue {
-    @Prop({ default: () => 'x-badge' })
-    public base!: string;
-
-    @Prop({ default: () => ['x-badge-sm', 'x-badge-md'] })
-    public sizes!: string[];
-
-    @Prop({ default: () => 'x-badge-circle' })
-    public circle!: string;
-
-    @Prop({
-      default: () => [
-        '',
-        'x-badge-neutral',
-        'x-badge-lead',
-        'x-badge-auxiliary',
-        'x-badge-accent',
-        'x-badge-highlight',
-        'x-badge-success',
-        'x-badge-warning',
-        'x-badge-error'
-      ]
-    })
-    public colors!: string[];
-
-    @Prop({ default: () => 'x-badge-light' })
-    public light!: string;
-
-    @Prop({ default: () => 'x-badge-outlined' })
-    public outlined!: string;
-
-    @Prop({ default: () => 'x-badge-bright' })
-    public bright!: string;
-
-    @Prop({
-      default: () => [
-        'x-attach-to-top-left',
-        'x-attach-to-top-right',
-        'x-attach-to-bottom-left',
-        'x-attach-to-bottom-right'
-      ]
-    })
-    public attachTo!: string[];
-
-    @Prop({
-      default: () => ['x-badge-sm', '', 'x-badge-circle x-badge-sm', 'x-badge-circle']
-    })
-    public withIcon!: string[];
-
-    @Prop({
-      default: () => [
-        'x-badge-error x-badge-sm x-badge-outlined',
-        'x-badge-light x-badge-lead x-badge-circle',
-        'x-badge-outlined x-badge-circle x-badge-warning x-badge-sm',
-        'x-badge-light x-badge-outlined x-badge-auxiliary',
-        'x-badge-circle x-badge-light x-badge-lead x-attach-to-top-right',
-        'x-badge-sm x-badge-highlight x-attach-to-top-right'
-      ]
-    })
-    public combinations!: string[];
-
-    public sectionClasses: ShowcaseSectionsClasses<Sections> = {
-      Bright: 'x-bg-neutral-90 x-p-8'
-    };
+    },
+    props: {
+      base: {
+        type: String,
+        default: () => 'x-badge'
+      },
+      sizes: {
+        type: Array as PropType<string[]>,
+        default: () => ['x-badge-sm', 'x-badge-md']
+      },
+      circle: {
+        type: String,
+        default: () => 'x-badge-circle'
+      },
+      colors: {
+        type: Array as PropType<string[]>,
+        default: () => [
+          '',
+          'x-badge-neutral',
+          'x-badge-lead',
+          'x-badge-auxiliary',
+          'x-badge-accent',
+          'x-badge-highlight',
+          'x-badge-success',
+          'x-badge-warning',
+          'x-badge-error'
+        ]
+      },
+      light: {
+        type: String,
+        default: () => 'x-badge-light'
+      },
+      outlined: {
+        type: String,
+        default: () => 'x-badge-outlined'
+      },
+      bright: {
+        type: String,
+        default: () => 'x-badge-bright'
+      },
+      attachTo: {
+        type: Array as PropType<string[]>,
+        default: () => [
+          'x-attach-to-top-left',
+          'x-attach-to-top-right',
+          'x-attach-to-bottom-left',
+          'x-attach-to-bottom-right'
+        ]
+      },
+      withIcon: {
+        type: Array as PropType<string[]>,
+        default: () => ['x-badge-sm', '', 'x-badge-circle x-badge-sm', 'x-badge-circle']
+      },
+      combinations: {
+        type: Array as PropType<string[]>,
+        default: () => [
+          'x-badge-error x-badge-sm x-badge-outlined',
+          'x-badge-light x-badge-lead x-badge-circle',
+          'x-badge-outlined x-badge-circle x-badge-warning x-badge-sm',
+          'x-badge-light x-badge-outlined x-badge-auxiliary',
+          'x-badge-circle x-badge-light x-badge-lead x-attach-to-top-right',
+          'x-badge-sm x-badge-highlight x-attach-to-top-right'
+        ]
+      }
+    },
+    setup(props) {
+      const sectionClasses: ShowcaseSectionsClasses<Sections> = {
+        Bright: 'x-bg-neutral-90 x-p-8'
+      };
+      const sections = computed(() => {
+        return {
+          Default: [props.base],
+          Sizes: props.sizes.map(addParentClasses(props.base)),
+          Circle: props.sizes.map(addParentClasses(props.base, props.circle)),
+          Colors: props.colors.map(addParentClasses(props.base)),
+          Light: props.colors.map(addParentClasses(props.base, props.light)),
+          Outlined: props.colors.map(addParentClasses(props.base, props.outlined)),
+          Bright: props.colors.map(addParentClasses(props.base, props.bright)),
+          AttachTo: props.attachTo.map(addParentClasses(props.base)),
+          WithIcon: props.withIcon.map(addParentClasses(props.base)),
+          Combinations: props.combinations.map(addParentClasses(props.base))
+        };
+      });
 
-    protected get sections(): ShowcaseSections<Sections> {
       return {
-        Default: [this.base],
-        Sizes: this.sizes.map(addParentClasses(this.base)),
-        Circle: this.sizes.map(addParentClasses(this.base, this.circle)),
-        Colors: this.colors.map(addParentClasses(this.base)),
-        Light: this.colors.map(addParentClasses(this.base, this.light)),
-        Outlined: this.colors.map(addParentClasses(this.base, this.outlined)),
-        Bright: this.colors.map(addParentClasses(this.base, this.bright)),
-        AttachTo: this.attachTo.map(addParentClasses(this.base)),
-        WithIcon: this.withIcon.map(addParentClasses(this.base)),
-        Combinations: this.combinations.map(addParentClasses(this.base))
+        sectionClasses,
+        sections
       };
     }
-  }
+  });
 </script>

packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue

@@ -27,72 +27,65 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType, ref } from 'vue';
   import { ShowcaseSectionsClasses, ShowcaseSections } from '../types/types';
 
-  @Component
-  export default class XdsBaseShowcase extends Vue {
-    /**
-     * The sections to display with the list of classes for each element.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public sections!: ShowcaseSections;
+  export default defineComponent({
+    props: {
+      sections: {
+        type: Object as PropType<ShowcaseSections>,
+        required: true
+      },
+      sectionsClasses: {
+        type: Object as PropType<ShowcaseSectionsClasses>,
+        default: () => ({})
+      },
+      title: {
+        type: String,
+        required: true
+      }
+    },
+    setup() {
+      const isMessageVisible = ref(false);
 
-    /**
-     * The classes to apply to the sections content.
-     *
-     * @public
-     */
-    @Prop({
-      default: () => ({})
-    })
-    public sectionsClasses!: ShowcaseSectionsClasses;
+      /**
+       * Copies the classList of an HTML Element to the clipboard.
+       *
+       * @param event - The MouseEvent to get the HTML Element from.
+       *
+       * @internal
+       */
+      function copyCssClassesToClipboard(event: MouseEvent): void {
+        navigator.clipboard.writeText((event.currentTarget as HTMLElement).classList.value);
+        showMessage();
+      }
 
-    /**
-     * The title to display at the beginning of the component.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public title!: string;
-
-    protected isMessageVisible = false;
-
-    /**
-     * Copies the classList of an HTML Element to the clipboard.
-     *
-     * @param event - The MouseEvent to get the HTML Element from.
-     *
-     * @internal
-     */
-    protected copyCssClassesToClipboard(event: MouseEvent): void {
-      navigator.clipboard.writeText((event.currentTarget as HTMLElement).classList.value);
-      this.showMessage();
-    }
-
-    /**
-     * Removes the prefix from a CSS class list. If the prefix is full class name, is removed too.
-     *
-     * @param cssClasses - The class list to remove the prefix from.
-     * @param prefix - The prefix to be removed.
-     * @returns The CSS classes with the prefix removed.
-     *
-     * @internal
-     */
-    protected removeClassPrefix(cssClasses: string, prefix: string): string {
-      return cssClasses.replace(new RegExp(`${prefix}-?`, 'g'), '');
-    }
-
-    /**
-     * Shows the message of copied classes to clipboard for 2 seconds.
-     *
-     * @internal
-     */
-    protected showMessage(): void {
-      this.isMessageVisible = true;
-      setTimeout(() => (this.isMessageVisible = false), 2000);
+      /**
+       * Shows the message of copied classes to clipboard for 2 seconds.
+       *
+       * @internal
+       */
+      function showMessage(): void {
+        isMessageVisible.value = true;
+        setTimeout(() => (isMessageVisible.value = false), 2000);
+      }
+      /**
+       * Removes the prefix from a CSS class list. If the prefix is full class name, is removed too.
+       *
+       * @param cssClasses - The class list to remove the prefix from.
+       * @param prefix - The prefix to be removed.
+       * @returns The CSS classes with the prefix removed.
+       *
+       * @internal
+       */
+      function removeClassPrefix(cssClasses: string, prefix: string): string {
+        return cssClasses.replace(new RegExp(`${prefix}-?`, 'g'), '');
+      }
+      return {
+        copyCssClassesToClipboard,
+        removeClassPrefix,
+        isMessageVisible
+      };
     }
-  }
+  });
 </script>