vueless 0.0.625 → 0.0.627

package/index.d.ts

@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import type { CreateVuelessOptions } from "./types.ts";
 export { setTheme } from "./utils/theme.ts";
-export { cx, cva, compose } from "./utils/ui.ts";
+export { cx, cva, compose, getDefaults } from "./utils/ui.ts";
 export {
   isSSR,
   isCSR,
@@ -10,14 +10,16 @@ export {
   createDebounce,
   hasSlotContent,
 } from "./utils/helper.ts";
+export { getArgTypes, getSlotNames, getSlotsFragment, getSource } from "./utils/storybook.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
-export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
+export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.ts";
+export { default as defaultEnLocale } from "./adatper.locale/locales/en.ts";
+export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";
-export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.js";
-export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.js";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.js";
-export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.js";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.ts";
+export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.ts";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.ts";
+export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.ts";
 export {
   notify,
   notifySuccess,
@@ -26,7 +28,7 @@ export {
   clearNotifications,
   setDelayedNotify,
   getDelayedNotify,
-} from "./ui.text-notify/utilNotify.js";
+} from "./ui.text-notify/utilNotify.ts";
 export declare function createVueless(options?: CreateVuelessOptions): {
   install: (app: App) => void;
 };

package/index.ts

@@ -1,23 +1,25 @@
 /* eslint-disable prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composables/useLocale.ts";
-import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
-import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
+import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.ts";
+import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.ts";
 import { themeInit } from "./utils/theme.ts";
 
-import type { App } from 'vue'
-import type { CreateVuelessOptions } from './types.ts'
+import type { App } from "vue"
+import type { CreateVuelessOptions } from "./types.ts"
 
 export { setTheme } from "./utils/theme.ts";
-export { cx, cva, compose } from "./utils/ui.ts";
+export { cx, cva, compose, getDefaults } from "./utils/ui.ts";
+export { getArgTypes, getSlotNames, getSlotsFragment, getSource } from "./utils/storybook.ts";
 export { isSSR, isCSR, getRandomId, setTitle, createDebounce, hasSlotContent } from "./utils/helper.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
-export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
+export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.ts";
+export { default as defaultEnLocale } from "./adatper.locale/locales/en.ts";
+export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";
-export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.js";
-export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.js";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.js";
-export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.js";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.ts";
+export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.ts";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.ts";
+export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.ts";
 export {
   notify,
   notifySuccess,
@@ -26,7 +28,7 @@ export {
   clearNotifications,
   setDelayedNotify,
   getDelayedNotify,
-} from "./ui.text-notify/utilNotify.js";
+} from "./ui.text-notify/utilNotify.ts";
 /* eslint-enable prettier/prettier */
 
 export function createVueless(options: CreateVuelessOptions = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.625",
+  "version": "0.0.627",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -66,7 +66,7 @@
     "@vue/eslint-config-prettier": "^10.0.0",
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
-    "@vueless/storybook": "^0.0.37",
+    "@vueless/storybook": "^0.0.52",
     "@vueless/web-types": "^0.0.21",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",

package/types.ts

@@ -139,7 +139,7 @@ export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = unknown[];
 export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
 
-export type ComponentNames = keyof Components; // keys union
+export type ComponentNames = keyof Components & string; // keys union
 export type Strategies = "merge" | "replace" | "override";
 
 export type Gray = "gray";
@@ -226,6 +226,7 @@ export interface Components {
   UInputMoney: Partial<typeof UInputMoneyConfig>;
   UDataList: Partial<typeof UDataListConfig>;
   USelect: Partial<typeof USelectConfig>;
+  [key: string]: UnknownObject;
 }
 
 /* Make all config keys optional and allow to have string and object values. */

package/ui.boilerplate/UBoilerplate.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
+import defaultConfig from "./config.ts";
+import { COMPONENT_NAME } from "./constants.ts";
+
+import type { Props, Config } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+/**
+ * Declaring component props.
+ */
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  /* Add default values for props below */
+});
+
+/**
+ * Add component logic here.
+ */
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  /* Add mutated props or non-props component state below */
+}));
+
+const { wrapperAttrs } = useUI<Config>(defaultConfig, mutatedProps);
+</script>
+
+<template>
+  <div v-bind="wrapperAttrs">Boilerplate</div>
+</template>

package/ui.boilerplate/config.ts

@@ -0,0 +1,6 @@
+export default /*tw*/ {
+  wrapper: "text-6xl font-bold",
+  defaults: {
+    /* define default prop values */
+  },
+};

package/ui.boilerplate/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UBoilerplate";

package/ui.boilerplate/storybook/stories_.ts

@@ -0,0 +1,39 @@
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UBoilerplate from "../../ui.boilerplate/UBoilerplate.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UBoilerplateArgs extends Props {
+  slotTemplate?: string;
+}
+
+export default {
+  id: "10010",
+  title: "Custom / UBoilerplate",
+  component: UBoilerplate,
+  args: {
+    /* predefine prop values here */
+  },
+  argTypes: {
+    ...getArgTypes(UBoilerplate.__name),
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UBoilerplateArgs> = (args: UBoilerplateArgs) => ({
+  components: { UBoilerplate },
+  setup() {
+    const slots = getSlotNames(UBoilerplate.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UBoilerplate v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UBoilerplate>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};

package/ui.boilerplate/types.ts

@@ -0,0 +1,18 @@
+import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /* Add your component props below */
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.button-link/ULink.vue

@@ -134,7 +134,7 @@ const mutatedProps = computed(() => ({
   defaultSlot: hasSlotContent(slots["default"]),
 }));
 
-const { wrapperAttrs, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
+const { wrapperAttrs, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps, "link");
 </script>
 
 <template>

package/ui.button-link/config.ts

@@ -56,14 +56,17 @@ export default /*tw*/ {
         `,
         white: "decoration-white text-white",
       },
+      defaultSlot: {
+        true: "flex items-center no-underline hover:no-underline",
+      },
       dashed: {
         true: "hover:decoration-dashed decoration-dashed",
       },
       disabled: {
         true: "text-gray-400 pointer-events-none",
       },
-      defaultSlot: {
-        true: "flex items-center no-underline hover:no-underline",
+      block: {
+        true: "w-full",
       },
     },
   },

package/ui.container-page/UPage.vue

@@ -78,7 +78,7 @@ const {
   footerLeftAttrs,
   footerRightAttrs,
   rightRoundingWrapperAttrs,
-} = useUI<Config>(defaultConfig);
+} = useUI<Config>(defaultConfig, undefined, "wrapper");
 </script>
 
 <template>

package/ui.container-page/config.ts

@@ -1,6 +1,5 @@
 export default /*tw*/ {
   htmlBody: "bg-gray-50 group/body-gray",
-  wrapperMobile: "overflow-x-hidden",
   wrapper: {
     base: "min-h-screen UNotifyPage",
     variants: {

package/ui.text-money/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.625",
+  "version": "0.0.627",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -715,6 +715,37 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "UBoilerplate",
+          "description": "",
+          "attributes": [
+            {
+              "name": "config",
+              "required": false,
+              "description": "Component config object.",
+              "enum": [
+                "Config"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "ComponentConfig"
+              }
+            },
+            {
+              "name": "dataTest",
+              "required": false,
+              "description": "Data-test attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/ui.boilerplate/UBoilerplate.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "UButton",
           "description": "",