vueless 0.0.2 → 0.0.3

package/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/ui.image-logo/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 ULogo = "ULogo";

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

@@ -4,11 +4,11 @@ import ULogo from "vueless/ui.image-logo";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "6020",
   title: "Images & Icons / Logo",
   component: ULogo,
   args: {
-    route: "",
-    path: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
+    src: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
   },
   argTypes: {
     ...getArgTypes(ULogo.name),
@@ -25,7 +25,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { ULogo, URow },
   setup() {
     return {
@@ -37,16 +37,16 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <ULogo
         v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
         :size="size"
         :title="size"
-        v-bind="args"
-        :key="index"
       />
     </URow>
   `,
 });
 
-const SizesTitleTemplate = (args, { argTypes }) => ({
+const SizesTitleTemplate = (args, { argTypes } = {}) => ({
   components: { ULogo, URow },
   setup() {
     return {
@@ -58,11 +58,11 @@ const SizesTitleTemplate = (args, { argTypes }) => ({
     <URow>
       <ULogo
         v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
         :size-title="size"
         :title="size"
         size="md"
-        v-bind="args"
-        :key="index"
       />
     </URow>
   `,

package/ui.image-logo/index.vue

@@ -1,184 +1,98 @@
 <template>
-  <div class="mono-logo-wrapper" :data-cy="dataCy" @click="onClick">
-    <div class="mono-logo" :class="sizeClass">
-      <div v-if="label" class="mono-logo-label">
-        {{ label }}
-      </div>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClick">
+    <div v-bind="logoAttrs">
+      <div v-if="label" v-bind="labelAttrs" v-text="label" />
 
-      <div class="mono-logo-image" :style="bgImage" />
+      <div :style="bgImage" v-bind="imageAttrs" />
     </div>
 
-    <div v-if="title" class="mono-logo-title" :class="sizeTitleClass">
-      {{ title }}
-    </div>
+    <div v-if="title" v-bind="titleAttrs" v-text="title" />
   </div>
 </template>
 
-<script>
-export default {
-  name: "ULogo",
-
-  props: {
-    /**
-     * Set the path for img.
-     */
-    path: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set label for component.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set title for component.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of title.
-     * @values 2xs, xs, sm, md, lg, xl, 2xl
-     */
-    sizeTitle: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * The size of the logo.
-     * @values 2xs, xs, sm, md, lg, xl, 2xl, 3xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+<script setup>
+import { computed } from "vue";
+
+import UIService from "vueless/service.ui";
+
+import { useAttrs } from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config";
+import { ULogo } from "./constants";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULogo", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Logo source path.
+   */
+  src: {
+    type: String,
+    default: "",
   },
 
-  emits: ["click"],
+  /**
+   * Logo label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-  computed: {
-    bgImage() {
-      let path = this.path.includes("http") ? this.path : import.meta.env.BASE_URL + this.path;
+  /**
+   * Logo title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
 
-      return `background-image: url(${path});`;
-    },
+  /**
+   * Logo title size.
+   * @values 2xs, xs, sm, md, lg, xl, 2xl
+   */
+  titleSize: {
+    type: String,
+    default: UIService.get(defaultConfig, ULogo).default.titleSize,
+  },
 
-    sizeClass() {
-      return `mono-logo-size-${this.size}`;
-    },
+  /**
+   * title size.
+   * @values 2xs, xs, sm, md, lg, xl, 2xl, 3xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, ULogo).default.size,
+  },
 
-    sizeTitleClass() {
-      return `mono-logo-size-${this.sizeTitle}-title`;
-    },
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
   },
 
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
   },
-};
-</script>
+});
+
+const emit = defineEmits(["click"]);
+
+const { titleAttrs, logoAttrs, wrapperAttrs, labelAttrs, imageAttrs } = useAttrs(props);
 
-<style lang="postcss" scoped>
-.mono-logo-wrapper {
-  @apply flex items-center;
-
-  .mono-logo {
-    @apply relative;
-
-    &-label {
-      @apply bg-red-500 text-xs font-medium text-white;
-      @apply rounded-full;
-      @apply absolute -right-7 -top-1.5 px-2 py-0.5;
-    }
-
-    &-image {
-      @apply h-full w-full;
-      @apply bg-contain bg-center bg-no-repeat;
-    }
-
-    &-title {
-      @apply whitespace-nowrap px-3.5 font-bold text-white;
-    }
-
-    &-size {
-      &-2xs {
-        @apply h-3.5 w-3.5;
-
-        &-title {
-          @apply text-xs;
-        }
-      }
-
-      &-xs {
-        @apply h-4 w-4;
-
-        &-title {
-          @apply text-sm;
-        }
-      }
-
-      &-sm {
-        @apply h-5 w-5;
-
-        &-title {
-          @apply text-base;
-        }
-      }
-
-      &-md {
-        @apply h-6 w-6;
-
-        &-title {
-          @apply text-lg;
-        }
-      }
-
-      &-lg {
-        @apply h-8 w-8;
-
-        &-title {
-          @apply text-2xl;
-        }
-      }
-
-      &-xl {
-        @apply h-10 w-10;
-
-        &-title {
-          @apply text-3xl;
-        }
-      }
-
-      &-2xl {
-        @apply h-12 w-12;
-
-        &-title {
-          @apply text-4xl;
-        }
-      }
-
-      &-3xl {
-        @apply h-14 w-14;
-      }
-    }
-  }
+const bgImage = computed(() => {
+  let path = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.src;
+
+  return `background-image: url(${path});`;
+});
+
+function onClick(event) {
+  emit("click", event);
 }
-</style>
+</script>

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

@@ -0,0 +1,41 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+import { cx } from "vueless/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/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,
+  },
+};

package/ui.navigation-pagination/constants/index.js

@@ -0,0 +1,8 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UPagination = "UPagination";
+export const ELLIPSIS_LABEL = "…";
+export const LESS = "less";
+export const MORE = "more";

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

@@ -3,10 +3,12 @@ import { getArgTypes } from "vueless/service.storybook";
 import UPagination from "vueless/ui.navigation-pagination";
 
 export default {
+  id: "8040",
   title: "Navigation / Pagination",
   component: UPagination,
   args: {
     total: 90,
+    value: 1,
   },
   argTypes: {
     ...getArgTypes(UPagination.name),
@@ -19,13 +21,8 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UPagination v-bind="args" @pageChange="onChange"/>
+    <UPagination v-bind="args" v-model="args.value" />
   `,
-  methods: {
-    onChange(value) {
-      this.currentPage = value;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
@@ -33,3 +30,23 @@ Default.args = {};
 
 export const perPage1 = DefaultTemplate.bind({});
 perPage1.args = { perPage: 1 };
+
+export const limit = DefaultTemplate.bind({});
+limit.args = { limit: 3 };
+
+export const hideEllipsis = DefaultTemplate.bind({});
+hideEllipsis.args = { ellipses: false };
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const hideNavigationButtons = DefaultTemplate.bind({});
+hideNavigationButtons.args = { showLast: false, showFirst: false };
+
+export const setCustomNavigationLabel = DefaultTemplate.bind({});
+setCustomNavigationLabel.args = {
+  prevLabel: "◀️",
+  nextLabel: "▶️",
+  lastLabel: "⏩",
+  firstLabel: "⏪",
+};