vuestic-ui/dist/esm-node/src/services/web-components/register-vuestic-web-components-essential.mjs.map

Vue 3 UI Framework

{"version":3,"file":"register-vuestic-web-components-essential.mjs","sources":["../../../../../src/services/web-components/register-vuestic-web-components-essential.ts"],"sourcesContent":["import { camelCaseToKebabCase } from './../../utils/text-case'\nimport { defineCustomElement } from 'vue'\nimport { type VuesticComponent } from '../vue-plugin/types/index'\n\n/**\n * We need to re-order component registration, so\n * components which provide something should be registered first\n */\nconst componentsOrder = [\n  'VaConfig', // VaConfig should be registered before any component, because it provides them config\n  'VaForm', // VaForm registered before any component, but not before VaConfig\n  'VaAccordion',\n  'VaFileUpload',\n  'VaSidebar',\n  'VaTabs',\n]\n\n/**\n * Register vuestic components as Custom Elements\n *\n * @see https://vuestic.dev/getting-started/web-components\n */\nexport const registerVuesticWebComponentsEssential = (options: {\n  /**\n   * In case you need pass some css to shadow-dom of Custom Element\n   *\n   * @example\n   * For Material Icons support inside Custom Element we need to pass `.material-icons` class.\n   *\n   * @default\n   * We do this by default, so you don't need to copy past it. In case you want to use different icon\n   * font, then you need to provide class manually.\n   * Notice: we don't need to pass font, but only style. Fonts are inherited from actual DOM.\n```css\n  .material-icons {\n    font-family: 'Material Icons';\n    font-weight: normal;\n    font-style: normal;\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    display: inline-block;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n    -webkit-font-smoothing: antialiased;\n}\n```\n   */\n  css?: string,\n\n  /**\n   * Vuestic Component that must be registered as Custom Elements.\n   *\n   * **Make sure to make all imports from `vuestic-ui/web-components`**.\n   */\n  components: Record<string, VuesticComponent>\n}) => {\n  const { css, components } = options\n\n  Object\n    .entries(components)\n    // Re-order components, so components which provides something always registered first\n    .sort(([nameA], [nameB]) => {\n      if (!componentsOrder.includes(nameA) && !componentsOrder.includes(nameB)) {\n        return 0 // Skip components without order\n      }\n\n      let indexA = componentsOrder.indexOf(nameA)\n      let indexB = componentsOrder.indexOf(nameB)\n      // If component is unordered, this means that it should be after ordered components\n      if (indexA === -1) { indexA = Number.MAX_SAFE_INTEGER }\n      if (indexB === -1) { indexB = Number.MAX_SAFE_INTEGER }\n\n      return indexA - indexB\n    })\n    .forEach(([name, component]) => {\n      const customElement = defineCustomElement(component as any)\n\n      // Add custom CSS to component's Shadow DOM\n      if (css && 'styles' in component) { component.styles.push(css) }\n\n      customElements.define(`${camelCaseToKebabCase(name)}`, customElement)\n    })\n}\n"],"names":[],"mappings":";;AAQA,MAAM,kBAAkB;AAAA,EACtB;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOa,MAAA,wCAAwC,CAAC,YAmChD;AACE,QAAA,EAAE,KAAK,WAAe,IAAA;AAGzB,SAAA,QAAQ,UAAU,EAElB,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,KAAK,MAAM;AACtB,QAAA,CAAC,gBAAgB,SAAS,KAAK,KAAK,CAAC,gBAAgB,SAAS,KAAK,GAAG;AACjE,aAAA;AAAA,IACT;AAEI,QAAA,SAAS,gBAAgB,QAAQ,KAAK;AACtC,QAAA,SAAS,gBAAgB,QAAQ,KAAK;AAE1C,QAAI,WAAW,IAAI;AAAE,eAAS,OAAO;AAAA,IAAiB;AACtD,QAAI,WAAW,IAAI;AAAE,eAAS,OAAO;AAAA,IAAiB;AAEtD,WAAO,SAAS;AAAA,EACjB,CAAA,EACA,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACxB,UAAA,gBAAgB,oBAAoB,SAAgB;AAGtD,QAAA,OAAO,YAAY,WAAW;AAAY,gBAAA,OAAO,KAAK,GAAG;AAAA,IAAE;AAE/D,mBAAe,OAAO,GAAG,qBAAqB,IAAI,CAAC,IAAI,aAAa;AAAA,EAAA,CACrE;AACL;"}