Revert post3.1.2 changes (#5)

* Revert "Bump v-popover"

This reverts commit cc1fb17.

* revert: revert changes after 3.1.2

* chore: update deps

docs/.vitepress/components/calendar/AttributesPopoverLabels.vue

@@ -1,9 +1,9 @@
 <template>
   <Example centered>
-    <div class="text-lg font-semibold mb-2 mt-0" v-if="action === 'focus'">
+    <div class="text-lg font-semibold mb-2 mt-0" v-if="visibility === 'focus'">
       Focus
     </div>
-    <div class="text-lg font-semibold mb-2 mt-0" v-if="action === 'click'">
+    <div class="text-lg font-semibold mb-2 mt-0" v-if="visibility === 'click'">
       Click
     </div>
     <VCalendar :attributes="attributes" />
@@ -14,15 +14,15 @@
 import { computed, ref } from 'vue';
 
 const props = defineProps({
-  action: { type: String, default: 'hover' },
+  visibility: { type: String, default: 'hover' },
   hideIndicators: Boolean,
 });
 
 const todos = ref([
   {
     description: 'Take Noah to basketball practice.',
     isComplete: false,
-    dates: { repeat: { weekdays: 6 } }, // Every Friday
+    dates: { repeat: { weekdays: 5 } }, // Every Friday
     color: 'red',
   },
 ]);
@@ -37,7 +37,7 @@ const attributes = computed(() => [
     },
     popover: {
       label: todo.description,
-      action: props.action,
+      visibility: props.visibility,
       hideIndicator: props.hideIndicators,
     },
   })),

docs/.vitepress/components/calendar/AttributesPopoverSlot.vue

@@ -1,6 +1,6 @@
 <template>
   <VCalendar :attributes="attributes">
-    <template #day-popover="{ dayTitle, attributes }">
+    <template #day-popover="{ day, format, masks, dayTitle, attributes }">
       <div class="px-1">
         <div v-if="step === 1" class="text-xs text-gray-700 dark:text-gray-300">
           Using my own content now
@@ -29,7 +29,7 @@
 import { ref, computed } from 'vue';
 
 const props = defineProps({
-  action: { type: String, default: 'hover' },
+  visibility: { type: String, default: 'hover' },
   hideIndicators: Boolean,
   step: { type: Number, default: 1 },
 });
