vueless 0.0.1 → 0.0.3

package/ui.form-switch/index.vue

@@ -1,673 +1,218 @@
 <template>
-  <div class="mono-switch-wrapper">
-    <div class="mono-switch" :class="switchClasses" :data-cy="dataCy" @click="onClickChangeSwitch">
-      <div class="mono-switch-block" :class="switchBlockClasses">
-        <input
-          v-model="checkedValue"
-          class="mono-switch-input"
-          type="checkbox"
-          :disabled="disabled"
-          @focus="onFocus"
-          @blur="onBlur"
+  <ULabel
+    :for="id"
+    :size="size"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+    @click="onClickToggle"
+  >
+    <label :for="id" v-bind="wrapperAttrs">
+      <input
+        :id="id"
+        v-model="checkedValue"
+        type="checkbox"
+        :disabled="disabled"
+        v-bind="inputAttrs"
+        @click="onClickToggle"
+        @keydown.space="onKeydownSpace"
+      />
+
+      <span v-bind="circleAttrs">
+        <UIcon
+          v-if="toggleIcon"
+          :name="iconName"
+          :color="iconColor"
+          :size="iconSize"
+          v-bind="iconAttrs"
         />
-        <div class="mono-switch-circle" :class="circleClass">
-          <UIcon
-            v-if="withIcon"
-            :name="checkedValue ? 'check' : 'close'"
-            :color="iconColor"
-            :size="iconSize"
-          />
-        </div>
-      </div>
-      <div v-if="!checkLabelVariant('hidden')" class="mono-switch-title" :class="labelClasses">
-        {{ switchLabel }}
-      </div>
-    </div>
-
-    <div class="mono-switch-info">
-      <slot name="label">
-        <div v-if="label" class="mono-switch-info-label" :class="labelSizeClass">{{ label }}</div>
-      </slot>
-
-      <div v-if="description" class="mono-switch-info-description">{{ description }}</div>
-    </div>
-  </div>
+      </span>
+
+      <span v-if="toggleLabel" v-bind="toggleLabelAttrs" v-text="switchLabel" />
+    </label>
+  </ULabel>
 </template>
 
-<script>
-import I18nServiceDefault from "vueless/service.i18n";
+<script setup>
+import { computed } from "vue";
 
 import UIcon from "vueless/ui.image-icon";
