217 lines
		
	
	
		
			8.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			217 lines
		
	
	
		
			8.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import { NGrid, NGi, NEllipsis } from 'naive-ui';
 | 
						|
import { a as __unplugin_components_1 } from './chunk-8109fd17.js';
 | 
						|
import { defineComponent, computed, withCtx, createTextVNode, toDisplayString, createVNode, openBlock, createBlock, Fragment, renderList, useSSRContext } from 'vue';
 | 
						|
import { ssrRenderList, ssrRenderComponent, ssrInterpolate } from 'vue/server-renderer';
 | 
						|
import { useWindowSize } from '@vueuse/core';
 | 
						|
import { _ as _export_sfc } from './chunk-6003391e.js';
 | 
						|
import 'pinia';
 | 
						|
 | 
						|
const _sfc_main = /* @__PURE__ */ defineComponent({
 | 
						|
  __name: "device-information",
 | 
						|
  __ssrInlineRender: true,
 | 
						|
  setup(__props) {
 | 
						|
    const { width, height } = useWindowSize();
 | 
						|
    const sections = [
 | 
						|
      {
 | 
						|
        name: "Screen",
 | 
						|
        information: [
 | 
						|
          {
 | 
						|
            label: "Screen size",
 | 
						|
            value: computed(() => `${window.screen.availWidth} x ${window.screen.availHeight}`)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Orientation",
 | 
						|
            value: computed(() => window.screen.orientation.type)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Orientation angle",
 | 
						|
            value: computed(() => `${window.screen.orientation.angle}°`)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Color depth",
 | 
						|
            value: computed(() => `${window.screen.colorDepth} bits`)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Pixel ratio",
 | 
						|
            value: computed(() => `${window.devicePixelRatio} dppx`)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Window size",
 | 
						|
            value: computed(() => `${width.value} x ${height.value}`)
 | 
						|
          }
 | 
						|
        ]
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: "Device",
 | 
						|
        information: [
 | 
						|
          {
 | 
						|
            label: "Browser vendor",
 | 
						|
            value: computed(() => navigator.vendor)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Languages",
 | 
						|
            value: computed(() => navigator.languages.join(", "))
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "Platform",
 | 
						|
            value: computed(() => navigator.platform)
 | 
						|
          },
 | 
						|
          {
 | 
						|
            label: "User agent",
 | 
						|
            value: computed(() => navigator.userAgent)
 | 
						|
          }
 | 
						|
        ]
 | 
						|
      }
 | 
						|
    ];
 | 
						|
    return (_ctx, _push, _parent, _attrs) => {
 | 
						|
      const _component_c_card = __unplugin_components_1;
 | 
						|
      const _component_n_grid = NGrid;
 | 
						|
      const _component_n_gi = NGi;
 | 
						|
      const _component_n_ellipsis = NEllipsis;
 | 
						|
      _push(`<!--[-->`);
 | 
						|
      ssrRenderList(sections, ({ name, information }) => {
 | 
						|
        _push(ssrRenderComponent(_component_c_card, {
 | 
						|
          key: name,
 | 
						|
          title: name
 | 
						|
        }, {
 | 
						|
          default: withCtx((_, _push2, _parent2, _scopeId) => {
 | 
						|
            if (_push2) {
 | 
						|
              _push2(ssrRenderComponent(_component_n_grid, {
 | 
						|
                cols: "1 400:2",
 | 
						|
                "x-gap": "12",
 | 
						|
                "y-gap": "12"
 | 
						|
              }, {
 | 
						|
                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
 | 
						|
                  if (_push3) {
 | 
						|
                    _push3(`<!--[-->`);
 | 
						|
                    ssrRenderList(information, ({ label, value: { value } }) => {
 | 
						|
                      _push3(ssrRenderComponent(_component_n_gi, {
 | 
						|
                        key: label,
 | 
						|
                        class: "information"
 | 
						|
                      }, {
 | 
						|
                        default: withCtx((_3, _push4, _parent4, _scopeId3) => {
 | 
						|
                          if (_push4) {
 | 
						|
                            _push4(`<div class="label" data-v-3d05d2aa${_scopeId3}>${ssrInterpolate(label)}</div><div class="value" data-v-3d05d2aa${_scopeId3}>`);
 | 
						|
                            if (value) {
 | 
						|
                              _push4(ssrRenderComponent(_component_n_ellipsis, null, {
 | 
						|
                                default: withCtx((_4, _push5, _parent5, _scopeId4) => {
 | 
						|
                                  if (_push5) {
 | 
						|
                                    _push5(`${ssrInterpolate(value)}`);
 | 
						|
                                  } else {
 | 
						|
                                    return [
 | 
						|
                                      createTextVNode(toDisplayString(value), 1)
 | 
						|
                                    ];
 | 
						|
                                  }
 | 
						|
                                }),
 | 
						|
                                _: 2
 | 
						|
                              }, _parent4, _scopeId3));
 | 
						|
                            } else {
 | 
						|
                              _push4(`<div class="undefined-value" data-v-3d05d2aa${_scopeId3}> unknown </div>`);
 | 
						|
                            }
 | 
						|
                            _push4(`</div>`);
 | 
						|
                          } else {
 | 
						|
                            return [
 | 
						|
                              createVNode("div", { class: "label" }, toDisplayString(label), 1),
 | 
						|
                              createVNode("div", { class: "value" }, [
 | 
						|
                                value ? (openBlock(), createBlock(_component_n_ellipsis, { key: 0 }, {
 | 
						|
                                  default: withCtx(() => [
 | 
						|
                                    createTextVNode(toDisplayString(value), 1)
 | 
						|
                                  ]),
 | 
						|
                                  _: 2
 | 
						|
                                }, 1024)) : (openBlock(), createBlock("div", {
 | 
						|
                                  key: 1,
 | 
						|
                                  class: "undefined-value"
 | 
						|
                                }, " unknown "))
 | 
						|
                              ])
 | 
						|
                            ];
 | 
						|
                          }
 | 
						|
                        }),
 | 
						|
                        _: 2
 | 
						|
                      }, _parent3, _scopeId2));
 | 
						|
                    });
 | 
						|
                    _push3(`<!--]-->`);
 | 
						|
                  } else {
 | 
						|
                    return [
 | 
						|
                      (openBlock(true), createBlock(Fragment, null, renderList(information, ({ label, value: { value } }) => {
 | 
						|
                        return openBlock(), createBlock(_component_n_gi, {
 | 
						|
                          key: label,
 | 
						|
                          class: "information"
 | 
						|
                        }, {
 | 
						|
                          default: withCtx(() => [
 | 
						|
                            createVNode("div", { class: "label" }, toDisplayString(label), 1),
 | 
						|
                            createVNode("div", { class: "value" }, [
 | 
						|
                              value ? (openBlock(), createBlock(_component_n_ellipsis, { key: 0 }, {
 | 
						|
                                default: withCtx(() => [
 | 
						|
                                  createTextVNode(toDisplayString(value), 1)
 | 
						|
                                ]),
 | 
						|
                                _: 2
 | 
						|
                              }, 1024)) : (openBlock(), createBlock("div", {
 | 
						|
                                key: 1,
 | 
						|
                                class: "undefined-value"
 | 
						|
                              }, " unknown "))
 | 
						|
                            ])
 | 
						|
                          ]),
 | 
						|
                          _: 2
 | 
						|
                        }, 1024);
 | 
						|
                      }), 128))
 | 
						|
                    ];
 | 
						|
                  }
 | 
						|
                }),
 | 
						|
                _: 2
 | 
						|
              }, _parent2, _scopeId));
 | 
						|
            } else {
 | 
						|
              return [
 | 
						|
                createVNode(_component_n_grid, {
 | 
						|
                  cols: "1 400:2",
 | 
						|
                  "x-gap": "12",
 | 
						|
                  "y-gap": "12"
 | 
						|
                }, {
 | 
						|
                  default: withCtx(() => [
 | 
						|
                    (openBlock(true), createBlock(Fragment, null, renderList(information, ({ label, value: { value } }) => {
 | 
						|
                      return openBlock(), createBlock(_component_n_gi, {
 | 
						|
                        key: label,
 | 
						|
                        class: "information"
 | 
						|
                      }, {
 | 
						|
                        default: withCtx(() => [
 | 
						|
                          createVNode("div", { class: "label" }, toDisplayString(label), 1),
 | 
						|
                          createVNode("div", { class: "value" }, [
 | 
						|
                            value ? (openBlock(), createBlock(_component_n_ellipsis, { key: 0 }, {
 | 
						|
                              default: withCtx(() => [
 | 
						|
                                createTextVNode(toDisplayString(value), 1)
 | 
						|
                              ]),
 | 
						|
                              _: 2
 | 
						|
                            }, 1024)) : (openBlock(), createBlock("div", {
 | 
						|
                              key: 1,
 | 
						|
                              class: "undefined-value"
 | 
						|
                            }, " unknown "))
 | 
						|
                          ])
 | 
						|
                        ]),
 | 
						|
                        _: 2
 | 
						|
                      }, 1024);
 | 
						|
                    }), 128))
 | 
						|
                  ]),
 | 
						|
                  _: 2
 | 
						|
                }, 1024)
 | 
						|
              ];
 | 
						|
            }
 | 
						|
          }),
 | 
						|
          _: 2
 | 
						|
        }, _parent));
 | 
						|
      });
 | 
						|
      _push(`<!--]-->`);
 | 
						|
    };
 | 
						|
  }
 | 
						|
});
 | 
						|
 | 
						|
/* unplugin-vue-components disabled */const deviceInformation_vue_vue_type_style_index_0_scoped_3d05d2aa_lang = '';
 | 
						|
 | 
						|
const _sfc_setup = _sfc_main.setup;
 | 
						|
_sfc_main.setup = (props, ctx) => {
 | 
						|
  const ssrContext = useSSRContext();
 | 
						|
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/tools/device-information/device-information.vue");
 | 
						|
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 | 
						|
};
 | 
						|
const deviceInformation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3d05d2aa"]]);
 | 
						|
 | 
						|
export { deviceInformation as default };
 |