vueless 0.0.95 → 0.0.96

package/package.json

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

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.96",
   "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": "",