vueless 0.0.95 → 0.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -7,8 +7,8 @@ export default /*tw*/ {
       },
     },
   },
-  headerCheckboxWrapper: "w-[3.75rem]",
-  header: "border-b border-gray-200 ",
+  headerCheckboxWrapper: "",
+  header: "border-b border-gray-200",
   headerRow: "",
   headerCell: "p-4 text-sm font-normal text-gray-500 text-left",
   headerSelectAllCheckbox: "",
@@ -17,17 +17,10 @@ export default /*tw*/ {
   stickyHeaderLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
   stickyHeaderActive: "fixed top-0 border  border-gray-200 bg-white rounded-none",
   stickyHeaderActions: "rounded-t-lg border border-blue-200 !bg-blue-50",
-  stickyHeaderColumn: {
-    base: "flex-none text-sm font-normal text-gray-500 px-[1.125rem] py-4 [&:nth-child(2)]:pl-0",
-    variants: {
-      compact: {
-        true: "!p-4 [&:nth-child(2)]:!pl-0",
-      },
-    },
-  },
+  stickyHeaderColumn: "flex-none text-sm font-normal text-gray-500 p-4",
   selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
   selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  innerWrapper: "overflow-auto rounded-lg border border-gray-200",
+  innerWrapper: "overflow-visible rounded-lg border border-gray-200",
   innerWrapperSelected: "!rounded-t-none border-t-0",
   table: "min-w-full border-none text-sm w-full",
   tableLoader: "absolute !top-auto",
@@ -45,8 +38,8 @@ export default /*tw*/ {
   collapseIconName: "remove",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
-  checkboxBodyWrapperCell: "w-[3.75rem] py-3 px-4 align-top",
-  bodyCell: "",
+  checkboxBodyWrapperCell: "py-3 px-4 align-top",
+  bodyCell: "overflow-visible",
   tableCheckbox: "",
   dateSeparator: "",
   toggleItemButton: "flex relative -top-px",

package/ui.form-label/index.vue

@@ -7,8 +7,14 @@
   >
     <slot />
 
-    <div v-bind="labelWrapperAttrs">
-      <label :for="props.for" :data-cy="`${dataCy}-label`" v-bind="labelAttrs" v-text="label" />
+    <div v-if="label || error || description" v-bind="labelWrapperAttrs">
+      <label
+        v-if="label"
+        :for="props.for"
+        :data-cy="`${dataCy}-label`"
+        v-bind="labelAttrs"
+        v-text="label"
+      />
 
       <div
         v-if="error"
@@ -30,6 +36,7 @@
 
   <div v-else v-bind="wrapperAttrs">
     <label
+      v-if="label"
       ref="labelRef"
       :for="props.for"
       :data-cy="`${dataCy}-label`"

package/ui.progress/composables/attrs.composable.js

@@ -0,0 +1,32 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { progress } = config.value;
+
+  const cvaProgress = cva({
+    base: progress.base,
+    variants: progress.variants,
+    compoundVariants: progress.compoundVariants,
+  });
+
+  const progressClasses = computed(() =>
+    setColor(
+      cvaProgress({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const progressAttrs = getAttrs("progress", { classes: progressClasses });
+
+  return {
+    progressAttrs,
+  };
+}

package/ui.progress/configs/default.config.js

@@ -0,0 +1,34 @@
+export default /*tw*/ {
+  progress: {
+    base: `
+      block appearance-none border-none overflow-hidden w-full 
+      [&::-webkit-progress-bar]:w-full h-2 rounded-full [&::-webkit-progress-bar]:rounded-full 
+      [&::-webkit-progress-bar]:bg-{color}-200 [@supports(selector(&::-moz-progress-bar))]:bg-{color}-200 
+      [&::-webkit-progress-value]:rounded-full  [&::-webkit-progress-value]:transition-all 
+      [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full text-{color}-500
+      [&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current indeterminate:relative 
+      indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full 
+      [&:indeterminate::-moz-progress-bar]:rounded-full
+    `,
+    variants: {
+      color: {
+        white: "bg-white",
+        grayscale: "bg-gray-900",
+      },
+      size: {
+        "2xs": "h-px",
+        xs: "h-0.5",
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3",
+        xl: "h-4",
+        "2xl": "h-5",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "green",
+    size: "md",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-200` }, { pattern: `text-(${colors})-500` }],
+};

package/ui.progress/constants/index.js

@@ -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 UProgress = "UProgress";

package/ui.progress/index.stories.js

@@ -0,0 +1,42 @@
+import UProgress from "./index.vue";
+import UButton from "../ui.button/index.vue";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  id: "9015",
+  title: "Other / Progress",
+  component: UProgress,
+  argTypes: {
+    ...getArgTypes(UProgress.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UProgress, UButton },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      progress: 10,
+    };
+  },
+  methods: {
+    updateProgress() {
+      this.progress += 10;
+
+      if (this.progress > 100) {
+        this.progress = 0;
+      }
+    },
+  },
+  template: `
+    <UProgress :value="progress" />
+
+    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};

package/ui.progress/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <progress v-bind="progressAttrs" :max="max" :value="value" />
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UProgress } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UProgress", inheritAttrs: false });
+
+const props = defineProps({
+  value: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UProgress).default.size,
+  },
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UProgress).default.color,
+  },
+});
+
+const { progressAttrs } = useAttrs(props);
+</script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5444,6 +5444,49 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "UProgress",
+          "description": "",
+          "attributes": [
+            {
+              "name": "value",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            },
+            {
+              "name": "max",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "100"
+            },
+            {
+              "name": "size",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "md"
+            },
+            {
+              "name": "color",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "green"
+            }
+          ],
+          "source": {
+            "module": "vueless/ui.progress/index.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "URadio",
           "description": "",