@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiDialog/MarketplaceHeaderExample.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, type Slot } from 'vue'
-
-interface UiDialogMarketplaceHeaderProps {
-  icon?: string
-  logo?: string
-  title: string
-  description?: string
-  gradientColor?: string
-  images?: string[]
-}
-
-const props = withDefaults(defineProps<UiDialogMarketplaceHeaderProps>(), {
-  icon: undefined,
-  logo: undefined,
-  description: undefined,
-  gradientColor: '#0b42c3', // Default primary color
-  images: () => [],
-})
-
-defineSlots<{
-  switch(): Slot
-  carousel(): Slot
-}>()
-
-// Convert hex to HSL for gradient
-const hexToHSL = (hex: string) => {
-  // Remove # if present
-  const sanitizedHex = hex.replace('#', '')
-
-  // Convert hex to RGB
-  const r = Number.parseInt(sanitizedHex.substring(0, 2), 16) / 255
-  const g = Number.parseInt(sanitizedHex.substring(2, 4), 16) / 255
-  const b = Number.parseInt(sanitizedHex.substring(4, 6), 16) / 255
-
-  const max = Math.max(r, g, b)
-  const min = Math.min(r, g, b)
-  let h = 0
-
-  if (max !== min) {
-    const d = max - min
-    if (max === r) {
-      h = ((g - b) / d + (g < b ? 6 : 0)) / 6
-    } else if (max === g) {
-      h = ((b - r) / d + 2) / 6
-    } else {
-      h = ((r - g) / d + 4) / 6
-    }
-  }
-
-  return Math.round(h * 360)
-}
-
-const hue = computed(() => hexToHSL(props.gradientColor))
-
-// Current image index for simple carousel
-const currentImageIndex = ref(0)
-
-const hasImages = computed(() => props.images.length > 0)
-
-const nextImage = () => {
-  if (props.images.length > 0) {
-    currentImageIndex.value = (currentImageIndex.value + 1) % props.images.length
-  }
-}
-
-const prevImage = () => {
-  if (props.images.length > 0) {
-    currentImageIndex.value = (currentImageIndex.value - 1 + props.images.length) % props.images.length
-  }
-}
-
-const goToImage = (index: number) => {
-  currentImageIndex.value = index
-}
-</script>
-
-<template>
-  <div
-    class="py-16 max-sm:py-8 flex transition-all duration-100 ease-in items-center custom-gradient bg-no-repeat bg-left-bottom"
-  >
-    <div class="w-full flex items-center relative">
-      <div class="grid grid-cols-1 md:grid-cols-[280px_1fr] w-full px-8 lg:px-16 gap-8">
-        <!-- Left side: Icon/Logo + Title + Description + Switch -->
-        <div class="flex flex-col justify-center w-full">
-          <div class="flex flex-col flex-wrap gap-4 w-full">
-            <!-- Icon -->
-            <div
-              v-if="icon"
-              class="w-12 h-12 grid place-items-center bg-cover bg-center bg-no-repeat rounded-full bg-surface-primary-alpha-100"
-            >
-              <span :class="[icon, 'text-2xl text-text-primary-base']" />
-            </div>
-
-            <!-- Logo -->
-            <div
-              v-else-if="logo"
-              class="w-12 h-12 flex-none bg-center bg-contain bg-no-repeat rounded-full"
-              :style="{ backgroundImage: `url(${logo})` }"
-            />
-
-            <!-- Title and Description -->
-            <div class="flex flex-col gap-2 flex-1 min-w-0">
-              <h2 class="text-text-neutral-base text-title-md-bold">
-                {{ title }}
-              </h2>
-              <p
-                v-if="description"
-                class="text-text-neutral-secondary text-content-text-lg-regular"
-              >
-                {{ description }}
-              </p>
-            </div>
-
-            <!-- Switch/Toggle Slot -->
-            <div
-              v-if="$slots.switch"
-              class="transition-all duration-400 ease-in-out"
-            >
-              <slot name="switch" />
-            </div>
-          </div>
-        </div>
-
-        <!-- Right side: Carousel or custom content -->
-        <div class="w-full grid place-items-center">
-          <div class="grid relative place-items-center pt-8 lg:pt-0">
-            <!-- Custom carousel slot -->
-            <slot name="carousel">
-              <!-- Default carousel implementation -->
-              <div
-                v-if="hasImages"
-                class="relative w-full aspect-video bg-surface-neutral-alpha-100 rounded-lg overflow-hidden"
-              >
-                <!-- Images -->
-                <TransitionGroup name="fade">
-                  <img
-                    v-for="(image, index) in images"
-                    v-show="index === currentImageIndex"
-                    :key="image"
-                    :src="image"
-                    :alt="`Screenshot ${index + 1}`"
-                    class="absolute inset-0 w-full h-full object-cover"
-                  >
-                </TransitionGroup>
-
-                <!-- Navigation arrows -->
-                <button
-                  v-if="images.length > 1"
-                  class="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-surface-neutral-bg-main/80 backdrop-blur-xs flex items-center justify-center hover:bg-surface-neutral-bg-main transition-colors"
-                  @click="prevImage"
-                >
-                  <span class="i-ph-caret-left w-4 h-4 text-text-neutral-base" />
-                </button>
-                <button
-                  v-if="images.length > 1"
-                  class="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-surface-neutral-bg-main/80 backdrop-blur-xs flex items-center justify-center hover:bg-surface-neutral-bg-main transition-colors"
-                  @click="nextImage"
-                >
-                  <span class="i-ph-caret-right w-4 h-4 text-text-neutral-base" />
-                </button>
-
-                <!-- Dots indicator -->
-                <div
-                  v-if="images.length > 1"
-                  class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2"
-                >
-                  <button
-                    v-for="(_, index) in images"
-                    :key="index"
-                    :class="[
-                      'w-2 h-2 rounded-full transition-all',
-                      index === currentImageIndex
-                        ? 'bg-surface-neutral-bg-main w-6'
-                        : 'bg-surface-neutral-bg-main/50',
-                    ]"
-                    @click="goToImage(index)"
-                  />
-                </div>
-              </div>
-
-              <!-- Placeholder when no images -->
-              <div
-                v-else
-                class="w-full aspect-video min-h-[288px] bg-surface-neutral-alpha-100 rounded-lg flex items-center justify-center"
-              >
-                <span class="text-text-neutral-tertiary text-content-text-md-regular">
-                  Integration Screenshots
-                </span>
-              </div>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.custom-gradient {
-  background:
-    radial-gradient(57.62% 57.62% at 8.3% 63.87%, hsla(v-bind(hue), 89%, 61%, 0.2) 0%, hsla(v-bind(hue), 71%, 99%, 0) 100%),
-    radial-gradient(45.83% 45.83% at 93.65% 51.82%, hsla(v-bind(hue), 89%, 61%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 100%),
-    linear-gradient(0deg, #FFFFFF, #FFFFFF);
-  background-attachment: fixed;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

package/src/components/UiDialog/index.ts

@@ -1,18 +0,0 @@
-// UiDialog exports
-export { default as UiDialog } from './UiDialog.vue'
-export { default as UiDialogTrigger } from './UiDialogTrigger.vue'
-export { default as UiDialogContent } from './UiDialogContent.vue'
-export { default as UiDialogFooter } from './UiDialogFooter.vue'
-export { default as UiDialogClose } from './UiDialogClose.vue'
-export { default as UiDialogMarketplaceHeader } from './MarketplaceHeaderExample.vue'
-
-// Re-export useful Reka UI types and components for advanced usage
-export {
-  DialogClose,
-  DialogDescription,
-  DialogTitle,
-  type DialogRootProps,
-  type DialogRootEmits,
-  type DialogContentProps,
-  type DialogContentEmits,
-} from 'reka-ui'

package/src/components/UiFieldWrapper/index.ts

@@ -1 +0,0 @@
-export { default as UiFieldWrapper } from './UiFieldWrapper.vue'

package/src/components/UiInputCheckbox/index.ts

@@ -1,2 +0,0 @@
-export { default as UiInputCheckbox } from './UiInputCheckbox.vue'
-export type { CheckboxSize } from './types'

package/src/components/UiInputEmoji/index.ts

@@ -1 +0,0 @@
-export { default as UiInputEmoji } from './UiInputEmoji.vue'

package/src/components/UiInputRadio/index.ts

@@ -1,3 +0,0 @@
-export { default as UiInputRadio } from './UiInputRadio.vue'
-export { default as UiInputRadioGroup } from './UiInputRadioGroup.vue'
-export type { RadioSize, RadioValue, RadioVariant } from './types'

package/src/components/UiInputSelect/index.ts

@@ -1,2 +0,0 @@
-export { default as UiInputSelect } from './UiInputSelect.vue'
-export type { SelectSize } from './types'

package/src/components/UiInputTextarea/index.ts

@@ -1,2 +0,0 @@
-export { default as UiInputTextarea } from './UiInputTextarea.vue'
-export type { TextareaSize } from './types'

package/src/components/UiMenu/index.ts

@@ -1,10 +0,0 @@
-export { default as UiMenu } from './UiMenu.vue'
-export { default as UiMenuTrigger } from './UiMenuTrigger.vue'
-export { default as UiMenuContent } from './UiMenuContent.vue'
-export { default as UiMenuItem } from './UiMenuItem.vue'
-export { default as UiMenuGroup } from './UiMenuGroup.vue'
-export { default as UiMenuLabel } from './UiMenuLabel.vue'
-export { default as UiMenuSub } from './UiMenuSub.vue'
-export { default as UiMenuSubTrigger } from './UiMenuSubTrigger.vue'
-export { default as UiMenuSubContent } from './UiMenuSubContent.vue'
-export { default as UiMenuSeparator } from './UiMenuSeparator.vue'

package/src/components/UiProgress/index.ts

@@ -1,2 +0,0 @@
-export { default as UiProgress } from './UiProgress.vue'
-export * from './types'

package/src/components/UiSwitch/index.ts

@@ -1,2 +0,0 @@
-export { default as UiSwitch } from './UiSwitch.vue'
-export type { SwitchColor, SwitchPosition, SwitchSize } from './types'

package/src/components/UiTabs/index.ts

@@ -1,5 +0,0 @@
-// UiTabs exports
-export { default as UiTabs } from './UiTabs.vue'
-
-// Re-export types
-export type { UiTabsProps, Tab } from './UiTabs.vue'

package/src/components/UiTag/index.js

@@ -1 +0,0 @@
-export { default } from './UiTag.vue'

package/src/components/UiTimeline/index.ts

@@ -1,2 +0,0 @@
-export { default as UiTimeline } from './UiTimeline.vue'
-export { default as UiTimelineItem } from './UiTimelineItem.vue'

package/src/components/UiTooltip/index.js

@@ -1,4 +0,0 @@
-export { default as UiTooltip } from './UiTooltip.vue'
-export { default as UiTooltipTrigger } from './UiTooltipTrigger.vue'
-export { default as UiTooltipContent } from './UiTooltipContent.vue'
-export { default as UiTooltipProvider } from './UiTooltipProvider.vue'

package/src/mixins/DynamicAction.js

@@ -1,61 +0,0 @@
-// @vue/component
-export default {
-  props: {
-    href: {
-      type: String,
-      default: null,
-    },
-    to: {
-      type: Object,
-      default: null,
-    },
-    type: {
-      type: String,
-      default: 'submit',
-    },
-    // eslint-disable-next-line vue/require-prop-types
-    value: {
-      default: null,
-    },
-  },
-
-  computed: {
-    component () {
-      const isDisabled = this.disabled || this.loading
-
-      if (this.to) {
-        return {
-          is: 'router-link',
-          props: {
-            to: this.to,
-            // @TODO vue3 check if we need to have a replacement for this
-            // exact: !this.activePage,
-            disabled: isDisabled,
-          },
-        }
-      } else if (this.href) {
-        return {
-          is: 'a',
-          props: {
-            href: isDisabled
-              ? undefined
-              : this.href,
-          },
-        }
-      } else if (this.$attrs.tag) {
-        return {
-          is: this.$attrs.tag,
-          props: {},
-        }
-      } else {
-        return {
-          is: 'button',
-          props: {
-            type: this.type,
-            disabled: isDisabled,
-          },
-        }
-      }
-    },
-  },
-}