vueless 0.0.10 → 0.0.12

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

@@ -0,0 +1,13 @@
+export default /*tw*/ {
+  wrapper: "flex items-center justify-between",
+  stepper: "h-12 w-12",
+  ring: "stroke-current text-gray-100",
+  count: "text-xl font-bold text-gray-900 translate-y-2 transform",
+  title: "",
+  gradient: "",
+  svg: "",
+  defaultVariants: {
+    step: 1,
+    color: "brand",
+  },
+};

package/ui.navigation-stepper/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 UStepper = "UStepper";

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

@@ -0,0 +1,30 @@
+import { getArgTypes } from "../service.storybook";
+
+import UStepper from "../ui.navigation-stepper";
+
+export default {
+  id: "8030",
+  title: "Navigation / Stepper",
+  component: UStepper,
+  args: {
+    title: "Title",
+    step: 1,
+    totalSteps: 10,
+  },
+  argTypes: {
+    ...getArgTypes(UStepper.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UStepper },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UStepper v-bind="args" />
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};

package/ui.navigation-stepper/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <UHeader :label="title" size="xs" v-bind="titleAttrs" />
+
+    <div v-bind="stepperAttrs">
+      <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="svgAttrs">
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="gradientAttrs">
+            <stop offset="0%" :stop-color="setStepperColor" />
+            <stop offset="100%" :stop-color="setStepperColor" />
+          </linearGradient>
+        </defs>
+
+        <circle
+          cx="20"
+          cy="20"
+          r="15.91549430918954"
+          fill="transparent"
+          stroke-width="4"
+          v-bind="ringAttrs"
+        ></circle>
+
+        <circle
+          cx="20"
+          cy="20"
+          r="15.91549430918954"
+          fill="transparent"
+          stroke="url(#gradient)"
+          stroke-width="4"
+          :stroke-dasharray="fillPercentage"
+          stroke-dashoffset="0"
+        ></circle>
+        <g v-bind="countAttrs">
+          <text y="45%" transform="translate(0, 2)">
+            <tspan x="50%" text-anchor="middle">{{ step }}</tspan>
+          </text>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import colors from "tailwindcss/colors";
+
+import UHeader from "../ui.text-header";
+import UIService from "../service.ui";
+import { grayColors } from "../service.tailwind";
+
+import { UStepper } 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: "UStepper", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set component title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set step number.
+   */
+  step: {
+    type: Number,
+    default: UIService.get(defaultConfig, UStepper).default.step,
+  },
+
+  /**
+   * Icon 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, UStepper).default.color,
+  },
+
+  /**
+   * Set total number of steps.
+   */
+  totalSteps: {
+    type: Number,
+    default: null,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs, titleAttrs, stepperAttrs, ringAttrs, countAttrs, gradientAttrs, svgAttrs } =
+  useAttrs(props);
+
+const setStepperColor = computed(() => {
+  return colors[props.color]
+    ? colors[props.color][500]
+    : grayColors.includes(props.color)
+      ? colors[props.color][900]
+      : colors.zinc[900];
+});
+
+const fillPercentage = computed(() => {
+  const maxCountPercent = 100;
+  const activePercent = (props.step / props.totalSteps) * maxCountPercent;
+
+  return `${activePercent} ${maxCountPercent}`;
+});
+</script>

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

@@ -0,0 +1,30 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { selected, size }) {
+  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({
+      disabled: props.disabled,
+      size: size.value,
+      selected: selected.value,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+
+  return {
+    wrapperAttrs,
+  };
+}

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

@@ -0,0 +1,22 @@
+export default /*tw*/ {
+  wrapper: {
+    base: `w-max pb-2 text-center cursor-pointer`,
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+      disabled: {
+        true: "text-gray-500",
+      },
+      selected: {
+        true: "border-b-2 border-gray-900",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+  },
+};

package/ui.navigation-tab/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 UTab = "UTab";

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

@@ -0,0 +1,57 @@
+import { getArgTypes } from "../service.storybook";
+
+import UTab from "../ui.navigation-tab";
+import UIcon from "../ui.image-icon";
+
+export default {
+  id: "8010",
+  title: "Navigation / Tab",
+  component: UTab,
+  args: {
+    label: "Tab",
+  },
+  argTypes: {
+    ...getArgTypes(UTab.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTab },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTab v-bind="args" />
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UTab, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTab v-bind="args">
+      ${args.slotTemplate}
+    </UTab>
+  `,
+});
+
+export const defaultTemplate = DefaultTemplate.bind({});
+defaultTemplate.args = {};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  label: "Tag",
+  slotTemplate: `
+    <template #default>
+      <div class="flex items-center">
+        <UIcon name="star" size="sm" />
+        {{label}}
+      </div>
+    </template>
+  `,
+};

package/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/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/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/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/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/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/ui.notify/index.sto_ries.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 = {};