vueless 0.0.13 → 0.0.15

package/README.md

@@ -1,174 +1,55 @@
-## How to run the project locally
+![logo.png](public/images/vueless-logo-git.png)
 
-- Install **node.js 16.XX** version (see [instructions](https://nodejs.org/en/download/package-manager/) for your OS).
+## Vueless UI
 
-- Install globally [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable):
+* [Documentation](https://docs.vueless.com/)
+* [UI Components](https://ui.vueless.com/)
+* [Website](http://vueless.com/)
 
-```bash
-npm install --global yarn
-```
-
-- Create project folder and clone files from Git into:
-
-```bash
-# download project from remote repository
-git clone origin git@gitlab.com:<project_name>.git
-
-# go to project folder
-cd <project_name>
-```
-
-- Install project dependencies (node_modules):
-
-```bash
-yarn install
-```
+## Quick Start
 
-- Create environment file:
+1. Install `vueless` UI library packages.
 
 ```bash
-#  for local environment
-cp .env.local.example .env.local
+npm install vueless @vueless/plugin-vite
 ```
 
-- Run the app in **development** mode:
-
-```bash
-yarn dev
-```
-
-- The project is ready!
-
-## REST API
-
-- Public URL: https://fine.gitbook.io/api/
-
-- Development URL (same but editable):
+2. Create `vueless.config.js` at the root of the project.
 
-  - URL: https://app.gitbook.com/s/-MAVM-6BL-A_fpwuMsE1/
-  - Login: i.ivan.gridnev@gmail.com
-  - Password: XZQnUtFEZ4v9PML
-
-Section **AUTH & APPS** contains **Main** application endpoints, while section **APP INSTANCE** contains **Business** application endpoints.
-
-
-## Additional commands
-
-- Open Storybook (frontend base UI components documentation):
-
-```bash
-# run Storybook in development mode (with docs and stories):
-# It's good for debugging components.
-yarn sb:dev-full
-
-# run Storybook in development mode (with docs only):
-yarn sb:dev
-
-# build Storybook (to publish in the web):
-yarn sb:build
-
-# Run the built application from a `/storybook-static` folder in production mode:
-yarn sb:preview
+```javascript filename="vueless.config.js" title="vueless.config.js"
+export default {
+  color: {},
+  component: {},
+};
 ```
 
-- Run code-style check / formatting:
+3. Add TailwindCSS preset.
 
-```bash
-# check code style (only show errors)
-yarn lint
-
-# check code style and fix all possible errors
-yarn lint:fix
+```javascript
+import { vuelessPreset } from "vueless/preset.tailwind";
 
-# check code style of given file paths (fail pipeline if at least 1 error or warning appears)
-yarn lint:ci
+export default {
+  presets: [vuelessPreset],
+  ...
+};
 ```
 
-- Run auto tests:
+4. Add Vite plugins.
 
-```bash
-# start unit tests
-yarn test:unit
+```javascript
+import { Vueless, VuelessUnpluginComponents } from "@vueless/plugin-vite";
 
-# start end to end tests
-yarn test:e2e
-
-# start end to end tests in headless mode (no UI)
-yarn test:e2e-ci
+export default defineConfig({
+  plugins: [
+    ...
+    Vueless(),
+    VuelessUnpluginComponents(),
+  ],
+  ...
+})
 ```
 
-- Build application:
+That's it! You can use components in your app now ✨
 
-```bash
-# for the dev / test / production servers
-cp .env.example .env
 
-yarn build
-# TIP: 📐
-# to analise and reduce the build size see the report.html in a project root folder.
-```
-
-- Run the built application from a `/dist` folder in **production mode**:
 
-```bash
-yarn preview
-```
-
-- Automated releases (new app release in GitLab and increase app version number):
-
-```bash
-# increase third app version number (0.0.X).
-yarn release
-
-# increase second app version number (0.X.0).
-yarn release:production
-
-# increase first app version number (X.0.0).
-release:production-major
-```
-
-- Update browserslist DB to the latest version (it changes yarn.lock only):
-
-```bash
-npx browserslist@latest --update-db
-```
-
-- **Note**: `yarn` automatically calls the` postinstall` command,
-  which generate components web-types for IDE (props autocomplete).
-If you need to do this manually, just use the command below:
-
-```bash
-node .mono/our.library.web-types-gen
-```
-
-## Capacitor (iOS & Android apps)
-
-- Update app src after `dist` or `capacitor.config.js` file changes:
-
-```bash
-npx cap copy
-```
-
-- Open iOS app locally:
-
-```bash
-npx cap open ios
-```
-
-- Open Android app locally:
-
-```bash
-npx cap open android
-```
-
-- Sync the app after new capacitor plugin installation:
-
-```bash
-npx cap sync
-```
-
-- Generate app icons and splash screens ([docs](https://github.com/ionic-team/capacitor-assets)):
-
-```bash
-npx @capacitor/assets generate --assetPath 'public/static/capacitor' --iconBackgroundColor '#FFFFFF' --iconBackgroundColorDark '#111827' --splashBackgroundColor '#F3F4F6' --splashBackgroundColorDark '#1F2937' --ios --android
-```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -19,7 +19,7 @@
     "sb:build": "STORYBOOK_VUELESS_ENV=1 storybook build",
     "sb:preview": "vite preview --host --outDir=storybook-static",
     "vueless:update": "yarn add -D file:../vite-plugin-vueless file:../vueless-storybook",
-    "vueless:prepare": "rm -rf dist && mkdir -p dist && cp -r src/* package.json LICENSE web-types.json README.md  dist/ && node .web-types-gen"
+    "vueless:prepare": "node .web-types-gen && rm -rf dist && mkdir -p dist && cp -r src/* package.json LICENSE web-types.json README.md  dist/"
   },
   "dependencies": {
     "@kyvg/vue3-notification": "^3.2.1",
@@ -59,9 +59,6 @@
     "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.4.19"
   },
-  "resolutions": {
-    "string-width": ">=4.2.3"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuelessjs/vueless.git"

package/preset.tailwind/index.js

@@ -0,0 +1,95 @@
+import colors from "tailwindcss/colors.js";
+import forms from "@tailwindcss/forms";
+import vuelessConfig from "../../../vueless.config.js";
+
+export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
+export const brandColors = [
+  "brand",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];
+
+/**
+ * Generates preset for TailwindCSS base on Vueless config.
+ * @returns {Object}
+ */
+export function vuelessPreset() {
+  const isProd = process.env.NODE_ENV === "production";
+  const brandColor = twColorWithOpacity("--color-brand");
+  const { brand, gray } = vuelessConfig;
+
+  let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
+  let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
+
+  if (brand === "grayscale") {
+    brandPalette = grayPalette;
+  }
+
+  const prodSafelist = getSafelist();
+  const devSafelist = [
+    {
+      pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
+      variants: ["hover", "focus", "focus-within", "active"],
+    },
+  ];
+
+  return {
+    content: [
+      "./index.html",
+      "./src/**/*.{js,ts,jsx,tsx,vue}",
+      "./vueless.config.{js,ts}",
+      "./node_modules/vueless/**/*.{js,ts,vue}",
+    ],
+    safelist: isProd ? prodSafelist : devSafelist,
+    theme: {
+      extend: {
+        colors: {
+          brand: { ...brandPalette, DEFAULT: brandColor },
+          gray: grayPalette,
+        },
+        fontSize: {
+          "2xs": ["0.625rem", "0.875rem"], //  10px
+        },
+      },
+    },
+    plugins: [forms],
+  };
+}
+
+/**
+ * Transform CSS variable with RGB numbers into CSS color.
+ * @returns {Function}
+ */
+function twColorWithOpacity(variableName) {
+  return ({ opacityValue }) => {
+    return opacityValue !== undefined
+      ? `rgba(var(${variableName}), ${opacityValue})`
+      : `rgb(var(${variableName}))`;
+  };
+}
+
+/**
+ * Convert sting patterns to RegExp.
+ * @returns {Array} - TailwindCSS safelist.
+ */
+function getSafelist() {
+  return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
+    ...rule,
+    pattern: new RegExp(rule.pattern),
+  }));
+}

package/service.storybook/index.js

@@ -1,4 +1,4 @@
-import { contributions } from "/web-types.json";
+import { contributions } from "../web-types.json";
 
 const getComponentData = (componentName) => {
   return contributions.html.tags.find((item) => item.name === componentName);

package/service.ui/index.js

@@ -2,7 +2,7 @@ import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
-import { brandColors, grayColors } from "../service.tailwind";
+import { brandColors, grayColors } from "../preset.tailwind";
 import vuelessConfig from "../../../vueless.config.js";
 
 /*

package/ui.button/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <button :id="id" :disabled="disabled" :data-cy="dataCy" v-bind="buttonAttrs" @click="onClick">
+  <button
+    :id="id"
+    ref="buttonRef"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="buttonAttrs"
+    @click="onClick"
+  >
     <!-- @slot Use it to add something before text. -->
     <slot v-if="!loading" name="left" />
 
@@ -16,11 +23,13 @@
 </template>
 
 <script setup>
-import ULoader from "../ui.other-loader";
+import { ref } from "vue";
+
 import UIService, { getRandomId } from "../service.ui";
+import ULoader from "../ui.other-loader";
 
-import { useAttrs } from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 import { UButton } from "./constants";
 
 /* Should be a string for correct web-types gen */
@@ -140,6 +149,10 @@ const emit = defineEmits(["click"]);
 
 const { textAttrs, buttonAttrs } = useAttrs(props);
 
+const buttonRef = ref(null);
+
+defineExpose({ buttonRef });
+
 function onClick(event) {
   if (props.disabled) return;
 

package/ui.button-link/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div tabindex="-1" v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
     <div v-if="hasSlotContent(slots['left'])" v-bind="leftSlotAttrs">
       <!-- @slot Use it to add something before text. -->
       <slot name="left" />
@@ -49,8 +49,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
-
+import { computed, useSlots, ref } from "vue";
 import UIService from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
@@ -181,6 +180,10 @@ const props = defineProps({
 
 const slots = useSlots();
 
+const wrapperRef = ref(null);
+
+defineExpose({ wrapperRef });
+
 const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
   useAttrs(props);
 

package/ui.container-page/configs/default.config.js

@@ -2,7 +2,7 @@ export default /*tw*/ {
   htmlBody: "bg-gray-50 group/body-gray",
   wrapperMobile: "overflow-x-hidden mb-[theme('spacing.mobile-menu-height')]",
   wrapper: {
-    base: "min-h-screen overflow-auto",
+    base: "min-h-screen overflow-auto UNotifyPage",
     variants: {
       width: {
         xs: "md:w-[25rem] md:max-[500px]:!w-full",

package/ui.data-table-cell/configs/default.config.js

@@ -1,13 +1,13 @@
 export default /*tw*/ {
   tableCell: {
     base: `
-      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top 
+      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top
       group-[]/body:last:p-5
     `,
     variants: {
       compact: {
         true: `
-          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3 
+          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3
           group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
         `,
       },

package/ui.dropdown-badge/index.vue

@@ -2,6 +2,7 @@
   <div v-bind="wrapperAttrs">
     <UBadge
       :id="id"
+      ref="badgeRef"
       :label="label"
       :size="size"
       :color="color"
@@ -10,6 +11,7 @@
       :data-cy="`${dataCy}-badge`"
       v-bind="badgeAttrs"
       @click.stop="onClickBadge"
+      @blur="onBlurBadge"
     >
       <template #right>
         <UIcon
@@ -192,6 +194,8 @@ const emit = defineEmits(["update:modelValue"]);
 
 const isShownOptions = ref(false);
 
+const badgeRef = ref(null);
+
 const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
   useAttrs(props, { isShownOptions });
 
@@ -227,7 +231,13 @@ function hideOptions() {
 }
 
 function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
+  if (!badgeRef.value?.wrapperRef?.contains(event.target)) {
+    hideOptions();
+  }
+}
+
+function onBlurBadge(event) {
+  if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
     hideOptions();
   }
 }

package/ui.dropdown-button/index.vue

@@ -2,6 +2,7 @@
   <div v-bind="wrapperAttrs">
     <UButton
       :id="id"
+      ref="buttonRef"
       :label="label"
       :size="size"
       :variant="variant"
@@ -13,6 +14,7 @@
       :data-cy="`${dataCy}-button`"
       v-bind="buttonAttrs"
       @click.stop="onClickButton"
+      @blur="onBlurButton"
     >
       <template #right>
         <UIcon
@@ -39,7 +41,10 @@
       :value-key="valueKey"
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
+      tabindex="-1"
       v-bind="listAttrs"
+      @mousedown.stop
+      @click.stop
     />
   </div>
 </template>
@@ -54,8 +59,8 @@ import UDropdownList from "../ui.dropdown-list";
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import { UDropdownButton, BUTTON_VARIANT } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDropdownButton", inheritAttrs: false });
@@ -217,6 +222,7 @@ provide("hideDropdownOptions", () => hideOptions);
 const emit = defineEmits(["update:modelValue"]);
 
 const isShownOptions = ref(false);
+const buttonRef = ref(null);
 
 const {
   config,
@@ -264,7 +270,13 @@ function hideOptions() {
 }
 
 function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
+  if (!buttonRef.value?.buttonRef?.contains(event.target)) {
+    hideOptions();
+  }
+}
+
+function onBlurButton(event) {
+  if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
     hideOptions();
   }
 }

package/ui.dropdown-link/index.vue

@@ -3,6 +3,7 @@
     <div v-bind="triggerAttrs">
       <ULink
         :id="id"
+        ref="linkRef"
         :label="label"
         :size="size"
         :color="color"
@@ -13,6 +14,7 @@
         :data-cy="`${dataCy}-link`"
         v-bind="linkAttrs"
         @click.stop="onClickLink"
+        @blur="onBlurLink"
       >
         <template #right>
           <UIcon
@@ -210,6 +212,8 @@ const emit = defineEmits(["update:modelValue"]);
 
 const isShownOptions = ref(false);
 
+const linkRef = ref(null);
+
 const {
   config,
   listWrapperAttrs,
@@ -254,7 +258,13 @@ function hideOptions() {
 }
 
 function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
+  if (!linkRef.value?.wrapperRef?.contains(event.target)) {
+    hideOptions();
+  }
+}
+
+function onBlurLink(event) {
+  if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
     hideOptions();
   }
 }

package/ui.form-calendar/configs/default.config.js

@@ -40,7 +40,7 @@ export default /*tw*/ {
   activeMonth: "bg-gray-100",
   yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
   year: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100 
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
   selectedYear: "bg-gray-900 hover:bg-gray-900 text-white",

package/ui.form-checkbox/index.vue

@@ -111,7 +111,7 @@ const props = defineProps({
 
   /**
    * Label placement.
-   * @values left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
     type: String,

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

@@ -6,7 +6,7 @@
       :disabled="disabled"
       :error="error"
       :size="size"
-      placement="topWithDesc"
+      align="topWithDesc"
       :data-cy="dataCy"
       v-bind="labelAttrs"
     >

package/ui.form-date-picker-range/configs/default.config.js

@@ -7,14 +7,14 @@ export default /*tw*/ {
   },
   buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-gray-600/[.15] max-md:justify-between",
   button: `
-    shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none 
-  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15] 
+    shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none
+  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15]
   active:bg-zinc-200 disabled:cursor-not-allowed
   `,
   buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-gray-600/[.15] bg-zinc-200",
   buttonWrapperActive: "ring-4 ring-gray-600/[.15]",
   shiftRangeButton: `
-    focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none 
+    focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none
     hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:ring-0 focus:ring-gray-600/[.15] active:bg-zinc-200
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
@@ -29,7 +29,7 @@ export default /*tw*/ {
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
-    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100 
+    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100
     px-1.5 py-2.5 text-center text-xs font-medium text-gray-900 hover:bg-gray-200
     [&_span]:block [&_span]:font-normal [&_span]:text-gray-500
   `,

package/ui.form-input/configs/default.config.js

@@ -66,7 +66,7 @@ export default /*tw*/ {
     error: false,
     readonly: false,
     disabled: false,
-    labelOutside: false,
+    labelAlign: "topInside",
     noAutocomplete: false,
   },
 };

package/ui.form-input/index.vue

@@ -123,11 +123,12 @@ const props = defineProps({
   },
 
   /**
-   * Show label outside the input block.
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInput).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInput).default.labelAlign,
   },
 
   /**
@@ -285,10 +286,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
 const passwordIconName = computed(() => {
   return isShownPassword.value
     ? config.value.passwordVisibleIconName