bfg-common 1.5.688 → 1.5.689

package/components/atoms/perPage/PerPage.vue

@@ -1,58 +1,58 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-select`"
-        v-development="props.development"
-        :data-id="`${props.testId}-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-    testId?: string
-    development?: boolean
-  }>(),
-  {
-    testId: 'ui-per-page',
-    label: 'itemsPerPage',
-    development: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(
-  () => localization.value.common[props.label]
-)
-
-const change = (event: InputEvent): void => {
-  emits('change', +(event.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-select`"
+        v-development="props.development"
+        :data-id="`${props.testId}-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+    testId?: string
+    development?: boolean
+  }>(),
+  {
+    testId: 'ui-per-page',
+    label: 'itemsPerPage',
+    development: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(
+  () => localization.value.common[props.label]
+)
+
+const change = (event: InputEvent): void => {
+  emits('change', +(event.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>

package/components/atoms/switch/Switch.vue

@@ -1,97 +1,103 @@
-<template>
-  <div class="flex-align-center">
-    <div class="switch-body">
-      <input :id="props.testId" v-model="value" type="checkbox" />
-      <label :for="props.testId" class="switch-label"></label>
-    </div>
-    <label :for="props.testId"><slot></slot></label>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    testId?: string
-  }>(),
-  { testId: 'ui-switch' }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', value: boolean): void
-}>()
-
-const value = computed<boolean>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.switch-body {
-  width: 33px;
-  height: 18px;
-  position: relative;
-  margin-right: 4px;
-
-  input[type='checkbox'] {
-    position: absolute;
-    top: 0.3rem;
-    right: 0.3rem;
-    height: 0.8rem;
-    width: 0.8rem;
-    opacity: 0;
-  }
-  .switch-label {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    height: 1.2rem;
-  }
-  .switch-label {
-    &:before {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 18px;
-      width: 33px;
-      border-radius: 0.45rem;
-      border: 2px solid var(--label-before-bg-color);
-      background-color: var(--label-before-bg-color);
-      transition: 0.15s ease-in;
-      transition-property: border-color, background-color;
-    }
-
-    &:after {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 14.5px;
-      width: 14.5px;
-      border: 1px solid var(--label-after-bg-color);
-      border-radius: 50%;
-      background-color: var(--label-after-bg-color);
-      bottom: 12.5px;
-      transition: 0.15s ease-in;
-    }
-  }
-
-  & input[type='checkbox']:focus + label:before {
-    box-shadow: var(--label-before-box-shadow);
-  }
-  & input[type='checkbox']:checked + label:before {
-    border-color: #62a420;
-    background-color: #62a420;
-  }
-  & input[type='checkbox']:checked + label:after {
-    left: 15px;
-  }
-  & input[type='checkbox'] + label:after {
-    left: 3px;
-  }
-}
-</style>
+<template>
+  <div class="flex-align-center">
+    <div class="switch-body">
+      <input
+        :id="props.testId"
+        v-model="value"
+        type="checkbox"
+        @change="emits('change', value)"
+      />
+      <label :for="props.testId" class="switch-label"></label>
+    </div>
+    <label :for="props.testId"><slot></slot></label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    testId?: string
+  }>(),
+  { testId: 'ui-switch' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+  (event: 'change', value: boolean): void
+}>()
+
+const value = computed<boolean>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.switch-body {
+  width: 33px;
+  height: 18px;
+  position: relative;
+  margin-right: 4px;
+
+  input[type='checkbox'] {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.3rem;
+    height: 0.8rem;
+    width: 0.8rem;
+    opacity: 0;
+  }
+  .switch-label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    height: 1.2rem;
+  }
+  .switch-label {
+    &:before {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 18px;
+      width: 33px;
+      border-radius: 0.45rem;
+      border: 2px solid var(--label-before-bg-color);
+      background-color: var(--label-before-bg-color);
+      transition: 0.15s ease-in;
+      transition-property: border-color, background-color;
+    }
+
+    &:after {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 14.5px;
+      width: 14.5px;
+      border: 1px solid var(--label-after-bg-color);
+      border-radius: 50%;
+      background-color: var(--label-after-bg-color);
+      bottom: 12.5px;
+      transition: 0.15s ease-in;
+    }
+  }
+
+  & input[type='checkbox']:focus + label:before {
+    box-shadow: var(--label-before-box-shadow);
+  }
+  & input[type='checkbox']:checked + label:before {
+    border-color: #62a420;
+    background-color: #62a420;
+  }
+  & input[type='checkbox']:checked + label:after {
+    left: 15px;
+  }
+  & input[type='checkbox'] + label:after {
+    left: 3px;
+  }
+}
+</style>