@@ -53,7 +53,7 @@ const attributes = computed(() => [
     },
     popover: {
       label: todo.description,
-      action: props.action,
+      visibility: props.visibility,
       hideIndicator: props.hideIndicators,
     },
     customData: todo,

docs/.vitepress/components/datepicker/DatePopoverCustom.vue

@@ -11,7 +11,7 @@ import { ref } from 'vue';
 
 const date = ref(new Date());
 const popover = ref({
-  action: 'click',
+  visibility: 'click',
   placement: 'right',
 });
 </script>

docs/.vitepress/components/datepicker/DatePopoverManual.vue

@@ -1,18 +1,12 @@
-<script setup>
-import { ref } from 'vue';
-const date = ref(new Date());
-</script>
-
 <template>
   <DateDisplay v-model="date" :popover="false">
     <template #default="{ togglePopover, inputValue, inputEvents }">
       <div
         class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden"
       >
         <button
-          type="button"
           class="flex justify-center items-center px-2 bg-accent-100 hover:bg-accent-200 text-accent-700 border-r border-gray-300 dark:bg-gray-700 dark:text-accent-300 dark:border-gray-600 dark:hover:bg-gray-600"
-          @click="togglePopover({ target: $event.currentTarget })"
+          @click="() => togglePopover()"
         >
           <IconCalendar class="w-5 h-5" />
         </button>
@@ -25,3 +19,7 @@ const date = ref(new Date());
     </template>
   </DateDisplay>
 </template>
+<script setup>
+import { ref } from 'vue';
+const date = ref(new Date());
+</script>

docs/.vitepress/components/datepicker/DateRangePopover.vue

@@ -25,9 +25,8 @@ const range = ref({
 const dragValue = ref(null);
 const selectDragAttribute = computed(() => ({
   popover: {
-    action: 'hover',
-    interactive: false,
-    theme: 'dark',
+    visibility: 'hover',
+    isInteractive: false,
   },
 }));
 </script>

docs/.vitepress/components/datepicker/DateSimpleSlot.vue

@@ -4,7 +4,7 @@
       <template #default="{ togglePopover }">
         <button
           class="px-3 py-2 bg-blue-500 hover:bg-blue-600 text-sm text-white font-semibold rounded-md"
-          @click="togglePopover({ target: $event.currentTarget })"
+          @click="togglePopover"
         >
           Select date
         </button>
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 const date = ref(new Date());
 </script>

docs/.vitepress/components/examples/ExampleDateForm.vue

@@ -53,6 +53,6 @@ const errorMessage = computed(() => {
   return '';
 });
 const popover = ref({
-  action: 'hover',
+  visibility: 'hover',
 });
 </script>

docs/.vitepress/theme/styles/index.css

@@ -41,18 +41,10 @@
   --vp-c-brand-dark: theme(colors.accent.700);
   --vp-c-brand-darker: theme(colors.accent.900);
 
-  --vp-code-font-size: theme(fontSize.sm);
-
+  --vp-code-font-size: theme(fontSize.base)
   --vp-code-tab-bg: theme(colors.gray.900);
-  --vp-code-lang-color: theme(colors.gray.400);
-  --vp-code-block-bg: theme(colors.gray.900);
-
   --vp-code-tab-divider: theme(colors.gray.700);
-  --vp-code-tab-text-color: theme(colors.gray.400);
-  --vp-code-tab-hover-text-color: theme(colors.gray.100);
-  --vp-code-tab-active-text-color: theme(colors.gray.200);
-  --vp-code-tab-active-bar-color: theme(colors.accent.300);
-
+  --vp-code-block-bg: theme(colors.gray.900);
   --vp-c-switch-bg: theme(colors.gray.300);
   --vp-c-switch-border: theme(colors.gray.400);
   --vp-c-switch-grabber-bg: theme(colors.white);
@@ -101,16 +93,9 @@
   --vp-c-brand-dark: theme(colors.accent.700);
   --vp-c-brand-darker: theme(colors.accent.900);
 
-  --vp-code-lang-color: theme(colors.gray.400);
-  --vp-code-block-bg: theme(colors.gray.900);
-
   --vp-code-tab-bg: theme(colors.gray.900);
   --vp-code-tab-divider: theme(colors.gray.700);
-  --vp-code-tab-text-color: theme(colors.gray.400);
-  --vp-code-tab-hover-text-color: theme(colors.gray.100);
-  --vp-code-tab-active-text-color: theme(colors.gray.200);
-  --vp-code-tab-active-bar-color: theme(colors.accent.300);
-
+  --vp-code-block-bg: theme(colors.gray.900);
   --vp-c-switch-bg: theme(colors.black);
   --vp-c-switch-border: theme(colors.gray.600);
   --vp-c-switch-grabber-bg: theme(colors.gray.500);

docs/.vitepress/theme/styles/nr-doc.css

@@ -3,65 +3,16 @@
   dark:prose-invert dark:prose-a:text-accent-300 dark:hover:prose-a:text-accent-400;
 }
 
-.nr-doc h1,
-.nr-doc h2,
-.nr-doc h3,
-.nr-doc h4,
-.nr-doc h5,
-.nr-doc h6 {
-  position: relative;
-  outline: none;
-}
-
-.nr-doc .header-anchor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin-left: -0.87em;
-  font-weight: 500;
-  user-select: none;
-  opacity: 0;
-  text-decoration: none;
-  transition:
-    color 0.25s,
-    opacity 0.25s;
-}
-
-.nr-doc .header-anchor:before {
-  content: var(--vp-header-anchor-symbol);
-}
-
-.nr-doc h1:hover .header-anchor,
-.nr-doc h1 .header-anchor:focus,
-.nr-doc h2:hover .header-anchor,
-.nr-doc h2 .header-anchor:focus,
-.nr-doc h3:hover .header-anchor,
-.nr-doc h3 .header-anchor:focus,
-.nr-doc h4:hover .header-anchor,
-.nr-doc h4 .header-anchor:focus,
-.nr-doc h5:hover .header-anchor,
-.nr-doc h5 .header-anchor:focus,
-.nr-doc h6:hover .header-anchor,
-.nr-doc h6 .header-anchor:focus {
-  opacity: 1;
-}
-
 .nr-doc .header-anchor {
   float: left;
   margin-left: -0.87em;
   padding-right: 0.23em;
   font-weight: 500;
   user-select: none;
   opacity: 0;
-  transition:
-    color 0.25s,
-    opacity 0.25s;
+  transition: color 0.25s, opacity 0.25s;
 }
 
-/* .nr-doc h2 .header-anchor {
-  top: 24px;
-} */
-
 .nr-doc h1 > code,
 .nr-doc h2 > code,
 .nr-doc h3 > code {
@@ -176,16 +127,12 @@
 .nr-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   filter: blur(0.095rem);
   opacity: 0.4;
-  transition:
-    filter 0.35s,
-    opacity 0.35s;
+  transition: filter 0.35s, opacity 0.35s;
 }
 
 .nr-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   opacity: 0.7;
-  transition:
-    filter 0.35s,
-    opacity 0.35s;
+  transition: filter 0.35s, opacity 0.35s;
 }
 
 .nr-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
@@ -233,9 +180,7 @@
   line-height: var(--vp-code-line-height);
   font-size: var(--vp-code-font-size);
   color: var(--vp-code-line-number-color);
-  transition:
-    border-color 0.5s,
-    color 0.5s;
+  transition: border-color 0.5s, color 0.5s;
 }
 
 .nr-doc [class*='language-'] > button.copy {
@@ -246,6 +191,9 @@
   /*rtl:ignore*/
   right: 12px;
   z-index: 3;
+  display: block;
+  justify-content: center;
+  align-items: center;
   border: 1px solid var(--vp-code-copy-code-border-color);
   border-radius: 4px;
   width: 40px;
@@ -257,10 +205,7 @@
   background-position: 50%;
   background-size: 20px;
   background-repeat: no-repeat;
-  transition:
-    border-color 0.25s,
-    background-color 0.25s,
-    opacity 0.25s;
+  transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
 }
 
 .nr-doc [class*='language-']:hover > button.copy,
@@ -287,24 +232,23 @@
   position: relative;
   top: -1px;
   /*rtl:ignore*/
-  transform: translateX(calc(-100% - 1px));
+  left: -65px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid var(--vp-code-copy-code-hover-border-color);
   /*rtl:ignore*/
   border-right: 0;
   border-radius: 4px 0 0 4px;
-  padding: 0 10px;
-  width: fit-content;
+  width: 64px;
   height: 40px;
   text-align: center;
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
   white-space: nowrap;
-  content: var(--vp-code-copy-copied-text-content);
+  content: 'Copied';
 }
 
 .nr-doc [class*='language-'] > span.lang {
@@ -314,9 +258,4 @@
   right: 8px;
   z-index: 2;
   font-size: 12px;
-  font-weight: 500;
-  color: var(--vp-code-lang-color);
-  transition:
-    color 0.4s,
-    opacity 0.4s;
 }