vueless 0.0.4 → 0.0.6

package/src/ui.image-avatar/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    :title="label"
+    :style="bgImage"
+    :data-cy="dataCy"
+    v-bind="avatarAttrs"
+    @click="onClick"
+    v-text="labelFirstLetters"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import defaultAvatar from "./default-avatar.png";
+
+import UIService from "../service.ui";
+
+import { UAvatar } from "./constants/index";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({
+  name: "UAvatar",
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /**
+   * Set avatar's image. It may be a URL or path from the "public" folder.
+   */
+  src: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * The size of the avatar.
+   * @values xs, sm, md, lg, xl, 2xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.size,
+  },
+
+  /**
+   * The color of the avatar.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.color,
+  },
+
+  /**
+   * Avatar label (user name, nickname, etc.).
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * The rounded of the avatar.
+   * @values sm, md, lg, full
+   */
+  rounded: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.rounded,
+  },
+
+  /**
+   * Active / disabled avatar border.
+   */
+  bordered: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAvatar).default.bordered,
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const labelFirstLetters = computed(() => {
+  const [firstWord, secondWord] = props.label.split(" ");
+
+  const firstWordLetter = firstWord ? firstWord[0].toUpperCase() : "";
+  const secondWordLetter = secondWord ? secondWord[0].toUpperCase() : "";
+
+  return firstWordLetter + secondWordLetter;
+});
+
+const imgSrc = computed(() => {
+  let src;
+
+  if (props.src) {
+    src = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.path;
+  } else if (!props.label && !props.src) {
+    src = defaultAvatar;
+  }
+
+  return src;
+});
+
+const bgImage = computed(() => {
+  return `background-image: url(${imgSrc.value});`;
+});
+
+const { avatarAttrs } = useAttrs(props);
+
+function onClick(event) {
+  emit("click", event);
+}
+</script>

package/src/ui.image-icon/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/src/ui.image-icon/index.stories.js

