@skyservice-developers/vue-dev-kit 1.5.12 → 2.1.0

package/src/vue3/components/Modal.vue

@@ -1,253 +0,0 @@
-<template>
-  <BaseTeleport to="body">
-    <div
-      v-if="modelValue"
-      class="sky-modal-overlay"
-      @mousedown.self="handleOverlayClick"
-    >
-        <div class="sky-modal" :style="modalStyle">
-          <div class="sky-modal-header">
-            <button class="sky-modal-back" @click="close" :title="closeTitle">
-              <svg
-                width="15"
-                height="15"
-                viewBox="0 0 451.847 451.847"
-                style="transform: rotate(90deg)"
-              >
-                <path
-                  fill="currentColor"
-                  d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
-                />
-              </svg>
-            </button>
-            <div class="sky-modal-title-wrapper">
-              <h4 class="sky-modal-title">{{ title }}</h4>
-              <div v-if="subtitle" class="sky-modal-subtitle">
-                {{ subtitle }}
-              </div>
-            </div>
-          </div>
-
-          <div class="sky-modal-body">
-            <slot></slot>
-          </div>
-
-          <div v-if="$slots.footer" class="sky-modal-footer">
-            <!-- Порожні блоки ремонтують відображення на windows в додатку, не видаляти! -->
-            <div></div>
-            <slot name="footer"></slot>
-            <div></div>
-          </div>
-        </div>
-      </div>
-  </BaseTeleport>
-</template>
-
-<script setup>
-import { computed, watch, onMounted, onUnmounted } from "vue";
-import BaseTeleport from "./BaseTeleport.vue";
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  subtitle: {
-    type: String,
-    default: "",
-  },
-  closeTitle: {
-    type: String,
-    default: "Закрити",
-  },
-  closeOnOverlay: {
-    type: Boolean,
-    default: true,
-  },
-  closeOnEsc: {
-    type: Boolean,
-    default: true,
-  },
-  width: {
-    type: String,
-    default: "100%",
-  },
-  height: {
-    type: String,
-    default: "100%",
-  },
-});
-
-const emit = defineEmits(["update:modelValue", "close"]);
-
-const modalStyle = computed(() => ({
-  width: props.width,
-  height: props.height,
-}));
-
-const close = () => {
-  emit("update:modelValue", false);
-  emit("close");
-};
-
-const handleOverlayClick = () => {
-  if (props.closeOnOverlay) {
-    close();
-  }
-};
-
-const handleKeydown = (e) => {
-  if (e.key === "Escape" && props.closeOnEsc && props.modelValue) {
-    close();
-  }
-};
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    if (value) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-  },
-);
-
-onMounted(() => {
-  document.addEventListener("keydown", handleKeydown);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("keydown", handleKeydown);
-  document.body.style.overflow = "";
-});
-</script>
-
-<style scoped>
-.sky-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(2px);
-  z-index: var(--sky-modal-z-index, 9998);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.sky-modal {
-  background: var(--sky-modal-bg, white);
-  border-radius: var(--sky-modal-radius, 0);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.sky-modal-header {
-  display: flex;
-  align-items: center;
-  padding: var(--sky-modal-header-padding, 10px 14px);
-  border-bottom: 1px solid var(--sky-modal-border-color, #dee2e6);
-  flex-shrink: 0;
-}
-
-.sky-modal-back {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background-color 0.2s;
-  color: var(--sky-modal-back-color, #374151);
-  margin-right: 12px;
-}
-
-.sky-modal-back svg {
-  display: block;
-}
-
-.sky-modal-back:hover {
-  background-color: var(--sky-modal-back-hover-bg, #f8f9fa);
-}
-
-.sky-modal-back:active {
-  background-color: var(--sky-modal-back-active-bg, #e9ecef);
-}
-
-.sky-modal-title-wrapper {
-  flex: 1;
-  min-width: 0;
-}
-
-.sky-modal-title {
-  margin: 0;
-  font-size: var(--sky-modal-title-size, 18px);
-  font-weight: var(--sky-modal-title-weight, 500);
-  color: var(--sky-modal-title-color, #252525);
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sky-modal-subtitle {
-  font-size: var(--sky-modal-subtitle-size, 14px);
-  color: var(--sky-modal-subtitle-color, #6c757d);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sky-modal-body {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--sky-modal-body-padding, 14px);
-}
-
-.sky-modal-footer {
-  padding: var(--sky-modal-footer-padding, 10px 14px);
-  border-top: 1px solid var(--sky-modal-border-color, #dee2e6);
-  display: flex;
-  justify-content: flex-end;
-  flex-shrink: 0;
-}
-
-.sky-modal-footer > * + * {
-  margin-left: 10px;
-}
-
-/* Responsive */
-@media (min-width: 768px) {
-  .sky-modal {
-    border-radius: var(--sky-modal-radius, 8px);
-  }
-}
-
-/* iOS safe area */
-@supports (padding-top: env(safe-area-inset-top)) {
-  .sky-modal-header {
-    padding-top: calc(10px + env(safe-area-inset-top));
-  }
-  .sky-modal-footer {
-    padding-bottom: calc(10px + env(safe-area-inset-bottom));
-  }
-  .sky-modal-body:last-child {
-    padding-bottom: calc(14px + env(safe-area-inset-bottom));
-  }
-}
-</style>

package/src/vue3/components/SkyButton.vue

@@ -1,140 +0,0 @@
-<template>
-  <button
-    class="sky-btn"
-    :class="[
-      `sky-btn-${variant}`,
-      {
-        'sky-btn-block': block,
-        'sky-btn-loading': loading,
-        'sky-btn-icon': icon,
-      }
-    ]"
-    :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
-  },
-  icon: {
-    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-icon {
-  padding: var(--sky-btn-icon-padding, 10px);
-  border-radius: var(--sky-btn-icon-radius, 6px);
-}
-
-.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/SkySelect.vue

@@ -1,266 +0,0 @@
-<template>
-  <div
-    ref="root"
-    class="sky-select"
-    :class="{
-      'sky-select-block': block,
-      'sky-select-open': open,
-      'sky-select-disabled': disabled,
-    }"
-  >
-    <button
-      type="button"
-      class="sky-select-trigger"
-      :disabled="disabled"
-      @click="toggle"
-      @keydown="onKeydown"
-    >
-      <span
-        class="sky-select-value"
-        :class="{ 'sky-select-placeholder': selectedOption === null }"
-      >
-        {{ selectedOption ? selectedOption.label : placeholder }}
-      </span>
-      <svg class="sky-select-chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </button>
-
-    <div v-if="open" class="sky-select-dropdown">
-      <div
-        v-for="(option, idx) in normalizedOptions"
-        :key="option.value"
-        class="sky-select-option"
-        :class="{
-          'sky-select-option-selected': option.value === modelValue,
-          'sky-select-option-focused': idx === focusedIdx,
-        }"
-        @click="select(option)"
-        @mouseenter="focusedIdx = idx"
-      >
-        <span>{{ option.label }}</span>
-        <svg v-if="option.value === modelValue" class="sky-select-check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onBeforeUnmount } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    default: null,
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  block: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const root = ref(null);
-const open = ref(false);
-const focusedIdx = ref(-1);
-
-const normalizedOptions = computed(() =>
-  props.options.map((opt) =>
-    typeof opt === 'string' ? { label: opt, value: opt } : opt
-  )
-);
-
-const selectedOption = computed(() =>
-  normalizedOptions.value.find((o) => o.value === props.modelValue) ?? null
-);
-
-function toggle() {
-  if (props.disabled) return;
-  open.value ? close() : openDropdown();
-}
-
-function openDropdown() {
-  open.value = true;
-  focusedIdx.value = normalizedOptions.value.findIndex((o) => o.value === props.modelValue);
-  document.addEventListener('mousedown', onOutsideClick);
-}
-
-function close() {
-  open.value = false;
-  document.removeEventListener('mousedown', onOutsideClick);
-}
-
-function select(option) {
-  emit('update:modelValue', option.value);
-  close();
-}
-
-function onOutsideClick(e) {
-  if (!root.value?.contains(e.target)) close();
-}
-
-function onKeydown(e) {
-  if (!open.value) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      openDropdown();
-    }
-    return;
-  }
-  if (e.key === 'Escape') {
-    close();
-  } else if (e.key === 'ArrowDown') {
-    e.preventDefault();
-    focusedIdx.value = Math.min(focusedIdx.value + 1, normalizedOptions.value.length - 1);
-  } else if (e.key === 'ArrowUp') {
-    e.preventDefault();
-    focusedIdx.value = Math.max(focusedIdx.value - 1, 0);
-  } else if (e.key === 'Enter') {
-    e.preventDefault();
-    if (focusedIdx.value >= 0) select(normalizedOptions.value[focusedIdx.value]);
-  }
-}
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousedown', onOutsideClick);
-});
-</script>
-
-<style scoped>
-.sky-select {
-  position: relative;
-  display: inline-block;
-  font-size: var(--sky-select-font-size, 14px);
-}
-
-.sky-select-block {
-  display: block;
-  width: 100%;
-}
-
-.sky-select-block .sky-select-trigger {
-  width: 100%;
-}
-
-/* Trigger */
-.sky-select-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: var(--sky-select-padding, 10px 14px);
-  background: var(--sky-select-bg, #fff);
-  border: var(--sky-select-border, 1px solid #d1d5db);
-  border-radius: var(--sky-select-radius, 6px);
-  font-size: inherit;
-  font-weight: var(--sky-select-font-weight, 400);
-  color: var(--sky-select-color, #374151);
-  cursor: pointer;
-  user-select: none;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.sky-select-trigger:hover:not(:disabled) {
-  border-color: var(--sky-select-border-hover, #9ca3af);
-}
-
-.sky-select-open .sky-select-trigger {
-  border-color: var(--sky-select-border-focus, #6b7280);
-  outline: none;
-}
-
-.sky-select-trigger:focus-visible {
-  outline: 2px solid var(--sky-select-focus-ring, #24973f);
-  outline-offset: 2px;
-}
-
-.sky-select-disabled .sky-select-trigger {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Value / Placeholder */
-.sky-select-value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  min-width: 0;
-}
-
-.sky-select-placeholder {
-  color: var(--sky-select-placeholder-color, #9ca3af);
-}
-
-/* Chevron */
-.sky-select-chevron {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--sky-select-chevron-color, #6b7280);
-  transition: transform 0.15s ease;
-}
-
-.sky-select-open .sky-select-chevron {
-  transform: rotate(180deg);
-}
-
-/* Dropdown */
-.sky-select-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: var(--sky-select-dropdown-z-index, 100);
-  background: var(--sky-select-dropdown-bg, #fff);
-  border: var(--sky-select-dropdown-border, 1px solid #d1d5db);
-  border-radius: var(--sky-select-dropdown-radius, 6px);
-  box-shadow: var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
-  max-height: var(--sky-select-dropdown-max-height, 220px);
-  overflow-y: auto;
-  padding: 4px;
-}
-
-/* Option */
-.sky-select-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sky-select-option-padding, 9px 10px);
-  border-radius: var(--sky-select-option-radius, 4px);
-  cursor: pointer;
-  color: var(--sky-select-option-color, #374151);
-}
-
-.sky-select-option-focused,
-.sky-select-option:hover {
-  background: var(--sky-select-option-hover-bg, #f3f4f6);
-}
-
-.sky-select-option-selected {
-  color: var(--sky-select-option-selected-color, #24973f);
-  font-weight: 500;
-}
-
-.sky-select-check {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  color: var(--sky-select-check-color, #24973f);
-}
-</style>

package/src/vue3/components/index.js

@@ -1,8 +0,0 @@
-export { default as Header } from './Header.vue'
-export { default as Dialog } from './Dialog.vue'
-export { default as Modal } from './Modal.vue'
-export { default as SkyButton } from './SkyButton.vue'
-export { default as SkySelect } from './SkySelect.vue'
-export { default as BaseTeleport } from './BaseTeleport.vue'
-
-

package/src/vue3/index.js

@@ -1,2 +0,0 @@
-export * from './components'
-import '../styles/scrollbar.css'