@byyuurin/ui 0.0.1 → 0.0.3

package/dist/{components → runtime/components}/Switch.vue

@@ -1,99 +1,99 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
-import type { switch as _switch } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-type SwitchVariants = VariantProps<typeof _switch>
-
-export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
-  as?: PrimitiveProps['as']
-  size?: SwitchVariants['size']
-  /** When `true`, the loading icon will be displayed. */
-  loading?: boolean
-  /**
-   * The icon when the `loading` prop is `true`.
-   * @default app.icons.loading
-   */
-  loadingIcon?: string
-  /** Display an icon when the switch is checked. */
-  checkedIcon?: string
-  /** Display an icon when the switch is unchecked. */
-  uncheckedIcon?: string
-  label?: string
-  description?: string
-  round?: boolean
-}
-
-export interface SwitchEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface SwitchSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
-</script>
-
-<script lang="ts" setup>
-import { reactivePick } from '@vueuse/core'
-import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
-import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
-
-const props = withDefaults(defineProps<SwitchProps>(), {
-  size: 'md',
-})
-const emit = defineEmits<SwitchEmits>()
-const slots = defineSlots<SwitchSlots>()
-const modelValue = defineModel<boolean>({ default: undefined })
-
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-const id = useId()
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.switch)
-  return styler({ ...props, checked: false, unchecked: false })
-})
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emit('change', event)
-}
-</script>
-
-<template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <div :class="style.container({ class: props.ui?.container })">
-      <SwitchRoot
-        :id="id"
-        v-bind="rootProps"
-        v-model="modelValue"
-        :name="props.name"
-        :disabled="props.disabled || props.loading"
-        :class="style.base({ class: props.ui?.base })"
-        @update:model-value="onUpdate"
-      >
-        <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">
-          <i v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></i>
-          <template v-else>
-            <i v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></i>
-            <i v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></i>
-          </template>
-        </SwitchThumb>
-      </SwitchRoot>
-    </div>
-    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
-        <slot name="label" :label="props.label">{{ props.label }}</slot>
-      </Label>
-      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
-</template>
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
+import type { switch as _switch } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type SwitchVariants = VariantProps<typeof _switch>
+
+export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+  as?: PrimitiveProps['as']
+  size?: SwitchVariants['size']
+  /** When `true`, the loading icon will be displayed. */
+  loading?: boolean
+  /**
+   * The icon when the `loading` prop is `true`.
+   * @default app.icons.loading
+   */
+  loadingIcon?: string
+  /** Display an icon when the switch is checked. */
+  checkedIcon?: string
+  /** Display an icon when the switch is unchecked. */
+  uncheckedIcon?: string
+  label?: string
+  description?: string
+  round?: boolean
+}
+
+export interface SwitchEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+</script>
+
+<script lang="ts" setup>
+import { reactivePick } from '@vueuse/core'
+import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  size: 'md',
+})
+const emit = defineEmits<SwitchEmits>()
+const slots = defineSlots<SwitchSlots>()
+const modelValue = defineModel<boolean>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
+const id = useId()
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.switch)
+  return styler({ ...props, checked: false, unchecked: false })
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <div :class="style.container({ class: props.ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-bind="rootProps"
+        v-model="modelValue"
+        :name="props.name"
+        :disabled="props.disabled || props.loading"
+        :class="style.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">
+          <i v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></i>
+          <template v-else>
+            <i v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></i>
+            <i v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></i>
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">{{ props.label }}</slot>
+      </Label>
+      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>

package/dist/{components → runtime/components}/Tabs.vue

