@westartcom/bread-quasar-fields 0.0.10 → 0.0.12

package/fields/BooleanField.vue

@@ -1,45 +1,45 @@
 <template>
-    <div class="field-wrap" :id="id">
-        <div class="field-wrap-inner">
-            <template v-if="stylingFormat === 'toggle'">
-                <q-toggle
-                    size="lg"
-                    color="positive"
-                    :label="field.label"
-                    left-label
-                    unchecked-icon="fa-solid fa-xmark"
-                    checked-icon="fa-solid fa-check"
-                    v-model="internalValue" />
-            </template>
-
-            <template v-else>
-                <div class="field-label-wrap">
-                    <div class="field">
-                        <label v-if="field.label" :for="id + '-input'">
-                            <checkbox-marked-icon class="icon-2x" v-if="internalValue"></checkbox-marked-icon>
-                            <checkbox-blank-outline-icon class="icon-2x" v-else></checkbox-blank-outline-icon>
-
-                            <input
-                                :name="field.name"
-                                :id="id + '-input'"
-                                type="checkbox"
-                                style="display: none;"
-                                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
-                                v-model="internalValue">
-
-                            {{ field.label }}<span class="required-asterix" v-if="field.required"> *</span>
-                        </label>
-                    </div>
-                </div>
-            </template>
+  <div class="field-wrap boolean" :id="id">
+    <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+    <div class="field-wrap-inner">
+      <template v-if="stylingFormat === 'toggle'">
+        <q-toggle
+            size="lg"
+            color="positive"
+            :label="field.label"
+            left-label
+            :disable="disable"
+            unchecked-icon="fa-solid fa-xmark"
+            checked-icon="fa-solid fa-check"
+            v-model="internalValue" />
+      </template>
+
+      <template v-else>
+        <div class="field-label-wrap">
+          <div class="field">
+            <label v-if="field.label || field.extra_data.alternative_label" :for="id + '-input'">
+              <input
+                  :id="id + '-input'"
+                  type="checkbox"
+                  hidden="true"
+                  :disabled="disable"
+                  v-model="internalValue">
+
+              <i class="icon fa-solid fa-square-check fa-fw" v-if="internalValue"></i>
+              <i class="icon fa-solid fa-square fa-fw" v-if="!internalValue"></i>
+
+              {{ field.extra_data.alternative_label ?? field.label }}<span class="required-asterix" v-if="field.required"> *</span>
+            </label>
+          </div>
         </div>
+      </template>
+    </div>
 