-
-const LABEL_VARIANT = {
-  hidden: "hidden",
-  inside: "inside",
-  left: "left",
-};
-
-export default {
-  name: "USwitch",
-
-  components: {
-    UIcon,
+import UIService, { getRandomId } from "vueless/service.ui";
+import I18nServiceDefault from "@vueless/services/i18n";
+
+import { USwitch } 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: "USwitch", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set switch value.
+   */
+  modelValue: {
+    type: Boolean,
+    default: false,
   },
 
-  props: {
-    /**
-     * Set switch value.
-     */
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The label variant of the switch.
-     * @values hidden, inside, left, right
-     */
-    labelVariant: {
-      type: String,
-      default: "hidden",
-    },
-
-    /**
-     * Set description.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of the switch.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * The color of the switch.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Show on / off icon inside circle.
-     */
-    withIcon: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Show on / off icon inside circle.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Label alignment.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, USwitch).default.labelAlign,
   },
 
-  emits: ["update:modelValue"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  data() {
-    return {
-      focus: false,
-    };
+  /**
+   * Set description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
 
-  computed: {
-    i18n() {
-      return {
-        active: this.getTranslation("active"),
-        inactive: this.getTranslation("inactive"),
-      };
-    },
-
-    checkedValue: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    switchLabel() {
-      return this.checkedValue ? this.i18n.active : this.i18n.inactive;
-    },
-
-    isLabelInside() {
-      return (
-        this.checkLabelVariant(LABEL_VARIANT.inside) && this.checkLabelVariant(LABEL_VARIANT.hidden)
-      );
-    },
-
-    labelPositionClass() {
-      return this.checkLabelVariant(LABEL_VARIANT.left) && !this.isLabelInside
-        ? "mono-switch-left"
-        : "mono-switch-right";
-    },
-
-    switchClasses() {
-      const size = `size-${this.size}`;
-      const position = this.labelPositionClass;
-
-      const width =
-        this.checkLabelVariant(LABEL_VARIANT.hidden) || this.checkLabelVariant(LABEL_VARIANT.inside)
-          ? "width-content"
-          : "";
-
-      const state = this.checkedValue ? "mono-switch-on" : "mono-switch-off";
-      const disabled = this.disabled ? "mono-switch-disabled" : "";
-
-      return [size, position, width, state, disabled];
-    },
-
-    switchBlockClasses() {
-      const label = this.checkLabelVariant(LABEL_VARIANT.inside) ? "label-inside" : "";
-      const focus = this.focus ? "focus" : "";
-
-      return [label, focus, this.color];
-    },
-
-    labelSizeClass() {
-      return `size-${this.size}`;
-    },
-
-    circleClass() {
-      const margin = {
-        "circle-ml-sm": this.size === "sm",
-        "circle-ml-md": this.size === "md",
-        "circle-ml-lg": this.size === "lg",
-      };
-
-      return this.checkedValue ? margin : "";
-    },
-
-    iconSize() {
-      const sizes = {
-        sm: "2xs",
-        md: "xs",
-        lg: "sm",
-      };
-
-      return sizes[this.size];
-    },
-
-    iconColor() {
-      return this.checkedValue ? this.color : "gray";
-    },
-
-    labelBackgroundClass() {
-      let background = "";
-
-      if (!this.checkLabelVariant(LABEL_VARIANT.inside)) {
-        background = this.checkedValue ? this.color : "bg-gray";
-      }
-
-      return background;
-    },
-
-    labelClasses() {
-      const variant = this.labelBackgroundClass;
-
-      const labelPosition = this.checkLabelVariant(LABEL_VARIANT.inside)
-        ? "label-inside"
-        : "mono-switch-title-outside";
-
-      return [labelPosition, variant];
-    },
+  /**
+   * The size of the switch.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, USwitch).default.size,
   },
 
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-
-    onBlur() {
-      this.focus = false;
-    },
-
-    checkLabelVariant(variant) {
-      return variant === this.labelVariant;
-    },
-
-    onClickChangeSwitch() {
-      if (this.disabled) return;
-
-      this.checkedValue = !this.checkedValue;
-    },
+  /**
+   * The color of the switch.
+   * @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, USwitch).default.color,
   },
-};
-</script>
-
-<i18n>
-en:
-  inactive: "Off"
-  active: "On"
-ru:
-  inactive: "Выкл"
-  active: "Вкл"
-ua:
-  inactive: "Викл"
-  active: "Вкл"
-</i18n>
-
-<style lang="postcss" scoped>
-.gray {
-  @apply bg-gray-500;
-
-  &.focus {
-    @apply border-gray-800 ring-gray-800;
-  }
-
-  &:hover {
-    @apply bg-gray-600;
-  }
-
-  &:active {
-    @apply bg-gray-700;
-  }
-}
-
-.red {
-  @apply bg-red-500;
-
-  &.focus {
-    @apply border-red-700 ring-red-700;
-  }
-
-  &:hover {
-    @apply bg-red-600;
-  }
-
-  &:active {
-    @apply bg-red-700;
-  }
-}
-
-.orange {
-  @apply bg-orange-500;
-
-  &.focus {
-    @apply border-orange-700 ring-orange-700;
-  }
-
-  &:hover {
-    @apply bg-orange-600;
-  }
 
-  &:active {
-    @apply bg-orange-700;
-  }
-}
-
-.yellow {
-  @apply bg-yellow-500;
-
-  &.focus {
-    @apply border-yellow-700 ring-yellow-700;
-  }
-
-  &:hover {
-    @apply bg-yellow-600;
-  }
-
-  &:active {
-    @apply bg-yellow-700;
-  }
-}
-
-.green {
-  @apply bg-green-500;
-
-  &.focus {
-    @apply border-green-700 ring-green-700;
-  }
-
-  &:hover {
-    @apply bg-green-600;
-  }
-
-  &:active {
-    @apply bg-green-700;
-  }
-}
-
-.blue {
-  @apply bg-blue-500;
-
-  &.focus {
-    @apply border-blue-700 ring-blue-700;
-  }
-
-  &:hover {
-    @apply bg-blue-600;
-  }
-
-  &:active {
-    @apply bg-blue-700;
-  }
-}
+  /**
+   * Show on / off icon inside circle.
+   */
+  toggleIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USwitch).default.toggleIcon,
+  },
 
-.violet {
-  @apply bg-violet-500;
+  /**
+   * The label variant of the switch.
+   */
+  toggleLabel: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USwitch).default.toggleLabel,
+  },
 
