@flyanra/vue-core 1.3.3 → 1.3.5

package/dist/types/components/general/fly-icon-v2/FlyIconV2.types.d.ts

@@ -1,5 +1,8 @@
 import { type Component } from 'vue';
+export declare const FLY_ICON_V2_NAMED_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
+export type T_FlyIconV2NamedSize = (typeof FLY_ICON_V2_NAMED_SIZES)[number];
+export type T_FlyIconV2Size = T_FlyIconV2NamedSize | (string & {});
 export type T_FlyIconV2Props = {
     icon: Component;
-    size?: string | number;
+    size?: T_FlyIconV2Size;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,
@@ -83,6 +83,7 @@
     "postinstall:husky": "husky",
     "prepare": "husky",
     "preview": "vite preview",
+    "release": "bash scripts/release.sh",
     "storybook": "storybook dev -p 6006 --no-open",
     "test-storybook": "vitest --project=storybook",
     "typecheck": "vue-tsc --noEmit -p tsconfig.lib.json"

package/src/components/feedback/tooltip/FlyInfoTooltip.vue

@@ -41,7 +41,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .fly-info-tooltip {
-  :deep(.app-icon) {
+  :deep(.fly-icon) {
     svg {
       display: inline;
     }

package/src/components/general/fly-icon-v2/FlyIconV2.types.ts

@@ -1,6 +1,11 @@
 import { type Component } from 'vue'
 
+export const FLY_ICON_V2_NAMED_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
+
+export type T_FlyIconV2NamedSize = (typeof FLY_ICON_V2_NAMED_SIZES)[number]
+export type T_FlyIconV2Size = T_FlyIconV2NamedSize | (string & {})
+
 export type T_FlyIconV2Props = {
   icon: Component
-  size?: string | number
+  size?: T_FlyIconV2Size
 }

package/src/components/general/fly-icon-v2/FlyIconV2.vue

@@ -2,16 +2,39 @@
   <component
     :is="icon"
     class="fly-icon"
-    :style="{
-      fontSize: typeof size === 'number' ? `${size}px` : size
-    }"
+    :class="namedSizes.has(size!) ? `fly-icon--${size}` : undefined"
+    :style="size && !namedSizes.has(size) ? { fontSize: size } : undefined"
   />
 </template>
 
 <script setup lang="ts">
+import { FLY_ICON_V2_NAMED_SIZES } from './FlyIconV2.types'
 import type { T_FlyIconV2Props } from './FlyIconV2.types'
 
 defineProps<T_FlyIconV2Props>()
+
+const namedSizes: Set<string> = new Set(FLY_ICON_V2_NAMED_SIZES)
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.fly-icon {
+  &--xs {
+    font-size: 0.75em;
+  }
+  &--sm {
+    font-size: 1em;
+  }
+  &--md {
+    font-size: 1.25em;
+  }
+  &--lg {
+    font-size: 1.5em;
+  }
+  &--xl {
+    font-size: 2em;
+  }
+  &--2xl {
+    font-size: 3em;
+  }
+}
+</style>