vueless 0.0.646 → 0.0.648

package/constants.js

@@ -212,6 +212,7 @@ export const DEFAULT_SVGO_CONFIG = {
 /* Vueless general */
 export const ICONS_DIR = "assets/icons";
 export const VUELESS_LIBRARY = "vueless";
+export const STORYBOOK_DIR = "storybook";
 export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
 export const VUELESS_CACHE_DIR = "node_modules/.cache/vueless";
 export const VUELESS_DIR = `node_modules/${VUELESS_LIBRARY}`;

package/package.json

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

package/plugin-vite.js

@@ -12,6 +12,7 @@ import { getNuxtFiles, getVueFiles } from "./utils/node/helper.js";
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
 import { buildWebTypes } from "./utils/node/webTypes.js";
+import { hideHiddenStories, showHiddenStories } from "./utils/node/dynamicStories.js";
 
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
@@ -36,6 +37,8 @@ export const Vueless = function (options = {}) {
 
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
+    await showHiddenStories(isVuelessEnv);
+
     await removeCustomPropTypes(isVuelessEnv);
 
     /* remove cached icons */
@@ -68,7 +71,9 @@ export const Vueless = function (options = {}) {
       }
 
       if ((config.command.includes("sb:") && mode === "storybook") || isVuelessEnv) {
+        await showHiddenStories(isVuelessEnv);
         await buildWebTypes();
+        await hideHiddenStories(isVuelessEnv);
       }
 
       if (config.command === "build") {

package/ui.button-toggle/UToggle.vue

@@ -86,6 +86,14 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
     v-bind="toggleLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UToggleItem directly. -->
       <slot>

package/ui.form-checkbox/UCheckbox.vue

@@ -136,6 +136,14 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
     v-bind="checkboxLabelAttrs"
     :data-test="`${dataTest}-label`"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <input
       :id="elementId"
       type="checkbox"

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -77,6 +77,14 @@ const { groupLabelAttrs, groupCheckboxAttrs, listAttrs } = useUI<Config>(default
     v-bind="groupLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="listAttrs">
       <!-- @slot Use it to add URadio directly. -->
       <slot>

package/ui.form-color-picker/UColorPicker.vue

@@ -69,6 +69,14 @@ const {
     v-bind="colorPickerLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="listAttrs">
       <div v-bind="unselectedAttrs">
         <URadio

package/ui.form-input/UInput.vue

@@ -266,6 +266,14 @@ const {
     interactive
     v-bind="inputLabelAttrs"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <label :for="elementId" v-bind="wrapperAttrs">
       <span
         v-if="hasSlotContent($slots['left']) || leftIcon"

package/ui.form-input-file/UInputFile.vue

@@ -274,6 +274,14 @@ const {
     interactive
     v-bind="inputLabelAttrs"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">
       <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
         <!-- @slot Use it to add something above the component content. -->

package/ui.form-input-number/UInputNumber.vue

@@ -76,6 +76,14 @@ const {
     v-bind="labelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <UButton
       variant="thirdary"
       size="sm"

package/ui.form-input-rating/UInputRating.vue

@@ -74,6 +74,14 @@ const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, stars
     v-bind="inputLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="containerAttrs">
       <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
         <!--

package/ui.form-label/ULabel.vue

@@ -88,13 +88,15 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
 
     <!-- `v-bind` isn't assigned, because the div is system -->
     <div v-if="label || error || description">
-      <label
-        v-if="label"
-        :for="props.for"
-        v-bind="labelAttrs"
-        :data-test="`${dataTest}-label`"
-        v-text="label"
-      />
+      <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+        <!--
+          @slot Use this to add custom content instead of the label.
+          @binding {string} label
+        -->
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </label>
 
       <div v-if="error" v-bind="descriptionAttrs" :data-test="`${dataTest}-error`" v-text="error" />
 
@@ -111,14 +113,15 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
   </div>
 
   <div v-else v-bind="wrapperAttrs">
-    <label
-      v-if="label"
-      ref="labelRef"
-      :for="props.for"
-      v-bind="labelAttrs"
-      :data-test="`${dataTest}-label`"
-      v-text="label"
-    />
+    <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label">
+        {{ label }}
+      </slot>
+    </label>
 
     <div v-bind="contentAttrs">
       <!-- @slot Use it to add label content. -->

package/ui.form-label/storybook/stories.ts

@@ -9,6 +9,7 @@ import ULabel from "../../ui.form-label/ULabel.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UText from "../../ui.text-block/UText.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -39,7 +40,7 @@ export default {
 const defaultTemplate = "This is plain text";
 
 const DefaultTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs) => ({
-  components: { ULabel, UText, UIcon },
+  components: { ULabel, UText, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(ULabel.__name);
 
@@ -108,10 +109,20 @@ Error.args = { error: "Error description" };
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
+  label: "Custom badge label",
+  slotTemplate: `
+    <template #label="{ label }">
+      <UBadge :label="label" color="green" />
+    </template>
+  `,
+};
+
 export const SlotFooter = DefaultTemplate.bind({});
 SlotFooter.args = {
   slotTemplate: `
-    <template #footer>
+    <template #bottom>
       <UIcon name="star" color="green" />
     </template>
   `,

package/ui.form-radio/URadio.vue

@@ -107,6 +107,14 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     v-bind="radioLabelAttrs"
     :data-test="`${dataTest}-label`"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <input
       :id="elementId"
       type="radio"

package/ui.form-radio-group/URadioGroup.vue

@@ -60,6 +60,14 @@ const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultCon
     v-bind="groupLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="listAttrs">
       <!-- @slot Use it to add URadio directly. -->
       <slot>

package/ui.form-select/USelect.vue

@@ -456,6 +456,14 @@ const {
     :data-test="dataTest"
     :tabindex="-1"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div
       ref="wrapperRef"
       :tabindex="searchable || disabled ? -1 : 0"

package/ui.form-switch/USwitch.vue

@@ -100,6 +100,14 @@ const {
     :data-test="dataTest"
     @click="onClickToggle"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <label :for="elementId" v-bind="wrapperAttrs">
       <input
         :id="elementId"

package/ui.form-textarea/UTextarea.vue

@@ -207,6 +207,14 @@ const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlo
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <label ref="wrapperRef" :for="elementId" v-bind="wrapperAttrs">
       <div
         v-if="hasSlotContent($slots['left'])"

package/ui.text-files/UFiles.vue

@@ -62,6 +62,14 @@ const { filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig);
     :align="labelAlign"
     v-bind="filesLabelAttrs"
   >
+    <template #label>
+      <!--
+        @slot Use this to add custom content instead of the label.
+        @binding {string} label
+      -->
+      <slot name="label" :label="label" />
+    </template>
+
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UFile. -->
       <slot>

package/utils/node/dynamicProps.js

@@ -11,20 +11,19 @@ const CLOSING_BRACKET = "}";
 const IGNORE_PROP = "@ignore";
 const CUSTOM_PROP = "@custom";
 
-const VUELESS_SRC = path.join(VUELESS_DIR, VUELESS_LOCAL_DIR);
-
 const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props\s*{([^}]*)}/s;
 const UNION_SYMBOLS_REG_EXP = /[?|:"|;]/g;
 const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
 export async function setCustomPropTypes(isVuelessEnv) {
-  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_SRC;
+  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
 
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
-    const customProps =
-      componentName in vuelessConfig.component && vuelessConfig.component[componentName].props;
+    const componentGlobalConfig = vuelessConfig.component[componentName];
+    const customProps = componentGlobalConfig && componentGlobalConfig.props;
+    const isHiddenStories = componentGlobalConfig && componentGlobalConfig.storybook === false;
 
-    if (customProps) {
+    if (customProps && !isHiddenStories) {
       await cacheComponentTypes(path.join(srcDir, componentDir));
       await modifyComponentTypes(
         path.join(srcDir, componentDir),
@@ -35,7 +34,7 @@ export async function setCustomPropTypes(isVuelessEnv) {
 }
 
 export async function removeCustomPropTypes(isVuelessEnv) {
-  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_SRC;
+  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
 
   for await (const componentDir of Object.values(COMPONENTS)) {
     await restoreComponentTypes(path.join(srcDir, componentDir));

package/utils/node/dynamicStories.js

@@ -0,0 +1,65 @@
+import path from "node:path";
+import { existsSync } from "node:fs";
+import { cwd } from "node:process";
+import { rename, readdir } from "node:fs/promises";
+
+import { vuelessConfig } from "./vuelessConfig.js";
+import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR, STORYBOOK_DIR } from "../../constants.js";
+
+async function hideComponentStories(storybookPath) {
+  if (existsSync(storybookPath)) {
+    const storyFiles = await readdir(storybookPath);
+    const visibleFiles = storyFiles.filter((storybookFile) => !storybookFile.includes("hidden"));
+
+    await Promise.all(
+      visibleFiles.map((storybookFile) => {
+        const [fileName, extension] = storybookFile.split(".");
+
+        return rename(
+          path.join(storybookPath, storybookFile),
+          path.join(storybookPath, `${fileName}_hidden.${extension}`),
+        );
+      }),
+    );
+  }
+}
+
+async function showComponentStories(storybookPath) {
+  if (existsSync(storybookPath)) {
+    const storyFiles = await readdir(storybookPath);
+    const hiddenFiles = storyFiles.filter((storybookFile) => storybookFile.includes("hidden"));
+
+    await Promise.all(
+      hiddenFiles.map((storybookFile) => {
+        const [fileName, extension] = storybookFile.split(".");
+        const [originalFileName] = fileName.split("_");
+
+        return rename(
+          path.join(storybookPath, storybookFile),
+          path.join(storybookPath, `${originalFileName}.${extension}`),
+        );
+      }),
+    );
+  }
+}
+
+export async function hideHiddenStories(isVuelessEnv) {
+  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
+
+  for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
+    const componentGlobalConfig = vuelessConfig.component[componentName];
+    const isHiddenStories = componentGlobalConfig && componentGlobalConfig.storybook === false;
+
+    if (isHiddenStories) {
+      await hideComponentStories(path.join(cwd(), srcDir, componentDir, STORYBOOK_DIR));
+    }
+  }
+}
+
+export async function showHiddenStories(isVuelessEnv) {
+  const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
+
+  for await (const componentDir of Object.values(COMPONENTS)) {
+    await showComponentStories(path.join(cwd(), srcDir, componentDir, STORYBOOK_DIR));
+  }
+}