vueless 0.0.4 → 0.0.6

package/src/ui.navigation-tab/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickSetValue">
+    <!-- @slot Use it to add something instead of label. -->
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+
+import UIService from "../service.ui";
+
+import { UTab } 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: "UTab", inheritAttrs: false });
+
+const setUTabsSelectedItem = inject("setUTabsSelectedItem", null);
+const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
+const getUTabsSize = inject("getUTabsSize", null);
+
+const props = defineProps({
+  /**
+   * Tab label.
+   * @ignore
+   */
+  label: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Tab value.
+   */
+  value: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Make tab disabled.
+   * @ignore
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTab).default.disabled,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const selected = computed(() => {
+  return getUTabsSelectedItem && getUTabsSelectedItem() === props.value && !props.disabled;
+});
+
+const size = computed(() => {
+  return getUTabsSize ? getUTabsSize() : UIService.get(defaultConfig, UTab).default.size;
+});
+
+const { wrapperAttrs } = useAttrs(props, { selected, size });
+
+async function onClickSetValue() {
+  if (!props.disabled && setUTabsSelectedItem) {
+    setUTabsSelectedItem(props.value);
+  }
+}
+</script>

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

@@ -0,0 +1,24 @@
+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 } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() => cvaWrapper({ underlined: props.underlined }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+
+  return {
+    wrapperAttrs,
+  };
+}

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

@@ -0,0 +1,14 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "mb-6 flex space-x-8",
+    variants: {
+      underlined: {
+        true: "border-b border-gray-100",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    underlined: false,
+  },
+};

package/src/ui.navigation-tabs/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 UTabs = "UTabs";

package/src/ui.navigation-tabs/index.stories.js

