@milaboratories/uikit 1.2.3

package/src/layout/PlGrid/PlGrid.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+/** Grid container */
+export default {
+  name: 'PlGrid',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import './pl-grid.scss';
+
+const props = defineProps<{
+  columns: number;
+}>();
+
+const style = computed(() => {
+  return {
+    gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,
+  };
+});
+</script>
+
+<template>
+  <div class="pl-layout-component pl-grid" :style="style">
+    <slot />
+  </div>
+</template>

package/src/layout/PlGrid/index.ts

@@ -0,0 +1 @@
+export { default as PlGrid } from './PlGrid.vue';

package/src/layout/PlGrid/pl-grid.scss

@@ -0,0 +1,5 @@
+.pl-grid {
+  display: grid;
+  row-gap: var(--gap-h);
+  column-gap: var(--gap-v);
+}

package/src/layout/PlRow/PlRow.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+/** Horizontal Flex flow container */
+export default {
+  name: 'PlRow',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-row.scss';
+
+defineProps<{
+  wrap?: boolean;
+  alignCenter?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="pl-layout-component pl-row" :class="{ wrap, 'align-center': alignCenter }">
+    <slot />
+  </div>
+</template>

package/src/layout/PlRow/index.ts

@@ -0,0 +1 @@
+export { default as PlRow } from './PlRow.vue';

package/src/layout/PlRow/pl-row.scss

@@ -0,0 +1,13 @@
+.pl-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-h);
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.align-center {
+    align-items: center;
+  }
+}

package/src/layout/PlSpacer/PlSpacer.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+/** Fills flex remaining space */
+export default {
+  name: 'PlSpacer',
+};
+</script>
+
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <div class="pl-layout-component" style="flex-grow: 1" />
+</template>

package/src/layout/PlSpacer/index.ts

@@ -0,0 +1 @@
+export { default as PlSpacer } from './PlSpacer.vue';

package/src/style.css

@@ -0,0 +1,5 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

package/src/types.ts

@@ -0,0 +1,69 @@
+import type { ImportFileHandle, Platforma, StorageHandle } from '@platforma-sdk/model';
+import type { Ref, ComputedRef } from 'vue';
+
+export type Size = 'small' | 'medium' | 'large';
+
+export type MaybeRef<T> = T | Ref<T>;
+
+export type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
+
+export type MaybeComputedRef<T> = MaybeReadonlyRef<T> | MaybeRef<T>;
+
+export type ElementPosition = Omit<DOMRect, 'toJSON'> & {
+  scrollTop: number;
+  scrollLeft: number;
+  scrollHeight: number;
+  scrollWidth: number;
+  clientHeight: number;
+  clientWidth: number;
+  offsetY: number;
+  offsetX: number;
+};
+
+export type SimpleOption<T = unknown> = {
+  text: string;
+  value: T;
+};
+
+export type ListOption<T = unknown> = {
+  text: string;
+  description?: string;
+  value: T;
+};
+
+export const maskIcons16 = [
+  'checkmark',
+  'import',
+  'clear',
+  'chevron-right',
+  'add',
+  'play',
+  'loading',
+  'arrow-right',
+  'clipboard',
+  'link',
+  'comp',
+  'close',
+  'restart',
+  'stop',
+] as const;
+
+export type MaskIconName16 = (typeof maskIcons16)[number];
+
+export const maskIcons24 = ['paper-clip', 'cloud-up', 'success', 'restart', 'close'];
+
+export type MaskIconName24 = (typeof maskIcons24)[number];
+
+export type SliderMode = 'input' | 'text';
+
+export type ImportedFiles = {
+  storageHandle: StorageHandle;
+  files: ImportFileHandle[];
+};
+
+declare global {
+  const platforma: Platforma | undefined;
+  interface Window {
+    platforma: Platforma | undefined;
+  }
+}

package/src/utils/DoubleContour.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup></script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <div class="double-contour">
+    <div v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/utils/InnerBorder.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="inner-border">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  // inheritAttrs: false
+};
+</script>

package/src/utils/WebStopWatchElement.ts

