@esershnr/artalk-sidebar 1.0.3

package/src/components/Pagination.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+/**
+ * Pagination Component
+ *
+ * (The Vue implementation which should correspond to the Artalk VanillaJS)
+ */
+const props = defineProps<{
+  /** Total page number */
+  total: number
+
+  /** Page size */
+  pageSize: number
+
+  /** Disabled */
+  disabled?: boolean
+}>()
+
+const { pageSize, total, disabled } = toRefs(props)
+
+const emit = defineEmits<{
+  /** Page change event */
+  (evt: 'change', offset: number): void
+}>()
+
+const curtPage = ref(1)
+const offset = computed(() => pageSize.value * (curtPage.value - 1))
+const maxPage = computed(() => Math.ceil(total.value / pageSize.value))
+const prevDisabled = computed(() => curtPage.value - 1 < 1)
+const nextDisabled = computed(() => curtPage.value + 1 > maxPage.value)
+
+const inputValue = ref(String(curtPage.value))
+let inputTimer: number | undefined
+
+function changePage(page: number) {
+  curtPage.value = page
+  emit('change', offset.value)
+  fillInput(page)
+}
+
+/**
+ * Change to previous page
+ */
+function prev() {
+  if (disabled?.value) return
+  const page = curtPage.value - 1
+  if (page < 1) {
+    return
+  }
+  changePage(page)
+}
+
+/**
+ * Change to next page
+ */
+function next() {
+  if (disabled?.value) return
+  const page = curtPage.value + 1
+  if (page > maxPage.value) {
+    return
+  }
+  changePage(page)
+}
+
+function reset() {
+  curtPage.value = 1
+  fillInput(1)
+}
+
+/**
+ * Fill input value
+ */
+function fillInput(page: number) {
+  inputValue.value = String(page)
+}
+
+function revokeInput() {
+  fillInput(curtPage.value)
+}
+
+function triggerInput(now: boolean = false) {
+  window.clearTimeout(inputTimer)
+
+  const value = inputValue.value.trim()
+
+  const modify = () => {
+    if (value === '') {
+      revokeInput()
+      return
+    }
+    let page = Number(value)
+    if (Number.isNaN(page)) {
+      revokeInput()
+      return
+    }
+    if (page < 1) {
+      revokeInput()
+      return
+    }
+    if (page > maxPage.value) {
+      page = maxPage.value
+    }
+    changePage(page)
+  }
+
+  // Delay input trigger
+  if (!now) inputTimer = window.setTimeout(() => modify(), 800)
+  else modify()
+}
+
+function onInputKeydown(evt: KeyboardEvent) {
+  const keyCode = evt.keyCode || evt.which
+
+  if (keyCode === 38) {
+    // Up key
+    const page = Number(inputValue.value) + 1
+    if (page > maxPage.value) {
+      return
+    }
+    fillInput(page)
+    triggerInput(false)
+  } else if (keyCode === 40) {
+    // Down key
+    const page = Number(inputValue.value) - 1
+    if (page < 1) {
+      return
+    }
+    fillInput(page)
+    triggerInput(false)
+  } else if (keyCode === 13) {
+    // Enter key
+    triggerInput(true)
+  }
+}
+
+defineExpose({ prev, next, reset })
+</script>
+
+<template>
+  <div class="atk-pagination-wrap">
+    <div class="atk-pagination">
+      <div
+        class="atk-btn atk-btn-prev"
+        :class="{ 'atk-disabled': disabled || prevDisabled }"
+        aria-label="Previous page"
+        @click="prev()"
+      >
+        <svg
+          stroke="currentColor"
+          fill="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          height="14px"
+          width="14px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z"
+          ></path>
+        </svg>
+      </div>
+      <input
+        v-model="inputValue"
+        type="text"
+        class="atk-input"
+        aria-label="Enter the number of page"
+        :disabled="disabled"
+        @input="triggerInput(false)"
+        @keydown="onInputKeydown"
+      />
+      <div
+        class="atk-btn atk-btn-next"
+        :class="{ 'atk-disabled': disabled || nextDisabled }"
+        aria-label="Next page"
+        @click="next()"
+      >
+        <svg
+          stroke="currentColor"
+          fill="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          height="14px"
+          width="14px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.atk-pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 0;
+  position: relative;
+
+  & > .atk-btn,
+  & > .atk-input {
+    font-size: 15px;
+    height: 30px;
+    border: 1px solid var(--at-color-border);
+    border-radius: 3px;
+    padding: 0 5px;
+    text-align: center;
+    background: var(--at-color-bg);
+  }
+
+  & > .atk-btn {
+    user-select: none;
+    width: 60px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
+
+    &.atk-disabled {
+      color: var(--at-color-sub);
+
+      &:hover {
+        cursor: default;
+        background: initial;
+      }
+    }
+  }
+
+  & > .atk-input {
+    background: transparent;
+    color: var(--at-color-font);
+    font-size: 18px;
+    width: 60px;
+    outline: none;
+
+    &:focus {
+      border-color: var(--at-color-main);
+    }
+  }
+
+  & > * {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+</style>

package/src/components/PreferenceArr.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import settings, { patchOptionValue, type OptionNode } from '../lib/settings'
+
+const props = defineProps<{
+  node: OptionNode
+}>()
+
+const customValue = ref<string[]>([])
+const disabled = ref(false)
+
+onMounted(() => {
+  sync()
+})
+
+function sync() {
+  const value = settings.get().getCustom(props.node.path)
+  disabled.value = !!settings.get().getEnvByPath(props.node.path)
+  if (typeof value === 'object' && 'toJSON' in value && typeof value.toJSON === 'function') {
+    customValue.value = value.toJSON()
+  } else if (typeof value === 'string') {
+    customValue.value = value.split(' ')
+  } else {
+    customValue.value = []
+  }
+}
+
+function save() {
+  const v = patchOptionValue(customValue.value, props.node)
+  settings.get().setCustom(props.node.path, v)
+}
+
+function onChange(index: number, val: string) {
+  customValue.value[index] = val
+  save()
+}
+
+function remove(index: number) {
+  customValue.value.splice(index, 1)
+  save()
+}
+
+function add() {
+  customValue.value.push('')
+  save()
+}
+</script>
+
+<template>
+  <div class="arr-grp">
+    <div v-for="(item, index) in customValue" :key="index" class="arr-item">
+      <input
+        type="text"
+        :value="String(item)"
+        :disabled="disabled"
+        @change="onChange(index, ($event.target as any).value)"
+      />
+      <button v-if="!disabled" class="act-btn" @click="remove(index)">-</button>
+    </div>
+    <div v-if="!disabled" class="act-grp">
+      <button class="act-btn" @click="add()">+</button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.arr-grp {
+  width: 100%;
+}
+
+.arr-item {
+  position: relative;
+  margin-bottom: 20px;
+  padding-right: 40px;
+
+  .act-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0;
+  }
+}
+
+.act-grp {
+  margin-left: 10px;
+
+  .act-btn {
+    padding: 2px 30px;
+  }
+}
+
+.act-btn {
+  display: inline-block;
+  padding: 2px 10px;
+  cursor: pointer;
+  border: 0;
+  color: var(--at-color-font);
+  background: var(--at-color-bg-grey);
+  border-radius: 2px;
+
+  &:hover {
+    color: var(--at-color-light);
+    background: var(--at-color-bg-light);
+  }
+}
+</style>

