Merge 0f8463f92c into b47d132839

.eslintrc-auto-import.json

@@ -286,6 +286,9 @@
     "watchTriggerable": true,
     "watchWithFilter": true,
     "whenever": true,
-    "toValue": true
+    "toValue": true,
+    "injectLocal": true,
+    "provideLocal": true,
+    "useClipboardItems": true
   }
 }

auto-imports.d.ts

@@ -36,6 +36,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -65,6 +66,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -128,6 +130,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']

components.d.ts

@@ -90,17 +90,29 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
+    ImageToCss: typeof import('./src/tools/image-to-css/image-to-css.vue')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -129,20 +141,44 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NP: typeof import('naive-ui')['NP']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

package.json

@@ -89,6 +89,7 @@
     "qrcode": "^1.5.1",
     "randexp": "^0.5.3",
     "sql-formatter": "^13.0.0",
+    "svgo": "^3.3.2",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",
@@ -142,11 +143,13 @@
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-pwa": "^0.16.0",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vite-svg-loader": "^4.0.0",
     "vitest": "^0.34.0",
     "workbox-window": "^7.0.0",
     "zx": "^7.2.1"
-  }
+  },
+  "packageManager": "pnpm@8.15.3"
 }

src/components/TextareaCopyable.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
   }>(),
   {
     followHeightOf: null,
@@ -49,7 +50,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
       <div absolute right-10px top-10px>

src/tools/image-to-css/image-to-css.service.ts

@@ -0,0 +1,72 @@
+import { type Config, type PluginConfig, optimize } from 'svgo';
+
+function svgo(config: Config) {
+  return (data: string) => {
+    const { plugins = [], ...rest } = config || {};
+    return optimize(data, {
+      ...rest,
+      plugins: [
+        ...(plugins.length > 0 ? plugins : ['preset-default']),
+        'removeXMLNS',
+      ] as PluginConfig[],
+    }).data.replace(/^<svg/g, '<svg xmlns="http://www.w3.org/2000/svg"');
+  };
+}
+
+export function encodeStr(svgStr: string) {
+  const encoded = encodeURIComponent(svgStr)
+    .replace(/%20/g, ' ')
+    .replace(/%3D/g, '=')
+    .replace(/%3B/g, ';')
+    .replace(/%3A/g, ':')
+    .replace(/%2F/g, '/')
+    .replace(/%2C/g, ',')
+    .replace(/%22/g, '\'');
+
+  return `data:image/svg+xml,${encoded}`;
+}
+
+export type CSSType = 'Background' | 'Border' | 'ListItemBullet' | 'Url';
+
+async function fileToDataUrl(file: File) {
+  if (file.type === 'image/svg+xml') {
+    const svgContent = (await (new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = () => resolve(reader.result?.toString() ?? '');
+      reader.onerror = error => reject(error);
+    })));
+    return svgToDataUrl(svgContent);
+  }
+
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result?.toString() ?? '');
+    reader.onerror = error => reject(error);
+  });
+}
+
+function svgToDataUrl(svg: string) {
+  return encodeStr(svgo({})(svg));
+}
+
+export async function imageToCSS(
+  image: File | string,
+  type: CSSType,
+) {
+  if (image === '' || !image) {
+    return '';
+  }
+  const dataURI = image instanceof File ? await fileToDataUrl(image) : svgToDataUrl(image);
+  switch (type) {
+    case 'Background':
+      return `background-image: url(${dataURI});`;
+    case 'Border':
+      return `border-image-source: url(${dataURI});`;
+    case 'ListItemBullet':
+      return `li{\n  list-style-image: ${dataURI};\n}\nli::marker{\n  font-size: 1.5em;\n}'}`;
+    default:
+      return `url(${dataURI})`;
+  }
+}

src/tools/image-to-css/image-to-css.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { type CSSType, imageToCSS } from './image-to-css.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const typeOptions = [
+  { label: 'Background', value: 'Background' },
+  { label: 'Border', value: 'Border' },
+  { label: 'ListItem Bullet', value: 'ListItemBullet' },
+  { label: 'CSS Data Url', value: 'Url' },
+];
+
+const inputType = ref<'file' | 'content'>('file');
+const type = ref('Background');
+const svgContent = ref('');
+const fileInput = ref() as Ref<File | null>;
+const cssCode = computedAsync(async () => {
+  try {
+    if (inputType.value === 'file' && fileInput.value) {
+      return (await imageToCSS(fileInput.value, type.value as CSSType));
+    }
+    else {
+      return (await imageToCSS(svgContent.value, type.value as CSSType));
+    }
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+async function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+
+watch(svgContent, (_, newValue) => {
+  if (newValue !== '') {
+    fileInput.value = null;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <n-radio-group v-model:value="inputType" name="radiogroup" mb-2 flex justify-center>
+      <n-space>
+        <n-radio
+          value="file"
+          label="File"
+        />
+        <n-radio
+          value="content"
+          label="Content"
+        />
+      </n-space>
+    </n-radio-group>
+
+    <c-file-upload
+      v-if="inputType === 'file'"
+      title="Drag and drop an image here, or click to select a file"
+      paste-image
+      @file-upload="onUpload"
+    />
+
+    <c-input-text
+      v-if="inputType === 'content'"
+      v-model:value="svgContent"
+      multiline
+      rows="5"
+      label="SVG Content"
+      placeholder="Paste your SVG content here"
+      mb-2
+    />
+
+    <n-divider />
+
+    <c-select
+      v-model:value="type"
+      label-position="top"
+      label="CSS Type:"
+      :options="typeOptions"
+      placeholder="Select CSS Type"
+    />
+
+    <div v-if="cssCode !== ''">
+      <n-divider />
+
+      <h3>CSS Code</h3>
+      <TextareaCopyable
+        :value="cssCode"
+        word-wrap
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/image-to-css/index.ts

@@ -0,0 +1,12 @@
+import { BrandCss3 } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Image to CSS',
+  path: '/image-to-css',
+  description: 'Convert image to CSS (url, background, ...)',
+  keywords: ['image', 'css'],
+  component: () => import('./image-to-css.vue'),
+  icon: BrandCss3,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/index.ts

@@ -7,6 +7,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as imageToCss } from './image-to-css';
 import { tool as xmlToJson } from './xml-to-json';
 import { tool as jsonToXml } from './json-to-xml';
 import { tool as regexTester } from './regex-tester';
@@ -137,6 +138,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      imageToCss,
     ],
   },
   {

vite.config.ts

@@ -15,6 +15,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
 import { configDefaults } from 'vitest/config';
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 const baseUrl = process.env.BASE_URL ?? '/';
 
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {
@@ -113,4 +115,4 @@ export default defineConfig({
   build: {
     target: 'esnext',
   },
-});
+});