vueless 0.0.2 → 0.0.4

package/ui.button-group-item/index.vue

@@ -1,283 +0,0 @@
-<template>
-  <div
-    ref="UButtonGroupItem"
-    :class="labelButtonsClasses"
-    class="mono-button-group-item"
-    :data-cy="dataCy"
-    @click="onClickSetValue"
-  >
-    <t-radio
-      :id="id"
-      v-model="selectedItem"
-      :class="radioButtonsClasses"
-      class="radio"
-      :name="buttonName"
-      :value="value"
-    />
-
-    <label :for="id" class="label">
-      <span v-if="isShownSlot.left" class="label-slot">
-        <!-- @slot Use it to add some content before label. -->
-        <slot name="left" />
-      </span>
-
-      <span v-if="label || isShownSlot.default" class="label-text label-slot">
-        {{ label }}
-        <!-- @slot Use it to add some content instead of label. -->
-        <slot />
-      </span>
-
-      <span v-if="isShownSlot.right" class="label-slot">
-        <!-- @slot Use it to some content after label. -->
-        <slot name="right" />
-      </span>
-    </label>
-  </div>
-</template>
-
-<script>
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
-
-export default {
-  name: "UButtonGroupItem",
-
-  components: { TRadio },
-
-  inject: [
-    "setButtonGroupSelectedItem",
-    "getButtonGroupName",
-    "getButtonGroupSize",
-    "getButtonGroupValue",
-  ],
-
-  props: {
-    /**
-     * The variant of the button.
-     * @values primary, secondary, thirdary, raw
-     */
-    variant: {
-      type: String,
-      default: "primary",
-    },
-    /**
-     * Set data for button.
-     */
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:value"],
-
-  data: () => ({
-    selectedItem: "",
-    buttonName: "",
-    size: "md",
-  }),
-
-  computed: {
-    labelButtonsClasses() {
-      const size = `size-${this.size}`;
-      const variant = `variant-${this.variant}`;
-
-      return [size, variant];
-    },
-
-    radioButtonsClasses() {
-      const radio = `radio-${this.variant}`;
-
-      return [radio];
-    },
-
-    isShownSlot() {
-      return {
-        default: !!this.$slots["default"],
-        left: !!this.$slots["left"],
-        right: !!this.$slots["right"],
-      };
-    },
-
-    id() {
-      return this.value + this.buttonName;
-    },
-  },
-
-  mounted() {
-    this.size = this.getButtonGroupSize ? this.getButtonGroupSize() : this.size;
-
-    this.selectedItem = this.getButtonGroupValue ? this.getButtonGroupValue() : this.selectedItem;
-
-    this.buttonName = this.getButtonGroupName ? this.getButtonGroupName() : "group";
-  },
-
-  methods: {
-    onClickSetValue() {
-      this.selectedItem = this.value;
-
-      if (this.setButtonGroupSelectedItem) this.setButtonGroupSelectedItem(this.value);
-
-      this.$emit("update:value", this.value);
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-button-group-item {
-  @apply rounded-none;
-
-  .radio {
-    @apply absolute -z-10 opacity-0;
-
-    &-primary {
-      &:focus {
-        & + .label {
-          @apply border-gray-100 bg-opacity-10;
-          @apply ring-4 ring-gray-600/15;
-        }
-      }
-
-      &:checked {
-        & + .label {
-          @apply bg-gray-900/15;
-        }
-      }
-    }
-
-    &-secondary {
-      &:focus {
-        & + .label {
-          @apply !text-opacity-100;
-          @apply !border-opacity-100;
-        }
-      }
-
-      &:checked {
-        & + .label {
-          @apply !text-opacity-100;
-          @apply !border-opacity-100;
-        }
-      }
-    }
-
-    &-thirdary {
-      & + .label {
-        @apply bg-transparent opacity-50;
-      }
-
-      &:focus {
-        & + .label {
-          @apply border-none bg-gray-100 bg-opacity-10 opacity-100;
-          @apply ring-0;
-        }
-      }
-
-      &:checked {
-        & + .label {
-          @apply bg-transparent opacity-100;
-        }
-      }
-    }
-  }
-
-  .label {
-    @apply flex items-center justify-between;
-    @apply cursor-pointer;
-
-    &-text {
-      @apply font-medium;
-    }
-
-    &-slot:deep(.mono-svg-icon) {
-      @apply block;
-    }
-  }
-
-  &.size {
-    &-sm {
-      .label {
-        @apply space-x-1.5 p-3.5;
-
-        &-text {
-          @apply text-sm;
-        }
-      }
-    }
-
-    &-md {
-      .label {
-        @apply space-x-2 p-[1.125rem];
-
-        &-text {
-          @apply text-base;
-        }
-      }
-    }
-
-    &-lg {
-      .label {
-        @apply space-x-2.5 p-[1.375rem];
-
-        &-text {
-          @apply text-lg;
-        }
-      }
-    }
-  }
-}
-
-.variant {
-  &-primary {
-    .label {
-      @apply bg-gray-900/5;
-
-      &:hover {
-        @apply bg-gray-900/10;
-      }
-
-      &:active {
-        @apply bg-gray-900/15;
-      }
-    }
-  }
-
-  &-secondary {
-    .label {
-      @apply !bg-transparent border;
-
-      &:hover {
-        @apply !text-opacity-80;
-        @apply !border-opacity-80;
-      }
-    }
-  }
-
-  &-thirdary {
-    .label {
-      @apply !bg-transparent border-none;
-
-      &:hover {
-        @apply border-none opacity-100;
-        @apply ring-0;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,121 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import ULink from "vueless/ui.button-link";
-import UButton from "vueless/ui.button";
-import URow from "vueless/ui.container-row";
-export default {
-  title: "Buttons & Links / Link",
-  component: ULink,
-  args: {
-    text: "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"
-        :color="color"
-        :text="color"
-        v-bind="args"
-        :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"
-        :size="size"
-        :text="getText(size)"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Link ${value}`;
-    },
-  },
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButton, ULink },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULink text="Test" v-bind="args">
-      ${args.slotTemplate}
-    </ULink>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <UButton variant="secondary" text="Text" />
-    </template>
-  `,
-};
-
-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 urlTargetBlank = DefaultTemplate.bind({});
-urlTargetBlank.args = {
-  url: "https://storybook.js.org/docs/react/get-started/introduction",
-  targetBlank: true,
-};