@@ -1,117 +1,117 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
-import type { tabs } from '../theme'
-import type { ComponentAttrs, DynamicSlots } from '../types'
-
-export interface TabsItem {
-  label?: string
-  icon?: string
-  slot?: string
-  content?: string
-  /** A unique value for the tab item. Defaults to the index. */
-  value?: string | number
-  disabled?: boolean
-}
-
-type TabsVariants = VariantProps<typeof tabs>
-
-export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
-  items?: T[]
-  variant?: TabsVariants['variant']
-  orientation?: TabsVariants['orientation']
-  size?: TabsVariants['size']
-  /** @default true */
-  full?: boolean
-  /**
-   * The content of the tabs, can be disabled to prevent rendering the content.
-   * @default true
-   */
-  content?: boolean
-  /**
-   * The key used to get the label from the item.
-   * @default 'label'
-   */
-  labelKey?: string
-}
-
-export interface TabsEmits extends TabsRootEmits<string | number> {}
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export type TabsSlots<T extends { slot?: string }> = {
-  leading?: SlotProps<T>
-  default?: SlotProps<T>
-  trailing?: SlotProps<T>
-  content?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-</script>
-
-<script lang="ts" setup generic="T extends TabsItem">
-import { reactivePick } from '@vueuse/core'
-import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables'
-import { get } from '../utils'
-
-const props = withDefaults(defineProps<TabsProps<T>>(), {
-  defaultValue: '0',
-  variant: 'solid',
-  orientation: 'horizontal',
-  size: 'md',
-  full: true,
-  content: true,
-  labelKey: 'label',
-})
-
-const emits = defineEmits<TabsEmits>()
-const slots = defineSlots<TabsSlots<T>>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tabs)
-  return styler(props)
-})
-</script>
-
-<template>
-  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <TabsList :class="style.list({ class: props.ui?.list })">
-      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" />
-
-      <TabsTrigger
-        v-for="(item, index) of items"
-        :key="index"
-        :value="item.value || String(index)"
-        :disabled="item.disabled"
-        :class="style.trigger({ class: props.ui?.trigger })"
-      >
-        <slot name="leading" :item="item" :index="index">
-          <i v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></i>
-        </slot>
-
-        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
-        </span>
-
-        <slot name="trailing" :item="item" :index="index"></slot>
-      </TabsTrigger>
-    </TabsList>
-
-    <template v-if="props.content">
-      <TabsContent
-        v-for="(item, index) of items"
-        :key="index"
-        :value="item.value || String(index)"
-        :class="style.content({ class: props.ui?.content })"
-      >
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
-          {{ item.content }}
-        </slot>
-      </TabsContent>
-    </template>
-  </TabsRoot>
-</template>
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { tabs } from '../theme'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+export interface TabsItem {
+  label?: string
+  icon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+  disabled?: boolean
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+  as?: PrimitiveProps['as']
+  items?: T[]
+  variant?: TabsVariants['variant']
+  orientation?: TabsVariants['orientation']
+  size?: TabsVariants['size']
+  /** @default true */
+  full?: boolean
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @default true
+   */
+  content?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @default 'label'
+   */
+  labelKey?: string
+}
+
+export interface TabsEmits extends TabsRootEmits<string | number> {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends { slot?: string }> = {
+  leading?: SlotProps<T>
+  default?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script lang="ts" setup generic="T extends TabsItem">
+import { reactivePick } from '@vueuse/core'
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables'
+import { get } from '../utils'
+
+const props = withDefaults(defineProps<TabsProps<T>>(), {
+  defaultValue: '0',
+  variant: 'solid',
+  orientation: 'horizontal',
+  size: 'md',
+  full: true,
+  content: true,
+  labelKey: 'label',
+})
+
+const emits = defineEmits<TabsEmits>()
+const slots = defineSlots<TabsSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.tabs)
+  return styler(props)
+})
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <TabsList :class="style.list({ class: props.ui?.list })">
+      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="style.trigger({ class: props.ui?.trigger })"
+      >
+        <slot name="leading" :item="item" :index="index">
+          <i v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></i>
+        </slot>
+
+        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index"></slot>
+      </TabsTrigger>
+    </TabsList>
+
+    <template v-if="props.content">
+      <TabsContent
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value || String(index)"
+        :class="style.content({ class: props.ui?.content })"
+      >
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>

package/dist/{components → runtime/components}/Toaster.vue

@@ -139,5 +139,39 @@ function getOffset(index: number) {
 </template>
 
 <style>
-@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}
+@keyframes toast-collapsed-closed {
+  from {
+    transform: var(--transform);
+  }
+  to {
+    transform: translateY(calc((var(--before) - var(--height)) * var(--gap)))
+      scale(var(--scale));
+  }
+}
+@keyframes toast-closed {
+  from {
+    transform: var(--transform);
+  }
+  to {
+    transform: translateY(
+      calc((var(--offset) - var(--height)) * var(--translate-factor))
+    );
+  }
+}
+@keyframes toast-slide-left {
+  from {
+    transform: translateX(0) translateY(var(--translate));
+  }
+  to {
+    transform: translateX(-100%) translateY(var(--translate));
+  }
+}
+@keyframes toast-slide-right {
+  from {
+    transform: translateX(0) translateY(var(--translate));
+  }
+  to {
+    transform: translateX(100%) translateY(var(--translate));
+  }
+}
 </style>

