@esershnr/artalk-sidebar 1.0.3

package/src/style/_extends.scss

@@ -0,0 +1,100 @@
+.atk-slim-scrollbar {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(86, 86, 86, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb:vertical:hover {
+    background: rgba(65, 74, 82, 0.77);
+  }
+
+  &::-webkit-scrollbar-thumb:vertical:active {
+    background: rgba(41, 47, 53, 0.77);
+  }
+}
+
+.atk-list-text-actions {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  padding: 0 35px;
+  padding-top: 10px;
+  padding-bottom: 0;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  .atk-item {
+    position: relative;
+    font-size: 17px;
+    // max-width: 5em;
+    display: inline-flex;
+    margin-right: 15px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    user-select: none;
+
+    &.atk-green:after {
+      position: absolute;
+      content: ' ';
+      height: 5px;
+      width: 100%;
+      left: 0;
+      bottom: 5px;
+      background: rgba(50, 199, 134, 0.39);
+    }
+
+    &.atk-yellow:after {
+      position: absolute;
+      content: ' ';
+      height: 5px;
+      width: 100%;
+      left: 0;
+      bottom: 5px;
+      background: rgba(255, 203, 0, 39%);
+    }
+  }
+}
+
+.atk-list-btn-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 20px;
+
+  .atk-item {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    width: 35px;
+    height: 35px;
+    border-radius: 2px;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
+
+    &:not(:last-child) {
+      margin-right: 15px;
+    }
+
+    &.atk-item-close {
+      margin-left: 10px;
+    }
+  }
+
+  .atk-icon::after {
+    background-color: var(--at-color-meta);
+  }
+
+  .atk-icon-yes::after {
+    background-color: var(--at-color-main);
+  }
+}

package/src/style/_variables.scss

@@ -0,0 +1,18 @@
+$font-family:
+  ui-sans-serif,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI Variable Display',
+  'Segoe UI',
+  Helvetica,
+  'PingFang SC',
+  'Microsoft YaHei',
+  Helvetica,
+  'Apple Color Emoji',
+  Arial,
+  sans-serif,
+  'Segoe UI Emoji',
+  'Segoe UI Symbol';
+$font-size: 14px;
+$line-height: 1.6em;
+$block-radius: 6px;

package/src/style.scss

@@ -0,0 +1,245 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.artalk,
+.atk-layer-wrap {
+  font-family: $font-family;
+}
+
+.artalk {
+  --at-sidebar-header-bg: #f6f8fa;
+}
+
+.artalk.atk-dark-mode {
+  --at-sidebar-header-bg: #1e1e1e;
+
+  .atk-comment-wrap.atk-openable:hover {
+    background: #1e1e1e;
+  }
+}
+
+.atk-sidebar {
+  .atk-list {
+    .atk-main-editor {
+      margin-top: -4px;
+      margin-bottom: -2px;
+    }
+  }
+
+  .atk-sidebar-no-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    font-size: 35px;
+    color: var(--at-color-meta);
+    pointer-events: none;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .atk-form {
+    $form-height: 35px;
+
+    padding: 20px 30px;
+
+    .atk-label {
+      font-size: 16px;
+      margin-bottom: 12px;
+      color: var(--at-color-font);
+
+      &.required::after {
+        content: '*';
+        color: var(--at-color-red);
+        margin-left: 5px;
+        vertical-align: top;
+      }
+    }
+
+    .atk-desc {
+      font-size: 14px;
+      margin-top: 10px;
+      margin-left: 15px;
+      margin-bottom: 25px;
+      display: block;
+      color: var(--at-color-meta);
+
+      a {
+        opacity: 0.8;
+      }
+    }
+
+    input,
+    textarea {
+      display: block;
+      line-height: $form-height;
+      padding: 0 10px;
+      margin: 0;
+      border: none;
+      border-bottom: 1px solid var(--at-color-border);
+      outline: none;
+      width: 100%;
+      margin-bottom: 25px;
+      background: var(--at-color-bg);
+
+      &:focus {
+        border-bottom-color: var(--at-color-bg-light);
+      }
+
+      &[type='file'] {
+        background: transparent;
+        border: 1px solid var(--at-color-border);
+        cursor: pointer;
+        position: relative;
+        padding: 6px 15px;
+        line-height: 0;
+        margin-bottom: 17px;
+        border-radius: 4px;
+
+        &:hover {
+          background: var(--at-color-bg-light);
+          border-color: var(--at-color-bg-light);
+        }
+      }
+
+      &[type='file']::-webkit-file-upload-button {
+        background: transparent;
+        color: var(--at-color-font);
+        border: 0;
+        border-right: 1px solid var(--at-color-border);
+        border-left: 0;
+        border-top: 0;
+        border-bottom: 0;
+        padding: 0 20px 0 10px;
+        line-height: 25px;
+        margin-right: 15px;
+        cursor: pointer;
+        transition: 0.2s ease;
+        -webkit-appearance: none;
+        border-radius: 0;
+      }
+    }
+
+    textarea {
+      font-size: 13px;
+      line-height: 20px;
+      min-height: 80px;
+      resize: vertical;
+    }
+
+    select {
+      display: block;
+      outline: none;
+      height: $form-height;
+      padding: 5px 10px;
+      width: 100%;
+      border: none;
+      border-bottom: 2px solid var(--at-color-border);
+      margin-bottom: 25px;
+      -webkit-appearance: none;
+      border-radius: 0;
+      background: var(--at-color-bg);
+    }
+
+    button {
+      text-align: center;
+      color: var(--at-color-light);
+      background: transparent;
+      border: 1px solid var(--at-color-bg-light);
+      line-height: $form-height;
+      cursor: pointer;
+      outline: none;
+      padding: 0 20px;
+      border-radius: 4px;
+      margin: 0 5px;
+      width: 100%;
+      user-select: none;
+
+      &:hover {
+        background: var(--at-color-bg-light);
+      }
+    }
+
+    input,
+    select,
+    button {
+      font-size: 15px;
+    }
+
+    .atk-file-upload-group {
+      height: 100px;
+      overflow: hidden;
+    }
+
+    .atk-uploading-wrap {
+      .atk-progress {
+        width: 100%;
+        height: 12px;
+        display: block;
+        overflow: hidden;
+        background: var(--at-color-bg-grey);
+        border-radius: 100px;
+        margin-bottom: 7px;
+        margin-top: 20px;
+
+        .atk-bar {
+          transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+          background: var(--at-color-main);
+          height: 100%;
+          width: 0%;
+          opacity: 0.7;
+        }
+      }
+
+      .atk-status {
+        color: var(--at-color-meta);
+        font-size: 14px;
+
+        .atk-curt {
+          color: var(--at-color-main);
+        }
+
+        .atk-abort {
+          cursor: pointer;
+          float: right;
+
+          &:hover {
+            color: var(--at-color-main);
+          }
+        }
+      }
+    }
+  }
+
+  .atk-log-wrap {
+    .atk-log-back-btn {
+      display: inline-block;
+      padding: 5px 33px;
+      cursor: pointer;
+      user-select: none;
+      border-right: 1px solid var(--at-color-border);
+      border-left: 1px solid transparent;
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+    }
+
+    .atk-log {
+    }
+
+    .atk-iframe {
+      width: 100%;
+      height: calc(100vh - 150px);
+      border: 0;
+      background: var(--at-color-bg-grey);
+      border: 3px solid var(--at-color-border);
+    }
+  }
+}