@@ -0,0 +1,69 @@
+import { getArgTypes } from "../service.storybook";
+
+import UTabs from "../ui.navigation-tabs";
+
+export default {
+  id: "8020",
+  title: "Navigation / Tabs",
+  component: UTabs,
+  args: {
+    modelValue: "1",
+    options: [
+      { label: "Tab 1", value: "1" },
+      { label: "Tab 2", value: "2" },
+      { label: "Tab 3", value: "3" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UTabs.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTabs },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTabs v-model="args.modelValue" v-bind="args"/>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UTabs },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <div class="space-y-16">
+      <UTabs
+        v-model="args.modelValue"
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </div>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const bottomLine = DefaultTemplate.bind({});
+bottomLine.args = { underlined: true };
+
+export const disabledTab = DefaultTemplate.bind({});
+disabledTab.args = {
+  options: [
+    { label: "Tab 1", value: 1 },
+    { label: "Tab 2", value: 2, disabled: true },
+    { label: "Tab 3", value: 3 },
+  ],
+};

package/src/ui.navigation-tabs/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <slot>
+      <UTab
+        v-for="(item, index) in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+        :size="size"
+        :data-cy="`${dataCy}-item-${index}`"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, provide } from "vue";
+
+import UTab from "../ui.navigation-tab";
+import UIService from "../service.ui";
+
+import { UTabs } 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: "UTabs", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Selected tab value.
+   */
+  modelValue: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Tab options.
+   */
+  options: {
+    type: Array,
+    default: () => [
+      {
+        label: "",
+        value: "",
+        disabled: false,
+      },
+    ],
+  },
+
+  /**
+   * Tabs size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UTabs).default.size,
+  },
+
+  /**
+   * Add the bottom line along the entire length.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTabs).default.underlined,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+provide("setUTabsSelectedItem", (value) => (selectedItem.value = value));
+provide("getUTabsSelectedItem", () => selectedItem.value);
+provide("getUTabsSize", () => props.size);
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/src/ui.notify/index.stories.js

@@ -0,0 +1,102 @@
+import NotifyServiceDefault from "../ui.notify/services";
+
+import UNotify from "../ui.notify";
+import UButton from "../ui.button";
+
+import { getArgTypes } from "../service.storybook";
+
+const NotifyService = new NotifyServiceDefault();
+
+export default {
+  title: "Other / Notify",
+  component: UNotify,
+  args: {
+    type: "success",
+    code: "code",
+    title: "",
+    text: "",
+    duration: "short",
+    ignoreDuplicates: false,
+  },
+  argTypes: {
+    ...getArgTypes(UNotify.name),
+    type: {
+      description: "The type of notify.",
+      defaultValue: { summary: "success" },
+      options: ["success", "warning", "error"],
+      control: {
+        type: "radio",
+      },
+    },
+    code: {
+      description:
+        "Unique translation code, for ex. `categoryCreated`, " +
+        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
+      defaultValue: { summary: "" },
+      control: {
+        type: "text",
+      },
+    },
+    title: {
+      description: "Notify title.",
+      defaultValue: { summary: "" },
+      control: {
+        type: "text",
+      },
+    },
+    text: {
+      description: "Notify text (description).",
+      defaultValue: { summary: "" },
+      control: {
+        type: "text",
+      },
+    },
+    duration: {
+      description: "The notify visibility duration.",
+      defaultValue: { summary: "short" },
+      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
+      control: {
+        type: "radio",
+      },
+    },
+    ignoreDuplicates: {
+      description: "Show only 1 notify at once.",
+      defaultValue: { summary: false },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UNotify, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+      <UNotify v-bind="args"/>
+
+      <UButton label="show notify" @click="onClick"/>
+    </div>
+ `,
+
+  methods: {
+    onClick() {
+      const settings = {
+        type: args.type,
+        code: args.code,
+        title: args.title,
+        text: args.text,
+        duration: args.duration,
+        ignoreDuplicates: args.ignoreDuplicates,
+      };
+
+      NotifyService.notify(settings);
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};

package/src/ui.other-dot/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 { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+
+  return {
+    wrapperAttrs,
+  };
+}

package/src/ui.other-dot/configs/default.config.js

@@ -0,0 +1,21 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "rounded-full bg-{color}-500 mr-1",
+    variants: {
+      color: {
+        white: "bg-white",
+        grayscale: "bg-gray-900",
+      },
+      size: {
+        sm: "size-1",
+        md: "size-1.5",
+        lg: "size-2",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+};

package/src/ui.other-dot/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 UDot = "UDot";

package/src/ui.other-dot/index.stories.js

@@ -0,0 +1,77 @@
+import UDot from "../ui.other-dot";
+import URow from "../ui.container-row";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  id: "9010",
+  title: "Other / Dot",
+  component: UDot,
+  argTypes: {
+    ...getArgTypes(UDot.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDot },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDot v-bind="args" />
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UDot, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDot
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :color="color"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDot, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDot
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `Tag ${value}`;
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};

package/src/ui.other-dot/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" />
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UDot } 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: "UDot", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Dot color.
+   * @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, UDot).default.color,
+  },
+
+  /**
+   * Dot size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDot).default.size,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/src/ui.other-loader/composables/attrs.composable.js

@@ -0,0 +1,51 @@
+import useUI from "../../composable.ui";
+import { cva, cx } 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 { loader, ellipse } = config.value;
+
+  const cvaLoader = cva({
+    base: loader.base,
+    variants: loader.variants,
+    compoundVariants: loader.compoundVariants,
+  });
+
+  const cvaEllipse = cva({
+    base: ellipse.base,
+    variants: ellipse.variants,
+    compoundVariants: ellipse.compoundVariants,
+  });
+
+  const loaderClasses = computed(() =>
+    cvaLoader({
+      size: props.size,
+    }),
+  );
+
+  const ellipseClasses = computed(() =>
+    setColor(
+      cvaEllipse({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const loaderAttrs = getAttrs("loader", { classes: loaderClasses });
+  const ellipseRaw = getAttrs("ellipse", { classes: ellipseClasses });
+
+  const ellipseAttrs = computed(() => (classes) => ({
+    ...ellipseRaw.value,
+    class: cx([ellipseRaw.value.class, classes]),
+  }));
+
+  return {
+    loaderAttrs,
+    ellipseAttrs,
+  };
+}

package/src/ui.other-loader/configs/default.config.js

@@ -0,0 +1,47 @@
+export default /*tw*/ {
+  loader: {
+    base: "relative mx-1 flex h-4 items-center",
+    variants: {
+      size: {
+        sm: "w-9",
+        md: "w-[3.625rem]",
+        lg: "w-20",
+      },
+    },
+  },
+  ellipse: {
+    base: `absolute rounded-full bg-{color}-500 ease-[cubic-bezier(0,1,1,0)]`,
+    variants: {
+      color: {
+        white: "bg-white",
+        grayscale: "bg-gray-900",
+      },
+      size: {
+        sm: `
+            h-1.5 w-1.5
+            [&:nth-child(1)]:left-1
+            [&:nth-child(4)]:left-7
+          `,
+        md: `
+            h-2.5 w-2.5
+            [&:nth-child(1)]:left-1.5
+            [&:nth-child(2)]:left-1.5
+            [&:nth-child(3)]:left-6
+            [&:nth-child(4)]:left-[2.625rem]
+          `,
+        lg: `
+            h-4 w-4
+            [&:nth-child(1)]:left-2
+            [&:nth-child(2)]:left-2
+            [&:nth-child(3)]:left-8
+            [&:nth-child(4)]:left-14
+          `,
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    color: "brand",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+};

package/src/ui.other-loader/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 ULoader = "ULoader";