package/dist/runtime/components/index.cjs

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _Accordion.default;
+  }
+});
+Object.defineProperty(exports, "App", {
+  enumerable: true,
+  get: function () {
+    return _App.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function () {
+    return _Drawer.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _Link.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
+Object.defineProperty(exports, "ModalProvider", {
+  enumerable: true,
+  get: function () {
+    return _ModalProvider.default;
+  }
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function () {
+    return _Popover.default;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _RadioGroup.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _Switch.default;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.default;
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "Toaster", {
+  enumerable: true,
+  get: function () {
+    return _Toaster.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.default;
+  }
+});
+var _Accordion = _interopRequireDefault(require("./Accordion.vue"));
+var _App = _interopRequireDefault(require("./App.vue"));
+var _Button = _interopRequireDefault(require("./Button.vue"));
+var _Card = _interopRequireDefault(require("./Card.vue"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox.vue"));
+var _Drawer = _interopRequireDefault(require("./Drawer.vue"));
+var _Input = _interopRequireDefault(require("./Input.vue"));
+var _Link = _interopRequireDefault(require("./Link.vue"));
+var _Modal = _interopRequireDefault(require("./Modal.vue"));
+var _ModalProvider = _interopRequireDefault(require("./ModalProvider.vue"));
+var _Popover = _interopRequireDefault(require("./Popover.vue"));
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup.vue"));
+var _Select = _interopRequireDefault(require("./Select.vue"));
+var _Switch = _interopRequireDefault(require("./Switch.vue"));
+var _Tabs = _interopRequireDefault(require("./Tabs.vue"));
+var _Toast = _interopRequireDefault(require("./Toast.vue"));
+var _Toaster = _interopRequireDefault(require("./Toaster.vue"));
+var _Tooltip = _interopRequireDefault(require("./Tooltip.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/runtime/composables/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useComponentIcons", {
+  enumerable: true,
+  get: function () {
+    return _useComponentIcons.useComponentIcons;
+  }
+});
+Object.defineProperty(exports, "useModal", {
+  enumerable: true,
+  get: function () {
+    return _useModal.useModal;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.useTheme;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () {
+    return _useToast.useToast;
+  }
+});
+var _useComponentIcons = require("./useComponentIcons.cjs");
+var _useModal = require("./useModal.cjs");
+var _useTheme = require("./useTheme.cjs");
+var _useToast = require("./useToast.cjs");

package/dist/runtime/composables/useComponentIcons.cjs

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponentIcons = useComponentIcons;
+var _vue = require("vue");
+var _useTheme = require("./useTheme.cjs");
+function useComponentIcons(componentProps) {
+  const {
+    theme
+  } = (0, _useTheme.useTheme)();
+  const props = (0, _vue.computed)(() => (0, _vue.toValue)(componentProps));
+  const isPrefix = (0, _vue.computed)(() => props.value.icon && props.value.prefix || props.value.icon && !props.value.suffix || props.value.loading && !props.value.suffix || !!props.value.prefixIcon);
+  const isSuffix = (0, _vue.computed)(() => props.value.icon && props.value.suffix || props.value.loading && props.value.suffix || !!props.value.suffixIcon);
+  const prefixIconName = (0, _vue.computed)(() => {
+    if (props.value.loading) return props.value.loadingIcon || theme.value.app.icons.loading;
+    return props.value.prefixIcon || props.value.icon;
+  });
+  const suffixIconName = (0, _vue.computed)(() => {
+    if (props.value.loading && !isPrefix.value) return props.value.loadingIcon || theme.value.app.icons.loading;
+    return props.value.suffixIcon || props.value.icon;
+  });
+  return {
+    isPrefix,
+    isSuffix,
+    prefixIconName,
+    suffixIconName
+  };
+}