vueless 0.0.478-beta.3 → 0.0.478-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.3",
+  "version": "0.0.478-beta.4",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -3,7 +3,7 @@ import { hasSlotContent } from "./composablesTs/useUI.ts";
 // TODO: Import all components here
 import UTextDefaultConfig from "./ui.text-block/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
-
+import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import type { ComputedRef } from "vue";
 
 export interface ThemeConfig {
@@ -97,12 +97,13 @@ export type BrandColors =
 export interface Components {
   UText?: Partial<typeof UTextDefaultConfig>;
   UButton?: Partial<typeof UButtonDefaultConfig>;
+  UBadge?: Partial<typeof UBadgeDefaultConfig>;
 }
 
 export interface Component {
   i18n?: UnknownObject;
   defaults?: Defaults;
-  safelist?: () => TailwindSafelist[];
+  safelist?: (string: string) => TailwindSafelist[];
   strategy?: Strategies;
   transition?: Transition;
   safelistColors?: BrandColors;

package/ui.text-badge/UBadge.vue

@@ -1,6 +1,94 @@
+<script lang="ts" setup>
+import { useTemplateRef, computed } from "vue";
+
+import { getDefault } from "../utilsTs/utilUI.ts";
+import UIcon from "../ui.image-icon/UIcon.vue";
+
+import { UBadge } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+import defaultConfig from "./config.ts";
+
+import type { UBadgeProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UBadgeProps>(), {
+  variant: getDefault<UBadgeProps>(defaultConfig, UBadge).variant,
+  bordered: getDefault<UBadgeProps>(defaultConfig, UBadge).bordered,
+  size: getDefault<UBadgeProps>(defaultConfig, UBadge).size,
+  color: getDefault<UBadgeProps>(defaultConfig, UBadge).color,
+  round: getDefault<UBadgeProps>(defaultConfig, UBadge).round,
+  tabindex: getDefault<UBadgeProps>(defaultConfig, UBadge).tabindex,
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the badge is focused.
+   */
+  "focus",
+
+  /**
+   * Triggers when the badge is pressed.
+   */
+  "keydown",
+
+  /**
+   * Triggers when the badge loses focus.
+   */
+  "blur",
+
+  /**
+   * Triggers when the badge is clicked.
+   */
+  "click",
+]);
+
+const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs } = useAttrs(props);
+
+const wrapperRef = useTemplateRef<HTMLElement>("wrapper");
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "3xs",
+    md: "2xs",
+    lg: "xs",
+  };
+
+  return sizes[props.size];
+});
+
+const iconColor = computed(() => {
+  return props.variant === "primary" ? "white" : props.color;
+});
+
+function onFocus() {
+  emit("focus");
+}
+
+function onBlur(event: FocusEvent) {
+  emit("blur", event);
+}
+
+function onKeydown(event: KeyboardEvent) {
+  emit("keydown", event);
+}
+
+function onClick(event: MouseEvent) {
+  emit("click", event);
+}
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLElement}
+   */
+  wrapperRef,
+});
+</script>
+
 <template>
   <div
-    ref="wrapperRef"
+    ref="wrapper"
     :data-test="dataTest"
     v-bind="badgeAttrs"
     :tabindex="tabindex"
@@ -73,181 +161,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { ref, computed } from "vue";
-
-import { getDefault } from "../utils/utilUI.js";
-import UIcon from "../ui.image-icon/UIcon.vue";
-
-import { UBadge } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-import defaultConfig from "./config.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   *  Badge label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Badge variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).variant,
-  },
-
-  /**
-   * Add border to the `thirdary` variant.
-   */
-  bordered: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UBadge).bordered,
-  },
-
-  /**
-   * Badge size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).size,
-  },
-
-  /**
-   * Badge color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).color,
-  },
-
-  /**
-   * Icon name (appears instead of label).
-   */
-  icon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set badge corners rounded.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UBadge).round,
-  },
-
-  /**
-   * Controls the keyboard “Tab” focus order of elements.
-   */
-  tabindex: {
-    type: [String, Number],
-    default: getDefault(defaultConfig, UBadge).tabindex,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when the badge is focused.
-   */
-  "focus",
-
-  /**
-   * Triggers when the badge is pressed.
-   */
-  "keydown",
-
-  /**
-   * Triggers when the badge loses focus.
-   */
-  "blur",
-
-  /**
-   * Triggers when the badge is clicked.
-   */
-  "click",
-]);
-
-const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs } = useAttrs(props);
-
-const wrapperRef = ref(null);
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "3xs",
-    md: "2xs",
-    lg: "xs",
-  };
-
-  return sizes[props.size];
-});
-
-const iconColor = computed(() => {
-  return props.variant === "primary" ? "white" : props.color;
-});
-
-function onFocus() {
-  emit("focus");
-}
-
-function onBlur(event) {
-  emit("blur", event);
-}
-
-function onKeydown(event) {
-  emit("keydown", event);
-}
-
-function onClick(event) {
-  emit("click", event);
-}
-
-defineExpose({
-  /**
-   * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLElement}
-   */
-  wrapperRef,
-});
-</script>

