@skyservice-developers/vue-dev-kit 1.5.4 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Vue 2 and Vue 3 developer toolkit - components and helpers",
   "type": "module",
   "main": "./dist/vue3/vue-dev-kit.cjs",

package/src/shared/types/index.d.ts

@@ -39,7 +39,6 @@ export interface DialogProps {
   subtitle?: string
   zIndex?: number | string
   closeText?: string
-  enableAnimation?: boolean
   closeOnEsc?: boolean
   mode?: 'next' | 'classic' | null
 }

package/src/styles/scrollbar.css

@@ -9,6 +9,7 @@
 
 ::-webkit-scrollbar-thumb {
   background: #c1c1c1;
+  border-radius: 0;
 }
 
 ::-webkit-scrollbar-thumb:hover {

package/src/vue2/components/Dialog.vue

@@ -6,7 +6,6 @@
     :subtitle="subtitle"
     :z-index="zIndex"
     :close-text="closeText"
-    :enable-animation="enableAnimation"
     :close-on-esc="closeOnEsc"
     :has-buttons="!!$slots.buttons"
     @close="$emit('close')"
@@ -50,10 +49,6 @@ export default {
       type: String,
       default: ''
     },
-    enableAnimation: {
-      type: Boolean,
-      default: false
-    },
     closeOnEsc: {
       type: Boolean,
       default: true

package/src/vue2/components/DialogModal.vue

@@ -1,14 +1,12 @@
 <template>
-  <transition :name="enableAnimation ? 'dialog-slide' : ''">
+  <div
+    v-if="modelValue"
+    class="sky-dialogbox sky-dialogbox-classic"
+    :style="[zIndex ? { 'z-index': zIndex } : null]"
+  >
     <div
-      v-if="modelValue"
-      class="sky-dialogbox sky-dialogbox-classic"
-      :style="[zIndex ? { 'z-index': zIndex } : null]"
+      class="sky-dialog-overlay"
     >
-      <div
-        class="sky-dialog-overlay"
-        :class="{ 'sky-dialog-animate': enableAnimation }"
-      >
         <div ref="dialogContent" class="sky-dialog-content">
           <!-- Header -->
           <div
@@ -61,14 +59,13 @@
           <div
             v-if="showFooter"
             class="sky-dialog-footer"
-            :class="{ 'sky-dialog-footer-animate': enableAnimation }"
           >
             <slot name="buttons"></slot>
           </div>
         </div>
       </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>
@@ -100,10 +97,6 @@ export default {
       type: String,
       default: "Закрити",
     },
-    enableAnimation: {
-      type: Boolean,
-      default: false,
-    },
     closeOnEsc: {
       type: Boolean,
       default: true,
@@ -431,46 +424,6 @@ export default {
   }
 }
 
-/* Animations */
-.sky-dialog-animate {
-  animation: sky-dialog-slide-in 0.4s ease-in-out;
-}
-
-.sky-dialog-footer-animate {
-  animation: sky-dialog-footer-in 0.4s ease-in-out;
-}
-
-@keyframes sky-dialog-slide-in {
-  0% {
-    opacity: 0;
-    margin-top: -1600px;
-  }
-  100% {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@keyframes sky-dialog-footer-in {
-  0% {
-    opacity: 0;
-    bottom: -100px;
-  }
-  50% {
-    opacity: 0.25;
-    bottom: -50px;
-  }
-  100% {
-    opacity: 1;
-    bottom: 15px;
-  }
-}
-
-/* Transition */
-.dialog-slide-leave-active {
-  animation: sky-dialog-slide-in 0.4s reverse;
-}
-
 /* iOS safe area */
 @supports (padding-top: env(safe-area-inset-top)) {
   .sky-dialog-title {

package/src/vue2/components/DialogNext.vue

@@ -1,11 +1,10 @@
 <template>
-  <transition :name="enableAnimation ? 'dialog-slide' : ''">
-    <div
-      v-if="modelValue"
-      class="sky-dialogbox sky-dialogbox-next"
-      :style="[zIndex ? { 'z-index': zIndex } : null]"
-    >
-      <div class="sky-dialog-overlay" :class="{ 'sky-dialog-animate': enableAnimation }">
+  <div
+    v-if="modelValue"
+    class="sky-dialogbox sky-dialogbox-next"
+    :style="[zIndex ? { 'z-index': zIndex } : null]"
+  >
+    <div class="sky-dialog-overlay">
         <div ref="dialogContent" class="sky-dialog-content">
           <!-- Header -->
           <div class="sky-dialog-header">
@@ -34,13 +33,13 @@
           </div>
 
           <!-- Footer -->
-          <div v-if="showFooter" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
+          <div v-if="showFooter" class="sky-dialog-footer">
             <slot name="buttons"></slot>
           </div>
         </div>
       </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>
@@ -69,10 +68,6 @@ export default {
       type: String,
       default: 'Назад'
     },
-    enableAnimation: {
-      type: Boolean,
-      default: false
-    },
     closeOnEsc: {
       type: Boolean,
       default: true
@@ -372,46 +367,6 @@ export default {
   }
 }
 
-/* Animations */
-.sky-dialog-animate {
-  animation: sky-dialog-slide-in 0.4s ease-in-out;
-}
-
-.sky-dialog-footer-animate {
-  animation: sky-dialog-footer-in 0.4s ease-in-out;
-}
-
-@keyframes sky-dialog-slide-in {
-  0% {
-    opacity: 0;
-    margin-top: -1600px;
-  }
-  100% {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@keyframes sky-dialog-footer-in {
-  0% {
-    opacity: 0;
-    bottom: -100px;
-  }
-  50% {
-    opacity: 0.25;
-    bottom: -50px;
-  }
-  100% {
-    opacity: 1;
-    bottom: 15px;
-  }
-}
-
-/* Transition */
-.dialog-slide-leave-active {
-  animation: sky-dialog-slide-in 0.4s reverse;
-}
-
 /* iOS safe area */
 @supports (padding-top: env(safe-area-inset-top)) {
   .sky-dialog-header {

package/src/vue2/components/Modal.vue

@@ -1,7 +1,6 @@
 <template>
-  <base-teleport to="body"> 
-    <transition>
-      <div v-if="isOpen" class="sky-modal-overlay" @click.self="handleOverlayClick">
+  <base-teleport to="body">
+    <div v-if="isOpen" class="sky-modal-overlay" @click.self="handleOverlayClick">
         <div class="sky-modal" :style="modalStyle">
           <div class="sky-modal-header">
             <button class="sky-modal-back" @click="close" :title="closeTitle">
@@ -24,7 +23,6 @@
           </div>
         </div>
       </div>
-    </transition>
   </base-teleport>
 </template>
 
@@ -232,30 +230,6 @@ export default {
   margin-left: 10px;
 }
 
-/* Animations */
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-fade-enter-active .sky-modal,
-.modal-fade-leave-active .sky-modal {
-  transition: transform 0.3s ease;
-}
-
-.modal-fade-enter,
-.modal-fade-leave-to {
-  opacity: 0;
-}
-
-.modal-fade-enter .sky-modal {
-  transform: translateY(-20px);
-}
-
-.modal-fade-leave-to .sky-modal {
-  transform: translateY(20px);
-}
-
 /* Responsive */
 @media (min-width: 768px) {
   .sky-modal {

package/src/vue3/components/Dialog.vue

@@ -6,7 +6,6 @@
     :subtitle="subtitle"
     :z-index="zIndex"
     :close-text="closeText"
-    :enable-animation="enableAnimation"
     :close-on-esc="closeOnEsc"
     :has-buttons="!!$slots.buttons"
     @close="$emit('close')"
@@ -45,10 +44,6 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  enableAnimation: {
-    type: Boolean,
-    default: false
-  },
   closeOnEsc: {
     type: Boolean,
     default: true

package/src/vue3/components/DialogModal.vue

@@ -1,15 +1,13 @@
 <template>
   <Teleport to="body">
-    <transition :name="enableAnimation ? 'dialog-slide' : ''">
+    <div
+      v-if="modelValue"
+      class="sky-dialogbox sky-dialogbox-classic"
+      :style="[zIndex ? { 'z-index': zIndex } : null]"
+    >
       <div
-        v-if="modelValue"
-        class="sky-dialogbox sky-dialogbox-classic"
-        :style="[zIndex ? { 'z-index': zIndex } : null]"
+        class="sky-dialog-overlay"
       >
-        <div
-          class="sky-dialog-overlay"
-          :class="{ 'sky-dialog-animate': enableAnimation }"
-        >
           <div ref="dialogContent" class="sky-dialog-content">
             <!-- Header -->
             <div
@@ -62,7 +60,6 @@
             <div
               v-if="showFooter"
               class="sky-dialog-footer"
-              :class="{ 'sky-dialog-footer-animate': enableAnimation }"
             >
               <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
               <slot name="buttons"></slot>
@@ -70,7 +67,6 @@
           </div>
         </div>
       </div>
-    </transition>
   </Teleport>
 </template>
 
@@ -112,10 +108,6 @@ const props = defineProps({
     type: String,
     default: "Закрити",
   },
-  enableAnimation: {
-    type: Boolean,
-    default: false,
-  },
   closeOnEsc: {
     type: Boolean,
     default: true,
@@ -451,46 +443,6 @@ onUnmounted(() => {
   }
 }
 
-/* Animations */
-.sky-dialog-animate {
-  animation: sky-dialog-slide-in 0.4s ease-in-out;
-}
-
-.sky-dialog-footer-animate {
-  animation: sky-dialog-footer-in 0.4s ease-in-out;
-}
-
-@keyframes sky-dialog-slide-in {
-  0% {
-    opacity: 0;
-    margin-top: -1600px;
-  }
-  100% {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@keyframes sky-dialog-footer-in {
-  0% {
-    opacity: 0;
-    bottom: -100px;
-  }
-  50% {
-    opacity: 0.25;
-    bottom: -50px;
-  }
-  100% {
-    opacity: 1;
-    bottom: 15px;
-  }
-}
-
-/* Transition */
-.dialog-slide-leave-active {
-  animation: sky-dialog-slide-in 0.4s reverse;
-}
-
 /* iOS safe area */
 @supports (padding-top: env(safe-area-inset-top)) {
   .sky-dialog-title {

package/src/vue3/components/DialogNext.vue

@@ -1,15 +1,13 @@
 <template>
   <Teleport to="body">
-    <transition :name="enableAnimation ? 'dialog-slide' : ''">
+    <div
+      v-if="modelValue"
+      class="sky-dialogbox sky-dialogbox-next"
+      :style="[zIndex ? { 'z-index': zIndex } : null]"
+    >
       <div
-        v-if="modelValue"
-        class="sky-dialogbox sky-dialogbox-next"
-        :style="[zIndex ? { 'z-index': zIndex } : null]"
+        class="sky-dialog-overlay"
       >
-        <div
-          class="sky-dialog-overlay"
-          :class="{ 'sky-dialog-animate': enableAnimation }"
-        >
           <div ref="dialogContent" class="sky-dialog-content">
             <!-- Header -->
             <div class="sky-dialog-header">
@@ -54,15 +52,13 @@
             <div
               v-if="showFooter"
               class="sky-dialog-footer"
-              :class="{ 'sky-dialog-footer-animate': enableAnimation }"
             >
               <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
               <slot name="buttons"></slot>
             </div>
           </div>
-        </div>
       </div>
-    </transition>
+    </div>
   </Teleport>
 </template>
 
@@ -104,10 +100,6 @@ const props = defineProps({
     type: String,
     default: "Назад",
   },
-  enableAnimation: {
-    type: Boolean,
-    default: false,
-  },
   closeOnEsc: {
     type: Boolean,
     default: true,
@@ -423,46 +415,6 @@ onUnmounted(() => {
   }
 }
 
-/* Animations */
-.sky-dialog-animate {
-  animation: sky-dialog-slide-in 0.4s ease-in-out;
-}
-
-.sky-dialog-footer-animate {
-  animation: sky-dialog-footer-in 0.4s ease-in-out;
-}
-
-@keyframes sky-dialog-slide-in {
-  0% {
-    opacity: 0;
-    margin-top: -1600px;
-  }
-  100% {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@keyframes sky-dialog-footer-in {
-  0% {
-    opacity: 0;
-    bottom: -100px;
-  }
-  50% {
-    opacity: 0.25;
-    bottom: -50px;
-  }
-  100% {
-    opacity: 1;
-    bottom: 15px;
-  }
-}
-
-/* Transition */
-.dialog-slide-leave-active {
-  animation: sky-dialog-slide-in 0.4s reverse;
-}
-
 /* iOS safe area */
 @supports (padding-top: env(safe-area-inset-top)) {
   .sky-dialog-header {

package/src/vue3/components/Modal.vue

@@ -1,11 +1,10 @@
 <template>
   <BaseTeleport to="body">
-    <transition>
-      <div
-        v-if="modelValue"
-        class="sky-modal-overlay"
-        @click.self="handleOverlayClick"
-      >
+    <div
+      v-if="modelValue"
+      class="sky-modal-overlay"
+      @click.self="handleOverlayClick"
+    >
         <div class="sky-modal" :style="modalStyle">
           <div class="sky-modal-header">
             <button class="sky-modal-back" @click="close" :title="closeTitle">
@@ -41,7 +40,6 @@
           </div>
         </div>
       </div>
-    </transition>
   </BaseTeleport>
 </template>
 
@@ -233,30 +231,6 @@ onUnmounted(() => {
   margin-left: 10px;
 }
 
-/* Animations */
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-fade-enter-active .sky-modal,
-.modal-fade-leave-active .sky-modal {
-  transition: transform 0.3s ease;
-}
-
-.modal-fade-enter-from,
-.modal-fade-leave-to {
-  opacity: 0;
-}
-
-.modal-fade-enter-from .sky-modal {
-  transform: translateY(-20px);
-}
-
-.modal-fade-leave-to .sky-modal {
-  transform: translateY(20px);
-}
-
 /* Responsive */
 @media (min-width: 768px) {
   .sky-modal {