chore: more code cleanups

2024-04-25 22:07:59 +05:30
parent 7de1fc6e4d
commit ea9743b914
6 changed files with 43 additions and 89 deletions
@@ -1,7 +1,7 @@
 <template>
  <div>
    <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900 d"
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
    >
      {{ label }}
    </label>
@@ -16,7 +16,7 @@
          v-model="item.model"
          type="checkbox"
          :value="item.value"
-          class="flex-shrink-0 mt-1 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+          class="flex-shrink-0 mt-0.5 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
          @input="onChange"
        />
        <label class="text-sm font-normal text-ash-900">
@@ -6,7 +6,7 @@
      {{ label }}
    </label>
    <div
-      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
+      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-xl border-ash-200"
    >
      <div
        v-for="option in options"
@@ -22,7 +22,6 @@
          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
          type="radio"
          :value="option.value"
-          @change="emitChange"
        />
        <label
          :for="`radio-${option.value}`"
@@ -37,7 +36,7 @@
 </template>

 <script setup>
-import { ref, watch } from 'vue';
+import { computed } from 'vue';

 const props = defineProps({
  label: {
@@ -56,17 +55,12 @@ const options = [
  { value: 'all', label: 'All' },
 ];

-const selectedValue = ref(props.value);
-
-watch(
-  () => props.value,
-  newValue => {
-    selectedValue.value = newValue;
-  }
-);
-
 const emit = defineEmits(['update']);
-const emitChange = e => {
-  emit('update', e);
-};
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
 </script>
@@ -7,7 +7,6 @@
    :options="alertTones"
    :label="label"
    class="max-w-xl"
-    @input="onChange"
  >
    <option
      v-for="tone in alertTones"
@@ -20,7 +19,7 @@
  </form-select>
 </template>
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import FormSelect from 'v3/components/Form/Select.vue';

 const props = defineProps({
@@ -34,19 +33,6 @@ const props = defineProps({
  },
 });

-const selectedValue = ref(props.value);
-
-watch(
-  () => props.value,
-  newValue => {
-    selectedValue.value = newValue;
-  }
-);
-
-const emit = defineEmits(['change']);
-const onChange = () => {
-  emit('change', selectedValue.value);
-};
 const alertTones = computed(() => [
  {
    value: 'ding',
@@ -57,4 +43,13 @@ const alertTones = computed(() => [
    label: 'Bell',
  },
 ]);
+
+const emit = defineEmits(['change']);
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('change', value);
+  },
+});
 </script>
@@ -5,7 +5,7 @@
  >
    <input
      v-model="localFlags"
-      class="mt-1 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
      type="checkbox"
      :value="localValue"
      @input="handleInput"
@@ -21,7 +21,10 @@
            >
              {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
            </span>
-            <form-switch :value="true" @input="onRequestPermissions()" />
+            <form-switch
+              :value="hasEnabledPushPermissions"
+              @input="onRequestPermissions"
+            />
          </div>
        </table-header-cell>
      </div>
@@ -75,7 +78,10 @@
        <span class="text-sm font-medium uppercase text-ash-900">
          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
        </span>
-        <form-switch :value="true" @input="onRequestPermissions()" />
+        <form-switch
+          :value="hasEnabledPushPermissions"
+          @input="onRequestPermissions"
+        />
      </div>

      <div class="flex flex-col gap-4">
@@ -1,13 +1,23 @@
 <template>
  <button
    type="button"
-    class="p-0 toggle-button bg-primary-600"
-    :class="{ active: value, small: size === 'small' }"
+    class="relative flex-shrink-0 h-4 p-0 shadow-inner w-7 rounded-3xl"
+    :class="
+      value ? 'bg-primary-600 shadow-primary-800' : 'shadow-ash-400 bg-ash-200'
+    "
    role="switch"
    :aria-checked="value.toString()"
    @click="onClick"
  >
-    <span aria-hidden="true" :class="{ active: value }" />
+    <span
+      aria-hidden="true"
+      class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
+      :class="
+        value
+          ? 'ltr:translate-x-0 rtl:translate-x-[12px]'
+          : 'ltr:-translate-x-[12px] rtl:translate-x-0'
+      "
+    />
  </button>
 </template>

@@ -15,7 +25,6 @@
 export default {
  props: {
    value: { type: Boolean, default: false },
-    size: { type: String, default: '' },
  },
  methods: {
    onClick() {
@@ -24,53 +33,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.toggle-button {
-  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
-    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  border-radius: var(--border-radius-large);
-  border: 2px solid transparent;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 19px;
-  position: relative;
-  transition-duration: 200ms;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 34px;
-
-  &.small {
-    width: 22px;
-    height: 14px;
-
-    span {
-      height: var(--space-one);
-      width: var(--space-one);
-
-      &.active {
-        transform: translate(var(--space-small), var(--space-zero));
-      }
-    }
-  }
-
-  span {
-    @apply bg-white dark:bg-white;
-    --space-one-point-five: 0.9375rem;
-    border-radius: 100%;
-    box-shadow: var(--toggle-button-box-shadow);
-    display: inline-block;
-    height: var(--space-one-point-five);
-    transform: translate(0, 0);
-    transition-duration: 200ms;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--space-one-point-five);
-
-    &.active {
-      transform: translate(var(--space-one-point-five), var(--space-zero));
-    }
-  }
-}
-</style>