@resee-movies/nuxt-ux 0.13.0 → 0.13.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/components/Button.vue

@@ -21,16 +21,16 @@
     @click              = "handleButtonClick"
   >
     <IconTextPair
-      :text                      = "props.text"
-      :icon                      = "props.icon"
-      :icon-size                 = "props.iconSize ?? props.size"
-      :trailing-icon             = "props.trailingIcon"
-      :spacing                   = "props.spacing ?? (iconOnly ? 'none' : 'wide')"
-      :loading                   = "showLoading"
-      :icon-transition-name      = "props.iconTransitionName"
-      :icon-transition-mode      = "props.iconTransitionMode"
-      :icon-transition-on-appear = "props.iconTransitionOnAppear"
+      :text          = "props.text"
+      :icon          = "props.icon"
+      :icon-size     = "props.iconSize ?? props.size"
+      :trailing-icon = "props.trailingIcon"
+      :spacing       = "props.spacing ?? (iconOnly ? 'none' : 'wide')"
     >
+      <template #leading="{ slotProps }">
+        <IconTransition v-bind="slotProps" :loading="showLoading" />
+      </template>
+
       <template #default v-if="slots.default">
         <slot />
       </template>
@@ -47,6 +47,7 @@ import { computed, ref, useSlots } from "vue";
 <script setup>
 import vPrimeTooltip from "primevue/tooltip";
 import IconTextPair from "./IconTextPair.vue";
+import IconTransition from "./IconTransition.vue";
 defineEmits(["click"]);
 const props = defineProps({
   is: { type: null, required: false, default: "button" },
@@ -66,10 +67,7 @@ const props = defineProps({
   trailingIcon: { type: String, required: false },
   iconSize: { type: String, required: false },
   trailingIconSize: { type: String, required: false },
-  spacing: { type: String, required: false },
-  iconTransitionName: { type: String, required: false },
-  iconTransitionMode: { type: String, required: false },
-  iconTransitionOnAppear: { type: Boolean, required: false }
+  spacing: { type: String, required: false }
 });
 const slots = useSlots();
 const shrink = computed(

package/dist/runtime/components/Icon.vue

@@ -1,26 +1,9 @@
 <template>
-  <Transition
-    :name   = "props.transitionName"
-    :mode   = "props.transitionMode"
-    :appear = "props.transitionOnAppear"
-  >
-    <span
-      v-if   = "props.loading"
-      v-bind = "$attrs"
-      class  = "icon"
-    >
-      <ProgressSpinner :size="props.size" />
-    </span>
-
-    <span
-      v-else-if = "props.name"
-      v-bind    = "$attrs"
-      role      = "presentation"
-      :class    = "['icon', props.size]"
-    >
-      <span :class="[props.name, { 'color-cycle': props.colorCycle }]" />
-    </span>
-  </Transition>
+  <span role="presentation" :class="['icon', props.size]">
+    <slot>
+      <span :class="props.name" />
+    </slot>
+  </span>
 </template>
 
 <script>
@@ -28,21 +11,12 @@
 </script>
 
 <script setup>
-import ProgressSpinner from "./ProgressSpinner.vue";
-defineOptions({
-  inheritAttrs: false
-});
 const props = defineProps({
   name: { type: String, required: false, default: void 0 },
-  loading: { type: Boolean, required: false, default: false },
-  size: { type: String, required: false, default: void 0 },
-  colorCycle: { type: Boolean, required: false, default: false },
-  transitionName: { type: String, required: false, default: "fade" },
-  transitionMode: { type: String, required: false, default: "out-in" },
-  transitionOnAppear: { type: Boolean, required: false, default: false }
+  size: { type: String, required: false, default: void 0 }
 });
 </script>
 
 <style scoped>
-@layer components{.icon{align-items:center;display:inline-flex}.icon:before{content:var(--zero-width-space)}.icon.sm{font-size:var(--icon-size-small)}.icon.md{font-size:var(--icon-size-medium)}.icon.lg{font-size:var(--icon-size-large)}.icon.xl{font-size:var(--icon-size-jumbo)}.icon.color-cycle{--resee-color-cycle-timing:cubic-bezier(0,.5,1,.5);animation-duration:8s;animation-iteration-count:infinite;animation-name:resee-color-cycle}@keyframes resee-color-cycle{0%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-red)}6.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-orange)}18.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-yellow)}31.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-green)}43.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-seaweed)}56.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-aqua)}68.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-blue)}81.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-indigo)}93.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-violet)}to{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-red)}}}
+@layer components{.icon{align-items:center;display:inline-flex}.icon:before{content:var(--zero-width-space)}.icon>span{display:inline-block;height:1em;width:1em}.icon.sm>span{height:var(--icon-size-small)!important;width:var(--icon-size-small)!important}.icon.md>span{height:var(--icon-size-medium)!important;width:var(--icon-size-medium)!important}.icon.lg>span{height:var(--icon-size-large)!important;width:var(--icon-size-large)!important}.icon.xl>span{height:var(--icon-size-jumbo)!important;width:var(--icon-size-jumbo)!important}}
 </style>

package/dist/runtime/components/Icon.vue.d.ts