package/src/components/PreferenceGrp.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { OptionNode } from '../lib/settings'
+
+const props = defineProps<{
+  node: OptionNode
+}>()
+
+const expanded = ref(true)
+
+const expandable = computed(() => {
+  return props.node.level === 1 && (props.node.type === 'object' || props.node.type === 'array')
+})
+
+onMounted(() => {
+  if (expandable.value) expanded.value = false
+})
+
+function onHeadClick(evt: Event) {
+  if (!expandable.value) return
+  if (!expanded.value) {
+    expanded.value = true
+    // nextTick(() => {
+    //   nav.scrollPageToEl(evt.target as HTMLElement)
+    // })
+  } else {
+    expanded.value = false
+  }
+}
+
+const hiddenNodes = ['admin_users']
+</script>
+
+<template>
+  <div
+    v-if="!hiddenNodes.includes(node.name)"
+    class="pf-grp"
+    :class="[`level-${node.level}`, expanded ? 'expand' : '']"
+  >
+    <div
+      v-if="node.level > 0 && (node.type === 'object' || node.type === 'array')"
+      class="pf-head"
+      @click="onHeadClick"
+    >
+      <div class="title">{{ node.title }}</div>
+      <div v-if="!!node.subTitle" class="sub-title">{{ node.subTitle }}</div>
+    </div>
+    <div v-show="expanded" class="pf-body">
+      <!-- Grp -->
+      <template v-if="node.items">
+        <PreferenceGrp v-for="n in node.items" :key="n.path" :node="n" />
+      </template>
+
+      <!-- Item -->
+      <PreferenceItem v-else :node="node" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.pf-grp {
+  background: var(--at-color-bg);
+  margin-bottom: 10px;
+  border-radius: 4px;
+}
+
+.pf-grp.level-1 {
+  & > .pf-head {
+    margin-top: 30px;
+    margin-bottom: 20px;
+    cursor: pointer;
+
+    .title {
+      user-select: none;
+      font-size: 1.4em;
+      font-weight: bold;
+      padding-left: 12px;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: height ease 0.2s;
+        left: -10px;
+        content: '';
+        height: 10px;
+        width: 10px;
+        background: #8ecee2;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  & > .pf-body {
+  }
+
+  &.expand > .pf-head .title::before {
+    height: 25px;
+  }
+}
+
+.pf-grp.level-2 {
+  & > .pf-head {
+    margin-top: 15px;
+    margin-bottom: 20px;
+
+    .title {
+      position: relative;
+      font-weight: bold;
+      font-size: 1.2em;
+    }
+  }
+}
+
+.pf-grp.level-1,
+.pf-grp.level-2 {
+  & > .pf-head > .sub-title {
+    padding: 0 10px 0 10px;
+    margin-left: 4px;
+    margin-top: 15px;
+    border-left: 2px solid var(--at-color-border);
+  }
+}
+
+.pf-grp.level-3 {
+  margin-left: 10px;
+
+  & > .pf-head {
+    margin-top: 15px;
+    margin-bottom: 20px;
+
+    & > .title {
+      position: relative;
+      font-weight: bold;
+      font-size: 0.9em;
+    }
+  }
+
+  & > .pf-body {
+    margin-left: 15px;
+  }
+}
+
+.pf-head {
+  & > .title {
+    position: relative;
+  }
+
+  & > .sub-title {
+    font-size: 14px;
+    margin-top: 5px;
+  }
+}
+</style>

package/src/components/PreferenceItem.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import settings, { patchOptionValue, type OptionNode } from '../lib/settings'
+import { isSensitiveConfigPath } from '@/lib/settings-sensitive'
+
+const props = defineProps<{
+  node: OptionNode
+}>()
+
+const value = ref('')
+const disabled = ref(false)
+const sensitiveHidden = ref(true)
+
+const { t } = useI18n()
+
+onBeforeMount(() => {
+  // initial value
+  value.value = settings.get().getCustom(props.node.path)
+  disabled.value = !!settings.get().getEnvByPath(props.node.path)
+})
+
+function onChange() {
+  const v = patchOptionValue(value.value, props.node)
+  settings.get().setCustom(props.node.path, v)
+  // console.log('[SET]', props.node.path, v)
+}
+
+const envVariableName = computed(() => `ATK_${props.node.path.replace(/\./g, '_').toUpperCase()}`)
+const isSensitive = computed(() => isSensitiveConfigPath(props.node.path))
+
+function toggleSensitiveHidden() {
+  sensitiveHidden.value = !sensitiveHidden.value
+}
+</script>
+
+<template>
+  <div class="pf-item">
+    <div class="info">
+      <div class="title" :title="envVariableName">{{ node.title }}</div>
+      <div v-if="node.subTitle" class="sub-title">{{ node.subTitle }}</div>
+    </div>
+
+    <div class="value">
+      <div v-if="disabled" class="disable-note">
+        {{ t('envVarControlHint', { key: 'ATK_' + props.node.path.toUpperCase() }) }}
+      </div>
+
+      <!-- Array -->
+      <template v-if="node.type === 'array'">
+        <PreferenceArr :node="node" />
+      </template>
+
+      <!-- Dropdown -->
+      <template v-else-if="node.selector">
+        <select v-model="value" :disabled="disabled" @change="onChange">
+          <option v-for="(item, i) in node.selector" :key="i" :value="item">
+            {{ item }}
+          </option>
+        </select>
+      </template>
+
+      <!-- Toggle -->
+      <template v-else-if="node.type === 'boolean'">
+        <input v-model="value" type="checkbox" :disabled="disabled" @change="onChange" />
+      </template>
+
+      <!-- Text -->
+      <template v-else>
+        <input
+          v-model="value"
+          :type="!isSensitive || !sensitiveHidden ? 'text' : 'password'"
+          :disabled="disabled"
+          @change="onChange"
+        />
+        <div v-if="isSensitive" class="input-suffix">
+          <div class="hidden-switch" @click="toggleSensitiveHidden()">
+            <i :class="['atk-icon', `atk-icon-eye-${sensitiveHidden ? 'off' : 'on'}`]" />
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.pf-item {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20px;
+
+  & > .info {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    flex: 1;
+    padding-right: 20px;
+
+    .title {
+    }
+
+    .sub-title {
+      font-size: 14px;
+      margin-top: 4px;
+      color: #697182;
+    }
+  }
+
+  & > .value {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 35px;
+
+    &:hover {
+      .disable-note {
+        opacity: 1;
+      }
+    }
+
+    .disable-note {
+      z-index: 999;
+      padding: 3px 8px;
+      background: rgba(105, 113, 130, 0.9);
+      color: #fff;
+      position: absolute;
+      top: -30px;
+      font-size: 13px;
+      left: 0;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    .input-suffix {
+      margin-left: 5px;
+    }
+
+    .hidden-switch {
+      cursor: pointer;
+      padding-left: 10px;
+
+      .atk-icon {
+        &::after {
+          background-color: #697182;
+        }
+
+        &.atk-icon-eye-on::after {
+          mask-image: url('@/assets/icon-eye-on.svg');
+        }
+
+        &.atk-icon-eye-off::after {
+          mask-image: url('@/assets/icon-eye-off.svg');
+        }
+      }
+    }
+  }
+}
+</style>