vueless 0.0.90 → 0.0.92

package/composable.ui/index.js

@@ -176,6 +176,11 @@ function mergeConfigs({
     if (isGlobalConfig || isPropsConfig) {
       if (key === "strategy") {
         config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
+      } else if (key === "safelist") {
+        if (propsConfig[key]) {
+          // eslint-disable-next-line no-console
+          console.warn("Passing component safelist by `config` prop is not supported.");
+        }
       } else if (key === "defaultVariants") {
         config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
       } else if (key === "compoundVariants") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -21,7 +21,7 @@
     "sb:dev": "storybook dev -p 6006 --docs --no-open",
     "sb:build": "storybook build --docs",
     "sb:preview": "vite preview --host --outDir=storybook-static",
-    "package:prepare": "npx @vueless/web-types && node icons.prepare && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node dist.prepare"
+    "package: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.dist"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",

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

@@ -21,7 +21,7 @@ export default /*tw*/ {
   },
   selectedRowsCount: "flex items-center pr-4 font-medium text-gray-900",
   selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  headerStickyLoader: "top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
+  headerStickyLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
   innerWrapper: "overflow-auto rounded-lg border border-gray-200",
   innerWrapperSelected: "!rounded-t-none border-t-0",
   table: "min-w-full border-none bg-white text-sm w-full",
@@ -40,7 +40,7 @@ export default /*tw*/ {
     },
   },
   headerSelectAllCheckbox: "",
-  tableLoader: "!top-auto",
+  tableLoader: "absolute !top-auto",
   moreRow: "!px-0 !py-4 first:mx-auto",
   moreRowHidden: "!p-0",
   checkedRow: "transition duration-100 bg-gray-100",

package/ui.data-table/index.vue

@@ -46,7 +46,6 @@
       <ULoaderTop
         v-if="resource && isHeaderSticky"
         :resource-names="resource"
-        position="absolute"
         v-bind="headerStickyLoaderAttrs"
       />
     </div>
@@ -89,12 +88,7 @@
           </tr>
 
           <!-- TODO: Change to loaders config after laoader refactoring -->
-          <ULoaderTop
-            v-if="resource"
-            :resource-names="resource"
-            position="absolute"
-            v-bind="tableLoaderAttrs"
-          />
+          <ULoaderTop v-if="resource" :resource-names="resource" v-bind="tableLoaderAttrs" />
         </thead>
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">

package/ui.form-date-picker-range/index.vue

@@ -423,7 +423,9 @@ const rangeInputEndRef = ref(null);
 const localValue = computed({
   get: () => props.modelValue,
   set: (value) => {
-    emit("update:modelValue", value);
+    if (value.from && value.to) {
+      emit("update:modelValue", value);
+    }
 
     activeDate.value = getDateFromUnixTimestamp(value.from || new Date());
   },

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

@@ -8,6 +8,11 @@ export default /*tw*/ {
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
+      size: {
+        sm: "pt-2 pb-2",
+        md: "pt-2.5 pb-2.5",
+        lg: "pt-3 pb-3",
+      },
       error: {
         true: `
           border-red-300 hover:border-red-300

package/ui.loader-top/composables/attrs.composable.js

@@ -15,13 +15,7 @@ export function useAttrs(props) {
   });
 
   const progressClasses = computed(() =>
-    setColor(
-      cvaProgress({
-        position: props.position,
-        color: props.color,
-      }),
-      props.color,
-    ),
+    setColor(cvaProgress({ color: props.color }), props.color),
   );
 
   const progressAttrs = getAttrs("progress", { classes: progressClasses.value });

package/ui.loader-top/configs/default.config.js

@@ -2,10 +2,6 @@ export default /*tw*/ {
   progress: {
     base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-500",
     variants: {
-      position: {
-        fixed: "fixed",
-        absolute: "absolute",
-      },
       error: {
         true: "bg-red-500",
       },
@@ -14,7 +10,6 @@ export default /*tw*/ {
   progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
   defaultVariants: {
     color: "blue",
-    position: "fixed",
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
 };

package/ui.text-header/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "text-{color}-600 !leading-none",
+    base: "text-{color}-600",
     variants: {
       size: {
         xs: "text-lg",
@@ -20,6 +20,9 @@ export default /*tw*/ {
         white: "text-white",
         grayscale: "text-gray-900",
       },
+      multiline: {
+        true: "!leading-none",
+      },
       underlined: {
         true: "border-b border-{color}-600",
       },
@@ -39,6 +42,7 @@ export default /*tw*/ {
     color: "grayscale",
     weight: "medium",
     size: "md",
+    multiline: false,
     underlined: false,
   },
   safelist: (colors) => [{ pattern: `text-(${colors})-600` }, { pattern: `border-(${colors})-600` }],

package/ui.text-header/index.stories.js

@@ -102,5 +102,12 @@ Sizes.args = {};
 export const Underlined = SizesTemplate.bind({});
 Underlined.args = { underlined: true };
 
+export const Multiline = SizesTemplate.bind({});
+Multiline.args = {
+  size: "2xl",
+  multiline: true,
+  label: "Some very long header you ever may imagine in your whole long and beautiful life",
+};
+
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {};

package/ui.text-header/index.vue

@@ -54,6 +54,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UHeader).default.color,
   },
 
+  /**
+   * Return default line height to the component (it may be useful for multiline headers).
+   */
+  multiline: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UHeader).default.multiline,
+  },
+
   /**
    * Show the underline.
    */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3044,6 +3044,15 @@
               },
               "default": "grayscale"
             },
+            {
+              "name": "multiline",
+              "description": "Return default line height to the component (it may be useful for multiline headers).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "underlined",
               "description": "Show the underline.",