@skyservice-developers/vue-dev-kit 1.5.5 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "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
 }
@@ -56,3 +55,17 @@ export interface DialogEmits {
 }
 
 export declare const Dialog: DefineComponent<DialogProps>
+
+// Button component
+export interface ButtonProps {
+  variant?: 'primary' | 'danger' | 'secondary' | 'outline'
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+}
+
+export interface ButtonSlots {
+  'default'?: () => any
+}
+
+export declare const Button: DefineComponent<ButtonProps>

package/src/vue2/components/Button.vue

@@ -0,0 +1,128 @@
+<template>
+  <button
+    class="sky-btn"
+    :class="[`sky-btn-${variant}`, { 'sky-btn-block': block, 'sky-btn-loading': loading }]"
+    :disabled="disabled || loading"
+    v-bind="$attrs"
+  >
+    <span v-if="loading" class="sky-btn-spinner"></span>
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: 'primary',
+      validator: (v) => ['primary', 'danger', 'secondary', 'outline'].includes(v)
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    block: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sky-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: var(--sky-btn-padding, 16px 20px);
+  border: var(--sky-btn-border, none);
+  border-radius: var(--sky-btn-radius, 6px);
+  font-size: var(--sky-btn-font-size, 14px);
+  font-weight: var(--sky-btn-font-weight, 500);
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sky-btn-block {
+  width: 100%;
+}
+
+.sky-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.sky-btn-primary {
+  background: var(--sky-btn-primary-bg, #24973f);
+  color: var(--sky-btn-primary-color, #fff);
+}
+.sky-btn-primary:hover:not(:disabled) {
+  background: var(--sky-btn-primary-hover-bg, #1e7a33);
+}
+.sky-btn-primary:active:not(:disabled) {
+  background: var(--sky-btn-primary-active-bg, #196b2c);
+}
+
+/* Danger */
+.sky-btn-danger {
+  background: var(--sky-btn-danger-bg, #dc2626);
+  color: var(--sky-btn-danger-color, #fff);
+}
+.sky-btn-danger:hover:not(:disabled) {
+  background: var(--sky-btn-danger-hover-bg, #b91c1c);
+}
+.sky-btn-danger:active:not(:disabled) {
+  background: var(--sky-btn-danger-active-bg, #991b1b);
+}
+
+/* Secondary */
+.sky-btn-secondary {
+  background: var(--sky-btn-secondary-bg, #f3f4f6);
+  color: var(--sky-btn-secondary-color, #374151);
+}
+.sky-btn-secondary:hover:not(:disabled) {
+  background: var(--sky-btn-secondary-hover-bg, #e5e7eb);
+}
+.sky-btn-secondary:active:not(:disabled) {
+  background: var(--sky-btn-secondary-active-bg, #d1d5db);
+}
+
+/* Outline */
+.sky-btn-outline {
+  background: var(--sky-btn-outline-bg, transparent);
+  color: var(--sky-btn-outline-color, #374151);
+  border: var(--sky-btn-border, 1px solid #d1d5db);
+}
+.sky-btn-outline:hover:not(:disabled) {
+  background: var(--sky-btn-outline-hover-bg, #f3f4f6);
+}
+.sky-btn-outline:active:not(:disabled) {
+  background: var(--sky-btn-outline-active-bg, #e5e7eb);
+}
+
+/* Loading spinner */
+.sky-btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: sky-btn-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes sky-btn-spin {
+  to { transform: rotate(360deg); }
+}
+</style>

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/vue2/components/index.js

@@ -1,5 +1,5 @@
 export { default as Header } from './Header.vue'
 export { default as Modal } from './Modal.vue'
 export { default as Dialog } from './Dialog.vue'
-
-export {default as BaseTeleport} from './BaseTeleport.vue'
+export { default as Button } from './Button.vue'
+export { default as BaseTeleport } from './BaseTeleport.vue'

package/src/vue3/components/Button.vue

@@ -0,0 +1,124 @@
+<template>
+  <button
+    class="sky-btn"
+    :class="[`sky-btn-${variant}`, { 'sky-btn-block': block, 'sky-btn-loading': loading }]"
+    :disabled="disabled || loading"
+    v-bind="$attrs"
+  >
+    <span v-if="loading" class="sky-btn-spinner"></span>
+    <slot></slot>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['primary', 'danger', 'secondary', 'outline'].includes(v)
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  block: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped>
+.sky-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: var(--sky-btn-padding, 16px 20px);
+  border: var(--sky-btn-border, none);
+  border-radius: var(--sky-btn-radius, 6px);
+  font-size: var(--sky-btn-font-size, 14px);
+  font-weight: var(--sky-btn-font-weight, 500);
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sky-btn-block {
+  width: 100%;
+}
+
+.sky-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.sky-btn-primary {
+  background: var(--sky-btn-primary-bg, #24973f);
+  color: var(--sky-btn-primary-color, #fff);
+}
+.sky-btn-primary:hover:not(:disabled) {
+  background: var(--sky-btn-primary-hover-bg, #1e7a33);
+}
+.sky-btn-primary:active:not(:disabled) {
+  background: var(--sky-btn-primary-active-bg, #196b2c);
+}
+
+/* Danger */
+.sky-btn-danger {
+  background: var(--sky-btn-danger-bg, #dc2626);
+  color: var(--sky-btn-danger-color, #fff);
+}
+.sky-btn-danger:hover:not(:disabled) {
+  background: var(--sky-btn-danger-hover-bg, #b91c1c);
+}
+.sky-btn-danger:active:not(:disabled) {
+  background: var(--sky-btn-danger-active-bg, #991b1b);
+}
+
+/* Secondary */
+.sky-btn-secondary {
+  background: var(--sky-btn-secondary-bg, #f3f4f6);
+  color: var(--sky-btn-secondary-color, #374151);
+}
+.sky-btn-secondary:hover:not(:disabled) {
+  background: var(--sky-btn-secondary-hover-bg, #e5e7eb);
+}
+.sky-btn-secondary:active:not(:disabled) {
+  background: var(--sky-btn-secondary-active-bg, #d1d5db);
+}
+
+/* Outline */
+.sky-btn-outline {
+  background: var(--sky-btn-outline-bg, transparent);
+  color: var(--sky-btn-outline-color, #374151);
+  border: var(--sky-btn-border, 1px solid #d1d5db);
+}
+.sky-btn-outline:hover:not(:disabled) {
+  background: var(--sky-btn-outline-hover-bg, #f3f4f6);
+}
+.sky-btn-outline:active:not(:disabled) {
+  background: var(--sky-btn-outline-active-bg, #e5e7eb);
+}
+
+/* Loading spinner */
+.sky-btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: sky-btn-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes sky-btn-spin {
+  to { transform: rotate(360deg); }
+}
+</style>

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 {