package/src/vue-i18n.d.ts

@@ -0,0 +1,7 @@
+import { DefineLocaleMessage } from 'vue-i18n'
+import { MessageSchema } from './i18n'
+
+declare module 'vue-i18n' {
+  // define the locale messages schema
+  export interface DefineLocaleMessage extends MessageSchema {}
+}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "ESNext.Promise"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Alias */
+    "baseUrl": ".", // Must be set, otherwise the alias won't work
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "typed-router.d.ts",
+    "components.d.ts",
+    "auto-imports.d.ts",
+    "env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": ["src/**/__tests__/*"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/typed-router.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/comments': RouteRecordInfo<'/comments', '/comments', Record<never, never>, Record<never, never>>,
+    '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
+    '/pages': RouteRecordInfo<'/pages', '/pages', Record<never, never>, Record<never, never>>,
+    '/settings': RouteRecordInfo<'/settings', '/settings', Record<never, never>, Record<never, never>>,
+    '/sites': RouteRecordInfo<'/sites', '/sites', Record<never, never>, Record<never, never>>,
+    '/transfer': RouteRecordInfo<'/transfer', '/transfer', Record<never, never>, Record<never, never>>,
+    '/users': RouteRecordInfo<'/users', '/users', Record<never, never>, Record<never, never>>,
+  }
+}

package/vite.config.ts

@@ -0,0 +1,71 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import Components from 'unplugin-vue-components/vite'
+import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers'
+import { fileURLToPath, URL } from 'node:url'
+import checker from 'vite-plugin-checker'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  build: {
+    target: 'es2015',
+    outDir: resolve(__dirname, 'dist'),
+    minify: 'terser',
+  },
+  plugins: [
+    VueRouter({ importMode: 'sync' }),
+    vue(),
+    Components({ resolvers: [HeadlessUiResolver()] }),
+    AutoImport({
+      imports: ['vue', VueRouterAutoImports, 'vue-i18n'],
+    }),
+    {
+      ...checker({
+        // vueTsc: true, // FIXME: see https://github.com/fi3ework/vite-plugin-checker/issues/306
+        eslint: {
+          useFlatConfig: true,
+          lintCommand: 'eslint .',
+        },
+      }),
+      apply: 'serve',
+    },
+    (() => ({
+      name: 'prod-vue-resolver',
+      resolveId(id) {
+        // @issue https://github.com/vitejs/vite/issues/6607
+        // dev mode vite resolves vue in other way
+        // only in prod mode, `id === vue` is true
+        if (id === 'vue') {
+          return resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm-bundler.js')
+        }
+      },
+    }))(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  server: {
+    port: 23367,
+    proxy: {
+      '/api': 'http://127.0.0.1:23366',
+      '/dist': 'http://127.0.0.1:23366',
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        loadPaths: [resolve(__dirname, 'src/style')],
+        silenceDeprecations: ['import'], // https://sass-lang.com/documentation/breaking-changes/import/
+        additionalData: `@import "variables";@import "extends";`,
+      },
+    },
+  },
+})