fix: tw prefixes update

Корпусов Максим · Корпусов Максим · commit de381d61398e · 2024-01-02T00:47:09.000+03:00
diff --git a/lib/src/components/MDialog/MDialog.vue b/lib/src/components/MDialog/MDialog.vue
@@ -1,38 +1,42 @@
 <template>
   <transition v-bind="scrimFade">
     <div
-      v-show="show"
-      class="fixed inset-0 opacity-40 bg-[--md-sys-color-scrim] z-[99998]"
+      v-if="show"
+      class="mv-fixed -mv-inset-20 mv-opacity-40 mv-bg-[--md-sys-color-scrim] mv-z-[99998]"
+      :class="{ 'mv-pointer-event-none': !show }"
       @click="close()"
     />
   </transition>
   <MEnterExit
-    class="top-1/2 left-1/2 z-[99999] w-[312px] bg-[--md-sys-color-surface-container-high] rounded-[28px] fixed"
+    class="mv-top-1/2 mv-left-1/2 mv-z-[99999] mv-w-[312px] mv-bg-[--md-sys-color-surface-container-high] mv-rounded-[28px] mv-fixed"
     ref="dialog"
-    enter-class="opacity-100"
-    exit-class="opacity-0 !max-h-2"
+    enter-class="mv-opacity-100"
+    exit-class="mv-opacity-0 !mv-max-h-2"
     :show="show"
   >
-    <div ref="wrapper" class="p-6">
+    <div ref="wrapper" class="mv-p-6">
       <span
         v-if="icon"
-        class="material-symbols-rounded mb-4 block text-center text-[--md-sys-color-secondary] text-[24px]"
+        class="material-symbols-rounded mv-mb-4 mv-block mv-text-center mv-text-[--md-sys-color-secondary] mv-text-[24px]"
         v-text="icon"
       />
       <p
-        class="headline-small text-[--md-sys-color-on-surface]"
-        :class="{ 'text-center': !!icon }"
+        class="headline-small mv-text-[--md-sys-color-on-surface]"
+        :class="{ 'mv-text-center': !!icon }"
         v-text="title"
       />
       <p
-        class="body-medium text-[--md-sys-color-on-surface-variant] mt-4"
+        class="body-medium mv-text-[--md-sys-color-on-surface-variant] mv-mt-4"
         v-text="text"
       />
 
       <slot />
 
       <!--actions-->
-      <div v-if="$slots.actions" class="flex gap-2 pt-6 justify-end">
+      <div
+        v-if="$slots.actions"
+        class="mv-flex mv-gap-2 mv-pt-6 mv-justify-end"
+      >
         <slot name="actions" />
       </div>
     </div>
@@ -41,7 +45,7 @@
 
 <script setup>
 import MEnterExit from '../transitions/MEnterExit.vue'
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { scrimFade } from '../../utils/transitions.js'
 
 const props = defineProps({
diff --git a/lib/src/components/MIconButton/MIconButton.vue b/lib/src/components/MIconButton/MIconButton.vue
@@ -2,21 +2,31 @@
   <component
     :is="element"
     :href="href"
-    class="inline-flex !no-underline select-none justify-center items-center gap-2 h-10 w-10 relative overflow-hidden rounded-full"
+    class="mv-inline-flex !mv-no-underline mv-select-none mv-justify-center mv-items-center mv-gap-2 mv-h-10 mv-w-10 mv-relative mv-overflow-hidden mv-rounded-full"
     :class="[
       {
-        'border-solid border !border-[--md-sys-color-outline]':
+        'mv-border-solid mv-border !mv-border-[--md-sys-color-outline]':
           variant === 'outlined' && (!toggleable || (toggleable && !active)),
-        'pointer-events-none': disabled,
+        'mv-pointer-events-none': disabled,
       },
     ]"
     :style="[iconColor, backgroundColor]"
-    @click="active = !active"
   >
-    <MStateLayer :background="stateBackground" :disabled="disabled" />
+    <MStateLayer
+      :background="stateBackground"
+      :disabled="disabled"
+      classes="mv-rounded-full"
+      @click="
+        () => {
+          active = !active
+          $emit('update:modelValue', active)
+          $emit('click')
+        }
+      "
+    />
     <span
       :class="{ 'filled-icon': toggleable && active }"
-      class="material-symbols-rounded text-[24px]"
+      class="material-symbols-rounded mv-text-[24px]"
       v-text="icon"
     />
   </component>
@@ -60,6 +70,8 @@ const props = defineProps({
 const active = ref()
 useLocalModel(props.modelValue, active)
 
+const emits = defineEmits(['update:modelValue', 'click'])
+
 const element = computed(() => {
   return h(props.href ? 'a' : 'button', {})
 })
diff --git a/lib/src/components/MRadio/MRadio.vue b/lib/src/components/MRadio/MRadio.vue
@@ -1,21 +1,26 @@
 <template>
-  <div class="flex gap-0.5 cursor-pointer items-center" @click="click">
-    <div class="w-12 h-12 relative">
-      <div class="absolute inset-1 rounded-full overflow-hidden">
+  <div
+    class="mv-flex mv-gap-0.5 mv-cursor-pointer mv-items-center"
+    @click.stop="click"
+  >
+    <div class="mv-w-12 mv-h-12 mv-relative">
+      <div class="mv-absolute mv-inset-1 mv-rounded-full mv-overflow-hidden">
         <MStateLayer
+          classes="mv-rounded-full"
           :background="stateBackground"
           :ripple-background="rippleBackground"
+          @click="click"
         />
       </div>
       <span
-        class="material-symbols-rounded m-3 z-10 pointer-events-none absolute w-6 h-6"
+        class="material-symbols-rounded mv-m-3 mv-z-10 mv-pointer-events-none mv-absolute mv-w-6 mv-h-6"
         :class="contentColor"
         v-text="actualState ? 'radio_button_checked' : 'radio_button_unchecked'"
       />
     </div>
     <p
       v-if="text"
-      class="body-large lowercase first-letter:uppercase text-[--md-sys-color-on-surface]"
+      class="body-large mv-lowercase first-letter:mv-uppercase mv-text-[--md-sys-color-on-surface]"
       v-text="text"
     />
   </div>
@@ -40,10 +45,9 @@ const props = defineProps({
   },
 })
 
-//TODO: symbol
 let group = inject(radioGroupModelValueSymbol, undefined)
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'click'])
 
 const actualState = ref(group ? group === props.value : props.modelValue)
 
@@ -71,11 +75,12 @@ const rippleBackground = computed(() => {
 
 const contentColor = computed(() => {
   return actualState.value
-    ? 'text-[--md-sys-color-primary]'
-    : 'text-[--md-sys-color-on-surface]'
+    ? 'mv-text-[--md-sys-color-primary]'
+    : 'mv-text-[--md-sys-color-on-surface]'
 })
 
 function click() {
+  emits('click')
   if (group === undefined) {
     actualState.value = !actualState.value
     emits('update:modelValue', actualState.value)
diff --git a/lib/src/components/transitions/MEnterExit.vue b/lib/src/components/transitions/MEnterExit.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="grow"
-    class="max-h-0 overflow-hidden"
+    class="mv-max-h-0 mv-overflow-hidden"
     :class="`${show ? enterClass : exitClass}`"
     style="transition-property: max-height, transform, opacity"
     :style="{
