Merge pull request #373 from bluecaret/development

Update for v4.5.0
bluecaret · Mar 3, 2024 · c56344e · c56344e
2 parents f27622c + b91cde5
commit c56344e
Show file tree

Hide file tree

Showing 24 changed files with 1,432 additions and 361 deletions.
diff --git a/manifest.config.js b/manifest.config.js
@@ -6,8 +6,8 @@ const getManifestSettings = (env) => {
     short_name: 'CaretTab',
     name: env.mode === 'beta' ? 'CaretTab BETA' : '__MSG_appName__',
     description: env.mode === 'beta' ? 'Beta version of the New Tab extension, CaretTab' : '__MSG_appDesc__',
-    version: `4.4.0`,
-    version_name: `4.4.0`,
+    version: `4.5.0`,
+    version_name: `4.5.0`,
     default_locale: 'en',
     icons: {
       16: 'img/icon16.png',

diff --git a/public/img/blueprints/futuristicMinimalDash.png b/public/img/blueprints/futuristicMinimalDash.png
diff --git a/src/assets/_elements.scss b/src/assets/_elements.scss
@@ -95,6 +95,12 @@ a.link {
   border: 0;
 }
 
+.btnSmall {
+  padding: var(--s1) var(--s3);
+  font-size: 1.4rem;
+  min-height: 2.2rem;
+}
+
 .btnLink {
   min-height: auto;
   font-size: inherit;

diff --git a/src/components/forms/NumberField.vue b/src/components/forms/NumberField.vue
@@ -9,6 +9,8 @@ const props = defineProps({
   tagId: String,
   placeholder: String,
   disabled: Boolean,
+  upButtonOnly: { type: Boolean, default: false },
+  downButtonOnly: { type: Boolean, default: false },
 })
 const emit = defineEmits(['update:modelValue'])
 const delay = ref(null)
@@ -40,6 +42,7 @@ function handleArrowUpdate(up) {
 }
 
 function handleArrowStart(up) {
+  if (props.disabled) return
   handleArrowUpdate(up)
   isHold.value = true
   delay.value = setTimeout(() => {
@@ -54,52 +57,89 @@ function handleArrowStart(up) {
 }
 
 function handleArrowDone() {
+  if (props.disabled) return
   isHold.value = false
   if (delay.value) clearTimeout(delay.value)
   if (timer.value) clearInterval(timer.value)
 }
 </script>
 
 <template>
-  <div class="num">
-    <input
+  <div :class="!props.upButtonOnly && !props.downButtonOnly ? 'num' : 'numBtnOnly'">
+    <button
+      v-if="props.upButtonOnly"
       :id="tagId"
-      type="number"
-      class="input"
-      :value="modelValue"
-      :min="min"
-      :max="max"
-      :step="props.increment"
-      :disabled="props.disabled ? 'disabled' : null"
-      :placeholder="props.placeholder ? props.placeholder : ''"
-      @input="handleUpdate"
-    />
-    <div class="numBtnGroup">
-      <button
-        class="numBtn"
-        tabindex="-1"
-        :aria-label="$t('settings.increaseNumber')"
-        :disabled="props.disabled ? 'disabled' : null"
-        @pointerdown="handleArrowStart(true)"
-        @pointerup="handleArrowDone()"
-      >
+      class="btn"
+      :class="{ active: isHold }"
+      :aria-label="$t('settings.increaseNumber')"
+      :disabled="props.disabled ? true : undefined"
+      @pointerdown="handleArrowStart(true)"
+      @pointerup="handleArrowDone()"
+    >
+      <slot>
         <fa icon="fa-plus"></fa>
-      </button>
-      <button
-        class="numBtn"
-        tabindex="-1"
-        :aria-label="$t('settings.decreaseNumber')"
-        :disabled="props.disabled ? 'disabled' : null"
-        @pointerdown="handleArrowStart(false)"
-        @pointerup="handleArrowDone()"
-      >
+      </slot>
+    </button>
+    <button
+      v-else-if="props.downButtonOnly"
+      :id="tagId"
+      class="btn"
+      :class="{ active: isHold }"
+      :aria-label="$t('settings.decreaseNumber')"
+      :disabled="props.disabled ? true : undefined"
+      @pointerdown="handleArrowStart(false)"
+      @pointerup="handleArrowDone()"
+    >
+      <slot>
         <fa icon="fa-minus"></fa>
-      </button>
-    </div>
+      </slot>
+    </button>
+    <template v-else>
+      <input
+        :id="tagId"
+        type="number"
+        class="input"
+        :value="modelValue"
+        :min="min"
+        :max="max"
+        :step="props.increment"
+        :disabled="props.disabled ? 'disabled' : null"
+        :placeholder="props.placeholder ? props.placeholder : ''"
+        @input="handleUpdate"
+      />
+      <div class="numBtnGroup">
+        <button
+          class="numBtn"
+          tabindex="-1"
+          :aria-label="$t('settings.increaseNumber')"
+          :disabled="props.disabled ? true : undefined"
+          @pointerdown="handleArrowStart(true)"
+          @pointerup="handleArrowDone()"
+        >
+          <fa icon="fa-plus"></fa>
+        </button>
+        <button
+          class="numBtn"
+          tabindex="-1"
+          :aria-label="$t('settings.decreaseNumber')"
+          :disabled="props.disabled ? true : undefined"
+          @pointerdown="handleArrowStart(false)"
+          @pointerup="handleArrowDone()"
+        >
+          <fa icon="fa-minus"></fa>
+        </button>
+      </div>
+    </template>
   </div>
 </template>
 
 <style lang="scss">
+.numBtnOnly {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  align-items: center;
+}
 .num {
   display: grid;
   grid-template-columns: 1fr 2rem;