feat(maz-ui): styles - can disable reset CSS (#1180)

packages/docs/docs/.vitepress/theme/components/ComponentPropDoc.vue

@@ -77,21 +77,23 @@ onBeforeMount(async () => {
 <template>
   <table v-if="options" class="component-prop-doc" style="display: table;">
     <thead>
-      <th>
-        Prop
-      </th>
-      <th>
-        Type
-      </th>
-      <th>
-        Required
-      </th>
-      <th>
-        Default
-      </th>
-      <th>
-        Possible Value
-      </th>
+      <tr>
+        <th>
+          Prop
+        </th>
+        <th>
+          Type
+        </th>
+        <th>
+          Required
+        </th>
+        <th>
+          Default
+        </th>
+        <th>
+          Possible Value
+        </th>
+      </tr>
     </thead>
     <tbody>
       <tr v-for="({ name, type, defaultValue, required, values }, i) in options" :key="i">
@@ -133,9 +135,11 @@ onBeforeMount(async () => {
   <div class="flex items-start" style="gap: 2rem;">
     <table v-if="events" class="component-prop-doc" style="display: table;">
       <thead>
-        <th>
-          Events
-        </th>
+        <tr>
+          <th>
+            Events
+          </th>
+        </tr>
       </thead>
       <tbody>
         <tr v-for="(event, i) in events" :key="i">
@@ -147,9 +151,11 @@ onBeforeMount(async () => {
     </table>
     <table v-if="componentMethods" class="component-prop-doc" style="display: table;">
       <thead>
-        <th>
-          Methods
-        </th>
+        <tr>
+          <th>
+            Methods
+          </th>
+        </tr>
       </thead>
       <tbody>
         <tr v-for="(method, i) in componentMethods" :key="i">

packages/docs/tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from 'tailwindcss'
-import { tailwindConfig } from 'maz-ui/tailwindcss/tailwind.config.ts'
+import tailwindConfig from 'maz-ui/tailwindcss/tailwind.config.ts'
 
 export default <Config>{
   presets: [tailwindConfig],

packages/lib/components/MazAccordion.vue

@@ -57,7 +57,7 @@ function selectStep(index: number) {
 </script>
 
 <template>
-  <div class="m-accordion" role="presentation">
+  <div class="m-accordion m-reset-css" role="presentation">
     <template v-for="step in stepCount" :key="step">
       <MazCardSpotlight class="m-accordion__spotlight" :padding="false">
         <button

packages/lib/components/MazAnimatedCounter.vue

@@ -51,7 +51,7 @@ const durationInMs = computed(() => `${props.duration}ms`)
 
 <template>
   <span
-    class="m-animated-counter"
+    class="m-animated-counter m-reset-css"
     :class="{
       '--animated': isAnimated,
       '--prefixed': hasPrefix,

packages/lib/components/MazAvatar.vue

@@ -132,7 +132,7 @@ function handleImageError(event: Event) {
   <Component
     :is="componentType"
     :style="[{ fontSize: size }, style]"
-    class="m-avatar"
+    class="m-avatar m-reset-css"
     :class="[
       {
         '--has-link': isLink,

packages/lib/components/MazBackdrop.vue

@@ -185,7 +185,7 @@ defineExpose({
       @after-enter="onBackdropAnimationEnter"
       @after-leave="onBackdropAnimationLeave"
     >
-      <div v-if="present" class="m-backdrop --present" v-bind="$attrs" :class="[backdropClass, variant && `--variant-${variant}`, { '--persistent': persistent }]">
+      <div v-if="present" class="m-backdrop --present m-reset-css" v-bind="$attrs" :class="[backdropClass, variant && `--variant-${variant}`, { '--persistent': persistent }]">
         <div role="dialog" class="m-backdrop-container" aria-modal="true">
           <div class="m-backdrop-wrapper">
             <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->

packages/lib/components/MazBadge.vue

@@ -29,7 +29,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <span
-    class="m-badge"
+    class="m-badge m-reset-css"
     :class="[
       `--${color}`,
       { '--outline': outline, '--pastel': pastel, '--nowrap': nowrap },

packages/lib/components/MazBtn.vue

@@ -173,7 +173,7 @@ const iconClassSize = computed(() => {
   <Component
     :is="component"
     :disabled="isDisabled || undefined"
-    class="m-btn"
+    class="m-btn m-reset-css"
     :class="[
       `--${size}`,
       ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],

packages/lib/components/MazCard.vue

@@ -121,7 +121,7 @@ const footerAlignClass = computed(() =>
 
 <template>
   <div
-    class="m-card"
+    class="m-card m-reset-css"
     :class="[
       {
         'm-card--linked': isLinked,

packages/lib/components/MazCardSpotlight.vue

@@ -85,7 +85,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="m-card-spotlight"
+    class="m-card-spotlight m-reset-css"
     :class="{ 'maz-elevation': !noElevation }"
     :style="{ 'backgroundColor': alphaColor20, '--inner-opacity': innerOpacity }"
   >

packages/lib/components/MazCarousel.vue

@@ -59,7 +59,7 @@ function setScrollState(event: Event) {
 
 <template>
   <div
-    class="m-carousel"
+    class="m-carousel m-reset-css"
     :class="{
       '--hide-scrollbar': hideScrollbar,
     }"

packages/lib/components/MazChart.vue

@@ -115,5 +115,5 @@ const component = defineAsyncComponent(async () => {
 
 <template>
   <!-- @vue-expect-error -->
-  <Component :is="component" v-bind="props" />
+  <Component :is="component" class="m-chart m-reset-css" v-bind="props" />
 </template>

packages/lib/components/MazCheckbox.vue

@@ -223,7 +223,7 @@ function onFocus(event: FocusEvent) {
 <template>
   <label
     :for="instanceId"
-    class="m-checkbox"
+    class="m-checkbox m-reset-css"
     :class="[{ '--disabled': disabled, '--error': error, '--warning': warning, '--success': success }, props.class]"
     tabindex="0"
     :style="[style, { '--checkbox-selected-color': checkboxSelectedColor, '--checkbox-box-shadow-color': checkboxBoxShadow }]"

packages/lib/components/MazChecklist.vue

@@ -124,9 +124,9 @@ function updateQuery(value?: string) {
 </script>
 
 <template>
-  <div class="m-checklist maz-flex maz-flex-col maz-gap-4">
-    <label v-if="search?.enabled" for="query" class="maz-flex maz-items-center maz-justify-between maz-gap-4">
-      <span v-if="$slots.title || title" class="maz-flex-none maz-truncate">
+  <div class="m-checklist m-reset-css">
+    <label v-if="search?.enabled" for="query" class="search-label">
+      <span v-if="$slots.title || title" class="title">
         <!-- @slot use this slot to customize the title -->
         <slot name="title">
           {{ title }}
@@ -150,15 +150,15 @@ function updateQuery(value?: string) {
       :color
       :no-elevation="!elevation"
       :padding="false"
-      content-class="maz-flex maz-flex-col maz-maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2"
+      content-class="card-content"
     >
-      <div v-if="filteredItems?.length === 0" class="maz-flex maz-h-full maz-flex-center">
+      <div v-if="filteredItems?.length === 0" class="no-results">
         <!-- @slot use this slot to customize the no results area -->
         <slot name="no-results">
-          <div class="maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center">
-            <NoResultsIcon class="maz-text-3xl maz-text-muted" />
+          <div class="no-results-content">
+            <NoResultsIcon class="no-results-icon" />
 
-            <span class="maz-text-muted">
+            <span class="no-results-text">
               <!-- @slot use this slot to customize the no results message -->
               <slot name="no-results-text"> No results found </slot>
             </span>
@@ -169,7 +169,7 @@ function updateQuery(value?: string) {
         v-for="item of filteredItems"
         :key="item.value"
         :for="item.value"
-        class="m-checklist-item maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light"
+        class="m-checklist-item m-reset-css"
       >
         <MazCheckbox
           :id="item.value"
@@ -186,11 +186,53 @@ function updateQuery(value?: string) {
           :item="item"
           name="item"
         >
-          <span class="cap-f">
+          <span class="item-label">
             {{ item.label }}
           </span>
         </slot>
       </label>
     </MazCardSpotlight>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.m-checklist {
+  @apply maz-flex maz-flex-col maz-gap-4;
+
+  .search-label {
+    @apply maz-flex maz-items-center maz-justify-between maz-gap-4;
+  }
+
+  .title {
+    @apply maz-flex-none maz-truncate;
+  }
+
+  :deep(.card-content) {
+    @apply maz-flex maz-flex-col maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2;
+  }
+
+  .no-results {
+    @apply maz-flex maz-h-full maz-flex-center;
+  }
+
+  .no-results-content {
+    @apply maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center;
+  }
+
+  .no-results-icon {
+    @apply maz-text-3xl maz-text-muted;
+  }
+
+  .no-results-text {
+    @apply maz-text-muted;
+  }
+
+  .m-checklist-item {
+    @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light;
+  }
+
+  .item-label {
+    @apply maz-cap-f;
+  }
+}
+</style>

packages/lib/components/MazCircularProgressBar.vue

@@ -124,7 +124,7 @@ const dashoffset = computed<number>(() => {
 
 <template>
   <div
-    class="m-circular-progress-bar"
+    class="m-circular-progress-bar m-reset-css"
     :style="[
       {
         '--animation-duration': animationDuration,

packages/lib/components/MazDropdown.vue

@@ -312,7 +312,7 @@ watch(
   <div
     :id="instanceId"
     v-click-outside="onClickOutside"
-    class="m-dropdown"
+    class="m-dropdown m-reset-css"
     :style
     :class="[props.class, { '--block': block }]"
   >

packages/lib/components/MazDropzone.vue

@@ -326,7 +326,7 @@ export default defineComponent({
     ref="ButtonElement"
     type="button"
     name="maz-dropzone"
-    class="maz-dropzone"
+    class="maz-dropzone m-reset-css"
     :style="[dropzoneStyle]"
   >
     <template v-if="dropzoneReady">

packages/lib/components/MazExpandAnimation.vue

@@ -54,7 +54,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="expandAnimationRef"
-    class="m-expand-animation"
+    class="m-expand-animation m-reset-css"
     :class="{ 'm-expand-animation--expanded': isOpen }"
     :aria-hidden="!isOpen"
     role="region"

packages/lib/components/MazFullscreenLoader.vue

@@ -35,7 +35,7 @@ onUnmounted(() => {
 <template>
   <Teleport :to="teleportSelector">
     <div
-      class="m-fullscreen-loader maz-fixed maz-inset-0 maz-z-default-backdrop maz-flex maz-flex-col maz-gap-2 maz-bg-overlay maz-text-center maz-backdrop-blur maz-flex-center"
+      class="m-fullscreen-loader m-reset-css"
       v-bind="$attrs"
     >
       <MazSpinner :color="color" :size="size" />
@@ -53,3 +53,9 @@ onUnmounted(() => {
   height: 100vh;
 }
 </style>
+
+<style lang="postcss" scoped>
+.m-fullscreen-loader {
+  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-flex maz-flex-col maz-gap-2 maz-bg-overlay maz-text-center maz-backdrop-blur maz-flex-center;
+}
+</style>

packages/lib/components/MazGallery.vue

@@ -104,7 +104,7 @@ function shouldHaveRemainingLayer(index: number): boolean {
 <template>
   <div
     v-if="images.length > 0 || hasEmptyLayer"
-    class="m-gallery maz-flex"
+    class="m-gallery m-reset-css"
     :style="[sizeStyle, { '--gallery-separator-color': separatorColor }]"
     :class="{ 'maz-rounded': !noRadius }"
   >
@@ -162,8 +162,8 @@ function shouldHaveRemainingLayer(index: number): boolean {
 </template>
 
 <style lang="postcss" scoped>
-  .m-gallery {
-  @apply maz-relative maz-overflow-hidden;
+.m-gallery {
+  @apply maz-relative maz-overflow-hidden maz-flex;
 
   &__hidden {
     @apply maz-hidden;

packages/lib/components/MazIcon.vue

@@ -182,6 +182,7 @@ watchEffect(() => getSource(fullSrc.value))
   <svg
     v-if="svgElSource"
     ref="svgElem"
+    class="m-icon m-reset-css"
     width="1em"
     height="1em"
     v-bind="{

packages/lib/components/MazInput.vue

@@ -342,7 +342,8 @@ function emitInputEvent(event: Event) {
     <label v-if="topLabel" :for="instanceId" class="m-input-top-label">{{ topLabel }}</label>
 
     <div
-      class="m-input-wrapper" :class="[
+      class="m-input-wrapper m-reset-css"
+      :class="[
         inputClasses,
         borderStyle,
         !roundedSize ? { 'maz-rounded': !noRadius } : `--rounded-${roundedSize}`,

packages/lib/components/MazInputCode.vue

@@ -233,7 +233,7 @@ const borderColor = computed(() => {
 
 <template>
   <fieldset
-    class="m-input-code"
+    class="m-input-code m-reset-css"
     :class="[size ? `--${size}` : undefined, props.class]"
     :disabled="disabled"
     :style="[style, { '--input-border-color': borderColor }]"

packages/lib/components/MazInputNumber.vue

@@ -154,7 +154,7 @@ function decrement() {
 
 <template>
   <div
-    class="m-input-number"
+    class="m-input-number m-reset-css"
     :class="[`m-input-number--${size}`, props.class, { '--block': block }]"
     :style="style"
   >

packages/lib/components/MazInputPrice.vue

@@ -124,7 +124,7 @@ function updateInternalValue(value?: string | number) {
 <template>
   <MazInput
     :model-value="displayPrice"
-    class="maz-input-price"
+    class="maz-input-price m-reset-css"
     :block
     :error
     :success

packages/lib/components/MazInputTags.vue

@@ -175,7 +175,7 @@ const buttonSize = computed(() => {
 
 <template>
   <div
-    class="m-input-tags"
+    class="m-input-tags m-reset-css"
     :class="[borderStyle, `--${color}`, `--${size}`, props.class, { '--block': block }]"
     :style
     @focus.capture="isFocused = true"