vueless 0.0.4 → 0.0.5

package/src/ui.button-link/index.stories.js

@@ -0,0 +1,158 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import ULink from "../ui.button-link";
+import UButton from "../ui.button";
+import URow from "../ui.container-row";
+export default {
+  id: "1060",
+  title: "Buttons & Links / Link",
+  component: ULink,
+  args: {
+    label: "Link",
+  },
+  argTypes: {
+    ...getArgTypes(ULink.name),
+    route: { control: { type: "text" } },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULink },
+  setup() {
+    const slots = getSlotNames(ULink.name);
+
+    return { args, slots };
+  },
+  template: `
+    <ULink v-bind="args">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </ULink>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { ULink, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULink
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :color="color"
+        :label="color"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const TypesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULink, URow },
+  setup() {
+    return {
+      args,
+      types: argTypes.type.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULink
+        v-for="(type, index) in types"
+        v-bind="args"
+        :label="type"
+        :type="type"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULink, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULink
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :label="getText(size)"
+        :key="index"
+      />
+    </URow>
+  `,
+  methods: {
+    getText(value) {
+      return `Link ${value}`;
+    },
+  },
+});
+
+const SlotTemplate = (args) => ({
+  components: { UButton, ULink },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULink>
+      ${args.slotTemplate}
+    </ULink>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {};
+
+export const types = TypesTemplate.bind({});
+types.args = {};
+
+export const underlined = ColorsTemplate.bind({});
+underlined.args = { underlined: true, dashed: false };
+
+export const dashed = ColorsTemplate.bind({});
+dashed.args = { dashed: true };
+
+export const url = DefaultTemplate.bind({});
+url.args = { url: "https://storybook.js.org/docs/react/get-started/introduction" };
+
+export const route = DefaultTemplate.bind({});
+route.args = { name: "SomeRouterRouteName" };
+
+export const targetBlank = DefaultTemplate.bind({});
+targetBlank.args = {
+  url: "https://storybook.js.org/docs/react/get-started/introduction",
+  targetBlank: true,
+};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const noRing = DefaultTemplate.bind({});
+noRing.args = { noRing: true };
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #default>
+      <UButton label="Text" />
+    </template>
+  `,
+};

package/src/ui.button-link/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <div tabindex="-1" v-bind="wrapperAttrs">
+    <div v-if="hasSlotContent(slots['left'])" v-bind="leftSlotAttrs">
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+    </div>
+
+    <router-link
+      v-if="isPresentRoute"
+      :to="route"
+      :target="targetValue"
+      :data-cy="dataCy"
+      v-bind="linkAttrs"
+      @blur="onBlur"
+      @click="onClick"
+      @focus="onFocus"
+      @keydown="onKeydown"
+      @mouseover="onMouseover"
+    >
+      <!-- @slot Use it replace the text. -->
+      <slot>
+        <span v-if="!hasSlotContent(slots['default'])" v-bind="textAttrs" v-text="label" />
+      </slot>
+    </router-link>
+
+    <a
+      v-else
+      :href="href"
+      :target="targetValue"
+      :data-cy="dataCy"
+      v-bind="linkAttrs"
+      @blur="onBlur"
+      @focus="onFocus"
+      @keydown="onKeydown"
+      @mouseover="onMouseover"
+      @click.prevent="onClick"
+    >
+      <!-- @slot Use it replace the text. -->
+      <slot>
+        <span v-if="!hasSlotContent(slots['default'])" v-bind="textAttrs" v-text="label" />
+      </slot>
+    </a>
+
+    <div v-if="hasSlotContent(slots['right'])" v-bind="rightSlotAttrs">
+      <!-- @slot Use it to add something after text. -->
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import UIService from "../service.ui";
+
+import { useAttrs } from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config";
+import { ULink } from "./constants";
+import { UButton } from "../ui.button/constants";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULink", inheritAttrs: false });
+
+const emit = defineEmits(["click", "mouseover", "focus", "blur", "keydown"]);
+
+const props = defineProps({
+  /**
+   * Button label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Link url.
+   */
+  url: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Vue route object.
+   */
+  route: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Link size.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, ULink).default.size,
+  },
+
+  /**
+   * Link 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, ULink).default.color,
+  },
+
+  /**
+   * Link open type behaviour.
+   * @values phone, email, link
+   */
+  type: {
+    type: String,
+    default: UIService.get(defaultConfig, ULink).default.type,
+  },
+
+  /**
+   * Open link in new window.
+   */
+  targetBlank: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.targetBlank,
+  },
+
+  /**
+   * Show underline.
+   */
+  underlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.underlined,
+  },
+
+  /**
+   * Set link underline style as dashed.
+   */
+  dashed: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.dashed,
+  },
+
+  /**
+   * Disable the link.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.disabled,
+  },
+
+  /**
+   * Make the Button fill the width with its container.
+   */
+  block: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UButton).default.block,
+  },
+
+  /**
+   * Remove outline ring on focus.
+   */
+  noRing: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.noRing,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+
+const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
+  useAttrs(props);
+
+const targetValue = computed(() => {
+  return props.targetBlank ? "_blank" : "_self";
+});
+
+const href = computed(() => {
+  const types = {
+    phone: "tel:",
+    email: "mailto:",
+    link: "",
+  };
+
+  return `${types[props.type]}${props.url}`;
+});
+
+const isPresentRoute = computed(() => {
+  for (let key in props.route) return true;
+
+  return false;
+});
+
+function onClick(event) {
+  !props.url || props.disabled ? emit("click", event) : window.open(href.value, props.targetValue);
+}
+
+function onMouseover(event) {
+  emit("mouseover", event);
+}
+
+function onFocus(event) {
+  emit("focus", event);
+}
+
+function onKeydown(event) {
+  emit("keydown", event);
+}
+
+function onBlur(event) {
+  emit("blur", event);
+}
+</script>

package/src/ui.button-toggle/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.button-toggle/composables/attrs.composable.js

@@ -0,0 +1,16 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const toggleItemAttrs = getAttrs("toggleItem", { isComponent: true });
+
+  return {
+    config,
+    wrapperAttrs,
+    toggleItemAttrs,
+  };
+}

package/src/ui.button-toggle/configs/default.config.js

@@ -0,0 +1,12 @@
+export default /*tw*/ {
+  wrapper: `
+    flex gap-px
+    [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:first-child]:overflow-hidden
+    [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:last-child]:overflow-hidden
+  `,
+  defaultVariants: {
+    size: "md",
+    block: false,
+    multiple: false,
+  },
+};

package/src/ui.button-toggle/constants/index.js

@@ -0,0 +1,7 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UToggle = "UToggle";
+export const TYPE_RADIO = "radio";
+export const TYPE_CHECKBOX = "checkbox";

package/src/ui.button-toggle/index.stories.js

@@ -0,0 +1,155 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UToggle from "../ui.button-toggle";
+import UIcon from "../ui.image-icon";
+import UToggleItem from "../ui.button-toggle-item";
+import URow from "../ui.container-row";
+
+export default {
+  title: "Buttons & Links / Toggle",
+  component: UToggle,
+  argTypes: {
+    ...getArgTypes(UToggle.name),
+    modelValue: { control: { type: "text" } },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UToggle },
+  data() {
+    return {
+      value: "",
+    };
+  },
+  setup() {
+    const groupOptions = [
+      { value: "11", label: "label 1" },
+      { value: "12", label: "label 2" },
+      { value: "13", label: "label 3" },
+      { value: "14", label: "label 4" },
+    ];
+
+    return { args, groupOptions };
+  },
+  template: `
+    <UToggle
+      v-model="value"
+      v-bind="args"
+      :options="groupOptions"
+      name="defaultTemplate"
+    />
+  `,
+});
+
+const checkboxTemplate = (args) => ({
+  components: { UToggle },
+  data() {
+    return {
+      value: [],
+    };
+  },
+  setup() {
+    const groupOptions = [
+      { value: "11", label: "label 1" },
+      { value: "12", label: "label 2" },
+      { value: "13", label: "label 3" },
+      { value: "14", label: "label 4" },
+    ];
+
+    return { args, groupOptions };
+  },
+  template: `
+    <UToggle
+      v-model="value"
+      v-bind="args"
+      multiple
+      :options="groupOptions"
+      name="defaultTemplate"
+    />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UToggle, URow },
+  data() {
+    return {
+      value: "",
+    };
+  },
+  setup() {
+    const slots = getSlotNames(UToggle.name);
+
+    return {
+      args,
+      slots,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UToggle
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :label="size"
+        :options="[
+          { value: size + 1, label: size },
+          { value: size + 2, label: size },
+        ]"
+        v-model="value"
+        :key="index"
+        name="sizeTemplate"
+      >
+        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+          <template v-if="args[slot]">{{ args[slot] }}</template>
+        </template>
+      </UToggle>
+    </URow>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UToggle, UIcon, UToggleItem },
+  setup() {
+    return {
+      args,
+      selected: "55",
+    };
+  },
+  template: `
+    <UToggle v-bind="args" name="slotTemplate" v-model="selected">
+      ${args.slotTemplate}
+    </UToggle>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  name: "first name",
+};
+
+export const multiple = checkboxTemplate.bind({});
+multiple.args = {
+  name: "second name",
+};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {
+  name: "four name",
+};
+
+export const block = DefaultTemplate.bind({});
+block.args = {
+  name: "five name",
+  block: true,
+};
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  name: "third name",
+  slotTemplate: `
+    <template #default>
+      <UToggleItem label="label" />
+    </template>
+  `,
+};