lib-pajakio-v2 1.0.0

package/src/components/Form/FormTextarea.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="form-textarea flex flex-col">
+    <div :class="`label-${labelPosition}`">
+      <slot name="label" />
+      <div class="w-full">
+        <textarea 
+          class="w-full"
+          data-test="base-form-textarea"
+          :cols="cols" 
+          :rows="rows" 
+          :maxlength="maxLength"
+          :class="{
+            error: error,
+            'text-right': textAlign == 'right',
+            'text-left': textAlign == 'left',
+            'no-resize': noResize
+          }"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          @input="updateInput"
+          v-model="dataValue"
+          :readonly="readonly"
+        />
+        <div
+          v-if="message"
+          class="helper-text"
+          :class="{ 'error-helper': error }"
+          v-html="message"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    cols: {
+      type: [String, Number],
+      default: ""
+    },
+    rows: {
+      type: [String, Number],
+      default: ""
+    },
+    maxLength: {
+      type: [String, Number],
+      default: ""
+    },
+    placeholder: {
+      type: [String],
+      default: "Your text input here",
+    },
+    disabled: {
+      type: [Boolean],
+      default: false,
+    },
+    error: {
+      type: [Boolean],
+      default: false,
+    },
+    message: {
+      type: [String],
+      default: "",
+    },
+    textAlign: {
+      type: [String],
+      default: "left",
+      validator: function (value) {
+        return ["left", "right"].indexOf(value) !== -1;
+      },
+    },
+    modelValue: {
+      type: [String, Number, Array, Object],
+    },
+    labelPosition: {
+      type: [String],
+      validator: function (value) {
+        return ["left", "top"].indexOf(value) !== -1;
+      },
+    },
+    readonly: {
+      type: [Boolean],
+      default: false,
+    },
+    noResize: {
+      type: [Boolean],
+      default: false,
+    },
+    type: {
+      type: [String],
+      default: "text",
+      validator: function (value) {
+        return ["text", "number", "password", "alphanumeric", "alphanumericspace"].indexOf(value) !== -1;
+      },
+    },
+  },
+  data() {
+    return {
+      dataValue: ""
+    }
+  },
+  watch: {
+    dataValue(newVal) {
+      this.dataValue = this.processFilter(newVal)
+      this.$emit("update:modelValue", newVal);
+    },
+    modelValue(newVal) {
+      this.dataValue = newVal
+    }
+  },
+  mounted() {
+    this.dataValue = this.modelValue
+  },
+  methods: {
+    updateInput(event) {
+      this.$emit("update:modelValue", event.target.value);
+    },
+    processFilter: function (val) {
+      if (this.type == "email") val = val.toLowerCase();
+      if (this.type == "number") return val ? String(val).replace(/[^0-9]/g, "") : val;
+      if (this.type == "alphanumeric") return String(val).replace(/[^0-9a-zA-Z]/g, "");
+      if (this.type == "alphanumericspace") return String(val).replace(/[^0-9 a-zA-Z]/g, "");
+      else return val;
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@use "@/assets/style/_color.scss" as *;
+
+.form-textarea {
+  .no-resize {
+    resize: none;
+  }
+  
+  .label-top {
+    display: flex;
+    flex-flow: column;
+
+    .typo-text {
+      margin-bottom: 8px;
+    }
+  }
+
+  .label-left {
+    display: flex;
+
+    .typo-text {
+      margin-right: 12px;
+      height: 37px;
+      align-self: flex-start;
+      display: flex;
+      align-items: center;
+      min-width: fit-content;
+    }
+  }
+
+  textarea {
+    border: 1px solid $neutral-2;
+    background: $neutral-0;
+    border-radius: 6px;
+    padding: 8px 16px;
+    outline: none;
+    font-size: 14px;
+    color: $neutral-6;
+    max-width: -webkit-fill-available;
+    resize: vertical;
+
+    &:hover,
+    &:focus {
+      border-color: $dark-blue-4;
+    }
+
+    &::placeholder {
+      color: $neutral-3;
+    }
+
+    &:disabled {
+      background: $neutral-1;
+      border-color: $neutral-2;
+    }
+  }
+
+  .error {
+    border-color: $critical-4;
+    &:hover,
+    &:focus {
+      border-color: $critical-4;
+    }
+  }
+
+  .helper-text {
+    font-size: 10px;
+    margin-top: 4px;
+    color: $neutral-6;
+  }
+
+  .error-helper {
+    color: $critical-4;
+  }
+}
+</style>

package/src/components/Icons/Action/Accessibility.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M12 2.00018C13.1 2.00018 14 2.90018 14 4.00018C14 5.10018 13.1 6.00018 12 6.00018C10.9 6.00018 10 5.10018 10 4.00018C10 2.90018 10.9 2.00018 12 2.00018ZM20 9.00018H15V21.0002C15 21.5502 14.55 22.0002 14 22.0002C13.45 22.0002 13 21.5502 13 21.0002V16.0002H11V21.0002C11 21.5502 10.55 22.0002 10 22.0002C9.45 22.0002 9 21.5502 9 21.0002V9.00018H4C3.45 9.00018 3 8.55018 3 8.00018C3 7.45018 3.45 7.00018 4 7.00018H20C20.55 7.00018 21 7.45018 21 8.00018C21 8.55018 20.55 9.00018 20 9.00018Z"
+  />
+</template>

package/src/components/Icons/Action/AccessibilityNew.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M20.75 6.99018C20.61 6.44018 20.06 6.12018 19.51 6.24018C17.13 6.77018 14.48 7.00018 12 7.00018C9.52002 7.00018 6.87002 6.77018 4.49002 6.24018C3.94002 6.12018 3.39002 6.44018 3.25002 6.99018C3.11002 7.55018 3.45002 8.12018 4.00002 8.25018C5.61002 8.61018 7.35002 8.86018 9.00002 9.00018V21.0002C9.00002 21.5502 9.45002 22.0002 10 22.0002C10.55 22.0002 11 21.5502 11 21.0002V16.0002H13V21.0002C13 21.5502 13.45 22.0002 14 22.0002C14.55 22.0002 15 21.5502 15 21.0002V9.00018C16.65 8.86018 18.39 8.61018 19.99 8.25018C20.55 8.12018 20.89 7.55018 20.75 6.99018ZM12 6.00018C13.1 6.00018 14 5.10018 14 4.00018C14 2.90018 13.1 2.00018 12 2.00018C10.9 2.00018 10 2.90018 10 4.00018C10 5.10018 10.9 6.00018 12 6.00018Z"
+  />
+</template>

package/src/components/Icons/Action/Accessible.vue

@@ -0,0 +1,10 @@
+<template>
+  <g>
+    <path
+      d="M12 6.00018C13.1046 6.00018 14 5.10475 14 4.00018C14 2.89561 13.1046 2.00018 12 2.00018C10.8954 2.00018 10 2.89561 10 4.00018C10 5.10475 10.8954 6.00018 12 6.00018Z"
+    />
+    <path
+      d="M19 11.9002C19 11.4102 18.64 11.0102 18.16 10.9302C16.91 10.7202 15.73 10.0502 14.93 9.17019L13.64 7.74019C13.47 7.55019 13.26 7.40019 13.03 7.29019C13.02 7.29019 13.02 7.28019 13.01 7.28019H13C12.63 7.07019 12.22 6.97019 11.75 7.03019C10.73 7.15019 10 8.07019 10 9.10019V15.0002C10 16.1002 10.9 17.0002 12 17.0002H17V21.0002C17 21.5502 17.45 22.0002 18 22.0002C18.55 22.0002 19 21.5502 19 21.0002V16.5002C19 15.4002 18.1 14.5002 17 14.5002H14V11.0502C15 11.8802 16.4 12.5902 17.8 12.8702C18.42 13.0002 19 12.5302 19 11.9002ZM12.83 18.0002C12.42 19.1602 11.31 20.0002 10 20.0002C8.34 20.0002 7 18.6602 7 17.0002C7 15.6902 7.84 14.5902 9 14.1702V12.1002C6.72 12.5602 5 14.5802 5 17.0002C5 19.7602 7.24 22.0002 10 22.0002C12.42 22.0002 14.44 20.2802 14.9 18.0002H12.83Z"
+    />
+  </g>
+</template>

package/src/components/Icons/Action/AccessibleForward.vue

@@ -0,0 +1,10 @@
+<template>
+  <g>
+    <path
+      d="M18 6.54018C19.1046 6.54018 20 5.64475 20 4.54018C20 3.43561 19.1046 2.54018 18 2.54018C16.8954 2.54018 16 3.43561 16 4.54018C16 5.64475 16.8954 6.54018 18 6.54018Z"
+    />
+    <path
+      d="M15 17.0002H13C13 18.6502 11.65 20.0002 10 20.0002C8.35 20.0002 7 18.6502 7 17.0002C7 15.3502 8.35 14.0002 10 14.0002V12.0002C7.24 12.0002 5 14.2402 5 17.0002C5 19.7602 7.24 22.0002 10 22.0002C12.76 22.0002 15 19.7602 15 17.0002ZM18 13.5002H16.14L17.81 9.83018C18.42 8.50018 17.44 7.00018 15.96 7.00018H10.76C9.95 7.00018 9.22 7.47018 8.89 8.20018L8.61 8.96018C8.4 9.52018 8.72 10.1302 9.29 10.2902C9.78 10.4302 10.29 10.1802 10.49 9.71018L10.79 9.00018H13L11.17 13.1002C10.57 14.4302 11.56 16.0002 13.02 16.0002H18V20.0002C18 20.5502 18.45 21.0002 19 21.0002C19.55 21.0002 20 20.5502 20 20.0002V15.5002C20 14.4002 19.1 13.5002 18 13.5002Z"
+    />
+  </g>
+</template>

package/src/components/Icons/Action/AccountBalance.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M4 11.5002V15.5002C4 16.3302 4.67 17.0002 5.5 17.0002C6.33 17.0002 7 16.3302 7 15.5002V11.5002C7 10.6702 6.33 10.0002 5.5 10.0002C4.67 10.0002 4 10.6702 4 11.5002ZM10 11.5002V15.5002C10 16.3302 10.67 17.0002 11.5 17.0002C12.33 17.0002 13 16.3302 13 15.5002V11.5002C13 10.6702 12.33 10.0002 11.5 10.0002C10.67 10.0002 10 10.6702 10 11.5002ZM3.5 22.0002H19.5C20.33 22.0002 21 21.3302 21 20.5002C21 19.6702 20.33 19.0002 19.5 19.0002H3.5C2.67 19.0002 2 19.6702 2 20.5002C2 21.3302 2.67 22.0002 3.5 22.0002ZM16 11.5002V15.5002C16 16.3302 16.67 17.0002 17.5 17.0002C18.33 17.0002 19 16.3302 19 15.5002V11.5002C19 10.6702 18.33 10.0002 17.5 10.0002C16.67 10.0002 16 10.6702 16 11.5002ZM10.57 1.49019L2.67 5.65019C2.26 5.86019 2 6.29019 2 6.75019C2 7.44019 2.56 8.00019 3.25 8.00019H19.76C20.44 8.00019 21 7.44019 21 6.75019C21 6.29019 20.74 5.86019 20.33 5.65019L12.43 1.49019C11.85 1.18019 11.15 1.18019 10.57 1.49019Z"
+  />
+</template>

package/src/components/Icons/Action/AccountBalanceWallet.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M10 16.0002V8.00018C10 6.90018 10.89 6.00018 12 6.00018H21V5.00018C21 3.90018 20.1 3.00018 19 3.00018H5C3.89 3.00018 3 3.90018 3 5.00018V19.0002C3 20.1002 3.89 21.0002 5 21.0002H19C20.1 21.0002 21 20.1002 21 19.0002V18.0002H12C10.89 18.0002 10 17.1002 10 16.0002ZM13 8.00018C12.45 8.00018 12 8.45018 12 9.00018V15.0002C12 15.5502 12.45 16.0002 13 16.0002H22V8.00018H13ZM16 13.5002C15.17 13.5002 14.5 12.8302 14.5 12.0002C14.5 11.1702 15.17 10.5002 16 10.5002C16.83 10.5002 17.5 11.1702 17.5 12.0002C17.5 12.8302 16.83 13.5002 16 13.5002Z"
+  />
+</template>

package/src/components/Icons/Action/AccountBox.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M3 5.00018V19.0002C3 20.1002 3.89 21.0002 5 21.0002H19C20.1 21.0002 21 20.1002 21 19.0002V5.00018C21 3.90018 20.1 3.00018 19 3.00018H5C3.89 3.00018 3 3.90018 3 5.00018ZM15 9.00018C15 10.6602 13.66 12.0002 12 12.0002C10.34 12.0002 9 10.6602 9 9.00018C9 7.34018 10.34 6.00018 12 6.00018C13.66 6.00018 15 7.34018 15 9.00018ZM6 17.0002C6 15.0002 10 13.9002 12 13.9002C14 13.9002 18 15.0002 18 17.0002V18.0002H6V17.0002Z"
+  />
+</template>

package/src/components/Icons/Action/AccountCircle.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M12 2.00018C6.48 2.00018 2 6.48018 2 12.0002C2 17.5202 6.48 22.0002 12 22.0002C17.52 22.0002 22 17.5202 22 12.0002C22 6.48018 17.52 2.00018 12 2.00018ZM12 5.00018C13.66 5.00018 15 6.34018 15 8.00018C15 9.66018 13.66 11.0002 12 11.0002C10.34 11.0002 9 9.66018 9 8.00018C9 6.34018 10.34 5.00018 12 5.00018ZM12 19.2002C9.5 19.2002 7.29 17.9202 6 15.9802C6.03 13.9902 10 12.9002 12 12.9002C13.99 12.9002 17.97 13.9902 18 15.9802C16.71 17.9202 14.5 19.2002 12 19.2002Z"
+  />
+</template>