lau-ecom-design-system 1.0.0

package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+
+interface Props {
+  id?: string;
+  label?: string;
+  value?: string | number | boolean;
+  modelValue?: string | number | boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "",
+  label: "default",
+  value: "",
+  modelValue: "",
+  isRequired: false,
+  isDisabled: true,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const lauEcomRadioButtonClasses = computed(() => {
+  return {
+    "lau-ecom-radio-button": true,
+    "lau-ecom-radio-button--disabled": props.isDisabled,
+  };
+});
+
+const radioGroupValue = ref(props.modelValue);
+const handleChange = () => {
+  emit("update:modelValue", String(props.value));
+};
+</script>
+
+<template>
+  <label>
+    <input
+      :id="id"
+      v-model="radioGroupValue"
+      :class="lauEcomRadioButtonClasses"
+      type="radio"
+      :disabled="isDisabled"
+      :value="value"
+      @change="handleChange"
+    />
+    <span :for="id">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.lau-ecom-radio-button {
+  @apply dsEcom-relative
+    dsEcom-float-left
+    dsEcom-mr-2
+    dsEcom-h-5
+    dsEcom-w-5
+    dsEcom-appearance-none
+    dsEcom-rounded-full
+    dsEcom-border-[1px]
+    dsEcom-border-solid
+    dsEcom-border-upc-color-neutral-90
+    hover:dsEcom-border-upc-color-red-60-base
+    checked:dsEcom-border-upc-color-red-60-base 
+    checked:before:dsEcom-opacity-[0.16] 
+    checked:after:dsEcom-content-[''] 
+    checked:after:dsEcom-absolute 
+    checked:after:dsEcom-left-1/2 
+    checked:after:dsEcom-top-1/2 
+    checked:after:dsEcom-h-3 
+    checked:after:dsEcom-w-3 
+    checked:after:dsEcom-rounded-full 
+    checked:after:dsEcom-bg-upc-color-red-60-base 
+    checked:after:[transform:translate(-50%,-50%)] 
+    checked:focus:dsEcom-border-upc-color-red-60-base 
+    checked:focus:before:dsEcom-scale-100;
+}
+
+.lau-ecom-radio-button--disabled {
+  @apply !dsEcom-border-upc-color-neutral-50
+  checked:after:dsEcom-bg-upc-color-neutral-50 
+  disabled:dsEcom-cursor-not-allowed;
+}
+</style>

package/src/components/LauEcomStepbar/LauEcomStepbar.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+// import { ref } from 'vue';
+import { Step } from "./types";
+import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
+
+interface Props {
+  steps: Step[];
+  currentStep: number;
+}
+withDefaults(defineProps<Props>(), {
+  steps: () => [
+    {
+      numberStep: 1,
+      label: "Step",
+    },
+    {
+      numberStep: 2,
+      label: "Step",
+    },
+    {
+      numberStep: 3,
+      label: "Step",
+    },
+    {
+      numberStep: 4,
+      label: "Step",
+    },
+  ],
+  currentStep: 1,
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-w-full">
+    <LauEcomStepbarItem
+      v-for="(step, index) in steps"
+      :key="`lau-ecom-stepbar-item-${index + 1}`"
+      :step="step"
+      :is-completed="currentStep > index + 1"
+      :is-current-step="currentStep === index + 1"
+      :is-last-item="index === steps.length - 1"
+      :total-steps="steps.length"
+    />
+  </div>
+</template>

package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { computed, toRefs } from "vue";
+import { Step } from "./types";
+import { LauEcomUpcIconCheck } from "../LauEcomIcon";
+import { Colors } from "../../utils";
+
+interface Props {
+  step: Step;
+  totalSteps: number;
+  isCurrentStep: boolean;
+  isCompleted: boolean;
+  isLastItem: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: () => ({
+    numberStep: 1,
+    label: "Step,",
+  }),
+  totalSteps: 10,
+  isCurrentStep: false,
+  isCompleted: false,
+  isLastItem: false,
+});
+
+const { numberStep, label } = toRefs(props.step);
+
+const stepbarItemClasses = computed(() => {
+  return [
+    "lau-ecom-step upc-font-body-reg-05-14px",
+    {
+      "lau-ecom-step--current": props.isCurrentStep,
+    },
+    {
+      "lau-ecom-step--completed": props.isCompleted,
+    },
+  ];
+});
+
+const stepTrailClasses = computed(() => {
+  return [
+    "lau-ecom-step-trail",
+    {
+      "lau-ecom-step-trail--completed": props.isCompleted,
+    },
+  ];
+});
+
+const stepLabelClasses = computed(() => {
+  return [
+    "lau-ecom-step-label core-font-body-reg-06-12px",
+    {
+      "lau-ecom-step-label--disabled":
+        !props.isCompleted && !props.isCurrentStep,
+    },
+    {
+      "lau-ecom-step-label--current": props.isCurrentStep,
+    },
+  ];
+});
+</script>
+
+<template>
+  <div class="dsEcom-w-full">
+    <div class="dsEcom-flex dsEcom-items-center dsEcom-w-full">
+      <div :class="stepbarItemClasses">
+        <span v-if="!props.isCompleted">
+          {{ `${numberStep < 10 && "0"}${numberStep}` }}
+        </span>
+        <LauEcomUpcIconCheck
+          v-else
+          :color="Colors['upc-color-neutral-10']"
+          width="24"
+          height="24"
+        />
+      </div>
+      <span v-if="!isLastItem" :class="stepTrailClasses" />
+    </div>
+    <span :class="stepLabelClasses">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-step {
+  @apply dsEcom-flex 
+    dsEcom-items-center
+    dsEcom-justify-center 
+    dsEcom-border 
+    dsEcom-border-upc-color-neutral-70 
+    dsEcom-text-upc-color-neutral-70 
+    dsEcom-bg-upc-color-neutral-10
+    dsEcom-w-8 
+    dsEcom-h-8
+    dsEcom-rounded-full;
+}
+
+.lau-ecom-step--completed {
+  @apply !dsEcom-text-upc-color-neutral-10 
+    !dsEcom-bg-upc-color-red-60-base 
+    dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-step--current {
+  @apply !dsEcom-text-upc-color-red-60-base 
+    dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-step-trail {
+  @apply dsEcom-bg-upc-color-neutral-70 
+    dsEcom-grow 
+    !dsEcom-h-[1px];
+}
+
+.lau-ecom-step-trail--completed {
+  @apply !dsEcom-bg-upc-color-red-60-base;
+}
+
+.lau-ecom-step-label {
+  @apply dsEcom-text-upc-color-red-60-base;
+}
+
+.lau-ecom-step-label--current {
+  @apply dsEcom-font-bold;
+}
+
+.lau-ecom-step-label--disabled {
+  @apply dsEcom-text-upc-color-neutral-70;
+}
+</style>

package/src/components/LauEcomSwitch/LauEcomSwitch.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface Props {
+  currentClass?: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  id?: string;
+  name?: string;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentClass: "",
+  isDisabled: false,
+  isChecked: false,
+  id: "",
+  name: "",
+  label: "",
+  errorMessage: "",
+});
+
+const model = defineModel<boolean>();
+
+const lauEcomSwitchClasses = computed(() => {
+  return {
+    "dsEcom-peer lau-ecom-switch": true,
+    "lau-ecom-switch--disabled": props.isDisabled,
+  };
+});
+
+const lauEcomSwitchButtonClasses = computed(() => {
+  return {
+    "lau-ecom-switch-button": true,
+  };
+});
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <input
+      :id="id"
+      v-model="model"
+      type="checkbox"
+      :name="name"
+      :disabled="isDisabled"
+      :class="lauEcomSwitchClasses"
+    />
+    <div :class="lauEcomSwitchButtonClasses" />
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-switch {
+  @apply dsEcom-relative
+    dsEcom-cursor-pointer
+    dsEcom-shrink-0
+    dsEcom-appearance-none
+    dsEcom-w-10
+    dsEcom-h-6
+    dsEcom-border
+    dsEcom-border-upc-color-red-90
+    dsEcom-rounded-full
+    dsEcom-bg-white
+    dsEcom-transition-all
+    dsEcom-duration-[0.3s]
+    checked:dsEcom-bg-upc-color-red-60-base
+    checked:dsEcom-border-upc-color-red-60-base
+    checked:dsEcom-p-1
+    checked:dsEcom-cursor-pointer
+    checked:disabled:!dsEcom-bg-upc-color-neutral-60
+    checked:disabled:!dsEcom-border-upc-color-neutral-60;
+}
+
+.lau-ecom-switch--disabled {
+  @apply dsEcom-border-upc-color-neutral-60
+    dsEcom-pointer-events-none;
+}
+
+.lau-ecom-switch-button {
+  @apply dsEcom-absolute
+    dsEcom-top-1
+    dsEcom-w-4
+    dsEcom-h-4
+    dsEcom-ml-1
+    dsEcom-bg-upc-color-neutral-90
+    dsEcom-rounded-full
+    dsEcom-pointer-events-none
+    dsEcom-transition-all
+    dsEcom-duration-[0.3s]
+    peer-checked:dsEcom-ml-5
+    peer-checked:dsEcom-bg-white;
+}
+</style>

package/src/enums/index.ts

@@ -0,0 +1,2 @@
+export { UpcSize } from "./size";
+export { LauEcomInstance } from "./instance";

package/src/enums/instance.ts

@@ -0,0 +1,5 @@
+export enum LauEcomInstance {
+  Upc = "UPC",
+  Upn = "UPN",
+  Cibertec = "CIBERTEC",
+}

package/src/enums/size.ts

@@ -0,0 +1,6 @@
+export enum UpcSize {
+  sm = "small",
+  md = "medium",
+  lg = "large",
+  full = "full",
+}