@@ -0,0 +1,110 @@
+import { getArgTypes } from "../service.storybook";
+
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+
+export default {
+  id: "6010",
+  title: "Images & Icons / Icon",
+  component: UIcon,
+  args: {
+    name: "close",
+  },
+  argTypes: {
+    ...getArgTypes(UIcon.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UIcon v-bind="args"/>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UIcon, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <UIcon
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :color="color"
+        name="close"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UIcon, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UIcon
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        name="close"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UIcon, URow },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UIcon
+        v-for="(variant, index) in variants"
+        :variant="variant"
+        name="close"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const variants = VariantsTemplate.bind({});
+variants.args = { color: "red" };
+
+export const tooltip = DefaultTemplate.bind({});
+tooltip.args = { tooltip: "Some text" };
+
+export const interactive = DefaultTemplate.bind({});
+interactive.args = { interactive: true };
+
+export const pill = ColorsTemplate.bind({});
+pill.args = { pill: true };

package/src/ui.image-logo/configs/default.config.js

@@ -0,0 +1,38 @@
+export default /*tw*/ {
+  wrapper: "flex items-center",
+  logo: {
+    base: "relative",
+    variants: {
+      size: {
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+      },
+    },
+  },
+  label: "bg-red-500 text-xs font-medium text-white rounded-full absolute -right-7 -top-1.5 px-2 py-0.5",
+  image: "h-full w-full bg-contain bg-center bg-no-repeat",
+  title: {
+    base: "whitespace-nowrap px-3.5 font-bold text-gray-900",
+    variants: {
+      size: {
+        "2xs": "text-xs",
+        xs: "text-sm",
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-2xl",
+        xl: "text-3xl",
+        "2xl": "text-4xl",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    titleSize: "md",
+  },
+};

package/src/ui.image-logo/index.stories.js

@@ -0,0 +1,84 @@
+import { getArgTypes } from "../service.storybook";
+
+import ULogo from "../ui.image-logo";
+import URow from "../ui.container-row";
+
+export default {
+  id: "6020",
+  title: "Images & Icons / Logo",
+  component: ULogo,
+  args: {
+    src: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
+  },
+  argTypes: {
+    ...getArgTypes(ULogo.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULogo },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULogo v-bind="args"/>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULogo, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULogo
+        v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
+        :size="size"
+        :title="size"
+      />
+    </URow>
+  `,
+});
+
+const SizesTitleTemplate = (args, { argTypes } = {}) => ({
+  components: { ULogo, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.sizeTitle.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULogo
+        v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
+        :size-title="size"
+        :title="size"
+        size="md"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const sizesTitle = SizesTitleTemplate.bind({});
+sizesTitle.args = {};
+
+export const title = DefaultTemplate.bind({});
+title.args = { title: "some title" };
+
+export const label = DefaultTemplate.bind({});
+label.args = { label: "label" };

package/src/ui.loader-top/components/TopProgress.vue

@@ -0,0 +1,277 @@
+<template>
+  <transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
+    <div v-if="show" class="top-progress" :style="barStyle">
+      <div class="peg" :style="pegStyle"></div>
+    </div>
+  </transition>
+</template>
+
+<script>
+function clamp(n, min, max) {
+  if (n < min) {
+    return min;
+  }
+
+  if (n > max) {
+    return max;
+  }
+
+  return n;
+}
+
+let queue = (() => {
+  let pending = [];
+
+  function next() {
+    let fn = pending.shift();
+
+    if (fn) {
+      fn(next);
+    }
+  }
+
+  return (fn) => {
+    pending.push(fn);
+
+    if (pending.length === 1) {
+      next();
+    }
+  };
+})();
+
+export default {
+  name: "VueTopprogress",
+
+  props: {
+    speed: {
+      type: Number,
+      default: 150,
+    },
+
+    color: {
+      type: String,
+      default: "#29d",
+    },
+
+    colorShadow: {
+      type: String,
+      default: "",
+    },
+
+    errorColor: {
+      type: String,
+      default: "#f44336",
+    },
+
+    trickle: {
+      type: Boolean,
+      default: true,
+    },
+
+    trickleSpeed: {
+      type: Number,
+      default: 100,
+    },
+
+    easing: {
+      type: String,
+      default: "linear",
+    },
+
+    height: {
+      type: Number,
+      default: 3,
+    },
+
+    minimum: {
+      type: Number,
+      default: 0.8,
+    },
+
+    maximum: {
+      type: Number,
+      default: 97.5,
+    },
+
+    zIndex: {
+      type: Number,
+      default: 9999,
+    },
+  },
+
+  data() {
+    return {
+      error: false,
+      show: false,
+      progress: 0,
+      opacity: 1,
+      status: null,
+      isPaused: false,
+    };
+  },
+
+  computed: {
+    progressColor() {
+      return this.error ? this.errorColor : this.color;
+    },
+
+    isStarted() {
+      return typeof this.status === "number";
+    },
+
+    boxShadow() {
+      return this.colorShadow || this.progressColor;
+    },
+
+    barStyle() {
+      return {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        right: "0",
+        width: `${this.progress}%`,
+        height: `${this.height}px`,
+        backgroundColor: this.progressColor,
+        transition: `all ${this.speed}ms ${this.easing}`,
+        opacity: `${this.opacity}`,
+        zIndex: `${this.zIndex}`,
+      };
+    },
+
+    pegStyle() {
+      return {
+        display: "block",
+        position: "absolute",
+        right: "0",
+        width: "100px",
+        height: "100%",
+        opacity: this.progress ? "1" : "0",
+        boxShadow: `0 0 10px ${this.boxShadow}, 0 0 5px ${this.boxShadow}`,
+        transform: "rotate(3deg) translate(0px, -4px)",
+      };
+    },
+  },
+
+  methods: {
+    beforeEnter() {
+      this.opacity = 0;
+      this.progress = 0;
+      this.width = 0;
+    },
+
+    enter(el, done) {
+      this.opacity = 1;
+      done();
+    },
+
+    afterEnter() {
+      this._runStart();
+    },
+
+    _work() {
+      setTimeout(() => {
+        if (!this.isStarted || this.isPaused) {
+          return;
+        }
+
+        this.increase();
+        this._work();
+      }, this.trickleSpeed);
+    },
+
+    _runStart() {
+      this.status = this.progress === 100 ? null : this.progress;
+
+      if (this.trickle) {
+        this._work();
+      }
+    },
+
+    start() {
+      this.isPaused = false;
+
+      if (this.show) {
+        this._runStart();
+      } else {
+        this.show = true;
+      }
+    },
+
+    set(amount) {
+      this.isPaused = false;
+
+      let o;
+
+      if (this.isStarted) {
+        o = amount < this.progress ? clamp(amount, 0, 100) : clamp(amount, this.minimum, 100);
+      } else {
+        o = 0;
+      }
+
+      this.status = o === 100 ? null : o;
+
+      queue((next) => {
+        this.progress = o;
+
+        if (o === 100) {
+          setTimeout(() => {
+            this.opacity = 0;
+            setTimeout(() => {
+              this.show = false;
+              this.error = false;
+              next();
+            }, this.speed);
+          }, this.speed);
+        } else {
+          setTimeout(next, this.speed);
+        }
+      });
+    },
+
+    increase(amount) {
+      let o = this.progress;
+
+      if (o < 100 && typeof amount !== "number") {
+        if (o >= 0 && o < 25) {
+          amount = Math.random() * 3 + 3;
+        } else if (o >= 25 && o < 50) {
+          amount = Math.random() * 3;
+        } else if (o >= 50 && o < 85) {
+          amount = Math.random() * 2;
+        } else if (o >= 85 && o < 99) {
+          amount = 0.5;
+        } else {
+          amount = 0;
+        }
+      }
+
+      this.set(clamp(o + amount, 0, this.maximum));
+    },
+
+    decrease(amount) {
+      if (this.progress === 0) {
+        return;
+      }
+
+      this.increase(-amount);
+    },
+
+    done() {
+      this.set(100);
+    },
+
+    getProgress() {
+      return this.status ? this.progress : 0;
+    },
+
+    pause() {
+      this.isPaused = true;
+    },
+
+    fail() {
+      this.error = true;
+      this.done();
+    },
+  },
+};
+</script>

package/src/ui.navigation-pagination/composables/attrs.composable.js

@@ -0,0 +1,41 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+import { cx } from "../../service.ui";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const listAttrs = getAttrs("list");
+  const itemAttrsRaw = getAttrs("item");
+  const ellipsisAttrs = getAttrs("ellipsis");
+  const navigationButtonAttrs = getAttrs("navigationButton", { isComponent: true });
+  const pageButtonAttrsRaw = getAttrs("pageButton", { isComponent: true });
+
+  const itemAttrs = computed(() => (page = 0) => {
+    const itemClass = page && !isFinite(page.number) && ellipsisAttrs;
+
+    return {
+      ...itemAttrsRaw.value,
+      class: cx([itemAttrsRaw.value.class, itemClass]),
+    };
+  });
+
+  const pageButtonAttrs = computed(() => (page) => {
+    const pageButtonActiveClasses = page.isActive && config.value.pageButtonActive;
+
+    return {
+      ...pageButtonAttrsRaw.value,
+      class: cx([pageButtonAttrsRaw.value.class, pageButtonActiveClasses]),
+    };
+  });
+
+  return {
+    listAttrs,
+    itemAttrs,
+    navigationButtonAttrs,
+    pageButtonAttrs,
+    ellipsisAttrs,
+  };
+}

package/src/ui.navigation-pagination/configs/default.config.js

@@ -0,0 +1,24 @@
+export default /*tw*/ {
+  list: "flex",
+  item: "h-9 min-w-9 flex items-center justify-center",
+  ellipsis: "hidden md:flex",
+  navigationButton: "size-full rounded font-normal disabled:hover:bg-transparent",
+  pageButton: "size-full rounded font-normal disabled:hover:bg-transparent",
+  pageButtonActive: `
+    rounded !bg-gray-900/15
+    hover:!text-gray-900 !hover:bg-gray-900/15 disabled:hover:bg-gray-900/15
+    focus:outline-none
+  `,
+  defaultVariants: {
+    limit: 5,
+    perPage: 20,
+    prevLabel: "‹",
+    nextLabel: "›",
+    firstLabel: "«",
+    lastLabel: "»",
+    disabled: false,
+    ellipsis: true,
+    showFirst: true,
+    showLast: true,
+  },
+};