vueless 0.0.179 → 0.0.180

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

@@ -1,4 +1,5 @@
 export default /*tw*/ {
+  wrapper: "h-auto flex flex-col gap-1.5 w-full",
   progress: {
     base: `
       block appearance-none border-none overflow-hidden w-full
@@ -26,6 +27,37 @@ export default /*tw*/ {
       },
     },
   },
+  indicator: {
+    base: "w-full flex justify-end font-medium text-brand-500 min-w-fit",
+    variants: {
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-md",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+      },
+    },
+  },
+  firstStep: "text-gray-500",
+  step: {
+    base: "flex w-full justify-end text-brand-500",
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-md",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+      },
+    },
+  },
   defaultVariants: {
     color: "brand",
     size: "md",

package/ui.navigation-progress/index.stories.js

@@ -1,5 +1,7 @@
 import UProgress from "./index.vue";
 import UButton from "../ui.button/index.vue";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -16,7 +18,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UProgress, UButton },
+  components: { UProgress, UButton, UIcon },
   setup() {
     return { args };
   },
@@ -35,11 +37,134 @@ const DefaultTemplate = (args) => ({
     },
   },
   template: `
-    <UProgress :value="progress" />
+    <UProgress v-bind="args" :value="progress">
+      ${args.slotTemplate}
+    </UProgress>
 
     <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
   `,
 });
 
+const StepsTemplate = (args) => ({
+  components: { UProgress, UButton, UIcon },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      progress: 1,
+      max: ["Step 1", "Step 2", "Step 3"],
+    };
+  },
+  methods: {
+    updateProgress() {
+      this.progress += 1;
+
+      if (this.progress > 3) {
+        this.progress = 0;
+      }
+    },
+  },
+  template: `
+    <UProgress v-bind="args" :max="max" :value="progress">
+      ${args.slotTemplate}
+    </UProgress>
+
+    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UProgress, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  data() {
+    return {
+      progress: 10,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UProgress
+        v-for="(color, index) in colors"
+        :key="index"
+        :color="color"
+        v-bind="args" 
+        :value="progress" 
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UProgress, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  data() {
+    return {
+      progress: 10,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UProgress
+        v-for="(size, index) in sizes"
+        :key="index"
+        :size="size"
+        v-bind="args" 
+        :value="progress" 
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
+
+export const Indicator = DefaultTemplate.bind({});
+Indicator.args = { indicator: true };
+
+export const Steps = StepsTemplate.bind({});
+Steps.args = {};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const IndicatorSlot = DefaultTemplate.bind({});
+IndicatorSlot.args = {
+  indicator: true,
+  slotTemplate: `
+  <template #indicator>
+    <UIcon
+      name="star"
+      color="black"
+    />
+  </template>
+`,
+};
+
+export const stepSlot = StepsTemplate.bind({});
+stepSlot.args = {
+  slotTemplate: `
+  <template #step-0>
+    💻
+  </template>
+  <template #step-1>
+    🧇
+  </template>
+  <template #step-2>
+    😴
+  </template>
+`,
+};

package/ui.navigation-progress/index.vue

@@ -1,13 +1,37 @@
 <template>
-  <progress v-bind="progressAttrs" :max="max" :value="value" />
+  <div v-bind="wrapperAttrs">
+    <div v-if="indicator" v-bind="indicatorAttrs" :style="{ width: progressPercent }">
+      <slot name="indicator" :percent="progressPercent" :value="value" :max="realMax">
+        {{ progressPercent }}
+      </slot>
+    </div>
+
+    <progress v-bind="progressAttrs" :max="realMax" :value="value" />
+
+    <div v-if="isSteps" v-bind="stepAttrs(!value && config.firstStep)">
+      <template v-for="(step, index) in max" :key="index">
+        <slot
+          v-if="isActiveStep(index)"
+          :name="`step-${index}`"
+          :step="step"
+          :value="value"
+          :max="max"
+        >
+          {{ step }}
+        </slot>
+      </template>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { computed } from "vue";
+
 import UIService from "../service.ui";
+import { useAttrs } from "./composables/attrs.composable";
 
-import { UProgress } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import { UProgress } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UProgress", inheritAttrs: false });
@@ -26,7 +50,7 @@ const props = defineProps({
    * Progress max amount of steps.
    */
   max: {
-    type: Number,
+    type: [Number, Array],
     default: 100,
   },
 
@@ -47,7 +71,31 @@ const props = defineProps({
     type: String,
     default: UIService.get(defaultConfig, UProgress).default.color,
   },
+
+  /**
+   * Progress indicator visibility.
+   */
+  indicator: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UProgress).default.indicator,
+  },
 });
 
-const { progressAttrs } = useAttrs(props);
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, config } = useAttrs(props);
+
+const isSteps = computed(() => Array.isArray(props.max));
+
+const realMax = computed(() => {
+  if (isSteps.value) {
+    return props.max.length;
+  }
+
+  return Number(props.max);
+});
+
+const progressPercent = computed(() => `${(props.value / realMax.value) * 100}%`);
+
+function isActiveStep(index) {
+  return index + 1 == props.value;
+}
 </script>

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

@@ -15,22 +15,22 @@ export default /*tw*/ {
   },
   body: {
     base: `
-      flex gap-2 items-baseline font-normal
+      flex gap-2 items-baseline
+      font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
       [&_ul]:font-normal [&_ol]:font-normal
-      [&_ul]:leading-[1.125rem] [&_ol]:leading-[1.125rem]
-      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:leading-normal [&_ol]:leading-normal
       [&_ul]:list-disc [&_ol]:list-decimal
       [&_ul]:ml-2 [&_ol]:ml-2
     `,
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        xs: "text-xs space-y-2",
+        sm: "text-sm space-y-3",
+        md: "text-base space-y-4",
+        lg: "text-lg space-y-5",
       },
     },
   },

package/ui.text-block/composables/attrs.composable.js

@@ -23,9 +23,11 @@ export function useAttrs(props) {
   );
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const htmlAttrs = getAttrs("html");
 
   return {
     wrapperAttrs,
+    htmlAttrs,
     hasSlotContent,
   };
 }

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

@@ -1,22 +1,21 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      space-y-4 font-normal leading-normal
+      font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
       [&_ul]:font-normal [&_ol]:font-normal
-      [&_ul]:leading-[1.125rem] [&_ol]:leading-[1.125rem]
-      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:leading-normal [&_ol]:leading-normal
       [&_ul]:list-disc [&_ol]:list-decimal
       [&_ul]:ml-2 [&_ol]:ml-2
     `,
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        xs: "text-xs space-y-2",
+        sm: "text-sm space-y-3",
+        md: "text-base space-y-4",
+        lg: "text-lg space-y-5",
       },
       align: {
         left: "text-left",
@@ -28,6 +27,7 @@ export default /*tw*/ {
       },
     },
   },
+  html: "",
   defaultVariants: {
     size: "md",
     align: "left",

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

@@ -13,29 +13,29 @@ export default {
   argTypes: {
     ...getArgTypes(UText.name),
   },
-  args: {
-    slotTemplate: `
-    <template #default>
-      <p>
-        <b>Lorem ipsum dolor sit amet</b><u>, consectetur adipiscing elit,
-        </u><em> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>
-        <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
-      </p>
-    </template>
-  `,
-  },
+  args: {},
 };
 
+const defaultTemplate = `
+  <template #default>
+    <p>
+      <b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit,
+       sed do <u>eiusmod</u> tempor incididunt ut <i>labore</i> et dolore magna aliqua.
+      <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+    </p>
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
-  components: { UText },
+  components: { UText, URow },
   setup() {
     const slots = getSlotNames(UText.name);
 
     return { args, slots };
   },
   template: `
-    <UText v-bind="args" >
-      ${args.slotTemplate}
+    <UText v-bind="args">
+      ${args.slotTemplate || defaultTemplate}
     </UText>
   `,
 });
@@ -56,7 +56,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         v-bind="args"
         :key="index"
       >
-        ${args.slotTemplate}
+        ${args.slotTemplate || defaultTemplate}
       </UText>
     </URow>
   `,
@@ -97,7 +97,7 @@ export const list = DefaultTemplate.bind({});
 list.args = {
   slotTemplate: `
      <template #default>
-       <URow>
+       <URow gap="2xl">
          <ul>
            <li> Lorem ipsum dolor </li>
            <li> Lorem ipsum dolor </li>

package/ui.text-block/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-bind="wrapperAttrs" :data-cy="dataCy">
-    <!-- @slot Use it to add something. -->
-    <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
+    <!-- @slot Use it to add something inside. -->
+    <div v-if="!hasSlotContent($slots['default'])" v-bind="htmlAttrs" v-html="html" />
     <slot />
   </div>
 </template>
@@ -44,7 +44,7 @@ const props = defineProps({
   },
 
   /**
-   * Remove line height.
+   * Remove line height (useful for 1-line text).
    */
   line: {
     type: Boolean,
@@ -68,5 +68,5 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs, hasSlotContent } = useAttrs(props);
+const { wrapperAttrs, htmlAttrs, hasSlotContent } = useAttrs(props);
 </script>