vueless 0.0.478-beta.2 → 0.0.478-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.2",
+  "version": "0.0.478-beta.4",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -32,7 +32,7 @@
     "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package",
+    "release:prepare": "node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && node prepare.package",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",

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.data-table/UTable.vue

@@ -703,7 +703,7 @@ function onChangeSelectedRows(selectedRows) {
   if (selectedRows.length) {
     canSelectAll.value = false;
 
-    isCheckedMoreOneTableItems.value ? setFooterCellWidth() : "";
+    isCheckedMoreOneTableItems.value && setFooterCellWidth();
   } else {
     nextTick(setHeaderCellWidth);
   }

package/ui.image-icon/UIcon.vue

@@ -164,7 +164,7 @@ const dynamicComponent = computed(() => {
     return component;
   }
 
-  /* eslint-disable vue/max-len, prettier/prettier */
+  /* eslint-disable prettier/prettier */
   const libraries = {
     "vueless": async () => {
       return import.meta.env.PROD
@@ -197,7 +197,7 @@ const dynamicComponent = computed(() => {
           : import(/* @vite-ignore */ `/node_modules/${library}/24/${fillType}/${name}.svg?component`);
     },
   };
-  /* eslint-enable vue/max-len, prettier/prettier */
+  /* eslint-enable prettier/prettier */
 
   return defineAsyncComponent(libraries[library]);
 });

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;
 }

package/ui.text-file/UFile.vue

@@ -43,7 +43,6 @@ import { computed, ref, useId } from "vue";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
-import UButton from "../ui.button/UButton.vue";
 
 import { getDefault } from "../utils/utilUI.js";
 

package/utils/utilUI.js

@@ -27,7 +27,7 @@ if (isSSR) {
       if (!vuelessConfig) {
         vuelessConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
       }
-    } catch (error) {
+    } catch {
       vuelessConfig = {};
     }
   })();