@@ -0,0 +1,43 @@
+const styles = new CSSStyleSheet();
+
+styles.replaceSync(`
+  :host {
+    font-size: var(--font-size-3);
+    font-style: italic;
+  }
+`);
+
+export class WebStopWatchElement extends HTMLElement {
+  static define(tag = 'web-stop-watch') {
+    customElements.define(tag, this);
+  }
+
+  // Give this element its own encapsulated DOM
+  shadowRoot = this.attachShadow({ mode: 'open' });
+
+  // Initialize private state
+  #start = Date.now();
+
+  connectedCallback() {
+    // Add the shared styles
+    this.shadowRoot.adoptedStyleSheets = [styles];
+
+    // Start the timer
+    this.#tick();
+  }
+
+  #tick() {
+    const milliseconds = Date.now() - this.#start;
+    const minutes = String(Math.floor(milliseconds / (1000 * 60))).padStart(2, '0');
+    const seconds = String(Math.floor((milliseconds / 1000) % 60)).padStart(2, '0');
+    const hundredths = String(Math.floor((milliseconds % 1000) / 10)).padStart(2, '0');
+
+    this.shadowRoot.replaceChildren(`${minutes}:${seconds}:${hundredths}`);
+
+    // Schedule next update
+    requestAnimationFrame(() => this.#tick());
+  }
+}
+
+// Register the element with the Custom Element Registry
+WebStopWatchElement.define();

package/src/utils/useLabelNotch.ts

@@ -0,0 +1,42 @@
+import { onBeforeUnmount, type Ref } from 'vue';
+import { tap, tapIf } from '@/helpers/functions';
+import { onChanged } from '@/composition/utils';
+import { call } from '@/helpers/utils';
+import { startResizeObserving, stopResizeObserving } from '@/global/resizeObserver';
+
+const offset = 8; // see --label-offset-left-x css var
+
+const contourOffset = 4; // see --contour-offset css var
+
+/**
+ * Adjust the width of the cutout on the clip path for the notched label (TextField, Dropdown)
+ */
+export function useLabelNotch(root: Ref<HTMLElement | undefined>, labelSelector = 'label') {
+  const labels = new Set<Element>();
+
+  onChanged(() => {
+    tapIf(root?.value, (el) => {
+      const label = el.querySelector(labelSelector);
+
+      if (!label) {
+        return;
+      }
+
+      labels.add(label);
+
+      startResizeObserving(label, () => {
+        const rightOffset = call(() => {
+          return label.getBoundingClientRect().width + tap(offset, (n) => (Number.isNaN(n) ? contourOffset : n + contourOffset)); //
+        });
+
+        if (el.style.getPropertyValue('--label-offset-right-x') !== `${rightOffset}px`) {
+          el.style.setProperty('--label-offset-right-x', `${rightOffset}px`);
+        }
+      });
+    });
+  });
+
+  onBeforeUnmount(() => {
+    Array.from(labels.values()).map((el) => stopResizeObserving(el));
+  });
+}

package/src/utils/useValidation.ts

@@ -0,0 +1,25 @@
+import { computed, type Ref } from 'vue';
+
+// Validation rules similar to those in Vuetify
+
+export function validateFormValue<T>(value: T, rules: ((v: T) => boolean | string)[]) {
+  const errors: string[] = [];
+  if (rules && rules.length > 0) {
+    rules.forEach((rule) => {
+      const err = rule(value);
+      if (typeof err === 'string') {
+        errors.push(err);
+      }
+    });
+  }
+  return {
+    isValid: errors.length === 0,
+    errors: errors,
+  };
+}
+
+export function useValidation<T>(val: Ref<T>, rules: ((v: T) => boolean | string)[]) {
+  return computed(() => {
+    return validateFormValue(val.value, rules);
+  });
+}

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+declare const APP_VERSION: string;
+
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue';
+//   // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+//   const component: DefineComponent<{}, {}, any>;
+//   export default component;
+// }

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "emitDeclarationOnly": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.json"]
+}

package/tsconfig.node.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "composite": false,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["node"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { fileURLToPath, URL } from 'node:url';
+import { exec } from 'child_process';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          whitespace: 'preserve',
+          isCustomElement: (tag) => {
+            return tag.startsWith('web');
+          },
+        },
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }) as any,
+    {
+      name: 'run-build-types',
+      closeBundle() {
+        exec('npm run build:types', (err, stdout, stderr) => {
+          if (err) {
+            console.error(`Error running build:types: ${stderr}`, err);
+            return;
+          }
+        });
+      },
+    },
+  ],
+  define: {
+    APP_VERSION: JSON.stringify(process.env.npm_package_version),
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@icons': fileURLToPath(new URL('./src/assets/icons', import.meta.url)),
+    },
+  },
+  build: {
+    sourcemap: process.env.DEV_SOURCE_MAP === '1',
+    emptyOutDir: false,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: [resolve(__dirname, 'src/index.ts')],
+      name: 'pl-uikit',
+      // the proper extensions will be added
+      fileName: 'pl-uikit',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      setupFiles: ['./src/__tests__/setup.ts'],
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+);