@skyservice-developers/vue-dev-kit 1.5.11 → 2.0.0

package/src/vue2/components/SkyButton.vue

@@ -1,144 +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>
-export default {
-  name: 'SkyButton',
-  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
-    },
-    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/vue2/components/SkySelect.vue

@@ -1,327 +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>
-
-    <template v-if="open">
-      <portal v-if="teleport" to="sky-select-portal">
-        <div
-          class="sky-select-dropdown sky-select-dropdown-teleported"
-          :style="dropdownStyle"
-        >
-          <div
-            v-for="(option, idx) in normalizedOptions"
-            :key="option.value"
-            class="sky-select-option"
-            :class="{
-              'sky-select-option-selected': option.value === value,
-              'sky-select-option-focused': idx === focusedIdx,
-            }"
-            @click="select(option)"
-            @mouseenter="focusedIdx = idx"
-          >
-            <span>{{ option.label }}</span>
-            <svg v-if="option.value === value" 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>
-      </portal>
-      <div v-else 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 === value,
-            'sky-select-option-focused': idx === focusedIdx,
-          }"
-          @click="select(option)"
-          @mouseenter="focusedIdx = idx"
-        >
-          <span>{{ option.label }}</span>
-          <svg v-if="option.value === value" 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>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SkySelect',
-  inheritAttrs: false,
-  props: {
-    value: {
-      default: null,
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    block: {
-      type: Boolean,
-      default: false,
-    },
-    teleport: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      open: false,
-      focusedIdx: -1,
-      dropdownStyle: {},
-    };
-  },
-  computed: {
-    normalizedOptions() {
-      return this.options.map((opt) =>
-        typeof opt === 'string' ? { label: opt, value: opt } : opt
-      );
-    },
-    selectedOption() {
-      return this.normalizedOptions.find((o) => o.value === this.value) ?? null;
-    },
-  },
-  methods: {
-    calcDropdownStyle() {
-      if (!this.teleport || !this.$refs.root) return;
-      const rect = this.$refs.root.getBoundingClientRect();
-      this.dropdownStyle = {
-        position: 'fixed',
-        top: `${rect.bottom + 4}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        zIndex: 'var(--sky-select-dropdown-z-index, 9999)',
-      };
-    },
-    toggle() {
-      if (this.disabled) return;
-      this.open ? this.close() : this.openDropdown();
-    },
-    openDropdown() {
-      this.open = true;
-      this.focusedIdx = this.normalizedOptions.findIndex((o) => o.value === this.value);
-      this.calcDropdownStyle();
-      this.$nextTick(() => document.addEventListener('mousedown', this.onOutsideClick));
-      if (this.teleport) {
-        window.addEventListener('scroll', this.onScrollOrResize, true);
-        window.addEventListener('resize', this.onScrollOrResize);
-      }
-    },
-    close() {
-      this.open = false;
-      document.removeEventListener('mousedown', this.onOutsideClick);
-      window.removeEventListener('scroll', this.onScrollOrResize, true);
-      window.removeEventListener('resize', this.onScrollOrResize);
-    },
-    select(option) {
-      this.$emit('input', option.value);
-      this.close();
-    },
-    onOutsideClick(e) {
-      if (!this.$refs.root.contains(e.target)) this.close();
-    },
-    onScrollOrResize() {
-      this.calcDropdownStyle();
-    },
-    onKeydown(e) {
-      if (!this.open) {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          this.openDropdown();
-        }
-        return;
-      }
-      if (e.key === 'Escape') {
-        this.close();
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        this.focusedIdx = Math.min(this.focusedIdx + 1, this.normalizedOptions.length - 1);
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        this.focusedIdx = Math.max(this.focusedIdx - 1, 0);
-      } else if (e.key === 'Enter') {
-        e.preventDefault();
-        if (this.focusedIdx >= 0) this.select(this.normalizedOptions[this.focusedIdx]);
-      }
-    },
-  },
-  beforeDestroy() {
-    document.removeEventListener('mousedown', this.onOutsideClick);
-    window.removeEventListener('scroll', this.onScrollOrResize, true);
-    window.removeEventListener('resize', this.onScrollOrResize);
-  },
-};
-</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;
-}
-
-.sky-select-dropdown-teleported {
-  position: fixed;
-  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/vue2/components/index.js

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

package/src/vue2/index.js

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

package/src/vue3/components/BaseTeleport.vue

@@ -1,16 +0,0 @@
-<template>
-  <teleport :to="to">
-    <slot />
-  </teleport>
-</template>
-
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: 'body',
-    },
-  },
-}
-</script>

package/src/vue3/components/Dialog.vue

@@ -1,97 +0,0 @@
-<template>
-  <component
-    :is="dialogComponent"
-    v-model="isOpen"
-    :title="title"
-    :subtitle="subtitle"
-    :z-index="zIndex"
-    :close-text="closeText"
-    :close-on-esc="closeOnEsc"
-    :has-buttons="!!$slots.buttons"
-    @close="$emit('close')"
-    @save="$emit('save')"
-  >
-    <slot></slot>
-    <template v-if="$slots.buttons" #buttons>
-      <slot name="buttons"></slot>
-    </template>
-  </component>
-</template>
-
-<script setup>
-import { computed, ref, onMounted } from 'vue'
-import DialogModal from './DialogModal.vue'
-import DialogNext from './DialogNext.vue'
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  title: {
-    type: String,
-    default: ''
-  },
-  subtitle: {
-    type: String,
-    default: ''
-  },
-  zIndex: {
-    type: [Number, String],
-    default: null
-  },
-  closeText: {
-    type: String,
-    default: ''
-  },
-  closeOnEsc: {
-    type: Boolean,
-    default: true
-  },
-  // Force specific mode (overrides URL parameter)
-  mode: {
-    type: String,
-    default: null, // 'next' | 'classic' | null (auto-detect)
-    validator: (value) => [null, 'next', 'classic'].includes(value)
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'close', 'save'])
-
-const isOpen = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
-
-// Detect rocketMode from URL
-const rocketMode = ref(true) // default to DialogNext
-
-onMounted(() => {
-  try {
-    const urlParams = new URLSearchParams(window.location.search)
-    const rocketParam = urlParams.get('rocketMode')
-
-    if (rocketParam === 'false') {
-      rocketMode.value = false
-    } else {
-      // true or not specified = DialogNext
-      rocketMode.value = true
-    }
-  } catch {
-    rocketMode.value = true
-  }
-})
-
-const dialogComponent = computed(() => {
-  // If mode is explicitly set, use it
-  if (props.mode === 'next') {
-    return DialogNext
-  }
-  if (props.mode === 'classic') {
-    return DialogModal
-  }
-
-  // Auto-detect based on URL parameter
-  return rocketMode.value ? DialogNext : DialogModal
-})
-</script>