vueless 0.0.2 → 0.0.4

package/ui.form-radio/index.vue

@@ -1,176 +0,0 @@
-<template>
-  <div ref="radioInput" class="mono-radio-wrapper">
-    <t-radio
-      :id="id"
-      :disabled="disabled"
-      class="mono-radio"
-      :name="radioName"
-      :value="value"
-      :checked="checked"
-      :data-cy="dataCy"
-      @focus="onFocus"
-    />
-
-    <div>
-      <label v-if="label" :for="id" class="mono-radio-label">{{ label }}</label>
-
-      <!-- @slot Use it to add some description. -->
-      <div class="mono-radio-description">
-        <slot name="description" :description="description">
-          <label v-if="description" :for="id">{{ description }}</label>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
-import { getRandomId } from "vueless/service.ui";
-
-export default {
-  name: "URadio",
-
-  components: { TRadio },
-
-  inject: {
-    setRadioGroupSelectedItem: { default: null },
-    getRadioGroupName: { default: null },
-  },
-
-  props: {
-    /**
-     * Set radio value.
-     */
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set description.
-     */
-    description: {
-      type: [String, Object],
-      default: "",
-    },
-
-    /**
-     * Set name for radio.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make radio group inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make a radio group item checked.
-     */
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:value"],
-
-  data() {
-    return {
-      radioName: "",
-    };
-  },
-
-  mounted() {
-    this.radioName = this.name || this.getRadioGroupName();
-  },
-
-  methods: {
-    onFocus(event) {
-      if (this.setRadioGroupSelectedItem) {
-        this.setRadioGroupSelectedItem(this.value);
-      }
-
-      this.$emit("update:value", event.target.value);
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-radio {
-  @apply border border-solid border-gray-300;
-  @apply h-6 w-6;
-
-  &:hover {
-    @apply border-gray-400;
-  }
-
-  &:active {
-    @apply border-gray-900 bg-gray-900;
-  }
-
-  &:focus {
-    @apply border-gray-500 !bg-gray-900 ring-4 ring-gray-200;
-  }
-
-  &:checked {
-    @apply border-gray-900 bg-gray-900;
-
-    &:hover {
-      @apply bg-gray-900;
-    }
-  }
-
-  &:disabled {
-    @apply border-gray-100 bg-gray-100;
-  }
-
-  &-wrapper {
-    @apply inline-flex;
-  }
-
-  &-label {
-    @apply block;
-    @apply text-base font-normal text-gray-900;
-    @apply pl-4 pt-0.5;
-  }
-
-  &-description {
-    @apply text-xs font-normal text-gray-500/[85];
-    @apply pl-4 pt-1;
-  }
-}
-</style>

package/ui.form-radio-card/index.stories.js

@@ -1,140 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import URadioCard from "vueless/ui.form-radio-card";
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  title: "Form Inputs & Controls / Radio Card",
-  component: URadioCard,
-  args: {
-    value: "radio card 1",
-    name: "radio",
-    options: [
-      {
-        iconName: "star-fill",
-        value: "radio card 1",
-        description: "some description 1",
-        label: "title 1",
-      },
-      {
-        iconName: "star-fill",
-        value: "radio card 2",
-        description: "some description 2",
-        label: "title 2",
-      },
-      {
-        iconName: "star-fill",
-        value: "radio card 3",
-        description: "some description 3",
-        label: "title 3",
-      },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(URadioCard.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { URadioCard },
-  setup() {
-    const slots = getSlotNames(URadioCard.name);
-
-    return { args, slots };
-  },
-  template: `
-    <URadioCard v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </URadioCard>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { URadioCard, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadioCard v-bind="args">
-      ${args.slotTemplate}
-    </URadioCard>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const gridCols3 = DefaultTemplate.bind({});
-gridCols3.args = {
-  gridCols: 3,
-  value: "radio card 4",
-  name: "radio 2",
-  options: [
-    {
-      value: "radio card 4",
-      description: "some description 1",
-      iconName: "star-fill",
-      label: "title 1",
-    },
-    {
-      value: "radio card 5",
-      description: "some description 2",
-      iconName: "star-fill",
-      label: "title 2",
-    },
-    {
-      value: "radio card 6",
-      description: "some description 3",
-      iconName: "star-fill",
-      label: "title 3",
-    },
-  ],
-};
-
-export const withoutIcon = DefaultTemplate.bind({});
-withoutIcon.args = {
-  withIcon: false,
-  value: "radio card 7",
-  name: "radio 3",
-  options: [
-    {
-      value: "radio card 7",
-      description: "some description 1",
-      iconName: "star-fill",
-      label: "title 1",
-    },
-    {
-      value: "radio card 8",
-      description: "some description 2",
-      iconName: "star-fill",
-      label: "title 2",
-    },
-    {
-      value: "radio card 9",
-      description: "some description 3",
-      iconName: "star-fill",
-      label: "title 3",
-    },
-  ],
-};
-
-export const iconSlot = SlotTemplate.bind({});
-iconSlot.args = {
-  value: "radio card 10",
-  name: "radio 4",
-  icons: { User: require("vueless/ui.icons-metronic/User.svg") },
-  options: [
-    { value: "radio card 10", description: "some description 1", title: "title 1" },
-    { value: "radio card 11", description: "some description 2", title: "title 2" },
-  ],
-  slotTemplate: `
-    <template #icon>
-      <UIcon
-        name="star"
-        size="lg"
-      />
-    </template>
-  `,
-};

package/ui.form-radio-card/index.vue

@@ -1,183 +0,0 @@
-<template>
-  <div class="mono-radio-card-wrapper" :class="gridColsClass">
-    <label
-      v-for="(item, index) in options"
-      :key="item.value"
-      class="mono-radio-card"
-      :class="selectedItemClass(item.value)"
-      :data-cy="`${dataCy}-item-${index}`"
-    >
-      <t-radio
-        v-model="selectedItem"
-        class="mono-radio-card-radio"
-        :name="name"
-        :value="item.value"
-      />
-
-      <div class="mono-radio-card-inner-wrapper">
-        <!-- @slot Use it to add icon. -->
-        <slot v-if="withIcon" name="icon" :item="item">
-          <UIcon :name="item.iconName" size="xl" color="blue" />
-        </slot>
-
-        <div class="mono-radio-card-title">{{ item.label }}</div>
-
-        <div class="mono-radio-card-description">{{ item.description }}</div>
-      </div>
-    </label>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-import UIcon from "vueless/ui.image-icon";
-import TRadio from "vueless/library.vue-tailwind-3/t-radio";
-
-export default {
-  name: "URadioCard",
-
-  components: {
-    UIcon,
-    TRadio,
-  },
-
-  props: {
-    /**
-     * Set radio card name.
-     */
-    name: {
-      type: String,
-      required: true,
-      default: "",
-    },
-
-    /**
-     * Set options for component.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: "",
-    },
-
-    /**
-     * Set grid cols number.
-     */
-    gridCols: {
-      type: Number,
-      default: 2,
-    },
-
-    /**
-     * Show / hide component icon.
-     */
-    withIcon: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  computed: {
-    ...mapGetters("breakpoint", ["isMobileDevice"]),
-
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    gridColsClass() {
-      return {
-        "grid-cols-1": this.isMobileDevice,
-        "grid-cols-2": this.gridCols === 2 && !this.isMobileDevice,
-        "grid-cols-3": this.gridCols === 3 && !this.isMobileDevice,
-        "grid-cols-4": this.gridCols === 4 && !this.isMobileDevice,
-      };
-    },
-  },
-
-  methods: {
-    selectedItemClass(value) {
-      return {
-        "selected-option": this.selectedItem === value,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-radio-card {
-  @apply rounded-lg border border-solid border-gray-300;
-  @apply cursor-pointer pb-6 pl-6 pr-6 pt-4;
-  @apply relative w-full;
-
-  &-wrapper {
-    @apply grid grid-rows-1 gap-4 md:gap-6;
-  }
-
-  &:hover {
-    @apply border-gray-400;
-  }
-
-  &:focus-within {
-    @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-  }
-
-  &-radio {
-    @apply border border-solid border-gray-300;
-    @apply h-6 w-6;
-    @apply absolute right-4 top-4;
-
-    &:focus {
-      @apply ring-0;
-    }
-
-    &:active {
-      @apply border-gray-900 bg-gray-900;
-    }
-
-    &:checked {
-      @apply border-gray-900 bg-gray-900;
-    }
-  }
-
-  &-wrapper {
-    @apply text-center;
-  }
-
-  &-title {
-    @apply text-base font-normal text-gray-900;
-    @apply mb-1 mt-3;
-  }
-
-  &-description {
-    @apply text-xs font-normal text-gray-500/[85];
-  }
-}
-
-.selected-option {
-  @apply border-gray-500;
-}
-</style>

package/ui.form-radio-group/index.stories.js

@@ -1,41 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import URadioGroup from "vueless/ui.form-radio-group";
-import URadio from "vueless/ui.form-radio";
-
-export default {
-  title: "Form Inputs & Controls / Radio Group",
-  component: URadioGroup,
-  args: {
-    label: "Label",
-    value: "1",
-    radios: [
-      { name: "radio", label: "radio 1", description: "description", value: "1" },
-      { name: "radio", label: "radio 2", description: "description", value: "2" },
-      { name: "radio", label: "radio 3", description: "description", value: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(URadioGroup.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { URadioGroup, URadio },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadioGroup v-bind="args" v-model="args.value">
-      <template v-for="(radio,index) in args.radios" :key="index">
-        <URadio
-          v-bind="radio"
-        >
-        </URadio>
-      </template>
-    </URadioGroup>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.form-radio-group/index.vue

@@ -1,98 +0,0 @@
-<template>
-  <div ref="URadioGroup" class="mono-radio-group" :data-cy="dataCy">
-    <h3 v-if="label" class="mono-radio-group-label">{{ label }}</h3>
-
-    <div :class="labelClass" class="mono-radio-group-wrapper">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "URadioGroup",
-
-  provide() {
-    return {
-      setRadioGroupSelectedItem: (value) => {
-        this.selectedItem = value;
-      },
-
-      getRadioGroupName: () => {
-        return this.name;
-      },
-    };
-  },
-
-  props: {
-    /**
-     * Set radio group label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set component value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set the name for radio group for each radio.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set test dataCy for a radio group.
-     */
-    dataCy: {
-      type: String,
-      default: "radio",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  computed: {
-    labelClass() {
-      return {
-        "mono-radio-group-label-margin": this.label,
-      };
-    },
-
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-radio-group {
-  &-wrapper {
-    @apply flex flex-col;
-    @apply space-y-4;
-  }
-
-  &-label {
-    @apply text-sm font-normal text-gray-500;
-    @apply mb-6;
-
-    &-margin {
-      @apply mb-4 ml-4;
-    }
-  }
-}
-</style>