@luizleon/sf.prefeiturasp.vuecomponents 0.0.20 → 0.0.22

package/src/style/tema.scss

@@ -0,0 +1,169 @@
+@use "sass:color";
+@import "./src/mixins";
+@import "./src/functions";
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,200&display=block");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
+@import "./src/normalize";
+
+:root {
+  --window-height: 100%;
+  --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  --font-size: 1rem;
+  --font-weight: 400;
+  --line-height: 1.15;
+  --header-height: 60px;
+  --main-height: calc(var(--window-height) - var(--header-height));
+}
+
+html,
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+
+html {
+  user-select: none;
+  @include colors($colors);
+
+  &.light {
+    color-scheme: light;
+    --preloader-color: #334d5c;
+    --preloader-background: rgb(241, 241, 241);
+    @include colors(themeColors(), false);
+    @include colors-hsl(themeColors());
+  }
+
+  &.dark {
+    color-scheme: dark;
+    --preloader-color: rgb(0, 65, 95);
+    --preloader-background: #030d1b;
+    @include colors(themeColors(true), false);
+    @include colors-hsl(themeColors(true));
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: var(--window-height);
+  > div#app {
+    height: var(--window-height);
+    overflow: hidden;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  &.sf-component-disabled,
+  &.sf-component-disabled * {
+    cursor: default !important;
+    pointer-events: none !important;
+    user-select: none !important;
+    color: var(--disabled-color) !important;
+  }
+  &:disabled,
+  &:disabled *,
+  &.sf-component-freeze,
+  &.sf-component-freeze *,
+  &.sf-component-loading,
+  &.sf-component-loading * {
+    cursor: default !important;
+    pointer-events: none !important;
+    user-select: none !important;
+  }
+  &:focus-visible {
+    outline: 2px solid var(--surface-1300-color);
+    outline-offset: 1px;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: var(--primary-color);
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+input {
+  color: var(--text-color);
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  transition: background-color 600000s 0s !important;
+  color: var(--text-color) !important;
+}
+
+input:disabled:-webkit-autofill {
+  opacity: 0.5 !important;
+}
+
+.hidden--visually {
+  border: 0;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  input,
+  select {
+    transform: scale(0);
+  }
+}
+
+::-webkit-scrollbar,
+::-webkit-scrollbar-corner {
+  background-color: var(--surface-200-color) !important;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: var(--surface-400-color) !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--surface-900-color) !important;
+  border: 4px solid var(--surface-200-color) !important;
+  border-radius: 6px !important;
+}
+
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 200, "opsz" 48;
+}
+
+/*
+* Utilidades
+*/
+.sf-select-none {
+  user-select: none;
+}
+.sf-select-text {
+  user-select: text;
+}
+.sf-select-all {
+  user-select: all;
+}
+.sf-select-auto {
+  user-select: auto;
+}
+
+@include theme-colors;
+@import "./src/ripple";
+@import "./src/display";
+@import "./src/spacing";
+@import "./src/size";
+@import "./src/flexbox";
+@import "./src/gap";
+@import "./src/animation";
+@import "./src/grid";
+@import "./src/typography";

package/src/ts-helpers.d.ts

@@ -0,0 +1,57 @@
+import {
+  ComponentCustomProps,
+  VNodeProps,
+  EmitsOptions,
+  AllowedComponentProps,
+  ObjectEmitsOptions,
+} from "vue";
+
+declare type PublicProps = VNodeProps &
+  AllowedComponentProps &
+  ComponentCustomProps;
+
+declare type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never;
+
+declare type EmitFn<
+  Options = ObjectEmitsOptions,
+  Event extends keyof Options = keyof Options
+> = Options extends Array<infer V>
+  ? (event: V, ...args: any[]) => void
+  : {} extends Options
+  ? (event: string, ...args: any[]) => void
+  : UnionToIntersection<
+      {
+        [key in Event]: Options[key] extends (
+          ...args: infer Args
+        ) => any
+          ? (event: key, ...args: Args) => void
+          : (event: key, ...args: any[]) => void;
+      }[Event]
+    >;
+
+export class ClassComponent<
+  Props,
+  Slots,
+  Emits extends EmitsOptions = {}
+> {
+  $props: Props & PublicProps;
+  $slots: Slots;
+  $emit: EmitFn<Emits>;
+}
+
+export type GlobalComponentConstructor<T> = {
+  new (): T;
+};
+
+/**
+ * Custom types
+ */
+export declare type Booleanish = boolean | "true" | "false";
+
+export declare type Numberish = number | string;
+
+export declare type Nullable<T = void> = T | null;

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "lib",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": ["src"],
+  "exclude": ["src/App.vue"]
+}

package/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueTypeImports from "vite-plugin-vue-type-imports";
+import dts from "vite-plugin-dts";
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "Lib",
+      fileName: (format) => `lib.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+    sourcemap: true,
+  },
+  plugins: [vue(), vueTypeImports(), dts({ cleanVueFileName: true })],
+});