package/ui.text-badge/{config.js → config.ts}

@@ -63,7 +63,7 @@ export default /*tw*/ {
     round: false,
     bordered: false,
   },
-  safelist: (colors) => [
+  safelist: (colors: string) => [
     { pattern: `bg-(${colors})-50` },
     { pattern: `bg-(${colors})-600` },
     { pattern: `border-(${colors})-100` },

package/ui.text-badge/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.text-badge/storybook/{stories.js → stories.ts}

@@ -1,10 +1,18 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utilsTs/utilStorybook.ts";
 
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { UBadgeProps } from "../types.ts";
+
+interface UBadgeArgs extends UBadgeProps {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
 /**
  * The `UBadge` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-badge)
  */
@@ -18,9 +26,9 @@ export default {
   argTypes: {
     ...getArgTypes(UBadge.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UBadgeArgs> = (args: UBadgeArgs) => ({
   components: { UBadge, UIcon },
   setup() {
     const slots = getSlotNames(UBadge.__name);
@@ -29,18 +37,18 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UBadge v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UBadge>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate: StoryFn<UBadgeArgs> = (args: UBadgeArgs, { argTypes }) => ({
   components: { UBadge, URow, UCol },
   setup() {
     return {
       args,
-      variants: argTypes.variant.options,
-      colors: argTypes.color.options,
+      variants: argTypes?.variant?.options,
+      colors: argTypes?.color?.options,
     };
   },
   template: `
@@ -59,14 +67,14 @@ const ColorsTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UBadgeArgs> = (args: UBadgeArgs, { argTypes }) => ({
   components: { UBadge, URow },
   setup() {
-    function getText(value) {
+    function getText(value: string) {
       return `Badge ${value}`;
     }
 
-    return { args, options: argTypes[args.enum].options, getText };
+    return { args, options: argTypes?.[args.enum]?.options || [], getText };
   },
   template: `
     <URow>
@@ -76,7 +84,6 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
       variant="thirdary"
       filled
       >
-        fff
       </UDropdownButton>
       <UBadge
         v-for="(option, index) in options"
@@ -107,30 +114,6 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="info"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="info"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const SlotLeft = DefaultTemplate.bind({});
 SlotLeft.args = {
   slotTemplate: `

package/ui.text-badge/types.ts

@@ -0,0 +1,84 @@
+import defaultConfig from "./config.ts";
+
+export interface UBadgeProps {
+  /**
+   *  Badge label.
+   */
+  label?: string;
+
+  /**
+   * Badge variant.
+   */
+  variant?: "primary" | "secondary" | "thirdary";
+
+  /**
+   * Add border to the `thirdary` variant.
+   */
+  bordered: boolean;
+
+  /**
+   * Badge size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Badge color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Icon name (appears instead of label).
+   */
+  icon?: string;
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Set badge corners rounded.
+   */
+  round: boolean;
+
+  /**
+   * Controls the keyboard “Tab” focus order of elements.
+   */
+  tabindex: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.text-badge/{useAttrs.js → useAttrs.ts}

@@ -1,10 +1,15 @@
 import { computed, useSlots } from "vue";
-import useUI from "../composables/useUI.js";
+import useUI from "../composablesTs/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+import type { UseAttrs } from "../types.ts";
+import type { UBadgeProps } from "./types.ts";
+
+type Config = Partial<typeof defaultConfig>;
+
+export default function useAttrs(props: UBadgeProps) {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
   const slots = useSlots();
 
   const mutatedProps = computed(() => ({
@@ -19,5 +24,5 @@ export default function useAttrs(props) {
     config,
     ...keysAttrs,
     hasSlotContent,
-  };
+  } as UseAttrs;
 }