@@ -1,12 +1,14 @@
 export interface IconProps {
     name?: string;
-    loading?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'xl';
-    colorCycle?: boolean;
-    transitionName?: string;
-    transitionMode?: 'out-in' | 'in-out';
-    transitionOnAppear?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/IconTextPair.vue

@@ -1,30 +1,42 @@
 <template>
   <span :class="['pair', props.spacing ? `spacing-${props.spacing}` : void 0]">
-    <Icon
-      class                 = "leading-icon"
-      :name                 = "props.icon"
-      :size                 = "props.iconSize"
-      :loading              = "props.loading"
-      :transition-name      = "props.iconTransitionName"
-      :transition-mode      = "props.iconTransitionMode"
-      :transition-on-appear = "props.iconTransitionOnAppear"
-    />
+    <slot
+      name        = "leading"
+      :slot-props = "{
+  class: 'leading-icon',
+  name: props.icon,
+  size: props.iconSize
+}"
+    >
+      <Icon
+        v-if  = "props.icon"
+        class = "leading-icon"
+        :name = "props.icon"
+        :size = "props.iconSize"
+      />
+    </slot>
 
     <span v-if="props.text || slots.default" class="label">
-      <slot>
+      <slot name="default">
         {{ props.text }}
       </slot>
     </span>
 
-    <Icon
-      v-if                  = "props.trailingIcon"
-      class                 = "trailing-icon"
-      :name                 = "props.trailingIcon"
-      :size                 = "props.iconSize"
-      :transition-name      = "props.iconTransitionName"
-      :transition-mode      = "props.iconTransitionMode"
-      :transition-on-appear = "props.iconTransitionOnAppear"
-    />
+    <slot
+      name        = "trailing"
+      :slot-props = "{
+  class: 'trailing-icon',
+  name: props.trailingIcon,
+  size: props.iconSize
+}"
+    >
+      <Icon
+        v-if  = "props.trailingIcon"
+        class = "trailing-icon"
+        :name = "props.trailingIcon"
+        :size = "props.iconSize"
+      />
+    </slot>
   </span>
 </template>
 
@@ -40,11 +52,7 @@ const props = defineProps({
   trailingIcon: { type: String, required: false, default: void 0 },
   iconSize: { type: String, required: false, default: void 0 },
   trailingIconSize: { type: String, required: false, default: void 0 },
-  spacing: { type: String, required: false, default: void 0 },
-  loading: { type: Boolean, required: false, default: false },
-  iconTransitionName: { type: String, required: false, default: void 0 },
-  iconTransitionMode: { type: String, required: false, default: void 0 },
-  iconTransitionOnAppear: { type: Boolean, required: false, default: false }
+  spacing: { type: String, required: false, default: void 0 }
 });
 const slots = useSlots();
 </script>

package/dist/runtime/components/IconTextPair.vue.d.ts

@@ -6,13 +6,25 @@ export interface IconTextPairProps {
     iconSize?: IconProps['size'];
     trailingIconSize?: IconProps['size'];
     spacing?: 'wide' | 'normal' | 'none';
-    loading?: boolean;
-    iconTransitionName?: IconProps['transitionName'];
-    iconTransitionMode?: IconProps['transitionMode'];
-    iconTransitionOnAppear?: IconProps['transitionOnAppear'];
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconTextPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTextPairProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {
+        slotProps: {
+            class: string;
+            name: string | undefined;
+            size: "sm" | "md" | "lg" | "xl" | undefined;
+        };
+    }) => any;
+} & {
     default?: (props: {}) => any;
+} & {
+    trailing?: (props: {
+        slotProps: {
+            class: string;
+            name: string | undefined;
+            size: "sm" | "md" | "lg" | "xl" | undefined;
+        };
+    }) => any;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/IconTransition.vue

@@ -0,0 +1,33 @@
+<template>
+  <Transition :name="props.transitionName" mode="out-in">
+    <Icon
+      v-if   = "props.loading || props.name"
+      v-bind = "$attrs"
+      :name  = "props.name"
+      :key   = "props.loading ? 'loading' : props.name"
+      :size  = "props.size"
+    >
+      <template #default v-if="props.loading">
+        <ProgressSpinner :size="props.size" />
+      </template>
+    </Icon>
+  </Transition>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import Icon from "./Icon.vue";
+import ProgressSpinner from "./ProgressSpinner.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  loading: { type: Boolean, required: false, default: false },
+  transitionName: { type: String, required: false, default: "grow-x" },
+  name: { type: String, required: false },
+  size: { type: String, required: false }
+});
+</script>

package/dist/runtime/components/IconTransition.vue.d.ts

@@ -0,0 +1,9 @@
+import type { HintedString } from '../types/index.js';
+import type { IconProps } from './Icon.vue.js';
+export interface IconTransitionProps extends IconProps {
+    loading?: boolean;
+    transitionName?: HintedString<'fade' | 'grow-x' | 'grow-y'>;
+}
+declare const __VLS_export: import("vue").DefineComponent<IconTransitionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTransitionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/FormSubmitButton.vue

@@ -1,11 +1,10 @@
 <template>
   <Button
-    type                 = "submit"
-    :text                = "props.text ?? locale.form.submitButtonLabel"
-    :loading             = "formState.isSubmitting.value"
-    :disabled            = "formState.isDisabled.value"
-    :bordered            = "props.bordered"
-    icon-transition-name = "grow-x"
+    type      = "submit"
+    :text     = "props.text ?? locale.form.submitButtonLabel"
+    :loading  = "formState.isSubmitting.value"
+    :disabled = "formState.isDisabled.value"
+    :bordered = "props.bordered"
   />
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"