-  &.focus {
-    @apply border-violet-700 ring-violet-700;
-  }
+  /**
+   * Show on / off icon inside circle.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USwitch).default.disabled,
+  },
 
-  &:hover {
-    @apply bg-violet-600;
-  }
+  /**
+   * Unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-  &:active {
-    @apply bg-violet-700;
-  }
-}
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-.fuchsia {
-  @apply bg-fuchsia-500;
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &.focus {
-    @apply border-fuchsia-700 ring-fuchsia-700;
-  }
+const emit = defineEmits(["update:modelValue"]);
 
-  &:hover {
-    @apply bg-fuchsia-600;
-  }
+const { getTranslation } = new I18nServiceDefault();
 
-  &:active {
-    @apply bg-fuchsia-700;
-  }
-}
+const i18n = computed(() => ({
+  active: getTranslation("active"),
+  inactive: getTranslation("inactive"),
+}));
 
-.mono-switch-disabled {
-  .gray {
-    &:hover,
-    &:active {
-      @apply bg-gray-500;
-    }
-  }
+const checkedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
 
-  .red {
-    &:hover,
-    &:active {
-      @apply bg-red-500;
-    }
-  }
+const { config, iconAttrs, labelAttrs, inputAttrs, wrapperAttrs, circleAttrs, toggleLabelAttrs } =
+  useAttrs(props, { checked: checkedValue });
 
-  .orange {
-    &:hover,
-    &:active {
-      @apply bg-orange-500;
-    }
-  }
+const switchLabel = computed(() => {
+  return checkedValue.value ? i18n.value.active : i18n.value.inactive;
+});
 
-  .yellow {
-    &:hover,
-    &:active {
-      @apply bg-yellow-500;
-    }
-  }
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
 
-  .green {
-    &:hover,
-    &:active {
-      @apply bg-green-500;
-    }
-  }
+  return sizes[props.size];
+});
 
-  .blue {
-    &:hover,
-    &:active {
-      @apply bg-blue-500;
-    }
-  }
+const iconColor = computed(() => {
+  return checkedValue.value ? props.color : "grayscale";
+});
 
-  .violet {
-    &:hover,
-    &:active {
-      @apply bg-violet-500;
-    }
-  }
+const iconName = computed(() => {
+  return checkedValue.value ? config.value.selectedIconName : config.value.unselectedIconName;
+});
 
-  .fuchsia {
-    &:hover,
-    &:active {
-      @apply bg-fuchsia-500;
-    }
+function toggle() {
+  if (!props.disabled) {
+    checkedValue.value = !checkedValue.value;
   }
 }
 
-.circle-ml-sm {
-  margin-left: calc(100% - 1.25rem);
-}
-
-.circle-ml-md {
-  margin-left: calc(100% - 1.5rem);
-}
-
-.circle-ml-lg {
-  margin-left: calc(100% - 1.625rem);
-}
-
-.width-content {
-  @apply w-min;
+function onClickToggle() {
+  toggle();
 }
 
-.bg-gray {
-  @apply bg-gray-300;
+function onKeydownSpace() {
+  toggle();
 }
+</script>
 
-.focus {
-  @apply ring-4 !ring-opacity-10;
-}
-
-.mono-switch-wrapper {
-  @apply flex w-full items-start space-x-2;
-}
-
-.mono-switch {
-  @apply relative flex items-center;
-
-  &.size {
-    &-sm {
-      .mono-switch-block {
-        @apply w-10;
-      }
-
-      .mono-switch-block.label-inside {
-        @apply w-14;
-      }
-
-      .mono-switch-circle {
-        @apply h-5 w-5;
-      }
-
-      &.mono-switch-info-label {
-        @apply text-sm;
-      }
-    }
-
-    &-md {
-      .mono-switch-block {
-        @apply w-12;
-      }
-
-      .mono-switch-block.label-inside {
-        @apply w-[4rem];
-      }
-
-      .mono-switch-circle {
-        @apply h-6 w-6;
-      }
-    }
-
-    &-lg {
-      .mono-switch-block {
-        @apply w-14;
-      }
-
-      .mono-switch-block.label-inside {
-        @apply w-[4.2rem];
-      }
-
-      .mono-switch-circle {
-        @apply h-[1.625rem] w-[1.625rem];
-      }
-
-      &.mono-switch-info-label {
-        @apply text-lg;
-      }
-    }
-  }
-
-  &-block {
-    @apply relative flex items-center;
-    @apply rounded-3xl p-0.5;
-    @apply cursor-pointer;
-    @apply transition-all duration-300 ease-in-out;
-  }
-
-  &-input {
-    @apply absolute;
-    @apply h-0 w-0;
-    @apply opacity-0;
-  }
-
-  &-circle {
-    @apply h-4 w-4 rounded-full bg-white;
-    @apply transition-all duration-300 ease-in-out;
-    @apply flex items-center justify-center;
-  }
-
-  &-title {
-    @apply absolute right-0;
-    @apply text-center text-2xs font-medium uppercase text-white;
-    @apply cursor-pointer transition-all duration-300 ease-in-out;
-
-    &-outside {
-      @apply h-[0.87rem] w-[1.875rem] rounded-sm;
-      @apply pt-px text-center;
-    }
-  }
-
-  &-off {
-    .mono-switch-block {
-      @apply bg-gray-300;
-
-      &:hover {
-        @apply bg-gray-400;
-      }
-
-      &:active {
-        @apply bg-gray-500;
-      }
-    }
-
-    &.mono-switch-disabled {
-      .mono-switch-block {
-        @apply bg-opacity-50;
-
-        &:hover,
-        &:active {
-          @apply cursor-default bg-gray-300 bg-opacity-50;
-        }
-      }
-    }
-
-    .mono-switch-circle {
-      @apply ml-0;
-    }
-
-    .mono-switch-title.label-inside {
-      @apply w-1/2;
-      @apply right-1;
-    }
-
-    .focus {
-      @apply border-gray-800 ring-gray-800;
-    }
-  }
-
-  &-on {
-    .mono-switch-title.label-inside {
-      @apply left-1 right-auto;
-      @apply w-1/2;
-    }
-
-    &.mono-switch-disabled {
-      .mono-switch-block {
-        @apply bg-opacity-50;
-
-        &:hover,
-        &:active {
-          @apply cursor-default bg-opacity-50;
-        }
-      }
-    }
-  }
-
-  &-left {
-    @apply pl-[2.125rem];
-
-    .mono-switch-title {
-      @apply left-0 right-auto;
-    }
-  }
-
-  &-info {
-    &-label {
-      @apply font-normal text-gray-900;
-    }
-
-    &-description {
-      @apply text-xs font-normal text-gray-500/[85];
-    }
-  }
-}
-</style>
-
-<!-- Brand theme -->
-<style lang="postcss" scoped>
-.brand {
-  &.focus {
-    @apply border-brand ring-brand;
-  }
-
-  &.mono-switch-on {
-    & > .brand {
-      @apply bg-brand;
-    }
-  }
-}
-</style>
+<i18n>
+en:
+  inactive: "Off"
+  active: "On"
+ru:
+  inactive: "Выкл"
+  active: "Вкл"
+ua:
+  inactive: "Викл"
+  active: "Вкл"
+</i18n>