vueless 0.0.2 → 0.0.4

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

@@ -1,216 +0,0 @@
-<template>
-  <div ref="UCheckboxGroup" class="mono-checkbox-group" :data-cy="dataCy">
-    <h3 v-if="label" class="label-title" :class="titleClass">{{ label }}</h3>
-
-    <div class="mono-checkbox-group-block">
-      <slot>
-        <UCheckbox
-          v-for="(option, index) in options"
-          :key="option.value"
-          :data-cy="`${dataCy}-item-${index}`"
-          :disabled="disabled"
-          :label="option.label"
-          :description="option.description"
-          :values="{
-            select: option.value,
-            unselect: false,
-          }"
-        />
-      </slot>
-    </div>
-
-    <p v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
-      {{ error }}
-    </p>
-  </div>
-</template>
-
-<script>
-import UCheckbox from "vueless/ui.form-checkbox";
-
-export default {
-  name: "UCheckboxGroup",
-
-  components: { UCheckbox },
-
-  provide() {
-    return {
-      setCheckboxGroupSelectedItems: (value) => {
-        this.selectedItems = value;
-      },
-
-      getCheckboxGroupSelectedItems: () => {
-        return this.selectedItems;
-      },
-
-      getCheckboxGroupName: () => {
-        return this.name;
-      },
-    };
-  },
-
-  props: {
-    /**
-     * Set checkbox group label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set checkbox group value.
-     */
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set options for checkbox group.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Make checkbox group inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set error text.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set the name for checkbox group for each checkbox.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set test dataCy for a checkbox group.
-     */
-    dataCy: {
-      type: String,
-      default: "checkbox",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  data: () => ({
-    selectedItems: [],
-  }),
-
-  computed: {
-    titleClass() {
-      return {
-        "error-title": this.error,
-      };
-    },
-
-    labelClass() {
-      return {
-        "label-separated": this.label,
-      };
-    },
-  },
-
-  watch: {
-    selectedItems: {
-      handler: "onChangeSelectedItems",
-      deep: true,
-    },
-  },
-
-  methods: {
-    onChangeSelectedItems() {
-      this.$emit("update:modelValue", this.selectedItems);
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.label {
-  @apply block max-w-max;
-
-  &-separated {
-    @apply ml-4 mt-4;
-  }
-
-  &-title {
-    @apply text-sm font-normal text-gray-500;
-    @apply mb-6;
-  }
-
-  &-box {
-    @apply inline-flex;
-
-    &-inner {
-      @apply block;
-    }
-  }
-}
-
-.mono-checkbox {
-  @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;
-  }
-
-  &:checked {
-    @apply border-gray-900 bg-gray-900;
-  }
-
-  &:focus {
-    @apply border-gray-500 ring-4 ring-gray-200;
-  }
-
-  &:disabled {
-    @apply border-gray-100 bg-gray-100;
-  }
-
-  &-title {
-    @apply block cursor-pointer text-base font-medium text-gray-900;
-    @apply pl-4 pt-0.5;
-  }
-
-  &-description {
-    @apply block text-xs font-normal text-gray-500/[85];
-    @apply pl-4 pt-1;
-  }
-
-  &-group-block {
-    @apply ml-4 space-y-4;
-  }
-}
-
-.error {
-  &-title {
-    @apply text-red-500;
-  }
-
-  &-message {
-    @apply text-xs font-normal text-red-500;
-    @apply mt-2 pl-4;
-  }
-}
-</style>

package/ui.form-checkbox-multi-state/index.stories.js

@@ -1,62 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UCheckboxMultiState from "vueless/ui.form-checkbox-multi-state";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Form Inputs & Controls / Checkbox Multistate",
-  component: UCheckboxMultiState,
-  args: {
-    label: "Label",
-    value: false,
-    optionsData: [
-      { code: false, label: "checkbox 1" },
-      { code: true, label: "checkbox 2" },
-      { code: null, label: "checkbox 3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UCheckboxMultiState.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UCheckboxMultiState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCheckboxMultiState v-bind="args" v-model="args.value" />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UCheckboxMultiState, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UCheckboxMultiState
-        v-for="(size, index) in sizes"
-        :size="size"
-        v-model="args.value"
-        :label="size"
-        :key="index"
-        v-bind="args"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const value = DefaultTemplate.bind({});
-value.args = { value: null };

package/ui.form-checkbox-multi-state/index.vue

@@ -1,244 +0,0 @@
-<template>
-  <div class="mono-checkbox-multistate-wrapper" @click="onClickChangeActiveOption">
-    <div class="mono-checkbox-multistate" :class="checkboxClasses">
-      <UIcon
-        v-if="selectedStateIcon"
-        :class="selectedStateIcon"
-        :name="selectedStateIcon"
-        :size="iconSize"
-        color="white"
-      />
-
-      <t-checkbox class="mono-checkbox-multistate-input" :value="selectedState" :data-cy="dataCy" />
-    </div>
-
-    <label v-if="selectedStateLabel" class="mono-checkbox-multistate-label">
-      {{ selectedStateLabel }}
-    </label>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TCheckbox from "vueless/library.vue-tailwind-3/t-checkbox";
-
-export default {
-  name: "UCheckboxMultiState",
-
-  components: { UIcon, TCheckbox },
-
-  props: {
-    /**
-     * Set checkbox multi state value.
-     */
-    modelValue: {
-      type: [String, Boolean, Number],
-      default: "",
-    },
-
-    /**
-     * Set options data for component.
-     */
-    optionsData: {
-      type: Array,
-      default: () => [
-        { code: false, label: "" },
-        { code: true, label: "" },
-        { code: null, label: "" },
-      ],
-    },
-
-    /**
-     * Set component size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  data: () => ({
-    index: 0,
-    selectedState: "",
-  }),
-
-  computed: {
-    options() {
-      const [unSelected, selectedFull, selectedPartially] = this.optionsData;
-
-      return [
-        {
-          selected: unSelected?.code,
-          label: unSelected?.label || "",
-        },
-        {
-          iconName: "check",
-          selected: selectedFull?.code,
-          label: selectedFull?.label || "",
-        },
-        {
-          iconName: "remove",
-          selected: selectedPartially?.code,
-          label: selectedPartially?.label || "",
-        },
-      ];
-    },
-
-    checkboxClasses() {
-      const checked = this.index > 0 ? "mono-checkbox-multistate-checked" : "";
-      const size = `size-${this.size}`;
-
-      return [checked, size];
-    },
-
-    selectedStateIcon() {
-      return this.options[this.index]?.iconName;
-    },
-
-    isCheck() {
-      return this.options[this.index]?.iconName === "check";
-    },
-
-    iconSize() {
-      const size = this.size;
-      const check = this.isCheck;
-      let iconSize;
-
-      if (!check && size === "lg") {
-        iconSize = "md";
-      } else if (check && size === "md") {
-        iconSize = "xs";
-      } else {
-        iconSize = "sm";
-      }
-
-      return iconSize;
-    },
-
-    selectedStateLabel() {
-      return this.options[this.index]?.label;
-    },
-  },
-
-  watch: {
-    value: {
-      handler: "onChangeValue",
-      immediate: true,
-    },
-  },
-
-  methods: {
-    onClickChangeActiveOption() {
-      this.index += 1;
-
-      if (this.index >= this.options.length) {
-        this.index = 0;
-      }
-
-      this.changeSelectedState();
-    },
-
-    onChangeValue() {
-      this.index = this.options.findIndex((item) => item.selected === this.modelValue);
-    },
-
-    changeSelectedState() {
-      const activeOption = this.options[this.index];
-
-      this.selectedState = activeOption.selected;
-
-      this.$emit("update:modelValue", this.selectedState);
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-checkbox-multistate {
-  &-wrapper {
-    @apply flex;
-    @apply cursor-pointer;
-  }
-
-  @apply flex items-center justify-center;
-  @apply rounded border border-solid border-gray-300;
-  @apply bg-white;
-  @apply relative;
-
-  &:hover {
-    @apply border-gray-400;
-  }
-
-  &:focus-within {
-    @apply border-gray-500 ring-4 ring-gray-200;
-  }
-
-  &:active {
-    @apply border-gray-900 bg-gray-900;
-  }
-
-  &-input {
-    @apply opacity-0;
-    @apply absolute left-0 top-0;
-    @apply h-full w-full;
-    @apply cursor-pointer;
-  }
-
-  &-checked {
-    @apply border-gray-900 bg-gray-900;
-
-    &:hover {
-      @apply border-gray-900;
-    }
-  }
-
-  &-label {
-    @apply flex flex-col justify-center;
-    @apply text-base font-normal text-gray-900;
-    @apply pl-4;
-  }
-}
-
-.check {
-  &:deep(g) {
-    @apply stroke-white stroke-[1.75];
-  }
-
-  &:deep(polygon) {
-    @apply hidden;
-  }
-}
-
-.size {
-  &-sm {
-    @apply h-5 w-5;
-
-    & + .multistate-checkbox-label {
-      @apply text-sm;
-    }
-  }
-
-  &-md {
-    @apply h-6 w-6;
-  }
-
-  &-lg {
-    @apply h-7 w-7;
-
-    & + .mono-checkbox-multistate-label {
-      @apply text-lg;
-    }
-  }
-}
-</style>