-        <div class="field-description" v-if="field.description">{{ field.description }}</div>
-
-        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
-            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
-        </div>
+    <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+      <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -49,128 +49,133 @@ import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
 import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
 
 interface BoolFieldDefinition extends ModelFieldDefinition<FieldType.BOOL, InputType.BOOL> {
-    default: boolean;
-    extra_data: {
-        styling_format: 'checkbox' | 'toggle'
-    }
+  default: boolean;
+  extra_data: {
+    styling_format: 'checkbox' | 'toggle'
+  }
 }
 
 export default defineComponent({
-    props: {
-        id: {
-            type: String,
-            required: true
-        },
-        field: {
-            type: Object as PropType<BoolFieldDefinition>,
-            required: true
-        },
-        modelValue: [Boolean, Number, String],
-        errors: Array as PropType<string[]>
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    disable: {
+      type: Boolean,
+      required: false,
+      default: false
     },
+    field: {
+      type: Object as PropType<BoolFieldDefinition>,
+      required: true
+    },
+    modelValue: [Boolean, Number, String],
+    errors: Array as PropType<string[]>
+  },
+
+  emits: [
+    'update:modelValue',
+    'update:invalid'
+  ],
+
+  components: {
+    CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
+    CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
+  },
+
+  data() {
+    return {
+      invalid: null as boolean | null,
+      internalValue: false,
+      internalErrors: [] as string[]
+    };
+  },
+
+  mounted() {
+    if (this.modelValue !== null && typeof this.modelValue !== 'undefined') {
+      this.internalValue = (!(!this.modelValue || this.modelValue === '0'));
+    } else if (this.field.default) {
+      this.internalValue = this.field.default;
+    }
 
-    emits: [
-        'update:modelValue',
-        'update:invalid'
-    ],
+    this.validate(this.internalValue);
+  },
 
-    components: {
-        CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
-        CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
-    },
+  computed: {
+    stylingFormat: function(): 'checkbox' | 'toggle' {
+      return (this.field?.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'checkbox';
+    }
+  },
 
-    data() {
-        return {
-            invalid: null as boolean | null,
-            internalValue: false,
-            internalErrors: [] as string[]
-        };
+  watch: {
+    modelValue: function(val) {
+      if (val !== this.internalValue) {
+        this.internalValue = !!(val);
+      }
     },
 
-    mounted() {
-        if (this.modelValue !== null && typeof this.modelValue !== 'undefined') {
-            this.internalValue = (!(!this.modelValue || this.modelValue === '0'));
-        } else if (this.field.default) {
-            this.internalValue = this.field.default;
-        }
-
-        this.validate(this.internalValue);
+    internalValue: function(val) {
+      this.validate(val);
+      this.$emit('update:modelValue', val);
     },
 
-    computed: {
-        stylingFormat: function(): 'checkbox' | 'toggle' {
-            return (this.field?.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'checkbox';
-        }
+    errors: {
+      handler: function(val) {
+        this.internalErrors = val;
+      },
+      deep: true
     },
 
-    watch: {
-        modelValue: function(val) {
-            if (val !== this.internalValue) {
-                this.internalValue = !!(val);
-            }
-        },
-
-        internalValue: function(val) {
-            this.validate(val);
-            this.$emit('update:modelValue', val);
-        },
-
-        errors: {
-            handler: function(val) {
-                this.internalErrors = val;
-            },
-            deep: true
-        },
-
-        internalErrors: {
-            handler: function(val) {
-                this.invalid = !!(val && val.length);
-            },
-            deep: true
-        },
-
-        invalid: function(val) {
-            this.$emit('update:invalid', val);
-        }
+    internalErrors: {
+      handler: function(val) {
+        this.invalid = !!(val && val.length);
+      },
+      deep: true
     },
 
-    methods: {
-        validate: function(val) {
-            this.invalid = this.field.required && !val;
-        }
+    invalid: function(val) {
+      this.$emit('update:invalid', val);
+    }
+  },
+
+  methods: {
+    validate: function(val) {
+      this.invalid = this.field.required && !val;
     }
+  }
 });
 </script>
 
 <style scoped lang="scss">
-    .toggle {
-        display: flex;
-        max-width: var(--max-input-width);
-        width: 100%;
-
-        .btn {
-            border-radius: 0;
-
-            &:first-of-type {
-                border-bottom-left-radius: var(--global-radius);
-                border-top-left-radius: var(--global-radius);
-            }
-            &:last-of-type {
-                border-bottom-right-radius: var(--global-radius);
-                border-top-right-radius: var(--global-radius);
-            }
-        }
-    }
+.toggle {
+  display: flex;
+  max-width: var(--max-input-width);
+  width: 100%;
 
-    .field > label {
-        margin-right: var(--global-spacing);
-        user-select: none;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: flex-end;
+  .btn {
+    border-radius: 0;
 
-        :deep(svg) {
-            margin-right: var(--global-spacing-half);
-        }
+    &:first-of-type {
+      border-bottom-left-radius: var(--global-radius);
+      border-top-left-radius: var(--global-radius);
+    }
+    &:last-of-type {
+      border-bottom-right-radius: var(--global-radius);
+      border-top-right-radius: var(--global-radius);
     }
+  }
+}
+
+.field > label {
+  margin-right: var(--global-spacing);
+  user-select: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: flex-end;
+
+  :deep(svg) {
+    margin-right: var(--global-spacing-half);
+  }
+}
 </style>

package/fields/CheckboxField.vue

@@ -19,6 +19,7 @@
                     :id="id + '-' + optionValue + '-radio-input'"
                     type="checkbox"
                     hidden="true"
+                    :disabled="disable"
                     :value="optionValue"
                     v-model="internalValue">
 
@@ -57,6 +58,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<CheckboxFieldDefinition>,
             required: true

package/fields/DateField.vue

@@ -12,6 +12,7 @@
                 :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
                 :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 v-model="internalValue"
+                :disable="disable"
                 :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
                 :hint="field.description"
                 outlined>
@@ -48,6 +49,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<DateFieldDefinition>,
             required: true

package/fields/DateTimeField.vue

@@ -11,6 +11,7 @@
                 :placeholder="field.placeholder"
                 type="datetime-local"
                 class="field"
+                :disabled="disable"
                 :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
                 :max="formatDate(((field.extra_data && field.extra_data.max) ? field.extra_data.max : null), 'YYYY-MM-DDTHH:mm')"
                 :min="formatDate(((field.extra_data && field.extra_data.min) ? field.extra_data.min : null), 'YYYY-MM-DDTHH:mm')"
@@ -33,7 +34,12 @@ export default {
         id: String,
         field: Object,
         modelValue: String,
-        errors: Array
+        errors: Array,
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
     },
 
     emits: [

package/fields/EmailField.vue

@@ -12,6 +12,7 @@
                 :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
                 :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 v-model="internalValue"
+                :disable="disable"
                 :rules="(field.required) ? [val => !!val || $i18n.get('validation.required', { attribute: field.label as string })] : []"
                 :hint="field.description"
                 :errors="internalErrors"
@@ -41,6 +42,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<EmailFieldDefinition>,
             required: true

package/fields/NumberField.vue

@@ -12,6 +12,7 @@
                 :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
                 :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 v-model="internalValue"
+                :disable="disable"
                 :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
                 :hint="field.description"
                 outlined>
@@ -40,6 +41,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<NumberFieldDefinition>,
             required: true

package/fields/RadioField.vue

@@ -14,6 +14,7 @@
                         :key="id + '-' + optionValue + '-radio-input'"
                         type="button"
                         class="btn expand"
+                        :disabled="disable"
                         @click="internalValue = optionValue"
                         :class="{
                             'normal-filled': (internalValue === optionValue && !invalid),
@@ -35,6 +36,7 @@
                             :id="id + '-' + optionValue + '-radio-input'"
                             type="radio"
                             :value="optionValue"
+                            :disabled="disable"
                             v-model="internalValue">
 
                         {{ label }}
@@ -73,6 +75,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<RadioFieldDefinition>,
             required: true

package/fields/TelField.vue

@@ -11,6 +11,7 @@
                 :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
                 :maxlength="255"
                 v-model="internalValue"
+                :disable="disable"
                 :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
                 :hint="field.description"
                 outlined>
@@ -40,6 +41,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<TelFieldDefinition>,
             required: true

package/fields/TextField.vue

@@ -12,6 +12,7 @@
                 :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
                 :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 v-model="internalValue"
+                :disable="disable"
                 :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
                 :hint="field.description"
                 outlined>
@@ -44,6 +45,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<TextFieldDefinition>,
             required: true

package/fields/TextareaField.vue

@@ -12,6 +12,7 @@
                 :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
                 :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 v-model="internalValue"
+                :disable="disable"
                 :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
                 :hint="field.description"
                 outlined>
@@ -46,6 +47,11 @@ export default defineComponent({
             type: String,
             required: true
         },
+        disable: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
         field: {
             type: Object as PropType<TextareaFieldDefinition>,
             required: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westartcom/bread-quasar-fields",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Quasar compatible fields for bread package",
   "main": "index.js",
   "scripts": {